/* =====================================================================
   NETWILONE - CAPA DE PLATAFORMA

   Se carga despues de app.css y ui.css, asi que gana sin !important.

   Que hay aqui, y por que:

   1. La cabecera y el pie, que ahora son uno solo para todas las pantallas
   2. Las pantallas de pago, rehechas para que no puedan desbordarse
   3. Arreglos de desbordamiento en las pantallas que ya existian
   4. Las animaciones: entrada, espera, pago y confirmacion

   Regla que se repite y conviene entender: cada hijo de un grid o de un
   flex lleva "min-width: 0". Sin eso, el contenido manda sobre la columna
   -una palabra larga, una cifra, un correo- y se sale de la caja. Es la
   causa de casi todo desbordamiento en CSS moderno.
   ===================================================================== */

/* ====================================================================
   1. CABECERA
   ==================================================================== */

.nv-toggle:checked ~ .nv .nv-movil { display: grid; }
.nv-toggle:checked ~ .nv-scrim { opacity: 1; pointer-events: auto; }

.nv {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.nv-in {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
    max-width: var(--max);
    margin-inline: auto;
    padding: 0 var(--gutter);
    min-height: 64px;
}

.nv-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.06rem;
    letter-spacing: -.03em;
}
.nv-brand em { font-style: normal; color: var(--primary); }
.nv-mark {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--primary), var(--primary-2));
    color: #04120A;
    font-weight: 900;
    font-size: .95rem;
    box-shadow: 0 3px 12px var(--glow-soft);
}

.nv-links {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}
.nv-links a {
    padding: 8px 13px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--fast), background var(--fast);
}
.nv-links a:hover { color: var(--text); background: var(--surface-2); }
.nv-links a.is-on { color: var(--text); font-weight: 600; background: var(--surface-2); }

.nv-end { display: flex; align-items: center; gap: 10px; flex: none; }
.nv-entrar { color: var(--text-2); font-size: .9rem; text-decoration: none; padding: 8px 4px; }
.nv-entrar:hover { color: var(--text); }

/* Los dias de membresia: dato y boton a la vez. */
.nv-dias {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--fast), color var(--fast);
}
.nv-dias i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--glow-soft);
}
.nv-dias:hover { border-color: var(--border-2); color: var(--text); }
.nv-dias.is-warn { border-color: rgba(255, 194, 77, .42); color: var(--warn); }
.nv-dias.is-warn i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.nv-dias.is-off { border-color: rgba(255, 90, 90, .45); color: var(--danger); }
.nv-dias.is-off i { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

/* El menu de la cuenta. <details> para que abra y cierre sin JavaScript. */
.nv-yo { position: relative; }
.nv-yo > summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    list-style: none;
}
.nv-yo > summary::-webkit-details-marker { display: none; }
.nv-yo > summary:hover { border-color: var(--border-2); }
.nv-yo > summary svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform var(--fast);
}
.nv-yo[open] > summary svg { transform: rotate(180deg); }

.nv-avatar {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary), var(--primary-2));
    color: #04120A;
    font-weight: 800;
    font-size: .82rem;
}

.nv-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 9px);
    min-width: 232px;
    padding: 7px;
    border-radius: var(--r);
    border: 1px solid var(--border-2);
    background: var(--surface);
    box-shadow: var(--sh-4);
    animation: nv-baja .18s var(--ease-out) both;
}
@keyframes nv-baja { from { opacity: 0; transform: translateY(-6px); } }
.nv-pop-head { padding: 10px 11px 11px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.nv-pop-head b { display: block; font-size: .9rem; }
.nv-pop-head small { display: block; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.nv-pop a {
    display: block;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: .88rem;
    text-decoration: none;
}
.nv-pop a:hover { background: var(--surface-2); color: var(--text); }
.nv-pop-salir { color: var(--danger) !important; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* ---- El menu del telefono */
.nv-burger { display: none; }
.nv-movil { display: none; }
.nv-scrim {
    position: fixed;
    inset: 64px 0 0;
    z-index: 55;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--med);
}

@media (max-width: 900px) {
    .nv-links { display: none; }

    .nv-burger {
        display: grid;
        gap: 4px;
        width: 38px; height: 38px;
        padding: 10px 8px;
        border-radius: var(--r-sm);
        border: 1px solid var(--border);
        background: var(--surface-2);
        cursor: pointer;
        align-content: center;
    }
    .nv-burger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--text-2);
        transition: transform var(--fast), opacity var(--fast);
    }
    .nv-toggle:checked ~ .nv .nv-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nv-toggle:checked ~ .nv .nv-burger span:nth-child(2) { opacity: 0; }
    .nv-toggle:checked ~ .nv .nv-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .nv-movil {
        gap: 2px;
        padding: 8px var(--gutter) 16px;
        border-top: 1px solid var(--border);
        background: var(--surface);
        animation: nv-baja .2s var(--ease-out) both;
    }
    .nv-movil a {
        padding: 13px 12px;
        border-radius: var(--r-sm);
        color: var(--text-2);
        font-size: .95rem;
        text-decoration: none;
    }
    .nv-movil a.is-on { background: var(--surface-2); color: var(--text); font-weight: 600; }
    .nv-movil a.is-cta {
        margin-top: 6px;
        text-align: center;
        background: var(--primary);
        color: #04120A;
        font-weight: 700;
    }

    /* Con el menu abierto, lo de detras no debe poder tocarse. */
    .nv-toggle:checked ~ .nv-scrim { display: block; }
}

@media (max-width: 480px) {
    .nv-in { gap: 10px; min-height: 58px; }
    .nv-name { display: none; }
    .nv-entrar { display: none; }
    .nv-dias { padding: 6px 9px; }
}

/* ====================================================================
   2. MARCO DE PAGINA Y PIE
   ==================================================================== */

.pg { min-height: 60vh; }
.pg-cuenta { padding-block: clamp(24px, 4vw, 44px) clamp(40px, 6vw, 72px); }
.pg-flashes { padding-top: 18px; }

.ft {
    margin-top: clamp(48px, 8vw, 96px);
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.ft-in {
    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 40px);
    flex-wrap: wrap;
    padding-block: 28px;
}
.ft-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ft-marca b { display: block; font-size: .94rem; }
.ft-marca small { display: block; color: var(--muted); font-size: .8rem; }
.ft-links { display: flex; gap: 18px; flex-wrap: wrap; margin-inline: auto; }
.ft-links a { color: var(--text-2); font-size: .88rem; text-decoration: none; }
.ft-links a:hover { color: var(--primary); }
.ft-fin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ft-sello {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--text-2);
}
.ft-sello svg {
    width: 15px; height: 15px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 700px) {
    .ft-in { flex-direction: column; align-items: flex-start; gap: 18px; }
    .ft-links { margin-inline: 0; }
}

/* ====================================================================
   3. PANTALLAS DE PAGO
   ==================================================================== */

.pay { padding-block: clamp(22px, 3.5vw, 48px); }

.pay-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    color: var(--text-2);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.pay-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pay-back:hover { color: var(--primary); }

/*
 * Las dos columnas. minmax(0, …) en las dos: es lo que permite que el
 * contenido se encoja en vez de empujar la columna y salirse.
 */
.pay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}
.pay-main, .pay-side { min-width: 0; }

/* ---- Lo que compras */

.pay-head {
    display: flex;
    gap: clamp(14px, 2.4vw, 24px);
    align-items: flex-start;
    margin-bottom: 22px;
}
.pay-head-txt { min-width: 0; }

.pay-thumb {
    flex: none;
    width: clamp(112px, 17vw, 170px);
    padding: 11px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg-2);
    box-shadow: var(--sh-2);
}
.pay-thumb-icono {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: radial-gradient(120% 120% at 30% 20%, var(--glow-soft), transparent 65%), var(--surface);
    border-color: var(--border-lit);
}
.pay-thumb-icono span { font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; }

.pay-kicker {
    display: inline-block;
    margin-bottom: 9px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-lit);
    background: var(--glow-soft);
    color: var(--primary-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pay-head h1 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}
.pay-head p { margin: 0; color: var(--text-2); font-size: .96rem; max-width: 56ch; }

.pay-feats { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 9px; }
.pay-feats li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pay-feats svg {
    width: 17px; height: 17px;
    flex: none;
    margin-top: 2px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pay-feats span { font-size: .92rem; color: var(--text-2); min-width: 0; }

.pay-bloque { margin-bottom: 26px; }
.pay-bloque h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1.12rem;
    letter-spacing: -.02em;
}

/*
 * El selector de meses: una rejilla, no una fila.
 *
 * Antes era un flex con width:max-content, que es exactamente la receta
 * para desbordar una columna estrecha: la caja se limita al 100% pero sus
 * hijos conservan su tamano y se salen. Con auto-fit se parte en dos filas
 * y nunca se sale de su sitio.
 */
.pay-meses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 9px;
    /* Sitio para las etiquetas de descuento, que asoman por arriba. */
    padding-top: 9px;
}
.pay-mes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 13px 12px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
    text-align: center;
    transition: border-color var(--fast), transform var(--fast), background var(--fast);
}
.pay-mes:hover { border-color: var(--border-2); transform: translateY(-2px); }
.pay-mes b { font-size: .95rem; color: var(--text); }
.pay-mes small { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pay-mes em {
    position: absolute;
    top: -9px; right: 8px;
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #04120A;
}
.pay-mes.is-on {
    border-color: var(--primary);
    background: var(--glow-soft);
    box-shadow: 0 0 0 1px var(--primary);
}
.pay-mes.is-on small { color: var(--primary-3); }

.pay-destino {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--r);
    border: 1px dashed var(--border-2);
    font-size: .9rem;
    color: var(--text-2);
}
.pay-destino b { color: var(--text); }
.pay-destino span {
    display: block;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* ---- La caja de pagar */

.pay-side { position: sticky; top: 84px; }

.pay-card {
    padding: clamp(18px, 2.2vw, 26px);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-lit);
    background:
        radial-gradient(130% 90% at 50% 0%, var(--glow-soft), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: var(--sh-3);
}
.pay-card-tit {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 1.18rem;
    letter-spacing: -.02em;
}

.pay-nota {
    margin: 0 0 16px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-lit);
    background: var(--glow-soft);
    font-size: .86rem;
    color: var(--text-2);
}
.pay-nota b { color: var(--primary-3); }

.pay-rows { list-style: none; padding: 0; margin: 0; }
.pay-rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: .9rem;
}
.pay-rows li:last-child { border-bottom: 0; }
.pay-rows span { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.pay-rows b { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-rows .is-desc b { color: var(--primary); }

.pay-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 15px;
    border-top: 1px solid var(--border-2);
}
.pay-total span { color: var(--text-2); font-size: .9rem; min-width: 0; }
.pay-total b {
    flex: none;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 1.9rem);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-go { margin-top: 18px; }
.pay-legal { margin: 12px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.6; }

.pay-trust { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.pay-trust li { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--muted); min-width: 0; }
.pay-trust svg {
    width: 15px; height: 15px;
    flex: none;
    margin-top: 1px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pay-ayuda { margin: 14px 0 0; text-align: center; font-size: .85rem; color: var(--muted); }

.pay-ya { text-align: center; padding: 8px 0; }
.pay-ya b { display: block; font-family: var(--font-display); font-size: 1.24rem; margin-top: 14px; }
.pay-ya span { display: block; margin-top: 6px; font-size: .88rem; color: var(--text-2); }

/* ---- Movil: una columna y el boton de pagar siempre a mano */
@media (max-width: 900px) {
    .pay-grid { grid-template-columns: minmax(0, 1fr); }
    .pay-side { position: static; }
    .pay-head { gap: 14px; }
    .pay-thumb { width: clamp(92px, 30vw, 130px); }
}

@media (max-width: 560px) {
    .pay-head { flex-direction: column; }
    .pay-thumb { width: 100%; max-width: 240px; }
    .pay-meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================================================================
   4. ARREGLOS DE DESBORDAMIENTO EN LO QUE YA EXISTIA
   ==================================================================== */

/*
 * El mismo problema del selector de meses estaba en el conmutador de la
 * pagina de planes. Ahi cabia porque el contenedor es ancho, pero en
 * cuanto la pantalla se angosta se sale. Se arregla donde vive.
 */
/*
 * fit-content, no max-content: los dos abrazan el contenido, pero solo
 * fit-content acepta encogerse cuando no cabe. Con max-content la caja se
 * limitaba al 100% y sus hijos seguian anchos, que es justo el
 * desbordamiento que se veia.
 */
.plan-switch {
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}
.plan-switch-opt { flex: 0 1 auto; min-width: 0; }

/* Los hijos de todas las rejillas pueden encogerse. */
.co-grid > *, .grid > *, .co-summary, .co-pay { min-width: 0; }

/* Correos, dominios y referencias: parten antes de salirse. */
.co-lines b, .calc-row b, .mono, .copyable { overflow-wrap: anywhere; }
.co-lines span, .calc-row span { min-width: 0; }

/* Una tabla no puede ensanchar su tarjeta: rueda dentro de su caja. */
.table-wrap { max-width: 100%; }

/*
 * Ninguna pantalla debe poder rodar de lado.
 *
 * "clip" y no "hidden", y solo en el body. Parecen lo mismo y no lo son:
 * overflow:hidden convierte al elemento en un contenedor de scroll, y eso
 * ROMPE position:sticky en todo lo que tenga dentro. Con hidden en html y
 * body, el menu lateral del panel dejaba de quedarse quieto y se iba con el
 * scroll del contenido.
 *
 * clip recorta igual pero no crea contenedor de scroll, asi que los menus
 * pegajosos siguen funcionando. Donde no exista clip, la regla se ignora y
 * como mucho vuelve el riesgo de scroll lateral: nunca una maqueta rota.
 */
body { overflow-x: clip; }

/* ====================================================================
   5. ANIMACIONES
   ==================================================================== */

/* ---- Entrada de la pagina, escalonada */
@keyframes pg-entra {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.reveal { animation: pg-entra .5s var(--ease-out) both; animation-delay: var(--reveal-delay, 0s); }

/* ---- El boton mientras trabaja */
.btn { position: relative; }
.btn.is-cargando { pointer-events: none; color: transparent !important; }
.btn.is-cargando > * { visibility: hidden; }
.btn.is-cargando::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(4, 18, 10, .28);
    border-top-color: #04120A;
    animation: pg-gira .6s linear infinite;
}
.btn-ghost.is-cargando::after,
.btn-danger.is-cargando::after { border-color: rgba(255,255,255,.25); border-top-color: var(--text); }

@keyframes pg-gira { to { transform: rotate(360deg); } }

/* ---- El velo de "te estamos llevando a pagar" */
.pago-velo {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: pg-aparece .24s var(--ease-out) both;
}
@keyframes pg-aparece { from { opacity: 0; } }

.pago-caja { text-align: center; max-width: 340px; }

/* El anillo: dos arcos girando a distinta velocidad. Se lee como
   "esta pasando algo" sin parecer que se colgo. */
.pago-anillo {
    position: relative;
    width: 76px; height: 76px;
    margin: 0 auto 22px;
}
.pago-anillo::before,
.pago-anillo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}
.pago-anillo::before {
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    animation: pg-gira 1s linear infinite;
}
.pago-anillo::after {
    inset: 11px;
    border-bottom-color: var(--primary-3);
    opacity: .6;
    animation: pg-gira 1.5s linear infinite reverse;
}
.pago-anillo span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--primary);
    font-size: 1.3rem;
}

.pago-caja b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.22rem;
    letter-spacing: -.02em;
}
.pago-caja p { margin: 9px 0 0; font-size: .9rem; color: var(--text-2); }
.pago-caja small { display: block; margin-top: 18px; font-size: .8rem; color: var(--muted); }

/* Los puntos que laten: dicen "sigue vivo" mientras el banco contesta. */
.pago-puntos { display: inline-flex; gap: 5px; margin-top: 16px; }
.pago-puntos i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    animation: pg-late 1.2s var(--ease) infinite;
}
.pago-puntos i:nth-child(2) { animation-delay: .16s; }
.pago-puntos i:nth-child(3) { animation-delay: .32s; }
@keyframes pg-late {
    0%, 60%, 100% { opacity: .28; transform: scale(.82); }
    30%           { opacity: 1;   transform: scale(1); }
}

/* ---- La palomita de confirmado: se dibuja, no aparece */
.pay-check { width: 62px; height: 62px; margin: 0 auto; }
.pay-check svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pay-check circle {
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: pg-traza .5s var(--ease-out) forwards;
}
.pay-check path {
    stroke: var(--primary);
    stroke-width: 3.6;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: pg-traza .35s var(--ease-out) .42s forwards;
}
@keyframes pg-traza { to { stroke-dashoffset: 0; } }

/* ---- Esperando al banco: el bloque respira */
.ord-head.is-wait .ord-mark { animation: pg-respira 2.4s var(--ease) infinite; }
@keyframes pg-respira {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.06); opacity: 1; }
}

/* ---- Foco visible. Se ve premium y hace la web usable con teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ---- Quien pidio no ver movimiento, no lo ve */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .nv-pop,
    .nv-movil,
    .pago-velo { animation: none; }
    .pay-check circle,
    .pay-check path { animation: none; stroke-dashoffset: 0; }
    .pago-anillo::before,
    .pago-anillo::after { animation-duration: 2.4s; }
    .ord-head.is-wait .ord-mark { animation: none; }
    .pay-mes:hover { transform: none; }
}

/* --------------------------------------------------- La franja de cifras

   `auto-fit` con minimo de 140px deja tres cifras en dos columnas cuando la
   pantalla es estrecha, y la tercera se queda sola con un hueco al lado. En
   el telefono se ponen en una sola columna, que se lee y no deja huecos. */
@media (max-width: 520px) {
    .stats-strip { grid-template-columns: minmax(0, 1fr); }
    .stats-strip > div { padding: 12px 16px; }
}

/* =====================================================================
   LA VITRINA DE LA PORTADA

   Cuatro pantallas del producto dibujadas con HTML y CSS, dentro del marco
   de un navegador y del de un telefono. No son fotos: pesan unos kilobytes,
   se ven nitidas en cualquier pantalla y no envejecen cuando se retoca un
   boton.

   El cambio de escena es CSS puro: cuatro radios escondidos y `:checked ~`.
   Sin JavaScript, asi que funciona tambien si el script no carga.

   En el telefono el marco del navegador se retira: una maqueta de 16:10
   metida en 360px no se lee, y una miniatura ilegible no vende nada. Queda
   el telefono, que ademas es lo que esta mirando quien la ve desde ahi.
   ===================================================================== */

.vt { position: relative; }

/* El radio existe y se puede enfocar con el teclado, pero no se ve. */
.vt-radio {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------ Pestanas */

.vt-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 22px;
}

.vt-tab {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.vt-tab:hover { color: var(--text); border-color: var(--border-2, var(--border)); }

/* La pestana de la escena que se esta viendo. */
#vt-tienda:checked   ~ .vt-tabs [for="vt-tienda"],
#vt-catalogo:checked ~ .vt-tabs [for="vt-catalogo"],
#vt-panel:checked    ~ .vt-tabs [for="vt-panel"],
#vt-entrega:checked  ~ .vt-tabs [for="vt-entrega"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #04120A;
}

/* Quien navega con teclado tiene que ver donde esta. */
.vt-radio:focus-visible ~ .vt-tabs [for] { outline: none; }
#vt-tienda:focus-visible   ~ .vt-tabs [for="vt-tienda"],
#vt-catalogo:focus-visible ~ .vt-tabs [for="vt-catalogo"],
#vt-panel:focus-visible    ~ .vt-tabs [for="vt-panel"],
#vt-entrega:focus-visible  ~ .vt-tabs [for="vt-entrega"] {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* --------------------------------------------------- Cual escena se ve */

.vt-pant { display: none; }
#vt-tienda:checked   ~ .vt-marco .vt-pant-tienda,
#vt-catalogo:checked ~ .vt-marco .vt-pant-catalogo,
#vt-panel:checked    ~ .vt-marco .vt-pant-panel,
#vt-entrega:checked  ~ .vt-marco .vt-pant-entrega { display: flex; flex-direction: column; height: 100%; }

.vt-pie { display: none; }
#vt-tienda:checked   ~ .vt-pies .vt-pie-tienda,
#vt-catalogo:checked ~ .vt-pies .vt-pie-catalogo,
#vt-panel:checked    ~ .vt-pies .vt-pie-panel,
#vt-entrega:checked  ~ .vt-pies .vt-pie-entrega { display: block; }

/* ------------------------------------------------------------- El marco */

.vt-marco {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
}

/* --- El navegador */

.vt-nav {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 820px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}

.vt-nav-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.vt-nav-bar i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 16%, transparent);
    flex: none;
}
.vt-url {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: .72rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vt-url b { color: var(--text); font-weight: 600; }
.vt-url svg {
    width: 11px; height: 11px;
    flex: none;
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vt-nav-cuerpo {
    position: relative;
    /* Alto de una pantalla de portatil. El contenido que no cabe se recorta,
       igual que en una web de verdad: se entiende que la pagina sigue. */
    aspect-ratio: 16 / 9.4;
    background: var(--bg);
    overflow: hidden;
}

/* --- El telefono */

.vt-tel {
    flex: none;
    width: 216px;
    padding: 7px;
    border-radius: 30px;
    background: #14181A;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.vt-tel-pantalla {
    position: relative;
    aspect-ratio: 9 / 16.6;
    border-radius: 24px;
    background: var(--bg);
    overflow: hidden;
}
/* La barra del telefono empieza debajo de la pastilla de la camara. */
.vt-tel-pantalla .vt-top { padding-top: 24px; }

/* La pastilla de la camara: dos pixeles que hacen que se lea "telefono". */
.vt-tel-isla {
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 52px; height: 13px;
    border-radius: 999px;
    background: #000;
    z-index: 3;
}

/* ================================================== Las pantallas ==== */

/*
   De aqui abajo todo es la maqueta de dentro: tipos pequenos, mismas
   formas que el producto. Se escribe en px y no en rem a proposito: es un
   dibujo a escala, no texto que alguien vaya a leer largo rato.
*/

.vt-pant { font-size: 11px; line-height: 1.35; color: var(--text); }

/* --- La barra de arriba */

.vt-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.vt-top > b { font-size: 12px; white-space: nowrap; }
.vt-logo, .vt-avatar {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    flex: none;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
}
.vt-logo { background: var(--primary); color: #04120A; }
.vt-avatar { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.vt-buscar {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vt-saldo {
    flex: none;
    padding: 4px 9px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
}
.vt-top-tel > b { flex: 1; }
.vt-menu {
    width: 14px; height: 10px;
    flex: none;
    border-top: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
}

.vt-cuerpo {
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
}

/* --- El banner de la tienda */

.vt-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    border-radius: 11px;
    margin-bottom: 12px;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
        var(--surface);
    border: 1px solid var(--border);
}
.vt-hero-eyebrow {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.vt-hero strong { font-size: 17px; line-height: 1.15; letter-spacing: -.02em; }
.vt-hero-btn {
    margin-top: 4px;
    padding: 5px 12px;
    border-radius: 7px;
    background: var(--primary);
    color: #04120A;
    font-size: 10px;
    font-weight: 700;
}

/* --- La rejilla de productos */

.vt-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.vt-rejilla-tel { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vt-prod {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 0;
}
.vt-prod-img {
    display: grid;
    place-items: center;
    height: 44px;
    border-radius: 7px;
    /* El color de cada servicio llega desde el HTML, en --c. */
    background: color-mix(in srgb, var(--c, var(--primary)) 26%, #0A0F0C);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.vt-prod-t {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vt-prod-p { font-size: 11px; font-weight: 800; color: var(--primary); }

/* --- El catalogo en lista */

.vt-chips { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.vt-chips span {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 9.5px;
}
.vt-chips .on { background: var(--primary); border-color: var(--primary); color: #04120A; font-weight: 700; }

.vt-lista { display: grid; gap: 6px; }
.vt-fila {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.vt-fila .vt-prod-img { width: 26px; height: 26px; flex: none; font-size: 11px; border-radius: 6px; }
.vt-fila-t { flex: 1; min-width: 0; }
.vt-fila-t b { display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-fila-t small { display: block; color: var(--muted); font-size: 9px; }
.vt-fila-p { flex: none; font-size: 11px; font-weight: 800; color: var(--primary); }
.vt-fila-btn {
    flex: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-size: 9.5px;
    font-weight: 700;
}

/* --- El panel del vendedor */

.vt-panel { display: flex; height: 100%; }
.vt-lat {
    flex: none;
    width: 118px;
    padding: 10px 8px;
    border-right: 1px solid var(--border);
    background: var(--surface);
}
.vt-lat-marca {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
}
.vt-lat-marca i {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 6px;
    background: var(--primary);
    color: #04120A;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
}
.vt-lat-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 10px;
}
.vt-lat-item i {
    width: 9px; height: 9px;
    border-radius: 3px;
    border: 1.5px solid currentColor;
    flex: none;
}
.vt-lat-item.on {
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary);
    font-weight: 600;
}

.vt-panel-cuerpo { flex: 1; min-width: 0; padding: 12px; }

.vt-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.vt-stats-tel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-stats > div {
    padding: 9px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 0;
}
.vt-stats small { display: block; color: var(--muted); font-size: 9px; }
.vt-stats b { display: block; font-size: 14px; letter-spacing: -.02em; margin-top: 2px; }
.vt-stats em { font-style: normal; font-size: 9px; color: var(--primary); }

.vt-tabla {
    padding: 10px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.vt-tabla-tit {
    display: block;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}
.vt-tabla-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    font-size: 10px;
}
.vt-tabla-fila > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-tabla-fila > small { color: var(--muted); font-size: 9px; flex: none; }
.vt-tabla-fila > b { flex: none; font-weight: 700; }
.vt-tabla-fila > em {
    flex: none;
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-size: 8.5px;
}

/* --- El pedido entregado */

/* Los dos bloques de abajo del panel, uno al lado del otro. */
.vt-dos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.vt-bajo {
    background: color-mix(in srgb, #E5A13B 20%, transparent) !important;
    color: #E5A13B !important;
}

.vt-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.vt-pedido-tit { display: block; font-size: 16px; letter-spacing: -.02em; margin: 6px 0 3px; }
.vt-pedido-meta { display: block; color: var(--muted); font-size: 10px; margin-bottom: 10px; }
.vt-pedido-meta em { font-style: normal; color: var(--primary); font-weight: 600; }

.vt-copiar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    margin-bottom: 9px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.vt-copiar b { display: block; font-size: 11px; }
.vt-copiar small { display: block; color: var(--muted); font-size: 9.5px; }
.vt-copiar-btn {
    flex: none;
    padding: 6px 14px;
    border-radius: 7px;
    background: var(--primary);
    color: #04120A;
    font-size: 10px;
    font-weight: 800;
}

.vt-servicio {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px 9px 0 0;
    border: 1px solid var(--border);
    background: var(--surface);
}
.vt-servicio .vt-prod-img { width: 26px; height: 26px; flex: none; font-size: 11px; border-radius: 7px; }
.vt-serv-t { flex: 1; min-width: 0; }
.vt-serv-t b { display: block; font-size: 10.5px; }
.vt-serv-t small { display: block; color: var(--muted); font-size: 9px; }
.vt-serv-estado {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-size: 8.5px;
    font-weight: 700;
}

.vt-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 9px 9px;
    background: var(--bg);
    margin-bottom: 9px;
}
.vt-datos-tel { grid-template-columns: minmax(0, 1fr); }
.vt-datos span { min-width: 0; }
.vt-datos small {
    display: block;
    font-size: 8px;
    letter-spacing: .1em;
    color: var(--muted);
}
.vt-datos code {
    display: block;
    font-size: 9.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------- Lo que sirve */

.vt-pies {
    max-width: 660px;
    margin: 26px auto 0;
    text-align: center;
    /* Alto fijo: al cambiar de pestana la pagina no debe dar un salto. */
    min-height: 168px;
}
.vt-pie h3 { font-size: 1.25rem; margin-bottom: 8px; letter-spacing: -.02em; }
.vt-pie p { color: var(--muted); margin-bottom: 14px; }
.vt-pie ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.vt-pie li {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2, var(--text));
    font-size: .82rem;
}
/* El punto verde de delante dice "esto lo tienes", sin gastar una palabra. */
.vt-pie li::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--primary);
    vertical-align: middle;
}

.vt-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

/* ------------------------------------------------------------- Pantallas */

@media (max-width: 1100px) {
    .vt-tel { width: 190px; }
    .vt-marco { gap: 18px; }
}

@media (max-width: 900px) {
    /*
     * Se retira el navegador y queda el telefono.
     *
     * Una maqueta de 16:10 dentro de 360px daria letras de 4px: no se lee, y
     * una miniatura ilegible no ensena nada. Ademas, quien mira esto desde un
     * telefono esta viendo exactamente lo que le interesa comprobar.
     */
    .vt-nav { display: none; }
    .vt-tel { width: 260px; }
    .vt-tabs { margin-bottom: 18px; }
    .vt-pies { min-height: 0; margin-top: 22px; }
}

@media (max-width: 560px) {
    .vt-tabs { gap: 5px; }
    .vt-tab { padding: 7px 12px; font-size: .8rem; }
    .vt-tel { width: 232px; }
    .vt-pie h3 { font-size: 1.1rem; }
    .vt-pie li { font-size: .78rem; padding: 5px 11px; }
    .vt-cta .btn { width: 100%; justify-content: center; }
}