/* motor-landings · base común. Los colores y fuentes llegan como variables desde sitio.yaml (ver base.html.j2).
   Las variantes cambian superficies con: --fondo --texto --suave --borde --tarjeta --acento (y --ev por nicho). */
:root{
  --fondo:var(--papel); --texto:var(--tinta); --suave:#5B616C; --borde:var(--linea); --tarjeta:#fff; --acento:var(--encendido);
  --ancho:1200px; --gutter:max(20px,env(safe-area-inset-left,0px));
  --r-s:10px; --r-m:16px; --r-l:24px;
  --t-hero:clamp(48px,8.6vw,132px); --t-sec:clamp(36px,5.4vw,76px); --t-gran:clamp(20px,2.1vw,26px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 17px/1.6 var(--f-txt);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3{font-family:var(--f-tit);font-weight:800;letter-spacing:-.035em;line-height:.98;text-wrap:balance;font-variation-settings:"opsz" 96}
h3{letter-spacing:-.02em;line-height:1.1}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px}
.saltar:focus{left:12px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-left:var(--gutter);padding-right:max(20px,env(safe-area-inset-right,0px))}
.envoltura-estrecha{max-width:860px}
.sec{padding-block:clamp(88px,12vw,160px)}
.t-sec{font-size:var(--t-sec);max-width:14ch}
.entradilla{font-size:var(--t-gran);line-height:1.45;color:var(--suave);max-width:46ch;margin-top:22px}
.t-gran{font-size:var(--t-gran);line-height:1.45}
.nota{font-size:14px;color:var(--suave);margin-top:28px}

/* Botones: el principal lleva la celda encendida (el punto de la marca) */
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 16px/1 var(--f-txt);text-decoration:none;padding:17px 24px;border-radius:12px;border:0;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn-pri{background:var(--tinta);color:#fff}
.btn-pri::after{content:"";width:11px;height:11px;border-radius:3px;background:var(--encendido);transition:transform .3s var(--ease)}
.btn-pri:hover::after{transform:scale(1.35) rotate(90deg)}
.btn-sec{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--borde)}
.btn-sec:hover{box-shadow:inset 0 0 0 1.5px var(--texto)}
.btn-sm{padding:12px 16px;font-size:14px;min-height:44px}
.btn-ancho{width:100%}

/* Cabecera */
.cab{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,box-shadow .3s,transform .4s var(--ease)}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:14px max(20px,env(safe-area-inset-right,0px)) 14px var(--gutter);display:flex;align-items:center;gap:28px}
.cab-logo img{height:20px;width:auto}
.cab .logo-oscuro{display:none}
.cab-nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:500}
.cab-nav a{text-decoration:none;opacity:.8}
.cab-nav a:hover{opacity:1}
.cab.solida{background:color-mix(in srgb,var(--fondo) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--borde)}
.cab.oculta{transform:translateY(-110%)}
@media (max-width:900px){.cab-nav{display:none}.cab-in{justify-content:space-between}}

/* Retícula del isotipo */
.ret{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--rc,28px)*8/28);width:calc(var(--rc,28px)*3 + var(--rc,28px)*16/28)}
.ret i{aspect-ratio:1;border-radius:calc(var(--rc,28px)*7/28);background:var(--encendido)}
.ret i.off{background:var(--apagado-claro)}
.ret-mini{--rc:9px}
.ret-mini i{background:var(--apagado-claro)}
.ret-mini i.on{background:var(--encendido)}

/* Revelado al hacer scroll (comun.js añade .visto). Sin JS o con movimiento reducido: todo visible. */
.js [data-revela]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-revela].visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-revela]{opacity:1;transform:none;transition:none}}

/* El problema: texto a un lado, las preguntas del público como mensajes al otro */
.problema-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.col-texto{display:grid;gap:24px;max-width:60ch}
.t-salida{font:800 clamp(22px,2.4vw,32px)/1.15 var(--f-tit);letter-spacing:-.02em}
.preguntas-nube{display:flex;flex-direction:column;gap:12px}
.preguntas-nube li{align-self:flex-start;font:600 clamp(17px,1.7vw,22px)/1.25 var(--f-txt);padding:15px 20px;border-radius:22px 22px 22px 6px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--borde);max-width:90%}
.preguntas-nube li:nth-child(even){align-self:flex-end;border-radius:22px 22px 6px 22px}
.preguntas-nube li:last-child{background:var(--encendido);color:var(--tinta);box-shadow:none}
@media (max-width:860px){.problema-in{grid-template-columns:1fr}}

/* Tarjetas y rejillas */
.rejilla-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.tarjeta{background:var(--tarjeta);border-radius:var(--r-m);padding:28px;box-shadow:0 0 0 1px var(--borde)}
.tarjeta h3{font-size:24px;margin:22px 0 10px}
.tarjeta p{color:var(--suave)}
@media (max-width:860px){.rejilla-3{grid-template-columns:1fr}}

/* Nichos (texto) */
.nicho-eti{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--f-txt);letter-spacing:.08em;text-transform:uppercase}
.nicho-eti i{width:14px;height:14px;border-radius:4px;background:var(--ev)}
.nicho-dolor{font-size:clamp(28px,3.4vw,46px);margin:18px 0 16px;max-width:18ch}
.nicho-cuerpo{font-size:19px;color:var(--suave);max-width:44ch}
.nicho-funs{margin-top:24px;display:grid;gap:10px}
.nicho-funs li{position:relative;padding-left:26px}
.nicho-funs li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--ev)}
.nicho-medida{margin-top:22px;padding:16px 18px;border-radius:var(--r-s);background:color-mix(in srgb,var(--ev) 10%,var(--tarjeta));font-size:15.5px}
.nicho-medida b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ev);margin-bottom:4px;filter:brightness(.85)}

/* Proceso */
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px;counter-reset:p}
.pasos li{position:relative;padding:28px 24px 30px;border-radius:var(--r-m);background:var(--tarjeta);box-shadow:0 0 0 1px var(--borde)}
.paso-n{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--tinta);color:#fff;font:700 16px/1 var(--f-tit)}
.pasos li:last-child .paso-n{background:var(--encendido)}
.pasos h3{font-size:21px;margin:20px 0 10px}
.pasos p{font-size:15.5px;color:var(--suave)}
@media (max-width:980px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pasos{grid-template-columns:1fr}}

/* Fiabilidad */
.fiab{padding:26px 0 0;border-top:1.5px solid var(--texto)}
.fiab h3{font-size:22px;margin-bottom:10px}
.fiab p{color:var(--suave);font-size:16px}
.fiab-rej{gap:40px 32px}
.datos{margin-top:64px;padding:clamp(28px,4vw,48px);border-radius:var(--r-l);background:var(--tinta);color:#fff;display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:start}
.datos h3{font-size:clamp(26px,3vw,38px)}
.datos p{color:#C6CAD3;font-size:17.5px}
@media (max-width:860px){.datos{grid-template-columns:1fr}}

/* Precios */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:32px 28px;border-radius:var(--r-l);background:var(--tarjeta);box-shadow:0 0 0 1px var(--borde)}
.plan h3{font-size:30px}
.plan-res{color:var(--suave);min-height:3.2em}
.plan-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:6px 0 4px}
.plan-precio s{color:var(--senal);font-size:18px}
.plan-precio b{font:800 clamp(44px,4.6vw,60px)/1 var(--f-tit);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-precio span{font-size:14px;color:var(--suave);width:100%}
.plan ul{display:grid;gap:9px;margin:8px 0 18px;flex:1}
.plan li{position:relative;padding-left:24px;font-size:15.5px}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:2.5px;background:var(--encendido)}
.plan-dest{background:var(--tinta);color:#fff;box-shadow:none}
.plan-dest .plan-res,.plan-dest .plan-precio span{color:#B9BEC8}
.plan-dest .btn-pri{background:var(--encendido);color:var(--tinta)}
.plan-dest .btn-pri::after{background:var(--tinta)}
.plan-sello{position:absolute;top:-13px;left:28px;font:600 12px/1 var(--f-txt);letter-spacing:.06em;text-transform:uppercase;background:var(--encendido);color:var(--tinta);padding:7px 10px;border-radius:6px}
.incluido{margin-top:20px;padding:28px;border-radius:var(--r-l);box-shadow:0 0 0 1px var(--borde);display:grid;grid-template-columns:220px 1fr;gap:16px 32px}
.incluido h3{font-size:22px}
.incluido ul{display:flex;flex-wrap:wrap;gap:8px}
.incluido li{font-size:14.5px;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--texto) 6%,transparent)}
.medida-ej{grid-column:2;color:var(--suave);font-size:15px}
@media (max-width:960px){.planes{grid-template-columns:1fr}.incluido{grid-template-columns:1fr}.medida-ej{grid-column:1}.plan-res{min-height:0}}

/* Preguntas */
.faq{margin-top:40px;border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font:700 clamp(18px,1.8vw,22px)/1.3 var(--f-tit);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-radius:4px;background:var(--apagado-claro);transition:background .25s,transform .35s var(--ease)}
.faq details[open] summary::after{background:var(--encendido);transform:rotate(45deg)}
.faq details p{padding:0 0 26px;color:var(--suave);max-width:62ch}

/* Llamada */
.llamada-in{display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(32px,6vw,96px);align-items:start}
.ret-llamada{--rc:46px;margin-top:48px}
@media (max-width:900px){.llamada-in{grid-template-columns:1fr}.ret-llamada{display:none}}
.form{display:grid;gap:16px;padding:clamp(24px,3vw,36px);border-radius:var(--r-l);background:var(--tarjeta);box-shadow:0 0 0 1px var(--borde)}
.campo{display:grid;gap:7px;min-width:0;border:0;padding:0;margin:0}
.campo label,.campo legend{font-size:14px;font-weight:600}
.opc{font-weight:400;color:var(--suave)}
.campo input,.campo select,.campo textarea{width:100%;font:16px/1.4 var(--f-txt);color:var(--tinta);background:#fff;border:1.5px solid var(--linea);border-radius:10px;padding:13px 14px;min-height:48px;transition:border-color .2s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--tinta)}
.campo [aria-invalid="true"]{border-color:#C8352A}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.franjas{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.franjas legend{width:100%;margin-bottom:8px}
.franjas label{font-weight:400;display:flex;align-items:center;gap:8px;min-height:32px}
.franjas input{width:20px;height:20px;min-height:0;accent-color:var(--tinta)}
.trampa{position:absolute!important;left:-9999px!important}
.acepto{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:13.5px;line-height:1.5;color:var(--suave)}
.acepto input{width:20px;height:20px;margin-top:1px;accent-color:var(--tinta)}
.form-estado{font-size:15px;min-height:1.4em}
.form-estado.ok{color:#1F7A5C;font-weight:600}
.form-estado.ko{color:#B42F25;font-weight:600}
.form [disabled]{opacity:.6;cursor:wait}
@media (max-width:480px){.campo-doble{grid-template-columns:1fr}}

/* Móvil de ejemplo (apps ficticias) */
.tel{--fondo-tel:#0E1014;--txt-tel:#F3F4F6;--sub-tel:#9AA0AB;--caja-tel:#1B1E25;width:300px;max-width:100%;aspect-ratio:300/620;padding:10px;border-radius:46px;background:#0A0B0E;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(10,12,20,.45);flex:none}
.tel[data-tema="claro"]{--fondo-tel:#F4F6F5;--txt-tel:#13201C;--sub-tel:#5D6B66;--caja-tel:#fff}
.tel-pant{position:relative;height:100%;border-radius:37px;overflow:hidden;background:var(--fondo-tel);color:var(--txt-tel);display:flex;flex-direction:column;font-family:var(--f-txt)}
.tel-isla{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#0A0B0E}
.tel-barra{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 6px;font-size:12px;font-weight:700}
.tel-senal{display:flex;gap:2px;align-items:flex-end}
.tel-senal i{width:3px;background:currentColor;border-radius:1px}
.tel-senal i:nth-child(1){height:5px}.tel-senal i:nth-child(2){height:7px}.tel-senal i:nth-child(3){height:9px}
.tel-cuerpo{flex:1;display:flex;flex-direction:column;gap:9px;padding:8px 16px 0;min-height:0}
.tel-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tel-cab b{font:800 18px/1.05 var(--f-tit);letter-spacing:-.03em}
.tel-cab small{font-size:10px;color:var(--sub-tel);text-align:right}
.tel-k{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ev)}
.tel-ahora{padding:13px;border-radius:16px;background:var(--caja-tel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--txt-tel) 8%,transparent)}
.tel-ahora b{display:block;font:800 18px/1.08 var(--f-tit);letter-spacing:-.02em;margin:5px 0 4px}
.tel-ahora span:last-child{font-size:11px;color:var(--sub-tel)}
.tel-cuenta{padding:13px;border-radius:16px;background:var(--ev);color:#fff}
.tel-cuenta .tel-k{color:#fff;opacity:.8}
.tel-cuenta b{display:block;font:800 34px/1 var(--f-tit);letter-spacing:-.04em;margin:5px 0 3px;font-variant-numeric:tabular-nums}
.tel-cuenta span:last-child{font-size:11px;font-weight:600}
.tel-filas li{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;font-size:11.5px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--txt-tel) 10%,transparent)}
.tel-filas time{color:var(--sub-tel);font-variant-numeric:tabular-nums;font-weight:600}
.tel-fav{width:8px;height:8px;border-radius:2px;background:var(--ev)}
.tel-aviso{align-self:flex-start;font-size:10.5px;font-weight:600;padding:6px 10px;border-radius:99px;background:color-mix(in srgb,var(--ev) 16%,transparent);color:var(--ev)}
.tel[data-tema="oscuro"] .tel-aviso{color:color-mix(in srgb,var(--ev) 60%,#fff)}
.tel-hecha{font-size:8.5px;text-align:center;color:var(--sub-tel);padding:8px 0 4px}
.tel-tabs{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:9.5px;padding:8px 6px 18px;border-top:1px solid color-mix(in srgb,var(--txt-tel) 8%,transparent);color:var(--sub-tel)}
.tel-tabs span::before{content:"";display:block;width:16px;height:16px;margin:0 auto 4px;border-radius:5px;background:currentColor;opacity:.35}
.tel-tabs .on{color:var(--ev)}.tel-tabs .on::before{opacity:1}

/* Pie */
.pie{background:var(--tinta);color:#E9EBEF;padding-block:72px calc(56px + env(safe-area-inset-bottom,0px))}
.pie-in{display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:40px;align-items:start}
.pie-marca img{height:24px;width:auto}
.pie-lema{font:800 clamp(30px,3.6vw,48px)/1 var(--f-tit);letter-spacing:-.035em;margin-top:24px}
.pie-firma p{color:#B9BEC8}
.pie-firma p:first-child{color:#fff;font-size:18px}
.pie-socios{margin-top:12px;font-weight:600}
.pie-socios a,.pie-socios span{color:#fff}
.pie-contacto{margin-top:12px}
.pie a{text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.pie-legal{display:grid;gap:8px;font-size:14px;color:#8C929E}
@media (max-width:860px){.pie-in{grid-template-columns:1fr}}

/* Legal */
.legal{padding-block:140px 100px}
.legal h1{font-size:clamp(40px,6vw,72px);margin-bottom:28px}
.legal h2{font-size:24px;margin:36px 0 10px}
.legal p,.legal li{color:var(--suave);max-width:70ch;margin-bottom:10px}
.borrador{padding:14px 18px;border-radius:12px;background:#FFF1EC;color:#8A2F12;font-weight:600;margin-bottom:28px}