/* Estándar Bticino de formularios: medidas de Figma (nodos 3944:57336 y 4038:31148). */

:root {
    --BticinoForm-ink: #0f0f12; /* Texto principal. */
    --BticinoForm-label: rgba(15, 15, 18, 0.5); /* Etiquetas. */
    --BticinoForm-placeholder: rgba(15, 15, 18, 0.4); /* Texto de ejemplo y flecha del desplegable. */
    --BticinoForm-border: rgba(15, 15, 18, 0.16); /* Borde de los controles. */
    --BticinoForm-border-hover: rgba(15, 15, 18, 0.32); /* Borde al pasar el mouse. */
    --BticinoForm-card-border: rgba(15, 15, 18, 0.12); /* Borde de la tarjeta. */
    --BticinoForm-accent: var(--color-cool-06, #429cde); /* Azul del botón, del foco y de la casilla marcada. */
    --BticinoForm-error: var(--color-brand-red, #ed1c24); /* Rojo de validación. */
    --BticinoForm-muted-bg: #f8f7f5; /* Fondo de solo lectura. */
    --BticinoForm-row-gap: 22px; /* Aire vertical entre campos. */
    --BticinoForm-column-gap: 18px; /* Aire entre columnas. */
    --BticinoForm-control-height: 52px; /* Alto de los controles de una línea. */
    --BticinoForm-radius: 6px; /* Radio de controles, botón y tarjeta. */
}

/* --- Tarjeta del formulario --- */
.BticinoForm {
    margin: 0; /* Sin el margen del form. */
    min-width: 0; /* Puede achicarse dentro de su columna. */
}

.BticinoForm-card {
    padding: 32px 32px 34px; /* Relleno del diseño. */
    border: 1px solid var(--BticinoForm-card-border); /* Borde suave. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: #fff; /* Fondo blanco. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
}

/* Campos apilados con el aire del diseño. */
.BticinoForm-fields {
    display: flex; /* Pila de campos. */
    flex-direction: column; /* En columna. */
    gap: var(--BticinoForm-row-gap); /* Aire entre campos. */
    min-width: 0; /* Puede achicarse. */
}

/* Título del formulario: bloque de contenido del editor de formularios. */
.BticinoForm-card :is(h1, h2, h3) {
    margin: 0; /* El aire lo da la pila. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 24px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold. */
    line-height: 1.1; /* Caja de 26px del diseño. */
    letter-spacing: -0.24px; /* Tracking del diseño. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* --- Sección: fila de columnas --- */
.BticinoForm-section {
    display: flex; /* Columnas lado a lado. */
    gap: var(--BticinoForm-column-gap); /* Aire entre columnas. */
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-column {
    display: flex; /* Pila de campos de la columna. */
    flex-direction: column; /* En columna. */
    flex: 1 1 0; /* Reparte el ancho según la proporción. */
    gap: var(--BticinoForm-row-gap); /* Aire entre campos. */
    min-width: 0; /* Puede achicarse por debajo de su contenido. */
}

/* Proporción de cada columna, en doceavos (la elige el editor). */
.BticinoForm-column--1 { flex-grow: 1; }
.BticinoForm-column--2 { flex-grow: 2; }
.BticinoForm-column--3 { flex-grow: 3; }
.BticinoForm-column--4 { flex-grow: 4; }
.BticinoForm-column--5 { flex-grow: 5; }
.BticinoForm-column--6 { flex-grow: 6; }
.BticinoForm-column--7 { flex-grow: 7; }
.BticinoForm-column--8 { flex-grow: 8; }
.BticinoForm-column--9 { flex-grow: 9; }
.BticinoForm-column--10 { flex-grow: 10; }
.BticinoForm-column--11 { flex-grow: 11; }
.BticinoForm-column--12 { flex-grow: 12; }

/* --- Campo: etiqueta, control, ayuda y error --- */
.BticinoForm-field {
    display: flex; /* Pila del campo. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Aire entre etiqueta y control. */
    min-width: 0; /* Puede achicarse. */
    max-width: 100%; /* Nunca más ancho que la columna. */
    margin: 0; /* Sin márgenes de Bootstrap. */
    padding: 0; /* Ídem (fieldset). */
    border: 0; /* Sin el borde del fieldset. */
}

/* Las piezas no ensanchan la página con palabras largas. */
.BticinoForm-field > * {
    min-width: 0; /* Ceden ancho. */
    max-width: 100%; /* Topan en la columna. */
}

.BticinoForm-label {
    display: block; /* Renglón propio. */
    float: none; /* Anula el float de Bootstrap en legend. */
    width: auto; /* Ídem. */
    margin: 0; /* El aire lo da la pila. */
    padding: 0; /* Sin el relleno del legend. */
    color: var(--BticinoForm-label); /* Gris del diseño. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 10.5px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold. */
    line-height: 1.05; /* Caja de 11px del diseño. */
    letter-spacing: 1.05px; /* Tracking del diseño. */
    text-transform: uppercase; /* Mayúsculas del diseño, se escriba como se escriba. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* El legend no es ítem del flex del fieldset: el aire va como margen. */
legend.BticinoForm-label {
    margin-bottom: 8px; /* Igual que el gap del campo. */
}

.BticinoForm-required {
    margin-inline-start: 2px; /* Separado de la etiqueta. */
}

/* --- Control de una línea, área de texto y desplegable --- */
.BticinoForm-input {
    display: block; /* Ocupa su renglón. */
    width: 100%; /* Ancho de la columna. */
    height: var(--BticinoForm-control-height); /* Alto del diseño. */
    margin: 0; /* Sin márgenes del navegador. */
    padding: 0 18px; /* Relleno lateral del diseño. */
    box-sizing: border-box; /* El borde entra en el alto. */
    border: 1px solid var(--BticinoForm-border); /* Borde del diseño. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: #fff; /* Fondo blanco. */
    color: var(--BticinoForm-ink); /* Texto escrito. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 14px; /* Tamaño del diseño. */
    line-height: 1.3; /* Interlineado. */
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; /* Cambio de estado suave. */
}

.BticinoForm-input::placeholder {
    color: var(--BticinoForm-placeholder); /* Gris del diseño. */
    opacity: 1; /* Firefox lo atenúa por su cuenta. */
}

.BticinoForm-input:hover {
    border-color: var(--BticinoForm-border-hover); /* Borde más marcado al pasar. */
}

.BticinoForm-input:focus {
    outline: none; /* El foco lo dibujan el borde y el halo. */
    border-color: var(--BticinoForm-accent); /* Azul del foco. */
    box-shadow: 0 0 0 3px rgba(66, 156, 222, 0.2); /* Halo del foco. */
}

.BticinoForm-input[readonly],
.BticinoForm-input:disabled {
    background-color: var(--BticinoForm-muted-bg); /* Fondo gris de solo lectura. */
}

/* Validación: form-all.js agrega la clase de inválido (is-invalid por defecto). */
.BticinoForm-input.is-invalid,
.BticinoForm-input.is-invalid:hover {
    border-color: var(--BticinoForm-error); /* Borde rojo. */
}

.BticinoForm-input.is-invalid:focus {
    border-color: var(--BticinoForm-error); /* Sigue rojo con foco. */
    box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.15); /* Halo rojo. */
}

/* Área de texto: alto del diseño, crece solo hacia abajo. */
.BticinoForm-input--textarea {
    height: auto; /* Sin el alto de una línea. */
    min-height: 110px; /* Alto del diseño. */
    padding: 16px 18px; /* Relleno del diseño. */
    resize: vertical; /* No ensancha la página. */
}

/* Fecha: el texto alineado a la izquierda también en Safari. */
.BticinoForm-input--date {
    text-align: left; /* Igual que el resto de los campos. */
}

.BticinoForm-input--date::-webkit-date-and-time-value {
    text-align: left; /* Safari lo centra por defecto. */
}

.BticinoForm-input--date::-webkit-calendar-picker-indicator {
    cursor: pointer; /* El icono se ve clickeable. */
}

/* Desplegable: sin la flecha nativa; la dibuja el envoltorio. */
.BticinoForm-select {
    position: relative; /* Referencia de la flecha. */
}

.BticinoForm-input--select {
    padding-right: 40px; /* Lugar de la flecha. */
    appearance: none; /* Sin la flecha nativa. */
    -webkit-appearance: none; /* Ídem, Safari. */
    overflow: hidden; /* WebKit deja que una opción larga ensanche la página. */
    text-overflow: ellipsis; /* Una opción larga se corta con puntos. */
    cursor: pointer; /* Se ve clickeable. */
}

/* Primera opción con valor vacío ("Selecciona…"): se ve como texto de ejemplo. */
.BticinoForm-input--select:has(option[value=""]:checked) {
    color: var(--BticinoForm-placeholder); /* Gris del diseño. */
}

/* Las opciones de la lista abierta, siempre en el color del texto. */
.BticinoForm-input--select option {
    color: var(--BticinoForm-ink); /* No heredan el gris del texto de ejemplo. */
}

/* Flecha del diseño (triángulo pequeño). */
.BticinoForm-select::after {
    content: ""; /* Dibujo sin texto. */
    position: absolute; /* Sobre el select. */
    top: 50%; /* Centrada en alto. */
    right: 18px; /* Mismo relleno que el texto. */
    width: 0; /* Triángulo hecho con bordes. */
    height: 0; /* Ídem. */
    margin-top: -2px; /* Centrado óptico. */
    border-top: 5px solid var(--BticinoForm-placeholder); /* Punta hacia abajo. */
    border-right: 4px solid transparent; /* Lado. */
    border-left: 4px solid transparent; /* Lado. */
    pointer-events: none; /* El clic pasa al select. */
}

/* --- Ayuda y error --- */
.BticinoForm-help {
    color: var(--BticinoForm-label); /* Gris de las etiquetas. */
    font-size: 12px; /* Más chico que el control. */
    line-height: 1.4; /* Interlineado. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* form-all.js solo le escribe el texto: se muestra mientras tenga texto. */
.BticinoForm-error {
    color: var(--BticinoForm-error); /* Rojo. */
    font-size: 12px; /* Igual que la ayuda. */
    line-height: 1.4; /* Interlineado. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

.BticinoForm-error:empty {
    display: none; /* Sin mensaje no ocupa lugar. */
}

/* --- Casillas de verificación --- */
.BticinoForm-options {
    display: flex; /* Opciones apiladas. */
    flex-direction: column; /* En columna. */
    gap: 10px; /* Aire entre opciones. */
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-options--inline {
    flex-direction: row; /* En línea. */
    flex-wrap: wrap; /* Bajan si no entran. */
    column-gap: 24px; /* Aire entre opciones de la misma línea. */
}

.BticinoForm-options--cols-2,
.BticinoForm-options--cols-3 {
    display: grid; /* Columnas iguales. */
    gap: 10px var(--BticinoForm-column-gap); /* Aire vertical y entre columnas. */
}

.BticinoForm-options--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas. */
}

.BticinoForm-options--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres columnas. */
}

.BticinoForm-check {
    position: relative; /* Referencia de la tilde. */
    display: flex; /* Casilla y texto en línea. */
    flex-wrap: wrap; /* El texto libre de "Otro" baja a su renglón. */
    align-items: flex-start; /* La casilla queda a la altura del primer renglón. */
    gap: 10px; /* Aire del diseño. */
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-check-input {
    flex: none; /* No se comprime. */
    width: 18px; /* Tamaño del diseño. */
    height: 18px; /* Cuadrada. */
    margin: 0; /* Sin el margen de Bootstrap. */
    border: 1px solid var(--BticinoForm-border); /* Borde del diseño. */
    border-radius: 3px; /* Radio del diseño. */
    background-color: #fff; /* Fondo blanco. */
    appearance: none; /* Sin la casilla nativa. */
    -webkit-appearance: none; /* Ídem, Safari. */
    cursor: pointer; /* Se ve clickeable. */
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out; /* Marcado suave. */
}

.BticinoForm-check-input:hover {
    border-color: var(--BticinoForm-border-hover); /* Borde más marcado al pasar. */
}

.BticinoForm-check-input:checked {
    border-color: var(--BticinoForm-accent); /* Azul de marca. */
    background-color: var(--BticinoForm-accent); /* Relleno azul. */
}

.BticinoForm-check-input:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado de la casilla. */
}

/* Tilde blanca sobre la casilla marcada. */
.BticinoForm-check-mark {
    position: absolute; /* Sobre la casilla. */
    top: 0; /* Alineada con la casilla. */
    left: 0; /* Ídem. */
    width: 18px; /* Mismo tamaño que la casilla. */
    height: 18px; /* Ídem. */
    padding: 2px; /* Margen interior de la tilde. */
    box-sizing: border-box; /* El margen entra en el tamaño. */
    fill: none; /* Solo trazo. */
    stroke: #fff; /* Blanca. */
    stroke-width: 3; /* Grosor. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
    opacity: 0; /* Oculta sin marcar. */
    pointer-events: none; /* El clic llega a la casilla. */
}

.BticinoForm-check-input:checked + .BticinoForm-check-mark {
    opacity: 1; /* Visible al marcar. */
}

.BticinoForm-check-label {
    flex: 1 1 0; /* Ocupa el resto del renglón. */
    min-width: 0; /* Puede achicarse. */
    margin: 0; /* Sin el margen de Bootstrap. */
    padding-top: 2px; /* Posición del texto en el diseño. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-size: 13px; /* Tamaño del diseño. */
    line-height: 1.1; /* Caja de 14px del diseño. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
    cursor: pointer; /* Se ve clickeable. */
}

/* Texto libre de "Otro": renglón propio bajo la opción. */
.BticinoForm-check-other {
    flex-basis: 100%; /* Renglón completo. */
}

/* --- Opción única (radio): misma casilla, redonda y con punto --- */
.BticinoForm-check-input--radio {
    border-radius: 50%; /* Redonda. */
}

/* Punto azul con aro blanco: el relleno azul queda dentro de una sombra blanca. */
.BticinoForm-check-input--radio:checked {
    box-shadow: inset 0 0 0 4px #fff; /* Aro blanco de 4px; deja un punto de 8px. */
}

/* --- Campo numérico con prefijo o sufijo --- */
.BticinoForm-affix {
    display: flex; /* Prefijo, control y sufijo en una caja. */
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-affix .BticinoForm-input {
    flex: 1 1 auto; /* El control ocupa el resto. */
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-affix-text {
    display: flex; /* Texto centrado en alto. */
    flex: none; /* No se comprime. */
    align-items: center; /* Centrado vertical. */
    height: var(--BticinoForm-control-height); /* Mismo alto que el control. */
    padding: 0 14px; /* Aire lateral. */
    box-sizing: border-box; /* El borde entra en el alto. */
    border: 1px solid var(--BticinoForm-border); /* Mismo borde que el control. */
    background-color: var(--BticinoForm-muted-bg); /* Fondo gris suave. */
    color: var(--BticinoForm-label); /* Gris de las etiquetas. */
    font-size: 14px; /* Igual que el control. */
    white-space: nowrap; /* No parte. */
}

/* Las esquinas pegadas no se redondean y el borde no se duplica. */
.BticinoForm-affix-text:first-child {
    border-right: 0; /* Comparte el borde con el control. */
    border-radius: var(--BticinoForm-radius) 0 0 var(--BticinoForm-radius); /* Solo esquinas de afuera. */
}

.BticinoForm-affix-text:last-child {
    border-left: 0; /* Comparte el borde con el control. */
    border-radius: 0 var(--BticinoForm-radius) var(--BticinoForm-radius) 0; /* Solo esquinas de afuera. */
}

.BticinoForm-affix-text:first-child + .BticinoForm-input {
    border-top-left-radius: 0; /* Pegado al prefijo. */
    border-bottom-left-radius: 0; /* Ídem. */
}

.BticinoForm-affix .BticinoForm-input:not(:last-child) {
    border-top-right-radius: 0; /* Pegado al sufijo. */
    border-bottom-right-radius: 0; /* Ídem. */
}

/* --- Campo de archivo --- */
.BticinoForm-files,
.BticinoForm-file-item {
    display: flex; /* Archivos apilados. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Igual que el aire del campo. */
    min-width: 0; /* Puede achicarse. */
}

/* La lista vacía (antes de que corra el script) no deja aire. */
.BticinoForm-files:empty {
    display: none; /* Sin hueco. */
}

.BticinoForm-file {
    display: flex; /* Control y botón de quitar en línea. */
    gap: 8px; /* Aire entre los dos. */
    min-width: 0; /* Puede achicarse. */
}

/* Control de archivo: la caja del estándar con el botón nativo restyleado adentro. */
.BticinoForm-input--file {
    flex: 1 1 auto; /* Ocupa el renglón. */
    min-width: 0; /* Puede achicarse. */
    height: auto; /* El alto lo da el relleno. */
    min-height: var(--BticinoForm-control-height); /* Alto del diseño. */
    padding: 9px 18px 9px 9px; /* Botón a 9px del borde; 9 + 32 + 9 + 2 = 52. */
    color: var(--BticinoForm-label); /* Nombre del archivo en gris. */
    font-size: 13px; /* Algo más chico que el texto escrito. */
    line-height: 32px; /* Centrado con el botón. */
    overflow: hidden; /* Un nombre largo no ensancha la página. */
    text-overflow: ellipsis; /* Se corta con puntos. */
    white-space: nowrap; /* En un renglón. */
    cursor: pointer; /* Se ve clickeable. */
}

.BticinoForm-input--file::file-selector-button {
    height: 32px; /* Alto del botón. */
    margin: 0 14px 0 0; /* Aire con el nombre del archivo. */
    padding: 0 14px; /* Relleno lateral. */
    border: 0; /* Sin borde nativo. */
    border-radius: 4px; /* Radio chico, dentro de la caja. */
    background-color: var(--BticinoForm-muted-bg); /* Gris suave. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 13px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    cursor: pointer; /* Se ve clickeable. */
    transition: background-color 0.2s ease-out; /* Cambio suave. */
}

.BticinoForm-input--file:hover::file-selector-button {
    background-color: #eceae6; /* Algo más oscuro al pasar. */
}

/* Quitar un archivo: cuadrado del alto del control. El script lo muestra con d-inline-block. */
.BticinoForm-file-remove {
    flex: none; /* No se comprime. */
    width: var(--BticinoForm-control-height); /* Cuadrado. */
    height: var(--BticinoForm-control-height); /* Ídem. */
    margin: 0; /* Sin márgenes nativos. */
    padding: 17px; /* Ícono de 16px centrado. */
    box-sizing: border-box; /* El relleno entra en el tamaño. */
    border: 1px solid var(--BticinoForm-border); /* Borde del estándar. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: #fff; /* Fondo blanco. */
    color: var(--BticinoForm-label); /* Gris. */
    cursor: pointer; /* Se ve clickeable. */
    transition: border-color 0.2s ease-out, color 0.2s ease-out; /* Cambio suave. */
}

.BticinoForm-file-remove:hover {
    border-color: var(--BticinoForm-border-hover); /* Borde más marcado. */
    color: var(--BticinoForm-ink); /* Ícono más oscuro. */
}

.BticinoForm-file-remove:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado del botón. */
}

.BticinoForm-file-remove svg {
    display: block; /* Sin el hueco de línea. */
    width: 16px; /* Tamaño del ícono. */
    height: 16px; /* Ídem. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Color del botón. */
    stroke-width: 2.5; /* Grosor. */
    stroke-linecap: round; /* Extremos redondeados. */
}

/* Agregar otro archivo: enlace de texto, alineado al inicio. */
.BticinoForm-file-add {
    align-self: flex-start; /* No se estira al ancho del campo. */
}

/* Mensajes del archivo: ocultos hasta que el script les pone d-block (o display: block). */
.BticinoForm-file-message {
    display: none; /* Oculto por defecto. */
}

/* --- Casilla de aceptación (PrivacyConsentField) --- */

/* Enlace dentro del texto: los cinco estados para ganarle al a:hover de Bootstrap, nunca subrayado. */
.BticinoForm-consent-link,
.BticinoForm-consent-link:link,
.BticinoForm-consent-link:visited,
.BticinoForm-consent-link:hover,
.BticinoForm-consent-link:active {
    color: var(--BticinoForm-accent); /* Azul de marca. */
    text-decoration: none; /* Sin subrayado. */
}

.BticinoForm-consent-link:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas suaves. */
}

/* Casilla en rojo mientras se muestra el error (form-all.js no le pone clase). */
.BticinoForm-consent:has(.BticinoForm-error:not(:empty)) .BticinoForm-check-input:not(:checked) {
    border-color: var(--BticinoForm-error); /* Borde rojo. */
}

/* --- Botón de envío: botón estándar del proyecto con los valores del diseño --- */
.BticinoForm-actions {
    margin: 0; /* El aire lo da la pila. */
    min-width: 0; /* Puede achicarse. */
    max-width: 100%; /* Nunca más ancho que la columna. */
}

.BticinoForm-submit {
    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. */
    margin: 0 4px 0 0; /* Reserva los 4px que crece en hover. */
    max-width: min(calc(100% - 4px), 360px); /* Tope de ancho; nunca más que la columna. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    padding: 15px 28px; /* Relleno del diseño. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    border: 0; /* Sin el borde nativo. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: var(--BticinoForm-accent); /* Azul del diseño. */
    color: #fff; /* Texto blanco. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 13.5px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
    text-align: left; /* La flecha queda al final del texto. */
    cursor: pointer; /* Se ve clickeable. */
    /* Capa propia: evita la raya de repintado al agrandarse. */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.2s ease-out, gap 0.2s ease-in-out, margin-right 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Realce, flecha, reserva y tope al mismo ritmo. */
}

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

/* Realce estándar de botones del proyecto. :active lo hace existir en táctil. */
.BticinoForm-submit:hover,
.BticinoForm-submit:focus-visible,
.BticinoForm-submit:active {
    transform: translateZ(0) scale(1.05); /* Acercamiento sutil. */
}

/* La flecha se corre al abrir la separación. */
.BticinoForm-submit:hover,
.BticinoForm-submit:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco. */
    margin-right: 0; /* Cede la reserva: el ancho total no cambia. */
    max-width: min(100%, 364px); /* El tope crece los 4px de la flecha: el texto no se corre. */
}

.BticinoForm-submit:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado del botón. */
}

/* En la última página form-all.js le agrega btn-primary, y Bootstrap 5.1 lo pinta aunque no haya .btn. */
.BticinoForm-submit.btn-primary,
.BticinoForm-submit.btn-primary:is(:hover, :focus, :active, :active:focus) {
    border: 0; /* Sin el borde de Bootstrap. */
    background-color: var(--BticinoForm-accent); /* Azul del estándar. */
    color: #fff; /* Texto blanco. */
    box-shadow: none; /* Sin el halo de Bootstrap. */
}

/* form-all.js lo deshabilita después de enviar. */
.BticinoForm-submit:disabled {
    opacity: 0.6; /* Atenuado. */
    cursor: default; /* Ya no es clickeable. */
    transform: translateZ(0); /* Sin realce. */
}

/* Flecha estándar de LegalLinksSection. */
.BticinoForm-submit-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 botón. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Botón secundario de texto: "Atrás" de las páginas y "Agregar otro archivo". */
.BticinoForm-back {
    margin: 0; /* Sin márgenes nativos. */
    padding: 0; /* Solo el texto. */
    border: 0; /* Sin borde nativo. */
    background: none; /* Sin fondo. */
    color: var(--BticinoForm-accent); /* Azul de marca. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 13.5px; /* Igual que el botón principal. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
    text-align: left; /* Alineado al inicio. */
    text-decoration: none; /* Nunca subrayado. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
    cursor: pointer; /* Se ve clickeable. */
}

.BticinoForm-back:hover {
    opacity: 0.8; /* Atenuado al pasar. */
}

.BticinoForm-back:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas suaves. */
}

/* --- Formulario de varias páginas: pasos --- */
.BticinoForm-steps {
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-steps-list {
    display: flex; /* Pasos en línea. */
    flex-wrap: wrap; /* Bajan si no entran. */
    gap: 12px 24px; /* Aire vertical y entre pasos. */
    margin: 0; /* Sin márgenes de la lista. */
    padding: 0; /* Ídem. */
    list-style: none; /* Sin números nativos. */
}

.BticinoForm-step {
    display: inline-flex; /* Indicador y título en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Aire entre los dos. */
    min-width: 0; /* Puede achicarse. */
}

/* Círculo del paso: número mientras está pendiente. */
.BticinoForm-step-dot {
    display: inline-flex; /* Contenido centrado. */
    flex: none; /* No se comprime. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 24px; /* Tamaño. */
    height: 24px; /* Ídem. */
    box-sizing: border-box; /* El borde entra en el tamaño. */
    border: 1px solid var(--BticinoForm-border); /* Borde del estándar. */
    border-radius: 50%; /* Redondo. */
    background-color: #fff; /* Fondo blanco. */
    color: var(--BticinoForm-label); /* Gris. */
    font-size: 11px; /* Tamaño del número. */
    font-weight: 700; /* Bold. */
    line-height: 1; /* Sin interlineado extra. */
}

/* Paso actual: el script le pone fw-bold al título; el círculo pasa a azul. */
.BticinoForm-step:has(.BticinoForm-step-title.fw-bold) .BticinoForm-step-dot {
    border-color: var(--BticinoForm-accent); /* Azul de marca. */
    background-color: var(--BticinoForm-accent); /* Relleno azul. */
    color: #fff; /* Número blanco. */
}

/* Paso completado: tilde azul sobre blanco. */
.BticinoForm-step-dot--past {
    border-color: var(--BticinoForm-accent); /* Azul de marca. */
    color: var(--BticinoForm-accent); /* Tilde azul. */
}

.BticinoForm-step-dot svg {
    width: 14px; /* Tamaño de la tilde. */
    height: 14px; /* Ídem. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Color del círculo. */
    stroke-width: 3; /* Grosor. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Título del paso: mismo estilo que las etiquetas. */
.BticinoForm-step-title {
    color: var(--BticinoForm-label); /* Gris de las etiquetas. */
    font-size: 10.5px; /* Tamaño de etiqueta. */
    font-weight: 700; /* Bold. */
    line-height: 1.05; /* Caja de 11px. */
    letter-spacing: 1.05px; /* Tracking de etiqueta. */
    text-transform: uppercase; /* Mayúsculas. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* Paso actual en el color del texto; los pasados quedan grises (le gana al text-secondary de Bootstrap). */
.BticinoForm-step-title.fw-bold {
    color: var(--BticinoForm-ink); /* Texto principal. */
}

.BticinoForm-step-title.text-secondary {
    color: var(--BticinoForm-label) !important; /* Bootstrap lo declara con !important. */
}

/* --- Formulario de varias páginas: cada página --- */
/* El script le pone display al contenedor: el diseño va en el div interno. */
.BticinoForm-page-body {
    display: flex; /* Pila de la página. */
    flex-direction: column; /* En columna. */
    gap: var(--BticinoForm-row-gap); /* Aire entre título, campos y botones. */
    min-width: 0; /* Puede achicarse. */
}

.BticinoForm-card .BticinoForm-page-title {
    font-size: 18px; /* Más chico que el título del formulario. */
    letter-spacing: -0.18px; /* Tracking proporcional. */
}

.BticinoForm-page-actions {
    display: flex; /* Siguiente y Atrás en línea. */
    flex-wrap: wrap; /* Bajan si no entran. */
    align-items: center; /* Centrados entre sí. */
    gap: 12px 24px; /* Aire vertical y entre botones. */
    min-width: 0; /* Puede achicarse. */
}

/* --- Bloque de contenido del formulario (textos y títulos del editor) --- */
.BticinoForm-content {
    min-width: 0; /* Puede achicarse. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-size: 14px; /* Igual que los controles. */
    line-height: 1.5; /* Interlineado de lectura. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

.BticinoForm-content > * {
    margin: 0; /* El aire lo da la regla de abajo. */
}

.BticinoForm-content > * + * {
    margin-top: 12px; /* Aire entre párrafos. */
}

/* Enlaces del texto: los cinco estados para ganarle a Bootstrap, nunca subrayados. */
.BticinoForm-content a,
.BticinoForm-content a:link,
.BticinoForm-content a:visited,
.BticinoForm-content a:hover,
.BticinoForm-content a:active {
    color: var(--BticinoForm-accent); /* Azul de marca. */
    text-decoration: none; /* Sin subrayado. */
}

/* --- Mensajes del envío --- */
.BticinoForm-success {
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-size: 16px; /* Legible como confirmación. */
    line-height: 1.4; /* Interlineado. */
}

.BticinoForm-alert {
    margin-bottom: var(--BticinoForm-row-gap); /* Separado de los campos. */
    color: var(--BticinoForm-error); /* Rojo. */
    font-size: 14px; /* Algo mayor que el error de un campo. */
    line-height: 1.4; /* Interlineado. */
}

.BticinoForm-loading {
    padding: 24px 0; /* Aire alrededor del indicador. */
    text-align: center; /* Centrado. */
}

.BticinoForm-spinner {
    display: inline-block; /* Círculo. */
    width: 32px; /* Tamaño. */
    height: 32px; /* Ídem. */
    border: 3px solid var(--BticinoForm-border); /* Aro gris. */
    border-top-color: var(--BticinoForm-accent); /* Tramo azul que gira. */
    border-radius: 50%; /* Redondo. */
    animation: BticinoForm-spin 0.8s linear infinite; /* Giro continuo. */
}

@keyframes BticinoForm-spin {
    to {
        transform: rotate(360deg); /* Vuelta completa. */
    }
}

/* --- Modal de envío exitoso (Figma 4367:72899) --- */

/* Con modal, el mensaje de éxito no se pinta en la tarjeta (form-all.js lo muestra con d-block). */
.BticinoForm--modal .BticinoForm-success {
    display: none !important; /* Le gana al d-block de Bootstrap. */
}

/* La página no se desplaza detrás del modal abierto. */
html:has(.BticinoForm-modal[open]),
html:has(.BticinoForm-formmodal[open]) {
    overflow: hidden; /* Fondo quieto. */
}

/* El dialog nativo solo centra y oscurece: la caja la dibuja el hijo. */
.BticinoForm-modal,
.BticinoForm-formmodal {
    width: 520px; /* Ancho del diseño. */
    max-width: calc(100% - 32px); /* 16px de aire a cada lado en el teléfono. */
    max-height: calc(100% - 32px); /* Ídem en alto. */
    margin: auto; /* Centrado. */
    padding: 0; /* Sin el relleno nativo. */
    border: 0; /* Sin el borde nativo. */
    background: none; /* Sin el fondo nativo. */
    overflow: visible; /* La sombra no se recorta. */
}

.BticinoForm-modal::backdrop,
.BticinoForm-formmodal::backdrop {
    background-color: rgba(15, 15, 18, 0.6); /* Velo oscuro del sitio. */
}

.BticinoForm-modal[open],
.BticinoForm-formmodal[open] {
    animation: BticinoForm-modal-in 0.2s ease-out; /* Entrada suave. */
}

@keyframes BticinoForm-modal-in {
    from {
        opacity: 0; /* Aparece. */
        transform: translateY(8px); /* Sube apenas. */
    }
}

/* Caja: no se desplaza. Arriba la X (absoluta), en el medio el cuerpo y abajo el botón, fijos los dos. */
.BticinoForm-modal-box {
    position: relative; /* Referencia de la X. */
    display: flex; /* Cuerpo y botón apilados. */
    flex-direction: column; /* En columna. */
    max-height: calc(100vh - 32px); /* Nunca más alta que la pantalla. */
    max-height: calc(100dvh - 32px); /* Alto visible real: en iPhone 100vh queda bajo la barra del navegador. */
    box-sizing: border-box; /* El borde entra en el alto. */
    overflow: hidden; /* Lo que se desplaza es el cuerpo, no la caja. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: #fff; /* Fondo blanco. */
    box-shadow: 0 18px 24px rgba(0, 0, 0, 0.28); /* Sombra del diseño. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    text-align: center; /* Textos centrados. */
    outline: none; /* Recibe el foco inicial sin anillo. */
}

/* Cuerpo: ícono, título y texto. Solo se desplaza si la pantalla es muy baja. */
.BticinoForm-modal-body {
    display: flex; /* Pila centrada. */
    flex: 1 1 auto; /* Cede alto antes que el botón. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrada. */
    gap: 18px; /* Aire del diseño. */
    min-height: 0; /* Puede achicarse por debajo de su contenido (si no, no desplaza). */
    padding: 48px 48px 0; /* Relleno del diseño; el de abajo lo pone el botón. */
    overflow-y: auto; /* Desplazamiento en pantallas bajas. */
    overscroll-behavior: contain; /* El gesto no se encadena a la página. */
}

/* Cerrar: cuadrado gris suave arriba a la derecha. Fondo opaco: el cuerpo puede pasar por debajo. */
.BticinoForm-modal-close {
    position: absolute; /* Esquina de la caja. */
    top: 18px; /* Posición del diseño. */
    right: 18px; /* Ídem. */
    display: flex; /* Ícono centrado. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 34px; /* Tamaño del diseño. */
    height: 34px; /* Ídem. */
    margin: 0; /* Sin márgenes nativos. */
    padding: 0; /* Ídem. */
    border: 0; /* Sin borde nativo. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    z-index: 1; /* Sobre el cuerpo cuando se desplaza. */
    background-color: #f3f3f3; /* Gris del diseño (5% de #0f0f12 sobre blanco), opaco. */
    color: rgba(15, 15, 18, 0.55); /* Ícono del diseño. */
    cursor: pointer; /* Se ve clickeable. */
    transition: background-color 0.2s ease-out, color 0.2s ease-out; /* Cambio suave. */
}

.BticinoForm-modal-close:hover {
    background-color: #e7e7e8; /* Más marcado al pasar (10% de #0f0f12 sobre blanco), opaco. */
    color: var(--BticinoForm-ink); /* Ícono más oscuro. */
}

.BticinoForm-modal-close:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado del botón. */
}

.BticinoForm-modal-close svg {
    width: 16px; /* Tamaño del ícono. */
    height: 16px; /* Ídem. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Color del botón. */
    stroke-width: 2.5; /* Grosor. */
    stroke-linecap: round; /* Extremos redondeados. */
}

/* Círculo azul de 88px con la tilde blanca. */
.BticinoForm-modal-icon {
    display: flex; /* Tilde centrada. */
    flex: none; /* No se comprime. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 88px; /* Tamaño del diseño. */
    height: 88px; /* Ídem. */
    border-radius: 50%; /* Redondo. */
    background-color: var(--BticinoForm-accent); /* Azul de marca. */
}

.BticinoForm-modal-icon svg {
    width: 44px; /* Proporción de la tilde del diseño. */
    height: 44px; /* Ídem. */
    fill: none; /* Solo trazo. */
    stroke: #fff; /* Blanca. */
    stroke-width: 2.5; /* Grosor. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

.BticinoForm-modal-title {
    max-width: 100%; /* Nunca más ancho que la caja. */
    margin: 0; /* El aire lo da la pila. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 36px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold de la marca. */
    line-height: 1.1; /* Interlineado de título. */
    letter-spacing: -1.08px; /* Tracking del diseño. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* Tracking normal: el 4.16px del Figma separa letra por letra y no se usa en el sitio. */
.BticinoForm-modal-text {
    max-width: 100%; /* Nunca más ancho que la caja. */
    margin: 0; /* El aire lo da la pila. */
    color: rgba(15, 15, 18, 0.6); /* Gris del diseño. */
    font-size: 16px; /* Tamaño del diseño. */
    line-height: 1.5; /* Interlineado de lectura. */
    white-space: pre-line; /* Respeta los saltos de línea del editor. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
    flex: none; /* Su alto lo topa el max-height, no el cuerpo. */
    max-height: calc(1.5em * 6); /* 6 renglones (144px a 16px); lo que sobra desplaza adentro. */
    overflow-y: auto; /* Desplazamiento del texto largo. */
    overscroll-behavior: contain; /* Al llegar al final, el gesto no mueve el cuerpo. */
    scrollbar-width: thin; /* Barra fina. */
}

/* Con desplazamiento, el script lo hace enfocable para leerlo con teclado. */
.BticinoForm-modal-text:focus-visible {
    outline: 2px solid var(--BticinoForm-accent); /* Anillo de foco estándar. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas suaves. */
}

/* Botón: fuera del cuerpo, SIEMPRE visible. */
.BticinoForm-modal-actions {
    display: flex; /* Botón centrado. */
    flex: none; /* No cede alto. */
    justify-content: center; /* Ídem. */
    min-width: 0; /* Puede achicarse. */
    padding: 18px 48px 40px; /* Aire del diseño con el texto y relleno de la caja. */
}

/* Botón sin flecha (solo cierra): sin la reserva de 4px, que solo sirve para que la flecha se corra. */
.BticinoForm-submit.BticinoForm-submit--no-arrow,
.BticinoForm-submit.BticinoForm-submit--no-arrow:is(:hover, :focus-visible, :active) {
    margin-right: 0; /* El botón queda centrado y no se mueve en hover. */
    max-width: min(100%, 360px); /* Tope fijo: no hay flecha que crezca. */
}

/* El botón como enlace: los cinco estados para ganarle a Bootstrap, nunca subrayado. */
a.BticinoForm-submit,
a.BticinoForm-submit:link,
a.BticinoForm-submit:visited,
a.BticinoForm-submit:hover,
a.BticinoForm-submit:active {
    color: #fff; /* Texto blanco. */
    text-decoration: none; /* Sin subrayado. */
}

/* --- Formulario en modal (se abre con un enlace a #identificador) --- */

/* Más ancho que el de éxito: entra un formulario de dos columnas. */
.BticinoForm-formmodal {
    width: 720px; /* Ancho del formulario en modal. */
}

/* Caja: no se desplaza; el formulario (y la X, que va con el título) desplaza adentro. */
.BticinoForm-formmodal-box {
    position: relative; /* Referencia de la X. */
    display: flex; /* El área que desplaza ocupa el alto disponible. */
    flex-direction: column; /* En columna. */
    max-height: calc(100vh - 32px); /* Nunca más alta que la pantalla. */
    max-height: calc(100dvh - 32px); /* Alto visible real en iPhone. */
    overflow: hidden; /* Lo que se desplaza es el área interna. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: #fff; /* Fondo blanco. */
    box-shadow: 0 18px 24px rgba(0, 0, 0, 0.28); /* Misma sombra que el modal de éxito. */
    outline: none; /* Recibe el foco inicial sin anillo. */
}

.BticinoForm-formmodal-scroll {
    position: relative; /* Referencia de la X, que va adentro y se desplaza con el título (BTCN-354). */
    flex: 1 1 auto; /* Ocupa el alto disponible. */
    min-height: 0; /* Puede achicarse (si no, no desplaza). */
    overflow-y: auto; /* Formulario largo: desplaza adentro. */
    overscroll-behavior: contain; /* El gesto no se encadena a la página. */
}

/* Dentro del modal, la tarjeta pierde su borde: el borde lo da la caja. */
.BticinoForm-formmodal .BticinoForm-card {
    border: 0; /* Sin borde doble. */
    border-radius: 0; /* Las esquinas las recorta la caja. */
}

/* El título no pasa por debajo de la X. */
.BticinoForm-formmodal .BticinoForm-card :is(h1, h2, h3):first-child,
.BticinoForm-formmodal .BticinoForm-fields > :first-child :is(h1, h2, h3) {
    padding-right: 44px; /* Ancho de la X más aire. */
}

/* Aviso en el editor de páginas: este formulario se abre como modal en el sitio. */
.BticinoForm-editor-note {
    margin-bottom: 12px; /* Separado de la tarjeta. */
    padding: 10px 14px; /* Relleno. */
    border: 1px dashed var(--BticinoForm-accent); /* Borde punteado azul. */
    border-radius: var(--BticinoForm-radius); /* Radio estándar. */
    background-color: rgba(66, 156, 222, 0.08); /* Fondo azul muy suave. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
    font-size: 13px; /* Chico. */
    line-height: 1.4; /* Interlineado. */
    overflow-wrap: anywhere; /* Un identificador largo parte. */
}

/* --- Editor de formularios del backoffice (FormsDefault.cshtml) --- */
.BticinoForm-editor {
    padding: 32px; /* Mismo relleno que la tarjeta. */
    background-color: #fff; /* Fondo blanco. */
    color: var(--BticinoForm-ink); /* Texto principal. */
    font-family: var(--font-brand); /* Tipografía de marca. */
}

/* En el editor no hay pila con gap: el aire va como margen. */
.BticinoForm-editor .BticinoForm-field,
.BticinoForm-editor .BticinoForm-section,
.BticinoForm-editor .BticinoForm-actions,
.BticinoForm-editor .BticinoForm-steps,
.BticinoForm-editor .BticinoForm-content {
    margin-bottom: var(--BticinoForm-row-gap); /* Aire entre campos. */
}

.BticinoForm-editor .BticinoForm-column .BticinoForm-field {
    margin-bottom: 0; /* Dentro de la columna el aire lo da el gap. */
}

/* --- Móvil: el diseño no lo dibuja; columnas apiladas y tarjeta más compacta --- */
@media (max-width: 500px) {

    .BticinoForm-card {
        padding: 24px 20px; /* Relleno reducido. */
    }

    .BticinoForm-section {
        flex-direction: column; /* Una columna. */
        gap: var(--BticinoForm-row-gap); /* Aire vertical entre las columnas apiladas. */
    }

    .BticinoForm-options--cols-2,
    .BticinoForm-options--cols-3 {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
    }

    .BticinoForm-modal-body {
        padding: 48px 24px 0; /* Relleno reducido a los lados. */
    }

    .BticinoForm-modal-actions {
        padding: 18px 24px 32px; /* Ídem, y menos abajo. */
    }

    .BticinoForm-modal-icon {
        width: 72px; /* Círculo algo menor. */
        height: 72px; /* Ídem. */
    }

    .BticinoForm-modal-icon svg {
        width: 36px; /* Tilde proporcional. */
        height: 36px; /* Ídem. */
    }

    .BticinoForm-modal-title {
        font-size: 28px; /* Título menor en el teléfono. */
        letter-spacing: -0.84px; /* Tracking proporcional. */
    }

    .BticinoForm-modal-text {
        font-size: 15px; /* Algo menor en el teléfono. */
    }
}

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

    .BticinoForm-input,
    .BticinoForm-check-input,
    .BticinoForm-submit,
    .BticinoForm-file-remove,
    .BticinoForm-input--file::file-selector-button,
    .BticinoForm-modal-close {
        transition: none; /* Sin interpolación. */
    }

    .BticinoForm-modal[open],
    .BticinoForm-formmodal[open] {
        animation: none; /* Aparece sin movimiento. */
    }

    .BticinoForm-submit:hover,
    .BticinoForm-submit:focus-visible,
    .BticinoForm-submit:active {
        transform: translateZ(0); /* Sin acercamiento. */
        gap: 6px; /* La flecha no se corre. */
        margin-right: 4px; /* La reserva se queda. */
        max-width: min(calc(100% - 4px), 360px); /* El tope no crece. */
    }

    .BticinoForm-spinner {
        animation-duration: 2s; /* Giro más lento. */
    }
}