/* =====================================================================
   MIKA'S WONDERLAND — bespoke static site
   Alquiler de playgrounds / soft play / bounce houses · Puerto Rico
   Tel/WhatsApp 787-377-2049 · IG @mikaswonderland_pr

   Design: "carrusel boutique" — el logo es un carrusel azul marino y dorado
   sobre crema, con tipografía serif clásica, así que el sitio se construye
   con ESA estética (elegante, de boutique) y deja que las fotos de cada
   montaje aporten su propio color (rosa, celeste, arcoíris, blanco).
   Motivos tomados del logo: la carpa a rayas del carrusel (franja superior),
   el festón/escalope de la carpa (bordes de sección), las estrellas doradas
   de 4 puntas y la línea dorada con punto al centro (divisor de sección).
   Las fotos van en marcos con tope de arco, que repiten la forma de los
   arcos inflables del catálogo.

   Paleta extraída por código (PIL quantize) del logo:
     azul marino #043a8d · azul profundo #0f306f · dorado #eaa81f ·
     azul apagado #586d9b / #9aadd2 · blanco #fcfdfd
   Type: Playfair Display (display, como el wordmark) + Jost (UI/texto,
   como el tagline en versalitas espaciadas).

   NOTA DE ASSETS: este lead no tiene fotos en alta resolución. Las 23 fotos
   reales vienen del grid de Facebook a 414px y se exportaron a 828px con
   LANCZOS + unsharp (2×). Por eso NINGÚN contenedor de foto pasa de ~420px
   de ancho en CSS — por encima de eso se ven blandas. Si la clienta entrega
   los originales, se pueden re-exportar y soltar ese límite.
   ===================================================================== */

:root {
  --marino:     #043a8d;
  --marino-2:   #0f306f;
  --tinta:      #071f47;
  --tinta-2:    #0a1a34;
  --azul-med:   #586d9b;
  --azul-suave: #9aadd2;
  --azul-humo:  #dfe6f3;

  --oro:        #eaa81f;
  --oro-claro:  #f6c95f;
  --oro-osc:    #a8802a;

  --crema:      #f7f4ec;
  --crema-2:    #fbfaf5;
  --blanco:     #ffffff;
  --texto:      #34405c;
  --texto-2:    #6a7591;
  --wa:         #1fa855;
  --wa-osc:     #17853f;

  --linea:      rgba(4, 58, 141, .14);
  --linea-oro:  rgba(234, 168, 31, .45);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;
  --arco: 50% 50% var(--r-md) var(--r-md) / 34% 34% 3% 3%;

  --sombra:    0 2px 4px rgba(7, 31, 71, .04), 0 12px 28px -14px rgba(7, 31, 71, .22);
  --sombra-lg: 0 4px 8px rgba(7, 31, 71, .05), 0 30px 60px -28px rgba(7, 31, 71, .35);

  --wrap: 1180px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font: 400 17px/1.65 "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto es obligatorio: los <img> traen atributo height (reserva de
   espacio / CLS) y ese hint del UA gana sobre `aspect-ratio` si no se anula. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.link {
  color: var(--marino);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-oro);
  padding-bottom: 1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.link:hover { color: var(--oro-osc); border-bottom-color: var(--oro); }
.link svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------- motivos base */

/* franja de la carpa del carrusel (rayas azul/blanco del logo) */
.topstripe {
  height: 9px;
  background: repeating-linear-gradient(115deg,
    var(--marino) 0 18px, var(--blanco) 18px 36px);
  border-bottom: 2px solid var(--oro);
}

/* festón de la carpa: semicírculos colgando (o subiendo) del borde */
.canopy { height: 20px; width: 100%; }
.canopy--down {
  background:
    radial-gradient(circle at 13px 0, var(--crema) 12.5px, transparent 13px) repeat-x 0 0 / 26px 20px;
}
.canopy--up {
  background:
    radial-gradient(circle at 13px 20px, var(--crema) 12.5px, transparent 13px) repeat-x 0 0 / 26px 20px;
}
.canopy--light.canopy--down {
  background:
    radial-gradient(circle at 13px 0, var(--crema) 12.5px, transparent 13px) repeat-x 0 0 / 26px 20px;
}

/* estrella dorada de 4 puntas del logo */
.sparkle { position: absolute; color: var(--oro); pointer-events: none; opacity: .85; }
.sparkle svg { width: 100%; height: 100%; fill: currentColor; }
.sparkle--a { width: 26px; height: 26px; top: 16%; left: 6%; animation: twinkle 5s ease-in-out infinite; }
.sparkle--b { width: 16px; height: 16px; top: 62%; left: 3.5%; animation: twinkle 6.5s ease-in-out .8s infinite; }
.sparkle--c { width: 20px; height: 20px; top: 10%; right: 6%; animation: twinkle 7s ease-in-out 1.6s infinite; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: .95; transform: scale(1); }
}

/* divisor: línea dorada con punto al centro (del logo) */
.rule {
  display: block;
  width: 190px; height: 9px;
  margin: 22px auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--oro) 4px, transparent 4.5px),
    linear-gradient(to right, transparent 0, var(--linea-oro) 12%, var(--linea-oro) 40%, transparent 44%,
                    transparent 56%, var(--linea-oro) 60%, var(--linea-oro) 88%, transparent 100%) center / 100% 1px no-repeat;
}
.rule--left { margin-inline: 0; }

/* ------------------------------------------------------------ botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 15.5px/1 "Jost", sans-serif;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn--lg { padding: 16px 30px; font-size: 16.5px; }
.btn--block { width: 100%; }

.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 12px 26px -14px rgba(31, 168, 85, .9); }
.btn--wa:hover { background: var(--wa-osc); }

.btn--navy { background: var(--marino); color: var(--crema-2); box-shadow: 0 12px 26px -14px rgba(4, 58, 141, .8); }
.btn--navy:hover { background: var(--tinta); }

.btn--ghost { background: transparent; color: var(--marino); border-color: var(--linea); }
.btn--ghost:hover { border-color: var(--marino); background: rgba(4, 58, 141, .05); }

/* --------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 244, 236, .93);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.nav__inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 40px; height: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt b {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: 20px;
  color: var(--marino); letter-spacing: -.01em;
}
.brand__txt i {
  font-style: normal; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-osc); margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__links a {
  text-decoration: none; font-size: 15.5px; font-weight: 400; color: var(--texto);
  position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav__links a:hover { color: var(--marino); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__menu-cta { display: none; }

.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--marino); white-space: nowrap;
}
.nav__phone svg { width: 17px; height: 17px; color: var(--oro-osc); }
.nav__phone:hover { color: var(--oro-osc); }
.nav__wa { padding: 10px 20px; font-size: 15px; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linea); border-radius: 12px;
  color: var(--marino); cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------- hero */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(4, 58, 141, .07), transparent 62%),
    radial-gradient(760px 520px at 8% 88%, rgba(234, 168, 31, .12), transparent 66%),
    var(--crema);
  padding: 70px 0 0;
  overflow: hidden;
}
.hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
  padding-bottom: 74px;
}
.hero__logo { width: 132px; height: auto; margin-bottom: 20px; }
.hero__kicker {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-osc); font-weight: 500; margin-bottom: 16px;
}
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); }
.hero h1 em {
  font-style: italic; font-weight: 500; color: var(--marino);
  position: relative; white-space: nowrap;
}
.hero__lead {
  margin-top: 20px; max-width: 46ch; font-size: 17.5px; color: var(--texto-2); line-height: 1.7;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 30px 0 0; padding: 0; }
.hero__chips li {
  font-size: 13.5px; letter-spacing: .02em; color: var(--marino);
  background: rgba(255, 255, 255, .74);
  border: 1px solid var(--linea);
  border-radius: 999px; padding: 7px 15px;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__chips li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); flex: none;
}

/* escenario: foto en marco de arco, con etiqueta y puntos */
.hero__stage { display: flex; justify-content: center; }
.stage { width: min(100%, 400px); position: relative; }
.stage::before {
  content: ""; position: absolute; inset: -26px -22px 40px;
  background: linear-gradient(160deg, rgba(234, 168, 31, .2), rgba(4, 58, 141, .12));
  border-radius: var(--arco);
  transform: rotate(-2.5deg);
}
.stage__frame {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--arco);
  overflow: hidden;
  border: 5px solid var(--blanco);
  box-shadow: var(--sombra-lg), 0 0 0 1px var(--linea-oro);
  background: var(--azul-humo);
}
.stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s ease;
}
.stage__img.is-on { opacity: 1; }
.stage__label {
  position: relative; margin: 18px auto 0; width: max-content; max-width: 100%;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 999px; padding: 8px 20px;
  font-family: "Playfair Display", serif; font-size: 16px; color: var(--marino);
  box-shadow: var(--sombra);
}
.stage__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.stage__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--azul-med); background: transparent; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.stage__dot[aria-selected="true"] { background: var(--oro); border-color: var(--oro); transform: scale(1.25); }

/* ------------------------------------------------------- encabezados */
.shead { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.shead__eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-osc); font-weight: 500; margin-bottom: 14px;
}
.shead h2 { font-size: clamp(30px, 3.9vw, 44px); }
.shead__lead { margin-top: 22px; color: var(--texto-2); font-size: 17px; }
.shead--light h2 { color: var(--crema-2); }
.shead--light .shead__eyebrow { color: var(--oro-claro); }
.shead--light .shead__lead { color: rgba(223, 230, 243, .82); }

/* -------------------------------------------------------------- pasos */
.pasos { padding: 84px 0; background: var(--crema-2); border-bottom: 1px solid var(--linea); }
.pasos__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.paso {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 34px 30px; box-shadow: var(--sombra); position: relative;
}
.paso__n {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--marino); color: var(--oro-claro);
  font-family: "Playfair Display", serif; font-size: 21px; font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 0 0 5px rgba(4, 58, 141, .08);
}
.paso h3 { font-size: 22px; margin-bottom: 10px; }
.paso p { color: var(--texto-2); font-size: 16px; }

/* ----------------------------------------------------------- catálogo */
.catalogo { padding: 90px 0; }
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
  max-width: 1120px; margin-inline: auto;      /* tiles ≈ 350px: ver nota de assets */
}
.card {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sombra);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.card__fig {
  margin: 0; padding: 14px 14px 0;
}
.card__fig img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--arco);
}
.card__body { padding: 22px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 24px; margin-bottom: 6px; }
.card h3 + p { margin-top: 8px; }
.card__body p { color: var(--texto-2); font-size: 15.5px; line-height: 1.62; }
.card--star { position: relative; }
.card--star::after {
  content: ""; position: absolute; top: 26px; right: 26px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 1.5c.5 4.6 2 6.7 6.2 8.3l1.8.7-1.8.7c-4.2 1.6-5.7 3.7-6.2 8.3-.5-4.6-2-6.7-6.2-8.3L4 10.5l1.8-.7C10 8.2 11.5 6.1 12 1.5Z'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 6px 16px -6px rgba(234, 168, 31, .9);
}

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; }
.tags li {
  font-size: 12.5px; letter-spacing: .03em; color: var(--marino);
  background: rgba(4, 58, 141, .06); border-radius: 999px; padding: 5px 12px;
}

.catalogo__note { text-align: center; margin-top: 44px; color: var(--texto-2); font-size: 16.5px; }

/* --------------------------------------------------------- línea agua */
.agua {
  position: relative;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(88, 109, 155, .35), transparent 60%),
    linear-gradient(165deg, var(--marino-2), var(--tinta) 55%, var(--tinta-2));
  color: var(--azul-humo);
  padding: 0 0 20px;
}
.agua > .wrap { padding: 76px 0 70px; }
.agua .rule { filter: brightness(1.25); }

.agua__grid { display: grid; gap: 30px; }

.feature {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(234, 168, 31, .3);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid; grid-template-columns: 420px 1fr;
  box-shadow: var(--sombra-lg);
}
.feature__stripe {
  grid-column: 1 / -1;
  height: 12px;
  background: repeating-linear-gradient(115deg, var(--marino) 0 16px, var(--crema-2) 16px 32px);
  border-bottom: 2px solid var(--oro);
}
.feature__fig { margin: 0; padding: 24px 0 24px 24px; }
.feature__fig img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--arco);
  border: 4px solid rgba(255, 255, 255, .9);
}
.feature__body { padding: 30px 34px 34px; align-self: center; }
.feature__badge {
  display: inline-block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta); background: var(--oro); border-radius: 999px; padding: 5px 14px;
  font-weight: 500; margin-bottom: 14px;
}
.feature h3 { font-size: 34px; color: var(--crema-2); margin-bottom: 12px; }
.feature__body p { color: rgba(223, 230, 243, .84); font-size: 16px; }

.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15.5px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--oro); box-shadow: 0 0 0 3px rgba(234, 168, 31, .2);
}
.ticks--2 { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }

.agua__side { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.minicard {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(154, 173, 210, .28);
  border-radius: var(--r-lg);
  padding: 20px; display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center;
}
.minicard__fig { margin: 0; }
.minicard__fig img {
  width: 132px; height: 132px; object-fit: cover; border-radius: var(--r-md);
  border: 3px solid rgba(255, 255, 255, .85);
}
.minicard h3 { font-size: 22px; color: var(--crema-2); margin-bottom: 7px; }
.minicard p { color: rgba(223, 230, 243, .78); font-size: 15px; line-height: 1.55; }

/* ------------------------------------------------------ personalización */
.perso { padding: 92px 0; background: var(--crema-2); }
.perso__inner { display: grid; grid-template-columns: 400px 1fr; gap: 66px; align-items: center; }
.perso__fig { margin: 0; position: relative; }
.perso__fig img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--arco);
  border: 6px solid var(--blanco);
  box-shadow: var(--sombra-lg), 0 0 0 1px var(--linea-oro);
}
.perso__fig figcaption {
  margin-top: 16px; text-align: center; font-size: 14px; color: var(--texto-2);
}
.perso__fig figcaption b { color: var(--marino); font-weight: 500; }
.perso__copy h2 { font-size: clamp(28px, 3.6vw, 40px); }
.perso__copy > p { color: var(--texto-2); margin-top: 22px; font-size: 17px; }
.perso__copy em { font-style: italic; color: var(--marino); }
.perso__copy .ticks { margin: 26px 0 30px; }
.perso__copy .ticks li { color: var(--texto); }

/* ------------------------------------------------------------- reglas */
.reglas {
  position: relative;
  background:
    radial-gradient(800px 460px at 80% 0%, rgba(88, 109, 155, .32), transparent 62%),
    linear-gradient(200deg, var(--tinta), var(--marino-2) 70%, var(--tinta-2));
  color: var(--azul-humo);
}
.reglas > .wrap { padding: 76px 0 72px; }
.reglas__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1000px; margin-inline: auto;
}
.regla {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(154, 173, 210, .24);
  border-radius: var(--r-md);
  padding: 20px 22px;
  font-size: 15.5px; line-height: 1.4; color: var(--crema-2);
}
.regla svg {
  width: 30px; height: 30px; flex: none; color: var(--oro-claro);
  fill: none; stroke: currentColor;
}

/* -------------------------------------------------------------- dónde */
.donde { padding: 88px 0 92px; }
.donde__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  max-width: 1080px; margin-inline: auto;
}
.donde__item figure { margin: 0 0 16px; }
.donde__item img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm);
  border: 4px solid var(--blanco);
  box-shadow: var(--sombra);
}
.donde__item h3 { font-size: 19px; margin-bottom: 6px; }
.donde__item p { font-size: 15px; color: var(--texto-2); line-height: 1.55; }

/* ------------------------------------------------------------ galería */
.galeria { padding: 0 0 92px; }
.galeria__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
  max-width: 1100px; margin-inline: auto;
}
.gtile {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gtile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gtile:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.galeria__note { text-align: center; margin-top: 34px; }

/* ------------------------------------------------------------ reserva */
.reserva {
  position: relative;
  background:
    radial-gradient(700px 420px at 12% 12%, rgba(234, 168, 31, .14), transparent 60%),
    var(--crema-2);
  border-top: 1px solid var(--linea);
}
.reserva__inner {
  display: grid; grid-template-columns: .82fr 1.18fr; gap: 62px; align-items: start;
  padding: 82px 0 92px;
}
.reserva__copy h2 { font-size: clamp(28px, 3.6vw, 40px); }
.reserva__copy > p { color: var(--texto-2); margin-top: 22px; }
.reserva__contact { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.reserva__contact a {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--marino); font-size: 16px;
}
.reserva__contact svg { width: 19px; height: 19px; color: var(--oro-osc); flex: none; }
.reserva__contact a:hover { color: var(--oro-osc); }

.form {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 34px; box-shadow: var(--sombra-lg);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.field { display: block; }
.field > span {
  display: block; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-2); margin-bottom: 7px; font-weight: 500;
}
.field > span b { color: var(--oro-osc); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 "Jost", sans-serif; color: var(--tinta);
  background: var(--crema-2);
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--marino); background: var(--blanco);
  box-shadow: 0 0 0 3px rgba(4, 58, 141, .1);
}
.field input.is-bad { border-color: #c0392b; background: #fdf3f2; }

.check { display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 20px; font-size: 15.5px; }
.check input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--marino); flex: none; }

.form__error {
  margin: 0 0 16px; padding: 11px 15px; border-radius: var(--r-sm);
  background: #fdf0ee; border: 1px solid #eec4bd; color: #a5352a; font-size: 15px;
}
.form__fine { margin-top: 14px; font-size: 13.5px; color: var(--texto-2); text-align: center; }

/* ------------------------------------------------------------- footer */
.footer {
  background: linear-gradient(180deg, var(--tinta), var(--tinta-2));
  color: rgba(223, 230, 243, .78);
  padding: 62px 0 26px;
}
.footer__inner {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr; gap: 44px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(154, 173, 210, .2);
}
.footer__badge {
  display: grid; place-items: center;
  width: 148px; height: 148px; border-radius: 50%;
  background: var(--crema); box-shadow: 0 0 0 1px var(--linea-oro), var(--sombra-lg);
}
.footer__badge img { width: 132px; height: auto; }
.footer__tag {
  margin-top: 18px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro-claro);
}
.footer h4 {
  font-family: "Jost", sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-claro); font-weight: 500; margin-bottom: 16px;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__list a {
  text-decoration: none; font-size: 15.5px; color: rgba(223, 230, 243, .78);
  display: inline-flex; align-items: center; gap: 10px;
}
.footer__list a:hover { color: var(--oro-claro); }
.footer__contact svg { width: 18px; height: 18px; color: var(--azul-suave); flex: none; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 22px; font-size: 13.5px; color: rgba(154, 173, 210, .8);
}
.footer__isla { display: inline-flex; align-items: center; gap: 8px; }
.footer__isla svg { width: 16px; height: 16px; color: var(--oro); }

/* ----------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7, 26, 52, .93);
  display: grid; place-items: center; padding: 28px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(520px, 92vw); max-height: 84vh; width: auto;
  border-radius: var(--r-md); border: 5px solid var(--crema);
  box-shadow: 0 40px 80px -30px #000;
}
.lightbox__close {
  position: absolute; top: 20px; right: 20px;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%; color: #fff; cursor: pointer;
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }

/* --------------------------------------------------- WhatsApp flotante */
.wafloat {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--wa); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(31, 168, 85, .85);
}
.wafloat svg { width: 28px; height: 28px; }

/* ============================================ cotización desde el catálogo
   Escoger playgrounds en el catálogo → barra fija abajo → drawer lateral con
   los seleccionados y un formulario corto que abre WhatsApp. Es un flujo
   distinto del formulario largo de #reserva (montaje personalizado). */

.pick {
  margin-top: auto;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 18px;
  background: transparent; color: var(--marino);
  border: 1px solid var(--linea); border-radius: 999px;
  font: 500 15px/1 "Jost", sans-serif; letter-spacing: .015em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.pick svg { width: 18px; height: 18px; flex: none; }
.pick .pick__ok { display: none; }
.pick:hover { border-color: var(--marino); background: rgba(4, 58, 141, .06); }
.tags + .pick { margin-top: 20px; }

.card.is-picked { box-shadow: var(--sombra-lg), 0 0 0 2px var(--oro); }
.card.is-picked .pick {
  background: var(--marino); border-color: var(--marino); color: var(--oro-claro);
}
.card.is-picked .pick .pick__add { display: none; }
.card.is-picked .pick .pick__ok { display: block; }

/* ---- barra fija de selección ---- */
.pickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: linear-gradient(180deg, var(--tinta), var(--tinta-2));
  border-top: 2px solid var(--oro);
  box-shadow: 0 -18px 40px -22px rgba(7, 31, 71, .75);
  transform: translateY(115%);
  transition: transform .32s cubic-bezier(.22, .8, .3, 1);
}
.pickbar[hidden] { display: none; }
.pickbar.is-on { transform: none; }
.pickbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0;
}
.pickbar__info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pickbar__badge {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--oro); color: var(--tinta);
  font-family: "Playfair Display", serif; font-size: 20px; font-weight: 700;
}
.pickbar__txt { display: flex; flex-direction: column; min-width: 0; }
.pickbar__txt b {
  font-family: "Playfair Display", serif; font-weight: 600; font-size: 18px;
  color: var(--crema-2);
}
.pickbar__txt i {
  font-style: normal; font-size: 13.5px; color: rgba(154, 173, 210, .9); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pickbar__acts { display: flex; align-items: center; gap: 12px; flex: none; }
.pickbar__clear {
  color: rgba(223, 230, 243, .8); border-color: rgba(154, 173, 210, .3);
  padding: 11px 18px; font-size: 14.5px;
}
.pickbar__clear:hover { border-color: var(--oro); background: rgba(234, 168, 31, .1); color: var(--crema-2); }

body.has-pick .wafloat { display: none !important; }
/* la barra es fija: deja aire para que no tape el final del footer */
body.has-pick { padding-bottom: 74px; }

/* ---- drawer lateral ---- */
.pickoverlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(7, 26, 52, .62);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
.pickoverlay[hidden] { display: none; }
.pickoverlay.is-on { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(440px, 94vw);
  display: flex; flex-direction: column;
  background: var(--crema-2);
  border-left: 1px solid var(--linea-oro);
  box-shadow: -30px 0 70px -30px rgba(7, 31, 71, .6);
  transform: translateX(102%);
  transition: transform .34s cubic-bezier(.22, .8, .3, 1);
}
.drawer[hidden] { display: none; }
.drawer.is-on { transform: none; }

.drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 18px;
  background: var(--marino); color: var(--crema-2);
  border-bottom: 3px solid var(--oro);
}
.drawer__eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro-claro); margin-bottom: 6px;
}
.drawer__head h2 { font-size: 24px; color: var(--crema-2); }
.drawer__close {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%; color: var(--crema-2); cursor: pointer;
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer__close:hover { background: rgba(255, 255, 255, .22); }

.drawer__body { flex: 1; overflow-y: auto; padding: 22px 24px 30px; }

.drawer__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.drawer__item {
  display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 14px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: 10px 12px;
}
.drawer__item img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; }
.drawer__item b {
  font-family: "Playfair Display", serif; font-size: 17px; font-weight: 600; color: var(--tinta);
  display: block; line-height: 1.2;
}
.drawer__item span { font-size: 13px; color: var(--texto-2); }
.drawer__drop {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--linea); border-radius: 50%;
  color: var(--texto-2); cursor: pointer;
}
.drawer__drop svg { width: 15px; height: 15px; }
.drawer__drop:hover { border-color: #c0392b; color: #c0392b; background: #fdf3f2; }

.drawer__empty {
  text-align: center; color: var(--texto-2); font-size: 15.5px;
  border: 1px dashed var(--linea); border-radius: var(--r-md); padding: 26px 20px;
}

.drawer__lead { font-size: 15.5px; color: var(--texto-2); margin-bottom: 18px; }
.drawer__form .field { margin-bottom: 16px; }
.drawer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ------------------------------------------------------------ reveals */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .sparkle { animation: none !important; opacity: .7; }
  .stage__img { transition: none; }
}

/* ========================================================== responsive */
@media (max-width: 1080px) {
  .feature { grid-template-columns: 1fr; }
  .feature__fig { padding: 24px 24px 0; max-width: 420px; }
  .perso__inner { grid-template-columns: 340px 1fr; gap: 44px; }
  .reserva__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { margin-left: auto; }          /* el toggle pegado a la derecha — regla fija */
  .nav__phone span { display: none; }
  .nav__phone { padding: 11px; border: 1px solid var(--linea); border-radius: 12px; }
  .nav__wa { display: none; }

  .nav__links.is-open {
    display: flex; position: fixed; inset: 72px 0 auto; z-index: 59;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--crema-2); border-bottom: 1px solid var(--linea);
    padding: 8px 20px 22px; margin: 0;
    box-shadow: var(--sombra-lg);
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .nav__links.is-open a { padding: 15px 2px; border-bottom: 1px solid var(--linea); font-size: 17px; }
  .nav__links.is-open a::after { display: none; }
  .nav__menu-cta {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--marino) !important; font-weight: 500;
  }
  .nav__menu-cta svg { width: 19px; height: 19px; color: var(--oro-osc); }
  .nav__menu-cta--wa { border-bottom: 0 !important; }

  .hero__inner { grid-template-columns: 1fr; gap: 46px; padding-bottom: 60px; }
  .hero__copy { text-align: center; }
  .hero__logo { margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .hero__btns, .hero__chips { justify-content: center; }
  .rule--left { margin-inline: auto; }

  .pasos__list { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .reglas__grid { grid-template-columns: repeat(2, 1fr); }
  .donde__grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
  .galeria__grid { grid-template-columns: repeat(3, 1fr); max-width: 560px; }

  .perso__inner { grid-template-columns: 1fr; gap: 36px; }
  .perso__fig { max-width: 400px; margin-inline: auto; }
  .perso__copy { text-align: center; }
  .perso__copy .ticks li { text-align: left; }

  .wafloat { display: grid; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .brand__txt b { font-size: 17px; }
  .brand__txt i { font-size: 8.5px; letter-spacing: .14em; }
  .brand img { width: 34px; }

  .hero { padding-top: 46px; }
  .hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .hero h1 em { white-space: normal; }
  .hero__btns .btn { width: 100%; }
  .stage { max-width: 340px; }

  .pasos, .catalogo, .perso, .donde { padding: 62px 0; }
  .galeria { padding-bottom: 62px; }
  .agua > .wrap, .reglas > .wrap { padding: 58px 0 54px; }
  .reserva__inner { padding: 58px 0 70px; }

  .cards { grid-template-columns: 1fr; max-width: 380px; }
  .agua__side { grid-template-columns: 1fr; }
  .minicard { grid-template-columns: 108px 1fr; gap: 16px; padding: 16px; }
  .minicard__fig img { width: 108px; height: 108px; }
  .reglas__grid { grid-template-columns: 1fr; }
  .donde__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .donde__item h3 { font-size: 17px; }
  .galeria__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ticks--2 { grid-template-columns: 1fr; }

  body.has-pick { padding-bottom: 132px; }
  .pickbar__inner { flex-wrap: wrap; gap: 12px; padding: 12px 0; }
  .pickbar__txt i { display: none; }
  .pickbar__badge { width: 36px; height: 36px; font-size: 17px; }
  .pickbar__txt b { font-size: 16px; }
  .pickbar__acts { width: 100%; }
  .pickbar__acts .btn--wa { flex: 1; }
  .drawer__head { padding: 18px 18px 16px; }
  .drawer__head h2 { font-size: 21px; }
  .drawer__body { padding: 18px 18px 26px; }
  .drawer__row { grid-template-columns: 1fr; gap: 0; }

  .form { padding: 24px 20px; }
  .form__row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
  .feature h3 { font-size: 28px; }
  .feature__body { padding: 22px 22px 26px; }
  .feature__fig { padding: 18px 18px 0; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__badge { width: 126px; height: 126px; }
  .footer__badge img { width: 112px; }
}