/*
 * servicios-hub.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables) · main.css (db-main: .db-badge, .db-linea)
 * Carga: SOLO en is_page('servicios') — condicional en functions.php
 *
 * Agrupa los bloques PROPIOS del hub /servicios/ (los que no reutilizan el
 * chrome de categoría):
 *   1. Cabecera de hub — componente de cabecera centrada, compartido.
 *   2. Espacios / audiencia (primer H2).
 *   3. Rejilla de categorías (segundo H2, ancla #areas-de-servicio).
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde el bloque
 */

/* ============================================================
   1. CABECERA DE HUB — eyebrow + H2 + filete + subtítulo · centrada
   Componente compartido por los bloques del hub (Espacios y Rejilla).
   ============================================================ */
.db-hub-cabecera {
    text-align: center;
    margin-bottom: 3rem;
}

/* Eyebrow — medidas/piel en main.css (.db-badge--solido); aquí solo lo contextual */
.db-hub-cabecera__eyebrow {
    margin-bottom: 1.25rem;
}

.db-hub-cabecera__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h2);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

/* Filete decorativo bajo el H2 — .db-linea--h2 ya se centra (margin-inline:auto) */
.db-hub-cabecera .db-linea {
    margin-bottom: 1.5rem;
}

.db-hub-cabecera__subtitulo {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-normal);
    color: var(--color-gris-medio);
    line-height: 1.7;
    max-width: 640px;
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .db-hub-cabecera {
        margin-bottom: 2rem;
    }
}

/* ============================================================
   2. ESPACIOS / AUDIENCIA — WRAPPER
   Fondo gris claro: separa de la franja de confianza (blanca) de
   arriba y de la rejilla de abajo · hace resaltar las tarjetas blancas.
   ============================================================ */
.db-servicios-espacios {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-gris-fondo);
}

.db-servicios-espacios .db-servicios-espacios__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* GRID — 3 tarjetas estáticas (informativas, sin enlace) */
.db-servicios-espacios .db-servicios-espacios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* TARJETA — sin estados de interacción */
/* Tarjeta blanca — compartida por Espacios y Proceso (mismo patrón de tarjeta) */
.db-servicios-espacios .db-servicios-espacios__item,
.db-servicios-proceso .db-servicios-proceso__item {
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.75rem;
}

/* Recuadro verde-suave arriba a la izquierda: icono en Espacios, número en Proceso */
/* Cuadro de icono en main.css (.db-servicios-espacios__icono / __num agrupados); aquí solo el margen */
.db-servicios-espacios .db-servicios-espacios__icono,
.db-servicios-proceso .db-servicios-proceso__num {
    margin-bottom: 1.25rem;
}

/* Título de tarjeta (H3) — compartido */
.db-servicios-espacios .db-servicios-espacios__card-titulo,
.db-servicios-proceso .db-servicios-proceso__card-titulo {
    font-family: var(--font-titulos);
    font-size: 1.2rem;
    font-weight: var(--peso-bold);
    color: var(--color-gris-texto);
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

/* Descripción de tarjeta — compartida */
.db-servicios-espacios .db-servicios-espacios__card-desc,
.db-servicios-proceso .db-servicios-proceso__card-desc {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    line-height: 1.55;
    margin: 0;
}

/* Espacios · móvil (≤767.98): una columna (con 3 ítems, 2 columnas dejaría uno huérfano) */
@media (max-width: 767.98px) {
    .db-servicios-espacios .db-servicios-espacios__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   3. REJILLA DE CATEGORÍAS — WRAPPER
   Segundo H2 · fondo blanco (contrasta con el gris de Espacios).
   El ancla #areas-de-servicio va en el <section> (render).
   ============================================================ */
.db-servicios-areas {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-blanco);
}

.db-servicios-areas .db-servicios-areas__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* GRID de filas — una por categoría */
.db-servicios-areas .db-servicios-areas__grid {
    display: grid;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* FILA — imagen izquierda + contenido derecha · enlace estirado.
   El H3 es el único enlace (anchor text limpio); su ::after cubre toda
   la fila (patrón de "Otras categorías"). Chips y badge no interactivos. */
.db-servicios-areas .db-servicios-areas__item {
    position: relative;
    display: grid;
    grid-template-columns: 42% 1fr;
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: transform var(--transicion-normal), box-shadow var(--transicion-normal), outline-color var(--transicion-normal);
}

/* Media — la imagen estira a la altura del contenido */
.db-servicios-areas .db-servicios-areas__media {
    position: relative;
    overflow: hidden;
}

/* Tinte de la foto: reutiliza el overlay compartido (main.css); en las fichas
   se deja un punto más suave (0.50) que en los banners (0.60) */
.db-servicios-areas .db-servicios-areas__media::after {
    opacity: 0.50;
}

.db-servicios-areas .db-servicios-areas__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge numerado — sobre la foto, arriba-izq · fondo blanco semiopaco (legible
   sobre la foto sin overlay) + fina línea · base tipográfica de .db-badge */
.db-servicios-areas .db-servicios-areas__num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background-color: var(--color-blanco-60);
    border: 1px solid var(--color-blanco-30);
    color: var(--color-verde-texto);
    padding: 0.2rem 0.9rem;
}

/* Contenido */
.db-servicios-areas .db-servicios-areas__body {
    padding: 1.75rem;
    text-align: center;
}

/* Título (H3) — su <a> es el enlace estirado */
.db-servicios-areas .db-servicios-areas__titulo {
    font-family: var(--font-titulos);
    font-size: 1.35rem;
    font-weight: var(--peso-bold);
    color: var(--color-gris-texto);
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.db-servicios-areas .db-servicios-areas__enlace {
    color: inherit;
    text-decoration: none;
}

.db-servicios-areas .db-servicios-areas__enlace::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Descripción (se omite en el HTML si está vacía) */
.db-servicios-areas .db-servicios-areas__desc {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    line-height: 1.55;
    margin: 0 0 1rem;
}

/* Chips — etiquetas estáticas en píldora, neutras (borde para separarse del blanco) */
.db-servicios-areas .db-servicios-areas__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-servicios-areas .db-servicios-areas__chip {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-muy-pequeño);
    font-weight: var(--peso-medio);
    color: var(--color-verde-oscuro);
    background-color: var(--color-gris-fondo);
    border: 1px solid color-mix(in srgb, var(--color-gris-texto) 12%, transparent);
    border-radius: var(--radio-pildora);
    padding: 0.3rem 0.75rem;
    line-height: 1.2;
}

/* Estados — hover solo con puntero real (en táctil el :hover deja artefactos) */
@media (hover: hover) {
    .db-servicios-areas .db-servicios-areas__item:hover {
        transform: translateY(-3px);
        box-shadow: var(--sombra-tarjeta-hover);
        outline-color: var(--color-verde);
    }
}

/* Pulsación táctil */
.db-servicios-areas .db-servicios-areas__item:active {
    outline-color: var(--color-verde);
}

/* Foco por teclado — enlace real = .__enlace (::after estira el clic); :has()
   lleva el aro verde a la fila cuando el <a> recibe foco (WCAG 2.4.7) */
.db-servicios-areas .db-servicios-areas__item:has(.db-servicios-areas__enlace:focus-visible) {
    outline-color: var(--color-verde);
}

/* Rejilla · móvil (≤767.98): fila apilada (imagen arriba) */
@media (max-width: 767.98px) {
    .db-servicios-areas .db-servicios-areas__item {
        grid-template-columns: 1fr;
    }

    .db-servicios-areas .db-servicios-areas__media {
        aspect-ratio: 16 / 9;
    }

    .db-servicios-areas .db-servicios-areas__chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .db-servicios-areas .db-servicios-areas__item {
        transition: none;
    }

    .db-servicios-areas .db-servicios-areas__item:hover {
        transform: none;
    }
}

/* ============================================================
   4. CREDENCIAL OFICIAL — WRAPPER (fondo gris claro, a sangre)
   Tercer H2 · dos columnas: mensaje + CTA / tarjetas de marca.
   ============================================================ */
.db-servicios-credencial {
    padding-block: var(--espaciado-seccion);
    background-color: var(--color-gris-fondo);
}

.db-servicios-credencial .db-servicios-credencial__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    /* padding-inline en el inner (no en la sección) para que el borde izquierdo
       coincida por construcción con el banner ICT2, que usa este mismo sistema */
    padding-inline: var(--padding-contenedor);
    display: grid;
    /* columna izquierda algo más ancha: recupera el ancho que resta el padding y
       mantiene el H2 en 2 líneas, a costa de estrechar las fichas de la derecha */
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* Columna izquierda — mensaje */
.db-servicios-credencial .db-servicios-credencial__eyebrow {
    margin-bottom: 1.25rem;
}

.db-servicios-credencial .db-servicios-credencial__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h2);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

.db-servicios-credencial .db-servicios-credencial__parrafo {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}

/* Columna derecha — tarjetas de marca (logo izquierda + descripción derecha) */
.db-servicios-credencial .db-servicios-credencial__marcas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.db-servicios-credencial .db-servicios-credencial__marca {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.25rem 1.5rem;
}

.db-servicios-credencial .db-servicios-credencial__logo {
    flex-shrink: 0;
    width: 110px;
    height: auto;
    object-fit: contain;
}

.db-servicios-credencial .db-servicios-credencial__marca-desc {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    line-height: 1.5;
    margin: 0;
}

/* Responsive — apilar las dos columnas (teléfono) */
@media (max-width: 767.98px) {
    .db-servicios-credencial .db-servicios-credencial__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ============================================================
   5. PROCESO — WRAPPER (cómo trabajamos)
   Quinto H2 · 4 tarjetas estáticas numeradas. La tarjeta (shell,
   recuadro, H3, desc) comparte reglas con Espacios (sección 2);
   aquí solo lo propio del bloque: wrapper, rejilla de 4 y el número.
   ============================================================ */
.db-servicios-proceso {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-blanco);
}

.db-servicios-proceso .db-servicios-proceso__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

.db-servicios-proceso .db-servicios-proceso__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Número dentro del recuadro (el recuadro lo estiliza la regla compartida) */
.db-servicios-proceso .db-servicios-proceso__num {
    font-family: var(--font-titulos);
    font-size: 1.5rem;
    font-weight: var(--peso-bold);
}

/* Responsive — 4 columnas → 2 (tablet) → 1 (móvil) */
@media (max-width: 1024px) {
    .db-servicios-proceso .db-servicios-proceso__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .db-servicios-proceso .db-servicios-proceso__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   6. CIERRE — WRAPPER (¿Hablamos de tu proyecto?)
   Sexto y último H2. El visual (degradado + dos zonas + botones) lo da
   cierre.css, compartido con el banner de cierre de las categorías. Aquí,
   como el bloque es hijo directo de <main> (full-width), solo su padding.
   ============================================================ */
.db-servicios-cierre {
    padding-block: var(--espaciado-seccion);
}