/* ==========================================================================
   Fiestas Piruli (/fiestas) — mockup de Marina del 26-oct (ticket 294568).
   Este archivo: piezas comunes (títulos, cejas, botones, adornos), encabezado,
   "Tú pones el motivo" y "El sello Pirulí". El resto en
   publico-fiestas-secciones.css. Se carga junto con publico.css (nav, pie).
   Colores: SOLO la paleta del Brandbook; los tonos "tinta" son los mismos que ya
   usa el sitio (/kinder) para que el texto de color se lea sobre el beige.
   ========================================================================== */

.fs-hero, .fs-motivo, .fs-sello, .fs-jugar, .fs-medida, .fs-pasos {
  --fs-coral: #F0735F;
  --fs-azul: #3E6CB0;
  --fs-amarillo: #F5B81C;
  --fs-verde: #4E9F49;
  --fs-texto: #596A72;
  --fs-rosa: #FCE6E4;
  --fs-celeste: #E3EDF9;
  --fs-crema: #FFF3D6;
  --fs-menta: #E6F3EC;
  position: relative;
}
:is(.fs-hero, .fs-motivo, .fs-sello, .fs-jugar, .fs-medida, .fs-pasos) > .pb-wrap { max-width: 1320px; position: relative; z-index: 1; }
.fs-k-coral    { --fs-c: var(--fs-coral);    --fs-p: var(--fs-rosa); }
.fs-k-azul     { --fs-c: var(--fs-azul);     --fs-p: var(--fs-celeste); }
.fs-k-amarillo { --fs-c: #E9A300;            --fs-p: var(--fs-crema); }
.fs-k-verde    { --fs-c: var(--fs-verde);    --fs-p: var(--fs-menta); }
.fs-c-coral { color: var(--fs-coral); }
.fs-c-amarillo { color: var(--fs-amarillo); }

/* ------------------------------------------------------------ comunes -- */
.fs-titulo {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  color: var(--fs-azul); font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.05;
  margin: 0 0 .9rem; position: relative; display: inline-block;
}
.fs-titulo--centro { display: table; margin-inline: auto; text-align: center; }
.fs-ceja {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .28em;
  color: var(--fs-azul); font-size: clamp(.72rem, .95vw, .85rem); margin: 0 0 .6rem; position: relative;
}
.fs-ceja--centro { display: table; margin-inline: auto; text-align: center; }
.fs-ceja--azul { font-weight: 700; }
.fs-ceja-corazon { display: inline-block; width: 1.9em; height: 1.9em; vertical-align: -.6em; color: var(--fs-coral); margin-left: .3em; }
.fs-ceja-corazon svg { width: 100%; height: 100%; }
.fs-texto {
  font-family: var(--font-body); color: var(--fs-texto);
  font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.5; margin: 0 0 1.3rem;
}
.fs-btn {
  background: var(--brand-primary); color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); padding: .7rem 2.1rem; box-shadow: 0 8px 18px rgba(240, 115, 95, .28);
}
.fs-btn:hover, .fs-btn:focus-visible { color: #fff; background: var(--fs-coral); transform: translateY(-2px); }
.fs-btn--chico { font-size: clamp(.98rem, 1.25vw, 1.1rem); padding: .6rem 1.6rem; }
.fs-flecha { font-family: var(--font-body); font-weight: 700; }

/* Rayitas (destellos) pintadas por máscara, como en /nido y /kinder. */
.fs-rayitas {
  display: inline-block; position: absolute; width: 16px; height: 24px;
  background: var(--fs-ray, var(--fs-amarillo));
  -webkit-mask: url("../img/publico/deco/rayitas.svg") no-repeat center / contain;
  mask: url("../img/publico/deco/rayitas.svg") no-repeat center / contain;
}
.fs-rayitas--azul { --fs-ray: var(--fs-azul); }
.fs-rayitas--der { transform: scaleX(-1); }
.fs-ray-izq { width: .45em; height: .66em; left: -.7em; top: -.15em; transform: rotate(-20deg); }
.fs-ray-der { width: .45em; height: .66em; right: -.7em; top: -.15em; transform: rotate(20deg) scaleX(-1); }
.fs-ceja .fs-ray-izq, .fs-ceja .fs-ray-der { width: 1.1em; height: 1.6em; top: -.5em; }
.fs-ceja .fs-ray-izq { left: -1.6em; }
.fs-ceja .fs-ray-der { right: -1.6em; }

.fs-deco { position: absolute; line-height: 0; color: var(--fs-coral); pointer-events: none; }
.fs-deco svg { width: 100%; height: 100%; }
.fs-estrella {
  position: absolute; pointer-events: none; background: var(--fs-amarillo);
  clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 79% 94%, 50% 72%, 21% 94%, 31% 58%, 2% 36%, 38% 35%);
}
.fs-estrella--contorno { background: transparent; }
.fs-estrella--contorno::before {
  content: ""; position: absolute; inset: 0; background: var(--fs-amarillo);
  clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 79% 94%, 50% 72%, 21% 94%, 31% 58%, 2% 36%, 38% 35%, 38% 35%, 42% 45%, 26% 45%, 38% 54%, 33% 72%, 50% 61%, 67% 72%, 62% 54%, 74% 45%, 58% 45%, 50% 21%, 42% 45%, 38% 35%);
}
.fs-camino {
  position: absolute; pointer-events: none; z-index: 0;
  background: url("../img/publico/deco/camino-lazo.svg") no-repeat center / 100% 100%;
}
.fs-hoja { position: absolute; line-height: 0; color: var(--fs-verde); pointer-events: none; }
.fs-hoja svg { width: 100%; height: 100%; stroke-width: 1.6; }
.fs-ave { display: block; height: auto; }
.fs-mancha { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

/* ------------------------------------------------------------ encabezado -- */
.fs-hero { overflow: hidden; padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(3rem, 6vw, 5rem); }
.fs-mancha--hero-izq { left: -5%; top: 4%; width: 12%; aspect-ratio: 1.1; background: var(--fs-celeste); }
.fs-mancha--hero-der { left: -6%; top: 46%; width: 11%; aspect-ratio: .8; background: var(--fs-rosa); }
.fs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.fs-hero-cuerpo { position: relative; text-align: center; padding-bottom: 2.5rem; }
.fs-logo { margin: 0 auto .4rem; font-size: 1rem; line-height: 1; display: table; }
.fs-logo-lienzo { position: relative; display: block; width: clamp(240px, 30vw, 430px); }
.fs-logo-lienzo img { display: block; height: auto; }
.fs-logo-base { width: 100%; }
.fs-logo-globos { position: absolute; left: 12.5%; top: 0; width: 16.72%; transform-origin: 50% 100%; animation: fs-mecer 3.2s ease-in-out infinite alternate; }
.fs-logo-punto { position: absolute; top: 30.77%; animation: fs-brinco 1.6s ease-in-out infinite; }
.fs-logo-punto--verde { left: 41.56%; width: 6.56%; }
.fs-logo-punto--naranja { left: 93.9%; width: 6.09%; animation-delay: .5s; }
@keyframes fs-mecer { from { transform: rotate(-6deg) translateY(1px); } to { transform: rotate(6deg) translateY(-4px); } }
@keyframes fs-brinco { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-28%) scale(1.06); } }
.fs-lema {
  font-family: var(--font-script); color: var(--fs-coral); position: relative; display: inline-block;
  font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.05; margin: 0 auto .7rem; max-width: 16ch;
}
.fs-lema .fs-ray-izq { left: -.55em; top: 30%; }
.fs-lema .fs-ray-der { right: -.55em; top: 70%; }
.fs-hero-sub { font-family: var(--font-body); color: var(--fs-azul); font-size: clamp(1.1rem, 1.8vw, 1.6rem); margin: 0 0 1.4rem; }
.fs-camino--hero { left: -2%; right: 10%; bottom: 0; height: clamp(34px, 4.5vw, 58px); }
.fs-hoja--hero { left: -2%; bottom: -4%; width: clamp(48px, 6vw, 84px); height: clamp(60px, 8vw, 110px); transform: rotate(-12deg); }
.fs-deco--corazon-hero { left: 3%; top: 10%; width: clamp(30px, 3.4vw, 48px); height: clamp(30px, 3.4vw, 48px); transform: rotate(-12deg); }
.fs-estrella--hero { right: 4%; top: 8%; width: clamp(34px, 4vw, 58px); aspect-ratio: 1; transform: rotate(8deg); }

.fs-hero-media { position: relative; margin-right: clamp(-6rem, -4vw, 0rem); }
.fs-carrusel {
  position: relative; aspect-ratio: 1.08; overflow: hidden;
  border-radius: 38% 62% 44% 56% / 48% 38% 62% 52%;
  background: var(--fs-celeste);
}
.fs-carrusel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.fs-carrusel-foto.is-activa { opacity: 1; }
.fs-carrusel-puntos { position: absolute; left: 0; right: 0; bottom: 7%; display: flex; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.fs-carrusel-puntos button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, .55); padding: 0; cursor: pointer; }
.fs-carrusel-puntos button[aria-current="true"] { background: #fff; }
.fs-ray-foto { left: 2%; top: 14%; width: 30px; height: 46px; transform: rotate(-40deg); }
.fs-estrella--foto { right: 6%; top: 30%; width: clamp(30px, 3.4vw, 46px); aspect-ratio: 1; }
.fs-ave--hero { position: absolute; left: -6%; bottom: -8%; width: clamp(70px, 7vw, 104px); }

/* ---------------------------------------------------- tú pones el motivo -- */
.fs-motivo { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); background: #EEF4FB; overflow-x: clip; }
.fs-motivo::before {
  content: ""; position: absolute; left: -5%; right: -5%; top: clamp(-50px, -4vw, -30px); height: clamp(70px, 8vw, 110px);
  background: #EEF4FB; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.fs-motivo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.fs-motivo-foto { position: relative; margin: 0; }
.fs-motivo-foto img { display: block; width: 100%; aspect-ratio: 2.05; object-fit: cover; border-radius: 34% 30% 38% 26% / 46% 40% 52% 40%; }
.fs-ray-motivo { left: -3%; top: -6%; width: 28px; height: 44px; transform: rotate(-30deg); }
.fs-deco--corazon-motivo { left: -5%; top: 55%; width: 30px; height: 30px; }
.fs-hoja--motivo { left: -6%; bottom: -14%; width: 50px; height: 72px; transform: rotate(-8deg); }
.fs-arcoiris { position: absolute; right: 0; bottom: -2%; width: clamp(90px, 11vw, 160px); line-height: 0; opacity: .75; }
.fs-arcoiris svg { width: 100%; height: auto; }

/* ------------------------------------------------------------ el sello -- */
.fs-sello { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.fs-encabezado { position: relative; text-align: center; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); }
.fs-ave--sello { position: absolute; left: 2%; top: 0; width: clamp(54px, 5.5vw, 80px); }
.fs-sello-lista { list-style: none; margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.6rem); }
.fs-sello-item { background: var(--fs-p); border-radius: 26px; padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.8rem); text-align: center; }
.fs-sello-ico { position: relative; display: block; width: clamp(64px, 6.4vw, 92px); height: clamp(64px, 6.4vw, 92px); margin: 0 auto .5rem; }
.fs-sello-ico svg { width: 100%; height: 100%; }
.fs-ray-ico-izq { left: -36%; top: 18%; width: 20px; height: 30px; transform: rotate(-40deg); }
.fs-ray-ico-der { right: -36%; top: 18%; width: 20px; height: 30px; transform: rotate(40deg) scaleX(-1); }
.fs-sello-titulo, .publico-main .fs-sello-titulo {
  font-family: var(--font-display); font-weight: 800; text-transform: none; white-space: pre-line;
  color: var(--fs-c); font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.08; margin: 0 0 .6rem;
}
.fs-sello-item p { font-family: var(--font-body); color: var(--fs-texto); font-size: clamp(.92rem, 1.15vw, 1.04rem); line-height: 1.45; margin: 0; }

.fs-banner--mandan {
  position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center; background: var(--fs-crema); border-radius: 30px; padding: clamp(.8rem, 1.6vw, 1.2rem) clamp(1.4rem, 3vw, 2.6rem) clamp(.8rem, 1.6vw, 1.2rem) clamp(.8rem, 1.6vw, 1.2rem);
}
.fs-banner-foto { display: block; width: 100%; aspect-ratio: 2.4; object-fit: cover; border-radius: 30% 44% 36% 40% / 50% 46% 54% 44%; }
.fs-banner-cuerpo { text-align: center; }
.fs-banner-cuerpo .fs-texto { margin: 0; font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.fs-mandan-titulo, .publico-main .fs-mandan-titulo {
  position: relative; display: inline-block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  color: var(--fs-azul); font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1; margin: 0 0 .6rem;
}
.fs-mandan-color { font-size: 1.3em; letter-spacing: .02em; }
.fs-mandan-color span:nth-child(4n+1) { color: var(--fs-coral); }
.fs-mandan-color span:nth-child(4n+2) { color: var(--fs-amarillo); }
.fs-mandan-color span:nth-child(4n+3) { color: var(--fs-verde); }
.fs-mandan-color span:nth-child(4n) { color: var(--fs-azul); }
.fs-deco--corazon-banner { right: 12%; top: 10%; width: 28px; height: 28px; }
.fs-ave-gorro { position: absolute; right: 2%; top: -18%; width: clamp(54px, 5.6vw, 80px); }
.fs-ave-gorro .fs-ave { width: 100%; transform: scaleX(-1); }
.fs-gorrito { position: absolute; left: 40%; top: -26%; width: 34%; aspect-ratio: .8; transform: rotate(14deg); }
.fs-gorrito::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, #F9D0D1 0 5px, #FFD975 5px 10px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.fs-gorrito::after { content: ""; position: absolute; left: 36%; top: -12%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--fs-coral); }

@media (prefers-reduced-motion: reduce) {
  .fs-logo-globos, .fs-logo-punto { animation: none; }
  .fs-carrusel-foto { transition: none; }
}