/* ===========================================================
   SUPERTHINGS ADVENTURES: KAZOOM POWER — estilos (cómic Roblox)
   Scoped bajo .str. Assets en assets/str/.
   =========================================================== */

.str {
  --r: #e3000f; --r-osc: #9c0009;
  --b: #1f9fe0; --b-osc: #0b3a66;
  --y: #ffd200;
  --ink: #0b2a55;
  font-family: "Nunito", system-ui, sans-serif; color: #0b2a55;
}

.str .str-title {
  font-family: "Bangers", "Baloo 2", cursive;
  font-size: clamp(2.2rem, 6.5vw, 4.4rem); letter-spacing: .04em; text-align: center; text-transform: uppercase;
  color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 20px rgba(31,159,224,.4);
}
.str .str-title .ray { color: var(--y); -webkit-text-stroke-color: var(--r-osc); }

.str-section { padding-block: clamp(48px, 7vw, 92px); position: relative; overflow: hidden; }
.str-inner { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 22px; position: relative; z-index: 2; }

.str-bg-city { background: #1f9fe0 url("../str/bg-city.png") center / cover; }
.str-bg-burst { background: #c2000d url("../str/bg-burst.png") center / cover; }
.str-bg-amarillo { background: #ffd200 url("../str/bg-amarillo.svg") center / cover; }
.str-bg-dark { background: radial-gradient(120% 100% at 50% 0%, #143a63, #061425); }

/* ---------- HERO ---------- */
.str-hero { text-align: center; padding-block: clamp(28px, 5vw, 56px); }
.str-hero__logo { width: min(620px, 92%); margin: 0 auto 6px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); animation: str-bob 4.5s ease-in-out infinite; }
@keyframes str-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.str-hero__sub { font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.35rem); color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 14px rgba(0,0,0,.5); max-width: 60ch; margin: 8px auto 0; }
.str-hero__sub .hl { color: var(--y); }

/* ---------- Botones ---------- */
.str-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Bangers", cursive; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 28px; border-radius: 12px; border: 3px solid var(--ink); cursor: pointer;
  box-shadow: 0 6px 0 var(--ink); transition: transform .2s, box-shadow .2s; color: #fff;
}
.str-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--ink); }
.str-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.str-btn--rojo { background: var(--r); }
.str-btn--verde { background: #2bbd4e; }      /* jugar / roblox */
.str-btn--discord { background: #5865F2; }
.str-btn--amarillo { background: var(--y); color: var(--ink); }
.str-btn--ghost { background: rgba(255,255,255,.12); }

/* ---------- HÉROES ---------- */
.str-heroes { display: flex; justify-content: center; gap: clamp(20px, 5vw, 60px); flex-wrap: wrap; margin-top: 34px; }
.str-hero-card { text-align: center; }
.str-hero-card img {
  width: clamp(150px, 22vw, 230px); filter: drop-shadow(0 14px 18px rgba(0,0,0,.4));
  animation: str-float 5s ease-in-out infinite; transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.str-hero-card:nth-child(2) img { animation-delay: .5s; }
.str-hero-card:nth-child(3) img { animation-delay: 1s; }
.str-hero-card:hover img { transform: scale(1.08) rotate(3deg); }
.str-hero-card figcaption { margin-top: 8px; font-family: "Bangers", cursive; font-size: 1.5rem; letter-spacing: .03em; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
@keyframes str-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- TIENDA (camisetas Roblox) ---------- */
.str-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 26px); margin-top: 34px; }
.str-prod {
  background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 16px; text-align: center;
  box-shadow: 0 10px 0 rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  display: flex; flex-direction: column;
}
.str-prod:hover { transform: translateY(-6px); box-shadow: 0 16px 0 rgba(0,0,0,.25); }
.str-prod__img { background: #eaf4ff; border-radius: 12px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.str-prod__img img { width: 82%; }
.str-prod h3 { font-family: "Bangers", cursive; letter-spacing: .03em; color: var(--ink); font-size: 1.3rem; margin: 12px 0 4px; }
.str-prod p { color: #5a6072; font-weight: 700; font-size: .9rem; margin-bottom: 12px; }
.str-prod .str-btn { width: 100%; justify-content: center; margin-top: auto; font-size: 1rem; }

/* ---------- Tarjetas de enlace (YouTube / Discord) ---------- */
.str-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.str-link-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  border-radius: 16px; border: 3px solid var(--ink); color: #fff; text-align: left;
  box-shadow: 0 10px 0 rgba(0,0,0,.3); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.str-link-card:hover { transform: translateY(-5px); }
.str-link-card.yt { background: #c4302b; }
.str-link-card.dc { background: #5865F2; }
.str-link-card__ico { font-size: 2.4rem; flex: none; }
.str-link-card h3 { font-family: "Bangers", cursive; letter-spacing: .03em; font-size: 1.4rem; }
.str-link-card p { font-size: .92rem; opacity: .92; }

/* ---------- CTA Roblox ---------- */
.str-play {
  max-width: 720px; margin: 30px auto 0; text-align: center;
  background: linear-gradient(180deg, #1d2330, #0e1420); border: 3px solid var(--ink); border-radius: 22px;
  padding: clamp(26px, 5vw, 44px); box-shadow: 0 16px 0 rgba(0,0,0,.4); color: #fff;
}
.str-play h3 { font-family: "Bangers", cursive; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .03em; }
.str-play p { color: #cfe3f5; margin: 8px auto 20px; max-width: 48ch; font-weight: 700; }

/* ---------- HÉROES (rejilla 3x3 limpia, sin caja) ---------- */
.str-heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 26px); margin-top: 34px; max-width: 720px; margin-inline: auto; }
.str-hero-card { background: none; border: 0; padding: 6px; cursor: pointer; }
.str-hero-card img {
  width: 100%; max-width: 170px; margin-inline: auto; display: block;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.4));
  animation: str-float 5s ease-in-out infinite; transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.str-hero-card:nth-child(3n+2) img { animation-delay: .4s; }
.str-hero-card:nth-child(3n) img { animation-delay: .8s; }
.str-hero-card:hover img { transform: scale(1.1) rotate(3deg); }
.str-hero-card figcaption { margin-top: 6px; font-family: "Bangers", cursive; font-size: 1.25rem; letter-spacing: .03em; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }

/* ---------- GALERÍA (carrusel) ---------- */
.str-carousel { position: relative; max-width: 900px; margin: 34px auto 0; border: 5px solid var(--ink); border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 14px 0 rgba(0,0,0,.35); }
.str-carousel__track { display: flex; transition: transform .55s cubic-bezier(.45,0,.2,1); }
.str-carousel__slide { min-width: 100%; aspect-ratio: 16/9; }
.str-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.str-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer;
  background: var(--y); color: var(--ink); font-size: 1.6rem; font-weight: 900; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 4px 0 var(--ink); transition: transform .15s;
}
.str-carousel__btn:hover { transform: translateY(-50%) scale(1.1); }
.str-carousel__btn.prev { left: 12px; }
.str-carousel__btn.next { right: 12px; }
.str-dots { display: flex; gap: 9px; justify-content: center; margin-top: 16px; }
.str-dots button { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.str-dots button.active { background: var(--y); transform: scale(1.2); }

/* ---------- VALORACIÓN ---------- */
.str-rate { text-align: center; }
.str-stars { display: inline-flex; gap: 6px; margin-top: 6px; }
.str-stars button { background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; color: #2a4163; transition: transform .15s, color .15s, text-shadow .15s; }
.str-stars button.on { color: var(--y); text-shadow: 0 0 14px rgba(255,210,0,.7); }
.str-stars button:hover { transform: scale(1.22) rotate(-6deg); }
.str-rate__msg { margin-top: 14px; font-weight: 800; color: #fff; min-height: 1.4em; text-shadow: 0 2px 0 var(--ink); }
.str-rate__send { margin-top: 14px; }

/* ---------- Lightbox genérico (héroes + galería) ---------- */
.str-lb { position: fixed; inset: 0; z-index: 1001; background: rgba(4,10,20,.92); backdrop-filter: blur(5px); display: none; place-items: center; padding: 24px; }
.str-lb.abierto { display: grid; animation: str-fade .25s ease; }
@keyframes str-fade { from { opacity: 0; } to { opacity: 1; } }
.str-lb__card { text-align: center; max-width: min(900px, 94vw); }
.str-lb__card img { max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 12px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation: str-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes str-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.str-lb__name { margin-top: 12px; font-family: "Bangers", cursive; font-size: 2rem; letter-spacing: .03em; color: var(--y); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.str-lb__audio {
  margin-top: 12px; cursor: pointer; font-family: "Bangers", cursive; font-size: 1.1rem; letter-spacing: .03em;
  color: var(--ink); background: var(--y); padding: 9px 20px; border-radius: 10px; border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.str-lb__audio:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.str-lb__audio.sonando { animation: str-pulse-btn .7s ease-in-out infinite; }
@keyframes str-pulse-btn { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.str-lb__close { position: absolute; top: 22px; right: 28px; font-size: 2.4rem; color: #fff; background: none; border: 0; cursor: pointer; }

@media (max-width: 760px) {
  .str-shop { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .str-cards { grid-template-columns: 1fr; }
}