/* =========================================================================
   SUPERFICIES: FORMA K Y VIDRIO
   Regla del manual docs/03 §3.5 (v1.2, 2026-09-26, decisión de Keni). Todo
   sale de tokens.css; las transparencias se arman con color-mix sobre los
   tokens, sin valores escritos a mano.
   =========================================================================

   FORMA K. «Nada es 100 % recto o 100 % redondeado, es como la K.» Botones
   primarios, tarjetas y burbujas llevan la esquina superior izquierda viva
   (el asta) y las otras tres curvas: --kbl-forma-control (8) y
   --kbl-forma-tarjeta (12). El resto usa la escala: chips 4, campos y
   controles 8, paneles e imágenes 16. Nada de píldoras.

   VIDRIO. Solo en capas que flotan sobre contenido que se mueve: la cabecera
   fija y el chat sobre la pieza 3D. Nunca en tarjetas, franjas ni bloques
   quietos. Fondo al 84 % y 20 px de desenfoque, con alternativa sólida.

   SIN SOMBRAS. La jerarquía la hacen el tono de la superficie y la línea.
   ========================================================================= */

@layer secciones {

  /* --- Controles ---------------------------------------------------------- */
  .boton,
  .salto-contenido { border-radius: var(--kbl-radio-2); }

  .boton--primario { border-radius: var(--kbl-forma-control); }

  .chat__chip,
  .chat__contador { border-radius: var(--kbl-radio-1); }

  .chat__avatar { border-radius: var(--kbl-radio-2); }

  /* El campo y el botón de enviar van al ras del panel del chat: los recorta
     el borde redondeado del panel. */
  .chat__entrada,
  .chat__enviar { border-radius: 0; }

  /* --- Tarjetas y burbujas (forma K) -------------------------------------- */
  .burbuja,
  .escribiendo,
  .decide__columna,
  .precio,
  .indice__pieza { border-radius: var(--kbl-forma-tarjeta); }

  .aviso-encargado,
  .mail { border-radius: var(--kbl-radio-2); }

  /* --- Paneles e imágenes ------------------------------------------------- */
  .chat,
  .inspector,
  .vidriera__pieza img,
  .secuencia img,
  .captura-ancha img,
  .captura-movil img { border-radius: var(--kbl-radio-4); }

  .chat { overflow: hidden; }

  /* La cabeza del precio sigue la curva del contenedor por dentro. */
  .precio { overflow: hidden; }

  /* --- Vidrio: cabecera fija ---------------------------------------------- */
  .zona-carbon:has(> .cabecera-sitio) {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background-color: color-mix(in srgb, var(--kbl-fondo) var(--kbl-vidrio-opacidad), transparent);
    -webkit-backdrop-filter: blur(var(--kbl-vidrio-desenfoque)) saturate(1.3);
    backdrop-filter: blur(var(--kbl-vidrio-desenfoque)) saturate(1.3);
  }

  .cabecera-sitio { border-block-end-color: color-mix(in srgb, var(--kbl-tinta) 12%, transparent); }

  /* --- Vidrio: el chat sobre la pieza 3D ---------------------------------- */
  .hero__telefono .chat {
    background-color: color-mix(in srgb, var(--kbl-superficie) var(--kbl-vidrio-opacidad), transparent);
    -webkit-backdrop-filter: blur(var(--kbl-vidrio-desenfoque)) saturate(1.3);
    backdrop-filter: blur(var(--kbl-vidrio-desenfoque)) saturate(1.3);
    border-color: color-mix(in srgb, var(--kbl-tinta) 18%, transparent);
  }

  /* --- Franja de hechos: quieta, sin vidrio ------------------------------- */
  .franja__hecho {
    padding-block-start: var(--kbl-e-4);
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

  /* --- Sin vidrio cuando no corresponde ----------------------------------- */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .zona-carbon:has(> .cabecera-sitio) { background-color: var(--kbl-fondo); }
    .hero__telefono .chat { background-color: var(--kbl-superficie); }
  }

  @media (prefers-reduced-transparency: reduce) {
    .zona-carbon:has(> .cabecera-sitio) { background-color: var(--kbl-fondo); backdrop-filter: none; }
    .hero__telefono .chat { background-color: var(--kbl-superficie); backdrop-filter: none; }
  }

  /* --- Legibilidad -----------------------------------------------------------
     Los textos de contenido no bajan de 14 px ni usan el gris más tenue: el
     de 12 px queda solo para etiquetas en mayúsculas, que es su rol. En el
     celular las burbujas del chat pasan a 16 px, el mínimo cómodo para leer
     con una mano. */
  .hero__pie-chat,
  .nota-demo,
  .chat__nota,
  .aviso-encargado {
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
  }

  .hero__pie-chat,
  .chat__nota { color: var(--kbl-texto-2); }

  @media (max-width: 40rem) {
    .burbuja { font-size: var(--kbl-t-16); line-height: var(--kbl-lh-16); }
  }
}

/* --- Cabecera en el celular --------------------------------------------------
   El logotipo, el descriptor y el botón en tres renglones ocupaban 129 px; fija
   arriba, se comía un sexto de la pantalla. En angosto: el botón sube a la
   altura del logotipo (dos renglones) y la cabecera no queda fija. */
@layer secciones {
  @media (max-width: 40rem) {
    .zona-carbon:has(> .cabecera-sitio) { position: static; }
  }
  @media (max-width: 30rem) {
    .cabecera-sitio__fila { position: relative; min-height: 0; padding-block: var(--kbl-e-4); }
    .nav-sitio { position: absolute; inset-block-start: var(--kbl-e-4); inset-inline-end: var(--kbl-e-4); }
    /* El descriptor corta en dos renglones, como en el lockup apilado del manual. */
    .cabecera-sitio .marca__signo { flex-basis: 100%; }
    .cabecera-sitio .marca__descriptor { max-width: calc(100% - 9rem); overflow-wrap: normal; }
  }
}