/* ===========================================================================
   KIDS HOUSE PARK — Barceloneta, PR
   Tema: "parque de neón".

   De dónde sale el tema: el logo es de letras de burbuja 3D metidas dentro de
   un aro mint que brilla como un tubo de neón, sobre fondo magenta; y en la
   foto de la zona de juegos hay un letrero luminoso rosa encendido al fondo.
   O sea, el neón ya es de ellos. La base va oscura (morado noche) porque el
   parque es TECHADO y sus fotos son de interior con poca luz: sobre oscuro las
   fotos se integran en vez de delatar lo blanditas que son.

   Tres motivos, los tres de su propio material:
     .neon   — el aro que brilla del logo, llevado al texto.
     .tape   — la cinta amarilla y negra de precaución, que sale en su cover
               y en el letrero de "Área para Bebés" pegado a la pared.
     .ticket — "Paga la entrada y te cubre TODO" es su gancho de valor, así que
               ese bloque y los paquetes tienen forma de boleto troquelado.

   OJO CON LA RESOLUCIÓN: las 16 fuentes son thumbnails de Facebook de 414x414.
   Se exportaron a 828 con LANCZOS 2x + unsharp, y NINGÚN contenedor de foto
   pasa de ~420px de CSS. Si agrandas un marco, la foto se ve blanda.
   =========================================================================== */

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

/* height:auto va aquí a propósito: el atributo height del HTML (que ponemos
   para reservar el espacio y evitar saltos) le gana al aspect-ratio del CSS. */
img, svg, video { display: block; max-width: 100%; height: auto; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

:root {
  /* Paleta medida con PIL sobre logo.jpg y cover.png (no adivinada). */
  --magenta:  #ff038a;
  --magenta-d:#dc099f;
  --fucsia:   #fb049f;
  --purple:   #4e167c;
  --mint:     #b0fdf0;
  --cyan:     #09a5ec;
  --cyan-l:   #4fc1e6;
  --yellow:   #fed001;
  --blue:     #3d7fc1;

  /* La noche del parque: derivadas del morado del logo, bajándole el valor. */
  --night:    #180630;
  --night-2:  #21093f;
  --panel:    #2b0f52;
  --panel-2:  #35145f;
  --line:     rgba(176, 253, 240, .18);

  --ink:      #f6ecff;
  --ink-2:    #c9b2e0;
  --ink-3:    #9c86b8;

  --r:   18px;
  --r-l: 26px;
  --wrap: 1180px;

  --f-display: "Bungee", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Un resplandor fijo muy tenue: el parque nunca es negro plano. */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(60vw 50vh at 12% -5%, rgba(255,3,138,.20), transparent 62%),
    radial-gradient(50vw 45vh at 92% 8%, rgba(9,165,236,.16), transparent 60%);
  pointer-events: none; z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }
h1, h2, h3 { line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--magenta); color: #fff; padding: 12px 18px; z-index: 999;
  border-radius: 0 0 12px 0; font-weight: 700;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px;
}

/* ------------------------------------------------ motivo 1: el tubo de neón */
/* El aro mint del logo brilla; lo repetimos en el texto con una pila de
   sombras (halo cercano + halo lejano) en lugar de un simple glow plano. */
.neon {
  color: var(--mint);
  text-shadow:
    0 0 6px rgba(176,253,240,.9),
    0 0 18px rgba(176,253,240,.55),
    0 0 44px rgba(9,165,236,.45);
}
.neon--pink   { color: #ffd9ee; text-shadow: 0 0 6px rgba(255,3,138,.95), 0 0 20px rgba(255,3,138,.6), 0 0 50px rgba(255,3,138,.45); }
.neon--cyan   { color: #d6f2ff; text-shadow: 0 0 6px rgba(9,165,236,.95), 0 0 20px rgba(9,165,236,.6), 0 0 50px rgba(9,165,236,.4); }
.neon--yellow { color: #fff3c0; text-shadow: 0 0 6px rgba(254,208,1,.95), 0 0 20px rgba(254,208,1,.55), 0 0 46px rgba(254,208,1,.35); }

/* -------------------------------------------- motivo 2: cinta de precaución */
/* Sale de su cover (la cinta cruza detrás del logo) y del letrero de bebés. */
.tape {
  height: 16px;
  background: repeating-linear-gradient(
    -45deg,
    var(--yellow) 0 18px,
    #120424 18px 36px
  );
  box-shadow: 0 0 24px rgba(254,208,1,.28);
}

/* ------------------------------------------------------------------ botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border: 0; border-radius: 999px;
  font-family: var(--f-body); font-size: 16px; font-weight: 800;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn:hover { transform: translateY(-2px); }

.btn--pink {
  background: var(--magenta); color: #fff;
  box-shadow: 0 8px 26px rgba(255,3,138,.42), inset 0 -3px 0 rgba(0,0,0,.22);
}
.btn--pink:hover { background: #ff2b9d; box-shadow: 0 12px 34px rgba(255,3,138,.55), inset 0 -3px 0 rgba(0,0,0,.22); }

.btn--wa {
  background: #25d366; color: #06331a;
  box-shadow: 0 8px 26px rgba(37,211,102,.32), inset 0 -3px 0 rgba(0,0,0,.18);
}
.btn--wa:hover { background: #3ae07a; }

.btn--ghost {
  background: rgba(176,253,240,.07); color: var(--mint);
  box-shadow: inset 0 0 0 2px rgba(176,253,240,.4);
}
.btn--ghost:hover { background: rgba(176,253,240,.14); box-shadow: inset 0 0 0 2px var(--mint), 0 0 22px rgba(176,253,240,.3); }

/* --------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(24,6,48,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 16px; min-height: 70px; }

.nav__brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; font-family: var(--f-display);
  font-size: 15px; letter-spacing: .01em; color: var(--ink);
  margin-right: auto;
}
.nav__brand img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(176,253,240,.45), 0 0 18px rgba(255,3,138,.5); }
.nav__brand b { color: var(--cyan-l); font-weight: 400; }

.nav__menu { display: flex; align-items: center; gap: 26px; }
.nav__links { display: flex; gap: 22px; list-style: none; padding: 0; }
.nav__links a {
  text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink-2);
  padding: 6px 0; position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--mint); box-shadow: 0 0 10px var(--mint);
  transition: right .22s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { right: 0; }

/* El CTA vive dentro de .nav__menu pero NO dentro de .nav__links, así que no
   compite con `.nav__links a`. Aun así fijamos el color para no depender de eso. */
.nav__cta { padding: 10px 18px; font-size: 15px; color: #06331a; }

.nav__burger {
  display: none;
  width: 46px; height: 42px; padding: 10px 9px;
  background: rgba(176,253,240,.08); border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(176,253,240,.28);
  cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav__burger span { display: block; height: 3px; border-radius: 3px; background: var(--mint); transition: transform .25s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* -------------------------------------------------------------------- hero */
.hero { padding: 74px 0 84px; overflow: hidden; }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px; align-items: center;
}

.eyebrow {
  font-family: var(--f-display); font-size: 12px; letter-spacing: .06em;
  color: var(--cyan-l); text-transform: uppercase; margin-bottom: 16px;
}
.eyebrow i { color: var(--magenta); font-style: normal; }
.eyebrow--c { text-align: center; }

.hero__h1 { font-family: var(--f-display); font-size: clamp(30px, 5vw, 52px); line-height: 1.16; }
.hero__h1 span { display: block; }
.hero__h1 em {
  display: block; font-family: var(--f-body); font-style: italic;
  font-weight: 600; font-size: clamp(17px, 2.2vw, 24px);
  color: var(--ink-2); margin-top: 10px; letter-spacing: 0;
}

/* El gancho: textual de su gráfica de facilidades. */
.hook { margin: 26px 0 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hook__a { font-weight: 800; font-size: clamp(15px, 1.9vw, 19px); color: var(--ink); }
.hook__b {
  font-family: var(--f-display); font-size: clamp(22px, 3.4vw, 34px);
  color: #fff; background: #e0102c;
  padding: 5px 18px 8px; border-radius: 12px;
  transform: rotate(-2.5deg);
  box-shadow: 0 8px 0 #8c0a1c, 0 14px 34px rgba(224,16,44,.5);
}

.hero__lead { color: var(--ink-2); font-size: 17.5px; max-width: 54ch; }
.hero__lead b { color: var(--ink); }

.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.facts { display: flex; gap: 10px; list-style: none; padding: 0; margin-top: 34px; flex-wrap: wrap; }
.facts li {
  flex: 1 1 120px; min-width: 0;
  background: rgba(176,253,240,.05); border-radius: 14px; padding: 13px 15px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.facts b { display: block; font-family: var(--f-display); font-size: 17px; color: var(--mint); }
.facts span { font-size: 13.5px; color: var(--ink-3); }

/* mosaico del hero — 4 fotos reales, ninguna sobre 250px renderizados */
.mosaic {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.mosaic__t {
  margin: 0; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 0 0 2px rgba(176,253,240,.32), 0 0 26px rgba(255,3,138,.28), 0 18px 44px rgba(0,0,0,.5);
  transform: translateZ(0);              /* la capa propia evita que el zoom del
                                            hover se salga por las esquinas */
}
.mosaic__t img { width: 100%; }
.mosaic__t--a { margin-top: 26px; }
.mosaic__t--b { transform: translateZ(0) rotate(1.6deg); }
.mosaic__t--c { transform: translateZ(0) rotate(-1.6deg); margin-top: -6px; }
.mosaic__t--d { margin-top: -22px; }

/* --------------------------------------------------------------- secciones */
.sec { padding: 78px 0; }
.sec__h { font-family: var(--f-display); font-size: clamp(25px, 3.8vw, 40px); text-align: center; }
.sec__lead {
  text-align: center; color: var(--ink-2); max-width: 62ch;
  margin: 16px auto 0; font-size: 17px;
}
.sec__lead b { color: var(--ink); }

.fine { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: 22px; }

/* ------------------------------------------- motivo 3: el boleto de entrada */
.sec--entrada { background-color: var(--night-2); }

.ticket {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border-radius: var(--r-l);
  box-shadow: 0 0 0 1px var(--line), 0 26px 60px rgba(0,0,0,.45);
  overflow: hidden; position: relative;
}

.ticket__stub {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 34px 20px; gap: 2px;
  background: linear-gradient(160deg, var(--magenta), #b0067a);
  border-right: 2px dashed rgba(255,255,255,.4);
}
/* Las muescas del troquel cuelgan del TALÓN, no de la tarjeta: así siguen
   solas al borde punteado cuando el boleto se apila en móvil y el talón
   cambia de columna izquierda a banda superior. */
.ticket__stub::before, .ticket__stub::after {
  content: ""; position: absolute; right: -13px; width: 26px; height: 26px;
  background: var(--night-2); border-radius: 50%;
}
.ticket__stub::before { top: -13px; }
.ticket__stub::after  { bottom: -13px; }
.ticket__k { font-family: var(--f-display); font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .04em; }
.ticket__big { font-family: var(--f-display); font-size: 30px; color: #fff; line-height: 1; margin: 4px 0 6px; }

.ticket__body { padding: 34px 38px; }
.ticket__body h2 { font-family: var(--f-display); font-size: clamp(20px, 2.6vw, 28px); color: var(--mint); }
.ticket__body p { color: var(--ink-2); margin-top: 12px; }
.ticket__body b { color: var(--ink); }
.ticket__note { font-size: 14.5px; color: var(--ink-3); }
.ticket__note a { color: var(--cyan-l); }

/* facilidades */
.fac__h { font-family: var(--f-display); font-size: clamp(19px, 2.6vw, 27px); text-align: center; margin-top: 62px; }
.fac {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px; list-style: none; padding: 0; margin-top: 30px;
}
.fac__i {
  text-align: center; padding: 22px 10px 18px;
  background: rgba(176,253,240,.045); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.fac__i:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(176,253,240,.5), 0 0 26px rgba(176,253,240,.15); }
.fac__i svg {
  width: 42px; height: 42px; margin: 0 auto 12px;
  fill: none; stroke: var(--mint); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(176,253,240,.55));
}
.fac__i b { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.35; }

/* ------------------------------------------------------------------- zonas */
.zonas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 46px;
}
.zona {
  background: linear-gradient(170deg, var(--panel), var(--night-2));
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  transition: box-shadow .22s ease, transform .22s ease;
}
.zona:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(176,253,240,.45), 0 0 34px rgba(255,3,138,.22), 0 22px 50px rgba(0,0,0,.5);
}

.zona__pic {
  margin: 0; overflow: hidden; background: #10041f;
  display: flex; align-items: center; justify-content: center;
  transform: translateZ(0);        /* misma razón que en el mosaico */
}
.zona__pic img { width: 100%; transition: transform .5s ease; }
.zona:hover .zona__pic img { transform: scale(1.05); }
/* La foto del área de pelotas es un recorte vertical de su gráfica: se deja
   pequeña y centrada en vez de estirarla al ancho de la tarjeta. */
.zona__pic--tall { padding: 18px 0; background: #10041f; }
.zona__pic--tall img { width: auto; max-height: 260px; }

.zona__txt { padding: 22px 24px 26px; }
.zona__txt h3 { font-family: var(--f-display); font-size: 17px; color: var(--mint); }
.zona__txt p { color: var(--ink-2); font-size: 15.5px; margin-top: 10px; }

/* Ojo con la especificidad: `.zona__txt p` (0,1,1) le gana a `.zona__age`
   (0,1,0), así que la etiqueta se queda con el color del párrafo y sale
   ilegible sobre el amarillo. Por eso se califica con el padre. */
.zona__txt .zona__age {
  display: inline-block; margin-top: 12px;
  font-family: var(--f-display); font-size: 11px; color: #3a2600;
  background: var(--yellow); padding: 5px 13px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(254,208,1,.3);
}
.zona__txt .zona__flag {
  font-size: 12.5px; color: var(--ink-3);
  padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 14px;
}

/* Las dos bandas van a ancho completo con SUS DOS fotos al lado del texto.
   Cada foto se queda en ~370px, o sea por debajo del tope de los 414 nativos. */
.zona--band {
  grid-column: 1 / -1; flex-direction: row; align-items: stretch;
}
.zona--band .zona__pic { flex: 1 1 0; min-width: 0; }
.zona--band .zona__pic img { width: 100%; height: 100%; object-fit: cover; }
.zona--band .zona__txt {
  flex: 1.15 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; padding: 32px 34px;
}
.zona--band .zona__txt h3 { font-size: 22px; }
.zona--band .zona__txt p { font-size: 16.5px; }
.zona--flip { flex-direction: row-reverse; }

/* Tarjeta de cierre de la sección: sin foto, cierra la última fila de tres. */
.zona--cta {
  background: linear-gradient(160deg, var(--magenta), #8d0563);
  justify-content: center;
}
.zona--cta .zona__txt { padding: 32px 28px; }
.zona--cta .zona__txt h3 { color: #fff; font-size: 19px; }
.zona--cta .zona__txt p { color: rgba(255,255,255,.88); }
.zona__facts { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 9px; }
.zona__facts li {
  font-size: 14.5px; color: rgba(255,255,255,.9);
  padding: 9px 14px; border-radius: 12px; background: rgba(0,0,0,.16);
}
.zona__facts b { font-family: var(--f-display); font-size: 12.5px; color: var(--yellow); margin-right: 6px; }
.zona--cta .btn { margin-top: 22px; background: #fff; color: #a00a6f; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.zona--cta .btn:hover { background: var(--yellow); color: #3a2600; }

/* -------------------------------------------------------------- cumpleaños */
.sec--cumple { background-color: var(--night-2); }

.paks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 46px; align-items: start; }

.pak {
  position: relative;
  background: linear-gradient(175deg, var(--panel), var(--night));
  border-radius: var(--r-l); padding: 30px 26px 28px;
  box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(0,0,0,.42);
  display: flex; flex-direction: column;
}

.pak--hot {
  background: linear-gradient(175deg, #43105f, #240a41);
  box-shadow: 0 0 0 2px var(--magenta), 0 0 40px rgba(255,3,138,.35), 0 20px 50px rgba(0,0,0,.5);
}
.pak__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-display); font-size: 11px; white-space: nowrap;
  background: var(--yellow); color: #3a2600;
  padding: 5px 16px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(254,208,1,.4);
}

.pak__top { text-align: center; }
.pak__n { font-family: var(--f-display); font-size: 11.5px; color: var(--cyan-l); letter-spacing: .05em; }
.pak__big { font-family: var(--f-display); font-size: 52px; line-height: 1; color: var(--ink); margin-top: 6px; }
.pak__big span { display: block; font-size: 15px; color: var(--mint); margin-top: 4px; }
.pak__adults { font-size: 14px; color: var(--ink-3); margin-top: 8px; }

/* El precio va justo sobre el troquel, y la línea de puntos une las dos
   muescas para que se lea como boleto y no como dos abolladuras sueltas.

   Las muescas cuelgan de ESTE bloque, no de la tarjeta: los tres paquetes
   tienen alturas distintas arriba del precio (257 / 277 / 297 px medidos),
   así que un `top` fijo en .pak dejaba dos de las tres desalineadas.
   Al colgar del propio precio, la muesca siempre cae en su línea punteada.
   Van en position:absolute, así que no entran como flex items de este flex. */
.pak__price {
  position: relative;
  font-family: var(--f-display); font-size: 44px; color: var(--yellow);
  text-align: center; margin: 26px 0 0; padding-bottom: 24px; line-height: 1;
  text-shadow: 0 0 20px rgba(254,208,1,.4);
  min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 2px dashed rgba(176,253,240,.28);
  margin-bottom: 22px;
}
/* -37px = los 26px de padding de .pak más los 11px de medio círculo, o sea
   el centro de la muesca cae justo sobre el canto de la tarjeta. */
.pak__price::before, .pak__price::after {
  content: ""; position: absolute; bottom: -11px; width: 22px; height: 22px;
  background: var(--night-2); border-radius: 50%;
}
.pak__price::before { left: -37px; }
.pak__price::after  { right: -37px; }

.pak__cur { font-size: 24px; vertical-align: super; margin-right: 2px; }
.pak__price em {
  display: block; font-family: var(--f-body); font-style: normal;
  font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 8px;
  text-shadow: none;
}
/* El precio del paquete de 10 niños viene cortado en su gráfica: no se inventa. */
.pak__price--ask { font-size: 20px; color: var(--mint); text-shadow: none; }
.pak__ask { font-family: var(--f-display); font-size: 15px; }
.pak__price--ask a { font-family: var(--f-body); font-size: 14px; font-weight: 800; color: var(--cyan-l); margin-top: 8px; text-decoration: none; }
.pak__price--ask a:hover { text-decoration: underline; }

.pak__list { list-style: none; padding: 0; display: grid; gap: 11px; }
.pak__list li {
  position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-2);
}
.pak__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--magenta); box-shadow: 0 0 10px rgba(255,3,138,.6);
}
.pak__list li::after {
  content: ""; position: absolute; left: 5px; top: 11px;
  width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.pak__list i { font-style: normal; color: var(--ink-3); font-size: 13.5px; }

.pak__cta { margin-top: 26px; width: 100%; }

.disclaimer {
  margin: 34px auto 0; max-width: 74ch; text-align: center;
  font-size: 14.5px; color: var(--ink-2);
  background: rgba(254,208,1,.07); border-radius: var(--r);
  padding: 16px 22px; box-shadow: inset 0 0 0 1px rgba(254,208,1,.28);
}
.disclaimer b { color: var(--yellow); }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin-top: 28px; }
.badges li {
  font-size: 13.5px; font-weight: 700; color: var(--mint);
  background: rgba(176,253,240,.07); padding: 8px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* -------------------------------------------------------------------- menú */
.menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 46px; align-items: start; }
.mi {
  background: linear-gradient(175deg, var(--panel), var(--night-2));
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(0,0,0,.4);
}
/* Las 4 gráficas de menú vienen de fuentes distintas (dos son paneles de una
   historia, dos son piezas cuadradas), así que se recortaron CUADRADAS en el
   script de assets. Aquí solo se fija el marco: nada se amplía por CSS. */
.mi__pic { margin: 0; overflow: hidden; background: #10041f; aspect-ratio: 1; transform: translateZ(0); }
.mi__pic img { width: 100%; height: 100%; object-fit: cover; }

.mi__txt { padding: 20px 22px 24px; }
.mi__txt h3 { font-family: var(--f-display); font-size: 16px; color: var(--mint); }
.mi__txt p { font-size: 14.5px; color: var(--ink-3); margin-top: 6px; }
.mi__txt i { font-style: normal; }
.mi__p {
  font-family: var(--f-display); font-size: 24px; color: var(--yellow) !important;
  margin-top: 4px !important; text-shadow: 0 0 16px rgba(254,208,1,.35);
}
.mi__p--ask { font-size: 14px; color: var(--cyan-l) !important; text-shadow: none; }

/* ----------------------------------------------------------------- reserva */
/* Centrado, no `start`: el formulario es bastante más alto que la columna de
   texto y alineados arriba dejaban un hueco muerto debajo del teléfono. */
.reserva { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 50px; align-items: center; }
.reserva__side .sec__h, .reserva__side .sec__lead { text-align: left; margin-left: 0; }
.reserva__wa { margin-top: 26px; }
.reserva__tel { margin-top: 18px; color: var(--ink-3); font-size: 15px; }
.reserva__tel a { color: var(--mint); font-weight: 800; text-decoration: none; }
.reserva__tel a:hover { text-decoration: underline; }

.form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  background: linear-gradient(170deg, var(--panel), var(--night-2));
  border-radius: var(--r-l); padding: 30px;
  box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.42);
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

/* Ojo: este selector es `.field label`, así que cualquier <label> nuevo dentro
   de un .field hereda estos estilos. Si algún día entran checkboxes, hay que
   darles su propia clase o pierden contra esta regla. */
.field label { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.field label i { color: var(--magenta); font-style: normal; }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--f-body); font-size: 16px; color: var(--ink);
  background: rgba(0,0,0,.28); border: 0; border-radius: 12px;
  padding: 13px 15px; box-shadow: inset 0 0 0 1.5px rgba(176,253,240,.2);
  transition: box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; box-shadow: inset 0 0 0 2px var(--mint), 0 0 18px rgba(176,253,240,.22);
}
.field select { appearance: none; cursor: pointer; background-image: none; }
.field select option { background: var(--panel); color: var(--ink); }
/* La flecha del select, dibujada aparte para no pisar el background. */
.field:has(select) { position: relative; }
.field:has(select)::after {
  content: ""; position: absolute; right: 18px; bottom: 21px;
  width: 9px; height: 9px; border: solid var(--mint); border-width: 0 2px 2px 0;
  transform: rotate(45deg); pointer-events: none;
}
.field input[type="date"] { color-scheme: dark; }

.form__err {
  grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 700;
  color: #ffd2df; background: rgba(224,16,44,.2); padding: 11px 15px;
  border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,90,120,.45);
}
.form__send { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.form__fine { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 0; }

/* ---------------------------------------------------------------- visítanos */
.sec--visita { background-color: var(--night-2); }
.visita { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; }
.visita__block .sec__h, .visita__block h3 { text-align: left; }
.visita__block h3 { font-family: var(--f-display); font-size: 18px; color: var(--mint); }
.visita__block p { color: var(--ink-2); margin: 14px 0 18px; font-size: 15.5px; }
.visita__addr b { color: var(--ink); }

.visita__contact { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.visita__contact a {
  color: var(--mint); font-weight: 800; text-decoration: none; font-size: 15.5px;
}
.visita__contact a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ footer */
.foot { background: #10041f; border-top: 1px solid var(--line); padding: 44px 0; }
.foot__in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot__logo { width: 108px; height: auto; border-radius: 18px; box-shadow: 0 0 26px rgba(255,3,138,.35); }
.foot__txt { flex: 1; min-width: 240px; }
.foot__tag { font-family: var(--f-display); font-size: 15px; color: var(--mint); }
.foot__meta { color: var(--ink-3); font-size: 14px; margin-top: 10px; line-height: 1.7; }
.foot__meta a { color: var(--ink-2); font-weight: 700; }
.foot__cr { color: var(--ink-3); font-size: 12.5px; margin-top: 12px; opacity: .7; }

/* --------------------------------------------------------------------- fab */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(37,211,102,.45);
  transition: transform .2s ease;
}
.fab svg { width: 30px; height: 30px; fill: #06331a; }
.fab:hover { transform: scale(1.07); }

/* ================================================================ responsive */
@media (max-width: 1040px) {
  .fac { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* El `max-width` no es estético: sin él, dos columnas a 1040px dan tarjetas
     de 490px y las gráficas de menú (420 y 348 nativos) se amplían. Capado a
     640 la tarjeta se queda en ~310 y siempre se reduce. */
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; }
  .zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La banda pierde una foto para que la que queda no se estruje. */
  .zona--band .zona__pic:nth-of-type(2) { display: none; }
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: 42px; }
  .mosaic { max-width: 520px; margin-inline: auto; }
  .reserva { grid-template-columns: 1fr; gap: 34px; }
  .visita { grid-template-columns: 1fr; gap: 34px; }
  .paks { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }

  /* El menú lateral en móvil: panel fijo bajo el nav.
     No usamos `position: static` en ningún hijo aquí — reanclaría los
     ::before/::after absolutos al abuelo y el borde se dibujaría gigante. */
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed; top: 70px; right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(24,6,48,.98); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 0 20px; max-height: 0; overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .nav__menu.open { max-height: 420px; padding: 14px 20px 22px; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links li { border-bottom: 1px solid var(--line); }
  .nav__links a { display: block; padding: 14px 0; font-size: 16px; }
  .nav__links a::after { display: none; }
  .nav__cta { margin-top: 16px; width: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .sec { padding: 58px 0; }
  .hero { padding: 48px 0 60px; }

  .zonas { grid-template-columns: 1fr; }
  .zona--band, .zona--flip { flex-direction: column; }
  .zona--band .zona__pic { flex: none; }
  .zona--band .zona__pic img { height: auto; }
  .zona--band .zona__txt { padding: 22px 24px 26px; }
  .zona--band .zona__txt h3 { font-size: 18px; }
  .zona--band .zona__txt p { font-size: 15.5px; }

  /* El menú se queda en dos columnas también en móvil: son gráficas cuadradas
     con texto corto, y a una sola columna cada tarjeta se pasaría del ancho
     nativo de las imágenes. */
  .fac { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* El boleto de la entrada se apila: el talón pasa a ser una banda arriba y
     el troquel cambia de eje (de vertical a horizontal). */
  .ticket { grid-template-columns: 1fr; }
  .ticket__stub {
    flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px;
    padding: 20px; border-right: 0; border-bottom: 2px dashed rgba(255,255,255,.4);
  }
  .ticket__big { font-size: 24px; margin: 0; }
  /* El troquel gira de vertical a horizontal: las dos muescas pasan a los
     costados del talón, a la altura de su borde de abajo. */
  .ticket__stub::before, .ticket__stub::after { top: auto; bottom: -13px; }
  .ticket__stub::before { left: -13px; right: auto; }
  .ticket__stub::after  { right: -13px; }
  .ticket__body { padding: 26px 24px; }

  .form { padding: 24px 20px; grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }

  .foot__in { flex-direction: column; text-align: center; }
  .foot__meta, .foot__cr { text-align: center; }
}

@media (max-width: 460px) {
  .mosaic { gap: 12px; }
  .mosaic__t--a, .mosaic__t--c { margin-top: 14px; }
  .mosaic__t--d { margin-top: -10px; }
  .facts li { flex-basis: 100%; }
  .hook__b { font-size: 26px; }
}