/* =============================================================================
   Tipografías autoalojadas
   Antes se pedían a fonts.googleapis.com, que a su vez pedía los .woff2 a
   fonts.gstatic.com: dos dominios de terceros, dos resoluciones DNS y dos
   handshakes TLS antes de que llegara la primera letra, y un salto más en la
   cadena (HTML -> CSS de Google -> woff2).
   Son EXACTAMENTE las mismas fuentes, las mismas familias y los mismos pesos
   que servía Google, con el mismo `display: swap` y el mismo subset latin:
   la página se ve idéntica. Lo que cambia es de dónde salen.
   Medido el 2026-08-16: 209 KB en 9 archivos.
   ========================================================================== */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/baloo2-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/baloo2-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunitosans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunitosans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunitosans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunitosans-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   Playville: built for fun
   Sistema de diseño derivado del catálogo oficial (Playville_catálogo.pdf).
   Paleta muestreada pixel a pixel de las páginas del PDF.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Paleta exacta del catálogo */
  --cream:        #FBF4EA;
  --cream-deep:   #F6E9DA;
  --blue:         #BED1EC;
  --blue-tint:    #CFDCEB;
  --blue-deep:    #8FB5D5;
  --sage:         #D0D3AA;
  --sage-deep:    #B9BE8C;
  --rose:         #D8B2AB;
  --rose-deep:    #C69890;
  --peach:        #F8BF9B;
  --peach-deep:   #F2A87C;
  --tan:          #DDA781;
  --yellow:       #FFE6AB;
  --yellow-deep:  #F4D180;
  --ink:          #545454;
  --ink-soft:     #7A7570;
  --white:        #FFFFFF;

  /* Tipografía */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-caps:    "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --shell:        min(1180px, 100% - 3rem);
  --radius-card:  36px;
  --radius-pill:  999px;

  /* Sombras suaves, sin gris sucio */
  --shadow-sm:  0 2px 8px rgba(84, 84, 84, .06);
  --shadow-md:  0 10px 30px rgba(84, 84, 84, .10);
  --shadow-lg:  0 22px 50px rgba(84, 84, 84, .14);

  /* Curvas */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-pop:   cubic-bezier(.34, 1.56, .64, 1);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; }
p  { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell { width: var(--shell); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  padding: .75rem 1.25rem; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--cream); font-weight: 700;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ============================================================== tipografía */

/* Titular en dos pesos, como el catálogo: caps geométrica + rounded chunky */
.eyebrow {
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: clamp(.72rem, .68rem + .18vw, .82rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.h-caps {
  font-family: var(--font-caps);
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 1.3rem + 2.9vw, 3.5rem);
}

.h-round {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.005em;
  font-size: clamp(2.1rem, 1.4rem + 3.3vw, 3.9rem);
}

.section-title { margin-bottom: .35em; }
.section-title .h-caps,
.section-title .h-round { display: block; }

.lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* Bloque de color detrás del texto: el recurso más característico del PDF */
.mark {
  position: relative;
  display: inline-block;
  padding: .04em .34em .1em;
  z-index: 0;
  color: var(--ink);
}
.mark::before {
  content: "";
  position: absolute;
  inset: .12em -.02em .06em;
  background: var(--_c, var(--peach));
  border-radius: 4px;
  z-index: -1;
  transform: rotate(-.6deg);
  transform-origin: center;
}
.mark--peach  { --_c: var(--peach); }
.mark--blue   { --_c: var(--blue); }
.mark--sage   { --_c: var(--sage); }
.mark--yellow { --_c: var(--yellow); }
.mark--rose   { --_c: var(--rose); }
.mark--tan    { --_c: var(--tan); }

/* Texto con contorno blanco tipo sticker (páginas 2 y 6 del catálogo) */
.sticker-text {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  paint-order: stroke fill;
  -webkit-text-stroke: 10px var(--white);
  filter: drop-shadow(0 2px 0 rgba(84, 84, 84, .07));
}

/* ================================================================== botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .28s var(--ease-pop), box-shadow .28s var(--ease-out),
              background-color .2s linear;
  will-change: transform;
}
.btn svg { flex: none; }

.btn--primary {
  background: var(--peach-deep);
  color: var(--white);
  box-shadow: 0 6px 0 #D8905F, var(--shadow-sm);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #D8905F, var(--shadow-md); }
.btn--primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #D8905F; }

.btn--ghost {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--cream-deep), var(--shadow-sm);
}
.btn--ghost:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--cream-deep), var(--shadow-md); }
.btn--ghost:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cream-deep); }

.btn--blue {
  background: var(--blue-deep);
  color: var(--white);
  box-shadow: 0 6px 0 #759CB3, var(--shadow-sm);
}
.btn--blue:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ================================================================= navbar */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.1rem 0;
  transition: padding .3s var(--ease-out), background-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.nav.is-stuck {
  padding: .55rem 0;
  background: rgba(251, 244, 234, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(84, 84, 84, .07), 0 8px 26px rgba(84, 84, 84, .06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__logo img {
  width: 150px;
  height: auto;
  transition: width .3s var(--ease-out);
}
.nav.is-stuck .nav__logo img { width: 122px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .93rem;
}
.nav__links a { position: relative; padding: .3rem 0; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 7px;
  border-radius: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease-out);
  z-index: -1;
}
.nav__links a:hover::after { transform: scaleX(1); }

/* Con ocho enlaces el menú roza el logo y el botón de teléfono justo antes de
   colapsar en hamburguesa: se cierra el espaciado en esa franja. */
@media (max-width: 1120px) { .nav__links { gap: 1.3rem; } }

.nav__actions { display: flex; align-items: center; gap: .8rem; }

.nav__burger {
  position: relative;
  display: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
/* Las tres barras se posicionan absolutas y comparten el mismo centro de giro
   (el centro del botón). Así el colapso a "X" es exacto y no depende de los
   márgenes de apilado. */
.nav__burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2.5px;
  margin: -1.25px 0 0 -10px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease-out), opacity .2s linear;
}
.nav__burger span:nth-child(1) { transform: translateY(-6px); }
.nav__burger span:nth-child(3) { transform: translateY(6px); }
.nav.is-open .nav__burger span:nth-child(1) { transform: rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 940px) {
  .nav__burger { display: grid; }
  .nav__links {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6.2rem 1.5rem 2rem;
    background: var(--cream);
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 34px 34px;
    font-size: 1.05rem;
    transform: translateY(-102%);
    transition: transform .45s var(--ease-out);
    z-index: -1;
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  .nav__links a { padding: .95rem .4rem; border-bottom: 2px dashed var(--cream-deep); }
  .nav__links a::after { display: none; }
  .nav__cta { display: none; }
}

/* ==================================================================== hero */
.hero {
  position: relative;
  padding: clamp(8rem, 6rem + 9vw, 11rem) 0 0;
  background: var(--blue);
  overflow: hidden;
  isolation: isolate;
}

/* Rayas verticales suaves del fondo de la portada */
.hero__stripes {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .30) 0 3px,
    rgba(255, 255, 255, 0) 3px 78px
  );
  opacity: .85;
}

/* El arco crema, firma de la portada del catálogo */
.hero__arch {
  position: absolute;
  left: 50%;
  top: clamp(7rem, 5rem + 6vw, 10.5rem);
  z-index: -1;
  width: min(1120px, 128vw);
  aspect-ratio: 1 / 1.32;
  transform: translateX(-50%);
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.6rem;
}

.hero__logo {
  width: clamp(230px, 20vw, 320px);
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(84, 84, 84, .10));
}

.hero__tagline {
  font-family: var(--font-caps);
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: lowercase;
  font-size: clamp(.78rem, .72rem + .22vw, .92rem);
  color: var(--ink-soft);
  margin-top: -.7rem;
}

.hero__title {
  display: grid;
  gap: .18em;
  max-width: min(100%, 880px);
}
.hero__title .h-caps { font-size: clamp(1.75rem, 1.15rem + 2.7vw, 3.2rem); }
.hero__title .h-round { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: .5rem;
}

.hero__note {
  font-size: .92rem;
  color: var(--ink-soft);
}
.hero__note strong { color: var(--ink); font-weight: 800; }
.hero__note-tel {
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--peach-deep);
  transition: color .25s var(--ease-out);
}
.hero__note-tel:hover { color: var(--peach-deep); }

/* Foto principal: el LCP de la página */
.hero__media {
  position: relative;
  width: min(1000px, 100%);
  margin: clamp(2.5rem, 2rem + 3vw, 4rem) auto 0;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cream-deep);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Colinas verdes del pie de la portada */
.hero__hills {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
  color: var(--sage);
}

/* -------------------------------------------------------- garabatos hero */
.doodle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: var(--_dc, var(--peach));
}
.doodle--star-1  { top: 14%;  left: 6%;   width: clamp(48px, 6vw, 88px);  --_dc: var(--rose); }
.doodle--loop-1  { top: 17%;  right: 5%;  width: clamp(70px, 9vw, 140px); --_dc: var(--blue-deep); }
.doodle--star-2  { top: 46%;  right: 9%;  width: clamp(34px, 4vw, 56px);  --_dc: var(--yellow-deep); }
.doodle--conf-1  { top: 55%;  left: 10%;  width: clamp(26px, 3vw, 42px);  --_dc: var(--blue-deep); }
.doodle--conf-2  { top: 38%;  left: 14%;  width: clamp(20px, 2.4vw, 32px); --_dc: var(--rose); }

@media (max-width: 760px) {
  .doodle--conf-1, .doodle--conf-2, .doodle--star-2 { display: none; }
}

/* ============================================================== marquesina */
.marquee {
  position: relative;
  z-index: 3;
  padding: 1.05rem 0;
  background: var(--peach);
  overflow: hidden;
  border-block: 3px solid var(--cream);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: marquee 34s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, .9rem + .4vw, 1.3rem);
  color: var(--ink);
  white-space: nowrap;
}
.marquee__group svg { flex: none; width: 20px; height: 20px; color: var(--white); }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* =============================================================== secciones */
.section { position: relative; padding: clamp(4.5rem, 3.5rem + 4.5vw, 7.5rem) 0; }
.section--cream { background: var(--cream); }
.section--tint  { background: var(--cream-deep); }

.section__head {
  display: grid;
  gap: 1rem;
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.section__head--center { justify-items: center; text-align: center; margin-inline: auto; }

/* Divisor ondulado, igual que la separación de la página 2 */
.wave { display: block; width: 100%; height: auto; }
.wave--rose { color: var(--rose); }
.wave--blue { color: var(--blue); }
.wave--sage { color: var(--sage); }
.wave--yellow { color: var(--yellow); }
.wave--cream { color: var(--cream); }

/* La onda pinta el color de la sección que viene debajo; el resto del SVG es
   transparente y deja ver el fondo del body (crema). Cuando la sección de
   arriba no es crema hay que igualar ese hueco o asoma una franja clara. */
.wave--from-tint { background: var(--cream-deep); }

/* Línea de puntos del catálogo */
/* Se usa sobre la tarjeta azul de snacks, así que el trazo va en el azul
   profundo: con --blue quedaría azul sobre azul e invisible. */
.dashed {
  height: 0;
  border: 0;
  border-top: 3px dashed var(--blue-deep);
  opacity: .75;
  margin: 2rem 0;
}
.dashed--yellow { border-top-color: var(--yellow-deep); }

/* ============================================================ tarjeta base */
.card {
  position: relative;
  padding: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card--blue  { background: var(--blue); }
.card--sage  { background: var(--sage); }
.card--rose  { background: var(--rose); }
.card--peach { background: var(--peach); }
.card--cream { background: var(--cream); }
.card--lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* ------------------------------------------------- lista con viñeta puntual */
.ticks { display: grid; gap: .78rem; }

/* La viñeta va posicionada, no como celda de grid: así un <li> puede llevar
   <em>, <strong> o varios nodos de texto sin que la lista se descuadre. */
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 1.02rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--_bullet, var(--tan));
}
.ticks--white li::before { background: var(--white); }
.ticks--blue li::before  { background: var(--blue-deep); }
.ticks--yellow li::before{ background: var(--yellow-deep); }
.ticks--rose li::before  { background: var(--rose-deep); }
.ticks--peach li::before { background: var(--peach-deep); }

/* ====================================================== paquete de fiesta */
.party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}
/* Tres franjas de precio: 3 en fila en desktop, 1 en móvil.
   El minmax(240px…) evita que se aprieten antes de tiempo. */
.party-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .party-grid--three { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; margin-bottom: 1.4rem; } }

.day-card {
  display: grid;
  gap: .6rem;
  justify-items: center;
  text-align: center;
  padding: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem) 1.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}
.day-card h3 {
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  letter-spacing: -.01em;
}

/* Capacidad de niños de cada franja: "Up to 25 children" con el número resaltado */
.day-card__cap {
  display: inline-block;
  margin-top: -.15rem;
  padding: .2rem .9rem .28rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .55);
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}
.day-card__cap b { font-weight: 800; }
.day-card__deco {
  position: absolute;
  opacity: .55;
  pointer-events: none;
}

.includes {
  padding: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.includes__title { margin-bottom: 1.5rem; text-align: center; }
.includes .ticks { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .9rem 2rem; }

/* Capacidad: contadores animados */
.capacity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 1.7rem;
  border-radius: var(--radius-card);
  border: 3px dashed var(--blue);
  text-align: center;
}
.capacity__n {
  display: block;
  font-family: var(--font-caps);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.capacity__l {
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =============================================== paquetes de decoración */
/* Reutilizan .party-grid--three, pero con cabecera centrada y lista de
   contenidos alineada a la izquierda: los ítems son frases largas y en
   centrado se leen mal. */
.pkg-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .2rem;
  text-align: center;
}
.pkg-card__name {
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.pkg-card .ticks {
  justify-self: stretch;
  margin-top: 1.5rem;
  text-align: left;
}
.pkg-card .ticks li { font-size: .97rem; }
.pkg-card__sub {
  justify-self: stretch;
  margin-top: 1.3rem;
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
}
.pkg-card__sub + .ticks { margin-top: .7rem; }

/* ===================================================== decor / dos columnas */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  align-items: center;
}
.split--wide { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 880px) { .split--wide { grid-template-columns: 1fr; } }

.figure {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--cream-deep);
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 4 / 3; }
.figure:hover img { transform: scale(1.045); }

.figure__badge {
  position: absolute;
  left: 1.2rem; bottom: 1.2rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: .82rem;
  box-shadow: var(--shadow-sm);
}

/* ========================================================= snacks y menú */
/* Las dos secciones son la misma pieza del catálogo: una tarjeta de color con
   fichas blancas dentro. Sólo cambia el color del contenedor. */
.snack-stack,
.menu-stack {
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  border-radius: var(--radius-card);
  background: var(--blue);
}
.menu-stack       { background: var(--peach); }
.menu-stack--kids { background: var(--yellow); }

.snack,
.dish {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  border-radius: 28px;
  background: rgba(255, 255, 255, .5);
  transition: transform .4s var(--ease-out), background-color .3s linear;
}
.snack:hover,
.dish:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .72); }

.dish { gap: .75rem; }

.snack__head,
.dish__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.2rem;
}
.snack__name,
.dish__name {
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dish__name { letter-spacing: .12em; }
.dish__desc { font-size: .97rem; }
/* Barra de opciones del catálogo (los guisos de Tacos Ville) */
.dish__choice {
  justify-self: start;
  padding: .3em .85em .38em;
  border-radius: 8px;
  background: var(--blue);
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.5;
}
.snack__count {
  display: inline-block;
  padding: .12em .55em .2em;
  border-radius: 5px;
  background: var(--yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  transform: rotate(-.7deg);
}
.snack .ticks { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .55rem 1.5rem; }
.snack .ticks li { font-size: .97rem; }

.callout {
  padding: 1.2rem 1.6rem;
  border-radius: 22px;
  background: var(--tan);
  color: var(--white);
}
.callout strong {
  display: block;
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .15rem;
}
.callout p { font-size: .93rem; opacity: .95; }

/* ======================================================== pasteles + papelería */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  align-items: start;
}

.cake-rows { display: grid; gap: .7rem; }
.cake-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .85rem 1.2rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  font-size: 1.02rem;
}

.note {
  padding: .95rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--sage);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}
.note--soft { background: rgba(255, 255, 255, .6); font-weight: 400; }
.fineprint { font-size: .85rem; color: var(--ink-soft); text-align: center; }

/* ============================================================== fotografía */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.4rem;
}
.photo-card {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  border-radius: var(--radius-card);
  background: var(--blue);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.photo-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.photo-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.photo-card h3 {
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: 1.18rem;
}
.photo-card h3 span { display: block; font-weight: 600; font-size: .93rem; color: #5F5F5F; }

.credit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .55);
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .06em;
}

/* ================================================================ galería */
/* Mosaico de altura fija: sin grid-auto-rows las filas se ajustan al alto
   natural de cada foto y el conjunto queda dentado. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 235px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery__item {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.gallery__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery__item:hover img { transform: scale(1.07); }

/* Composición tipo mosaico.
   Por defecto cada foto ocupa una celda: así la galería sigue cuadrando al
   añadir o quitar imágenes. --big/--wide/--tall son opcionales, para dar
   ritmo; con `grid-auto-flow: dense` el resto se recoloca sin dejar huecos. */
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--big  { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery__item--wide,
  .gallery__item--big  { grid-column: span 1; }
  .gallery__item--big,
  .gallery__item--tall { grid-row: span 1; }
}

/* ========================================================= añade tu evento */
.enhance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .85rem;
}
.enhance li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-pop), background-color .25s linear;
}
.enhance li:hover { transform: translateY(-4px) scale(1.015); background: var(--yellow); }
.enhance li::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blue-deep);
}

/* ================================================================ contacto */
.contact {
  position: relative;
  padding: clamp(4rem, 3rem + 4vw, 6.5rem) 0 0;
  background: var(--cream);
  overflow: hidden;
}
.contact__arch {
  position: relative;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(3rem, 2.4rem + 3vw, 5rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: var(--rose);
  border-radius: 50% 50% 0 0 / 120px 120px 0 0;
  text-align: center;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: min(1080px, 100% - 3rem);
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); width: min(680px, 100% - 3rem); }
}
@media (max-width: 720px) {
  .contact-cards { grid-template-columns: 1fr; max-width: 420px; }
}
.contact-card {
  display: grid;
  gap: .5rem;
  justify-items: center;
  padding: 1.5rem 1.3rem;
  border-radius: 26px;
  background: var(--blue);
  transition: transform .35s var(--ease-pop);
}
.contact-card:hover { transform: translateY(-6px); }
.contact-card svg { width: 28px; height: 28px; color: var(--yellow-deep); }
.contact-card__label {
  font-family: var(--font-caps);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5F5F5F;
}
.contact-card__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink);
}

/* ================================================================== footer */
.footer {
  padding: 2.5rem 0 2rem;
  background: var(--rose);
  text-align: center;
}
.footer__logo { width: 160px; margin: 0 auto 1.2rem; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.8rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .9rem;
}
.footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__legal { font-size: .82rem; color: #6B5D5A; }
.footer__legal a { font-weight: 700; }

/* Crédito discreto de autoría */
.footer__credit {
  margin-top: .7rem;
  font-size: .76rem;
  letter-spacing: .02em;
  color: #8A7B78;
}
.footer__credit a {
  font-weight: 700;
  color: #6B5D5A;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(107, 93, 90, .4);
  transition: text-decoration-color .25s var(--ease-out), color .25s var(--ease-out);
}
.footer__credit a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ============================================================= WhatsApp FAB */
.fab {
  position: fixed;
  right: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  bottom: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
  transform: translateY(120px);
  transition: transform .5s var(--ease-pop), box-shadow .3s var(--ease-out);
}
.fab.is-visible { transform: translateY(0); }
.fab:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, .55); }
.fab svg { width: 30px; height: 30px; }

/* ============================================================= animaciones */

/* Estado inicial de los elementos revelados al hacer scroll */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); }

.reveal--pop { transform: translate3d(0, 14px, 0) scale(.94); }
.reveal--pop.is-in { transform: translate3d(0, 0, 0) scale(1); transition-timing-function: var(--ease-pop); }

.reveal--left  { transform: translate3d(-30px, 0, 0); }
.reveal--right { transform: translate3d(30px, 0, 0); }
.reveal--left.is-in, .reveal--right.is-in { transform: translate3d(0, 0, 0); }

/* Entrada del hero, sin esperar al scroll */
.hero-in {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: heroIn .9s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Flotación continua de los garabatos */
.float { animation: float 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -18px, 0) rotate(5deg); }
}

.spin-slow { animation: spin 26s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.bob { animation: bob 4.5s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

/* Personajes sticker del catálogo */
.mascot { width: clamp(70px, 8vw, 118px); height: auto; }
.mascot--float { position: absolute; z-index: 2; pointer-events: none; }

/* ------------------------------------------------- respeto a la preferencia */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero-in { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
}

/* ------------------------------------------------------------------ 404 --- */
/* No hay diseño nuevo aquí: la 404 usa el mismo .shell, los mismos .btn y la
   misma paleta que el resto del sitio. Lo único propio es el bloque del código,
   que no lleva animación de entrada porque es el elemento del LCP de esa
   página. El .nav es fixed, así que el padding superior lo despeja. */
.error404 {
  padding: clamp(8.5rem, 6.5rem + 9vw, 11.5rem) 0 clamp(4rem, 3rem + 4vw, 6rem);
  background: var(--blue);
  text-align: center;
}

.error404__code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 3rem + 18vw, 12rem);
  line-height: .9;
  color: var(--white);
  text-shadow: 0 8px 0 var(--blue-deep);
}

.error404 .eyebrow { display: block; margin: 1.4rem 0 .4rem; color: var(--ink); }

.error404__title {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
}

.error404__text {
  max-width: 34rem;
  margin: 0 auto 2.2rem;
  color: var(--ink);
}

.error404__exits,
.error404__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: 0 auto;
}

.error404__contact { margin-top: 1.6rem; }