:root {
    --azul: #0e77e0;
    --azul-2: #1596e6;
    --cian: #22c8e8;
    --turquesa: #21d0b4;
    --menta: #2fe0b8;

    /* Antes un blanco azul-grisáceo frío (#eef2f9) -- un portal donde un
       cliente va a pagar/subir un comprobante se siente más confiable con un
       blanco cálido de "papel", no con la temperatura fría de un dashboard
       técnico. El acento de marca (azul/turquesa) sigue siendo lo único que
       aporta color; el fondo en sí ya no compite con él. */
    --fondo-0: #FBFAF7;
    --fondo-1: #F5F2EC;
    --fondo-2: #EFEAE1;

    --texto: #1A1D29;
    --texto-suave: #565B6B;
    --texto-tenue: #7A7F8E;

    --superficie: #FFFFFF;
    --superficie-alta: #FFFFFF;
    --vidrio: rgba(26, 29, 41, 0.035);
    --vidrio-borde: rgba(26, 29, 41, 0.09);
    --vidrio-hover: rgba(26, 29, 41, 0.06);

    --exito: #1fb894;
    --alerta: #e0921f;
    --error: #e0384f;

    --radio-xl: 20px;
    --radio-lg: 16px;
    --radio-md: 12px;
    --radio-pill: 999px;

    /* Antes la sombra de tarjeta era genérica (gris parejo, mismo look que
       cualquier "SaaS card kit"). Ahora lleva un toque del color de marca
       (--azul) mezclado en la sombra -- las tarjetas se sienten "teñidas"
       por la identidad del portal en vez de flotar sobre un gris neutro. */
    --sombra-suave: 0 10px 30px rgba(26, 29, 41, 0.07);
    --sombra-tarjeta: 0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 32px -16px rgba(14, 119, 224, 0.22), 0 2px 8px -2px rgba(26, 29, 41, 0.08);
    --sombra-brillo: 0 0 0 1px rgba(26, 29, 41, 0.06), 0 24px 56px -20px rgba(14, 119, 224, 0.32);

    /* Sora es una tipografía sólida pero la usan decenas de fintech/SaaS
       genéricos -- Bricolage Grotesque tiene la misma base geométrica pero
       con curvas más propias (la "a" y la "g" en particular) que no se
       confunden con ninguna plantilla. Se reserva para títulos; el cuerpo
       de texto sigue en Inter, que es neutral a propósito -- no es ahí
       donde una tipografía necesita personalidad. */
    --fuente-display: 'Bricolage Grotesque', 'Sora', sans-serif;
    --fuente-texto: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html {

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

a, button, input, .tarjeta-metodo, .chip-medio, .estrella {
    -webkit-tap-highlight-color: transparent;
}
button, a, input[type="submit"] {
    touch-action: manipulation;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
    max-width: 100vw;
}

body {
    background: var(--fondo-0);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Antes: un "mármol" con 5 capas de líneas diagonales + manchas de color
   detrás de TODO el contenido -- ruido compitiendo con el texto en vez de
   transmitir orden. Ahora: un fondo de papel cálido, liso, con la única
   presencia de color en las esquinas (donde no hay texto encima), del
   mismo criterio que ya se usó en el login del panel admin -- textura
   discreta, nunca detrás de lo que hay que leer. */
.fondo-marmol {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 100% 0%, rgba(14, 119, 224, 0.08), transparent 60%),
        radial-gradient(65% 55% at 0% 100%, rgba(33, 208, 180, 0.07), transparent 55%),
        var(--fondo-0);
}
.fondo-marmol::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26,29,41,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,29,41,0.028) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(120% 90% at 50% 0%, black, transparent 75%);
}
.fondo-marmol::after { content: none; }

.envoltorio {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.contenido {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px calc(48px + env(safe-area-inset-bottom, 0px));
    padding-top: env(safe-area-inset-top, 0px);
}

/* Home en desktop: dos columnas en vez de la misma columna de 480px de
   celular estirada en medio de una pantalla grande. La lateral es angosta y
   fija (confianza/prueba social, no necesita crecer); la principal (el
   flujo real de pago) se lleva el resto y sigue leyéndose como columna de
   texto, no como una plana ancha sin límite. */
/* Página de "elige cómo pagar con X": mismo patrón contexto + acción que ya
   se usó en el login del panel admin -- la tarjeta de cuenta/pago vive a la
   izquierda como contexto fijo mientras se llena el formulario a la
   derecha, en vez de que el cliente tenga que scrollear pasado la tarjeta
   para llegar al formulario en una sola columna larga. */
@media (min-width: 900px) {
    .contenido:has(.metodo-grid) { max-width: 980px; }
    .metodo-grid {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        align-items: start;
        gap: 32px;
    }
    .metodo-columna-contexto { position: sticky; top: 24px; }
}

/* El hero se imprime dos veces en index.php (.hero-solo-movil dentro de la
   columna principal, .hero-solo-desktop arriba de la columna lateral) --
   acá se decide cuál de las dos copias se ve en cada ancho. Es contenido
   puramente visual (sin ids ni JS propio), así que duplicarlo no rompe
   nada, y evita el problema de que dos columnas de un mismo CSS Grid
   comparten el alto de fila: si el hero (alto) y "pasos" (una barra angosta)
   quedaran en la misma fila de grid, la columna más corta arrastraría un
   hueco vacío del tamaño de la diferencia. Con cada columna siendo un solo
   bloque que apila su contenido por dentro, cada una tiene su propio alto
   independiente. */
.hero-solo-desktop { display: none; }

@media (min-width: 900px) {
    .contenido:has(.home-grid) { max-width: 1080px; }
    .home-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: 40px;
    }
    .home-columna-lateral { padding-top: 6px; }
    .hero-solo-movil { display: none; }
    .hero-solo-desktop { display: block; }
    /* El carrusel horizontal con scroll-snap es un patrón de mobile (swipe
       con el dedo) -- en los 320px fijos de esta columna angosta de
       escritorio, ese ancho solo alcanza para cortar a la mitad el segundo
       testimonio. Apilados en columna, cada uno se lee completo. */
    .home-columna-lateral .testimonios-lista { flex-direction: column; overflow: visible; }
    .home-columna-lateral .testimonio { width: 100%; }
    /* El hero traía un "sangrado" de -20px pensado para cuando ocupaba todo
       el ancho de la columna principal (una portada real, borde a borde) y
       esquinas de arriba sin redondear porque ahí arriba no había nada más.
       En la columna angosta ya no hace de portada de página -- es una
       tarjeta más al lado de las otras (garantía, reseñas), así que necesita
       las 4 esquinas redondeadas y nada de sangrado para no desbordar la
       columna. También se achica el texto y el mazo de logos pasa de una
       grilla 2x2 a una sola fila de íconos chicos, para que su alto se
       lleve mejor con el resto de tarjetas angostas de esta columna. */
    .hero-solo-desktop .hero {
        margin: 0 0 24px;
        border-radius: var(--radio-xl);
        padding: 26px 22px 28px;
    }
    .hero-solo-desktop .hero-texto { max-width: none; }
    .hero-solo-desktop .hero h1 { font-size: 23px; margin-bottom: 10px; }
    .hero-solo-desktop .hero p { font-size: 13.5px; }
    .hero-solo-desktop .hero-eyebrow { font-size: 11px; padding: 5px 12px 5px 8px; margin-bottom: 14px; }
    .hero-solo-desktop .hero-collage {
        grid-template-columns: repeat(4, 52px);
        grid-template-rows: 52px;
        gap: 8px;
        padding: 0;
        margin-top: 18px;
        justify-content: center;
    }
    .hero-solo-desktop .hero-collage-tarjeta {
        transform: none !important;
        box-shadow: 0 8px 16px -8px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,255,255,0.5);
    }
    .hero-solo-desktop .hero-collage-tarjeta:hover { transform: translateY(-2px) !important; }
    .hero-solo-desktop .hero-collage-tarjeta:has(img) { padding: 6px; }
}

.marca-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px 8px;
}

.marca-top img {
    height: 34px;
    width: auto;
    display: block;
}

.marca-volver {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px 18px;
}

/* Antes era una píldora traslúcida genérica (fondo vidrio, ícono suelto) --
   idéntica a cualquier botón "volver" de cualquier sitio. Ahora la flecha
   vive en su propio círculo con el degradado de marca (mismo lenguaje que
   los nodos del stepper y el hero) y el texto usa la tipografía de display
   del portal -- se lee como parte del mismo sistema visual, no como un
   componente de librería sin tocar. */
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--texto);
    text-decoration: none;
    font-family: var(--fuente-display);
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 18px 6px 6px;
    border-radius: var(--radio-pill);
    background: var(--superficie);
    border: 1px solid var(--vidrio-borde);
    box-shadow: var(--sombra-tarjeta);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.btn-volver:hover {
    transform: translateY(-1px);
    box-shadow: var(--sombra-brillo);
    border-color: color-mix(in srgb, var(--azul) 35%, var(--vidrio-borde));
}
.btn-volver-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--azul), var(--turquesa));
    color: #fff;
    transition: transform .2s ease;
}
.btn-volver:hover .btn-volver-icono { transform: translateX(-2px); }
.btn-volver svg { width: 13px; height: 13px; flex-shrink: 0; }

/* El hero era texto centrado sobre el mismo fondo claro que el resto de la
   página -- ni siquiera un cambio de color lo separaba del resto. Ahora es
   un banner de ancho completo (se sale del contenedor de 480/1080px con el
   truco 100vw, como una portada real) con el color de marca a pantalla
   completa -- lo primero que se ve ya no es "texto sobre blanco", es color
   de marca sólido, coherente en cualquiera de las 7 paletas del admin. */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px 44px;
    margin: 0 -20px 28px;
    border-radius: 0 0 var(--radio-xl) var(--radio-xl);
    background:
        radial-gradient(120% 160% at 85% -20%, rgba(255,255,255,0.16), transparent 55%),
        linear-gradient(125deg, var(--azul) 0%, var(--azul-2) 45%, var(--turquesa) 100%);
    color: #fff;
    overflow: hidden;
}
/* El sangrado de -20px y las esquinas de arriba sin redondear son para
   cuando el hero es una portada real que toca el borde de la página (home).
   En páginas como Seguimiento, el hero es una tarjeta más flotando con
   márgenes a los lados -- con ese mismo sangrado quedaba más ancha que el
   resto del contenido Y con las esquinas de arriba cuadradas, como si
   estuviera cortada. Acá se le devuelven las 4 esquinas redondeadas y se
   cancela el sangrado en cualquier página que no use el grid de dos
   columnas del home. */
.contenido:not(:has(.home-grid)) .hero {
    margin: 0 0 28px;
    border-radius: var(--radio-xl);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: radial-gradient(70% 90% at 50% 30%, black, transparent 75%);
    pointer-events: none;
}

.hero-texto { position: relative; max-width: 460px; }

/* Antes era una línea de texto chico con un guioncito al lado -- se perdía
   contra el nuevo fondo de color, sin nada que le diera peso propio. Ahora
   es una píldora real (fondo, borde, ícono de check) que se lee como un
   sello de confianza, no como una etiqueta suelta. */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: #fff;
    font-weight: 700;
    padding: 7px 14px 7px 10px;
    border-radius: var(--radio-pill);
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.32);
    backdrop-filter: blur(6px);
    margin: 0 auto 18px;
}
.hero-eyebrow svg {
    flex-shrink: 0;
    background: rgba(255,255,255,0.94);
    color: var(--azul);
    border-radius: 50%;
    padding: 2px;
    width: 16px;
    height: 16px;
}

.hero h1 {
    width: 100%;
    text-align: center;
    font-family: var(--fuente-display);
    font-size: clamp(32px, 4.6vw, 50px);
    line-height: 1.08;
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.12);
}

.hero p {
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,0.92);
    font-size: 16.5px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0 auto;
}

.hero-collage { display: none; }

@media (min-width: 900px) {
    /* La copia de escritorio del hero vive en la columna lateral angosta
       (ver .hero-solo-desktop más abajo) -- ya no hace falta el layout ancho
       de texto+logos lado a lado, queda apilado igual que en mobile (título
       arriba, mazo de logos debajo), solo que visible en vez de oculto a
       este ancho. */

    /* Cuatro tarjetas en un stack de 2x2 escalonado -- no una fila prolija
       de logos, sino algo con más parecido a un mazo de tarjetas reales
       sobre una mesa, en vidrio esmerilado sobre el color del banner. */
    .hero-collage {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 108px);
        grid-template-rows: repeat(2, 108px);
        gap: 18px;
        flex-shrink: 0;
        padding: 10px;
    }
    .hero-collage-tarjeta {
        position: relative;
        border-radius: var(--radio-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 18px 34px -12px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,255,255,0.5);
        transition: transform .3s ease;
    }
    /* Rotación/desplazamiento fijos por posición (no una fórmula calc con
       mod(), de soporte todavía desigual) -- el resultado es el mismo mazo
       escalonado, con cada tarjeta apuntando a un lado distinto. */
    .hero-collage-tarjeta:nth-child(1) { transform: rotate(-6deg) translateY(10px); }
    .hero-collage-tarjeta:nth-child(2) { transform: rotate(4deg) translateY(-6px); }
    .hero-collage-tarjeta:nth-child(3) { transform: rotate(3deg) translateY(4px); }
    .hero-collage-tarjeta:nth-child(4) { transform: rotate(-4deg) translateY(-10px); }
    .hero-collage-tarjeta:hover { transform: rotate(0deg) translateY(0) scale(1.05); z-index: 2; }
    /* El logo real de cada plataforma (a diferencia de las iniciales de
       respaldo) ya trae su propio nombre dibujado -- mostrarlo chico dejaba
       muchísimo aire vacío alrededor en una tarjeta de 108px, y encima
       repetía el nombre en texto debajo. Ahora el logo casi llena la
       tarjeta entera (sin el gap ni el padding que sí necesita el caso de
       iniciales+nombre, que va aparte) y el nombre en texto queda solo
       para cuando no hay logo, donde sí hace falta aclarar cuál es. */
    .hero-collage-tarjeta:has(img) { padding: 8px; gap: 0; }
    .hero-collage-tarjeta img { width: 100%; height: 100%; object-fit: contain; }
    .hero-collage-tarjeta:has(img) .hero-collage-nombre { display: none; }
    .hero-collage-iniciales { font-family: var(--fuente-display); font-size: 20px; font-weight: 800; }
    .hero-collage-nombre { font-size: 10.5px; font-weight: 700; opacity: .92; }
}

/* Antes: filas horizontales idénticas (ícono chico + texto + flecha), el
   patrón más neutro posible para "elige una opción de una lista". Ahora:
   tarjetas de selección con una cabecera de color (el color de marca de
   cada medio, ya configurable por el admin) y el logo como avatar flotante
   -- se elige un medio de pago como quien elige una tarjeta física, no
   como quien lee una fila de una tabla. */
.lista-metodos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 30px;
}
@media (min-width: 560px) {
    .lista-metodos { grid-template-columns: 1fr 1fr; }
}

@keyframes entrarTarjeta {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.tarjeta-metodo {
    animation: entrarTarjeta .5s cubic-bezier(.2,.8,.2,1) both;
}
.tarjeta-metodo:nth-child(1) { animation-delay: .04s; }
.tarjeta-metodo:nth-child(2) { animation-delay: .1s; }
.tarjeta-metodo:nth-child(3) { animation-delay: .16s; }
.tarjeta-metodo:nth-child(4) { animation-delay: .22s; }
.tarjeta-metodo:nth-child(n+5) { animation-delay: .26s; }
.tarjeta-metodo {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--texto);
    background: var(--superficie-alta);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-xl);
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.tarjeta-metodo:hover,
.tarjeta-metodo:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 22px 44px -16px var(--tinte, rgba(16,25,43,0.3));
}

.tarjeta-metodo-cabecera {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 26px 16px 30px;
    background: linear-gradient(150deg, var(--tinte, var(--azul)) 0%, var(--tinte-2, color-mix(in srgb, var(--tinte, var(--azul)) 78%, black)) 100%);
}
.tarjeta-metodo-cabecera .badge-mas-usado,
.tarjeta-metodo-cabecera .badge-pago-automatico {
    position: absolute;
    top: 12px;
    left: 14px;
    margin-left: 0;
}

.chip-logo {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chip-logo img { width: 68%; height: 68%; object-fit: contain; display: block; }

.tarjeta-metodo-cabecera .chip-logo {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 26px -8px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,255,255,0.18);
    color: var(--tinte, var(--azul));
    font-family: var(--fuente-display);
}
.tarjeta-metodo-cabecera .chip-logo img { width: 72%; height: 72%; }
.chip-logo-iniciales { font-family: var(--fuente-display); font-weight: 800; font-size: 19px; }

.tarjeta-metodo-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 20px;
    flex: 1;
}
.tarjeta-metodo .info { min-width: 0; }
/* El carrusel de "con qué se puede pagar" (Visa/Mastercard/PSE de Bold)
   vivía debajo del texto de detalle, casi invisible y cortado por el
   ancho de la tarjeta. Ahora va en la misma fila que el nombre del medio,
   como una aclaración inmediata de "esto acepta tarjeta" en vez de un
   dato perdido más abajo. */
.nombre-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nombre-fila .franja-medios--inline { margin-top: 0; }
.tarjeta-metodo .info .nombre {
    flex-shrink: 0;
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}
.tarjeta-metodo .info .detalle {
    display: block;
    color: var(--texto-suave);
    font-size: 13.5px;
}

.tarjeta-metodo-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding: 11px 14px;
    border-radius: var(--radio-pill);
    background: var(--vidrio);
    color: var(--texto);
    font-size: 13.5px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, gap .2s ease;
}
.tarjeta-metodo-cta svg { flex-shrink: 0; transition: transform .2s ease; }
.tarjeta-metodo:hover .tarjeta-metodo-cta {
    background: var(--tinte, var(--turquesa));
    color: var(--tinte-texto, #fff);
}
.tarjeta-metodo:hover .tarjeta-metodo-cta svg { transform: translateX(3px); }

.badge-mas-usado {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 3px 8px;
    border-radius: var(--radio-pill);
}

.badge-pago-automatico {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 3px 8px;
    border-radius: var(--radio-pill);
}

.detalle-con-medios {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.detalle-con-medios .detalle-texto {
    flex-shrink: 0;
    white-space: nowrap;
}
.detalle-con-medios .franja-medios--inline {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.detalle-solo-medios {
    margin-top: 4px;
}
.detalle-solo-medios .franja-medios--inline {
    width: 100%;
    margin-top: 0;
}

.nota-confianza {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 26px;
    padding: 14px 16px;
    border-radius: var(--radio-md);
    background: rgba(16,25,43,0.035);
    border: 1px dashed var(--vidrio-borde);
    color: var(--texto-tenue);
    font-size: 12.8px;
    line-height: 1.5;
}
.nota-confianza svg { flex-shrink: 0; margin-top: 1px; color: var(--turquesa); }

/* ---------- Garantía ---------- */
.garantia {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: var(--radio-lg);
    background: linear-gradient(135deg, rgba(33,208,180,0.10), rgba(14,119,224,0.08));
    border: 1px solid rgba(33,208,180,0.25);
}
.garantia-icono {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--turquesa), var(--azul));
    color: #061019;
    box-shadow: 0 8px 18px -8px var(--turquesa);
}
.garantia-texto h3 {
    margin: 0 0 3px;
    font-family: var(--fuente-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--texto);
}
.garantia-texto p {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.5;
    color: var(--texto-suave);
}

/* ---------- Repetir última compra ----------
   Antes era una barra de gradiente centrada, sin jerarquía entre el texto
   de qué se repite y con qué medio -- todo en una sola oración larga.
   Ahora es una tarjeta de acción: ícono, título + detalle en dos líneas, y
   flecha, mismo lenguaje que el resto de tarjetas del portal en vez de un
   aviso genérico aparte. */
.banner-repetir-compra {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: var(--radio-lg);
    background: var(--superficie-alta);
    border: 1px solid var(--vidrio-borde);
    box-shadow: var(--sombra-tarjeta);
    color: var(--texto);
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.banner-repetir-compra:hover { transform: translateY(-2px); box-shadow: var(--sombra-brillo); }
.banner-repetir-icono {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--azul), var(--turquesa));
    color: #fff;
}
.banner-repetir-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.banner-repetir-titulo { font-weight: 700; font-size: 14.5px; }
.banner-repetir-detalle {
    font-size: 12.5px;
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.banner-repetir-flecha {
    flex-shrink: 0;
    color: var(--texto-tenue);
    transition: transform .2s ease, color .2s ease;
}
.banner-repetir-compra:hover .banner-repetir-flecha { transform: translateX(3px); color: var(--turquesa); }

/* ---------- Aviso de vista previa (admin viendo con mantenimiento activo) ---------- */
.aviso-vista-previa-mantenimiento {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: var(--alerta);
    color: #1a0f00;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}
.aviso-vista-previa-mantenimiento a {
    color: #1a0f00;
    font-weight: 800;
    text-decoration: underline;
    white-space: nowrap;
}

/* ---------- Selector de plataforma/plan ("¿Qué vas a comprar?") ---------- */
.selector-plan-boton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(16,25,43,0.035);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
    padding: 12px 14px;
    font-family: var(--fuente-texto);
    font-size: 15px;
    color: var(--texto);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
.selector-plan-boton:hover, .selector-plan-boton:focus-visible {
    outline: none;
    border-color: var(--turquesa);
    box-shadow: 0 0 0 4px rgba(47, 224, 184, 0.16);
}
.selector-plan-boton-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,25,43,0.06);
    color: var(--texto-tenue);
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
}
.selector-plan-boton-texto { flex: 1; color: var(--texto-tenue); }
.selector-plan-boton-flecha { flex-shrink: 0; color: var(--texto-tenue); }
.selector-plan-link-otro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 10px 2px 0;
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-tenue);
    cursor: pointer;
    text-decoration: none;
    transition: color .2s ease;
}
.selector-plan-link-otro svg { flex-shrink: 0; opacity: .75; transition: opacity .2s ease; }
.selector-plan-link-otro:hover { color: var(--azul); }
.selector-plan-link-otro:hover svg { opacity: 1; }

.selector-plan-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 26, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.selector-plan-overlay.activo { opacity: 1; pointer-events: auto; }
.selector-plan-caja {
    width: 100%;
    max-width: 460px;
    max-height: 82vh;
    background: var(--superficie-alta);
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    box-shadow: var(--sombra-brillo);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(24px);
    transition: transform .3s cubic-bezier(.2,.9,.25,1.1);
}
.selector-plan-overlay.activo .selector-plan-caja { transform: translateY(0); }
@media (min-width: 560px) {
    .selector-plan-overlay { align-items: center; }
    .selector-plan-caja { border-radius: var(--radio-xl); max-height: 78vh; }
    .selector-plan-overlay .selector-plan-caja { transform: translateY(12px) scale(.98); }
    .selector-plan-overlay.activo .selector-plan-caja { transform: translateY(0) scale(1); }
}
.selector-plan-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--vidrio-borde);
    flex-shrink: 0;
}
.selector-plan-header h3 {
    flex: 1;
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--texto);
}
.selector-plan-volver, .selector-plan-cerrar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(16,25,43,0.05);
    color: var(--texto-suave);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.selector-plan-volver:hover, .selector-plan-cerrar:hover { background: rgba(16,25,43,0.1); color: var(--texto); }
.selector-plan-body { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 16px 18px 22px; }

.fila-confirmar-bold {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vidrio-borde);
    font-size: 14px;
    color: var(--texto);
}
.fila-confirmar-bold span { color: var(--texto-suave); }
.fila-confirmar-bold strong { text-align: right; }
.fila-confirmar-bold-total {
    border-bottom: none;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 2px solid var(--texto);
    font-size: 17px;
    font-weight: 700;
}
.confirmar-bold-pie {
    display: flex;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid var(--vidrio-borde);
    flex-shrink: 0;
}
.confirmar-bold-pie button { flex: 1; margin: 0; }
.confirmar-bold-pie .btn-primario { display: flex; align-items: center; justify-content: center; gap: 7px; }

.confirmar-bold-caja { overflow: hidden; }
.confirmar-bold-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 16px 16px 18px;
    background: linear-gradient(135deg, rgba(14,119,224,0.09), rgba(33,208,180,0.09));
    border-bottom: 1px solid var(--vidrio-borde);
}
.confirmar-bold-header-icono {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--azul-2), var(--turquesa));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(14,119,224,0.55);
}
.confirmar-bold-header-icono svg { width: 21px; height: 21px; }
.confirmar-bold-header-texto { flex: 1; min-width: 0; padding-top: 1px; }
.confirmar-bold-header-texto h3 {
    margin: 0 0 2px;
    font-family: var(--fuente-display);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--texto);
}
.confirmar-bold-header-texto p {
    margin: 0;
    font-size: 12px;
    color: var(--texto-tenue);
}
.confirmar-bold-caja .selector-plan-cerrar { flex-shrink: 0; }

.confirmar-bold-recibo {
    background: rgba(16,25,43,0.025);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
    padding: 2px 14px;
}
.confirmar-bold-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(31,184,148,0.08);
    border: 1px solid rgba(31,184,148,0.22);
    border-radius: var(--radio-md);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--texto-suave);
}
.confirmar-bold-nota svg { flex-shrink: 0; margin-top: 1px; color: var(--exito); }

.bold-confianza {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin: 14px 0 0;
}
.bold-confianza-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    background: linear-gradient(165deg, rgba(14,119,224,0.06), rgba(33,208,180,0.06));
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
}
.bold-confianza-icono {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--azul-2), var(--turquesa));
    color: #fff;
}
.bold-confianza-icono svg { width: 16px; height: 16px; }
.bold-confianza-item span:last-child { font-size: 12px; font-weight: 700; color: var(--texto); line-height: 1.25; }

/* Sellos de confianza genéricos (todo método de pago, no solo Bold) --
   sin esto, pagar con Nequi/Daviplata era "tarjeta y ya", sin nada de la
   señalización de seguridad que sí tenía el flujo de Bold. */
.sellos-confianza {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.sello-confianza-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--superficie-alta);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--texto-suave);
}
.sello-confianza-icono {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--azul) 12%, transparent);
    color: var(--azul);
}
.sello-confianza-icono svg { width: 15px; height: 15px; }

.selector-plan-grid-plataformas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 380px) {
    .selector-plan-grid-plataformas { grid-template-columns: repeat(2, 1fr); }
}
.tarjeta-plataforma-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(16,25,43,0.03);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-lg);
    padding: 14px 8px;
    cursor: pointer;
    font-family: var(--fuente-texto);
    text-align: center;
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.tarjeta-plataforma-selector:hover {
    border-color: var(--turquesa);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(33,208,180,0.5);
}
.tarjeta-plataforma-logo {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
}
.tarjeta-plataforma-logo img { width: 68%; height: 68%; object-fit: contain; }
.tarjeta-plataforma-logo--transparente { background: transparent; border: 1px solid var(--vidrio-borde); }
.tarjeta-plataforma-selector--otro {
    background: linear-gradient(165deg, rgba(14,119,224,0.06), rgba(33,208,180,0.05));
    border-style: dashed;
    border-color: rgba(14,119,224,0.3);
}
.tarjeta-plataforma-selector--otro:hover {
    border-color: var(--azul);
    background: linear-gradient(165deg, rgba(14,119,224,0.1), rgba(33,208,180,0.08));
    box-shadow: 0 8px 18px -10px rgba(14,119,224,0.35);
}
.tarjeta-plataforma-logo--otro {
    background: #fff;
    color: var(--azul);
    border: 1.5px dashed var(--azul);
}
.tarjeta-plataforma-nombre { font-size: 12.5px; font-weight: 700; color: var(--texto); line-height: 1.25; }
.tarjeta-plataforma-desde { font-size: 10.8px; font-weight: 600; color: var(--turquesa); }
.tarjeta-plataforma-desde--otro { color: var(--azul); }

.carrito-selector-plan {
    flex-shrink: 0;
    padding: 10px 18px 16px;
    background: linear-gradient(180deg, rgba(33,208,180,0.07), rgba(33,208,180,0.03));
    border-top: 1px solid rgba(33,208,180,0.28);
    box-shadow: 0 -8px 20px -14px rgba(16,25,43,0.25);
    animation: aparecerCarrito .3s cubic-bezier(.2,.9,.25,1.2);
}
@keyframes aparecerCarrito {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.carrito-selector-plan-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 2px;
    margin: 0 0 4px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fuente-texto);
}
.carrito-selector-plan-resumen-texto {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: var(--exito);
}
.carrito-selector-plan-chevron { color: var(--texto-tenue); flex-shrink: 0; transition: transform .2s ease; }
.carrito-selector-plan-detalle { margin-bottom: 6px; }
.carrito-selector-plan-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 22vh; overflow-y: auto; }
.carrito-selector-plan-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 4px 9px 4px 7px;
    border-radius: var(--radio-pill);
    background: linear-gradient(135deg, var(--azul-2), var(--turquesa));
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    animation: aparecerCarrito .3s cubic-bezier(.2,.9,.25,1.2);
}
.carrito-selector-plan-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(16,25,43,0.03);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
}
.carrito-selector-plan-item-nombre {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carrito-selector-plan-item-plan { font-weight: 500; color: var(--texto-tenue); }
.carrito-selector-plan-item-precio { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--turquesa); }
.carrito-selector-plan-item-quitar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(224,56,79,0.1);
    color: var(--error);
    cursor: pointer;
    transition: background .15s ease;
}
.carrito-selector-plan-item-quitar:hover { background: rgba(224,56,79,0.2); }
.carrito-selector-plan-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 2px;
    margin-bottom: 12px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--texto);
    border-top: 1px dashed var(--vidrio-borde);
    border-bottom: 1px dashed var(--vidrio-borde);
}
.carrito-selector-plan-acciones { display: flex; gap: 8px; }
.carrito-selector-plan-acciones .btn-primario { flex: 1.3; margin-top: 0; }
.carrito-selector-plan-acciones .btn-fantasma {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

.bloque-credencial-multiple {
    padding: 12px 0;
    border-top: 1px dashed rgba(47, 224, 184, 0.3);
}
.bloque-credencial-multiple:first-of-type { border-top: none; padding-top: 0; }
.bloque-credencial-multiple-titulo {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--exito);
}

.selector-plan-lista-variantes { display: flex; flex-direction: column; gap: 8px; }
.fila-variante-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: rgba(16,25,43,0.03);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
    padding: 14px 16px;
    cursor: pointer;
    font-family: var(--fuente-texto);
    text-align: left;
    transition: border-color .2s ease, background .2s ease;
}
.fila-variante-selector:hover { border-color: var(--turquesa); background: rgba(33,208,180,0.06); }
.fila-variante-nombre { font-size: 14px; font-weight: 600; color: var(--texto); }
.fila-variante-precio { font-size: 14px; font-weight: 700; color: var(--turquesa); flex-shrink: 0; }

.tarjeta-cuenta-flotante {
    perspective: 1100px;
    animation: flotarTarjeta 5s ease-in-out infinite;
}

.tarjeta-cuenta {
    position: relative;
    border-radius: 22px;
    padding: 30px 26px 28px;
    color: var(--texto-tarjeta, #061019);
    /* Líneas finas tipo guilloché (el patrón de seguridad de un
       billete/tarjeta real) por encima del gradiente de color -- lo que
       separa "una tarjeta pintada de color" de "algo que se parece a un
       instrumento de pago real". Van en el propio background (no en un
       pseudo-elemento) porque ::before y ::after ya están ocupados por el
       brillo animado y el círculo decorativo de abajo. */
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 10px),
        linear-gradient(135deg, var(--tinte-a, var(--azul)) 0%, var(--tinte-b, var(--turquesa)) 100%);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .15s ease-out;
    box-shadow: var(--sombra-brillo);
}
/* El chip dorado de tarjeta de crédito -- el detalle que más rápido le dice
   al ojo "esto es una tarjeta de pago", no un rectángulo de color con texto. */
.chip-tarjeta {
    position: relative;
    z-index: 1;
    display: block;
    width: 40px;
    height: 30px;
    margin-bottom: 18px;
    border-radius: 6px;
    background: linear-gradient(155deg, #f4dfa0 0%, #cda653 55%, #a9822f 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.chip-tarjeta::before {
    content: "";
    position: absolute;
    inset: 5px 9px;
    border: 1px solid rgba(0,0,0,0.22);
    border-radius: 3px;
    background:
        linear-gradient(rgba(0,0,0,0.18) 1px, transparent 1px) 0 0/100% 33%,
        linear-gradient(90deg, rgba(0,0,0,0.18) 1px, transparent 1px) 50% 0/50% 100%;
}

@media (hover: hover) and (pointer: fine) {
    .tarjeta-cuenta { will-change: transform; }
}

@keyframes flotarTarjeta {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.tarjeta-cuenta::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
}

.tarjeta-cuenta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.3) 45%, transparent 60%);
    transform: translateX(-130%);
    animation: brilloTarjeta 3.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes brilloTarjeta {
    0%, 45% { transform: translateX(-130%); }
    65%, 100% { transform: translateX(130%); }
}

.tarjeta-cuenta .fila-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.tarjeta-cuenta .etiqueta-medio {
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.tarjeta-cuenta .icono-onda {
    width: 30px; height: 30px;
    opacity: .85;
}

.tarjeta-cuenta .numero {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Courier New', var(--fuente-display), monospace;
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 26px 0 4px;
    cursor: pointer;
}
.tarjeta-cuenta .numero .icono-ojo {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: .55;
    transition: opacity .2s ease, transform .2s ease;
}
.tarjeta-cuenta .numero:hover .icono-ojo { opacity: .9; }
.tarjeta-cuenta .numero.revelado .icono-ojo { opacity: .9; transform: scale(1.1); }

.tarjeta-cuenta .titular {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tarjeta-cuenta .descripcion {
    position: relative;
    z-index: 1;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 6px;
    opacity: 0.92;
}

.btn-copiar {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.94);
    color: var(--texto);
    font-weight: 700;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: var(--radio-pill);
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(6, 16, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-copiar:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(6, 16, 25, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-copiar:active { transform: scale(0.97); }
.btn-copiar svg { width: 16px; height: 16px; }
.btn-copiar.copiado {
    background: var(--turquesa);
    color: #061019;
    border-color: transparent;
}

/* Antes era una barra de 3 segmentos planos + una fila de texto aparte --
   se leía como una barra de carga genérica, sin nada que la distinguiera de
   cualquier plantilla de checkout. Ahora es un stepper real: nodos
   numerados con ícono propio por paso, conectados por una línea, con el
   paso activo destacado en el color de marca -- se lee de un vistazo y se
   siente diseñado a propósito, no un componente de librería sin tocar. */
.pasos-flujo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin: 16px 0 18px;
}
.paso-flujo {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
}
/* La línea va del centro de este nodo al centro del siguiente -- como los 3
   pasos pesan lo mismo (flex: 1), esa distancia es exactamente el ancho de
   un ítem, por eso "width: 100%" cae justo en el próximo nodo sin tener que
   calcular posiciones a mano. */
.paso-flujo:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--vidrio-borde);
    z-index: 0;
}
.paso-flujo.hecho:not(:last-child)::after {
    background: linear-gradient(90deg, var(--azul), var(--turquesa));
}
.paso-flujo-nodo {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--superficie);
    border: 2px solid var(--vidrio-borde);
    color: var(--texto-tenue);
    transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.paso-flujo-nodo svg { width: 14px; height: 14px; }
.paso-flujo.activo .paso-flujo-nodo {
    background: linear-gradient(135deg, var(--azul), var(--turquesa));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px -7px var(--azul), 0 0 0 4px color-mix(in srgb, var(--azul) 14%, transparent);
}
.paso-flujo.hecho .paso-flujo-nodo {
    background: var(--turquesa);
    border-color: transparent;
    color: #06291f;
}
.paso-flujo-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 92px;
}
.paso-flujo-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.paso-flujo-titulo {
    font-size: 11px;
    font-weight: 600;
    color: var(--texto-suave);
    line-height: 1.2;
}
.paso-flujo.activo .paso-flujo-eyebrow { color: var(--azul); }
.paso-flujo.activo .paso-flujo-titulo { color: var(--texto); font-weight: 700; }

.tarjeta-panel {
    background: linear-gradient(160deg, var(--superficie-alta) 0%, var(--superficie) 100%);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-xl);
    padding: 22px;
    margin-top: 8px;
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta-panel h2 {
    font-family: var(--fuente-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.tarjeta-panel .subt {
    color: var(--texto-suave);
}

/* El panel de "sube tu comprobante" toma la identidad de un boleto/recibo
   en vez de una tarjeta genérica -- el cliente literalmente está a punto de
   adjuntar un comprobante de pago, así que el propio panel se comporta como
   uno: franja de color arriba, insignia como sello y una línea de "corte"
   perforada justo antes de la sección donde se adjunta el archivo. */
.panel-comprobante {
    position: relative;
    overflow: hidden;
}
.panel-comprobante::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--azul), var(--turquesa));
}
.panel-comprobante-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.panel-comprobante-insignia {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--azul), var(--turquesa));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(14, 119, 224, 0.55);
}
.panel-comprobante-insignia svg { width: 21px; height: 21px; }
.panel-comprobante-cabecera h2 { margin: 3px 0 3px; }
.panel-comprobante-cabecera .subt { margin: 0; }

/* Divide el formulario largo en tramos con nombre ("Tus datos", "Detalles
   de tu compra", "Comprobante") en vez de una fila continua de campos sin
   ninguna pausa -- ayuda a leer el formulario como una serie de pasos
   chicos, no como un solo bloque largo. Con forma de etiqueta/tag en vez
   de un rótulo en mayúsculas, sigue el mismo lenguaje visual del boleto. */
.tramo-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fuente-display);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--texto-suave);
    background: color-mix(in srgb, var(--azul) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--azul) 16%, transparent);
    padding: 6px 13px 6px 6px;
    border-radius: var(--radio-pill);
    margin: 26px 0 14px;
}
.tramo-etiqueta:first-of-type { margin-top: 22px; }
.tramo-etiqueta-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    color: var(--azul);
    flex-shrink: 0;
}
.tramo-etiqueta-icono svg { width: 11px; height: 11px; }

.separador-boleto {
    position: relative;
    height: 1px;
    margin: 28px 4px 4px;
    background-image: repeating-linear-gradient(90deg, var(--vidrio-borde) 0 7px, transparent 7px 13px);
}
.separador-boleto::before,
.separador-boleto::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul), var(--turquesa));
}
.separador-boleto::before { left: -3px; }
.separador-boleto::after { right: -3px; }

.panel-medios-aceptados {
    padding: 18px 0 20px;
}
.titulo-medios-aceptados {
    margin: 0 0 12px;
    padding: 0 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.franja-medios {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.pista-medios {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 2px 20px;
    animation: desplazarMedios 22s linear infinite;
}
.franja-medios:hover .pista-medios {
    animation-play-state: paused;
}
.chip-medio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto);
    background: rgba(16, 25, 43, .045);
    border: 1px solid var(--vidrio-borde);
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.chip-medio:hover {
    border-color: var(--acento, var(--turquesa));
    background: rgba(16, 25, 43, .08);
    transform: translateY(-1px);
}
.chip-medio-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;

    background: #fff;
    color: var(--acento, var(--turquesa));
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.45);
    line-height: 0;
}
.chip-medio-icono svg {
    width: 15px;
    height: 15px;
}
.chip-medio-icono--img {
    padding: 4px;
}
.chip-medio-icono--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.chip-medio-texto {
    color: var(--texto-suave);
}

@keyframes desplazarMedios {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .pista-medios {
        animation: none;
    }
    .franja-medios {
        overflow-x: auto;
    }
}

.franja-medios--inline {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    flex: 1;
    max-width: 108px;
    margin-top: 3px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 92%);
}
.franja-medios--inline .pista-medios {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    width: max-content;
    animation-duration: 13s;
}
.chip-medio--solo-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    gap: 0;
    line-height: 0;
}
.chip-medio--solo-icono:hover {
    transform: none;
    border-color: transparent;
    background: none;
}
.chip-medio--solo-icono .chip-medio-icono {
    width: 19px;
    height: 19px;
    box-shadow: 0 1px 4px -1px rgba(0,0,0,0.5);
}
.chip-medio--solo-icono .chip-medio-icono svg {
    width: 11px;
    height: 11px;
}
.chip-medio--solo-icono .chip-medio-icono--img {
    padding: 3px;
}

.campo {
    margin-bottom: 16px;
}
.campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-suave);
    margin-bottom: 7px;
}
.campo .opcional {
    font-weight: 400;
    color: var(--texto-tenue);
}

.campo input[type=text],
.campo input[type=tel],
.campo input[type=number],
.campo select,
.campo textarea {
    width: 100%;
    background: rgba(16,25,43,0.035);
    border: 1px solid var(--vidrio-borde);
    color: var(--texto);
    font-family: var(--fuente-texto);

    font-size: 16px;
    border-radius: var(--radio-md);
    padding: 13px 14px;
    transition: border-color .2s ease, background .2s ease, box-shadow .25s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--turquesa);
    background: rgba(16,25,43,0.05);
    box-shadow: 0 0 0 4px rgba(47, 224, 184, 0.16), 0 0 22px -4px rgba(47, 224, 184, 0.4);
}
.campo-ayuda { margin: 6px 0 0; font-size: 12px; color: var(--turquesa); font-weight: 600; }
.prefijo-input:focus-within {
    border-color: var(--turquesa);
    box-shadow: 0 0 0 4px rgba(47, 224, 184, 0.16), 0 0 22px -4px rgba(47, 224, 184, 0.4);
}

.campo-icono { position: relative; }
.campo-icono svg, .campo-icono-simbolo {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-tenue);
    pointer-events: none;
    transition: color .2s ease;
}
.campo-icono svg { width: 17px; height: 17px; }
.campo-icono-simbolo { font-size: 16px; font-weight: 700; }
.campo-icono input, .campo-icono select { padding-left: 40px !important; }
.campo-icono:focus-within svg, .campo-icono:focus-within .campo-icono-simbolo { color: var(--turquesa); }

.prefijo-input {
    display: flex;
    align-items: center;
    background: rgba(16,25,43,0.035);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s ease;
}
.prefijo-input span {
    padding: 13px 12px;
    color: var(--texto-suave);
    font-size: 16px;
    border-right: 1px solid var(--vidrio-borde);
}
.prefijo-input input {
    border: none !important;
    background: transparent !important;
    flex: 1;
    min-width: 0;
}

.selector-modo-whatsapp {
    display: inline-flex;
    padding: 3px;
    margin-bottom: 8px;
    background: rgba(16,25,43,0.035);
    border: 1px solid var(--vidrio-borde);
    border-radius: 999px;
}
.opcion-modo-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 7px 15px;
    border-radius: 999px;
    font-family: var(--fuente-texto);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-tenue);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.opcion-modo-whatsapp svg { opacity: 0.85; }
.opcion-modo-whatsapp:hover { color: var(--texto-suave); }
.opcion-modo-whatsapp.activa {
    background: linear-gradient(135deg, var(--turquesa), var(--menta));
    color: #06231d;
}
.opcion-modo-whatsapp.activa svg { opacity: 1; }

.zona-subida {
    position: relative;
    border: 1.5px dashed var(--vidrio-borde);
    border-radius: var(--radio-lg);
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    background: rgba(16,25,43,0.025);
}
.zona-subida.sobre-arrastre {
    border-color: var(--turquesa);
    background: rgba(47, 224, 184, 0.06);
    transform: scale(1.015);
}
.zona-subida.con-archivo {
    border-style: solid;
    border-color: var(--turquesa);
    animation: confirmarSubida .5s ease;
}
@keyframes confirmarSubida {
    0% { background: rgba(47, 224, 184, 0.2); }
    100% { background: rgba(16,25,43,0.025); }
}
.miniatura-archivo { position: relative; flex-shrink: 0; }
.check-subida {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--turquesa);
    color: #061019;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--superficie);
    animation: aparecer .3s cubic-bezier(.2,.9,.25,1.3);
}
.check-subida svg { width: 10px; height: 10px; }
.zona-subida input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.zona-subida .icono-subida {
    width: 46px; height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--azul), var(--turquesa));
    color: #061019;
}
.zona-subida .icono-subida svg { width: 22px; height: 22px; }
.zona-subida .texto-principal { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.zona-subida .texto-secundario { font-size: 12.5px; color: var(--texto-tenue); }

.previsualizacion {
    display: none;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.previsualizacion img {
    width: 52px; height: 52px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--vidrio-borde);
}
.previsualizacion .nombre-archivo {
    font-weight: 600;
    font-size: 13.5px;
    word-break: break-all;
}
.previsualizacion .peso-archivo {
    font-size: 12px;
    color: var(--texto-tenue);
}
.zona-subida.con-archivo .estado-vacio { display: none; }
.zona-subida.con-archivo .previsualizacion { display: flex; }

.btn-primario {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--fuente-texto);
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: .015em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(6,16,25,0.25);
    background: linear-gradient(110deg, var(--azul) 0%, var(--azul-2) 45%, var(--turquesa) 100%);
    background-size: 220% auto;
    background-position: left center;
    padding: 17px 20px;
    border-radius: var(--radio-pill);
    margin-top: 22px;
    box-shadow: 0 14px 30px -12px rgba(14, 119, 224, 0.6), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, opacity .2s ease, background-position .5s ease;
}
.btn-primario::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%);
    transform: translateX(-130%);
    transition: transform .7s ease;
    pointer-events: none;
}
.btn-primario:hover::after { transform: translateX(130%); }
.btn-primario:hover {
    transform: translateY(-2px);
    background-position: right center;
    box-shadow: 0 18px 38px -12px rgba(33, 208, 180, 0.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primario:active { transform: translateY(0) scale(.98); }
.btn-primario:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }
.btn-primario:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primario:disabled::after { display: none; }
.btn-primario svg { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn-primario:hover svg { transform: translateX(3px); }

.btn-primario.cargando .texto-normal { display: none; }
.btn-primario .texto-cargando { display: none; align-items: center; gap: 9px; }
.btn-primario.cargando .texto-cargando { display: flex; }

.spinner {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-espera-spam {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--vidrio);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-md);
}
.anillo-espera { width: 36px; height: 36px; flex-shrink: 0; transform: rotate(-90deg); }
.anillo-espera-fondo,
.anillo-espera-relleno {
    fill: none;
    stroke-width: 3;
}
.anillo-espera-fondo { stroke: var(--vidrio-borde); }
.anillo-espera-relleno {
    stroke: var(--alerta);
    stroke-linecap: round;
    transition: stroke-dashoffset .3s ease;
}
.aviso-espera-texto { font-size: 12.5px; color: var(--texto-suave); line-height: 1.4; }
.aviso-espera-texto strong { color: var(--texto); }

.mensaje-error {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    background: rgba(224, 56, 79, 0.08);
    border: 1px solid rgba(224, 56, 79, 0.3);
    color: var(--error);
    font-size: 13.5px;
    padding: 12px 14px;
    border-radius: var(--radio-md);
    margin-top: 14px;
}
.mensaje-error.visible { display: flex; animation: sacudirError .4s ease; }
.mensaje-error svg { flex-shrink: 0; width: 17px; height: 17px; }
.mensaje-error span { flex: 1; min-width: 140px; }
.btn-reintentar {
    display: none;
    flex-shrink: 0;
    margin-left: auto;
    background: rgba(224, 56, 79, 0.14);
    color: var(--error);
    border: 1px solid rgba(224, 56, 79, 0.35);
    border-radius: var(--radio-pill);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}
.btn-reintentar:hover { background: rgba(224, 56, 79, 0.22); }
.btn-reintentar.visible { display: inline-flex; }
.toast-flexi {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1000;
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    background: var(--texto);
    color: var(--fondo-0);
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: var(--radio-pill);
    box-shadow: 0 14px 30px -10px rgba(16,25,43,0.35);
    transition: opacity .25s ease, transform .25s ease;
    max-width: calc(100vw - 40px);
    text-align: center;
}
.toast-flexi.visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes sacudirError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

.pantalla-exito {
    text-align: center;
    padding: 40px 10px 10px;
}
.sello-exito {
    width: 84px; height: 84px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--azul), var(--turquesa));
    box-shadow: 0 16px 40px -10px rgba(33, 208, 180, 0.55);
    animation: aparecer .55s cubic-bezier(.2,.9,.25,1.3);
}
.sello-exito svg { width: 38px; height: 38px; color: #061019; }
@keyframes aparecer {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* El aviso de mantenimiento usaba el mismo ícono genérico de "alerta" (un
   círculo con un signo de exclamación) que cualquier mensaje de error del
   sitio. El martillo sube en sentido ANTIHORARIO (rotate negativo) para
   quedar casi vertical -- levantado de verdad, no apuntando para el lado
   contrario -- y golpea en sentido horario de vuelta hasta pasarse un poco
   del reposo (el "overshoot" del golpe), con un pequeño rebote de vuelta.
   4 chispas salen disparadas desde la punta justo en el golpe, más una
   onda de choque que se expande desde todo el círculo. */
.sello-mantenimiento { overflow: visible; position: relative; }

.anillo-pulso {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    opacity: 0;
    pointer-events: none;
    animation: pulsoAnillo 2.6s cubic-bezier(.25,.6,.35,1) infinite;
}
@keyframes pulsoAnillo {
    0%   { transform: scale(0.82); opacity: 0; }
    35%  { opacity: .6; }
    100% { transform: scale(1.22); opacity: 0; }
}

.sello-mantenimiento.sello-mantenimiento { width: 100px; height: 100px; }
.sello-mantenimiento .icono-martillo {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.22));
    transform-origin: 14% 88%;
    animation: martillar 2.1s cubic-bezier(.3,.1,.25,1) infinite;
}
@keyframes martillar {
    0%   { transform: rotate(0deg); }
    8%   { transform: rotate(0deg); }
    34%  { transform: rotate(-34deg); }
    40%  { transform: rotate(-30deg); }
    52%  { transform: rotate(-30deg); }
    62%  { transform: rotate(8deg); }
    70%  { transform: rotate(-3deg); }
    78%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.chispas-impacto {
    position: absolute;
    z-index: 2;
    top: 42%;
    right: 37%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.chispas-impacto span {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 7px;
    border-radius: 1px;
    background: #fff;
    opacity: 0;
    transform-origin: center 10px;
    animation-duration: 2.1s;
    animation-timing-function: cubic-bezier(.3,.1,.25,1);
    animation-iteration-count: infinite;
}
.chispas-impacto span:nth-child(1) { animation-name: chispa1; }
.chispas-impacto span:nth-child(2) { animation-name: chispa2; }
.chispas-impacto span:nth-child(3) { animation-name: chispa3; }
.chispas-impacto span:nth-child(4) { animation-name: chispa4; }
@keyframes chispa1 { 0%,58% { opacity:0; transform: rotate(-35deg) translateY(0); } 63% { opacity:1; transform: rotate(-35deg) translateY(-2px); } 78%,100% { opacity:0; transform: rotate(-35deg) translateY(-11px) scaleY(.6); } }
@keyframes chispa2 { 0%,58% { opacity:0; transform: rotate(20deg) translateY(0); } 63% { opacity:1; transform: rotate(20deg) translateY(-2px); } 78%,100% { opacity:0; transform: rotate(20deg) translateY(-11px) scaleY(.6); } }
@keyframes chispa3 { 0%,58% { opacity:0; transform: rotate(75deg) translateY(0); } 63% { opacity:1; transform: rotate(75deg) translateY(-2px); } 78%,100% { opacity:0; transform: rotate(75deg) translateY(-11px) scaleY(.6); } }
@keyframes chispa4 { 0%,58% { opacity:0; transform: rotate(130deg) translateY(0); } 63% { opacity:1; transform: rotate(130deg) translateY(-2px); } 78%,100% { opacity:0; transform: rotate(130deg) translateY(-11px) scaleY(.6); } }

@media (prefers-reduced-motion: reduce) {
    .icono-martillo, .anillo-pulso { animation: none; }
    .chispas-impacto span { animation: none; opacity: 0; }
}
.pantalla-exito h1 {
    font-family: var(--fuente-display);
    font-size: 24px;
    margin: 0 0 10px;
}
.pantalla-exito p {
    color: var(--texto-suave);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 380px;
    margin: 0 auto 22px;
}
.codigo-seguimiento {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: linear-gradient(160deg, var(--superficie-alta) 0%, var(--superficie) 100%);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-lg);
    padding: 16px 26px;
    margin-bottom: 26px;
    box-shadow: var(--sombra-tarjeta);
}
.codigo-seguimiento .etiqueta { font-size: 11.5px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .06em; }
.codigo-seguimiento .codigo { font-family: var(--fuente-display); font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--turquesa); }

.codigo-seguimiento.recibo {
    position: relative;
    padding-bottom: 24px;
    border-style: dashed;
    border-color: rgba(47, 224, 184, 0.4);
    box-shadow: 0 18px 36px -18px rgba(16,25,43,0.3), var(--sombra-tarjeta);
    animation: aparecer .4s cubic-bezier(.2,.9,.25,1.3);
}
.codigo-seguimiento.recibo::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 1px;
    background-image: radial-gradient(circle, rgba(47,224,184,0.5) 1.4px, transparent 1.6px);
    background-size: 9px 1px;
    background-repeat: repeat-x;
}

@keyframes pulsoActivoTiempo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 146, 31, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(224, 146, 31, 0); }
}
.linea-tiempo {
    display: flex;
    justify-content: space-between;
    margin: 22px 0 26px;
    text-align: left;
}
.paso-tiempo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    text-align: center;
}
.paso-tiempo:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--vidrio-borde);
    z-index: 0;
}
.paso-tiempo.hecho:not(:last-child)::after { background: var(--turquesa); }
.punto-tiempo {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vidrio);
    border: 2px solid var(--vidrio-borde);
    color: var(--texto-tenue);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.punto-tiempo svg { width: 15px; height: 15px; }
.paso-tiempo.hecho .punto-tiempo { background: var(--turquesa); border-color: var(--turquesa); color: #061019; }
.paso-tiempo.activo .punto-tiempo {
    background: rgba(224, 146, 31, 0.16);
    border-color: var(--alerta);
    color: var(--alerta);
}

.paso-tiempo.activo .punto-tiempo::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--alerta);
    animation: pulsoActivoTiempo 2.2s ease-out infinite;
}
@keyframes pulsoActivoTiempo {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.55); opacity: 0; }
}
.paso-tiempo.rechazado .punto-tiempo { background: var(--error); border-color: var(--error); color: #fff; }
.texto-tiempo { font-size: 11.5px; font-weight: 600; color: var(--texto-tenue); }
.paso-tiempo.hecho .texto-tiempo { color: var(--texto); }
.paso-tiempo.activo .texto-tiempo { color: var(--alerta); }
.paso-tiempo.rechazado .texto-tiempo { color: var(--error); }

.calificar-experiencia { display: none; text-align: center; margin: 4px 0 22px; }
.calificar-experiencia.visible { display: block; animation: aparecer .4s cubic-bezier(.2,.9,.25,1.3); }
.calificar-titulo { font-size: 13px; color: var(--texto-suave); margin: 0 0 10px; }
.calificar-estrellas { display: flex; justify-content: center; gap: 6px; }
.estrella {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: var(--vidrio-borde);
    padding: 2px;
    transition: color .15s ease, transform .15s ease;
}
.estrella:hover { color: var(--alerta); transform: scale(1.12); }
.estrella.activa { color: var(--alerta); }
.calificar-gracias { font-size: 12.5px; color: var(--turquesa); font-weight: 600; margin-top: 8px; }

.acciones-exito { display: flex; flex-direction: column; gap: 12px; }
.btn-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: #25D366; color: #06210f; font-weight: 700; font-size: 15px;
    padding: 15px 20px; border-radius: var(--radio-pill); text-decoration: none;
    transition: transform .18s ease, filter .18s ease;
}
.btn-whatsapp:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-whatsapp svg { width: 19px; height: 19px; }

.btn-fantasma {
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-suave); text-decoration: none; font-size: 14px; font-weight: 600;
    padding: 13px 20px; border-radius: var(--radio-pill);
    border: 1px solid var(--vidrio-borde);
    transition: background .2s ease, color .2s ease;
}
.btn-fantasma:hover { background: var(--vidrio); color: var(--texto); }

.enlace-seguimiento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--texto-suave);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: var(--radio-md);
    border: 1px dashed var(--vidrio-borde);
    transition: background .2s ease, color .2s ease;
}
.enlace-seguimiento:hover { background: var(--vidrio); color: var(--texto); }
.enlace-seguimiento svg { width: 16px; height: 16px; flex-shrink: 0; }

.form-seguimiento { display: flex; gap: 10px; align-items: flex-end; }
.form-seguimiento .campo { flex: 1; margin-bottom: 0; }
.form-seguimiento input {
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}
.form-seguimiento .btn-primario {
    width: auto;
    margin-top: 0;
    padding: 13px 20px;
    white-space: nowrap;
}
.form-seguimiento .btn-primario svg { width: 18px; height: 18px; }

@media (max-width: 420px) {
    .form-seguimiento { flex-direction: column; align-items: stretch; }
    .form-seguimiento .btn-primario { width: 100%; justify-content: center; }
}

.resultado-seguimiento {
    margin-top: 20px;
    background: linear-gradient(160deg, var(--superficie-alta) 0%, var(--superficie) 100%);
    border: 1px solid var(--vidrio-borde);
    border-radius: var(--radio-xl);
    padding: 22px;
    box-shadow: var(--sombra-tarjeta);
    display: none;
}
.resultado-seguimiento.visible { display: block; animation: entrarTarjeta .4s cubic-bezier(.2,.8,.2,1) both; }

.resultado-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.resultado-cabecera .codigo-chico {
    font-family: var(--fuente-display);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--texto-suave);
    font-size: 13px;
}

.badge-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: var(--radio-pill);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.badge-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-estado.pendiente { background: rgba(255, 182, 72, 0.14); color: var(--alerta); }
.badge-estado.aprobado { background: rgba(47, 224, 184, 0.14); color: var(--exito); }
.badge-estado.rechazado { background: rgba(255, 92, 114, 0.14); color: var(--error); }

.resultado-mensaje {
    font-size: 14px;
    line-height: 1.55;
    color: var(--texto);
    margin: 0 0 16px;
}

.resultado-detalles {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--vidrio-borde);
    padding-top: 14px;
}
.resultado-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}
.resultado-fila span:first-child { color: var(--texto-tenue); }
.resultado-fila span:last-child { color: var(--texto); font-weight: 600; text-align: right; }

.resultado-credenciales {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--radio-lg);
    background: rgba(47, 224, 184, 0.08);
    border: 1px solid rgba(47, 224, 184, 0.25);
}
.resultado-credenciales.visible { display: flex; }
.resultado-credenciales .resultado-fila span:last-child {
    font-family: 'Sora', monospace;
    word-break: break-all;
}

.caja-confirmar-telefono {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--radio-lg);
    background: var(--superficie-alta);
    border: 1px solid var(--vidrio-borde);
}
.caja-confirmar-telefono.visible { display: flex; }
.caja-confirmar-telefono-texto {
    margin: 0;
    font-size: 0.92rem;
    color: var(--texto-suave);
}
.caja-confirmar-telefono .campo { margin-bottom: 0; }
.credenciales-titulo {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--exito);
}
.credenciales-titulo span { color: var(--texto-suave); font-weight: 600; }

.btn-copiar-credenciales {
    align-self: flex-start;
    margin-top: 6px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--exito);
    background: rgba(47, 224, 184, 0.12);
    border: 1px solid rgba(47, 224, 184, 0.3);
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background .15s ease;
    font-family: var(--fuente-texto);
}
.btn-copiar-credenciales:hover { background: rgba(47, 224, 184, 0.2); }

.btn-compartir-seguimiento {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 4px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--azul);
    background: rgba(14, 119, 224, 0.1);
    border: 1px solid rgba(14, 119, 224, 0.28);
    border-radius: var(--radio-pill);
    cursor: pointer;
    transition: background .2s ease;
}
.btn-compartir-seguimiento:hover { background: rgba(14, 119, 224, 0.18); }

.resultado-en-vivo {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--texto-tenue);
}
.barra-sondeo {
    flex-basis: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--vidrio-borde);
    overflow: hidden;
    margin-top: 4px;
}
.barra-sondeo-relleno {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--azul), var(--turquesa));
    transform-origin: left center;
    animation: barraSondeo 4s linear infinite;
}
@keyframes barraSondeo {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.punto-en-vivo {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alerta);
    animation: pulso-en-vivo 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulso-en-vivo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

.boton-whatsapp-flotante {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2be07a, #1da851);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 10px 24px -6px rgba(29, 168, 81, 0.55);
    z-index: 50;
    transition: transform .2s ease, box-shadow .2s ease;
}
.boton-whatsapp-flotante:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 30px -6px rgba(29, 168, 81, 0.6); }
/* Con el selector de plataforma/plan abierto, este botón fijo en la esquina
   tapaba el precio de la última variante de la lista. */
.overlay-plan-abierto .boton-whatsapp-flotante { display: none; }
.boton-whatsapp-flotante::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(29, 168, 81, 0.55);
    animation: pulsoWhatsappFlotante 2.4s ease-out infinite;
}
@keyframes pulsoWhatsappFlotante {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .boton-whatsapp-flotante::before { animation: none; }
}

.testimonios { margin: 30px 0 6px; }
.testimonios-titulo {
    font-family: var(--fuente-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-suave);
    margin: 0 0 14px;
}
.testimonios-lista {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.testimonios-lista::-webkit-scrollbar { display: none; }
.testimonio {
    flex: 0 0 auto;
    width: min(78%, 300px);
    scroll-snap-align: start;
    border-left: 2px solid var(--turquesa);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.testimonio-estrellas { color: var(--alerta); font-size: 11px; letter-spacing: 1.5px; }
.testimonio-texto { margin: 0; font-size: 13.8px; line-height: 1.55; color: var(--texto); }
.testimonio-autor { margin: 0; font-size: 12px; font-weight: 700; color: var(--texto-tenue); }

.calificar-comentario {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    margin: 14px auto 0;
}
.calificar-comentario textarea {
    width: 100%;
    resize: vertical;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: var(--radio-md);
    border: 1px solid var(--vidrio-borde);
    background: var(--superficie-alta);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: 13.5px;
}
.calificar-comentario textarea:focus { outline: none; border-color: var(--turquesa); }

.acciones-recibo { display: none; justify-content: center; margin: 20px auto 22px; }
.acciones-recibo.visible { display: flex; }

.pie-pagina {
    text-align: center;
    padding: 30px 20px 10px;
    color: var(--texto-tenue);
    font-size: 12px;
}

@media (max-width: 599px) {
    .contenido { max-width: 100%; padding: 0 16px calc(40px + env(safe-area-inset-bottom, 0px)); }

    .hero { padding: 26px 4px 20px; }
    .hero h1 { font-size: clamp(20px, 6.4vw, 24px); }
    .hero p { font-size: 13.8px; }
    .hero-eyebrow { font-size: 11.5px; margin-bottom: 9px; }

    .tarjeta-cuenta-flotante { animation: none; }
    .tarjeta-cuenta::before { animation: none; display: none; }

    .lista-metodos { gap: 12px; margin-top: 22px; }

    .marca-volver { padding: 16px 16px 14px; }
    .btn-volver { font-size: 13px; gap: 9px; padding: 5px 15px 5px 5px; }
    .btn-volver-icono { width: 24px; height: 24px; }

    .tarjeta-cuenta { padding: 20px 18px; border-radius: var(--radio-lg); }
    .tarjeta-cuenta .numero { font-size: clamp(22px, 7.5vw, 27px); margin: 20px 0 4px; }
    .tarjeta-cuenta .etiqueta-medio { font-size: 17px; }

    .tarjeta-panel { padding: 18px; border-radius: var(--radio-lg); }
    .zona-subida { padding: 20px 14px; }

    .nota-confianza { font-size: 12.2px; padding: 12px 14px; }

    .tarjeta-metodo .info,
    .tarjeta-cuenta,
    .tarjeta-panel { min-width: 0; }

    .boton-whatsapp-flotante { width: 50px; height: 50px; right: 14px; }
    .boton-whatsapp-flotante svg { width: 22px; height: 22px; }
}

@media (max-width: 360px) {
    .contenido { padding: 0 12px 36px; }
    .tarjeta-cuenta { padding: 18px 14px; }
    .tarjeta-panel { padding: 15px; }
}

@media (min-width: 600px) {
    .contenido { max-width: 460px; padding: 0 24px 56px; }

    .tarjeta-panel { padding: 26px; }
    .tarjeta-cuenta { padding: 30px 28px; }
}

@media (min-width: 900px) {

    .contenido {
        max-width: 460px;
        padding-top: 36px;
    }
    .hero { padding-top: 4px; }
    .hero h1 { font-size: 25px; }
}