/*
 * categoria-contenido.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables) + main.css (.db-linea)
 * Carga: SOLO en páginas de categoría — condicional en functions.php
 *
 * HTML inyectado vía blocksy:content:top priority 20 (db_categoria_contenido).
 * Cuerpo de la página: bloques tipados con anclas —
 * panel · tarjetas · lista · destacado. Subsecciones en subgrid.
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*); para verde-oscuro translúcido
 *   usar color-mix(in srgb, var(--color-verde-oscuro) X%, transparent)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-cat-contenido
 */

/* ============================================================
   WRAPPER (fondo blanco)
   ============================================================ */
.db-cat-contenido {
    padding: var(--espaciado-seccion-lg) var(--padding-contenedor) 0;   /* bottom 0: el cuerpo cierra con el banner a sangre, que pega con lo siguiente sin hueco */
    background-color: var(--color-blanco);
    overflow-x: clip;   /* contiene el full-bleed del panel/destacado sin scroll horizontal */
}

.db-cat-contenido .db-cat-contenido__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* ============================================================
   BLOQUE — base. scroll-margin-top compensa el header sticky al
   saltar por ancla. Lo llevan los tres contenedores que reciben
   el id (bloque, subsección y tarjeta), nunca el encabezado
   ============================================================ */
.db-cat-contenido .db-cat-bloque,
.db-cat-contenido .db-cat-bloque__sub,
.db-cat-contenido .db-cat-bloque__tarjeta {
    scroll-margin-top: 90px;
}

.db-cat-contenido .db-cat-bloque {
    margin-bottom: 5rem;
}

.db-cat-contenido .db-cat-bloque:last-child {
    margin-bottom: 0;
}

/* ============================================================
   LÍNEAS DECORATIVAS — márgenes en el componente
   (la utilidad .db-linea centra; aquí se alinea a la izquierda)
   ============================================================ */
.db-cat-contenido .db-linea--h2 {
    margin: 0.5rem 0 1.5rem;
}

/* ============================================================
   TÍTULOS Y SUBTÍTULOS
   ============================================================ */
.db-cat-contenido .db-cat-bloque__titulo {
    font-family: var(--font-titulos);
    font-size: clamp(2.1rem, 3.5vw, 2.8rem);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0;
}

.db-cat-contenido .db-cat-bloque__subtitulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-subtitulo);
    font-weight: var(--peso-bold);
    font-stretch: 95%; /* eje de ancho de Encode Sans — estrechado leve respecto al 100% normal */
    color: var(--color-verde-oscuro);
    line-height: 1.25;
    margin: 0 0 0.6rem;
}

/* ============================================================
   PÁRRAFOS Y ENLACES INLINE (cross-links)
   ============================================================ */
.db-cat-contenido .db-cat-bloque__parrafo {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-normal);
    color: var(--color-gris-medio);
    line-height: 1.75;
    margin: 0 0 1rem;
}

.db-cat-contenido .db-cat-bloque__parrafo:last-child {
    margin-bottom: 0;
}

/* ============================================================
   SUBGRID — subsecciones bajo su H2 paraguas
   auto-fit: 3 subsecciones → 3 columnas · 1 → ancho completo
   Sin caja ni icono: se diferencia del grid "Soluciones"
   ============================================================ */
.db-cat-contenido .db-cat-bloque__subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

/* ============================================================
   SECCION — H2 + subsecciones H3 apiladas (fondo claro, sin sangre).
   Reutiliza títulos/subtítulos/párrafos base; aquí solo el apilado
   vertical y el ancho de lectura. Diferencia del panel (a sangre).
   ============================================================ */
.db-cat-contenido .db-cat-bloque__stack {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.db-cat-contenido .db-cat-bloque--seccion .db-cat-bloque__parrafo {
    max-width: var(--ancho-lectura);
}

/* ============================================================
   COLUMNAS — variante de 'seccion' (hoy solo #marcas): header
   centrado + subsecciones como tarjetas blancas con relieve, en
   columnas. Todo cuelga de --columnas; el look de tarjeta se hereda
   extendiendo el selector de .db-cat-bloque__tarjeta (sección TARJETAS).
   ============================================================ */
.db-cat-contenido .db-cat-bloque--columnas > .db-cat-bloque__titulo,
.db-cat-contenido .db-cat-bloque--columnas > .db-cat-bloque__parrafo {
    text-align: center;
}

.db-cat-contenido .db-cat-bloque--columnas > .db-cat-bloque__parrafo,
.db-cat-contenido .db-cat-bloque--columnas > .db-linea--h2 {
    margin-inline: auto;
}

/* Badge centrado sobre el H2 centrado del variante columnas */
.db-cat-contenido .db-cat-bloque--columnas > .db-cat-bloque__badge {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

.db-cat-contenido .db-cat-bloque--columnas .db-cat-bloque__stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

/* ============================================================
   BLOQUES A SANGRE (full-bleed) — panel + destacado
   Rompen el contenedor y se centran al viewport; el contenido
   se recentra con el inner. .db-cat-contenido tiene overflow-x:
   clip para que no generen scroll horizontal.
   ============================================================ */
.db-cat-contenido .db-cat-bloque--panel,
.db-cat-contenido .db-cat-bloque--destacado {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: var(--espaciado-seccion);
}

.db-cat-contenido .db-cat-bloque--panel .db-cat-bloque__inner {
    margin-inline: auto;
    padding-inline: var(--padding-contenedor);
    max-width: var(--ancho-contenedor-amplio);
}

/* ============================================================
   PANEL GRIS — fondo del bloque 'panel' · cabecera centrada
   (la mecánica a sangre y el inner están en BLOQUES A SANGRE)
   ============================================================ */
.db-cat-contenido .db-cat-bloque--panel {
    background-color: var(--color-gris-fondo);
}

/* Cabecera centrada del panel */
.db-cat-contenido .db-cat-bloque--panel .db-cat-bloque__cabecera {
    text-align: center;
}

/* Badge de bloque — estilo común en main.css (.db-badge--solido); aquí solo lo contextual */
.db-cat-contenido .db-cat-bloque__badge {
    margin-bottom: 1.25rem;
}

.db-cat-contenido .db-cat-bloque--panel .db-cat-bloque__cabecera .db-linea {
    margin-inline: auto;
}

.db-cat-contenido .db-cat-bloque--panel .db-cat-bloque__cabecera .db-cat-bloque__parrafo {
    max-width: var(--ancho-lectura);
    margin-inline: auto;
}

.db-cat-contenido .db-cat-bloque--panel .db-cat-bloque__sub {
    background-color: var(--color-blanco);
    padding: 1.5rem;
    border-radius: var(--radio-tarjeta);
    position: relative; /* ancla para el filete lateral de acento */
    overflow: hidden;   /* la forma redondeada recorta el filete en las esquinas */
}

/* Filete vertical de acento en el borde izquierdo — pseudo-elemento recto a
   alto completo. La tarjeta lo recorta a su border-radius (overflow:hidden),
   así las puntas siguen la curva de las esquinas sin asomar. */
.db-cat-contenido .db-cat-bloque--panel .db-cat-bloque__sub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-verde);
}

/* PANEL variante grid-3 — subgrid a 3 columnas (3+3) y cajas con sombra.
   Para paraguas de muchas subsecciones (casa inteligente). Hereda fondo gris,
   cabecera centrada y filete verde del panel; solo cambia columnas y relieve. */
.db-cat-contenido .db-cat-bloque--grid-3 .db-cat-bloque__subgrid {
    grid-template-columns: repeat(3, 1fr);
}

.db-cat-contenido .db-cat-bloque--grid-3 .db-cat-bloque__sub {
    box-shadow: var(--sombra-tarjeta);
}

/* Banda de cierre — foto provisional, formato ancho y bajo (panel y media) */
.db-cat-contenido .db-cat-bloque__banda {
    margin: 2rem 0 0;
}

.db-cat-contenido .db-cat-bloque__banda img {
    display: block;
    width: 100%;
    aspect-ratio: 3.5 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radio-tarjeta);
}

/* ============================================================
   TARJETAS — dúo en columnas blancas con sombra (badge + H2 + texto)
   auto-fit: 2 columnas en escritorio · 1 en pantallas estrechas
   ============================================================ */
.db-cat-contenido .db-cat-bloque__duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 2rem;
}

.db-cat-contenido .db-cat-bloque__tarjeta,
.db-cat-contenido .db-cat-bloque--columnas .db-cat-bloque__sub {
    padding: 2rem;
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
}

/* ============================================================
   T4 · LISTA — averías con icono · bloque centrado, 2 columnas (1 en móvil)
   ============================================================ */
.db-cat-contenido .db-cat-bloque--lista {
    text-align: center;
}

.db-cat-contenido .db-cat-bloque--lista .db-linea--h2 {
    margin-inline: auto;
}

.db-cat-contenido .db-cat-bloque__lista {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 1rem 2rem;
    width: fit-content;
    margin: 0.5rem auto 0;
    padding: 0;
    list-style: none;
}

.db-cat-contenido .db-cat-bloque__lista-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-medio);
    color: var(--color-gris-texto);
    line-height: 1.4;
}

.db-cat-contenido .db-cat-bloque__lista-icono {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-verde-oscuro);
}

.db-cat-contenido .db-cat-bloque__lista-icono svg {
    width: 22px;
    height: 22px;
}

/* Sellos de marca (chips) — en las tarjetas */
.db-cat-contenido .db-cat-bloque__sellos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.db-cat-contenido .db-cat-bloque__sello {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-semibold);
    letter-spacing: 0.04em;
    color: var(--color-verde-oscuro);
    background-color: var(--color-blanco);
    border: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 20%, transparent);
    border-radius: var(--radio-badge);
    padding: 0.4rem 1rem;
}

/* ============================================================
   RESPONSIVE — TABLET / MÓVIL
   ============================================================ */
@media (max-width: 768px) {
    .db-cat-contenido .db-cat-bloque,
    .db-cat-contenido .db-cat-bloque__sub,
    .db-cat-contenido .db-cat-bloque__tarjeta {
        scroll-margin-top: 75px;
    }

    .db-cat-contenido .db-cat-bloque {
        margin-bottom: 3rem;
    }

    .db-cat-contenido .db-cat-bloque__subgrid {
        margin-top: 2rem;
    }

    .db-cat-contenido .db-cat-bloque--grid-3 .db-cat-bloque__subgrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-cat-contenido .db-cat-bloque__banda img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    .db-cat-contenido .db-cat-bloque__lista {
        grid-template-columns: 1fr;
    }

    .db-cat-contenido .db-cat-bloque--grid-3 .db-cat-bloque__subgrid {
        grid-template-columns: 1fr;
    }
}