/* ContactHelpSection.css — "Estamos aquí para ayudarte": tarjeta oscura de contacto, zona del
   formulario, recuadro de la visita y "¿Qué estás buscando?".
   Nodos 4031:90431 (PC, 1280), tablet en la página 4031:68541 (768) y 4031:90646 (mobile, 375).
   PC: dos columnas que fluyen cada una por su lado. TABLET Y MOBILE: las columnas se disuelven
   (display: contents) y una grilla reordena las piezas. Tipografía base: site.css. */

/* --- Sección. --- */
.ContactHelpSection {
    --ContactHelpSection-ink: #0f0f12; /* Casi negro del diseño. */
    --ContactHelpSection-heading: #222a30; /* Títulos de sección del nodo. */
    --ContactHelpSection-accent: #429cde; /* Celeste del nodo. */
    --ContactHelpSection-soft: #f8f7f5; /* Fondo del recuadro y de los íconos. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--ContactHelpSection-ink); /* Color base. */
}

    .ContactHelpSection *,
    .ContactHelpSection *::before,
    .ContactHelpSection *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    /* :where() deja el reinicio con el peso de una clase: el espaciado de cada pieza le gana. */
    .ContactHelpSection :where(h2, h3, p, ul) {
        margin: 0; /* El espaciado lo ponen los contenedores. */
    }

    .ContactHelpSection :where(ul) {
        padding: 0; /* Sin sangría de lista. */
        list-style: none; /* Sin viñetas. */
    }

.ContactHelpSection-inner {
    display: flex; /* Título y columnas apilados. */
    flex-direction: column; /* Ídem. */
    gap: 48px; /* Separación del nodo. */
    width: 100%; /* Ancho disponible. */
    max-width: 1280px; /* Ancho del nodo de PC. */
    margin-inline: auto; /* Centrado. */
    padding: 64px 80px; /* Relleno del nodo. */
}

.ContactHelpSection-title {
    font-size: 36px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
    color: var(--ContactHelpSection-heading); /* Color del nodo. */
    text-align: center; /* Centrado. */
}

/* --- Columnas (PC): cada una fluye por su lado. --- */
.ContactHelpSection-columns {
    display: grid; /* Dos columnas. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 544 + 544 del nodo. */
    align-items: start; /* Cada columna con su alto. */
    gap: 32px; /* Separación del nodo. */
}

.ContactHelpSection-col {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    gap: 24px; /* Separación del nodo. */
    min-width: 0; /* El contenido no ensancha la columna. */
}

.ContactHelpSection-col--right {
    padding: 32px; /* Relleno del nodo "col · derecha". */
}

/* --- Tarjeta oscura de contacto. --- */
.ContactHelpSection-info {
    display: flex; /* Grupos apilados. */
    flex-direction: column; /* Ídem. */
    gap: 20px; /* Separación del nodo. */
    padding: 48px 40px; /* Relleno del nodo. */
    border-radius: 8px; /* Esquinas del nodo. */
    background-color: #1b2d3a; /* Azul noche del nodo. */
    color: #ffffff; /* Texto blanco. */
}

.ContactHelpSection-group {
    display: flex; /* Textos del grupo apilados. */
    flex-direction: column; /* Ídem. */
    gap: 20px; /* Separación del nodo. */
}

.ContactHelpSection-info-label {
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    text-transform: uppercase; /* "LLÁMANOS". */
    color: var(--ContactHelpSection-accent); /* Celeste del nodo. */
}

.ContactHelpSection-info-headline {
    font-size: 32px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.15; /* Interlineado. */
    overflow-wrap: anywhere; /* No desborda. */
}

.ContactHelpSection-info-phone {
    font-size: 16px; /* Tamaño del nodo. */
    color: #b2cce5; /* Celeste grisáceo del nodo. */
}

    /* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
    .ContactHelpSection-info-phone a,
    .ContactHelpSection-info-phone a:link,
    .ContactHelpSection-info-phone a:visited,
    .ContactHelpSection-info-phone a:hover,
    .ContactHelpSection-info-phone a:focus,
    .ContactHelpSection-info-phone a:active {
        color: inherit; /* Mismo color. */
        text-decoration: none; /* Nunca subrayado. */
    }

        .ContactHelpSection-info-phone a:hover {
            color: #ffffff; /* Se aclara al pasar. */
        }

.ContactHelpSection-divider {
    display: block; /* Rayita. */
    width: 40px; /* Ancho del nodo. */
    height: 2px; /* Alto del nodo. */
    background-color: rgba(66, 156, 222, 0.4); /* Celeste translúcido del nodo. */
}

.ContactHelpSection-info-caption {
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    color: #a6bfd9; /* Gris azulado del nodo. */
}

.ContactHelpSection-info-schedule {
    font-size: 15px; /* Tamaño del nodo. */
    line-height: 1.2; /* Interlineado del nodo (dos renglones en 36 px). */
    overflow-wrap: anywhere; /* Un renglón largo (hasta 60) sin espacios no desborda. */
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.ContactHelpSection-info-link,
.ContactHelpSection-info-link:link,
.ContactHelpSection-info-link:visited,
.ContactHelpSection-info-link:hover,
.ContactHelpSection-info-link:focus,
.ContactHelpSection-info-link:active {
    color: var(--ContactHelpSection-accent); /* Celeste del nodo. */
    text-decoration: none; /* Nunca subrayado. */
}

.ContactHelpSection-info-link {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    align-self: flex-start; /* Ancho de su texto. */
    max-width: calc(100% - 4px); /* Deja los 4px que crece en hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    transition: gap 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Flecha y tope al mismo ritmo. */
}

    .ContactHelpSection-info-link:hover {
        color: #ffffff; /* Se aclara al pasar. */
    }

    /* La flecha se corre al abrir la separación; el texto no se mueve. */
    .ContactHelpSection-info-link:hover,
    .ContactHelpSection-info-link:focus-visible {
        gap: 10px; /* Separación estándar en hover y foco. */
        max-width: 100%; /* El tope crece los 4px de la flecha. */
    }

/* Leyenda: dos renglones como máximo, con puntos suspensivos. */
.ContactHelpSection-info-link-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

.ContactHelpSection-info-note {
    font-size: 13px; /* Tamaño del nodo. */
    color: #a6bfd9; /* Gris azulado del nodo. */
}

/* Flecha estándar de LegalLinksSection. */
.ContactHelpSection-arrow {
    flex: none; /* No se comprime. */
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Color del texto. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Zona del formulario: el widget del formulario trae su propio estilo. */
.ContactHelpSection-form {
    min-width: 0; /* No ensancha la columna. */
}

/* --- Recuadro "Qué incluye · Tu visita". --- */
.ContactHelpSection-visit {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    gap: 14px; /* Separación del nodo. */
    width: 340px; /* Ancho del nodo de PC. */
    max-width: 100%; /* No desborda. */
    padding: 26px 26px 28px; /* Relleno del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: var(--ContactHelpSection-soft); /* Fondo del nodo. */
}

.ContactHelpSection-visit-label {
    font-size: 10.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    letter-spacing: 0.12em; /* 1,26px del nodo. */
    text-transform: uppercase; /* "QUÉ INCLUYE". */
    color: var(--ContactHelpSection-accent); /* Celeste del nodo. */
}

.ContactHelpSection-visit-title {
    font-size: 22px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: var(--ContactHelpSection-ink); /* Casi negro. */
}

.ContactHelpSection-visit-list {
    display: flex; /* Puntos apilados. */
    flex-direction: column; /* Ídem. */
    gap: 14px; /* Separación del nodo. */
}

    .ContactHelpSection-visit-list li {
        position: relative; /* Origen del cuadrito. */
        padding-left: 15px; /* 5 del cuadrito + 10 de separación del nodo. */
        font-size: 13px; /* Tamaño del nodo. */
        line-height: 1.25; /* Interlineado. */
        color: rgba(15, 15, 18, 0.65); /* Gris del nodo. */
        overflow-wrap: anywhere; /* Un punto largo (hasta 120) sin espacios no desborda. */
    }

        /* Cuadrito celeste de 5 px del nodo. */
        .ContactHelpSection-visit-list li::before {
            content: ""; /* Viñeta. */
            position: absolute; /* A la izquierda. */
            top: 0.5em; /* Centrado con el primer renglón. */
            left: 0; /* Ídem. */
            width: 5px; /* Tamaño del nodo. */
            height: 5px; /* Ídem. */
            background-color: var(--ContactHelpSection-accent); /* Celeste. */
            transform: translateY(-50%); /* Centrado. */
        }

/* --- "¿Qué estás buscando?". --- */
.ContactHelpSection-links {
    display: flex; /* Título y tarjetas apilados. */
    flex-direction: column; /* Ídem. */
    gap: 24px; /* Separación del nodo. */
}

.ContactHelpSection-links-title {
    font-size: 24px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: var(--ContactHelpSection-heading); /* Color del nodo. */
}

.ContactHelpSection-cards {
    display: flex; /* Tarjetas apiladas. */
    flex-direction: column; /* Ídem. */
    gap: 16px; /* Separación del nodo. */
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.ContactHelpSection-card,
.ContactHelpSection-card:link,
.ContactHelpSection-card:visited,
.ContactHelpSection-card:hover,
.ContactHelpSection-card:focus,
.ContactHelpSection-card:active {
    color: #243746; /* Azul noche de la flecha del nodo. */
    text-decoration: none; /* Nunca subrayado. */
}

.ContactHelpSection-card {
    display: flex; /* Ícono, textos y flecha en una fila. */
    align-items: center; /* Centrados. */
    gap: 14px; /* Separación del nodo. */
    min-height: 100px; /* Alto del nodo. */
    padding: 18px; /* Relleno del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Borde del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #ffffff; /* Fondo. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Respuesta al pasar. */
}

    .ContactHelpSection-card:hover {
        border-color: rgba(15, 15, 18, 0.45); /* Borde más marcado al pasar. */
        box-shadow: 0 6px 18px rgba(15, 15, 18, 0.06); /* Sombra suave. */
    }

    /* Flecha sola al final: avanza 4px sin transform; su lugar total no cambia y los textos no se mueven. */
    .ContactHelpSection-card .ContactHelpSection-arrow {
        margin-inline-start: 0; /* Toma los 4px que cede a la derecha. */
        margin-inline-end: 4px; /* Reserva para avanzar. */
        transition: margin-inline-start 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out; /* Ritmo estándar. */
    }

    .ContactHelpSection-card:hover .ContactHelpSection-arrow,
    .ContactHelpSection-card:focus-visible .ContactHelpSection-arrow {
        margin-inline-start: 4px; /* Avanza hacia la punta. */
        margin-inline-end: 0; /* Cede la reserva. */
    }

.ContactHelpSection-card-icon {
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem. */
    justify-content: center; /* Ídem. */
    flex: none; /* No se comprime. */
    width: 38px; /* Tamaño del nodo. */
    height: 38px; /* Ídem. */
    overflow: hidden; /* Recorta el ícono. */
    border-radius: 10px; /* Esquinas del nodo. */
    background-color: var(--ContactHelpSection-soft); /* Fondo del nodo. */
}

    .ContactHelpSection-card-icon img {
        width: 22px; /* Ícono dentro del recuadro. */
        height: 22px; /* Ídem. */
        object-fit: contain; /* Sin deformar. */
    }

.ContactHelpSection-card-body {
    display: flex; /* Título y subtítulo apilados. */
    flex: 1 1 0; /* Ocupa lo que sobra. */
    flex-direction: column; /* Ídem. */
    gap: 3px; /* Separación del nodo. */
    min-width: 0; /* No desborda. */
}

.ContactHelpSection-card-title {
    font-size: 15px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    color: var(--ContactHelpSection-ink); /* Casi negro. */
}

.ContactHelpSection-card-subtitle {
    font-size: 11.5px; /* Tamaño del nodo. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
}

/* --- Paginación de las tarjetas (BTCN-398): "Página 1 de 2 · ‹ Anterior | Siguiente ›", el mismo
   patrón de DocumentLibrary y LocationsGallery. La muestra el script. --- */
.ContactHelpSection-cards > [hidden] {
    display: none; /* Tarjetas de las otras páginas. */
}

.ContactHelpSection-pager {
    display: flex; /* Estado y leyendas en una sola fila. */
    flex-wrap: wrap; /* En un ancho muy chico las leyendas bajan en lugar de salirse. */
    align-items: center; /* Centrados verticalmente. */
    justify-content: space-between; /* Estado a la izquierda, leyendas a la derecha. */
    gap: 4px 16px; /* Separación mínima al envolver. */
    padding-top: 12px; /* Aire con el divisor. */
    border-top: 1px solid rgba(15, 15, 18, 0.1); /* Divisor. */
}

    .ContactHelpSection-pager[hidden] {
        display: none; /* Sin script no se pinta. */
    }

/* "Página 1 de 2": discreto. */
.ContactHelpSection-pager-status {
    min-width: 0; /* No desborda la fila. */
    font-size: 12px; /* Pequeño: no satura. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al cambiar de página. */
    letter-spacing: 0.2px; /* Apertura leve. */
    color: rgba(15, 15, 18, 0.5); /* Gris del diseño. */
    overflow-wrap: anywhere; /* Un texto largo sin espacios no se sale. */
}

.ContactHelpSection-pager-actions {
    display: flex; /* Leyendas en línea. */
    flex-wrap: wrap; /* Dos leyendas largas bajan en lugar de salirse. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha. */
    gap: 12px; /* Separación entre leyendas. */
    min-width: 0; /* No desborda la fila. */
    margin-left: auto; /* Quedan a la derecha aunque la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. */
.ContactHelpSection-pager-button {
    display: inline-flex; /* Texto e ícono en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto e ícono. */
    min-width: 0; /* El texto largo se parte en lugar de estirar el botón. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 8px 2px; /* Zona de toque cómoda sin caja visible. */
    border: 0; /* Sin contorno. */
    background: transparent; /* Sin fondo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 14px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    text-align: start; /* Un texto que se parte queda alineado. */
    color: var(--ContactHelpSection-accent); /* Celeste del nodo. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease; /* Respuesta suave. */
}

    /* Divisor entre las dos leyendas cuando se ven las dos. */
    .ContactHelpSection-pager-button:not([hidden]) ~ .ContactHelpSection-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .ContactHelpSection-pager-button[hidden] {
        display: none; /* En el extremo, la leyenda que no aplica no se ve. */
    }

    .ContactHelpSection-pager-button:hover,
    .ContactHelpSection-pager-button:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    .ContactHelpSection-pager-button:focus-visible {
        outline: 2px solid var(--color-cool-neutral-02, var(--ContactHelpSection-accent)); /* Anillo de foco de los demás controles. */
        outline-offset: 2px;
    }

.ContactHelpSection-pager-text {
    min-width: 0; /* Puede partirse dentro del botón. */
    overflow-wrap: anywhere; /* Un texto largo sin espacios no se sale. */
}

.ContactHelpSection-pager-icon {
    flex: none; /* No se comprime con un texto largo. */
    width: 14px; /* Tamaño del glifo. */
    height: 14px; /* Cuadrado. */
    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. */
}

/* Entrada animada de cada página (la pone el script): las tarjetas entran desde abajo, una tras otra. */
.ContactHelpSection-enter {
    animation: ContactHelpSection-enter 0.32s ease-out both; /* Entrada; "both" la oculta durante el retraso. */
    animation-delay: var(--ContactHelpSection-delay, 0ms); /* Escalonado que pone el script. */
}

@keyframes ContactHelpSection-enter {
    from {
        opacity: 0; /* Aparece... */
        transform: translateY(10px); /* ...desde abajo. */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ContactHelpSection-info-link:focus-visible,
.ContactHelpSection-info-phone a:focus-visible,
.ContactHelpSection-card:focus-visible {
    outline: 2px solid var(--color-cool-neutral-02, var(--ContactHelpSection-accent)); /* Anillo de foco de los demás controles. */
    outline-offset: 2px;
}

/* --- Tablet: hasta 1024px. Tarjeta y lista lado a lado; formulario y visita debajo. --- */
@media (max-width: 1024px) {

    .ContactHelpSection-inner {
        padding: 56px 24px; /* Relleno de tablet. */
    }

    .ContactHelpSection-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 364 + 364 del nodo. */
        grid-template-areas:
            "info links"
            "form form"
            "visit visit";
        gap: 24px; /* Separación. */
    }

    /* Las columnas se disuelven: sus piezas pasan a ser celdas de la grilla. */
    .ContactHelpSection-col {
        display: contents;
    }

    .ContactHelpSection-info { grid-area: info; }
    .ContactHelpSection-form { grid-area: form; }
    .ContactHelpSection-visit { grid-area: visit; width: 100%; }
    .ContactHelpSection-links { grid-area: links; }
}

/* --- Mobile: hasta 767px (nodo 4031:90646). Todo apilado. --- */
@media (max-width: 767px) {

    .ContactHelpSection-inner {
        padding: 40px 16px; /* Relleno del nodo. */
    }

    .ContactHelpSection-title {
        font-size: 24px; /* Tamaño del nodo. */
    }

    .ContactHelpSection-columns {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
        grid-template-areas:
            "info"
            "form"
            "visit"
            "links";
        gap: 20px; /* Separación del nodo. */
    }

    .ContactHelpSection-visit {
        padding-inline: 16px; /* Relleno del nodo. */
    }

    .ContactHelpSection-links-title {
        font-size: 18px; /* Tamaño del nodo. */
    }

    .ContactHelpSection-card {
        border-color: rgba(15, 15, 18, 0.1); /* Borde del nodo de mobile. */
    }
}

/* --- Movimiento reducido. --- */
@media (prefers-reduced-motion: reduce) {

    .ContactHelpSection-info-link,
    .ContactHelpSection-card,
    .ContactHelpSection-card .ContactHelpSection-arrow,
    .ContactHelpSection-pager-button {
        transition: none; /* Sin animaciones. */
    }

    .ContactHelpSection-enter {
        animation: none; /* Las tarjetas de la página aparecen sin entrada. */
    }

    /* La flecha no se corre: separación y tope de reposo. */
    .ContactHelpSection-info-link:hover,
    .ContactHelpSection-info-link:focus-visible {
        gap: 6px; /* Separación de reposo. */
        max-width: calc(100% - 4px); /* El tope no crece. */
    }

    .ContactHelpSection-card:hover .ContactHelpSection-arrow,
    .ContactHelpSection-card:focus-visible .ContactHelpSection-arrow {
        margin-inline-start: 0; /* Se queda en reposo. */
        margin-inline-end: 4px; /* La reserva se queda. */
    }
}