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

@layer secciones {

  /* --- Escenario carbón --------------------------------------------------
     Hero en carbón, cuerpo en papel (decisión del 2026-09-24). La trama de
     líneas es la cuadrícula de espacio del sistema (--kbl-e-9 = 96 px)
     dibujada con el color de línea del tema: un plano, no una decoración
     ajena. Se desvanece hacia los bordes para no competir con el texto. */
  .escenario {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .escenario::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(to right, var(--kbl-linea) var(--kbl-borde), transparent var(--kbl-borde)),
      linear-gradient(to bottom, var(--kbl-linea) var(--kbl-borde), transparent var(--kbl-borde));
    background-size: var(--kbl-e-9) var(--kbl-e-9);
    background-position: center top;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, black, transparent 75%);
    opacity: 0.6;
  }

  /* --- Hero ------------------------------------------------------------- */
  /* minmax(0, 1fr) y min-width 0: sin esto, la fila de sugerencias del chat
     (que no se parte) ensancha la columna y el texto se sale de la pantalla. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kbl-e-7);
    padding-block: var(--kbl-e-7) var(--kbl-e-8);
  }

  @media (min-width: 60rem) {
    .hero {
      grid-template-columns: minmax(0, 1fr) minmax(0, 33rem);
      align-items: center;
      gap: var(--kbl-e-8);
      padding-block: var(--kbl-e-8) var(--kbl-e-9);
    }
  }

  .hero > *, .laboratorio > * { min-width: 0; }
  .hero__texto { position: relative; z-index: 2; }
  .hero__texto > * + * { margin-block-start: var(--kbl-e-5); }

  .hero__tagline { max-width: 13ch; }

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

  .hero__alivio {
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
  }

  .hero__escena { position: relative; }

  /* La pieza 3D vive detrás del chat, más grande que su caja y corrida
     hacia afuera. Nace oculta: la muestra pieza-3d.js solo si hay WebGL y
     pantalla ancha. */
  .pieza-3d {
    position: absolute;
    z-index: 0;
    inset-block-start: -6%;
    inset-inline-start: -22%;
    width: 92%;
    height: 78%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--kbl-dur-bloque) var(--kbl-ease-corte);
  }

  .pieza-3d.lista { opacity: 1; }

  @media (max-width: 59.99rem) { .pieza-3d { display: none; } }

  .hero__telefono {
    position: relative;
    z-index: 1;
    max-width: 27rem;
    margin-inline: auto;
  }

  /* En pantalla ancha, el chat se corre abajo a la derecha y deja ver la
     pieza entera arriba: la pieza es la marca, el chat es la prueba. */
  @media (min-width: 60rem) {
    .hero__telefono { max-width: 23rem; margin-inline: auto 0; padding-block-start: var(--kbl-e-9); }
    .hero__telefono .chat { height: 30rem; }
  }

  .hero__pie-chat {
    margin-block-start: var(--kbl-e-3);
    color: var(--kbl-texto-3);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-16);
  }

  /* --- Franja de hechos ------------------------------------------------- */
  .franja {
    display: grid;
    gap: var(--kbl-e-5);
    margin-block: 0;
    padding-block: var(--kbl-e-6) var(--kbl-e-7);
    list-style: none;
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

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

  .franja__hecho { display: flex; gap: var(--kbl-e-4); align-items: baseline; color: var(--kbl-texto-2); }

  .franja__cifra {
    flex: none;
    min-width: 1.2ch;
    color: var(--kbl-tinta);
    font-size: var(--kbl-t-44);
    line-height: var(--kbl-lh-44);
  }

  /* --- Encabezados de sección ------------------------------------------- */
  .encabezado > * + * { margin-block-start: var(--kbl-e-4); }
  .encabezado { margin-block-end: var(--kbl-e-7); }

  .partido .encabezado { margin-block-end: 0; }

  .partido {
    display: grid;
    gap: var(--kbl-e-7);
  }

  @media (min-width: 60rem) {
    .partido { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--kbl-e-8); align-items: start; }
    .partido .encabezado { position: sticky; inset-block-start: var(--kbl-e-6); }
  }

  /* --- Vidriera de la portada ------------------------------------------
     El panel ancho y la fichada encima, en el celular: la misma operación
     vista por el encargado y por el empleado. Sin cromo simulado de sistema
     operativo; el marco es un borde del sistema. */
  .vidriera {
    display: grid;
    gap: var(--kbl-e-6);
  }

  @media (min-width: 48rem) {
    .vidriera { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); align-items: end; }
    .vidriera__pieza--fichada { margin-inline-start: calc(-1 * var(--kbl-e-9)); margin-block-end: calc(-1 * var(--kbl-e-6)); }
  }

  .vidriera__pieza { margin: 0; }
  .vidriera__pieza img,
  .secuencia img,
  .captura-ancha img,
  .captura-movil img {
    width: 100%;
    background-color: var(--kbl-superficie);
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
  }

  .vidriera__pieza--fichada img { border: 6px solid var(--kbl-tinta); }

  .vidriera__pieza figcaption,
  .captura-ancha figcaption,
  .captura-movil figcaption {
    margin-block-start: var(--kbl-e-3);
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
    color: var(--kbl-texto-2);
  }

  .vidriera__pieza figcaption strong { color: var(--kbl-tinta); font-weight: var(--kbl-peso-medio); }

  .vidriera__mas { margin-block-start: var(--kbl-e-8); }

  /* --- La cuenta de mensajes -------------------------------------------- */
  .cuenta {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 2px solid var(--kbl-tinta);
  }

  .cuenta li {
    display: flex;
    justify-content: space-between;
    gap: var(--kbl-e-4);
    padding-block: var(--kbl-e-3);
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
    color: var(--kbl-texto-2);
  }

  .cuenta li .kbl-cifra { color: var(--kbl-tinta); }

  .cuenta__total {
    border-block-end: 0;
    border-block-start: 2px solid var(--kbl-tinta);
    margin-block-start: -1px;
    font-size: var(--kbl-t-24);
    line-height: var(--kbl-lh-24);
  }

  .cuenta .cuenta__total span { color: var(--kbl-tinta); font-weight: var(--kbl-peso-titular); }

  /* --- Qué decide el agente --------------------------------------------- */
  .decide {
    display: grid;
    gap: var(--kbl-e-6);
  }

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

  .decide__columna {
    padding: var(--kbl-e-5);
    background-color: var(--kbl-superficie);
    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); }

  /* --- Garantías de la fichada ------------------------------------------ */
  .garantias {
    display: grid;
    gap: 0;
    margin: 0;
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

  @media (min-width: 40rem) {
    .garantias { grid-template-columns: 1fr 1fr; column-gap: var(--kbl-e-6); }
  }

  .garantia {
    padding-block: var(--kbl-e-5);
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
  }

  .garantia dt { margin-block-end: var(--kbl-e-2); }
  .garantia dd { margin: 0; }

  /* --- Cómo trabaja ----------------------------------------------------- */
  .pasos {
    display: grid;
    gap: var(--kbl-e-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 40rem) { .pasos { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 64rem) { .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

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

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

  .paso__numero {
    display: block;
    color: var(--kbl-texto-3);
    font-size: var(--kbl-t-32);
    line-height: var(--kbl-lh-32);
  }

  /* --- Precio ----------------------------------------------------------- */
  .precio {
    display: grid;
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    background-color: var(--kbl-superficie);
  }

  @media (min-width: 56rem) { .precio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

  .precio__cabeza,
  .precio__detalle { padding: var(--kbl-e-6); }

  @media (min-width: 56rem) {
    .precio__cabeza,
    .precio__detalle { padding: var(--kbl-e-7); }
    .precio__detalle { border-inline-start: var(--kbl-borde) solid var(--kbl-linea); }
  }

  @media (max-width: 55.99rem) {
    .precio__detalle { border-block-start: var(--kbl-borde) solid var(--kbl-linea); }
  }

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

  .precio__desde { display: block; margin-block-end: var(--kbl-e-2); }

  .precio__monto {
    display: block;
    font-size: var(--kbl-t-60);
    line-height: var(--kbl-lh-60);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (max-width: 30rem) {
    .precio__monto { font-size: var(--kbl-t-44); line-height: var(--kbl-lh-44); }
  }

  /* Solo el agente: la segunda puerta de entrada. Línea y radio de panel chico,
     sin sombra (superficies.css). */
  .precio__solo {
    padding: var(--kbl-e-4);
    border: var(--kbl-borde) solid var(--kbl-linea);
    border-radius: var(--kbl-radio-2);
  }
  .precio__solo .kbl-cifra { color: var(--kbl-tinta); white-space: nowrap; }

  .precio__detalle h3 { margin-block-end: var(--kbl-e-4); }
  .precio__detalle h3 + ul + h3 { margin-block-start: var(--kbl-e-6); }

  /* Viñeta cuadrada: el bloque del signo en chico. La de "aparte" va hueca. */
  .lista-marca { margin: 0; padding: 0; list-style: none; }
  .lista-marca li {
    position: relative;
    padding-inline-start: var(--kbl-e-5);
  }
  .lista-marca li + li { margin-block-start: var(--kbl-e-3); }
  .lista-marca li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    width: 8px;
    height: 8px;
    background-color: var(--kbl-tinta);
  }
  .lista-marca--aparte li { color: var(--kbl-texto-2); }
  .lista-marca--aparte li::before {
    background-color: transparent;
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
  }

  /* --- Qué pasa después de pedir la propuesta --------------------------- */
  .precio__cabeza .despues__titulo { margin-block-start: var(--kbl-e-7); }

  .despues {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

  .despues li {
    display: flex;
    gap: var(--kbl-e-3);
    padding-block: var(--kbl-e-3);
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
    color: var(--kbl-texto-2);
  }

  .despues .kbl-cifra { flex: none; min-width: 1.2ch; color: var(--kbl-tinta); }

  /* --- Para quién es ----------------------------------------------------- */
  .encaja h3 { margin-block-end: var(--kbl-e-4); }
  .encaja h3 + ul + h3 { margin-block-start: var(--kbl-e-7); }

  /* --- Preguntas -------------------------------------------------------- */
  .preguntas { border-block-start: var(--kbl-borde) solid var(--kbl-linea); }

  .pregunta { border-block-end: var(--kbl-borde) solid var(--kbl-linea); }

  .pregunta summary {
    display: flex;
    justify-content: space-between;
    gap: var(--kbl-e-4);
    padding-block: var(--kbl-e-5);
    cursor: pointer;
    list-style: none;
  }

  .pregunta summary::-webkit-details-marker { display: none; }

  .pregunta summary::after {
    content: "+";
    flex: none;
    font-weight: var(--kbl-peso-texto);
    transition: transform var(--kbl-dur-corte) var(--kbl-ease-corte);
  }

  .pregunta[open] summary::after { transform: rotate(45deg); }

  .pregunta p { padding-block-end: var(--kbl-e-5); max-width: 40rem; }

  /* --- Cierre ----------------------------------------------------------- */
  .cierre {
    padding-block: var(--kbl-e-9);
  }

  .cierre > * + * { margin-block-start: var(--kbl-e-5); }
  .cierre .acciones { margin-block-start: var(--kbl-e-6); }
  .cierre__bajada { max-width: 34rem; }

  .zona-carbon .pie-sitio { border-block-start-color: var(--kbl-linea); }

  /* =====================================================================
     VITRINA (productos.html)
     ===================================================================== */
  .vitrina-hero {
    padding-block: var(--kbl-e-8) var(--kbl-e-7);
  }

  .vitrina-hero > * + * { margin-block-start: var(--kbl-e-5); }
  .vitrina-hero h1 { max-width: 16ch; }

  .indice {
    display: grid;
    gap: 0;
    margin-block-start: var(--kbl-e-8) !important;
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

  @media (min-width: 48rem) { .indice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .indice__pieza {
    display: flex;
    flex-direction: column;
    gap: var(--kbl-e-2);
    padding: var(--kbl-e-5) var(--kbl-e-4);
    color: var(--kbl-tinta);
    text-decoration: none;
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
    transition: background-color var(--kbl-dur-corte) var(--kbl-ease-corte);
  }

  @media (min-width: 48rem) {
    .indice__pieza + .indice__pieza { border-inline-start: var(--kbl-borde) solid var(--kbl-linea); }
  }

  .indice__pieza:hover { background-color: var(--kbl-superficie); }
  .indice__pieza .kbl-cifra { color: var(--kbl-texto-3); }

  /* --- Laboratorio: chat + inspector ------------------------------------ */
  .laboratorio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kbl-e-6);
  }

  @media (min-width: 56rem) {
    .laboratorio { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); align-items: start; }
  }

  .laboratorio .chat { height: 40rem; }

  .inspector {
    padding: var(--kbl-e-5);
    background-color: var(--kbl-superficie);
    border-block-start: 3px solid var(--kbl-info);
  }

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

  .inspector__datos { display: grid; gap: var(--kbl-e-4); margin-block-end: 0; }
  .inspector__datos dt { color: var(--kbl-texto-3); margin-block-end: var(--kbl-e-1); }
  .inspector__datos dd { margin: 0; }

  .inspector__barra {
    height: 6px;
    background-color: var(--kbl-superficie-2);
  }

  .inspector__barra span {
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--kbl-info);
    transition: width var(--kbl-dur-paso) var(--kbl-ease-corte);
  }

  .inspector__barra.lleno span { background-color: var(--kbl-error); }

  .inspector__mails { display: grid; gap: var(--kbl-e-3); }

  .mail {
    padding: var(--kbl-e-4);
    background-color: var(--kbl-fondo);
    border-inline-start: 3px solid var(--kbl-alerta);
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
    white-space: pre-wrap;
    animation: burbuja-entra var(--kbl-dur-paso) var(--kbl-ease-corte) both;
  }

  .mail__para { display: block; color: var(--kbl-texto-3); font-size: var(--kbl-t-12); }
  .mail__asunto { display: block; margin-block: var(--kbl-e-1) var(--kbl-e-2); font-weight: var(--kbl-peso-medio); }

  /* Padding para que el objetivo táctil llegue a 24 px (WCAG 2.2, 2.5.8):
     la etiqueta sola mide 16. */
  .inspector__guion summary { cursor: pointer; padding-block: var(--kbl-e-2); }
  .inspector__guion ul { margin-block-start: var(--kbl-e-3); padding-inline-start: var(--kbl-e-5); }
  .inspector__guion li + li { margin-block-start: var(--kbl-e-2); }
  .inspector__guion strong { color: var(--kbl-tinta); font-weight: var(--kbl-peso-medio); }

  /* --- Fichada: secuencia de tres --------------------------------------- */
  .secuencia {
    display: grid;
    gap: var(--kbl-e-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 48rem) { .secuencia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .secuencia__paso > * + * { margin-block-start: var(--kbl-e-4); }
  .secuencia img { max-width: 20rem; border: 6px solid var(--kbl-tinta); }
  .secuencia .kbl-cifra {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-inline-end: var(--kbl-e-2);
    background-color: var(--kbl-tinta);
    color: var(--kbl-fondo);
    font-size: var(--kbl-t-12);
  }

  /* --- Panel: capturas -------------------------------------------------- */
  .captura-ancha, .captura-movil { margin: 0; }

  .par-capturas {
    display: grid;
    gap: var(--kbl-e-6);
    margin-block-start: var(--kbl-e-6);
  }

  @media (min-width: 48rem) {
    .par-capturas { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: start; }
  }

  .captura-movil img { border: 6px solid var(--kbl-tinta); max-width: 18rem; }

  .nota-demo {
    margin-block-start: var(--kbl-e-6);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-16);
  }

  /* --- Tags NFC (13/10/2026) -------------------------------------------- */
  .tags-precio {
    margin: 0;
    color: var(--kbl-tinta);
    font-size: var(--kbl-t-44);
    line-height: var(--kbl-lh-44);
    font-weight: var(--kbl-peso-titular);
  }

  .tags-visita { margin-block-start: var(--kbl-e-6); max-width: 44rem; }
  .tags-visita + p { margin-block-start: var(--kbl-e-3); }
  .tags-vigencia { margin-block-start: var(--kbl-e-6); max-width: 44rem; }
  .fundadores-condiciones a { color: var(--kbl-tinta); }
}