* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  :root {
    --bg: #050506; --card: #111113; --card2: #19191c; --border: rgba(255,255,255,0.08);
    --text: #F5F5F1; --muted: #5E5E68; --sub: #9A9AA4;
    --accent: #e2eb3a; --pink: #d851b8; --clean: #2dc66b; --used: #f35a5d; --cyan: #3ad6e2; --naranja: #ff9f43; --lila: #a78bfa;
    --font-d: 'Bricolage Grotesque', 'Geist', -apple-system, sans-serif;
    --font: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --ease: cubic-bezier(0.22,1,0.36,1);
    --pop: cubic-bezier(0.34,1.56,0.64,1);
    --r: 28px;
    --dc: #6e86f2;      /* el color de la droga elegida: lo cambia el script */
  }
  html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top:80px; overflow-x: hidden; }
  body { color: var(--text); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; cursor: pointer; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

  /* ── Luz que sigue al cursor (solo con ratón) y barra de progreso ── */
  .luz { position: fixed; left: 0; top: 0; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--dc) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .6s, background .6s; }
  @media (hover: hover) and (pointer: fine) { .luz.on { opacity: 1; } }
  .progreso { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent); z-index: 60; }

  /* ── Cabecera ── */
  .nav { position: sticky; top: 0; z-index: 50; background: rgba(5,5,6,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
  .logo { position: relative; width: 108px; aspect-ratio: 796 / 191; display: block; background: none; border: 0; padding: 0; }
  .logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(60%) rotate(var(--r)) scale(.6); animation: silaba .55s var(--pop) both; animation-delay: var(--d); }
  .logo.otra img { animation: none; }
  @keyframes silaba { to { opacity: 1; transform: none; } }
  .nav-links { display: none; gap: 26px; font-size: 14px; color: var(--sub); }
  .nav-links a { text-decoration: none; transition: color .2s; }
  .nav-links a:hover { color: var(--text); }
  @media (min-width: 860px) { .nav-links { display: flex; } }
  .nav-der { display: flex; align-items: center; gap: 8px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 0; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .2s var(--pop), background .2s, border-color .2s, box-shadow .3s; position: relative; overflow: hidden; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(.96); }
  .btn.acid { background: var(--accent); color: #000; box-shadow: 0 0 0 0 rgba(226,235,58,0); }
  .btn.acid:hover { box-shadow: 0 10px 40px rgba(226,235,58,.28); }
  .btn.ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.18); }
  .btn.ghost:hover { border-color: rgba(255,255,255,.4); }
  .btn.sm { padding: 10px 16px; font-size: 14px; }
  .sonido { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; color: var(--sub); transition: color .2s, border-color .2s; }
  .sonido svg { width: 18px; height: 18px; }
  .sonido.on { color: var(--accent); border-color: rgba(226,235,58,.4); }
  .sonido .ondas { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
  .sonido .ondas i { width: 3px; border-radius: 2px; background: currentColor; height: 4px; }
  .sonido.on .ondas i { animation: onda .9s ease-in-out infinite; }
  .sonido.on .ondas i:nth-child(2) { animation-delay: .15s; } .sonido.on .ondas i:nth-child(3) { animation-delay: .3s; }
  @keyframes onda { 0%, 100% { height: 4px; } 50% { height: 14px; } }

  /* ── Hero ── */
  .hero { padding: 72px 0 40px; position: relative; }
  .hero .wrap { display: grid; gap: 44px; align-items: center; }
  @media (min-width: 900px) { .hero { padding: 96px 0 60px; } .hero .wrap { grid-template-columns: 1.1fr .9fr; gap: 60px; } }
  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
  .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
  h1 { font-family: var(--font-d); font-weight: 800; font-size: clamp(44px, 8.5vw, 84px); line-height: .96; letter-spacing: -.05em; margin-bottom: 22px; }
  h1 .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(3deg); animation: palabra .7s var(--ease) both; animation-delay: var(--d); }
  @keyframes palabra { to { opacity: 1; transform: none; } }
  h1 em { font-style: normal; color: var(--accent); }
  .lead { font-size: clamp(17px, 2vw, 20px); color: var(--sub); line-height: 1.5; max-width: 520px; margin-bottom: 26px; }
  .lead b { color: var(--text); font-weight: 600; }
  .ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .ctas small { display: block; width: 100%; color: var(--muted); font-size: 13px; margin-top: 6px; }

  /* Las drogas: cada una su nota, su color y su frase */
  .drogas-lbl { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 30px 0 10px; }
  .drogas { display: flex; flex-wrap: wrap; gap: 8px; }
  .droga { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--c); background: transparent; color: var(--c); font-size: 14px; font-weight: 600; transition: transform .25s var(--pop), background .2s, color .2s; }
  .droga:hover { transform: translateY(-2px) scale(1.04); }
  .droga.on { background: var(--c); color: #000; }
  .droga.toca { animation: rebote .5s var(--pop); }
  @keyframes rebote { 0% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-3deg); } 100% { transform: scale(1); } }

  /* Frontal inspirado en el iPhone 18 Pro; la pantalla grande sigue siendo interactiva. */
  .phone { justify-self:center;width:min(390px,100%);min-width:0;position:relative; }
  .iphone-shell { display:block;position:relative;width:100%;aspect-ratio:71.9 / 150;border:2px solid #9b9ba0;border-radius:13% / 6.25%;background:linear-gradient(115deg,#77777d,#e3e2e0 9%,#46464a 23%,#202024 67%,#b9b9bc 94%,#55555a);box-shadow:0 40px 90px #0009,inset 0 0 0 2px #131316; }
  .iphone-shell::before,.iphone-shell::after { content:"";position:absolute;z-index:-1;width:3px;background:linear-gradient(#aaaab0,#303035);border-radius:3px; }
  .iphone-shell::before { left:-4px;top:17%;height:12%;box-shadow:0 66px 0 #55555b; }
  .iphone-shell::after { right:-4px;top:28%;height:10%; }
  .iphone-display { position:absolute;inset:7px;display:grid;grid-template-rows:38px minmax(0,1fr);overflow:hidden;border-radius:12% / 5.7%;background:#050506; }
  .iphone-status { position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#050506;color:#f5f5f1;font:700 12px var(--font); }
  .iphone-island { position:absolute;left:50%;top:7px;transform:translateX(-50%);width:106px;height:24px;border-radius:16px;background:#000;box-shadow:inset 0 0 0 1px #111; }
  .iphone-island::after { content:"";position:absolute;right:12px;top:9px;width:6px;height:6px;border-radius:50%;background:#101824; }
  .iphone-icons { display:flex;align-items:center;gap:5px; }
  .iphone-signal { display:block;width:13px;height:10px;clip-path:polygon(0 100%,0 70%,22% 70%,22% 53%,48% 53%,48% 33%,72% 33%,72% 9%,100% 9%,100% 100%);background:currentColor; }
  .iphone-battery { display:block;width:18px;height:9px;border:1px solid currentColor;border-radius:3px;position:relative; }
  .iphone-battery::before { content:"";position:absolute;inset:1px 3px 1px 1px;border-radius:1px;background:currentColor; }
  .iphone-battery::after { content:"";position:absolute;right:-3px;top:2px;width:2px;height:3px;border-radius:0 2px 2px 0;background:currentColor; }
  .phone iframe { display:block;position:absolute;top:38px;left:0;width:100%;height:calc(100% - 38px);scroll-margin-block:80px 24px;border:0;background:#050506; }
  .phone .glow { position:absolute;inset:-20% -10%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--dc) 30%,transparent),transparent 70%);filter:blur(12px);transition:background .6s; }
  .phone-caption { display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:18px;font-size:13px;color:var(--sub); }
  .phone-caption a { color:var(--accent);text-underline-offset:4px; }
  @media(max-width:420px) { .phone { width:min(390px,calc(100vw - 40px)); }.phone-caption { padding:0 4px; } }
  @keyframes fraseIn { from { opacity:0;transform:translateY(6px); } }

  /* ── Bloques ── */
  section { padding: 64px 0; position: relative; }
  @media (min-width: 900px) { section { padding: 96px 0; } }
  h2 { font-family: var(--font-d); font-weight: 800; font-size: clamp(32px, 5vw, 52px); line-height: 1; letter-spacing: -.045em; margin-bottom: 14px; }
  h2 em { font-style: normal; color: var(--c, var(--accent)); }
  .sub { color: var(--sub); font-size: 17px; max-width: 560px; }
  .sub b { color: var(--text); font-weight: 600; }

  .grid3 { display: grid; gap: 14px; margin-top: 40px; perspective: 1200px; }
  @media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .35s var(--ease), border-color .3s, box-shadow .4s; transform-style: preserve-3d; }
  .card:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
  .card .k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c, var(--accent)); }
  .card h3 { font-family: var(--font-d); font-weight: 800; font-size: 24px; letter-spacing: -.03em; line-height: 1.05; }
  .card p { color: var(--sub); font-size: 15px; }
  .card .shot { margin: 8px -10px -10px; border-radius: 20px; overflow: hidden; aspect-ratio: 390 / 300; background: #000; border: 1px solid var(--border); }
  .card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position 2.4s var(--ease), transform .6s var(--ease); }
  .card:hover .shot img { object-position: bottom; transform: scale(1.03); }

  /* Cómo funciona: tres pasos, el segundo con la rejilla viva */
  .pasos { display: grid; gap: 14px; margin-top: 40px; }
  @media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
  .paso { border-top: 1px solid var(--border); padding-top: 18px; }
  .paso b { display: block; font-family: var(--font-d); font-weight: 800; font-size: 62px; line-height: .9; letter-spacing: -.05em; color: var(--c, var(--accent)); margin-bottom: 12px; }
  .paso h3 { font-family: var(--font-d); font-weight: 800; font-size: 22px; letter-spacing: -.03em; margin-bottom: 6px; }
  .paso p { color: var(--sub); font-size: 15px; }
  .rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin: 16px 0 10px; max-width: 300px; }
  .rejilla button { width: 100%; min-width: 0; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.1); transform: scale(0); transition: background .25s, transform .2s var(--pop); }
  .rejilla.on button { transform: scale(1); }
  .rejilla button.ok { background: var(--clean); } .rejilla button.no { background: var(--used); }
  .rejilla button:hover { transform: scale(1.18); }
  .rejilla button.toca { animation: rebote .45s var(--pop); }
  .veredicto { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--clean); }
  .veredicto.mal { color: var(--used); }
  .rejilla-nota { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

  /* La frase, a todo el ancho, con el color de la droga elegida */
  .frase { background: var(--dc); color: #000; border-radius: var(--r); padding: 30px 26px; margin-top: 40px; position: relative; transition: background .6s; overflow: hidden; }
  @media (min-width: 760px) { .frase { padding: 44px; } }
  .frase .k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(0,0,0,.62); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .frase .k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #000; }
  .frase p { font-family: var(--font-d); font-weight: 800; font-size: clamp(26px, 4.6vw, 44px); line-height: 1.05; letter-spacing: -.04em; max-width: 780px; }
  .frase p.cambia { animation: fraseIn .5s var(--ease); }
  .frase .plus { position: absolute; top: 20px; right: 26px; font-family: var(--font-d); font-weight: 700; font-size: 26px; color: rgba(0,0,0,.55); }
  .frase .otra { margin-top: 18px; background: rgba(0,0,0,.14); border: 0; color: #000; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; transition: background .2s; }
  .frase .otra:hover { background: rgba(0,0,0,.24); }
  .frase-nota { color: var(--muted); font-size: 13px; margin-top: 12px; }

  /* Lo que no hace: las cruces se dibujan */
  .no { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 26px; display: grid; gap: 22px; margin-top: 40px; }
  @media (min-width: 760px) { .no { grid-template-columns: repeat(2, 1fr); padding: 40px; } }
  .no > div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; cursor: pointer; }
  .no > div.tiembla { animation: tiembla .4s; }
  @keyframes tiembla { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  .no svg { width: 28px; height: 28px; }
  .no svg circle { fill: none; stroke: var(--used); stroke-width: 1.5; }
  .no svg path { fill: none; stroke: var(--used); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s var(--ease); }
  .no.on svg path { stroke-dashoffset: 0; }
  .no.on > div:nth-child(2) svg path { transition-delay: .1s; } .no.on > div:nth-child(3) svg path { transition-delay: .2s; } .no.on > div:nth-child(4) svg path { transition-delay: .3s; } .no.on > div:nth-child(5) svg path { transition-delay: .4s; } .no.on > div:nth-child(6) svg path { transition-delay: .5s; }
  .no b { display: block; font-family: var(--font-d); font-weight: 800; font-size: 20px; letter-spacing: -.03em; margin-bottom: 4px; }
  .no p { color: var(--sub); font-size: 15px; }

  /* Ayuda de verdad */
  .tels { display: grid; gap: 8px; margin-top: 30px; }
  @media (min-width: 760px) { .tels { grid-template-columns: repeat(2, 1fr); } }
  .tel { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; text-decoration: none; transition: transform .25s var(--ease), border-color .2s; }
  .tel:hover { transform: translateX(4px); border-color: rgba(255,255,255,.18); }
  .tel b { display: block; font-size: 15px; font-weight: 600; }
  .tel small { display: block; color: var(--sub); font-size: 13px; margin-top: 2px; }
  .tel span { font-family: var(--font-d); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--clean); white-space: nowrap; }
  .tel.rojo span { color: var(--used); }

  /* Preguntas */
  .faq { margin-top: 30px; border-top: 1px solid var(--border); }
  .faq details { border-bottom: 1px solid var(--border); }
  .faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-family: var(--font-d); font-weight: 700; font-size: 20px; letter-spacing: -.025em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; color: var(--accent); font-weight: 700; font-size: 24px; flex-shrink: 0; transition: transform .3s var(--pop); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq .a { color: var(--sub); font-size: 16px; padding: 0 0 22px; max-width: 700px; animation: fraseIn .4s var(--ease); }
  .faq .a b { color: var(--text); font-weight: 600; }

  /* Cierre, con lluvia de pastillas */
  .cierre { text-align: center; padding: 80px 0 100px; overflow: hidden; }
  .cierre canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .cierre .wrap { position: relative; }
  .cierre h2 { font-size: clamp(40px, 8vw, 92px); }
  .cierre h2 em { display: inline-block; }
  .cierre .ctas { justify-content: center; margin-top: 26px; }

  /* Pie */
  footer { border-top: 1px solid var(--border); padding: 36px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--sub); font-size: 14px; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: space-between; align-items: center; }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--text); }
  footer .achos { color: var(--muted); font-size: 13px; }
  footer .achos b { color: var(--sub); font-weight: 600; }
  footer img { height: 18px; width: auto; }

  /* Entrada al hacer scroll */
  .up { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .up.on { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .up, .logo img, h1 .w, .rejilla button { opacity: 1; transform: none; transition: none; animation: none; }
    html { scroll-behavior: auto; } .luz { display: none; }
  }

  /* Comunidad real y disponibilidad de las tiendas. */
  .share-card { min-height:340px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:38px;border:1px solid #e2eb3a55;border-radius:30px;background:radial-gradient(circle at 80% 10%,#dce53d22,transparent 45%),#16180f;transform:rotate(2deg); }
  .share-card>span,.store-platform { color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; }
  .share-card img { width:82px;height:82px;object-fit:contain;margin:25px 0 18px;border-radius:18px; }
  .share-card h3 { font:800 clamp(36px,5vw,68px)/.95 var(--font-d);letter-spacing:-.06em; }
  .share-card p { color:var(--sub);font-size:17px;margin:18px 0 24px;max-width:30ch; }
  .share-card a { color:var(--accent);font-weight:700;text-decoration:none; }
  .share-status { min-height:1.5em;color:var(--accent);font-size:14px;margin-top:12px;overflow-wrap:anywhere; }
  .stores { background:#101113;border-block:1px solid var(--border); }
  .stores>.wrap { display:grid;gap:44px;align-items:center; }
  .stores h2 { font-size:clamp(46px,7vw,86px);line-height:.98;letter-spacing:-.06em;margin:15px 0 22px; }
  .stores h2 em { color:var(--accent);font-style:normal; }
  .stores .btn { display:inline-flex;margin-top:25px; }
  .store-grid { display:grid;gap:14px; }
  .store-option { padding:25px;border:1px solid var(--border);border-radius:24px;background:var(--card2);display:grid;gap:8px; }
  .store-option strong { font:800 32px/1.1 var(--font-d); }
  .store-state { display:inline-flex;width:max-content;border-radius:999px;padding:6px 10px;background:#e2eb3a18;color:var(--accent);font-size:12px;font-weight:700; }
  .store-option p { color:var(--sub);font-size:14px;max-width:38ch; }
  @media(min-width:850px){.stores>.wrap{grid-template-columns:1fr .85fr;gap:70px}}
  @media(max-width:600px){.share-card{transform:none;min-height:280px;padding:28px}.stores h2{font-size:52px}}
  :focus-visible { outline:3px solid var(--accent);outline-offset:4px; }