@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/baloo-2-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-800-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-900-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --town-navy: #07142f;
  --town-blue: #1346d8;
  --town-yellow: #ffd51f;
  --town-white: #f8faff;
  --town-ink: #091226;
  --town-muted: #5f687c;
  --line: rgba(9, 18, 38, 0.14);
  --page-gutter: clamp(1rem, 4vw, 4rem);
  --container: 80rem;
  --header-height: 5rem;
  --utility-height: 3rem;
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --shadow-soft: 0 1.5rem 4rem rgba(7, 20, 47, 0.14);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* 🚨 El navegador le da a <figure> un `margin: 1em 40px` que NADIE escribe y
   que por eso no aparece en ninguna búsqueda del archivo. En las dos galerías
   del sitio (fiestas reales e instalaciones) se sumaba al gap y daba 96 px
   entre foto y foto: la tira se veía despegada y cabían menos. Se resetea acá,
   en la raíz, para que la próxima galería no lo herede otra vez. */
figure {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  color: var(--town-ink);
  background: var(--town-white);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

img {
  height: auto;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 0.98;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--town-yellow);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--town-yellow);
  color: var(--town-ink);
  font-weight: 800;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

/* 🚨 El tope era 8rem = 128 px por lado (8 secciones × 256 px = el 21% de la
   página en aire). Bajó a 5.5rem en el primer pase y a 4.5rem en el segundo —
   Miguel: "sigue estando muy alto, pero tampoco lo aprietes tanto que no se vea
   elegante". El piso móvil (4.5rem) NO se toca: el pase del 2-ago lo dejó donde
   debía, así que ahora escritorio y móvil coinciden en 72 px y el clamp solo
   sube en pantallas muy anchas. */
.section {
  padding-block: clamp(4.5rem, 4vw, 5rem);
}

/* 🚨 La sección que sigue al HERO arranca con menos aire arriba, y no es una
   excepción caprichosa: el hero mide `100svh` y centra su contenido, así que
   deja ~89 px de cola vacía por debajo del último botón. Con el padding
   completo eso sumaba 161 px de blanco entre el final de una sección y el
   principio de la otra — el "demasiado espacio" que se veía entre la portada y
   los paquetes. El resto de las secciones no tiene esa cola y conserva el suyo. */
@media (min-width: 48rem) {
  .landing-hero + .section {
    padding-top: clamp(2.5rem, 2.5vw, 3rem);
  }
}

.section--tight {
  padding-block: clamp(3rem, 3vw, 3.5rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.75rem;
  height: 0.2rem;
  background: currentColor;
  content: "";
}

/* 🚨 El techo era 6vw = 86 px a 1440, y con él los titulares de sección se
   partían en TRES líneas: 254 px de alto que fijaban la altura del encabezado
   entero y empujaban todo lo demás. Baja a 4.4vw (63 px) — sigue siendo el
   elemento más grande de la página por lejos, pero cabe en dos líneas. El piso
   móvil (2.45rem) no se toca. */
.section-heading {
  max-width: 17ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.45rem, 4.4vw, 4.25rem);
  letter-spacing: -0.038em;
}

.section-intro {
  max-width: 43rem;
  margin-bottom: 2.5rem;
  color: var(--town-muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.btn {
  position: relative;
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.1;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease,
    transform 180ms var(--ease-out), box-shadow 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn--yellow {
  background: var(--town-yellow);
  color: var(--town-ink);
  box-shadow: 0 0.4rem 0 #b99700;
}

.btn--yellow:hover {
  box-shadow: 0 0.55rem 0 #b99700;
}

.btn--dark {
  background: var(--town-navy);
  color: #fff;
  box-shadow: 0 0.4rem 0 rgba(0, 0, 0, 0.28);
}

.btn--white {
  background: #fff;
  color: var(--town-ink);
}

.btn--outline {
  border: 1px solid currentColor;
  background: transparent;
}

.btn__arrow {
  font-size: 1.3em;
  line-height: 0;
  transition: transform 180ms var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(0.25rem);
}

.site-header {
  position: sticky;
  top: var(--utility-height);
  z-index: 100;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 255, 0.92);
  backdrop-filter: blur(1rem);
}

.site-header--overlay {
  position: absolute;
  inset: var(--utility-height) 0 auto;
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(to bottom, rgba(5, 13, 35, 0.9), transparent);
  color: #fff;
  backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  min-width: 9.5rem;
  min-height: 3rem;
  align-items: center;
}

.brand img {
  width: clamp(9.5rem, 13vw, 12.5rem);
}

/* El swap de logo por `content: url()` no se necesita: las dos páginas donde
   aplicaba (portada y Play) ya piden el logo blanco desde el HTML. Reemplazar
   el contenido de un <img> desde CSS tiene soporte y semántica inconsistentes
   entre navegadores y lectores de pantalla. */

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.2vw, 2rem);
}

.site-nav > a {
  position: relative;
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.site-nav > a:not(.btn)::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 0.18rem;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--town-yellow);
  content: "";
  transition: transform 200ms var(--ease-out);
}

.site-nav > a:hover::after,
.site-nav > a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu-toggle svg {
  width: 1.3rem;
}

.experience-switch {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.page-play .experience-switch {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.experience-switch a {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  padding-inline: 0.9rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.experience-switch a[aria-current="page"] {
  background: var(--town-navy);
  color: #fff;
}

.page-play .experience-switch a[aria-current="page"] {
  background: var(--town-yellow);
  color: var(--town-ink);
}

/* Home / Town Switch */
.page-home {
  background: #050d23;
  color: #fff;
}

.home-intro {
  position: absolute;
  z-index: 5;
  top: calc(var(--utility-height) + var(--header-height) + 0.85rem);
  left: 50%;
  width: min(90%, 52rem);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.home-intro .eyebrow {
  margin-bottom: 0.75rem;
  color: var(--town-yellow);
}

.home-intro h1 {
  margin-bottom: 0.25rem;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  letter-spacing: -0.025em;
}

.home-intro p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
}

.portal-grid {
  display: grid;
  min-height: 100svh;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  transition: grid-template-columns 500ms var(--ease-out);
}

.portal {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.portal:last-child {
  border-right: 0;
}

.portal::before,
.portal::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
}

.portal::before {
  background-position: center;
  background-size: cover;
  filter: saturate(0.9);
  transition: transform 700ms var(--ease-out), filter 500ms ease;
}

.portal::after {
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(3, 8, 22, 0.98) 0%,
    rgba(3, 8, 22, 0.45) 55%,
    rgba(3, 8, 22, 0.5) 100%
  );
  transition: background 350ms ease;
}

.portal:hover::before,
.portal:focus-visible::before {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.portal--party::before {
  background-image: url("assets/party-jenga.webp");
  background-position: 50% center;
}

.portal--play::before {
  background-image: url("assets/marketing/play-real-court-1200.webp");
  background-image: image-set(
    url("assets/marketing/play-real-court-1200.avif") type("image/avif"),
    url("assets/marketing/play-real-court-1200.webp") type("image/webp")
  );
  background-position: 54% center;
}

.portal--business::before {
  background-image: url("assets/business-hero.webp");
  background-position: center;
}

.portal--party::after {
  background: linear-gradient(to top, #052694 0%, rgba(12, 72, 215, 0.48) 58%, rgba(9, 20, 49, 0.5));
}

.portal--play::after {
  background: linear-gradient(to top, #030915 0%, rgba(3, 9, 21, 0.42) 62%, rgba(3, 9, 21, 0.58));
}

.portal--business::after {
  background: linear-gradient(to top, #111b53 0%, rgba(28, 36, 99, 0.55) 62%, rgba(9, 20, 49, 0.52));
}

.portal__number {
  position: absolute;
  top: clamp(14.5rem, 33vh, 18rem);
  left: clamp(1.2rem, 3vw, 3rem);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.portal__number::after {
  display: inline-block;
  width: 3rem;
  height: 1px;
  margin-left: 0.8rem;
  vertical-align: middle;
  background: currentColor;
  content: "";
}

.portal__content {
  width: 100%;
  padding: 2.5rem clamp(1.25rem, 3vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.portal__label {
  margin-bottom: 0.8rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portal__title {
  max-width: 10ch;
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  letter-spacing: -0.035em;
}

.portal--party .portal__title {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  line-height: 0.88;
}

.portal--play .portal__title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  line-height: 0.84;
  text-transform: uppercase;
}

.portal__copy {
  max-width: 29rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
}

.portal__cta {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 2px solid var(--town-yellow);
  font-size: 0.86rem;
  font-weight: 800;
}

.portal--party .portal__label,
.portal--party .portal__number,
.portal--party .portal__cta {
  color: #ffd51f;
}

.portal--play .portal__label,
.portal--play .portal__number,
.portal--play .portal__cta {
  color: #efff31;
}

.portal--business .portal__label,
.portal--business .portal__number,
.portal--business .portal__cta {
  color: #8fe8f0;
}

.portal__cta span {
  transition: transform 180ms var(--ease-out);
}

.portal:hover .portal__cta span {
  transform: translateX(0.25rem);
}

@supports selector(:has(*)) {
  .portal-grid:has(.portal--party:hover),
  .portal-grid:has(.portal--party:focus-visible) {
    grid-template-columns: 1.25fr 0.875fr 0.875fr;
  }

  .portal-grid:has(.portal--play:hover),
  .portal-grid:has(.portal--play:focus-visible) {
    grid-template-columns: 0.875fr 1.25fr 0.875fr;
  }

  .portal-grid:has(.portal--business:hover),
  .portal-grid:has(.portal--business:focus-visible) {
    grid-template-columns: 0.875fr 0.875fr 1.25fr;
  }
}


/* Shared landing structure */
.landing-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
}

.landing-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - var(--header-height));
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

.landing-hero__copy {
  min-width: 0;
  max-width: 46rem;
}

/* 🚨 6.5vw era 83–94 px: cinco líneas que se comían la pantalla y dejaban al
   resto de la página sin jerarquía ("demasiado grosero" — Miguel, 2 ago). A
   5.4vw sigue siendo el texto más grande del sitio (secciones: 4.4vw), pero
   respira. El piso móvil (3.4rem) NO se toca. */
.landing-hero h1 {
  margin-bottom: 1.4rem;
  font-size: clamp(3.4rem, 5.4vw, 5.5rem);
  letter-spacing: -0.045em;
}

.landing-hero__lead {
  max-width: 37rem;
  margin-bottom: 1.8rem;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  margin-top: 2.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-proof span::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--town-yellow);
  content: "";
}

.cards-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}



.process {
  display: grid;
  gap: 0;
  border-top: 1px solid currentColor;
}

.process__step {
  display: grid;
  align-items: start;
  gap: 1.5rem;
  padding-block: 2rem;
  border-bottom: 1px solid currentColor;
  grid-template-columns: 4rem minmax(10rem, 0.7fr) minmax(0, 1fr);
}

.process__number {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.process__step h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  letter-spacing: -0.035em;
}

.process__step p {
  max-width: 43rem;
  margin: 0;
  opacity: 0.72;
}

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.cta-band__media,
.cta-band__media img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cta-band__media img {
  object-fit: cover;
}

.cta-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: end;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* 7vw hacía a la banda final MÁS grande que el hero (90 px vs 83). Nada supera
   al hero: misma escala que él. El piso móvil no se toca. */
.cta-band h2 {
  max-width: 14ch;
  margin-bottom: 0;
  font-size: clamp(2.8rem, 5.4vw, 5.5rem);
  letter-spacing: -0.042em;
}

/* Party */
.page-party {
  /* C+ (2 ago 2026): celeste premium. El rosado y el naranja MURIERON como
     colores de UI — el rosado vive solo en los labios de la mascota y el
     naranja entra por las fotos de los productos. El azul rey saturado
     (--party-royal) aparece exactamente DOS veces por página: la banda final
     de CTA y la barra móvil. --party-cream conserva el nombre por diff mínimo,
     pero ya no es crema: es el blanco azulado de página. */
  --party-sky: #dbeefc;
  --party-blue: #1647d9;
  --party-royal: #0b5cf0;
  --party-cream: #fcfeff;
  /* El crema de verdad: el amarillo de marca (#ffd51f) diluido hasta que solo
     queda la temperatura. Es el tercer tono de la alternancia de secciones
     —celeste · crema · blanco— para que ninguna quede pegada a su vecina del
     mismo color. Tan claro que el contraste del texto no se mueve. */
  --party-butter: #fffdf2;
  background: var(--party-cream);
}

.page-party h1,
.page-party h2,
.page-party h3 {
  font-family: "Baloo 2", sans-serif;
}

.party-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.8) 0 4%, transparent 4.2%),
    radial-gradient(circle at 85% 24%, rgba(19, 70, 216, 0.07) 0 12%, transparent 12.3%),
    linear-gradient(135deg, #f2fafe, #e3f2fc);
}

/* 🚨 El hero medía la pantalla completa (100svh) y el sobrante era puro aire
   entre el header y el titular — las X rojas de Miguel (2-ago). Ahora mide su
   CONTENIDO más el MISMO colchón arriba y abajo: misma distancia del header al
   contenido que del contenido al borde de la sección, con el texto centrado
   respecto al visual. Aplica a Party y a Empresas (decisión de Miguel: que la
   siguiente sección asome y invite a bajar — eso es lo que la gente vino a
   ver). Play SE QUEDA a pantalla completa a propósito. Solo escritorio: el
   móvil aprobado no se toca. */
@media (min-width: 48rem) {
  .party-hero,
  .party-hero .landing-hero__inner,
  .business-hero,
  .business-hero .landing-hero__inner {
    min-height: 0;
  }

  .party-hero .landing-hero__inner,
  .business-hero .landing-hero__inner {
    padding-block: clamp(2.75rem, 4vw, 3.5rem);
  }
}

.party-hero h1 {
  color: var(--party-blue);
  font-weight: 800;
  line-height: 0.84;
}

/* El diferenciador ("cancha de fútbol con aire acondicionado") va en navy: con
   todo el titular azul no había dónde mirar. Mismo patrón de dos tonos que ya
   usan Play (blanco + amarillo) y Empresas (tinta + azul). Rosado y naranja
   siguen muertos como colores de UI. */
.party-hero h1 span {
  color: var(--town-navy);
}

.party-hero h1 em {
  display: block;
  color: var(--town-navy);
  font-style: normal;
}

.party-hero__visual {
  position: relative;
  min-height: 38rem;
}

/* 🚨 El círculo vivía con bottom -8%: se salía del hero y el borde inferior
   (ring azul + sombra naranja) quedaba CORTADO por el overflow. Ahora vive
   completo dentro del visual — sube un poco (top 1%) y deja colchón abajo
   (3% + 1rem de sombra caben en el padding del hero). */
.party-hero__blob {
  position: absolute;
  inset: 1% -18% 3% 0;
  transform: rotate(-4deg);
  border: 3px solid rgba(22, 71, 217, 0.9);
  border-radius: 44% 56% 42% 58% / 54% 42% 58% 46%;
  background: linear-gradient(145deg, #fff 0%, #e6fbff 70%);
  box-shadow: 1rem 1rem 0 rgba(255, 122, 26, 0.9);
}

/* Bartolo sube con el círculo para quedar centrado dentro del ring. */
.party-hero__image {
  position: absolute;
  z-index: 2;
  right: -12%;
  bottom: 6%;
  width: 136%;
  max-width: none;
  transform: rotate(-5deg);
  transform-origin: 52% 58%;
  filter: drop-shadow(0 2rem 1.5rem rgba(13, 52, 147, 0.22));
}

.party-hero__picture {
  display: contents;
}

.party-sticker {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--town-ink);
  border-radius: 50%;
  background: var(--town-yellow);
  color: var(--town-ink);
  font-family: "Baloo 2", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  transform: rotate(8deg);
}

.party-sticker--top {
  top: 5%;
  right: auto;
  left: -1%;
  transform: rotate(-8deg);
}

.party-sticker--bottom {
  right: 0;
  bottom: 4%;
  width: 6.25rem;
  transform: rotate(8deg);
  background: var(--town-yellow);
  color: var(--town-ink);
}

/* 🚨 La base era #eef8fe: el MISMO celeste del hero (se leían como una sola
   sección) y además el MISMO color de la tarjeta Clásico, que por eso se
   perdía contra el fondo. En blanco la alternancia respira —hero celeste ·
   paquetes blanco · inflables crema · adicionales celeste— y la escalera azul
   de las tres tarjetas (#eef8fe · #dbeefc · #bfe0fa) se lee completa. */
.party-offer {
  background:
    radial-gradient(circle at 92% 8%, rgba(19, 70, 216, 0.06) 0 10%, transparent 10.3%),
    #fff;
}

.party-offer .section-intro {
  max-width: 52rem;
}

/* 🚨 El clamp de 5vw metía 64 px EXTRA entre las flechas y el paquete Platinum
   — "absurdamente alta". La fila del hint (.carousel-lead) ya administra ese
   aire: el grid solo aporta un colchón mínimo. */
.party-package-grid {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.party-package-card {
  display: flex;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--party-blue);
  border-radius: 2rem;
  color: var(--town-ink);
  box-shadow: 0.65rem 0.65rem 0 var(--party-blue);
  flex-direction: column;
}

.party-package-card--classic {
  background: #eef8fe;
}

.party-package-card--premium {
  background: #dbeefc;
}

.party-package-card--platinum {
  background: #bfe0fa;
}

/* 5:4 y no 4:3 (ago 2026): las tres artes de paquete son 1350×1080 = 5:4
   EXACTO, así que con una sola proporción no se recorta ni un pixel de un
   arte pagado. Con el 4/3 anterior se comía ~7% del alto. Si algún día entra
   un cuarto paquete con otra proporción, esto deja de servir: hay que contar
   cuántas proporciones de origen hay antes de fijar una. */
.party-package-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 2px solid var(--party-blue);
  aspect-ratio: 5 / 4;
}

.party-package-card__media > picture {
  display: block;
  height: 100%;
}

/* Acá vivía .party-package-card__badge, el sello «Ejemplo real». Murió el
   4-ago junto con las fotos que lo respaldaban: las artes nuevas son
   composiciones (Bartolo, pizza dibujada, fondo plano), y sostener sobre
   ellas que son la foto de una fiesta era un claim falso. */

.party-package-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.party-package-card__body {
  display: flex;
  padding: clamp(1.35rem, 2.7vw, 2.25rem);
  flex: 1;
  flex-direction: column;
}

.party-package-card__level {
  margin-bottom: 1.35rem;
  color: var(--party-blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* El NOMBRE del paquete va primero y el "Todo lo del Clásico +" queda debajo,
   como pie del nombre (decisión de Miguel, 4-ago). Por eso el h3 casi pierde su
   margen inferior: el aire hasta el párrafo lo pone ahora `__level`, que quedó
   abajo con su 1.35rem. Si algún día se vuelve a invertir el orden en el HTML,
   estos dos márgenes se invierten con él. */
.party-package-card h3 {
  max-width: 12ch;
  margin-bottom: 0.35rem;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.party-package-card p {
  margin-bottom: 1.5rem;
  font-weight: 650;
}

.party-package-card ul,
.party-catalog details ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding-left: 1.2rem;
}

/* Las tarjetas de paquete ya no llevan lista: el 4-ago Miguel quitó los bullets
   porque ahí se cuenta DE QUÉ VA el paquete, no se enumera lo que incluye —
   eso es trabajo del cotizador. Con la lista murieron su `padding-left` y el
   `margin-top: auto` que la empujaba al fondo de la tarjeta. */
.party-catalog details li {
  padding-left: 0.15rem;
}

.party-catalog {
  margin-top: clamp(4rem, 9vw, 8rem);
}

/* El catálogo salió de dentro de #paquetes a su propia sección. Ese margin-top
   existía para separarlo de las tarjetas de paquete DENTRO de la misma caja;
   ahora .section ya pone su padding y el margin se vuelve aire muerto. */
/* Blanco: va entre dos celestes (los juegos arriba, "Disfruta con tu familia"
   abajo), así que es el respiro de la secuencia. */
.party-catalog-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(19, 70, 216, 0.05), transparent 22rem),
    var(--party-cream);
}

.party-catalog-section .party-catalog {
  margin-top: 0;
}

/* Misma arquitectura que .party-product-heading: viñeta a lo ancho, titular y
   párrafo abriendo juntos por la parte superior de la letra. El titular usa la
   MISMA escala que .section-heading — era el único que seguía en 6vw y por eso
   se veía más grande que todos los demás. */
.party-catalog__heading {
  display: grid;
  align-items: start;
  column-gap: 2rem;
  margin-bottom: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
}

.party-catalog__heading .eyebrow {
  grid-column: 1 / -1;
}

.party-catalog__heading h2 {
  margin: 0;
  color: var(--party-blue);
  font-size: clamp(2.45rem, 4.4vw, 4.25rem);
  letter-spacing: -0.038em;
}

.party-catalog__heading p {
  margin: 0;
  padding-top: 0.4rem;
  color: var(--town-muted);
}

.party-catalog__grid {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.party-catalog details {
  overflow: clip;
  border: 2px solid var(--party-blue);
  border-radius: 1.25rem;
  background: #fff;
  color: var(--town-ink);
}

.party-catalog summary {
  position: relative;
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  padding: 1rem 4rem 1rem 1.25rem;
  color: var(--party-blue);
  font-family: "Baloo 2", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.party-catalog summary::-webkit-details-marker {
  display: none;
}

.party-catalog summary::after {
  position: absolute;
  top: 50%;
  right: 1.15rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  transform: translateY(-50%);
  place-items: center;
  border-radius: 50%;
  background: var(--town-yellow);
  color: var(--town-ink);
  content: "+";
  font-family: "Manrope", sans-serif;
}

.party-catalog details[open] summary::after {
  content: "−";
}

.party-catalog details ul {
  padding: 0 1.5rem 1.5rem 2.5rem;
  color: var(--town-muted);
}

/* Con un producto por línea (65 en total) una lista plana se vuelve una tira
   larguísima. En cuanto hay ancho, la lista fluye en columnas: se lee igual de
   claro —cada producto es su propio renglón— sin estirar la sección. */
@media (min-width: 48rem) {
  .party-catalog details ul {
    columns: 2;
    column-gap: 2rem;
  }

  .party-catalog__group ul {
    columns: auto;
  }
}

/* 🚨 Inflables ocupa las DOS columnas, y no es capricho: en un grid de 2
   columnas la fila la marca el item más alto, así que el vecino de una
   categoría grande deja un hueco debajo — es lo que se veía al abrir todas.
   Medido: con inflables emparejado, el hueco de esa fila solo era de 600 px.
   A ancho completo sus grupos fluyen en columnas y el resto se empareja por
   ALTURA REAL (Comida 507↔Juegos 404 · Decoración 370↔Animación 335 ·
   Fotos 232↔Zona 198), no por número de bullets, que no predice el alto. */
.party-catalog__wide {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  /* Sus 5 grupos fluyen en columnas; el título de la categoría las cruza. */
  .party-catalog__wide[open] {
    columns: 3;
    column-gap: 2rem;
  }

  .party-catalog__wide > summary {
    column-span: all;
  }

  .party-catalog__wide > .party-catalog__group {
    break-inside: avoid;
  }
}

/* Los inflables van agrupados por TIPO (toboganes, castillos, temáticos,
   circuitos, puntería): sueltos no se entiende qué es cada cosa. */
.party-catalog__group {
  padding: 0 1.5rem 0 2.5rem;
}

.party-catalog__group + .party-catalog__group {
  margin-top: 0.9rem;
}

.party-catalog__group-title {
  margin: 0 0 0.35rem;
  color: var(--party-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.party-catalog__group ul {
  padding: 0 0 0 1.1rem;
}

.party-catalog details > .party-catalog__group:last-of-type {
  padding-bottom: 1.5rem;
}

.party-product-section {
  overflow: hidden;
}

/* Crema: corta contra los paquetes (celeste pálido) de arriba y contra los
   juegos (celeste) de abajo. Antes compartía el #eef8fe de los paquetes, que
   los separaba "Disfruta con tu familia" — esa sección bajó al reordenar. */
.party-product-section--inflatables {
  background:
    radial-gradient(circle at 92% 12%, rgba(19, 70, 216, 0.06), transparent 24rem),
    var(--party-butter);
}

.party-product-section--addons {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 213, 31, 0.32), transparent 23rem),
    #dff9ff;
}

/* 🚨 El encabezado de sección es UNA arquitectura, igual en todas las
   secciones: la viñeta negra manda arriba a lo ancho completo; debajo abren A
   LA VEZ el titular azul (izquierda) y su texto de acompañamiento (derecha),
   alineados por la parte superior de la letra — el párrafo nunca se alinea con
   la viñeta. El rail derecho completo (párrafo → hint azul → flechas) comparte
   una sola línea vertical al borde derecho, y el margen corto pega el titular
   a las tarjetas que presenta. */
.party-product-heading {
  display: grid;
  align-items: start;
  margin-bottom: 0.9rem;
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr);
}

.party-product-heading .eyebrow {
  grid-column: 1 / -1;
}

/* 12ch partía "Nuestros paquetes de cumpleaños." en TRES líneas y de ahí salían
   los 254 px de alto del bloque. 16ch lo deja en dos sin llegar a la columna
   del párrafo. */
.party-product-heading .section-heading {
  max-width: 16ch;
  margin-bottom: 0;
  color: var(--party-blue);
}

/* El padding compensa el colchón que Baloo 2 trae por encima de sus
   mayúsculas: la primera línea del párrafo arranca donde arranca la LETRA del
   titular, no donde arranca su caja. */
.party-product-heading__aside {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.4rem;
}

.party-product-heading__aside p {
  margin: 0;
  color: var(--town-muted);
}

/* El rail derecho alinea TODO a la derecha: el borde del párrafo cae sobre la
   misma línea vertical que las flechas (la línea roja del sketch de Miguel,
   2-ago). 📌 Ese `text-align: right` vivía acá y murió el 4-ago: el bloque de
   PROSA JUSTIFICADA del final justifica estos párrafos, y justificar deja el
   borde derecho igual de a plomo — el rail sobrevive intacto y además se
   empareja el borde izquierdo, que era lo que se veía descuidado. */

.catalog-carousel__controls {
  display: flex;
  gap: 0.65rem;
}

/* El hint vive JUNTO a las flechas de las que habla — en azul, para que se
   lea que son suyas — y el cluster completo se pega debajo del párrafo. En
   móvil la fila se abre: hint a la izquierda, flechas a la derecha. */
.carousel-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

@media (min-width: 56rem) {
  .carousel-lead {
    justify-content: flex-end;
  }
}

.carousel-lead .gallery-hint {
  margin: 0;
  color: var(--party-blue);
}

.catalog-carousel__controls button {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  place-items: center;
  border: 2px solid var(--party-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--party-blue);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms ease, color 180ms ease;
}

.catalog-carousel__controls button:hover {
  transform: translateY(-0.15rem);
  background: var(--party-blue);
  color: #fff;
}

.catalog-carousel {
  display: grid;
  gap: 1rem;
  margin-inline: calc(var(--page-gutter) * -1);
  padding: 0.35rem var(--page-gutter) 1.5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  grid-auto-columns: clamp(18rem, 26vw, 21.5rem);
  grid-auto-flow: column;
  scroll-padding-inline: var(--page-gutter);
  /* proximity, no mandatory: en iOS el snap mandatory re-engancha durante el
     pan vertical y el carrusel se mueve en diagonal robándose el scroll de la
     página (reportado por Miguel en teléfono real, 2 ago). Con proximity la
     card igual queda alineada al soltar cerca, y el scroll vertical fluye. */
  scroll-snap-type: x proximity;
  scrollbar-color: var(--party-blue) rgba(22, 71, 217, 0.12);
  scrollbar-width: thin;
}

.catalog-carousel:focus-visible {
  outline: 3px solid var(--party-blue);
  outline-offset: 0.35rem;
}

.catalog-product-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--party-blue);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0.55rem 0.55rem 0 var(--party-blue);
  grid-template-rows: auto 1fr;
  scroll-snap-align: start;
}

.catalog-product-card--blue {
  box-shadow: 0.55rem 0.55rem 0 var(--party-blue);
}

.catalog-product-card--candy {
  box-shadow: 0.55rem 0.55rem 0 var(--party-blue);
}

/* 4:5 y no 2:3 (decisión de Miguel, 3-ago): con 2:3 la tarjeta completa medía
   ~690-760px y se comía la pantalla del teléfono. Con 4:5 la tarjeta del
   carrusel queda a la altura de las de paquete (medido a 390px: 624 vs 619;
   a 1280px: 669 vs 672). Las artes nuevas se piden a 1200×1500 (4:5); las de
   campaña actuales (0.72) pierden solo ~5% arriba y abajo y sobreviven. */
.catalog-product-card picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #f4fafe;
}

.catalog-product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}

.catalog-product-card:hover img {
  transform: scale(1.025);
}

.catalog-product-card__body {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  padding: 1.25rem;
}

.catalog-product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

/* 📌 Vivió unas horas: mientras «Operación asistida» fue un tercer chip, cuatro
   tarjetas envolvían a dos filas y cinco no, y el h3 arrancaba 33 px más abajo
   en unas que en otras. Miguel mandó a quitar ese chip el mismo día (estaba en
   los 9, así que no distinguía nada). Con dos chips —«Nuevo» + la edad— todo
   cabe en una fila y los títulos arrancan parejos solos: la reserva pasó a ser
   una fila de aire muerto. Si vuelve un tercer chip, vuelve esta regla. */

/* Altura DECLARADA (1.65rem = lo que ya medía) y no calculada a partir de
   font-size + line-height + padding: así la zona reservada de abajo es
   aritmética exacta y no depende de las métricas de la fuente. Estimarla dejaba
   2 px de deriva. */
.catalog-product-card__meta span {
  display: inline-flex;
  height: 1.65rem;
  padding: 0 0.65rem;
  align-items: center;
  border-radius: 999px;
  background: var(--party-sky);
  color: var(--town-ink);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
}

.catalog-product-card--candy .catalog-product-card__meta span {
  background: #eaf4fd;
}

.catalog-product-card h3 {
  margin: 0 0 0.6rem;
  color: var(--party-blue);
  font-size: clamp(1.65rem, 2.3vw, 2.2rem);
  line-height: 1;
}

.catalog-product-card p {
  margin: 0 0 1.25rem;
  color: var(--town-muted);
  font-size: 0.9rem;
}

.catalog-product-card__body > a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  border-bottom: 2px solid var(--party-blue);
  color: var(--town-ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.catalog-product-card__body > a:hover {
  color: var(--party-blue);
}

.catalog-note {
  max-width: 52rem;
  margin: 1rem 0 0;
  color: var(--town-muted);
  font-size: 0.82rem;
}

.party-gallery {
  background: #fff;
}

.party-gallery--decor {
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 79, 154, 0.15), transparent 24rem),
    var(--party-cream);
}

.gallery-hint {
  margin: 0.75rem 0 0.6rem;
  color: var(--town-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.party-gallery-strip {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 0.75rem;
  overflow: visible;
  overscroll-behavior-inline: contain;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.65rem;
  scroll-padding-inline: 0.25rem;
  /* proximity, no mandatory — ver el primer carrusel del archivo. */
  scroll-snap-type: x proximity;
  scrollbar-color: var(--party-blue) #d9eef7;
  scrollbar-width: thin;
}

.party-gallery-strip:focus-visible {
  outline: 3px solid var(--party-blue);
  outline-offset: 0.35rem;
}

.party-gallery-strip__item {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  border-radius: 1.35rem;
  background: var(--party-sky);
  scroll-snap-align: start;
}

.party-gallery-strip__item picture,
.party-gallery-strip__item img {
  width: 100%;
  height: 100%;
}

.party-gallery-strip__item img {
  object-fit: cover;
}

.party-gallery-strip__item figcaption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--town-ink);
  font-weight: 800;
  backdrop-filter: blur(0.7rem);
}

.party-trust {
  background: #dff9ff;
}

.trust-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.2fr 0.8fr;
}

.trust-main,
.trust-list {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 2rem;
}

.trust-main {
  position: relative;
  display: flex;
  min-height: 28rem;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  background: var(--town-navy);
  color: #fff;
}

.trust-main::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 12, 30, 0.88), rgba(4, 12, 30, 0.28));
  content: "";
}

.trust-main__media,
.trust-main__media img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trust-main__media img {
  object-fit: cover;
  object-position: 50% 46%;
}

/* Es un título DENTRO de un card: no puede ser más grande que los titulares de
   sección (4.4vw). El piso móvil no se toca. */
.trust-main h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.7rem, 4.4vw, 4.25rem);
  letter-spacing: -0.038em;
}

.trust-main p {
  max-width: 30rem;
  margin: 0;
  font-weight: 700;
}

.trust-list {
  display: grid;
  align-content: center;
  gap: 1rem;
  border: 2px solid var(--party-blue);
  background: #fff;
}

.trust-list__item {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(22, 71, 217, 0.22);
}

.trust-list__item:last-child {
  border-bottom: 0;
}

.trust-list__item strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--party-blue);
  font-family: "Baloo 2", sans-serif;
  font-size: 1.4rem;
}

.party-cta {
  background: var(--party-royal);
  color: #fff;
}

/* En la banda azul rey, el botón primario va BLANCO (la maqueta C+ aprobada):
   navy sobre royal funcionaba, pero el blanco es el que rima con la barra móvil. */
.party-cta .btn--dark {
  background: #fff;
  color: var(--party-royal);
}

.party-cta::after {
  position: absolute;
  right: -4rem;
  bottom: -7rem;
  width: 22rem;
  aspect-ratio: 1;
  border: 3rem solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  content: "";
}

/* Play */
.page-play {
  --play-navy: #04112d;
  --play-blue: #173bff;
  --play-cyan: #43e7ff;
  --play-yellow: #efff31;
  background: var(--play-navy);
  color: #fff;
}

.page-play h1,
.page-play h2,
.page-play h3 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.page-play .site-header {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(4, 17, 45, 0.9);
  color: #fff;
}

.play-hero {
  isolation: isolate;
  background: var(--play-navy);
}

.play-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 17, 45, 0.98) 0%, rgba(4, 17, 45, 0.78) 45%, rgba(4, 17, 45, 0.28) 100%);
  content: "";
}

.play-hero__media,
.play-hero__media img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.play-hero__media img {
  object-fit: cover;
  object-position: 50% 50%;
}

.play-hero::after {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: linear-gradient(rgba(67, 231, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 231, 255, 0.18) 1px, transparent 1px);
  background-size: 5rem 5rem;
  content: "";
  mask-image: linear-gradient(to right, #000, transparent 80%);
}

.play-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
}

.play-hero h1 {
  max-width: 10.5ch;
  color: #fff;
  font-size: clamp(4.8rem, 8.5vw, 9rem);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: -0.035em;
}

.play-hero h1 span {
  display: block;
  color: var(--play-yellow);
}

.play-hero__lead {
  color: rgba(255, 255, 255, 0.82);
}

.booking-card {
  position: relative;
  z-index: 3;
  width: min(100%, 25rem);
  margin-left: auto;
  padding: 1.2rem;
  transform: rotate(2.5deg);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 1rem;
  background: rgba(5, 15, 39, 0.88);
  box-shadow: 1.1rem 1.1rem 0 var(--play-blue);
  backdrop-filter: blur(1rem);
}

.booking-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.booking-card__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--play-yellow);
}

.booking-card__live::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
  box-shadow: 0 0 0 0.3rem rgba(239, 255, 49, 0.14);
}

.booking-card h2 {
  margin-bottom: 1.1rem;
  font-size: 2.8rem;
  letter-spacing: -0.035em;
}

.booking-options {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.booking-option {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
  font-weight: 700;
}

.booking-option strong {
  color: var(--play-cyan);
}

.booking-card .btn {
  width: 100%;
  border-radius: 0.55rem;
}

.play-how {
  position: relative;
  background: var(--play-yellow);
  color: var(--town-ink);
}

.play-how::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  height: 100%;
  opacity: 0.18;
  background: repeating-linear-gradient(-55deg, transparent 0 1.5rem, #000 1.5rem 1.65rem);
  content: "";
}

.play-how .process {
  position: relative;
}

.play-world {
  background: #eef2ff;
  color: var(--town-ink);
}

.play-world .section-intro {
  color: var(--town-muted);
}

.play-world .cards-3 {
  gap: 0.4rem;
}

.play-card {
  position: relative;
  min-height: 23rem;
  overflow: hidden;
  padding: 1.5rem;
  border: 2px solid var(--town-ink);
  background: #11182a;
  color: #fff;
}

.play-card:nth-child(2) {
  background: #11182a;
  color: #fff;
}

.play-card:nth-child(3) {
  background: #11182a;
  color: #fff;
}

.play-card__tag {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  padding-inline: 0.75rem;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.play-card h3 {
  position: absolute;
  z-index: 2;
  right: 1.5rem;
  bottom: 1.2rem;
  left: 1.5rem;
  margin: 0;
  font-size: clamp(2.7rem, 4.5vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 0.15rem 0.75rem rgba(0, 0, 0, 0.72);
}

.play-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  mix-blend-mode: normal;
}

.play-card picture {
  display: contents;
}

.play-pwa {
  position: relative;
  overflow: hidden;
  background: var(--play-blue);
}

.pwa-grid {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 8vw, 7rem);
  grid-template-columns: 0.9fr 1.1fr;
}

.phone-shell {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  padding: 0.65rem;
  transform: rotate(-3deg);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 2.5rem;
  background: var(--play-navy);
  box-shadow: 1.25rem 1.25rem 0 var(--play-yellow);
}

.phone-screen {
  min-height: 34rem;
  padding: 2rem 1rem 1rem;
  overflow: hidden;
  border-radius: 2rem;
  background: #f6f8ff;
  color: var(--town-ink);
}

.phone-screen__bar {
  width: 5rem;
  height: 0.35rem;
  margin: -0.8rem auto 2rem;
  border-radius: 99px;
  background: var(--town-ink);
}

.phone-screen h3 {
  margin-bottom: 1.5rem;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
}

.phone-day {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(9, 18, 38, 0.12);
  border-radius: 0.8rem;
  background: #fff;
}

.phone-day strong {
  font-size: 0.86rem;
}

.phone-day span {
  color: var(--town-muted);
  font-size: 0.72rem;
}

.pwa-copy h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.pwa-copy p {
  max-width: 36rem;
  margin-bottom: 1.7rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.15rem;
}

.play-cta {
  position: relative;
  background: var(--play-cyan);
  color: var(--town-ink);
}

.play-cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(67, 231, 255, 0.94), rgba(67, 231, 255, 0.68));
  content: "";
}

.play-cta .cta-band__media img {
  object-position: 50% 48%;
}

/* Empresas */
.page-business {
  --biz-paper: #f4f6fb;
  --biz-ink: #18265a;
  --biz-blue: #3437f2;
  --biz-cyan: #9cedef;
  background: var(--biz-paper);
}

.business-hero {
  background:
    linear-gradient(rgba(24, 38, 90, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 38, 90, 0.06) 1px, transparent 1px),
    var(--biz-paper);
  background-size: 4rem 4rem;
}

.business-hero h1 {
  color: var(--biz-ink);
  font-weight: 600;
  line-height: 0.88;
}

.business-hero h1 strong {
  color: var(--biz-blue);
  font-weight: 800;
}

.business-stage {
  position: relative;
  min-height: 34rem;
}

.business-stage__photo {
  position: absolute;
  top: 50%;
  right: -2%;
  left: -2%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transform: translateY(-50%);
  border: 2px solid var(--biz-ink);
  border-radius: 1.5rem;
  background: var(--biz-ink);
  box-shadow: 1rem 1rem 0 var(--biz-cyan);
}

.business-stage__photo::after {
  display: none;
}

.business-stage__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.business-stage__floor {
  position: absolute;
  inset: 14% 0 5%;
  transform: perspective(50rem) rotateX(58deg) rotateZ(-6deg);
  border: 2px solid var(--biz-ink);
  background:
    linear-gradient(rgba(52, 55, 242, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 55, 242, 0.16) 1px, transparent 1px),
    #fff;
  background-size: 3rem 3rem;
  box-shadow: 2rem 2rem 0 var(--biz-cyan);
}

.stage-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding-inline: 1rem;
  border: 1px solid var(--biz-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--biz-ink);
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0.4rem 0.4rem 0 var(--biz-blue);
}

.stage-label:nth-child(2) {
  top: 8%;
  left: 3%;
}

.stage-label:nth-child(3) {
  top: 9%;
  right: 2%;
}

.stage-label:nth-child(4) {
  bottom: 7%;
  left: 1%;
}

.stage-label:nth-child(5) {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.stage-label:nth-child(6) {
  right: 1%;
  bottom: 7%;
}

.business-outcomes {
  background: var(--biz-ink);
  color: #fff;
}

.business-outcomes .section-intro {
  color: rgba(255, 255, 255, 0.7);
}

.outcome-grid {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outcome-card {
  min-height: 18rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--biz-ink);
}

.outcome-card__for {
  margin-bottom: 3rem;
  color: var(--biz-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.outcome-card h3 {
  max-width: 14ch;
  margin-bottom: 0.7rem;
  font-size: clamp(2rem, 4vw, 3.7rem);
  letter-spacing: -0.038em;
}

.outcome-card p {
  max-width: 35rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
}

.business-uses {
  background: #fff;
}

.use-list {
  display: grid;
  gap: 0.8rem;
}

.use-item {
  display: grid;
  min-height: 7rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem;
  border: 1px solid rgba(24, 38, 90, 0.18);
  border-radius: 1rem;
  grid-template-columns: 3rem minmax(12rem, 0.6fr) minmax(0, 1fr);
  transition: background 180ms ease, transform 180ms var(--ease-out);
}

.use-item:hover {
  transform: translateX(0.35rem);
  background: var(--biz-paper);
}

.use-item__number {
  color: var(--biz-blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.use-item h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  letter-spacing: -0.04em;
}

.use-item p {
  margin: 0;
  color: var(--town-muted);
}

.business-process {
  background: var(--biz-cyan);
  color: var(--biz-ink);
}

.business-proof {
  background: var(--biz-paper);
}

.proof-layout {
  display: grid;
  align-items: stretch;
  gap: 1rem;
  grid-template-columns: 1.2fr 0.8fr;
}

.proof-visual {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--biz-blue);
}

.proof-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}

.proof-visual picture {
  display: contents;
}

.proof-visual__label {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  background: #fff;
  color: var(--biz-ink);
  font-weight: 800;
}

.proof-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid rgba(24, 38, 90, 0.18);
  border-radius: 1.5rem;
  background: #fff;
}

.proof-copy h2 {
  max-width: 11ch;
  margin-bottom: 2rem;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  letter-spacing: -0.04em;
}

.proof-copy p {
  color: var(--town-muted);
}

.business-cta {
  position: relative;
  background: var(--biz-blue);
  color: #fff;
}

.business-cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 38, 90, 0.94), rgba(52, 55, 242, 0.62));
  content: "";
}

.business-cta .cta-band__media img {
  object-position: 50% 48%;
}

/* Footer */
.site-footer {
  background: var(--town-navy);
  color: #fff;
}

.site-footer__top {
  display: grid;
  align-items: start;
  gap: 3rem;
  padding-block: 3rem;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
}

.site-footer__brand img {
  width: 12rem;
  margin-bottom: 1.3rem;
}

.site-footer__brand p {
  max-width: 30rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.66);
}

/* El horario vivía en Contacto, la columna más alta (380 px contra 156 de la
   marca): la hacía crecer y dejaba 224 px muertos debajo del logo. Aquí llena
   ese hueco y equilibra las cuatro columnas. */
.site-footer__hours {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.8rem;
  line-height: 1.5;
}

.footer-title {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 0.7rem;
}

.footer-links a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  width: fit-content;
  font-weight: 700;
}

.footer-links a:hover {
  color: var(--town-yellow);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
}

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 500ms ease, transform 600ms var(--ease-out);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 70rem) {
  .experience-switch {
    display: none;
  }


  .party-package-grid {
    grid-template-columns: 1fr;
  }

  .party-package-card {
    min-height: 0;
  }

  .party-gallery-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56rem) {
  :root {
    --header-height: 4.5rem;
  }






  .landing-hero__inner,
  .play-hero__inner,
  .pwa-grid,
  .trust-grid,
  .proof-layout {
    grid-template-columns: 1fr;
  }

  .landing-hero__inner {
    align-content: start;
    padding-top: 4rem;
  }

  .party-hero__visual {
    min-height: 30rem;
  }

  .party-hero__image {
    right: -10%;
    width: 128%;
  }

  .booking-card {
    width: min(92%, 25rem);
    margin: 1rem auto;
  }

  .cards-3 {
    grid-template-columns: 1fr;
  }

  .party-catalog__heading,
  .party-catalog__grid {
    grid-template-columns: 1fr;
  }

  /* Apilado, el padding óptico sobra y el párrafo recupera el aire que antes
     ponía el row-gap. */
  .party-catalog__heading p {
    padding-top: 0;
    margin-top: 1.5rem;
  }


  .process__step {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .process__step p {
    grid-column: 2;
  }


  .pwa-copy {
    order: -1;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
  }

  .use-item {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .use-item p {
    grid-column: 2 / -1;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 44rem) {
  :root {
    --page-gutter: 1rem;
  }

  .page-home {
    overflow: auto;
  }

  .home-intro {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 2rem 1.25rem 1.5rem;
    transform: none;
    background: #050d23;
  }

  .home-intro h1 {
    font-size: clamp(2.35rem, 12vw, 3.5rem);
  }

  .portal-grid {
    display: flex;
    min-height: auto;
    gap: 0.75rem;
    padding: 0 1rem 2rem;
    overflow-x: auto;
    scroll-padding-left: 1rem;
    /* proximity, no mandatory — ver el primer carrusel del archivo. */
  scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .portal-grid::-webkit-scrollbar {
    display: none;
  }

  .portal {
    min-width: min(84vw, 23rem);
    min-height: 36rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.5rem;
    scroll-snap-align: start;
  }

  .portal__number {
    top: 1.5rem;
  }

  .portal__content {
    padding: 1.5rem;
  }

  .portal__title {
    font-size: 3.3rem;
  }

  .party-gallery-strip {
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    overflow-x: auto;
    grid-auto-columns: min(82vw, 22rem);
    grid-auto-flow: column;
    grid-template-columns: none;
    scroll-padding-inline: var(--page-gutter);
  }

  .party-gallery-strip__item {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }


  .landing-hero {
    min-height: auto;
  }

  .landing-hero__inner {
    min-height: auto;
    padding-block: 3.5rem;
  }

  .landing-hero h1 {
    font-size: clamp(3.5rem, 18vw, 5.6rem);
  }

  .landing-hero__copy {
    width: 100%;
    max-width: 100%;
  }

  .party-hero h1 {
    font-size: clamp(3rem, 14.5vw, 4.4rem);
  }

  .party-hero h1 em {
    max-width: 7ch;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-proof {
    display: grid;
  }

  .party-hero__visual {
    min-height: 24rem;
  }

  .party-hero__blob {
    inset: 5% -10% 0;
  }

  .party-hero__image {
    right: -12%;
    bottom: 2%;
    width: 138%;
  }

  .party-sticker {
    width: 5.4rem;
    font-size: 0.72rem;
  }

  .party-sticker--bottom {
    right: 0;
    bottom: 1rem;
    left: auto;
  }

  .section-heading {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }

  .process__step {
    gap: 0.7rem;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .trust-main {
    min-height: 23rem;
  }

  .play-hero h1 {
    font-size: clamp(5.1rem, 24vw, 7.7rem);
  }

  .play-hero::before {
    background: linear-gradient(to bottom, rgba(4, 17, 45, 0.85), rgba(4, 17, 45, 0.98));
  }

  .play-hero__media img {
    object-position: 52% 50%;
  }

  .booking-card {
    width: calc(100% - 1.4rem);
    margin-bottom: 1.2rem;
    transform: rotate(1deg);
    box-shadow: 0.7rem 0.7rem 0 var(--play-blue);
  }


  .play-card {
    min-height: 19rem;
  }

  .phone-shell {
    width: calc(100% - 2rem);
  }

  .business-stage {
    min-height: 24rem;
  }

  .business-stage__photo {
    right: 0;
    left: 0;
  }

  .business-hero h1 {
    font-size: clamp(3rem, 14vw, 4rem);
    letter-spacing: -0.045em;
  }

  .stage-label {
    min-height: 2.5rem;
    padding-inline: 0.7rem;
    font-size: 0.63rem;
  }


  .outcome-card {
    min-height: 15rem;
  }

  .use-item {
    gap: 0.75rem;
    padding: 1rem;
  }

  .use-item p {
    font-size: 0.88rem;
  }

  .cta-band__inner {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .cta-band .btn {
    width: 100%;
  }

  /* En una sola columna, el gap y el padding que separaban COLUMNAS pasan a
     separar BLOQUES apilados: 3rem entre cada uno son 144 px de aire muerto.
     Se compacta el aire, nunca el área táctil de 3rem de cada enlace. */
  .site-footer__top {
    gap: 2rem;
    padding-block: 2.5rem;
    grid-template-columns: 1fr;
  }

  .site-footer__brand {
    grid-column: auto;
  }

  /* Cada enlace ya trae sus 48 px de área táctil: el gap encima solo suma aire. */
  .site-footer__top .footer-links,
  .site-footer__top .footer-contact {
    gap: 0.15rem;
  }

  .site-footer__top .footer-title {
    margin-bottom: 0.35rem;
  }

  .site-footer__bottom {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Final cascade guard for the conversion-first home intro. */
@media (max-width: 44rem) {
  .page-home .home-intro {
    top: auto;
    left: auto;
    width: auto;
    padding: 1.1rem 1rem 1rem;
    transform: none;
  }

  .page-home .home-intro h1 {
    max-width: 24ch;
    margin-bottom: 0.85rem;
    font-size: clamp(1.65rem, 8vw, 2.25rem);
    line-height: 1.05;
  }
}

/* Conversion-first iteration · 2026-07-30 */
.home-intro {
  top: calc(var(--utility-height) + var(--header-height) + 0.65rem);
  width: min(calc(100% - 2rem), 66rem);
}

.home-intro__panel {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.9rem 1.25rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.2rem;
  background: rgba(3, 8, 22, 0.76);
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(0.8rem);
}

.home-intro h1 {
  max-width: 31ch;
  margin: 0 auto 0.75rem;
  color: #fff;
  font-size: clamp(1.35rem, 2.15vw, 2.25rem);
  line-height: 1.05;
}

.home-intro h1 strong {
  color: var(--town-yellow);
}

.portal__title {
  max-width: 12ch;
  font-size: clamp(2rem, 3.3vw, 3.8rem);
}

.portal__copy {
  max-width: 25rem;
  font-size: clamp(0.88rem, 1.05vw, 1rem);
}

.utility-bar__contacts > a,
.utility-bar__contacts > button {
  min-height: 2.15rem;
  padding-inline: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.utility-bar--play .utility-bar__contacts > a,
.utility-bar--play .utility-bar__contacts > button {
  border-color: rgba(4, 17, 45, 0.2);
  background: rgba(255, 255, 255, 0.48);
}

.utility-bar__contacts > a:first-child::before {
  margin-right: 0.35rem;
  content: "☎";
}

.utility-bar__contacts > a:nth-child(2)::before {
  display: grid;
  width: 1rem;
  height: 1rem;
  margin-right: 0.35rem;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #06190c;
  content: "W";
  font-size: 0.58rem;
  font-weight: 900;
}

.utility-bar__directions::before {
  margin-right: 0.35rem;
  content: "⌖";
  font-size: 1rem;
}

.utility-bar__contacts > a:hover,
.utility-bar__contacts > button:hover {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.15);
}

.section-actions,
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.section-actions {
  margin-top: 2rem;
}

.section-actions--center {
  justify-content: center;
}

.cta-band__actions {
  justify-content: flex-end;
}

.party-gallery-strip--carousel {
  display: grid;
  gap: 1rem;
  margin: 0 calc(var(--page-gutter) * -1);
  padding: 0.35rem var(--page-gutter) 1.25rem;
  overflow-x: auto;
  grid-auto-columns: clamp(19rem, 35vw, 31rem);
  grid-auto-flow: column;
  grid-template-columns: none;
  scroll-padding-inline: var(--page-gutter);
  /* proximity, no mandatory — ver el primer carrusel del archivo. */
  scroll-snap-type: x proximity;
}

.party-gallery-strip--carousel .party-gallery-strip__item {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.mobile-conversion-bar {
  display: none;
}

.mobile-conversion-bar a {
  display: inline-flex;
  min-width: 0;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.9rem;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.mobile-conversion-bar__primary {
  background: var(--town-yellow);
  color: var(--town-ink);
}

.mobile-conversion-bar__secondary {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.mobile-conversion-bar--party {
  background: var(--party-royal);
}

.mobile-conversion-bar--party .mobile-conversion-bar__primary {
  background: #ffffff;
  color: var(--party-royal);
}

.mobile-conversion-bar--play {
  background: #04112d;
}

.mobile-conversion-bar--play .mobile-conversion-bar__primary {
  background: #efff31;
}

.mobile-conversion-bar--business {
  background: #18265a;
}

.mobile-conversion-bar--business .mobile-conversion-bar__primary {
  background: #9cedef;
}

@media (max-width: 56rem) {
  .business-outcomes .outcome-grid {
    display: grid;
    margin-inline: calc(var(--page-gutter) * -1);
    padding: 0 var(--page-gutter) 1rem;
    overflow-x: auto;
    border: 0;
    background: transparent;
    gap: 0.75rem;
    grid-auto-columns: min(82vw, 24rem);
    grid-auto-flow: column;
    grid-template-columns: none;
    scroll-padding-inline: var(--page-gutter);
    /* proximity, no mandatory — ver el primer carrusel del archivo. */
  scroll-snap-type: x proximity;
  }

  .business-outcomes .outcome-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    scroll-snap-align: start;
  }
}

@media (max-width: 44rem) {
  .page-party,
  .page-play,
  .page-business {
    padding-bottom: 5rem;
  }

  .home-intro {
    width: auto;
    padding: 1.1rem 1rem 1rem;
  }

  .home-intro__panel {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .home-intro h1 {
    max-width: 24ch;
    margin-bottom: 0.85rem;
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  .portal__title {
    max-width: 11ch;
    font-size: clamp(2.4rem, 12vw, 3.35rem);
  }

  .utility-bar__contacts {
    gap: 0.35rem;
  }

  .utility-bar__contacts > a,
  .utility-bar__contacts > button {
    min-width: 0;
    min-height: 2.2rem;
    padding-inline: 0.35rem;
    border-radius: 0.65rem;
    font-size: 0.66rem;
  }

  .utility-bar__contacts > a:first-child::before,
  .utility-bar__contacts > a:nth-child(2)::before,
  .utility-bar__directions::before {
    margin-right: 0.22rem;
  }

  .party-package-grid {
    display: grid;
    margin-inline: calc(var(--page-gutter) * -1);
    padding: 0.25rem var(--page-gutter) 1rem;
    overflow-x: auto;
    gap: 0.85rem;
    grid-auto-columns: min(84vw, 23rem);
    grid-auto-flow: column;
    grid-template-columns: none;
    scroll-padding-inline: var(--page-gutter);
    /* proximity, no mandatory — ver el primer carrusel del archivo. */
  scroll-snap-type: x proximity;
  }

  .party-package-card {
    scroll-snap-align: start;
  }

  .party-gallery-strip--carousel {
    grid-auto-columns: min(84vw, 23rem);
  }

  .section-actions,
  .cta-band__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .section-actions .btn,
  .section-actions .text-link,
  .cta-band__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-band__actions {
    justify-content: stretch;
  }

  .mobile-conversion-bar {
    position: fixed;
    z-index: 180;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 0.55rem;
    padding: 0.65rem max(0.75rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -0.75rem 2rem rgba(3, 8, 22, 0.22);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

/* Facilities, contact, FAQ and legal pages */
.page-info {
  background: #f8faff;
}

.page-info .site-header {
  background: rgba(248, 250, 255, 0.96);
}

.info-hero {
  position: relative;
  display: grid;
  min-height: clamp(32rem, 70svh, 49rem);
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--town-navy);
  color: #fff;
}

.info-hero::before,
.info-hero::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
}

.info-hero::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 10, 29, 0.98) 0%, rgba(3, 10, 29, 0.75) 48%, rgba(3, 10, 29, 0.28) 100%),
    linear-gradient(to top, rgba(3, 10, 29, 0.92), transparent 60%);
}

.info-hero--facilities::before {
  background: none;
}

.info-hero--contact::before {
  background: url("assets/business-hero.webp") center 42% / cover;
}

.info-hero--faq::before {
  background: url("assets/party-jenga.webp") center 46% / cover;
}

.info-hero__inner {
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  padding-block: clamp(4rem, 10vw, 7rem);
}

.info-hero__media,
.info-hero__media img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.info-hero__media img {
  object-fit: cover;
  object-position: 50% 48%;
}

.info-hero__copy {
  max-width: 52rem;
}

.info-hero .eyebrow {
  color: var(--town-yellow);
}

.info-hero h1 {
  max-width: 11ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.6rem, 8.5vw, 7.5rem);
  letter-spacing: -0.042em;
}

.info-hero p {
  max-width: 47rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
}

.facility-overview {
  background: #fff;
}

.facility-overview .section-heading,
.facility-features .section-heading,
.experience-paths .section-heading,
.contextual-faqs .section-heading {
  max-width: 13ch;
}

.stat-grid {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card {
  display: grid;
  min-height: 12rem;
  align-content: space-between;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f2f5fd;
}

.stat-card strong {
  color: var(--town-blue);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.038em;
}

.stat-card span {
  color: var(--town-muted);
  font-weight: 800;
}

.facility-features {
  background: #eff3fb;
}

.section-split-heading {
  display: grid;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1.1fr 0.9fr;
}

.section-split-heading p {
  margin: 0;
  color: var(--town-muted);
}

.feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  min-height: 18rem;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgba(9, 18, 38, 0.12);
  border-radius: var(--radius-md);
  background: #fff;
}

.feature-card > span {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 3.5rem;
  place-items: center;
  border-radius: 999px;
  background: var(--town-yellow);
  font-size: 0.72rem;
  font-weight: 900;
}

.feature-card h3 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.04em;
}

.feature-card p {
  margin: 0;
  color: var(--town-muted);
}








.facility-gallery-section {
  background: #fff;
}

.facility-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.facility-gallery:focus-visible {
  outline: 3px solid var(--town-blue);
  outline-offset: 0.4rem;
}

.facility-gallery__item {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--town-navy);
}

.facility-gallery__item--wide {
  grid-column: span 2;
}

.facility-gallery__item picture,
.facility-gallery__item img {
  width: 100%;
  height: 100%;
}

.facility-gallery__item img {
  object-fit: cover;
}

.facility-gallery__item::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 10, 29, 0.86), transparent 58%);
  content: "";
  pointer-events: none;
}

.facility-gallery__item figcaption {
  position: absolute;
  z-index: 1;
  right: 1.25rem;
  bottom: 1.1rem;
  left: 1.25rem;
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.experience-paths,
.contextual-faqs {
  background: #fff;
}

.path-grid {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.path-card {
  --path-color: var(--town-yellow);
  display: grid;
  min-height: 22rem;
  align-content: space-between;
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--town-navy);
  color: #fff;
}

.path-card--party {
  --path-color: #ff9ac8;
  background: #1649d7;
}

.path-card--play {
  --path-color: #efff31;
  background: #04112d;
}

.path-card--business {
  --path-color: #8fe8f0;
  background: #18265a;
}

.path-card > span {
  color: var(--path-color);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.path-card h3 {
  margin-block: 2rem;
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  letter-spacing: -0.035em;
}

.path-card strong {
  color: var(--path-color);
  font-size: 0.9rem;
}

.path-card:hover {
  transform: translateY(-0.3rem);
}

.info-cta {
  background: var(--town-blue);
  color: #fff;
}

.info-cta .eyebrow {
  color: var(--town-yellow);
}

.contact-section {
  background: #fff;
}

.contact-layout {
  display: grid;
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
}

.contact-card-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.contact-card {
  display: grid;
  min-height: 10rem;
  align-content: center;
  gap: 0.4rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f3f6fc;
}

.contact-card--whatsapp {
  border-color: transparent;
  background: #d8f8e4;
}

.contact-card span,
.contact-card small {
  color: var(--town-muted);
}

.contact-card span {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-card strong {
  overflow-wrap: anywhere;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  line-height: 1.1;
}

.location-card {
  position: sticky;
  top: calc(var(--utility-height) + var(--header-height) + 2rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--town-navy);
  color: #fff;
}

.location-card .eyebrow {
  color: var(--town-yellow);
}

.location-card h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.location-card address {
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.hours-list {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hours-list div {
  display: grid;
  gap: 0.25rem;
}

.hours-list span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.routes-section {
  background: #edf2fb;
}

.route-grid {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-card {
  display: grid;
  min-height: 13rem;
  align-content: space-between;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.route-card span {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.032em;
}

.route-card strong {
  color: var(--town-blue);
}

.social-section {
  background: #fff;
}

.social-card {
  display: grid;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background: #ffd51f;
  grid-template-columns: 1fr auto;
}

.social-card h2 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.038em;
}

.social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.general-faq-section {
  --faq-accent: var(--town-yellow);
  background: #eef3fb;
}

/* 🚨 Esta regla estaba limitada a `.general-faq-section` (la página de
   preguntas), donde vivían los únicos enlaces del FAQ. Al meter el primer
   enlace en el FAQ de Party (4-ago) salió con el gris del párrafo y SIN
   subrayado: un enlace invisible, indistinguible del texto. Se abre a
   cualquier `.faq-list`, porque el problema no era de esa página sino del
   alcance del selector.
   📌 NO usa `--faq-accent`: en Party ese acento es rosado, y el rosado está
   muerto en la UI de Party a propósito. */
.faq-list a {
  color: var(--town-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-hero {
  background: var(--town-navy);
  color: #fff;
}

.legal-hero__inner {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.legal-hero .eyebrow {
  color: var(--town-yellow);
}

.legal-hero h1 {
  max-width: 12ch;
  margin-bottom: 1rem;
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  letter-spacing: -0.042em;
}

.legal-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
}

.legal-content {
  width: min(52rem, calc(100% - (var(--page-gutter) * 2)));
  padding-block: clamp(4rem, 9vw, 7rem);
}

.legal-content section + section {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.legal-content h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
}

.legal-content p,
.legal-content li,
.legal-content address {
  color: #37425a;
}

.legal-content ul {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.3rem;
}

.legal-content a {
  color: var(--town-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-content address {
  font-style: normal;
}

@media (max-width: 64rem) {
  .stat-grid,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .facility-gallery__item {
    min-height: 20rem;
  }

  .path-grid {
    grid-template-columns: 1fr;
  }

  .path-card {
    min-height: 17rem;
  }
}

@media (max-width: 56rem) {
  .section-split-heading,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .location-card {
    position: static;
  }


  .facility-gallery {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(var(--page-gutter) * -1);
    padding: 0 var(--page-gutter) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--page-gutter);
    /* proximity, no mandatory — ver el primer carrusel del archivo. */
  scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .facility-gallery__item,
  .facility-gallery__item--wide {
    min-width: min(82vw, 25rem);
    min-height: 30rem;
    scroll-snap-align: start;
  }


  .route-grid,
  .social-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 44rem) {
  .info-hero {
    min-height: 34rem;
  }

  .info-hero::after {
    background: linear-gradient(to top, rgba(3, 10, 29, 0.98) 12%, rgba(3, 10, 29, 0.48) 100%);
  }

  .info-hero h1 {
    font-size: clamp(3.3rem, 17vw, 5.2rem);
  }

  .stat-grid,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: 9rem;
  }

  .feature-card {
    min-height: 15rem;
  }

  .feature-card > span {
    margin-bottom: 2rem;
  }

  .route-card {
    min-height: 10rem;
  }

  .social-actions,
  .social-actions .btn {
    width: 100%;
  }

  .legal-hero h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }
}

/* Launch-ready global navigation, contact and content layers */
.utility-bar {
  position: sticky;
  z-index: 120;
  top: 0;
  min-height: var(--utility-height);
  background: #030a1d;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.page-home .utility-bar {
  position: absolute;
  right: 0;
  left: 0;
}

.utility-bar--play {
  background: var(--play-yellow, #efff31);
  color: var(--town-ink);
}

.utility-bar__inner,
.utility-bar__contacts,
.utility-bar__social {
  display: flex;
  align-items: center;
}

.utility-bar__inner {
  min-height: var(--utility-height);
  justify-content: space-between;
  gap: 1rem;
}

.utility-bar__contacts,
.utility-bar__social {
  gap: clamp(0.6rem, 1.5vw, 1.25rem);
}

.utility-bar a,
.utility-bar__directions {
  display: inline-flex;
  min-height: var(--utility-height);
  align-items: center;
  white-space: nowrap;
}

.utility-bar__directions {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.utility-bar a:hover,
.utility-bar__directions:hover {
  color: var(--town-yellow);
}

.utility-bar--play a:hover,
.utility-bar--play .utility-bar__directions:hover {
  color: var(--town-blue);
}

.utility-bar__status {
  color: var(--town-yellow);
  text-align: center;
}

.utility-bar--play .utility-bar__status {
  color: var(--town-ink);
}

.faq-section {
  --faq-accent: var(--town-blue);
  background: #f1f4fb;
}

.faq-section--party {
  --faq-accent: #ff4e9a;
  background: #fff2f8;
}

.faq-section--play {
  --faq-accent: var(--play-yellow, #efff31);
  background: var(--play-navy, #04112d);
  color: #fff;
}

.faq-section--business {
  --faq-accent: #50d7df;
  background: #edf6fa;
}

.faq-layout {
  display: grid;
  align-items: start;
  gap: clamp(2rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.faq-heading {
  position: sticky;
  top: calc(var(--utility-height) + var(--header-height) + 2rem);
}

.faq-heading .section-heading {
  margin-bottom: 1.25rem;
}

.faq-heading p {
  max-width: 35rem;
  color: var(--town-muted);
}

.faq-section--play .faq-heading p {
  color: rgba(255, 255, 255, 0.72);
}

.text-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 2px solid var(--faq-accent);
  font-weight: 800;
}

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-list details {
  overflow: clip;
  border: 1px solid rgba(9, 18, 38, 0.14);
  border-radius: 1rem;
  background: #fff;
  color: var(--town-ink);
}

.faq-section--play .faq-list details {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.faq-list summary {
  position: relative;
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 3.75rem 1rem 1.25rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  place-items: center;
  border-radius: 999px;
  background: var(--faq-accent);
  color: var(--town-ink);
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details[open] summary {
  color: var(--faq-accent);
}

.faq-section--party .faq-list details[open] summary,
.faq-section--business .faq-list details[open] summary {
  color: var(--town-ink);
}

.faq-list details p {
  margin: 0;
  padding: 0 1.25rem 1.35rem;
  color: var(--town-muted);
}

.faq-section--play .faq-list details p {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__top--complete {
  grid-template-columns: minmax(15rem, 1.35fr) repeat(3, minmax(8.5rem, 0.65fr));
}

.footer-contact {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
}

.footer-contact a,
.footer-contact span,
.footer-link-button {
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
}

.footer-contact a,
.footer-link-button,
.legal-links a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
}

.footer-link-button {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.footer-contact a:hover,
.footer-link-button:hover,
.legal-links a:hover {
  color: var(--town-yellow);
}

.directions-dialog {
  width: min(calc(100% - 2rem), 32rem);
  max-height: min(44rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.5rem;
  background: #fff;
  color: var(--town-ink);
  box-shadow: 0 2rem 6rem rgba(3, 10, 29, 0.38);
}

.directions-dialog::backdrop {
  background: rgba(3, 10, 29, 0.72);
  backdrop-filter: blur(0.35rem);
}

.directions-dialog__inner {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 5vw, 2rem);
}

.directions-dialog__header {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.directions-dialog__header h2 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.directions-dialog__header p {
  margin: 0.65rem 0 0;
  color: var(--town-muted);
  font-size: 0.86rem;
}

.directions-dialog__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f1f4fb;
  color: var(--town-ink);
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}

.directions-dialog__options {
  display: grid;
  gap: 0.7rem;
}

.directions-dialog__option,
.directions-dialog__copy {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--town-blue);
  border-radius: 1rem;
  background: #fff;
  color: var(--town-ink);
  font: inherit;
  font-weight: 850;
  text-align: left;
}

.directions-dialog__option:hover,
.directions-dialog__copy:hover {
  background: var(--town-blue);
  color: #fff;
}

.directions-dialog__copy {
  width: 100%;
  cursor: pointer;
}

.directions-dialog__status {
  min-height: 1.25rem;
  margin: 0;
  color: var(--town-muted);
  font-size: 0.78rem;
}

/* ── El perfil de producto ────────────────────────────────────────────────
   Mismo molde que .directions-dialog (dialog nativo + backdrop). La foto del
   catálogo es 2:3; a esa proporción se come la pantalla del teléfono entera y
   el nombre queda bajo el pliegue, así que acá se recorta a 4:3 y en
   escritorio pasa a columna propia. */
.product-profile {
  width: min(calc(100% - 2rem), 46rem);
  max-height: min(48rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.5rem;
  background: #fff;
  color: var(--town-ink);
  box-shadow: 0 2rem 6rem rgba(3, 10, 29, 0.38);
}

.product-profile::backdrop {
  background: rgba(3, 10, 29, 0.72);
  backdrop-filter: blur(0.35rem);
}

.product-profile__inner {
  position: relative;
  display: grid;
  max-height: inherit;
  overflow-y: auto;
}

.product-profile__close {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.35rem 1rem rgba(3, 10, 29, 0.18);
  color: var(--town-ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

/* 🚨 Las artes del catálogo traen el nombre y "NUEVOS" QUEMADOS en la imagen
   (el brief de diseño pide reencuadrarlas sin texto). Mientras eso llegue,
   `cover` parte esas letras por la mitad y se lee como un error de maqueta:
   se muestra la imagen COMPLETA y el alto se acota con la pantalla. El fondo
   celeste es el mismo de las artes, así que la caja no se nota. */
.product-profile__media {
  background: var(--party-sky);
}

.product-profile__media img {
  display: block;
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
}

.product-profile__body {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: clamp(1.25rem, 5vw, 2rem);
}

.product-profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.product-profile__meta span {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--party-sky);
  color: var(--party-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-profile__body h2 {
  margin: 0;
  color: var(--party-blue);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.product-profile__text {
  margin: 0;
  color: var(--town-muted);
}

.product-profile__note {
  margin: 0;
  color: var(--town-muted);
  font-size: 0.82rem;
}

.product-profile__actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.product-profile__actions .btn {
  justify-content: center;
  width: 100%;
}

/* La galería viva (llega de FT-OS cuando el producto está en la vitrina). */
.product-profile__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem;
  background: var(--party-sky);
}

.product-profile__thumb {
  display: inline-flex;
  overflow: hidden;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
}

.product-profile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-profile__thumb--video {
  width: auto;
  padding: 0 0.7rem;
  color: var(--party-blue);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.product-profile__media video {
  display: block;
  width: 100%;
  max-height: 42vh;
  background: #000;
}

/* Las secciones del perfil (qué no incluye, cómo se coordina): mismo molde que
   el cotizador — la sección sin contenido no se pinta. */
.product-profile__section h3 {
  margin: 0 0 0.2rem;
  color: var(--town-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-profile__section p {
  margin: 0;
  color: var(--town-muted);
  font-size: 0.92rem;
}

/* "Qué incluye": una cosa por línea con su marca, igual que en el cotizador.
   El check va en ::before para no meter un SVG por ítem. */
.product-profile__includes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.product-profile__includes li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--town-muted);
  font-size: 0.92rem;
}

.product-profile__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  /* El azul de marca: la paleta del sitio no tiene verde, y no se inventa uno. */
  color: var(--town-blue);
  font-weight: 800;
}

/* La foto invita al toque solo cuando el JS ya cableó el perfil. */
.catalog-product-card__media--interactive {
  cursor: pointer;
}

@media (min-width: 48rem) {
  .product-profile__inner {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .product-profile__media img {
    height: 100%;
    max-height: none;
  }

  .product-profile__body {
    align-content: center;
  }

  /* En fila mientras quepan enteros; si no, se apilan. Partir "Cotizar
     online" en dos renglones dentro de la píldora se lee como un error. */
  .product-profile__actions {
    display: flex;
    flex-wrap: wrap;
  }

  .product-profile__actions .btn {
    width: auto;
    white-space: nowrap;
  }
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#preguntas,
#como-funciona,
#paquetes,
#inflables,
#adicionales,
#ideas,
#tranquilidad,
#reservar,
#comunidad,
#webapp,
#resultados,
#posibilidades,
#proceso {
  scroll-margin-top: calc(var(--utility-height) + var(--header-height) + 1rem);
}

@media (max-width: 72rem) {
  .site-nav {
    position: fixed;
    z-index: 99;
    /* El header tiene backdrop-filter, así que ES el marco de referencia de
       este panel fijo: 100% equivale a su borde inferior real. Con las
       variables quedaba una franja de 47 px entre el header y el menú. */
    inset: 100% 0 auto;
    display: grid;
    max-height: 0;
    overflow: hidden;
    padding-inline: var(--page-gutter);
    background: var(--town-navy);
    color: #fff;
    opacity: 0;
    transition: max-height 320ms var(--ease-out), opacity 180ms ease, padding 320ms ease;
  }

  .menu-open .site-nav {
    max-height: calc(100svh - var(--utility-height) - var(--header-height));
    padding-block: 1rem 1.5rem;
    overflow-y: auto;
    opacity: 1;
  }

  .site-nav > a {
    min-height: 3.5rem;
    font-size: 1rem;
  }

  .site-nav > .btn {
    margin-top: 0.5rem;
  }

  .menu-toggle {
    display: grid;
  }

  .experience-switch {
    display: none;
  }
}

@media (max-width: 56rem) {
  .party-product-heading {
    grid-template-columns: 1fr;
  }

  .party-product-heading .section-heading {
    max-width: 14ch;
  }

  /* Apilado ya no hay dos columnas que alinear: el padding óptico sobra y el
     párrafo recupera el aire que antes ponía el row-gap. */
  .party-product-heading__aside {
    padding-top: 0;
    margin-top: 1.5rem;
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-heading {
    position: static;
  }

  .site-footer__top--complete {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__top--complete .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 56rem) {
  .utility-bar .utility-bar__email,
  .utility-bar__status,
  .utility-bar__social {
    display: none;
  }

  .utility-bar__inner {
    justify-content: center;
  }

  .utility-bar__contacts {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 44rem) {
  .catalog-carousel {
    grid-auto-columns: min(82vw, 22rem);
  }

  .catalog-product-card {
    box-shadow: 0.4rem 0.4rem 0 var(--party-blue);
  }

  .catalog-product-card--blue {
    box-shadow: 0.4rem 0.4rem 0 var(--party-blue);
  }

  .catalog-product-card--candy {
    box-shadow: 0.4rem 0.4rem 0 var(--party-blue);
  }

  .utility-bar .utility-bar__email,
  .utility-bar__status,
  .utility-bar__social {
    display: none;
  }

  .utility-bar__inner {
    justify-content: center;
  }

  .utility-bar__contacts {
    width: 100%;
    justify-content: space-between;
  }

  .utility-bar__contacts > * {
    flex: 1;
    justify-content: center;
  }

  .utility-bar__contacts a,
  .utility-bar__directions {
    padding-inline: 0.25rem;
  }

  .utility-bar__contacts a strong {
    display: none;
  }

  .utility-bar__contacts .utility-bar__email {
    display: none;
  }

  .home-intro {
    padding: 1.2rem 1.25rem 1.1rem;
  }

  .home-intro h1 {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .home-intro p {
    font-size: 0.78rem;
  }

  .faq-list summary {
    padding-left: 1rem;
    font-size: 0.95rem;
  }

  .faq-list details p {
    padding-inline: 1rem;
  }

  .site-footer__top--complete {
    grid-template-columns: 1fr;
  }

  .site-footer__top--complete .site-footer__brand {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Interactive production map — enabled only with ?artes=1 */
html.art-map body {
  padding-bottom: 7.5rem;
}

html.art-map [data-art-slot],
html.art-map [data-art-component] {
  position: relative;
  isolation: isolate;
}

.art-map__slot-label,
.art-map__component-label {
  position: absolute;
  z-index: 80;
  display: grid;
  width: min(calc(100% - 2rem), 26rem);
  gap: 0.5rem;
  padding: 1rem;
  overflow-wrap: anywhere;
  border: 2px solid #07142f;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  color: #07142f;
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0.65rem 0.65rem 0 #07142f;
  pointer-events: none;
}

.art-map__slot-label {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.art-map__component-label {
  top: -1rem;
  left: 50%;
  width: min(calc(100% - 1rem), 22rem);
  transform: translateX(-50%);
  border-color: #007a52;
  background: rgba(230, 255, 246, 0.97);
  box-shadow: 0.45rem 0.45rem 0 #007a52;
}

.art-map__label-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.art-map__label-meta span {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding-inline: 0.6rem;
  border-radius: 999px;
  background: #07142f;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.art-map__label-meta span:last-child {
  background: #ffd51f;
  color: #07142f;
}

.art-map__component-label .art-map__label-meta span:last-child {
  background: #00d084;
}

.art-map__slot-label strong,
.art-map__component-label strong {
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: none;
}

.art-map__size {
  font-size: 0.78rem;
  font-weight: 750;
}

.art-map__slot-label small,
.art-map__component-label small {
  color: #536078;
  font-size: 0.72rem;
  line-height: 1.4;
}

html.art-map .portal::before {
  transform: none !important;
  filter: none !important;
  background-image: none;
  background-size: 3rem 3rem;
}

html.art-map .portal--party::before {
  background-color: #ffd4e7;
  background-image: linear-gradient(45deg, rgba(255, 79, 154, 0.28) 25%, transparent 25%, transparent 75%, rgba(255, 79, 154, 0.28) 75%);
}

html.art-map .portal--play::before {
  background-color: #bcefff;
  background-image: linear-gradient(45deg, rgba(23, 59, 255, 0.18) 25%, transparent 25%, transparent 75%, rgba(23, 59, 255, 0.18) 75%);
}

html.art-map .portal--business::before {
  background-color: #dfe1ff;
  background-image: linear-gradient(45deg, rgba(52, 55, 242, 0.15) 25%, transparent 25%, transparent 75%, rgba(52, 55, 242, 0.15) 75%);
}

html.art-map .portal::after {
  background: linear-gradient(to top, rgba(7, 20, 47, 0.2), transparent 60%);
}

html.art-map .portal > :not(.art-map__slot-label) {
  opacity: 0.08;
}

html.art-map .party-hero__visual,
html.art-map .business-stage,
html.art-map .result-card,
html.art-map .party-bento__item,
html.art-map .party-gallery-strip__item,
html.art-map .trust-main,
html.art-map .play-card,
html.art-map .proof-visual,
html.art-map .facility-gallery__item {
  outline: 3px dashed #07142f;
  outline-offset: -3px;
  background-color: #edf2ff;
  background-image: linear-gradient(45deg, rgba(7, 20, 47, 0.08) 25%, transparent 25%, transparent 75%, rgba(7, 20, 47, 0.08) 75%);
  background-position: 0 0, 1.25rem 1.25rem;
  background-size: 2.5rem 2.5rem;
}

html.art-map .party-hero__visual > :not(.art-map__slot-label),
html.art-map .business-stage > :not(.art-map__slot-label),
html.art-map .result-card > :not(.art-map__slot-label),
html.art-map .party-bento__item > :not(.art-map__slot-label),
html.art-map .party-gallery-strip__item > :not(.art-map__slot-label),
html.art-map .trust-main > :not(.art-map__slot-label),
html.art-map .play-card > :not(.art-map__slot-label),
html.art-map .proof-visual > :not(.art-map__slot-label),
html.art-map .facility-gallery__item > :not(.art-map__slot-label) {
  opacity: 0.09 !important;
}

html.art-map .party-bento__item img,
html.art-map .party-gallery-strip__item img,
html.art-map .play-card img,
html.art-map .proof-visual img,
html.art-map .party-hero__image,
html.art-map .facility-gallery__item img,
html.art-map .play-hero__media,
html.art-map .cta-band__media {
  visibility: hidden;
}

html.art-map .play-hero::before {
  background:
    linear-gradient(90deg, rgba(4, 17, 45, 0.6), rgba(23, 59, 255, 0.12)),
    linear-gradient(45deg, rgba(67, 231, 255, 0.16) 25%, transparent 25%, transparent 75%, rgba(67, 231, 255, 0.16) 75%),
    #122354;
  background-size: auto, 4rem 4rem, auto;
}

html.art-map .play-hero > .art-map__slot-label {
  top: 1.25rem;
  right: var(--page-gutter);
  left: auto;
  transform: none;
}

html.art-map .play-card:nth-child(1) {
  background-color: #dfe6ff;
}

html.art-map .play-card:nth-child(2) {
  background-color: #d4d9ff;
  color: var(--town-ink);
}

html.art-map .play-card:nth-child(3) {
  background-color: #caf7ff;
}

html.art-map [data-art-component] {
  outline: 3px dashed #00d084;
  outline-offset: 0.4rem;
}

html.art-map .cta-band[data-art-slot] {
  min-height: 25rem;
  background-color: #dae2f6;
  background-image: linear-gradient(45deg, rgba(7, 20, 47, 0.08) 25%, transparent 25%, transparent 75%, rgba(7, 20, 47, 0.08) 75%);
  background-size: 3rem 3rem;
  color: #07142f;
}

html.art-map .cta-band[data-art-slot]::after {
  display: none;
}

html.art-map .cta-band[data-art-slot] .cta-band__inner {
  opacity: 0.12;
}

.art-map__toolbar {
  position: fixed;
  z-index: 99999;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  width: min(80rem, calc(100% - 2rem));
  min-height: 5.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-inline: auto;
  padding: 0.8rem 1rem;
  border: 2px solid #fff;
  border-radius: 1.25rem;
  background: rgba(7, 20, 47, 0.97);
  color: #fff;
  box-shadow: 0 1rem 4rem rgba(7, 20, 47, 0.38);
  backdrop-filter: blur(1rem);
}

.art-map__toolbar-copy {
  display: grid;
  flex: 0 0 auto;
  gap: 0.1rem;
}

.art-map__toolbar-copy strong {
  color: #ffd51f;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.art-map__toolbar-copy span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
}

.art-map__toolbar nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.art-map__toolbar a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.art-map__toolbar a:hover {
  border-color: #ffd51f;
  color: #ffd51f;
}

.art-map__toolbar .art-map__normal-link {
  border-color: #ffd51f;
  background: #ffd51f;
  color: #07142f;
}

@media (max-width: 56rem) {
  html.art-map .play-hero > .art-map__slot-label {
    top: 1rem;
    right: 1rem;
  }

  .art-map__toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.6rem;
  }

  .art-map__toolbar-copy {
    padding-inline: 0.4rem;
  }

  .art-map__toolbar nav {
    justify-content: flex-start;
    padding-bottom: 0.1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .art-map__toolbar nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 44rem) {
  html.art-map body {
    padding-bottom: 9.5rem;
  }

  .art-map__slot-label,
  .art-map__component-label {
    width: calc(100% - 1.25rem);
    gap: 0.35rem;
    padding: 0.75rem;
    border-radius: 0.8rem;
    box-shadow: 0.4rem 0.4rem 0 #07142f;
  }

  .art-map__component-label {
    box-shadow: 0.35rem 0.35rem 0 #007a52;
  }

  .art-map__slot-label strong,
  .art-map__component-label strong {
    font-size: 0.95rem;
  }

  .art-map__size {
    font-size: 0.7rem;
  }

  .art-map__slot-label small,
  .art-map__component-label small {
    font-size: 0.65rem;
  }

  html.art-map .play-hero > .art-map__slot-label {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: calc(100% - 2rem);
    margin: 1rem auto 0;
  }

  .art-map__toolbar {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 0;
    padding: 0.65rem;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 1rem 1rem 0 0;
  }
}

/* Keep the conversion headline dominant after legacy responsive layers. */
.header-conversion-cta {
  display: none;
}

.footer-links a {
  min-width: 2.75rem;
}

@media (max-width: 72rem) {
  .header-conversion-cta {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding-inline: 0.95rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
  }

  .header-conversion-cta--party {
    border-color: var(--party-blue);
    background: var(--party-blue);
    color: #fff;
  }

  .header-conversion-cta--play {
    border-color: var(--play-yellow);
    background: var(--play-yellow);
    color: var(--town-ink);
  }

  .header-conversion-cta--business {
    border-color: var(--biz-ink);
    background: var(--biz-cyan);
    color: var(--biz-ink);
  }
}

@media (max-width: 44rem) {
  .page-party,
  .page-play,
  .page-business {
    padding-bottom: 0;
  }

  .page-home .home-intro {
    top: auto;
    left: auto;
    width: auto;
    padding: 1.1rem 1rem 1rem;
    transform: none;
  }

  .page-home .home-intro h1 {
    max-width: 24ch;
    margin-bottom: 0.85rem;
    font-size: clamp(1.65rem, 8vw, 2.25rem);
    line-height: 1.05;
  }

  .site-header__inner {
    gap: 0.55rem;
  }

  .utility-bar__contacts > a,
  .utility-bar__contacts > button {
    min-height: 2.75rem;
  }

  .page-party .brand,
  .page-play .brand,
  .page-business .brand {
    min-width: 0;
  }

  .page-party .brand img,
  .page-play .brand img,
  .page-business .brand img {
    width: clamp(7.4rem, 32vw, 9.5rem);
  }
}

/* Navigation polish · compact CTAs use the same raised language as the main actions. */
.home-intro h1 {
  margin-bottom: 0;
}

.utility-bar__contacts {
  gap: 0.55rem;
}

.utility-bar__contacts > a,
.utility-bar__contacts > button {
  min-height: 2.15rem;
  gap: 0.25rem;
  padding-inline: 0.9rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--town-navy);
  box-shadow: 0 0.22rem 0 rgba(0, 0, 0, 0.35);
  font-weight: 850;
  transition: box-shadow 180ms ease, transform 180ms var(--ease-out);
}

.utility-bar .utility-bar__email,
.utility-bar__social {
  display: none;
}

.utility-bar__status {
  margin-left: auto;
}

.page-home .utility-bar__contacts > a,
.page-home .utility-bar__contacts > button {
  background: var(--town-yellow);
  box-shadow: 0 0.22rem 0 #9a7900;
}

.page-play .utility-bar__contacts > a,
.page-play .utility-bar__contacts > button {
  background: var(--town-navy);
  color: #fff;
  box-shadow: 0 0.22rem 0 rgba(4, 17, 45, 0.42);
}

.page-business .utility-bar__contacts > a,
.page-business .utility-bar__contacts > button {
  background: var(--biz-cyan);
  color: var(--biz-ink);
  box-shadow: 0 0.22rem 0 #3499a4;
}

.utility-bar__contacts > a:first-child::before,
.utility-bar__contacts > a:nth-child(2)::before,
.utility-bar__directions::before {
  display: none;
  content: none;
}

.utility-bar__contacts > a:hover,
.utility-bar__contacts > button:hover,
.utility-bar--play .utility-bar__contacts > a:hover,
.utility-bar--play .utility-bar__contacts > button:hover {
  background: #fff;
  color: var(--town-navy);
  box-shadow: 0 0.34rem 0 rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.page-home .utility-bar__contacts > a:hover,
.page-home .utility-bar__contacts > button:hover {
  background: var(--town-yellow);
  box-shadow: 0 0.34rem 0 #9a7900;
}

.page-play .utility-bar__contacts > a:hover,
.page-play .utility-bar__contacts > button:hover {
  background: var(--town-navy);
  color: #fff;
  box-shadow: 0 0.34rem 0 rgba(4, 17, 45, 0.42);
}

.page-business .utility-bar__contacts > a:hover,
.page-business .utility-bar__contacts > button:hover {
  background: var(--biz-cyan);
  color: var(--biz-ink);
  box-shadow: 0 0.34rem 0 #3499a4;
}

.utility-bar__contacts > a:active,
.utility-bar__contacts > button:active {
  box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.32);
  transform: translateY(2px);
}

@media (max-width: 72rem) {
  .header-conversion-cta {
    gap: 0.45rem;
    border: 0;
    box-shadow: 0 0.28rem 0 rgba(0, 0, 0, 0.26);
    transition: box-shadow 180ms ease, transform 180ms var(--ease-out);
  }

  .header-conversion-cta::after {
    content: "→";
    font-size: 1rem;
    line-height: 0;
  }

  .header-conversion-cta--party,
  .header-conversion-cta--business {
    background: var(--town-navy);
    color: #fff;
  }

  .header-conversion-cta--play {
    background: var(--play-yellow);
    color: var(--town-ink);
    box-shadow: 0 0.28rem 0 #b4c20c;
  }

  .header-conversion-cta:hover {
    box-shadow: 0 0.4rem 0 rgba(0, 0, 0, 0.26);
    transform: translateY(-1px);
  }

  .header-conversion-cta:active {
    box-shadow: 0 0.12rem 0 rgba(0, 0, 0, 0.26);
    transform: translateY(2px);
  }
}

@media (max-width: 44rem) {
  .utility-bar__contacts {
    gap: 0.45rem;
  }

  .utility-bar__contacts > a,
  .utility-bar__contacts > button {
    min-height: 2.75rem;
    padding-inline: clamp(0.55rem, 3vw, 0.85rem);
    font-size: 0.64rem;
  }

  .play-hero h1 {
    font-size: clamp(4rem, 20vw, 6rem);
  }

  .header-conversion-cta {
    flex-shrink: 0;
    gap: 0.35rem;
    padding-inline: 0.7rem;
    white-space: nowrap;
  }

  .proof-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .proof-visual,
  .proof-copy {
    min-width: 0;
  }
}

/* ==========================================================================
   Tanda A + B · 2026-07-31
   Conversión móvil siempre a mano, cambio de mundo desde el menú,
   portada móvil con jerarquía y carruseles que se anuncian solos.
   ========================================================================== */

/* --- A1 · Barra de conversión móvil ------------------------------------- */
/* La barra existía en CSS pero nunca se montó en el HTML; al montarla hay que
   devolverle al documento el espacio que ocupa para que no tape el footer. */
@media (max-width: 44rem) {
  .page-party,
  .page-play,
  .page-business {
    padding-bottom: 5.25rem;
  }

  .mobile-conversion-bar a {
    box-shadow: 0 0.22rem 0 rgba(0, 0, 0, 0.28);
    transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
  }

  .mobile-conversion-bar a:active {
    box-shadow: 0 0.08rem 0 rgba(0, 0, 0, 0.28);
    transform: translateY(2px);
  }

  /* Con el menú abierto la barra estorba: el menú ya trae su propio CTA. */
  .menu-open .mobile-conversion-bar {
    display: none;
  }
}

/* --- A2 · Cambiar de mundo desde el menú móvil --------------------------- */
.site-nav__worlds {
  display: none;
}

@media (max-width: 72rem) {
  .site-nav__worlds {
    display: grid;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    gap: 0.15rem;
  }

  .site-nav__worlds-title {
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .site-nav__worlds a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
  }

  .site-nav__worlds a[aria-current="page"] {
    color: var(--town-yellow);
  }

  .site-nav__worlds a[aria-current="page"]::after {
    margin-left: 0.5rem;
    content: "•";
  }
}

/* --- B1 · Portada móvil: menos texto plano, más jerarquía ---------------- */
@media (max-width: 44rem) {
  .page-home .home-intro {
    padding: 1.35rem 1.25rem 0.9rem;
    text-align: left;
  }

  .page-home .home-intro__panel {
    margin-inline: 0;
  }

  .page-home .home-intro h1 {
    max-width: 15ch;
    margin-inline: 0;
    font-size: clamp(1.75rem, 8.2vw, 2.4rem);
    letter-spacing: -0.03em;
    line-height: 1;
    text-wrap: balance;
  }

  .page-home .home-intro__prompt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .page-home .home-intro__prompt::after {
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, var(--town-yellow), rgba(255, 213, 31, 0));
    content: "";
  }

  /* Más recorte de la siguiente tarjeta: el corte es la mitad del mensaje. */
  .portal-grid {
    padding-bottom: 0.5rem;
  }

  /* La altura la manda el fold: tarjeta completa + indicador tienen que caber
     en la primera pantalla, o el "se desliza" no se ve y no sirve de nada. */
  .portal {
    min-width: min(79vw, 21rem);
    min-height: min(26rem, calc(100svh - 25rem));
  }

  .portal__title {
    font-size: clamp(2.1rem, 10vw, 2.9rem);
  }

  .portal__copy {
    margin-bottom: 1.1rem;
    font-size: 0.9rem;
  }
}

.home-intro__prompt {
  display: none;
}

/* --- B2 · Indicador de deslizamiento ------------------------------------- */
.swipe-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  padding: 0.15rem var(--page-gutter) 0.35rem;
}

.swipe-nav[hidden] {
  display: none;
}

.swipe-nav__indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.swipe-nav__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 200ms ease, width 200ms var(--ease-out);
}

.swipe-nav__dot.is-active {
  width: 1.35rem;
  opacity: 1;
}

.swipe-nav--bar .swipe-nav__indicator {
  position: relative;
  width: min(9rem, 40vw);
  height: 0.28rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.22;
}

.swipe-nav__bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 1;
  transition: left 120ms linear;
}

.swipe-nav__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.85;
  text-transform: uppercase;
  transition: opacity 260ms ease, transform 260ms var(--ease-out);
}

.swipe-nav__hint-arrow {
  display: inline-block;
  animation: swipe-nudge 1.8s var(--ease-out) infinite;
}

/* Cumplió su trabajo en cuanto la persona desliza: se va y no vuelve. */
.swipe-nav.is-used .swipe-nav__hint {
  opacity: 0;
  transform: translateX(0.4rem);
  pointer-events: none;
}

@keyframes swipe-nudge {
  0%,
  55%,
  100% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(0.28rem);
  }
  85% {
    transform: translateX(0);
  }
}

.swipe-nav__arrows {
  display: flex;
  margin-left: auto;
  gap: 0.45rem;
}

.swipe-nav__arrow {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

.swipe-nav__arrow:active {
  transform: translateY(1px);
}

/* Color por mundo: hereda del contexto donde vive el carrusel. */
.page-home .swipe-nav {
  padding: 0.4rem var(--page-gutter) 1.1rem;
  color: #fff;
  background: var(--town-navy);
}

.page-home .swipe-nav__arrow:hover {
  background: var(--town-yellow);
  border-color: var(--town-yellow);
  color: var(--town-navy);
}

.page-party .swipe-nav {
  color: var(--party-blue);
}

.page-play .swipe-nav {
  color: var(--play-yellow);
}

.page-business .swipe-nav {
  color: var(--biz-blue);
}

/* Con mouse no se desliza: en pantallas grandes queda solo la posición. */
@media (min-width: 56.001rem) {
  .swipe-nav__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-nav__hint-arrow {
    animation: none;
  }
}

/* --- D · Piso de legibilidad y contrastes reales ------------------------- */
/* El detector marcaba 17 textos funcionales bajo el piso de 11 px y varios
   pares de contraste por debajo de AA. Esto sube el piso a 12 px y corrige
   los pares reales sin tocar la dirección de arte. */

/* 1. Barra de contacto: son los botones más tocados del sitio y estaban en
      10.24 px, con el contenido pegado al borde superior e inferior. */
.utility-bar__inner {
  padding-block: 0.3rem;
}

@media (max-width: 44rem) {
  .utility-bar__contacts > a,
  .utility-bar__contacts > button {
    padding-inline: clamp(0.4rem, 2.4vw, 0.85rem);
    font-size: 0.75rem;
  }
}

.utility-bar__status {
  font-size: 0.78rem;
}

/* 2. Etiquetas de estructura: pequeñas por diseño, pero no ilegibles. */
.footer-title,
.site-nav__worlds-title {
  font-size: 0.75rem;
}

.header-conversion-cta {
  font-size: 0.78rem;
}

/* 3. Nivel del paquete: era azul sobre naranja (2.7:1) y azul sobre rosa
      (2.3:1). En tinta pasa AA en ambas tarjetas y conserva el color de la
      tarjeta como protagonista. */
.party-package-card__level {
  color: var(--town-ink);
  font-size: 0.78rem;
}

.party-package-card--classic .party-package-card__level {
  color: var(--party-blue);
}

/* 4. Bloque de confianza: con C+ pasó a navy — blanco sobre #07142f da 17:1,
      así que el parche del rosa profundo quedó obsoleto y se retiró. */
.trust-main {
  background: var(--town-navy);
}

/* 5. Últimos textos funcionales bajo 12 px: navegación de mundos, metadatos
      de producto (edades) y el pie legal. */
.experience-switch a {
  font-size: 0.8rem;
}

.catalog-product-card__meta span,
.utility-bar__social a,
.site-footer__bottom span,
.legal-links a {
  font-size: 0.75rem;
}

/* 🚨 Los 48 px de área táctil por enlace son lo que hacía el footer de 595 px:
   con 6 enlaces en Contacto son 288 px solo de aire. Se recortan a 36 px
   SOLO donde hay ratón de verdad (`pointer: fine`), nunca por ancho de
   pantalla — así ningún dispositivo táctil pierde su target, ni una tablet
   ancha ni un teléfono en horizontal. 36 px sigue muy por encima del piso de
   24 px que pide WCAG 2.2 AA (2.5.8). */
@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  .footer-links {
    gap: 0.35rem;
  }

  .footer-links a,
  .footer-contact a,
  .footer-link-button,
  .legal-links a {
    min-height: 2.25rem;
  }

  .footer-contact {
    gap: 0.35rem;
  }

  .site-footer__bottom {
    padding-block: 0.75rem;
  }
}

/* --- Fase 1 · Fondos de portada por tamaño de pantalla ------------------- */
/* Los portales se pintan con background-image, así que no hay srcset: la
   única palanca es image-set() con media queries. Antes el celular bajaba los
   mismos archivos que un monitor grande. */
.portal--party::before {
  background-image: url("assets/marketing/portal-party-480.webp");
  background-image: image-set(
    url("assets/marketing/portal-party-480.avif") type("image/avif"),
    url("assets/marketing/portal-party-480.webp") type("image/webp")
  );
}

.portal--play::before {
  background-image: url("assets/marketing/play-real-court-480.webp");
  background-image: image-set(
    url("assets/marketing/play-real-court-480.avif") type("image/avif"),
    url("assets/marketing/play-real-court-480.webp") type("image/webp")
  );
}

.portal--business::before {
  background-image: url("assets/marketing/portal-business-480.webp");
  background-image: image-set(
    url("assets/marketing/portal-business-480.avif") type("image/avif"),
    url("assets/marketing/portal-business-480.webp") type("image/webp")
  );
}

@media (min-width: 30rem) {
  .portal--party::before {
    background-image: url("assets/marketing/portal-party-800.webp");
    background-image: image-set(
      url("assets/marketing/portal-party-800.avif") type("image/avif"),
      url("assets/marketing/portal-party-800.webp") type("image/webp")
    );
  }

  .portal--play::before {
    background-image: url("assets/marketing/play-real-court-800.webp");
    background-image: image-set(
      url("assets/marketing/play-real-court-800.avif") type("image/avif"),
      url("assets/marketing/play-real-court-800.webp") type("image/webp")
    );
  }

  .portal--business::before {
    background-image: url("assets/marketing/portal-business-800.webp");
    background-image: image-set(
      url("assets/marketing/portal-business-800.avif") type("image/avif"),
      url("assets/marketing/portal-business-800.webp") type("image/webp")
    );
  }
}

@media (min-width: 64rem) {
  .portal--party::before {
    background-image: url("assets/marketing/portal-party-1200.webp");
    background-image: image-set(
      url("assets/marketing/portal-party-1200.avif") type("image/avif"),
      url("assets/marketing/portal-party-1200.webp") type("image/webp")
    );
  }

  .portal--play::before {
    background-image: url("assets/marketing/play-real-court-1200.webp");
    background-image: image-set(
      url("assets/marketing/play-real-court-1200.avif") type("image/avif"),
      url("assets/marketing/play-real-court-1200.webp") type("image/webp")
    );
  }

  .portal--business::before {
    background-image: url("assets/marketing/portal-business-1200.webp");
    background-image: image-set(
      url("assets/marketing/portal-business-1200.avif") type("image/avif"),
      url("assets/marketing/portal-business-1200.webp") type("image/webp")
    );
  }
}

/* La foto de la Champions es el activo más fuerte de Empresas y estaba en una
   franja de 143 px en móvil. Un recorte más alto la hace legible; el escenario
   creció antes para que las etiquetas no se le encimen. */
@media (max-width: 44rem) {
  .business-stage__photo {
    aspect-ratio: 3 / 2;
  }
}


/* ==========================================================================
   Ajustes móviles · 2 ago 2026 (feedback de Miguel en teléfono REAL)
   Capa al final a propósito: gana la cascada sobre los bloques legacy.
   ========================================================================== */

/* Un card DENTRO de un carrusel horizontal no puede animarse en Y: el reveal
   (translateY) corre bajo el dedo mientras deslizas y el card "se sube" solo
   — se sintió como un elemento aparte del scroll en el carrusel de paquetes. */
html.js .catalog-carousel [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 56rem) {
  html.js .party-package-grid [data-reveal],
  html.js .party-gallery-strip [data-reveal],
  html.js .portal-grid [data-reveal],
  html.js .portal-grid .portal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* El H1 de la portada tapaba el carrusel de portales y sus flechas. */
  .home-intro h1 {
    font-size: clamp(1.8rem, 8.5vw, 2.5rem);
  }

  /* El "03" se superponía al kicker de Empresas (el portal con más texto). */
  .portal__content {
    padding-top: 3.4rem;
  }
}

/* ── La dieta de stickys (solo teléfono, donde vive la barra de conversión) ──
   Antes: utility bar + header con CTA + barra inferior = media pantalla fija.
   Ahora: UN header sticky con el logo, tres iconitos circulares (llamar ·
   WhatsApp · cómo llegar) y el menú. El CTA vive SOLO en la barra inferior. */
.header-quick {
  display: none;
}

@media (max-width: 44rem) {
  :root {
    --utility-height: 0rem;
  }

  .utility-bar {
    display: none;
  }

  .site-header {
    top: 0;
  }

  /* La portada: su header era overlay absoluto y se perdía al scrollear.
     Pedido explícito: que el logo y los botoncitos queden fijos también ahí. */
  .site-header--overlay {
    position: sticky;
    inset: auto;
    top: 0;
    background: rgba(5, 13, 35, 0.92);
    backdrop-filter: blur(1rem);
  }

  .header-conversion-cta {
    display: none;
  }

  .header-quick {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 0.5rem;
  }

  .header-quick a,
  .header-quick button {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .header-quick svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  /* Los cards del catálogo casi no cabían en la pantalla y tapaban las
     flechas. Más angostos = más bajos + mejor "peek" del siguiente. Con la
     foto ya en 4:5 la altura quedó a ras de las tarjetas de paquete; el
     ancho se queda en 70vw por el peek, no por altura. */
  .catalog-carousel {
    grid-auto-columns: min(70vw, 18.5rem);
  }
}

/* ── El aire de arriba y el CTA que el sticky ya ofrece (solo teléfono) ──────
   Dos hallazgos del 2-ago, medidos a 375 px antes de tocar nada:

   1. EL AIRE ERA UNA DOBLE CUENTA, NO UNA DECISIÓN. Cuando el header pasó de
      overlay a sticky, empezó a ocupar su lugar en el flujo — pero el padding
      del hero seguía sumándole `--header-height` para compensarlo, como cuando
      estaba superpuesto. Resultado en la portada: 94 px muertos entre el
      header y el H1 (72 del header contados dos veces + 22 reales). Corregido
      arriba, en cada regla; acá va el aire de las otras tres, que sí era una
      decisión — solo que de escritorio (56 px del `.container` del hero).

   2. EL CTA DEL HERO ES EL MISMO DEL STICKY. Verificado destino por destino:
      en Party los dos botones (cotizador y WhatsApp) están en la barra fija; en
      Play y Empresas lo está el de WhatsApp. En 812 px de alto, con la barra
      comiendo ~90, repetirlo le quita pantalla al contenido — que es lo que la
      página vino a mostrar.

   🚨 EN ESCRITORIO NO SE TOCA, y por eso todo esto vive dentro del media query.
   Allá NO hay barra fija: el botón del hero es el único CTA del primer
   viewport, y esconderlo dejaría a la versión web sin llamada a la acción
   arriba. Un sticky inferior tampoco es la respuesta ahí — le comería alto a
   una pantalla que ya muestra el hero entero y de borde a borde se lee como
   aviso de cookies. Cada viewport se queda con el patrón que le toca. */
@media (max-width: 44rem) {
  .party-hero > .container,
  .play-hero__inner,
  .business-hero > .container {
    padding-top: 1.75rem;
  }

  /* El botón de conversión: lo sirve la barra fija de abajo. */
  .hero-actions__cta {
    display: none;
  }

  /* El salto al contenido NO es un duplicado —la barra no lo tiene— así que
     sobrevive; pero como ENLACE, porque es navegación y no conversión. Un
     botón del ancho de la pantalla le disputaría el peso al contenido. */
  .hero-actions__jump.btn {
    /* `align-self` y no `width` a secas: el contenedor va en `stretch`, así que
       sin esto el enlace ocupa el ancho completo y su texto queda centrado —
       leyéndose como un botón fantasma en un hero alineado a la izquierda. */
    width: auto;
    align-self: start;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }

  /* Con un solo hijo, el hero ya no necesita el respiro que pedían dos botones. */
  .hero-actions {
    gap: 0;
  }
}

/* ============================================================================
   PROSA JUSTIFICADA (4-ago-2026, pedido de Miguel)
   ----------------------------------------------------------------------------
   Va al FINAL a propósito: así gana por orden de cascada sobre las reglas de
   alineación que ya existían, sin inventar especificidades ni `!important`.

   🧰 EL CRITERIO NO ES EL GUSTO, SON LOS CARACTERES POR LÍNEA. Se midieron los
   162 bloques de texto de las 7 páginas con contenido, a 1280 px y a 390 px.
   Por debajo de ~34 caracteres por línea, justificar abre huecos visibles entre
   palabras («ríos» de blanco) y se ve PEOR que dejarlo en bandera. Por encima,
   queda limpio. Ése es el corte que separa los dos grupos de abajo.

   `text-align: justify` a secas deja la ÚLTIMA línea alineada a la izquierda,
   que es lo que Miguel pidió. Nunca `text-align-last: justify`, que es el que
   esparce la última línea y se ve roto.

   `hyphens: auto` NO es opcional en español: sin guionado, palabras como
   «personalizada» o «disponibilidad» no caben y el navegador estira los
   espacios de toda la línea. El sitio ya declara lang="es-PA", así que los
   cortes salen con las reglas correctas.

   `text-wrap: pretty` mata las líneas viudas (el «y extras» solito abajo).
   Ése sí va en TODOS los anchos, porque una viuda molesta igual en el teléfono.
   ============================================================================ */

/* --- Grupo 1: justificado en todos los anchos ------------------------------
   Estos se quedan por encima de 34 c/línea incluso a 390 px (medido: 34-47). */
.landing-hero__lead,
.section-intro,
.info-hero__copy p,
.section-split-heading p,
.process__step p,
.party-catalog__heading p,
/* 🚨 `> p` y NO `p` a secas: dentro del aside vive también `.gallery-hint`
   («Desliza o usa las flechas para comparar»), que es una ETIQUETA de 40
   caracteres. Justificada, se parte en dos líneas y la primera queda con
   cinco palabras estiradas de borde a borde — lo peor que le puede pasar al
   justificado, y así se veía en el teléfono. El selector de descendencia se
   llevó puesto un elemento que nunca estuvo en la lista que se midió.
   🧰 La lección: al justificar por selector, el gate no es «¿mis selectores
   miden bien?» sino «¿QUÉ quedó justificado en la página?» — se barre el DOM
   buscando `text-align: justify` y se revisa cada uno. */
.party-product-heading__aside > p,
.trust-list__item span,
#webapp p {
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

/* --- Grupo 2: justificado solo de tablet para arriba -----------------------
   En el teléfono estos caen a 27-33 c/línea, bajo el umbral. Decisión de
   Miguel (4-ago): en móvil se quedan en bandera. Las viudas sí se arreglan en
   todos los anchos, por eso `text-wrap` va afuera del media query. */
.faq-list p,
.faq-heading p,
.trust-main p,
.catalog-product-card__body p,
.party-package-card__body p,
.outcome-card p,
.use-item p,
.portal__copy {
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .faq-list p,
  .faq-heading p,
  .trust-main p,
  .catalog-product-card__body p,
  .party-package-card__body p,
  .outcome-card p,
  .use-item p {
    text-align: justify;
    hyphens: auto;
  }
}

/* 🚨 Los portales de la portada NO entran a 48rem: ahí los tres pasan a ir en
   fila y la columna se APRIETA a 30 caracteres por línea. Es el único
   componente que empeora al subir de móvil a tablet en vez de mejorar
   (50 a 1280 · 40 a 1024 · 30 a 768 · 36 a 390), así que un solo breakpoint
   para todo el grupo lo dejaba justificado justo donde peor se ve. Entra
   recién a 64rem, cuando la fila tiene aire.
   🧰 Lo que lo delata es medir el ancho de la COLUMNA, no el de la ventana:
   dentro de una rejilla, un ancho de ventana mayor puede significar una
   columna más angosta. */
@media (min-width: 64rem) {
  .portal__copy {
    text-align: justify;
    hyphens: auto;
  }
}

/* Cintillo de tipo de decoración en la galería de fiestas (Nicole, 4-ago):
   DecoParty / MegaParty, para que se lea de un vistazo con qué paquete de
   decoración se montó cada una. Hereda la forma del chip «Nuevo» de los
   inflables a propósito — es el mismo gesto y conviene que se lean igual.
   Vive ARRIBA a la izquierda porque el figcaption ya ocupa todo el borde
   inferior de la tarjeta (`left` y `right` a 0.75rem). */
.party-gallery-strip__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  display: inline-flex;
  height: 1.65rem;
  padding: 0 0.65rem;
  align-items: center;
  border-radius: 999px;
  background: var(--party-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}