/*! * Iron & Estética — un sistema de diseño, dos variantes. * La variante se activa con la clase del : .iron-theme-estetica | .iron-theme-iron * Ninguna regla de componente se duplica: solo cambian las variables. */ /* ============================================================ 1. VARIANTES (variables) ============================================================ */ /* --- Estética: nude, dorado, cursiva, formas orgánicas --- */ .iron-theme-estetica { --primary: #8B6655; --accent: #D6B36A; --soft: #C9A08A; --bg: #FBF7F3; --bg-2: #F4EBE3; --surface: #FFFFFF; --on-dark: #FFFFFF; --border: rgba(139, 102, 85, .16); --accent-border: rgba(214, 179, 106, .30); --shadow: rgba(139, 102, 85, .14); --shadow-deep: rgba(139, 102, 85, .28); --panel-tint: rgba(0, 0, 0, .08); --font-body: 'Montserrat', system-ui, sans-serif; --font-display: 'Great Vibes', cursive; --title-weight: 400; --title-transform: none; --title-spacing: normal; --h1: clamp(3rem, 7vw, 6rem); --h2: clamp(2.4rem, 4.6vw, 4.25rem); --display-lg: clamp(3.5rem, 7vw, 6.875rem); --display-md: clamp(2rem, 3vw, 2.875rem); --radius-art: 48% 48% 32px 32px; --radius-card: 26px; --radius-panel: 36px; --radius-btn: 99px; --radius-img: 22px; --exp-radius: 0 45% 0 0; --hero-bg: radial-gradient(120% 130% at 85% 12%, rgba(214, 179, 106, .16), transparent 45%), radial-gradient(110% 110% at 8% 95%, rgba(201, 160, 138, .20), transparent 50%), linear-gradient(115deg, #FDFAF7 0 54%, #ECE2D9 54% 100%); --experience-bg: #E8E2DA; --contact-bg: linear-gradient(135deg, #8B6655, #6F4F42); --card-bg: linear-gradient(180deg, #FFFFFF, #FBF4ED); --card-featured-bg: linear-gradient(180deg, #EFE6DD, #E5DDD3); --panel-bg: linear-gradient(180deg, #FFFFFF, #F6EEE7); --glass-bg: rgba(255, 255, 255, .64); --glass-bg-strong: rgba(255, 255, 255, .78); --glass-line: rgba(255, 255, 255, .72); --glass-shadow: rgba(139, 102, 85, .18); --glow-1: rgba(214, 179, 106, .16); --glow-2: rgba(201, 160, 138, .14); --art-overlay: linear-gradient(160deg, rgba(255, 255, 255, .35), rgba(139, 102, 85, .55)); --exp-overlay: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(201, 160, 138, .60)); --gal-overlay: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(201, 160, 138, .35)); --btn-invert-color: #8B6655; /* Fotos reales del local (assets/img). Se pueden reemplazar desde el Personalizador. */ --img-hero: url('../img/cabina-1.jpg'); --img-ritual: url('../img/recepcion.jpg'); --img-b1: url('../img/facial.jpg'); --img-b2: url('../img/consultorio.jpg'); --img-b3: url('../img/cabina-2.jpg'); --img-b4: url('../img/aparatologia.jpg'); --img-b5: url('../img/tratamiento-facial-vale.jpeg'); --img-b6: url('../img/cabina-tratamiento-vale.jpeg'); --img-b7: url('../img/asesoramiento-vale.jpeg'); } /* --- Iron: carbón, bronce, condensada, formas rectas --- */ .iron-theme-iron { --primary: #ECEAE6; --accent: #C8962F; --soft: #6B7078; --bg: #14171B; --bg-2: #1A1E24; --surface: #1D2128; --on-dark: #FFFFFF; --border: rgba(255, 255, 255, .10); --accent-border: rgba(200, 150, 47, .35); --shadow: rgba(0, 0, 0, .45); --shadow-deep: rgba(0, 0, 0, .65); --panel-tint: rgba(255, 255, 255, .04); --font-body: 'Montserrat', system-ui, sans-serif; --font-display: 'Oswald', system-ui, sans-serif; --title-weight: 600; --title-transform: uppercase; --title-spacing: .04em; --h1: clamp(2.6rem, 5.4vw, 4.625rem); --h2: clamp(2rem, 3.6vw, 3.25rem); --display-lg: clamp(2.75rem, 5vw, 4.875rem); --display-md: clamp(1.6rem, 2.4vw, 2.125rem); --radius-art: 18px; --radius-card: 14px; --radius-panel: 18px; --radius-btn: 6px; --radius-img: 12px; --exp-radius: 0; --hero-bg: radial-gradient(120% 130% at 85% 12%, rgba(200, 150, 47, .18), transparent 45%), radial-gradient(110% 110% at 8% 95%, rgba(255, 255, 255, .06), transparent 50%), linear-gradient(115deg, #14171B 0 54%, #1F242B 54% 100%); --experience-bg: #1A1E24; --contact-bg: linear-gradient(135deg, #1D2128, #0F1216); --card-bg: linear-gradient(180deg, #1D2128, #171A1F); --card-featured-bg: linear-gradient(180deg, #262B33, #1D2128); --panel-bg: linear-gradient(180deg, #1D2128, #16191E); --glass-bg: rgba(29, 33, 40, .58); --glass-bg-strong: rgba(38, 43, 51, .74); --glass-line: rgba(255, 255, 255, .14); --glass-shadow: rgba(0, 0, 0, .38); --glow-1: rgba(200, 150, 47, .20); --glow-2: rgba(255, 255, 255, .05); --art-overlay: linear-gradient(160deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .72)); --exp-overlay: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .75)); --gal-overlay: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); --btn-invert-color: #14171B; /* Placeholders temáticos: la variante Iron aún no tiene fotos propias. */ --img-hero: url('https://loremflickr.com/900/1100/gym,weights?lock=21'); --img-ritual: url('https://loremflickr.com/900/1200/gym,training?lock=33'); --img-b1: url('https://loremflickr.com/600/750/dumbbell,gym?lock=12'); --img-b2: url('https://loremflickr.com/600/700/fitness?lock=45'); --img-b3: url('https://loremflickr.com/600/780/barbell,strength?lock=8'); --img-b4: url('https://loremflickr.com/600/700/crossfit?lock=7'); --img-b5: url('https://loremflickr.com/600/760/gym,coach?lock=19'); --img-b6: url('https://loremflickr.com/600/760/workout,fitness?lock=29'); --img-b7: url('https://loremflickr.com/600/760/trainer,gym?lock=39'); } /* ============================================================ 2. Base ============================================================ */ body { background: var(--bg); color: var(--primary); font-family: var(--font-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2 { font-family: var(--font-display); font-weight: var(--title-weight); text-transform: var(--title-transform); letter-spacing: var(--title-spacing); color: var(--primary); margin: 0; } h1 em, h2 em { color: var(--accent); font-style: normal; font-weight: inherit; } a { color: var(--accent); } .container { width: min(1120px, 90vw); margin-inline: auto; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--surface); color: var(--primary); padding: 12px 20px; } .skip-link:focus { left: 12px; top: 12px; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ============================================================ 3. Cabecera ============================================================ */ .site-header { background: var(--bg); padding: 18px 0; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { color: var(--primary); font-size: 1.375rem; font-weight: 500; letter-spacing: .02em; } .brand strong { color: var(--accent); margin-right: 10px; } .nav__list { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; } .nav__list a { color: var(--primary); font-size: .875rem; font-weight: 500; position: relative; transition: color .3s ease; } .nav__list a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--accent); transition: width .3s ease; } .nav__list a:hover { color: var(--accent); } .nav__list a:hover::after { width: 100%; } /* ============================================================ 4. Secciones y fondos ============================================================ */ .section { background: var(--bg); padding: 130px 0; } .section--tight { padding: 40px 0 130px; background: radial-gradient(70% 60% at 80% 8%, var(--glow-1), transparent 62%), radial-gradient(60% 50% at 8% 92%, var(--glow-2), transparent 64%), var(--bg); } /* Fondo cálido con resplandores que respiran */ .section--soft { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg), var(--bg-2)); } .section--soft::before, .section--soft::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; animation: ironGlow 9s ease-in-out infinite; } .section--soft::before { top: -130px; right: -110px; width: 440px; height: 440px; background: radial-gradient(circle, var(--glow-1), transparent 70%); } .section--soft::after { bottom: -150px; left: -120px; width: 400px; height: 400px; background: radial-gradient(circle, var(--glow-2), transparent 70%); animation-delay: 2s; } .section--soft-alt::before { top: auto; bottom: -120px; background: radial-gradient(circle, var(--glow-2), transparent 70%); } .section--soft-alt::after { bottom: auto; top: -130px; background: radial-gradient(circle, var(--glow-1), transparent 70%); } .section--soft > .container { position: relative; z-index: 1; } /* ============================================================ 5. Tipografía de apoyo ============================================================ */ .eyebrow { color: var(--accent); font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; position: relative; display: inline-block; padding-left: 34px; margin: 0 0 18px; } .eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); background-size: 200% 100%; animation: ironShimmer 3s linear infinite; } .section-title { font-size: var(--h2); line-height: 1.05; } .section-title::after { content: ''; display: block; width: 70px; height: 2px; margin-top: 18px; background: linear-gradient(90deg, var(--accent), transparent); } .text-center { text-align: center; } .text-center .eyebrow::before { display: none; } .text-center .eyebrow { padding-left: 0; } .text-center .section-title::after { margin-inline: auto; } .lead { font-size: 1.0625rem; line-height: 1.8; max-width: 480px; } .body-text { font-size: 1rem; line-height: 1.8; max-width: 680px; margin-top: 30px; } .small-text { font-size: .9375rem; line-height: 1.7; } /* ============================================================ 6. Botones ============================================================ */ .btn { display: inline-block; border: 1px solid transparent; border-radius: var(--radius-btn); padding: 14px 32px; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease; } .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px var(--shadow); } .btn--primary { background: linear-gradient(120deg, var(--accent), var(--soft)); color: #FFFFFF; } .btn--invert { background: var(--on-dark); color: var(--btn-invert-color); } /* ============================================================ 7. Portada ============================================================ */ .hero { position: relative; overflow: hidden; min-height: 720px; display: flex; align-items: center; background: var(--hero-bg); padding: 95px 0; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero__title { font-size: var(--h1); line-height: .95; } .hero__title::after { content: ''; display: block; width: 90px; height: 2px; margin-top: 22px; background: linear-gradient(90deg, var(--accent), transparent); } .hero__lead { margin: 26px 0 34px; } .hero__art { position: relative; min-height: 560px; border-radius: var(--radius-art); background: var(--art-overlay), var(--img-hero) center / cover no-repeat; border: 1px solid var(--border); box-shadow: 0 30px 70px var(--shadow-deep); display: flex; align-items: flex-end; justify-content: center; padding: 40px; animation: ironFloat 6s ease-in-out infinite; } /* Marco dorado flotante */ .hero__art::before { content: ''; position: absolute; inset: -14px; border: 1px solid var(--accent-border); border-radius: var(--radius-art); pointer-events: none; } /* Detalle circular decorativo */ .hero__art::after { content: ''; position: absolute; top: 24px; right: 28px; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: var(--glow-1); pointer-events: none; } .hero__art-caption { font-family: var(--font-display); font-size: var(--display-md); line-height: 1.05; color: var(--on-dark); text-align: center; text-transform: var(--title-transform); letter-spacing: var(--title-spacing); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); margin: 0; } /* ============================================================ 8. Tratamientos ============================================================ */ .services__head { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: end; margin-bottom: 60px; } /* Bento: 6 columnas. Las tarjetas destacadas ocupan 3, las normales 2. */ .services__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 26px; } .card { position: relative; overflow: hidden; grid-column: span 2; display: flex; flex-direction: column; min-height: 330px; padding: 36px; border: 1px solid var(--glass-line); border-radius: var(--radius-card); background: linear-gradient(135deg, var(--glass-bg-strong), transparent 42%), var(--card-bg); box-shadow: 0 18px 44px var(--glass-shadow); isolation: isolate; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .card--featured { grid-column: span 3; min-height: 380px; } /* Línea dorada que se dibuja al pasar el mouse */ .card::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transform-origin: left; z-index: 2; transition: transform .45s ease; } .card::after { content: ''; position: absolute; inset: 1px; border-radius: calc(var(--radius-card) - 1px); background: linear-gradient(135deg, rgba(255, 255, 255, .42), transparent 36%), radial-gradient(90% 70% at 100% 0, var(--glow-1), transparent 58%); opacity: .55; pointer-events: none; z-index: 0; transition: opacity .35s ease; } .card > * { position: relative; z-index: 1; } .card:hover::before { transform: scaleX(1); } .card:hover { transform: translateY(-8px); border-color: var(--accent-border); box-shadow: 0 28px 70px var(--glass-shadow); } .card--featured { background: linear-gradient(135deg, var(--glass-bg-strong), transparent 46%), var(--card-featured-bg); } .card:hover::after { opacity: .85; } @supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) { .card, .booking__frame, .testimonial, .experience__content, .steps li { -webkit-backdrop-filter: blur(18px) saturate(1.12); backdrop-filter: blur(18px) saturate(1.12); } } .card__icon { width: 60px; height: 60px; margin-bottom: 22px; object-fit: contain; transition: transform .4s ease; } .card:hover .card__icon { transform: scale(1.12) rotate(-6deg); } .card__title { font-family: var(--font-display); font-weight: var(--title-weight); text-transform: var(--title-transform); letter-spacing: var(--title-spacing); font-size: var(--display-md); color: var(--primary); line-height: 1.15; margin: 0 0 18px; } .card__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; } .card__list li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.55; margin-bottom: 9px; } .card__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .card__link { display: inline-block; margin-top: 24px; font-size: .875rem; font-weight: 500; align-self: flex-start; } /* ============================================================ 8b. Reservas (widget embebido) ============================================================ */ .booking__frame { margin-top: 50px; padding: 40px; min-height: 320px; background: var(--panel-bg); border: 1px solid var(--accent-border); border-radius: var(--radius-panel); box-shadow: 0 34px 80px var(--shadow); } /* El widget se inyecta acá; le damos un color de texto coherente. */ .booking__frame, .booking__frame * { color: var(--primary); } .booking__fallback { text-align: center; margin: 0; } /* ============================================================ 9. Galería — Bento Grid ============================================================ */ .bento { position: relative; height: clamp(420px, 48vw, 560px); margin-top: 60px; padding: 10px; border: 1px solid var(--glass-line); border-radius: calc(var(--radius-img) + 16px); background: linear-gradient(135deg, var(--glass-bg), transparent 46%), radial-gradient(70% 90% at 100% 0, var(--glow-1), transparent 62%); box-shadow: 0 26px 70px var(--glass-shadow); perspective: 1400px; transform-style: preserve-3d; overflow: hidden; } .bento__item { position: absolute; top: 34px; left: 50%; width: min(68vw, 390px); height: clamp(320px, 38vw, 455px); border-radius: var(--radius-img); border: 1px solid rgba(255, 255, 255, .24); box-shadow: 0 18px 40px var(--shadow); background-size: cover; background-position: center; cursor: pointer; overflow: hidden; outline: 0; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.16, 1, .3, 1), opacity .45s ease, filter .45s ease, box-shadow .45s ease; will-change: transform, opacity; } .bento__item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .34), transparent 32%), radial-gradient(75% 55% at 88% 8%, rgba(255, 255, 255, .22), transparent 58%); mix-blend-mode: screen; opacity: .5; pointer-events: none; transition: opacity .5s ease; } .bento__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--shadow-deep)); opacity: .35; transition: opacity .5s ease; } .bento__item.is-active, .bento__item:hover { box-shadow: 0 26px 60px var(--shadow-deep); z-index: 1; } .bento__item.is-active::after, .bento__item:hover::after { opacity: .85; } .bento__item.is-active::before, .bento__item:hover::before { opacity: .75; } .bento__item:focus-visible { box-shadow: 0 0 0 4px rgba(214, 179, 106, .28), 0 26px 60px var(--shadow-deep); } .bento__caption { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: #FFFFFF; font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; max-width: calc(100% - 48px); padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-btn); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); transform: translateY(8px); opacity: 0; transition: transform .45s ease, opacity .45s ease; } .bento__item.is-active .bento__caption, .bento__item:hover .bento__caption { transform: none; opacity: 1; } .bento__caption::before { content: ''; display: inline-block; vertical-align: middle; width: 18px; height: 1px; margin-right: 10px; margin-bottom: 3px; background: var(--accent); } .bento__item--a { background-image: var(--gal-overlay), var(--img-b1); } .bento__item--b { background-image: var(--gal-overlay), var(--img-b2); } .bento__item--c { background-image: var(--gal-overlay), var(--img-b3); } .bento__item--d { background-image: var(--gal-overlay), var(--img-b4); } .bento__item--e { background-image: var(--gal-overlay), var(--img-b5); } .bento__item--f { background-image: var(--gal-overlay), var(--img-b6); } .bento__item--g { background-image: var(--gal-overlay), var(--img-b7); } .bento__controls { position: absolute; inset: 50% 18px auto; z-index: 20; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); } .bento__button { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255, 255, 255, .54); border-radius: 50%; background: rgba(255, 255, 255, .78); color: var(--primary); font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; pointer-events: auto; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px var(--glass-shadow); transition: transform .24s ease, color .24s ease, background .24s ease; } .bento__button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; } .bento__button:hover, .bento__button:focus-visible { background: #FFFFFF; color: var(--accent); transform: translateY(-2px); } .bento__dots { position: absolute; right: 0; bottom: 24px; left: 0; z-index: 18; display: flex; justify-content: center; gap: 8px; } .bento__dot { width: 34px; height: 4px; border: 0; border-radius: var(--radius-btn); background: rgba(139, 102, 85, .22); cursor: pointer; transition: width .24s ease, background .24s ease; } .bento__dot.is-active { width: 48px; background: var(--accent); } /* ============================================================ 10. Experiencia ============================================================ */ .experience { position: relative; overflow: hidden; padding: 110px 0; background: radial-gradient(70% 80% at 8% 18%, var(--glow-1), transparent 64%), radial-gradient(55% 65% at 92% 88%, var(--glow-2), transparent 68%), var(--experience-bg); } .experience__inner { width: min(1120px, 90vw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 28px; align-items: stretch; } .experience__art { position: relative; overflow: hidden; min-height: 520px; border: 1px solid var(--glass-line); border-radius: var(--radius-panel); background: var(--exp-overlay), var(--img-ritual) center / cover no-repeat; box-shadow: 0 28px 70px var(--glass-shadow); display: flex; align-items: center; justify-content: center; } .experience__art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .32), transparent 34%), radial-gradient(78% 58% at 84% 12%, rgba(255, 255, 255, .22), transparent 58%); mix-blend-mode: screen; opacity: .5; pointer-events: none; } .experience__art span { position: absolute; left: 30px; bottom: 26px; font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 4.5rem); line-height: .9; color: var(--on-dark); text-transform: var(--title-transform); letter-spacing: var(--title-spacing); text-shadow: 0 4px 24px rgba(0, 0, 0, .5); opacity: .9; } .experience__content { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 5vw, 64px); align-self: stretch; border: 1px solid var(--glass-line); border-radius: var(--radius-panel); background: linear-gradient(135deg, var(--glass-bg-strong), transparent 48%), var(--panel-bg); box-shadow: 0 24px 62px var(--glass-shadow); } .experience__content .section-title { font-size: clamp(2.35rem, 4.2vw, 3.8rem); max-width: 620px; } .experience__content .small-text { max-width: 460px; } .steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; } .steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; border: 1px solid var(--glass-line); border-radius: calc(var(--radius-card) * .7); padding: 14px 18px; background: var(--glass-bg); } .steps strong { color: var(--accent); margin-right: 18px; } /* ============================================================ 11. Testimonio ============================================================ */ .testimonial { position: relative; max-width: 760px; margin: 40px auto 0; text-align: center; background: var(--panel-bg); border: 1px solid var(--accent-border); border-radius: var(--radius-panel); padding: 66px 48px 54px; box-shadow: 0 34px 80px var(--shadow); } .testimonial::before { content: '\201C'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 150px; line-height: 1; color: var(--accent-border); pointer-events: none; } .testimonial blockquote { position: relative; z-index: 1; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.25; color: var(--primary); text-transform: var(--title-transform); letter-spacing: var(--title-spacing); } .testimonial cite { display: block; margin-top: 26px; font-family: var(--font-body); font-style: normal; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .testimonial cite span { display: block; margin-top: 6px; color: var(--primary); letter-spacing: normal; text-transform: none; font-size: .8125rem; opacity: .75; } /* ============================================================ 12. Contacto ============================================================ */ .contact { position: relative; display: grid; grid-template-columns: 2fr 1fr; background: var(--contact-bg); border-radius: var(--radius-panel); overflow: hidden; box-shadow: 0 40px 90px var(--shadow-deep); } .contact::before { content: ''; position: absolute; top: -90px; right: -70px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--glow-1), transparent 70%); pointer-events: none; } .contact__main { position: relative; z-index: 1; padding: 75px 7%; } .contact__main h2, .contact__main p { color: var(--on-dark); } .contact__main .section-title { margin-bottom: 22px; } .contact__main .btn { margin-top: 32px; } .contact__details { position: relative; z-index: 1; background: var(--panel-tint); padding: 55px; color: var(--on-dark); } .contact__details dt { color: var(--accent); text-transform: uppercase; font-size: .625rem; letter-spacing: .14em; font-weight: 600; } .contact__details dd { margin: 6px 0 24px; color: var(--on-dark); font-size: .9375rem; } .contact__details dd a { color: var(--on-dark); border-bottom: 1px solid var(--accent-border); transition: border-color .3s ease; } .contact__details dd a:hover { border-color: var(--accent); } .contact__social { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 18px; border-radius: var(--radius-btn); background: var(--accent); color: #FFFFFF; font-size: .8125rem; font-weight: 500; transition: transform .3s ease; } .contact__social:hover { transform: translateY(-2px); } .contact__social svg { width: 18px; height: 18px; } /* ============================================================ 13. Pie ============================================================ */ .site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 28px 0; } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-footer p { margin: 0; color: var(--primary); } .site-footer__brand { font-size: .8125rem; font-weight: 500; } .site-footer__tagline { font-size: .6875rem; } /* ============================================================ 14. Contenido estándar (páginas / entradas / 404) ============================================================ */ .entry { padding: 100px 0; } .entry__title { font-size: var(--h2); margin-bottom: 30px; } .entry__content { max-width: 720px; } .entry__content > * + * { margin-top: 1.2em; } .entry__content a { text-decoration: underline; } .post-list { display: grid; gap: 40px; max-width: 720px; } /* ============================================================ 15. Animaciones ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal="zoom"] { transform: scale(.94); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Sin JS, el contenido debe verse igual */ .no-js [data-reveal] { opacity: 1; transform: none; } @keyframes ironFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes ironGlow { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes ironShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .hero__art, .section--soft::before, .section--soft::after, .eyebrow::before { animation: none !important; } [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ============================================================ 16. Responsive ============================================================ */ @media (max-width: 980px) { .nav { display: none; } .hero { min-height: 0; background: radial-gradient(120% 120% at 85% 10%, var(--glow-1), transparent 45%), linear-gradient(160deg, var(--bg) 0 58%, var(--bg-2) 58% 100%); } .hero__inner, .experience__inner, .services__head { grid-template-columns: 1fr; } .hero__art { min-height: 420px; animation: none; } /* Tablet: 2 tarjetas por fila; las destacadas ocupan la fila entera. */ .services__grid { grid-template-columns: repeat(2, 1fr); } .card { grid-column: span 1; } .card--featured { grid-column: span 2; } .bento { height: clamp(390px, 58vw, 520px); } .bento__item { width: min(72vw, 360px); height: clamp(320px, 52vw, 430px); } .experience__art { min-height: 380px; } .experience__content { padding: 46px; } .contact { grid-template-columns: 1fr; border-radius: calc(var(--radius-panel) * .72); } .section { padding: 90px 0; } } @media (max-width: 600px) { /* Móvil: todo en una columna, incluidas las tarjetas destacadas. */ .services__grid { grid-template-columns: 1fr; } .card, .card--featured { grid-column: span 1; } .card { padding: 28px; } .experience { padding: 74px 0; } .experience__inner { width: min(100% - 32px, 1120px); gap: 18px; } .experience__art { min-height: 300px; } .experience__art span { left: 22px; bottom: 20px; font-size: clamp(2.1rem, 13vw, 3.4rem); } .experience__content { padding: 30px; } .steps li { padding: 13px 15px; } .bento { height: 455px; } .bento__item { top: 24px; width: min(76vw, 315px); height: 388px; } /* En móvil no hay hover: el texto de la foto se muestra siempre. */ .bento__caption { opacity: 1; transform: none; } .bento__item::after { opacity: .6; } .booking__frame { padding: 24px; } .testimonial { padding: 52px 26px 40px; } .contact__details { padding: 38px; } .site-footer__inner { flex-direction: column; text-align: center; } }