/* ============================================================================
   Pagina de inicio. Se carga despues de estilos.css y solo en index.html.

   Direccion: cine documental. Fotos grandes de la gente que trabaja en una
   mype (planta, cocina, almacen), titulares de Archivo angosto y pesado, y
   vidrio oscuro para lo que va encima de las fotos.

   El movimiento tiene tres lugares y nada mas: la portada (las escenas
   cambian y la consulta de ejemplo cambia con ellas), la cinta de puestos y
   el campo de candidatos. El resto solo aparece una vez al entrar en
   pantalla. Con "reducir movimiento" todo queda quieto.

   Lo que comparte con las demas paginas publicas (barra, pastillas, pasos,
   cierre, aparecer al ver) vive en publico.css.
   ============================================================================ */

.i-rubro figcaption b,.i-consulta-n b,.i-cinta span{font-stretch:var(--angosto);letter-spacing:-.01em}

@media(prefers-reduced-motion:no-preference){
  .js .i-rubro:nth-child(2){transition-delay:.08s}
  .js .i-rubro:nth-child(3){transition-delay:.16s}
  .js .i-rubro:nth-child(4){transition-delay:.24s}
}


/* ------------------------------------------------------------ portada --- */
.i-hero{position:relative;min-height:100vh;color:#fff;background:var(--noche);overflow:hidden;display:flex}
@supports(min-height:100svh){.i-hero{min-height:100svh}}

.i-escenas{position:absolute;inset:0}
.i-escena{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;
  opacity:0;transition:opacity 1.4s ease;transform:scale(1.02);
}
.i-escena.activa{opacity:1}
/* Oscurece la izquierda (texto) y el pie (tarjeta), deja la cara a la vista. */
.i-escenas:after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,20,47,.94) 0%,rgba(0,20,47,.78) 32%,rgba(0,20,47,.2) 62%,rgba(0,20,47,0) 80%),
    linear-gradient(0deg,rgba(0,20,47,.85) 0%,rgba(0,20,47,0) 38%);
}
@media(prefers-reduced-motion:no-preference){
  .i-escena.activa{animation:acercar 8s linear forwards}
}
@keyframes acercar{from{transform:scale(1.02)}to{transform:scale(1.1)}}

.i-hero-cuerpo{
  position:relative;z-index:1;width:min(1180px,calc(100% - 48px));margin:0 auto;
  display:grid;gap:36px;align-content:end;padding:140px 0 56px;
}
@media(min-width:980px){
  .i-hero-cuerpo{grid-template-columns:1fr 360px;align-items:end;gap:48px;padding-bottom:64px}
}

.i-hero h1{
  color:#fff;font-weight:900;font-size:clamp(3.4rem,9vw,7.6rem);line-height:.86;
  max-width:8ch;margin-bottom:.28em;text-wrap:balance;
}
.i-bajada{color:#d2deeb;font-size:var(--t-md);line-height:1.5;max-width:44ch;margin-bottom:30px}

/* La consulta de ejemplo: vidrio oscuro sobre la foto. */
.i-consulta{
  background:var(--vidrio);border:1px solid var(--vidrio-borde);border-radius:22px;padding:20px;
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.i-consulta-q{font-size:var(--t-sm);color:#e7eef7;background:rgba(255,255,255,.1);border-radius:14px 14px 14px 4px;padding:11px 14px;margin-bottom:16px}
.i-consulta-q span{font-weight:600;color:#fff}
.i-consulta-n{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.i-consulta-n b{font-size:4.4rem;line-height:.85;font-weight:900;color:#8fd84f;font-variant-numeric:tabular-nums;min-width:1.15em}
.i-consulta-n span{font-size:var(--t-sm);color:#c4d3e4;max-width:12ch;line-height:1.3}
.i-consulta-fila{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);padding:9px 0;border-top:1px solid rgba(255,255,255,.12);color:#c4d3e4}
.i-consulta-fila b{color:#fff;font-weight:600;white-space:nowrap}
.i-consulta-pie{font-size:var(--t-xs);color:#97abc3;margin-top:12px;line-height:1.4}

/* Cambio de escena: los datos se van y vuelven. */
.i-consulta [data-campo]{transition:opacity .35s, filter .35s}
.i-consulta.cambiando [data-campo]{opacity:0;filter:blur(4px)}

/* Una barrita por escena, como en las historias del celular. */
.i-barras{display:flex;gap:6px;margin-top:14px}
.i-barras span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
.i-barras span.hecha:after,.i-barras span.activa:after{content:'';position:absolute;inset:0;background:#fff;border-radius:2px}
.i-barras span.activa:after{transform-origin:left;animation:llenar var(--dura,6.5s) linear forwards}
@keyframes llenar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.i-barras{display:none}}

/* -------------------------------------------------------------- cinta --- */
.i-cinta{background:var(--verde);color:var(--noche);overflow:hidden;padding:14px 0;white-space:nowrap}
.i-cinta-pista{display:inline-flex;animation:correr 38s linear infinite}
.i-cinta span{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:850;padding:0 26px;position:relative;line-height:1}
.i-cinta span:after{content:'';position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--noche)}
@keyframes correr{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.i-cinta-pista{animation:none}}

/* ------------------------------------------------------------- rubros --- */
.i-rubros{padding:110px 0 150px}
.i-encabezado{display:grid;gap:8px 48px;margin-bottom:48px}
.i-encabezado p{color:var(--gris);font-size:var(--t-md);line-height:1.5;margin:0;max-width:46ch}
@media(min-width:900px){.i-encabezado{grid-template-columns:1fr 1fr;align-items:end}}

.i-rubros-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.i-rubro{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--azul)}
/* Escalonado: la segunda y la cuarta bajan, para que no sea una fila plana. */
.i-rubro:nth-child(even){margin-top:56px}
.i-rubro img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.i-rubro:hover img{transform:scale(1.06)}
.i-rubro:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,20,47,.9) 0%,rgba(0,20,47,0) 52%);pointer-events:none}
.i-rubro figcaption{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;color:#fff}
.i-rubro figcaption b{display:block;font-size:1.9rem;line-height:1;font-weight:850;margin-bottom:4px}
.i-rubro figcaption span{font-size:var(--t-sm);color:#cddbea}

@media(max-width:900px){
  /* En el celular se desliza de lado con el dedo. */
  .i-rubros{padding-bottom:90px}
  .i-rubros-rejilla{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:0 18px 8px;scrollbar-width:none}
  .i-rubros-rejilla::-webkit-scrollbar{display:none}
  .i-rubro{flex:0 0 74%;scroll-snap-align:start}
  .i-rubro:nth-child(even){margin-top:0}
}

/* -------------------------------------------------------------- vivos --- */
.i-vivos{padding:110px 0}
.i-vivos-rejilla{display:grid;gap:48px;align-items:center}
@media(min-width:960px){.i-vivos-rejilla{grid-template-columns:1fr 1.05fr;gap:64px}}
.i-vivos p{color:var(--gris)}

.i-tiempo{list-style:none;padding:0;margin:30px 0 0}
.i-tiempo li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0 12px 22px;border-top:1px solid var(--gris-200);position:relative}
.i-tiempo li:before{content:'';position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:50%;background:var(--gris-400)}
.i-tiempo span{font-size:var(--t-sm);color:var(--gris)}
.i-tiempo b{font-size:1.35rem;font-stretch:var(--angosto);font-weight:850;color:var(--azul);white-space:nowrap}
.i-tiempo li.i-tiempo--hoy:before{background:var(--verde);box-shadow:0 0 0 5px var(--verde-100)}
.i-tiempo--hoy b{color:var(--verde-700)}
.i-tiempo li.i-tiempo--fuera:before{background:transparent;border:2px solid var(--gris-400)}
.i-tiempo--fuera b{color:var(--gris-400);text-decoration:line-through;text-decoration-thickness:2px}

.i-campo{margin:0;background:var(--noche);border-radius:26px;overflow:hidden;position:relative}
.i-campo canvas{display:block;width:100%;height:auto;aspect-ratio:1/1}
.i-campo figcaption{position:absolute;left:22px;right:22px;bottom:18px;font-size:var(--t-sm);color:#b4c5d9;line-height:1.45;max-width:44ch}

/* --------------------------------------------------------- trabajador --- */
.i-trabajador{padding:40px 0 120px}
.i-trabajador-rejilla{display:grid;gap:48px;align-items:center}
@media(min-width:900px){.i-trabajador-rejilla{grid-template-columns:.95fr 1fr;gap:72px}}
.i-trabajador-foto{position:relative}
.i-trabajador-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:26px}
.i-trabajador-texto p{color:var(--gris);font-size:var(--t-md);line-height:1.5}

/* El mensaje que le llega a la trabajadora. Entra una vez, al verse. */
.i-mensaje{
  position:absolute;left:-18px;right:18%;bottom:26px;
  background:#fff;border-radius:18px 18px 18px 6px;padding:14px 16px;
  box-shadow:0 24px 50px -20px rgba(0,20,47,.55);
}
@media(max-width:900px){.i-mensaje{left:12px;right:12px}}
.i-mensaje-de{font-size:var(--t-xs);font-weight:700;color:var(--verde-700);margin-bottom:3px}
.i-mensaje-txt{font-size:var(--t-sm);color:var(--tinta);line-height:1.45}
@media(prefers-reduced-motion:no-preference){
  .js .i-mensaje{opacity:0;transform:translateY(20px) scale(.96);transition:opacity .5s .6s, transform .6s .6s cubic-bezier(.2,.8,.2,1.2)}
  .js .visto .i-mensaje{opacity:1;transform:none}
}

/* ------------------------------------------------------------ celular --- */
@media(max-width:640px){
  .i-hero-cuerpo{width:calc(100% - 36px);padding:120px 0 32px;gap:28px}
  .i-escena{object-position:72% 30%}
  .i-escenas:after{
    background:linear-gradient(0deg,rgba(0,20,47,.97) 0%,rgba(0,20,47,.85) 45%,rgba(0,20,47,.25) 75%,rgba(0,20,47,.35) 100%);
  }
  .i-bajada{font-size:var(--t-base);margin-bottom:24px}
  .i-consulta{padding:16px}
  .i-consulta-n b{font-size:3.6rem}
  .i-rubros,.i-vivos{padding:72px 0}
  .i-trabajador{padding:20px 0 80px}
  .i-campo figcaption{position:static;padding:0 20px 20px;max-width:none}
}