/* ==================================================
   ORGANISM: SECTION CONTACT BAND

   Franja blanca entre el contenido y el footer oscuro, con la diagramación
   de las demás secciones: etiqueta roja, titular grande, bajada y enlaces
   subrayados con la flecha que crece al pasar el cursor.
================================================== */

[data-component-id="usfq_theme:section_contact_band"] {
    background: var(--white);
    color: var(--dark);
    padding-top: clamp(3.5rem, 7vw, 6rem);
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
    display: grid;
    gap: 2.5rem;

    .section-contact-band__eyebrow {
        margin: 0 0 0.75rem;
        color: var(--primary);
        font-family: var(--headings-font-family);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .section-contact-band__title {
        margin: 0;
        color: var(--dark);
        font-family: var(--headings-font-family);
        font-size: clamp(1.75rem, 3.4vw, 2.75rem);
        font-weight: 900;
        line-height: 1.08;
        text-wrap: balance;
    }

    .section-contact-band__description {
        margin: 1.25rem 0 0;
        max-width: 34rem;
        color: rgb(30 30 30 / 78%);
        font-size: 1.0625rem;
        line-height: 1.6;
    }

    .section-contact-band__links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .section-contact-band__links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding: 1rem 0;
        border-bottom: 2px solid currentColor;
        color: var(--dark);
        font-family: var(--headings-font-family);
        font-size: clamp(1.25rem, 2.2vw, 2rem);
        font-weight: 900;
        line-height: 1.1;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .section-contact-band__icon {
        flex: 0 0 auto;
        color: inherit !important;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .section-contact-band__icon svg {
        width: 48px;
        height: 48px;
    }

    .section-contact-band__links a:hover,
    .section-contact-band__links a:focus-visible {
        color: var(--primary);
    }

    .section-contact-band__links a:hover .section-contact-band__icon,
    .section-contact-band__links a:focus-visible .section-contact-band__icon {
        transform: scale(1.2);
    }

    .section-contact-band__links a:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 4px;
    }

    @media (min-width: 1025px) {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: end;
        column-gap: clamp(3rem, 6vw, 7rem);

        .section-contact-band__icon svg {
            width: 60px;
            height: 60px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .section-contact-band__icon {
            transition: none;
        }
    }
}