/* NumberedStepsBanner.css -- Banda con foto de fondo, encabezado y pasos numerados en tarjetas de
   vidrio. Nodos 3567:12179 (PC) y 3567:12322 (mobile); tablet sin nodo. Medidas del estándar del
   proyecto: banda de HelpCalloutSection, encabezado de InfoCardsSection, tarjeta de InfoCardsSection
   y flecha de LegalLinksSection. Tipografía base: site.css. */

/* --- Sección: banda a sangre completa. El relleno lateral va acá, no en el contenido. --- */
.NumberedStepsBanner {
    position: relative; /* Origen de la foto y del velo. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding-inline: 48px; /* Relleno lateral de escritorio. */
    overflow: hidden; /* Recorta la foto al borde de la sección. */
}

/* Foto de fondo: cubre la banda sin deformarse. */
.NumberedStepsBanner-image {
    position: absolute; /* Detrás del contenido. */
    inset: 0; /* Cubre la sección entera, relleno incluido. */
    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 clics. */
}

/* Velo del nodo: sólido plano, no degradado. */
.NumberedStepsBanner-veil {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la sección entera. */
    background-color: rgba(15, 15, 18, 0.8); /* Relleno del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* Contenido centrado en el techo del sitio: encabezado y pasos apilados. */
.NumberedStepsBanner-content {
    position: relative; /* Por encima de la foto y el velo. */
    z-index: 1; /* Sobre las capas de fondo. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    display: flex; /* Encabezado y pasos en columna. */
    flex-direction: column; /* En vertical. */
    gap: 24px; /* Separación estándar entre encabezado y contenido. */
    padding-block: 56px; /* Relleno vertical de la banda de HelpCalloutSection. */
}

/* --- Encabezado: textos a la izquierda y enlace abajo a la derecha. --- */
.NumberedStepsBanner-header {
    display: flex; /* Textos y enlace en línea. */
    flex-wrap: wrap; /* El enlace baja si no entra. */
    align-items: flex-end; /* Enlace a la altura del pie del título. */
    justify-content: space-between; /* Enlace al extremo derecho. */
    gap: 12px 32px; /* Separación vertical y horizontal. */
}

/* Ninguna pieza pasa del ancho disponible. */
.NumberedStepsBanner-header > *,
.NumberedStepsBanner-heading > *,
.NumberedStepsBanner-step > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

.NumberedStepsBanner-heading {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 9px; /* Separación estándar del encabezado. */
    min-width: 0; /* Puede achicarse. */
}

/* Etiqueta con el cuadrado de marca. */
.NumberedStepsBanner-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: flex-start; /* Cuadrado arriba si el texto parte renglón, como el nodo de mobile. */
    gap: 10px; /* Separación del diseño. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado de la etiqueta. */
.NumberedStepsBanner-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    margin-top: 6px; /* Centrado en el primer renglón: (14 x 1,35 - 7) / 2. */
    background-color: #ffffff; /* Blanco sobre la foto. */
}

/* Texto de la etiqueta: el estándar, ya igual en el nodo. */
.NumberedStepsBanner-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
    font-size: 14px; /* Tamaño estándar. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado estándar. */
    letter-spacing: 0.5px; /* Apertura estándar. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #ffffff; /* Blanco sobre la foto. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título: toca los 36px estándar al piso del rango de escritorio; el nodo dice 42px Black. */
.NumberedStepsBanner-title {
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(24px, 3vw, 36px); /* 36 / 1200 * 100. */
    font-weight: 700; /* Bold estándar. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* Cierre del diseño. */
    color: #ffffff; /* Blanco sobre la foto. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Enlaces: los cinco estados le ganan al a:hover de Bootstrap; nunca subrayados. --- */
.NumberedStepsBanner-header-link,
.NumberedStepsBanner-header-link:link,
.NumberedStepsBanner-header-link:visited,
.NumberedStepsBanner-header-link:hover,
.NumberedStepsBanner-header-link:focus,
.NumberedStepsBanner-header-link:active {
    color: rgba(255, 255, 255, 0.78); /* Blanco atenuado: enlace secundario. */
    text-decoration: none; /* Nunca subrayado. */
}

.NumberedStepsBanner-step-link,
.NumberedStepsBanner-step-link:link,
.NumberedStepsBanner-step-link:visited,
.NumberedStepsBanner-step-link:hover,
.NumberedStepsBanner-step-link:focus,
.NumberedStepsBanner-step-link:active {
    color: #ffffff; /* Blanco pleno. */
    text-decoration: none; /* Nunca subrayado. */
}

/* Leyenda y flecha con la animación estándar; el nodo dice 12,5px. */
.NumberedStepsBanner-header-link,
.NumberedStepsBanner-step-link {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    max-width: min(calc(100% - 4px), 280px); /* Tope: ~30 caracteres por renglón; deja libres los 4px del hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    font-size: 14px; /* Tamaño estándar del enlace. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado de la leyenda. */
    text-align: left; /* La flecha queda al final del texto. */
    transition: gap 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Flecha y tope al mismo ritmo. */
}

/* Leyenda: dos renglones como máximo; lo que sobra se corta con puntos suspensivos. */
.NumberedStepsBanner-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. */
}

/* Va pegado a la derecha: reserva los 4px que crece en hover para que el texto no se corra. */
.NumberedStepsBanner-header-link {
    margin-inline-end: 4px; /* Reserva para el crecimiento del hover. */
    transition: gap 0.2s ease-in-out, max-width 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out; /* Flecha, tope y reserva al mismo ritmo. */
}

.NumberedStepsBanner-header-link:hover,
.NumberedStepsBanner-header-link:focus-visible {
    margin-inline-end: 0; /* Cede la reserva: solo avanza la flecha. */
}

/* El enlace del paso va al pie: alinea los enlaces de una fila. */
.NumberedStepsBanner-step-link {
    margin-top: auto; /* Al pie de la tarjeta. */
    padding-top: 4px; /* Aire con la descripción. */
}

.NumberedStepsBanner-header-link:hover,
.NumberedStepsBanner-header-link:focus-visible,
.NumberedStepsBanner-step-link:hover,
.NumberedStepsBanner-step-link:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco: la flecha se corre. */
    max-width: min(100%, 284px); /* El tope crece los 4px de la flecha: el texto no se corre ni se aprieta. */
}

/* Anillo de foco blanco, visible sobre la foto. */
.NumberedStepsBanner-header-link:focus-visible,
.NumberedStepsBanner-step-link:focus-visible {
    outline: 2px solid #ffffff; /* Blanco. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas del anillo. */
}

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

/* Enlace atenuado: trazo sólido y la transparencia en el svg, o el vértice se pinta dos veces. */
.NumberedStepsBanner-header-link .NumberedStepsBanner-arrow {
    stroke: #ffffff; /* Blanco sólido. */
    opacity: 0.78; /* El mismo atenuado del texto. */
}

/* --- Pasos: en escritorio, columnas iguales de 220px como mínimo (con 3 pasos, tres columnas). --- */
.NumberedStepsBanner-steps {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Las que entren, iguales. */
    grid-auto-rows: auto; /* Cada fila mide su tarjeta más alta. */
    gap: 16px; /* Separación del nodo. */
    margin: 0; /* Sin el margen de la lista. */
    padding: 0; /* Sin la sangría de la lista. */
    list-style: none; /* El número lo pinta la tarjeta. */
}

/* Tarjeta de vidrio: sin desenfoque, el nodo no lo trae. */
.NumberedStepsBanner-step {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* El enlace solo del ancho de su texto. */
    gap: 12px; /* Separación del nodo. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    box-sizing: border-box; /* El relleno no suma ancho. */
    padding: 22px 24px 24px; /* Relleno estándar de tarjeta. */
    background-color: rgba(255, 255, 255, 0.09); /* Relleno del nodo. */
    border: 1px solid rgba(255, 255, 255, 0.19); /* Contorno del nodo. */
    border-radius: 6px; /* Esquinas estándar de tarjeta. */
}

/* Número y línea del paso. */
.NumberedStepsBanner-step-index {
    display: flex; /* Número y línea en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
}

/* Número a dos dígitos: cuerpo de la etiqueta estándar; el nodo dice 13px Black. */
.NumberedStepsBanner-step-number {
    font-size: 14px; /* Tamaño estándar de etiqueta. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado estándar. */
    color: #ffffff; /* Blanco. */
    font-variant-numeric: tabular-nums; /* Todos los números del mismo ancho. */
}

/* Línea del nodo. */
.NumberedStepsBanner-step-line {
    flex: none; /* No se comprime. */
    width: 28px; /* Largo del nodo. */
    height: 1px; /* Grosor del nodo. */
    background-color: #ffffff; /* Blanco. */
}

/* Título del paso: el nodo dice 17px. */
.NumberedStepsBanner-step-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 20px; /* Tamaño estándar de título de tarjeta. */
    font-weight: 700; /* Bold. */
    line-height: 1.3; /* Interlineado de título de tarjeta. */
    color: #ffffff; /* Blanco. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción del paso: el nodo dice 12,5px al 60%. */
.NumberedStepsBanner-step-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 15px; /* Tamaño estándar de descripción de tarjeta. */
    font-weight: 400; /* Regular. */
    line-height: 23px; /* Interlineado estándar de descripción de tarjeta. */
    color: rgba(255, 255, 255, 0.78); /* Blanco atenuado, legible sobre el velo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Tablet: hasta 1024px. Sin nodo: mismo armado con medidas intermedias. --- */
@media (max-width: 1024px) {

    .NumberedStepsBanner {
        padding-inline: 40px; /* Relleno lateral de tablet. */
    }

    .NumberedStepsBanner-content {
        gap: 20px; /* Separación de tablet. */
        padding-block: 40px; /* Relleno vertical de tablet. */
    }

    .NumberedStepsBanner-heading {
        gap: 6px; /* Separación de tablet. */
    }

    /* Un paso por fila: sin columnas angostas ni tarjetas huérfanas en ningún ancho de tablet. */
    .NumberedStepsBanner-steps {
        grid-template-columns: minmax(0, 1fr); /* Una sola columna. */
        gap: 12px; /* Separación del nodo de mobile. */
    }

    /* Tarjeta en dos columnas: número a la izquierda, textos a la derecha. */
    .NumberedStepsBanner-step {
        display: grid; /* Dos columnas. */
        grid-template-columns: auto minmax(0, 1fr); /* Número y textos. */
        align-items: start; /* Cada pieza arriba de su celda. */
        gap: 8px 24px; /* Separación vertical y entre columnas. */
        padding: 20px 24px; /* Relleno de tablet. */
    }

    /* El número ocupa la columna izquierda a lo alto de la tarjeta. */
    .NumberedStepsBanner-step-index {
        grid-row: 1 / span 3; /* Junto al título, la descripción y el enlace. */
        padding-top: 4px; /* A la altura del primer renglón del título: (26 - 18,9) / 2. */
    }

    /* Textos y enlace en la columna derecha, en orden. */
    .NumberedStepsBanner-step > :not(.NumberedStepsBanner-step-index) {
        grid-column: 2; /* Columna de textos. */
    }

    .NumberedStepsBanner-step-link {
        margin-top: 0; /* En una sola columna no hay enlaces que alinear. */
        justify-self: start; /* Del ancho de su texto, no de la celda. */
    }
}

/* --- Mobile: hasta 500px. Encabezado apilado y una tarjeta por fila, como el nodo. --- */
@media (max-width: 500px) {

    .NumberedStepsBanner {
        padding-inline: 20px; /* Relleno lateral de mobile. */
    }

    .NumberedStepsBanner-content {
        padding-block: 32px; /* Relleno vertical de mobile. */
    }

    .NumberedStepsBanner-header {
        flex-direction: column; /* Enlace debajo del título. */
        align-items: flex-start; /* Pegado a la izquierda. */
    }

    .NumberedStepsBanner-title {
        font-size: 24px; /* Tamaño de mobile estándar. */
    }

    /* Tarjeta apilada como el nodo: número arriba y textos debajo. */
    .NumberedStepsBanner-step {
        display: flex; /* Piezas apiladas. */
        gap: 12px; /* Separación del nodo. */
        padding: 20px; /* Relleno del nodo. */
    }

    .NumberedStepsBanner-step-index {
        padding-top: 0; /* Sin la alineación de tablet. */
    }

    .NumberedStepsBanner-step-title {
        font-size: 18px; /* Título de tarjeta de mobile. */
    }
}

/* Sin animación para quien la desactivó en el sistema. */
@media (prefers-reduced-motion: reduce) {

    .NumberedStepsBanner-header-link,
    .NumberedStepsBanner-step-link {
        transition: none; /* Sin interpolación. */
    }

    .NumberedStepsBanner-header-link:hover,
    .NumberedStepsBanner-header-link:focus-visible,
    .NumberedStepsBanner-step-link:hover,
    .NumberedStepsBanner-step-link:focus-visible {
        gap: 6px; /* La flecha no se corre. */
        max-width: min(calc(100% - 4px), 280px); /* El tope no crece. */
    }

    .NumberedStepsBanner-header-link:hover,
    .NumberedStepsBanner-header-link:focus-visible {
        margin-inline-end: 4px; /* La reserva se queda. */
    }
}

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