/* Componentes "Mercato italiano" bajo el pliegue. Se sirven en css/mercato.css. */
@layer reset, tokens, base, primitivas, componentes, utilidades;

@layer primitivas {
  /* Encabezado de sección: título a la izquierda, enlace a la derecha, línea debajo */
  .encabezado {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-lg) var(--space-xl);
    padding-block-end: var(--space-lg); margin-block-end: var(--space-xl);
    border-block-end: 1px solid var(--color-linea);
    > :first-child { flex: 1 1 26rem; min-width: 0; }
  }

  .figura {
    display: block; overflow: hidden; border-radius: var(--radio); background: var(--color-papel);
    img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--proporcion, 4 / 5); transition: transform 600ms var(--curva); }
  }

  /* Datos cortos en fila: etiqueta arriba, valor en serif */
  .datos {
    display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl);
    > div { display: grid; gap: 0.35rem; }
    dt { font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    dd { font-size: var(--text-bloque); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; font-variant-numeric: tabular-nums; }
  }

  /* Rejilla de tres columnas como máximo que no estira las tarjetas: con 1 o 2, cada una conserva un tercio */
  .rejilla.rejilla--fija { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--rejilla-min, 15rem), (100% - 2 * var(--space-lg)) / 3)), 1fr)); }

  /* Columna que acompaña al bajar (títulos de sección largos junto a tablas) */
  @media (min-width: 60rem) { .pegajoso { position: sticky; top: calc(var(--altura-cabecera) + var(--altura-secundaria) + 5rem); align-self: start; } }
  .texto-suave { color: var(--color-texto-suave); }

  /* Familias de producto: cada una toma un color del logo para sus puntos, barras y sellos */
  .familia-maquinas { --color-familia: var(--color-marca); }
  .familia-vitrinas { --color-familia: var(--color-turquesa); }
  .familia-variegatos { --color-familia: var(--color-rosa); }

  /* Marcador de familia: una bola del logo delante de la etiqueta */
  .punto-familia {
    display: flex; align-items: center; gap: 0.625rem;
    &::before { content: ""; flex: none; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; background: var(--color-familia, var(--color-marca)); }
  }
  /* Las tres bolas del logo: firma de marca en etiquetas generales */
  .tres-bolas {
    display: flex; align-items: center; gap: 0.625rem;
    &::before {
      content: ""; flex: none; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; margin-inline-end: 1.6rem;
      background: var(--color-marca); box-shadow: 0.8rem 0 0 var(--color-rosa), 1.6rem 0 0 var(--color-turquesa);
    }
  }
}

@layer componentes {
  /* Botón de WhatsApp al pasar el cursor (sale de critico.css): el degradado se corre al verde hondo,
     un brillo lo cruza una vez y el ícono "timbra". Nunca pasa a negro. */
  .boton.boton--acento::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.5) 50%, transparent 65%);
    transform: translateX(-130%);
  }
  .boton.boton--acento:hover { background-position: 100% 50%; box-shadow: 0 12px 26px -14px rgb(18 140 74 / 0.9), inset 0 -2px 0 rgb(6 48 26 / 0.16); }
  .boton.boton--acento:hover::after { transform: translateX(130%); transition: transform 750ms var(--curva); }
  .boton.boton--acento:hover svg { animation: timbre 520ms var(--curva); }
  @keyframes timbre { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }

  /* Submenú de productos (sale de critico.css: solo aparece con cursor en escritorio) */
  @media (hover: hover) and (min-width: 60rem) {
    .submenu {
      display: grid; gap: var(--space-md); position: absolute; inset: 100% auto auto -1.25rem; z-index: 3;
      inline-size: 21rem; padding: var(--space-md) var(--space-md) var(--space-lg) var(--space-md);
      background: var(--color-fondo); border: 1px solid var(--color-linea); border-block-start: 3px solid var(--color-marca);
      box-shadow: 0 18px 40px -24px rgb(28 27 25 / 0.35); white-space: normal;
      opacity: 0; visibility: hidden; transform: translateY(6px);
      transition: opacity 180ms var(--curva), transform 180ms var(--curva), visibility 0s linear 180ms;
    }
    .menu__item:hover > .submenu, .menu__item:focus-within > .submenu {
      opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
    }
  }
  .submenu__lista { list-style: none; display: grid; }
  .submenu__producto {
    display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: 0.875rem;
    padding: 0.5rem; border-radius: var(--radio); text-decoration: none; transition: background-color var(--transicion);
    img { inline-size: 3.5rem; block-size: 3.5rem; object-fit: contain; background: var(--color-papel); border-radius: var(--radio); }
    strong { display: block; font-weight: 600; font-size: var(--text-sm); }
    small { display: block; font-size: 0.8125rem; color: var(--color-texto-suave); }
    &:hover { background: var(--color-papel); }
  }
  .submenu > .enlace-flecha { margin-inline-start: 0.5rem; }

  /* Baldosa de producto: foto recortada sobre papel, nombre y dato debajo */
  .baldosa {
    position: relative; display: grid; gap: 0.75rem; align-content: start; text-decoration: none;
    h3 { font-size: var(--text-item); margin-block-start: 0.25rem; }
  }
  .baldosa__foto {
    position: relative; display: grid; place-items: center; overflow: hidden;
    aspect-ratio: var(--proporcion, 1); background: var(--color-papel); border-radius: var(--radio);
    img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform 400ms var(--curva); }
    /* Barra del color de la familia que crece al pasar el cursor */
    &::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 3px; background: var(--color-familia, var(--color-marca)); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--curva); }
    .banda--papel & { background: var(--color-fondo); }
    .banda--verde & { background: var(--color-marfil); }
  }
  :is(a.baldosa, .ficha):hover .baldosa__foto img { transform: scale(1.04); }
  :is(a.baldosa, .ficha):hover .baldosa__foto::after { transform: scaleX(1); }
  a.baldosa:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .baldosa--foto .baldosa__foto img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
  /* El margen de las fotos de café se prepara en el archivo; se muestra el equipo completo. */
  .baldosa--catalogo .baldosa__foto img, .ficha .baldosa__foto img { padding: 0; }
  .baldosa--apaisada { --proporcion: 3 / 2; }
  .baldosa__meta { font-size: var(--text-sm); color: var(--color-texto-suave); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

  /* Sello de marca sobre la foto (solo marcas reales del producto), teñido con el color de la familia */
  .sello {
    position: absolute; inset: 0.75rem auto auto 0.75rem; z-index: 1;
    padding: 0.3rem 0.65rem; border-radius: var(--radio);
    background: color-mix(in srgb, var(--color-familia, var(--color-marca)) 18%, var(--color-fondo)); color: var(--color-texto);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  }

  /* Franja de marcas */
  .marcas {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg) clamp(2rem, 5vw, 4.5rem);
    img { width: auto; height: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); mix-blend-mode: multiply; }
    /* En gris solo donde hay cursor: el hover devuelve el color. En táctil se ven a color siempre */
    @media (hover: hover) and (pointer: fine) {
      img { filter: grayscale(1); opacity: 0.7; transition: opacity var(--transicion), filter var(--transicion); }
      li:hover img { filter: none; opacity: 1; }
    }
  }

  /* Ficha técnica en lista: modelos con medidas, línea superior del color de la familia */
  .ficha-lista {
    display: grid; border-block-start: 2px solid var(--color-familia, var(--color-marca));
    > div { display: grid; gap: 0.35rem var(--space-lg); padding-block: var(--space-lg); border-block-end: 1px solid var(--color-linea); }
    dt { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
    dt a { text-decoration: none; } dt a:hover { text-decoration: underline; }
    dd { color: var(--color-texto-suave); }
    @media (min-width: 40rem) { > div { grid-template-columns: 12rem 1fr; align-items: baseline; } }
  }

  /* Garantías: tres columnas separadas, cada una con una bola del logo en su línea superior */
  .garantias {
    list-style: none; display: grid; gap: var(--space-xl) clamp(2rem, 5vw, 5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    > li { display: grid; align-content: start; gap: var(--space-md); padding-block-start: var(--space-lg); border-block-start: 2px solid var(--color-marca); }
    > li:nth-child(2) { border-color: var(--color-rosa); }
    > li:nth-child(3) { border-color: var(--color-turquesa); }
    h3 { font-size: var(--text-item); }
    p { color: var(--color-texto-suave); max-width: 24rem; }
  }

  /* Accesos secundarios (insumos de base) */
  .accesos {
    list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    border-block-start: 1px solid var(--color-linea);
    > li { border-block-end: 1px solid var(--color-linea); }
    a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm) var(--space-lg) 0; text-decoration: none; font-size: var(--text-lg); font-weight: 600; }
    a::after { content: "→" / ""; font-family: var(--fuente-texto); font-size: var(--text-base); transition: transform var(--transicion); }
    a:hover::after { transform: translateX(4px); }
    @media (min-width: 48rem) { > li + li a { padding-inline-start: var(--space-lg); } > li + li { border-inline-start: 1px solid var(--color-linea); } }
  }

  /* Ficha de catálogo: foto, nombre y resumen, datos clave y paso a la página del producto.
     Todo visible, sin desplegables. Las 4 piezas se alinean entre tarjetas con subgrid. */
  .ficha {
    display: grid; gap: var(--space-lg); align-content: start;
    @supports (grid-template-rows: subgrid) { grid-row: span 4; grid-template-rows: subgrid; }
    .baldosa__foto { --proporcion: 8 / 7; }
    h3 { font-size: var(--text-item); }
    h3 a { text-decoration: none; } h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
    h3 small { display: block; margin-block-start: 0.35rem; font-family: var(--fuente-texto); font-size: var(--text-sm); color: var(--color-texto-suave); letter-spacing: 0; }
  }
  .ficha__datos {
    display: grid; font-size: var(--text-sm); align-content: start;
    > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.8rem; border-block-start: 1px solid var(--color-linea); }
    > div:last-child { border-block-end: 1px solid var(--color-linea); }
    dt { color: var(--color-texto-suave); }
    dd { font-weight: 600; text-align: end; }
  }
  .ficha__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); align-self: end; }
  .enlace-texto { font-size: var(--text-sm); color: var(--color-texto-suave); text-underline-offset: 0.25em; }
  .enlace-texto:hover { color: var(--color-texto); }

  /* Índice de la página: dónde estoy y qué sigue. Se pega bajo la cabecera y marca la sección visible. */
  .indice {
    position: sticky; top: calc(var(--altura-cabecera) + var(--altura-secundaria)); z-index: 20;
    background: color-mix(in srgb, var(--color-fondo) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--color-linea);
    transition: transform 300ms var(--curva);
    ol { list-style: none; counter-reset: indice; display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
    ol::-webkit-scrollbar { display: none; }
    li { counter-increment: indice; }
    a {
      display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.9rem 0.75rem;
      font-size: var(--text-sm); text-decoration: none; color: var(--color-texto-suave);
      border-block-end: 2px solid transparent; transition: color var(--transicion), border-color var(--transicion);
      &::before { content: counter(indice, decimal-leading-zero); font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: 0.06em; }
      &:hover { color: var(--color-texto); }
      &[aria-current="true"] { color: var(--color-texto); border-block-end-color: var(--color-familia, var(--color-marca)); }
    }
  }
  body:has(.cabecera-sitio.es-compacta) .indice { transform: translateY(calc(-1 * var(--altura-secundaria))); }

  /* Producto: foto de detalle y datos destacados */
  .producto__extra {
    display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    figure { display: grid; gap: var(--space-sm); align-content: start; }
    img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); background: var(--color-papel); }
    figcaption { font-size: var(--text-sm); color: var(--color-texto-suave); }
  }
  .datos--producto {
    padding-block: var(--space-lg); border-block: 1px solid var(--color-linea);
    dd { font-size: var(--text-item); }
  }

  /* Tabla de datos (ficha técnica): todo visible, filas con aire */
  .tabla-datos {
    display: grid; border-block-start: 2px solid var(--color-familia, var(--color-marca));
    > div { display: grid; gap: 0.25rem var(--space-lg); padding-block: var(--space-md); border-block-end: 1px solid var(--color-linea); }
    dt { color: var(--color-texto-suave); font-size: var(--text-sm); }
    dd { font-weight: 600; }
    @media (min-width: 40rem) { > div { grid-template-columns: 11rem 1fr; } }
  }
  /* Lista de características con una bola del color de la familia */
  .lista-check {
    list-style: none; display: grid; gap: var(--space-md);
    > li { position: relative; padding-inline-start: 1.75rem; }
    > li::before { content: ""; position: absolute; inset: 0.5em auto auto 0; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--color-familia, var(--color-marca)); }
  }

  /* Tipos de heladería: tres tarjetas con el color de su familia y lo que necesita cada una */
  .tipos { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .tipo {
    display: grid; align-content: start; gap: var(--space-md); padding: var(--space-xl) var(--space-lg);
    background: var(--color-fondo); border-radius: var(--radio); border-block-start: 3px solid var(--color-familia, var(--color-marca));
    > p { color: var(--color-texto-suave); }
    h4 { margin-block-start: var(--space-sm); font-size: var(--text-etiqueta); letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    .lista-check { gap: 0.75rem; }
    a { text-decoration-color: var(--color-linea); } a:hover { text-decoration-color: currentColor; }
  }

  /* Glosario técnico: términos en tarjetas sobre papel, todo visible */
  .glosario {
    display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    > div { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-papel); border-radius: var(--radio); border-block-start: 2px solid var(--color-familia, var(--color-marca)); }
    dt { font-weight: 600; font-size: var(--text-lg); }
    dd { color: var(--color-texto-suave); }
  }
  /* Preguntas visibles: pregunta en H3 y respuesta, separadas por líneas */
  .preguntas {
    display: grid;
    > div { padding-block: var(--space-lg); border-block-end: 1px solid var(--color-linea); }
    > div:first-child { padding-block-start: 0; }
    p { color: var(--color-texto-suave); }
  }

  /* Comparativa entre modelos: tabla real, desplazable en móvil, fila del producto actual marcada */
  .tabla-desplazable { overflow-x: auto; margin-block-end: var(--space-2xl); border: 1px solid var(--color-linea); border-radius: var(--radio); background: var(--color-fondo); }
  .tabla-desplazable:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 2px; }
  .comparativa {
    inline-size: 100%; min-inline-size: 40rem; border-collapse: collapse; font-size: var(--text-sm);
    th, td { padding: 1rem 1.25rem; text-align: start; border-block-end: 1px solid var(--color-linea); vertical-align: middle; }
    thead th { font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    tbody th { font-size: var(--text-base); font-weight: 600; }
    tbody th a { text-decoration: none; } tbody th a:hover { text-decoration: underline; }
    tbody tr:last-child > * { border-block-end: 0; }
  }
  /* Otros modelos: en móvil, dos por fila para no alargar la ficha */
  .producto__otros { @media (max-width: 40rem) { --rejilla-min: 9rem; gap: var(--space-md); } }
  .comparativa__actual { background: color-mix(in srgb, var(--color-familia, var(--color-marca)) 10%, var(--color-fondo)); box-shadow: inset 4px 0 0 var(--color-familia, var(--color-marca)); }

  /* Interruptor (checkbox nativo con forma de switch): resaltar diferencias, ver solo lo que cambia */
  .interruptor {
    display: inline-flex; align-items: center; gap: 0.75rem; min-block-size: 2.75rem; cursor: pointer;
    font-size: var(--text-sm); font-weight: 600;
    input {
      appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
      inline-size: 2.75rem; block-size: 1.5rem; border-radius: 999px; background: var(--color-linea);
      transition: background-color var(--transicion);
      &::after {
        content: ""; position: absolute; inset: 3px auto auto 3px; inline-size: 1.125rem; block-size: 1.125rem; border-radius: 50%;
        background: var(--color-fondo); box-shadow: 0 1px 2px rgb(28 27 25 / 0.25); transition: translate var(--transicion);
      }
      &:checked { background: var(--color-verde); }
      &:checked::after { translate: 1.25rem 0; }
      &:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 3px; }
    }
  }

  /* Comparativa de la ficha: con el interruptor, lo igual al producto actual se apaga y lo distinto se marca */
  .comparativa-bloque { display: grid; gap: var(--space-md); }
  .comparativa td { transition: opacity var(--transicion), background-color var(--transicion); }
  [data-comparativa]:has([data-resaltar]:checked) .comparativa tbody tr:not(.comparativa__actual) {
    td[data-igual] { opacity: 0.4; }
    td:not([data-igual], .comparativa__cotizar) { background: color-mix(in srgb, var(--color-familia, var(--color-marca)) 16%, transparent); font-weight: 600; color: var(--color-texto); }
  }
  .comparativa__cotizar a { white-space: nowrap; }
  /* En móvil la tabla pasa a tarjetas: cada modelo con sus datos en pares etiqueta-valor */
  @media (max-width: 39.99rem) {
    .tabla-desplazable:has(.comparativa--apilable) { overflow: visible; }
    .comparativa--apilable {
      min-inline-size: 0;
      thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      tbody, tr, th, td { display: block; }
      tr { display: grid; gap: 0.5rem; padding: var(--space-md) var(--space-md) var(--space-md) 1.25rem; border-block-end: 1px solid var(--color-linea); }
      tbody tr:last-child { border-block-end: 0; }
      th, td { padding: 0; border: 0; }
      td[data-etiqueta] { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; gap: var(--space-sm); }
      td[data-etiqueta]::before { content: attr(data-etiqueta); font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: 0.04em; color: var(--color-texto-suave); padding-block-start: 0.15rem; }
      .comparativa__cotizar { padding-block-start: 0.25rem; }
    }
  }

  /* Comparador de cafeteras (/equipos-cafe/): dos selectores e interruptor sobre una tabla real */
  .comparador { display: grid; gap: var(--space-lg); }
  .comparador__controles { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md) var(--space-lg); }
  .comparador__campo {
    display: grid; gap: 0.375rem; font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave);
    select {
      min-block-size: 2.75rem; min-inline-size: 11rem; padding: 0.5rem 2.25rem 0.5rem 0.875rem;
      font: 600 var(--text-base) / 1.2 var(--fuente-texto); letter-spacing: 0; text-transform: none; color: var(--color-texto);
      background: var(--color-fondo); border: 1px solid var(--color-texto); border-radius: var(--radio); cursor: pointer;
    }
    select:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 2px; }
  }
  .comparador__tabla {
    thead th small { display: block; margin-block-start: 0.25rem; font-weight: 400; letter-spacing: 0.04em; }
    thead th a { color: var(--color-texto); text-decoration: none; font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }
    thead th a:hover { text-decoration: underline; }
    tbody th { font-size: var(--text-sm); color: var(--color-texto-suave); font-weight: 600; inline-size: 11rem; }
    tr[data-igual] td { color: var(--color-texto-suave); }
    [data-col]:not([hidden]) { animation: aparecer 220ms var(--curva); }
  }
  .comparador.es-activo .tabla-desplazable { max-inline-size: 58rem; }
  .comparador.es-activo .comparador__tabla { min-inline-size: 0; table-layout: fixed; }
  .comparador.es-activo .comparador__tabla tbody th { inline-size: 32%; }
  .comparador:has([data-solo-diferencias]:checked) tr[data-igual] { display: none; }
  @keyframes aparecer { from { opacity: 0; } }
  @media (max-width: 39.99rem) {
    .comparador.es-activo .comparador__tabla { th, td { padding: 0.875rem 0.75rem; } tbody th { inline-size: 30%; } }
    .comparador__campo { flex: 1 1 9rem; select { min-inline-size: 0; inline-size: 100%; } }
  }

  /* Selector de sabores de la home: tres opciones con una píldora que se desliza y la vitrina que se enciende */
  .vitrinas-elegir { display: grid; gap: var(--space-lg); }
  .sabores {
    display: grid; gap: var(--space-md); margin: 0; padding: 0; border: 0; min-inline-size: 0;
    legend { padding: 0; margin-block-end: var(--space-md); font-weight: 600; }
  }
  .segmentos {
    position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); inline-size: min(100%, 27rem);
    padding: 4px; background: var(--color-fondo); border: 1px solid var(--color-linea); border-radius: 999px;
    &::before {
      content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: calc((100% - 8px) / 3);
      border-radius: 999px; background: var(--color-verde); transition: translate 280ms var(--curva);
    }
    &:has(.segmentos__opcion:nth-child(2) input:checked)::before { translate: 100% 0; }
    &:has(.segmentos__opcion:nth-child(3) input:checked)::before { translate: 200% 0; }
  }
  .segmentos__opcion {
    position: relative; cursor: pointer;
    input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    span { position: relative; display: grid; place-items: center; min-block-size: 2.75rem; padding-inline: 0.5rem; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--transicion); }
    input:checked + span { color: var(--color-marfil); }
    input:focus-visible + span { outline: 2px solid var(--color-texto); outline-offset: 3px; }
  }
  .bandejas {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; inline-size: min(100%, 27rem); padding: 10px;
    background: color-mix(in srgb, var(--color-turquesa) 16%, var(--color-fondo)); border-radius: var(--radio);
    border-block-start: 3px solid var(--color-turquesa);
    span {
      aspect-ratio: 4 / 3; border-radius: 3px; background: var(--color-fondo); border: 1px dashed color-mix(in srgb, var(--color-turquesa-texto) 35%, transparent);
      transition: background-color 260ms var(--curva), border-color 260ms var(--curva), scale 260ms var(--curva);
    }
    span:nth-child(n + 7) { transition-delay: 50ms; }
    span:nth-child(n + 13) { transition-delay: 100ms; }
  }
  /* Bandejas encendidas: los sabores toman los tres colores del logo */
  .sabores:has(input[value="8"]:checked) .bandejas span:nth-child(-n + 8),
  .sabores:has(input[value="12"]:checked) .bandejas span:nth-child(-n + 12),
  .sabores:has(input[value="18"]:checked) .bandejas span {
    border-color: transparent; scale: 1;
    /* Ciclo de 4 sobre 6 columnas: los colores quedan en diagonal, como sabores reales en la vitrina */
    &:nth-child(4n + 1) { background: color-mix(in srgb, var(--color-marca) 55%, var(--color-mantequilla)); }
    &:nth-child(4n + 2) { background: color-mix(in srgb, var(--color-rosa) 50%, var(--color-fondo)); }
    &:nth-child(4n + 3) { background: color-mix(in srgb, var(--color-turquesa) 55%, var(--color-fondo)); }
    &:nth-child(4n) { background: var(--color-marfil-suave); }
  }
  .bandejas span { scale: 0.86; }
  .vitrinas-lista > div { transition: background-color var(--transicion), box-shadow var(--transicion); padding-inline: var(--space-md); margin-inline: calc(var(--space-md) * -1); }
  .vitrinas-elegir:has(input[value="8"]:checked) [data-bandejas="8"],
  .vitrinas-elegir:has(input[value="12"]:checked) [data-bandejas="12"],
  .vitrinas-elegir:has(input[value="18"]:checked) [data-bandejas="18"] {
    background: color-mix(in srgb, var(--color-turquesa) 14%, transparent); box-shadow: inset 3px 0 0 var(--color-turquesa);
  }
  .vitrinas-lista dd .enlace-texto { display: inline-block; margin-inline-start: 0.25rem; }

  /* Arma tu mensaje (cierre de la home, banda verde): chips y ciudad que escriben el WhatsApp */
  .armar {
    display: grid; gap: var(--space-md); justify-items: center; inline-size: min(100%, 44rem);
    fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
    legend, .armar__ciudad > span { padding: 0; margin-block-end: 0.75rem; font-size: var(--text-sm); font-weight: 600; }
  }
  .armar__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .chip {
    position: relative; cursor: pointer;
    input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    span {
      display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 1.125rem; border-radius: 999px;
      border: 1px solid rgb(237 232 220 / 0.45); font-size: var(--text-sm); font-weight: 600;
      transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
    }
    &:hover span { border-color: var(--color-marfil); }
    input:checked + span { background: var(--color-marfil); color: var(--color-verde); border-color: var(--color-marfil); }
    input:focus-visible + span { outline: 2px solid var(--color-marfil); outline-offset: 3px; }
  }
  .armar__ciudad {
    display: grid; justify-items: center;
    select {
      min-block-size: 2.75rem; min-inline-size: 14rem; padding: 0.5rem 2.25rem 0.5rem 1rem; font: 600 var(--text-sm) / 1.2 var(--fuente-texto);
      color: var(--color-verde); background: var(--color-marfil); border: 0; border-radius: 999px; cursor: pointer;
    }
    select:focus-visible { outline: 2px solid var(--color-marfil); outline-offset: 3px; }
  }
  .armar__vista {
    max-inline-size: 38rem; padding: 0.75rem 1.125rem; font-size: var(--text-sm); color: var(--color-marfil);
    background: rgb(237 232 220 / 0.08); border-radius: var(--radio); border-inline-start: 3px solid var(--color-accion);
    text-align: start;
    > span { color: var(--color-texto-suave); }
  }

  /* Cómo se compra: tres pasos numerados en la banda de cierre */
  .pasos {
    counter-reset: paso; list-style: none; display: grid; gap: var(--space-md); inline-size: min(100%, 60rem); padding: 0;
    text-align: start; font-size: var(--text-sm); color: var(--color-texto-suave);
    @media (min-width: 48rem) { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
    li {
      counter-increment: paso; position: relative; padding-inline-start: 3rem; min-block-size: 2.25rem;
      &::before {
        content: counter(paso); position: absolute; inset: 0 auto auto 0;
        display: grid; place-items: center; inline-size: 2.25rem; aspect-ratio: 1; border-radius: 50%;
        font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-verde); background: var(--color-marfil);
      }
      &:nth-child(1)::before { box-shadow: 0 0 0 3px var(--color-marca); }
      &:nth-child(2)::before { box-shadow: 0 0 0 3px var(--color-rosa); }
      &:nth-child(3)::before { box-shadow: 0 0 0 3px var(--color-turquesa); }
    }
    strong { display: block; color: var(--color-marfil); font-size: var(--text-base); }
  }

  /* Cierre de conversión */
  .cierre { text-align: center; > * { margin-inline: auto; } .acciones { justify-content: center; } }
  /* Banda con las tres bolas del logo a gran escala, recortadas en la esquina: la firma de marca */
  .banda--marca {
    position: relative; overflow: hidden; isolation: isolate;
    &::before {
      content: ""; position: absolute; z-index: -1; pointer-events: none;
      inline-size: clamp(11rem, 6rem + 22vw, 26rem); aspect-ratio: 1;
      inset: auto clamp(-7rem, -6vw, -3rem) clamp(-8rem, -7vw, -4rem) auto;
      background:
        radial-gradient(circle at 50% 30%, var(--color-marca) 0 23%, transparent 23.5%),
        radial-gradient(circle at 31% 64%, var(--color-rosa) 0 23%, transparent 23.5%),
        radial-gradient(circle at 69% 64%, var(--color-turquesa) 0 23%, transparent 23.5%);
    }
    @media (max-width: 40rem) { &::before { inset: clamp(-5rem, -12vw, -3rem) -3.5rem auto auto; opacity: 0.85; } }
  }

  /* Pie: abre con la franja de los tres colores del logo */
  .pie-sitio {
    position: relative; padding-block: var(--space-2xl) var(--space-lg);
    text-align: center; font-size: var(--text-sm);
    &::before { content: ""; position: absolute; inset: 0 0 auto 0; block-size: 4px; background: var(--tricolor); }
    address { font-style: normal; }
    > .wrapper > * { margin-inline: auto; }
    ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-lg); }
    a { display: inline-block; padding-block: 0.75rem; text-decoration: none; color: var(--color-texto-suave); }
    address a { padding-block: 0.25rem; }
    a:hover { color: var(--color-texto); text-decoration: underline; }
  }
  .pie-sitio__marca { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.75rem; text-decoration: none; img { width: 3rem; height: 3rem; } }
  .pie-sitio__legal { padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-linea); color: var(--color-texto-suave); font-size: var(--text-etiqueta); }

  /* Botón flotante de WhatsApp. Oculto mientras se ve el hero (js/canales.js pone data-oculto).
     Cuando el hero sale de la vista muestra una invitación con texto durante 6 s y dos pulsos
     (js/mercato.js, clase es-invitando); después queda el ícono, y el texto vuelve con el cursor o el foco. */
  .flotante {
    position: fixed; inset: auto clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) auto; z-index: 30; visibility: visible;
    display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
    transition: opacity var(--transicion), transform var(--transicion);
    &[data-oculto] { opacity: 0; transform: translateY(1rem); pointer-events: none; visibility: hidden; transition: opacity var(--transicion), transform var(--transicion), visibility 0s linear 220ms; }
  }
  .flotante__icono {
    position: relative; display: grid; place-items: center; flex: none; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%;
    color: var(--color-accion-texto);
    background-image: linear-gradient(135deg, var(--color-accion), var(--color-accion-hondo));
    box-shadow: 0 12px 30px -10px rgb(18 140 74 / 0.75);
    transition: transform 300ms var(--curva);
    svg { width: 1.6rem; height: 1.6rem; }
    &::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accion); opacity: 0; }
  }
  .flotante__burbuja {
    position: relative; max-inline-size: min(17rem, calc(100vw - 7rem)); padding: 0.75rem 1rem;
    background: var(--color-fondo); color: var(--color-texto); border: 1px solid var(--color-linea); border-radius: 0.875rem 0.875rem 0.25rem 0.875rem;
    box-shadow: 0 14px 34px -18px rgb(28 27 25 / 0.45);
    font-size: var(--text-sm); line-height: 1.4;
    opacity: 0; transform: translateX(0.5rem) scale(0.96); transform-origin: right center; pointer-events: none;
    transition: opacity 250ms var(--curva), transform 250ms var(--curva);
    strong { display: block; font-weight: 600; }
    @media (max-width: 40rem) { max-inline-size: 12.5rem; padding: 0.6rem 0.8rem; .flotante__extra { display: none; } }
  }
  .flotante:is(:hover, :focus-visible, .es-invitando) .flotante__burbuja { opacity: 1; transform: none; }
  .flotante:hover .flotante__icono { transform: scale(1.06); }
  .flotante.es-invitando .flotante__icono::after { animation: pulso 1.4s var(--curva) 2; }
  .flotante.es-invitando .flotante__icono svg { animation: timbre 520ms var(--curva) 2 400ms; }
  @keyframes pulso { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
}

/* Contenido heredado dentro del sistema Mercato (layout contenido). Re-estiliza las clases del
   contenido anterior con los tokens nuevos. Acotado a .contenido-legado: no afecta a las páginas nuevas.
   Se retira por partes a medida que cada página se reescribe con los componentes Mercato. */
@layer reset, tokens, base, primitivas, componentes, utilidades;

@layer componentes {
  .contenido-legado {
    /* Cada bloque de primer nivel es una banda con su propio ancho y aire */
    > :is(section, div, article, aside):not(.pqr-overlay) { width: min(100% - 2 * var(--margen-lateral), var(--ancho-contenido)); margin-inline: auto; padding-block: var(--space-xl); }

    .wrapper, .section, .page-wrapper { padding-block: var(--space-xl); }
    .wrapper .wrapper, .section .wrapper { width: 100%; padding-block: var(--space-md); }
    .padding_block { padding-block: var(--space-lg); }
    /* Las secciones dentro de .page-wrapper también son bandas: aire arriba y abajo */
    .page-wrapper > :is(section, aside, article, div):not(.pqr-overlay) { padding-block: var(--space-xl); }
    .page-wrapper > :is(.bg_grey, .bg_grey_light, .bg_pink) { margin-block: var(--space-lg); }

    /* Ritmo vertical dentro de cada bloque (el contenido heredado dependía de márgenes del CSS anterior).
       No se aplica a contenedores flex o grid de varias columnas, donde el espacio lo pone gap. */
    :is(section, article, aside, div):not(.flex, .flex_left, .two_columns, .three_columns, .four_columns, .products-grid, .botones, .product-img, .tabla-desplazable, .icons, .cafe-destacado, .flujo, .columnas, .rejilla, .acciones, .sintesis, .faq, .faq__lista, .faq__item, .faq__contacto, .cta) {
      > * + * { margin-block-start: var(--space-md); }
      > * + h2 { margin-block-start: var(--space-xl); }
      > * + :is(h3, h4) { margin-block-start: var(--space-lg); }
      > :is(h2, h3, h4) + * { margin-block-start: var(--space-sm); }
      > h2 + * { margin-block-start: var(--space-md); }
      > :is(h2, h3) + :is(h3, h4) { margin-block-start: var(--space-md); }
      > * + :is(table, .two_columns, .three_columns, .four_columns, .products-grid, .flex) { margin-block-start: var(--space-lg); }
      > :is(table, .two_columns, .three_columns, .four_columns, .products-grid, .flex) + * { margin-block-start: var(--space-lg); }
    }

    h3 { font-size: var(--text-item); }
    h4 { font-size: var(--text-lg); }
    p, li { color: var(--color-texto-suave); }
    strong { color: var(--color-texto); }
    ul:not([role="list"]), ol { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; }
    li::marker { color: var(--color-marca); }
    a:not(.boton) { color: var(--color-texto); text-decoration-color: var(--color-linea); }
    a:not(.boton):hover { text-decoration-color: currentColor; }
    img { border-radius: var(--radio); }

    .flow > * + * { margin-block-start: 1em; }
    .center { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .center > * { max-inline-size: 100%; }
    .text_center { text-align: center; margin-inline: auto; max-width: min(100%, 52rem); }
    .text_center > * { margin-inline: auto; }
    /* Centrado solo en títulos: el texto corrido se lee alineado a la izquierda */
    :is(p, ul, ol, small, .product-content, .datos > p):is(.text_center, .text_center *) { text-align: start; }
    /* En móvil todo el contenido heredado se alinea a la izquierda, como el resto del sistema */
    @media (max-width: 47.99rem) {
      .center { justify-items: stretch; }
      .text_center, .center { text-align: start; }
    }

    /* Columnas y rejillas */
    .flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl) clamp(2rem, 4vw, 4rem); }
    .flex > * { flex: 1 1 20rem; min-width: 0; }
    /* La foto conserva su proporción (vertical, cuadrada o apaisada): nunca se recorta el producto.
       Las verticales se limitan en alto y quedan centradas en su columna. */
    .flex > img { flex: 1 1 18rem; width: 100%; height: auto; max-block-size: 34rem; object-fit: contain; align-self: center; }

    /* Banda de café Hambach en /equipos/ (include cafe-destacado.html): verde, texto | cafetera en baldosa clara */
    > .cafe-destacado {
      display: grid; gap: var(--space-xl); align-items: center; padding: var(--space-xl) clamp(1.25rem, 4vw, 3.5rem);
      background: var(--color-verde); color: var(--color-marfil); border-radius: var(--radio);
      --color-texto: var(--color-marfil); --color-texto-suave: var(--color-marfil-suave); --color-linea: rgb(237 232 220 / 0.18);
      @media (min-width: 60rem) { grid-template-columns: 7fr 5fr; }
      p, strong { color: inherit; }
      .medida { color: var(--color-marfil-suave); }
      a:not(.boton) { color: var(--color-marfil); }
    }
    .cafe-destacado__foto {
      display: grid; place-items: center; padding: var(--space-lg); background: var(--color-marfil); border-radius: var(--radio);
      img { inline-size: auto; max-inline-size: 100%; max-block-size: 20rem; object-fit: contain; mix-blend-mode: multiply; border-radius: 0; }
    }
    @media (min-width: 60rem) { .flex_left { flex-direction: row-reverse; } }
    :is(.two_columns, .three_columns, .four_columns, .products-grid) { display: grid; gap: var(--space-xl) var(--space-lg); }
    .two_columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
    .three_columns, .products-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
    .four_columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

    /* Fondos: escalones de tono del sistema */
    :is(.bg_grey, .bg_grey_light) { background: var(--color-papel); border-radius: var(--radio); padding: var(--space-xl) clamp(1.25rem, 4vw, 3rem); }
    :not(.flex, .flex_left, .two_columns, .three_columns) > .bg_grey_light + .bg_grey_light { margin-block-start: var(--space-lg); }
    :is(.flex, .flex_left):has(> .bg_grey_light + .bg_grey_light) { align-items: stretch; }
    .bg_pink { background: var(--color-mantequilla); border-radius: var(--radio); padding: var(--space-xl) clamp(1.25rem, 4vw, 3rem); }

    /* Tarjeta de producto: foto sobre papel y texto debajo */
    .product-card { display: grid; align-content: start; gap: var(--space-md); }
    .product-img {
      display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; background: var(--color-papel); border-radius: var(--radio);
      img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
    }
    .product-content { display: grid; gap: var(--space-sm); align-content: start; }
    .product-content.text_center { text-align: start; }
    .product-badge { display: inline-block; font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }

    /* Tarjeta de serie o línea de producto (vitrinas, Quella): ficha sobre papel, el título lleva la bola de un color del logo */
    .product-category {
      display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg) clamp(1.25rem, 4vw, 2rem);
      background: var(--color-papel); border-radius: var(--radio); --punto: var(--color-marca);
      &:nth-child(3n + 2) { --punto: var(--color-rosa); }
      &:nth-child(3n) { --punto: var(--color-turquesa); }
      > h3::before { content: ""; display: inline-block; inline-size: 0.625rem; block-size: 0.625rem; margin-inline-end: 0.625rem; border-radius: 50%; background: var(--punto); vertical-align: 0.1em; }
      ul { margin-block: var(--space-sm); }
      small { color: var(--color-texto-suave); }
      .boton { margin-block-start: var(--space-sm); }
    }

    /* Cifras destacadas con la bola del color del logo */
    .datos { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-papel); border-radius: var(--radio); text-align: start; --punto: var(--color-marca); }
    .datos::before { content: ""; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; background: var(--punto); }
    .datos.pink { --punto: var(--color-rosa); }
    .datos.secundario { --punto: var(--color-turquesa); }
    .datos.gris { --punto: var(--color-marfil-suave); }
    .datos > span, .stat-number { font-size: var(--text-bloque); font-weight: 600; color: var(--color-texto); letter-spacing: -0.015em; }
    .flex:has(> .datos) { align-items: stretch; }
    .flex:has(> .datos) > .datos { flex: 1 1 14rem; }

    /* Enlaces con aspecto de botón dentro del contenido: enlace con flecha (el botón sólido es el del hero y el cierre) */
    .boton:not(.pqr-overlay *) {
      display: inline-flex; align-items: center; gap: var(--space-sm); inline-size: fit-content; min-height: 2.75rem; padding: 0;
      background: none; color: var(--color-texto); font-size: var(--text-sm); font-weight: 600; white-space: normal; text-align: start;
      border-block-end: 1px solid currentColor; border-radius: 0; box-shadow: none;
      &::after { content: "→" / ""; transition: transform var(--transicion); }
      &:hover::after { transform: translateX(4px); }
    }
    .boton.lead_whatsapp { color: #0E6B37; }
    .botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
    .boton_centro { margin-inline: auto; }

    /* Tablas: legibles y desplazables en móvil */
    table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-fondo); }
    th, td { padding: 0.85rem 1rem; text-align: start; border-block-end: 1px solid var(--color-linea); vertical-align: top; }
    thead th { font-size: var(--text-etiqueta); font-weight: 600; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    tbody th { font-weight: 600; }
    /* En móvil: las tablas de dos columnas (dato | valor) caben y parten línea; las de tres o más
       se desplazan de lado con columnas de ancho mínimo legible, nunca con el texto cortado */
    @media (max-width: 48rem) {
      th, td { padding: 0.75rem 0.875rem; }
      table:not(:has(tr > :nth-child(3))) { tr > :first-child { inline-size: 42%; } }
      table:has(tr > :nth-child(3)) { display: block; overflow-x: auto; th, td { min-inline-size: 8.5rem; } }
    }

    /* Citas */
    blockquote { padding: var(--space-lg); background: var(--color-papel); border-radius: var(--radio); }
    cite { display: block; margin-block-start: var(--space-sm); font-style: normal; font-weight: 600; font-size: var(--text-sm); color: var(--color-texto); }

    /* Síntesis "En resumen" (idea "Bold Stats" de 21st): la respuesta corta de la página en grande, con su acción */
    .sintesis {
      display: grid; gap: var(--space-md); inline-size: 100%; padding: var(--space-xl) clamp(1.25rem, 4vw, 3.5rem);
      background: var(--color-mantequilla); border-radius: var(--radio); text-align: start;
      @media (min-width: 60rem) {
        grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); align-items: end;
        > .etiqueta { grid-column: 1 / -1; }
      }
    }
    .sintesis__texto { font-size: var(--text-lg); line-height: 1.65; color: var(--color-texto); max-inline-size: 64ch; }
    .sintesis__accion { margin: 0; .enlace-flecha { color: #0E6B37; white-space: nowrap; } }

    /* Preguntas frecuentes (idea "Two-Column FAQ" de 21st, sin acordeón): contacto a un lado, preguntas numeradas al otro */
    .faq {
      display: grid; gap: var(--space-xl); inline-size: 100%; text-align: start;
      @media (min-width: 60rem) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; column-gap: var(--space-2xl); }
    }
    .faq__contacto {
      display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radio);
      background: var(--color-verde); color: var(--color-marfil);
      p { color: var(--color-marfil-suave); }
      .faq__contacto-titulo { color: var(--color-marfil); font-size: var(--text-lg); font-weight: 600; }
      .enlace-flecha { color: var(--color-marfil); margin-block-start: var(--space-sm); }
      @media (max-width: 59.99rem) { order: 2; }
      @media (min-width: 60rem) { position: sticky; top: calc(var(--altura-cabecera) + var(--space-lg)); }
    }
    .faq__lista { counter-reset: faq; display: grid; gap: var(--space-xl); }
    /* En escritorio el título de la sección sube a la columna izquierda, sobre la tarjeta de contacto */
    @media (min-width: 60rem) {
      :is(section, div):has(> .faq) {
        display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-items: start; justify-items: stretch;
        > h2 { grid-column: 1; grid-row: 1; text-align: start; margin: 0; max-inline-size: none; }
        > .faq { display: contents; }
        .faq__contacto { grid-column: 1; grid-row: 2; margin-block-start: var(--space-lg); }
        .faq__lista { grid-column: 2; grid-row: 1 / span 2; }
      }
    }
    .faq__item {
      counter-increment: faq; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-sm);
      &::before {
        content: counter(faq, decimal-leading-zero); grid-row: 1 / span 2; padding-block-start: 0.2rem;
        font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-marca-texto);
      }
      &:nth-child(3n + 2)::before { color: var(--color-rosa-texto); }
      &:nth-child(3n)::before { color: var(--color-turquesa-texto); }
      h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-texto); }
    }
    .faq__respuesta > * + * { margin-block-start: 0.75rem; }

    /* Llamado a la acción intermedio (.cta): tarjeta con el texto a un lado y las acciones agrupadas al otro */
    .cta {
      display: grid; gap: var(--space-md); justify-items: start; text-align: start;
      inline-size: 100%; max-width: none; padding: var(--space-xl) clamp(1.25rem, 4vw, 3.5rem); background: var(--color-mantequilla); border-radius: var(--radio);
      > :is(.two_columns, .three_columns, .botones, .flex) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-block: var(--space-sm); }
      > * { margin-inline: 0; }
      small, i { font-style: normal; color: var(--color-texto-suave); }
      @media (min-width: 60rem) {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: center;
        > * { grid-column: 1; }
        > :is(.two_columns, .three_columns, .botones, .flex) { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; align-items: start; justify-self: start; }
      }
    }

    /* Tarjetas de texto en rejilla (sin foto): papel, aire y la bola de color en el título */
    :is(.two_columns, .three_columns, .four_columns) > :is(div, article):not(.datos, .product-category, :has(img), .faq__item) {
      padding: var(--space-lg); background: var(--color-papel); border-radius: var(--radio); text-align: start; --punto: var(--color-marca);
      &:nth-child(3n + 2) { --punto: var(--color-rosa); }
      &:nth-child(3n) { --punto: var(--color-turquesa); }
      > h3:first-child::before { content: ""; display: inline-block; inline-size: 0.625rem; block-size: 0.625rem; margin-inline-end: 0.625rem; border-radius: 50%; background: var(--punto); vertical-align: 0.1em; }
      :is(.bg_grey, .bg_grey_light) & { background: var(--color-fondo); }
    }
    .aviso-b2b, .intro-text, .text-highlight { padding: var(--space-lg); background: var(--color-mantequilla); border-radius: var(--radio); }
    .icons { display: none; }
  }
}

/* Formulario PQR (/contacto/) dentro del sistema Mercato: las variables del CSS heredado
   (_includes/css/pqr.css) apuntan a los tokens nuevos y todo queda en la capa de componentes. */
@layer reset, tokens, base, primitivas, componentes, utilidades;
@layer componentes {
  .pqr-overlay {
    --color-principal: var(--color-marca);
    --color-secundario: var(--color-turquesa-texto);
    --color-accent: var(--color-accion-hondo);
    --color-accent-light: var(--color-mantequilla);
    --color-border: var(--color-linea);
    --color-text-primary: var(--color-texto);
    --color-text-secondary: var(--color-texto-suave);
    --color-text-tertiary: var(--color-texto-suave);
    --color-bg-surface: var(--color-fondo);
    --color-bg-secondary: var(--color-papel);
    --fuenteTitulos: var(--fuente-titulos);
    --fuenteCuerpo: var(--fuente-texto);
    --radius-md: var(--radio);
    --radius-lg: var(--radio);
    --radius-pill: 999px;
    --shadow-subtle: 0 2px 8px rgb(28 27 25 / 0.08);
    --shadow-medium: 0 8px 24px rgb(28 27 25 / 0.12);
    --shadow-large: 0 24px 48px rgb(28 27 25 / 0.18);
    --transition: all var(--transicion);
  }
/* ============================================================
   PQR MODAL — Formulario Peticiones, Quejas y Reclamos
   Estilo Typeform / conversacional
   ============================================================ */

/* Overlay */
.pqr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(44, 36, 32, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.pqr-overlay.pqr-abierto {
  opacity: 1;
  visibility: visible;
}

/* Tarjeta principal */
.pqr-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  width: min(680px, 100%);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-large);
  overflow: hidden;
}

/* ---- Encabezado ---- */
.pqr-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.pqr-barra-track {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.pqr-barra {
  height: 100%;
  background: var(--color-principal);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 0%;
}

.pqr-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.pqr-cerrar:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- Área de pasos ---- */
.pqr-contenido {
  flex: 1;
  overflow-y: auto;
  padding: 2.5rem 2rem;
  overscroll-behavior: contain;
}

/* ---- Pasos individuales ---- */
.pqr-paso {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
}

.pqr-paso.activo {
  display: flex;
  animation: pqr-entrar 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes pqr-entrar {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Número del paso */
.pqr-num-paso {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-principal);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  width: auto;
  line-height: 1;
}

.pqr-num-paso span {
  color: var(--color-text-tertiary);
  font-weight: 400;
}

/* Pregunta principal */
.pqr-pregunta {
  font-family: var(--fuenteTitulos);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 100%;
  width: 100%;
  text-wrap: balance;
}

/* Texto de ayuda */
.pqr-hint {
  color: var(--color-text-tertiary);
  font-size: 0.95rem;
  margin: 0;
  width: auto;
  line-height: 1.5;
}

/* ---- Opciones de selección ---- */
.pqr-grid-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 0.75rem;
  width: 100%;
}

.pqr-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.pqr-opcion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  font-family: var(--fuenteCuerpo);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.pqr-opcion:hover {
  border-color: var(--color-principal);
  background: var(--color-accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}

.pqr-opcion.seleccionado {
  border-color: var(--color-principal);
  background: var(--color-accent-light);
  color: var(--color-principal);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(195, 112, 51, 0.15);
}

.pqr-opcion-ico {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ---- Campos de texto ---- */
.pqr-campo-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.pqr-campo {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--fuenteCuerpo);
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  transition: var(--transition);
  line-height: 1.5;
}

.pqr-campo:focus {
  outline: none;
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(195, 112, 51, 0.12);
}

.pqr-campo.pqr-campo-error {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 100, 78, 0.12);
}

.pqr-textarea {
  resize: vertical;
  min-height: 130px;
}

.pqr-error-msg {
  font-size: 0.875rem;
  color: var(--color-accent);
  font-weight: 500;
}

.pqr-btn-siguiente {
  align-self: flex-start;
}

/* ---- Pantalla de éxito ---- */
.pqr-exito {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  padding: 1.5rem 0;
}

.pqr-exito-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-secundario) 15%, white);
  border: 2px solid var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--color-secundario);
  animation: pqr-entrar 0.5s ease both;
}

.pqr-exito .pqr-pregunta {
  color: var(--color-secundario);
}

.pqr-exito p {
  max-width: 460px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ---- Pie del modal ---- */
.pqr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.pqr-btn-atras {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-family: var(--fuenteCuerpo);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.pqr-btn-atras:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.pqr-conteo {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* ---- Botón apertura PQR (en la página) ---- */
.btn-pqr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: color-mix(in srgb, var(--color-secundario) 12%, white);
  border: 2px solid var(--color-secundario);
  border-radius: var(--radius-pill);
  font-family: var(--fuenteCuerpo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-secundario);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  border-bottom: 2px solid var(--color-secundario);
}

.btn-pqr:hover {
  background: var(--color-secundario);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-secundario);
  border-bottom-color: var(--color-secundario);
}


/* Estado inicial del botón "atrás": oculto hasta el paso 2 (js/app.js lo muestra). */
.pqr-btn-atras { visibility: hidden; }

  /* Botones del formulario: acción verde del sistema (dentro del PQR es la acción principal del paso) */
  .pqr-overlay .boton {
    color: var(--color-accion-texto); border: 0;
    background-image: linear-gradient(120deg, var(--color-accion), var(--color-accion-medio) 50%, var(--color-accion-hondo));
    background-size: 220% 100%; transition: background-position 450ms var(--curva);
    &:hover { background-position: 100% 50%; }
  }
}

/* Posts del blog (sistema Mercato, 2026-11-04). Se sirve dentro de css/mercato.css.
   La cabecera del post (.articulo-cabecera, .resumen) va en critico.css. */
@layer reset, tokens, base, primitivas, componentes, utilidades;

@layer componentes {
  /* Caja del producto de Italgel bajo la cabecera: foto sobre papel, nombre, texto y enlaces */
  .destacado {
    display: grid; grid-template-columns: minmax(0, 6.5rem) 1fr; gap: var(--space-md) var(--space-lg); align-items: start;
    margin-block-end: var(--space-xl); padding: var(--space-lg); background: var(--color-papel); border-radius: var(--radio);
    .baldosa__foto { background: var(--color-fondo); }
    .baldosa__foto img { padding: 8%; }
    .acciones { gap: var(--space-sm) var(--space-lg); }
    @media (min-width: 40rem) { grid-template-columns: 11rem 1fr; align-items: center; }
  }
  .destacado__titulo { font-size: var(--text-item); font-weight: 600; line-height: 1.3; }

  /* Cuerpo del post: índice lateral fijo | texto a 70 caracteres */
  .articulo {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block-end: var(--space-2xl);
    @media (min-width: 60rem) { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  }
  /* En móvil es la barra de .indice; en escritorio, una lista vertical que acompaña la lectura */
  .indice--lateral {
    > .etiqueta { display: none; }
    @media (min-width: 60rem) {
      top: calc(var(--altura-cabecera) + var(--altura-secundaria) + var(--space-lg));
      background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
      > .etiqueta { display: block; margin-block-end: var(--space-md); }
      ol { flex-direction: column; gap: 0; white-space: normal; overflow: visible; }
      a { padding: 0.5rem 0 0.5rem 0.875rem; line-height: 1.4; border-block-end: 0; border-inline-start: 2px solid var(--color-linea); }
      a[aria-current="true"] { border-inline-start-color: var(--color-familia, var(--color-marca)); }
    }
  }

  .prosa {
    min-width: 0; max-inline-size: 70ch; font-size: 1.0625rem; line-height: 1.7;
    > * + * { margin-block-start: var(--space-md); }
    > :is(h2, section) { margin-block-start: var(--space-xl); }
    h2 { font-size: var(--text-bloque); }
    h3 { margin-block-start: var(--space-lg); }
    :is(p, li) > a:not([class]) { text-decoration-color: var(--color-familia, var(--color-marca)); text-decoration-thickness: 2px; }
    > :is(ul, ol) { display: grid; gap: 0.5rem; padding-inline-start: 1.25rem; }
    li::marker { color: var(--color-familia, var(--color-marca)); }
    img { width: 100%; border-radius: var(--radio); }
    hr { border: 0; border-block-start: 1px solid var(--color-linea); margin-block: var(--space-xl); }
    code { font-size: 0.9em; padding: 0.1em 0.35em; background: var(--color-papel); border-radius: var(--radio); }
    blockquote {
      display: grid; gap: var(--space-sm); padding-block: var(--space-md);
      font-family: var(--fuente-titulos); font-size: var(--text-item); line-height: 1.4;
      &::before { content: "“" / ""; font-size: 3rem; line-height: 0.6; color: var(--color-familia, var(--color-marca)); }
      cite, footer { font-family: var(--fuente-texto); font-size: var(--text-sm); font-style: normal; color: var(--color-texto-suave); }
    }
    .tabla-desplazable { margin-block: var(--space-lg); }
    .comparativa { min-inline-size: 34rem; }
    .preguntas h3 { margin-block-start: 0; }
  }
  /* Calculadora de overrun dentro del texto: dos campos y el resultado en grande */
  .calculadora {
    display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-papel); border-radius: var(--radio);
    label { display: grid; gap: 0.35rem; font-size: var(--text-sm); font-weight: 600; }
    input {
      min-block-size: 3rem; padding: 0.5rem 0.875rem; font-size: var(--text-lg); font-variant-numeric: tabular-nums;
      background: var(--color-fondo); border: 0; border-radius: var(--radio);
      &:focus-visible { outline: 2px solid var(--color-familia, var(--color-marca)); outline-offset: 1px; }
    }
  }
  .calculadora__campos { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .calculadora__resultado {
    font-size: var(--text-lg);
    output { font-family: var(--fuente-titulos); font-size: var(--text-bloque); font-variant-numeric: tabular-nums; }
  }
  .fuentes { display: grid; gap: 0.5rem; padding-inline-start: 1.25rem; font-size: var(--text-sm); }

  /* Firma del equipo al final del texto */
  .firma {
    display: flex; gap: var(--space-md); align-items: start;
    margin-block-start: var(--space-2xl);
    img { flex: none; inline-size: 4rem; block-size: 4rem; padding: 0.5rem; object-fit: contain; background: var(--color-papel); border-radius: 50%; }
  }
}