/*
 * Black Friday AR · Grupo Q — estilos públicos.
 *
 * Diseño de referencia: Figma "new-GRUPOQ", pantallas móviles de 390 × 844.
 * Las medidas en px salen directamente de Figma. La composición usa flujo
 * (flex en columna) con los mismos espaciados en lugar de posiciones absolutas,
 * para que funcione en teléfonos de 360 a 430 px de ancho.
 */

/* ---------- Tokens ---------- */

:root {
    --azul: #004fff;
    --negro: #000;
    --blanco: #fff;
    --rojo: #ff0004;
    --gris-placeholder: #9f9f9f;
    --gris-camara: #333;
    --gris-linea: #878787;

    --fuente-titular: 'Anton', 'Arial Narrow', sans-serif;
    --fuente-texto: 'Open Sans', system-ui, sans-serif;

    /* Curva de las animaciones de Figma. */
    --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);

    /* Margen lateral de los bloques de texto (44 px en 390). */
    --margen: 44px;

    /* Distancia del pie (logo + términos) al borde inferior, igual en todas las pantallas. */
    --pie: calc(32px + env(safe-area-inset-bottom, 0px));
}

@font-face {
    font-family: 'Anton';
    src: url('../fonts/anton-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/open-sans-latin-wght.woff2') format('woff2');
    font-weight: 300 800;
    font-display: swap;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--azul);
    color: var(--blanco);
    font-family: var(--fuente-texto);
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--blanco);
    outline-offset: 3px;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Pantalla ---------- */

.pantalla {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 16px 0 var(--pie);
    overflow: hidden;
    /* clip: además de recortar, impide que el navegador desplace la pantalla
       en horizontal al enfocar un campo (las líneas decorativas sobresalen). */
    overflow: clip;
}

/* Texto de ayuda bajo el indicador ("Tap en CONTINUAR"). */
.pista {
    margin: 16px 20px 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.pista strong {
    font-weight: 800;
    text-decoration: underline;
}

/* Titular "EL BLACK FRIDAY MÁS BLACK". */
.titular {
    align-self: stretch;
    margin: 0;
    padding-left: 57px;
    color: var(--negro);
    font-family: var(--fuente-titular);
    font-weight: 400;
    text-transform: uppercase;
}

.titular span {
    display: block;
}

.titular--grande {
    margin-top: 131px;
    font-size: 65px;
    line-height: 61px;
    letter-spacing: -1.3px;
}

/* "FRIDAY MÁS" mide 275 px: con 57 px de margen se parte en dos líneas por
   debajo de 332 px de ancho. Ahí el margen baja para mantener 3 líneas. */
@media (max-width: 339px) {
    .titular--grande {
        padding-left: 36px;
    }
}

.titular--pequeno {
    margin-top: 36px;
    font-size: 25px;
    line-height: 25.5px;
    letter-spacing: -0.5px;
}

/* Líneas y círculo rojos decorativos sobre el titular. */
.decoracion {
    position: absolute;
    right: 30px;
    width: 132px;
    height: 188px;
    object-fit: cover;
    pointer-events: none;
}

/* "Convertimos el negro ✳ de tus repuestos en valor". */
.lema {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    margin: 0;
    padding: 0 var(--margen);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.lema img {
    width: 14px;
    height: 14px;
    object-fit: cover;
}

/* El lema mide unos 304 px: con el margen de 44 px no cabe en pantallas de
   menos de ~390 px. Ahí se centra con margen chico y, en 320, se aprieta. */
@media (max-width: 399px) {
    .lema {
        justify-content: center;
        padding: 0 16px;
    }
}

@media (max-width: 339px) {
    .lema {
        letter-spacing: 0.5px;
    }
}

/*
 * Logo + enlace a términos: siempre pegados abajo, a la misma distancia del
 * borde en todas las pantallas (margin-top: auto en la columna flex). El
 * padding-top garantiza un espacio mínimo con el contenido.
 */
.firma {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.firma img {
    width: 116px;
    height: 38px;
    object-fit: cover;
}

.firma a {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.firma--oscura a {
    color: var(--negro);
}

.aviso-pequeno {
    margin: 17px 20px 0;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    opacity: 0.7;
}

/* ---------- Indicador de pasos ---------- */

.pasos {
    position: relative;
    display: flex;
    gap: 26px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pasos::before,
.pasos::after {
    content: '';
    position: absolute;
    top: 8.25px;
    left: 9px;
    height: 1.5px;
    background: var(--blanco);
}

.pasos::before {
    width: 220px;
    opacity: 0.35;
}

.pasos::after {
    width: 0;
}

/* La línea se llena hasta el paso actual (44 px por paso; 7 = completo). */
.progreso-2::after { width: 44px; }
.progreso-3::after { width: 88px; }
.progreso-4::after { width: 132px; }
.progreso-5::after { width: 176px; }
.progreso-6::after { width: 220px; }
.progreso-7::after { width: 220px; }

.pasos li {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
}

.paso--hecho {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--blanco);
}

.paso--hecho img {
    width: 9px;
    height: 7px;
}

/* El SVG del paso actual trae su halo: 26 px que sobresalen 4 px por lado. */
.paso--actual img {
    position: absolute;
    inset: -4px;
    width: 26px;
    height: 26px;
}

.paso--pendiente img {
    width: 18px;
    height: 18px;
}

/* ---------- Botones ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    min-width: 200px;
    padding: 0 28px;
    border: 0;
    border-radius: 30px;
    font-family: var(--fuente-texto);
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform 0.15s var(--ease-salida);
}

/* "ESCANEAR OTRO REPUESTO" no cabe a 18 px en pantallas de 320. */
@media (max-width: 359px) {
    .boton {
        max-width: calc(100% - 32px);
        padding: 0 20px;
        font-size: 16px;
    }
}

.boton:active {
    transform: scale(0.97);
}

.boton img {
    width: 20px;
    height: 20px;
}

.boton--azul {
    background: var(--azul);
    color: var(--blanco);
}

.boton--invertido {
    background: var(--blanco);
    color: var(--azul);
}

.boton--azul:focus-visible {
    outline-color: var(--azul);
}

.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--azul);
    border-radius: 30px;
    color: var(--azul);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.boton-secundario img {
    width: 14px;
    height: 14px;
}

.boton-secundario:focus-visible {
    outline-color: var(--azul);
}

/* ---------- 01 Bienvenida (splash) ---------- */

.splash {
    /* El retraso de .con-splash es para el inicio de abajo, no para el splash. */
    --inicio: 0s;
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    background: var(--azul);
    /* Se ve la animación de entrada y queda un momento antes de desvanecerse. */
    animation: splash-sale 0.4s var(--ease-salida) 2s forwards;
}

.splash__saludo {
    margin: 36px 0 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.splash__logo {
    width: 283px;
    height: 91px;
    margin-top: 216px;
    object-fit: cover;
}

@keyframes splash-sale {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ---------- 02 Inicio ---------- */

.inicio .decoracion {
    top: 103px;
}

.inicio .lema {
    margin-top: 28px;
}

.inicio .boton {
    margin-top: 37px;
}


/* Pantallas bajas (320×568 y similares): el titular de Figma empuja el botón
   CONTINUAR fuera de la primera pantalla. Se reducen los márgenes verticales
   (el titular no cambia). */
@media (max-height: 700px) {
    .inicio .titular--grande {
        margin-top: 32px;
    }

    .inicio .decoracion {
        top: 4px;
    }

    .inicio .lema {
        margin-top: 20px;
    }

    .inicio .boton {
        margin-top: 24px;
    }

    .inicio .firma {
        padding-top: 24px;
    }
}

/* ---------- 02b Cómo funciona ---------- */

.instructivo .decoracion {
    top: 113px;
}

.instrucciones {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: stretch;
    margin-top: 31px;
    padding: 0 var(--margen);
}

.instrucciones h1 {
    margin: 0;
    color: var(--negro);
    font-family: var(--fuente-titular);
    /* "INSTRUCCIONES DE USO" mide ~8,4 veces el tamaño de letra: se ajusta al
       ancho disponible (pantalla menos 2 × 44 px) para que quede en una línea. */
    font-size: clamp(24px, calc((100vw - 88px) / 8.6), 34px);
    font-weight: 400;
    line-height: 51px;
}

.instrucciones ol {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: instruccion;
}

.instrucciones li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    counter-increment: instruccion;
}

.instrucciones li h2 {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 800;
    line-height: 24px;
    text-transform: uppercase;
}

.instrucciones li p {
    margin: 0;
}

.instrucciones li::before {
    content: counter(instruccion);
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--blanco);
    color: var(--azul);
    font-weight: 800;
    line-height: 1;
}

.instructivo .lema {
    margin-top: 25px;
}

.instructivo .boton {
    margin-top: 43px;
}


/* ---------- 03b Cámara bloqueada ---------- */

.camara {
    padding: 0 0 var(--pie);
    background: var(--blanco);
    color: var(--negro);
}

.camara__encabezado {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    height: 105px;
    padding-top: 16px;
    background: var(--azul);
    color: var(--blanco);
}

.camara__encabezado p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.camara__encabezado p:first-of-type {
    margin-top: 14px;
    font-weight: 700;
}

/* Visor apagado: fondo gris, guías y marco del escáner. */
.camara__visor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 325px;
    overflow: hidden;
    background: var(--gris-camara);
    color: var(--blanco);
}

.camara__guia {
    position: absolute;
    top: 14px;
    width: 1px;
    height: 465px;
}

.camara__guia--v1 {
    left: calc(50% - 83.5px);
}

.camara__guia--v2 {
    left: calc(50% + 84.5px);
}

/* El SVG de la guía horizontal es vertical en Figma (rotado -90°). */
.camara__guia--h {
    top: 44.5px;
    left: calc(50% - 195px);
    height: 390px;
    transform: rotate(-90deg);
    transform-origin: 0 0;
}

.camara__marco {
    position: absolute;
    top: 69px;
    left: calc(50% - 124px);
    width: 248px;
    height: 229px;
}

.camara__marco img {
    position: absolute;
    inset: -1.5px;
    width: 251px;
    height: 232px;
}

.camara__aviso {
    position: relative;
    text-align: center;
}

.camara__aviso h1 {
    margin: 0 0 10px;
    font-family: var(--fuente-titular);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.05;
}

.camara__aviso p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.camara .boton {
    margin-top: 26px;
}

.camara .boton-secundario {
    margin-top: 16px;
}


/* ---------- Encabezado azul (05 y 06) ---------- */

.encabezado-azul {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    height: 105px;
    padding-top: 16px;
    background: var(--azul);
    color: var(--blanco);
}

.encabezado-azul__texto {
    margin: 30px 20px 0;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.encabezado-azul__texto strong {
    font-weight: 800;
}

.encabezado-azul__texto--cierre {
    margin-top: 36px;
}

/* Línea gris de lado a lado (el SVG de Figma es vertical y va rotado -90°). */
.separador {
    position: relative;
    display: block;
    height: 1px;
}

.separador img {
    position: absolute;
    top: 1px;
    left: calc(50% - 195px);
    width: 1px;
    height: 390px;
    transform: rotate(-90deg);
    transform-origin: 0 0;
}

/* ---------- 05 Formulario / 05a Error ---------- */

.formulario {
    padding: 0 0 var(--pie);
    background: var(--blanco);
    color: var(--negro);
}

.lineas {
    align-self: stretch;
    margin: 45px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 4px;
}

.lineas > span:not(.separador) {
    display: block;
    padding-left: 66px;
}

.lineas > .separador:nth-of-type(2) {
    margin: 9px 0 8px;
}

.lineas > .separador:nth-of-type(4) {
    margin: 9px 0 10px;
}

.lineas__ultima {
    position: relative;
}

.lineas__asterisco {
    position: absolute;
    top: 2px;
    left: 277px;
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.formulario__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.formulario__banda {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 34px 24px 14px;
    min-height: 114px;
    background: var(--azul);
    color: var(--blanco);
}

.campo-correo {
    position: relative;
    display: block;
    /* Centrado, con 24 px de margen a cada lado (máximo 340 px). */
    width: min(340px, 100%);
}

.campo-correo img {
    position: absolute;
    top: 10.5px;
    left: 14px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.campo-correo input {
    width: 100%;
    height: 41px;
    margin: 0;
    padding: 0 16px 0 42px;
    border: 2px solid transparent;
    border-radius: 30px;
    background: var(--blanco);
    color: var(--negro);
    font-family: var(--fuente-texto);
    font-size: 16px;
    font-weight: 700;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.campo-correo input::placeholder {
    color: var(--gris-placeholder);
    opacity: 1;
}

.campo-correo input:focus-visible {
    border-color: var(--negro);
}

.campo-correo--error input,
.campo-correo--error input:focus-visible {
    border-color: var(--rojo);
}

.autorizacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 14 px entre líneas si "Ver política" baja: las zonas táctiles
       ampliadas de la casilla y del enlace no se pisan. */
    gap: 14px 8px;
    /* Mismo ancho que el correo, para que queden alineados a la izquierda. */
    width: min(340px, 100%);
    font-size: 10px;
    white-space: nowrap;
}

.autorizacion label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

.autorizacion input {
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--blanco);
    border-radius: 2px;
    background: transparent center / 9px 7px no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.autorizacion input:checked {
    background-color: var(--blanco);
    background-image: url('../img/ui/icono-check.svg');
}

.autorizacion input[aria-invalid='true'] {
    border-color: var(--rojo);
    box-shadow: 0 0 0 1px var(--rojo);
}

.autorizacion a {
    position: relative;
    font-weight: 700;
}

/* "Ver política" mide 14 px de alto: se amplía la zona táctil sin cambiar
   cómo se ve (como la casilla, más abajo). */
.autorizacion a::before {
    content: '';
    position: absolute;
    inset: -6px -4px;
}

/* Área táctil mínima de la casilla sin cambiar su tamaño visual. */
.autorizacion label {
    position: relative;
}

.autorizacion label::before {
    content: '';
    position: absolute;
    inset: -7px -3px;
}

.formulario__error {
    display: flex;
    gap: 8px;
    align-self: stretch;
    margin: 9px 0 0;
    padding-left: 47px;
    color: var(--rojo);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.formulario__error[hidden] {
    display: none;
}

.formulario__form .boton {
    margin-top: 27px;
}

.formulario__error:not([hidden]) ~ .boton {
    margin-top: 14px;
}

.boton[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
}

.cf-turnstile {
    margin-top: 14px;
}

.formulario .boton-secundario {
    margin-top: 16px;
}


/* ---------- 06 Cierre ---------- */

.cierre {
    padding: 0 0 var(--pie);
    background: var(--blanco);
    color: var(--negro);
}

/* Caja de éxito (rojo #ff0004, decidido con el cliente). */
.exito {
    position: relative;
    flex: none;
    width: 330px;
    height: 83px;
    margin-top: 19px;
    border-radius: 6px;
    background: var(--rojo);
    color: var(--blanco);
}

.exito h1 {
    position: absolute;
    top: 19px;
    left: 0;
    right: 0;
    margin: 0;
    font-family: var(--fuente-titular);
    font-size: 30px;
    font-weight: 400;
    line-height: 45px;
    text-align: center;
    transform: translateX(5.5px);
}

.exito .exito__circulo {
    position: absolute;
    top: 24px;
    left: 36px;
    width: 35.6667px;
    height: 35.6667px;
    animation-duration: 0.4s;
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
}

/* El check se "dibuja" de izquierda a derecha (path trim en Figma). */
.exito__check {
    position: absolute;
    top: 35.8px;
    left: 44.3px;
    width: 19px;
    height: 14px;
    animation: trazo 0.3s var(--ease-salida) 0.6s both;
}

@keyframes trazo {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.exito__asterisco {
    position: absolute;
    top: 27px;
    left: 266px;
    width: 30px;
    height: 30px;
    object-fit: cover;
    transform: scaleX(-1);
}

.cierre__resumen {
    align-self: stretch;
    max-width: 221px;
    margin: 17px 0 0;
    padding-left: 36px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.cierre__resumen strong {
    color: var(--rojo);
    font-weight: 800;
}

.cierre .decoracion {
    top: 223px;
}

.cierre .titular {
    position: relative;
    margin-top: 35px;
}

.cierre__asterisco {
    position: absolute;
    top: 141.5px;
    /* Figma: 301 px; en pantallas angostas se acerca para no quedar cortado. */
    left: min(301px, calc(100% - 41px));
    width: 33px;
    height: 33px;
    object-fit: cover;
}

.cierre .boton {
    margin-top: 32.5px;
}

.cierre .boton-secundario {
    margin-top: 16px;
}


/* ---------- Páginas de texto (legales, campaña finalizada, errores) ---------- */

.texto {
    align-items: stretch;
    padding: 16px var(--margen) var(--pie);
}

.texto .pasos {
    align-self: center;
}

.texto h1 {
    margin: 40px 0 16px;
    color: var(--negro);
    font-family: var(--fuente-titular);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
}

.texto h2 {
    margin: 24px 0 8px;
    font-size: 14px;
    font-weight: 800;
}

.texto p,
.texto li {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* El lema es un <p>: aquí recupera su tamaño y usa casi todo el ancho
   (el texto ocupa ~304 px y el contenedor tiene 44 px de margen). */
.texto .lema {
    margin: 24px calc(16px - var(--margen)) 0;
    padding: 0;
    justify-content: center;
    font-size: 10px;
    line-height: normal;
}

.texto .boton {
    align-self: center;
    margin-top: 32px;
}

/* Términos: lista de condiciones con viñeta. */
.texto .condiciones {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.texto .condiciones li + li {
    margin-top: 10px;
}


.borrador {
    padding: 8px 12px;
    border: 1px dashed var(--blanco);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}

/* ---------- Bloqueo en computador ---------- */

/* ---------- Animaciones de entrada (Figma: get_motion_context) ---------- */

/*
 * Cada elemento con .aparece entra con opacidad y desplazamiento/escala.
 * --retraso, --y y --escala se fijan por elemento; --inicio suma el tiempo
 * del splash cuando la pantalla 02 aparece debajo de él.
 */
.aparece {
    animation: aparece 0.5s var(--ease-salida) both;
    animation-delay: calc(var(--inicio, 0s) + var(--retraso, 0s));
}

@keyframes aparece {
    from {
        opacity: 0;
        transform: translateY(var(--y, 0)) scale(var(--escala, 1));
    }
}

.con-splash {
    --inicio: 2.2s;
}

.retraso-40 { --retraso: 0.04s; }
.retraso-50 { --retraso: 0.05s; }
.retraso-120 { --retraso: 0.12s; }
.retraso-360 { --retraso: 0.36s; }
.retraso-440 { --retraso: 0.44s; }
.retraso-500 { --retraso: 0.5s; }
.retraso-550 { --retraso: 0.55s; }
.retraso-600 { --retraso: 0.6s; }
.retraso-620 { --retraso: 0.62s; }
.retraso-690 { --retraso: 0.69s; }
.retraso-850 { --retraso: 0.85s; }
.retraso-950 { --retraso: 0.95s; }
.retraso-100 { --retraso: 0.1s; }
.retraso-170 { --retraso: 0.17s; }
.retraso-200 { --retraso: 0.2s; }
.retraso-240 { --retraso: 0.24s; }
.retraso-300 { --retraso: 0.3s; }
.retraso-400 { --retraso: 0.4s; }
.retraso-480 { --retraso: 0.48s; }

.desde-y6 { --y: 6px; }
.desde-y8 { --y: 8px; }
.desde-y10 { --y: 10px; }
.desde-y12 { --y: 12px; }
.desde-y16 { --y: 16px; }
.desde-escala80 { --escala: 0.8; }
.desde-escala90 { --escala: 0.9; }
.desde-escala96 { --escala: 0.96; }
.desde-escala97 { --escala: 0.97; }

@media (prefers-reduced-motion: reduce) {
    .aparece,
    .exito__check {
        animation: none;
    }

    /* Sin animación, pero visible el mismo tiempo. */
    .splash {
        animation-duration: 0.01s;
        animation-delay: 2.4s;
    }

    .con-splash {
        --inicio: 0s;
    }
}