/* ===========================================================
   CRIATURAS DE LA BASURA — estilos propios (tema verde slime)
   Recreación del micrositio de Canva, scoped bajo .cb
   =========================================================== */

.cb {
  --cb-verde: #7bc043;
  --cb-verde-osc: #2f6b1f;
  --cb-lima: #aef03a;
  --cb-crema: #f7ecc0;
  --cb-crema-2: #efe0a3;
  --cb-morado: #6a4bd6;
  --cb-negro: #141414;
  font-family: "Nunito", system-ui, sans-serif;
  color: #1c1c1c;
}

/* Tipografía slime para títulos */
.cb .slime {
  font-family: "Luckiest Guy", "Baloo 2", cursive;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #d6ff5e 0%, #8fd83a 45%, #5aa522 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #173d0e;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 18px rgba(120,220,60,.4);
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.1;
  text-align: center;
}

/* ---------- Secciones full-bleed ---------- */
.cb-section { padding-block: clamp(48px, 7vw, 90px); position: relative; overflow: hidden; }
.cb-inner { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 22px; position: relative; z-index: 2; }

.cb-bg-green {
  background: #6fb53a url("../cb/bg-green.png") center / cover;
  background-attachment: fixed;
}
.cb-bg-purple {
  background: var(--cb-morado) url("../cb/bg-purple.png") center / cover;
  background-attachment: fixed;
}
.cb-bg-crema {
  background: var(--cb-crema);
  position: relative;
}

/* ---------- HERO ---------- */
.cb-hero { text-align: center; padding-block: clamp(40px, 6vw, 70px); }
.cb-hero__title {
  width: min(680px, 92%);
  margin: 0 auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
  animation: cb-bob 4s ease-in-out infinite;
}
@keyframes cb-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }

.cb-hero__sub {
  margin-top: 18px;
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: #fff;
  text-shadow: 0 2px 0 #173d0e, 0 0 14px rgba(0,0,0,.5);
}

/* ---------- VÍDEOS / EPISODIOS embeds ---------- */
.cb-video-wrap { max-width: 860px; margin: 34px auto 0; }
.cb-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid #173d0e;
  box-shadow: 0 16px 0 rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.15);
  background: #000;
}
.cb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cb-note {
  text-align: center; margin-top: 16px; color: #fff;
  font-weight: 700; text-shadow: 0 2px 0 #173d0e;
}
.cb-bg-crema .cb-note { color: #5a4a12; text-shadow: none; }

/* ---------- PERSONAJES ---------- */
.cb-featured {
  display: flex; justify-content: center; gap: clamp(30px, 8vw, 90px);
  margin: 40px 0 30px; flex-wrap: wrap;
}
.cb-featured figure { text-align: center; cursor: pointer; }
.cb-featured img {
  width: clamp(150px, 22vw, 220px);
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.3));
  animation: cb-float 5s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-featured figure:nth-child(2) img { animation-delay: .6s; }
.cb-featured figure:hover img { transform: scale(1.08) rotate(3deg); }
.cb-featured figcaption {
  margin-top: 6px; font-family: "Luckiest Guy", cursive;
  font-size: 1.5rem; color: #ec5fd0; -webkit-text-stroke: 2px #5a1f4f; paint-order: stroke fill;
}
.cb-featured figure:first-child figcaption { color: #8fd83a; -webkit-text-stroke-color: #173d0e; }
.cb-badge-bs {
  display: inline-block; font-family: "Luckiest Guy", cursive; font-size: .9rem;
  color: #173d0e; background: #aef03a; padding: 2px 10px; border-radius: 8px;
  border: 2px solid #173d0e; margin-bottom: 6px;
}

@keyframes cb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.cb-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 2vw, 22px);
  margin-top: 20px;
}
.cb-char {
  text-align: center; cursor: pointer; background: none; border: 0; padding: 6px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cb-char img {
  width: 100%; max-width: 110px; margin: 0 auto;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}
.cb-char__name {
  display: block; margin-top: 4px;
  font-family: "Luckiest Guy", cursive; font-size: clamp(.7rem, 1.4vw, .95rem);
  color: #6fae2f; -webkit-text-stroke: 1.5px #173d0e; paint-order: stroke fill;
}
.cb-char__num {
  position: absolute; transform: translate(-6px,-6px);
  font-family: "Luckiest Guy", cursive; font-size: .8rem; color: #fff;
  background: #6fae2f; border: 2px solid #173d0e; border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center;
}
.cb-char:hover { transform: translateY(-8px) scale(1.12) rotate(-3deg); }
.cb-char:hover .cb-char__name { color: #aef03a; }

/* ---------- Tarjetas de enlace (Redes / Tienda) ---------- */
.cb-link-card {
  display: flex; align-items: stretch; gap: 0;
  max-width: 560px; margin: 34px auto 0;
  background: #0d0d0d; border-radius: 14px; overflow: hidden;
  border: 4px solid #173d0e;
  box-shadow: 0 14px 0 rgba(0,0,0,.3);
  text-align: left; color: #fff;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.cb-link-card:hover { transform: translateY(-6px); box-shadow: 0 20px 0 rgba(0,0,0,.3); }
.cb-link-card__img { width: 150px; flex: none; object-fit: cover; background: #6fb53a; }
.cb-link-card__body { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.cb-link-card__body h3 { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.25rem; margin-bottom: 6px; }
.cb-link-card__body p { font-size: .96rem; color: #cfcfcf; line-height: 1.45; }
.cb-link-card__tag {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; color: #ff4d4d;
}
.cb-link-card__tag.shop { color: #aef03a; }

/* ---------- Lightbox ---------- */
.cb-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,20,5,.88); backdrop-filter: blur(4px);
  display: none; place-items: center; padding: 24px;
}
.cb-lightbox.abierto { display: grid; animation: cb-fade .25s ease; }
@keyframes cb-fade { from { opacity: 0; } to { opacity: 1; } }
.cb-lightbox__card {
  text-align: center; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  background: rgba(12,22,6,.55); border: 3px solid #173d0e; border-radius: 24px;
  padding: 28px 28px 34px;
}
.cb-lightbox__card img {
  width: min(440px, 80vw); margin: 0 auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.6));
  animation: cb-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cb-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cb-lightbox__name { margin-top: 14px; font-family: "Luckiest Guy", cursive; font-size: 2.4rem; color: #aef03a; -webkit-text-stroke: 2px #173d0e; paint-order: stroke fill; }
.cb-lightbox__desc {
  margin: 14px auto 0; max-width: 52ch;
  color: #f0f5e6; font-size: 1.05rem; line-height: 1.6; font-weight: 600;
}
.cb-audio-btn {
  margin-top: 14px; cursor: pointer;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1rem;
  color: #173d0e; background: #aef03a;
  padding: 10px 22px; border-radius: 999px; border: 3px solid #173d0e;
  box-shadow: 0 5px 0 #173d0e; transition: transform .15s, box-shadow .15s;
}
.cb-audio-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #173d0e; }
.cb-audio-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #173d0e; }
.cb-audio-btn.sonando { animation: cb-pulse-btn .7s ease-in-out infinite; }
@keyframes cb-pulse-btn { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.cb-lightbox__close {
  position: absolute; top: 22px; right: 28px; font-size: 2.4rem; color: #fff;
  background: none; border: 0; cursor: pointer; line-height: 1;
}

/* ---------- Selector de serie ---------- */
.cb-serie {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 28px auto 6px;
}
.cb-serie__label {
  font-family: "Luckiest Guy", cursive; font-size: 1.1rem;
  color: #5aa522; -webkit-text-stroke: 1.5px #173d0e; paint-order: stroke fill;
}
.cb-select {
  appearance: none; -webkit-appearance: none;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.05rem;
  color: #2f3a12; background: #ffd84d;
  padding: 12px 52px 12px 22px; border-radius: 12px;
  border: 3px solid #173d0e; cursor: pointer;
  box-shadow: 0 6px 0 #173d0e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23173d0e' d='M2 5l6 6 6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
  transition: transform .15s, box-shadow .15s;
}
.cb-select:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #173d0e; }
.cb-select:active { transform: translateY(3px); box-shadow: 0 2px 0 #173d0e; }

/* Mensaje "Próximamente" para Serie 2 */
.cb-soon {
  text-align: center; padding: 60px 20px; max-width: 560px; margin: 30px auto 0;
  background: rgba(255,255,255,.45); border: 3px dashed #6fae2f; border-radius: 20px;
}
.cb-soon__emoji { font-size: 3.4rem; display: block; margin-bottom: 10px; animation: cb-float 4s ease-in-out infinite; }
.cb-soon__title { font-family: "Luckiest Guy", cursive; font-size: 1.8rem; color: #6fae2f; -webkit-text-stroke: 2px #173d0e; paint-order: stroke fill; }
.cb-soon__txt { margin-top: 8px; font-weight: 700; color: #5a4a12; }
[hidden] { display: none !important; }

/* ---------- Rejilla de episodios ---------- */
.cb-eps-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 3vw, 30px); margin-top: 34px;
}
.cb-ep {
  position: relative; cursor: pointer; background: none; border: 0; padding: 0;
  border-radius: 16px; overflow: visible; text-align: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-ep:hover { transform: translateY(-6px) scale(1.02); }
.cb-ep__thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  border: 5px solid #173d0e; box-shadow: 0 12px 0 rgba(0,0,0,.3);
  background: #0a2a06;
}
.cb-ep__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cb-ep__play {
  position: absolute; inset: 0; margin: auto; width: 70px; height: 50px;
  background: rgba(220,30,30,.92); border-radius: 14px; display: grid; place-items: center;
  transition: transform .25s, background .25s;
}
.cb-ep__play::after { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.cb-ep:hover .cb-ep__play { transform: scale(1.15); background: #ff2b2b; }
.cb-ep__badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: "Luckiest Guy", cursive; font-size: .8rem; color: #173d0e;
  background: #aef03a; padding: 4px 10px; border-radius: 8px; border: 2px solid #173d0e;
  transform: rotate(4deg);
}
.cb-ep__badge.estreno { background: #ff3b3b; color: #fff; border-color: #7a0000; animation: cb-pulse 1.1s ease-in-out infinite; }
@keyframes cb-pulse { 0%,100% { transform: rotate(4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.12); } }
.cb-ep__title {
  display: block; margin-top: 12px;
  font-family: "Luckiest Guy", cursive; font-size: clamp(1rem, 2vw, 1.3rem);
  color: #aef03a; -webkit-text-stroke: 1.5px #173d0e; paint-order: stroke fill;
}

/* Lightbox de vídeo */
.cb-vlb { position: fixed; inset: 0; z-index: 1001; background: rgba(5,15,2,.92); backdrop-filter: blur(5px); display: none; place-items: center; padding: 24px; }
.cb-vlb.abierto { display: grid; animation: cb-fade .25s ease; }
.cb-vlb__inner { width: min(900px, 94vw); }
.cb-vlb__embed { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 5px solid #173d0e; box-shadow: 0 0 40px rgba(120,220,60,.4); background: #000; }
.cb-vlb__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Newsletter ---------- */
.cb-news {
  max-width: 600px; margin: 30px auto 0; text-align: center;
  background: rgba(8,30,12,.6); border: 3px solid #173d0e; border-radius: 20px;
  padding: clamp(22px, 4vw, 34px);
}
.cb-news > p { color: #eafce0; font-weight: 700; margin-bottom: 16px; }
.cb-news__row { display: flex; gap: 12px; flex-wrap: wrap; }
.cb-news input[type="email"] {
  flex: 1 1 220px; min-width: 0; font-family: "Nunito", sans-serif; font-size: 1rem;
  padding: 13px 16px; border: 3px solid #173d0e; border-radius: 12px; background: #f3ffe6; color: #143a1a;
}
.cb-news input[type="email"]:focus { outline: none; border-color: #7bc043; box-shadow: 0 0 0 3px rgba(123,192,67,.35); }
.cb-news__btn {
  cursor: pointer; font-family: "Luckiest Guy", cursive; font-size: 1.05rem; white-space: nowrap;
  color: #173d0e; background: #aef03a; padding: 13px 24px; border-radius: 12px;
  border: 3px solid #173d0e; box-shadow: 0 5px 0 #173d0e; text-transform: uppercase;
  transition: transform .15s, box-shadow .15s;
}
.cb-news__btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #173d0e; }
.cb-news__btn:active { transform: translateY(2px); box-shadow: 0 3px 0 #173d0e; }
.cb-news__btn[disabled] { opacity: .6; }
.cb-news__msg { margin-top: 12px; font-weight: 800; }
.cb-news__msg.ok { color: #aef03a; }
.cb-news__msg.err { color: #ffb3b3; }
.cb-hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- Reveal ---------- */
.cb .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.cb .reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .cb-grid { grid-template-columns: repeat(3, 1fr); }
  .cb-bg-green, .cb-bg-purple { background-attachment: scroll; }
  .cb-link-card { flex-direction: column; }
  .cb-link-card__img { width: 100%; height: 130px; }
}
@media (max-width: 420px) {
  .cb-grid { grid-template-columns: repeat(2, 1fr); }
}