/* Fallbacks con métricas ajustadas — minimizan el layout shift del font swap */
@font-face { font-family: 'Playfair Fallback'; src: local('Georgia'), local('Times New Roman');
  size-adjust: 112%; ascent-override: 100%; descent-override: 26%; }
@font-face { font-family: 'Inter Fallback'; src: local('Helvetica Neue'), local('Arial');
  size-adjust: 100%; }
/* Andreina Jativa DMD — shared styles v2 */
html { scroll-behavior: smooth; }
body { font-family: Inter, 'Inter Fallback', system-ui, sans-serif; background: #FFF9FB; color: #16202E; overflow-x: hidden; }
.font-display { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; }

/* gradient blobs */
.blob { position:absolute; border-radius:9999px; filter:blur(80px); opacity:.5; pointer-events:none; }

/* marquee */
.marquee-track { display:flex; gap:3rem; width:max-content; animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* reveal por IntersectionObserver (site.js) */
.reveal { opacity:0; transform:translateY(36px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }
.no-anim .reveal { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { transition:none; } }

/* before/after slider */
.ba-wrap { position:relative; overflow:hidden; border-radius:1.5rem; touch-action:none; }
.ba-wrap img { width:100%; height:100%; object-fit:cover; }
.ba-after { position:absolute; inset:0; clip-path: inset(0 0 0 50%); }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; cursor:ew-resize; }
.ba-handle::after { content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; background:#fff; border-radius:9999px; display:flex; align-items:center;
  justify-content:center; font-size:18px; color:#C10E71; box-shadow:0 4px 20px rgba(0,0,0,.25); }

/* card hover lift */
.lift { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(193,14,113,.25); }

/* word rotator — overflow:hidden cortaba las colas de la 'p' y la 'g' en itálica */
.rotator { display:inline-grid; vertical-align:bottom; padding-bottom:.12em; }
.rotator span { grid-area:1/1; white-space:nowrap; }
/* las palabras ocultas no deben ocupar ni recibir clics mientras están en 0 */
.rotator span:not(:first-child) { opacity:0; pointer-events:none; }

/* nav dropdown */
.nav-dd { position:relative; }
.nav-dd-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  opacity:0; pointer-events:none; transition:all .25s cubic-bezier(.22,1,.36,1); width:max-content; max-width:min(58rem,92vw); }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* financing calculator slider */
input[type=range].fin-range { -webkit-appearance:none; appearance:none; height:6px; border-radius:9999px;
  background: linear-gradient(90deg, #C10E71 var(--fill,50%), #FCE7F1 var(--fill,50%)); outline:none; }
input[type=range].fin-range::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px;
  border-radius:9999px; background:#fff; border:3px solid #C10E71; box-shadow:0 2px 10px rgba(193,14,113,.4); cursor:grab; }

/* quiz */
.quiz-opt { transition:all .2s; }
.quiz-opt:hover { border-color:#C10E71; background:#FDF2F8; }
.quiz-opt.sel { border-color:#C10E71; background:#FCE7F1; }
.quiz-step { display:none; }
.quiz-step.active { display:block; }

/* gallery filter */
.gal-item { transition:opacity .3s, transform .3s; }
.gal-item.hide { display:none; }
.chip { transition:all .2s; cursor:pointer; }
.chip.active { background:#C10E71; color:#fff; border-color:#C10E71; }

/* mobile menu */
/* El menú vive dentro del <header> (z-50), así que su z-index quedaba atrapado en ese
   contexto y el banner de cookies (z-70) lo tapaba. Al abrirlo elevamos el header. */
#nav.mnav-open { z-index: 120; }
#nav.mnav-open ~ #cookie-bar, body.mnav-lock #cookie-bar { display: none; }
body.mnav-lock { overflow: hidden; }
.mnav-overlay { position:fixed; inset:0; z-index:100; background:rgba(22,32,46,.45); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s; }
.mnav-overlay.open { opacity:1; pointer-events:auto; }
.mnav-panel { position:absolute; top:0; right:0; height:100dvh; width:min(22rem,88vw); background:#fff;
  padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); padding-top:calc(1.25rem + env(safe-area-inset-top)); overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.mnav-overlay.open .mnav-panel { transform:translateX(0); }
.mnav-cat a:last-child { padding-bottom:.5rem; }
.mnav-panel > a { padding-top:.55rem; padding-bottom:.55rem; font-size:1.0625rem; }
.mnav-panel .mnav-cat a { font-size:.9375rem; padding-top:.4rem; padding-bottom:.4rem; }
.nav-dd.open .nav-dd-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; }
  .blob { display:none; }
}

/* === v3 motion === */
.split-words .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em; }
.split-words .w > span { display:inline-block; transform:translateY(110%); }
.no-anim .split-words .w > span { transform:none; }
.tilt { transition:transform .25s ease-out; transform-style:preserve-3d; will-change:transform; }
.magnetic { transition:transform .2s ease-out; will-change:transform; display:inline-block; }
.exper-step:last-child .exper-line { display:none; }
#progress { transition:width .1s linear; }
.gal-item .ba-wrap img { pointer-events:none; }

/* Foco de teclado visible — Tailwind preflight lo quita y nada lo reemplazaba (WCAG 2.4.7) */
:focus-visible { outline: 3px solid #C10E71; outline-offset: 2px; border-radius: 4px; }
/* Tap targets de 44px en el acordeón de FAQ (medían 28px) */
details[data-faq] summary, .mnav-cat summary { padding-top: .5rem; padding-bottom: .5rem; min-height: 44px; }
/* Estado seleccionado también con marca, no solo color (daltonismo) */
.opt.sel::after, .chip-c.sel::after { content: ' ✓'; font-weight: 700; }

/* ── Hero móvil: lo decisivo entra en el primer pantallazo ─────────────────
   Clarity (ago-2026): visitantes de ads con scroll 7–17% en las páginas de
   servicio — casi nadie pasaba del hero, y el CTA + precio quedaban bajo el
   pliegue empujados por la descripción. En móvil se reordena con flex y la
   descripción se recorta a 3 líneas; en desktop nada cambia. */
.hero-trust{display:none}
@media (max-width:1023px){
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
  .hero-copy>*{order:9}
  .hero-copy>.hero-item:first-child{order:1}
  .hero-copy>h1{order:2}
  .hero-copy>.font-display.italic{order:3}
  .hero-trust{display:inline-flex;order:4}
  .hero-cta{order:5;margin-top:1.1rem}
  .hero-price{order:6;margin-top:1rem;padding:0.85rem 1.25rem;gap:1rem}
  .hero-price .text-4xl{font-size:1.65rem;line-height:1.1}
  .hero-desc{order:7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:1.1rem}
}

/* CTA dentro del flujo de la galería (los 83s de atención terminan en agendar) */
.gal-cta{display:flex;flex-direction:column;justify-content:center;gap:.8rem;
  border-radius:1.5rem;background:linear-gradient(135deg,#C10E71,#8d0a52);
  color:#fff;padding:2rem 1.8rem;min-height:260px}
.gal-cta .gc-t{font-size:1.35rem;font-weight:700;line-height:1.25;font-family:var(--font-display,inherit)}
.gal-cta .gc-s{font-size:.9rem;opacity:.85;line-height:1.5}
.gal-cta a{display:inline-block;background:#fff;color:#C10E71;font-weight:700;
  border-radius:9999px;padding:.8rem 1.5rem;font-size:.95rem;align-self:flex-start}