/* =========================================================
   Cental Clínica Dental — hoja de estilos
   Tipografías de marca: Antipasto (títulos) + Poppins (texto)
   Paleta: café #71503B · crema #F3D5B6 · dorado · negro cálido
   ========================================================= */
:root {
  --noir: #0E0A07;
  --espresso: #1A120D;
  --cafe-deep: #2E2019;
  --cafe: #71503B;
  --crema: #F3D5B6;
  --marfil: #F6F0E8;
  --blanco: #FFFDFA;
  --ink: #221812;
  --muted: #8A7868;
  --muted-light: rgba(243, 213, 182, .62);
  --gold-1: #A8792E;
  --gold-2: #D2AA62;
  --gold-3: #F0D9A0;
  --gold-grad: linear-gradient(115deg, #A8792E 0%, #D2AA62 32%, #F3DDA2 52%, #C9973F 78%, #A8792E 100%);
  --wa: #25D366;
  --wa-deep: #1DA851;
  --line-dark: rgba(34, 24, 18, .12);
  --line-light: rgba(243, 213, 182, .14);
  --display: "Antipasto", "Poppins", system-ui, sans-serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7;
  color: var(--ink); background: var(--noir); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--gold-2); color: var(--noir); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ---------- Tipografía ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-grad); }
.eyebrow .num { order: -1; font-family: var(--display); letter-spacing: .1em; color: var(--gold-3); }
.eyebrow--dark { color: var(--cafe); }
.eyebrow--dark .num { color: var(--gold-1); }
.h2 {
  font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em;
  font-size: clamp(42px, 5.6vw, 84px); margin: 0 0 28px; color: var(--ink);
}
.h2--light { color: var(--marfil); }
.h2 em, .hero__title em {
  font-style: normal; background: var(--gold-grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- Botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 32px; border-radius: 2px; border: 1px solid transparent; cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  transition: background .5s var(--ease), color .4s, border-color .4s, box-shadow .5s var(--ease), transform .35s var(--ease);
}
.btn__arrow { font-size: 15px; letter-spacing: 0; transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(6px); }
.btn--gold { background: var(--gold-grad); background-size: 200% 100%; color: var(--noir); box-shadow: 0 18px 40px -18px rgba(210, 170, 98, .8); }
.btn--gold:hover { background-position: 100% 0; box-shadow: 0 22px 50px -16px rgba(210, 170, 98, .95); }
.btn--dark { background: var(--ink); color: var(--marfil); }
.btn--dark:hover { background: var(--cafe); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 18px 40px -18px rgba(37, 211, 102, .7); }
.btn--wa:hover { background: var(--wa-deep); box-shadow: 0 22px 46px -16px rgba(37, 211, 102, .85); }
.btn--sm { padding: 13px 22px; font-size: 11px; }
.btn--lg { padding: 21px 36px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------- Precarga ---------- */
.splash { display: none; }
.js .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; background: var(--noir); transition: opacity 1s var(--ease), visibility 1s; }
.splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.splash__inner { display: grid; justify-items: center; gap: 26px; }
.splash__logo { width: min(260px, 60vw); height: auto; clip-path: inset(0 100% 0 0); animation: logoIn 1.6s .15s var(--ease-out) forwards; }
.splash__line { width: 180px; height: 1px; background: var(--gold-grad); transform: scaleX(0); animation: lineIn 1.4s .5s var(--ease-out) forwards; }
@keyframes logoIn { to { clip-path: inset(0 0 0 0); } }
@keyframes lineIn { to { transform: scaleX(1); } }

.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200; background: var(--gold-grad); transform-origin: left; transform: scaleX(0); }

/* ---------- Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; padding: 22px 0; transition: padding .5s var(--ease), background .5s, transform .6s var(--ease), border-color .5s; border-bottom: 1px solid transparent; }
.nav__inner { max-width: calc(var(--container) + 40px); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.is-scrolled { padding: 12px 0; background: rgba(14, 10, 7, .78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-color: var(--line-light); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo img { height: 44px; width: auto; transition: height .5s var(--ease); }
.nav.is-scrolled .nav__logo img { height: 36px; }
.nav__links { display: flex; gap: 42px; }
.nav__links a { position: relative; font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--marfil); opacity: .85; transition: opacity .3s; }
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--gold-grad); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-light); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 14px; right: 14px; height: 1px; background: var(--marfil); transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__burger span:first-child { top: 19px; }
.nav__burger span:last-child { top: 26px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--noir); display: flex; flex-direction: column; justify-content: center; gap: 44px; padding: 100px 32px 40px; clip-path: circle(0 at calc(100% - 52px) 44px); transition: clip-path .9s var(--ease-out); visibility: hidden; }
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 52px) 44px); visibility: visible; }
.mobile-menu nav { display: grid; gap: 8px; }
.mobile-menu nav a { font-family: var(--display); font-size: 46px; line-height: 1.2; color: var(--marfil); }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--noir); color: var(--marfil); }
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hline { fill: none; stroke: url(#gl); stroke-width: 1; opacity: .7; }
.js .hline { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.is-loaded .hline { animation: draw 3.4s .8s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__glow { position: absolute; right: 8%; top: 50%; width: 720px; height: 720px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(113,80,59,.55) 0%, rgba(113,80,59,.18) 40%, rgba(14,10,7,0) 70%); pointer-events: none; }
.hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; padding-top: 120px; padding-bottom: 110px; }
.hero__content { position: relative; }
.portrait { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 430px; }
.portrait::before { content: ""; position: absolute; inset: 0; transform: translate(22px, 22px); border: 1px solid rgba(210,170,98,.55); pointer-events: none; }
.portrait__frame { position: relative; aspect-ratio: 4 / 5.2; overflow: hidden; background: #2A2019; box-shadow: 0 60px 120px -40px rgba(0,0,0,.85); }
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.14); transition: transform 2.6s var(--ease-out); }
.is-loaded .portrait__frame img { transform: scale(1); }
.portrait__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,10,7,0) 62%, rgba(14,10,7,.55) 100%); }
.js .portrait__frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s .25s var(--ease-out); }
.is-loaded .portrait__frame { clip-path: inset(0 0 0 0); }
.portrait__plate { position: absolute; left: -46px; bottom: 38px; z-index: 2; padding: 18px 26px 18px 22px; background: rgba(14,10,7,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(210,170,98,.3); }
.portrait__line { display: block; width: 36px; height: 1px; margin-bottom: 12px; background: var(--gold-grad); }
.portrait__plate strong { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--marfil); }
.portrait__plate small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); }
.js .portrait__plate { opacity: 0; transform: translateX(-16px); transition: opacity 1s 1.3s var(--ease-out), transform 1s 1.3s var(--ease-out); }
.is-loaded .portrait__plate { opacity: 1; transform: none; }
.hero__title { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 6.8vw, 112px); line-height: .96; letter-spacing: -.02em; margin: 0 0 30px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { transform: translateY(110%); transition: transform 1.4s var(--ease-out); }
.is-loaded .hero__title .line > span { transform: none; }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .14s; }
.hero__lead { max-width: 440px; font-size: 17px; color: var(--muted-light); margin: 0 0 44px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__scroll { position: absolute; z-index: 3; left: 32px; bottom: 44px; display: flex; align-items: center; gap: 16px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted-light); }
.hero__scroll-ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-light); display: grid; place-items: center; font-size: 14px; color: var(--gold-3); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ---------- Marquesina ---------- */
.marquee { background: var(--noir); color: var(--crema); overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.marquee__track { display: flex; align-items: center; gap: 44px; width: max-content; animation: marquee 44s linear infinite; }
.marquee__track span { font-family: var(--display); font-size: 22px; letter-spacing: .06em; white-space: nowrap; opacity: .85; }
.marquee__track i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Camila ---------- */
.doctor { background: var(--marfil); padding: 170px 0; }
.doctor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.doctor__media { position: relative; padding: 0 0 28px 28px; }
.doctor__media::before { content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% - 28px); height: calc(100% - 28px); border: 1px solid var(--gold-2); pointer-events: none; }
.doctor__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #D9CBBB; box-shadow: 0 60px 100px -50px rgba(34,24,18,.55); }
.doctor__frame img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 40% 30%; will-change: transform; }
.doctor__vertical { position: absolute; right: -44px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.doctor__role { margin: -14px 0 34px; font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold-1); }
.doctor__quote { margin: 0 0 36px; font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; color: var(--cafe); max-width: 480px; }
.chips { list-style: none; margin: 0 0 44px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 18px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 13px; color: var(--ink); }
.doctor__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Tratamientos (carrusel tipo Spotify) ---------- */
.services { position: relative; overflow: hidden; background: var(--espresso); color: var(--marfil); padding: 150px 0 130px; isolation: isolate; }
.services__ambient { position: absolute; left: 50%; top: 50%; width: 160px; height: 100px; z-index: -2; transform: translate(-50%, -50%) scale(14); }
.services__ambient img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(1.3); opacity: .5; transition: opacity .8s ease; }
.services::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(26,18,13,.05) 0%, rgba(26,18,13,.7) 55%, var(--espresso) 100%); }
.services__head { text-align: center; }
.services__head .eyebrow { justify-content: center; }

.coverflow { position: relative; outline: none; margin-top: 30px; }
.coverflow__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 32px; }
.cf-card { position: relative; flex: 0 0 280px; aspect-ratio: 3 / 4.3; border-radius: 22px; overflow: hidden; scroll-snap-align: center; background: var(--cafe-deep); border: 1px solid rgba(243,213,182,.18); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); cursor: pointer; user-select: none; }
.cf-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1.2s var(--ease-out); }
.cf-card__info { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 18px 16px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, rgba(40,28,20,.55), rgba(22,15,11,.82)); border: 1px solid rgba(255,255,255,.14); }
.cf-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--marfil); }
.cf-card p { margin: 4px 0 0; font-size: 12px; color: var(--muted-light); }

/* Modo 3D (solo con JS) */
.js .coverflow { height: 560px; perspective: 1600px; cursor: grab; touch-action: pan-y; }
.js .coverflow.is-dragging { cursor: grabbing; }
.js .coverflow__track { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; transform-style: preserve-3d; }
.js .cf-card { position: absolute; left: 50%; top: 50%; width: 320px; margin: 0; transform-style: preserve-3d; transition: transform .9s var(--ease-out), opacity .9s var(--ease-out), filter .9s; will-change: transform; }
.js .cf-card:not(.is-active) .cf-card__info { opacity: .75; }
.js .cf-card.is-active { box-shadow: 0 60px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(240,217,160,.35); }
.js .cf-card.is-active img { transform: scale(1.04); }

.player { margin-top: 40px; }
.player__bar { display: flex; align-items: center; gap: 14px; max-width: 920px; margin: 0 auto; padding: 12px 14px; border-radius: 100px; background: rgba(255, 245, 232, .08); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,.12); }
.player__btn { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; color: var(--marfil); cursor: pointer; display: grid; place-items: center; transition: background .3s; }
.player__btn:hover { background: rgba(255,255,255,.1); }
.player__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.player__now { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 6px 18px 6px 6px; border-radius: 100px; background: rgba(14,10,7,.55); }
.player__now img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.player__now div { min-width: 0; flex: 1; }
.player__now strong { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.2; }
.player__now small { display: block; font-size: 12px; color: var(--muted-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.player__eq i { width: 3px; height: 100%; background: var(--gold-2); border-radius: 2px; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.player__eq i:nth-child(2) { animation-delay: -.3s; }
.player__eq i:nth-child(3) { animation-delay: -.6s; }
.player__eq i:nth-child(4) { animation-delay: -.9s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.player__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.player__actions .btn { border-radius: 100px; }
.player__wa { width: 46px; height: 46px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; transition: background .3s, transform .3s; }
.player__wa:hover { background: var(--wa-deep); transform: scale(1.06); }
.player__progress { max-width: 860px; height: 2px; margin: 22px auto 0; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.player__progress span { display: block; height: 100%; width: 0; background: var(--gold-grad); }

/* ---------- Proceso ---------- */
.process { background: var(--marfil); padding: 160px 0; }
.process__head { max-width: 760px; margin-bottom: 80px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.step { position: relative; padding: 40px 30px 0 0; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--gold-grad); transition: width 1.4s var(--ease-out); }
.step.is-in::before { width: calc(100% - 24px); }
.step__num { font-family: var(--display); font-size: 15px; color: var(--gold-1); letter-spacing: .1em; }
.step h3 { font-family: var(--display); font-weight: 400; font-size: 32px; margin: 18px 0 10px; color: var(--ink); }
.step p { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- Enfoque: boca que se abre ---------- */
.mouth { position: relative; height: 320vh; background: #050403; color: var(--marfil); }
.mouth__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 90px 32px 40px; }
.mouth__glow { position: absolute; left: 50%; top: 55%; width: 900px; height: 600px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(210,170,98,.14) 0%, rgba(210,170,98,0) 65%); pointer-events: none; }
.mouth__head { position: relative; text-align: center; }
.mouth__head .eyebrow { justify-content: center; }
.mouth__head .h2 { font-size: clamp(36px, 4.4vw, 64px); margin-bottom: 10px; }
.mouth__stage { position: relative; flex: 1; max-height: 560px; display: grid; grid-template-columns: 1fr minmax(320px, 560px) 1fr; align-items: center; gap: 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.mouth__col { display: grid; gap: 70px; }
.mouth__col--left { text-align: right; justify-items: end; }
.feature { max-width: 260px; }
.js .feature { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .mouth__col--left .feature { transform: translateX(-30px); }
.js .mouth__col--right .feature { transform: translateX(30px); }
.js .feature.is-on { opacity: 1; transform: none; }
.feature__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; margin-bottom: 18px; background: linear-gradient(160deg, #2A2019, #120D0A); border: 1px solid rgba(240,217,160,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.feature__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--marfil); }
.feature p { margin: 0; font-size: 13px; color: var(--muted-light); }

.mouth__teeth { --open: 0; position: relative; height: 100%; min-height: 320px; display: grid; place-items: center; }
.teeth { position: absolute; left: 0; width: 100%; height: auto; will-change: transform; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.teeth--top { z-index: 1; bottom: 50%; margin-bottom: -5.4%; transform: translateY(calc(var(--open) * -36%)) scale(calc(1 + var(--open) * .03)); }
.teeth--bottom { top: 50%; margin-top: -9.2%; transform: translateY(calc(var(--open) * 42%)) scale(calc(1 + var(--open) * .03)); }
.mouth__cta { position: relative; z-index: 2; padding: 15px 28px; border-radius: 100px; background: var(--blanco); color: var(--noir); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .5s, transform .5s var(--ease-out), background .3s; }
.mouth__cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mouth__cta:hover { background: var(--crema); }

/* ---------- Experiencia ---------- */
.brandband { position: relative; min-height: min(86vh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--noir); }
.brandband img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 60% 50%; will-change: transform; }
.brandband::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,10,7,.9) 0%, rgba(14,10,7,.62) 36%, rgba(14,10,7,.05) 70%); }
.brandband__copy { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 120px; }

/* ---------- Preguntas ---------- */
.faq { background: var(--marfil); padding: 170px 0; }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.faq__head { position: sticky; top: 130px; }
.faq__item { border-bottom: 1px solid var(--line-dark); }
.faq__item:first-child { border-top: 1px solid var(--line-dark); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 0; font-family: var(--display); font-size: clamp(21px, 2vw, 27px); color: var(--ink); transition: color .3s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--cafe); }
.faq__item summary span { flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark); transition: background .4s, transform .5s var(--ease); }
.faq__item summary span::before, .faq__item summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--cafe); transform: translate(-50%, -50%); }
.faq__item summary span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.faq__item[open] summary span { background: var(--gold-3); border-color: transparent; transform: rotate(180deg); }
.faq__item[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.faq__item p { margin: 0; padding: 0 60px 32px 0; color: var(--muted); }

/* ---------- Contacto ---------- */
.contact { background: var(--noir); color: var(--marfil); padding: 170px 0; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; right: -200px; top: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(113,80,59,.45), transparent 65%); }
.contact__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.contact__grid > * { min-width: 0; }
.contact__info { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 22px; border-top: 1px solid var(--line-light); padding-top: 34px; }
.contact__info span { display: block; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 4px; }
.contact__info a { font-size: 17px; color: var(--marfil); transition: color .3s; word-break: break-word; }
.contact__info a:hover { color: var(--gold-3); }

.form { background: var(--marfil); color: var(--ink); padding: 52px 46px; box-shadow: 0 60px 120px -50px rgba(0,0,0,.8); }
.form h3 { font-family: var(--display); font-weight: 400; font-size: 34px; margin: 0 0 30px; }
.field { position: relative; display: block; margin-bottom: 14px; }
.field input, .field select { width: 100%; font: 400 15px/1.4 var(--sans); color: var(--ink); padding: 26px 18px 10px; border: 1px solid var(--line-dark); border-radius: 2px; background: var(--blanco); transition: border-color .3s, box-shadow .3s; appearance: none; -webkit-appearance: none; }
.field--select select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2371503B' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 4px rgba(210,170,98,.18); }
.field span { position: absolute; left: 19px; top: 18px; font-size: 14px; color: var(--muted); pointer-events: none; transition: all .3s var(--ease); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field--select span { top: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cafe); }
.field.is-invalid input { border-color: #B4533A; }
.form .btn { margin-top: 10px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--cafe); cursor: pointer; }
.form__consent input { margin-top: 3px; accent-color: var(--cafe); flex: none; }
.form__consent.is-invalid span { color: #b3392b; }
.form__note { margin: 14px 0 0; font-size: 13px; color: var(--cafe); min-height: 1em; text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--noir); color: var(--muted-light); padding: 80px 0 36px; border-top: 1px solid var(--line-light); font-size: 13px; }
.footer__grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__logo { width: 170px; height: auto; }
.footer__links { display: flex; gap: 30px; flex-wrap: wrap; }
.footer__links a { letter-spacing: .18em; text-transform: uppercase; font-size: 11px; }
.footer__contact { display: grid; gap: 4px; text-align: right; }
.footer a:hover { color: var(--marfil); }
.footer__bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line-light); display: flex; justify-content: space-between; gap: 20px; font-size: 12px; flex-wrap: wrap; }

/* ---------- WhatsApp flotante ---------- */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; align-items: center; height: 60px; padding: 0 16px; border-radius: 100px; background: var(--wa); color: #fff; box-shadow: 0 16px 36px -10px rgba(37,211,102,.6); transition: gap .4s var(--ease), padding .4s var(--ease), background .3s; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--wa); animation: ping 2.4s ease-out infinite; }
.wa-float:hover { background: var(--wa-deep); gap: 10px; padding: 0 22px 0 16px; }
.wa-float__label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 500; transition: max-width .5s var(--ease); }
.wa-float:hover .wa-float__label { max-width: 120px; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .btn.reveal.is-in { transition: opacity 1.1s var(--ease-out), transform .35s var(--ease), background .5s, box-shadow .5s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .mouth__stage { grid-template-columns: 1fr minmax(280px, 440px) 1fr; gap: 24px; }
  .feature h3 { font-size: 21px; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 64px; padding-bottom: 90px; }
  .portrait { justify-self: center; max-width: 360px; margin-right: 22px; }
  .portrait__plate { left: -22px; }
  .hero__glow { right: 50%; top: 72%; transform: translate(50%, -50%); width: 520px; height: 520px; }
  .hero__scroll { display: none; }
  .doctor__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; gap: 70px; }
  .doctor__media { max-width: 480px; }
  .doctor__vertical { display: none; }
  .faq__head { position: static; }
  .process__head { margin-bottom: 50px; }
  .mouth__stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px 24px; max-height: none; align-content: center; }
  .mouth__teeth { grid-column: 1 / -1; grid-row: 1; min-height: 0; height: 46vw; max-height: 360px; width: min(100%, 520px); justify-self: center; }
  .mouth__col { gap: 20px; }
  .mouth__col--left { text-align: left; justify-items: start; }
  .feature { max-width: none; }
  .feature__icon { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 10px; }
  .feature__icon svg { width: 20px; height: 20px; }
  .feature h3 { font-size: 18px; }
  .feature p { font-size: 12px; line-height: 1.5; }
  .footer__contact { text-align: left; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .nav__inner { padding: 0 16px; }
  .nav .btn--sm { display: none; }
  .nav__logo img { height: 38px; }
  .hero__title { font-size: clamp(50px, 14vw, 70px); }
  .hero__lead { font-size: 15px; margin-bottom: 30px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__grid { padding-top: 110px; }
  .portrait { max-width: 290px; }
  .portrait__plate { padding: 14px 18px; bottom: 24px; }
  .portrait__plate strong { font-size: 18px; }
  .doctor, .process, .faq, .contact { padding: 110px 0; }
  .services { padding: 110px 0 100px; }
  .js .coverflow { height: 460px; }
  .js .cf-card { width: 250px; }
  .player__bar { flex-wrap: wrap; border-radius: 26px; justify-content: space-between; }
  .player__now { order: -1; flex: 1 1 100%; }
  .player__eq { display: none; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-right: 0; }
  .mouth { height: 280vh; }
  .mouth__sticky { padding: 80px 20px 24px; }
  .mouth__cta { padding: 11px 18px; font-size: 10px; }
  .form { padding: 36px 24px; }
  .wa-float { right: 16px; bottom: 16px; height: 56px; }
}

/* Movimiento reducido: solo se apagan los efectos intrusivos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation-duration: 120s; }
  .player__eq i, .hero__scroll-ring { animation: none; }
}