/* PREVIA v6 — editorial dark landing
   Palette anchored on #2B3534 deep forest with cream + accent variants.
   Type: Inria Serif (display, tight -0.07em) + Helvetica Neue (UI).
*/

:root{
  --c-deep: #2B3534;
  --c-deep-2: #1f2827;
  --c-cream: #F6F1E7;
  --c-cream-2: #ECE5D5;
  --c-paper: #ffffff;
  --c-ink: #111513;
  --c-ink-2: #2a302e;
  --c-mute: #5b6663;
  --c-line: rgba(255,255,255,0.14);
  --c-line-dark: rgba(17,21,19,0.10);
  --c-accent: #C4D6C5;    /* dusty sage */
  --c-accent-warm: #E8B98A; /* terracotta */
  --c-glow: rgba(196,214,197,0.6);

  --serif: 'Inria Serif', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --pad-x: clamp(20px, 4.5vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--c-paper); color:var(--c-ink); }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
button{ font-family: inherit; cursor:pointer; border:0; background:transparent; color:inherit; }
a{ color:inherit; text-decoration:none; }

/* Type — every display element uses Inria Serif with tight tracking */
.serif{ font-family: var(--serif); letter-spacing:-0.07em; font-weight:400; }
h1,h2,h3,h4{ font-family: var(--serif); letter-spacing:-0.07em; font-weight:400; margin:0; line-height:1.02; }
h1{ font-size: clamp(44px, 7.4vw, 112px); }
h2{ font-size: clamp(34px, 5.4vw, 84px); }
h3{ font-size: clamp(24px, 2.4vw, 36px); line-height:1.08; }

.eyebrow{
  font-family: var(--sans);
  font-size: 11px; font-weight:500;
  letter-spacing: .22em; text-transform:uppercase;
  color: rgba(255,255,255,0.62);
}
.eyebrow--dark{ color: rgba(17,21,19,0.52); }
.lead{ font-size: clamp(15px, 1.1vw, 18px); line-height:1.55; color: rgba(255,255,255,0.78); }
.lead--dark{ color: var(--c-mute); }

/* Animations */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes shimmer{
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes pulse-dot{
  0%,100%{ opacity: .35; transform: scale(.95); }
  50%    { opacity: 1;   transform: scale(1.05); }
}
.animate-fadeUp{ animation: fadeUp 0.6s ease-out both; }

.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }

/* Word-by-word reveal helper (used by AnimatedText) */
.aw{ display:inline-block; opacity:0; transform: translateY(20px); }
.aw.in{ animation: fadeUp 0.7s cubic-bezier(.2,.7,.2,1) forwards; }

/* ============================================================
   NAV (white bar)
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--c-line-dark);
}
.nav-inner{
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items:center; justify-content: space-between;
  padding: 11px clamp(20px, 5vw, 64px);
}
.nav-logo{
  font-family: var(--serif); letter-spacing:-0.07em;
  font-size: 26px; font-weight:600; color: var(--c-ink);
  display:inline-flex; align-items:center; gap: 8px;
}
.nav-logo .dot{
  width: 8px; height:8px; border-radius:50%;
  background: var(--c-deep);
}
.nav-links{
  display:none; gap: 26px; align-items:center;
}
@media (min-width: 1080px){
  .nav-links{ display:flex; }
}
.nav-link{
  font-size: 14px; font-weight:400; color: rgba(17,21,19,0.62);
  transition: color .2s ease;
}
.nav-link:hover{ color: var(--c-ink); }
.nav-actions{ display:flex; align-items:center; gap: 14px; }
.nav-login{
  font-size: 14px; color: rgba(17,21,19,0.62);
  padding: 8px 12px; border-radius: 8px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.nav-login:hover{ color: var(--c-ink); background: rgba(17,21,19,0.04); }
.nav-cta{
  background: var(--c-ink); color: white;
  padding: 10px 16px; border-radius: 10px;
  font-size: 14px; font-weight:500;
  white-space: nowrap;
  transition: background .2s ease, transform .15s ease;
}
.nav-cta:hover{ background: var(--c-deep); transform: translateY(-1px); }
.nav-lang{
  display:inline-flex; gap: 2px; padding: 3px;
  background: rgba(17,21,19,0.05); border-radius: 8px;
  font-size: 12px;
}
.nav-lang button{
  padding: 5px 9px; border-radius: 6px; color: rgba(17,21,19,0.55);
  font-weight:500; transition: all .15s ease;
}
.nav-lang button.active{ background: white; color: var(--c-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* ============================================================
   HERO — video bg, centered content
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction:column; align-items:center; justify-content:flex-end;
  overflow:hidden;
  padding: 120px var(--pad-x) 60px;
  color: white;
}
.hero-video, .hero-bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center 60%;
  z-index: 0;
}
.hero-veil{
  position:absolute; inset:0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 22%, rgba(0,0,0,0) 45%),
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(43,53,52,0.65) 85%, var(--c-deep) 100%);
  pointer-events:none;
}
.hero-gradient-bottom{
  position:absolute; left:0; right:0; bottom:0; height: 200px; z-index:2;
  background: linear-gradient(180deg, rgba(43,53,52,0) 0%, var(--c-deep) 75%);
  pointer-events:none;
}
.hero-content{
  position: relative; z-index: 3;
  max-width: 1100px; width: 100%;
  text-align: center;
  margin: 0 auto;
  display:flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero-eyebrow-row{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  font-size: 12px; letter-spacing: .18em; text-transform:uppercase;
  color: rgba(255,255,255,0.85);
}
.live-dot{
  width: 7px; height:7px; border-radius:50%;
  background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: pulse-dot 2.2s ease-in-out infinite;
}

.hero h1{
  color: white;
  max-width: 18ch;
}
.hero h1 em{
  font-style: italic; font-weight: 300;
  color: var(--c-accent);
}
.hero p.sub{
  font-size: clamp(16px, 1.4vw, 21px);
  max-width: 56ch;
  color: rgba(255,255,255,0.84);
  font-weight: 300;
}

/* ============================================================
   INTERACTIVE HUB (chat-style input box)
   ============================================================ */
.hub{
  width: 100%;
  max-width: 640px;
  margin-top: 8px;
  background: var(--c-deep);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.3);
  padding: 16px;
  text-align:left;
}
.hub-textarea-wrap{
  padding: 10px 8px 4px;
}
.hub textarea{
  width: 100%; resize: none;
  background: transparent; color: white;
  border: 0; outline: 0;
  font-family: inherit; font-size: 15px;
  min-height: 56px;
  padding: 4px 0;
  caret-color: var(--c-accent);
}
.hub textarea::placeholder{ color: rgba(255,255,255,0.45); }

.hub-chips-row{
  position:relative;
  padding: 8px 4px 4px;
}
.hub-chips{
  display:flex; gap: 8px;
  overflow-x: auto;
  padding-right: 36px;
  scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
}
.hub-chips::-webkit-scrollbar{ display:none; }
.hub-chips-fade{
  position:absolute; right: 4px; top:8px; bottom:4px; width: 48px;
  background: linear-gradient(90deg, transparent, var(--c-deep));
  pointer-events: none;
}
.chip{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 13px; white-space: nowrap;
  transition: all .18s ease;
  flex-shrink: 0;
}
.chip:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); color: white; transform: translateY(-1px); }
.chip svg{ width:14px; height:14px; opacity: .85; }
.chip.active{ background: var(--c-accent); color: var(--c-deep-2); border-color: transparent; }
.chip.active svg{ opacity: 1; }

.hub-footer{
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 6px 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.hub-footer-meta{
  display:flex; align-items:center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.45);
}
.hub-footer-meta .dot{
  width:6px; height:6px; border-radius:50%; background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,.7);
}
.hub-send{
  display:inline-flex; align-items:center; gap: 8px;
  background: white; color: var(--c-ink);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  transition: transform .15s ease, background .2s ease;
}
.hub-send:hover{ transform: translateY(-1px); background: var(--c-accent); }
.hub-send svg{ width:14px; height:14px; }

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.section{
  padding: clamp(80px, 11vh, 160px) var(--pad-x);
}
.section--deep{ background: var(--c-deep); color: white; }
.section--cream{ background: var(--c-cream); color: var(--c-ink); }
.section--paper{ background: white; color: var(--c-ink); }
.wrap{ max-width: 1280px; margin: 0 auto; }

/* Section 2 — proactive shield */
.shield{
  display:grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 880px){
  .shield{ grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: end; }
}
.shield h2{ color: white; max-width: 14ch; }
.shield h2 em{ font-style: italic; color: var(--c-accent); font-weight: 300; }
.shield-right{ display:flex; flex-direction:column; gap: 20px; align-items: stretch; }
@media (min-width: 880px){
  .shield-right{ align-items: flex-end; text-align: right; padding-bottom: 8px; }
}
.shield-right p{
  max-width: 38ch; color: rgba(255,255,255,0.78); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.55;
}
.shield-meta{
  display:flex; gap: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(255,255,255,0.5);
}
.shield-meta strong{ color: white; font-weight: 500; }

/* Section dividers */
.section-divider{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform:uppercase;
  color: rgba(255,255,255,0.5);
}
.section-divider .line{ flex:1; height:1px; background: rgba(255,255,255,0.12); }
.section-divider--dark .line{ background: rgba(17,21,19,0.12); }
.section-divider--dark{ color: rgba(17,21,19,0.55); }

/* ============================================================
   HOW IT WORKS — editorial 4-step
   ============================================================ */
.steps-head{
  display:flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: 56px; flex-wrap: wrap;
}
.steps-head h2{ max-width: 16ch; }
.steps-head h2 em{ font-style: italic; color: var(--c-deep); font-weight: 300; }
.steps-head .lead--dark{ max-width: 36ch; color: var(--c-mute); }
.steps{
  display:grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line-dark);
  border-top: 1px solid var(--c-line-dark);
  border-bottom: 1px solid var(--c-line-dark);
}
@media (min-width: 720px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .steps{ grid-template-columns: repeat(4, 1fr); } }
.step{
  background: var(--c-cream);
  padding: 36px 28px 32px;
  display:flex; flex-direction:column; gap: 14px;
  min-height: 320px;
  transition: background .25s ease;
}
.step:hover{ background: var(--c-cream-2); }
.step-num{
  font-family: var(--serif); font-size: 56px; letter-spacing:-0.07em;
  color: var(--c-deep); font-weight: 300;
  line-height: 1;
}
.step h3{ font-family: var(--serif); letter-spacing:-0.07em; font-size: 26px; color: var(--c-ink); }
.step p{ color: var(--c-mute); font-size: 14px; line-height:1.6; margin: 0; }
.step-time{
  margin-top: auto;
  font-size: 11px; letter-spacing: .22em; text-transform:uppercase;
  color: rgba(17,21,19,0.5);
  display:flex; align-items:center; gap: 8px;
}
.step-time::before{
  content:""; width: 24px; height:1px; background: var(--c-deep);
}

/* ============================================================
   SCANNER showcase
   ============================================================ */
.scanner{
  display:grid; gap: 60px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px){
  .scanner{ grid-template-columns: 1fr 1fr; gap: 80px; }
}
.scanner-copy h2{ max-width: 14ch; }
.scanner-copy h2 em{ font-style: italic; color: var(--c-accent); font-weight: 300; }
.scanner-copy .lead{ max-width: 40ch; }
.scanner-figure{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(160deg, #1d2625, var(--c-deep));
  border: 1px solid rgba(255,255,255,0.08);
}
.scanner-figure img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity: .9;
  mix-blend-mode: luminosity;
}
.scanner-figure::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(196,214,197,0.18), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(43,53,52,0.6) 100%);
}
.scanner-readout{
  position:absolute; left: 24px; right: 24px; bottom: 24px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  z-index: 2;
}
.readout{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  padding: 12px;
  border-radius: 14px;
}
.readout .label{ font-size: 10px; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.readout .value{ font-family: var(--serif); letter-spacing:-0.07em; font-size: 30px; color: white; line-height:1; margin-top: 6px; }
.readout .unit{ font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.scanner-markers{
  position:absolute; inset: 0; z-index: 2; pointer-events:none;
}
.scanner-marker{
  position:absolute; display:flex; align-items:center; gap: 10px;
  font-size: 11px; letter-spacing: .12em; text-transform:uppercase; color: white;
}
.scanner-marker .pin{
  width: 10px; height:10px; border-radius:50%; background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(196,214,197,0.18), 0 0 0 10px rgba(196,214,197,0.08);
}
.scanner-marker .conn{
  width: 60px; height: 1px; background: rgba(255,255,255,0.5);
}
.scanner-vitals-list{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px;
  margin-top: 32px;
}
.vital-item{
  display:flex; flex-direction:column; gap: 4px;
  padding: 14px 0; border-top: 1px solid var(--c-line-dark);
}
.vital-item .name{ font-size: 14px; color: var(--c-ink); font-weight: 500; }
.vital-item .meta{ font-size: 12px; color: var(--c-mute); }

/* ============================================================
   DOCTORS strip
   ============================================================ */
.doctors{
  display:grid; gap: 40px;
  grid-template-columns: 1fr;
  align-items:center;
}
@media (min-width: 880px){ .doctors{ grid-template-columns: 1fr 1.4fr; } }
.doctors-copy h2{ max-width: 12ch; color: white; }
.doctors-copy h2 em{ font-style: italic; color: var(--c-accent); font-weight: 300; }
.doctors-list{
  display:flex; flex-direction:column; gap: 0;
}
.doctor{
  display:grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items:center;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.10);
}
.doctor:last-child{ border-bottom: 1px solid rgba(255,255,255,0.10); }
.doctor-avatar{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-deep-2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.16);
}
.doctor-avatar img{ width:100%; height:100%; object-fit: cover; }
.doctor-name{ font-family: var(--serif); letter-spacing:-0.07em; font-size: 22px; color: white; line-height: 1.1; }
.doctor-spec{ font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: .14em; text-transform:uppercase; margin-top: 4px; }
.doctor-cedula{
  font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.45);
}

/* ============================================================
   PRICING — Dr. Simi positioning
   ============================================================ */
.pricing{
  display:grid; gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px){ .pricing{ grid-template-columns: 1.05fr 1.95fr; gap: 64px; } }
.pricing-copy h2{ max-width: 14ch; }
.pricing-copy h2 em{ font-style: italic; color: var(--c-deep); font-weight: 300; }
.price-cards{
  display:grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .price-cards{ grid-template-columns: repeat(3, 1fr); } }
.price-card{
  background: white;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  display:flex; flex-direction:column; gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.12); border-color: rgba(43,53,52,0.25); }
.price-card.featured{
  background: var(--c-deep); color: white; border-color: var(--c-deep);
}
.price-card.featured .price-name{ color: rgba(255,255,255,0.7); }
.price-card.featured .price-amt{ color: white; }
.price-card.featured .price-foot{ color: rgba(255,255,255,0.5); }
.price-card.featured ul li{ color: rgba(255,255,255,0.78); }
.price-card.featured ul li::before{ background: var(--c-accent); }
.price-card.featured .price-cta{ background: var(--c-accent); color: var(--c-deep-2); }
.price-name{ font-size: 12px; letter-spacing: .22em; text-transform:uppercase; color: var(--c-mute); }
.price-amt{
  font-family: var(--serif); letter-spacing: -0.07em; font-size: 56px; line-height: 1;
  color: var(--c-ink); font-weight: 400;
}
.price-amt sup{ font-size: 18px; vertical-align: top; margin-right: 4px; opacity: .7; }
.price-amt small{ font-family: var(--sans); font-size: 13px; color: var(--c-mute); margin-left: 4px; letter-spacing:0; font-weight: 400; }
.price-foot{ font-size: 12px; color: var(--c-mute); }
.price-card ul{ list-style:none; padding:0; margin: 0; display:flex; flex-direction:column; gap: 10px; }
.price-card ul li{
  font-size: 13px; color: var(--c-ink-2);
  display:flex; align-items:flex-start; gap: 10px;
}
.price-card ul li::before{
  content:""; flex-shrink:0; width: 6px; height:6px; border-radius:50%;
  background: var(--c-deep); margin-top: 7px;
}
.price-cta{
  margin-top: auto;
  background: var(--c-ink); color: white;
  border-radius: 10px; padding: 12px 14px;
  font-size: 13px; font-weight:500; text-align:center;
  display: inline-flex; align-items:center; justify-content:center; gap: 8px;
  white-space: nowrap;
  border: 0; cursor: pointer; font-family: inherit;
}
.price-cta:hover{ background: var(--c-deep); }
.price-card.featured .price-cta:hover{ background: white; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final{
  position: relative; isolation: isolate;
  padding: clamp(100px, 14vh, 200px) var(--pad-x);
  text-align: center;
  color: white;
  overflow:hidden;
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background: var(--c-deep);
  z-index: -2;
}
.cta-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; opacity: .35; z-index: -1;
}
.cta-final h2{
  max-width: 16ch; margin: 0 auto;
}
.cta-final h2 em{ font-style: italic; color: var(--c-accent); font-weight: 300; }
.cta-final .lead{ max-width: 48ch; margin: 24px auto 36px; }
.cta-final-actions{ display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; }
.btn-primary{
  display:inline-flex; align-items:center; gap: 10px;
  background: white; color: var(--c-ink);
  padding: 14px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: transform .15s ease, background .2s ease;
}
.btn-primary:hover{ background: var(--c-accent); transform: translateY(-1px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap: 10px;
  background: transparent; color: white;
  padding: 14px 22px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.30);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background .2s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.08); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background: var(--c-deep-2); color: rgba(255,255,255,0.65);
  padding: 60px var(--pad-x) 30px;
  font-size: 13px;
}
.footer-inner{ max-width: 1280px; margin: 0 auto; display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .footer-inner{ grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand{ color: white; }
.footer-brand .logo{ font-family: var(--serif); letter-spacing:-0.07em; font-size: 30px; }
.footer-brand p{ max-width: 32ch; margin: 12px 0 0; color: rgba(255,255,255,0.55); }
.footer-col h4{ font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform:uppercase; color: rgba(255,255,255,0.55); margin-bottom: 14px; font-weight: 500; }
.footer-col a{ display:block; padding: 5px 0; color: rgba(255,255,255,0.78); transition: color .15s ease; }
.footer-col a:hover{ color: white; }
.footer-bottom{
  max-width: 1280px; margin: 50px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.45);
}

/* ============================================================
   Testimonials micro-strip (cream)
   ============================================================ */
.testi{
  display:grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .testi{ grid-template-columns: repeat(3, 1fr); } }
.testi-card{
  background: white; border-radius: var(--r-lg);
  padding: 28px;
  display:flex; flex-direction:column; gap: 18px;
  border: 1px solid var(--c-line-dark);
}
.testi-card blockquote{
  margin:0; font-family: var(--serif); letter-spacing:-0.04em;
  font-size: 22px; line-height: 1.25; color: var(--c-ink);
}
.testi-foot{
  display:flex; align-items:center; gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--c-line-dark);
}
.testi-foot img{ width: 38px; height: 38px; border-radius:50%; object-fit:cover; }
.testi-foot .who{ font-size: 13px; color: var(--c-ink); font-weight:500; }
.testi-foot .meta{ font-size: 12px; color: var(--c-mute); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .aw{ opacity:1; transform: none; animation: none !important; }
  .hero-video, .cta-bg{ display:none; }
}

/* ============================================================
   IMMERSIVE — world-per-section (Capa 2 + 3)
   ============================================================ */

/* Entrance transition (Capa 2): scale + blur + opacity */
.world-section{
  transform: scale(0.96);
  opacity: 0;
  filter: blur(14px);
  transition:
    transform 1100ms cubic-bezier(.2,.7,.2,1),
    opacity 900ms cubic-bezier(.2,.7,.2,1),
    filter 1100ms cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity, filter;
}
.world-section.in-view{
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

/* Section with video bg (Capa 1: Shield + Doctors) */
.section--deep.has-video-bg{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section-video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.section--deep.has-video-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(31,40,39,0.78) 0%,
      rgba(31,40,39,0.50) 30%,
      rgba(31,40,39,0.50) 70%,
      rgba(31,40,39,0.78) 100%);
  pointer-events: none;
}
.section--deep.has-video-bg > .wrap{
  position: relative;
  z-index: 2;
}

/* Atmosphere shift (Capa 3): nav tints dark when on dark sections */
.nav{
  transition:
    background-color 700ms ease,
    border-bottom-color 700ms ease,
    color 700ms ease;
}
body[data-active-world="dark"] .nav{
  background: rgba(14, 18, 17, 0.78);
  border-bottom-color: rgba(255,255,255,0.06);
}
body[data-active-world="dark"] .nav-logo,
body[data-active-world="dark"] .nav-link,
body[data-active-world="dark"] .nav-login{
  color: rgba(255,255,255,0.86);
}
body[data-active-world="dark"] .nav-link:hover,
body[data-active-world="dark"] .nav-login:hover{
  color: white;
  background: rgba(255,255,255,0.06);
}
body[data-active-world="dark"] .nav-logo .dot{
  background: var(--c-accent);
}
body[data-active-world="dark"] .nav-cta{
  background: white;
  color: var(--c-ink);
}
body[data-active-world="dark"] .nav-cta:hover{
  background: var(--c-cream);
}
body[data-active-world="dark"] .nav-lang{
  background: rgba(255,255,255,0.08);
}
body[data-active-world="dark"] .nav-lang button{
  color: rgba(255,255,255,0.55);
}
body[data-active-world="dark"] .nav-lang button.active{
  background: rgba(255,255,255,0.95);
  color: var(--c-ink);
}

/* Reduce motion = disable immersive entrance */
@media (prefers-reduced-motion: reduce){
  .world-section{
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  .section-video-bg{ display: none; }
}

/* ============================================================
   ULTRA IMMERSIVE 3D — Path A maxed (Lenis + CSS perspective)
   ============================================================ */

/* Global 3D perspective container — the whole page is now a 3D stage */
html.ultra-3d{
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
html.ultra-3d body{
  transform-style: preserve-3d;
}

/* Each section is a "world" — tilts on scroll, settles when centered */
html.ultra-3d .world-section{
  transform-style: preserve-3d;
  transform: translateZ(0) rotateX(var(--world-tilt, 0deg)) scale(var(--world-scale, 0.96));
  opacity: var(--world-opacity, 0);
  filter: blur(var(--world-blur, 14px));
  transition: none;  /* driven by scroll JS, not CSS transitions */
  transform-origin: 50% 50%;
}
html.ultra-3d .world-section.in-view{
  --world-opacity: 1;
  --world-scale: 1;
  --world-blur: 0px;
  /* tilt keeps animating via JS scrollY → --world-tilt */
}
html.ultra-3d .world-section:not(.in-view){
  --world-opacity: 0;
  --world-scale: 0.92;
  --world-blur: 18px;
}

/* Parallax depth layers inside hero — text floats CLOSER to camera, video bg FARTHER */
html.ultra-3d .hero{ transform-style: preserve-3d; }
html.ultra-3d .hero-video,
html.ultra-3d .hero-bg-img{
  transform: translateZ(-160px) scale(1.18);
  transform-origin: 50% 50%;
}
html.ultra-3d .hero-content{
  transform: translateZ(40px);
  transform-style: preserve-3d;
}
html.ultra-3d .hero h1{ transform: translateZ(60px); }
html.ultra-3d .hero .hub{
  transform: translateZ(80px) translateY(calc(var(--scroll-shift, 0) * -0.4px));
}

/* Same for sections with video bg */
html.ultra-3d .section--deep.has-video-bg .section-video-bg{
  transform: translateZ(-120px) scale(1.16);
}
html.ultra-3d .section--deep.has-video-bg > .wrap{
  transform: translateZ(40px);
}
html.ultra-3d .cta-bg{
  transform: translateZ(-140px) scale(1.18);
}

/* Cursor-driven parallax — sutil mouse-influences scene depth on desktop */
@media (hover: hover) and (pointer: fine){
  html.ultra-3d .hero,
  html.ultra-3d .section--deep.has-video-bg,
  html.ultra-3d .cta-final{
    transform: translate3d(
      calc(var(--mx, 0) * 8px),
      calc(var(--my, 0) * 6px),
      0
    );
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  }
}

/* Curtain wipe — when a world enters viewport, a sage curtain sweeps across */
html.ultra-3d .world-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(196,214,197,0.0) 35%,
    rgba(196,214,197,0.55) 50%,
    rgba(196,214,197,0.0) 65%,
    transparent 100%);
  transform: translateX(-110%) skewX(-12deg);
  pointer-events: none;
  opacity: 0;
}
html.ultra-3d .world-section.curtain-sweep::before{
  animation: curtainSweep 1100ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes curtainSweep{
  0%   { transform: translateX(-110%) skewX(-12deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(110%) skewX(-12deg); opacity: 0; }
}

/* Dramatic entrance escalonado — h2, lead, meta enter at different depths/times */
html.ultra-3d .world-section.in-view h2,
html.ultra-3d .world-section.in-view h1{
  animation: enter3DTitle 1200ms cubic-bezier(.2,.7,.2,1) both;
}
html.ultra-3d .world-section.in-view .lead,
html.ultra-3d .world-section.in-view .sub,
html.ultra-3d .world-section.in-view p{
  animation: enter3DBody 1100ms cubic-bezier(.2,.7,.2,1) 200ms both;
}
html.ultra-3d .world-section.in-view .step,
html.ultra-3d .world-section.in-view .price-card,
html.ultra-3d .world-section.in-view .doctor,
html.ultra-3d .world-section.in-view .testi-card{
  animation: enter3DCard 1100ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(300ms + var(--card-i, 0) * 90ms);
}
@keyframes enter3DTitle{
  0%   { opacity: 0; transform: translateZ(-200px) translateY(40px) scale(1.04); filter: blur(22px); }
  60%  { filter: blur(2px); }
  100% { opacity: 1; transform: translateZ(0) translateY(0) scale(1); filter: blur(0); }
}
@keyframes enter3DBody{
  0%   { opacity: 0; transform: translateZ(-100px) translateY(20px); filter: blur(12px); }
  100% { opacity: 1; transform: translateZ(0) translateY(0); filter: blur(0); }
}
@keyframes enter3DCard{
  0%   { opacity: 0; transform: translateZ(-180px) translateY(60px) rotateX(8deg); filter: blur(14px); }
  100% { opacity: 1; transform: translateZ(0) translateY(0) rotateX(0); filter: blur(0); }
}

/* Reduce-motion kill switch */
@media (prefers-reduced-motion: reduce){
  html.ultra-3d,
  html.ultra-3d body{
    perspective: none;
    transform-style: flat;
  }
  html.ultra-3d .world-section,
  html.ultra-3d .world-section *,
  html.ultra-3d .hero-video,
  html.ultra-3d .section-video-bg,
  html.ultra-3d .cta-bg{
    transform: none !important;
    animation: none !important;
    --world-tilt: 0deg !important;
  }
}

/* Fix overflow-x from 3D transforms */
html.ultra-3d, html.ultra-3d body{ overflow-x: hidden; }
html.ultra-3d{ overflow-x: hidden; }