
  :root{
    --bg: #000000;
    --surface: #121212;
    --surface-2: #1B1B1D;
    --line: #2A2A2C;
    --text: #F5F5F5;
    --text-dim: #8E8E93;
    --green: #34D399;
    --on-accent: #000000;
    --glow-rgb: 255,255,255;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg); color:var(--text);
    font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }
  .display{font-family:'Space Grotesk',sans-serif;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  img{display:block;max-width:100%;}

  .grid-bg{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:48px 48px; opacity:0.3; position:absolute; inset:0;
    mask-image:radial-gradient(ellipse at top, black, transparent 70%);
    pointer-events:none;
  }

  /* ===== HEADER ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(0,0,0,0.85); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-wrap{max-width:1200px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .logo{display:flex;align-items:center;gap:10px;min-width:0;}
  .logo-mark{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid var(--line);flex-shrink:0;}
  .logo-mark img{width:100%;height:100%;object-fit:cover;display:block;}
  .logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-0.01em;white-space:nowrap;}
  nav{display:flex;gap:26px;align-items:center;}
  nav a{font-size:13.5px;color:var(--text-dim);transition:color .15s;}
  nav a:hover{color:var(--text);}
  .btn-wsp-header{
    background:var(--text); color:var(--on-accent); padding:9px 16px;border-radius:8px;
    font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;
  }

  /* ===== HERO ===== */
  .hero{position:relative;overflow:hidden;padding:56px 18px 64px;border-bottom:1px solid var(--line);}
  .hero-glow{
    position:absolute; top:-220px; left:50%; transform:translateX(-50%);
    width:760px; height:760px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(var(--glow-rgb),0.16) 0%, rgba(var(--glow-rgb),0.05) 45%, transparent 72%);
  }
  .hero-glow-2{
    position:absolute; bottom:-160px; left:-120px; width:360px; height:360px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(var(--glow-rgb),0.10) 0%, transparent 70%);
  }
  .hero-ring{
    position:absolute; top:50%; right:-140px; transform:translateY(-50%);
    width:380px; height:380px; border-radius:50%;
    border:1px solid rgba(var(--glow-rgb),0.10);
    pointer-events:none;
  }
  .hero-ring::before{
    content:''; position:absolute; inset:34px; border-radius:50%; border:1px solid rgba(var(--glow-rgb),0.08);
  }
  .hero-ring::after{
    content:''; position:absolute; inset:68px; border-radius:50%; border:1px solid rgba(var(--glow-rgb),0.06);
  }
  .hero-shard{
    position:absolute; top:14%; right:6%; width:180px; height:230px; border-radius:28px;
    background:linear-gradient(155deg, rgba(var(--glow-rgb),0.09), rgba(var(--glow-rgb),0.02));
    border:1px solid rgba(var(--glow-rgb),0.14);
    transform:rotate(14deg) perspective(600px) rotateY(-18deg);
    box-shadow:0 40px 80px -30px rgba(var(--glow-rgb),0.25), inset 0 1px 0 rgba(var(--glow-rgb),0.12);
    pointer-events:none;
  }
  .hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);
    letter-spacing:0.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
    padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:20px;background:rgba(var(--glow-rgb),0.04);
  }
  .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(52,211,153,0.18);animation:pulse-dot 2s ease-in-out infinite;}
  @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.4;}}
  .hero h1{
    font-size:clamp(34px,9vw,64px); line-height:1.0; font-weight:700; letter-spacing:-0.04em; margin-bottom:18px;
    text-shadow:0 0 80px rgba(var(--glow-rgb),0.18);
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg, var(--text) 30%, var(--text-dim) 50%, var(--text) 70%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:shimmer 5s linear infinite;
  }
  @keyframes shimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
  .hero p{font-size:16px;color:var(--text-dim);max-width:440px;line-height:1.6;margin-bottom:28px;}
  .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;}
  .btn-primary{
    background:var(--text);color:var(--on-accent);padding:15px 24px;border-radius:9px;font-weight:600;font-size:14px;
    display:inline-block; box-shadow:0 8px 30px -8px rgba(var(--glow-rgb),0.35);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-ghost{background:transparent;color:var(--text);padding:15px 24px;border-radius:9px;border:1px solid var(--line);font-weight:600;font-size:14px;display:inline-block;transition:background .18s ease, border-color .18s ease, transform .18s ease;}
  @media (hover:hover){
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px -6px rgba(var(--glow-rgb),0.5);}
    .btn-ghost:hover{background:var(--surface-2);border-color:var(--text);transform:translateY(-2px);}
    .btn-card:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(var(--glow-rgb),0.4);}
    .card:hover .card-img img{transform:scale(1.04);}
  }
  .stat-row{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;}
  .stat-num{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;}
  .stat-label{font-size:10.5px;color:var(--text-dim);margin-top:2px;}
  .scroll-cue{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--text-dim); font-size:9.5px; font-family:'JetBrains Mono',monospace;
    text-transform:uppercase; letter-spacing:0.1em; z-index:2;
  }
  .scroll-cue svg{width:14px;height:14px;animation:bounce-down 1.8s ease-in-out infinite;}
  @keyframes bounce-down{0%,100%{transform:translateY(0);opacity:0.5;}50%{transform:translateY(6px);opacity:1;}}

  /* ===== CAROUSEL ===== */
  .carousel-section{padding:32px 0 40px;border-bottom:1px solid var(--line);}
  .carousel-head{max-width:1200px;margin:0 auto;padding:0 18px;margin-bottom:14px;}
  .carousel-head .section-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;}
  .carousel-head h2{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;margin-top:4px;}
  .carousel-track{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 18px 8px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .carousel-track::-webkit-scrollbar{display:none;}
  .slide{
    scroll-snap-align:start; flex:0 0 auto; width:184px; cursor:pointer;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    overflow:hidden;
  }
  .slide img{width:100%;height:230px;object-fit:cover;}
  .slide-info{padding:12px;}
  .slide-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;}
  .slide-model{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;}
  .slide-meta{font-size:11px;color:var(--text-dim);margin-top:4px;}
  .slide-meta b{color:var(--text);font-weight:600;}

  /* ===== SECTIONS ===== */
  .section{max-width:1200px;margin:0 auto;padding:48px 18px;}
  .section-head{margin-bottom:22px;}
  .section-tag{font-family:'JetBrains Mono',monospace;color:var(--text-dim);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;}
  .section-head h2{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;letter-spacing:-0.02em;}
  .section-head p{color:var(--text-dim);font-size:13px;margin-top:6px;}

  /* ===== FILTERS (alineados, wrap prolijo) ===== */
  .filter-group{margin-bottom:12px;}
  .filter-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;}
  .filters{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{
    flex:0 0 auto; padding:11px 16px;border-radius:8px;border:1px solid var(--line);
    font-size:12.5px;line-height:1;color:var(--text-dim);background:var(--surface);
    white-space:nowrap; text-align:center;
  }
  .chip.active{background:var(--text);border-color:var(--text);color:var(--on-accent);font-weight:600;}
  .filters + .filters{margin-top:0;}
  .filter-divider{height:16px;}
  .empty-state{
    display:none; text-align:center; padding:50px 20px; color:var(--text-dim);
    border:1px dashed var(--line); border-radius:14px; font-size:13.5px;
  }
  .empty-state.show{display:block;}

  /* ===== PRODUCT GRID ===== */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    position:relative;
  }
  .card.hidden{display:none;}

  /* Tarjeta en promoción: mismo truco de inversión a blanco que el cotizador */
  .card.card-promo{
    --surface:#FFFFFF; --surface-2:#F2F2F4; --line:#E2E2E5;
    --text:#0A0A0C; --text-dim:#55555C; --on-accent:#FFFFFF; --green:#0E9A61;
    box-shadow:0 0 0 1px rgba(var(--glow-rgb),0.06), 0 20px 44px -16px rgba(var(--glow-rgb),0.35);
  }
  .promo-ribbon{
    position:absolute; top:10px; left:10px; z-index:3;
    background:var(--text); color:var(--on-accent); font-family:'JetBrains Mono',monospace;
    font-size:9.5px; font-weight:700; padding:5px 9px; border-radius:20px;
    display:flex; align-items:center; gap:4px; letter-spacing:0.02em;
  }
  .promo-ribbon svg{width:10px;height:10px;}
  .nuevo-ribbon{
    position:absolute; top:10px; left:10px; z-index:3;
    background:#FFFFFF; color:#0A0A0C; font-family:'JetBrains Mono',monospace;
    font-size:9.5px; font-weight:700; padding:5px 10px; border-radius:20px;
    letter-spacing:0.02em;
  }

  .card-img{aspect-ratio:4/5;background:var(--surface-2);overflow:hidden;}
  .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
  .card-body{padding:12px;}
  .card-top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:6px;}
  .status-dot{font-size:9.5px;color:var(--green);display:flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;white-space:nowrap;}
  .status-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);}
  .tag-estado{font-size:9px;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .card h3{font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:600;margin-bottom:3px;line-height:1.2;color:var(--text);}
  .card .specs{font-size:11px;color:var(--text-dim);margin-bottom:12px;}
  .price{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;margin-bottom:10px;color:var(--text);}
  .price span{font-size:9.5px;color:var(--text-dim);font-family:'Inter',sans-serif;font-weight:400;}
  .price .old-price{font-family:'Inter',sans-serif;font-size:12px;color:var(--text-dim);text-decoration:line-through;font-weight:400;margin-right:6px;}
  .btn-card{
    background:var(--text); color:var(--on-accent); border:none; width:100%; height:40px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-size:12.5px; font-weight:600; transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-card svg{width:15px;height:15px;flex-shrink:0;}

  /* ===== CUOTAS EN PESOS (tarjeta + detalle) ===== */
  .cuotas-wrap{margin-bottom:10px;}
  .cuotas-toggle{
    display:flex; align-items:center; gap:5px; width:100%;
    font-size:11px; font-weight:600; color:var(--text-dim);
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:7px 10px;
  }
  .cuotas-toggle .chev{width:12px;height:12px;flex-shrink:0;margin-left:auto;transition:transform .18s;}
  .cuotas-toggle.open{color:var(--text);}
  .cuotas-toggle.open .chev{transform:rotate(180deg);}
  .cuotas-panel{
    max-height:0; overflow:hidden; transition:max-height .22s ease;
  }
  .cuotas-panel.open{max-height:260px;}
  .cuota-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 2px; font-size:12px; border-bottom:1px solid var(--line);
  }
  .cuota-row:last-child{border-bottom:none;}
  .cuota-n{color:var(--text-dim);}
  .cuota-monto{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--text);}
  .cuota-monto b{color:var(--text-dim);font-weight:500;font-size:10.5px;margin-left:2px;}
  @media (max-width:480px){
    .cuota-row{flex-direction:column;align-items:flex-start;gap:1px;padding:6px 2px;}
    .cuota-monto{font-size:11px;}
  }

  /* ===== TRADE-IN ===== */
  .tradein{
    background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    position:relative;overflow:hidden;
    /* Inversión a blanco: esta sección usa su propio set de tokens claros */
    --bg:#FFFFFF; --surface:#F3F3F5; --surface-2:#E8E8EB; --line:#DCDCE0;
    --text:#0A0A0C; --text-dim:#59595F; --on-accent:#FFFFFF; --green:#0E9A61;
    --glow-rgb:10,10,14;
  }
  .tradein-glow{
    position:absolute; top:50%; right:-120px; transform:translateY(-50%);
    width:560px; height:560px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(var(--glow-rgb),0.05) 0%, transparent 68%);
  }
  .tradein-grid{
    position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(10,10,14,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,14,0.05) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse at right, black, transparent 65%);
  }
  .tradein-inner{max-width:1200px;margin:0 auto;padding:52px 18px;position:relative;z-index:2;}
  .tradein h2{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;letter-spacing:-0.02em;margin-bottom:12px;color:var(--text);}
  .tradein p{color:var(--text-dim);font-size:13px;line-height:1.6;margin-bottom:22px;}
  .steps{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;}
  .step{display:flex;gap:12px;align-items:flex-start;}
  .step-num{font-family:'JetBrains Mono',monospace;color:var(--text);font-size:12px;width:24px;height:24px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .step-text b{display:block;font-size:13.5px;margin-bottom:1px;color:var(--text);}
  .step-text span{font-size:12px;color:var(--text-dim);}

  .quote-form-wrap{position:relative;}
  .quote-badge{
    position:absolute; top:0; left:20px; z-index:3;
    background:var(--text); color:var(--on-accent); font-family:'JetBrains Mono',monospace;
    font-size:10.5px; font-weight:700; padding:6px 12px; border-radius:20px;
    display:flex; align-items:center; gap:6px; letter-spacing:0.02em;
    box-shadow:0 6px 20px -4px rgba(var(--glow-rgb),0.4);
  }
  .quote-badge,.quote-badge svg{display:none;}
  .quote-form{
    background:var(--bg); border:1px solid rgba(var(--glow-rgb),0.14); border-radius:18px; padding:24px 20px 20px;
    box-shadow:0 0 0 1px rgba(var(--glow-rgb),0.03), 0 24px 60px -20px rgba(var(--glow-rgb),0.18), inset 0 1px 0 rgba(var(--glow-rgb),0.06);
  }
  .form-row{margin-bottom:16px;}
  .form-row label{display:block;font-size:11px;color:var(--text-dim);margin-bottom:7px;font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;text-transform:uppercase;}
  .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  select,input[type="range"]{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:11px 12px;border-radius:8px;font-size:13.5px;font-family:inherit;}
  select:focus{outline:2px solid var(--text);outline-offset:1px;}
  .battery-row{display:flex;align-items:center;gap:12px;}
  .battery-val{font-family:'JetBrains Mono',monospace;color:var(--text);font-weight:600;min-width:40px;text-align:right;}
  .state-options{display:flex;gap:6px;}
  .state-opt{flex:1;padding:10px 4px;text-align:center;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:11.5px;color:var(--text-dim);}
  .state-opt.sel{border-color:var(--text);color:var(--text);background:var(--surface-2);}
  .check-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-dim);cursor:pointer;}
  .check-row input{width:16px;height:16px;flex-shrink:0;accent-color:var(--text);}
  .quote-result{
    margin-top:4px;padding:18px;border-radius:12px;
    background:linear-gradient(155deg, var(--surface-2), var(--surface));
    border:1px solid rgba(var(--glow-rgb),0.12);display:flex;flex-direction:column;gap:12px;
  }
  .quote-result-main{display:flex;flex-direction:column;gap:12px;}
  .quote-result .label{font-size:10.5px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.05em;}
  .quote-result .amount{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin-top:4px;color:var(--text);}
  .quote-result .btn-primary{width:100%;text-align:center;}
  .quote-disclaimer{font-size:9.5px;color:var(--text-dim);line-height:1.4;text-align:left;opacity:0.75;}

  /* ===== CONTACTO / UBICACIÓN ===== */
  .contact-section{max-width:1200px;margin:0 auto;padding:48px 18px 0;}
  .contact-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
  .contact-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);gap:12px;}
  .contact-row:last-child{border-bottom:none;}
  .contact-row-left{display:flex;align-items:center;gap:12px;min-width:0;}
  .contact-icon{width:38px;height:38px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .contact-icon svg{width:18px;height:18px;}
  .contact-text b{display:block;font-size:14px;font-weight:600;}
  .contact-text span{display:block;font-size:12px;color:var(--text-dim);margin-top:2px;}
  .contact-chevron{color:var(--text-dim);flex-shrink:0;}
  .hours-open{color:var(--green);font-size:11.5px;font-family:'JetBrains Mono',monospace;}

  .map-card{
    position:relative; height:180px; overflow:hidden;
    color-scheme:dark;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:28px 28px; background-color:var(--surface-2);
    display:flex; align-items:center; justify-content:center;
  }
  .map-card::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at center, transparent 0%, var(--surface-2) 78%);
  }
  .map-pin{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;}
  .map-pin-dot{
    width:14px;height:14px;border-radius:50%;background:var(--text);
    box-shadow:0 0 0 6px rgba(245,245,245,0.12), 0 0 0 1px var(--line);
  }
  .map-pin-btn{
    background:var(--text); color:var(--on-accent); padding:9px 16px; border-radius:8px;
    font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px;
  }
  .map-card:focus-visible{outline:2px solid var(--text);outline-offset:3px;}

  /* ===== FOOTER ===== */
  footer{padding:40px 18px 32px;}
  .footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
  .foot-col h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:10px;}
  .foot-col p, .foot-col a{font-size:13.5px;color:var(--text-dim);line-height:1.9;display:block;}
  .footer-bottom{max-width:1200px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;color:var(--text-dim);font-size:11.5px;}
  .footer-credit{font-size:9.5px;opacity:0.55;}

  /* ===== FLOATING WHATSAPP (mobile) ===== */
  .fab-wsp{
    position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); right:18px; z-index:60;
    width:54px;height:54px;border-radius:50%;
    background:var(--text); color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 28px -8px rgba(0,0,0,0.6);
  }
  .fab-wsp svg{width:26px;height:26px;}

  /* ===== MODAL DE DETALLE DE PRODUCTO (compacto, sin scroll) ===== */
  .card{cursor:pointer;}
  .card .btn-card{cursor:pointer;}
  .detail-overlay{
    display:none; position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,0.72); backdrop-filter:blur(6px);
    align-items:flex-end; justify-content:center;
  }
  .detail-overlay.open{display:flex;}
  .detail-modal{
    background:var(--surface); width:100%; max-width:440px;
    border-radius:22px 22px 0 0; position:relative;
    animation:sheet-up .25s ease-out;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  @keyframes sheet-up{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  .detail-close{
    position:absolute; top:14px; right:14px; z-index:5;
    width:30px; height:30px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--text);
  }
  .detail-close svg{width:14px;height:14px;}

  .detail-top{display:flex; gap:12px; margin-bottom:14px; padding-right:34px;}
  .detail-thumb{
    position:relative; width:96px; height:96px; flex-shrink:0; border-radius:14px; overflow:hidden;
    background:var(--surface-2); cursor:zoom-in;
  }
  .detail-thumb img{width:100%;height:100%;object-fit:cover;}
  .detail-thumb .zoom-hint{
    position:absolute; bottom:4px; right:4px; width:20px; height:20px; border-radius:50%;
    background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;
  }
  .detail-thumb .zoom-hint svg{width:11px;height:11px;color:#fff;}
  .detail-thumb-dots{position:absolute; bottom:5px; left:0; right:0; display:flex; justify-content:center; gap:3px;}
  .detail-thumb-dots .d{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);}
  .detail-thumb-dots .d.active{background:#fff;}

  .detail-headline{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;}
  .detail-badges{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
  .detail-headline h2{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;line-height:1.15;color:var(--text);margin-bottom:4px;}
  .detail-price{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--text);}
  .detail-price .old-price{font-size:12.5px;}
  .detail-price span{font-size:10.5px;color:var(--text-dim);font-family:'Inter',sans-serif;font-weight:400;}

  .detail-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
  .detail-spec-cell{background:var(--surface-2);border-radius:10px;padding:8px 10px;}
  .detail-spec-cell span{display:block;}
  .detalle-nota{background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);color:var(--text);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.5;margin-bottom:14px;}
  .detalle-nota b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:#eab308;margin-bottom:3px;font-family:'JetBrains Mono',monospace;}
  .incluye-nota{font-size:11px;color:var(--text-dim);margin-bottom:14px;display:flex;align-items:center;gap:6px;}
  .incluye-nota::before{content:'✓';color:var(--green);font-weight:700;}
  .detail-spec-cell .k{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em;font-family:'JetBrains Mono',monospace;margin-bottom:2px;}
  .detail-spec-cell .v{font-size:12.5px;color:var(--text);font-weight:600;}

  /* Visor de fotos a pantalla completa (se abre al tocar la miniatura) */
  .lightbox-overlay{
    display:none; position:fixed; inset:0; z-index:200; background:#000;
    align-items:center; justify-content:center;
  }
  .lightbox-overlay.open{display:flex;}
  .lightbox-gallery{
    width:100%; height:100%; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; align-items:center;
  }
  .lightbox-gallery::-webkit-scrollbar{display:none;}
  .lightbox-gallery img{width:100%;flex:0 0 100%;scroll-snap-align:start;object-fit:contain;max-height:100%;}
  .lightbox-close{
    position:absolute; top:20px; right:20px; z-index:5;
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center; color:#fff; backdrop-filter:blur(4px);
  }
  .lightbox-close svg{width:17px;height:17px;}
  .lightbox-dots{position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:6px;}
  .lightbox-dots .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);}
  .lightbox-dots .d.active{background:#fff;}

  /* ===== DESKTOP (≥860px) ===== */
  @media (min-width:860px){
    body{padding-bottom:0;}
    .fab-wsp{display:none;}
    nav{display:flex;}
    .hero{padding:86px 24px 64px;}
    .hero-inner{display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:center;}
    .hero h1{font-size:54px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
    .card-body{padding:16px;}
    .card h3{font-size:16.5px;}
    .tradein-inner{display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;}
    .quote-result-main{flex-direction:row;justify-content:space-between;align-items:center;}
    .quote-result .btn-primary{width:auto;}
    .footer-inner{flex-direction:row;justify-content:space-between;}
    .footer-bottom{flex-direction:row;justify-content:space-between;}
    .slide{width:210px;}
    .slide img{height:210px;}
    .detail-overlay{align-items:center;padding:24px;}
    .detail-modal{border-radius:22px;max-height:88vh;}
  }
  @media (max-width:859px){ nav{display:none;} }

  @media (prefers-reduced-motion:reduce){ *{transition:none !important;scroll-behavior:auto !important;} }

/* OnlyCell design system: shared tokens, existing component structure. */
:root, [data-theme] {
  --bg:var(--surface-100); --surface:var(--surface-200); --surface-2:var(--surface-300);
  --line:var(--line-200); --text:var(--ink-000); --text-dim:var(--ink-200);
  --green:var(--pos); --on-accent:var(--action-ink);
}
:root { --line-300:#747480; }
[data-theme="light"] { --line-300:#81818c; }
html { scroll-padding-top:100px; }
body { font-family:var(--font-sans);font-size:15.5px;line-height:1.6;letter-spacing:.005em; }
h1,h2,h3 { font-family:var(--font-display);letter-spacing:-.025em; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--focus-ring);outline-offset:3px; }
header { background:var(--surface-000);border-color:var(--line-100); }
.nav-wrap { padding:var(--space-4) var(--space-5); }
nav a { font-size:14px; }
.hero { background:var(--surface-000);padding:var(--space-8) var(--space-5); }
.hero .grid-bg { opacity:.11; }
.hero-inner { display:block; }
.hero-inner > div { max-width:780px; }
.hero h1 { font-size:clamp(38px,7vw,72px);line-height:1.04;max-width:780px;text-shadow:none; }
.hero h1 em { background:none;color:var(--ink-200);animation:none;-webkit-text-fill-color:initial; }
.hero p { font-size:17px;line-height:1.65;max-width:560px; }
.eyebrow { padding:0;border:0;background:none;border-radius:0;font-size:11.5px;letter-spacing:.09em; }
.eyebrow::before { display:none; }
.stat-row { margin-top:var(--space-7);gap:var(--space-7); }
.stat-num { font-family:var(--font-mono);font-size:24px; }
.stat-label { font-size:12px; }
.scroll-cue { display:none; }
.btn-primary,.btn-ghost,.btn-wsp-header,.btn-card,.map-pin-btn { min-height:44px;padding:12px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;line-height:1.3;transition:background-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease); }
.btn-primary,.btn-card { background:var(--action-surface);color:var(--action-ink); }
.btn-ghost { border:1px solid var(--line-300); }
.btn-wsp-header,.fab-wsp { background:var(--wsp);color:var(--wsp-ink); }
.section,.contact-section { padding:var(--space-8) var(--space-5); }
.section-head { margin-bottom:var(--space-6); }
.section-head h2,.carousel-head h2 { font-size:clamp(28px,4vw,40px);line-height:1.15; }
.section-head p { font-size:15px; }
.section-tag,.filter-label { font-size:11.5px;letter-spacing:.09em; }
.carousel-section { padding-top:var(--space-7);padding-bottom:var(--space-7);border-bottom:1px solid var(--line-100); }
.carousel-head { padding:0 var(--space-5); }
.carousel-track { scroll-snap-type:x proximity;padding:var(--space-5);gap:var(--space-4);scrollbar-width:thin;scrollbar-color:var(--line-300) transparent; }
.slide { border-radius:var(--radius-md);background:var(--surface-200);border-color:var(--line-100);width:220px; }
.slide img { height:220px; }
.slide-info { padding:var(--space-4); }
.slide-tag,.slide-meta { font-size:12px; }
.slide-model { font-size:16.5px; }
.filter-group { margin-bottom:var(--space-5); }
.chip { min-height:44px;border:1px solid var(--line-300);border-radius:var(--radius-sm);padding:8px 16px;background:var(--surface-200);font-size:14px; }
.chip.active { background:var(--action-surface);color:var(--action-ink);border-color:var(--action-surface); }
.grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5); }
.card,.card.card-promo { --surface:var(--surface-200);--surface-2:var(--surface-300);--text:var(--ink-000);--text-dim:var(--ink-200);--line:var(--line-200);--on-accent:var(--action-ink);--green:var(--pos);background:var(--surface-200);border:1px solid var(--line-100);border-radius:var(--radius-md);box-shadow:var(--shadow-card);transform:none; }
.card-body { padding:var(--space-4); }
.card h3 { font-size:18px;line-height:1.3; }
.card .specs { font-size:13px;line-height:1.55;min-height:40px; }
.card .price { font-size:20px;font-weight:500;margin:var(--space-4) 0; }
.card .price span,.tag-estado,.status-dot { font-size:12px; }
.card-img { aspect-ratio:1/1; }
.card-img img { transition:transform var(--dur-base) var(--ease); }
.promo-ribbon,.nuevo-ribbon { border-radius:var(--radius-xs);font-size:11.5px;top:12px;left:12px; }
.cuotas-toggle { min-height:44px;font-size:12px;border-color:var(--line-300);border-radius:var(--radius-sm); }
.cuotas-panel { transition:none; }
.empty-state { grid-column:1/-1;padding:var(--space-7);background:var(--surface-200);border:1px solid var(--line-200);border-radius:var(--radius-lg);font-size:15px; }
.tradein { --bg:var(--surface-100);--surface:var(--surface-200);--surface-2:var(--surface-300);--line:var(--line-200);--text:var(--ink-000);--text-dim:var(--ink-200);--on-accent:var(--action-ink);--green:var(--pos);background:var(--surface-100); }
.tradein-inner { padding:var(--space-8) var(--space-5);gap:var(--space-7); }
.tradein-grid,.tradein-glow { display:none; }
.tradein h2 { font-size:clamp(28px,4vw,40px);line-height:1.15; }
.tradein p { font-size:15px; }
.quote-disclaimer { font-size:12px; }
.contact-card { border-radius:var(--radius-lg);border-color:var(--line-200); }
.contact-row { padding:var(--space-5); }
.contact-row[href]{color:inherit;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
.contact-row[href]:hover,.contact-row[href]:focus-visible{background:var(--surface-300)}
.contact-text span,.hours-open { font-size:13px; }
.contact-chevron { border:1px solid var(--line-300);min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:var(--radius-sm); }
footer { padding:var(--space-7) var(--space-5);background:var(--surface-000); }
.footer-credit,.footer-bottom { font-size:12px; }
.detail-modal { max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line-200);box-shadow:var(--shadow-modal); }
.detail-close,.lightbox-close { width:44px;height:44px; }
.detail-top { padding-right:44px; }
.reveal { opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease); }
.reveal-pending { opacity:0;transform:translateY(15px); }
@media(hover:hover) {
  .card:hover { transform:none;border-color:var(--line-200);box-shadow:var(--shadow-pop); }
  .card:hover .card-img { transform:none; }
  .card:hover .card-img img { transform:scale(1.06); }
  .btn-primary:hover,.btn-ghost:hover,.btn-wsp-header:hover { transform:scale(1.04); }
}
@media(max-width:600px) {
  .nav-wrap { padding:12px 16px; }.hero,.section,.tradein-inner,.contact-section { padding:48px 16px; }
  .hero h1 { font-size:42px; }.hero p { font-size:15.5px; }.stat-row { gap:24px;flex-wrap:wrap; }.stat-num { font-size:21px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.card-body { padding:12px; }.card h3 { font-size:16px; }.card .price { font-size:17px; }.card .specs { font-size:12px;min-height:56px; }
  .card-top-row { flex-wrap:wrap; }.btn-card { padding:8px;font-size:12px; }.btn-card svg { display:none; }
  .filters { gap:8px; }.chip { padding:8px 12px; }.contact-row { padding:16px; }.detail-spec-cell .k { font-size:11.5px; }
}
@media(max-width:359px) { .grid { grid-template-columns:1fr; } }
.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.catalog-pagination p{font-size:13px;color:var(--text-dim)}
.product-detail-button{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer;min-height:44px;width:100%}
.catalog-pagination [hidden]{display:none}
@media(max-width:600px){
  .hero,.section,.tradein-inner,.contact-section{padding-top:32px;padding-bottom:32px}
  .hero h1{font-size:36px}.hero p{margin-top:16px}.stat-row{margin-top:24px;gap:20px}
  .carousel-section{padding:24px 0}.carousel-head h2{font-size:24px}.slide{width:168px}.slide img{height:156px}.slide-info{padding:12px}.carousel-track{padding:16px}
  .section-head{margin-bottom:24px}.filter-group{margin-bottom:12px}.filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px 0 6px}.filters .chip{flex:0 0 auto}
  .card .specs{min-height:0}.card .price{margin:12px 0}.card .status-dot{display:none}
  .tradein-inner{gap:24px}.steps{margin-top:16px;gap:8px}.step{gap:10px}.step-text span{display:none}
  footer{padding:24px 16px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
  .reveal-pending { opacity:1;transform:none; }
}
