/* HelpCalloutSection.css — Banda de cierre con imagen y dos botones. Widget general, reutilizable
   en cualquier vertiente. Nodo "SEC · CTA" (499:29731). Tipografía: site.css.
   Va a sangre completa; solo el contenido se centra. El Figma solo trae escritorio. */

/* --- Sección: banda de imagen a sangre completa. El alto lo da el contenido. --- */
.HelpCalloutSection {
    position: relative; /* Origen de la imagen y del velo. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    /* clamp y no los 290px fijos: con alto fijo, en un monitor ancho el contenedor se vuelve más
       panorámico que la imagen y object-fit:cover hace zoom. El 22.66vw es la proporción exacta de
       la imagen (580/2560), así que calza sin recortar hasta ~2825px. */
    min-height: clamp(290px, 22.66vw, 640px);
    background-color: #101828; /* Respaldo si se usa sin imagen. */
    overflow: hidden; /* Recorta las capas al borde de la sección. */
    display: flex; /* Para centrar el contenido. */
    align-items: center; /* Centrado vertical. */
}

/* Imagen de fondo, opcional. */
.HelpCalloutSection-image {
    position: absolute; /* Detrás del contenido. */
    inset: 0; /* Cubre la sección entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Recorta en vez de deformar. */
    object-position: center; /* Conserva el centro al recortar. */
    pointer-events: none; /* No intercepta los clics de los botones. */
}

/* Velo del diseño: sube el contraste del texto blanco. Solo se pinta junto con la imagen. */
.HelpCalloutSection-veil {
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre la sección entera. */
    background-color: rgba(152, 152, 152, 0.51); /* Gris translúcido del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Contenido: textos y botones, centrados en el techo del sitio y alineados a la izquierda. --- */
.HelpCalloutSection-content {
    position: relative; /* Por encima de la imagen y el velo. */
    z-index: 1; /* Sobre las capas de fondo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila los textos y la fila de botones. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Texto alineado a la izquierda. */
    gap: 12px; /* Separación del diseño. */
    padding: 56px 48px 58px; /* Rellenos del diseño. */
}

/* Etiqueta sobre el título. */
.HelpCalloutSection-eyebrow {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: normal; /* El diseño no abre las letras acá. */
    color: #ffffff; /* Blanco pleno. */
    white-space: nowrap; /* En una sola línea. */
}

/* Título de la sección. */
.HelpCalloutSection-title {
    margin: 0; /* Quita el margen propio del título. */
    width: 100%; /* Ocupa el ancho para poder envolver. */
    font-size: 32px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: -0.02em; /* Compactado del diseño. */
    color: #ffffff; /* Blanco pleno. */
    line-height: 1.2; /* Interlineado de titular. */
}

/* Bajada del título. */
.HelpCalloutSection-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 400; /* Regular del diseño. */
    color: rgba(255, 255, 255, 0.78); /* Blanco atenuado: baja la jerarquía. */
}

/* Fila de los dos botones. */
.HelpCalloutSection-buttons {
    display: flex; /* Botones en línea. */
    align-items: center; /* Centrados entre sí. */
    flex-wrap: wrap; /* Bajan de renglón antes que desbordar. */
    gap: 10px 12px; /* Separación del diseño, vertical y horizontal. */
    padding-top: 8px; /* Aire con la bajada. */
}

/* Botón, en su forma común a los dos. */
.HelpCalloutSection-button {
    display: inline-flex; /* Etiqueta y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    justify-content: center; /* Etiqueta centrada. */
    padding: 17px 30px; /* Rellenos del diseño. */
    border-radius: 6px; /* Esquinas redondeadas. */
    font-size: 18px; /* Tamaño del secundario; el primario lo sube a 20px. */
    font-weight: 400; /* Regular del diseño. */
    text-decoration: none; /* Es un botón, no un enlace de texto. */
    white-space: nowrap; /* La etiqueta no se parte. */
    transform: scale(1); /* Punto de partida del acercamiento; transform no dispara reflow. */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Suaviza el hover. */
}

    /* Estado activo. :active cubre el toque en táctil, donde :hover no se sostiene. */
    .HelpCalloutSection-button:hover,
    .HelpCalloutSection-button:focus-visible,
    .HelpCalloutSection-button:active {
        transform: scale(1.05); /* Acercamiento sutil. */
        text-decoration: none; /* Le gana al a:hover subrayado de Bootstrap. */
    }

/* Flecha del botón primario. El secundario no la lleva. */
.HelpCalloutSection-button-arrow {
    display: inline-flex; /* Se ciñe al SVG. */
    align-items: center; /* Centrada con la etiqueta. */
    margin-left: 8px; /* Separación de la etiqueta. */
}

/* Trazo de la flecha. */
.HelpCalloutSection-button-arrow-icon {
    width: 14px; /* Tamaño del diseño. */
    height: 14px; /* Cuadrada. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 3; /* Grosor del trazo. */
    fill: none; /* Sin relleno: solo trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Botón primario. */
.HelpCalloutSection-button--primary {
    background-color: #429cde; /* Azul del diseño. */
    color: #ffffff; /* Texto blanco. */
    border: none; /* Sin contorno. */
    font-size: 20px; /* Un punto más grande que el secundario, como el diseño. */
}

    /* Primario con el puntero encima. */
    .HelpCalloutSection-button--primary:hover {
        color: #ffffff; /* Se repite: el estado por defecto de los enlaces lo cambia. */
        background-color: #3a8bc4; /* Un punto más oscuro, sin salir del azul de marca. */
    }

/* Botón secundario: traslúcido sobre la imagen. */
.HelpCalloutSection-button--secondary {
    background-color: rgba(36, 56, 69, 0.55); /* Relleno translúcido. */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Contorno claro. */
    color: #ffffff; /* Texto blanco. */
    backdrop-filter: blur(9px); /* Difumina la imagen de atrás. */
}

    /* Secundario con el puntero encima. */
    .HelpCalloutSection-button--secondary:hover {
        color: #ffffff; /* Se repite: el estado por defecto de los enlaces lo cambia. */
        background-color: rgba(255, 255, 255, 0.24); /* Relleno más presente. */
    }

/* --- Tablet: hasta 1024px. Solo cambian los rellenos. --- */
@media (max-width: 1024px) {
    .HelpCalloutSection-content {
        padding: 40px 32px 44px; /* Rellenos más ajustados. */
    }
}

/* --- Mobile: hasta 500px. --- */
@media (max-width: 500px) {
    .HelpCalloutSection-content {
        padding: 32px 24px 36px; /* Rellenos mínimos. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */