/* ============================================================
   SIINTE — CONTACTO
   contact.css

   CONCEPTO:
   CENTRO DE CONEXIÓN CORPORATIVO

   Diseño:
   - Asimétrico
   - Editorial / interfaz
   - Compacto
   - Alta legibilidad
   - Contacto como punto central
   - WhatsApp claramente identificable
   - Sin hero tradicional
   - Sin cards SaaS convencionales

   IMPORTANTE:
   Todo está encapsulado bajo .contact-page.
   No afecta otras páginas.
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

.contact-page {

    --contact-ink: #071a2f;
    --contact-ink-2: #142b43;

    --contact-blue: #1255a3;
    --contact-blue-dark: #0b4383;

    --contact-orange: #ff7900;

    /* WhatsApp */
    --contact-whatsapp: #25d366;
    --contact-whatsapp-dark: #1faa52;
    --contact-whatsapp-soft: rgba(37,211,102,.12);

    --contact-white: #ffffff;

    --contact-paper: #f7f9fc;
    --contact-paper-2: #eef3f8;

    --contact-muted: #526579;

    --contact-line: #d3dde7;
    --contact-line-dark: rgba(255,255,255,.18);

    --contact-container: 1220px;

    width: 100%;

    color: var(--contact-ink);
    background: var(--contact-white);

    overflow: hidden;
}


/* ============================================================
   RESET LOCAL
   ============================================================ */

.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}

.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page p {
    margin-top: 0;
}

.contact-page a {
    text-decoration: none;
}

.contact-page button,
.contact-page input,
.contact-page textarea {
    font: inherit;
}


/* ============================================================
   CONTENEDOR
   ============================================================ */

.contact-page .contact-shell {

    width: min(
        calc(100% - 48px),
        var(--contact-container)
    );

    margin-inline: auto;
}


/* ============================================================
   LABELS
   ============================================================ */

.contact-page .contact-label {

    display: inline-block;

    color: var(--contact-blue);

    font-size: 13px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: .13em;

    text-transform: uppercase;
}


/* ============================================================
   HEADER
   ============================================================ */

.contact-page .contact-header {

    position: relative;

    background: var(--contact-paper);

    border-bottom: 1px solid var(--contact-line);
}


/* ============================================================
   HEADER TOP
   ============================================================ */

.contact-page .contact-header-top {

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--contact-line);
}


.contact-page .contact-status {

    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--contact-ink);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .10em;
}


.contact-page .contact-status-dot {

    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;

    background: var(--contact-orange);

    box-shadow:
        0 0 0 5px rgba(255,121,0,.11);
}


.contact-page .contact-header-code {

    color: var(--contact-muted);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .11em;
}


/* ============================================================
   HEADER CONTENT
   ============================================================ */

.contact-page .contact-header-content {

    min-height: 310px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .65fr);

    align-items: end;

    gap: 75px;

    padding-block: 58px 54px;
}


.contact-page .contact-header-copy h1 {

    max-width: 900px;

    margin-bottom: 20px;

    color: var(--contact-ink);

    font-size: clamp(62px, 8vw, 108px);

    font-weight: 800;

    line-height: .88;

    letter-spacing: -.065em;
}


.contact-page .contact-header-copy p {

    max-width: 720px;

    margin-bottom: 0;

    color: var(--contact-muted);

    font-size: 19px;

    line-height: 1.62;
}


.contact-page .contact-header-side {

    padding-left: 30px;

    border-left: 4px solid var(--contact-orange);
}


.contact-page .contact-header-side span {

    display: block;

    margin-bottom: 14px;

    color: var(--contact-blue);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .13em;
}


.contact-page .contact-header-side p {

    max-width: 340px;

    margin-bottom: 0;

    color: var(--contact-ink-2);

    font-size: 16px;

    line-height: 1.7;
}


/* ============================================================
   MAIN CONTACT
   ============================================================ */

.contact-page .contact-main {

    padding-block: 76px 86px;

    background: var(--contact-white);
}


.contact-page .contact-main-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, .95fr);

    gap: 68px;

    align-items: start;
}


/* ============================================================
   PANEL DE CANALES
   ============================================================ */

.contact-page .contact-channel-panel {

    position: relative;

    padding: 40px;

    background: var(--contact-ink);

    color: var(--contact-white);

    border-radius: 3px;
}


.contact-page .contact-panel-heading {

    margin-bottom: 28px;

    padding-bottom: 25px;

    border-bottom: 1px solid var(--contact-line-dark);
}


.contact-page .contact-panel-heading .contact-label {

    margin-bottom: 16px;

    color: var(--contact-orange);
}


.contact-page .contact-panel-heading h2 {

    max-width: 620px;

    margin-bottom: 0;

    color: var(--contact-white);

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -.045em;
}


/* ============================================================
   CANALES
   ============================================================ */

.contact-page .contact-channel {

    display: grid;

    grid-template-columns:
        72px
        minmax(0,1fr)
        30px;

    align-items: center;

    gap: 22px;

    min-height: 122px;

    padding: 20px 0;

    color: var(--contact-white);

    border-bottom: 1px solid var(--contact-line-dark);

    transition:
        background-color .2s ease,
        padding-left .2s ease;
}


.contact-page .contact-channel:hover {

    padding-left: 10px;

    background: rgba(255,255,255,.035);
}


/* ============================================================
   ICONOS DE CANALES
   ============================================================ */

.contact-page .contact-channel-symbol {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--contact-white);

    background: var(--contact-blue);

    border-radius: 4px;

    font-size: 28px;

    line-height: 1;

    box-shadow:
        0 5px 18px rgba(0,0,0,.16);
}


/* ============================================================
   WHATSAPP
   ============================================================ */

.contact-page .contact-channel-whatsapp .contact-channel-symbol {

    background: var(--contact-whatsapp);

    color: #ffffff;

    font-size: 31px;

    box-shadow:
        0 0 0 5px var(--contact-whatsapp-soft),
        0 7px 20px rgba(0,0,0,.18);
}


/*
 * Refuerzo visual para todo el canal WhatsApp.
 */

.contact-page .contact-channel-whatsapp:hover {

    background: rgba(37,211,102,.055);
}


.contact-page .contact-channel-whatsapp .contact-channel-type {

    color: var(--contact-whatsapp);
}


.contact-page .contact-channel-whatsapp .contact-channel-action {

    color: var(--contact-whatsapp);
}


/* ============================================================
   INFORMACIÓN DEL CANAL
   ============================================================ */

.contact-page .contact-channel-info {

    min-width: 0;
}


.contact-page .contact-channel-type {

    display: block;

    margin-bottom: 7px;

    color: rgba(255,255,255,.62);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;
}


.contact-page .contact-channel-info strong {

    display: block;

    color: var(--contact-white);

    font-size: 21px;
    font-weight: 800;

    line-height: 1.25;

    overflow-wrap: anywhere;
}


.contact-page .contact-channel-info small {

    display: block;

    margin-top: 6px;

    color: rgba(255,255,255,.64);

    font-size: 14px;

    line-height: 1.45;
}


/* ============================================================
   FLECHA CANAL
   ============================================================ */

.contact-page .contact-channel-action {

    color: var(--contact-orange);

    font-size: 26px;

    line-height: 1;

    transition: transform .2s ease;
}


.contact-page .contact-channel:hover .contact-channel-action {

    transform: translate(4px,-3px);
}


/* ============================================================
   NOTA PANEL
   ============================================================ */

.contact-page .contact-panel-note {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 27px;
}


.contact-page .contact-panel-note-icon {

    flex: 0 0 auto;

    color: var(--contact-orange);

    font-size: 17px;

    line-height: 1.4;
}


.contact-page .contact-panel-note p {

    max-width: 500px;

    margin-bottom: 0;

    color: rgba(255,255,255,.62);

    font-size: 13px;

    line-height: 1.65;
}


/* ============================================================
   ORIENTACIÓN
   ============================================================ */

.contact-page .contact-orientation {

    padding-top: 4px;
}


.contact-page .contact-orientation-head {

    padding-bottom: 25px;

    border-bottom: 3px solid var(--contact-ink);
}


.contact-page .contact-orientation-head .contact-label {

    margin-bottom: 16px;
}


.contact-page .contact-orientation-head h2 {

    margin-bottom: 14px;

    color: var(--contact-ink);

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -.045em;
}


.contact-page .contact-orientation-head p {

    max-width: 520px;

    margin-bottom: 0;

    color: var(--contact-muted);

    font-size: 16px;

    line-height: 1.68;
}


/* ============================================================
   RUTAS
   ============================================================ */

.contact-page .contact-route-list {

    border-bottom: 1px solid var(--contact-line);
}


.contact-page .contact-route {

    display: grid;

    grid-template-columns:
        58px
        minmax(0,1fr)
        24px;

    align-items: center;

    gap: 19px;

    min-height: 104px;

    padding: 15px 4px;

    color: var(--contact-ink);

    border-bottom: 1px solid var(--contact-line);

    transition:
        background-color .2s ease,
        padding-left .2s ease;
}


.contact-page .contact-route:last-child {

    border-bottom: 0;
}


.contact-page .contact-route:hover {

    padding-left: 12px;

    background: var(--contact-paper);
}


/* ============================================================
   ICONOS — PUNTO DE ENTRADA
   ============================================================ */

.contact-page .contact-route-icon {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--contact-blue);

    border: 1px solid var(--contact-line);

    background: var(--contact-white);

    border-radius: 4px;

    font-size: 21px;

    line-height: 1;

    box-shadow:
        0 3px 10px rgba(7,26,47,.06);

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.contact-page .contact-route:hover .contact-route-icon {

    color: var(--contact-white);

    background: var(--contact-blue);

    border-color: var(--contact-blue);

    transform: scale(1.04);
}


/*
 * El acceso relacionado con contacto / WhatsApp
 * mantiene una identificación especial.
 */

.contact-page .contact-route-contact .contact-route-icon {

    color: var(--contact-whatsapp);

    border-color: rgba(37,211,102,.38);

    background: #f6fff9;

    font-size: 23px;
}


.contact-page .contact-route-contact:hover .contact-route-icon {

    color: #ffffff;

    background: var(--contact-whatsapp);

    border-color: var(--contact-whatsapp);
}


/* ============================================================
   CONTENIDO DE RUTA
   ============================================================ */

.contact-page .contact-route-content strong {

    display: block;

    margin-bottom: 5px;

    color: var(--contact-ink);

    font-size: 17px;
    font-weight: 800;

    line-height: 1.3;
}


.contact-page .contact-route-content small {

    display: block;

    color: var(--contact-muted);

    font-size: 14px;

    line-height: 1.5;
}


/* ============================================================
   FLECHA RUTA
   ============================================================ */

.contact-page .contact-route-arrow {

    color: var(--contact-blue);

    font-size: 22px;

    line-height: 1;

    transition: transform .2s ease;
}


.contact-page .contact-route:hover .contact-route-arrow {

    transform: translateX(5px);
}


/* ============================================================
   TEMAS
   ============================================================ */

.contact-page .contact-topics {

    padding-block: 78px;

    background: var(--contact-paper);
}


.contact-page .contact-topics-intro {

    max-width: 720px;

    margin-bottom: 40px;
}


.contact-page .contact-topics-intro .contact-label {

    margin-bottom: 15px;
}


.contact-page .contact-topics-intro h2 {

    margin-bottom: 15px;

    color: var(--contact-ink);

    font-size: clamp(38px, 4.5vw, 60px);

    font-weight: 800;

    line-height: .96;

    letter-spacing: -.055em;
}


.contact-page .contact-topics-intro p {

    max-width: 680px;

    margin-bottom: 0;

    color: var(--contact-muted);

    font-size: 16px;

    line-height: 1.72;
}


/* ============================================================
   BOARD
   ============================================================ */

.contact-page .contact-topic-board {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    border-top: 2px solid var(--contact-ink);

    border-left: 1px solid var(--contact-line);
}


/* ============================================================
   TOPIC
   ============================================================ */

.contact-page .contact-topic {

    display: grid;

    grid-template-columns:
        62px
        minmax(0,1fr);

    gap: 22px;

    min-height: 170px;

    padding: 28px 30px;

    background: var(--contact-white);

    border-right: 1px solid var(--contact-line);

    border-bottom: 1px solid var(--contact-line);

    transition:
        background-color .2s ease;
}


.contact-page .contact-topic:hover {

    background: var(--contact-paper-2);
}


/* ============================================================
   NÚMERO TOPIC
   ============================================================ */

.contact-page .contact-topic-number {

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--contact-white);

    background: var(--contact-ink);

    border-radius: 50%;

    font-size: 16px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .02em;

    box-shadow:
        0 4px 12px rgba(7,26,47,.12);
}


/*
 * Primeros puntos visuales en naranja.
 */

.contact-page .contact-topic:hover .contact-topic-number {

    background: var(--contact-blue);

}


/* ============================================================
   CONTENIDO TOPIC
   ============================================================ */

.contact-page .contact-topic strong {

    display: block;

    margin-bottom: 9px;

    color: var(--contact-ink);

    font-size: 18px;
    font-weight: 800;

    line-height: 1.3;
}


.contact-page .contact-topic p {

    max-width: 440px;

    margin-bottom: 0;

    color: var(--contact-muted);

    font-size: 14px;

    line-height: 1.68;
}


/* ============================================================
   MENSAJE
   ============================================================ */

.contact-page .contact-message {

    padding-block: 78px;

    background: var(--contact-white);

    border-bottom: 1px solid var(--contact-line);
}


.contact-page .contact-message-grid {

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 95px;
}


.contact-page .contact-message-title .contact-label {

    margin-bottom: 16px;
}


.contact-page .contact-message-title h2 {

    max-width: 470px;

    margin-bottom: 0;

    color: var(--contact-ink);

    font-size: clamp(38px, 4.5vw, 60px);

    font-weight: 800;

    line-height: .95;

    letter-spacing: -.055em;
}


.contact-page .contact-message-lead {

    max-width: 700px;

    margin-bottom: 32px;

    color: var(--contact-ink-2);

    font-size: 19px;

    line-height: 1.65;
}


/* ============================================================
   PUNTOS
   ============================================================ */

.contact-page .contact-message-points {

    border-top: 3px solid var(--contact-ink);
}


.contact-page .contact-message-points > div {

    display: grid;

    grid-template-columns:
        58px
        minmax(0,1fr);

    gap: 20px;

    align-items: center;

    min-height: 70px;

    border-bottom: 1px solid var(--contact-line);
}


.contact-page .contact-message-points span {

    color: var(--contact-orange);

    font-size: 15px;
    font-weight: 800;

    letter-spacing: .08em;
}


.contact-page .contact-message-points p {

    margin-bottom: 0;

    color: var(--contact-muted);

    font-size: 15px;

    line-height: 1.55;
}


/* ============================================================
   FOOTER CTA
   ============================================================ */

.contact-page .contact-footer-cta {

    padding-block: 68px;

    color: var(--contact-white);

    background: var(--contact-ink);
}


.contact-page .contact-footer-inner {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 60px;
}


.contact-page .contact-footer-mark {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--contact-orange);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .17em;
}


.contact-page .contact-footer-inner h2 {

    margin-bottom: 11px;

    color: var(--contact-white);

    font-size: clamp(40px, 5vw, 66px);

    font-weight: 800;

    line-height: .93;

    letter-spacing: -.055em;
}


.contact-page .contact-footer-inner p {

    max-width: 570px;

    margin-bottom: 0;

    color: rgba(255,255,255,.66);

    font-size: 15px;

    line-height: 1.68;
}


/* ============================================================
   ACCIONES
   ============================================================ */

.contact-page .contact-footer-actions {

    display: flex;

    flex-direction: column;

    gap: 11px;

    width: min(100%, 350px);
}


.contact-page .contact-footer-button {

    min-height: 58px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding-inline: 22px;

    font-size: 14px;
    font-weight: 800;

    border: 1px solid transparent;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.contact-page .contact-footer-button span {

    font-size: 21px;

    transition: transform .2s ease;
}


.contact-page .contact-footer-button:hover span {

    transform: translate(4px,-3px);
}


/* ============================================================
   CTA WHATSAPP
   ============================================================ */

.contact-page .contact-footer-button-primary {

    color: #ffffff;

    background: var(--contact-whatsapp);
}


.contact-page .contact-footer-button-primary:hover {

    color: #ffffff;

    background: var(--contact-whatsapp-dark);

    transform: translateY(-1px);
}


/* ============================================================
   CTA SECUNDARIO
   ============================================================ */

.contact-page .contact-footer-button-secondary {

    color: var(--contact-white);

    background: transparent;

    border-color: rgba(255,255,255,.25);
}


.contact-page .contact-footer-button-secondary:hover {

    color: var(--contact-white);

    border-color: var(--contact-white);

    transform: translateY(-1px);
}


/* ============================================================
   FOCUS
   ============================================================ */

.contact-page a:focus-visible {

    outline: 3px solid var(--contact-orange);

    outline-offset: 4px;
}


/* ============================================================
   REVEAL
   ============================================================ */

.contact-page .contact-reveal {

    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity .55s ease,
        transform .55s ease;
}


.contact-page .contact-reveal.is-visible {

    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .contact-page .contact-header-content {

        gap: 50px;
    }


    .contact-page .contact-main-grid {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-page .contact-channel-panel {

        max-width: 850px;
    }


    .contact-page .contact-message-grid {

        gap: 60px;
    }

}


/* ============================================================
   TABLET PEQUEÑA
   ============================================================ */

@media (max-width: 780px) {

    .contact-page .contact-shell {

        width: min(
            calc(100% - 36px),
            var(--contact-container)
        );
    }


    .contact-page .contact-header-content {

        grid-template-columns: 1fr;

        align-items: start;

        gap: 38px;

        padding-block: 52px;
    }


    .contact-page .contact-header-side {

        max-width: 620px;

        padding-left: 22px;
    }


    .contact-page .contact-topic-board {

        grid-template-columns: 1fr;
    }


    .contact-page .contact-message-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .contact-page .contact-footer-inner {

        flex-direction: column;

        align-items: flex-start;
    }


    .contact-page .contact-footer-actions {

        width: min(100%, 400px);
    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 560px) {

    .contact-page .contact-shell {

        width: min(
            calc(100% - 28px),
            var(--contact-container)
        );
    }


    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    .contact-page .contact-header-top {

        min-height: 50px;
    }


    .contact-page .contact-status {

        font-size: 12px;
    }


    .contact-page .contact-header-code {

        display: none;
    }


    .contact-page .contact-header-content {

        padding-block: 45px 42px;
    }


    .contact-page .contact-header-copy h1 {

        margin-bottom: 18px;

        font-size: clamp(
            58px,
            18vw,
            80px
        );
    }


    .contact-page .contact-header-copy p {

        font-size: 17px;

        line-height: 1.65;
    }


    .contact-page .contact-header-side span {

        font-size: 12px;
    }


    .contact-page .contact-header-side p {

        font-size: 15px;
    }


    /* --------------------------------------------------------
       MAIN
       -------------------------------------------------------- */

    .contact-page .contact-main {

        padding-block: 50px 58px;
    }


    .contact-page .contact-channel-panel {

        padding: 27px 20px;
    }


    .contact-page .contact-panel-heading {

        margin-bottom: 20px;

        padding-bottom: 20px;
    }


    .contact-page .contact-panel-heading h2 {

        font-size: 31px;
    }


    /* --------------------------------------------------------
       CANALES
       -------------------------------------------------------- */

    .contact-page .contact-channel {

        grid-template-columns:
            58px
            minmax(0,1fr)
            20px;

        gap: 14px;

        min-height: 103px;

        padding-block: 16px;
    }


    .contact-page .contact-channel-symbol {

        width: 52px;
        height: 52px;

        font-size: 24px;
    }


    .contact-page .contact-channel-whatsapp .contact-channel-symbol {

        width: 54px;
        height: 54px;

        font-size: 28px;
    }


    .contact-page .contact-channel-type {

        font-size: 11px;
    }


    .contact-page .contact-channel-info strong {

        font-size: 17px;
    }


    .contact-page .contact-channel-info small {

        font-size: 13px;
    }


    .contact-page .contact-channel-action {

        font-size: 22px;
    }


    .contact-page .contact-panel-note p {

        font-size: 12.5px;
    }


    /* --------------------------------------------------------
       PUNTO DE ENTRADA
       -------------------------------------------------------- */

    .contact-page .contact-orientation-head {

        padding-bottom: 22px;
    }


    .contact-page .contact-orientation-head h2 {

        font-size: 34px;
    }


    .contact-page .contact-orientation-head p {

        font-size: 15px;
    }


    .contact-page .contact-route {

        grid-template-columns:
            56px
            minmax(0,1fr)
            18px;

        gap: 13px;

        min-height: 94px;

        padding-block: 13px;
    }


    /*
     * Antes: 36px.
     * Ahora: 48px.
     */

    .contact-page .contact-route-icon {

        width: 48px;
        height: 48px;

        font-size: 20px;
    }


    .contact-page .contact-route-contact .contact-route-icon {

        width: 50px;
        height: 50px;

        font-size: 22px;
    }


    .contact-page .contact-route-content strong {

        font-size: 15.5px;
    }


    .contact-page .contact-route-content small {

        font-size: 13px;
    }


    /* --------------------------------------------------------
       TEMAS
       -------------------------------------------------------- */

    .contact-page .contact-topics {

        padding-block: 58px;
    }


    .contact-page .contact-topics-intro h2 {

        font-size: 39px;
    }


    .contact-page .contact-topics-intro p {

        font-size: 15px;
    }


    .contact-page .contact-topic {

        grid-template-columns:
            56px
            minmax(0,1fr);

        gap: 15px;

        min-height: 0;

        padding: 23px 19px;
    }


    /*
     * Números claramente visibles.
     */

    .contact-page .contact-topic-number {

        width: 44px;
        height: 44px;

        font-size: 15px;
    }


    .contact-page .contact-topic strong {

        font-size: 17px;
    }


    .contact-page .contact-topic p {

        font-size: 13.5px;

        line-height: 1.62;
    }


    /* --------------------------------------------------------
       MENSAJE
       -------------------------------------------------------- */

    .contact-page .contact-message {

        padding-block: 58px;
    }


    .contact-page .contact-message-title h2 {

        font-size: 41px;
    }


    .contact-page .contact-message-lead {

        font-size: 17px;
    }


    .contact-page .contact-message-points > div {

        grid-template-columns:
            52px
            minmax(0,1fr);

        gap: 14px;

        min-height: 68px;
    }


    .contact-page .contact-message-points span {

        font-size: 14px;
    }


    .contact-page .contact-message-points p {

        font-size: 14px;
    }


    /* --------------------------------------------------------
       CTA FINAL
       -------------------------------------------------------- */

    .contact-page .contact-footer-cta {

        padding-block: 54px;
    }


    .contact-page .contact-footer-inner h2 {

        font-size: 46px;
    }


    .contact-page .contact-footer-inner p {

        font-size: 14px;
    }


    .contact-page .contact-footer-actions {

        width: 100%;
    }


    .contact-page .contact-footer-button {

        width: 100%;

        min-height: 56px;

        font-size: 14px;
    }

}


/* ============================================================
   MÓVIL MUY PEQUEÑO
   ============================================================ */

@media (max-width: 380px) {

    .contact-page .contact-shell {

        width: calc(100% - 24px);
    }


    .contact-page .contact-header-copy h1 {

        font-size: 55px;
    }


    .contact-page .contact-channel {

        grid-template-columns:
            52px
            minmax(0,1fr)
            16px;

        gap: 11px;
    }


    .contact-page .contact-channel-symbol {

        width: 48px;
        height: 48px;

        font-size: 22px;
    }


    .contact-page .contact-channel-whatsapp .contact-channel-symbol {

        width: 50px;
        height: 50px;

        font-size: 26px;
    }


    .contact-page .contact-channel-info strong {

        font-size: 16px;
    }


    .contact-page .contact-route {

        grid-template-columns:
            52px
            minmax(0,1fr)
            16px;
    }


    .contact-page .contact-route-icon {

        width: 46px;
        height: 46px;

        font-size: 19px;
    }


    .contact-page .contact-topic {

        grid-template-columns:
            50px
            minmax(0,1fr);

        padding-inline: 16px;
    }


    .contact-page .contact-topic-number {

        width: 42px;
        height: 42px;

        font-size: 14px;
    }

}


/* ============================================================
   REDUCCIÓN DE MOVIMIENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;
    }


    .contact-page .contact-reveal {

        opacity: 1;

        transform: none;
    }

}