/* SupportContactSection.css — Sección de soporte técnico: cabecera, puntos y tarjetas de contacto.
   Nodos 2611:38001 (PC, contenido de 1184), 2611:38307 (tablet, mesa de 768) y 2611:38582 (mobile,
   mesa de 375).
   ESCRITORIO: puntos a la izquierda y contactos apilados en la columna derecha de 430. TABLET: todo
   apilado y los contactos lado a lado. MOBILE: contactos uno debajo del otro. El eyebrow es el estándar del proyecto en los tres rangos (los nodos de
   tablet y mobile traen un círculo celeste, mismo criterio que el resto de los widgets).
   CON MUCHOS ÍTEMS: los puntos muestran 5 y un "Ver más"; los contactos van de 2 en 2 con flechas y
   puntos de página debajo. El script solo alterna [hidden]; el movimiento es un fundido corto. */

/* --- Sección. --- */
.SupportContactSection {
    --SupportContactSection-ink: #0f0f12; /* Casi negro del diseño. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 64px 48px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--SupportContactSection-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.SupportContactSection-container {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    gap: 28px; /* Separación del nodo entre cabecera y cuerpo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Cabecera: eyebrow y título a todo el ancho. Sin nota (se quitó por pedido de QA: en mobile,
   a la derecha del título, lo apretaba en una columna angosta). --- */
.SupportContactSection-header {
    min-width: 0; /* El título envuelve dentro del ancho. */
}

.SupportContactSection-heading {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación del nodo. */
    flex: 1 1 auto; /* Toma el ancho sobrante. */
    min-width: 0; /* Deja que el título envuelva. */
}

/* --- Eyebrow estándar. --- */
.SupportContactSection-eyebrow {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.SupportContactSection-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

/* --- Título: 38px en el piso del rango de escritorio (1200px). --- */
.SupportContactSection-title {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(30px, 3.1667vw, 38px); /* 38 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: var(--SupportContactSection-ink);
}

/* --- Cuerpo: puntos a la izquierda y contactos a la derecha. --- */
.SupportContactSection-body {
    display: flex; /* Dos columnas. */
    align-items: flex-start; /* Cada columna con su alto. */
    gap: 28px; /* Separación del nodo. */
}

/* --- Puntos: cada uno con una línea arriba. --- */
.SupportContactSection-points-wrap {
    display: flex; /* Lista y botón apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* El botón con su ancho. */
    flex: 1 1 0; /* Toma el ancho sobrante. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.SupportContactSection-points {
    width: 100%; /* Ancho de la columna. */
    margin: 0; /* Sin margen de la lista. */
    padding: 4px 0 0; /* Relleno superior del nodo. */
    list-style: none; /* Sin viñetas. */
}

.SupportContactSection-point {
    padding: 12px 0 18px; /* 12 de la línea al texto y 18 abajo, como el nodo. */
    border-top: 1px solid rgba(15, 15, 18, 0.12); /* Línea del nodo. */
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.8); /* Gris del nodo. */
}

    /* Los puntos que pasan del tope y los contactos de otras páginas. Sin esto, el display de la
       regla de arriba le gana al atributo. */
    .SupportContactSection-point[hidden],
    .SupportContactSection-contact-item[hidden] {
        display: none;
    }

/* Botón "Ver más" / "Ver menos". */
.SupportContactSection-more {
    display: inline-flex; /* Texto y chevron en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Separación entre texto y chevron. */
    margin-top: 4px; /* Aire desde el último punto. */
    padding: 10px 0; /* Área táctil cómoda. */
    border: 0; /* Sin el borde propio del botón. */
    background: none; /* Sin el fondo propio del botón. */
    font: inherit; /* Pila de marca. */
    font-size: 14px; /* Tamaño de los enlaces de sección. */
    font-weight: 700; /* Bold, como los enlaces de sección. */
    color: var(--color-cool-neutral-02); /* #243746 del eyebrow. */
    cursor: pointer; /* Indica que es accionable. */
}

.SupportContactSection-more-icon {
    width: 16px; /* Tamaño del glifo. */
    height: 16px; /* Cuadrado. */
    stroke: currentColor; /* Del color del texto. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
    transition: transform 0.25s ease; /* Gira al desplegar. */
}

/* Desplegado: el chevron apunta hacia arriba. */
.SupportContactSection-more[aria-expanded="true"] .SupportContactSection-more-icon {
    transform: rotate(180deg);
}

/* El chevron empuja hacia abajo con el puntero encima, como la flecha de los enlaces. */
.SupportContactSection-more[aria-expanded="false"]:hover .SupportContactSection-more-icon,
.SupportContactSection-more[aria-expanded="false"]:focus-visible .SupportContactSection-more-icon {
    transform: translateY(3px);
}

/* --- Contactos: columna derecha de 430 sobre 1184, de 2 en 2. --- */
.SupportContactSection-contacts-wrap {
    display: flex; /* Lista y controles apilados. */
    flex-direction: column; /* En columna. */
    gap: 16px; /* Mismo aire que entre tarjetas. */
    flex: 0 0 36.32%; /* 430 / 1184. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.SupportContactSection-contacts {
    display: flex; /* Tarjetas apiladas. */
    flex-direction: column; /* En columna. */
    gap: 16px; /* Separación del nodo. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.SupportContactSection-contact-item {
    display: flex; /* La tarjeta estira al alto de la fila en tablet. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.SupportContactSection-contact {
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    gap: 6px; /* Separación del nodo. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    width: 100%; /* Ancho de la columna. */
    padding: 22px 24px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Borde del nodo. */
    color: var(--SupportContactSection-ink); /* Color base del texto. */
    text-decoration: none; /* Sin subrayado cuando es enlace. */
    transition: border-color 0.25s ease; /* Realce. */
}

    /* Bootstrap colorea y subraya los enlaces con el puntero encima. */
    .SupportContactSection-contact.is-linked:hover,
    .SupportContactSection-contact.is-linked:focus-visible {
        color: var(--SupportContactSection-ink);
        text-decoration: none;
        border-color: rgba(15, 15, 18, 0.35); /* El borde se marca, como en el resto de las tarjetas. */
    }

.SupportContactSection-contact-label {
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    letter-spacing: 1.4px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.SupportContactSection-contact-value {
    font-size: 30px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    overflow-wrap: anywhere; /* Un número largo no desborda. */
}

.SupportContactSection-contact-detail {
    font-size: 13px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
}

/* --- Controles del slider: flechas a los lados y puntos de página al centro. --- */
.SupportContactSection-pager {
    display: flex; /* En línea. */
    align-items: center; /* Centrados entre sí. */
    justify-content: center; /* Al centro de la columna. */
    gap: 16px; /* Separación entre flechas y puntos. */
}

/* Flechas: círculos blancos del estándar, más chicos que los de cabecera. */
.SupportContactSection-arrow {
    flex: 0 0 auto; /* No se comprimen. */
    width: 40px; /* Diámetro. */
    height: 40px; /* Cuadrado, para que el radio dé un círculo. */
    padding: 0; /* Sin el relleno propio del botón. */
    border-radius: 50%; /* Círculo. */
    border: 1px solid rgba(15, 15, 18, 0.14); /* Contorno tenue. */
    background-color: #ffffff; /* Fondo blanco. */
    color: rgba(15, 15, 18, 0.65); /* Chevron gris. */
    font-size: 16px; /* Tamaño del chevron. */
    display: flex; /* Para centrar el chevron. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    cursor: pointer; /* Indica que es accionable. */
    transition: transform 0.2s ease-out, color 0.2s ease-out; /* Suaviza el realce. */
}

    /* Realce estándar de botones del proyecto. :active es el que lo hace existir en táctil. */
    .SupportContactSection-arrow:hover,
    .SupportContactSection-arrow:focus-visible,
    .SupportContactSection-arrow:active {
        transform: scale(1.05);
        color: var(--SupportContactSection-ink); /* El chevron se oscurece. */
    }

.SupportContactSection-chevron-icon {
    width: 1em; /* Sigue el font-size del botón. */
    height: 1em; /* Cuadrado. */
    display: block; /* Sin la línea base que lo corre hacia abajo. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

.SupportContactSection-dots {
    display: flex; /* En línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 4px; /* El área táctil de cada punto ya separa. */
}

/* Cada punto es un botón de 20px de área con el círculo dibujado al centro. */
.SupportContactSection-dot {
    position: relative; /* Ancla del círculo. */
    width: 20px; /* Área táctil. */
    height: 20px; /* Cuadrada. */
    padding: 0; /* Sin el relleno propio del botón. */
    border: 0; /* Sin el borde propio del botón. */
    background: none; /* Sin el fondo propio del botón. */
    cursor: pointer; /* Indica que es accionable. */
}

    .SupportContactSection-dot::before {
        content: ""; /* El círculo visible. */
        position: absolute; /* Centrado en el área. */
        inset: 0; /* Ocupa el área... */
        margin: auto; /* ...y se centra. */
        width: 8px; /* Diámetro. */
        height: 8px; /* Cuadrado. */
        border-radius: 50%; /* Círculo. */
        background-color: rgba(15, 15, 18, 0.2); /* Gris de las líneas, más marcado. */
        transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease; /* Cambio de página. */
    }

    /* La página actual se estira en una píldora oscura. */
    .SupportContactSection-dot.is-active::before {
        width: 18px; /* Píldora. */
        border-radius: 4px; /* Extremos redondeados. */
        background-color: var(--color-cool-neutral-02); /* #243746 del eyebrow. */
    }

/* Anuncio para el lector de pantalla: invisible en pantalla. */
.SupportContactSection-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Tablet (hasta 1024px): todo apilado y los contactos lado a lado. --- */
@media (max-width: 1024px) {
    .SupportContactSection {
        padding: 48px 32px; /* Rellenos del nodo. */
    }

    .SupportContactSection-container {
        gap: 24px; /* Separación del nodo. */
    }

    .SupportContactSection-heading {
        gap: 24px; /* El nodo separa eyebrow y título con el gap de la sección. */
    }

    .SupportContactSection-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .SupportContactSection-title {
        font-size: min(3.6458vw, 28px); /* 28px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: 1.25; /* Interlineado de titular. */
    }

    .SupportContactSection-body {
        flex-direction: column; /* Puntos arriba y contactos abajo. */
        align-items: stretch; /* Ambos a todo el ancho. */
        gap: 24px; /* Separación del nodo. */
    }

    .SupportContactSection-points-wrap {
        flex: 0 0 auto; /* Ya no comparte fila. */
    }

    .SupportContactSection-points {
        display: flex; /* Puntos apilados. */
        flex-direction: column; /* En columna. */
        gap: 14px; /* Separación del nodo. */
        padding-top: 0; /* Sin el relleno de escritorio. */
    }

    .SupportContactSection-point {
        padding: 10px 0 0; /* 10 de la línea al texto; sin relleno abajo. */
        font-size: 16px; /* Tamaño del nodo de tablet. */
        font-weight: 400; /* Regular del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
        color: var(--SupportContactSection-ink); /* Negro del nodo de tablet. */
    }

    .SupportContactSection-contacts-wrap {
        flex: 0 0 auto; /* Ya no comparte fila. */
        gap: 14px; /* Mismo aire que entre tarjetas. */
    }

    .SupportContactSection-contacts {
        display: grid; /* Tarjetas en fila. */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos por fila, como el nodo. */
        gap: 14px; /* Separación del nodo. */
    }

    .SupportContactSection-contact {
        gap: 4px; /* Separación del nodo. */
        padding: 20px; /* Rellenos del nodo. */
        border-color: transparent; /* Sin borde en el nodo de tablet. */
        border-radius: 8px; /* Redondeo del nodo. */
    }

    .SupportContactSection-contact-label {
        font-weight: 600; /* Semibold del nodo de tablet. */
        letter-spacing: 0.33px; /* Apertura del nodo. */
        color: rgba(15, 15, 18, 0.55); /* Gris del nodo de tablet. */
    }

    .SupportContactSection-contact-value {
        font-size: 28px; /* Tamaño del nodo de tablet. */
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
    }

    .SupportContactSection-contact-detail {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
        color: rgba(15, 15, 18, 0.55); /* Gris del nodo de tablet. */
    }
}

/* --- Mobile (hasta 500px): contactos uno debajo del otro. --- */
@media (max-width: 500px) {
    .SupportContactSection {
        padding: 32px 20px; /* Rellenos del nodo. */
    }

    .SupportContactSection-title {
        font-size: min(5.8667vw, 22px); /* 22px sobre la mesa de 375. */
    }

    .SupportContactSection-point {
        font-size: 14px; /* Tamaño del nodo de mobile. */
    }

    .SupportContactSection-contacts {
        grid-template-columns: minmax(0, 1fr); /* Una por fila. */
    }

    .SupportContactSection-contact-value {
        font-size: 24px; /* Tamaño del nodo de mobile. */
    }
}

/* Movimiento reducido: sin transiciones ni realces. El script tampoco anima. */
@media (prefers-reduced-motion: reduce) {
    .SupportContactSection-contact,
    .SupportContactSection-more-icon,
    .SupportContactSection-arrow,
    .SupportContactSection-dot::before {
        transition: none;
    }
}