/* ============================================================
   ONCE DIGITAL · home.css
   Loader V1 · ① Hero editorial C4 · ② Manifiesto · ③ Banda oscura
   · ④ Índice de servicios · (⑤/⑥ viven en base.css)
   ============================================================ */

/* ---------- LOADER · cortinas del MUNDO CIELO + LOGO REAL (0704-b §4/§5) ---------- */
.loader{position:fixed;inset:0;z-index:200;contain:strict}
.loader-panels{position:absolute;inset:0;display:flex}
.loader-panels i{flex:1;height:102%;will-change:transform}
.loader-panels i:nth-child(1){background:#FFFFFF}
.loader-panels i:nth-child(2){background:#F2F8FB}
.loader-panels i:nth-child(3){background:linear-gradient(180deg,#F2F8FB, #E4F0F7)}
.loader-panels i:nth-child(4){background:linear-gradient(180deg,#EAF3F9, #D8EAF4)}
.loader-panels i:nth-child(5){background:linear-gradient(180deg,#DCEBF4, #BFDCEC)}
.loader-logo{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(190px,24vw,320px);height:auto;will-change:transform,opacity;
}
.loader-tag{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}

/* ---------- ① HERO · LA ESCENA MAESTRA (0704-b §1) ----------
   z-sandwich: escena(1) → partículas(2) → tipo(3) → cutout teléfono(4) → satélites/CTA(5) */
.hero{
  position:relative;min-height:100svh;overflow:clip;
  background:linear-gradient(180deg,#FDFEFF 0%,#E8F2F8 55%,#DCEBF4 100%);
}
/* Escena y cutout: geometría IDÉNTICA (la oclusión sobrevive el scrub).
   Overscan 114% para el parallax sin costuras (VELOUR 120%) */
.hero-scene,.hero-cut{position:absolute;inset:0;pointer-events:none;overflow:clip}
.hero-scene{z-index:1}
.hero-cut{z-index:4}
/* top -2.5% (antes -7%): baja la escena ~4.5svh para compensar el aire nuevo del eyebrow
   (0704-f §3) sin que el teléfono muerda de más el titular; overscan inferior intacto */
.hero-scene img,.hero-cut img{
  position:absolute;left:0;top:-2.5%;width:100%;height:114%;
  object-fit:cover;object-position:50% 26%;will-change:transform;
}
/* ---------- MOVIMIENTO VIVO del hero (0704-c §3, recortado por 0704-e §1) ----------
   SIN capas de nubes derivantes (ruido/FPS): la escena trae la atmósfera horneada.
   Viven: rayos respirando + motas canvas + float del teléfono + stickers. */
/* Rayos de luz respirando (GSAP anima opacity).
   FLUIDEZ R2 (0704-f §2a): el efecto screen va HORNEADO en layer-rays-glow.webp
   (alpha = luminancia, rgb desmultiplicado) — composición normal, cero mix-blend-mode */
.hero-rays{
  position:absolute;z-index:2;top:-4%;right:-6%;width:72%;pointer-events:none;
  opacity:.45;will-change:opacity;
}
.hero-rays img{width:100%;height:auto}
/* Motas de luz: la regla base .motes vive en base.css (0704-j §3, fix del canvas en flujo) */
.motes--hero{z-index:2}
/* Stickers glass del nicho (0704-c §1): mini iconos line-art flotando.
   0704-d §2: SIN backdrop-filter (son movers; cero filters vivos) — la opacidad sube a .74.
   0704-e §2: EXTERNOS a la silueta del teléfono (laterales/arriba), ~18% más pequeños. */
.sticker{
  position:absolute;z-index:5;width:clamp(33px,2.75vw,44px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:14px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 14px 30px -16px rgba(18,32,44,.4);
  pointer-events:none;will-change:transform;
}
.sticker svg{width:56%;height:56%;fill:none;stroke:var(--accent-deep);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.sticker--heart svg,.sticker--cursor svg{fill:rgba(71,145,181,.16)}
/* Bandas laterales libres (fuera del teléfono ~41-58% y del titular centrado) */
.sticker--cursor{right:6%;top:19%;rotate:-8deg}
.sticker--heart{left:14%;top:37%;rotate:6deg}
.sticker--play{right:13.5%;top:31%;rotate:-6deg}
.sticker--chart{left:6.5%;top:21%;rotate:4deg}
.sticker--inset{position:absolute;right:-7%;top:-7%;z-index:3;rotate:8deg}
/* STICKERS EN SECCIONES INFORMATIVAS (0704-j §2): quiénes-somos lleva 1-2 decos de
   nicho FUERA del texto y de la imagen (gutter central arriba + aire inferior izq) */
.sticker--mf-mega{left:46.5%;top:2%;rotate:-8deg;animation-delay:-1.8s}
.sticker--mf-spark{left:48%;bottom:2%;rotate:7deg;animation-delay:-3.4s}
@media (max-width:900px){.sticker--mf-mega,.sticker--mf-spark{display:none}}
/* STICKERS EN VACÍOS (0704-d §6): decos en los aires del bento y del CTA.
   Float CSS sutil desfasado (CSS es el dueño único de estos nodos; GSAP no los toca;
   reduced-motion los apaga vía animation:none global). translate no pisa `rotate`. */
@keyframes stk-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.sticker--css{animation:stk-float 6.4s ease-in-out infinite}
/* rocket/trend viven DENTRO de .index-head (anclados al objeto) */
.sticker--rocket{left:57%;top:30%;rotate:-7deg}
.sticker--trend{right:3%;top:0;rotate:5deg;animation-delay:-2.2s}
.sticker--star{left:2.5%;bottom:3.5%;rotate:-6deg;animation-delay:-4.1s}
.sticker--mega{left:7%;top:18%;rotate:-8deg;animation-delay:-3s}
.sticker--inset.sticker--css{animation-delay:-1.4s}
/* Glass con contraste sobre oscuro (0704-c §6) */
.sticker--dark{
  background:rgba(13,22,30,.62);border-color:rgba(255,255,255,.3);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.65);
}
.sticker--dark svg{stroke:#BFDCEC;fill:rgba(191,220,236,.1)}
@media (max-width:1100px){
  .sticker--chart,.sticker--rocket{display:none}
  /* tablet: el teléfono ocupa ~29-68% del ancho y los satélites cambian de esquina;
     los 3 stickers visibles se quedan en las bandas laterales libres */
  .sticker--cursor{right:5%;top:46%}
  .sticker--heart{left:5%;top:33%}
  .sticker--play{right:9%;top:62%}
}
@media (max-width:760px){.sticker{display:none}.sticker--inset{display:grid}}

/* Tipo gigante DETRÁS del objeto (el teléfono lo pisa = oclusión real) */
/* EYEBROW CENTRADO (0704-f §3): aire equilibrado nav → eyebrow → titular
   (aprox. mismo clamp arriba y abajo del eyebrow; jamás pegado al menú) */
.hero-type{
  position:absolute;left:50%;top:calc(var(--nav-h) + clamp(.6rem,1.8svh,1.3rem));translate:-50%;
  z-index:3;width:min(92%,1240px);text-align:center;will-change:transform;
}
.hero-eyebrow{margin-bottom:clamp(1rem,2.6svh,2rem)}
.hero-h1{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-hero);line-height:.91;letter-spacing:-.028em;
  color:var(--ink);
}
/* COHESIÓN DE LÍNEA (0704-d §1): "te vean." va JUNTO (tracking natural, centrado como la línea 1).
   El teléfono MUERDE la línea por el borde inferior (~20-25% de la altura de glifo);
   la keyword sigue leyéndose de un vistazo (gate de ojos en captura). */
.hero-h1 em{
  background:linear-gradient(100deg,var(--accent-deep) 10%,var(--accent) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Satélites glass: reviews izq-centro · info der-centro (gutters, jamás sobre el objeto) */
.hero-card{
  position:absolute;z-index:5;width:clamp(200px,17vw,250px);
  will-change:transform;
}
.hero-card-a{left:clamp(16px,6vw,110px);top:47%}
.hero-card-b{right:clamp(16px,6vw,110px);top:42%}
/* 0704-d §2: .hc-in flota en loop = mover; SIN backdrop-filter vivo (opacidad .8 compensa) */
.hc-in{
  display:grid;gap:.4rem;padding:1rem 1.2rem;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.85);border-radius:18px;
  box-shadow:0 24px 50px -28px rgba(18,32,44,.45);will-change:transform;
}
.hero-card b{font-family:var(--font-display);font-weight:700;font-size:1.22rem;line-height:1.05;color:var(--ink)}
.hero-card small{font-size:.8rem;line-height:1.45;color:var(--text)}
.hc-avatars{display:flex}
.hc-avatars i{
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
}
.hc-avatars i:nth-child(2){margin-left:-9px;background:linear-gradient(135deg,#7FB7D3,var(--accent))}
.hc-avatars i:nth-child(3){margin-left:-9px;background:linear-gradient(135deg,var(--ink-3),var(--accent-deep))}
.hc-link{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);margin-top:.15rem;
}
.hc-link:hover{color:var(--ink)}
/* HERO SIN VACÍOS (0704-i §3): chips glass en los huecos a media altura, bajo las
   tarjetas laterales. Mismo lenguaje glass sólido (0704-e §3, sin backdrop-filter:
   son movers 0704-d §2); GSAP dueño único (float en heroLoops + parallax propio).
   Posición en las bandas laterales libres: FUERA de la silueta del teléfono (~41-59%). */
.hero-chip{
  position:absolute;z-index:5;display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.85);
  border-radius:16px;padding:.55rem .8rem .55rem .6rem;
  box-shadow:0 18px 40px -22px rgba(18,32,44,.45);
  will-change:transform;
}
.hero-chip .chip-ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(71,145,181,.3);
}
.hero-chip .chip-ico svg{width:60%;height:60%;fill:none;stroke:var(--accent-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-chip .chip-tx{display:grid;gap:.06rem}
.hero-chip b{font-family:var(--font-display);font-weight:600;font-size:.84rem;line-height:1.1;color:var(--ink);white-space:nowrap}
.hero-chip small{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* LOS HUECOS DEL DUEÑO (0704-j §5): círculos exactos marcados — izq x20-38% y68-82%,
   der x62-80% y68-82% (media altura entre tarjeta lateral y teléfono); fuera de la
   silueta del teléfono (~41-59%), lejos de CTA centrada (y≥84%) y del titular */
.hero-chip-a{left:25%;top:72.5%;rotate:-2deg}
.hero-chip-b{right:25%;top:70.5%;rotate:2deg}
@media (max-width:1100px){.hero-chip{display:none}}
/* CTA pill abajo-centro (la firma de la referencia) */
.hero-ctas{
  position:absolute;left:50%;bottom:9.5svh;translate:-50%;z-index:5;
  display:flex;gap:.9rem;flex-wrap:nowrap;justify-content:center;will-change:transform;
}
/* 0704-d §2: sin backdrop-filter (viaja con el scrub de .hero-ctas) */
.btn-glass{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.85);color:var(--ink);
}
.btn-glass:hover{border-color:var(--ink);background:rgba(255,255,255,.92)}
/* Desktop: UNA sola pill centrada (la firma de la referencia; el fantasma vive en móvil y en la card-b) */
@media (min-width:761px){
  .hero-ctas .btn-glass{display:none}
}

/* Scroll cue: carril izquierdo libre (el centro-bajo lo ocupa el botón horneado del teléfono) */
.hero-cue{
  position:absolute;z-index:5;left:clamp(20px,7vw,120px);bottom:4svh;
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep);
}

.hero-cue i{
  width:20px;height:32px;border:1.5px solid var(--accent-deep);border-radius:999px;position:relative;
}
.hero-cue i::after{
  content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;
  border-radius:3px;background:var(--accent);
  animation:cue 1.8s var(--ease-house) infinite;
}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* Tablet: satélites a las esquinas (invariante ①.7) */
@media (max-width:1100px){
  .hero-card-a{left:clamp(12px,3vw,40px);top:auto;bottom:20svh}
  .hero-card-b{right:clamp(12px,3vw,40px);top:calc(var(--nav-h) + 12svh)}
}
/* Móvil: la escena recorta al teléfono; tipo arriba, pill abajo; satélites fuera */
@media (max-width:760px){
  .hero-scene img,.hero-cut img{object-position:50% 46%}
  /* 0704-l · T1: el teléfono SUBE ~45px @390 (brecha titular→teléfono 84.6→~45px).
     El cover a lo alto anula object-position vertical, así que se sube la CAJA de la
     img (top más negativo) con overscan mayor (118%) para que la escena siga cubriendo
     tras el scrub (-5% yPercent) y el float del cutout (-28px). Escena y cutout con
     geometría IDÉNTICA (ley: la oclusión sobrevive el scrub). Solo mobile: desktop intacto. */
  .hero-scene img,.hero-cut img{top:-8.6%;height:118%}
  .hero-type{top:calc(var(--nav-h) + 1.5svh)}
  .hero-card-a,.hero-card-b{display:none}
  .hero-ctas{flex-wrap:wrap;width:min(92%,420px);bottom:10svh}
  .hero-cue{display:none}
  /* 0704-l · T2: "borde negro sutil" pedido por el dueño = sombra multicapa PRO
     (la frase de la banda cae sobre los teléfonos claros horneados). Texto NO animado
     por float (solo entrada once); sombra estática = cero costo por frame. */
  .band-phrase{text-shadow:0 1px 2px rgba(10,14,20,.5),0 2px 12px rgba(10,14,20,.32)}
}

/* ---------- ② MANIFIESTO editorial con media flotante ---------- */
.manifest{
  position:relative;overflow:clip;
  /* degradado de esencia: continúa el cielo del hero, cero corte plano (0704-c §1) */
  background:linear-gradient(180deg,#DCEBF4 0%,var(--ivory) 26%,var(--ivory) 100%);
  /* AIRE JUSTO (0704-j §1): secciones claras del Home con padding-block compacto */
  padding:clamp(3.5rem,5vw,6rem) var(--inset);
}
/* VISUAL GENEROSO (0704-g §7): la media del manifiesto sube a 4:5 amplio (col 50%) */
.manifest-inner{
  position:relative;max-width:1440px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center;
}
.manifest .ghost-num{right:2%;top:-4%}
.manifest h2{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-h2);line-height:1.05;letter-spacing:-.02em;
  max-width:14ch;margin-top:1.2rem;
}
.manifest h2 em{color:var(--accent-deep)}
.manifest p{max-width:48ch;color:var(--text);margin-top:1.4rem}
.manifest-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;
  font-family:var(--font-display);font-weight:600;color:var(--accent-deep);
  border-bottom:1px solid var(--accent);padding-bottom:.25rem;
}
/* contenedor = dueño GSAP (parallax); .mv-in = dueño CSS (reveal .rv) — un nodo, un dueño */
.manifest-visual{position:relative;will-change:transform}
.manifest-visual .mv-in{position:relative;display:block}
/* recorte 4:5 en la IMG (el chip y el sticker orbitan fuera: sin overflow en .mv-in) */
.manifest-visual img{
  width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:42% 50%;
  border-radius:var(--radius);box-shadow:0 44px 90px -46px rgba(18,32,44,.5);
}
.manifest-chip{
  position:absolute;left:-8%;bottom:8%;
  background:rgba(245,242,234,.9);border:1px solid var(--hairline);border-radius:14px;
  padding:.7rem 1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);
  box-shadow:0 16px 34px -20px rgba(20,22,26,.4);will-change:transform;
}
@media (max-width:900px){
  .manifest-inner{grid-template-columns:1fr}
  .manifest-chip{left:4%}
}

/* ---------- ③ BANDA divisoria · el MISMO cielo al atardecer ---------- */
.band{
  position:relative;overflow:clip;min-height:72vh;
  background:linear-gradient(180deg,#14293C 0%,#1A3A52 60%,#122435 100%);
  color:var(--on-dark);
  display:grid;place-items:center;text-align:center;
  padding:clamp(5rem,9vw,8rem) var(--inset);
}
/* Escena atardecer full-bleed con overscan para el scrub */
.band-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.band-media img{
  position:absolute;left:0;top:-8%;width:100%;height:116%;
  object-fit:cover;object-position:50% 45%;will-change:transform;
}
/* Scrim medido donde vive la frase (74–86%, ley 05 §5) */
.band-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(95% 110% at 46% 52%, rgba(11,24,36,.8) 0%, rgba(11,24,36,.52) 55%, rgba(11,24,36,.28) 100%);
}
.band-bg{
  position:absolute;inset:-10% 0;z-index:1;pointer-events:none;user-select:none;
  display:grid;place-items:center;will-change:transform;
}
.band-bg span{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:min(30vw,520px);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(237,234,224,.05);white-space:nowrap;
}
.band-phrase{
  position:relative;z-index:2;
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-band);line-height:1.08;letter-spacing:-.02em;
  max-width:19ch;margin-inline:auto;
}
.band-phrase em{
  background:linear-gradient(100deg,var(--accent) 20%,#7FB7D3 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.band-tile{
  position:absolute;z-index:2;pointer-events:none;border-radius:14px;overflow:hidden;will-change:transform;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.band-tile img{width:100%;height:100%;object-fit:cover}
.band-tile-a{width:clamp(130px,15vw,230px);aspect-ratio:3/4;left:clamp(-40px,2vw,60px);top:12%;rotate:-5deg}
.band-tile-b{width:clamp(120px,13vw,210px);aspect-ratio:4/3;right:clamp(-30px,3vw,70px);bottom:14%;rotate:4deg}
/* 0704-j §4: el desenfoque va HORNEADO en srv-logos-blur.jpg (era filter:blur en un mover) */
.band-tile-c{width:clamp(90px,10vw,160px);aspect-ratio:1;right:12%;top:10%;rotate:7deg;opacity:.55}
.band-mono{
  position:relative;z-index:2;margin-top:1.6rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-muted);
}
@media (max-width:900px){
  .band{min-height:56vh}
  .band-tile-a{left:-50px;top:6%}
  .band-tile-b{right:-46px;bottom:6%}
  .band-tile-c{display:none}
}

/* ---------- ④ BENTO de 8 servicios con luz (0704-c §8) ---------- */
.index{
  position:relative;overflow:clip;
  background:linear-gradient(180deg,var(--paper) 0%,#E9F3F9 100%);
  /* AIRE JUSTO (0704-j §1): mismo presupuesto compacto que el manifiesto */
  padding:clamp(3.5rem,5vw,6rem) var(--inset);
}
.index-head{
  position:relative;
  max-width:1440px;margin:0 auto clamp(2.5rem,4vw,4rem);
  display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;
}
.index-head h2{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-h2);line-height:1.04;letter-spacing:-.02em;max-width:15ch;margin-top:1.2rem;
}
.index-head h2 em{color:var(--accent-deep)}
.index-head .index-note{max-width:34ch;color:var(--muted);font-size:.95rem}
.index .grid-patch{right:4%;bottom:8%}
/* RECOMPOSICIÓN 0704-g §7: destacada 4:5 AMPLIA (4 col × 4 filas, imagen full-bleed)
   + 8 tarjetas horizontales compactas (4 col × 1 fila, 2 por fila) */
.bento{
  max-width:1440px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(132px,auto);gap:clamp(.7rem,1.2vw,1.1rem); /* 4 filas ⇒ destacada ~4:5 */
}
.bento li{display:grid;grid-column:span 4}
.bento li:first-child{grid-column:span 4;grid-row:span 4}
.bento-card{
  position:relative;display:flex;flex-direction:row;align-items:center;gap:clamp(.8rem,1.4vw,1.2rem);
  background:rgba(255,255,255,.72);border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(1rem,1.5vw,1.4rem) 3.2rem clamp(1rem,1.5vw,1.4rem) clamp(1.1rem,1.6vw,1.5rem);
  overflow:hidden;
}
.bento-card .bento-body{display:grid;gap:.3rem}
/* glow horneado que se ENCIENDE por opacidad (GSAP dueño del nodo .bento-glow) */
.bento-glow{
  position:absolute;inset:0;border-radius:18px;opacity:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 108%,rgba(71,145,181,.3) 0%,rgba(71,145,181,.08) 45%,transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(71,145,181,.55),0 24px 60px -22px rgba(71,145,181,.5);
}
.bento-n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--muted)}
.bento-ico{width:30px;height:30px;fill:none;stroke:var(--accent-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:.1rem}
.bento-card h3{
  font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(1.02rem,1.35vw,1.3rem);line-height:1.14;letter-spacing:-.01em;
}
.bento-card p{font-size:.82rem;line-height:1.4;color:var(--muted)}
.bento-arrow{
  position:absolute;right:.9rem;top:.9rem;
  display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  border:1px solid var(--hairline);color:var(--accent-deep);font-size:.8rem;
  transition:background-color .3s,color .3s,border-color .3s;
}
.bento-card:hover .bento-arrow,.bento-card:focus-visible .bento-arrow{background:var(--accent);border-color:var(--accent);color:#fff}
/* Destacada 4:5 AMPLIA (0704-g §7): imagen full-bleed + panel glass sólido abajo */
.bento--feat{flex-direction:column;align-items:stretch;justify-content:space-between;padding:clamp(1.1rem,1.6vw,1.5rem)}
.bento-feat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bento-feat-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,254,255,.55) 0%,rgba(253,254,255,0) 30%,rgba(18,32,44,0) 55%,rgba(18,32,44,.28) 100%);
}
.bento--feat .bento-n,.bento--feat .bento-ico{position:relative;z-index:1}
.bento--feat .bento-n{color:var(--accent-deep)}
.bento--feat .bento-ico{width:38px;height:38px}
/* panel glass SÓLIDO sobre imagen (0704-e §3) */
.bento-feat-panel{
  position:relative;z-index:1;display:grid;gap:.35rem;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.75);
  border-radius:14px;padding:1rem 1.15rem;
  box-shadow:0 22px 46px -24px rgba(18,32,44,.5);
}
.bento--feat h3{font-size:clamp(1.4rem,1.9vw,1.85rem)}
.bento--feat p{font-size:.92rem;max-width:30ch}
/* Tile guía: superficie de acento */
.bento--cta{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);border-color:var(--accent);justify-content:center}
.bento--cta h3{color:#fff}
.bento--cta p{color:rgba(255,255,255,.85)}
.bento--cta .bento-arrow{border-color:rgba(255,255,255,.5);color:#fff}
.bento--cta .bento-glow{background:radial-gradient(130% 100% at 50% 108%,rgba(255,255,255,.28) 0%,transparent 65%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(104px,auto)}
  .bento li{grid-column:span 6}
  .bento li:first-child{grid-column:span 6;grid-row:span 3}
}
@media (min-width:561px) and (max-width:1100px){
  .bento li{grid-column:span 3}
  .bento li:first-child{grid-column:span 6}
}
@media (max-width:560px){
  .bento{grid-auto-rows:auto}
  .bento-card{gap:.9rem;padding:1rem 3rem 1rem 1.1rem}
  .bento-card .bento-n{display:none}
  .bento--feat{flex-direction:column;align-items:stretch;min-height:400px}
  .bento--feat .bento-n{display:block}
  .bento-arrow{top:50%;translate:0 -50%}
  .bento--feat .bento-arrow{top:.9rem;translate:0 0}
}

/* ---------- FLUIDEZ FINAL (0704-j §4c): secciones bajo el fold del Home se pintan
   al acercarse; contain-intrinsic-size ≈ altura real @1440 para que el scroll y los
   ScrollTriggers no salten ---------- */
.manifest{content-visibility:auto;contain-intrinsic-size:auto 930px}
.band{content-visibility:auto;contain-intrinsic-size:auto 590px}
.index{content-visibility:auto;contain-intrinsic-size:auto 980px}
[data-page="home"] .cta{content-visibility:auto;contain-intrinsic-size:auto 545px}