/* ---------------------------------------------------------------------
   Cavorite — hoja de estilo

   Los colores son EXACTAMENTE los del programa (app/theme.py). Que la web
   y la aplicación se vean como la misma cosa no es decoración: es lo que
   hace que alguien que llega desde el sitio reconozca lo que descargó.

   Estructura: tokens, base, cabecera, secciones, tarjetas, capturas, pie.
   --------------------------------------------------------------------- */

:root {
    /* la paleta del programa, sin retocar */
    --fondo:        #14171d;
    --tarjeta:      #1c2027;
    --borde:        #2a2f39;
    --borde-suave:  #232833;
    --hover:        #262c37;
    --texto:        #e2e7f0;
    --texto-2:      #aeb7c6;
    --texto-3:      #8d97a8;
    --apagado:      #5a6373;
    --acento:       #45d0b0;
    --acento-claro: #63dcc0;
    --acento-hondo: #37b89a;
    --sobre-acento: #082019;

    /* Escala tipográfica en proporción 1.25. Fluida con clamp(): el texto
       crece con la ventana sin necesidad de un punto de corte por tamaño,
       que es lo que hace que un sitio se vea bien en un teléfono y en un
       monitor de 32 pulgadas con las mismas reglas. */
    --t-xs:  0.78rem;
    --t-sm:  0.88rem;
    --t-base: 1rem;
    --t-md:  clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
    --t-lg:  clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
    --t-xl:  clamp(1.9rem,  1.4rem  + 2.2vw, 3.2rem);

    /* espaciado en múltiplos de 4, para que todo caiga en la misma grilla */
    --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
    --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px;

    --radio:   14px;
    --radio-s: 10px;
    --ancho:   1180px;
    --cabecera: 84px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-claro); text-decoration: underline; }

/* Que quien navega con el teclado vea dónde está parado. Se hereda el
   color del acento para no inventar un tercer color. */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

.contenedor {
    width: min(100% - 2 * var(--e-5), var(--ancho));
    margin-inline: auto;
}

.saltar {
    position: absolute;
    left: -9999px;
}
.saltar:focus {
    left: var(--e-4);
    top: var(--e-2);
    z-index: 100;
    background: var(--acento);
    color: var(--sobre-acento);
    padding: var(--e-2) var(--e-4);
    border-radius: var(--radio-s);
}

/* ---------------------------------------------------------- cabecera */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(20, 23, 29, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde-suave);
}

.cabecera-caja {
    height: var(--cabecera);
    display: grid;
    /* tres columnas iguales a los costados: así las pestañas quedan
       centradas respecto de la PÁGINA y no respecto del hueco que dejan
       la marca y el selector, que es lo que se ve torcido */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--e-4);
}

.marca {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    /* una vez y media el tamaño anterior: el icono pasa de 28 a 42 px y el
       nombre de 1rem a 1,5rem. Es la marca de la casa y tiene que pesar mas
       que las pestañas, que son navegacion */
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--texto);
}
.marca:hover { text-decoration: none; color: var(--texto); }
.marca img { width: 42px; height: 42px; }

/* --- las pestañas --- */
.pestanas {
    display: flex;
    gap: var(--e-1);
    justify-self: center;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: var(--e-1);
}

.pestana {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--texto-3);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 500;
    padding: var(--e-2) var(--e-4);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
.pestana:hover { color: var(--texto); background: var(--hover); }
.pestana[aria-selected="true"] {
    background: var(--acento);
    color: var(--sobre-acento);
    font-weight: 600;
}

/* --- el idioma --- */
.idioma {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 3px;
}
.idioma a {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--texto-3);
    padding: 5px var(--e-3);
    border-radius: 999px;
}
.idioma a:hover { color: var(--texto); background: var(--hover); text-decoration: none; }
.idioma a[aria-current="true"] {
    background: var(--acento);
    color: var(--sobre-acento);
}

/* ---------------------------------------------------------- secciones */
.seccion { display: none; }
.seccion.activa { display: block; animation: aparecer .22s ease; }

@keyframes aparecer {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* quien prefiere no ver movimiento, no lo ve */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto; }
}

.portada {
    padding: clamp(var(--e-7), 7vw, 110px) 0 var(--e-7);
    text-align: center;
}

.etiqueta {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--acento);
    border: 1px solid rgba(69, 208, 176, .35);
    background: rgba(69, 208, 176, .08);
    border-radius: 999px;
    padding: var(--e-1) var(--e-3);
    margin-bottom: var(--e-4);
}
.etiqueta.gris {
    color: var(--texto-3);
    border-color: var(--borde);
    background: var(--tarjeta);
}

h1 {
    font-size: var(--t-xl);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 var(--e-4);
    /* el ancho de línea se limita en CARACTERES: un titular de 20 palabras
       en un monitor ancho se vuelve ilegible aunque el diseño «entre» */
    max-width: 18ch;
    margin-inline: auto;
}

h2 {
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--e-4);
}

h3 {
    font-size: var(--t-md);
    margin: 0 0 var(--e-2);
    color: var(--texto);
}

.bajada {
    font-size: var(--t-md);
    color: var(--texto-2);
    max-width: 62ch;
    margin: 0 auto;
}

/* --------------------------------------------------------- acciones */
.acciones { margin: var(--e-6) 0 var(--e-3); }

/* El boton de suscripcion es la MISMA pieza que la etiqueta de estado
   —borde fino, fondo apenas teñido, versalitas espaciadas— pero dos veces
   y media mas grande. Que sean la misma forma no es capricho: el visitante
   ya la vio arriba como un rotulo, y al encontrarla enorme y clicable
   entiende sin leer que es lo importante de la pagina.

   El tamaño va con clamp() y no con un multiplicador fijo: 2,5 veces la
   etiqueta en un monitor grande esta bien, pero en un telefono de 375 px
   el texto se saldria de la pantalla. */
.boton {
    display: inline-block;
    position: relative;
    overflow: hidden;

    font-size: clamp(1.15rem, 0.75rem + 1.6vw, 1.95rem);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--acento);
    border: 2px solid rgba(69, 208, 176, .45);
    background: rgba(69, 208, 176, .08);
    border-radius: 999px;
    padding: clamp(.5rem, .3rem + .8vw, .9rem) clamp(1.4rem, 1rem + 2.4vw, 3rem);

    transition: color .22s ease, background .22s ease,
                border-color .22s ease, box-shadow .28s ease,
                transform .22s ease;
}

/* El destello que cruza al pasar el cursor. Va en un pseudo-elemento para
   no tocar el fondo del boton, que al mismo tiempo se esta llenando. */
.boton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
                transparent 30%,
                rgba(255, 255, 255, .28) 50%,
                transparent 70%);
    transform: translateX(-130%);
    transition: transform .55s ease;
}

.boton:hover {
    color: var(--sobre-acento);
    background: var(--acento);
    border-color: var(--acento-claro);
    text-decoration: none;
    transform: translateY(-3px) scale(1.03);
    /* el resplandor sale del mismo teal: no aparece un color nuevo */
    box-shadow: 0 0 0 6px rgba(69, 208, 176, .12),
                0 14px 34px rgba(69, 208, 176, .28);
}
.boton:hover::after { transform: translateX(130%); }

.boton:active {
    background: var(--acento-hondo);
    transform: translateY(-1px) scale(1);
    box-shadow: 0 0 0 3px rgba(69, 208, 176, .14);
}

/* Quien pide no ver movimiento igual tiene que notar el cambio: se queda
   el relleno y se van el salto y el destello. */
@media (prefers-reduced-motion: reduce) {
    .boton:hover { transform: none; }
    .boton::after { display: none; }
}

/* la repeticion del final, con aire alrededor para que respire */
.cierre {
    text-align: center;
    padding: var(--e-8) 0 var(--e-7);
    border-top: 1px solid var(--borde-suave);
    margin-top: var(--e-7);
}

.nota {
    font-size: var(--t-xs);
    color: var(--apagado);
    margin: 0;
}

/* ----------------------------------------------------------- tarjetas */
.rejilla {
    display: grid;
    /* auto-fit + minmax: las columnas se acomodan solas al ancho que haya,
       sin una sola consulta de medios. En un teléfono cae a una columna y
       en un monitor grande llega a cuatro, con el mismo código */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--e-4);
    margin: var(--e-7) 0;
}

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-5);
    transition: border-color .18s ease, transform .18s ease;
}
.tarjeta:hover {
    border-color: rgba(69, 208, 176, .4);
    transform: translateY(-2px);
}
.tarjeta p {
    color: var(--texto-3);
    font-size: var(--t-sm);
    margin: 0;
}

/* ---------------------------------------------------------- capturas */
.modulos { margin: var(--e-8) 0; }

.modulo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
    align-items: center;
    margin-bottom: var(--e-8);
}

/* de 900 para arriba, texto e imagen lado a lado; y alternando el lado
   para que la página no sea una columna monótona.

   Las columnas TAMBIÉN se dan vuelta en los pares. Antes solo se movía el
   texto y la rejilla se quedaba quieta en 5fr 7fr: en los impares la imagen
   caía en la columna ancha (658 px) y en los pares en la angosta (470 px),
   un 30 % más chica. Reparar y Texturas se veían encogidas y el texto de al
   lado, estirado. */
@media (min-width: 900px) {
    .modulo { grid-template-columns: 5fr 7fr; gap: var(--e-7); }
    .modulo:nth-child(even) { grid-template-columns: 7fr 5fr; }
    .modulo:nth-child(even) .modulo-texto { order: 2; }
}

.modulo-texto p {
    color: var(--texto-3);
    margin: 0;
}

/* El número de cada módulo: un círculo con la cifra centrada.
   Crece de 30 a 38 px y la cifra de 0,88 a 1,05 rem. Las dos medidas van
   juntas a propósito: agrandar solo la letra —que es lo que hice una vez—
   la deja descolocada dentro de un círculo que no creció con ella. El
   centrado lo hace flex, así que no depende del alto de línea. */
.numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(69, 208, 176, .12);
    border: 1px solid rgba(69, 208, 176, .35);
    color: var(--acento);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--e-3);
}

.captura {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo);
    /* la sombra da la sensación de ventana apoyada sobre la página, que es
       lo que es: una captura de un programa de escritorio */
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.captura img { width: 100%; height: auto; }

/* ------------------------------------------------------------- about */
.datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--e-4);
    margin-top: var(--e-5);
}
.dato {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    padding: var(--e-4);
}
.dato .clave {
    display: block;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--apagado);
    margin-bottom: var(--e-1);
}
.dato .valor { font-size: var(--t-md); font-weight: 600; }

.bloque {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-5);
    margin: var(--e-5) 0;
}
.bloque p { color: var(--texto-2); margin: 0; }
.bloque p + p { margin-top: var(--e-3); }

.medida { max-width: 68ch; }

/* --------------------------------------------------------------- pie */
.pie {
    border-top: 1px solid var(--borde-suave);
    margin-top: var(--e-8);
    padding: var(--e-6) 0 var(--e-7);
    color: var(--apagado);
    font-size: var(--t-sm);
}
.pie-caja {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3) var(--e-5);
    align-items: center;
    justify-content: space-between;
}
.pie a { color: var(--texto-3); }
.pie a:hover { color: var(--acento); }
.aviso {
    margin-top: var(--e-4);
    font-size: var(--t-xs);
    color: var(--apagado);
    max-width: 70ch;
}

/* ------------------------------------------------------------ móviles */
@media (max-width: 780px) {
    :root { --cabecera: auto; }

    .cabecera-caja {
        grid-template-columns: auto auto;
        grid-template-areas: "marca idioma" "pestanas pestanas";
        gap: var(--e-3);
        padding: var(--e-3) 0;
    }
    .marca    { grid-area: marca; }
    .idioma   { grid-area: idioma; }
    .pestanas {
        grid-area: pestanas;
        justify-self: stretch;
        /* en pantallas angostas las cuatro pestañas no entran: se deslizan
           en horizontal en vez de amontonarse o cortarse */
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .pestanas::-webkit-scrollbar { display: none; }
    .pestana { padding: var(--e-2) var(--e-3); }

    h1 { max-width: none; }
    .tarjeta, .bloque { padding: var(--e-4); }
}

/* ==========================================================================
   Lo agregado con la pestaña Cavolux ampliada
   ========================================================================== */

/* --- botones a dos tercios -------------------------------------------------
   Suscribirme entró siendo 2,5 veces la etiqueta DISPONIBLE. Con dos botones
   uno al lado del otro —y tres en la página— ese tamaño se comía la pantalla
   en un portátil, así que bajan a dos tercios. Se toca solo el clamp(): el
   borde, las versalitas y el destello siguen siendo los mismos, que es lo
   que los hace reconocibles. */
.boton-chico {
    font-size: clamp(.78rem, .5rem + 1.07vw, 1.3rem);
    letter-spacing: 1.4px;
    padding: clamp(.34rem, .2rem + .53vw, .6rem)
             clamp(.94rem, .67rem + 1.6vw, 2rem);
}

/* dos botones juntos, sin que se peguen ni se salgan en un teléfono */
.acciones-par {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--e-4);
}
.acciones-izq { justify-content: flex-start; }

/* el de descarga cuando el archivo todavía no está publicado */
.boton-apagado {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- requisitos ------------------------------------------------------------ */
.requisitos {
    padding: var(--e-8) 0 var(--e-6);
    border-top: 1px solid var(--borde-suave);
    margin-top: var(--e-7);
}
.requisitos h2 { margin-bottom: var(--e-5); }

/* Dos columnas que caen a una sola cuando no entran. El minmax de 260px es
   el ancho al que «Procesador de 16 núcleos o más» deja de partirse feo. */
.req-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--e-6);
    align-items: start;
}
.req-col h3 {
    /* las dos cabeceras arrancan a la misma altura aunque una ocupe dos
       renglones y la otra una: sin esto las listas quedan desalineadas */
    min-height: 3.1em;
    margin: 0 0 var(--e-3);
    font-size: var(--t-sm);
    color: var(--acento);
}
.req-col ul {
    margin: 0;
    padding-left: 1.15em;
    color: var(--texto-2);
}
.req-col li { margin: .3em 0; }
.req-asterisco { margin-top: var(--e-3); }

.req-extra {
    margin: var(--e-6) 0 0;
    color: var(--texto-2);
    max-width: none;      /* a ancho completo, como pidió */
}
.req-vram-t { margin: var(--e-7) 0 var(--e-3); font-size: var(--t-sm); }

/* La tabla se desliza sola si no entra, en vez de estirar la página: en un
   teléfono, cuatro columnas no caben de ninguna manera. */
.tabla-envoltorio { overflow-x: auto; }
.tabla-vram {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-xs);
    min-width: 460px;
}
.tabla-vram th,
.tabla-vram td {
    text-align: left;
    padding: .55em .8em;
    border-bottom: 1px solid var(--borde-suave);
}
.tabla-vram th {
    color: var(--apagado);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .85em;
}
.tabla-vram td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-vram tbody tr:hover { background: rgba(255, 255, 255, .025); }
.marca-nvidia { color: #e0a060; font-weight: 600; }

/* --- comparación ----------------------------------------------------------- */
.comparacion {
    padding: var(--e-8) 0 var(--e-6);
    border-top: 1px solid var(--borde-suave);
    margin-top: var(--e-7);
    text-align: center;
}
.comparacion h2 { margin-bottom: var(--e-5); }
.comparacion-enlace {
    display: block;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.comparacion-enlace:hover {
    border-color: rgba(69, 208, 176, .5);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}
.comparacion-enlace img { display: block; width: 100%; height: auto; }
.comparacion .nota { margin-top: var(--e-3); }

/* --- página de descargas --------------------------------------------------- */
.descarga-cabeza { padding: var(--e-8) 0 var(--e-6); }
.descarga-cabeza h1 { margin-bottom: var(--e-5); }
.descarga-version { line-height: 1.35; }
.descarga-version strong { font-size: var(--t-sm); }
.descarga-licencia { margin-top: var(--e-4); max-width: 70ch; }

/* El aviso de SmartScreen. Ámbar y no rojo a propósito: no es un error, es
   algo que puede pasar y tiene solución en dos clics. */
.aviso-windows {
    margin: var(--e-6) 0 0;
    padding: var(--e-5);
    border: 1px solid rgba(224, 160, 96, .35);
    border-left: 3px solid rgba(224, 160, 96, .8);
    border-radius: var(--radio);
    background: rgba(224, 160, 96, .06);
    max-width: 78ch;
}
.aviso-windows h2 {
    margin: 0 0 var(--e-3);
    font-size: var(--t-sm);
    color: #e0a060;
}
.aviso-windows p { margin: 0; color: var(--texto-2); }

.descarga-bloque {
    padding: var(--e-7) 0 0;
    border-top: 1px solid var(--borde-suave);
    margin-top: var(--e-7);
}
.descarga-bloque h2 { margin-bottom: var(--e-4); }
.lista-tareas, .cambio ul {
    margin: 0;
    padding-left: 1.15em;
    color: var(--texto-2);
}
.lista-tareas li, .cambio li { margin: .35em 0; }
.cambio + .cambio { margin-top: var(--e-5); }
.cambio h3 {
    margin: 0 0 var(--e-2);
    font-size: var(--t-sm);
    color: var(--acento);
}

/* --- el título de la portada, en una sola línea ---------------------------
   «De una fotografía a un modelo 3D texturizado» se partía en tres renglones
   porque el h1 heredaba un ancho máximo pensado para párrafos. Un título que
   se rompe en tres pierde el golpe: se lee como una lista, no como una frase.

   El tamaño se calcula con el ancho de la ventana (vw) en vez de fijarlo, así
   entra entero en un monitor y se achica solo antes de tener que partirse. Por
   debajo de 700px sí se deja partir: forzarlo ahí daría una letra ilegible. */
.portada h1 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: balance;          /* si parte, que parta parejo */
}
@media (min-width: 700px) {
    .portada h1 {
        white-space: nowrap;
        font-size: clamp(1.5rem, 3.55vw, 2.6rem);
    }
}

/* ==========================================================================
   Tanda de venta: contraste, ritmo, precio, pasos y dudas
   ========================================================================== */

/* --- contraste legible -----------------------------------------------------
   `.nota` estaba en --apagado (#5a6373): 2,96:1 sobre el fondo, cuando el
   mínimo para texto chico es 4,5:1. Y ahí viven cosas que importan: la nota
   del precio, el pie de la comparación, el aviso de licencia de la descarga.
   Pasa a --texto-3 (6,1:1) y sube un punto de tamaño. El gris apagado se
   queda solo para lo decorativo. */
.nota {
    color: var(--texto-3);
    font-size: 0.84rem;
}
.tabla-vram th {
    color: var(--texto-3);
    font-size: 0.9em;
}

/* --- ritmo: una de cada dos secciones con fondo propio ---------------------
   Seis bloques separados por la misma línea de 1 px se leen como una lista
   larga. Alternar el fondo da respiro sin meter un color nuevo. */
.banda {
    background: rgba(255, 255, 255, .018);
    border-top: 1px solid var(--borde-suave);
    border-bottom: 1px solid var(--borde-suave);
    margin-top: var(--e-7);
}
.banda > .contenedor { padding-top: var(--e-8); padding-bottom: var(--e-8); }

/* --- el botón secundario ---------------------------------------------------
   Suscribirme y Descargar eran idénticos y competían. El de descarga pasa a
   contorno sin relleno: se ve, se puede pulsar, y no le roba el ojo al que
   paga. */
.boton-2 {
    color: var(--texto-2);
    border-color: var(--borde);
    background: transparent;
}
.boton-2:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, .06);
    border-color: var(--texto-3);
    box-shadow: none;
}

/* --- el bloque del precio --------------------------------------------------
   Es el argumento de venta, así que ocupa y se ve. El número grande, la
   comparación al lado y las dos listas debajo. */
.precio {
    text-align: center;
    padding: var(--e-8) 0;
}
.precio-caja {
    display: inline-block;
    border: 1px solid rgba(69, 208, 176, .35);
    background: rgba(69, 208, 176, .05);
    border-radius: var(--radio);
    padding: var(--e-6) var(--e-7);
    max-width: 100%;
}
.precio-importe {
    font-size: clamp(3rem, 1.5rem + 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--acento);
    letter-spacing: -2px;
}
.precio-periodo {
    font-size: clamp(1rem, .7rem + 1.2vw, 1.6rem);
    font-weight: 600;
    color: var(--texto-2);
    margin-left: .3em;
}
.precio-gancho {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--texto);
    margin: var(--e-4) 0 var(--e-2);
}
.precio-comparacion {
    font-size: var(--t-base);
    color: var(--acento);
    margin: 0 0 var(--e-3);
}
.precio-detalle { margin: 0; max-width: 46ch; }
.precio-caja .precio-detalle { margin-left: auto; margin-right: auto; }

.precio-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--e-6);
    text-align: left;
    margin-top: var(--e-7);
}
.precio-listas h3 {
    font-size: var(--t-sm);
    margin: 0 0 var(--e-3);
    color: var(--texto);
}
.precio-listas ul { margin: 0; padding: 0; list-style: none; }
.precio-listas li {
    color: var(--texto-2);
    margin: .45em 0;
    padding-left: 1.6em;
    position: relative;
}
.precio-listas .si li::before {
    content: "✓";
    position: absolute; left: 0;
    color: var(--acento);
    font-weight: 700;
}
.precio-listas .no li::before {
    content: "×";
    position: absolute; left: 0;
    color: var(--texto-3);
    font-weight: 700;
}

/* --- la garantía -----------------------------------------------------------
   Va pegada al precio: es lo que desarma la duda de «y si no me sirve». */
.garantia {
    margin: var(--e-6) auto 0;
    max-width: 62ch;
    padding: var(--e-5);
    border: 1px solid rgba(69, 208, 176, .3);
    border-radius: var(--radio);
    background: rgba(69, 208, 176, .06);
}
.garantia h3 {
    margin: 0 0 var(--e-2);
    color: var(--acento);
    font-size: var(--t-sm);
}
.garantia p { margin: 0; color: var(--texto-2); }

/* --- los tres pasos --------------------------------------------------------- */
.pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--e-6);
    margin-top: var(--e-6);
    counter-reset: paso;
}
.paso { position: relative; padding-left: 3.2rem; }
.paso::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute; left: 0; top: -.1em;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--acento);
    opacity: .35;
}
.paso h3 { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.paso p { margin: 0; color: var(--texto-2); }

/* --- el antes y el después de la portada ----------------------------------- */
.hero-par {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--e-4);
    margin: var(--e-6) 0 0;
    align-items: start;
}
.hero-lado { margin: 0; }
.hero-lado img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
}
.hero-lado figcaption {
    margin-top: var(--e-2);
    font-size: var(--t-xs);
    color: var(--texto-3);
    text-align: center;
}

/* --- el vídeo --------------------------------------------------------------- */
.video-caja {
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    overflow: hidden;
    background: #000;
}
.video-caja img, .video-caja video { display: block; width: 100%; height: auto; }

/* --- las dudas -------------------------------------------------------------- */
.dudas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--e-5) var(--e-7);
    margin-top: var(--e-6);
}
.duda h3 {
    margin: 0 0 var(--e-2);
    font-size: var(--t-sm);
    color: var(--acento);
}
.duda p { margin: 0; color: var(--texto-2); }

/* --- la cabecera en el teléfono --------------------------------------------
   Ocupaba 127 px en tres filas apiladas y se comía medio primer golpe de
   vista. Las pestañas se deslizan en una sola fila. */
@media (max-width: 640px) {
    .cabecera-caja { gap: var(--e-2); }
    .pestanas {
        order: 3;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pestanas::-webkit-scrollbar { display: none; }
    .pestana { white-space: nowrap; flex: 0 0 auto; }
}

/* --- el visor de foto -> modelo -> mallado --------------------------------
   Tres imágenes apiladas y dos barras que las cortan. El recorte lo hace
   clip-path con una variable, así que moverlo es cambiar un número: no hay
   que redibujar nada y el navegador lo resuelve en la tarjeta gráfica. */
.visor { margin-top: var(--e-6); }

.visor-marco {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: #000;
    user-select: none;
    touch-action: pan-y;
}

.visor-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* La 1 (foto) va entera al fondo: si el JavaScript no corre, se ve ella y
   la página sigue teniendo sentido. Las otras dos se recortan. */
.visor-capa[data-capa="2"] { clip-path: inset(0 0 0 var(--corte1, 33.5%)); }
.visor-capa[data-capa="3"] { clip-path: inset(0 0 0 var(--corte2, 66.5%)); }

.visor-barra {
    position: absolute;
    top: 0; bottom: 0;
    width: 30px;
    margin-left: -15px;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}
.visor-barra[data-barra="1"] { left: var(--corte1, 33.5%); }
.visor-barra[data-barra="2"] { left: var(--corte2, 66.5%); }
.visor-barra span {
    display: block;
    width: 2px;
    height: 100%;
    background: var(--acento);
    box-shadow: 0 0 12px rgba(69, 208, 176, .55);
}
/* el agarre: un círculo en el medio, para que se vea que se puede mover */
.visor-barra::after {
    content: "";
    position: absolute;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--fondo);
    border: 2px solid var(--acento);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.visor-rotulos {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    pointer-events: none;
}
.visor-rotulos span {
    position: absolute;
    bottom: var(--e-3);
    transform: translateX(-50%);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--texto);
    background: rgba(20, 23, 29, .78);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 3px var(--e-3);
    white-space: nowrap;
    transition: opacity .15s ease;
}

.visor-control {
    display: block;
    margin-top: var(--e-4);
}
.visor-etiqueta {
    display: block;
    font-size: var(--t-xs);
    color: var(--texto-3);
    margin-bottom: var(--e-2);
    text-align: center;
}
.visor-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
                rgba(69, 208, 176, .55), rgba(69, 208, 176, .18));
    outline: none;
    cursor: pointer;
}
.visor-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--acento);
    border: 3px solid var(--fondo);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    cursor: grab;
}
.visor-control input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--acento);
    border: 3px solid var(--fondo);
    cursor: grab;
}

/* En un teléfono las barras se agarran con el dedo: el área tiene que ser
   más ancha que la línea. */
@media (max-width: 640px) {
    .visor-barra { width: 44px; margin-left: -22px; }
    .visor-rotulos span { font-size: 10px; padding: 2px var(--e-2); }
}

/* --- el aviso al volver de pagar -------------------------------------------
   Arriba de todo y con el teal de los botones: es lo primero que tiene que
   ver quien acaba de pagar, y tiene que saber que el codigo va por correo. */
.aviso-compra {
    margin-top: var(--e-5);
}
.aviso-compra p {
    margin: 0;
    padding: var(--e-4) var(--e-5);
    border: 1px solid rgba(69, 208, 176, .45);
    background: rgba(69, 208, 176, .08);
    border-radius: 12px;
    text-align: center;
    color: var(--texto-2);
}
.aviso-compra strong { color: var(--acento); }