/* =========================================================================
   SECCIONES
   Consume solo tokens --kbl-*. Cero valores de color escritos a mano.
   ========================================================================= */

@layer secciones {

  /* --- Hero -------------------------------------------------------------
     Sin min-height en vh a propósito. Un hero de alto fijo en viewport
     empuja el resto fuera de pantalla en un celular apaisado y esconde
     justamente lo que la página viene a probar. */
  .hero {
    padding-block: var(--kbl-e-8) var(--kbl-e-9);
    border-block-start: 0;
  }

  @media (min-width: 48rem) {
    .hero { padding-block: var(--kbl-e-9); }
  }

  /* El tagline es la pieza más grande de la página y la única frase de
     posicionamiento. Se limita el ancho en caracteres para que no se lea
     como un párrafo. */
  .hero__tagline { max-width: 16ch; }

  .hero__bajada { max-width: 38rem; color: var(--kbl-texto-2); }

  .hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbl-e-3);
  }

  /* --- Prueba de producto ----------------------------------------------
     El panel es un contenedor neutro, no una ventana simulada: sin barra de
     título falsa ni cromo de sistema operativo. Un marco que imita una
     aplicación ya es una interfaz recreada a mano, que es exactamente lo
     que esta página no puede tener. El material real va adentro. */
  .prueba-producto__panel {
    display: grid;
    place-items: center;
    padding: var(--kbl-e-5);
    min-height: 320px;
    background-color: var(--kbl-superficie);
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    border-radius: var(--kbl-radio);
  }

  .prueba-producto__panel > * { max-width: 46rem; }

  /* Rejilla de las dos apps, cuando haya material. Una sola columna hasta
     que haya ancho de verdad: dos capturas de app en 360 px no se ven. */
  .prueba-producto__par {
    display: grid;
    gap: var(--kbl-e-5);
  }

  @media (min-width: 56rem) {
    .prueba-producto__par { grid-template-columns: 1fr 1fr; }
  }

  /* Franja del aviso de estado. Desaparece cuando el sitio sea publicable. */
  .aviso-estado { padding-block-start: var(--kbl-e-5); }

  /* --- Qué hace --------------------------------------------------------
     Bloques, no tarjetas: radio 0 y una línea de tinta arriba, como las
     etiquetas del manual. Sin ícono por tarea: un ícono genérico de reloj o
     de chat no agrega información y es exactamente la ilustración conceptual
     que A-01 pone por detrás de la pantalla real. */
  .tareas {
    display: grid;
    gap: var(--kbl-e-6);
  }

  @media (min-width: 48rem) {
    .tareas { grid-template-columns: 1fr 1fr; gap: var(--kbl-e-7); }
  }

  .tarea {
    padding-block-start: var(--kbl-e-4);
    border-block-start: 2px solid var(--kbl-tinta);
  }

  .tarea > * + * { margin-block-start: var(--kbl-e-3); }

  /* --- Cómo trabaja ----------------------------------------------------
     Una lista de definiciones y no pasos numerados: numerar sugiere un
     proceso comercial cerrado, y no lo hay. Son compromisos, cada uno con
     su respaldo en la plataforma. */
  .compromisos { margin: 0; border-block-start: var(--kbl-borde) solid var(--kbl-linea); }

  .compromiso {
    display: grid;
    gap: var(--kbl-e-2);
    padding-block: var(--kbl-e-5);
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
  }

  @media (min-width: 48rem) {
    .compromiso { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--kbl-e-6); }
  }

  .compromiso dt, .compromiso dd { margin: 0; }

  /* --- Qué decide el agente --------------------------------------------
     El color de cada columna es un estado del sistema y significa lo que
     tokens/README.md declara, no una decoración: A-04 pide que todo estado
     del agente tenga señal visual explícita. */
  .decide {
    display: grid;
    gap: var(--kbl-e-6);
  }

  @media (min-width: 60rem) {
    .decide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kbl-e-6); }
  }

  .decide__columna {
    padding-block-start: var(--kbl-e-4);
    border-block-start: 3px solid var(--kbl-tinta);
  }

  .decide__columna > * + * { margin-block-start: var(--kbl-e-4); }

  .decide__columna--solo { border-block-start-color: var(--kbl-info); }
  .decide__columna--persona { border-block-start-color: var(--kbl-alerta); }

  .decide__columna--solo .decide__titulo { color: var(--kbl-info); }
  .decide__columna--persona .decide__titulo { color: var(--kbl-alerta); }

  .decide ul {
    margin: 0;
    padding-inline-start: var(--kbl-e-5);
  }

  .decide li + li { margin-block-start: var(--kbl-e-2); }
}