:root {
  --bull:#7B5E4B; --pig:#F4C8C4; --orange:#E8905D; --cream:#FDFBF7; --ink:#000;
}
html { scroll-behavior:smooth; }
body {
  background-color:var(--cream); color:#1f2937;
  /* Patrón de carnes + velo crema (sube/baja el .5 para ver el patrón más o menos fuerte) */
  background-image:linear-gradient(rgba(253,251,247,.5), rgba(253,251,247,.5)), url('img/fondo-patron.jpg');
  background-size:auto, 420px 420px;
}
@media (max-width:640px) { body { background-size:auto, 300px 300px; } }
section[id] { scroll-margin-top:84px; }

.stroke-text { text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,4px 4px 0 var(--bull); }
.brutal { box-shadow:6px 6px 0 0 #000; border:3px solid #000; }

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Bangers',cursive; letter-spacing:.04em; font-size:1.6rem; color:#000;
  padding:.7rem 1.5rem; border-radius:16px; border:3px solid #000; box-shadow:5px 5px 0 0 #000;
  transition:transform .12s, box-shadow .12s, background-color .12s; text-decoration:none; cursor:pointer;
}
.btn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 0 #000; }
.btn:active { transform:translate(3px,3px); box-shadow:2px 2px 0 0 #000; }
.btn-orange { background:var(--orange); } .btn-orange:hover { background:var(--bull); color:#fff; }
.btn-pink { background:var(--pig); } .btn-pink:hover { background:#fff; }
.btn-white { background:#fff; } .btn-white:hover { background:var(--pig); }
.btn-black { background:#000; color:#fff; } .btn-black:hover { background:var(--bull); }
.btn-sm { font-size:1.2rem; padding:.45rem 1.1rem; box-shadow:3px 3px 0 0 #000; border-radius:99px; }
.btn-off { opacity:.55; cursor:not-allowed; } .btn-off:hover { transform:none; box-shadow:5px 5px 0 0 #000; background:inherit; color:#000; }
.btn-off small { font-family:'Nunito',sans-serif; font-size:.75rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid #000; outline-offset:3px; }

/* Tarjetas */
.card { position:relative; overflow:hidden; background:#fff; border:3px solid #000; border-radius:24px; box-shadow:6px 6px 0 0 #000; padding:2rem 1.5rem 1.5rem; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:10px; background:var(--c,var(--orange)); border-bottom:3px solid #000; }
.card .big { color:var(--c,var(--orange)); }
.chip { display:inline-block; background:#000; color:#fff; font-weight:900; border-radius:99px; padding:.3rem 1rem; font-size:.9rem; }

/* Caja del contrato */
.ca-box { background:#fff; border:3px solid #000; border-radius:18px; box-shadow:5px 5px 0 0 #000; padding:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.ca-box code { flex:1 1 220px; word-break:break-all; color:var(--bull); font-weight:800; }

/* Mascota */
.mascot { border:8px solid #000; border-radius:28px; box-shadow:6px 6px 0 0 #000; background:#fff; transform:rotate(3deg); transition:transform .3s; }
.mascot:hover { transform:rotate(0); }
.float { animation:float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }

/* Aviso "¡Copiado!" */
#toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,30px); opacity:0; pointer-events:none; z-index:90;
  background:var(--orange); color:#000; font-family:'Bangers',cursive; font-size:1.7rem; padding:.5rem 1.6rem; border:3px solid #000; border-radius:99px; box-shadow:4px 4px 0 0 #000; transition:.25s; }
#toast.show { opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce) { .float { animation:none; } html { scroll-behavior:auto; } .btn, .mascot { transition:none; } }

/* ===== El Origen del Meme (prueba social sin enlaces externos) ===== */
.chip-orange { background:var(--orange); color:#000; border:2px solid #000; }
.proof-track { display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; list-style:none; margin:0 -1rem; padding:.6rem 1.25rem 1.6rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.proof-track::-webkit-scrollbar { display:none; }
.proof-item { flex:0 0 76%; max-width:340px; scroll-snap-align:center; }
.proof-card { position:relative; display:block; width:100%; padding:0; background:#000; border:4px solid #fff; border-radius:22px; overflow:hidden; box-shadow:6px 6px 0 0 var(--orange); cursor:zoom-in; transition:transform .15s; }
.proof-card:hover { transform:translate(-2px,-2px) rotate(-1deg); }
.proof-card img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; }
.proof-badge { position:absolute; top:10px; left:10px; background:var(--orange); color:#000; font-weight:900; font-size:.85rem; border:2px solid #000; border-radius:99px; padding:.15rem .7rem; }
.proof-sample { position:absolute; top:10px; right:10px; background:#000; color:#fff; font-weight:900; font-size:.62rem; letter-spacing:.06em; border:2px solid #fff; border-radius:6px; padding:.15rem .4rem; }
.proof-stat { position:absolute; left:10px; bottom:10px; background:#fff; color:#000; font-weight:900; border:2px solid #000; border-radius:99px; padding:.25rem .8rem; }
@media (min-width:768px) {
  .proof-track { display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; overflow:visible; margin:0; padding:.6rem 0 1.6rem; }
  .proof-item { max-width:none; }
}
.lore-box { background:var(--cream); color:#000; border:3px solid #000; border-radius:24px; box-shadow:6px 6px 0 0 var(--orange); padding:1.4rem 1.2rem; max-width:44rem; margin:0 auto; text-align:center; }
.lore-box p { font-weight:800; font-size:1.1rem; line-height:1.5; margin:.35rem 0; }
.lore-box p:last-child { color:var(--bull); font-size:1.2rem; }
@media (min-width:768px) { .lore-box { padding:2rem; } .lore-box p { font-size:1.35rem; } .lore-box p:last-child { font-size:1.45rem; } }
.btn-xl { font-size:clamp(1.6rem, 6.5vw, 2.4rem); padding:1rem 1.6rem; width:100%; max-width:520px; text-align:center; line-height:1.1; }

/* Ampliar captura (sin salir de la web) */
#zoom { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.92); }
#zoom.open { display:flex; }
#zoom img { max-width:100%; max-height:86vh; border:4px solid #fff; border-radius:20px; box-shadow:6px 6px 0 0 var(--orange); }
#zoom button { position:absolute; top:14px; right:14px; width:48px; height:48px; border-radius:99px; background:var(--orange); color:#000; font-weight:900; font-size:1.4rem; border:3px solid #000; cursor:pointer; }