/* ===== Base cómica ===== */
:root {
  --obra: #FFD400;
  --asfalto: #141414;
  --ladrillo: #E8432E;
  --cielo: #2EA8FF;
  --papel: #FFF7DC;
}

html, body { overflow-x: hidden; }

.halftone {
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.14) 18%, transparent 20%),
    radial-gradient(rgba(0, 0, 0, 0.14) 18%, transparent 20%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

/* ===== Cintas de peligro ===== */
.tape-wrap {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--asfalto);
  border-bottom: 4px solid var(--asfalto);
  background: repeating-linear-gradient(45deg, var(--obra) 0 22px, var(--asfalto) 22px 44px);
  transform: rotate(-1.2deg) scale(1.03);
  margin-top: 10px;
}
.tape-bottom { transform: rotate(1.2deg) scale(1.03); margin-bottom: 14px; }

.tape-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  padding: 0.35rem 0;
  animation: scroll-x 28s linear infinite;
}
.tape-track.reverse { animation-direction: reverse; }
.tape-track span {
  background: var(--obra);
  border: 3px solid var(--asfalto);
  padding: 0 0.9rem;
  font-family: 'Bangers', cursive;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ===== Título ===== */
.comic-title {
  font-family: 'Bangers', cursive;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #fff;
  -webkit-text-stroke: 4px var(--asfalto);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--asfalto), 9px 9px 0 var(--ladrillo);
  animation: wobble 3.2s ease-in-out infinite;
}
.comic-title span:last-child { color: var(--ladrillo); }
.comic-sub {
  font-family: 'Bangers', cursive;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  -webkit-text-stroke: 1px var(--asfalto);
  color: #fff;
  text-shadow: 3px 3px 0 var(--asfalto);
}
.comic-num {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: var(--ladrillo);
  -webkit-text-stroke: 1px var(--asfalto);
}
@keyframes wobble {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg) scale(1.02); }
}

/* ===== Stickers, burst, bubble ===== */
.sticker {
  display: inline-block;
  border: 3px solid var(--asfalto);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--asfalto);
  transition: transform 0.2s;
}
.burst {
  clip-path: polygon(50% 0%, 61% 14%, 79% 6%, 80% 25%, 98% 28%, 88% 44%, 100% 58%, 82% 65%, 86% 85%, 66% 82%, 56% 100%, 44% 84%, 25% 96%, 22% 77%, 3% 74%, 14% 58%, 0% 43%, 18% 35%, 15% 15%, 35% 20%);
  filter: drop-shadow(4px 4px 0 var(--asfalto));
  animation: pulse 1.6s ease-in-out infinite;
}
.bubble {
  position: absolute;
  background: #fff;
  border: 4px solid var(--asfalto);
  border-radius: 1.5rem;
  padding: 0.55rem 0.9rem;
  box-shadow: 5px 5px 0 var(--asfalto);
  transform: rotate(3deg);
  animation: float 3s ease-in-out infinite;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: -22px;
  border: 12px solid transparent;
  border-top: 14px solid var(--asfalto);
}
.bubble::before {
  content: '';
  position: absolute;
  left: 25px;
  bottom: -14px;
  z-index: 1;
  border: 9px solid transparent;
  border-top: 11px solid #fff;
}
@keyframes pulse { 50% { transform: rotate(-12deg) scale(1.1); } }
@keyframes float { 50% { transform: translateY(-8px) rotate(-2deg); } }

/* ===== Foto ===== */
.photo-frame {
  border: 6px solid var(--asfalto);
  border-radius: 6px;
  background: var(--papel);
  box-shadow: 10px 10px 0 var(--asfalto), 18px 18px 0 var(--ladrillo);
  transform: rotate(-2deg);
  transition: transform 0.25s ease;
  padding: 0;
  overflow: visible;
  outline: none;
}
.photo-frame:hover { transform: rotate(1deg) scale(1.02); }
.photo-frame:focus-visible { outline: 4px dashed var(--cielo); outline-offset: 6px; }
.photo-frame img { border-radius: 2px; }
.photo-frame.shake { animation: shake 0.4s; }
.halftone-overlay {
  background-image: radial-gradient(rgba(0, 0, 0, 0.18) 20%, transparent 22%);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  opacity: 0.35;
}
@keyframes shake {
  0%, 100% { transform: rotate(-2deg); }
  20% { transform: rotate(-6deg) translateX(-6px); }
  40% { transform: rotate(3deg) translateX(6px); }
  60% { transform: rotate(-5deg) translateX(-4px); }
  80% { transform: rotate(2deg) translateX(3px); }
}

.wiggle { animation: wiggle 1.2s ease-in-out infinite; transform-origin: bottom center; }
.delay-200 { animation-delay: 0.2s; }
@keyframes wiggle { 50% { transform: rotate(18deg); } }

/* ===== Burbujas POW ===== */
.pow {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  font-family: 'Bangers', cursive;
  font-size: clamp(2.5rem, 9vw, 5rem);
  color: var(--obra);
  -webkit-text-stroke: 3px var(--asfalto);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ladrillo);
  animation: pow 0.9s ease-out forwards;
}
@keyframes pow {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(var(--r)); opacity: 0; }
  25% { transform: translate(-50%, -60%) scale(1.25) rotate(var(--r)); opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(1) rotate(var(--r)); opacity: 0; }
}

/* ===== Progreso ===== */
.progress-shell {
  height: 2.2rem;
  border: 4px solid var(--asfalto);
  border-radius: 999px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--asfalto);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--ladrillo) 0 16px, #ff7a5f 16px 32px);
  background-size: 45px 45px;
  animation: stripes 1s linear infinite;
  transition: width 0.8s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes stripes { to { background-position: 45px 0; } }

/* ===== Checklist ===== */
.check {
  border: 3px solid var(--asfalto);
  background: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 0.8rem;
  box-shadow: 4px 4px 0 var(--asfalto);
  transition: transform 0.2s;
}
.check:nth-child(odd) { transform: rotate(-0.8deg); }
.check:nth-child(even) { transform: rotate(0.8deg); }
.check:hover { transform: rotate(0) scale(1.03); }
.check.no { background: var(--papel); text-decoration: wavy underline rgba(232, 67, 46, .5); }

/* ===== Letreros ===== */
.sign {
  border: 4px solid var(--asfalto);
  border-radius: 1rem;
  background: var(--obra);
  padding: 0.7rem 1.4rem;
  box-shadow: 6px 6px 0 var(--asfalto);
  transform: rotate(-2deg);
}
.sign:first-child { background: #fff; }

/* ===== Botones ===== */
.btn {
  display: inline-block;
  border: 4px solid var(--asfalto);
  border-radius: 1rem;
  padding: 0.85rem 1.4rem;
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  box-shadow: 6px 6px 0 var(--asfalto);
  transition: transform 0.12s, box-shadow 0.12s;
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--asfalto); }
.btn:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--asfalto); }
.btn-main { background: var(--ladrillo); color: #fff; text-shadow: 2px 2px 0 var(--asfalto); }
.btn-alt { background: #fff; }
.btn:focus-visible { outline: 4px dashed var(--cielo); outline-offset: 4px; }

/* ===== Lluvia de emojis ===== */
.fall {
  position: absolute;
  top: -3rem;
  font-size: 2.2rem;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}