:root{
    --bg:#0a0a0b;
    --bg-alt:#0f1011;
    --panel:#141517;
    --fg:#f4f3f0;
    --fg-dim:#9a9b9d;
    --fg-faint:#5b5c5e;
    --accent:#c7ebe9;
    --accent-soft:rgba(199,235,233,0.14);
    --accent-glow:rgba(199,235,233,0.35);
    --line:rgba(244,243,240,0.09);
    --line-strong:rgba(244,243,240,0.18);
    --display:'Sora',sans-serif;
    --body:'Inter',sans-serif;
    --mono:'IBM Plex Mono',monospace;
    --ease:cubic-bezier(.22,.61,.36,1);
    color-scheme:dark;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;scrollbar-color:var(--line-strong) var(--bg);scrollbar-width:thin;}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--body);
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
  }
  ::selection{background:var(--accent-soft);color:var(--accent);}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  button{font:inherit;}

  /* ---------- SCROLLBAR (webkit) ---------- */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--fg-faint);}

  /* ---------- ACCESSIBLE FOCUS ---------- */
  :focus{outline:none;}
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  .btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
    border-radius:10px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }
  section{position:relative;}

  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:'';
    width:22px;height:1px;
    background:var(--accent);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--display);
    font-weight:600;
    letter-spacing:-0.02em;
    color:var(--fg);
  }

  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    padding:22px 0;
    background:linear-gradient(to bottom, rgba(10,10,11,0.9), rgba(10,10,11,0));
    backdrop-filter:blur(6px);
    transition:padding .4s var(--ease), background .4s var(--ease);
  }
  header.scrolled{
    padding:14px 0;
    background:rgba(10,10,11,0.88);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .logo{
    font-family:var(--display);
    font-weight:700;
    font-size:16px;
    letter-spacing:0.08em;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .logo .mark{
    width:9px;height:9px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px var(--accent-glow);
  }
  nav.links{
    display:flex;
    gap:34px;
  }
  nav.links a{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--fg-dim);
    transition:color .25s var(--ease);
    position:relative;
    padding-bottom:4px;
  }
  nav.links a::after{
    content:'';
    position:absolute;
    left:0;right:100%;
    bottom:0;
    height:1px;
    background:var(--accent);
    transition:right .3s var(--ease);
  }
  nav.links a:hover{color:var(--fg);}
  nav.links a:hover::after{right:0;}
  .nav-cta{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    border:1px solid var(--line-strong);
    padding:9px 18px;
    border-radius:10px;
    transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  }
  .nav-cta:hover{border-color:var(--accent);background:var(--accent-soft);}
  .nav-cta:active{transform:scale(0.96);}
  .nav-actions{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .cart-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border:1px solid var(--line-strong);
    border-radius:12px;
    background:transparent;
    color:var(--fg);
    cursor:pointer;
    transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
    flex-shrink:0;
  }
  .cart-btn svg{width:18px;height:18px;}
  .cart-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
  .cart-btn:active{transform:scale(0.94);}
  .burger{
    display:none;
    width:26px;height:18px;
    position:relative;
    cursor:pointer;
    background:none;border:none;
  }
  .burger span{
    position:absolute;left:0;right:0;
    height:1px;background:var(--fg);
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .burger span:nth-child(1){top:0;}
  .burger span:nth-child(2){top:8px;}
  .burger span:nth-child(3){top:16px;}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  .mobile-menu{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:99;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:22px;
    padding:0 32px;
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
  }
  .mobile-menu.open{transform:translateY(0);}
  .mobile-menu a{
    font-family:var(--display);
    font-size:32px;
    font-weight:500;
    color:var(--fg);
    transition:color .25s var(--ease);
  }
  .mobile-menu a:hover,
  .mobile-menu a:focus-visible{color:var(--accent);}
  .mobile-menu-buy{
    font-family:var(--mono) !important;
    font-size:13px !important;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--bg) !important;
    background:var(--accent);
    padding:12px 22px;
    border-radius:10px;
    margin-top:6px;
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:110px;
    padding-bottom:60px;
    position:relative;
  }
  #particles{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
    width:100%;
  }
  .hero-copy h1{
    font-size:clamp(44px,6.2vw,78px);
    line-height:0.98;
    margin-bottom:26px;
  }
  .hero-copy h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .hero-copy p{
    font-size:17px;
    color:var(--fg-dim);
    max-width:440px;
    margin-bottom:38px;
  }
  .btn-row{display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:15px 28px;
    border-radius:12px;
    cursor:pointer;
    transition:all .3s var(--ease);
    display:inline-block;
    border:1px solid transparent;
  }
  .btn:active{transform:scale(0.97);}
  .btn-solid{
    background:var(--fg);
    color:var(--bg);
  }
  .btn-solid:hover{background:var(--accent);box-shadow:0 0 24px var(--accent-glow);}
  .btn-ghost{
    border-color:var(--line-strong);
    color:var(--fg);
  }
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
  .btn-ghost[disabled]{
    opacity:.45;
    cursor:default;
    pointer-events:none;
  }
  .btn-ghost[disabled]:hover{border-color:var(--line-strong);color:var(--fg);}

  /* ---------- CARTUCHO (foto flotante) ---------- */
  .stage{
    height:460px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1400px;
    position:relative;
  }
  .stage .glow{
    position:absolute;
    left:50%;top:50%;
    width:340px;height:340px;
    margin:-170px 0 0 -170px;
    background:radial-gradient(circle, var(--accent-glow), transparent 70%);
    filter:blur(10px);
    z-index:0;
    opacity:0.55;
  }
  .rig{
    width:230px;
    height:280px;
    position:relative;
    z-index:1;
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{transform:translateY(0) rotateY(-7deg) rotateX(3deg);}
    50%{transform:translateY(-16px) rotateY(7deg) rotateX(-2deg);}
  }
  .photo-face{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1.1s var(--ease);
  }
  .photo-face.active{opacity:1;}
  .photo-face img{
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:lighten;
  }
  .stage-label{
    position:absolute;
    bottom:6px;left:50%;
    transform:translateX(-50%);
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--fg-faint);
    white-space:nowrap;
  }

  .scroll-cue{
    position:absolute;
    bottom:28px;left:32px;
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--fg-faint);
    z-index:2;
  }
  .scroll-cue .line{
    width:1px;height:34px;
    background:linear-gradient(var(--fg-faint), transparent);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

  /* ---------- SECTION HEADERS ---------- */
  .sec{padding:130px 0;}
  /* Modifier for sections that should sit closer to the one above them
     (e.g. a short CTA directly following a content-heavy section). */
  .sec--tight{padding-top:40px;}
  .sec-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .sec-head h2{
    font-size:clamp(30px,4vw,44px);
    line-height:1.08;
  }
  .sec-head p{
    color:var(--fg-dim);
    font-size:16px;
    margin-top:18px;
    max-width:520px;
  }

  /* ---------- PROBLEMA ---------- */
  .problem{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .problem-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .problem-card{
    background:var(--bg-alt);
    padding:38px 26px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:background .3s var(--ease);
  }
  .problem-card:hover{background:var(--panel);}
  .problem-card .ic{
    width:34px;height:34px;
    border:1px solid var(--line-strong);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
    font-family:var(--mono);
    font-size:13px;
  }
  .problem-card h3{
    font-size:17px;font-weight:500;
    font-family:var(--body);
  }
  .problem-card p{color:var(--fg-dim);font-size:14px;}

  /* ---------- SISTEMA (spec sheet) ---------- */
  .specsheet{
    border:1px solid var(--line-strong);
    border-radius:16px;
    overflow:hidden;
  }
  .spec-row{
    display:grid;
    grid-template-columns:44px 1fr 1.6fr;
    gap:24px;
    align-items:center;
    padding:26px 30px;
    border-bottom:1px solid var(--line);
    transition:background .3s var(--ease);
  }
  .spec-row:last-child{border-bottom:none;}
  .spec-row:hover{background:var(--panel);}
  .spec-index{
    font-family:var(--mono);
    color:var(--fg-faint);
    font-size:13px;
  }
  .spec-name{
    font-family:var(--display);
    font-weight:600;
    font-size:19px;
  }
  .spec-desc{color:var(--fg-dim);font-size:14.5px;}

  /* ---------- TECNOLOGIA ---------- */
  .tech{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
  }
  .tech-copy p{
    color:var(--fg-dim);
    font-size:16px;
    margin-bottom:18px;
    max-width:460px;
  }
  .tech-copy p strong{color:var(--fg);font-weight:500;}
  .flow{
    position:relative;
    height:340px;
    border:1px solid var(--line-strong);
    border-radius:16px;
    background:var(--panel);
    overflow:hidden;
  }
  .flow svg{width:100%;height:100%;}
  .flow-tag{
    position:absolute;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--fg-faint);
  }
  .flow-tag.a{top:20px;left:20px;}
  .flow-tag.b{bottom:20px;right:20px;color:var(--accent);}

  /* ---------- PRODUCTOS ---------- */
  .products-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }
  .product-card{
    border:1px solid var(--line-strong);
    border-radius:16px;
    padding:38px 30px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .product-card h3{
    min-height:56px;
  }
  .product-card p:not(.preorder-note){
    flex-grow:1;
  }
  .product-card:hover{
    border-color:var(--accent);
    transform:translateY(-4px);
    box-shadow:0 24px 44px -24px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-soft);
  }
  .product-card .badge{
    display:inline-block;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent);
    border:1px solid var(--accent-soft);
    background:var(--accent-soft);
    padding:5px 10px;
    border-radius:999px;
    margin-bottom:26px;
  }
  .product-card .badge--live{
    color:var(--bg);
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 18px var(--accent-glow);
  }
  .product-card h3{
    font-size:22px;
    margin-bottom:12px;
  }
  .product-card p{
    color:var(--fg-dim);
    font-size:14.5px;
  }
  .product-card .dot-orbit{
    position:absolute;
    right:-30px;bottom:-30px;
    width:120px;height:120px;
    border:1px solid var(--line);
    border-radius:50%;
  }
  .product-price{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid var(--line);
  }
  .product-price .price-now{
    font-family:var(--display);
    font-size:24px;
    font-weight:600;
    color:var(--fg);
  }
  .product-price .price-was{
    font-family:var(--mono);
    font-size:13px;
    color:var(--fg-faint);
    text-decoration:line-through;
  }
  .product-price .price-tag{
    width:100%;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .product-buy,
  .product-card > .btn{
    display:block;
    text-align:center;
    margin-top:20px;
    border:none;
    cursor:pointer;
  }
  .product-card > .btn-ghost{
    border:1px solid var(--line-strong);
    cursor:default;
  }
  .preorder-note{
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1.5;
    color:var(--fg-faint);
    text-align:center;
    margin-top:10px;
  }

  /* ---------- CHECKOUT ---------- */
  .checkout{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:60px;
    align-items:start;
  }
  .checkout-form{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .qty-field{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;}
  .qty-control{
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid var(--line-strong);
    border-radius:10px;
    padding:6px 10px;
  }
  .qty-control button{
    width:26px;height:26px;
    border:1px solid var(--line-strong);
    background:transparent;
    color:var(--fg);
    border-radius:8px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:15px;
    line-height:1;
    transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .qty-control button:hover{border-color:var(--accent);color:var(--accent);}
  .qty-control span{
    font-family:var(--mono);
    font-size:15px;
    min-width:18px;
    text-align:center;
  }
  .summary-card{
    border:1px solid var(--line-strong);
    border-radius:16px;
    padding:34px 30px;
    background:var(--panel);
  }
  .summary-head{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--fg-faint);
    margin-bottom:22px;
  }
  .summary-row{
    display:flex;
    justify-content:space-between;
    font-size:14.5px;
    color:var(--fg-dim);
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .summary-row.summary-total{
    border-bottom:none;
    padding-top:18px;
    font-family:var(--display);
    font-size:20px;
    font-weight:600;
    color:var(--fg);
  }
  .summary-row.summary-total span:last-child{color:var(--accent);}
  .summary-card .btn{margin-top:24px;}
  .summary-card .form-note{margin-top:14px;text-align:center;}
  .summary-card .form-error{text-align:center;}

  /* ---------- GALERIA ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:190px;
    gap:14px;
  }
  .gallery-grid .g1{grid-column:span 2;grid-row:span 2;}
  .g-item{
    border-radius:16px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .g-item .surface{
    position:absolute;inset:0;
  }
  .g-item img.surface{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease);
  }
  .g-item:hover img.surface{
    transform:scale(1.05);
  }
  .g-item .caption{
    position:absolute;bottom:0;left:0;right:0;
    padding:14px 16px;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--fg-dim);
    background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  }
  .surf-1{background:radial-gradient(circle at 30% 20%, #2b2d2f, #0a0a0b 70%);}
  .surf-2{background:radial-gradient(ellipse at 70% 60%, rgba(199,235,233,0.16), #0e0f10 70%);}
  .surf-3{background:repeating-linear-gradient(115deg, #16171a 0 2px, #0c0d0e 2px 8px);}
  .surf-4{background:radial-gradient(circle at 60% 70%, #202224, #0a0a0b 65%);}
  .surf-5{background:conic-gradient(from 90deg, #101112, #1c1e20, #0a0a0b, #16171a);}

  /* ---------- HISTORIA ---------- */
  .story{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:70px;
    align-items:start;
  }
  .story-mark{
    font-family:var(--display);
    font-size:15vw;
    line-height:0.8;
    color:transparent;
    -webkit-text-stroke:1px var(--line-strong);
    position:sticky;
    top:140px;
    user-select:none;
  }
  .story-copy p{
    font-size:18px;
    color:var(--fg-dim);
    margin-bottom:26px;
    max-width:540px;
  }
  .story-copy p.lead{
    font-family:var(--display);
    font-size:26px;
    font-weight:500;
    color:var(--fg);
    line-height:1.35;
  }

  /* ---------- MANUAL ---------- */
  .manual-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .manual-step{
    padding-top:22px;
    border-top:1px solid var(--line-strong);
    transition:border-color .3s var(--ease);
  }
  .manual-step:hover{border-color:var(--accent);}
  .manual-step .num{
    font-family:var(--mono);
    color:var(--accent);
    font-size:13px;
    margin-bottom:14px;
    display:block;
  }
  .manual-step h3{font-size:16px;font-weight:500;font-family:var(--body);margin-bottom:8px;}
  .manual-step p{color:var(--fg-dim);font-size:14px;}

  /* ---------- FAQ ---------- */
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-q{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:26px 4px;
    cursor:pointer;
    font-family:var(--display);
    font-size:17px;
    font-weight:500;
    transition:color .25s var(--ease);
  }
  .faq-q:hover{color:var(--accent);}
  .faq-q .plus{
    font-family:var(--mono);
    color:var(--fg-faint);
    transition:transform .3s var(--ease), color .25s var(--ease);
    font-size:18px;
  }
  .faq-item.open .plus{transform:rotate(45deg);color:var(--accent);}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .faq-a p{
    padding:0 4px 26px;
    color:var(--fg-dim);
    font-size:15px;
    max-width:620px;
  }

  .faq-whatsapp-note{
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid var(--line);
    text-align:center;
    font-size:14px;
    color:var(--fg-dim);
  }
  .faq-whatsapp-note a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .faq-whatsapp-note a:hover{color:var(--fg);}

  /* ---------- LANZAMIENTO ---------- */
  .launch{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    text-align:center;
  }
  .launch-date{
    font-family:var(--display);
    font-size:clamp(38px,7vw,88px);
    font-weight:700;
    letter-spacing:-0.01em;
    margin:20px 0 46px;
  }
  .launch-date span{color:var(--accent);}
  .countdown{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .cd-box{
    width:96px;
    padding:20px 0;
    border:1px solid var(--line-strong);
    border-radius:12px;
    transition:border-color .3s var(--ease);
  }
  .cd-box:hover{border-color:var(--accent);}
  .cd-box .n{
    font-family:var(--mono);
    font-size:30px;
    color:var(--accent);
  }
  .cd-box .l{
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--fg-faint);
    margin-top:8px;
  }

  /* ---------- RESERVA / CONTACTO ---------- */
  .reserve{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:70px;
  }
  .reserve-copy p{color:var(--fg-dim);font-size:16px;max-width:400px;margin-bottom:24px;}
  .reserve-list li{
    font-family:var(--mono);
    font-size:13px;
    color:var(--fg-dim);
    padding:10px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
  }
  .reserve-list li span:last-child{color:var(--accent);}

  form.waitlist{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .field label{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--fg-faint);
  }
  .field input{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line-strong);
    color:var(--fg);
    font-family:var(--body);
    font-size:16px;
    padding:10px 2px;
    outline:none;
    transition:border-color .3s var(--ease);
  }
  .field input:focus{border-color:var(--accent);}
  .field input::placeholder{color:var(--fg-faint);}
  .waitlist .btn-solid{
    margin-top:10px;
    align-self:flex-start;
    border:none;
    cursor:pointer;
  }
  .form-note{
    font-family:var(--mono);
    font-size:11px;
    color:var(--fg-faint);
    margin-top:4px;
  }
  .form-success{
    display:none;
    font-family:var(--mono);
    font-size:13px;
    color:var(--accent);
    padding:16px 0;
  }
  .form-success.show{display:block;}
  .form-error{
    display:none;
    font-family:var(--mono);
    font-size:13px;
    color:#e08a8a;
    padding:16px 0;
  }
  .form-error.show{display:block;}

  /* ---------- FOOTER ---------- */
  footer{
    padding:60px 0 40px;
    border-top:1px solid var(--line);
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
  }
  .footer-copy{
    font-family:var(--mono);
    font-size:11px;
    color:var(--fg-faint);
    line-height:1.9;
  }
  .footer-links{
    display:flex;
    gap:24px;
  }
  .footer-links a{
    font-family:var(--mono);
    font-size:11px;
    color:var(--fg-dim);
    transition:color .25s var(--ease);
  }
  .footer-links a:hover{color:var(--accent);}

  /* ---------- POLISH: grain, progress, cascade, magnetic, spotlight ---------- */

  /* Subtle film grain over the whole page — imperceptible individually,
     it's what keeps large flat dark areas from looking sterile/flat. */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0.035;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* Scroll progress indicator */
  .progress-bar{
    position:fixed;
    top:0;left:0;
    height:2px;
    width:0%;
    background:linear-gradient(90deg, var(--accent), rgba(199,235,233,0));
    z-index:101;
    pointer-events:none;
  }

  /* Smooth anchor offset so fixed header never covers the section title */
  html{scroll-padding-top:96px;}
  section[id]{scroll-margin-top:96px;}

  /* Gentle load-in for the header/logo */
  #siteHeader{opacity:0;transform:translateY(-8px);}
  #siteHeader.ready{
    opacity:1;transform:translateY(0);
    transition:opacity .7s var(--ease), transform .7s var(--ease), padding .4s var(--ease), background .4s var(--ease);
  }

  /* Cascading stagger for grid/list reveals — same trigger, offset timing */
  .problem-grid .problem-card:nth-child(1){transition-delay:0s;}
  .problem-grid .problem-card:nth-child(2){transition-delay:.08s;}
  .problem-grid .problem-card:nth-child(3){transition-delay:.16s;}
  .problem-grid .problem-card:nth-child(4){transition-delay:.24s;}

  .manual-grid .manual-step:nth-child(1){transition-delay:0s;}
  .manual-grid .manual-step:nth-child(2){transition-delay:.08s;}
  .manual-grid .manual-step:nth-child(3){transition-delay:.16s;}
  .manual-grid .manual-step:nth-child(4){transition-delay:.24s;}

  .products-grid .product-card:nth-child(1){transition-delay:0s;}
  .products-grid .product-card:nth-child(2){transition-delay:.1s;}
  .products-grid .product-card:nth-child(3){transition-delay:.2s;}
  .products-grid .product-card:nth-child(4){transition-delay:.3s;}

  .specsheet .spec-row:nth-child(1){transition-delay:0s;}
  .specsheet .spec-row:nth-child(2){transition-delay:.06s;}
  .specsheet .spec-row:nth-child(3){transition-delay:.12s;}
  .specsheet .spec-row:nth-child(4){transition-delay:.18s;}
  .specsheet .spec-row:nth-child(5){transition-delay:.24s;}

  .gallery-grid .g-item:nth-child(1){transition-delay:0s;}
  .gallery-grid .g-item:nth-child(2){transition-delay:.06s;}
  .gallery-grid .g-item:nth-child(3){transition-delay:.12s;}
  .gallery-grid .g-item:nth-child(4){transition-delay:.18s;}
  .gallery-grid .g-item:nth-child(5){transition-delay:.24s;}

  /* Magnetic buttons — JS sets transform on mousemove; this keeps the
     snap-back on release smooth without fighting the drag itself. */
  .btn, .nav-cta, .cart-btn, .qty-control button{will-change:transform;}
  .btn.magnet-out, .nav-cta.magnet-out, .cart-btn.magnet-out, .qty-control button.magnet-out{
    transition:transform .5s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease);
  }

  /* Cursor-reactive spotlight + 3D tilt on product cards */
  .product-card{
    --mx:50%; --my:50%;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .product-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(380px circle at var(--mx) var(--my), var(--accent-soft), transparent 62%);
    opacity:0;
    transition:opacity .5s var(--ease);
    pointer-events:none;
  }
  .product-card:hover::before{opacity:1;}

  /* Hero glow drifts toward the cursor for a sense of depth */
  .stage .glow{transition:transform .6s var(--ease);}

  @media(hover:none){
    .product-card::before{display:none;}
  }

  /* ---------- CARRITO: badge, drawer, toast ---------- */
  .cart-btn{position:relative;}
  .cart-badge{
    position:absolute;
    top:-6px;right:-6px;
    min-width:17px;height:17px;
    padding:0 4px;
    border-radius:50%;
    background:var(--accent);
    color:var(--bg);
    font-family:var(--mono);
    font-size:10px;
    font-weight:600;
    line-height:17px;
    text-align:center;
    box-shadow:0 0 0 2px var(--bg);
    transform:scale(0);
    transition:transform .3s var(--ease);
  }
  .cart-badge.show{transform:scale(1);}

  .cart-overlay{
    position:fixed;inset:0;
    background:rgba(6,6,7,0.6);
    backdrop-filter:blur(2px);
    z-index:198;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .cart-overlay.open{opacity:1;pointer-events:auto;}

  .cart-drawer{
    position:fixed;
    top:0;right:0;bottom:0;
    width:420px;
    max-width:92vw;
    background:var(--panel);
    border-left:1px solid var(--line-strong);
    z-index:199;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
  }
  .cart-drawer.open{transform:translateX(0);}
  .cart-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 26px;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .cart-drawer-head h3{
    font-size:18px;
    font-weight:600;
  }
  .cart-close{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:10px;
    color:var(--fg-dim);
    cursor:pointer;
    transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .cart-close svg{width:14px;height:14px;}
  .cart-close:hover{border-color:var(--accent);color:var(--accent);}

  .cart-drawer-body{
    flex:1;
    overflow-y:auto;
    padding:22px 26px;
  }
  .cart-empty{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:14px;
    color:var(--fg-faint);
    padding:40px 10px;
  }
  .cart-empty p{font-size:14px;max-width:220px;}
  .cart-empty a{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--accent);
    border-bottom:1px solid var(--accent-soft);
    padding-bottom:2px;
  }

  .cart-item{
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 14px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
  }
  .cart-item:first-child{padding-top:0;}
  .cart-item-name{
    font-family:var(--display);
    font-weight:600;
    font-size:15px;
    grid-column:1;
  }
  .cart-item-remove{
    grid-column:2;
    justify-self:end;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--fg-faint);
    background:transparent;
    border:none;
    cursor:pointer;
    transition:color .25s var(--ease);
  }
  .cart-item-remove:hover{color:#e08a8a;}
  .cart-item-price{
    grid-column:1;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--fg-faint);
  }
  .cart-item-qty{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:6px;
  }
  .cart-item-qty .qty-control{padding:4px 8px;}
  .cart-item-qty .qty-control button{width:22px;height:22px;font-size:13px;}
  .cart-item-qty .qty-control span{font-size:13px;}
  .cart-item-subtotal{
    font-family:var(--mono);
    font-size:13px;
    color:var(--accent);
  }

  .cart-drawer-foot{
    padding:22px 26px 26px;
    border-top:1px solid var(--line);
    flex-shrink:0;
  }
  .cart-total-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-family:var(--display);
    font-size:18px;
    font-weight:600;
    margin-bottom:16px;
  }
  .cart-total-row span:last-child{color:var(--accent);}
  #cartCheckoutBtn.disabled{
    pointer-events:none;
    opacity:0.4;
  }

  .cart-toast{
    position:fixed;
    left:50%;
    bottom:32px;
    transform:translate(-50%, 16px);
    background:var(--panel);
    border:1px solid var(--line-strong);
    color:var(--fg);
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.02em;
    padding:13px 22px;
    border-radius:10px;
    box-shadow:0 20px 40px -18px rgba(0,0,0,0.7);
    z-index:200;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .cart-toast.show{opacity:1;transform:translate(-50%, 0);}

  /* Grid de productos: 4 col. (ancho, ej. Mac/desktop) → 2 col. (tablet/laptop) → 1 col. (móvil) */
  @media(max-width:1080px){
    .products-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:640px){
    .products-grid{grid-template-columns:1fr;}
  }

  @media(max-width:560px){
    .cart-drawer{width:100vw;}
  }

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:980px){
    nav.links{display:none;}
    .nav-cta{display:none;}
    .burger{display:block;}
    .hero-inner{grid-template-columns:1fr;}
    .stage{height:320px;order:-1;}
    .hero{padding-top:130px;}
    .problem-grid{grid-template-columns:repeat(2,1fr);}
    .tech{grid-template-columns:1fr;}
    .story{grid-template-columns:1fr;}
    .story-mark{position:relative;top:0;font-size:26vw;}
    .manual-grid{grid-template-columns:repeat(2,1fr);}
    .reserve{grid-template-columns:1fr;}
    .checkout{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-grid .g1{grid-column:span 2;}
  }
  @media(max-width:560px){
    .wrap{padding:0 20px;}
    .sec{padding:90px 0;}
    .sec--tight{padding-top:24px;}
    .problem-grid{grid-template-columns:1fr;}
    .manual-grid{grid-template-columns:1fr;}
    .spec-row{grid-template-columns:32px 1fr;}
    .spec-desc{grid-column:1 / -1;}
    .cd-box{width:74px;padding:14px 0;}
    .cd-box .n{font-size:22px;}
    .scroll-cue{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }