/* =========================================================
       CONTACTO
    ========================================================= */
    
    .contact-page {
        width: 100%;
        padding-top: 130px;
        padding-bottom: 110px;
        box-sizing: border-box;
    }
    
    
    /* =========================================================
       ENCABEZADO
    ========================================================= */
    
    .contact-header {
        width: min(900px, 100%);
        margin: 0 auto 75px;
        text-align: center;
    }
    
    .contact-header .cota {
        width: min(700px, 100%);
        margin: 0 auto 32px;
    }
    
    .contact-header h1 {
        margin: 0 auto 22px;
    
        font-family: 'Libre Baskerville', serif;
        font-size: clamp(48px, 6vw, 76px);
        font-weight: 400;
        line-height: 1.05;
    
        color: var(--blue-dark);
    }
    
    .contact-header p {
        width: min(680px, 100%);
        margin: 0 auto;
    
        font-family: 'DM Sans', sans-serif;
        font-size: 17px;
        line-height: 1.75;
    
        color: var(--gray-dark);
    }
    
    
    /* =========================================================
       TARJETAS DE SUCURSALES
    ========================================================= */
    
    .contact-offices {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    
        gap: 30px;
    
        width: min(1100px, 100%);
        margin: 0 auto 30px;
}
    
    
    /* =========================================================
       TARJETA BASE
    ========================================================= */
    
    .contact-card {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
    
        padding: 34px;
    
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .88),
                rgba(255, 255, 255, .68)
            );
    
        border: 1px solid rgba(31, 97, 139, .13);
        border-radius: 18px;
    
        box-shadow:
            0 12px 38px rgba(23, 74, 105, .065);
    
        transition:
            transform .28s ease,
            box-shadow .28s ease,
            border-color .28s ease,
            background .28s ease;
    }
    
    .contact-card:hover {
        transform: translateY(-5px);
    
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .96),
                rgba(255, 255, 255, .80)
            );
    
        border-color: rgba(31, 97, 139, .25);
    
        box-shadow:
            0 20px 48px rgba(23, 74, 105, .10);
    }
    
    
    /* =========================================================
       ICONOS SVG — RELIEVE
    ========================================================= */
    
    .contact-card-icon {
        position: absolute;
    
        top: 50%;
        left: 50%;
    
        width: 115px;
        height: 115px;
    
        max-width: 115px;
        max-height: 115px;
    
        object-fit: contain;
    
        transform: translate(-50%, -50%);
    
        opacity: .055;
    
        pointer-events: none;
    
        z-index: 0;
    
        transition:
            transform .35s ease,
            opacity .35s ease;
    }
    
    .contact-card:hover .contact-card-icon {
        transform: translate(-50%, -50%) scale(1.04);
    
        opacity: .075;
    }
    
    
    /* =========================================================
       CONTENIDO SOBRE EL ICONO
    ========================================================= */
    
    .contact-card > *:not(.contact-card-icon) {
        position: relative;
        z-index: 2;
    }
    
    
    /* =========================================================
       TARJETAS DE SUCURSAL
    ========================================================= */
    
    .contact-office {
        min-height: 250px;
    
        padding: 40px 42px;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .contact-card-tag {
        display: block;
    
        margin-bottom: 10px;
    
        font-family: 'Manrope', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
    
        color: var(--blue);
    }
    
    .contact-office h2 {
        margin: 0;
    
        font-family: 'Libre Baskerville', serif;
        font-size: 42px;
        font-weight: 400;
        line-height: 1.05;
    
        color: var(--blue-dark);
    }
    
    .contact-card-line {
        width: 52px;
        height: 2px;
    
        margin: 21px 0;
    
        background: var(--blue);
    }
    
    .contact-office p {
        max-width: 460px;
    
        margin: 0;
    
        font-family: 'DM Sans', sans-serif;
        font-size: 15px;
        line-height: 1.75;
    
        color: var(--gray-dark);
    }
    
    
    /* =========================================================
       BOTÓN — UBICACIÓN
    ========================================================= */
    
    .contact-map-button {
        position: relative;
        z-index: 3;
    
        display: inline-flex;
        align-items: center;
        justify-content: center;
    
        align-self: flex-start;
    
        margin-top: 18px;
        padding: 10px 18px;
    
        border: 1px solid var(--blue);
    
        color: var(--blue);
    
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .03em;
    
        text-decoration: none;
    
        transition:
            background-color .3s ease,
            color .3s ease,
            border-color .3s ease,
            transform .3s ease;
    }
    
    .contact-map-button:hover {
        background: var(--blue);
        color: var(--white);
    
        border-color: var(--blue);
    
        transform: translateY(-2px);
    }
    
    
    /* =========================================================
       INFORMACIÓN DE CONTACTO
    ========================================================= */
    
    .contact-info-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    
        gap: 30px;
    
        width: min(1100px, 100%);
        margin: 0 auto;
    }
    
    .contact-info-grid .contact-card {
        min-height: 190px;
        padding: 32px;
    }
    
    
    /* =========================================================
       TÍTULOS DE INFORMACIÓN
    ========================================================= */
    
    .contact-card h3 {
        margin: 0 0 11px;
    
        font-family: 'Manrope', sans-serif;
        font-size: 17px;
        font-weight: 600;
    
        color: var(--blue-dark);
    }
    
    .contact-card p {
        margin: 0 0 18px;
    
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        line-height: 1.7;
    
        color: var(--gray-dark);
    }
    
    
    /* =========================================================
       RESPONSIVE — TABLET
    ========================================================= */
    
    @media (max-width: 900px) {
    
        .contact-page {
            padding-top: 110px;
            padding-bottom: 85px;
        }
    
        .contact-header {
            margin-bottom: 60px;
        }
    
        .contact-offices,
        .contact-info-grid {
            width: 100%;
        }
    
        .contact-office {
            padding: 35px;
        }
    
        .contact-office h2 {
            font-size: 38px;
        }
    
        .contact-card-icon {
            width: 105px;
            height: 105px;
            max-width: 105px;
            max-height: 105px;
        }
    }
    
    
    /* =========================================================
       RESPONSIVE — TABLET PEQUEÑA
    ========================================================= */
    
    @media (max-width: 800px) {
    
        .contact-page {
            padding-top: 105px;
            padding-bottom: 75px;
        }
    
        .contact-header {
            margin-bottom: 50px;
        }
    
        .contact-header .cota {
            width: 100%;
            margin-bottom: 28px;
        }
    
        .contact-header h1 {
            font-size: 52px;
        }
    
        .contact-offices {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    
        .contact-info-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    
        .contact-office {
            min-height: 230px;
        }
    
        .contact-info-grid .contact-card {
            min-height: auto;
        }
    
        .contact-card-icon {
            width: 110px;
            height: 110px;
            max-width: 110px;
            max-height: 110px;
        }
    }
    
    
    /* =========================================================
       RESPONSIVE — CELULAR
    ========================================================= */
    
    @media (max-width: 500px) {
    
        .contact-page {
            padding-top: 90px;
            padding-bottom: 60px;
        }
    
        .contact-header {
            margin-bottom: 42px;
        }
    
        .contact-header h1 {
            font-size: 43px;
            line-height: 1.05;
        }
    
        .contact-header p {
            font-size: 15px;
            line-height: 1.7;
        }
    
        .contact-office {
            min-height: auto;
            padding: 30px;
        }
    
        .contact-office h2 {
            font-size: 34px;
        }
    
        .contact-card {
            padding: 28px;
        }
    
        .contact-card-tag {
            font-size: 10px;
            letter-spacing: 2px;
        }
    
        .contact-office p {
            font-size: 14px;
        }
    
        .contact-card-icon {
            width: 90px;
            height: 90px;
            max-width: 90px;
            max-height: 90px;
    
            opacity: .05;
        }
    }
    
    
    /* =========================================================
       RESPONSIVE — CELULAR PEQUEÑO
    ========================================================= */
    
    @media (max-width: 380px) {
    
        .contact-page {
            padding-top: 80px;
        }
    
        .contact-header h1 {
            font-size: 38px;
        }
    
        .contact-office h2 {
            font-size: 31px;
        }
    
        .contact-office {
            padding: 26px;
        }
    
        .contact-card {
            padding: 25px;
        }
    
        .contact-card-icon {
            width: 80px;
            height: 80px;
            max-width: 80px;
            max-height: 80px;
        }
    }