/*
 * ict2.css — Decibelio
 * Tema hijo: blocksy-child
 * Sección ICT2 — home únicamente (cargada condicionalmente)
 * Depende de: variables.css (db-variables)
 *
 * DISEÑO:
 * - Imagen de fondo a pantalla completa con overlay gris (regla compartida en main.css)
 * - Layout: una columna · texto superpuesto sobre la imagen
 * - Mismo patrón que el hero (bg + overlay + contenido)
 */

/* ============================================================
   SECCIÓN WRAPPER
   ============================================================ */
.db-ict2 {
    position: relative;
    overflow: hidden;
    padding-block: var(--espaciado-seccion);
    background-color: var(--color-verde-oscuro); /* fallback mientras carga la imagen */
}

/* ============================================================
   IMAGEN DE FONDO
   ============================================================ */
.db-ict2__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ============================================================
   CONTENEDOR INTERNO
   ============================================================ */
.db-ict2__inner {
    position: relative;
    z-index: 2;
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding-inline: var(--padding-contenedor);
}

/* ============================================================
   COLUMNA TEXTO
   ============================================================ */
/* Badge — estilo común en main.css (.db-badge--solido); aquí solo lo contextual */
.db-ict2__badge {
    margin-bottom: 1.25rem;
}

.db-ict2__titulo {
    font-family: var(--font-titulos);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: var(--peso-bold);
    color: var(--color-blanco);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.db-ict2__parrafo {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-medio);
    color: var(--color-blanco);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.db-ict2__parrafo:last-of-type {
    margin-bottom: 2rem;
}

.db-ict2__cta {
    color: var(--color-verde-oscuro);
    background-color: var(--color-blanco);
    border: 2px solid var(--color-blanco);
}

.db-ict2__cta:hover {
    background-color: var(--color-verde-suave);
    border-color: var(--color-verde-suave);
    /* color explícito (= el de reposo): necesario para ganar a la regla genérica
       a:hover de Blocksy (--theme-link-hover-color, azul). .db-ict2__cta:hover
       (0,2,0) ya supera a a:hover (0,1,1); sin esto el texto heredaría el azul */
    color: var(--color-verde-oscuro);
}