/* ============================================================
   v8.1 · Terminal Pixel 8-bit (cyber-virus) — El Virus "Rojo"
   CRT verde fósforo sobre negro, fuente pixel, scanlines, cursor.
   Cambios: hero full-bleed · popup · productos ×2 · horóscopo toggle + 5 productos.
   ============================================================ */
:root{
  --negro:#0A0E0A; --panel:#0e160e; --verde:#39FF14; --verde-dim:#1f7a16; --rojo:#FF3B30; --ambar:#FFB000; --texto:#C8FFC0; --linea:#1f3d1f;
  --pixel:'Press Start 2P',monospace; --cuerpo:'VT323',monospace; --radio:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth} html,body{overflow-x:clip}
body{background:var(--negro);color:var(--texto);font-family:var(--cuerpo);font-size:1.25rem;line-height:1.5}
/* Scanlines CRT */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px)}
img{max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--cuerpo);color:var(--verde);line-height:1.1;text-shadow:0 0 6px rgba(57,255,20,.5)}
.contenedor{max-width:1120px;margin:0 auto;padding:0 20px}
.ico{width:16px;height:16px}

/* Nav */
.barra{position:sticky;top:0;z-index:30;background:var(--negro);border-bottom:2px solid var(--verde)}
.barra .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:.8rem;color:var(--verde);text-decoration:none;text-shadow:0 0 8px rgba(57,255,20,.6)}
.marca img{height:40px;width:auto;image-rendering:pixelated}
.menu{display:flex;gap:4px;flex-wrap:wrap;list-style:none}
.menu a{display:inline-block;font-family:var(--cuerpo);font-size:1.1rem;text-decoration:none;color:var(--texto);padding:6px 12px;border:1px solid transparent}
.menu a::before{content:"> ";color:var(--verde-dim)}
.menu a:hover{border-color:var(--verde);color:var(--verde)}
.menu a.activo{color:var(--negro);background:var(--verde)}
.menu a.activo::before{color:var(--negro)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--pixel);font-size:.7rem;line-height:1.4;text-decoration:none;cursor:pointer;
  border:2px solid var(--verde);border-radius:0;padding:12px 16px;background:var(--negro);color:var(--verde);box-shadow:4px 4px 0 var(--verde-dim);transition:all .1s}
.btn:hover{background:var(--verde);color:var(--negro);box-shadow:4px 4px 0 var(--rojo)}
.btn:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.btn-rojo{border-color:var(--rojo);color:var(--rojo);box-shadow:4px 4px 0 #7a1410}.btn-rojo:hover{background:var(--rojo);color:var(--negro)}
.btn-verde{border-color:var(--verde);color:var(--verde)} .btn.peque{padding:8px 10px;font-size:.6rem}

/* Títulos / chips */
.etiqueta-seccion{display:inline-block;font-family:var(--pixel);font-size:1rem;color:var(--negro);background:var(--verde);padding:10px 16px;box-shadow:4px 4px 0 var(--verde-dim)}
.etiqueta-seccion::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chip{display:inline-block;font-family:var(--pixel);font-size:.55rem;background:var(--rojo);color:var(--negro);padding:5px 8px}
.tarjeta{background:var(--panel);border:2px solid var(--verde-dim);border-radius:0;overflow:hidden}

/* Hero full-bleed */
.hero{width:100vw;margin-left:calc(50% - 50vw);position:relative;border-top:2px solid var(--verde);border-bottom:2px solid var(--verde)}
.hero img{display:block;width:100%;height:auto}
.hero .cap{position:absolute;left:18px;bottom:18px;background:var(--negro);color:var(--verde);border:2px solid var(--verde);
  font-family:var(--pixel);font-size:1rem;padding:10px 16px;text-shadow:0 0 8px rgba(57,255,20,.6)}
.hero .cap::before{content:"> "}

/* Inicio */
.grid-home{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start;padding:24px 0 36px}
aside.lateral{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px}
.chiste-destacado img{width:100%;height:300px;object-fit:cover;border-bottom:2px solid var(--verde-dim)}
.chiste-destacado .cuerpo{padding:14px 18px}.chiste-destacado h3{font-size:1.9rem}
.chiste-destacado p{color:var(--texto);margin:6px 0 14px}
.enlace{color:var(--ambar);font-weight:700;text-decoration:underline}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.chiste-mini img{width:100%;height:140px;object-fit:cover;border-bottom:2px solid var(--verde-dim)}
.chiste-mini .cuerpo{padding:10px 12px}.chiste-mini h4{font-size:1.4rem}.chiste-mini p{font-size:1rem;color:var(--texto);opacity:.85;margin-top:2px}
.cartel{display:block;cursor:pointer;transition:transform .1s}
.cartel img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 10px rgba(57,255,20,.35))}
.cartel:hover{transform:translate(-2px,-2px)}
.lprod{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:var(--panel);border:2px solid var(--verde-dim);padding:10px}
.lprod-img{width:56px;height:56px;border:1px solid var(--verde-dim);display:grid;place-items:center;font-size:1.5rem;background:var(--negro)}
.lprod-body h5{font-family:var(--cuerpo);font-size:1.2rem;color:var(--verde)}.lprod-body small{font-size:.95rem;color:var(--texto);opacity:.8;display:block;margin:0 0 6px}

/* Productos */
.cabecera-productos{display:grid;grid-template-columns:1fr 600px;gap:28px;align-items:center;margin:26px 0}
.cabecera-productos h1{font-family:var(--pixel);font-size:1.3rem;line-height:1.5;color:var(--verde)}
.cabecera-productos p{color:var(--texto);margin:14px 0 0;max-width:46ch}
.imagen-puesto{margin:0;border:2px solid var(--verde);box-shadow:6px 6px 0 var(--verde-dim)}
.imagen-puesto img{width:100%;height:auto;display:block}
#grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;padding-bottom:36px}
.pcard{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--verde-dim)}
.pcard-img{height:148px;border-bottom:2px solid var(--verde-dim);display:grid;place-items:center;font-size:2.4rem;background:var(--negro)}
.pcard-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard-title{font-family:var(--cuerpo);font-size:1.3rem;color:var(--verde)}.pcard-desc{font-size:1rem;color:var(--texto);opacity:.8}
.pcard-price{font-family:var(--pixel);color:var(--ambar);font-size:.9rem;margin:4px 0}
.pcard .btn{margin-top:auto;width:100%}

/* Horóscopo */
.grid-horoscopo{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start;padding-bottom:36px}
.lateral-horoscopo{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px}
.titulo-lateral{font-family:var(--pixel);font-size:.8rem;color:var(--verde)}
.ranking{list-style:none;display:flex;flex-direction:column;gap:10px}
.signo{background:var(--panel);border:2px solid var(--verde-dim);overflow:hidden}
.signo-cab{width:100%;display:grid;grid-template-columns:48px 46px 1fr 24px;gap:12px;align-items:center;background:none;border:0;cursor:pointer;padding:10px 12px;font:inherit;text-align:left;color:inherit}
.signo-pos{font-family:var(--pixel);font-size:.85rem;width:42px;height:42px;display:grid;place-items:center;background:var(--verde);color:var(--negro)}
.signo:nth-child(1) .signo-pos{background:var(--rojo)}.signo:nth-child(2) .signo-pos{background:var(--ambar)}.signo:nth-child(3) .signo-pos{background:var(--verde)}
.signo-img{width:44px;height:44px;object-fit:contain}
.signo-nombre{font-family:var(--cuerpo);font-size:1.4rem;color:var(--verde)}
.signo-chevron{justify-self:end;color:var(--verde);transition:transform .2s}.signo.abierto .signo-chevron{transform:rotate(180deg)}
.signo-cab:focus-visible{outline:2px solid var(--ambar);outline-offset:-2px}
.signo-desc{max-height:0;overflow:hidden;transition:max-height .3s ease}
.signo-desc.abierto{max-height:320px;border-top:2px solid var(--verde-dim)}
.signo-desc p{padding:12px 14px;color:var(--texto)}
.imagen-lateral{background:var(--panel);border:2px solid var(--verde);box-shadow:6px 6px 0 var(--verde-dim);padding:10px}
.imagen-lateral img{width:100%;height:auto;display:block}
.imagen-lateral .pie-img{font-family:var(--pixel);font-size:.7rem;text-align:center;margin-top:10px;color:var(--ambar)}

/* Popup */
.modal-baul{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.modal-baul[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.75);opacity:0;transition:opacity .2s}
.modal-baul.abierto .modal-scrim{opacity:1}
.modal-caja{position:relative;max-width:420px;width:100%;background:var(--panel);border:2px solid var(--verde);box-shadow:0 0 24px rgba(57,255,20,.4);
  padding:22px;text-align:center;transform:translateY(12px);opacity:0;transition:transform .2s,opacity .2s}
.modal-baul.abierto .modal-caja{transform:none;opacity:1}
.modal-caja img{width:160px;height:auto;margin:0 auto 8px}
.modal-caja h2{font-family:var(--pixel);font-size:1rem;color:var(--verde)}
.modal-caja p{color:var(--texto);margin:8px 0 16px}
.modal-cerrar{position:absolute;top:6px;right:8px;width:34px;height:34px;border:2px solid var(--rojo);background:var(--negro);color:var(--rojo);font-family:var(--pixel);font-size:.7rem;cursor:pointer}

/* Demo */
.demo-barra{position:fixed;right:14px;bottom:14px;z-index:70;display:flex;gap:8px}
.demo-barra button{font-family:var(--cuerpo);font-size:1rem;border:2px solid var(--verde);background:var(--negro);color:var(--verde);padding:6px 12px;cursor:pointer}

/* Pie */
.pie{margin-top:8px;background:#060906;color:var(--texto);border-top:2px solid var(--verde-dim)}
.franja-tricolor{height:8px;background:linear-gradient(90deg,#C8102E 0 33.33%,#FFC400 33.33% 66.66%,#6A1B9A 66.66% 100%)}
.pie .contenedor{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.pie a{color:var(--verde);text-decoration:none;margin-right:14px}.pie a:hover{text-shadow:0 0 8px rgba(57,255,20,.6)}

@media (max-width:860px){
  .grid-home,.grid-horoscopo,.cabecera-productos{grid-template-columns:1fr}
  aside.lateral,.lateral-horoscopo{position:static}.dos-col{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.etiqueta-seccion::after{content:""}}

/* ===== Menu responsive + transparencia ===== */

.barra{transition:background .25s ease,box-shadow .25s ease}
.menu-toggle span{display:block;width:24px;height:3px;border-radius:2px;transition:transform .2s,opacity .2s}
.barra.menu-abierto .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.barra.menu-abierto .menu-toggle span:nth-child(2){opacity:0}
.barra.menu-abierto .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.barra.scrolled{background:rgba(10,14,10,.64);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:40px;padding:0 9px;cursor:pointer;background:var(--negro);border:2px solid var(--verde);border-radius:0}
.menu-toggle span{background:var(--verde)}
.menu-toggle:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
@media (max-width:1120px){
 .menu-toggle{display:flex;margin-left:auto}
 .menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease,visibility .25s;pointer-events:none;gap:0;padding:0;background:var(--panel);border:2px solid var(--verde)}
 .barra.menu-abierto .menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
 .menu li{width:100%}
 .menu a{display:block;width:100%;padding:12px 16px;color:var(--verde);font-family:var(--cuerpo);font-size:1.15rem;border-bottom:1px solid var(--verde-dim)}
}


/* ===== Aparición al scroll + hover (Terminal Pixel) ===== */
.reveal-on .reveal{opacity:0;transform:translateY(14px);transition:opacity .25s steps(3),transform .3s steps(4)}
.reveal-on .reveal.is-visible{opacity:1;transform:none}
.chiste-link,.pcard,.lprod{transition:transform .1s,box-shadow .1s}
.chiste-link:hover,.pcard:hover,.lprod:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--verde)}
.signo-cab{transition:background .1s}.signo-cab:hover{background:rgba(57,255,20,.10)}

/* ===== Barra de scroll (Terminal Pixel): bloque verde fósforo sobre negro CRT ===== */
html{scrollbar-width:auto;scrollbar-color:#1f7a16 #0A0E0A}
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:#0A0E0A;border-left:1px solid #1f3d1f}
::-webkit-scrollbar-thumb{background:#1f7a16;border:2px solid transparent;border-radius:0;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#39FF14;background-clip:padding-box}
::-webkit-scrollbar-corner{background:#0A0E0A}

/* Botón "Comprar en Amazon": Press Start 2P es demasiado ancha para el texto largo
   en la lateral estrecha (se salía 38px). SOLO este botón usa la fuente de cuerpo
   (VT323, también pixel pero más estrecha y legible) → entra en una línea. */
.lprod .btn.btn-amazon{font-family:var(--cuerpo);font-size:.92rem;letter-spacing:0;line-height:1;gap:.3em}
/* Escaparate y aside del horóscopo (anchos): texto y carrito grandes (cabe holgado) */
.pcard .btn.btn-amazon{font-family:var(--cuerpo);font-size:1.06rem;letter-spacing:0;line-height:1;gap:.4em}
@media (min-width:921px){
  .lateral-horoscopo .lprod .btn.btn-amazon{font-family:var(--cuerpo);font-size:1.06rem;letter-spacing:0;line-height:1;gap:.4em}
}


/* ===== Compartir (v8 pixel 8-bit — CRT, scanlines, cursor parpadeante) ===== */
.compartir>summary.compartir-trigger{border:2px solid var(--verde-dim);border-radius:0;background:var(--panel);color:var(--verde);opacity:1;text-shadow:0 0 6px rgba(57,255,20,.6)}
.compartir>summary.compartir-trigger:hover,.compartir[open]>summary.compartir-trigger{border-color:var(--verde);box-shadow:0 0 12px rgba(57,255,20,.55)}
.compartir-panel{background:var(--panel);background-image:repeating-linear-gradient(rgba(57,255,20,.06) 0 1px, transparent 1px 3px);border:2px solid var(--verde);border-radius:0;box-shadow:4px 4px 0 var(--verde-dim),0 0 14px rgba(57,255,20,.25);padding:8px}
.compartir-panel-cab{border-bottom:1px solid var(--verde-dim);padding-bottom:6px;margin-bottom:4px}
.compartir-panel-tit{font-family:var(--pixel);font-size:.6rem;color:var(--verde);text-shadow:0 0 6px rgba(57,255,20,.7)}
.compartir-panel-tit::after{content:"_";margin-left:2px;animation:evrcursor 1s steps(1) infinite}
@keyframes evrcursor{50%{opacity:0}}
.compartir-cerrar{color:var(--verde)}
.compartir-item{font-family:var(--cuerpo);font-size:1.1rem;color:var(--texto);border-radius:0}
.compartir-item:hover,.compartir-item:focus-visible{background:rgba(57,255,20,.12);color:var(--verde)}
.compartir-ico{color:var(--verde)}
.compartir-aviso{font-family:var(--cuerpo);font-size:1.05rem;color:var(--ambar)}