/*
 * agalco.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: is_front_page() — condicional en functions.php
 *
 * El HTML de la sección se inyecta vía hook blocksy:content:top (priority 40)
 * en functions.php. Este CSS estiliza ese HTML.
 *
 * DISEÑO:
 * - Tarjeta destacada: fondo blanco · sombra · bordes redondeados
 * - Desktop/tablet: 3 zonas — [etiqueta · logo] | [texto + CTA]
 *   Etiqueta y logo agrupados con gap reducido · separados del texto por borde vertical
 * - Móvil (≤600px): vertical — etiqueta+logo en fila arriba · texto · CTA
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-agalco
 */

/* ============================================================
   SECCIÓN — WRAPPER EXTERNO
   Padding de sección · fondo neutro heredado del body
   ============================================================ */
.db-agalco {
    width: 100%;
    padding: var(--espaciado-seccion) var(--padding-contenedor);
}

/* ============================================================
   CONTENEDOR INTERNO
   Limita ancho y centra la tarjeta
   ============================================================ */
.db-agalco .db-agalco__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* ============================================================
   TARJETA DESTACADA
   Flex horizontal · fondo blanco · sombra · bordes redondeados
   ============================================================ */
.db-agalco .db-agalco__tarjeta {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem 2.5rem;
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
}

/* ============================================================
   ZONA IZQUIERDA — etiqueta + logo agrupados
   Gap reducido entre ellos · separador vertical a la derecha
   ============================================================ */
.db-agalco .db-agalco__izquierda {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    padding-right: 2.5rem;
    border-right: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 15%, transparent);
}

/* ============================================================
   ETIQUETA — "Socio fundador:"
   Label condensado uppercase coherente con el sistema
   ============================================================ */
.db-agalco .db-agalco__etiqueta {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-semibold);
    font-stretch: var(--ancho-condensado);
    color: var(--color-verde-oscuro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   LOGO AGALCO
   Altura fija · ancho automático · fondo transparente
   ============================================================ */
.db-agalco .db-agalco__logo {
    height: 64px;
    width: auto;
    display: block;
    background-color: transparent;
}

/* ============================================================
   ZONA DERECHA — texto + CTA
   Ocupa el espacio restante de la tarjeta
   ============================================================ */
.db-agalco .db-agalco__derecha {
    flex: 1;
}

/* ============================================================
   TEXTO DESCRIPTIVO
   Cuerpo legible · separación del CTA con margen inferior
   ============================================================ */
.db-agalco .db-agalco__parrafo {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    line-height: 1.65;
    margin: 0 0 1rem;
}

/* Énfasis semántico en el nombre de la asociación */
.db-agalco .db-agalco__parrafo strong {
    font-weight: var(--peso-semibold);
    color: inherit;
}

/* ============================================================
   CTA EXTERNO — "Visitar página de AGALCO →"
   Enlace de texto en verde-oscuro · el subrayado se revela en hover
   (mismo tratamiento que los enlaces del footer). El color no cambia:
   señala que es visitable, sin reclamo de CTA ni verde de marca.
   ============================================================ */
.db-agalco .db-agalco__cta {
    display: block;
    text-align: right;
    font-family: var(--font-cuerpo);
    font-size: var(--texto-muy-pequeño);
    font-weight: var(--peso-semibold);
    color: var(--color-verde-oscuro);
    text-decoration: none;
}

.db-agalco .db-agalco__cta:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   RESPONSIVE — MÓVIL (≤600px)
   Layout vertical: etiqueta+logo en fila · texto · CTA apilados
   ============================================================ */
@media (max-width: 600px) {
    .db-agalco .db-agalco__tarjeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.5rem;
    }

    .db-agalco .db-agalco__izquierda {
        padding-right: 0;
        border-right: none;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 15%, transparent);
        width: 100%;
    }

    .db-agalco .db-agalco__logo {
        height: 52px;
    }

    .db-agalco .db-agalco__parrafo {
        margin-bottom: 0.75rem;
    }
}