/* ZOESYSTEM MLM · inicio.css (M07)
   Bloque A: S01 Inicio (red de ejemplo), S02 Respaldo y S03 Cinta. Se carga DESPUÉS de secciones.css (completa y
   reemplaza lo que M06 dejó como esqueleto de estas tres secciones) y ANTES de animaciones.css. Mismas capas que el resto.
   Solo tokens de base.css; nada de colores sueltos. Los movimientos van en la capa «animaciones» y con «no-preference». */

@layer base, componentes, secciones, animaciones;

@layer secciones {

  /* ---------- S01 Inicio ---------- */
  .inicio {
    /* Canales RGB de los tokens pino 925 y 950: para fondos translúcidos (el texto nunca baja su opacidad) */
    --p925: 11 48 44;
    --p950: 10 42 38;
    isolation: isolate;
  }
  .inicio__titulo { overflow-wrap: break-word; }

  .inicio__rejilla { display: grid; gap: var(--e-6); }

  /* Red de ejemplo: tarjeta debajo del texto en celular (el texto nunca queda sobre puntos en movimiento) */
  .red-bloque { position: relative; min-width: 0; }
  .red {
    position: relative;
    height: 260px;
    overflow: hidden;
    border: 1px solid var(--pine-line);
    border-radius: var(--r-lg);
    background: var(--pine-900);
  }
  .red__estatica,
  .red__lienzo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* Dibujo estático (sin JavaScript y mientras carga): los grosores no se escalan con el dibujo */
  .red__estatica { display: block; max-width: none; }
  .red__lineas { fill: none; stroke: var(--zoe-200); stroke-opacity: .2; stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .red__puntos,
  .red__raices { fill: none; stroke: var(--zoe-200); stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .red__puntos { stroke-opacity: .5; stroke-width: 6px; }
  .red__raices { stroke-width: 8px; }

  .red__lienzo { opacity: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .red-bloque--activa .red__lienzo { opacity: 1; cursor: pointer; }
  .red-bloque--activa .red__estatica { opacity: 0; }

  /* Lo que solo sirve con JavaScript sale oculto y la red lo muestra cuando ya funciona (el espacio queda reservado) */
  .red-bloque:not(.red-bloque--activa) :is(.red__pausa, .red__contador, .red__instruccion) { visibility: hidden; }

  .red__velo { display: none; }

  .red__pausa {
    position: absolute;
    top: var(--e-3);
    right: var(--e-3);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--borde-oscuro);
    border-radius: 50%;
    background: rgb(var(--p925) / .75);
    color: var(--white);
    -webkit-tap-highlight-color: transparent;
  }
  .red__pausa .icono { width: 20px; height: 20px; }
  @media (hover: hover) {
    .red__pausa:hover { border-color: var(--zoe-200); }
  }
  /* Con «reducir movimiento» no hay nada que pausar: un solo cuadro fijo */
  @media (prefers-reduced-motion: reduce) {
    .red__pausa { display: none; }
  }

  /* Contador: cápsula translúcida abajo en la tarjeta. No es región viva (se actualiza cada 1,6 s). */
  .red__contador {
    position: absolute;
    left: var(--e-3);
    right: var(--e-3);
    bottom: var(--e-3);
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--e-3);
    max-width: none;
    margin: 0;
    padding: var(--e-2) var(--e-3);
    border-radius: var(--r-sm);
    background: rgb(var(--p950) / .82);
    color: var(--on-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .red__contador-rotulo { color: var(--zoe-200); }

  .red__nota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    max-width: none;
    margin: var(--e-3) 0 0;
    color: var(--on-dark-2);
    font-size: 13px;
    line-height: 1.45;
  }

  @media (min-width: 640px) {
    .red { height: 320px; }
  }

  /* Tableta ancha (900 a 1023 px): dos columnas, texto 7/12 y tarjeta 5/12 de 440 px de alto */
  @media (min-width: 900px) {
    .inicio__rejilla { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--e-7); }
    .inicio__texto { max-width: none; }
    .red { height: 440px; }
  }

  /* Escritorio (1024 px o más): la red ocupa todo el fondo del inicio, más densa a la derecha.
     Un velo pino 925 cubre por completo la columna de texto, que va a la izquierda. */
  @media (min-width: 1024px) {
    .inicio {
      display: flex;
      align-items: center;
      min-height: min(calc(100vh - var(--header-h)), 820px);
    }
    @supports (height: 1svh) {
      .inicio { min-height: min(calc(100svh - var(--header-h)), 820px); }
    }
    .inicio__rejilla { display: block; }
    .inicio__texto { position: relative; z-index: 2; max-width: var(--col-texto, 46em); }

    .red-bloque { position: absolute; inset: 0; z-index: 1; }
    .red {
      position: absolute;
      inset: 0;
      height: auto;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .red__velo {
      display: block;
      position: absolute;
      inset: 0;
      pointer-events: none;
      /* Opaco hasta el borde de la columna de texto (su línea más larga mide unos 700 px) y luego se desvanece */
      --velo-corte: calc(max(var(--margen), 50% - var(--ancho-max) / 2) + 700px);
      background: linear-gradient(90deg, var(--pine-925) 0, var(--pine-925) var(--velo-corte), rgb(var(--p925) / 0) calc(var(--velo-corte) + 300px));
    }
    /* Pausa, contador y rótulo se anclan al borde derecho del contenedor */
    .red__pausa {
      top: var(--e-5);
      right: max(var(--margen), calc(50% - var(--ancho-max) / 2));
    }
    .red__contador {
      left: auto;
      right: max(var(--margen), calc(50% - var(--ancho-max) / 2));
      bottom: calc(var(--e-9) + var(--e-5));
      width: max-content;
      max-width: 90%;
      flex-wrap: nowrap;
    }
    .red__nota {
      position: absolute;
      right: max(var(--margen), calc(50% - var(--ancho-max) / 2));
      bottom: calc(var(--e-8) + var(--e-2));
      width: max-content;
      max-width: 90%;
      margin: 0;
      padding: var(--e-1) var(--e-3);
      border-radius: var(--r-pill);
      background: rgb(var(--p925) / .8);
    }
  }

  /* ---------- S02 Respaldo ---------- */
  .respaldo__tarjeta {
    display: grid;
    gap: var(--e-4);
    align-items: center;
  }
  .respaldo__frase {
    max-width: 26em;
    margin: 0;
    text-wrap: balance;
    color: var(--ink-900);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
  }
  .respaldo__frase strong { font-weight: 800; }
  .respaldo__sellos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Los sellos informan, no se pulsan: sin efecto al pasar el puntero */
  .sello {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 36px;
    padding: 6px 14px 6px 10px;
    border-radius: var(--r-pill);
    background: var(--mist-100);
    color: var(--ink-700);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }
  .sello .icono { width: 20px; height: 20px; color: var(--zoe-700); }
  .sello img { width: 20px; height: auto; }
  @media (min-width: 900px) {
    .respaldo__tarjeta { grid-template-columns: 1fr auto; gap: var(--e-6); padding-inline: var(--e-6); }
    .respaldo__sellos { justify-content: flex-end; }
  }

  /* ---------- S03 Cinta ---------- */
  /* El relleno vertical da lugar a la inclinación de la franja sin recortarla */
  .cinta-envoltura { padding-block: clamp(12px, 1.2vw, 24px); }
  .cinta { display: flex; align-items: center; overflow: hidden; }
  .cinta__pista {
    display: flex;
    flex: none;
    width: max-content;
    transform: translate3d(var(--cinta-x, 0px), 0, 0);
  }
  .cinta__conjunto {
    display: flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cinta__conjunto li {
    flex: none;
    padding-block: var(--e-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 1vw + 14px, 28px);
    line-height: 1.2;
    letter-spacing: -.015em;
    white-space: nowrap;
  }
  .cinta__conjunto .cinta__sep {
    display: flex;
    align-items: center;
    padding-inline: var(--e-5);
  }
  .cinta__sep .icono { width: 20px; height: 20px; }
}

@layer animaciones {

  @media (prefers-reduced-motion: no-preference) {
    /* Entrada del inicio: píldora, botones y microtexto suben 16 px y aparecen (450 ms, 60 ms de separación).
       El H1 y el subtítulo se pintan de inmediato: el titular nunca parte de opacidad 0. */
    @keyframes zs-entrada {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
    .inicio .pildora,
    .inicio .acciones,
    .inicio__micro {
      animation: zs-entrada var(--dur-3) var(--curva-salida) both;
    }
    .inicio .acciones { animation-delay: 60ms; }
    .inicio__micro { animation-delay: 120ms; }

    /* El lienzo toma el lugar del dibujo estático con un fundido */
    .red__lienzo,
    .red__estatica { transition: opacity var(--dur-3) var(--curva-estandar); }

    .cinta__pista { will-change: transform; }
  }
}