/*
 * cierre.css — Decibelio · tema hijo blocksy-child
 * Depende de: variables.css · main.css (botones .db-cat-bloque__cta*)
 * Carga: páginas de categoría (con bloque de cierre) + hub /servicios/
 *
 * Banner de cierre CTA (dos zonas: mensaje + par de botones), desacoplado de
 * .db-cat-contenido para servir a categorías y al hub. El full-bleed 100vw de
 * categorías vive en categoria-contenido.css (BLOQUES A SANGRE); en el hub el
 * bloque ya es hijo directo de <main> (full-width) y solo aporta su padding.
 */

/* Fondo degradado teal (verde-oscuro → verde-medio) + texto claro */
.db-cat-bloque--destacado {
    background-color: var(--color-verde-oscuro);
    background-image: linear-gradient(135deg, var(--color-verde-oscuro), var(--color-verde-medio));
}

/* Texto claro sobre el fondo oscuro. Especificidad (0,3,0) vía __cierre-texto para ganar a la
   genérica .db-cat-contenido .db-cat-bloque__titulo/__parrafo (0,2,0) de categorías —como hacía
   el selector .db-cat-contenido .db-cat-bloque--destacado ... antes de extraer, por especificidad
   y no por orden de carga—. En el hub no hay genérica, pero la misma regla vale sin acoplarse. */
.db-cat-bloque--destacado .db-cat-bloque__cierre-texto .db-cat-bloque__titulo,
.db-cat-bloque--destacado .db-cat-bloque__cierre-texto .db-cat-bloque__parrafo {
    color: var(--color-blanco);
}

/* Inner = dos zonas (texto izquierda · botones derecha), centrado a ancho de contenedor */
.db-cat-bloque--destacado .db-cat-bloque__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding-inline: var(--padding-contenedor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Zona de acciones: los dos botones apilados al mismo ancho. min(20rem, 100%) los
   ensancha en tablet/PC cuando hay sitio, pero nunca supera el ancho del contenedor
   → en móvil (column, pantallas estrechas) no se sale por la derecha. */
.db-cat-bloque__cierre-acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    flex-shrink: 0;
    min-width: min(20rem, 100%);
}

/* Centrados, con el MISMO borde (1px) para que igualen el alto entre sí. El verde
   arrastra 2px de la piel primaria (invisible, = su propio fondo) y el de teléfono
   1px; sin igualar el borde quedarían con 2px de diferencia. */
.db-cat-bloque__cierre-acciones .db-cat-bloque__cta,
.db-cat-bloque__cierre-acciones .db-cat-bloque__cta-tel {
    justify-content: center;
    border-width: 1px;
}

/* Responsive — texto arriba · botones abajo (ya van a lo ancho) */
@media (max-width: 1024px) {
    .db-cat-bloque--destacado .db-cat-bloque__inner {
        flex-direction: column;
        align-items: stretch;
    }
}