/* indice.css — /que-hacemos «Índice vivo» (prueba, 7-oct-2026).
   La oferta completa en una sola pantalla fija: a la izquierda la lista en tipografía grande (la lista ES el
   protagonista), a la derecha la escena a sangre. El negro es el de la marca (--tinta), sin niebla ni cajas.
   Un solo peso (400). El texto nunca va encima de la escena. */

/* ── APERTURA: la frase grande, sin hueco ─────────────────────────────── */
.ixa{ min-height:100svh; display:grid; grid-template-rows:1fr auto; gap:clamp(2rem,5vh,3.5rem);
  padding-block:clamp(7rem,16vh,10rem) clamp(2.5rem,7vh,4.5rem) !important }
.ixa__tit{ align-self:end; font-size:clamp(4.2rem,12.2vw,13.5rem); line-height:.86; letter-spacing:-.055em; font-weight:400; margin:0 0 0 -.05em }
.ixa__tit span{ color:rgba(237,239,243,.28) }
.ixa__pie{ display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap }
.ixa__pie p{ max-width:34ch; font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.45; color:var(--tx-2,rgba(237,239,243,.62)); margin:0 }
.ixa__pie a{ font-size:.95rem; color:var(--tx-1,#EDEFF3); text-decoration:none; border-bottom:1px solid rgba(237,239,243,.4); padding-bottom:.2em }

/* ── EL ÍNDICE ─────────────────────────────────────────────────────────── */
.ix{ padding:0 !important; height:calc(100svh + (var(--pasos) - 1) * 34vh) }
.ix__fijo{ position:sticky; top:0; height:100svh; display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr) }
.ix__lado{ display:flex; flex-direction:column; justify-content:space-between; min-width:0;
  padding:clamp(5.6rem,12vh,7.6rem) clamp(1.5rem,3vw,3.5rem) clamp(1.6rem,4.5vh,3rem) var(--borde) }
.ix__lista, .ix__lista ul{ list-style:none; margin:0; padding:0 }
.ix__grupo + .ix__grupo{ margin-top:clamp(.7rem,2.2vh,1.4rem) }
.ix__fam{ font-size:.82rem; font-weight:400; letter-spacing:0; line-height:1.2; margin:0 0 .35rem; color:rgba(237,239,243,.62) }
.ix__fam span{ color:rgba(237,239,243,.3); margin-left:.5em }
.ix__item{ all:unset; box-sizing:border-box; position:relative; display:block; cursor:pointer;
  font-size:min(2.55vw,3.85vh); line-height:1.17; letter-spacing:-.03em; color:rgba(237,239,243,.24);
  transition:color .45s cubic-bezier(.23,1,.32,1) }
.ix__grupo.-activo .ix__item{ color:rgba(237,239,243,.4) }
.ix__item:hover{ color:rgba(237,239,243,.72) }
.ix__item.-on{ color:#EDEFF3 }
.ix__item:focus-visible{ outline:1px solid rgba(237,239,243,.6); outline-offset:4px; border-radius:2px }
/* el activo lleva un eclipse chico: el mismo motivo del menú y del cierre */
.ix__item::before{ content:""; position:absolute; left:-.62em; top:50%; width:.3em; height:.3em; margin-top:-.15em; border-radius:50%;
  background:#EDEFF3; box-shadow:0 0 .5em rgba(237,239,243,.55); opacity:0; transform:scale(.4);
  transition:opacity .35s, transform .5s cubic-bezier(.23,1,.32,1) }
.ix__item::after{ content:""; position:absolute; left:-.6em; top:50%; width:.27em; height:.27em; margin-top:-.16em; border-radius:50%;
  background:var(--tinta,#08090C); opacity:0; transform:translate(-.1em,-.05em); transition:opacity .35s, transform .7s cubic-bezier(.23,1,.32,1) }
.ix__item.-on::before{ opacity:1; transform:none }
.ix__item.-on::after{ opacity:1; transform:none }

.ix__pie{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1.5rem; min-height:4.6rem }
.ix__txt{ transition:opacity .25s, transform .45s cubic-bezier(.23,1,.32,1) }
.ix__txt.-cambia{ opacity:0; transform:translateY(.35rem); transition:none }
.ix__nom{ margin:0 0 .3rem; font-size:1.3rem; letter-spacing:-.015em; color:#EDEFF3 }
.ix__que{ margin:0; max-width:40ch; font-size:1rem; line-height:1.45; color:rgba(237,239,243,.6) }
.ix__ir{ font-size:.95rem; color:#EDEFF3; text-decoration:none; border-bottom:1px solid rgba(237,239,243,.4); padding-bottom:.2em; white-space:nowrap }

/* la escena: a sangre, sin caja; se funde con el negro por la izquierda */
.ix__escena{ position:relative; overflow:hidden; background:var(--tinta,#08090C); contain:paint }
.ix__escena::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,var(--tinta,#08090C) 0,rgba(8,9,12,0) 13%),linear-gradient(0deg,rgba(8,9,12,.55) 0,rgba(8,9,12,0) 16%) }
.ix__capa{ position:absolute; inset:0; overflow:hidden }
.ix__capa video, .ix__capa img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
/* las escenas de motion están dibujadas a 16:11: van centradas, sobre el mismo negro */
.ix__capa .ix__mo{ position:absolute; left:0; right:0; top:50%; aspect-ratio:16/11; transform:translateY(-50%) }
.ix__anillo{ position:absolute; z-index:3; left:0; top:0; width:0; height:0; border-radius:50%; pointer-events:none; opacity:0;
  border:1.5px solid rgba(244,245,247,.95);
  box-shadow:0 0 1.6rem .3rem rgba(237,239,243,.38), inset 0 0 2.2rem .2rem rgba(237,239,243,.22) }
.ix__cliente{ position:absolute; z-index:5; right:var(--borde); bottom:clamp(1.6rem,4.5vh,3rem); margin:0; font-size:.8rem; color:rgba(237,239,243,.75) }

/* ── TELÉFONO: no cabe un índice fijo. Las familias van una debajo de otra con su escena ── */
.ix__movil{ display:none }
@media (max-width:900px){
  .ix{ height:auto; padding:var(--aire) var(--borde) !important }
  .ix__fijo{ position:static; height:auto; display:block }
  .ix__lado{ padding:0 }
  .ix__escena, .ix__pie{ display:none }
  .ix__grupo + .ix__grupo{ margin-top:3.5rem }
  .ix__fam{ font-size:.85rem }
  .ix__movil{ display:block; margin:.6rem calc(var(--borde) * -1) 1rem; aspect-ratio:4/3; overflow:hidden }
  .ix__movil img{ width:100%; height:100%; object-fit:cover; display:block }
  .ix__item{ font-size:1.6rem; color:#EDEFF3; cursor:default; padding:.15rem 0 }
  .ix__item::before, .ix__item::after{ display:none }
  .ix__item[data-que]::after{ content:attr(data-que); display:block; position:static; width:auto; height:auto; margin:.3rem 0 .9rem; opacity:1; transform:none;
    background:none; border-radius:0; font-size:.95rem; line-height:1.45; letter-spacing:0; color:rgba(237,239,243,.6) }
}
@media (prefers-reduced-motion:reduce){ .ix__txt, .ix__item, .ix__item::before, .ix__item::after{ transition:none } }

/* negro de verdad: el lienzo del mundo (#mundo, fijo detrás) pintaba su luz gris a través de la lista */
.ixa, .ix__fijo{ background:var(--tinta,#08090C) }