/* Automotive 13 — landing Ver 26 (se carga después de site.css; solo la usa landing.html) */
:root{
  --bg:#0B131C; --bg2:#0F1923; --card:#152131; --card2:#1A2535; --line:#22324a; --line2:#2b3c55;
  --ink:#F2F5F9; --ink2:#d5dde7; --mut:#9AA8B8; --mut2:#6B7A8F;
  --blue:#3B5BDB; --blue2:#5B7BF0; --link:#6BB8FF; --orange:#E8842A; --green:#2ECC71; --amber:#F5A623; --red:#E74C3C; --purple:#B79CFF; --teal:#4FD1C5;
  --glow:rgba(59,91,219,.28); --shadow:0 30px 80px rgba(0,0,0,.45);
  --nav-bg:rgba(11,19,28,.82);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F6F8FB; --bg2:#EEF2F7; --card:#FFFFFF; --card2:#F1F4F9; --line:#E2E8F0; --line2:#D4DCE7;
  --ink:#0F172A; --ink2:#334155; --mut:#526077; --mut2:#7A879A;
  --blue:#3B5BDB; --blue2:#2F4BC4; --link:#2F4BC4; --orange:#C2620C; --green:#15803D; --amber:#B45F06; --red:#D62E22; --purple:#6A4CD6; --teal:#0F766E;
  --glow:rgba(59,91,219,.16); --shadow:0 24px 60px rgba(16,24,40,.14);
  --nav-bg:rgba(246,248,251,.85);
  color-scheme:light;
}
body{background:var(--bg);color:var(--ink);transition:background .2s,color .2s}
.display{letter-spacing:-.015em}

/* nav */
.nav{background:var(--nav-bg);border-bottom:1px solid var(--line)}
.nav .logo .lg-light{display:none}
:root[data-theme="light"] .nav .logo .lg-dark{display:none}
:root[data-theme="light"] .nav .logo .lg-light{display:block}
.theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--mut);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.theme-btn:hover{color:var(--ink);background:var(--card)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
.lang{border-color:var(--line)}
.lang button.on{background:var(--card2);color:var(--ink)}
.btn-ghost{border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{background:var(--card)}
.btn-primary{box-shadow:0 8px 24px rgba(59,91,219,.35)}

/* hero */
.hero{padding:80px 0 30px}
.hero:before{background:radial-gradient(closest-side,var(--glow),transparent)}
.hero .hgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02}
.hero h1 em{color:var(--blue2);display:block}
:root[data-theme="light"] .hero h1 em{color:var(--blue)}
.hero p.lead{color:var(--mut)}
.eyebrow{color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,transparent);border-color:color-mix(in srgb,var(--orange) 32%,transparent)}

/* tarjetas flotando (hechas con código, como las del Work Board) */
.float{position:relative;height:500px;perspective:1800px}
.float .stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(22deg) rotateY(-16deg) rotateZ(4deg)}
.rc{position:absolute;width:360px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px 12px;box-shadow:var(--shadow);font-size:13px;color:var(--ink)}
.rc:nth-child(1){left:6%;top:0;z-index:3;animation:fl 7s ease-in-out infinite}
.rc:nth-child(2){left:20%;top:37%;z-index:2;opacity:.6;animation:fl 8s ease-in-out -2s infinite}
.rc:nth-child(3){left:34%;top:74%;z-index:1;opacity:.25;animation:fl 9s ease-in-out -4s infinite}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.rc .r{display:flex;align-items:center;gap:8px}
.rc .ro{color:var(--link);font-weight:700;font-size:12px}
.rc .st{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.rc .st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.rc .nm{font-size:16px;font-weight:700;margin-top:8px}
.rc .vh{color:var(--mut);margin-top:2px;white-space:nowrap}
.rc .mi{color:var(--mut2);margin-left:6px}
.rc .pl{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.06em;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.rc .vin{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--mut2);margin-top:8px}
.rc .sp{margin-left:auto;font-size:11.5px;color:var(--mut)}
.rc .cn{margin-top:8px;color:var(--ink2)}
.rc .mo{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);align-items:baseline}
.rc .tt{font-family:'Exo2',sans-serif;font-weight:800;font-style:italic;font-size:19px}
.rc .it{color:var(--mut2);font-size:12px}
.rc .pd{margin-left:auto;color:var(--amber);font-weight:700;font-size:12px}
.st-gray{color:var(--mut);background:color-mix(in srgb,var(--mut) 16%,transparent)}
.st-amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 18%,transparent)}
.st-blue{color:var(--link);background:color-mix(in srgb,var(--blue2) 20%,transparent)}
.st-green{color:var(--green);background:color-mix(in srgb,var(--green) 18%,transparent)}

/* captura grande con degradado abajo */
.showcase{position:relative;margin-top:40px}
.showcase:before{content:"";position:absolute;left:10%;right:10%;top:8%;height:70%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(30px);z-index:0}
.frame{position:relative;z-index:1;border-radius:18px;border:1px solid var(--line2);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.frame .bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card2)}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.frame img{width:100%}
.fade{position:relative}
.fade:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.band .fade:after{background:linear-gradient(to bottom,transparent,var(--bg2))}

/* funciones con color */
.feat{background:var(--card);border-color:var(--line);transition:transform .2s,border-color .2s,box-shadow .2s}
.feat:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
.feat p{color:var(--mut)}
.feat .ic{--c:var(--blue2);background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.c-blue{--c:var(--blue2)!important}.c-green{--c:var(--green)!important}.c-purple{--c:var(--purple)!important}
.c-amber{--c:var(--amber)!important}.c-teal{--c:var(--teal)!important}.c-red{--c:var(--red)!important}

/* secciones */
.band{background:var(--bg2);border-color:var(--line)}
.sec-head p,.split p{color:var(--mut)}
.ticks li{color:var(--ink2)}
.split .frame{box-shadow:var(--shadow)}

/* celular */
.mobile{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.phone-wrap{position:relative;display:flex;justify-content:center}
.phone-wrap:before{content:"";position:absolute;width:70%;height:70%;top:15%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(20px)}
.phone{position:relative;width:290px;border-radius:46px;padding:10px;background:#05080c;border:1px solid var(--line2);box-shadow:var(--shadow)}
.phone img{border-radius:36px;width:100%}
.phone:after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:#05080c}
.chip-float{position:absolute;z-index:2;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.chip-float i{width:8px;height:8px;border-radius:50%}
.chip-float.a{left:4%;top:22%;animation:fl 7s ease-in-out infinite}
.chip-float.b{right:2%;top:58%;animation:fl 8s ease-in-out -3s infinite}

/* pasos e historia */
.step{background:var(--card);border-color:var(--line)}
.step p{color:var(--mut)}
.story{background:linear-gradient(135deg,var(--card),var(--card2));border-color:var(--line)}
.story .q{font-family:'Exo2',sans-serif;font-style:italic;font-weight:800;font-size:90px;line-height:.7;color:var(--blue2);opacity:.6}
.story p{color:var(--mut)}
.story .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.story .who img{width:44px;height:44px}
.story .who b{display:block;color:var(--ink)}
.story .who span{color:var(--mut2);font-size:13px}

/* precios */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0 auto}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column}
.plan.best{border-color:color-mix(in srgb,var(--blue2) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue2) 35%,transparent),var(--shadow)}
.plan .badge{position:absolute;top:-12px;right:20px;background:linear-gradient(90deg,var(--blue),#7B5BF0);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.plan h3{font-size:22px}
.plan .for{color:var(--mut);margin:2px 0 16px}
.plan .pr{font-family:'Exo2',sans-serif;font-style:italic;font-weight:800;font-size:34px;line-height:1.1}
.plan .pr small{font-family:inherit;font-size:14px;color:var(--mut);font-style:normal;font-weight:600;margin-left:4px}
.plan .ticks{margin:18px 0 24px}
.plan .btn{margin-top:auto}
.plan.best .btn{background:linear-gradient(90deg,var(--blue),#6A4CD6);color:#fff;border:0}
.trial-note{text-align:center;color:var(--mut);margin-top:22px;font-size:14px}
.trial-note b{color:var(--ink)}

/* preguntas, contacto, cierre */
.faq details,.ccard{background:var(--card);border-color:var(--line)}
.faq details p,.ccard p{color:var(--mut)}
.final{position:relative;overflow:hidden}
.final:before{content:"";position:absolute;left:50%;top:50%;width:700px;height:400px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.final .wrap{position:relative}

/* pie en columnas */
footer.ft{border-top:1px solid var(--line);padding:48px 0 28px;color:var(--mut)}
footer.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
footer.ft h4{color:var(--ink);font-size:14px;margin-bottom:12px}
footer.ft a{display:block;margin-bottom:8px;font-size:14px}
footer.ft a:hover{color:var(--ink)}
footer.ft .brand p{font-size:14px;margin-top:12px;max-width:280px}
footer.ft .brand img{height:34px;width:auto}
footer.ft .brand .lg-light{display:none}
:root[data-theme="light"] footer.ft .brand .lg-dark{display:none}
:root[data-theme="light"] footer.ft .brand .lg-light{display:block}
footer.ft .copy{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--mut2)}

/* aparecer al bajar */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rc,.chip-float{animation:none!important}}

@media (max-width:900px){
  .hero .hgrid{grid-template-columns:1fr}
  .float{height:300px;margin-top:10px}
  .rc{width:300px}
  .rc:nth-child(1){left:2%}.rc:nth-child(2){left:14%}.rc:nth-child(3){left:26%}
  .mobile{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  footer.ft .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .float{height:250px}
  .rc{width:260px;font-size:12px}
  .rc:nth-child(3){display:none}
  .rc .mi,.rc .pd,.rc .sp{display:none}
  .rc .vh{white-space:nowrap}
  .story .q{display:none}
  .story .who{justify-content:center;text-align:left}
  .theme-btn{width:32px;height:32px}
  .chip-float{font-size:12px;padding:8px 11px}
  .chip-float.a{left:0}.chip-float.b{right:0}
}