/*
 * categoria-soluciones.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: SOLO en páginas de categoría — condicional en functions.php
 *
 * HTML inyectado vía blocksy:content:top priority 10 (db_categoria_soluciones).
 * Bloque "Soluciones que ofrecemos": dos columnas (intro + grid de 6 tarjetas).
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-cat-soluciones
 */

/* ============================================================
   SECCIÓN — WRAPPER (fondo blanco)
   ============================================================ */
.db-cat-soluciones {
    padding: var(--espaciado-seccion-lg) var(--padding-contenedor) 0; /* bottom 0: el aire inferior lo aporta el padding-top del cuerpo siguiente */
    background-color: var(--color-blanco);
}

/* ============================================================
   CONTENEDOR — dos columnas: intro + grid
   ============================================================ */
.db-cat-soluciones .db-cat-soluciones__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}

/* ============================================================
   COLUMNA IZQUIERDA — intro (H2, texto, CTA)
   ============================================================ */
.db-cat-soluciones .db-cat-soluciones__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.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

.db-cat-soluciones .db-cat-soluciones__texto {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-normal);
    color: var(--color-gris-medio);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}

/* CTA verde con flecha — estilo común (CTA secundario) en main.css
   (.db-cat-soluciones__cta); aquí solo el ancho completo en móvil
   (más abajo, en el bloque responsive) */

/* ============================================================
   COLUMNA DERECHA — grid de 6 tarjetas (2 columnas)
   ============================================================ */
.db-cat-soluciones .db-cat-soluciones__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Tarjeta — enlace completo a su ancla interna */
.db-cat-soluciones .db-cat-soluciones__tarjeta {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 100%;
    gap: 0.75rem;
    padding: 1.25rem;
    background-color: var(--color-blanco);
    border: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 12%, transparent);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta-suave);
    text-decoration: none;
    cursor: pointer; /* señal de "tappable": garantiza que :active se dispare en iOS Safari */
    transform: translateZ(0); /* capa de composición estable: evita los shadow-trails al hacer scroll en móvil */
    transition: transform var(--transicion-normal), box-shadow var(--transicion-normal), border-color var(--transicion-normal), background-color var(--transicion-rapida);
}

/* Insignia de verificación — círculo verde-suave + V verde-oscuro (mismos colores que los badges) */
.db-cat-soluciones .db-cat-soluciones__icono {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-verde-suave);
}

.db-cat-soluciones .db-cat-soluciones__icono svg {
    width: 28px;
    height: 28px;
}

.db-cat-soluciones .db-cat-soluciones__icono svg path {
    fill: var(--color-verde-oscuro);
}

/* Cuerpo de la ficha — título + descripción apilados y alineados */
.db-cat-soluciones .db-cat-soluciones__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Título de tarjeta */
.db-cat-soluciones .db-cat-soluciones__card-titulo {
    font-family: var(--font-titulos);
    font-size: 1rem;
    font-weight: var(--peso-bold);
    color: var(--color-gris-texto);
    line-height: 1.25;
}

/* Descripción de tarjeta */
.db-cat-soluciones .db-cat-soluciones__card-desc {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-medio);
    line-height: 1.5;
}

/* ============================================================
   HOVER — solo con puntero real (en táctil el :hover se queda
   pegado y el transform/box-shadow deja artefactos de repintado)
   ============================================================ */
@media (hover: hover) {
    .db-cat-soluciones .db-cat-soluciones__tarjeta:hover {
        background-color: var(--color-verde-suave-2);
        transform: translateY(-4px);
        box-shadow: var(--sombra-tarjeta-hover);
        border-color: var(--color-verde);
    }
}

/* ============================================================
   ACTIVE (táctil) — feedback breve al pulsar en móvil/tablet.
   En pantalla táctil no hay :hover fiable; :active se enciende
   al tocar y se suelta al levantar el dedo, sin quedarse pegado.
   Sin sombra grande (evita los shadow-trails); scale leve +
   toque de verde de marca.
   ============================================================ */
@media (hover: none) {
    .db-cat-soluciones .db-cat-soluciones__tarjeta:active {
        background-color: var(--color-verde-suave-2);
        border-color: var(--color-verde);
        transform: scale(0.98) translateZ(0);
    }
}

/* ============================================================
   RESPONSIVE — TABLET (apila intro sobre grid)
   ============================================================ */
@media (max-width: 1024px) {
    .db-cat-soluciones .db-cat-soluciones__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (grid de tarjetas a una columna)
   ============================================================ */
@media (max-width: 600px) {
    .db-cat-soluciones .db-cat-soluciones__grid {
        grid-template-columns: 1fr;
    }

    .db-cat-soluciones .db-cat-soluciones__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-cat-soluciones .db-cat-soluciones__tarjeta {
        transition: none;
    }

    .db-cat-soluciones .db-cat-soluciones__tarjeta:hover,
    .db-cat-soluciones .db-cat-soluciones__tarjeta:active {
        transform: none;
    }
}