/* =========================================================================
   BLOQUES DE CONTENIDO — breadcrumbs, FAQ, confianza, por qué, pasos,
   testimonios y CTA de contacto

   Componentes de contenido compartidos entre la Home y la vista de categoría
   (group_nvl_content_blocks). No llevan lógica de compra.

   Parte de la cadena de hojas de componentes. El ORDEN DE CASCADA lo
   garantiza la cadena de dependencias declarada en inc/assets.php: ninguna
   vista encola estas hojas directamente, todas dependen del handle
   'nvl-components', que cierra la cadena. Mover una regla de archivo puede
   cambiar qué gana; mover un archivo de sitio en la cadena, también.

   Mobile-first. Todo valor visual es token var(--nvl-*).
   ========================================================================= */

/* --- Prosa del editor (.nvl-prose) ---------------------------------------
   Dueño único del aspecto del texto enriquecido que escribe el owner. Hoy lo
   usa la descripción de la ficha, que es la ÚNICA fuente descriptiva del
   producto (campo ACF wysiwyg, acf-json/group_nvl_product_base.json).

   LOS ENCABEZADOS NO LLEVAN REGLA, Y ES DECISIÓN DEL OWNER (2026-10-26). Hasta
   esa fecha no podían existir: la barra era la `basic` de ACF —el toolbar teeny
   del núcleo, sin desplegable de formato—, así que aquí no había reglas para
   ellos porque habrían sido código muerto. Era falso desde el primer pegado,
   que sí los traía. Hoy el campo tiene desplegable de formato (Título 2, 3 y 4)
   y los atajos «## » del núcleo, ambos en inc/acf.php, de modo que el editor
   los produce de verdad. El owner revisó cómo se ven con la tipografía por
   defecto del navegador, le gustó y pidió expresamente no tocarlo: darles aquí
   una escala propia cambiaría el aspecto de productos ya publicados.

   Los elementos no llevan clase: los genera el editor, así que se seleccionan
   por etiqueta dentro del bloque. Es la excepción justificada a la regla de
   nomenclatura — no hay markup propio que clasear.

   DEUDA CONOCIDA: .nvl-legal__content y .nvl-thanks__content (nvl-legal.css)
   tienen reglas equivalentes. Lo correcto es que adopten .nvl-prose y conserven
   solo su escala de encabezados, pero eso cambia la tipografía de páginas
   legales ya publicadas y es un trabajo con su propia verificación. */

.nvl-prose {
    color: var(--nvl-color-text-primary);
    line-height: var(--nvl-leading-relaxed);
}

/* Ritmo por hermanos y no por márgenes sueltos: el primer y el último elemento
   nunca aportan hueco, así que el bloque encaja donde se le ponga. */
.nvl-prose > * {
    margin-block: 0;
}

.nvl-prose > * + * {
    margin-block-start: var(--nvl-space-sm);
}

/* La negrita es el recurso con el que el owner rotula las especificaciones
   ("Nivel:", "Temperatura:"), así que hace de subtítulo dentro del párrafo: se
   le da la tinta del titular para que separe la etiqueta del valor de un
   vistazo, sin necesidad de encabezados. */
.nvl-prose strong {
    font-weight: var(--nvl-weight-bold);
    color: var(--nvl-color-secondary);
}

.nvl-prose ul,
.nvl-prose ol {
    padding-inline-start: var(--nvl-space-md);
}

.nvl-prose li + li {
    margin-block-start: var(--nvl-space-3xs);
}

.nvl-prose a {
    color: var(--nvl-color-primary-dark);
    text-decoration: underline;
}

/* Cita del editor: filo lateral en lugar de comillas tipográficas, mismo idioma
   visual que el resto del tema. */
.nvl-prose blockquote {
    margin-inline: 0;
    padding-inline-start: var(--nvl-space-sm);
    border-inline-start: var(--nvl-border-accent) solid var(--nvl-color-border);
    color: var(--nvl-color-text-primary); /* sube de la tinta secundaria: sobre banda, el #64748b oficial da 4.36:1 — cita sobre banda */
}

/* --- Prosa sobre banda oscura (owner, 2026-09-22) -------------------------
   La usa la sección de descripción de la ficha (.nvl-product-story). Todo lo de
   arriba da por hecho fondo claro, y sobre --nvl-color-secondary cada una de
   esas tintas falla: la negrita se volvería del color del fondo (1:1,
   invisible), el enlace caería a 2.19:1 y el filo de la cita se perdería.

   No se inventan colores: se usan la superficie y la tinta inversa que el tema
   ya tiene para sus bandas oscuras. */

.nvl-prose--inverse {
    color: var(--nvl-color-text-inverse-muted); /* 12.02:1 sobre la banda, medido */
}

/* La negrita rotula especificaciones («Nivel:», «Temperatura:»): sube a blanco
   puro, 17.85:1, para que siga separando etiqueta y valor de un vistazo. */
.nvl-prose--inverse strong {
    color: var(--nvl-color-surface);
}

.nvl-prose--inverse :is(h1, h2, h3, h4, h5, h6) {
    color: var(--nvl-color-surface);
}

/* Subrayado SIEMPRE, no solo el color: sobre banda el enlace no puede
   distinguirse únicamente por tinta (WCAG 1.4.1). */
.nvl-prose--inverse a {
    color: var(--nvl-color-surface);
    text-decoration: underline;
}

.nvl-prose--inverse blockquote {
    border-inline-start-color: var(--nvl-color-text-inverse-muted);
    color: var(--nvl-color-text-inverse-muted);
}

/* --- Breadcrumbs (components/breadcrumbs.php) ---------------------------- */

/* Ritmo vertical (auditoría ui-ux §8.3): md entre el bloque anterior (hero o
   cabecera) y las migas, lg → xl entre las migas y el contenido siguiente. */
.nvl-breadcrumbs {
    margin-top: var(--nvl-space-md);
    margin-bottom: var(--nvl-space-lg);
}

@media (min-width: 768px) {
    .nvl-breadcrumbs {
        margin-bottom: var(--nvl-space-xl);
    }
}

.nvl-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvl-space-3xs);
    list-style: none;
    font-size: var(--nvl-text-sm);
}

.nvl-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--nvl-space-3xs);
}

.nvl-breadcrumbs__item:not(:last-child)::after {
    content: "/";
    color: var(--nvl-color-border-hover);
}

.nvl-breadcrumbs__link {
    color: var(--nvl-color-text-primary); /* sube de la tinta secundaria: sobre banda, el #64748b oficial da 4.36:1 — miga de pan sobre banda */
    text-decoration: none;
}

.nvl-breadcrumbs__link:hover {
    color: var(--nvl-color-primary);
    text-decoration: underline;
}

.nvl-breadcrumbs__current {
    color: var(--nvl-color-text-primary);
    font-weight: var(--nvl-weight-bold);
}

/* --- FAQ -------------------------------------------------------------- */

/* El tope de lectura es del COMPONENTE, no opcional (owner, 2026-10-18). Antes
   vivía en .nvl-faq--narrow (nvl-home.css) y solo la Home lo pasaba, así que en
   categoría las preguntas se leían a 1320px. Una pregunta a ese ancho no es una
   línea de lectura, es un renglón de tabla. --nvl-measure son 65ch, que con
   Poppins a 16px dan ~653px: a un 4% de los 680px de la referencia, y el token
   sigue a la tipografía en vez de congelar un píxel. */
.nvl-faq__list {
    display: grid;
    gap: var(--nvl-space-xs);
    max-inline-size: var(--nvl-measure);
    margin-inline: auto;
}

/* LA RESPUESTA SE DESPLIEGA, NO SALTA (owner, 2026-10-18, tomando como
   referencia offer.soothinghome.com). Aquella lo hace con max-height a
   scrollHeight y ~30 líneas de JS; aquí se interpola el ALTO REAL con
   `interpolate-size` + `::details-content` y CERO JavaScript, así que el
   componente conserva su promesa de funcionar sin JS (components/faq.php).
   Además max-height a un valor adivinado deja una pausa muerta al final, que es
   la peor parte de la referencia; interpolar el alto real no la tiene.

   Esto anima una DIMENSIÓN, que la regla de movimiento del framework prohíbe
   por defecto. Está cubierto por la «excepción de revelación», que es NOMINAL:
   hoy la lista de componentes autorizados es solo .nvl-faq__item. Ver §6 de
   docs/home-especificacion-visual.md antes de copiar esto a otro sitio.

   Donde el navegador no soporte interpolate-size, block-size salta de 0 a auto:
   exactamente el comportamiento que había antes de este cambio. No puede
   empeorar nada.

   `interpolate-size` se declara AQUÍ y nunca en :root: es heredada, y en :root
   habilitaría interpolaciones de palabra clave en todo el tema. */
.nvl-faq__item {
    interpolate-size: allow-keywords;
    background: var(--nvl-color-surface);
    border: var(--nvl-border-hairline) solid var(--nvl-color-border);
    border-radius: var(--nvl-radius-lg);
    overflow: hidden;
    transition: border-color var(--nvl-duration-slow) var(--nvl-ease-standard);
}

/* `clip` y no `hidden`: hidden crearía un contenedor de scroll. clip establece
   contexto de formato de bloque y evita que un margen del contenido se escape
   de la caja que se anima y produzca un tirón de un fotograma al arrancar. */
.nvl-faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size var(--nvl-duration-slow) var(--nvl-ease-standard),
        content-visibility var(--nvl-duration-slow) allow-discrete;
}

.nvl-faq__item[open]::details-content {
    block-size: auto;
}

/* EL ITEM ABIERTO NO CAMBIA DE ASPECTO (owner, 2026-10-19). Ni sombra —retirada
   el 18-oct— ni borde azul, retirado ahora: «hay que eliminarlo por completo».
   Abierto y cerrado se ven igual, como en la referencia.

   Al retirar la sombra escribí que el borde azul se quedaba porque era la única
   señal que sobrevivía en forced-colors. Revisado: no hacía falta. El estado lo
   dicen el PANEL DESPLEGADO —que es contenido real, no color— y el icono girado
   a «×», y el <details> nativo lo anuncia por semántica. No hay dependencia de
   color que corregir (WCAG 1.4.1), ni en colores forzados.

   El hover sí conserva su cambio de borde: una vez fuera las otras dos señales,
   es el único acuse de puntero que le queda a la pregunta. */
@media (hover: hover) and (pointer: fine) {
    .nvl-faq__item:hover {
        border-color: var(--nvl-color-border-hover);
    }
}

.nvl-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvl-space-sm);
    min-height: var(--nvl-tap-min);
    padding: var(--nvl-space-sm) var(--nvl-space-md);
    font-weight: var(--nvl-weight-bold);
    font-size: var(--nvl-text-base);
    cursor: pointer;
    list-style: none;
}

.nvl-faq__question::-webkit-details-marker {
    display: none;
}

.nvl-faq__question:focus-visible {
    outline: var(--nvl-focus-width) solid var(--nvl-focus-color);
    outline-offset: calc(var(--nvl-focus-offset) * -1);
}

/* SIN FONDO AL PULSAR (owner, 2026-10-19): «cada vez que hago clic aparece ese
   fondo grisáceo a todo lo ancho del componente y se ve mal». El título mantiene
   su blanco durante toda la pulsación.

   Esto es una EXCEPCIÓN DELIBERADA a un patrón del tema, no un descuido: el
   recurso `:active { background: var(--nvl-color-background) }` se usa en el
   stepper (nvl-elements.css), en el paso de la línea del carrito (nvl-order.css)
   y en las flechas de la galería (nvl-product.css), y ahí está bien, porque son
   BOTONES CUADRADOS de 44px donde ese gris lee como un botón hundido. Este
   summary es una FILA DE ANCHO COMPLETO: el mismo gris lee como una banda de
   borde a borde, que es otra cosa. No se restaure aquí.

   El acuse de la pulsación son el icono que gira y el panel que se despliega, y
   llegan en el mismo gesto. */

/* EL ICONO ES UN «+» QUE GIRA 45° HASTA LEERSE COMO «×» (owner, 2026-10-18).
   Es el detalle de offer.soothinghome.com que el owner pidió replicar, y
   sustituye al chevron que rotaba 180°.

   Se ROTA EL MISMO ELEMENTO, no se intercambian dos iconos: el sprite tiene
   también `xmark`, pero cambiar de uno a otro sería un salto seco. `transform`
   es lo único que puede interpolar, y es exactamente lo que hace la referencia.
   Al cerrar, este mismo transition devuelve el símbolo a «+» sin una línea más.
   El arte sale del inventario cerrado (components/icon-sprite.php): no se
   añadió ningún icono. */
.nvl-faq__question .nvl-icon {
    flex-shrink: 0;
    color: var(--nvl-color-text-secondary);
    transition: transform var(--nvl-duration-base) var(--nvl-ease-standard);
}

.nvl-faq__item[open] .nvl-faq__question .nvl-icon {
    transform: rotate(45deg);
    color: var(--nvl-color-primary);
}

.nvl-faq__answer {
    padding: 0 var(--nvl-space-md) var(--nvl-space-md);
    color: var(--nvl-color-text-secondary);
    line-height: var(--nvl-leading-relaxed);
}

/* --- Bloques de contenido compartidos: confianza, por qué, pasos ---------
   Contenido, no controles: sin hover, sin cursor, sin sombra de elevación
   (docs/home-especificacion-visual.md §4.5-4.7, §5.4). Usados por la Home y
   por la vista de categoría a través del mismo grupo ACF compartido. */

/* --- Barra de confianza (components/trust-bar.php) -----------------------
   La banda de justo debajo del hero desde el 2026-10-22, replicando la
   referencia que eligió el owner: celda en columna con el icono arriba, el
   titular en negrita y una línea de apoyo apagada, todo centrado. Antes era
   icono AL LADO del texto, sin titular, y vivía después de Destacados.

   EL FILETE INFERIOR ES LO QUE SEPARA, y por eso no es decorativo: la banda es
   blanca y la sección que viene debajo (Categorías) también, así que sin él se
   leerían como una sola superficie. Es exactamente el recurso que usa la
   referencia entre su barra y su pie. Arriba no hace falta: la tinta del hero
   ya corta sola.

   Contrastes sobre los hex reales: el texto apagado da 4.76:1 sobre blanco
   (AA), y el icono en --nvl-color-primary-dark da 5.93:1, muy por encima del
   3:1 que pide un gráfico. */

.nvl-trust-bar {
    background: var(--nvl-color-surface);
    border-block-end: var(--nvl-border-hairline) solid var(--nvl-color-border);
    padding-block: var(--nvl-space-xl);
}

.nvl-trust-bar__list {
    --nvl-trust-cols: 2;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--nvl-trust-cols), minmax(0, 1fr));
    gap: var(--nvl-space-lg);
}

@media (min-width: 768px) {
    .nvl-trust-bar__list {
        --nvl-trust-cols: 4;
    }

    /* Misma doctrina que la parrilla de categorías: la cuenta de columnas es
       una DECISIÓN, no una propiedad emergente, y con menos de cuatro
       elementos no se dejan pistas vacías a la derecha. El campo está topado
       en cuatro, así que estos tres son todos los escenarios que existen.
       Sin soporte de :has() se queda en cuatro columnas, que es el escenario
       normal: ningún respaldo empeora nada. */
    .nvl-trust-bar__list:has(> li:only-child)              { --nvl-trust-cols: 1; }
    .nvl-trust-bar__list:has(> li:nth-child(2):last-child) { --nvl-trust-cols: 2; }
    .nvl-trust-bar__list:has(> li:nth-child(3):last-child) { --nvl-trust-cols: 3; }
}

.nvl-trust-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nvl-space-2xs);
    text-align: center;
}

.nvl-trust-bar__icon {
    width: var(--nvl-space-xl);
    height: var(--nvl-space-xl);
    color: var(--nvl-color-primary-dark);
    flex-shrink: 0;
}

.nvl-trust-bar__title {
    font-size: var(--nvl-text-sm);
    font-weight: var(--nvl-weight-bold);
    line-height: var(--nvl-leading-heading);
    color: var(--nvl-color-text-primary);
}

.nvl-trust-bar__text {
    font-size: var(--nvl-text-xs);
    line-height: var(--nvl-leading-relaxed);
    color: var(--nvl-color-text-secondary);
}

/* --- Testimonios ----------------------------------------------------------- */

.nvl-testimonials {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nvl-space-md);
}

@media (min-width: 640px) {
    .nvl-testimonials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .nvl-testimonials {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--nvl-space-xl);
    }
}

.nvl-testimonial {
    background: var(--nvl-color-surface);
    border: var(--nvl-border-hairline) solid var(--nvl-color-border);
    border-radius: var(--nvl-radius-lg);
    padding: var(--nvl-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--nvl-space-sm);
}

.nvl-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--nvl-space-3xs);
    /* Las estrellas son decorativas: testimonials.php las marca aria-hidden y
       ofrece la valoración en texto, así que 1.4.11 no les aplica y el ámbar
       oficial puede quedarse. A cambio se ven más pálidas que antes (2.15:1). */
    color: var(--nvl-color-warning);
    font-size: var(--nvl-text-base);
}

.nvl-testimonial__text {
    font-size: var(--nvl-text-base);
    line-height: var(--nvl-leading-relaxed);
    color: var(--nvl-color-text-primary);
}

.nvl-testimonial__meta {
    display: flex;
    align-items: center;
    gap: var(--nvl-space-2xs);
    margin-top: auto;
}

.nvl-testimonial__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--nvl-radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

.nvl-testimonial__identity {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nvl-testimonial__name {
    font-size: var(--nvl-text-sm);
    font-weight: var(--nvl-weight-bold);
    color: var(--nvl-color-text-primary);
}

.nvl-testimonial__platform {
    font-size: var(--nvl-text-xs);
    color: var(--nvl-color-text-secondary);
}

/* --- CTA de cierre (caja flotante) ----------------------------------------
   Compartida entre la Home y la vista de categoría (components/cta-contact.php,
   grupo ACF group_nvl_content_blocks). El nombre no lleva "home": no es
   exclusiva de esa plantilla.

   UNA CAJA FLOTANTE SOBRE SECCIÓN CLARA (owner, 2026-10-22). Era tinta de
   borde a borde, y el defecto que reportó es exacto: «el color de fondo se
   confunde demasiado con el del pie de página, lo que hace que ambas secciones
   se perciban como una sola». Dos bandas de la misma tinta, pegadas, no son
   dos secciones. Ahora la tinta se queda DENTRO de una caja con radio y aire
   lateral, sobre una sección blanca: el salto blanco→tinta (17.85:1) separa la
   caja del pie y de las preguntas frecuentes sin pedirle nada a un filete.

   Y la caja lleva LA MISMA FUENTE DE LUZ QUE EL HÉROE —--nvl-gradient-hero, sin
   reescribirlo ni redefinir su foco—, así que la página abre y cierra con el
   mismo material. Cero tokens nuevos: el gradiente, el radio, la sombra y los
   huecos ya existían. */

.nvl-cta-section {
    background: var(--nvl-color-surface);
}

.nvl-cta-band {
    overflow: hidden;
    border-radius: var(--nvl-radius-xl);
    background-image: var(--nvl-gradient-hero);
    /* La sombra es lo que la levanta del blanco y la hace leer como objeto
       flotante y no como una franja con las esquinas redondeadas. */
    box-shadow: var(--nvl-shadow-lg);
    padding: var(--nvl-space-3xl) var(--nvl-space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nvl-space-sm);
    text-align: center;
}

@media (min-width: 768px) {
    .nvl-cta-band {
        padding: var(--nvl-space-4xl) var(--nvl-space-3xl);
    }
}

/* El tope de medida va en el TEXTO y no en un envoltorio: la caja ocupa el
   contenedor entero —es lo que la hace caja— y lo que no debe estirarse es la
   línea de lectura. */
.nvl-cta-band__title {
    max-inline-size: var(--nvl-measure-narrow);
    font-size: var(--nvl-text-xl);
    font-weight: var(--nvl-weight-extrabold);
    line-height: var(--nvl-leading-heading);
    color: var(--nvl-color-surface);
}

@media (min-width: 768px) {
    .nvl-cta-band__title {
        font-size: var(--nvl-text-2xl);
    }
}

.nvl-cta-band__text {
    max-inline-size: var(--nvl-measure-narrow);
    color: var(--nvl-color-text-inverse-muted);
    line-height: var(--nvl-leading-relaxed);
}

.nvl-cta-band__button {
    width: 100%;
}

@media (min-width: 768px) {
    .nvl-cta-band__button {
        width: auto;
        padding-inline: var(--nvl-space-2xl);
    }
}

.nvl-cta-band__note {
    margin-top: var(--nvl-space-xs);
    font-size: var(--nvl-text-xs);
    color: var(--nvl-color-text-inverse-muted);
}