/* ===== 5 trampantojos · paleta «noche de ketchup y mostaza» + el verde del secreto ===== */
:root{
  --noche:#1a1012;--noche2:#26181a;--noche3:#332022;--noche4:#4a2f2c;
  --masa:#fbf1e4;--masa2:#dbc8b6;--masa3:#a08a7a;
  --corteza:#ffb547;--rosa:#ff3f78;--amarillo:#ffc93c;--wa:#3fdb80;
  --ketchup:#ff5a3c;--secreto:#7fdc6a;
  --linea:rgba(251,241,228,.12);
}
body{background:var(--noche)}
.hB{background:radial-gradient(90% 50% at 50% 18%,rgba(255,181,71,.12),transparent 70%),var(--noche)}
.hB h1 .l:nth-child(2){font-size:.82em}
.hB h1 .serif{font-size:.44em;line-height:1}
.escena{background:radial-gradient(120% 70% at 80% 0%,rgba(255,90,60,.12),transparent 60%)}

/* chip del secreto en la foto de cada día */
.day-media .secreto{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:99px;background:rgba(26,16,18,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--masa);font-size:.88rem;border:1px solid rgba(127,220,106,.45)}
.day-media .secreto b{color:var(--secreto)}
.day-media .secreto i{font-style:normal}

/* envases del Mercadona */
.carro-mini{display:flex;align-items:center;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.carro-mini img{width:46px;height:46px;border-radius:12px;background:#fff;object-fit:contain;padding:3px;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.carro-mini span{font-family:Hand,cursive;font-weight:700;font-size:1.25rem;color:var(--amarillo);margin-left:4px;transform:rotate(-3deg)}
.carro{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.carro img{width:100%;aspect-ratio:1;border-radius:16px;background:#fff;object-fit:contain;padding:6px}
.sh-ing0{width:100%;border-radius:18px;margin-top:12px;aspect-ratio:4/5;object-fit:cover}
.aviso-casos{font-size:.82rem;color:var(--masa2);margin-top:6px}

/* hoja: lo que lleva escondido */
.sh-dentro{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin:18px 0 6px;padding:10px;border-radius:18px;background:rgba(127,220,106,.08);border:1px dashed rgba(127,220,106,.5)}
.sh-dentro img{width:96px;height:120px;object-fit:cover;border-radius:12px}
.sh-dentro b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--masa2)}
.sh-dentro .verde{display:block;font-family:Bebas,Impact,sans-serif;font-size:2rem;line-height:1;color:var(--secreto);margin:2px 0}
.sh-dentro small{color:var(--masa)}

/* ===== el juego: ¿qué lleva dentro? ===== */
.juego{background:linear-gradient(180deg,var(--noche),#23140f 45%,var(--noche))}
.trampas{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;margin:22px calc(-1*var(--gut)) 0;padding-inline:var(--gut);scrollbar-width:none}
.trampas::-webkit-scrollbar{display:none}
.trampa{position:relative;display:grid;padding:0;border:0;background:none;cursor:pointer;perspective:1200px;text-align:left;color:inherit;scroll-snap-align:center}
.trampa .cara,.trampa .dorso{grid-area:1/1;position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.2,.8,.2,1);box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.trampa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trampa .cara::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(26,16,18,.88))}
.trampa .t-nom{position:absolute;left:16px;right:16px;bottom:54px;z-index:2;font-family:Bebas,Impact,sans-serif;font-size:2.4rem;line-height:.9;color:#fff}
.trampa .toca{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;font-size:.92rem;color:var(--masa)}
.trampa .toca b{display:inline-block;margin-left:6px;padding:4px 11px;border-radius:99px;background:var(--amarillo);color:var(--noche);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;animation:latido 1.6s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.1)}}
.trampa .dorso{transform:rotateY(180deg);border:2px solid var(--secreto)}
.trampa .dorso::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(18,30,14,.92))}
.trampa .t-dentro{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;gap:4px}
.trampa .t-dentro small{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#e6f7df}
.trampa .sello{justify-self:start;font-family:Bebas,Impact,sans-serif;font-size:2.5rem;line-height:.9;padding:6px 14px 2px;border:3px solid var(--secreto);border-radius:12px;color:var(--secreto);background:rgba(18,30,14,.6);transform:rotate(-3deg)}
.trampa .exp{font-size:1rem;line-height:1.35;color:#fff}
.trampa[aria-pressed=true] .cara{transform:rotateY(-180deg)}
.trampa[aria-pressed=true] .dorso{transform:rotateY(0)}
.trampa:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px;border-radius:24px}
.juego-cuenta{margin:6px 0 0;color:var(--masa2)}
.juego-cuenta b{color:var(--secreto);font-size:1.2em}
.juego-cuenta.todo{color:var(--masa)}
.juego-cta{margin-top:18px}
@media (min-width:860px){
  .trampas{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible;margin-inline:0;padding-inline:2px}
  .trampa .t-nom{font-size:2rem}
  .trampa .sello{font-size:2rem}
  .trampa .exp{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.trampa .cara,.trampa .dorso{transition:none}.trampa .toca b{animation:none}}

/* story con 7 fotos */
.hB-bars{grid-template-columns:repeat(7,1fr);gap:3px}
.hB-dia{font-size:1.3rem;max-width:50%;white-space:normal;line-height:1.05}
.hB-coment{max-width:46%}