/* =========================================================
   WOW! MAKER · pop.css
   Estilo gráfico sin fotos, compartido por la home y las 3 landings:
   sello giratorio, cinta en movimiento, burbujas, bento y pack organizador.
   ========================================================= */

/* ---------- Hero tipográfico ---------- */
.pop-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 110px); }
.pop-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .pop-hero__grid { grid-template-columns: 1fr; } }
.pop-hero__text { min-width: 0; }
.pop-hero__title {
  font-size: clamp(2.8rem, 8.2vw, 6.4rem); line-height: .95; letter-spacing: -.035em;
  color: var(--azul-900); margin-bottom: .35em;
}
.pop-wow {
  display: inline-block; color: var(--rosa); transform: rotate(-4deg);
  text-shadow: 4px 4px 0 var(--azul), 8px 8px 0 var(--melocoton);
  animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(2deg) scale(1.04) } }
.pop-hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinta-suave); max-width: 34em; }

/* Escenario de formas */
.pop-stage { position: relative; aspect-ratio: 1; width: min(100%, 520px); margin-inline: auto; }
.pop-seal {
  position: absolute; inset: 9%; border-radius: 50%; background: var(--grad-wow);
  box-shadow: 0 30px 60px -24px rgba(0,31,77,.45), inset 0 0 0 10px rgba(255,255,255,.35);
  display: grid; place-items: center;
}
.pop-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.pop-seal__ring text { font-family: var(--f-titular); font-weight: 800; font-size: 13.2px; letter-spacing: 2px; fill: var(--azul); }
@keyframes spin { to { transform: rotate(360deg) } }
.pop-seal__core {
  width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--azul); color: #fff;
  display: grid; place-content: center; text-align: center; font-family: var(--f-titular); font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 8px rgba(255,255,255,.5);
}
.pop-seal__core small { font-size: clamp(.7rem, 1.4vw, .9rem); letter-spacing: .3em; color: var(--melocoton); }
.pop-seal__core b { font-size: clamp(4rem, 11vw, 7.5rem); letter-spacing: -.05em; margin: .05em 0; }

.pop-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: baseline; gap: .35em;
  background: #fff; color: var(--azul-900); border: 3px solid var(--azul-900); border-radius: 999px;
  padding: .45em 1em; font-family: var(--f-titular); font-weight: 700; font-size: clamp(.85rem, 1.6vw, 1.05rem);
  box-shadow: 5px 5px 0 var(--azul-900); white-space: nowrap; animation: float 6s ease-in-out infinite;
}
.pop-chip b { font-size: 1.5em; color: var(--azul); }
.pop-chip--a { top: 2%; left: -2%; transform: rotate(-8deg); }
.pop-chip--b { top: 44%; right: -4%; transform: rotate(6deg); animation-delay: -2s; background: var(--melocoton); }
.pop-chip--c { bottom: 2%; left: 8%; transform: rotate(-3deg); animation-delay: -4s; background: var(--rosa); }
@keyframes float { 0%,100% { translate: 0 0 } 50% { translate: 0 -10px } }

.pop-shape { position: absolute; z-index: 1; }
.pop-shape--star {
  width: 22%; aspect-ratio: 1; top: -2%; right: 4%; background: var(--azul);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: spin 18s linear infinite;
}
.pop-shape--pill { width: 30%; height: 9%; bottom: 14%; right: -2%; border-radius: 999px; background: var(--azul-900); transform: rotate(-28deg); }
.pop-shape--dot { width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--rosa); top: 30%; left: 0; }
.pop-shape--ring { width: 16%; aspect-ratio: 1; border-radius: 50%; border: 6px dashed var(--azul); bottom: 22%; left: -4%; animation: spin 12s linear infinite reverse; }

/* ---------- Cinta en movimiento ---------- */
.marquee { background: var(--azul); color: #fff; overflow: hidden; padding: 18px 0; transform: rotate(-1.5deg); margin: -10px -20px 0; position: relative; z-index: 3; }
.marquee__track { display: flex; width: max-content; gap: 28px; align-items: center; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--f-titular); font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2.4rem); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.marquee span:nth-of-type(even) { color: var(--melocoton); }
.marquee i { font-style: normal; color: var(--rosa); font-size: 1.6rem; }
@keyframes marquee { to { transform: translateX(-50%) } }

/* ---------- Burbujas de dolor ---------- */
.pains-pop h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.bubbles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 32px); }
@media (max-width: 900px) { .bubbles { grid-template-columns: 1fr; } }
.bubble {
  position: relative; background: #fff; border: 3px solid var(--azul-900); border-radius: 28px 28px 28px 6px;
  padding: 28px 26px 64px; box-shadow: 8px 8px 0 var(--azul-900); min-width: 0;
}
.bubble--alt { background: var(--azul-900); color: #fff; box-shadow: 8px 8px 0 var(--rosa); border-color: var(--azul-900); }
.bubble__q { font-family: var(--f-titular); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.3; margin: 0; }
.bubble__a {
  position: absolute; left: 18px; right: 18px; bottom: -18px; text-align: center;
  background: var(--grad-wow); color: var(--azul-900); font-family: var(--f-titular); font-weight: 800;
  border: 3px solid var(--azul-900); border-radius: 999px; padding: .55em 1em; transform: rotate(-2deg);
}
.bubble:nth-child(2) .bubble__a { transform: rotate(2deg); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: clamp(16px, 2.4vw, 24px); }
.bento__card--medallas { grid-row: span 2; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; } .bento__card--medallas { grid-row: auto; } }
.bento__card {
  position: relative; overflow: hidden; isolation: isolate; text-decoration: none;
  display: flex; flex-direction: column; gap: .4rem; min-height: 280px; min-width: 0;
  border-radius: 32px; padding: clamp(24px, 3.5vw, 44px); transition: transform .25s ease;
}
.bento__card:hover { transform: translateY(-6px) rotate(-.6deg); }
.bento__kicker { font-family: var(--f-texto); font-weight: 700; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; }
.bento__big { font-family: var(--f-titular); font-weight: 800; line-height: .85; letter-spacing: -.06em; font-size: clamp(5rem, 14vw, 10rem); }
.bento__card--medallas .bento__big { font-size: clamp(6rem, 18vw, 14rem); }
.bento__text { font-size: 1.05rem; max-width: 26ch; }
.bento__go { margin-top: auto; font-family: var(--f-titular); font-weight: 800; }

.bento__card--medallas { background: var(--azul); color: #fff; }
.bento__card--medallas .bento__kicker, .bento__card--medallas .bento__go { color: var(--melocoton); }
.bento__card--medallas .bento__big { color: var(--rosa); text-shadow: 6px 6px 0 var(--azul-900); }
.bento__card--trofeos { background: var(--grad-wow); color: var(--azul-900); }
.bento__card--trofeos .bento__big { color: var(--azul); }
.bento__card--grabado { background: var(--azul-900); color: #fff; }
.bento__card--grabado .bento__big { color: var(--melocoton); }
.bento__card--grabado .bento__kicker, .bento__card--grabado .bento__go { color: var(--rosa); }
.bento__card:hover, .bento__card:focus-visible { color: inherit; }

.bento__deco { position: absolute; z-index: -1; pointer-events: none; }
.bento__deco--rings {
  width: 70%; aspect-ratio: 1; right: -18%; bottom: -16%; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.14) 0 3px, transparent 3px 26px);
  animation: spin 40s linear infinite;
}
.bento__deco--podium { right: 22px; bottom: 0; display: flex; align-items: flex-end; gap: 6px; }
.bento__deco--podium i { width: clamp(34px, 5vw, 52px); background: rgba(0,71,163,.18); border-radius: 8px 8px 0 0; }
.bento__deco--podium i:nth-child(1) { height: 70px; }
.bento__deco--podium i:nth-child(2) { height: 110px; background: rgba(0,71,163,.3); }
.bento__deco--podium i:nth-child(3) { height: 50px; }
.bento__deco--timer {
  width: 150px; aspect-ratio: 1; right: -30px; top: -30px; border-radius: 50%;
  background: conic-gradient(var(--rosa) 0 50%, rgba(255,255,255,.08) 50% 100%);
  mask: radial-gradient(circle, transparent 54%, #000 55%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
  animation: spin 8s linear infinite;
}

/* ---------- Pack organizador (landings) ---------- */
.bento--3 { grid-template-columns: repeat(3, 1fr); }
.bento--3 .bento__card--medallas { grid-row: auto; }
.bento--3 .bento__big, .bento--3 .bento__card--medallas .bento__big { font-size: clamp(4rem, 8vw, 6.5rem); }
@media (max-width: 860px) { .bento--3 { grid-template-columns: 1fr; } }
.bento__card.is-current { outline: 4px solid var(--rosa); outline-offset: 4px; }
.bento__card.is-current:hover { transform: none; }
.pack__here {
  margin-top: auto; align-self: flex-start; font-family: var(--f-titular); font-weight: 800; font-size: .85rem;
  background: var(--rosa); color: var(--azul-900); border-radius: 999px; padding: .4em .9em;
}
.pack__cta { text-align: center; margin: clamp(28px, 4vw, 44px) 0 0; }
.pack__cta .btn { font-size: 1.1rem; padding: 1.1em 2em; border: 3px solid var(--azul-900); box-shadow: 6px 6px 0 var(--azul-900); }

@media (prefers-reduced-motion: reduce) {
  .pop-wow, .pop-seal__ring, .pop-chip, .pop-shape, .marquee__track, .bento__deco { animation: none !important; }
}

/* ---------- Fotos de diseños reales ---------- */
.hero-foto { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
.hero-foto img { border-radius: var(--radio); box-shadow: var(--sombra-l); background: var(--abedul); }
.hero-foto__a { width: 100%; aspect-ratio: 1 / 1.06; object-fit: cover; transform: rotate(-2deg); }
.hero-foto__b { position: absolute; width: 36%; right: -12%; bottom: -14%; aspect-ratio: 2 / 3; object-fit: cover; border: 6px solid var(--blanco); transform: rotate(4deg); }
.hero-foto__tag {
  position: absolute; left: -4%; top: 6%; background: var(--azul); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-family: var(--f-titular); font-weight: 800; font-size: .95rem; transform: rotate(-6deg); box-shadow: var(--sombra);
}
.hero-foto__tag b { color: var(--melocoton); font-size: 1.25rem; }
@media (max-width: 900px) { .hero-foto { max-width: 360px; margin-bottom: 40px; } .hero-foto__b { right: -2%; } .hero-foto__tag { left: 0; } }

.obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.obra { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.obra--ancha { grid-column: span 2; }
.obra__foto { border-radius: var(--radio); overflow: hidden; background: var(--abedul); aspect-ratio: 3 / 4; }
.obra--ancha .obra__foto { aspect-ratio: auto; height: 100%; display: grid; place-items: center; background: #F7F4EE; }
.obra__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.obra--ancha .obra__foto img { height: auto; object-fit: contain; }
.obra:hover .obra__foto img { transform: scale(1.03); }
.obra figcaption { display: flex; flex-direction: column; line-height: 1.3; }
.obra figcaption b { font-family: var(--f-titular); font-weight: 800; color: var(--azul); font-size: 1.05rem; }
.obra figcaption span { font-size: .9rem; color: var(--tinta-suave); }
@media (max-width: 860px) { .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .obras { grid-template-columns: 1fr; } .obra--ancha { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .obra__foto img { transition: none; } }

/* ---------- Medalla colgando del WOW! ---------- */
.pop-hero { --mw: clamp(74px, 11vw, 156px); --cinta: clamp(16px, 2.4vw, 34px); }
.cuelga { position: relative; display: block; width: fit-content; margin-left: auto; margin-right: calc(var(--mw) * .32); }
.colgante {
  position: absolute; z-index: 2; top: 82%; left: calc(100% - .2em); width: var(--mw);
  transform-origin: 44.85% 0; transform: translateX(-44.85%) rotate(0deg);
  animation: colgar 3.2s ease-in-out infinite; pointer-events: none;
}
.colgante__cinta {
  display: block; margin-left: 30%; width: 29.7%; height: var(--cinta); border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #121110 0 10%, #F2B127 10% 13.5%, #121110 13.5% 85%, #C9580A 85% 88.5%, #121110 88.5%);
  box-shadow: inset 0 3px 3px -2px rgba(0,0,0,.6);
}
.colgante img { display: block; width: 100%; height: auto; margin-top: -1px; filter: drop-shadow(0 14px 14px rgba(0,31,77,.28)); }
.hueco-medalla { float: right; width: calc(var(--mw) * .98); height: calc(var(--mw) * 1.02 + var(--cinta) - .6em); shape-outside: inset(0); }
@keyframes colgar {
  0%, 100% { transform: translateX(-44.85%) rotate(-5deg); }
  50% { transform: translateX(-44.85%) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { .colgante { animation: none; transform: translateX(-44.85%) rotate(-2deg); } }

/* Antetítulo del hero legible en móvil */
.pop-hero__eyebrow .sep { color: var(--rosa); }
@media (max-width: 600px) {
  .pop-hero { padding-top: 28px; }
  .pop-hero__eyebrow { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; letter-spacing: .18em; line-height: 1.3; }
  .pop-hero__eyebrow .sep { display: none; }
  .pop-hero__eyebrow .eyebrow__extra { color: var(--tinta-suave); letter-spacing: .14em; }
}

.obras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .obras--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .obras--4 { grid-template-columns: 1fr; } }

/* ---------- Franja de vídeo: grabado en vivo ---------- */
.laser-band { position: relative; overflow: hidden; background: var(--azul-900); color: #fff; padding: clamp(72px, 10vw, 140px) 0; isolation: isolate; }
.laser-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.laser-band::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,31,77,.92) 0%, rgba(0,31,77,.78) 42%, rgba(0,31,77,.15) 75%, rgba(0,31,77,0) 100%); }
.laser-band__inner { max-width: var(--ancho); }
.laser-band__inner > * { max-width: 34rem; }
.laser-band__eyebrow { color: var(--melocoton); }
.laser-band h2 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.laser-band p { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.5vw, 1.2rem); margin-bottom: 1.6rem; }
.laser-band strong { color: var(--melocoton); }
@media (max-width: 700px) {
  .laser-band { padding: 0; }
  .laser-band__video { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; display: block; }
  .laser-band::after { display: none; }
  .laser-band__inner { padding-block: 32px 48px; }
}
@media (prefers-reduced-motion: reduce) { .laser-band__video, .hero-video video { display: none; } .laser-band { background: var(--azul-900) url("../video/grabado-laser-medalla-poster.jpg") center/cover; } }

.hero-video { position: relative; max-width: 560px; width: 100%; margin-inline: auto; }
.hero-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra-l); background: var(--azul-900); display: block; }
@media (max-width: 900px) { .hero-video { margin-bottom: 24px; } }