/* ==========================================================================
   Landing Page — Umano
   Bootstrap como base. CSS custom solo donde Bootstrap no alcanza.
   ========================================================================== */

:root {
    /* --- ALIASES A LOS TOKENS CORE (core/css/tokens.css) ---
       La paleta vive en una sola fuente; aquí solo se mantienen los
       nombres que usa el resto de landing.css. */
    --color-primary: var(--color-brand-blue);
    --color-primary-hover: var(--color-brand-blue-dark);
    --color-primary-active: #092d5a;   /* active Trust del sistema */
    --color-secondary: var(--color-brand-orange);
    --color-secondary-light: #fff5f2; /* sin equivalente core (tinte CTA naranja) */
    --color-accent: var(--color-brand-purple);
    --color-accent-hover: var(--accent);
    --color-green: var(--color-brand-green);
    --color-green-hover: color-mix(in srgb, #35803f 84%, black);   /* hover Care */
    --color-green-active: color-mix(in srgb, #35803f 68%, black);  /* active Care */

    /* Anillo de foco (C12): 2px del color de la acción + offset 2px + halo 4px
       del mismo tono al 18%. Azul por defecto; los contenedores/acciones
       redefinen el par (verde care, naranja support, blanco sobre gradiente). */
    --lp-ring: #1261ab;
    --lp-halo: rgba(18, 97, 171, 0.18);

    /* Motion del sistema (C14) */
    --lp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --lp-ease-out: cubic-bezier(0, 0, 0.2, 1);
    /* Botones: solo color/borde/sombra/anillo a 150ms, sin desplazamientos */
    --lp-btn-transition: background-color 150ms var(--lp-ease-standard),
        border-color 150ms var(--lp-ease-standard),
        color 150ms var(--lp-ease-standard),
        box-shadow 150ms var(--lp-ease-standard),
        outline-color 150ms var(--lp-ease-standard);

    --color-white: var(--color-neutral-white);
    --color-light: var(--color-neutral-50);
    --color-gray-200: var(--color-neutral-200);
    --color-gray-300: var(--input-border);          /* antes indefinida */
    --color-gray-500: var(--color-neutral-text-general); /* #808080 → #6b6b6b (WCAG 1.4.3) */
    --color-gray-700: var(--color-neutral-700);
    --color-dark: var(--color-neutral-text-main);

    /* Tipografías propias de la landing (el core no define tokens de familia) */
    --font-display: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.15);

    /* --- OLD COMPATIBILITY VARIABLES --- */
    --umano-orange:  var(--color-secondary);
    --umano-blue:    var(--color-primary);
    --umano-purple:  var(--color-accent);
    --umano-yellow:  #F5A623;
    --umano-bg:      #F0EFED;
    --umano-white:   var(--color-white);
    --umano-dark:    var(--color-dark);
    --umano-muted:   var(--color-gray-500);

    --umano-header-padding-top: 3rem;
    --umano-header-padding-bottom: 1.5rem;
    --umano-header-padding-top-mobile: 1.5rem;
    --umano-header-padding-bottom-mobile: 1rem;

    /* Ancho único de la columna de contenido del panel derecho: todas las
       vistas usan el mismo para que nada "salte" al navegar (consistencia). */
    --landing-col-width: 560px;
}

html, body { margin: 0; padding: 0; height: 100%; }

.landing-page {
    background-color: var(--umano-bg);
    font-family: var(--font-body);
    min-height: 100vh;
}

.hover-bg-light:hover {
    background-color: #f8f9fa !important;
}

/* Wrapper que fuerza el layout horizontal en desktop.
   Separado del body para evitar conflictos con Bootstrap. */
.landing-wrapper {
    display: flex !important;
    flex-direction: row !important;
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

/* ==========================================================================
   Panel izquierdo — Carrusel
   ========================================================================== */
.landing-carousel-panel {
    width: 50%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: #fafafa;
    display: block;
}

.carousel-top-half {
    height: 52%;
    width: 100%;
    background-color: #fafafa;
}

.placeholder-avatar {
    width: 64px;
    height: 64px;
    background-color: #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.carousel-bottom-half {
    --carousel-wave-h: 140px;
    height: 48%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2.2rem 3rem 4rem 3rem !important;
    box-sizing: border-box;
    z-index: 2;
}

/* Onda entre la imagen y el gradiente: el bloque sube --carousel-wave-h sobre
   la imagen (margen negativo, mismo alto extra y mismo padding extra, así el
   texto no se mueve) y su franja superior se recorta con la onda del slide
   (máscara SVG estirada a 100% x 140px, como el antiguo divisor). Capa 2 =
   resto del bloque opaco, solapada 1px con la onda. Al ser un solo fondo no
   hay costura a ningún ancho. Sin soporte de mask: borde recto (respaldo). */
.carousel-wave-mask {
    position: relative;
    margin-top: calc(-1 * var(--carousel-wave-h));
    height: calc(48% + var(--carousel-wave-h));
    padding-top: calc(2.2rem + var(--carousel-wave-h)) !important;
    -webkit-mask-image: var(--carousel-wave), linear-gradient(#000, #000);
    mask-image: var(--carousel-wave), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--carousel-wave-h), 100% calc(100% - var(--carousel-wave-h) + 1px);
    mask-size: 100% var(--carousel-wave-h), 100% calc(100% - var(--carousel-wave-h) + 1px);
    -webkit-mask-position: top left, bottom left;
    mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Gradientes de marca 135° (E3; azul lidera, verde oscurecido con color-mix
   para dar profundidad). background-color = respaldo si no hay color-mix.
   Blanco sobre el color más claro de cada uno: hero 6.3:1, elegant 5.1:1
   (#8659b8: el púrpura #b28cd3 da 2.8:1), corporate 4.9:1, wellness 4.9:1;
   el texto queda en la zona de mayor contraste (medido en navegador). */
.carousel-gradient-hero {
    background-color: #0d4580;
    background-image: linear-gradient(135deg, #1261ab 0%, #0d4580 55%, color-mix(in srgb, #35803f 70%, black) 100%);
}
.carousel-gradient-elegant {
    background-color: #1261ab;
    background-image: linear-gradient(135deg, #1261ab 0%, #8659b8 100%);
}
.carousel-gradient-corporate {
    background-color: #1261ab;
    background-image: linear-gradient(135deg, #1261ab 0%, #35803f 100%);
}
.carousel-gradient-wellness {
    background-color: #35803f;
    background-image: linear-gradient(135deg, #35803f 0%, color-mix(in srgb, #35803f 68%, black) 100%);
}

.carousel-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.carousel-description {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 480px;
}

/* Indicadores (dentro de cada slide, bajo la descripción): cada botón es un
   área táctil de 44x44 (C15) transparente y el punto visible (10px / 28px
   activo) se dibuja con ::before, así el tamaño visual no cambia. */
.carousel-indicator-mobile {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto !important;
}
/* Inactivo: blanco al 75% (>=3:1 sobre los 4 gradientes); activo: blanco
   pleno y más ancho (el estado no depende solo del color). */
.carousel-indicator-mobile::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.75);
    transform: translate(-50%, -50%);
    transition: width 300ms var(--lp-ease-standard), background-color 300ms var(--lp-ease-standard);
}
.carousel-indicator-mobile.active::before {
    width: 28px;
    background-color: #ffffff;
}

/* Clases de transiciones de AlpineJS: cambio de slide en 500ms (C14) */
.transition-fade-in {
    transition: opacity 500ms var(--lp-ease-standard);
}
.transition-fade-out {
    transition: opacity 500ms var(--lp-ease-standard);
}

/* Botón pausar/reanudar carrusel (WCAG 2.2.2), versión sutil: velo oscuro
   translúcido + borde claro fino + icono blanco al 75% (>=3:1 sobre los 4
   gradientes, medido). Visual de 28px; ::before amplía el área táctil a 44px. */
.carousel-pause-btn {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    color: var(--color-neutral-white);
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto !important;
    transition: var(--lp-btn-transition);
}
/* Margen de 8px: el área ampliada no se superpone con el primer indicador */
.carousel-pause-btn {
    margin: 0 8px;
}
.carousel-pause-btn::before {
    content: "";
    position: absolute;
    inset: -9px; /* desde el padding box: 26 + 18 = 44px (el borde es de 1px) */
    border-radius: 9999px;
}
.carousel-pause-btn svg {
    opacity: 0.75;
    transition: opacity 150ms var(--lp-ease-standard);
}
.carousel-pause-btn:hover,
.carousel-pause-btn:focus-visible {
    border-color: rgba(255, 255, 255, 0.85);
}
.carousel-pause-btn:hover svg,
.carousel-pause-btn:focus-visible svg {
    opacity: 1;
}
/* Foco sobre el gradiente del carrusel: anillo blanco (C12). La cabecera
   móvil (logo e idioma) va sobre la parte clara y conserva el azul. */
.carousel-bottom-half {
    --lp-ring: #ffffff;
    --lp-halo: rgba(255, 255, 255, 0.18);
}

/* ---- Transiciones entre vistas y pasos (Alpine x-transition) ----
   Entrada en 300ms con el easing de entrada del sistema (C14), fade + 8px;
   la salida es instantánea para que nunca haya dos vistas apiladas. */
.lp-enter {
    transition: opacity 300ms var(--lp-ease-out), transform 300ms var(--lp-ease-out);
}
.lp-enter-start {
    opacity: 0;
    transform: translateY(8px);
}
.lp-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.lp-leave {
    display: none !important;
}

/* ==========================================================================
   Panel derecho — CTA
   ========================================================================== */
.landing-cta-panel {
    width: 50%;
    background-color: var(--umano-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden; /* Evita scroll en el panel completo en desktop */
    padding: 0 clamp(24px, 4vw, 64px);  /* Lateral; el vertical va en header/footer */
}

/* Nuevo Header con Logo fijo */
.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Se ajusta a la altura del viewport para que el formulario quepa sin scroll */
    padding-top: clamp(1rem, 4vh, var(--umano-header-padding-top));
    padding-bottom: 8px;
    background-color: var(--umano-white);
    z-index: 10;
    flex-shrink: 0;
}

/* Fila central: ocupa el alto restante; solo hace scroll si el viewport es
   muy bajo. El padding lateral evita recortar los anillos de foco. */
.landing-cta-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    padding: 8px 6px;

    /* Scrollbar sutil y premium */
    scrollbar-width: thin;
    scrollbar-color: var(--umano-purple) transparent;
}
/* Columna única centrada vertical (margin auto: si desborda, parte arriba
   y hace scroll sin recortar el inicio, a diferencia de justify-content). */
.landing-cta-content {
    width: 100%;
    max-width: var(--landing-col-width);
    margin-block: auto;
    text-align: left;
    container-type: inline-size;
}

/* Fila inferior: footer persistente (ayuda + enlaces legales) */
.landing-cta-footer {
    flex-shrink: 0;
    width: 100%;
    max-width: var(--landing-col-width);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px; /* fila: ayuda ↔ enlaces legales */
    padding: 8px 0 clamp(12px, 2vh, 32px);
}
/* Ayuda: borde e icono naranja de marca (3.5:1, UI) y texto oscuro (17:1);
   el naranja como texto no alcanza 4.5:1. Mismo tamaño que la pastilla del
   home móvil en todas las pantallas: 32px visuales, texto 13px, padding
   0 14px, ícono 14px, gap 6px, borde 1.5px; el ::before transparente da el
   área de 44px (6px arriba y abajo, dentro del padding del footer). */
.landing-footer-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border: 1.5px solid var(--color-secondary);
    border-radius: 9999px;
    color: var(--color-neutral-text-main);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--lp-btn-transition);
}
.landing-footer-help::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}
.landing-footer-help svg {
    width: 14px;
    height: 14px;
    color: var(--color-secondary);
    flex-shrink: 0;
}
.landing-footer-help:hover {
    transition: var(--lp-btn-transition); /* Metronic fija a:hover { transition: … 0.2s ease } */
    background-color: var(--color-secondary-light);
    color: var(--color-neutral-text-main);
}
.landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}
.landing-footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;   /* WCAG 2.5.8 */
    padding: 4px 2px;
    color: var(--color-neutral-text-general); /* 5.3:1 sobre blanco */
    font-family: var(--font-body);
    font-size: max(13px, 0.8125rem);
    font-weight: 500;
    text-decoration: none;
}
.landing-footer-link:hover {
    color: var(--color-neutral-text-main);
    text-decoration: underline;
}

/* ---- Selector de idioma ---- */
.landing-lang-menu {
    min-width: 150px;
}
/* Botón de idioma: área táctil de 44px de alto (C15) sin cambiar lo visual */
.landing-lang-btn {
    position: relative;
    transition: var(--lp-btn-transition) !important;
}
.landing-lang-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}
/* Ojo de contraseña: área táctil de 44x44 (C15), ícono de 18px */
.landing-eye-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.landing-lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 36px;   /* >=24px (WCAG 2.5.8) */
    padding: 6px 14px;
    border: none;
    background: none;
    color: var(--color-neutral-text-main); /* 17:1 */
    font-family: var(--font-body);
    font-size: max(14px, 0.875rem);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.landing-lang-item:hover,
.landing-lang-item:focus-visible {
    background-color: var(--color-brand-blue-light);
}
.landing-page .landing-lang-item:focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: -2px;
    box-shadow: none !important;
}
/* Idioma actual: color de marca (6.3:1 / 5.4:1 en hover) + negrita + check */
.landing-lang-item[aria-current="true"] {
    color: var(--color-primary);
    font-weight: 700;
}
.landing-cta-body::-webkit-scrollbar {
    width: 6px;
}
.landing-cta-body::-webkit-scrollbar-track {
    background: transparent;
}
.landing-cta-body::-webkit-scrollbar-thumb {
    background-color: var(--umano-purple);
    border-radius: 20px;
}

.landing-logo { height: 38px; width: auto; }

.landing-tagline {
    color: var(--umano-muted);
    font-size: 1.272rem;
    line-height: 1.55;
    margin-bottom: 0;
}
/* ---- Botones pill ---- */
.btn-umano-activate,
.btn-umano-login,
.btn-umano-primary,
.btn-umano-care,
.btn-umano-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    border: none;
    border-radius: 9999px; /* Pill */
    padding: 14px 32px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--lp-btn-transition);
    text-align: center;
    text-decoration: none;
}

/* Activa tu cuenta (home): secundaria Trust, borde azul 2px (E1: una sola
   primaria por vista). Texto #1261ab: 6.3:1 / 5.5:1 hover / 4.7:1 active. */
.btn-umano-activate {
    background-color: transparent !important;
    color: #1261ab !important;
    border: 2px solid #1261ab !important;
    padding: 12px 30px; /* compensa el borde: mismo alto que la primaria */
}
.btn-umano-activate:hover {
    background-color: #e8eff7 !important; /* tinte azul 10 */
    color: #0d4580 !important;
    border-color: #0d4580 !important;
}
.btn-umano-activate:active {
    background-color: #d1dff0 !important; /* tinte azul 20 */
    color: #092d5a !important;
    border-color: #092d5a !important;
}

/* Primaria Trust: Iniciar sesión, Acceder, Enviar enlace, Continuar (E1) */
.btn-umano-login,
.btn-umano-primary {
    background-color: #1261ab !important;
    color: var(--color-white) !important;
    box-shadow: var(--shadow-1);
}
.btn-umano-login:hover,
.btn-umano-primary:hover {
    background-color: #0d4580 !important;
}
.btn-umano-login:active,
.btn-umano-primary:active {
    background-color: var(--color-primary-active) !important;
}

/* Care: Registrarme (E1). Blanco sobre #35803f 4.9:1, hover 6.4:1, active 8.5:1 */
.btn-umano-care {
    background-color: #35803f !important;
    color: var(--color-white) !important;
    box-shadow: 0 2px 8px rgba(53, 128, 63, 0.15);
    --lp-ring: #35803f;
    --lp-halo: rgba(53, 128, 63, 0.18);
}
.btn-umano-care:hover {
    background-color: var(--color-green-hover) !important;
}
.btn-umano-care:active {
    background-color: var(--color-green-active) !important;
}

/* ¿Necesitas ayuda?: Outline Naranja */
.landing-footer-help,
.btn-umano-help {
    --lp-ring: #f74a14;   /* support: 3.5:1 sobre #fff */
    --lp-halo: rgba(247, 74, 20, 0.18);
}
.btn-umano-help {
    background-color: transparent !important;
    border: 2px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    padding: 12px 28px !important; /* Ajuste por el borde */
    margin-top: 4.5rem !important;
}
.btn-umano-help:hover {
    background-color: var(--color-secondary-light) !important;
    color: var(--color-secondary) !important;
}
.btn-umano-help:active {
    background-color: #ffe8e0 !important;
}

.help-container {
    margin-top: 1.25rem;
    flex-shrink: 0;
}

/* ---- Botón volver ---- */
.btn-umano-back {
    background: none !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 9999px !important;
    color: var(--color-gray-700) !important;
    padding: 6px 16px !important;
    font-family: var(--font-body);
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--lp-btn-transition);
}
.btn-umano-back:hover {
    background-color: var(--color-light) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ---- Formulario / Inputs Premium ---- */
.landing-hero-title {
    font-family: var(--font-display);
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    margin-bottom: 12px;
    letter-spacing: -0.025em;
}

.landing-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--color-gray-500);
    margin-bottom: 2rem;
}

.landing-form-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.landing-form-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-gray-500);
    margin-bottom: 1.5rem;
}

/* Contenedor de formularios sin caja (plano y transparente) y alineado a la izquierda */
.form-container-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    text-align: left;
}

.landing-cta-body .form-control,
.landing-cta-body .form-select {
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--input-border) !important; /* WCAG 1.4.11: >=3:1 */
    padding: 12px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    background-color: var(--color-white) !important;
    box-shadow: none !important;
    color: var(--color-dark) !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

.landing-cta-body .form-control::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

.landing-cta-body .form-control:focus,
.landing-cta-body .form-select:focus {
    border-color: #1261ab !important;
    box-shadow: 0 0 0 3px rgba(18, 97, 171, 0.15) !important;
}

/* Premium custom checkbox styles */
.landing-cta-body .form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid var(--input-border) !important;
    border-radius: 4px !important;
    background-color: var(--color-white) !important;
    /* Metronic/Bootstrap pinta su propio check como background-image en
       :checked; el check es solo el ::after de abajo (evita el doble ícono) */
    background-image: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.15s ease-in-out;
}
.landing-cta-body .form-check-input:checked {
    background-color: #35803f !important;
    border-color: #35803f !important;
    box-shadow: 0 0 0 3px var(--tint-green-10, #ebf2eb) !important;
}
.landing-cta-body .form-check-input:checked::after {
    content: "" !important;
    display: block !important;
    width: 5px !important;
    height: 9px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
}
/* Checkbox de términos = acción care: anillo verde (C12) */
.landing-cta-body .form-check-input {
    --lp-ring: #35803f;
    --lp-halo: rgba(53, 128, 63, 0.18);
}

/* ---- Términos y condiciones (paso 3) ---- */
.landing-terms {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}
/* Área táctil de 44x44 sobre el checkbox (C15): pseudo-elemento del label
   (clic = marcar), sin agrandar lo visual. Parte en -6px para no quedar
   recortado por el padding lateral del área con scroll. */
.landing-terms-label::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -6px;
    width: 44px;
    height: 44px;
}
.landing-terms .form-check-input {
    flex-shrink: 0;
    margin: 2px 0 0 0 !important;
    float: none !important;
}
/* Label clicable: junto al checkbox da un objetivo >=24px */
.landing-terms-label {
    min-height: 24px;
    color: var(--color-neutral-text-main); /* 17:1 */
    font-family: var(--font-body);
    font-size: 14px; /* menor que el texto del botón (16px) */
    line-height: 1.45;
    cursor: pointer;
}
.landing-terms-label a {
    color: var(--color-primary); /* 6.3:1 */
    text-decoration: underline;
    font-weight: 600;
}

/* ---- Switch de WhatsApp (paso 3): checkbox nativo con role="switch".
   Apagado: riel #e5e5e5 con borde #808080 (3.9:1 sobre #fff) y perilla
   #6b6b6b (4.3:1 sobre el riel). Encendido: riel care #35803f y perilla
   blanca (5.0:1). Foco con anillo verde (C12). ---- */
.landing-switch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    margin-bottom: 12px;
    --lp-ring: #35803f;
    --lp-halo: rgba(53, 128, 63, 0.18);
}
.landing-switch-input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    position: relative;
    width: 40px;
    height: 24px;
    margin: 0;
    border: 1.5px solid #808080;
    border-radius: 999px;
    background-color: var(--color-neutral-200, #e5e5e5);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), border-color 150ms cubic-bezier(.4, 0, .2, 1);
}
.landing-switch-input::before {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-neutral-text-general, #6b6b6b);
    transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1);
}
.landing-switch-input:checked {
    background-color: #35803f;
    border-color: #35803f;
}
.landing-switch-input:checked::before {
    background-color: #ffffff;
    transform: translateX(16px);
}
.landing-switch-input:focus { outline: none; }
.landing-switch-input:focus-visible {
    outline: 2px solid var(--lp-ring) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 8px var(--lp-halo) !important;
}
/* Área táctil de 44x44 sobre el switch (C15), como en los términos */
.landing-switch-label::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -2px;
    width: 44px;
    height: 44px;
}
.landing-switch-text { flex: 1; min-width: 0; }
.landing-switch-label {
    display: block;
    min-height: 24px;
    padding-top: 2px;
    color: var(--color-neutral-text-main);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}
.landing-switch-help {
    margin: 0;
    color: var(--color-neutral-text-general); /* #6b6b6b: 5.3:1 */
    font-family: var(--font-body);
    font-size: 12px; /* caption del sistema; #6b6b6b 5.3:1 */
    line-height: 1.4;
    margin-top: 2px;
}

/* Paso 3: switch a 16px del primer consentimiento, 24px entre los dos
   consentimientos (en todos los tamaños) y 24px antes del botón. La ranura
   de error de los consentimientos no se reserva: el mensaje aparece solo si
   hay error. */
.landing-activate .landing-switch { margin-bottom: 16px; }
.landing-activate .landing-terms + .landing-terms { margin-top: 24px; }
.landing-activate .landing-terms .landing-terms-text .landing-field-error { min-height: 0; }
/* Los primeros 12px antes del botón son margen (no fondo del pie fijo): ahí
   termina el área táctil del segundo consentimiento y, si el paso desborda
   poco, el pie se desliza sobre ese margen sin tapar la casilla. */
.landing-activate .landing-terms + .landing-step-footer { margin-top: 12px; padding-top: 12px; }
/* Área táctil de cada consentimiento (casilla + frase): la fila entera, de
   12px sobre la frase a 12px bajo ella (>=44px con la frase de 20px). Con
   24px entre filas, las áreas se tocan sin solaparse; el mensaje de error
   queda fuera. Los links en línea quedan encima, a su tamaño de texto. */
.landing-activate .landing-terms-label { position: relative; }
.landing-activate .landing-terms-label::before {
    top: -12px;
    bottom: -12px;
    left: -36px;  /* casilla 20px + gap 10px + 6px (padding lateral del área con scroll) */
    right: 0;
    width: auto;
    height: auto;
}
.landing-activate .landing-terms-label a { position: relative; z-index: 1; }

.landing-cta-body label.form-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-dark);
}

/* ---- Icono activación ---- */
.activate-icon {
    width: 60px;
    height: 60px;
    background-color: var(--umano-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ---- Activation Stepper ---- */
.stepper-container {
    display: flex;
    gap: 6px;
}
.stepper-segment {
    height: 6px;
    width: 36px;
    border-radius: 3px;
    background-color: #e5e5e5; /* pendiente (decorativo: el avance lo dice "Paso X de 3") */
    transition: background-color 300ms var(--lp-ease-standard);
}
/* E2: actual Trust (6.3:1 sobre #fff) y completados Care (4.9:1) */
.stepper-segment.active { background-color: #1261ab; }
.stepper-segment.completed { background-color: #35803f; }
.stepper-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
/* "Paso X de 3": el progreso no depende solo del color de los segmentos */
.stepper-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-text-general); /* 5.3:1 */
}
/* Títulos de paso reciben foco programático (tabindex=-1) solo para que
   el lector de pantalla anuncie el paso nuevo; no son interactivos, así
   que no muestran anillo (2.4.7 aplica a componentes operables). */
.landing-step-title:focus,
.landing-step-title:focus-visible {
    outline: none !important;
}
/* Botón primario de avance entre pasos (Continuar / Registrarme) */
.btn-umano-step {
    width: auto;
    min-width: min(220px, 100%);
    padding: 12px 32px;
}

/* ---- Identity Badge ---- */
.badge-identity-confirmed {
    display: inline-flex;
    align-items: center;
    background-color: var(--tint-green-10, #ebf2eb);
    color: var(--color-green);
    border: 1px solid var(--tint-green-20, #d6e5d7);
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    gap: 6px;
}
/* Ícono de check (SVG, toma el color del texto) en lugar del "✓" Unicode */
.badge-identity-confirmed .badge-identity-icon { flex-shrink: 0; }
.badge-identity {
    background-color: #E3F2FD;
    color: var(--umano-blue);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.786rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Registration Form ---- */
.registration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px; /* Reduced vertical gap from 12px */
}
.registration-grid .form-control {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 0.95rem !important;
}
.registration-grid .form-label {
    margin-bottom: 2px !important;
    font-size: 0.75rem !important;
}
.registration-grid .grid-span-full {
    grid-column: 1 / -1;
}
/* Dos columnas mientras la columna de contenido lo permita */
@container (max-width: 400px) {
    .registration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
    .registration-grid { grid-template-columns: 1fr; }
}

/* ---- Success Screen ---- */
.success-circle {
    width: 72px;
    height: 72px;
    background-color: var(--tint-green-10, #ebf2eb); /* tinte Care 10 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #35803f; /* Care: 4.3:1 sobre el tinte (>=3:1 ícono) */
    margin: 0 auto 24px;
}

/* ---- Error Badge ---- */
.badge-error {
    background-color: #FEE2E2;
    color: var(--color-error-text); /* #DC2626 daba ~4.1:1 sobre el tinte */
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.786rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Identity Badge Pulse ---- */
@keyframes badge-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(27, 95, 168, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(27, 95, 168, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(27, 95, 168, 0); }
}
.badge-identity.pulse {
    animation: badge-pulse 2s infinite;
}

/* ---- Password Strength Segments ---- */
.password-strength-meter {
    display: flex;
    gap: 4px;
    margin-top: 4px; /* Reduced from 8px */
}
.strength-segment {
    height: 3px;
    flex: 1;
    background-color: #E0E0E0;
    border-radius: 2px;
}
.strength-segment.active { background-color: #35803f; } /* Care: 4.9:1 sobre #fff */

/* ---- Footer Activation ---- */
.landing-footer-alt {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
}
.landing-footer-alt a {
    color: var(--umano-muted);
    font-size: 0.786rem;
    text-decoration: none;
    font-weight: 500;
}

/* Dos columnas angostas (768–1100px en horizontal): menos padding. Los
   tamaños del título y la descripción van en el bloque "Dos columnas" del
   final (clamp). */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
    .carousel-bottom-half {
        padding: 1.5rem 2rem 3.5rem 2rem !important;
    }
    .carousel-wave-mask {
        padding-top: calc(1.5rem + var(--carousel-wave-h)) !important;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .landing-cta-panel { padding: 0 36px; }
}

@media (max-width: 767.98px), (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    .landing-wrapper {
        flex-direction: column !important;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
        background-color: #ffffff !important;
    }

    .landing-carousel-panel {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0;
        position: relative !important;
        display: flex;
    }

    .carousel-top-half {
        height: 42% !important;
        width: 100% !important;
        background-color: #fafafa;
    }

    .carousel-bottom-half {
        height: 58% !important;
        width: 100% !important;
        padding: 2rem 1.75rem 1.5rem 1.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow-y: auto !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important;  /* IE 10+ */
    }
    .carousel-wave-mask {
        height: calc(58% + var(--carousel-wave-h)) !important;
        padding-top: calc(2rem + var(--carousel-wave-h)) !important;
    }

    .carousel-bottom-half::-webkit-scrollbar {
        display: none !important; /* Safari and Chrome */
    }

    .carousel-title {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .carousel-description {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Controles móviles: áreas de 44px contiguas (C15); el margen compensa
       los 8px transparentes sobre la pausa de 28px. */
    .carousel-mobile-controls {
        gap: 0;
        margin-top: calc(1.5rem - 8px);
    }
    .carousel-indicator-mobile::before {
        width: 6px;
        height: 6px;
    }
    .carousel-indicator-mobile.active::before {
        width: 18px;
    }

    /* CTAs móviles sobre el gradiente, mismo criterio que el home (E1): una
       sola primaria. "Iniciar sesión" = relleno (knockout blanco, texto azul
       6.3:1); "Activa tu cuenta" = secundaria con borde blanco. */
    .btn-umano-activate-mobile {
        background-color: transparent !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        height: 44px !important;
        border-radius: 9999px !important;
        transition: var(--lp-btn-transition);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        width: 100%;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0 10px !important;
    }
    .btn-umano-activate-mobile:hover {
        background-color: rgba(255, 255, 255, 0.12) !important;
    }

    .btn-umano-login-mobile {
        background-color: #ffffff !important;
        color: #1261ab !important;
        border: none !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        height: 44px !important;
        border-radius: 9999px !important;
        transition: var(--lp-btn-transition);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        width: 100%;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0 10px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }
    .btn-umano-login-mobile:hover {
        background-color: #e8eff7 !important; /* tinte azul 10: texto 5.5:1 */
    }

    .btn-umano-help-circular {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        background: transparent !important;
        transition: var(--lp-btn-transition) !important;
        text-decoration: none !important;
    }
    .btn-umano-help-circular:hover {
        border-color: rgba(255, 255, 255, 0.8) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Target area optimization for mobile footer links */
    .btn-footer-link-mobile {
        padding: 10px 4px !important;
        display: inline-block !important;
    }


    /* Panel del formulario en blanco completo: en móvil hace scroll el panel
       entero (sin scroll anidado) y el footer queda al final del contenido. */
    .landing-cta-panel {
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        padding: 0 20px !important;
        overflow-y: auto !important;
        background-color: #ffffff !important;
        display: flex;
        flex-direction: column !important;
    }
    .landing-header {
        padding-top: var(--umano-header-padding-top-mobile);
    }

    .landing-cta-body {
        flex: 1 0 auto;
        overflow: visible;
        padding: 16px 0 24px 0 !important;
    }
}

/* ==========================================================================
   Large screens & High-Resolution Displays (MacBook Pro Retina, 2K, 4K)
   ========================================================================== */
@media (min-width: 1300px) {
    html {
        font-size: 16.5px !important; /* Slightly reduced base scale (~10%) */
    }
    .carousel-container {
        max-width: 680px !important;
        height: 380px !important;
    }
    .carousel-title {
        font-size: 2.6rem !important;
    }
    .carousel-description {
        font-size: 1.35rem !important;
        max-width: 580px !important;
    }
    :root {
        --landing-col-width: 600px;
    }
    .landing-logo {
        height: 42px !important;
    }
    .landing-header {
        padding-top: clamp(1.25rem, 3.5vh, 5rem) !important;
        padding-bottom: 12px !important;
    }

    .landing-tagline {
        font-size: 1.25rem !important; /* Reduced */
        font-weight: 500 !important;
        color: #4B5563 !important;
        margin-bottom: 2rem !important;
    }
    .btn-umano-activate, .btn-umano-login {
        max-width: 400px !important;
        height: 56px !important;
        border-radius: 9999px !important;
    }
    .btn-umano-help {
        font-size: 0.95rem !important;
        padding: 7px 16px !important;
    }
    .form-label {
        font-size: 0.95rem !important; /* Balanced with inputs */
        margin-bottom: 0.5rem !important;
    }
    .form-control {
        font-size: 1rem !important; /* Reduced */
        padding: 0.85rem 1.25rem !important;
    }
    .registration-grid {
        gap: 8px 16px !important;
    }
    .registration-grid .form-control,
    .registration-grid .form-select {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        height: 44px !important;
        min-height: 44px !important; /* anula el min-height de .form-control-lg */
        font-size: 0.95rem !important;
    }
}

@media (min-width: 1600px) {
    html {
        font-size: 18px !important; /* Reduced from 20px */
    }
    .carousel-container {
        max-width: 820px !important;
        height: 440px !important;
    }
    .carousel-title {
        font-size: 3rem !important;
    }
    .carousel-description {
        font-size: 1.45rem !important;
        max-width: 680px !important;
    }
    :root {
        --landing-col-width: 680px;
    }
    .landing-logo {
        height: 46px !important;
    }
    .landing-header {
        padding-top: clamp(1.5rem, 6vh, 6rem) !important;
        padding-bottom: 20px !important;
    }

    .landing-tagline {
        font-size: 1.35rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        margin-bottom: 2.5rem !important;
    }
    .btn-umano-activate, .btn-umano-login {
        max-width: 460px !important;
        height: 64px !important;
        border-radius: 9999px !important;
    }
    .btn-umano-help {
        font-size: 1rem !important;
        padding: 8px 18px !important;
        margin-top: 6rem !important;
    }
    .form-label {
        font-size: 1rem !important;
    }
    .form-control {
        font-size: 1.1rem !important;
        padding: 1.05rem 1.5rem !important;
    }
    .registration-grid {
        gap: 10px 20px !important;
    }
    .registration-grid .form-control {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        height: 48px !important;
        font-size: 1rem !important;
    }
}

@media (min-width: 1950px) {
    html {
        font-size: 20px !important; /* Reduced from 22px */
    }
    .carousel-container {
        max-width: 980px !important;
        height: 500px !important;
    }
    .carousel-title {
        font-size: 3.5rem !important;
    }
    .carousel-description {
        font-size: 1.6rem !important;
        max-width: 800px !important;
    }
    :root {
        --landing-col-width: 760px;
    }
    .landing-logo {
        height: 52px !important;
    }
    .landing-header {
        padding-top: clamp(1.75rem, 7vh, 7rem) !important;
        padding-bottom: 24px !important;
    }

    .landing-tagline {
        font-size: 1.45rem !important;
        font-weight: 500 !important;
        color: #1F2937 !important;
    }
    .btn-umano-activate, .btn-umano-login {
        max-width: 520px !important;
        height: 72px !important;
        border-radius: 9999px !important;
    }
    .btn-umano-help {
        font-size: 1.1rem !important;
        padding: 9px 20px !important;
        margin-top: 7rem !important;
    }
    .form-label {
        font-size: 1.05rem !important;
    }
    .form-control {
        font-size: 1.15rem !important;
    }
    .registration-grid {
        gap: 12px 24px !important;
    }
    .registration-grid .form-control {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        height: 52px !important;
        font-size: 1.05rem !important;
    }
}

/* ==========================================================================
   Escala del flujo de activación (pasos 1–3). Valores en px porque el
   font-size raíz cambia por breakpoint (13px / 16.5px / 18px / 20px); va
   después de los media queries para imponerse a sus overrides.
   ========================================================================== */
.landing-activate .landing-step-title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.landing-activate .landing-form-subtitle {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.landing-activate label.form-label {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px !important;
}
/* Inputs y selects (incluye el select de código de país junto al celular):
   misma altura, borde y radio */
.landing-activate .form-control,
.landing-activate .form-select {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    border: 1.5px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
}
/* Filas de campos: 20px vertical / 16px entre columnas */
.landing-activate .activate-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Espaciado de los pasos 2 y 3. El hueco vertical entre filas de la grilla
   ES la ranura del mensaje de error (--lp-err-slot): el contenedor
   .landing-field-error reserva ese alto aunque esté vacío, así que un error
   de una línea aparece sin mover nada. Un error de 2 líneas solo agrega una
   línea; si eso desborda, hace scroll el área central y el botón queda fijo. */
.landing-activate {
    --lp-err-slot: 22px;      /* 4px margen + 1 línea de 13px × 1.4 */
    --lp-err-gap: 4px;
    --lp-err-lh: 1.4;
    --lp-rules-gap: 20px;     /* reglas de contraseña → fila siguiente */
    --lp-footer-gap: 8px;     /* ranura del último campo → botón */
}
.landing-activate .registration-grid {
    gap: 0 16px !important;
}
.landing-activate .registration-grid .landing-field-error,
.landing-activate .landing-terms-text .landing-field-error {
    display: flow-root; /* el margen del mensaje queda dentro de la ranura */
    min-height: var(--lp-err-slot);
}
/* Checklist de contraseña: solo bajo "Contraseña", dentro de su celda (en
   escritorio, su columna). Dos columnas del ancho de su texto (la más ancha
   junta "8 caracteres mín." y "Carácter especial"), así entra en la columna
   de 255px de 1280px sin partir líneas. */
.landing-activate .password-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px 12px;
    /* pegado al campo: se come parte de su ranura de error vacía */
    margin-top: -8px;
    margin-bottom: var(--lp-rules-gap);
    font-size: 13px;
    line-height: 1.4;
}
.landing-activate .landing-terms {
    margin-top: 0; /* la ranura de error del último campo ya separa */
}
/* Errores de validación (pasos 2 y 3): texto rojo inline bajo el campo, sin
   caja. El contenedor queda vacío (alto 0) hasta que Alpine inserta el mensaje. */
.landing-activate .landing-field-error-msg,
.landing-auth .landing-field-error-msg {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: var(--lp-err-gap);
    color: var(--color-error-text); /* #b02a1c: 6.6:1 sobre #fff */
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: var(--lp-err-lh);
    text-align: left;
}
.landing-activate .landing-field-error-msg svg,
.landing-auth .landing-field-error-msg svg {
    flex-shrink: 0;
    margin-top: 2px;
}
/* Aviso en vivo bajo "Confirmar correo" y "Confirmar" (paso 2): ocupa la
   ranura de error del campo (son excluyentes), así no agrega alto. Coinciden:
   --color-success-text #0f6a3c (6.8:1); no coinciden: --color-error-text
   #b02a1c (6.6:1) con ícono (no depende solo del color). */
.landing-activate .landing-field-match { display: block; }
.landing-activate .landing-field-mismatch-msg,
.landing-activate .landing-field-match-msg {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: var(--lp-err-gap);
    color: var(--color-success-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: var(--lp-err-lh);
    text-align: left;
}
.landing-activate .landing-field-mismatch-msg { color: var(--color-error-text); }
.landing-activate .landing-field-mismatch-msg svg,
.landing-activate .landing-field-match-msg svg { flex-shrink: 0; margin-top: 2px; }
/* Con un error bajo "Contraseña", el checklist deja de comerse la ranura
   (margen negativo) para no superponerse al texto, y descuenta lo mismo
   abajo: el alto total no cambia (sin scroll ni salto de lo que sigue). */
.landing-activate .fv-row:has(> .landing-field-error .landing-field-error-msg) > .password-rules-grid {
    margin-top: 0;
    margin-bottom: calc(var(--lp-rules-gap) - 8px);
}
/* Error general (sin campo): sobre el botón principal del paso */
.landing-activate .landing-form-error .landing-field-error-msg,
.landing-auth .landing-form-error .landing-field-error-msg { margin-top: 0; margin-bottom: 10px; }
/* Login y recuperar: labels a 14px como en la activación (con raíz 13px el
   0.875rem de .landing-cta-body quedaba en ~11.4px) */
.landing-auth label.form-label {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
}
/* Hint Postel bajo el label "Documento de identidad": mismo texto y estilo
   que .tf-hint de /accounts/login/ (13px #6b6b6b, 5.3:1 sobre #fff). */
.landing-auth .landing-field-hint {
    margin: -2px 0 6px;
    color: var(--color-neutral-text-general);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
}
/* "¿Olvidaste tu contraseña?": mismo hover que .tf-link de /accounts/login/ */
.landing-auth .landing-forgot-link:hover {
    color: var(--color-primary-hover) !important;
    text-decoration: underline !important;
}
/* Nota "* Campo obligatorio" al inicio de cada formulario (login, recuperar y
   activación 1–3). Texto 13px --color-neutral-text-general (#6b6b6b, 5.3:1);
   asterisco --color-error-text (#b02a1c, 6.6:1), oculto al lector, que lee
   el texto visually-hidden. */
.landing-required-note {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-neutral-text-general);
    text-align: left;
}
.landing-required-note .landing-required-mark,
.landing-cta-body label .landing-required-mark {
    color: var(--color-error-text);
    font-weight: 600;
}
/* Error general enfocable (tabindex=-1) tras un envío fallido */
.landing-auth .landing-form-error:focus { outline: none; }
.landing-auth .landing-form-error:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Términos: el error va bajo el texto del label, no bajo el checkbox */
.landing-activate .landing-terms-text { flex: 1; min-width: 0; }
.landing-activate .landing-terms-text .landing-terms-label { display: block; }
/* Reglas de contraseña: ícono SVG + texto con tokens de estado (AA sobre #fff) */
.landing-activate .password-rule {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.landing-activate .password-rule.is-met { color: var(--color-success-text); }     /* 6.8:1 */
.landing-activate .password-rule.is-pending { color: var(--color-error-text); }   /* 6.3:1 */
.landing-activate .password-rule-icon { flex-shrink: 0; }

/* Mensajes de error del flujo (DNI y registro): sin mayúsculas ni negrita fuerte */
.landing-activate .badge-error {
    text-transform: none;
    font-weight: 500;
    font-size: 13px;
}

/* Flecha de los selects: espacio suficiente y posición consistente */
.landing-activate .form-select {
    padding-right: 40px !important;
    background-position: right 14px center !important;
    background-size: 16px 12px !important;
}

/* Botón "Volver" del flujo: compacto (32px, objetivo >=24px) y centrado con el stepper */
.landing-activate .landing-activate-header .btn-umano-back {
    height: 32px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1;
    align-self: center;
}

/* Celular (intl-tel-input): mismo alto, borde, radio y foco que los inputs */
.landing-activate .iti {
    --iti-border-color: var(--input-border);
    --iti-dialcode-color: var(--color-neutral-text-general); /* 5.3:1; el #999 original daba 2.8:1 */
    --iti-arrow-color: var(--color-dark);
    --iti-hover-color: rgba(18, 97, 171, 0.10);
    --iti-spacer-horizontal: 12px;
    display: block;
    width: 100%;
}
.landing-activate .iti input.iti__tel-input {
    width: 100%;
    /* landing fija padding con !important: se respeta el espacio calculado para el código */
    padding-left: var(--landing-iti-pad, 96px) !important;
}
.landing-activate .iti__selected-dial-code {
    font-size: 16px;
    color: var(--color-dark);
}
.landing-activate .iti__selected-country {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.landing-activate .iti__dropdown-content,
.iti--container .iti__dropdown-content {
    border-radius: var(--radius-sm);
    border-color: var(--input-border);
    background-color: var(--color-white);
}
.landing-activate .iti__country,
.iti--container .iti__country {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-dark); /* >=4.5:1 también sobre el resaltado */
}
.iti--container .iti__dial-code { color: var(--color-neutral-text-general); }
.iti--container .iti__country.iti__highlight { background-color: rgba(18, 97, 171, 0.10); }
.landing-activate .iti__search-input,
.iti--container .iti__search-input {
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-dark);
}
.landing-activate .iti__search-input::placeholder,
.iti--container .iti__search-input::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}
.landing-activate .iti__search-input:focus-visible,
.iti--container .iti__search-input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}
/* Pie del paso (error general + botón): la ranura del último campo ya da aire */
.landing-activate .landing-step-footer {
    padding-top: var(--lp-footer-gap);
}
.landing-activate .landing-step-actions {
    margin-top: 0;
}
/* Desktop: si el paso no cabe (viewport bajo, error de 2 líneas, menor de edad),
   hace scroll SOLO el área central y el pie queda fijo al fondo de ella, sobre
   el footer persistente. Sin desborde, sticky no tiene efecto. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1367px) {
    .landing-activate .landing-step-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background-color: var(--umano-white);
        padding-bottom: 4px; /* deja ver el anillo de foco del botón */
    }
    /* Pie fijo pegado al borde del área con scroll (no 8px sobre él, por
       su padding inferior): no asoma contenido bajo la barra y se ganan 8px */
    .landing-cta-body > .landing-cta-content .landing-activate .landing-step-footer { bottom: -8px; }
    /* Al enfocar un campo (p. ej. el inválido) el scroll lo deja sobre el pie fijo */
    .landing-cta-body { scroll-padding-bottom: 96px; }
}
.landing-activate .btn-umano-step {
    height: 48px !important;
    min-height: 48px;
    padding: 0 32px;
    font-size: 16px;
}

/* Viewports de escritorio bajos (p. ej. 1280x800 / 1440x800): se reduce solo
   el espacio en blanco, nunca los tamaños (labels 14px, inputs 16px/48px,
   error 13px, botón 48px). La ranura de error se mantiene reservada. */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 900px), (min-width: 1367px) and (max-height: 900px) {
    .landing-activate {
        --lp-err-slot: 20px;  /* 3px + 1 línea de 13px × 1.3 */
        --lp-err-gap: 3px;
        --lp-err-lh: 1.3;
        --lp-rules-gap: 14px;
        --lp-footer-gap: 6px;
    }
    .landing-activate .landing-activate-header { margin-bottom: 8px !important; }
    .landing-activate .landing-step-title { margin-bottom: 4px; }
    .landing-activate .landing-form-subtitle { margin-bottom: 8px; }
    .landing-activate label.form-label { margin-bottom: 4px !important; }
    .landing-activate .activate-fields { gap: 14px; }
    .landing-activate .landing-required-note { margin-bottom: 10px; }
    .landing-activate .password-rules-grid { margin-top: -6px; gap: 4px 12px; }
    .landing-activate .fv-row:has(> .landing-field-error .landing-field-error-msg) > .password-rules-grid {
        margin-top: 0;
        margin-bottom: calc(var(--lp-rules-gap) - 6px);
    }
    /* Paso 3 (switch + 2 consentimientos): solo aire; la ranura de error
       de los consentimientos ya separa del botón */
    .landing-activate .landing-switch-label { min-height: 0; }
    .landing-activate .landing-terms-label { min-height: 20px; }
    .landing-activate .landing-terms + .landing-step-footer { padding-top: 0; } /* 12px de margen */
    /* Paso 3 en escritorio bajo: switch a 12px; entre consentimientos, 24px */
    .landing-activate .landing-terms .landing-field-error-msg { margin-top: 1px; line-height: 1.2; }
    .landing-activate .landing-switch { margin-bottom: 12px; }
    .landing-activate [x-show="activateStep === 3"] .registration-grid,
    .landing-activate .activate-step-3 .registration-grid { --lp-err-slot: 16px; }
}
/* Pasos 2 y 3 en escritorio bajo (1280x800, 1440x800) no tienen alto libre
   para una línea más: la nota sube a la línea del subtítulo, alineada a la
   derecha. El subtítulo reserva su ancho, así que si no cabe baja de línea
   en vez de superponerse. */
@media (min-width: 1200px) and (max-height: 900px) {
    .landing-activate form .landing-form-subtitle:has(+ .landing-required-note) { padding-right: 150px; }
    .landing-activate form .landing-required-note {
        margin: -32px 0 11px auto; /* colapsa con el margen del subtítulo */
        padding-top: 3px;
        width: 140px;
        text-align: right;
        white-space: nowrap;
    }
}
/* Paso 3 en tablet horizontal baja (p. ej. 1024x768): con 24px entre los
   consentimientos no cabe; se recupera espacio en blanco del paso (nunca
   tamaños) para que la casilla de privacidad quede sobre el pie fijo sin
   hacer scroll: la nota sube a la línea del subtítulo (que ya ocupa dos
   líneas, así que no crece) y título, subtítulo y grilla se acercan. */
@media (min-width: 1024px) and (max-width: 1199.98px) and (orientation: landscape) and (max-height: 800px) {
    .landing-activate [x-show="activateStep === 3"] .landing-step-title { margin-bottom: 0; }
    /* Nota en la línea del subtítulo en los pasos 2 y 3 (igual que en
       escritorio bajo ≥1200px): misma ubicación en ambos pasos. */
    .landing-activate form .landing-form-subtitle:has(+ .landing-required-note) { padding-right: 150px; }
    .landing-activate form .landing-required-note {
        margin: -32px 0 9px auto; /* 6px entre el subtítulo y la grilla */
        padding-top: 3px;
        width: 140px;
        text-align: right;
        white-space: nowrap;
    }
}
/* Footer persistente en una sola fila en dos columnas desde 1024px de ancho
   (tablet horizontal y escritorio): "¿Necesitas ayuda?" + "Términos y
   condiciones" + "Privacidad" miden ~390px de contenido; con 16px entre
   ellos entran en la columna de 430px de 1024px. Libera ~40px de alto. Las
   áreas de 44px (::before de la ayuda, ::after de los enlaces) tienen el
   ancho de cada control, así que con 16px de separación no se solapan.
   Bajo 1024px (teléfonos en horizontal) la columna mide 328–385px: no entra
   sin achicar el texto y sigue en dos filas. */
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1367px) {
    .landing-cta-footer,
    .landing-footer-links { flex-wrap: nowrap; }
    .landing-footer-link { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) and (orientation: landscape) {
    .landing-cta-footer,
    .landing-footer-links { gap: 0 16px; }
}
/* Muy bajos (p. ej. 1280x720): menos aire aún en cabecera y título; si
   igual no cabe, rige el scroll del área central con el pie fijo. */
@media (min-width: 768px) and (max-height: 760px) {
    .landing-activate {
        --lp-rules-gap: 10px;
        --lp-footer-gap: 4px;
    }
    .landing-activate .landing-activate-header { margin-bottom: 4px !important; }
    .landing-activate .landing-step-title { margin-bottom: 2px; }
    .landing-activate .landing-form-subtitle { margin-bottom: 6px; }
}

/* Campo inválido (pasos 2 y 3): borde rojo; el foco se sigue viendo con un
   outline del anillo del sistema por fuera del borde. Se quita al corregir
   (Alpine elimina aria-invalid). --color-error-text #b02a1c: 6.6:1 sobre #fff. */
.landing-activate .form-control[aria-invalid="true"],
.landing-activate .form-select[aria-invalid="true"],
.landing-activate .form-check-input[aria-invalid="true"],
.landing-auth .form-control[aria-invalid="true"] {
    border-color: var(--color-error-text) !important;
}
.landing-activate .form-control[aria-invalid="true"]:focus,
.landing-activate .form-select[aria-invalid="true"]:focus,
.landing-activate .form-check-input[aria-invalid="true"]:focus,
.landing-auth .form-control[aria-invalid="true"]:focus {
    outline: 2px solid var(--lp-ring) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 8px var(--lp-halo) !important;
}

/* Soft Glow active states for form inputs */
.form-control-solid:focus {
    background-color: #ffffff !important;
    border-color: var(--focus-ring) !important;
    box-shadow: 0 0 0 3px rgba(18, 97, 171, 0.15) !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Texto gris de Metronic (.text-muted ~#a1a5b7, <3:1) → token de texto general */
.landing-page .text-muted {
    color: var(--color-neutral-text-general) !important;
}

/* Foco visible por teclado (WCAG 2.4.7, C12): anillo de 2px del color de la
   acción, offset 2px y halo de 4px del mismo tono al 18% (el box-shadow de
   8px queda por fuera del anillo). El par --lp-ring/--lp-halo se hereda:
   azul por defecto, verde en care, naranja en support, blanco en el carrusel. */
.landing-page a:focus-visible,
.landing-page button:focus-visible,
.landing-page .form-check-input:focus-visible {
    outline: 2px solid var(--lp-ring) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 8px var(--lp-halo) !important;
}
/* Campos (C12): borde azul de 1.5px + anillo de 3px azul al 15% */
.landing-cta-body .form-control:focus,
.landing-cta-body .form-select:focus {
    border-width: 1.5px !important;
}

/* Movimiento reducido (WCAG 2.3.3, C14): todo a 0.01ms y sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
    .landing-page *,
    .landing-page *::before,
    .landing-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .lp-enter-start,
    .lp-enter-end {
        transform: none;
    }
}

/* Cloudflare Turnstile (login, recuperar, activación paso 1): centrado, 16px
   de aire (escala 8/16/24). Sin sitekey no se renderiza. El contenedor queda
   en alto 0 hasta que el widget se dibuja (65px); si el script no carga, no
   ocupa espacio. */
.landing-turnstile {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}
.landing-activate .activate-fields .landing-turnstile { margin: 0; }
.landing-turnstile-hint {
    margin: -8px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-neutral-text-general);
    text-align: center;
}
/* Login con widget en escritorio bajo (1440x800 / 1280x800): el widget suma
   ~81px; se recorta solo aire hasta el mínimo de la escala (16px) para que el
   formulario y un error de una línea quepan sin scroll. */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 900px), (min-width: 1367px) and (max-height: 900px) {
    .landing-auth:has(form .cf-turnstile[data-widget-id]) > .text-start.mb-5,
    .landing-auth:has(form .cf-turnstile[data-widget-id]) .landing-form-subtitle,
    .landing-auth:has(form .cf-turnstile[data-widget-id]) form .fv-row,
    .landing-auth:has(form .cf-turnstile[data-widget-id]) form .d-flex.justify-content-end {
        margin-bottom: 16px !important;
    }
}

/* ==========================================================================
   Móvil (≤767.98px) y tablet vertical (768–1366px, portrait: mismo layout de
   una columna, escalado al final del archivo) — P1 a P8 del plan de la
   versión móvil. Todo va en este bloque para que escritorio no cambie. Metronic fija la raíz en 12px con
   !important bajo 768px y la landing usa rem: aquí los tamaños de texto se
   fijan en px por componente (P1), sin tocar la raíz ni los espaciados.
   ========================================================================== */
@media (max-width: 767.98px), (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    .landing-page {
        /* Gutter lateral: 20px, o la zona segura si es mayor (P8, landscape) */
        --lp-gutter-l: max(20px, env(safe-area-inset-left));
        --lp-gutter-r: max(20px, env(safe-area-inset-right));
        /* Elevación de la barra inferior: nivel 1 del sistema, hacia arriba */
        --lp-bar-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12);
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* ---- P2: un solo scroll (el de la página), sin alto fijo ni scroll
       interno; 100dvh con respaldo 100vh ---- */
    .landing-wrapper {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        flex-shrink: 0; /* body es flex en Metronic: sin esto se encoge al viewport */
    }
    .landing-cta-panel {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        flex-shrink: 0; /* crece con el contenido: el fondo blanco llega al final */
        padding: 0 var(--lp-gutter-r) 0 var(--lp-gutter-l) !important;
    }
    .landing-cta-body {
        overflow: visible !important;
    }
    /* Home: el slide activo fluye en la página (alto mínimo = viewport) y los
       inactivos se ocultan; el que sale se superpone durante el fundido. */
    .landing-carousel-panel {
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .carousel-slides > [data-slide]:not(.is-active):not(.transition-fade-out) {
        display: none !important;
    }
    .carousel-slides > [data-slide].is-active {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
    }
    /* Alto de la foto (--lp-photo-h): 38% del viewport (44% en pantallas
       altas), pero nunca más de lo que deja libre el contenido del slide más
       alto (--lp-slide-content, medido por ancho: a 320 y 360px el subtítulo
       ocupa 2 líneas, desde 375px 1), para que el home entre en una
       pantalla; mínimo 96px. */
    .landing-carousel-panel {
        --lp-slide-content: 487px;
        --lp-photo-h: max(96px, min(38vh, calc(100vh - var(--lp-slide-content))));
    }
    @media (min-width: 360px) {
        .landing-carousel-panel { --lp-slide-content: 456px; }
    }
    @media (min-width: 375px) {
        .landing-carousel-panel { --lp-slide-content: 414px; }
    }
    /* ≤320px: subtítulo de 12px en una línea */
    @media (max-width: 320px) {
        .landing-carousel-panel { --lp-slide-content: 463px; }
    }
    /* Pantallas bajas (≤640px de alto, p. ej. 320x568 y 360x640): menos aire
       entre los indicadores y el mensaje principal, subtítulo de 13px (12px
       a ≤320px), botones 8px más cerca del mensaje, descripción →
       indicadores 0 y botones → ayuda 38px (ver más abajo); lo ganado va a
       la foto. Valores medidos con el slide más alto de cada ancho. */
    @media (max-height: 640px) {
        .landing-carousel-panel { --lp-slide-content: 419px; }
    }
    @media (min-width: 360px) and (max-height: 640px) {
        .landing-carousel-panel { --lp-slide-content: 388px; }
    }
    @media (min-width: 375px) and (max-height: 640px) {
        .landing-carousel-panel { --lp-slide-content: 368px; }
    }
    @media (min-height: 800px) {
        .landing-carousel-panel {
            --lp-photo-h: max(96px, min(44vh, calc(100vh - var(--lp-slide-content))));
        }
    }
    @supports (height: 100dvh) {
        .landing-carousel-panel {
            --lp-photo-h: max(96px, min(38dvh, calc(100dvh - var(--lp-slide-content))));
        }
        @media (min-height: 800px) {
            .landing-carousel-panel {
                --lp-photo-h: max(96px, min(44dvh, calc(100dvh - var(--lp-slide-content))));
            }
        }
    }
    .carousel-top-half {
        height: var(--lp-photo-h) !important;
        flex-shrink: 0;
    }
    /* La onda nunca invade el header (logo + idioma, 48px + zona segura): si
       la foto es baja, la onda se aplana (alto = foto - 56px, 40-140px) y
       queda al menos 8px bajo el selector de idioma. */
    .carousel-bottom-half {
        --carousel-wave-h: clamp(40px, calc(var(--lp-photo-h) - 56px - env(safe-area-inset-top)), 140px);
    }
    .carousel-bottom-half,
    .carousel-wave-mask {
        height: auto !important;
        flex: 1 0 auto;
        overflow: visible !important;
        padding: calc(20px + var(--carousel-wave-h)) var(--lp-gutter-r) 0 var(--lp-gutter-l) !important;
    }

    /* ---- P4: home móvil ---- */
    /* Wordmark knockout blanco y selector de idioma (fondo blanco translúcido)
       sobre la foto, sin franja; respeta la zona segura superior (P8). El
       contraste de la foto se ajusta en producción (sin scrim). */
    .landing-page .landing-mobile-home-header {
        padding: calc(10px + env(safe-area-inset-top)) var(--lp-gutter-r) 10px var(--lp-gutter-l) !important;
    }
    /* Jerarquía: el título del carrusel es el texto más grande del home */
    .carousel-title {
        font-size: 24px !important;
        font-weight: 700;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }
    .carousel-description {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    .carousel-mobile-controls {
        margin-top: 8px;
    }
    .carousel-top-half .fs-8 {
        font-size: 12px !important; /* caption del placeholder */
    }
    /* Menos vacío: el espacio flexible solo separa (16px mínimo) */
    .carousel-mobile-spacer {
        min-height: 16px !important;
    }
    /* Mensaje principal (el mismo h1 de escritorio), sobre los botones */
    .landing-mobile-hero {
        text-align: center;
        margin-bottom: 16px;
    }
    .landing-mobile-hero-title {
        margin: 0;
        color: #ffffff;
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }
    .landing-mobile-hero-subtitle {
        margin: 4px 0 0;
        color: #ffffff;
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.45;
    }
    /* Botones del home: 16px, 48px (botón md del sistema); si el texto no
       cabe en una línea (320px) pasa a dos en vez de recortarse */
    .btn-umano-activate-mobile,
    .btn-umano-login-mobile {
        font-size: 16px !important;
        font-weight: 600 !important;
        height: auto !important;
        min-height: 48px;
        line-height: 1.2;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 4px 12px !important;
    }
    .landing-mobile-actions {
        gap: 12px !important;
    }
    /* Footer sobre el gradiente (sin franja): pastilla de ayuda y, debajo,
       los dos enlaces legales en una sola línea. Foco blanco (gradiente). */
    .landing-mobile-footer {
        --lp-ring: #ffffff;
        --lp-halo: rgba(255, 255, 255, 0.18);
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-top: 40px; /* botones → pastilla de ayuda: 46px (antes 22px) */
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }
    /* Pantallas bajas: el espacio flexible entre indicadores y mensaje puede
       llegar a 0 (la pausa de 28px ya deja 8px transparentes bajo su área de
       44px, y el mensaje sube 4px sobre ella), subtítulo 13px y mensaje →
       botones 8px; la foto gana alto. */
    @media (max-height: 640px) {
        .carousel-mobile-spacer {
            min-height: 0 !important;
        }
        .carousel-mobile-controls {
            margin-bottom: -4px;
        }
        .landing-mobile-hero {
            margin-bottom: 8px;
        }
        .landing-mobile-hero-subtitle {
            font-size: 13px;
        }
        /* Descripción → indicadores: 0 (la fila de 44px empieza donde
           termina la línea de texto; lo visible queda 8px más abajo, en el
           borde de la pausa) y botones → pastilla de ayuda: 38px (32 + 6). */
        .carousel-mobile-controls {
            margin-top: 0;
        }
        .landing-mobile-footer {
            margin-top: 32px;
        }
    }
    /* 320px o menos: el subtítulo del mensaje en 12px (mínimo del sistema)
       para que entre en una línea. */
    @media (max-width: 320px) {
        .landing-mobile-hero-subtitle {
            font-size: 12px;
        }
    }

    /* ---- P1: escala tipográfica fija ---- */
    .landing-page .landing-lang-btn {
        font-size: 14px !important;
    }
    .landing-page .btn-umano-back {
        font-size: 14px !important;
    }
    .landing-page .btn-umano-activate,
    .landing-page .btn-umano-login,
    .landing-page .btn-umano-primary,
    .landing-page .btn-umano-care {
        font-size: 16px;
    }
    .landing-page .landing-form-title,
    .landing-page .landing-activate .landing-step-title {
        font-size: 24px; /* H2 del sistema en móvil (P6) */
        line-height: 1.25;
    }
    .landing-page .landing-form-subtitle {
        font-size: 16px;
        line-height: 1.5;
    }
    .landing-page .landing-cta-body label.form-label {
        font-size: 14px !important;
    }
    .landing-page .landing-cta-body .form-control,
    .landing-page .landing-cta-body .form-select,
    .landing-page .landing-cta-body input:not([type="checkbox"]):not([type="radio"]) {
        font-size: 16px !important; /* evita el zoom automático de iOS */
    }
    .landing-page .landing-cta-body .fs-6 { font-size: 16px !important; }
    .landing-page .landing-cta-body .fs-7 { font-size: 14px !important; }
    .landing-page .landing-cta-body .fs-8 { font-size: 13px !important; }
    .landing-page .stepper-label { font-size: 13px; }
    .landing-page .badge-identity-confirmed,
    .landing-page .badge-error { font-size: 13px; }

    /* ---- P6: menos aire entre el header y el título ---- */
    .landing-header {
        padding-top: calc(12px + env(safe-area-inset-top));
        padding-bottom: 4px;
    }
    .landing-page .landing-cta-body {
        padding-top: 8px !important;
    }
    .landing-page .landing-activate-header.mb-5,
    .landing-page .landing-auth .text-start.mb-5 {
        margin-bottom: 12px !important;
    }

    /* ---- P5: áreas táctiles de 44px sin cambiar lo visual ---- */
    .landing-header > a,
    .landing-mobile-home-logo {
        position: relative;
    }
    .landing-header > a::after,
    .landing-mobile-home-logo::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }
    .landing-forgot-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: -13.5px 0; /* el alto de la fila no cambia */
    }
    /* Ayuda: 32px visuales + 6px arriba y abajo (el área de 44px no toca
       los enlaces legales si pasan a la fila de abajo; alto total igual) */
    .landing-footer-help {
        margin: 6px 0;
    }
    /* Enlaces legales cortos ("Términos y condiciones" · "Privacidad"):
       siempre en una sola línea centrada (entran desde 320px) */
    .landing-footer-links {
        flex-wrap: nowrap;
        gap: 0 24px;
    }
    .landing-footer-link {
        min-height: 44px;
        padding: 0 2px;
        font-size: 13px;
        white-space: nowrap;
    }
    .landing-cta-footer {
        gap: 4px 24px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    /* Botón de éxito ("Volver al inicio", "Volver a inicio de sesión"): es la
       acción de la pantalla, no el "Volver" compacto */
    .landing-page .form-container-card.py-5 .btn-umano-back {
        min-height: 44px;
    }
    /* Consentimientos del paso 3: área de 44px para el checkbox; los links
       "términos y condiciones" y "política de privacidad" quedan a su tamaño
       normal de link en línea (la casilla y el resto de la frase marcan). */
    .landing-activate .landing-terms-label::before { left: -42px; } /* 30px + 12px de gutter */
    /* Pausa del carrusel: su área de 44px no se solapa con el primer punto */
    .carousel-mobile-controls .carousel-pause-btn {
        margin: 0 9px 0 8px;
    }

    /* ---- P3: barra inferior fija con el botón principal (pasos 2 y 3) ----
       Blanca, borde superior y elevación sutil, botón a todo el ancho; el
       error general del paso queda sobre el botón, dentro de la barra. */
    .landing-activate .landing-step-footer,
    .landing-activate .landing-terms + .landing-step-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 16px calc(-1 * var(--lp-gutter-r)) 0 calc(-1 * var(--lp-gutter-l));
        padding: 12px var(--lp-gutter-r) calc(12px + env(safe-area-inset-bottom)) var(--lp-gutter-l);
        background-color: var(--color-white);
        border-top: 1px solid var(--color-neutral-200);
        box-shadow: var(--lp-bar-shadow);
    }
    .landing-activate .btn-umano-step {
        width: 100%;
        max-width: none;
    }
    /* El campo enfocado (y su error) nunca queda bajo la barra */
    html {
        scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   P9: selector de país a pantalla completa de intl-tel-input (móvil). Solo
   aplica a .iti--fullscreen-popup, que escritorio no usa.
   ========================================================================== */
.iti--fullscreen-popup.iti--container {
    --iti-mobile-popup-margin: 16px;
    padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background-color: rgba(28, 28, 28, 0.6);
    z-index: 1060;
}
.iti--fullscreen-popup .iti__dropdown-content {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.iti--fullscreen-popup .iti__search-input {
    flex-shrink: 0;
    height: 48px;
    margin: 12px;
    width: calc(100% - 24px);
    padding: 0 16px;
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-sm);
    font-size: 16px; /* evita el zoom automático de iOS */
}
.iti--fullscreen-popup .iti__search-input:focus,
.iti--fullscreen-popup .iti__search-input:focus-visible {
    outline: none;
    border-color: #1261ab;
    box-shadow: 0 0 0 3px rgba(18, 97, 171, 0.15);
}
.iti--fullscreen-popup .iti__country-list {
    border-top: 1px solid var(--color-neutral-200);
}
.iti--fullscreen-popup .iti__country {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px;
    font-size: 16px;
    line-height: 1.4;
}
.iti--fullscreen-popup .iti__country .iti__dial-code {
    color: var(--color-neutral-text-general); /* 5.3:1; 4.7:1 sobre el resaltado */
}
/* País activo (aria-activedescendant del buscador): tinte azul + borde
   izquierdo de 3px #1261ab (no depende solo del tinte) */
.iti--fullscreen-popup .iti__country.iti__highlight {
    background-color: #e8eff7;
    box-shadow: inset 3px 0 0 #1261ab;
}
/* La lista hace scroll y Chrome la vuelve enfocable con Tab: anillo del sistema */
.iti--fullscreen-popup .iti__country-list:focus-visible {
    outline: 2px solid #1261ab;
    outline-offset: -2px;
}
.iti-popup-close {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 16px;
    border: none;
    border-radius: 9999px;
    background-color: var(--color-white);
    color: var(--color-neutral-text-main);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    --lp-ring: #ffffff; /* sobre el velo oscuro */
    --lp-halo: rgba(255, 255, 255, 0.18);
}
.iti-popup-close:hover { background-color: #e8eff7; }

/* ==========================================================================
   Ronda 13 — ajustes aprobados (plan spicy-frolicking-beaver, puntos 1–10)
   ========================================================================== */

/* Punto 8: carrusel de escritorio. .d-flex (!important) le ganaba al
   display:none de x-show y los 4 slides quedaban apilados y expuestos. Solo
   el activo (y el que sale durante el fundido de 500ms) se muestra; además
   los inactivos van inert (home.html), así que lector y Tab ven uno solo. */
.carousel-slides > [data-slide]:not(.is-active):not(.transition-fade-out) {
    display: none !important;
}

/* Punto 7: login y recuperar/restablecer contraseña (landing y /accounts/),
   escritorio y móvil. 24px entre bloques de campo, 32px antes del botón
   principal (sistema de 8px); "¿Olvidaste tu contraseña?" sigue a la
   derecha bajo su campo y el botón principal se centra con su ancho de hoy. */
.landing-auth form .fv-row,
.landing-auth .form .fv-row,
.tf-login .landing-cta-body form .fv-row {
    margin-bottom: 24px !important;
}
/* Contraseña → link de recuperación, pegado a su campo */
.landing-auth form .fv-row:has(+ .d-flex.justify-content-end),
.tf-login .landing-cta-body form .fv-row:has(#id_auth-password) {
    margin-bottom: 8px !important;
}
/* Último bloque antes del botón: 32px */
.landing-auth form .d-flex.justify-content-end,
.landing-auth .form .fv-row:has(+ .landing-turnstile),
.landing-auth .form .fv-row:has(+ .landing-form-error),
.tf-login .landing-cta-body form .d-flex.justify-content-end,
.tf-login .landing-cta-body form .fv-row:has(+ .tf-error-summary),
.tf-login .landing-cta-body form .fv-row:has(+ button[type="submit"]),
.tf-login .landing-cta-body form .fv-row:has(.cf-turnstile) {
    margin-bottom: 32px !important;
}
.landing-auth .landing-turnstile { margin-bottom: 32px; }
/* Error general del login (proximidad; solo el <form> del login, no recuperar): con mensaje visible, pegado al bloque
   anterior (12px, deja libre el área de 44px del link "¿Olvidaste tu
   contraseña?") y 24px antes del botón, así se lee como parte del formulario.
   Vacío no ocupa alto; al aparecer el botón baja ~22px (antes ~28px). El
   contenedor posicionado pinta encima del área táctil del link. */
.landing-auth form .landing-form-error { position: relative; }
.landing-auth form .d-flex.justify-content-end:has(+ .landing-form-error .landing-field-error-msg),
.landing-auth form .landing-turnstile:has(+ .landing-form-error .landing-field-error-msg),
.tf-login .landing-cta-body form .d-flex.justify-content-end:has(+ .tf-error-summary),
.tf-login .landing-cta-body form .fv-row:has(.cf-turnstile):has(+ .tf-error-summary) {
    margin-bottom: 12px !important;
}
.landing-auth form .landing-form-error .landing-field-error-msg { margin-bottom: 24px; }
.tf-login .landing-cta-body form .d-flex.justify-content-end + .tf-error-summary,
.tf-login .landing-cta-body form .fv-row:has(.cf-turnstile) + .tf-error-summary {
    position: relative;
    margin-bottom: 24px;
}
/* Link de recuperación del login two_factor: su área de 44px no suma aire
   visual ni se superpone al campo (texto a ~12px del campo y ~32px del botón) */
.tf-login .landing-cta-body form .fv-row:has(#id_auth-password) {
    margin-bottom: 12px !important;
}
.tf-login .landing-cta-body form .d-flex.justify-content-end .tf-link {
    margin: -12px 0;
}
.landing-auth form .btn-umano-login,
.landing-auth .form .btn-umano-login,
.tf-login .landing-cta-body form .btn-umano-login {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
/* Vistas de éxito: 32px antes del botón (ya centrado) */
.tf-login .tf-success .tf-success-msg.mb-8,
.landing-auth .form-container-card.py-5 .text-muted.mb-8 {
    margin-bottom: 32px !important;
}
/* Éxito de recuperar en la landing: misma jerarquía que password_reset_done
   (.tf-login .tf-success-* en auth/_auth_head.html): título → mensaje
   principal 16/600 texto principal → secundario 14/400 texto general */
.landing-auth .tf-success .landing-form-title { margin-bottom: 12px; }
.landing-auth .tf-success-msg {
    margin: 0 0 12px;
    color: var(--color-neutral-text-main); /* 17:1 */
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.landing-auth .tf-success-hint {
    color: var(--color-neutral-text-general); /* 5.3:1 */
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 767.98px), (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    /* Punto 7 (móvil): el link "¿Olvidaste tu contraseña?" conserva su área
       de 44px; el margen negativo se compensa para mantener 8px y 32px */
    .landing-auth form .fv-row:has(+ .d-flex.justify-content-end) { margin-bottom: 12px !important; }
    .landing-auth form .landing-forgot-link { margin: -12px 0; }

    /* Punto 5: pasos 1–3 con ~16px entre bloques de campo. La ranura de
       error ya no se reserva: el mensaje empuja el contenido (scroll de
       página). Escritorio no cambia. */
    .landing-activate {
        --lp-err-slot: 0px;
        --lp-rules-gap: 0px;
    }
    .landing-activate .activate-fields { gap: 16px; }
    .landing-activate .registration-grid { row-gap: 16px !important; }
    .landing-activate .registration-grid + .landing-switch { margin-top: 16px; }
    /* Punto 6 (móvil): checklist a 8px bajo el campo "Contraseña" */
    .landing-activate .password-rules-grid,
    .landing-activate .fv-row:has(> .landing-field-error .landing-field-error-msg) > .password-rules-grid {
        margin-top: 8px;
        margin-bottom: 0;
    }

    /* Punto 2: footer del home sobre el gradiente */
    /* "¿Necesitas ayuda?": pastilla de 32px visuales y texto 13px, secundaria
       frente al botón blanco "Iniciar sesión": fondo blanco al 5%, texto e
       ícono blancos y borde blanco 1.5px al 75%. Peor píxel de los 4
       gradientes: texto ≥4.6:1, borde ≥3.4:1. El naranja (#f74a14 o
       #ff7a4d) no llega a 3:1 sobre el verde/púrpura, por eso no se usa aquí.
       El ::before transparente da el área de 44px. */
    .landing-mobile-footer .landing-footer-help {
        position: relative;
        min-height: 32px;
        padding: 0 14px;
        gap: 6px;
        border: 1.5px solid rgba(255, 255, 255, 0.75);
        background-color: rgba(255, 255, 255, 0.05);
        color: #ffffff;
        font-size: 13px;
        margin: 6px 0; /* el área ampliada no toca los botones ni los links */
    }
    .landing-mobile-footer .landing-footer-help::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }
    .landing-mobile-footer .landing-footer-help svg {
        width: 14px;
        height: 14px;
        color: #ffffff;
    }
    /* Hover: borde blanco pleno; el fondo no cambia (el texto mantiene AA) */
    .landing-mobile-footer .landing-footer-help:hover {
        border-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }
    /* Enlaces legales en una sola fila, blancos (≥4.9:1 sobre el píxel más
       claro de los 4 gradientes), 12px, sin partirse (textos cortos: entran
       desde 320px). Área de 44px de alto. */
    .landing-mobile-footer .landing-footer-links {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0 16px;
        width: 100%;
    }
    .landing-mobile-footer .landing-footer-link {
        flex: 0 1 auto;
        min-height: 44px;
        padding: 0;
        color: #ffffff;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        justify-content: center;
        white-space: nowrap;
    }
    .landing-mobile-footer .landing-footer-link:hover {
        color: #ffffff;
        text-decoration: underline;
    }
}

/* ==========================================================================
   Tablet vertical (768–1366px de ancho, portrait: iPad mini a iPad Pro 12,9")
   Mismo layout de una columna que el celular (los bloques "móvil" de arriba
   incluyen esta condición), escalado al lienzo más grande: columna de
   contenido de 600px centrada y tipografía del sistema (carrusel 32/18px,
   mensaje 24/16px, botones 16px, labels 14px, inputs 16px). Valores en px:
   aquí la raíz de Metronic es 13px.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    /* Utilidades d-md-* de Bootstrap (y las que asigna Alpine con :class):
       en tablet vertical se comportan como en el celular */
    .landing-page .d-md-none.d-flex { display: flex !important; }
    .landing-page .d-md-none:not(.d-flex) { display: block !important; }
    .landing-page .d-none.d-md-flex,
    .landing-page .d-none.d-md-block { display: none !important; }

    :root { --landing-col-width: 600px; }

    /* Columna centrada: header, contenido y footer de los formularios */
    .landing-header { max-width: var(--landing-col-width); }

    /* Home: header sobre la foto y bloque del gradiente en la misma columna */
    .landing-page .landing-mobile-home-header {
        padding-left: max(var(--lp-gutter-l), calc((100% - var(--landing-col-width)) / 2)) !important;
        padding-right: max(var(--lp-gutter-r), calc((100% - var(--landing-col-width)) / 2)) !important;
    }
    .carousel-bottom-half > .w-100 {
        max-width: var(--landing-col-width);
        margin-left: auto;
        margin-right: auto;
    }
    /* El contenedor de slides ocupa todo el ancho del panel (en el celular
       lo llena su propio contenido) */
    .landing-carousel-panel > .carousel-slides { flex: 1 1 auto; width: 100%; }
    /* Foto proporcional al lienzo: hasta 55% del alto, dejando 520px al
       contenido del slide (mide ~460px con 16px de aire; el resto queda de
       margen para textos más largos en otros idiomas) */
    .landing-carousel-panel {
        --lp-slide-content: 520px;
        --lp-photo-h: max(96px, min(55vh, calc(100vh - var(--lp-slide-content))));
    }
    @supports (height: 100dvh) {
        .landing-carousel-panel {
            --lp-photo-h: max(96px, min(55dvh, calc(100dvh - var(--lp-slide-content))));
        }
    }

    .carousel-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    .carousel-description {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
    .landing-mobile-hero-title { font-size: 24px; line-height: 1.25; }
    .landing-mobile-hero-subtitle { font-size: 16px; line-height: 1.5; margin-top: 8px; }
    .landing-mobile-hero { margin-bottom: 24px; }

    /* Barra fija de los pasos 2–3: de borde a borde; el botón, en la columna */
    .landing-activate .landing-step-footer,
    .landing-activate .landing-terms + .landing-step-footer {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
    }
}

/* ==========================================================================
   Dos columnas (tablet horizontal, laptop, escritorio)
   ========================================================================== */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1367px) {
    /* Título del carrusel y título del panel derecho a la misma escala:
       Display M 32px hasta 1280px de ancho, crece hasta 40px (1920px).
       Descripción y bajada: 16px → 18px. Blanco sobre el píxel más claro de
       los 4 gradientes: ≥4.87:1. */
    .carousel-title,
    .landing-hero-title {
        font-size: clamp(32px, calc(16px + 1.25vw), 40px) !important;
        line-height: 1.25;
    }
    .carousel-description,
    .landing-hero-subtitle {
        font-size: clamp(16px, calc(8px + 0.625vw), 18px) !important;
        line-height: 1.5;
    }
    /* Pausa e indicadores justo bajo la descripción, alineados con el texto:
       la fila de 44px empieza 8px bajo la última línea (el círculo visible
       de la pausa queda a 16px) y el -8px alinea su borde con el texto. */
    .landing-page .carousel-mobile-controls {
        justify-content: flex-start !important;
        gap: 0;
        margin: 8px 0 0 -8px;
    }
}

/* Dos columnas: áreas táctiles de 44px sin cambiar lo visual (mismas
   técnicas que el bloque P5 de móvil, pero solo con pseudo-elementos
   transparentes: ni tamaños, ni márgenes, ni posiciones cambian). Cada
   área se recorta para no pisar la del control vecino. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1367px) {
    /* Logo del header: 44px de alto (o su alto, si ya es mayor) */
    .landing-header > a { position: relative; }
    .landing-header > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: max(44px, 100%);
        transform: translateY(-50%);
    }
    /* Enlaces legales: 6px hacia arriba (si el footer se parte en dos filas,
       la de "¿Necesitas ayuda?" llega justo ahí: 12px de separación) y el
       resto hacia abajo, dentro del padding inferior del footer (≥12px). */
    .landing-footer-link { position: relative; }
    .landing-footer-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -6px;
        height: 44px;
    }
    /* "¿Olvidaste tu contraseña?" (landing): sube solo los 8px que lo separan
       del campo contraseña y baja por los 32px libres antes del botón. El de
       /accounts/login/ (.tf-link) ya mide 44px. */
    .landing-forgot-link { position: relative; }
    .landing-forgot-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 44px;
    }
    /* Botón de éxito ("Volver al inicio", "Volver a inicio de sesión"):
       44px de alto a lo ancho del botón, sin cambiar la pastilla */
    .form-container-card.py-5 .btn-umano-back { position: relative; }
    .form-container-card.py-5 .btn-umano-back::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: max(44px, 100%);
        transform: translateY(-50%);
    }
    /* Consentimientos del paso 3: ver el bloque base (fila entera, 12px
       sobre y bajo la frase, 24px entre filas) */
}