/* =========================================================
   Centro Médico Austral — Prótesis dentales
   Extiende css/landing.css (misma familia visual que Botox,
   Lipedema y Estética corporal). Solo componentes propios.
   ========================================================= */
:root{
  --video-ratio:16/9;      /* video horizontal: siempre 16:9, en móvil y escritorio */
}

/* ---------- Estados de la promoción ---------- */
[data-promo-ended]{ display:none; }
.promo-ended [data-promo-ended]{ display:block; }
.promo-ended span[data-promo-ended]{ display:inline; }
.promo-ended .offer--ended{ display:flex; }
.promo-ended .alt__price--ended{ display:flex; }

/* ---------- Hero: oferta ---------- */
.hero .eyebrow{ font-size:.72rem; letter-spacing:.14em; }
@media(min-width:700px){ .hero .eyebrow{ font-size:.78rem; letter-spacing:.2em; } }
.hero h1{ max-width:15ch; font-size:clamp(2.2rem, 8.4vw, 4.2rem); }
.offer{
  display:flex; flex-direction:column; gap:14px; width:100%; max-width:440px;
  padding:20px 22px 16px; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 22px 50px -34px rgba(15,54,83,.4);
}
.offer__main{ display:flex; flex-direction:column; gap:2px; padding-left:16px; border-left:2px solid var(--teal); }
.offer__label{ font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-ink); }
.offer__tag{ font-size:.9rem; color:var(--ink-soft); }
.offer__price{ font-size:clamp(2.7rem, 11vw, 3.6rem); font-weight:600; line-height:1.05; letter-spacing:-.04em; color:var(--teal-ink); font-variant-numeric:tabular-nums; }
.offer__neutral{ margin-top:6px; font-size:1.05rem; font-weight:500; line-height:1.4; color:var(--navy); }
.offer__neutral--sub{ margin-top:4px; font-size:.95rem; font-weight:400; color:var(--ink-soft); }
.offer__refund{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--teal-soft); border-radius:12px; color:var(--navy); }
.offer__refund p{ font-size:.98rem; line-height:1.4; }
.offer__refund strong{ font-weight:700; }
.offer__ast{ color:var(--teal-ink); font-weight:700; }
.offer__ico{ flex:none; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--teal-ink); display:grid; place-items:center; }
.offer__ico svg{ width:20px; height:20px; }
.offer__fine{ font-size:.82rem; line-height:1.45; color:var(--ink-soft); }
.offer--ended{ display:none; }

.hero__cta{ flex-direction:column; }
@media(min-width:700px){
  .hero__cta{ flex-direction:row; align-items:center; }
  .hero__cta .btn{ width:auto; }
}

/* Contador: estado vencido, mensaje neutro */
.countdown__ended{ display:none; flex-direction:column; align-items:center; gap:2px; padding:6px 4px 4px; text-align:center; }
.countdown__ended strong{ font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
.countdown__ended span{ font-size:.92rem; color:var(--ink-soft); }
.countdown.is-ended .countdown__ended{ display:flex; }

/* ---------- Video horizontal 16:9 ---------- */
.video .section-head{ text-align:center; }
.video .section-head h2{ margin-left:auto; margin-right:auto; }
.video .section-head .eyebrow{ margin-bottom:14px; }
.video-frame{ max-width:960px; margin:0 auto; border-radius:18px; box-shadow:0 34px 80px -44px rgba(15,54,83,.5); }
.video-frame__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-frame__shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,54,83,.05) 30%, rgba(15,54,83,.38) 100%); }
.video-frame video{ object-fit:contain; }
.video-frame.is-playing .video-frame__poster,
.video-frame.is-playing .video-frame__shade{ display:none; }
.video-frame .play{ box-shadow:0 18px 44px -12px rgba(10,39,64,.6); }
.video-frame__msg{ color:#fff; text-shadow:0 1px 8px rgba(10,39,64,.6); font-weight:500; }
.video-caption{ max-width:960px; margin:18px auto 0; text-align:center; color:var(--ink-soft); font-size:1rem; }
@media(min-width:900px){ .play{ width:92px; height:92px; } .play svg{ width:34px; height:34px; } }

/* ---------- Alternativas ---------- */
.alts{ background:var(--ivory); position:relative; overflow:hidden; }
.alts .section-head h2{ max-width:20ch; }
.alts__grid{ display:grid; gap:20px; }
.alt{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:30px 26px 26px;
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.alt:hover{ transform:translateY(-4px); border-color:var(--teal); box-shadow:0 30px 60px -38px rgba(15,54,83,.4); }
.alt__n{ font-size:.78rem; font-weight:600; letter-spacing:.16em; color:var(--teal-ink); font-variant-numeric:tabular-nums; }
.alt h3{ font-size:1.55rem; font-weight:600; letter-spacing:-.02em; }
.alt > p{ color:var(--ink-soft); max-width:36ch; }
.alt__price{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding:16px 18px; background:var(--teal-soft); border-radius:12px; color:var(--navy); }
.alt__price strong{ font-size:2rem; font-weight:600; letter-spacing:-.03em; line-height:1.1; color:var(--teal-ink); font-variant-numeric:tabular-nums; }
.alt__price span{ font-size:.92rem; color:var(--ink-soft); }
.alt__badge{ align-self:flex-start; margin-bottom:6px; font-size:.7rem !important; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:#fff; color:var(--teal-ink) !important; }
.alt__price--consult, .alt__price--ended{ background:var(--sand); }
.alt__price--ended{ display:none; }
.alts__note{ margin-top:26px; text-align:center; color:var(--ink-soft); font-size:.95rem; max-width:60ch; margin-left:auto; margin-right:auto; }
.alts__cta{ margin-top:26px; display:flex; justify-content:center; }
@media(min-width:760px){ .alts__grid{ grid-template-columns:repeat(2,1fr); gap:28px; } }

/* ---------- Reembolso FONASA ---------- */
.fonasa{ position:relative; overflow:hidden; background:var(--navy); color:var(--ivory); text-align:center; padding:clamp(88px, 15vw, 170px) 0; }
.fonasa__inner{ display:flex; flex-direction:column; align-items:center; }
.fonasa__title{ color:var(--ivory); font-size:clamp(1.6rem, 6vw, 2.6rem); font-weight:500; margin-top:20px; max-width:none; }
.fonasa__amount{ margin-top:8px; font-size:clamp(3.6rem, 16vw, 8rem); font-weight:600; line-height:1.02; letter-spacing:-.05em; color:var(--teal-light); font-variant-numeric:tabular-nums; }
.fonasa__amount span{ display:block; margin-bottom:6px; font-size:.84rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(251,248,243,.78); }
.fonasa__lead{ margin-top:22px; max-width:46ch; font-size:1.0625rem; color:rgba(251,248,243,.88); }
.fonasa__points{ margin-top:34px; display:grid; gap:0; max-width:520px; width:100%; text-align:left; }
.fonasa__points li{ position:relative; padding:16px 0 16px 38px; border-top:1px solid rgba(251,248,243,.16); color:rgba(251,248,243,.86); font-size:1rem; }
.fonasa__points li:last-child{ border-bottom:1px solid rgba(251,248,243,.16); }
.fonasa__points li::before{ content:''; position:absolute; left:0; top:50%; width:22px; height:1px; background:var(--teal-light); }

/* ---------- Cómo comenzar ---------- */
.steps{ background:var(--paper); }
.steps .section-head h2{ max-width:none; }
.steps__list{ display:grid; gap:34px; list-style:none; margin:0; padding:0; }
.step{ position:relative; padding-top:26px; border-top:1px solid var(--line); }
.step::before{ content:''; position:absolute; left:0; top:-1px; width:44px; height:2px; background:var(--teal); transition:width .7s var(--ease); }
.step:hover::before{ width:100%; }
.step__n{ display:inline-grid; place-items:center; width:40px; height:40px; margin-bottom:16px; border-radius:50%; background:var(--teal-soft); color:var(--teal-ink); font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; }
.step h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.015em; margin-bottom:8px; }
.step p{ color:var(--ink-soft); max-width:30ch; }
@media(min-width:760px){ .steps__list{ grid-template-columns:repeat(3,1fr); gap:44px; } }

/* ---------- Hero: gráfica completa en arco (9:16) ---------- */
.arch--art{ aspect-ratio:9/16; width:min(70vw, 290px); background:var(--sand); }
.arch--art img{ object-fit:cover; object-position:50% 0; }
@media(min-width:900px){ .arch--art{ width:min(100%, 370px); } }

/* ---------- Espacio y equipo: gráficas (carrusel en móvil, grilla en escritorio) ---------- */
.space{ background:var(--sand); padding-left:0; padding-right:0; overflow:hidden; }
.space__track{
  display:flex; gap:16px; overflow-x:auto; padding:4px 22px 26px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.space__track::-webkit-scrollbar{ display:none; }
.space__card{ flex:0 0 min(74vw, 300px); margin:0; scroll-snap-align:center; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 26px 54px -34px rgba(15,54,83,.45); }
.space__card img{ width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }
@media(min-width:900px){
  .space__track{ max-width:1040px; margin:0 auto; padding:4px 40px 10px; overflow:visible; gap:28px; justify-content:center; }
  .space__card{ flex:1 1 0; max-width:320px; transition:transform .5s var(--ease); }
  .space__card:hover{ transform:translateY(-6px); }
}
@media(min-width:900px){ .arch--art ~ .countdown{ bottom:-34px; } }