@layer primitivas {
  /* Primitivas que nunca están en la primera pantalla: salen del CSS crítico (presupuesto de 5 KB gzip) y llegan con style.css.
     Siguen en la capa primitivas, así el orden de la cascada no cambia */

  /* Listas */
  .lista-indice {
    list-style: none; counter-reset: indice; display: grid; gap: var(--space-md);
    > li { counter-increment: indice; display: flex; align-items: baseline; gap: 1rem; color: var(--color-texto-suave); }
    > li::before { content: counter(indice, decimal-leading-zero); flex: none; font-family: var(--fuente-titulos); font-size: var(--text-item); color: var(--color-texto); }
    &.lista-indice--guion > li::before { content: "—"; color: var(--color-texto-suave); }
  }
  /* Pasos sobre una línea vertical con un punto por paso. Completa y oscura por defecto;
     movimiento.css la rellena al hacer scroll donde hay soporte (ref. 21st "Scroll animated timeline").
     Sin número delante del título (Ana, 30-oct: "los textos con números no me gustan"): el orden lo dan la línea y el <ol> */
  .lista-pasos {
    --sangria: clamp(2rem, 4vw, 3.5rem);
    position: relative; list-style: none; display: grid; gap: var(--space-xl);
    padding-inline-start: var(--sangria);
    &::before, &::after { content: ""; position: absolute; inset-block: 0.6em 0.6em; inset-inline-start: 0.3125rem; inline-size: 1px; background: var(--color-linea); }
    &::after { background: var(--color-texto); transform-origin: top; }
    > li { position: relative; display: grid; gap: var(--space-sm); }
    > li::before {
      content: ""; position: absolute; inset-inline-start: calc(var(--sangria) * -1); inset-block-start: 0.45em;
      inline-size: 0.6875rem; block-size: 0.6875rem; border-radius: 50%; background: var(--color-texto); box-shadow: 0 0 0 4px var(--fondo-banda, var(--color-fondo));
    }
    p { color: var(--color-texto-suave); max-width: 36rem; }
  }

  /* Lista con marca dibujada (SVG en máscara): check para lo que sí, cruz apagada para lo que no (ref. 21st "Us vs Them") */
  .lista-marcas {
    list-style: none; display: grid; gap: var(--space-md);
    > li { display: flex; align-items: baseline; gap: 0.875rem; }
    > li::before {
      content: ""; flex: none; inline-size: 1.125rem; block-size: 1.125rem; translate: 0 0.2em; background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    &.lista-marcas--no { color: var(--color-texto-suave); > li::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 5l8 8M13 5l-8 8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } }
  }

  /* Bloque con fondo y aire propio (paneles de "¿Es para ti?") */
  .panel {
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
    &.panel--claro { background: var(--color-fondo); border: 1px solid var(--color-linea); }
    &.panel--apagado { border: 1px dashed var(--color-piedra-oscura); }
  }
  /* Ficha técnica (reemplaza a .fichas, 30-oct: Ana dijo que parecían botones). <dl> con filas de línea fina, como la hoja
     de especificaciones de una joya: rótulo a la izquierda y valores en texto corrido separados por un punto medio.
     subgrid alinea la columna de rótulos entre filas sin fijar su ancho */
  .ficha {
    display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-lg);
    border-block-end: 1px solid var(--color-linea);
    > div {
      grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start;
      padding-block: var(--space-md); border-block-start: 1px solid var(--color-linea);
    }
    dt { font-size: var(--text-etiqueta); font-weight: 500; line-height: 1.8; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    /* Rol de dato, no de lectura: un paso bajo el párrafo (13 px) para que la jerarquía párrafo > ficha se vea sin leer.
       Va en color de texto, no suave, para no perder contraste a ese tamaño (30-oct-2026) */
    dd { font-size: var(--text-sm); line-height: 1.5; }
    /* Cada valor salta de línea entero (inline-block) y el punto queda al final de la línea, nunca al inicio */
    span { display: inline-block; }
    span:not(:last-child)::after { content: "·" / ""; margin-inline: 0.5em; color: var(--color-texto-suave); }
  }

  /* Lista editorial de enlaces (inspiración del 29-oct, "treatment list"): cada fila es un enlace a toda su anchura,
     con líneas finas entre filas y la flecha en un círculo. Un solo enlace por fila, un solo tabulador */
  .lista-enlaces {
    list-style: none; border-block-start: 1px solid var(--color-linea);
    > li {
      position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-xs) var(--space-lg);
      padding-block: var(--space-lg); border-block-end: 1px solid var(--color-linea);
    }
    h3 { grid-column: 1; }
    h3 a::after { content: ""; position: absolute; inset: 0; }
    p { grid-column: 1; color: var(--color-texto-suave); }
    > li::after {
      content: "→" / ""; grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center;
      inline-size: 2.75rem; aspect-ratio: 1; border: 1px solid var(--color-linea); border-radius: 50%;
      transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion), translate var(--transicion);
    }
    > li:has(a:focus-visible) { outline: 2px solid var(--color-texto); outline-offset: 4px; }
    a:focus-visible { outline: none; }
    @media (hover: hover) and (pointer: fine) {
      h3 { transition: translate var(--transicion); }
      > li:hover h3 { translate: 0.375rem 0; }
      > li:hover::after { background: var(--color-texto); border-color: var(--color-texto); color: var(--color-fondo); }
    }
  }

  /* Valoración con estrellas dibujadas (máscara SVG, sin glifos) y su fuente al lado */
  .valoracion {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm);
    &::before {
      content: ""; inline-size: 5.5rem; block-size: 1rem; background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 1l2.35 4.76 5.25.77-3.8 3.7.9 5.23L9 13l-4.7 2.46.9-5.23-3.8-3.7 5.25-.77z'/%3E%3C/svg%3E") left / 1.125rem 1rem repeat-x;
    }
    strong { font-family: var(--fuente-titulos); font-size: var(--text-item); font-weight: 400; }
  }

  /* Datos en <dl> */
  .datos {
    display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    dt { font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); margin-block-end: var(--space-xs); }
  }


  /* Testimonio: texto en Montserrat y la firma en Playfair itálica (.firma en el footer) */
  .nota {
    border-inline-start: 1px solid var(--color-linea); padding-inline-start: var(--space-lg);
    > p { color: var(--color-texto-suave); }
    > footer { margin-block-start: var(--space-md); }
    /* Testimonio destacado (inspiración del 29-oct): tarjeta clara aguamarina con la cita grande; en la banda oscura recupera los colores claros */
    &.nota--destacada {
      --color-texto: #000; --color-texto-suave: #3F5A53;
      border: 0; padding: clamp(1.5rem, 1rem + 3vw, 4rem); background: var(--color-agua); color: var(--color-texto);
      /* La cita destacada es un testimonio completo (unas 40 palabras), no una frase de cartel: a tamaño de sección
         (28-40 px) ocupaba 8 a 10 líneas en el celular. Pasa a --text-item (18-20 px): sigue en Playfair y sobre la tarjeta
         aguamarina, así que se distingue de las demás notas sin gritar (feedback de Ana, 30-oct-2026) */
      > p { color: var(--color-texto); font-size: var(--text-item); line-height: 1.5; letter-spacing: 0; }
    }
  }

  /* Muestrario de las guías (feedback de Ana: "ejemplos visuales para que no sea tanto texto"): dibujos de línea en SVG
     (_includes/diagramas/, generados por diagramas.py) o fotos reales, cada uno con su nombre en texto debajo */
  /* Filas completas (Ana, 30-oct: "en columnas para que no quede ese espacio tan vacío"): --columnas sale del número de piezas
     (8 → 4 + 4 en celular y 8 en una fila en computador; 7 → 4 + 3 y 7; 5 → 3 + 2; 11 → 3 + 3 + 3 + 2 en celular y 6 + 5 en computador), y la fila incompleta se centra */
  .muestrario {
    --columnas: 4; --hueco: var(--space-md);
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) var(--hueco);
    padding: var(--space-lg); background: var(--color-agua);
    &:has(> li:nth-child(3):last-child), &:has(> li:nth-child(5):last-child), &:has(> li:nth-child(11):last-child) { --columnas: 3; }
    &:has(> li:only-child) { --columnas: 1; }
    @media (min-width: 48rem) {
      &:has(> li:nth-child(5):last-child) { --columnas: 5; }
      &:has(> li:nth-child(7):last-child) { --columnas: 7; }
      &:has(> li:nth-child(8):last-child) { --columnas: 8; }
      &:has(> li:nth-child(11):last-child) { --columnas: 6; }
    }
    > li {
      flex: 0 0 calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas)); min-inline-size: 0;
      display: grid; justify-items: center; align-content: start; gap: var(--space-sm); text-align: center; font-size: var(--text-sm); line-height: 1.4; color: var(--color-texto-suave);
    }
    svg {
      inline-size: 100%; max-inline-size: 6rem; block-size: auto;
      fill: none; stroke: var(--color-texto); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round;
    }
    .relleno { fill: var(--color-fondo); }
    /* En miniaturas, el crédito del fotógrafo va debajo de la foto: encima taparía media joya */
    .figura--credito img { block-size: auto; }
    .credito { position: static; display: block; padding: var(--space-xs) 0 0; background: var(--color-agua); color: var(--color-texto-suave); }
    /* Fotos reales: una por metal, cuadradas, con el nombre a la izquierda; 2 + 2 en celular */
    &.muestrario--fotos {
      &:has(> li:nth-child(4):last-child) { --columnas: 2; @media (min-width: 48rem) { --columnas: 4; } }
      > li { justify-items: stretch; text-align: start; }
    }
    /* Ilustraciones de Ana con fondo transparente (acabados, anchos): enteras, sin recorte, sobre el aguamarina.
       2 por fila en celular y 4 + 4 en computador; una sola ocupa todo el ancho */
    &.muestrario--ilustraciones {
      --hueco: var(--space-lg);
      &:has(> li:nth-child(2)) { --columnas: 2; @media (min-width: 48rem) { &:has(> li:nth-child(8):last-child) { --columnas: 4; } } }
      > li { justify-items: stretch; }
      .figura { background: none; }
      /* revert-layer devuelve la proporción de los atributos width y height de cada ilustración (la de .figura la fija en 3/2) */
      img { block-size: auto; aspect-ratio: revert-layer; object-fit: contain; }
    }
    /* Dibujos de línea de Ana (tallas de piedra y engastes, 5-nov): todos del mismo alto, como iconos con su nombre debajo */
    &.muestrario--dibujos {
      .figura { background: none; }
      img { inline-size: auto; max-inline-size: 100%; block-size: clamp(3.5rem, 2.5rem + 3vw, 5rem); aspect-ratio: revert-layer; object-fit: contain; }
    }
  }
}

@layer componentes {
  /* Tarjeta: el enlace del título se extiende a toda la tarjeta (un solo enlace, un solo tabulador) */
  .tarjeta {
    position: relative; display: grid; gap: var(--space-md); align-content: start;
    :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
    &:hover img { transform: scale(1.012); }
    &:has(a:focus-visible) { outline: 2px solid var(--color-texto); outline-offset: 6px; }
    a:focus-visible { outline: none; }
    /* Tarjeta de guía con fondo propio (ref. 21st "Article" / "Reveal on hover"): al pasar el cursor el fondo
       toma el gris de la marca, la foto se acerca y la flecha avanza. La profundidad indica que es clicable (04-textura) */
    &.tarjeta--panel {
      gap: 0; background: var(--color-fondo);
      transition: background-color var(--transicion), translate var(--transicion), box-shadow var(--transicion);
      > .flujo { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
      .figura img { transition: transform var(--transicion-lenta); }
      &:hover { background: var(--color-piedra); translate: 0 -3px; box-shadow: 0 14px 30px -20px rgb(0 0 0 / 0.35); }
      &:hover .figura img { transform: scale(1.04); }
      &:hover .enlace-flecha::after { transform: translateX(4px); }
    }
  }
}

@layer componentes {
  /* Catálogo visual sin precio ni carrito. Filtros con radios nativos + :has(), sin JS.
     Todas las piezas están en el HTML; las que no son destacadas (.es-extra) se ven al filtrar o al marcar "Ver todas". */
  /* Filtros como fichas en minúscula de 13 px (feedback de Ana: "la tipografía se ve muy grande"; inspiración del 29-oct) */
  .catalogo__filtros {
    display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-block-end: var(--space-xl);
    fieldset { border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
    legend {
      float: inline-start; margin-inline-end: var(--space-sm);
      font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave);
    }
    label {
      font-size: var(--text-sm); line-height: 1.5; padding: 0.5rem 0.875rem; background: var(--color-crema); cursor: pointer;
      transition: background-color var(--transicion), color var(--transicion);
      @media (hover: hover) and (pointer: fine) { &:hover { background: var(--color-piedra); } }
    }
    input:checked + label { background: var(--color-texto); color: var(--color-fondo); }
    input:focus-visible + label { outline: 2px solid var(--color-texto); outline-offset: 3px; }
  }
  .catalogo__piezas {
    list-style: none; display: grid; gap: var(--space-lg) var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    > li { display: grid; gap: var(--space-sm); align-content: start; }
    p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-texto-suave); }
    .enlace-flecha { letter-spacing: 0.12em; }
  }
  .catalogo__todas { margin-block-start: var(--space-xl); text-align: center; }
  .catalogo__ampliar { display: block; cursor: zoom-in; }

  /* Visor de la pieza: <dialog> nativo (foco, Esc y capa sin JS propio); entrada con @starting-style (receta 4.8) */
  .visor {
    margin: auto; padding: 0; border: 0; inline-size: min(52rem, 100% - 2rem); max-block-size: calc(100dvh - 2rem);
    background: var(--color-fondo); color: var(--color-texto);
    opacity: 0; translate: 0 0.75rem; scale: 0.98;
    transition: opacity 250ms, translate 250ms, scale 250ms, overlay 250ms allow-discrete, display 250ms allow-discrete;
    &[open] { opacity: 1; translate: 0 0; scale: 1; }
    @starting-style { &[open] { opacity: 0; translate: 0 0.75rem; scale: 0.98; } }
    &::backdrop { background: rgb(0 0 0 / 0.6); opacity: 0; transition: opacity 250ms, overlay 250ms allow-discrete, display 250ms allow-discrete; }
    &[open]::backdrop { opacity: 1; }
    @starting-style { &[open]::backdrop { opacity: 0; } }
    img { width: 100%; height: auto; max-block-size: 68dvh; object-fit: contain; background: var(--color-piedra); }
    p { color: var(--color-texto-suave); }
  }
  .visor__contenido { padding: var(--space-lg); }
  .catalogo {
    /* Sin filtro ni "Ver todas", solo las destacadas */
    &:not(:has(.catalogo__filtros input:checked:not([value=""]), .catalogo__todas input:checked)) .es-extra { display: none; }
    &:has(.catalogo__filtros input:checked:not([value=""])) .catalogo__todas { display: none; }
    &:has([value="oro-blanco"]:checked) .catalogo__piezas > li:not([data-metal~="oro-blanco"]),
    &:has([value="oro-amarillo"]:checked) .catalogo__piezas > li:not([data-metal~="oro-amarillo"]),
    &:has([value="oro-rosado"]:checked) .catalogo__piezas > li:not([data-metal~="oro-rosado"]),
    &:has([value="platino"]:checked) .catalogo__piezas > li:not([data-metal~="platino"]),
    &:has([value="plata"]:checked) .catalogo__piezas > li:not([data-metal~="plata"]),
    &:has([value="diamante"]:checked) .catalogo__piezas > li:not([data-piedra~="diamante"]),
    &:has([value="esmeralda"]:checked) .catalogo__piezas > li:not([data-piedra~="esmeralda"]),
    &:has([value="zafiro"]:checked) .catalogo__piezas > li:not([data-piedra~="zafiro"]),
    &:has([value="color"]:checked) .catalogo__piezas > li:not([data-piedra~="color"]) { display: none; }
  }
}

@layer componentes {
  /* Acordeón de <details>: abre y cierra sin JS */
  .acordeon {
    border-block-start: 1px solid var(--color-linea);
    details { border-block-end: 1px solid var(--color-linea); }
    summary {
      display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg);
      padding-block: var(--space-lg); cursor: pointer; list-style: none;
      &::-webkit-details-marker { display: none; }
      &::after { content: "+"; flex: none; font-family: var(--fuente-titulos); font-size: var(--text-item); line-height: 1; transition: transform var(--transicion); }
    }
    details[open] summary::after { transform: rotate(45deg); }
    details > :not(summary) { max-width: var(--ancho-texto); padding-block-end: var(--space-lg); color: var(--color-texto-suave); }
  }
}

@layer componentes {
  /* Tabla de datos (tallas, quilates): se desplaza en horizontal dentro de su caja en móvil, nunca la página */
  .tabla {
    overflow-x: auto;
    table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
    caption { caption-side: top; text-align: start; padding-block-end: var(--space-sm); color: var(--color-texto-suave); }
    th, td { padding: var(--space-sm); border-block-end: 1px solid var(--color-linea); text-align: start; white-space: nowrap; }
    thead th { white-space: normal; font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase; color: var(--color-texto-suave); }
    tbody th { font-weight: 500; }
  }
}

@layer componentes {
  /* Movimiento (skill interactividad-wow-seo; referencias visuales de 21st.dev reescritas sin dependencias).
     Todo es mejora progresiva: sin soporte o con prefers-reduced-motion, la página se ve completa y quieta.
     Nunca se anima texto ni el hero. Plan: _plans/estrategia/03-DIRECCION-DISENO.md §3 */

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* Firma de la home: la foto del panel gris se abre con una máscara y se asienta (ref. 21st "Mask Reveal").
         Usa `scale` y no `transform`, para no chocar con el zoom de .figura al pasar el cursor */
      .superpuesto > .figura img { animation: revelar linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    }
    /* Collage de historias: cada foto entra un poco después que la anterior (receta 4B.2), sin style= gracias a sibling-index() */
    @supports (animation-timeline: view()) and (width: calc(sibling-index() * 1px)) {
      .rejilla--escalonada > * { animation: aparecer linear both; animation-timeline: view(); animation-range: entry calc(sibling-index() * 8%) cover calc(25% + sibling-index() * 8%); }
    }
    /* Filtro del catálogo: las piezas se reacomodan al filtrar (ref. 21st "Filter Grid"); el JS envuelve el cambio en startViewTransition */
    @supports (view-transition-name: match-element) {
      .catalogo__piezas > li { view-transition-name: match-element; }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* Pasos: la línea se rellena mientras se recorre la lista y cada punto se marca al llegar a su paso.
         Solo se animan la línea y los puntos; el texto de los pasos está siempre visible */
      .lista-pasos { view-timeline: --pasos block; }
      /* La línea avanza mientras la lista cruza el centro de la pantalla; cada punto se marca cuando su paso pasa por el centro */
      .lista-pasos::after { animation: trazar linear both; animation-timeline: --pasos; animation-range: cover 25% cover 70%; }
      .lista-pasos > li { view-timeline: --paso block; }
      .lista-pasos > li::before { animation: marcar-paso linear both; animation-timeline: --paso; animation-range: cover 42% cover 52%; }
      /* "¿Es para ti?": las marcas aparecen una tras otra (son decorativas: el texto no se anima) */
      .lista-marcas > li::before { animation: aparecer-marca linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
    }
  }
  /* Guías: cada dibujo del muestrario se traza al entrar en pantalla (interacción firma de las guías).
     Solo el trazo: el relleno y el nombre de cada ítem se ven siempre, y sin soporte el dibujo aparece completo */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .muestrario > li { view-timeline: --dibujo block; }
      .muestrario svg [pathLength] { stroke-dasharray: 1; animation: dibujar linear both; animation-timeline: --dibujo; animation-range: entry 0% entry 90%; }
    }
  }
  @keyframes dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes trazar { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes marcar-paso { from { background: var(--color-piedra-oscura); scale: 0.6; } to { background: var(--color-texto); scale: 1; } }
  @keyframes aparecer-marca { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

  @keyframes revelar { from { clip-path: inset(9% 9% 9% 9%); scale: 1.06; } to { clip-path: inset(0); scale: 1; } }
  @keyframes aparecer { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }

  /* Destello del botón verde: un barrido de luz que pasa una vez al pasar el cursor (ref. 21st "Shimmer Button", sin bucle) */
  .boton--acento {
    position: relative; overflow: hidden; isolation: isolate;
    &::before {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.5) 50%, transparent 62%);
      translate: -120% 0;
    }
    &:is(:hover, :focus-visible)::before { translate: 120% 0; transition: translate 700ms cubic-bezier(0.2, 0.6, 0.2, 1); }
  }

  /* Cinta de publicaciones (receta 4B.9, ref. 21st "Logo Marquee"). Quieta por defecto: fila con scroll y sin la copia visual */
  .cinta { display: grid; gap: var(--space-md); }
  .cinta__control { justify-self: end; cursor: pointer; }
  .cinta__ventana { overflow-x: auto; scrollbar-width: thin; }
  .cinta__pista {
    display: flex; gap: var(--space-lg); padding-inline-end: var(--space-lg); width: max-content;
    > li { flex: none; display: grid; gap: var(--space-sm); align-content: start; }
    > li[aria-hidden="true"] { display: none; }
    /* Caja fija y la portada entera dentro (contain), apoyada abajo: ninguna se recorta y la fila queda pareja */
    .figura { background: none; }
    .figura img { inline-size: clamp(9rem, 7rem + 5vw, 12rem); block-size: clamp(11rem, 8.5rem + 6vw, 15rem); aspect-ratio: auto; object-fit: contain; object-position: bottom left; }
    p { max-width: 12rem; color: var(--color-texto-suave); }
    strong { color: var(--color-texto); font-weight: 500; }
  }
  .cinta__pausa:focus-visible + .cinta__control { outline: 2px solid var(--color-texto); outline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    .cinta__ventana { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
    .cinta__pista { animation: desfilar 50s linear infinite; > li[aria-hidden="true"] { display: grid; } }
    .cinta:is(:hover, :focus-within, :has(.cinta__pausa:checked)) .cinta__pista { animation-play-state: paused; }
  }
  @media (prefers-reduced-motion: reduce) { .cinta__control { display: none; } }
  @keyframes desfilar { to { translate: -50% 0; } }
}

@layer componentes {
  .pie-sitio {
    background: var(--color-piedra); padding-block: var(--space-2xl) var(--space-xl);
    img { width: clamp(12rem, 10rem + 4vw, 15rem); }
    ul { list-style: none; display: grid; gap: 0.75rem; }
    li { font-size: var(--text-sm); }
    ul a { text-decoration: none; color: var(--color-texto-suave); transition: color var(--transicion); &:hover { color: var(--color-texto); } }
    address { font-style: normal; }
  }
  .pie-sitio__rejilla {
    display: grid; gap: var(--space-xl) var(--space-lg);
    padding-block-end: var(--space-xl); border-block-end: 1px solid var(--color-piedra-oscura);
    @media (min-width: 48rem) { grid-template-columns: 6fr 3fr 3fr; }
  }
  .pie-sitio__lema { font-family: var(--fuente-titulos); font-style: italic; font-size: var(--text-item); line-height: 1.5; color: var(--color-texto-suave); max-width: 26rem; }
  .pie-sitio__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-lg);
    padding-block-start: var(--space-lg); font-size: var(--text-sm); color: var(--color-texto-suave);
    a { text-decoration: none; &:hover { color: var(--color-texto); } }
  }
}

@layer componentes {
  .whatsapp-flotante {
    position: fixed; inset: auto clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) auto; z-index: 30;
    display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem;
    background: var(--color-texto); color: var(--color-fondo); text-decoration: none;
    font-size: var(--text-etiqueta); font-weight: 500; letter-spacing: var(--tracking-ancho); text-transform: uppercase;
    box-shadow: 0 16px 40px -12px rgb(18 19 20 / 0.35);
    transition: opacity var(--transicion), transform var(--transicion), background-color var(--transicion);
    /* Logo de WhatsApp (svg, en el flujo) y su latido (::after, superpuesto) */
    svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--color-acento); transition: color var(--transicion); }
    &::after {
      content: ""; position: absolute; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--color-acento);
      inset-inline-start: 1.5rem; inset-block-start: calc(50% - 0.75rem);
      opacity: 0.5; animation: latido 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; pointer-events: none;
    }
    &:hover { background: var(--color-acento); color: var(--color-sobre-marca); transform: scale(1.03); svg { color: inherit; } }
    &.es-oculto { opacity: 0; transform: translateY(1rem); pointer-events: none; }
    @media (max-width: 40rem) {
      padding: 1rem;
      &::after { inset-inline-start: 1rem; }
      span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    }
  }
  @keyframes latido { 75%, 100% { transform: scale(1.9); opacity: 0; } }
}

@layer componentes {
  /* Buscador del sitio: <dialog> y página /buscar/ (_includes/buscador-*.html, buscar.html, js/buscador.js).
     Kit de metodo-web con los tokens de base.css: esquinas rectas, fichas grises como los filtros del catálogo
     y ningún verde fuera del botón de WhatsApp. La lupa de la barra secundaria va en critical-css/cabecera.css. */
  html:has(.buscador[open]) { overflow: hidden; }

  .buscador {
    inline-size: min(45rem, 100% - 2rem);
    max-block-size: min(42.5rem, 100dvh - 6rem);
    margin: 4.5rem auto auto;
    border: 1px solid var(--color-linea);
    background: var(--color-fondo);
    color: var(--color-texto);
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.35);
    overflow: hidden;
    &[open] { display: flex; flex-direction: column; }
    &::backdrop { background: rgb(0 0 0 / 0.45); }
    @media (max-width: 47.99rem) {
      inline-size: 100%;
      max-inline-size: 100%;
      block-size: 100dvh;
      max-block-size: 100dvh;
      margin: 0;
      border: 0;
    }
    .buscador-panel { overflow-y: auto; padding: var(--space-sm) 1.25rem var(--space-lg); }
  }

  .buscador-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-block-end: 1px solid var(--color-linea);
    color: var(--color-texto-suave);
    svg { flex: none; }
    input {
      flex: 1;
      min-inline-size: 0;
      padding-block: 0.375rem;
      border: 0;
      background: none;
      font-size: var(--text-item);
      line-height: 1.4;
      color: var(--color-texto);
      &:focus, &:focus-visible { outline: none; }
      &::-webkit-search-cancel-button { cursor: pointer; }
    }
    &:has(input:focus-visible) { box-shadow: inset 0 -2px 0 var(--color-texto); }
  }

  .buscador-form__cerrar {
    flex: none;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-linea);
    font-size: var(--text-etiqueta);
    font-weight: 500;
    letter-spacing: var(--tracking-ancho);
    text-transform: uppercase;
    color: var(--color-texto-suave);
    &:hover { color: var(--color-texto); border-color: var(--color-texto); }
  }

  .buscador-panel .etiqueta { margin-block: 1.25rem 0.625rem; }

  .buscador-panel__estado {
    margin-block: var(--space-md) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-texto-suave);
    &:empty { display: none; }
  }

  .buscador-chips,
  .buscador-enlaces,
  .buscador-resultados { list-style: none; }

  /* Búsquedas populares: fichas como los filtros del catálogo (13 px en minúscula, fondo gris) */
  .buscador-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    a {
      display: inline-block;
      padding: 0.5rem 0.875rem;
      background: var(--color-crema);
      font-size: var(--text-sm);
      line-height: 1.5;
      text-decoration: none;
      transition: background-color var(--transicion);
      &:hover { background: var(--color-piedra); }
    }
  }

  .buscador-enlaces { display: grid; gap: 0.75rem; }

  /* Filtros por tipo: radios; js/buscador.js oculta los resultados de otros tipos */
  .buscador-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-end: var(--space-sm);
    border: 0;
    &[hidden] { display: none; }
    label {
      padding: 0.25rem 0.75rem;
      background: var(--color-crema);
      font-size: var(--text-sm);
      cursor: pointer;
      &[hidden] { display: none; }
      &:has(:checked) { background: var(--color-texto); color: var(--color-fondo); }
      &:has(:focus-visible) { outline: 2px solid var(--color-texto); outline-offset: 3px; }
    }
    input { position: absolute; opacity: 0; pointer-events: none; }
    span { opacity: 0.7; }
  }

  .buscador-resultados {
    display: grid;
    gap: var(--space-xs);
    [hidden] { display: none; }
  }

  :is(.buscador-resultado, .buscador-promo) a {
    display: grid;
    gap: var(--space-xs);
    padding: 0.75rem 0.875rem;
    margin-inline: -0.875rem;
    text-decoration: none;
    &:hover, &:focus-visible { background: var(--color-crema); }
  }

  .buscador-resultado__tipo {
    font-size: var(--text-etiqueta);
    font-weight: 500;
    letter-spacing: var(--tracking-ancho);
    text-transform: uppercase;
    color: var(--color-texto-suave);
  }

  .buscador-resultado__titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--text-item);
    line-height: 1.25;
  }

  .buscador-resultado__extracto {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-texto-suave);
    mark { background: var(--color-piedra); color: var(--color-texto); }
  }

  .buscador-promo {
    margin-block-end: var(--space-sm);
    a {
      margin-inline: 0;
      border: 1px solid var(--color-linea);
      background: var(--color-crema);
      &:hover, &:focus-visible { border-color: var(--color-texto); }
      .buscador-resultado__titulo::after { content: " →" / ""; }
    }
  }

  :is(.buscador-cta, .buscador-vacio) {
    padding: var(--space-md) 1.125rem;
    background: var(--color-crema);
  }

  .buscador-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block: var(--space-sm);
    p { flex: 1 1 16rem; font-size: var(--text-sm); }
  }

  .buscador-vacio {
    display: grid;
    gap: 0.75rem;
    margin-block-start: var(--space-md);
    &[hidden] { display: none; }
    .boton { justify-self: start; }
    .buscador-chips a { background: var(--color-fondo); }
  }

  .buscador-vacio__titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--text-item);
  }

  .buscador-todos {
    margin-block-start: 0.75rem;
    &:has(> [hidden]) { display: none; }
  }

  /* /buscar/ */
  .buscador-pagina {
    inline-size: min(52rem, 100% - 2 * var(--margen-lateral));
    margin: var(--space-xl) auto var(--space-2xl);
    h1 { margin-block-end: var(--space-lg); }
    .buscador-form { border: 1px solid var(--color-linea); }
  }

  .buscador-pagina__sin-js { margin-block-start: var(--space-md); }
}