/* Portada publica. Solo se carga en portada.html: todo lo que pisa del chrome
comun (cabecera, lienzo, pie) pisa SOLO ahi.
La portada es CLARA siempre. El tema lo fuerza el propio portada.html
poniendo `data-tema="claro"` en el antes de la hoja de estilo, asi
que la cabecera y el pie —que son del sistema— salen con los colores claros
de siempre y esta hoja no tiene que repintarlos uno por uno.
La forma sale del molde de las buenas paginas de venta de sistemas
(attio.com, ramp.com): titulo corto y enorme, UNA captura grande del
producto por idea, muchisimo aire, negro sobre blanco y un solo color. Lo
que se ve es el sistema andando: nada dibujado. Las capturas salen de una
estacion de verdad con el nombre, los clientes y la plata cambiados.
Regla de la que sale casi todo lo de abajo: si algo no es el titulo, el
parrafo de abajo o una captura, probablemente sobra. */
:root{
--lp-fondo:#FFFFFF;
--lp-hoja:#FAFAF9; /* la franja que agrupa, un gris apenas */
--lp-texto:#0B0B0F;
--lp-gris:#56565E;
--lp-gris-2:#8A8A92;
--lp-linea:#EAEAEE;
--lp-linea-2:#DCDCE1;
/* el naranja del SV es el UNICO color de marca */
--lp-accion:#C9640C;
--lp-accion-alta:#E0700F;
--lp-accion-piso:rgba(224,112,15,.10);
/* sobre blanco una tarjeta se separa con un filete y una sombra corta; una
sombra larga y oscura se ve sucia */
--lp-s1:0 1px 2px rgba(11,11,15,.05);
--lp-s2:0 1px 3px rgba(11,11,15,.06),0 12px 28px -16px rgba(11,11,15,.24);
--lp-s3:0 2px 8px rgba(11,11,15,.05),0 40px 80px -28px rgba(11,11,15,.28);
--lp-curva:cubic-bezier(.32,.72,0,1);
}
/* ---------- el chrome comun ---------- */
html,body.sin-rail{background:var(--lp-fondo)}
body.sin-rail{color:var(--lp-texto);font-family:"Satoshi",var(--f-ui,sans-serif);
overflow-x:hidden}
body.sin-rail .lienzo{padding:0;max-width:none}
body.sin-rail main{max-width:none;margin:0;padding:0;gap:0;display:block}
::selection{background:rgba(224,112,15,.18)}
.lp-disp{font-family:"Clash Display",var(--f-ui,sans-serif);font-weight:600;
letter-spacing:-.028em;line-height:1.05}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.lp-acento{color:var(--lp-accion)}
/* cabecera publica -> pildora de vidrio flotante */
body.sin-rail .cabecera{position:fixed;top:18px;left:50%;transform:translateX(-50%);
width:auto;background:rgba(255,255,255,.8);border:1px solid var(--lp-linea);
border-radius:999px;backdrop-filter:blur(18px) saturate(170%);
-webkit-backdrop-filter:blur(18px) saturate(170%);
box-shadow:var(--lp-s2);padding:6px 7px 6px 18px}
body.sin-rail .cabecera-caja{max-width:none;margin:0;display:flex;
align-items:center;gap:16px;padding:0}
body.sin-rail .cabecera .marca{color:var(--lp-texto);
font-family:"Clash Display",var(--f-ui,sans-serif);font-weight:600}
body.sin-rail .cabecera-nav a{color:var(--lp-gris);border-radius:999px;
font-weight:500;font-size:.92rem;
transition:color .3s var(--lp-curva),background .3s var(--lp-curva)}
@media (hover:hover){body.sin-rail .cabecera-nav a:hover{color:var(--lp-texto);
background:rgba(11,11,15,.05)}}
body.sin-rail .cabecera-nav a.cta{background:var(--lp-texto);color:#fff;
font-weight:600}
@media (hover:hover){body.sin-rail .cabecera-nav a.cta:hover{
background:#2A2A32;color:#fff}}
/* La chapa de la portada flota: el desvanecido que el sistema le cuelga a la
suya aca no va, no hay nada que pase por abajo. */
body.sin-rail .cabecera::after{content:none}
body.sin-rail footer{max-width:none;border-top:1px solid var(--lp-linea);
padding:44px 28px;color:var(--lp-gris-2);background:var(--lp-hoja)}
body.sin-rail footer b{color:var(--lp-gris)}
/* ---------- botones ----------
Chicos. El boton gigante con flecha adentro es de folleto; en una pagina de
sistemas el que tiene que ser grande es el titulo. */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;
text-decoration:none;border-radius:10px;padding:12px 22px;font-weight:600;
font-size:.98rem;line-height:1;
transition:background .25s var(--lp-curva),box-shadow .25s var(--lp-curva),
transform .25s var(--lp-curva)}
.lp-btn:active{transform:scale(.98)}
.lp-btn-lleno{background:var(--lp-texto);color:#fff;box-shadow:var(--lp-s1)}
@media (hover:hover){.lp-btn-lleno:hover{background:#2A2A32;color:#fff;
box-shadow:var(--lp-s2)}}
.lp-btn-fantasma{border:1px solid var(--lp-linea-2);color:var(--lp-texto);
background:#fff}
@media (hover:hover){.lp-btn-fantasma:hover{background:var(--lp-hoja);
color:var(--lp-texto)}}
/* ---------- la escena del hero ----------
La playa de una estacion de fondo, el escritorio con el monitor adelante, y
al bajar la camara se mete DENTRO de la pantalla hasta que el sistema ocupa
todo. Todo el movimiento cuelga de UNA variable, `--p`, de 0 a 1, que
escribe el script: cada pieza la lee y decide sola que hacer con ella. Asi
no hay dos animaciones que puedan desincronizarse.
`--tope` es cuanto hay que agrandar el monitor para que su pantalla ocupe el
ancho de la ventana. Lo calcula el script contra el ancho REAL del monitor:
escrito a mano, en una pantalla ancha el zoom se queda corto y en una
angosta se pasa de largo. */
.mc-marco{--p:0;--tope:3;position:relative;height:320vh;background:#08090C}
.mc-escena{position:sticky;top:0;height:100dvh;overflow:hidden;
display:flex;flex-direction:column;align-items:center;isolation:isolate}
/* La playa de noche, sin bandera a la vista. Se encuadra abajo del centro
para que el techo iluminado quede a la altura del monitor y no atras del
titulo.
De donde salio, por si algun dia hay que reemplazarla o justificarla: foto
de Hans Eiskonen en Unsplash (OnmOFmwTlP0), licencia Unsplash — uso
comercial permitido y sin obligacion de dar credito.
OJO si se reemplaza: esta direccion no lleva `?v=`, y lo de /static/ se
sirve de lo guardado primero. Una foto distinta con ESTE MISMO nombre no le
llega nunca a una PC que ya entro. Cambiar la foto es cambiarle el nombre
—aca y en el `preload` de la portada— o subir la version del sw.js. */
.mc-foto{position:absolute;inset:0;z-index:0;background-size:cover;
background-position:center 64%;background-repeat:no-repeat;
background-image:url("/static/portada/estacion.webp");
transform:scale(calc(1 + var(--p) * .2));
opacity:calc(1 - var(--p) * 1.35)}
/* el velo: la foto ya es oscura, asi que apenas apoya el blanco del titulo
arriba y apaga el asfalto abajo, donde se apoya el escritorio */
.mc-velo{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(6,8,12,.55) 0%,rgba(6,8,12,.14) 30%,
rgba(6,8,12,0) 50%,rgba(6,8,12,.45) 100%);
opacity:calc(1 - var(--p) * 1.35)}
/* El aire de arriba y el cuerpo del titulo miran tambien el ALTO de la
ventana. En una notebook baja, un titulo pensado para el ancho empuja la
pastilla hasta la mitad de la pantalla y abajo no queda lugar para nada. */
.mc-copy{position:relative;z-index:3;text-align:center;color:#fff;
padding:clamp(86px,12.5vh,108px) 24px 0;max-width:820px;
opacity:calc(1 - var(--p) * 3.2);
transform:translateY(calc(var(--p) * -70px))}
/* El color va escrito en el h1 y en el p, no heredado del padre: style.css
les da color propio a los dos, y una regla que nombra al elemento le gana
siempre a lo que hereda. Sin esto el titulo sale negro sobre la noche. */
.mc-copy .mc-rotulo{margin:0 auto 14px;font-size:.74rem;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;color:var(--lp-accion-alta);
text-shadow:0 1px 18px rgba(0,0,0,.5)}
.mc-copy h1{color:#fff;font-size:clamp(1.95rem,min(4.6vw,6.6vh),3.7rem);
margin:0 0 18px;
text-shadow:0 2px 40px rgba(0,0,0,.45)}
.mc-copy p{color:rgba(255,255,255,.92);font-size:1.08rem;line-height:1.6;
margin:0 auto 22px;max-width:62ch}
/* los dos botones, dentro de una misma pastilla de vidrio */
.mc-acciones{display:flex;align-items:center;gap:8px;justify-content:center;
flex-wrap:nowrap;width:max-content;max-width:100%;margin:0 auto;padding:7px;
border-radius:999px;background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.24);
backdrop-filter:blur(16px) saturate(150%);
-webkit-backdrop-filter:blur(16px) saturate(150%)}
.mc-btn{display:inline-flex;align-items:center;justify-content:center;
border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
border-radius:999px;padding:12px 22px;font:inherit;font-weight:600;
font-size:.96rem;line-height:1;transition:background .25s var(--lp-curva)}
.mc-btn-lleno{background:var(--lp-accion-alta);color:#fff}
@media (hover:hover){.mc-btn-lleno:hover{background:#F0810F}}
.mc-btn-vidrio{background:rgba(255,255,255,.14);color:#fff;
border:1px solid rgba(255,255,255,.2)}
@media (hover:hover){.mc-btn-vidrio:hover{background:rgba(255,255,255,.24)}}
/* ---------- el escritorio ----------
Antes esto era un plano marron acostado contra el piso de la escena, del
ancho de la ventana. No se leia como un mueble: se leia como una mancha, y
el monitor quedaba flotando sobre los surtidores con el pie cortado por el
borde de abajo. Ahora es un escritorio dibujado —la tabla vista un poco
desde arriba, el canto, las dos patas— y el monitor se APOYA en el.
Donde se apoya no esta escrito aca: lo mide el script y lo deja en `--pisa`,
que es a cuantos pixeles del centro de la escena queda la superficie de la
tabla. Asi la mesa y el monitor no se pueden desencontrar aunque cambie el
tamano de la ventana o el alto del titulo. `--ancho-monitor` es el ancho
real del monitor, tambien medido: un escritorio es mas o menos dos monitores
de ancho, y escrito a mano quedaba chico en una ventana y gigante en otra.
Al bajar la camara el escritorio no se queda quieto: baja y se agranda, como
lo que tenes al lado cuando caminas hacia adelante. */
.mc-mesa{position:absolute;left:50%;top:50%;z-index:2;
width:calc(var(--ancho-monitor, 340px) * 1.95);
transform:translateX(-50%)
translateY(calc(var(--pisa, 26vh) + var(--p) * 300px))
scale(calc(1 + var(--p) * .5));
transform-origin:50% 0;
opacity:calc(1 - var(--p) * 2.6)}
/* la tabla: el canto de atras mas angosto que el de adelante es todo lo que
hace falta para que se lea que la estamos mirando un poco desde arriba */
.mc-tabla{display:block;height:46px;
clip-path:polygon(7% 0, 93% 0, 100% 100%, 0 100%);
background:linear-gradient(180deg,#2E2823 0%,#1E1A16 52%,#151210 100%);
box-shadow:inset 0 1px 0 rgba(198,214,238,.26)}
/* La pantalla prendida ilumina la madera. Es el detalle que hace que el
monitor este APOYADO ahi y no pegado encima con una tijera. */
.mc-luz{position:absolute;left:50%;top:-6px;width:80%;height:52px;
transform:translateX(-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse at center,
rgba(186,206,238,.3) 0%,rgba(186,206,238,.1) 42%,rgba(186,206,238,0) 70%)}
/* el grosor de la tabla, visto de frente */
.mc-canto{display:block;height:10px;
background:linear-gradient(180deg,#141210,#0A0908);
box-shadow:0 14px 30px -8px rgba(0,0,0,.85)}
.mc-patamesa{position:absolute;top:100%;width:8px;
height:clamp(74px,14vh,132px);
background:linear-gradient(180deg,#2A251F 0%,#1C1815 62%,rgba(9,9,8,0) 100%)}
.mc-patamesa.izq{left:6%}
.mc-patamesa.der{right:6%}
/* la sombra del pie sobre la madera: sin esto el monitor esta DELANTE del
escritorio, no apoyado encima */
.mc-apoyo{position:absolute;left:50%;top:-7px;width:52%;height:18px;
transform:translateX(-50%);border-radius:50%;
background:radial-gradient(ellipse at center,
rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 70%)}
/* un teclado en silueta, adelante del pie: es lo que termina de contar que eso
es un puesto de trabajo y no una repisa */
.mc-teclado{position:absolute;left:50%;top:30px;width:35%;height:11px;
transform:translateX(-50%);border-radius:2px;
clip-path:polygon(3% 0, 97% 0, 100% 100%, 0 100%);
background:
repeating-linear-gradient(90deg,
rgba(0,0,0,.3) 0 1px, rgba(0,0,0,0) 1px 8px),
linear-gradient(180deg,#3E3E4A 0%,#2A2A33 46%,#141418 100%);
box-shadow:inset 0 1px 0 rgba(198,214,238,.26),0 4px 7px -2px rgba(0,0,0,.8)}
/* el monitor. Todo lo que tiene medida propia —el marco, el redondeo, el
fondo— se va a cero con `--p`: al final del viaje no tiene que quedar ni un
borde, solo el sistema ocupando la pantalla. */
.mc-monitor{position:absolute;left:50%;top:50%;z-index:4;
/* El ancho miraba SOLO el ancho de la ventana, pero a que altura se apoya
lo manda el alto: en una ventana baja el monitor seguia grande, subia, y
se le montaba a la pastilla del formulario. Ahora manda el mas chico de
los dos.
Y ademas mas chico que antes: ahora abajo va un escritorio, y con el
monitor ocupando media ventana no queda lugar ni para la tabla ni para el
aire de abajo. */
width:clamp(250px,min(26vw,41vh),390px);
padding:calc(9px * (1 - var(--p)));
border-radius:calc(16px * (1 - var(--p)));
background-color:rgb(20 20 24 / calc(1 - var(--p)));
box-shadow:0 46px 70px -26px rgb(0 0 0 / calc(.8 * (1 - var(--p))));
transform:translate(-50%,-50%)
translateY(calc(var(--baja,21vh) * (1 - var(--p))))
scale(calc(1 + var(--p) * (var(--tope) - 1)))}
.mc-monitor img{display:block;width:100%;height:auto;
border-radius:calc(8px * (1 - var(--p)))}
/* El cuello y el pie: juntos miden 60px, y ese 60 lo vuelve a usar el script
para saber donde poner la tabla. Si se cambia una medida aca, se cambia
alla. Se apagan rapido —al sexto del viaje ya no estan— porque crecen con el
monitor y un pie de medio metro tapa media pantalla. */
.mc-pata{position:absolute;left:50%;top:100%;width:46px;height:50px;
transform:translateX(-50%);
background:linear-gradient(180deg,#3C3C48,#1A1A21);
box-shadow:inset -1px 0 0 rgba(255,255,255,.1);
opacity:calc(1 - var(--p) * 6)}
.mc-base{position:absolute;left:50%;top:calc(100% + 50px);width:118px;height:10px;
transform:translateX(-50%);
border-radius:3px 3px 50% 50% / 3px 3px 100% 100%;
background:linear-gradient(180deg,#3A3A46,#111115);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
opacity:calc(1 - var(--p) * 6)}
.mc-legal{position:absolute;left:0;right:0;bottom:14px;z-index:5;margin:0;
padding:0 22px;text-align:center;font-size:.72rem;line-height:1.5;
color:rgba(255,255,255,.6);opacity:calc(1 - var(--p) * 3)}
/* ---------- la captura ----------
La pieza de la pagina. Va ancha, con un filete finito y una sombra larga y
clara; el redondeo es el del sistema para que se lea como la misma cosa. */
.lp-pantalla{max-width:1180px;margin:0 auto;padding:0 28px}
.lp-pantalla img{display:block;width:100%;height:auto;border-radius:16px;
border:1px solid var(--lp-linea);box-shadow:var(--lp-s3);background:#fff}
/* El telefono no va a todo lo ancho: al lado de las capturas de escritorio es
lo que hace ver que es la misma pantalla en el bolsillo. */
.lp-pantalla img.lp-tel{max-width:330px;margin:0 auto;border-radius:30px}
/* ---------- el bloque del telefono: texto y captura, uno al lado del otro ---
El unico bloque a dos columnas de la pagina. Va asi porque una captura de
celular es angosta y alta: a lo ancho deja media pantalla vacia al costado. */
.lp-dos{display:grid;grid-template-columns:1fr 340px;gap:70px;
align-items:center;text-align:left}
.lp-dos .lp-rotulo{margin-bottom:14px}
.lp-dos h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.lp-dice{margin:20px 0 0;color:var(--lp-gris);font-size:1.08rem;
line-height:1.65;max-width:46ch}
.lp-tel{display:block;width:100%;height:auto;border-radius:30px;
border:1px solid var(--lp-linea);box-shadow:var(--lp-s3);background:#fff}
/* ---------- cinta ---------- */
.lp-cinta{margin-top:96px;padding:18px 0;border-top:1px solid var(--lp-linea);
border-bottom:1px solid var(--lp-linea);overflow:hidden;position:relative;
background:var(--lp-hoja)}
.lp-cinta:before,.lp-cinta:after{content:"";position:absolute;top:0;bottom:0;
width:120px;z-index:2;pointer-events:none}
.lp-cinta:before{left:0;background:linear-gradient(90deg,var(--lp-hoja),transparent)}
.lp-cinta:after{right:0;background:linear-gradient(-90deg,var(--lp-hoja),transparent)}
.lp-cinta-riel{display:flex;align-items:center;gap:26px;width:max-content;
animation:lp-correr 44s linear infinite}
@keyframes lp-correr{to{transform:translateX(-50%)}}
.lp-cinta-riel span{color:var(--lp-gris-2);font-size:.78rem;letter-spacing:.14em;
text-transform:uppercase;font-weight:600;white-space:nowrap}
.lp-cinta-riel i{width:4px;height:4px;border-radius:50%;flex:none;
background:var(--lp-accion)}
/* ---------- secciones ---------- */
.lp-seccion{padding:112px 0}
.lp-junta{padding-top:0}
.lp-cab{max-width:760px;text-align:center;margin-bottom:56px}
.lp-cab.lp-wrap{margin-left:auto;margin-right:auto}
.lp-rotulo{margin:0 0 16px;font-size:.74rem;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;color:var(--lp-accion)}
.lp-seccion h2,.lp-franja h2,.lp-cierre h2{
font-size:clamp(2rem,4.4vw,3.3rem);margin:0}
.lp-cab p{font-size:1.1rem;color:var(--lp-gris);margin:18px auto 0;
line-height:1.65;max-width:56ch}
/* ---------- la franja de "nunca inventa" ---------- */
.lp-franja{background:var(--lp-hoja);border-top:1px solid var(--lp-linea);
border-bottom:1px solid var(--lp-linea);padding:96px 0;text-align:center}
.lp-franja h2{max-width:20ch;margin:0 auto}
.lp-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
margin-top:56px;text-align:left}
.lp-tres p{margin:0;color:var(--lp-gris);font-size:.97rem;line-height:1.7;
padding-top:20px;border-top:1px solid var(--lp-linea-2)}
.lp-tres b{color:var(--lp-texto);font-weight:600;display:block;margin-bottom:4px}
/* ---------- la lista de lo que hace ----------
Texto en dos columnas. Meter cada renglon en una tarjeta con su borde y su
sombra convierte ocho frases en una pared. */
.lp-lista{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.lp-lista li{padding:24px 0;border-top:1px solid var(--lp-linea);
color:var(--lp-gris);font-size:1rem;line-height:1.65}
.lp-lista b{color:var(--lp-texto);font-weight:600}
/* ---------- el cierre ---------- */
.lp-cierre{padding:0 0 120px}
.lp-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;
counter-reset:paso;margin-bottom:92px}
.lp-paso{counter-increment:paso;padding-top:22px;
border-top:2px solid var(--lp-texto)}
.lp-paso::before{content:counter(paso,decimal-leading-zero);display:block;
font-family:var(--f-num);font-size:.76rem;letter-spacing:.14em;
color:var(--lp-gris-2);margin-bottom:12px;font-weight:700}
.lp-paso b{display:block;font-family:"Clash Display",var(--f-ui,sans-serif);
font-weight:600;font-size:1.14rem;margin-bottom:7px;letter-spacing:-.015em}
.lp-paso p{margin:0;color:var(--lp-gris);font-size:.95rem;line-height:1.6}
/* ---------- el que todavia no tiene el sistema ---------- */
.lp-afuera h2{max-width:none}
.lp-afuera-dice{color:var(--lp-gris);font-size:1.1rem;line-height:1.65;
max-width:56ch;margin:22px auto 0}
/* Tres columnas de texto con un filete arriba, como "nunca inventa": son
los productos de SV Sistemas contados, no un catálogo en tarjetas. */
.lp-sv{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:0 44px;
margin-top:60px;text-align:left}
.lp-sv > div{padding-top:22px;border-top:2px solid var(--lp-texto)}
.lp-sv h3{font-family:"Clash Display",var(--f-ui,sans-serif);font-weight:600;
font-size:1.14rem;letter-spacing:-.015em;margin:0 0 10px;
color:var(--lp-texto)}
.lp-sv p + h3{margin-top:30px}
.lp-sv p{margin:0 0 14px;color:var(--lp-gris);font-size:.95rem;
line-height:1.65}
.lp-sv b{color:var(--lp-texto);font-weight:600}
.lp-sv-datos{font-style:normal;display:flex;flex-wrap:wrap;
justify-content:center;gap:6px 22px;margin-top:48px;padding-top:26px;
border-top:1px solid var(--lp-linea-2);font-size:.95rem;
color:var(--lp-gris)}
.lp-sv-datos b{color:var(--lp-texto);font-weight:600}
.lp-sv-datos a{color:var(--lp-accion);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .2s}
@media (hover:hover){.lp-sv-datos a:hover{border-bottom-color:var(--lp-accion)}}
/* ---------- las preguntas ----------
Renglones con un filete, como la lista de arriba. El signo gira y se
vuelve cruz: no hace falta otra flecha. */
.lp-faq-lista{max-width:820px}
.lp-faq-lista details{border-top:1px solid var(--lp-linea)}
.lp-faq-lista details:last-child{border-bottom:1px solid var(--lp-linea)}
.lp-faq-lista summary{list-style:none;cursor:pointer;display:flex;
align-items:center;justify-content:space-between;gap:24px;
padding:22px 0;font-weight:600;font-size:1.06rem;color:var(--lp-texto)}
.lp-faq-lista summary::-webkit-details-marker{display:none}
.lp-faq-lista summary::after{content:"+";flex:none;font-size:1.5rem;
font-weight:400;line-height:1;color:var(--lp-gris-2);
transition:transform .3s var(--lp-curva),color .3s var(--lp-curva)}
.lp-faq-lista details[open] summary::after{transform:rotate(45deg);
color:var(--lp-accion)}
.lp-faq-lista summary:focus-visible{outline:2px solid var(--lp-accion);
outline-offset:4px;border-radius:4px}
.lp-faq-lista details p{margin:0 0 24px;color:var(--lp-gris);
font-size:1rem;line-height:1.7;max-width:64ch}
.lp-final{text-align:center}
.lp-final p{color:var(--lp-gris);font-size:1.1rem;margin:18px auto 30px;
max-width:46ch;line-height:1.6}
.lp-precio{color:var(--lp-texto);font-weight:600}
.lp-demo{font-size:.92rem;color:var(--lp-gris-2);margin:26px auto 0}
.lp-demo a{color:var(--lp-accion);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .2s}
@media (hover:hover){.lp-demo a:hover{border-bottom-color:var(--lp-accion)}}
/* ---------- lo que aparece al llegar a la vista ----------
Usa `translate` y no `transform`, que es independiente y no se pelea con
ninguna otra regla. En un navegador que no la conoce la declaracion se cae
sola: aparece sin deslizarse, que es el grado de degradacion aceptable. */
.lp-rev{opacity:0;translate:0 24px;
transition:opacity .7s var(--lp-curva),translate .7s var(--lp-curva)}
.lp-rev.lp-visto{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){
.lp-rev{opacity:1;translate:none;transition:none}
.lp-cinta-riel{animation:none}
/* sin viaje de camara: la escena queda como al principio y el alto de mas
desaparece, o quedarian tres pantallas de scroll sin que pase nada */
.mc-marco{height:auto}
.mc-escena{position:relative;height:auto;min-height:100dvh;padding-bottom:40px}
.mc-monitor{position:relative;left:auto;top:auto;transform:none;
width:min(680px,86vw);margin:36px auto 0}
.mc-mesa,.mc-pata,.mc-base{display:none}
.mc-legal{position:relative;bottom:auto;margin-top:26px}
}
/* ---------- pantallas chicas ---------- */
@media(max-width:980px){
.lp-dos{grid-template-columns:1fr;gap:40px;text-align:center}
.lp-dice{margin-left:auto;margin-right:auto}
.lp-tel{max-width:300px;margin:0 auto}
.lp-tres{grid-template-columns:1fr;gap:0;margin-top:40px}
.lp-tres p{padding:20px 0;border-top:1px solid var(--lp-linea-2)}
.lp-lista{grid-template-columns:1fr;gap:0}
.lp-sv{grid-template-columns:1fr;margin-top:44px}
.lp-sv > div + div{margin-top:34px}
.lp-sv-datos{flex-direction:column;align-items:center}
.lp-pasos{grid-template-columns:1fr;gap:0;margin-bottom:80px}
.lp-paso{margin-bottom:26px}
}
@media(max-width:860px){
/* Sin viaje de camara: la escena vuelve a ser un hero normal con la captura
del telefono. Estirar tres pantallas de scroll para un efecto que no entra
solo alarga la pagina. */
.mc-marco{height:auto}
.mc-escena{position:relative;top:auto;height:auto;min-height:100dvh;
padding-bottom:46px}
.mc-mesa,.mc-pata,.mc-base{display:none}
/* En una pantalla angosta la foto es mucho mas alta que ancha, y encuadrarla
`cover` deja una tira vertical del medio: el techo iluminado sale gigante y
se come el titulo y la casilla. Asi que en el telefono no se estira: se
dibuja del ancho que tiene y se la apoya a la altura del aparato, con el
cielo negro arriba para que el titulo se lea. */
.mc-foto{background-size:190% auto;background-position:center 44.5%}
.mc-velo{background:linear-gradient(180deg,rgba(6,8,12,.92) 0%,
rgba(6,8,12,.88) 26%,rgba(6,8,12,.26) 39%,rgba(6,8,12,.26) 72%,
rgba(6,8,12,.9) 90%,#08090C 100%)}
.mc-copy{padding-top:106px}
.mc-copy h1{font-size:clamp(2.2rem,8.4vw,3rem)}
.mc-acciones{width:100%;flex-direction:column;border-radius:20px;
padding:10px;gap:10px}
.mc-btn{width:100%}
.mc-monitor{position:relative;left:auto;top:auto;transform:none;
width:min(300px,74vw);margin:56px auto 0;padding:8px;border-radius:30px;
background-color:#14141A;box-shadow:0 30px 50px -22px rgba(0,0,0,.8)}
.mc-monitor img{border-radius:23px}
.mc-legal{position:relative;bottom:auto;margin-top:30px}
/* la pildora deja de flotar centrada y se pega a los dos bordes */
body.sin-rail .cabecera{left:14px;right:14px;transform:none;
box-sizing:border-box;max-width:calc(100vw - 28px);padding:6px 6px 6px 14px}
body.sin-rail .cabecera-caja{justify-content:space-between;gap:10px}
.lp-hero{padding-top:108px}
.lp-seccion{padding:86px 0}
.lp-franja{padding:80px 0}
.lp-cierre{padding-bottom:86px}
.lp-wrap,.lp-pantalla{padding:0 18px}
.lp-cinta{margin-top:70px}
.lp-cab{margin-bottom:38px}
.lp-pantalla img{border-radius:12px}
.lp-pantalla img.lp-tel{max-width:290px;border-radius:26px}
}