/* ===== Colores (cambia aquí la paleta) ===== */
:root{color-scheme:dark;--bg:#000;--card:#070907;--ink:#EAF4E7;--neon:#39FF14;--mut:#9BB397;--line:#1C3A17;--ok:#39FF14;--beta:#FFD60A;--soon:#8FBF86}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 30%,#0b1409 0,#000 70%);color:var(--ink);font:400 16px/1.5 "DM Sans",system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;overflow-x:hidden;overflow-y:hidden;}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",sans-serif;margin:0;line-height:1.1}

/* ===== Libro y hojas ===== */
.stage{perspective:7000px;width:min(92vw,440px);height:min(72vh,620px);height:min(72dvh,620px);position:relative;touch-action:pan-y;margin-top:6%;}
.page{position:absolute;inset:0;background:linear-gradient(90deg,rgba(57,255,20,.07),transparent 7%),var(--card);border:1px solid var(--line);border-radius:4px 14px 14px 4px;box-shadow:0 10px 40px rgba(57,255,20,.08),-4px 0 0 var(--c,#0f2a0b);transform-origin:left center;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .85s cubic-bezier(.45,.05,.25,1),opacity .2s ease;overflow:hidden}
.page.off{transform:rotateY(-105deg);opacity:0;pointer-events:none;transition:transform .85s cubic-bezier(.45,.05,.25,1),opacity .25s ease .55s}
/* El contenido de cada hoja se reduce solo (zoom con la variable --k) para caber sin scroll. Sin transform anidado, para que el giro de hoja sea estable en iPhone. */
.in{--k:1;width:100%;height:100%;zoom:var(--k);overflow:hidden;overflow-wrap:anywhere;padding:28px 26px 24px 32px;display:flex;flex-direction:column;gap:14px}
.clamp .frase,.clamp .para,.clamp ul.b li,.clamp h2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clamp .frase{-webkit-line-clamp:3}
.clamp .para,.clamp ul.b li,.clamp h2{-webkit-line-clamp:2}
.in.cover{justify-content:flex-end;background:linear-gradient(180deg,transparent 40%,rgba(57,255,20,.1));border-bottom:8px solid var(--neon)}
.cover h1{font-size:2.4rem;color:var(--neon)}
.cover p{margin:0;color:var(--mut)}
.in.sect {
  overflow-y:visible;
}
h2{font-size:1.5rem;color:var(--neon)}
.frase{font-size:1.1rem;margin:0}
.para{margin:0;color:var(--mut);font-size:.9rem}
/* Frase corta y descripciones: texto justificado */
.frase,.para{text-align:justify;text-justify:inter-word;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal}

/* ===== Página de producto ===== */
.pill{align-self:flex-start;font-size:.78rem;font-weight:700;padding:3px 11px;border-radius:999px;border:1px solid var(--c);color:var(--c)}
.dots{color:var(--neon);letter-spacing:2px}
.sz{font-size:.8rem;color:var(--mut)}
.prod h2{font-size:2rem}
ul.b{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.95rem}
ul.b li{padding-left:24px;position:relative}
ul.b li::before{content:"✓";position:absolute;left:0;color:var(--neon);font-weight:700}
.ft{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.precio{font-weight:700;color:var(--neon)}
.estado{font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:6px}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.e-Disponible{color:var(--ok)}.e-Beta{color:var(--beta)}.e-Próximamente{color:var(--soon)}

/* ===== Botón "Visitar producto" ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border-radius:12px;background:var(--neon);color:#000;font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid var(--neon);transition:background .2s,color .2s,box-shadow .2s}
.btn:hover{background:transparent;color:var(--neon);box-shadow:0 0 18px rgba(57,255,20,.35)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ===== Secciones, índice y leyenda ===== */
.kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sect{justify-content:flex-start;border-top:12px solid var(--c);background:linear-gradient(165deg,color-mix(in srgb,var(--c) 24%,#000) 0,transparent 60%)}
.sect h2{font-size:2.2rem;color:var(--c)}
.sect .kicker{color:var(--c)}
.sect .dots{color:var(--c)}
.sect .ix button{border-color:color-mix(in srgb,var(--c) 35%,transparent)}
.sect .ix button:hover{border-color:var(--c)}
.num{font-family:"Bricolage Grotesque",sans-serif;font-size:5.5rem;font-weight:700;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--c)}
.cnt{font-size:.85rem;color:var(--mut)}
.prod{border-top:5px solid var(--c)}
.run{display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.track{display:flex;gap:4px;width:min(92vw,440px)}
.track button{all:unset;cursor:pointer;height:10px;border-radius:5px;background:var(--c);opacity:.28;transition:opacity .25s}
.track button.on{opacity:1;box-shadow:0 0 10px var(--c)}
.track button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 60px);left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#000;border:1px solid var(--c);color:var(--c);padding:8px 18px;border-radius:999px;font-weight:700;z-index:1100;white-space:nowrap;transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.lg{display:grid;gap:12px;font-size:.9rem}
.lg div{display:flex;gap:10px}
.ix{display:grid;gap:8px}
.ix button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.95rem}
.ix button:hover{border-color:var(--neon)}
.ix small{color:var(--mut);display:block}
.ix .go{color:var(--neon);font-size:1.3rem}
.ix button:focus-visible,.nav button:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
.logo{margin-left:5%;transform:translateY(16px)}
 nav {
    height:9%;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 60px;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(57,255,20,0.08);
    transition: all 0.3s;
  }
  nav.scrolled {
    padding: 14px 60px;
    border-bottom-color: rgba(57,255,20,0.2);
  }
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  .nav-logo-icon {
    width: 42px; height: 42px;
    background: var(--green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--dark);
    font-size: 13px;
    letter-spacing: -1px;
  }
    .nav-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .nav-logo-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: var(--text);
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
  }
  .nav-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px;
    background: var(--green);
    transition: width 0.3s;
  }
  .nav-links a:hover { color: var(--green); }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green) !important;
    border-radius: 9px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
  }
  .nav-cta:hover {
    background: var(--green) !important;
    color: var(--dark) !important;
  }
/* ===== Navegación ===== */
.nav-b{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;font-size:.88rem;color:var(--mut)}
.nav-b button{border:1px solid #2A5A22;background:transparent;color:var(--ink);font:500 .9rem "DM Sans",sans-serif;padding:9px 16px;border-radius:999px;cursor:pointer}
.nav-b button:disabled{opacity:.35;cursor:default}
.nav-b button:not(:disabled):hover{background:var(--neon);color:#000;border-color:var(--neon)}
@media (prefers-reduced-motion:reduce){.page,.page.off,.btn,.toast,.track button{transition:none}}