/* =========================================================
   Centro Médico Austral — Landing Botox (MAQUETA)
   Mobile-first. Paleta: marfil + neutros, acentos del logo.
   ========================================================= */
:root{
  --ivory:#FBF8F3;
  --paper:#FFFFFF;
  --sand:#F3EDE3;
  --sand-2:#E9E0D2;
  --line:#E3D9CA;

  --ink:#1B2933;
  --ink-soft:#57656F;
  --navy:#0F3653;
  --navy-deep:#0A2740;

  --teal:#2BB3C0;        /* líneas, detalles */
  --teal-ink:#14727C;    /* texto / botones (contraste AA sobre marfil) */
  --teal-light:#7FDDE5;  /* acento sobre fondo navy */
  --teal-soft:#DDF1F2;

  --font:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease:cubic-bezier(.22,.68,0,1);
  --container:1120px;

  /* Proporciones de los componentes reemplazables */
  --video-ratio:9/16;    /* video vertical de Daniela (reel) */
  --ba-ratio:940/731;    /* fotos antes/después (frente) */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:1.65; color:var(--ink);
  background:var(--ivory); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

.container{ position:relative; z-index:1; width:100%; max-width:var(--container); margin:0 auto; padding:0 22px; }
@media(min-width:900px){ .container{ padding:0 40px; } }

:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:6px; transition:top .25s; }
.skip:focus{ top:12px; }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-weight:500; color:var(--navy); letter-spacing:-.03em; text-wrap:balance; }
h2{ font-size:clamp(1.85rem, 5.6vw, 3.05rem); line-height:1.1; max-width:22ch; }
h3{ line-height:1.25; }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-ink);
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--teal); }
.eyebrow--light{ color:var(--teal-light); }
.eyebrow--light::before{ background:var(--teal-light); }

.lead{ font-size:1.0625rem; color:var(--ink-soft); max-width:44ch; }
.note{ font-size:.975rem; color:var(--ink-soft); padding-left:16px; border-left:1px solid var(--teal); max-width:46ch; }
.fineprint{ font-size:.9375rem; color:var(--ink-soft); text-align:center; margin-top:22px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:0 30px; border-radius:6px; border:1px solid transparent;
  font-size:.84rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; text-align:center;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::after{ content:'→'; font-size:1.05rem; letter-spacing:0; transition:transform .35s var(--ease); }
.btn:hover::after{ transform:translateX(4px); }
.btn:active{ transform:scale(.985); }
.btn--primary{ background:var(--teal-ink); color:#fff; }
.btn--primary:hover{ background:var(--navy); }
.btn--ghost{ border-color:var(--navy); color:var(--navy); background:transparent; }
.btn--ghost:hover{ background:var(--navy); color:#fff; }
.btn--light{ background:var(--ivory); color:var(--navy); }
.btn--light:hover{ background:#fff; }
.btn--xl{ min-height:64px; padding:0 40px; font-size:.9rem; width:100%; max-width:420px; }

/* ---------- Marca de agua (isotipo) ---------- */
.wm{
  position:absolute; z-index:0; pointer-events:none; aspect-ratio:700/848;
  background:url('../assets/img/logo.png') center/contain no-repeat; opacity:.06;
}
.hero,.what,.cma,.promo,.final{ position:relative; overflow:hidden; }
.wm--hero{ width:min(120vw,780px); right:-38vw; top:-8vw; }
.wm--what{ width:min(100vw,620px); left:-26vw; bottom:-18%; opacity:.05; }
.wm--cma{ width:min(110vw,680px); right:-30vw; top:6%; opacity:.045; }
.wm--promo{ width:min(100vw,560px); left:-22vw; bottom:-26%; opacity:.07; }
.wm--final{ width:min(150vw,920px); left:50%; top:-14%; transform:translateX(-50%); opacity:.045; }
@media(min-width:900px){
  .wm--hero{ right:-9vw; top:-10%; }
  .wm--what{ left:-8vw; bottom:-30%; }
  .wm--cma{ right:-8vw; }
  .wm--promo{ left:-6vw; }
}

/* ---------- Animaciones (sutiles) ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.hero-in{ animation:fadeUp .95s var(--ease) both; animation-delay:calc(var(--d,0) * 110ms + 120ms); }
.js .reveal{ opacity:0; }
.js .reveal.in{ animation:fadeUp .95s var(--ease) both; animation-delay:calc(var(--d,0) * 100ms); }

/* ---------- Barra superior ---------- */
.topbar{ position:absolute; top:0; left:0; right:0; z-index:5; padding:18px 0; }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ height:40px; width:auto; }
.brand__word{ display:flex; flex-direction:column; font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-ink); line-height:1.2; }
.brand__word strong{ font-size:1.05rem; letter-spacing:.02em; text-transform:none; font-weight:600; color:var(--navy); }

/* ---------- Hero ---------- */
.hero{ padding:112px 0 72px; }
.hero__grid{ display:grid; gap:56px; }
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hero h1{ font-size:clamp(2.4rem, 9vw, 4.5rem); line-height:1.03; max-width:13ch; }

.promo-mini{ display:flex; flex-direction:column; gap:2px; padding-left:18px; border-left:2px solid var(--teal); margin:4px 0 2px; }
.promo-mini__zones{ font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-ink); }
.promo-mini__price{ font-size:clamp(2.7rem, 11vw, 3.7rem); font-weight:600; line-height:1.05; letter-spacing:-.04em; color:var(--teal-ink); font-variant-numeric:tabular-nums; }
.promo-mini__note{ font-size:.975rem; color:var(--ink-soft); }

.hero__cta{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:420px; align-items:flex-start; }
.hero__cta .btn{ width:100%; }
.microcopy{ font-size:.9375rem; color:var(--ink-soft); }

.hero__media{ margin:0; display:flex; flex-direction:column; align-items:center; }
.arch{
  position:relative; isolation:isolate; width:min(78vw, 340px); aspect-ratio:720/1100;
  border-radius:999px 999px 0 0; background:var(--sand);
}
.arch picture{ display:block; width:100%; height:100%; border-radius:inherit; overflow:hidden; }
.arch img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.arch::before{ content:''; position:absolute; inset:0; z-index:-1; border:1px solid var(--teal); border-radius:inherit; transform:translate(14px,14px); }

/* Contador */
.countdown{
  position:relative; z-index:2; width:min(100%, 372px); margin:-46px auto 0;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px 14px;
  box-shadow:0 14px 40px -22px rgba(15,54,83,.28);
}
.countdown__label{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-bottom:10px; }
.countdown__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.cd-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:2px 0; }
.cd-cell + .cd-cell{ border-left:1px solid var(--line); }
.cd-num{ font-size:1.9rem; font-weight:600; line-height:1.15; letter-spacing:-.02em; color:var(--navy); font-variant-numeric:tabular-nums; }
.cd-unit{ font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); }
.countdown__ended{ display:none; text-align:center; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); padding:10px 0 6px; }
.countdown.is-ended .countdown__grid,
.countdown.is-ended .countdown__label{ display:none; }
.countdown.is-ended .countdown__ended{ display:block; }

@media(min-width:900px){
  .hero{ padding:140px 0 110px; }
  .hero__grid{ grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }
  .hero__media{ position:relative; align-items:flex-end; }
  .arch{ width:min(100%, 430px); }
  .countdown{ position:absolute; left:-70px; bottom:64px; margin:0; width:340px; }
}

/* ---------- Secciones ---------- */
.section{ padding:clamp(76px, 14vw, 150px) 0; position:relative; }
.section-head{ margin-bottom:clamp(30px, 6vw, 56px); }
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:1.0625rem; max-width:46ch; }

/* Video */
.video{ background:var(--paper); }
.video-frame{
  position:relative; width:100%; aspect-ratio:var(--video-ratio); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,#E9E0D2 0%, #F3EDE3 55%, #E4DACB 100%);
  display:grid; place-items:center; max-width:min(100%, 380px); margin:0 auto;
  box-shadow:0 30px 70px -36px rgba(15,54,83,.45);
}
.video__copy{ text-align:center; margin-bottom:clamp(28px, 6vw, 44px); }
.video__copy h2{ margin:14px auto 0; }
.video__copy .eyebrow{ justify-content:center; }
.video__lead{ margin:18px auto 0; max-width:42ch; color:var(--ink-soft); font-size:1.0625rem; }
.video__cta{ display:none; }
.video-frame__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-frame__poster + .play{ box-shadow:0 18px 44px -12px rgba(10,39,64,.6); }
.video-frame.is-playing .video-frame__poster{ display:none; }
.video-frame__bg{
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(20,114,124,.05) 0 1px, transparent 1px 22px);
}
.video-frame__bg::before{
  content:''; position:absolute; width:min(62%, 360px); aspect-ratio:700/848; right:-6%; bottom:-14%;
  background:url('../assets/img/logo.png') center/contain no-repeat; opacity:.08;
}
.play{
  position:relative; z-index:2; width:78px; height:78px; border-radius:50%; border:0;
  background:var(--paper); color:var(--teal-ink); display:grid; place-items:center;
  box-shadow:0 18px 40px -16px rgba(15,54,83,.35);
  transition:transform .4s var(--ease), background-color .3s, color .3s;
}
.play svg{ width:30px; height:30px; margin-left:3px; }
.play:hover{ transform:scale(1.06); background:var(--teal-ink); color:#fff; }
.video-frame__msg{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; text-align:center; font-size:.9375rem; color:var(--ink-soft); min-height:1.2em; }
.video-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.video-frame.is-playing .video-frame__bg,
.video-frame.is-playing .play,
.video-frame.is-playing .tag,
.video-frame.is-playing .video-frame__msg{ display:none; }

.tag--placeholder{
  position:absolute; top:14px; left:14px; z-index:3; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; background:#fff; color:var(--teal-ink); border:1px dashed var(--teal);
}

/* Qué es */
.what__top{ display:grid; gap:34px; }
.display{ font-size:clamp(2.7rem, 11vw, 5.8rem); line-height:1; letter-spacing:-.045em; max-width:none; }
.display span{ display:block; }
.display .accent{ color:var(--teal-ink); }
.what__text{ font-size:1.125rem; color:var(--ink-soft); max-width:46ch; }
.trio{ display:grid; gap:34px; margin-top:clamp(52px, 9vw, 96px); }
.trio__item, .four__item{ position:relative; padding-top:24px; border-top:1px solid var(--line); }
.trio__item::before{ content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--teal); transition:width .7s var(--ease); }
.trio__item:hover::before{ width:100%; }
.trio__n{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.16em; color:var(--teal-ink); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.trio__item h3{ font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:10px; }
.trio__item p{ color:var(--ink-soft); max-width:30ch; }

/* ¿Podría ser para ti? */
.foryou{ background:var(--sand); }
.foryou__grid{ display:grid; gap:44px; }
.foryou__intro p{ margin-top:20px; color:var(--ink-soft); font-size:1.0625rem; max-width:46ch; }
.checks{ margin-bottom:30px; }
.checks li{ position:relative; padding:18px 0 18px 40px; border-bottom:1px solid var(--sand-2); font-size:1.0625rem; color:var(--navy); }
.checks li:first-child{ border-top:1px solid var(--sand-2); }
.checks li::before{ content:''; position:absolute; left:0; top:50%; width:24px; height:1px; background:var(--teal-ink); }
.foryou__list .note{ margin-bottom:30px; }

/* Caso real */
.case .section-head{ text-align:center; }
.case .section-head h2, .case .section-head p{ margin-left:auto; margin-right:auto; }
.ba{
  position:relative; width:100%; max-width:640px; margin:0 auto; aspect-ratio:var(--ba-ratio);
  border-radius:18px; overflow:hidden; --pos:50%; background:var(--sand); touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.ba__pane{ position:absolute; inset:0; }
.ba__pane--after{ clip-path:inset(0 0 0 var(--pos)); }
.ba__pane img{ width:100%; height:100%; object-fit:cover; }
.ba__ph{ position:absolute; inset:0; display:flex; align-items:center; padding:24px 6%; text-align:center; }
.ba__pane--before .ba__ph{ justify-content:flex-start; }
.ba__pane--after .ba__ph{ justify-content:flex-end; }
.ba__pane--before .ba__ph{ background:linear-gradient(160deg,#E6DDCE,#F3EDE3); }
.ba__pane--after .ba__ph{ background:linear-gradient(160deg,#D5ECEE,#EEF6F6); }
.ba__ph span{ max-width:132px; font-size:.875rem; line-height:1.35; color:var(--ink-soft); padding:12px 16px; border:1px dashed rgba(20,114,124,.45); border-radius:16px; background:rgba(255,255,255,.55); }
.ba__label{
  position:absolute; bottom:16px; z-index:3; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--navy);
}
.ba__label--l{ left:16px; } .ba__label--r{ right:16px; }
.ba__flag{ top:14px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); z-index:2; pointer-events:none; }
.ba__handle span{
  position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  background:#fff; box-shadow:0 8px 24px -8px rgba(15,54,83,.4); display:grid; place-items:center; color:var(--teal-ink);
  font-size:1rem; font-weight:600; letter-spacing:4px; padding-left:4px;
}
.ba__handle span::before{ content:'‹›'; }
.ba:focus-within .ba__handle span{ outline:2px solid var(--teal-ink); outline-offset:3px; }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:4; cursor:ew-resize; }

/* CMA */
.cma{ background:var(--paper); }
.four{ display:grid; gap:38px; }
.four__line{ position:absolute; left:0; top:-1px; width:44px; height:2px; background:var(--teal); transition:width .7s var(--ease); }
.four__item:hover .four__line{ width:100%; }
.four__item h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.015em; margin-bottom:8px; }
.four__item p{ color:var(--ink-soft); max-width:30ch; }

/* Promoción */
.promo{ background:var(--navy); color:var(--ivory); padding:clamp(96px, 17vw, 190px) 0; text-align:center; }
.promo__inner{ display:flex; flex-direction:column; align-items:center; gap:0; }
.promo__title{ color:var(--ivory); font-size:clamp(3.2rem, 14vw, 7.5rem); line-height:1; letter-spacing:-.05em; margin-top:22px; max-width:none; }
.promo__zones{ margin-top:30px; font-size:.84rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(251,248,243,.78); }
.promo__price{ font-size:clamp(3.6rem, 16vw, 8.2rem); font-weight:600; line-height:1.05; letter-spacing:-.05em; color:var(--teal-light); font-variant-numeric:tabular-nums; margin-top:6px; }
.promo__note{ margin-top:6px; font-size:1.0625rem; color:rgba(251,248,243,.85); padding-bottom:30px; margin-bottom:34px; position:relative; }
.promo__note::after{ content:''; position:absolute; left:50%; bottom:0; width:44px; height:1px; background:var(--teal-light); transform:translateX(-50%); }
.promo__fine{ margin-top:30px; font-size:.9375rem; color:rgba(251,248,243,.66); max-width:46ch; }

/* FAQ */
.faq__grid{ display:grid; gap:36px; }
details{ border-bottom:1px solid var(--line); }
details:first-child{ border-top:1px solid var(--line); }
summary{
  position:relative; list-style:none; cursor:pointer; padding:26px 44px 26px 0;
  font-size:1.125rem; font-weight:500; letter-spacing:-.01em; color:var(--navy); line-height:1.35;
}
summary::-webkit-details-marker{ display:none; }
summary::before, summary::after{ content:''; position:absolute; right:4px; top:50%; width:14px; height:1.5px; background:var(--teal-ink); transition:transform .4s var(--ease); }
summary::after{ transform:rotate(90deg); }
details[open] summary::after{ transform:rotate(0); }
summary:hover{ color:var(--teal-ink); }
.faq__a{ padding:0 44px 28px 0; color:var(--ink-soft); max-width:56ch; animation:fadeIn .5s var(--ease); }

/* CTA final */
.final{ background:var(--ivory); padding:clamp(120px, 20vw, 230px) 0; text-align:center; }
.final__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.final h2{ font-size:clamp(2rem, 7vw, 3.8rem); max-width:18ch; }
.final p{ font-size:1.125rem; color:var(--ink-soft); max-width:40ch; }
.final .btn{ margin-top:14px; }

/* Footer */
.footer{ background:var(--sand); padding:64px 0 calc(110px + env(safe-area-inset-bottom)); text-align:center; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer__logo{ height:56px; width:auto; margin-bottom:10px; }
.footer__name{ font-weight:600; color:var(--navy); font-size:1.05rem; }
.footer__addr{ color:var(--ink-soft); }
.footer__link{ margin-top:20px; font-size:.9rem; font-weight:600; letter-spacing:.06em; color:var(--teal-ink); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .3s; }
.footer__link:hover{ border-bottom-color:var(--teal-ink); }

/* Barra fija móvil */
.sticky-cta{
  position:fixed; left:14px; right:14px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:50;
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; border-radius:10px;
  background:var(--navy); color:var(--ivory); text-decoration:none; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 14px 34px -14px rgba(10,39,64,.55);
  transform:translateY(160%); opacity:0; pointer-events:none;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.sticky-cta svg{ width:20px; height:20px; }
.sticky-cta.is-visible{ transform:none; opacity:1; pointer-events:auto; }

/* ---------- Estado de promoción finalizada ---------- */
.promo-mini--ended{ display:none; }
span[data-promo-ended]{ display:none; }
.promo-ended [data-promo]{ display:none !important; }
.promo-ended .promo-mini--ended{ display:flex; }
.promo-ended span[data-promo-ended]{ display:inline; }

/* ---------- Tablet / Desktop ---------- */
@media(min-width:700px){
  .trio{ grid-template-columns:repeat(3,1fr); gap:40px; }
  .four{ grid-template-columns:repeat(2,1fr); gap:44px 40px; }
  .hero__cta{ flex-direction:row; flex-wrap:wrap; align-items:center; max-width:none; gap:14px 22px; width:auto; }
  .hero__cta .btn{ width:auto; }
  .hero__cta .microcopy{ flex-basis:100%; }
}
@media(min-width:900px){
  .what__top{ grid-template-columns:1.15fr 1fr; gap:80px; align-items:end; }
  .foryou__grid{ grid-template-columns:1fr 1fr; gap:90px; align-items:start; }
  .faq__grid{ grid-template-columns:.8fr 1.2fr; gap:90px; }
  .faq__head{ position:sticky; top:40px; align-self:start; }
  .sticky-cta{ display:none; }
  .footer{ padding-bottom:64px; }
}
@media(min-width:1100px){
  .four{ grid-template-columns:repeat(4,1fr); gap:40px; }
}

/* Video vertical: en escritorio, texto a la izquierda y video a la derecha (cabe completo en pantalla) */
@media(min-width:900px){
  .video__grid{ display:grid; grid-template-columns:1fr 340px; gap:clamp(60px, 9vw, 120px); align-items:center; }
  .video__copy{ text-align:left; margin:0; }
  .video__copy h2{ margin:16px 0 0; max-width:16ch; }
  .video__copy .eyebrow{ justify-content:flex-start; }
  .video__lead{ margin:20px 0 0; }
  .video__cta{ display:block; margin-top:32px; }
  .video-frame{ max-width:340px; margin:0; }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-in,.js .reveal.in,.faq__a{ animation:none !important; }
  .js .reveal{ opacity:1; }
  .btn,.btn::after,.play,.sticky-cta,.trio__item::before,.four__line,summary::before,summary::after{ transition:none; }
}