@font-face{font-family:Anton;font-weight:400;font-display:swap;src:url(/fonts/anton.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(/fonts/barlow-700.woff2) format("woff2")}

:root{--ink:#161616;--card:#222;--paper:#F2EFE8;--muted:#C9C4BA;--dim:#8f8a80;--y:#FFBF19;--red:#E5322D;--green:#1f6b35}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font:500 18px/1.45 Barlow,system-ui,sans-serif;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;margin:0;line-height:1}
[hidden]{display:none!important}
a:focus-visible,summary:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.sub{color:var(--muted);font-weight:700;font-size:clamp(18px,2.6vw,22px);margin:8px 0 32px;text-align:center}
main>section{max-width:1200px;margin:0 auto;padding:56px 16px}

/* Menú */
.bar{position:sticky;top:8px;z-index:10;padding:8px 12px 0}
.bar-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:12px;background:rgba(22,22,22,.92);border:1px solid #333;border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:400 21px/1 Anton,Impact,sans-serif;text-transform:uppercase}
.brand b{color:var(--y);font-weight:400}
.bar-links{display:none;gap:20px;font-weight:700;font-size:16px;margin-left:16px}
.bar-links a{text-decoration:none;padding:10px 0}
.bar-cta{margin-left:auto;background:var(--y);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;border-radius:999px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}

/* Inicio */
.hero{display:grid;gap:40px;align-items:center;padding-top:40px!important}
.pill{display:inline-block;border:1px solid #444;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:700;color:var(--muted);margin:0 0 20px}
h1{font-size:clamp(50px,13vw,92px);line-height:.92}
h1 span{display:block;color:var(--y)}
.lead{font-size:clamp(19px,2.4vw,22px);line-height:1.35;color:var(--muted);margin:22px 0 26px;max-width:460px}
.install{display:flex;align-items:center;gap:20px}
.btn-install{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;min-height:64px;background:var(--y);color:var(--ink);border-radius:999px;padding:8px 10px 8px 28px;font:700 23px/1 Barlow,sans-serif;text-decoration:none;box-shadow:0 6px 0 #b58600}
.btn-install:active{transform:translateY(3px);box-shadow:0 3px 0 #b58600}
.btn-arrow{width:48px;height:48px;border-radius:999px;background:var(--ink);color:var(--y);display:inline-flex;align-items:center;justify-content:center;flex:none}
.qr-box{display:none}
.fine{margin:16px 0 0;font-size:16px;color:var(--muted);text-align:center}
.fine span{white-space:nowrap}

/* Móvil ilustrativo */
.hero-phone{display:flex;justify-content:center}
.phone{width:min(82vw,300px);border-radius:46px;padding:10px;background:#111;box-shadow:inset 0 0 0 2px #3c3c3c,inset 0 0 0 5px #0a0a0a,0 40px 70px rgba(0,0,0,.6);animation:float 6s ease-in-out infinite}
.screen{border-radius:37px;background:#F4F2EE;color:var(--ink);min-height:560px;display:flex;flex-direction:column;padding:0 14px 18px}
.status{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:13px;font-weight:700}
.status i{width:12px;height:12px;border-radius:999px;background:#000}
.batt{width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;background:linear-gradient(90deg,var(--ink) 70%,transparent 70%)}
.screen-title{font:400 28px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin:14px 2px 12px}
.row{display:flex;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:14px;margin-bottom:12px;font-size:16px;line-height:1.25}
.row em{font-style:normal;color:#6b665c}
.row-dark{background:var(--ink);color:var(--paper)}
.row-dark b{color:var(--y)}.row-dark em{color:var(--paper)}
.ico{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ico-y{background:var(--y)}.ico-y svg{stroke:var(--ink);stroke-width:3}
.ico-r{background:var(--red)}.ico-g{background:var(--green)}
.calls{margin-top:auto;background:var(--y);border-radius:20px;padding:16px;text-align:center}
.calls small{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.calls strong{font:400 72px/1 Anton,Impact,sans-serif}

/* Armas */
.arms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;padding-top:0!important}
.arms div{background:var(--card);border-radius:18px;padding:22px}
.arms h3{font-size:23px;color:var(--y);line-height:1.05}
.arms p{margin:6px 0 0;color:var(--muted);font-size:17px}

/* Cinta */
.tape{background:var(--y);color:var(--ink);overflow:hidden;padding:14px 0;transform:rotate(-1.5deg);margin:16px -20px}
.tape-in{display:flex;width:max-content;animation:tape 30s linear infinite;font:400 28px/1 Anton,Impact,sans-serif;text-transform:uppercase;white-space:nowrap}

/* Meme */
.meme{position:relative;border:3px solid var(--y);border-radius:18px;overflow:hidden;width:100%;min-height:340px;background:repeating-linear-gradient(135deg,#262626 0 22px,#1f1f1f 22px 44px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px;text-align:center}
.meme-top,.meme-bot{margin:0;font:400 clamp(32px,7vw,72px)/1 Anton,Impact,sans-serif;text-transform:uppercase;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.ringer{position:relative;animation:ring 1.1s ease-in-out infinite}
.badge{position:absolute;top:-8px;right:-18px;background:var(--red);color:#fff;font-weight:700;font-size:22px;border-radius:999px;padding:3px 11px}

/* Se buscan */
.wanted h2,.vs h2,.pricing h2,.faq h2,.quotes h2,.team h2{font-size:clamp(46px,10vw,104px);text-align:center;line-height:.92}
.wanted h2{color:var(--y)}
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.poster{background:#F4E9CF;color:var(--ink);border:3px solid #000;padding:22px 18px;box-shadow:6px 6px 0 var(--y);transform:rotate(-1deg);text-align:center;display:flex;flex-direction:column;gap:12px}
.poster.tilt{transform:rotate(1deg)}
.p-head{margin:0;font:400 30px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:2px;border-bottom:3px double var(--ink);padding-bottom:10px}
.poster h3{font-size:31px;line-height:1.05;padding:8px 0}
.crime{margin:0;font-weight:700;font-size:17px}
.fix{margin:auto 0 0;font-size:17px;border-top:2px dashed var(--ink);padding-top:10px}

/* No vamos a decir nombres */
.vs h2{font-size:clamp(40px,7vw,76px)}
.vs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.vs-cols>div{border-radius:20px;padding:26px}
.vs-cols h3{font-size:30px;margin-bottom:14px}
.vs-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:19px}
.vs-them{background:#1d1d1d;border:2px dashed #555}
.vs-them h3{color:var(--dim)}
.vs-them li{color:#a9a49a;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.vs-us{background:var(--y);color:var(--ink)}
.vs-us li{font-weight:700}
.vs-us li::before{content:"✔ "}
.vs-end{font:400 clamp(26px,4.5vw,44px)/1.05 Anton,Impact,sans-serif;text-transform:uppercase;text-align:center;margin:40px 0 0}
.vs-end span{color:var(--y)}

/* Adiós */
.bye{text-align:center;border-top:1px solid #2c2c2c;border-bottom:1px solid #2c2c2c;max-width:none!important}
.bye-words{font:400 clamp(46px,10vw,104px)/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px}
.bye s{color:var(--dim);text-decoration-color:var(--y);text-decoration-thickness:.09em}
.bye-line{font-size:clamp(21px,4vw,32px);font-weight:700;margin:22px 0 0}

/* Precios */
.pricing{background-image:repeating-linear-gradient(90deg,rgba(255,191,25,.05) 0 2px,transparent 2px 80px);max-width:none!important;border-top:6px solid var(--y);border-bottom:6px solid var(--y);background-color:#0e0e0e}
.pricing>*{max-width:1200px;margin-left:auto;margin-right:auto}
.player{text-align:center;font-weight:700;font-size:16px;letter-spacing:4px;color:var(--y);text-transform:uppercase;margin:0 0 8px}
.cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.car{background:#1a1a1a;border:4px solid #333;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px}
.car-on{border-color:var(--y);box-shadow:0 0 0 4px rgba(255,191,25,.25)}
.slot{margin:0;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.gift{background:var(--red);color:#fff;letter-spacing:1px;border-radius:6px;padding:4px 8px}
.car svg{width:200px;height:96px;margin:0 auto}
.car h3{font-size:34px}
.price{margin:0;font:400 56px/1 Anton,Impact,sans-serif;color:var(--y)}
.price small{font:700 18px Barlow,sans-serif;color:var(--muted)}
.tag{margin:0;color:var(--muted);font-size:17px;min-height:50px}
.btn-car{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;font-weight:700;font-size:19px;text-decoration:none;border:2px solid #555}
.car-on .btn-car{background:var(--y);color:var(--ink);border-color:var(--y)}
.price-note{text-align:center;color:var(--dim);font-size:16px;margin-top:28px}

/* Preguntas */
.faq{display:grid;gap:32px}
.faq h2{font-size:clamp(40px,7vw,72px);text-align:left}
.faq h2 span{color:var(--y)}
.faq-head p{color:var(--muted);margin:12px 0 0}
.faq-list{display:grid;gap:10px}
details{background:var(--card);border-radius:16px}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;min-height:56px;font-weight:700;font-size:19px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--y);font-size:30px;line-height:1;flex:none}
details[open] summary::after{content:"−"}
details p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:18px}

/* Cierre */
.final{text-align:center}
.final>*{max-width:1160px}
.final{background:var(--y);color:var(--ink);border-radius:28px;margin:0 16px 56px!important;padding:56px 20px!important}
.final h2{font-size:clamp(40px,9vw,96px);line-height:.92}
.btn-final{display:inline-flex;align-items:center;justify-content:center;min-height:64px;margin-top:26px;background:var(--ink);color:var(--y);border-radius:999px;padding:0 40px;font-weight:700;font-size:22px;text-decoration:none;width:100%;max-width:420px}
.final-fine{margin:12px 0 0;font-weight:700;font-size:16px}
.final-login{margin:10px 0 0;font-weight:700}

/* Pie */
.foot{border-top:1px solid #2c2c2c;padding:40px 16px 32px;color:var(--muted);font-size:16px}
.foot-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.foot-brand{flex:1 1 280px;max-width:360px}
.foot-brand .brand{color:var(--paper)}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap}
.foot nav{display:flex;flex-direction:column}
.foot nav b{color:var(--paper);margin-bottom:4px}
.foot nav a{text-decoration:none;padding:8px 0;min-height:40px;display:flex;align-items:center}
.copy{max-width:1200px;margin:24px auto 0;color:var(--dim);font-size:14px}

/* WhatsApp flotante (cuando se active) */
.wa{position:fixed;right:16px;bottom:16px;z-index:20;display:inline-flex;align-items:center;gap:8px;background:var(--y);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:12px 18px 12px 14px;font-weight:700;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.45)}

@keyframes float{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes tape{to{transform:translateX(-50%)}}
@keyframes ring{0%,40%,100%{transform:rotate(0)}5%{transform:rotate(-16deg)}10%{transform:rotate(16deg)}15%{transform:rotate(-12deg)}20%{transform:rotate(12deg)}25%{transform:rotate(-6deg)}30%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Pantallas grandes */
@media (min-width:900px){
  main>section{padding:72px 24px}
  .bar-links{display:flex}
  .hero{grid-template-columns:1.1fr .9fr;padding-top:64px!important}
  .install{max-width:560px}
  .fine{text-align:left}
  .phone{width:320px}
  .faq{grid-template-columns:1fr 2fr;align-items:start}
  .meme{aspect-ratio:16/9}
}
/* Ordenador: QR junto al botón principal */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .btn-install{flex:0 1 auto;padding-right:10px}
  .qr-box{display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:16px;padding:10px 14px 10px 10px;max-width:250px}
  .qr{width:96px;height:96px;flex:none}
  .qr svg{width:100%;height:100%}
  .qr-box p{margin:0;font-weight:700;font-size:15px;line-height:1.25}
}