/* =========================================================================
   Castillos Hinchables Mallorca - Sistema de diseño
   -------------------------------------------------------------------------
   REGLAS DEL SISTEMA (documentadas para que no se rompan al editar):

   1. COLOR. Un único color de acción: --rojo. TODOS los botones primarios
      son rojos en todo el sitio. Los demás colores de la paleta son
      "colores de categoría": tiñen insignias, subrayados, manchas y sombras
      duras, nunca botones.
        castillos -> --azul | acuaticos -> --cielo | servicios -> --amarillo
        normas    -> --verde | blog      -> --naranja
   2. FORMA. Radios: pastillas 999px (botones, insignias, chips),
      tarjetas 24px, imágenes 20px, campos de formulario 14px.
   3. MATERIAL. Sombra dura desplazada (sin desenfoque) en color de
      categoría. Nada de sombras difusas grises.
   4. TEMA. Un único tema por página: claro por defecto, oscuro automático
      con prefers-color-scheme. Ninguna sección invierte el tema.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca (extraídos del logotipo original) */
  --azul:        #1b3ce8;
  --azul-osc:    #0e2299;
  --rojo:        #e51b18;
  --rojo-osc:    #b21310;
  --amarillo:    #ffc50d;
  --cielo:       #35b7f0;
  --verde:       #14bf6b;
  --naranja:     #ff7a1a;

  /* Superficies y texto */
  --papel:       #ffffff;
  --crema:       #fff8e9;
  --crema-2:     #fdeed3;
  --tinta:       #101b3d;
  --tinta-70:    #414c72;
  --tinta-45:    #6c7699;
  --linea:       #101b3d;

  /* Contraste sobre color */
  --sobre-rojo:  #ffffff;

  /* Estructura */
  --menu-ancho:  272px;
  --tope:        1320px;
  --r-pastilla:  999px;
  --r-tarjeta:   24px;
  --r-imagen:    20px;
  --r-campo:     14px;
  --borde:       3px;

  /* Movimiento */
  --salto:       cubic-bezier(.34,1.56,.64,1);
  --suave:       cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:    #0d1430;
    --crema:    #0a1029;
    --crema-2:  #1a2450;
    --tinta:    #eef2ff;
    --tinta-70: #b3bde0;
    --tinta-45: #8b96c2;
    --linea:    #3a4788;
    --azul:     #4f70ff;
    --azul-osc: #6e8bff;
    --rojo:     #ff4a41;
    --rojo-osc: #ff6f67;
    --sobre-rojo: #1c0503;
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Modak solo trae un peso (400) y sus letras son más anchas y burbujeantes
   que las de Fredoka, así que lleva su propio interlineado y sin apretar
   el tracking. */
h1, h2, h3, h4 {
  font-family: "Modak", "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.7rem); }
h2 { font-size: clamp(1.72rem, 1.1rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
p  { margin: 0 0 1rem; max-width: 65ch; }
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--azul); text-underline-offset: .18em; }
ul, ol { padding-left: 1.15rem; }

::selection { background: #ffc50d; color: #101b3d; }

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rojo); color: var(--sobre-rojo);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-campo) 0; font-weight: 800;
}
.saltar:focus { left: 0; }

/* ---------- 3. Menú lateral ---------- */
/* Cajón oculto en todos los tamaños. Se abre con el botón de la barra. */
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: min(var(--menu-ancho), 86vw);
  display: flex; flex-direction: column;
  background: #1b3ce8;
  border-radius: 0 34px 34px 0;
  padding: 1.35rem 1.1rem 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 8px 0 0 rgba(16,27,61,.2);
  transform: translateX(-102%);
  visibility: hidden;                 /* saca los enlaces del orden de tabulación */
  transition: transform .3s var(--suave), visibility .3s;
}
body.menu-abierto .menu { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }
/* Misma textura de lunares que la portada, para que el panel no sea un azul plano */
.menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(255,255,255,.14) 2px, transparent 2.5px);
  background-size: 24px 24px;
}
.menu > * { position: relative; }

.menu__cabeza { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.15rem; }

/* El rótulo del logotipo es azul, así que sobre el panel azul necesita placa blanca. */
.menu__marca {
  display: block; flex: 1; min-width: 0;
  background: #fff; border: 3px solid #101b3d; border-radius: 18px;
  padding: .7rem .8rem; line-height: 0;
  box-shadow: 4px 4px 0 rgba(16,27,61,.35);
}
.menu__marca img { width: 100%; }

.menu__cerrar {
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 3px solid #101b3d; border-radius: 50%; cursor: pointer;
  background: #fff; color: #101b3d;
  display: grid; place-items: center;
  box-shadow: 3px 3px 0 rgba(16,27,61,.35);
  transition: transform .16s var(--salto), background .16s;
}
.menu__cerrar:hover { background: #ffc50d; transform: rotate(90deg); }
.menu__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .menu__cerrar:hover { transform: none; } }

.menu__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }

.menu__enlace {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .85rem;
  border-radius: var(--r-pastilla);
  color: #fff; text-decoration: none;
  font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 1.02rem;
  transition: background .18s var(--suave), transform .18s var(--salto);
}
.menu__enlace:hover { background: rgba(255,255,255,.18); transform: translateX(4px); }
.menu__enlace[aria-current="page"] {
  background: #ffc50d; color: #101b3d;
  box-shadow: 3px 3px 0 rgba(16,27,61,.4);
}
.menu__punto {
  width: 27px; height: 27px; flex: 0 0 27px;
  border-radius: 9px; background: rgba(255,255,255,.22);
  display: grid; place-items: center;
}
.menu__punto svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.menu__enlace[aria-current="page"] .menu__punto { background: rgba(16,27,61,.16); }

.menu__pie { margin-top: auto; padding-top: 1.4rem; display: grid; gap: .55rem; }
.menu__tarjeta {
  background: #ffc50d; color: #101b3d;
  border: 3px solid #101b3d; border-radius: 20px;
  padding: .95rem 1rem 1.05rem; margin-bottom: .5rem;
  box-shadow: 4px 4px 0 rgba(16,27,61,.35);
}
.menu__tarjeta strong { display: block; font-family: "Fredoka", sans-serif; font-size: 1.05rem; }
.menu__tarjeta p { margin: .15rem 0 .7rem; font-size: .88rem; line-height: 1.4; }
.menu__tarjeta .btn { width: 100%; }
.menu__tel {
  display: flex; align-items: center; gap: .55rem;
  color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem;
  padding: .2rem .5rem;
}
.menu__tel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu__redes { display: flex; gap: .45rem; padding: 0 .4rem .3rem; }
.menu__redes a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18); color: #fff;
  transition: background .18s var(--suave), transform .18s var(--salto);
}
.menu__redes a:hover { background: #ffc50d; color: #101b3d; transform: translateY(-3px); }
.menu__redes svg { width: 18px; height: 18px; }

/* Barra superior: única navegación visible, en todos los tamaños */
.barra {
  position: sticky; top: 0; z-index: 55;
  background: #1b3ce8;
  box-shadow: 0 3px 0 rgba(16,27,61,.2);
}
.barra__caja {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-height: 64px; padding: .55rem 0;
}
.barra__marca {
  display: block; line-height: 0;
  background: #fff; border: 2px solid #101b3d; border-radius: 12px;
  padding: .32rem .55rem;
}
.barra__marca img { height: 34px; width: auto; }
@media (max-width: 720px) { .barra__marca img { height: 26px; } }

/* Botón que despliega el menú */
.barra__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 46px; padding: 0 1rem;
  border: 2px solid #101b3d; border-radius: var(--r-pastilla);
  background: #ffc50d; color: #101b3d; cursor: pointer;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1rem;
  box-shadow: 3px 3px 0 rgba(16,27,61,.45);
  transition: transform .16s var(--salto), box-shadow .16s var(--suave);
}
.barra__btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(16,27,61,.45); }
.barra__btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(16,27,61,.45); }
.barra__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.barra__acciones { display: flex; align-items: center; gap: .7rem; }
.barra__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none; font-weight: 800;
  padding: .4rem .6rem; border-radius: var(--r-pastilla);
}
.barra__tel:hover { background: rgba(255,255,255,.16); }
.barra__tel svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 720px) {
  .barra__btn { padding: 0; width: 46px; justify-content: center; }
  .barra__btn-txt { display: none; }
  .barra__tel-num { display: none; }
  .barra__tel { padding: .55rem; background: rgba(255,255,255,.2); }
  .barra__acciones .btn { display: none; }
}

.velo {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(16,27,61,.6);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--suave), visibility .25s;
}
body.menu-abierto .velo { opacity: 1; visibility: visible; }
/* Con el cajón abierto no se desplaza el contenido de detrás. */
body.menu-abierto { overflow: hidden; }

/* ---------- 4. Contenedor ---------- */
.lienzo { min-width: 0; }
.ancho { width: min(100% - 3rem, var(--tope)); margin-inline: auto; }
.seccion { padding: clamp(3.2rem, 6vw, 6rem) 0; }
.seccion--ajustada { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }

@media (max-width: 1100px) {
  .ancho { width: min(100% - 2rem, var(--tope)); }
}

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap;
  padding: .82rem 1.6rem;
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-pastilla);
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.02rem;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--salto), box-shadow .16s var(--suave), background .16s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--principal {
  background: var(--rojo); color: var(--sobre-rojo);
  box-shadow: 5px 5px 0 var(--linea);
}
.btn--principal:hover { background: var(--rojo-osc); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--linea); }
.btn--principal:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--linea); }
.btn--marco {
  background: var(--papel); color: var(--tinta);
  box-shadow: 5px 5px 0 var(--azul);
}
.btn--marco:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--azul); }
.btn--marco:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--azul); }
.btn--pequeno { padding: .55rem 1.15rem; font-size: .95rem; border-width: 2px; box-shadow: 3px 3px 0 var(--linea); }

.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 6. Piezas juguetonas ---------- */
.chapa {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem 1rem;
  border: 2px solid var(--linea); border-radius: var(--r-pastilla);
  background: #ffc50d; color: #101b3d;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .92rem;
}
.chapa--cielo   { background: #1d8fc4; color: #fff; }
.chapa--verde   { background: #0f9c56; color: #fff; }
.chapa--naranja { background: #d95d05; color: #fff; }
.chapa--azul    { background: #1b3ce8; color: #fff; }

/* Se usa siempre dentro de un h1 en Modak: el hueco bajo sus letras es mayor
   que en Fredoka, así que la marca se sube más para seguir pegada al texto. */
.subrayado { position: relative; white-space: nowrap; }
.subrayado::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .19em;
  height: .24em; border-radius: 99px; z-index: -1;
  background: #ffc50d;
}
.subrayado--cielo::after { background: #35b7f0; }
.subrayado--rojo::after  { background: #ff9d9b; }

/* La altura en clamp() con vw da un valor fraccionario: el navegador puede
   redondear el SVG y la sección contigua a distinto pixel entero y dejar una
   rendija de un pixel con el fondo de la página asomando por debajo. El
   solape negativo la tapa; como el borde relleno de la ola siempre coincide
   en color con la sección de al lado, un par de píxeles de más no se nota. */
.olas { display: block; width: 100%; height: clamp(38px, 4.5vw, 70px); margin-block: -2px; }

/* Confeti decorativo */
.confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.confeti i {
  position: absolute; display: block; width: 22px; height: 22px;
  border: 2px solid var(--linea); border-radius: 5px;
  animation: flotar 6s ease-in-out infinite;
}
.confeti i:nth-child(1) { top: 10%; left: 4%;   background: #ffc50d; animation-delay: -.2s; }
.confeti i:nth-child(2) { top: 70%; left: 2%;   background: #35b7f0; border-radius: 50%; animation-delay: -1.4s; }
.confeti i:nth-child(3) { top: 20%; right: 5%;  background: #e51b18; transform: rotate(24deg); animation-delay: -2.6s; }
.confeti i:nth-child(4) { top: 80%; right: 3%;  background: #14bf6b; border-radius: 50%; animation-delay: -3.8s; }
.confeti i:nth-child(5) { top: 45%; right: 14%; background: #ff7a1a; animation-delay: -.9s; }
@keyframes flotar { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(16deg); } }
@media (prefers-reduced-motion: reduce) { .confeti i { animation: none; } }

/* ---------- 7. Portada ---------- */
/* Textura de lunares en las cabeceras interiores; la portada lleva foto
   propia (ver más abajo) y no la necesita. */
.cabecera {
  background-image: radial-gradient(circle, rgba(27,60,232,.11) 2.5px, transparent 3px);
  background-size: 28px 28px;
}
@media (prefers-color-scheme: dark) {
  .cabecera {
    background-image: radial-gradient(circle, rgba(120,150,255,.16) 2.5px, transparent 3px);
  }
}

/* Tres olas de contorno definido apiladas al fondo de la cabecera, que
   rebotan como un colchón de agua hinchable recién saltado: cada una tiene
   su propio ritmo y arranca desfasada de las otras dos para que el bote
   nunca se vea sincronizado. Solo mueve transform (barato para la GPU). */
.fondo-inflable {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.fondo-inflable__ola {
  position: absolute; left: 0; width: 100%;
  transform-origin: 50% 100%;
  animation: rebotar-ola 3s ease-in-out infinite;
}
.fondo-inflable__ola--1 { bottom: -14%; height: 48%; opacity: .72; animation-duration: 3.6s; }
.fondo-inflable__ola--2 { bottom: -10%; height: 39%; opacity: .74; animation-duration: 2.9s; animation-delay: -1.1s; }
.fondo-inflable__ola--3 { bottom: -7%;  height: 30%; opacity: .88; animation-duration: 2.4s; animation-delay: -1.8s; }
@keyframes rebotar-ola {
  0%   { transform: translateY(0)     scaleY(1);   }
  10%  { transform: translateY(14px)  scaleY(.92); }
  28%  { transform: translateY(-20px) scaleY(1.06); }
  46%  { transform: translateY(8px)   scaleY(.97); }
  64%  { transform: translateY(-11px) scaleY(1.03); }
  82%  { transform: translateY(3px)   scaleY(.99); }
  100% { transform: translateY(0)     scaleY(1);   }
}
@media (prefers-color-scheme: dark) {
  .fondo-inflable__ola--1 { opacity: .68; }
  .fondo-inflable__ola--2 { opacity: .78; }
  .fondo-inflable__ola--3 { opacity: .90; }
}
@media (prefers-reduced-motion: reduce) {
  .fondo-inflable__ola { animation: none; }
}
@media (max-width: 640px) {
  /* En móvil la cabecera es mucho más alta (imagen y texto apilados) y la
     ola grande llegaba a rozar la última línea del párrafo: se achican y
     se bajan un poco para dejar aire limpio entre el texto y el agua. */
  .fondo-inflable__ola--1 { height: 34%; bottom: -8%; }
  .fondo-inflable__ola--2 { height: 27%; bottom: -6%; }
  .fondo-inflable__ola--3 { height: 20%; bottom: -4%; }
}
/* El contenido real siempre por encima de las manchas, entre en cabecera se
   declare o no position:relative en línea. */
.cabecera > .ancho { position: relative; z-index: 1; }

/* Foto de fondo a sangre con velo de lectura. El velo es un color fijo (no
   var(--tinta), que se invierte en modo oscuro): esta cabecera es siempre
   oscura con texto blanco, page-theme aparte, igual que .franja o .llamada. */
.portada {
  position: relative; z-index: 0; /* ancla su propio contexto de apilado:
    así el z-index negativo del vídeo se queda contenido aquí dentro y no
    se escapa a colarse detrás de otra sección de la página. */
  overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(440px, 50vw, 620px);
  padding: clamp(2.2rem,5vw,3.2rem) 0 clamp(3.4rem,6.5vw,5rem);
  background:
    linear-gradient(100deg, rgba(16,27,61,.90) 0%, rgba(16,27,61,.72) 34%, rgba(16,27,61,.34) 60%, rgba(16,27,61,.05) 84%),
    url("../img/portada/hero-fondo.webp") center 32% / cover no-repeat;
}
.portada > .ancho { position: relative; z-index: 1; }
.portada__texto { max-width: 34rem; }
.portada__texto h1 { color: #fff; }
.portada__texto p { font-size: 1.15rem; color: rgba(255,255,255,.92); }

/* Vídeo de YouTube de fondo: lo inyecta app.js una vez cargada la página, ya
   que la imagen de arriba (el `background` de .portada) es la que se ve
   mientras tanto y la que se queda si el vídeo no llega a cargar. Por debajo
   incluso del fondo de la sección (z-index negativo) y por debajo de las
   olas (que llevan z-index: 0), para que ambas sigan encima suyo. */
.portada__video {
  position: absolute; inset: 0; overflow: hidden;
  z-index: -1; pointer-events: none;
}
.portada__video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 0; opacity: 0; transition: opacity 1s var(--suave);
}
.portada__video.lista iframe { opacity: 1; }
@media (max-width: 900px) {
  /* La cabecera móvil es más alta que ancha: un 16:9 ajustado por alto en
     vez de por ancho cubre el hueco sin dejar franjas del vídeo sin llenar. */
  .portada__video iframe { width: auto; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  /* app.js ya no lo inserta con esta preferencia activa, pero por si acaso
     algún visitante la cambia después de cargar la página. */
  .portada__video iframe { transition: none; opacity: 0 !important; }
}

@media (max-width: 900px) {
  .portada {
    min-height: clamp(480px, 118vw, 640px);
    background:
      linear-gradient(180deg, rgba(16,27,61,.68) 0%, rgba(16,27,61,.86) 55%, rgba(16,27,61,.92) 100%),
      url("../img/portada/hero-fondo.webp") center 30% / cover no-repeat;
  }
}

/* ---------- 8. Franja de ventajas ---------- */
.franja {
  background: #1b3ce8; color: #fff;
  border-block: var(--borde) solid var(--linea);
}
.franja__rejilla {
  display: grid; gap: 1.4rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding: clamp(1.8rem,3.5vw,2.6rem) 0;
}
.franja__item { display: flex; gap: .85rem; align-items: flex-start; }
.franja__icono {
  width: 44px; height: 44px; flex: none; border-radius: 14px;
  background: rgba(255,255,255,.2); display: grid; place-items: center;
}
.franja__icono svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.franja__item h3 { font-size: 1.08rem; margin: 0 0 .15rem; color: #fff; }
.franja__item p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.85); max-width: 30ch; }

/* ---------- 9. Rejilla bento del catálogo ---------- */
.bento { display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
.bento__celda {
  position: relative; overflow: hidden;
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--papel);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .2s var(--salto), box-shadow .2s var(--suave);
}
.bento__celda:hover { transform: translate(-3px,-3px); }
.bento__celda--ancha  { grid-column: span 2; }
.bento__celda--grande { grid-column: span 2; grid-row: span 2; }
.bento__celda img { width: 100%; height: 100%; object-fit: cover; flex: 1; min-height: 168px; }
.bento__celda--grande img { min-height: 340px; }
.bento__pie {
  padding: 1rem 1.2rem 1.1rem;
  border-top: var(--borde) solid var(--linea);
  background: var(--papel);
}
.bento__pie h3 { margin: 0 0 .2rem; }
.bento__pie p { margin: 0; font-size: .93rem; color: var(--tinta-70); }
.bento__celda[data-color="azul"]     { box-shadow: 8px 8px 0 var(--azul); }
.bento__celda[data-color="rojo"]     { box-shadow: 8px 8px 0 var(--rojo); }
.bento__celda[data-color="amarillo"] { box-shadow: 8px 8px 0 #ffc50d; }
.bento__celda[data-color="cielo"]    { box-shadow: 8px 8px 0 #35b7f0; }
.bento__celda[data-color="verde"]    { box-shadow: 8px 8px 0 #14bf6b; }
.bento__celda[data-color="naranja"]  { box-shadow: 8px 8px 0 #ff7a1a; }
.bento__celda[data-color="azul"]:hover     { box-shadow: 12px 12px 0 var(--azul); }
.bento__celda[data-color="rojo"]:hover     { box-shadow: 12px 12px 0 var(--rojo); }
.bento__celda[data-color="amarillo"]:hover { box-shadow: 12px 12px 0 #ffc50d; }
.bento__celda[data-color="cielo"]:hover    { box-shadow: 12px 12px 0 #35b7f0; }
.bento__celda[data-color="verde"]:hover    { box-shadow: 12px 12px 0 #14bf6b; }
.bento__celda[data-color="naranja"]:hover  { box-shadow: 12px 12px 0 #ff7a1a; }

@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento__celda--ancha, .bento__celda--grande { grid-column: auto; grid-row: auto; }
  .bento__celda--grande img { min-height: 210px; }
}

/* ---------- 10. Bloque a dos columnas ---------- */
.duo {
  display: grid; gap: clamp(1.8rem,4vw,3.5rem);
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: center;
}
.duo--invertido .duo__arte { order: 2; }
.duo__arte img {
  width: 100%; aspect-ratio: 5/4; object-fit: cover;
  border: var(--borde) solid var(--linea); border-radius: var(--r-imagen);
}
@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; }
  .duo--invertido .duo__arte { order: 0; }
}

/* Bloque de color pleno (mismo tema, solo bloque de marca).
   Sin borde: la única frontera con el resto de la página son las olas de
   arriba y abajo, así que su relleno debe continuar el color exacto del
   gradiente en el punto donde lo tocan (ver .olas--abajo más abajo). */
.bloque-agua {
  position: relative;
  background: linear-gradient(180deg, #35b7f0 0%, #1379ab 100%);
  color: #fff;
}
.bloque-agua h2, .bloque-agua h3 { color: #fff; }
.bloque-agua p { color: rgba(255,255,255,.92); }
.bloque-agua .btn--marco { background: #fff; color: #101b3d; box-shadow: 5px 5px 0 #101b3d; border-color: #101b3d; }
.bloque-agua .duo__arte img { border-color: #101b3d; box-shadow: 10px 10px 0 rgba(16,27,61,.3); }

/* ---------- 11. Pasos ---------- */
.pasos { display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
.paso {
  position: relative; padding: 1.5rem 1.3rem 1.4rem;
  border: var(--borde) solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--papel);
}
.paso__num {
  width: 46px; height: 46px; margin-bottom: .8rem;
  border: var(--borde) solid var(--linea); border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.3rem;
}
.paso:nth-child(1) .paso__num { background: #ffc50d; color: #101b3d; }
.paso:nth-child(2) .paso__num { background: #1d8fc4; color: #fff; }
.paso:nth-child(3) .paso__num { background: #0f9c56; color: #fff; }
.paso:nth-child(4) .paso__num { background: #e51b18; color: #fff; }
.paso h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.paso p { margin: 0; font-size: .95rem; color: var(--tinta-70); }
@media (max-width: 980px) { .pasos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- 12. Carril deslizante ---------- */
.carril {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 78vw);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .3rem 1.6rem; margin-inline: -.3rem;
  scrollbar-width: thin;
}
.carril > * { scroll-snap-align: start; }
.carril::-webkit-scrollbar { height: 10px; }
.carril::-webkit-scrollbar-thumb { background: var(--azul); border-radius: 99px; }
.carril::-webkit-scrollbar-track { background: var(--crema-2); border-radius: 99px; }

.ficha {
  display: flex; flex-direction: column;
  border: var(--borde) solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--papel); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s var(--salto);
}
.ficha:hover { transform: translateY(-6px); }
.ficha img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: var(--borde) solid var(--linea); }
.ficha__cuerpo { padding: 1.05rem 1.15rem 1.25rem; }
.ficha__cuerpo h3 { margin: 0 0 .3rem; font-size: 1.18rem; }
.ficha__cuerpo p { margin: 0; font-size: .95rem; color: var(--tinta-70); }

/* ---------- 13. Marquesina de zonas ---------- */
.marquesina {
  overflow: hidden; border-block: var(--borde) solid var(--linea);
  background: #ffc50d; color: #101b3d;
  padding: .75rem 0;
}
.marquesina__pista {
  display: flex; width: max-content;
  animation: correr 38s linear infinite;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.06rem;
}
.marquesina__pista span { display: flex; gap: 2.4rem; padding-right: 2.4rem; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquesina__pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquesina__pista span:last-child { display: none; }
}

/* ---------- 14. Tarjetas de catálogo ---------- */
.catalogo { display: grid; gap: 1.7rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.modelo {
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--borde) solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--papel);
  box-shadow: 8px 8px 0 var(--azul);
  transition: transform .2s var(--salto), box-shadow .2s var(--suave);
}
.modelo:hover { transform: translate(-3px,-3px); box-shadow: 11px 11px 0 var(--azul); }
.modelo--cielo { box-shadow: 8px 8px 0 #35b7f0; }
.modelo--cielo:hover { box-shadow: 11px 11px 0 #35b7f0; }
.modelo--amarillo { box-shadow: 8px 8px 0 #ffc50d; }
.modelo--amarillo:hover { box-shadow: 11px 11px 0 #ffc50d; }
.modelo--verde { box-shadow: 8px 8px 0 #14bf6b; }
.modelo--verde:hover { box-shadow: 11px 11px 0 #14bf6b; }
.modelo__foto { position: relative; }
.modelo__foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: var(--borde) solid var(--linea); }
.modelo__medida {
  position: absolute; top: .8rem; left: .8rem;
  background: #101b3d; color: #fff;
  padding: .3rem .85rem; border-radius: var(--r-pastilla);
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .88rem;
}
.modelo__cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.modelo__cuerpo h3 { margin: 0; }
.modelo__cuerpo p { margin: 0; font-size: .96rem; color: var(--tinta-70); }
.modelo__extra { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .6rem; }
.etiqueta {
  font-size: .82rem; font-weight: 700; padding: .25rem .7rem;
  border-radius: var(--r-pastilla); background: var(--crema-2); color: var(--tinta-70);
}
.galeria-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.galeria-mini img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- 15. Normas ---------- */
.normas { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(285px,1fr)); }
.norma {
  padding: 1.35rem 1.4rem;
  border: var(--borde) solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--papel);
}
.norma__cabeza { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.norma__marca {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  border: 2px solid var(--linea); display: grid; place-items: center;
  background: #0f9c56; color: #fff;
}
.norma--stop .norma__marca  { background: #cc1512; }
.norma--aviso .norma__marca { background: #ffc50d; color: #101b3d; }
.norma__marca svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.norma h3 { margin: 0; font-size: 1.1rem; }
.norma p { margin: 0; font-size: .96rem; color: var(--tinta-70); }
.norma ul { margin: .5rem 0 0; font-size: .96rem; color: var(--tinta-70); }
.norma li { margin-bottom: .3rem; }

/* ---------- 16. Entradas del blog ---------- */
.entradas { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); }
.entrada {
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--borde) solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--papel); text-decoration: none; color: inherit;
  box-shadow: 7px 7px 0 #ff7a1a;
  transition: transform .2s var(--salto), box-shadow .2s var(--suave);
}
.entrada:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 #ff7a1a; }
.entrada img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: var(--borde) solid var(--linea); }
.entrada__cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.entrada__cuerpo h3 { margin: 0; font-size: 1.15rem; }
.entrada__cuerpo p { margin: 0; font-size: .94rem; color: var(--tinta-70); }
.entrada__leer { font-family: "Fredoka",sans-serif; font-weight: 600; color: var(--rojo); margin-top: .2rem; }

/* ---------- 17. Artículo ---------- */
.articulo { max-width: 46rem; }
.articulo h2 { margin-top: 2.2rem; }
.articulo h3 { margin-top: 1.8rem; }
.articulo ul { color: var(--tinta-70); }
.articulo li { margin-bottom: .45rem; }
.articulo > img { border: var(--borde) solid var(--linea); border-radius: var(--r-imagen); margin: 1.6rem 0; }
.destacado {
  border: var(--borde) solid var(--linea); border-left-width: 9px; border-left-color: #ffc50d;
  background: var(--crema-2);
  padding: 1.1rem 1.3rem; border-radius: var(--r-imagen);
  margin: 1.6rem 0;
}
.destacado p:last-child { margin-bottom: 0; }

/* ---------- 18. Cabecera de página interior ---------- */
.cabecera { position: relative; padding: clamp(2rem,4.5vw,3.4rem) 0 clamp(1.4rem,3vw,2.2rem); }
.cabecera .entradilla { font-size: 1.13rem; color: var(--tinta-70); max-width: 46rem; }
.miga { font-size: .9rem; color: var(--tinta-45); margin-bottom: .9rem; }
.miga a { color: var(--tinta-45); }

/* ---------- 19. Formulario ---------- */
.formulario { display: grid; gap: 1.05rem; max-width: 44rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 800; font-size: .96rem; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem;
  padding: .78rem .95rem;
  border: 2px solid var(--linea); border-radius: var(--r-campo);
  background: var(--papel); color: var(--tinta);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-45); }
.campo small { color: var(--tinta-70); font-size: .88rem; }
.campo input:user-invalid, .campo textarea:user-invalid { border-color: var(--rojo); }
.par { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .par { grid-template-columns: 1fr; } }
.acuerdo { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--tinta-70); }
.acuerdo input { width: 20px; height: 20px; margin-top: .18rem; accent-color: #e51b18; }
.aviso-form {
  display: none; padding: .9rem 1.1rem; border-radius: var(--r-campo);
  border: 2px solid var(--linea); font-weight: 700;
}
.aviso-form.ok  { display: block; background: #e3f9ee; color: #055535; border-color: #055535; }
.aviso-form.mal { display: block; background: #fdeceb; color: #8f100e; border-color: #8f100e; }

/* ---------- 20. Llamada final y pie ---------- */
.llamada {
  position: relative; overflow: hidden;
  border: var(--borde) solid var(--linea); border-radius: 32px;
  background: #e51b18; color: #fff;
  padding: clamp(2rem,4vw,3.2rem);
  box-shadow: 10px 10px 0 var(--linea);
}
.llamada h2 { color: #fff; }
.llamada p { color: rgba(255,255,255,.94); }
.llamada .btn--marco { background: #fff; color: #101b3d; box-shadow: 5px 5px 0 #101b3d; border-color: #101b3d; }

.pie {
  background: #1b3ce8; color: #fff;
  border-top: var(--borde) solid var(--linea);
  padding: clamp(2.4rem,4vw,3.4rem) 0 1.4rem;
}
.pie a { color: #fff; }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: 1.3fr 1fr 1fr; }
.pie h3 { font-size: 1.05rem; color: #fff; margin-bottom: .7rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: .96rem; }
.pie p { color: rgba(255,255,255,.85); font-size: .96rem; }
.pie__marca {
  display: inline-block; line-height: 0;
  background: #fff; border: 3px solid #101b3d; border-radius: 18px;
  padding: .8rem 1rem; margin-bottom: 1rem;
  box-shadow: 5px 5px 0 rgba(16,27,61,.35);
}
.pie__logo { width: 210px; display: block; }
.pie__legal {
  margin-top: 2rem; padding-top: 1.1rem;
  border-top: 2px solid rgba(255,255,255,.25);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .88rem; color: rgba(255,255,255,.8);
}
@media (max-width: 820px) { .pie__rejilla { grid-template-columns: 1fr; } }

/* ---------- 21. Botón flotante de WhatsApp ---------- */
.wasap {
  position: fixed; right: 18px; bottom: 18px; z-index: 57;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.25rem;
  background: #128c4a; color: #fff;
  border: var(--borde) solid var(--linea); border-radius: var(--r-pastilla);
  font-family: "Fredoka",sans-serif; font-weight: 600; text-decoration: none;
  box-shadow: 4px 4px 0 var(--linea);
  transition: transform .18s var(--salto);
}
.wasap:hover { transform: translateY(-3px); }
.wasap svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .wasap span { display: none; } .wasap { padding: .85rem; border-radius: 50%; } }

/* ---------- 22. Aparición al hacer scroll ---------- */
.aparece { opacity: 0; transform: translateY(22px); }
.aparece.visible { opacity: 1; transform: none; transition: opacity .6s var(--suave), transform .6s var(--suave); }
@media (prefers-reduced-motion: reduce) {
  .aparece, .aparece.visible { opacity: 1; transform: none; transition: none; }
}

/* ---------- 23. Utilidades ---------- */
.centro { text-align: center; }
.centro p { margin-inline: auto; }
.limite-45 { max-width: 45rem; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}