/*
 * servicios-home.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: SOLO en is_front_page() — condicional en functions.php
 *
 * El HTML de la sección se inyecta vía hook blocksy:content:top
 * en functions.php. Este CSS estiliza ese HTML.
 *
 * DISEÑO:
 * - Fondo blanco
 * - Cabecera centrada: H2, intro, línea decorativa
 * - Grid de 5 tarjetas: imagen con H3 superpuesto +
 *   cuerpo con descripción
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-servicios
 */

/* ============================================================
   SECCIÓN — WRAPPER PRINCIPAL
   Fondo blanco
   ============================================================ */
.db-servicios {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-blanco);
}

/* ============================================================
   CONTENEDOR INTERNO
   Centrado con ancho máximo del design system
   ============================================================ */
.db-servicios .db-servicios__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* ============================================================
   CABECERA DE SECCIÓN
   H2 + intro + línea decorativa — centrados
   ============================================================ */
.db-servicios .db-servicios__cabecera {
    text-align: center;
    margin-bottom: 3rem;
}

/* H2 — "Servicios de instalación para tu hogar, comunidad o empresa" */
.db-servicios .db-servicios__titulo {
    font-family: var(--font-titulos);
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

/* Intro — párrafo bajo el H2 */
.db-servicios .db-servicios__intro {
    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;
    margin-bottom: 1.5rem;
}


/* ============================================================
   GRID DE TARJETAS
   5 columnas desktop · 3 tablet · 2 móvil grande · 1 móvil
   ============================================================ */
.db-servicios .db-servicios__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem 1.25rem; /* alto (entre filas) · ancho (entre columnas, sin cambios) */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   TARJETA — ENLACE COMPLETO
   Toda la tarjeta es clicable · sin subrayado
   ============================================================ */
.db-servicios .db-servicios__tarjeta {
    display: flex;
    flex-direction: column;
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition:
        transform var(--transicion-normal),
        box-shadow var(--transicion-normal),
        background-color var(--transicion-rapida),
        outline-color var(--transicion-rapida);
}

/* Estados de interacción — hover solo con ratón · pulsación táctil en :active */
@media (hover: hover) {
    .db-servicios .db-servicios__tarjeta:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-tarjeta-hover);
        outline-color: var(--color-verde);
    }

    .db-servicios .db-servicios__tarjeta:hover .db-servicios__img-wrap img {
        transform: scale(1.04);
    }
}

.db-servicios .db-servicios__tarjeta:active {
    transform: scale(0.98);
    background-color: var(--color-verde-suave-2);
    outline-color: var(--color-verde);
}

/* Foco por teclado — reutiliza el aro verde del hover/active para que la tarjeta
   enfocada sea visible al tabular (WCAG 2.4.7). :focus-visible solo se activa en
   navegación por teclado, no al hacer clic con el ratón. */
.db-servicios .db-servicios__tarjeta:focus-visible {
    outline-color: var(--color-verde);
}

/* ============================================================
   IMAGEN + OVERLAY CON H3 SUPERPUESTO
   H3 en blanco, abajo a la izquierda, con gradiente oscuro
   ============================================================ */
.db-servicios .db-servicios__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 7 / 8;
}

.db-servicios .db-servicios__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transicion-normal);
}

/* Overlay gris completo — mismo efecto que el hero */
.db-servicios .db-servicios__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-gris-texto);
    opacity: 0.50;
    z-index: 1;
    pointer-events: none;
}

/* Gradiente oscuro sobre la imagen — da legibilidad al H3 */
.db-servicios .db-servicios__img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 0.9rem 0.75rem;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.62) 100%
    );
    z-index: 2;
}

/* H3 superpuesto — nombre del servicio en blanco */
.db-servicios .db-servicios__nombre {
    font-family: var(--font-titulos);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: var(--peso-bold);
    color: var(--color-blanco);
    line-height: 1.2;
    margin: 0;
}

/* ============================================================
   CUERPO DE LA TARJETA
   Descripción
   ============================================================ */
.db-servicios .db-servicios__cuerpo {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    flex-grow: 1;
}

/* Descripción */
.db-servicios .db-servicios__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;
}

/* ============================================================
   RESPONSIVE — TABLET
   3 columnas
   ============================================================ */
@media (max-width: 1024px) {
    .db-servicios .db-servicios__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .db-servicios .db-servicios__nombre {
        font-size: 1.5rem;
    }
}

/* ============================================================
   RESPONSIVE — TABLET · descripción a 16px (solo en este rango)
   ============================================================ */
@media (min-width: 601px) and (max-width: 1024px) {
    .db-servicios .db-servicios__desc {
        font-size: var(--texto-base); /* 1rem = 16px */
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL GRANDE
   2 columnas
   ============================================================ */
@media (max-width: 600px) {
    .db-servicios .db-servicios__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem; /* alto · ancho (sin cambios) */
    }

    .db-servicios .db-servicios__cabecera {
        margin-bottom: 2rem;
    }

    .db-servicios .db-servicios__nombre {
        font-size: 1.4rem;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL PEQUEÑO
   1 columna
   ============================================================ */
@media (max-width: 400px) {
    .db-servicios .db-servicios__grid {
        grid-template-columns: 1fr;
    }

    .db-servicios .db-servicios__nombre {
        font-size: 1.5rem;
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-servicios .db-servicios__tarjeta,
    .db-servicios .db-servicios__img-wrap img {
        transition: none;
    }

    .db-servicios .db-servicios__tarjeta:hover {
        transform: none;
    }

    .db-servicios .db-servicios__tarjeta:hover .db-servicios__img-wrap img {
        transform: none;
    }

    .db-servicios .db-servicios__tarjeta:active {
        transform: none;
    }
}