/* ==========================================================================
   AEIOU — hoja propia de la muestra. Estructura de la portada de meowwolf.com
   (bloques de color que terminan en ola, garabatos flotando, manchas enmarcando
   fotos, tarjetas con degradado desde la base, botón pastilla) con los colores
   saturados de Aeiou.

   Contraste calculado ANTES de escribir esto (WCAG, blanco/fondo):
     blanco / azul #0B3D91 ........ 10,04     blanco / morado #6A1B9A ... 9,39
     blanco / rojo #E30613 ......... 4,88     tinta / amarillo #F3A407 .. 8,01
     tinta #1B1B3A / crema #FFF8EE  15,75     blanco / azul-2 #0072AD ... 5,24
     rojo-txt #C00D0A / crema ...... 6,03     azul-txt #0072AD / crema .. 4,97
     verde-txt #2F7A0B / crema ..... 5,09     naranja-txt #C63A0E / crema 4,96
     amarillo-claro #FFD166 / azul . 6,97     niebla #C9D6F2 / azul ..... 6,88
     gris #55557A / blanco ......... 7,08     blanco / verde-txt ........ 5,37
   Los colores "de logo" (#008BD2, #49A013, #FF5722, #F3A407) solo de relleno o
   decoración: como texto sobre claro no llegan a 4,5.
   Texto siempre quieto: lo único que se anima es transform/opacity de dibujos.
   ========================================================================== */
:root{
  --crema:#FFF8EE; --blanco:#fff; --tinta:#1B1B3A; --gris:#55557A;
  --azul:#0B3D91; --azul-2:#0072AD; --morado:#6A1B9A;
  --rojo:#E30613; --rojo-txt:#C00D0A; --amarillo:#F3A407; --amarillo-claro:#FFD166;
  --logo-azul:#008BD2; --verde:#49A013; --verde-txt:#2F7A0B; --naranja:#FF5722; --naranja-txt:#C63A0E;
  --niebla:#C9D6F2;
  --titular:'Fredoka','Baloo 2',system-ui,sans-serif;
  --texto:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radio:28px; --pastilla:48px;
  --sombra:0 14px 40px rgba(27,27,58,.16);
  --ancho:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:17px/1.6 var(--texto);overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}   /* sin esto el atributo height de la <img> gana a aspect-ratio y las fotos salen estiradas */
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titular);font-weight:600;line-height:1.05;margin:0 0 .4em;letter-spacing:-.01em}
h2{font-size:clamp(34px,4.4vw,56px)}
h3{font-size:clamp(22px,2vw,28px)}
p{margin:0 0 1em}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* ------------------------------------------------------------ botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font:700 17px/1 var(--texto);text-decoration:none;border-radius:var(--pastilla);padding:17px 28px;
  background:var(--rojo);color:#fff;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 0 #8F0410}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #8F0410}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8F0410}
.btn.azul{background:var(--azul);box-shadow:0 6px 0 #061F4A}
.btn.blanco{background:#fff;color:var(--tinta);box-shadow:0 6px 0 rgba(0,0,0,.25)}
.btn.hueco{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 3px var(--tinta)}
.btn.ancho{width:100%}
.btn[disabled],.btn.apagado{background:#6B6B80;box-shadow:none;cursor:not-allowed;transform:none}
.enlace{font-weight:800;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:3px}

/* ------------------------------------------------------------ cabecera */
.aviso-top{background:var(--amarillo);color:var(--azul);text-align:center;font-weight:800;font-size:15px;padding:9px 16px}
.aviso-top a{text-decoration:none}
.aviso-top a:hover{text-decoration:underline}
nav.barra{position:sticky;top:0;z-index:60;background:var(--azul);color:#fff}
nav.barra .envoltorio{display:flex;align-items:center;gap:24px;min-height:76px}
.marca img{height:50px;width:auto}
nav.barra ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:6px;align-items:center}
nav.barra ul a{display:block;padding:10px 14px;border-radius:30px;text-decoration:none;font-weight:800;font-size:16px}
nav.barra ul a:hover{background:rgba(255,255,255,.14)}
nav.barra ul a.aqui{background:var(--amarillo);color:var(--tinta)}
.barra .tel{font-weight:800;text-decoration:none;white-space:nowrap}
.barra .btn{padding:13px 22px;font-size:16px}
#abre-menu{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;width:48px;height:48px}

/* ------------------------------------------------------------ olas */
.ola{display:block;width:100%;height:clamp(40px,6vw,92px);margin-top:-1px;margin-bottom:-2px;position:relative;z-index:1}  /* -2px: sin esto queda una raya de 1 px (costura subpíxel) */
.ola path{fill:var(--a)}
.ola{background:var(--de)}

/* ------------------------------------------------------------ garabatos */
.garabato{position:absolute;pointer-events:none;width:64px;height:auto;z-index:1;
  animation:flota 7s ease-in-out infinite;will-change:transform}
.garabato.g2{animation-duration:9s;animation-delay:-3s}
.garabato.g3{animation-duration:11s;animation-delay:-6s}
.garabato.gira{animation-name:flota-gira}
@keyframes flota{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(8px,-16px) rotate(6deg)}}
@keyframes flota-gira{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-10px)}100%{transform:rotate(360deg) translateY(0)}}

/* ------------------------------------------------------------ hero */
.hero{position:relative;overflow:hidden;background:var(--azul);min-height:max(640px,calc(100svh - 118px));
  display:flex;align-items:center;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(11,61,145,.35),rgba(11,61,145,0) 55%)}
.hero .envoltorio{width:100%;position:relative;z-index:4;padding-top:40px;padding-bottom:120px}
.panel{background:var(--azul);color:#fff;max-width:600px;padding:clamp(24px,3vw,40px);
  border-radius:44px 64px 52px 72px;box-shadow:var(--sombra);position:relative}
.panel .sello{display:inline-block;background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:14px;
  padding:6px 14px;border-radius:30px;margin-bottom:16px}
.panel h1{font-size:clamp(44px,5.2vw,72px);margin-bottom:14px}
.panel h1 span{color:var(--amarillo-claro)}
.panel .sub{font-size:19px;color:#fff;margin-bottom:22px}
.buscador{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#fff;color:var(--tinta);padding:14px;border-radius:26px}
.buscador label{display:flex;flex-direction:column;font-size:13px;font-weight:800;color:var(--gris);gap:3px;padding:6px 10px;border-radius:14px;background:#F3F1FA}
.buscador select,.buscador input{border:0;background:transparent;font:700 16px var(--texto);color:var(--tinta);padding:4px 0;width:100%;min-width:0}
.buscador .btn{grid-column:1/-1}
.escena{position:absolute;right:max(2vw,calc((100vw - var(--ancho))/2 - 40px));bottom:0;z-index:2;
  width:min(60vw,calc(100svh - 118px),820px);aspect-ratio:1/1;pointer-events:none}
#personaje{width:100%;height:100%;will-change:transform;transition:none}
.confeti{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.confeti i{position:absolute;top:-24px;width:10px;height:16px;border-radius:3px;opacity:.9;
  animation:cae linear infinite;will-change:transform}
@keyframes cae{from{transform:translate3d(0,-30px,0) rotate(0)}to{transform:translate3d(var(--dx,20px),110vh,0) rotate(var(--giro,540deg))}}
.globo{position:absolute;bottom:-340px;z-index:3;width:150px;pointer-events:none;will-change:transform}
.globo img{width:100%}
.globo::after{content:"";display:block;width:2px;height:150px;margin:-6px auto 0;background:rgba(255,255,255,.75);border-radius:2px}
.globo.vuela{animation:sube 9s cubic-bezier(.35,.1,.6,1) forwards}
@keyframes sube{0%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(26px,-35vh) rotate(4deg)}
  50%{transform:translate(-18px,-70vh) rotate(-3deg)}75%{transform:translate(20px,-105vh) rotate(3deg)}100%{transform:translate(0,-150vh) rotate(0)}}
.cartel{position:absolute;z-index:6;right:max(2vw,calc((100vw - var(--ancho))/2 - 20px));
  top:13%;max-width:230px;background:#fff;color:var(--tinta);font:600 21px/1.15 var(--titular);
  padding:16px 20px;border-radius:26px 26px 26px 6px;box-shadow:var(--sombra);border:3px solid var(--tinta);
  transform:rotate(-4deg);opacity:0;transition:opacity .5s}
.cartel.on{opacity:1}
.hero .ola-hero{position:absolute;left:0;right:0;bottom:-1px;z-index:7;height:clamp(40px,6vw,92px);width:100%}
.hero .ola-hero path{fill:var(--rojo)}
.pista-raton{position:absolute;z-index:6;bottom:clamp(60px,8vw,110px);right:6vw;background:rgba(27,27,58,.82);color:#fff;
  font-weight:800;font-size:14px;padding:8px 14px;border-radius:30px;transition:opacity .6s}

/* ------------------------------------------------------------ pack */
.pack{background:var(--rojo);color:#fff;position:relative}
.pack .envoltorio{display:flex;align-items:center;gap:28px;padding-top:26px;padding-bottom:30px}
.pack .btn{flex:none}
.pegatina{flex:none;width:118px;height:118px;border-radius:50%;background:var(--amarillo);color:var(--tinta);
  display:grid;place-items:center;font:700 34px/1 var(--titular);transform:rotate(-12deg);border:4px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta)}
.pack h2{font-size:clamp(28px,3.2vw,42px);margin:0}
.pack p{margin:4px 0 0;font-weight:700}
.pack .btn{margin-left:auto;background:#fff;color:var(--tinta);box-shadow:0 6px 0 #8F0410}

/* ------------------------------------------------------------ secciones */
.seccion{position:relative;padding:clamp(60px,8vw,110px) 0}
.seccion.azul{background:var(--azul);color:#fff}
.seccion.morado{background:var(--morado);color:#fff}
.seccion.azul2{background:var(--azul-2);color:#fff}
.seccion.tinta{background:var(--tinta);color:#fff}
.seccion.amarillo{background:var(--amarillo);color:var(--tinta)}
.seccion.blanco{background:#fff}
.cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.cabeza p{max-width:520px;margin:0;font-size:18px}
.etiqueta{display:inline-block;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;
  background:var(--tinta);color:#fff;padding:5px 12px;border-radius:20px}
.seccion.azul .etiqueta,.seccion.morado .etiqueta,.seccion.azul2 .etiqueta,.seccion.tinta .etiqueta{background:var(--amarillo);color:var(--tinta)}

/* fiestas: tarjetas con degradado de su color subiendo desde la base */
.rejilla-fiestas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fiesta{position:relative;border-radius:var(--radio);overflow:hidden;text-decoration:none;color:#fff;display:flex;flex-direction:column;
  box-shadow:var(--sombra);transition:transform .25s;background:var(--c)}
.fiesta:hover{transform:translateY(-6px) rotate(-.6deg)}
.fiesta .foto{position:relative;aspect-ratio:4/3.6;overflow:hidden}
.fiesta .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fiesta:hover .foto img{transform:scale(1.05)}
.fiesta .foto::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,var(--c),transparent)}
.fiesta .txt{background:var(--c);padding:0 22px 22px;margin-top:-1px}
.fiesta h3{margin-bottom:6px}
.fiesta p{margin:0;font-size:16px}
.fiesta .ir{display:inline-block;margin-top:12px;font-weight:800}
.c-rojo{--c:var(--rojo)} .c-azul{--c:var(--azul)} .c-morado{--c:var(--morado)} .c-verde{--c:var(--verde-txt)}
.c-naranja{--c:var(--naranja-txt)} .c-amarillo{--c:var(--amarillo)}
.c-amarillo,.c-amarillo .txt{color:var(--tinta)}

/* qué es: foto dentro de una mancha de color */
.dos{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.mancha{position:relative;padding:28px}
.mancha::before{content:"";position:absolute;inset:0;background:var(--mc,var(--amarillo));
  border-radius:58% 42% 55% 45% / 45% 55% 45% 55%;transform:rotate(-6deg)}
.mancha img{position:relative;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;aspect-ratio:4/3;object-fit:cover;width:100%}
.lista-confianza{list-style:none;padding:0;margin:22px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.lista-confianza li{display:flex;gap:10px;align-items:flex-start;font-weight:700}
.lista-confianza li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;
  background:var(--amarillo);box-shadow:inset 0 0 0 4px var(--azul)}
.seccion:not(.azul):not(.morado) .lista-confianza li::before{box-shadow:inset 0 0 0 4px var(--crema)}

/* formas: 5 cajas de foto con título abajo */
.rejilla-formas{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.forma{background:#fff;color:var(--tinta);border-radius:24px;overflow:hidden;text-decoration:none;transition:transform .25s}
.forma:nth-child(even){transform:translateY(26px)}
.forma:hover{transform:translateY(-6px)}
.forma:nth-child(even):hover{transform:translateY(20px)}
.forma img{aspect-ratio:3/4;object-fit:cover;width:100%}
.forma div{padding:14px 16px 18px}
.forma h3{font-size:22px;margin-bottom:4px}
.forma p{margin:0;font-size:15px;color:var(--gris)}

/* blog */
.rejilla-blog{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
.post{display:flex;flex-direction:column;background:#fff;border-radius:var(--radio);overflow:hidden;text-decoration:none;color:var(--tinta);box-shadow:var(--sombra)}
.post img{width:100%;object-fit:cover}
.post.grande img{aspect-ratio:16/10}
.post .cuerpo{padding:20px 24px 24px}
.post .edad{display:inline-block;font-weight:800;font-size:13px;background:var(--amarillo);color:var(--tinta);padding:3px 10px;border-radius:14px;margin-bottom:8px}
.post p{color:var(--gris);margin:0}
.pequenos{display:grid;gap:18px}
.pequenos .post{flex-direction:row}
.pequenos .post img{width:38%;aspect-ratio:1/1}
.pequenos .post .cuerpo{padding:14px 18px}
.pequenos .post h3{font-size:20px}
.pequenos .post p{font-size:15px}

/* agenda */
.rejilla-agenda{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.evento{background:#fff;color:var(--tinta);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.evento img{aspect-ratio:16/10;object-fit:cover;width:100%}
.evento .cuerpo{padding:18px 22px 22px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center}
.evento .fecha{grid-row:span 2;background:var(--rojo);color:#fff;font:700 22px/1 var(--titular);text-align:center;padding:12px 12px;border-radius:18px;min-width:84px}
.evento h3{margin:0;font-size:22px}
.evento p{margin:0;color:var(--gris);font-size:15px}

/* tienda */
.tienda{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tienda h2{margin:0}

/* franja de ciudades (estática: nada de marquesinas) */
.ciudades{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;font:600 clamp(20px,2.4vw,30px)/1.3 var(--titular)}
.ciudades span{display:inline-flex;align-items:center;gap:14px}
.ciudades span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--pc,var(--amarillo))}
.ciudades span:last-child::after{display:none}
.ciudades span:nth-child(5n+1){--pc:var(--rojo)} .ciudades span:nth-child(5n+2){--pc:var(--logo-azul)}
.ciudades span:nth-child(5n+3){--pc:var(--amarillo)} .ciudades span:nth-child(5n+4){--pc:var(--naranja)} .ciudades span:nth-child(5n){--pc:var(--verde)}

/* mosaico */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mosaico img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:24px}
.mosaico img:nth-child(3n+1){border-radius:50% 50% 24px 24px}
.mosaico img:nth-child(4n+2){border-radius:24px 50% 24px 50%}
.mosaico img:nth-child(5){border-radius:50%}

/* ------------------------------------------------------------ pie enorme */
footer.pie{background:var(--azul);color:#fff;padding:20px 0 40px;position:relative;overflow:hidden}
.pie .arriba{display:grid;grid-template-columns:1.1fr 2fr;gap:40px;padding:40px 0 30px;border-bottom:2px solid rgba(255,255,255,.2)}
.pie .logo-grande{width:min(360px,100%);height:auto}
.pie .lema{font:600 clamp(30px,3.6vw,48px)/1.05 var(--titular);margin:24px 0 18px}
.pie .contacto a{display:block;font-weight:800;font-size:20px;text-decoration:none;margin:4px 0}
.pie .contacto a:hover{text-decoration:underline}
.sedes-pie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 26px;font-size:15px}
.sedes-pie b{display:block;font-family:var(--titular);font-weight:600;font-size:19px;color:var(--amarillo-claro)}
.sedes-pie span{color:var(--niebla)}
.pie .medio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:30px 0;align-items:start}
.sello-pie{display:inline-flex;align-items:center;gap:14px;border:3px dashed var(--amarillo-claro);border-radius:22px;padding:14px 18px;font-weight:800}
.sello-pie svg{flex:none}
.news label{display:block;font-weight:800;margin-bottom:8px}
.news form{display:flex;gap:8px;background:#fff;border-radius:40px;padding:6px}
.news input{flex:1;min-width:0;border:0;background:transparent;font:600 16px var(--texto);padding:0 14px;color:var(--tinta)}
.news .btn{padding:12px 18px;font-size:15px;box-shadow:none}
.news .ok{margin-top:10px;font-weight:800;color:var(--amarillo-claro)}
.redes{display:flex;gap:10px;flex-wrap:wrap}
.redes a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:30px;background:rgba(255,255,255,.12);text-decoration:none;font-weight:800}
.redes a:hover{background:rgba(255,255,255,.22)}
.pie .abajo{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font-size:14px;color:var(--niebla);padding-top:22px;border-top:2px solid rgba(255,255,255,.2)}
.pie .demo{background:var(--amarillo);color:var(--tinta);border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px}

/* ------------------------------------------------------------ páginas interiores */
.cabecera-pag{background:var(--morado);color:#fff;position:relative;overflow:hidden}
.cabecera-pag .envoltorio{padding-top:clamp(50px,7vw,90px);padding-bottom:clamp(30px,4vw,50px)}
.cabecera-pag h1{font-size:clamp(42px,6vw,78px);max-width:900px}
.cabecera-pag p{font-size:20px;max-width:680px}
.cabecera-pag.azul{background:var(--azul)} .cabecera-pag.rojo{background:var(--rojo)} .cabecera-pag.azul2{background:var(--azul-2)}

/* catálogo */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.filtros button{border:3px solid var(--tinta);background:#fff;color:var(--tinta);font:800 16px var(--texto);padding:10px 18px;border-radius:30px;cursor:pointer}
.filtros button.on{background:var(--tinta);color:#fff}
.rejilla-anim{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.anim{background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.anim img{aspect-ratio:4/3;object-fit:cover;width:100%}
.anim .cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.fichas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 14px}
.fichas div{background:#F3F1FA;border-radius:14px;padding:8px 10px;font-size:13px;color:var(--gris);font-weight:700}
.fichas b{display:block;color:var(--tinta);font-size:15px}
.anim ul{margin:0 0 16px;padding-left:20px;font-size:15px}
.anim .pie-anim{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.anim .desde{font:700 22px var(--titular);color:var(--rojo-txt)}
.anim .desde small{display:block;font:700 12px var(--texto);color:var(--gris)}
.anim .btn{padding:12px 18px;font-size:15px}
.aviso-demo{background:#fff;border:3px dashed var(--morado);border-radius:20px;padding:14px 18px;font-weight:700;margin-top:30px}

/* nosotros */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cifra{background:#fff;color:var(--tinta);border-radius:var(--radio);padding:24px;text-align:center;box-shadow:var(--sombra)}
.cifra b{display:block;font:700 clamp(40px,4vw,56px)/1 var(--titular);color:var(--rojo-txt)}
.pasos-n{counter-reset:p;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pasos-n div{background:rgba(255,255,255,.1);border-radius:var(--radio);padding:24px}
.pasos-n div::before{counter-increment:p;content:counter(p);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--amarillo);color:var(--tinta);font:700 24px var(--titular);margin-bottom:12px}

/* dónde */
#mapa{height:520px;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);z-index:1}
.donde-rejilla{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.caja{background:#fff;border-radius:var(--radio);padding:24px;box-shadow:var(--sombra)}
.caja h3{margin-bottom:12px}
.estado{display:inline-flex;align-items:center;gap:10px;font-weight:800;padding:8px 14px;border-radius:30px;margin-bottom:14px}
.estado.abierto{background:#E4F4DC;color:var(--verde-txt)} .estado.cerrado{background:#FBE3E3;color:var(--rojo-txt)}
.estado i{width:10px;height:10px;border-radius:50%;background:currentColor}
.horario{width:100%;border-collapse:collapse;font-size:15px}
.horario td{padding:6px 0;border-bottom:1px solid #ECE7F3}
.horario td:last-child{text-align:right;font-weight:700}
.horario tr.hoy td{color:var(--rojo-txt);font-weight:800}
.buscaprov{display:flex;gap:8px;margin:10px 0}
.buscaprov select{flex:1;min-width:0;font:700 16px var(--texto);padding:12px 14px;border-radius:14px;border:2px solid var(--tinta);background:#fff;color:var(--tinta)}
#res-prov{margin-top:12px;font-weight:700}
.lista-sedes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lista-sedes div{background:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--sombra);font-size:15px}
.lista-sedes b{display:block;font:600 20px var(--titular)}

/* ------------------------------------------------------------ configurador */
.config{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start}
.bloque-c{background:#fff;border-radius:var(--radio);padding:24px 26px;box-shadow:var(--sombra);margin-bottom:20px}
.bloque-c h2{font-size:26px;display:flex;align-items:center;gap:12px}
.bloque-c h2 .n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--rojo);color:#fff;font-size:20px;flex:none}
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opcion{position:relative;display:flex;flex-direction:column;gap:2px;border:3px solid #E3DDEE;border-radius:18px;padding:12px 14px;cursor:pointer;background:#fff;
  font-weight:700;transition:border-color .15s,background .15s}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion small{font-weight:700;color:var(--gris);font-size:13px}
.opcion.sel,.opcion:has(input:checked){border-color:var(--azul);background:#EEF3FC}
.opcion:focus-within{outline:3px solid var(--amarillo);outline-offset:2px}
.fila-c{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:15px}
.campo input,.campo select,.campo textarea{font:600 17px var(--texto);color:var(--tinta);padding:12px 14px;border:2px solid #CFC8DE;border-radius:14px;background:#fff;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none}
.campo.mal input,.campo.mal select{border-color:var(--rojo-txt)}
.campo small{color:var(--gris);font-weight:700}
.rango{display:flex;align-items:center;gap:14px}
.rango input[type=range]{flex:1;accent-color:var(--rojo)}
.rango output{font:700 28px var(--titular);min-width:56px;text-align:center}
.nota-edad{margin-top:12px;background:#FFF3D6;border-radius:14px;padding:10px 14px;font-weight:700}
.resumen{position:sticky;top:96px;background:var(--azul);color:#fff;border-radius:var(--radio);padding:24px;box-shadow:var(--sombra)}
.resumen h2{font-size:26px}
.lineas-r .l{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:15px}
.lineas-r .l.desc{color:var(--amarillo-claro);font-weight:800}
.total-r{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px;font:700 22px var(--titular)}
.total-r b{font-size:40px;color:var(--amarillo-claro)}
.senal-r{display:flex;justify-content:space-between;font-weight:800;margin-bottom:14px}
.resumen .demo{font-size:13px;color:var(--niebla);margin:10px 0 0}
.resumen .btn{margin-top:6px}

/* reserva / pago */
.pasos-barra{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.pasos-barra .p{padding:8px 16px;border-radius:30px;background:#fff;font-weight:800;font-size:15px;border:2px solid #E3DDEE}
.pasos-barra .p.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.pasos-barra .p.ok{background:#E4F4DC;color:var(--verde-txt);border-color:#E4F4DC}
.paso{display:none} .paso.activo{display:block}
.tarjetas-prueba{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tarjetas-prueba button{border:2px dashed var(--morado);background:#fff;color:var(--morado);border-radius:12px;padding:8px 12px;font:800 14px var(--texto);cursor:pointer}
#caja-tarjeta{border:2px solid #CFC8DE;border-radius:16px;overflow:hidden;background:#fff}
#caja-tarjeta.foco{border-color:var(--azul)} #caja-tarjeta.mal{border-color:var(--rojo-txt)}
#caja-tarjeta .fila{display:flex;align-items:center;border-bottom:2px solid #EEE9F5}
#caja-tarjeta .fila:last-child{border-bottom:0}
#caja-tarjeta input{border:0;font:600 17px var(--texto);padding:14px 16px;min-width:0;flex:1;color:var(--tinta);background:#fff}
#caja-tarjeta input:focus{outline:none}
#caja-tarjeta .partido{display:grid;grid-template-columns:1fr 1fr 1fr}
#caja-tarjeta .partido input{border-right:2px solid #EEE9F5}
#caja-tarjeta .marca,.tresd .marca{font-weight:800;font-size:13px;margin-right:14px;padding:4px 8px;border-radius:8px;background:#F3F1FA;color:var(--gris)}
#error-pago{display:none;margin-top:12px;background:#FBE3E3;color:var(--rojo-txt);border-radius:14px;padding:12px 14px;font-weight:700}
#error-pago.on{display:block}
#error-pago code{font-size:13px;background:#fff;padding:2px 6px;border-radius:6px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:700;margin:16px 0}
.check input{width:22px;height:22px;accent-color:var(--rojo);flex:none;margin-top:2px}
.error-txt{display:none;color:var(--rojo-txt);font-weight:800;margin:-6px 0 12px}
#velo-pago{position:fixed;inset:0;background:rgba(27,27,58,.7);display:none;place-items:center;z-index:100;padding:16px}
#velo-pago.on{display:grid}
#caja-pago{background:#fff;color:var(--tinta);border-radius:24px;padding:28px;width:min(420px,100%);text-align:center}
.rueda{width:54px;height:54px;border-radius:50%;border:6px solid #EEE9F5;border-top-color:var(--rojo);margin:0 auto 16px;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.estado-pago{color:var(--gris);font-weight:700}
.tresd{text-align:left}
.tresd .banco{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tresd .cod{display:flex;gap:10px;justify-content:center;margin:14px 0}
.tresd .cod input{width:52px;height:60px;text-align:center;font:700 26px var(--texto);border:2px solid #CFC8DE;border-radius:12px;color:var(--tinta)}
.vacio{background:#fff;border-radius:var(--radio);padding:30px;text-align:center;box-shadow:var(--sombra)}

/* gracias */
.gracias-caja{background:#fff;border-radius:36px;padding:clamp(24px,4vw,44px);box-shadow:var(--sombra);max-width:820px;margin:0 auto;position:relative;z-index:2}
.gracias-caja h1{font-size:clamp(40px,5vw,64px)}
.ref{display:inline-block;font:700 30px var(--titular);background:var(--amarillo);color:var(--tinta);padding:8px 18px;border-radius:18px}
.recibo{margin:22px 0;border-top:2px dashed #CFC8DE}
.recibo .l{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #EEE9F5}
.recibo .l.total{font:700 22px var(--titular);border-bottom:0}
.recibo .l.desc{color:var(--verde-txt);font-weight:800}
.llamada{display:flex;gap:16px;align-items:center;background:#EEF3FC;border-radius:22px;padding:16px 18px;font-weight:700;margin:18px 0}
.llamada b{font-family:var(--titular);font-size:22px;font-weight:600}
#lienzo-confeti{position:fixed;inset:0;pointer-events:none;z-index:1;width:100%;height:100%}

/* ------------------------------------------------------------ apariciones */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rev.in{opacity:1;transform:none}

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .rejilla-formas{grid-template-columns:repeat(3,1fr)}
  .forma:nth-child(even){transform:none}
  .sedes-pie{grid-template-columns:repeat(2,1fr)}
  .rejilla-anim{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  #abre-menu{display:block}
  nav.barra .tel,nav.barra .btn{display:none}
  nav.barra ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--azul);flex-direction:column;align-items:stretch;padding:10px 16px 20px;gap:4px}
  nav.barra ul.abierto{display:flex}
  nav.barra ul a{padding:14px 16px;font-size:18px}
  nav.barra ul li.solo-movil{display:block}
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .hero .envoltorio{padding-top:0;padding-bottom:clamp(60px,12vw,90px)}
  .escena{order:-1;position:relative;right:auto;bottom:auto;width:min(100%,480px);margin:6px auto -64px}
  .cartel{right:10px;top:14px;font-size:16px;max-width:150px;padding:10px 14px}
  .pista-raton{display:none}
  .rejilla-fiestas,.rejilla-agenda{grid-template-columns:1fr 1fr}
  .dos,.config,.donde-rejilla{grid-template-columns:1fr}
  .rejilla-blog{grid-template-columns:1fr}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .pie .arriba,.pie .medio{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr 1fr}
  .pasos-n,.lista-sedes{grid-template-columns:1fr 1fr}
  .resumen{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .marca img{height:40px}
  nav.barra .envoltorio{min-height:64px}
  .panel{border-radius:32px}
  .buscador{grid-template-columns:1fr}
  .rejilla-fiestas,.rejilla-agenda,.rejilla-formas,.rejilla-anim,.lista-confianza,.pasos-n,.lista-sedes,.sedes-pie{grid-template-columns:1fr}
  .pequenos .post img{width:34%}
  .opciones{grid-template-columns:1fr 1fr}
  .fila-c{grid-template-columns:1fr}
  .pack .envoltorio{flex-wrap:wrap}
  .pack .btn{margin-left:0}
  .pegatina{width:92px;height:92px;font-size:28px}
  #mapa{height:380px}
  .fichas{grid-template-columns:1fr 1fr 1fr}
  .garabato{width:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
  .confeti,.globo{display:none}
}

/* ------------------------------------------------------------ pulido (Lovable) */
.cabecera-pag .envoltorio,.seccion .envoltorio{position:relative;z-index:2}
.ola{transform:translateZ(0)}
img,video,canvas{max-width:100%}
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
p{text-wrap:pretty}
@media (max-width:640px){
  .cabecera-pag .garabato.g2,.seccion .garabato.g2{display:none}
  .garabato{opacity:.85}
}