/* ============================================================
   MISSION HEALTH INSURANCE · home.css
   Loader "la llave que abre" -> (1) hero wordmark-sandwich ->
   (2) manifiesto + journey de la llave -> (3) banda del lema ->
   (4) como te acompanamos -> (4.5) escaparate servicios -> (5) CTA
   ============================================================ */

/* ---------- LOADER V4 · "LATIDO DE LA LLAVE" (~1.3s) ----------
   1 glifo se DIBUJA en tinta -> 2 UN latido (el corazon se llena de rojo
   + pulso-ECG hairline debajo) -> 3 handoff: el glifo VUELA al logo del nav
   mientras dos telones crema abren en VERTICAL (clip-path inset). */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:1.15rem;contain:strict;pointer-events:none}
.loader-panel{position:absolute;left:0;right:0;height:50.35%;background:
  linear-gradient(180deg,#FFFFFF 0%,var(--surface) 55%,#E7EFF7 100%);z-index:1}
.loader-panel.lp-t{top:0}
.loader-panel.lp-b{bottom:0}
.loader-mark{position:relative;z-index:2;width:clamp(96px,13vw,148px);color:var(--ink)}
.loader-mark svg{width:100%;height:auto;overflow:visible}
.loader-trace .lt-heart{fill:var(--red);fill-opacity:0}
.loader-ecg{position:relative;z-index:2;width:clamp(150px,17vw,220px);color:var(--red)}
.loader-ecg svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.loader-tag{position:relative;z-index:2;font-size:.76rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mut)}
html.langswap .loader{display:none}
/* sin JS el loader no puede cerrarse solo: bail de cortesia (JS pone .js antes) */
@keyframes loader-bail{to{visibility:hidden}}
html:not(.js) .loader{animation:loader-bail 0s 3.2s forwards}

/* ============================================================
   (1) HERO · WORDMARK SANDWICH sobre el PLATE limpio (key = cutout CSS)
   z: plate -> wordmark(11%) -> H1/tipo -> llave-cutout -> satelites
   ============================================================ */
/* background transparente: en la FASE D de la puerta el bloque 2 (que scrollea
   DEBAJO del hero pineado, pinSpacing:false) debe verse por la abertura */
.hero{position:relative;height:100vh;min-height:660px;background:transparent;overflow:clip;z-index:5}
.hero-scene{position:absolute;inset:0}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-sky{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 50% at 88% 12%,rgba(12,98,181,.12),transparent 70%)}
.hero-stage{position:absolute;left:50%;top:0;z-index:5;transform:translateX(-50%);width:min(100%,1680px);height:100%}

/* RAYOS DE LUZ-DIA FRIOS horneados (arriba-derecha, hero elaborado 0712) */
.hero-rays{position:absolute;inset:0;pointer-events:none;opacity:.12}
.hero-rays img{width:100%;height:100%;object-fit:cover;object-position:100% 0}

/* SATELITES GLASS con FOTO REAL (Lilia + comunidad) · gutter derecho FUERA
   de la silueta de la llave (ley e2: relativos al stage, techo px).
   El asset trae marco glass + hairline + SOMBRA HORNEADA (pad 42/384). */
.hero-sat{position:absolute;z-index:2;width:clamp(112px,9.6vw,148px);pointer-events:none}
.hero-sat img{width:100%;height:auto}
.hero-sat--a{right:0.6%;top:13.5%}
.hero-sat--b{right:2.8%;bottom:17%}
@media (max-width:1023px){.hero-sat{display:none}}

/* micro-cota ECG hairline tono-sobre-tono (susurro del concepto) */
.hero-ecg{position:absolute;right:3.2%;bottom:6.4%;z-index:1;width:clamp(150px,15vw,220px);height:auto;color:rgba(13,27,46,.12);pointer-events:none}
@media (max-width:1023px){.hero-ecg{display:none}}

/* WORDMARK GIGANTE fantasma en HUECO/outline Bricolage (0711-s#2), z ENTRE plate y llave */
.hero-word{position:absolute;left:50%;top:45%;z-index:1;translate:-50% -50%;
  font-family:var(--font-display);font-weight:800;line-height:.82;white-space:nowrap;
  font-size:min(20vw,344px);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px rgba(13,27,46,.16);
  pointer-events:none;user-select:none}

.hero-type{position:absolute;left:5%;top:21%;z-index:2;max-width:46%}
.hero-eyebrow{margin-bottom:1.1rem}
.hero-h1{font-family:var(--font-display);font-weight:800;font-size:var(--h1fs);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.hero-h1 .hl-in{white-space:nowrap}
.hero-h1 em{color:var(--blue-ink)}
.hero-sub{margin-top:clamp(1rem,2.2vh,1.5rem);color:var(--ink-soft);max-width:42ch;font-size:1.12rem}
.hero-ctas{margin-top:clamp(1.3rem,3vh,2rem);display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.hero-proof{margin-top:clamp(1.2rem,2.8vh,1.7rem);display:flex;gap:.7rem;flex-wrap:wrap}

/* EL OBJETO: llave-cutout con sombra HORNEADA (hero-key-soft, 0 filter vivo),
   traveler del momento firma "la llave que abre"; muerde el wordmark 40-50%;
   el H1 vive en el hueco izquierdo (oclusion 0). El asset horneado trae PAD
   (90px/826 y 90px/1725) -> el wrap compensa para que la llave VISUAL quede
   donde estaba la original. */
/* 0712 sprint: llave ~0.76x, COMPLETA en viewport (bow+vastago+dientes);
   techo 42vh garantiza que el alto (2.088x el ancho) quepa @900 y @800 */
.hero-key-wrap{position:absolute;z-index:3;width:min(28%,42vh,406px);left:54%;top:4%;pointer-events:none;will-change:transform}
.hero-key{position:relative;z-index:2;width:100%;height:auto}

.hero-cue{position:absolute;left:5%;bottom:3.4%;z-index:4;display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mut)}
.hero-cue i{width:22px;height:36px;border:1.5px solid var(--hairline);border-radius:12px;position:relative;flex:none}
.hero-cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:2px;background:var(--blue);transform:translateX(-50%);animation:cue-drop 2.2s var(--ease-house) infinite}
@keyframes cue-drop{0%{transform:translate(-50%,0);opacity:1}70%{transform:translate(-50%,14px);opacity:0}100%{transform:translate(-50%,0);opacity:0}}

/* tira de FOTOS REALES del manifiesto (presencia de SU trabajo, 0712) */
.manifest-snaps{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.manifest-snaps img{width:clamp(78px,7vw,96px);height:clamp(78px,7vw,96px);object-fit:cover;border-radius:14px;border:1px solid var(--hairline);box-shadow:0 12px 26px -16px rgba(13,27,46,.4)}
.snaps-cap{flex-basis:100%;font-size:.8rem;font-weight:600;letter-spacing:.05em;color:var(--ink-mut)}

/* ============================================================
   TRANSICION DE NUBES (estilo FIND/v23) · costura hero->bloque 2
   3 nubes horneadas con borde pluma (webp alpha, del cielo once re-horneado)
   cruzan la costura; GSAP las sube a velocidades distintas y las disuelve
   a scrub SIN pin (100% reversible). GSAP dueno unico del transform.
   ============================================================ */
.cloud-seam{position:relative;z-index:6;height:0;pointer-events:none}
.cloud{position:absolute;height:auto;will-change:transform,opacity}
.cloud--1{left:-7%;top:-130px;width:min(52vw,680px)}
.cloud--2{left:36%;top:-84px;width:min(46vw,600px)}
.cloud--3{left:auto;right:-8%;top:-160px;width:min(40vw,540px)}
@media (max-width:760px){
  .cloud--1{left:-16%;top:-92px;width:74vw}
  .cloud--2{left:30%;top:-56px;width:66vw}
  .cloud--3{right:-18%;top:-118px;width:60vw}
}
@media (prefers-reduced-motion:reduce){.cloud-seam{display:none}}
html:not(.js) .cloud-seam{display:none}

/* ============================================================
   (2) MANIFIESTO + DOCK del journey (crema)
   ============================================================ */
.manifest{position:relative;z-index:1;background:var(--surface);color:var(--ink);padding:calc(var(--space-clear) + 1rem) var(--inset) var(--space-clear);display:grid;align-items:center;overflow:clip}
.manifest .ghost-num{right:39%;top:2%;z-index:0}
.manifest-inner{position:relative;width:min(100%,1360px);margin-inline:auto;display:grid;grid-template-columns:1.05fr .92fr;gap:clamp(2.4rem,5vw,5.5rem);align-items:stretch}
.manifest-copy{position:relative;z-index:2;max-width:56ch}
.manifest-copy .kicker{margin-bottom:1.3rem}
.manifest h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,4.6vw,4.2rem);line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.manifest h2 em{color:var(--blue-ink)}
.manifest-copy>p{margin-top:1.5rem;color:var(--ink-soft);max-width:52ch;font-size:1.1rem}
.manifest-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.7rem;font-weight:600;color:var(--blue-ink);border-bottom:1.5px solid rgba(12,98,181,.35);padding-bottom:.22rem;transition:border-color .25s,color .25s}
.manifest-link:hover{color:var(--blue-deep);border-color:var(--blue-deep)}
.manifest-trust{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.9rem}

.manifest-dock{position:relative;z-index:1;display:flex;flex-direction:column}
.dock-panel{position:relative;flex:1;display:grid;align-content:center;border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(0deg,rgba(13,27,46,.035) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(90deg,rgba(13,27,46,.03) 0 1px,transparent 1px 54px),
    linear-gradient(165deg,#FFFFFF 0%,var(--surface-3) 60%,#E4EDF6 100%);
  border:1px solid var(--hairline);padding:clamp(1.8rem,3vw,2.8rem) clamp(1.5rem,2.4vw,2.4rem) clamp(2.2rem,3.4vw,3.2rem);
  box-shadow:0 44px 80px -46px rgba(13,27,46,.35)}
.dock-slot{position:relative;width:100%;display:grid;place-items:center;min-height:clamp(320px,36vw,460px)}
/* FOTO REAL de Lilia trabajando (0712, orden del dueno): encuadre editorial,
   marco del panel intacto; la llave ya vive en el hero (no se repite aqui).
   AGRANDADA (0712-b, pedido urgente pre-reunion): 400->560 / 380->520 */
.dock-photo{width:min(100%,560px);height:clamp(360px,40vw,520px);object-fit:cover;object-position:50% 32%;
  border-radius:16px;border:1px solid var(--hairline);box-shadow:0 30px 60px -34px rgba(13,27,46,.5)}
.dock-cap{display:block;margin-top:1.2rem;text-align:center;font-family:var(--font-display);font-style:normal;font-weight:600;font-size:1.05rem;color:var(--ink-soft)}
.dock-badge{position:absolute;right:-14px;top:24px;z-index:3;display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:.55rem .85rem;box-shadow:0 20px 40px -20px rgba(13,27,46,.4);font-size:.8rem;font-weight:600;color:var(--ink)}
.dock-badge b{color:var(--red);font-family:var(--font-display);font-weight:700;font-size:1.05rem}

/* ============================================================
   (3) BANDA · el LEMA (crema alterno · divisor calido)
   ============================================================ */
.band{position:relative;overflow:clip;background:var(--surface-2);color:var(--ink);
  /* achicada 0712-b (pedido urgente pre-reunion): 62vh->40vh, aire recortado */
  min-height:40vh;display:grid;align-items:center;padding:clamp(2.4rem,5vw,4rem) var(--inset)}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(70% 90% at 20% 30%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(60% 80% at 92% 80%,rgba(12,98,181,.05),transparent 70%)}
.band-inner{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;max-width:74%}
.band .ghost-word{left:2%;top:8%;font-size:min(20vw,300px)}
.band-eyebrow{margin-bottom:1.4rem}
.band-phrase{font-family:var(--font-display);font-weight:800;font-size:var(--text-band);line-height:1.04;letter-spacing:-.01em;max-width:16ch}
.band-phrase em{color:var(--blue-ink)}
.band-quote{margin-top:1.5rem;color:var(--ink-soft);font-size:1.12rem;max-width:44ch}
.band-key{position:absolute;right:4%;bottom:6%;z-index:1;width:clamp(150px,15vw,240px);opacity:.96;pointer-events:none} /* sombra horneada; achicada+reposicionada 0712-d para que quepa COMPLETA */
/* 0712-c urgente: foto real reemplaza la llave del banner (marco tarjeta) */
.band-photo{position:absolute;right:4%;bottom:6%;z-index:1;width:clamp(220px,22vw,320px);
  aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid var(--hairline);
  box-shadow:0 34px 60px -30px rgba(13,27,46,.45)}
@media (max-width:900px){.band-photo{right:-4%;bottom:auto;top:-6%;width:150px;opacity:.9}}
@media (max-width:900px){.band-inner{max-width:100%}.band-key{right:-6%;bottom:auto;top:-8%;width:166px;opacity:.5}}

/* ============================================================
   (4) PROCESO · "Como te acompanamos" (crema · 4 pasos + key ghost)
   ============================================================ */
.process{position:relative;overflow:clip;background:var(--surface);color:var(--ink);padding:var(--space-clear) var(--inset) calc(var(--space-clear) + 1rem)}
.process-key{position:absolute;left:50%;top:56%;translate:-50% -50%;width:min(26vw,280px);color:rgba(13,27,46,.05);pointer-events:none;user-select:none}
.process-key svg{width:100%;height:auto}
.process-head{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;margin-bottom:clamp(2.4rem,4vw,3.6rem);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem}
.process-head .kicker{margin-bottom:1rem}
.process-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.05;max-width:18ch}
.process-head h2 em{color:var(--blue-ink)}
.process-note{color:var(--ink-soft);max-width:38ch;font-size:1.05rem}
.steps{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.2vw,2.2rem)}
.step{position:relative;background:rgba(255,255,255,.5);border:1px solid var(--hairline-2);border-radius:var(--radius);padding:clamp(1.4rem,2vw,1.9rem);display:grid;gap:.2rem}
.step-conn{position:absolute;top:2.8rem;right:calc(100% + .35rem);width:clamp(.8rem,1.8vw,1.9rem);height:2px;background:rgba(12,98,181,.3);transform-origin:left center;display:block}
.step:first-child .step-conn{display:none}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:.9;color:var(--blue);letter-spacing:-.02em}
.step-hl{display:inline-block;overflow:hidden}
.step-ico{width:38px;height:38px;color:var(--red)}
.step-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.15;margin-top:1rem}
.step p{margin-top:.5rem;color:var(--ink-soft);font-size:1rem;max-width:26ch}

/* ============================================================
   (4.5) ESCAPARATE · los 5 seguros (bento de iconos, crema alterno)
   ============================================================ */
.showcase{position:relative;overflow:clip;background:var(--surface-2);color:var(--ink);padding:var(--space-clear) var(--inset);content-visibility:auto;contain-intrinsic-size:auto 900px}
.showcase .ghost-word{right:-1%;bottom:-2%;font-size:min(15vw,220px)}
.showcase-head{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;margin-bottom:clamp(2rem,3.4vw,3rem);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem}
.showcase-head .kicker{margin-bottom:1rem}
.showcase-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.05;max-width:20ch}
.showcase-head h2 em{color:var(--blue-ink)}
.showcase-note{color:var(--ink-soft);max-width:40ch;font-size:1.05rem}
.sc-grid{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
.sc-tile{position:relative;display:flex;flex-direction:column;gap:.5rem;background:var(--surface-3);border:1px solid var(--hairline);border-radius:var(--radius);padding:clamp(1.5rem,2.2vw,2rem);color:var(--ink);box-shadow:0 26px 50px -40px rgba(13,27,46,.4);transition:border-color .25s,box-shadow .25s}
.sc-tile.is-in{transition:border-color .25s,box-shadow .25s}
.sc-tile:hover{border-color:rgba(12,98,181,.4);box-shadow:0 32px 60px -34px rgba(13,27,46,.45)}
/* numerales 01-05 en HUECO/outline display (Bricolage) (tratamiento 0711-s#2) */
.sc-idx{font-family:var(--font-display);font-weight:700;font-size:2.3rem;line-height:.9;
  color:transparent;-webkit-text-stroke:1.3px rgba(13,27,46,.34);letter-spacing:-.01em}
.sc-ico{width:52px;height:52px;color:var(--blue);margin-bottom:.2rem}
.sc-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sc-tile h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.15}
.sc-line{color:var(--ink-soft);font-size:1rem;flex:1}
.sc-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;font-weight:600;font-size:.95rem;color:var(--blue-ink)}
.sc-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.sc-tile:hover .sc-cta svg{transform:translate(3px,-3px)}
/* tile-CTA final (cierra el bento a 6 celdas) */
.sc-tile--cta{background:linear-gradient(150deg,#0F4E8C 0%,var(--blue) 60%,#0A5296 100%);color:#fff;border-color:transparent;justify-content:flex-end}
.sc-tile--cta .sc-ico{color:#fff}
.sc-tile--cta h3{color:#fff}
.sc-tile--cta .sc-line{color:rgba(255,255,255,.85)}
.sc-tile--cta .sc-cta{color:#fff}
@media (max-width:900px){.sc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr}}

/* ---------- (5) CTA del Home: eco de la llave ---------- */
[data-page="home"] .cta-eco img{transform:rotate(4deg)}

/* ---------- fluidez: pintar bajo el fold al acercarse ---------- */
.band{content-visibility:auto;contain-intrinsic-size:auto 620px}
.process{content-visibility:auto;contain-intrinsic-size:auto 820px}
[data-page="home"] .cta{content-visibility:auto;contain-intrinsic-size:auto 620px}

/* ============================================================
   MOBILE / TABLET (l · todo DENTRO de la MQ; desktop intacto)
   ============================================================ */
@media (min-width:761px) and (max-width:1080px) and (min-height:820px){
  .hero-type{top:16%;max-width:60%}
  .hero-key-wrap{width:min(40%,42vh,330px);left:auto;right:0;top:50%;translate:0 -50%;bottom:auto}
  .hero-word{top:44%;font-size:min(24vw,300px)}
}
@media (min-width:761px) and (max-width:1080px) and (max-height:819px){
  .hero-type{top:15%;max-width:58%}
  .hero-key-wrap{width:min(33%,42vh,280px);left:auto;right:0;top:50%;translate:0 -50%;bottom:auto}
  .hero-word{top:46%;font-size:min(20vw,240px)}
}
@media (max-width:900px){
  .manifest-inner{grid-template-columns:1fr}
  .manifest .ghost-num{right:6%;top:0}
  .manifest-dock{max-width:560px;margin-inline:auto;width:100%}
  .steps{grid-template-columns:1fr 1fr;gap:1.4rem 1.2rem}
  .step-conn{display:none}
}
@media (max-width:760px){
  /* HERO COMPACTO EN FLUJO: texto arriba, llave centrada abajo con brecha
     GARANTIZADA por margin (l · brecha titular->objeto ~44px, cero solape) */
  .hero{height:auto;min-height:100svh;overflow:visible}
  .hero-scene{position:absolute;inset:0;overflow:clip}
  .hero-scene img{object-position:64% 46%}
  .hero-stage{position:relative;left:0;top:0;transform:none;width:100%;height:auto;
    display:flex;flex-direction:column;align-items:center;padding:8vh 0 7vh}
  .hero-type{position:relative;left:0;top:0;max-width:100%;width:100%;padding:0 5.4%}
  .hero-h1{font-size:clamp(2.1rem,8.4vw,2.8rem)}
  .hero-sub{font-size:.98rem;max-width:36ch}
  .hero-ctas{gap:.6rem}
  .hero-key-wrap{position:relative;left:0;top:0;right:auto;translate:none;width:min(40%,148px);margin:20px auto 0}
  .hero-key{width:100%;height:auto}
  /* movil: la foto de Lilia completa (sin recorte cover que amputa la cara) */
  .dock-photo{height:auto}
  .hero-word{left:50%;top:auto;bottom:8%;translate:-50% 0;font-size:clamp(3rem,19vw,4.2rem);-webkit-text-stroke:1.4px rgba(13,27,46,.13)}
  .hero-cue{display:none}
  .band-phrase{max-width:100%}
  .step{padding:1.3rem}
}
@media (max-width:480px){
  .hero-proof{gap:.5rem}
}