/* ================================================================
   FRAN96MC.ES — PORTADA "AULA DIGITAL"
   Hoja 1/2: tokens de diseño, reset y ESCENARIO DE FONDO.
   Todo el mundo (cielo, castillo, islas, portal, agua…) está
   construido con CSS + SVG inline: aquí no hay ninguna imagen.
   ================================================================ */

/* ----------------------------------------------------------------
   1) TOKENS
   Los bloques :root y body.atardecer viven ahora en
   includes/tokens.css (única fuente de verdad del sistema de
   diseño). Esa hoja se carga SIEMPRE antes que esta.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   2) RESET Y BASE
   ---------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--cielo-1);
  color:var(--tinta);
  font-family:var(--f-cuerpo);
  font-size:1rem;
  line-height:1.6;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:url("../cursor1.cur"),auto;
}
img,svg{max-width:100%;display:block}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:url("../cursor1.cur"),pointer}
a{cursor:url("../cursor1.cur"),pointer}
a{color:inherit}
::selection{background:rgba(166,137,255,.4)}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
/* En los controles con recorte pixel (clip-path) el outline exterior
   quedaría recortado e invisible: en ellos el anillo de foco se
   dibuja DENTRO del recorte con offset negativo. */
.hud button:focus-visible,
.btn-menu:focus-visible,
.btn-acceder:focus-visible,
.tecla:focus-visible,
.carrusel-nav button:focus-visible,
.redes a:focus-visible,
.btn-pixel:focus-visible,
.btn-comunidad:focus-visible,
.correo-fila button:focus-visible,
.tarjeta:focus-visible{outline-offset:-6px}
/* Sobre el fondo dorado del botón de acceso, un anillo oro sería
   invisible: se usa el tono oscuro del cielo nocturno. */
.btn-acceder:focus-visible{outline-color:var(--cielo-1)}

/* Los reveals solo se preparan si hay JS (html.js): sin JS todo es visible */
html.js [data-reveal]{opacity:0;transform:translateY(26px)}
html.js [data-reveal].vis{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--rev-delay,0s);
}

/* ----------------------------------------------------------------
   3) FONDO — contenedor y capas de parallax
   ---------------------------------------------------------------- */
#fondo{
  position:fixed;inset:0;z-index:var(--z-fondo);
  overflow:hidden;pointer-events:none;
  contain:strict;
}
.capa{
  position:absolute;inset:-4%;
  will-change:transform;
}

/* Cielo con banda de horizonte */
.cielo{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 120% 55% at 50% 104%,var(--horizonte),transparent 62%),
    linear-gradient(180deg,var(--cielo-1) 0%,var(--cielo-2) 38%,var(--cielo-3) 68%,var(--cielo-4) 100%);
  transition:background 1.2s ease;
}

/* Canvas de partículas: estrellas, luciérnagas, estrellas fugaces */
#fx{position:absolute;inset:0;width:100%;height:100%}

/* ----------------------------------------------------------------
   4) LUNA / SOL (pixel, con cráteres de box-shadow)
   ---------------------------------------------------------------- */
.astro{
  position:absolute;top:11%;right:33%;
  width:76px;height:76px;
  background:var(--astro);
  /* silueta pixelada: recorte escalonado */
  clip-path:var(--recorte-px);
  box-shadow:0 0 60px 22px var(--astro-halo);
  transition:background 1.2s ease,box-shadow 1.2s ease;
}
.astro::before{ /* sombreado del borde (se oculta al atardecer) */
  content:"";position:absolute;inset:0;
  box-shadow:
    inset -12px -12px 0 rgba(148,142,110,.4),
    inset 6px 6px 0 rgba(255,255,255,.5);
  transition:opacity 1.2s ease;
}
.astro::after{ /* cráteres pixel */
  content:"";position:absolute;
  width:16px;height:16px;left:16px;top:20px;
  background:rgba(148,142,110,.55);
  box-shadow:
    28px 16px 0 -3px rgba(148,142,110,.5),
    10px 34px 0 -5px rgba(148,142,110,.45),
    36px -6px 0 -6px rgba(148,142,110,.4);
  transition:opacity 1.2s ease;
}
body.atardecer .astro::before,
body.atardecer .astro::after{opacity:0}

/* ----------------------------------------------------------------
   5) NUBES PIXEL (drift lento con transform)
   ---------------------------------------------------------------- */
.nube{
  position:absolute;
  width:26px;height:26px;
  background:transparent;
  color:rgba(196,202,255,.16); /* las sombras pintan con currentColor */
  box-shadow:
    26px 0 0 currentColor, 52px 0 0 currentColor, 78px 0 0 currentColor,
    -26px 26px 0 currentColor, 0 26px 0 currentColor, 26px 26px 0 currentColor,
    52px 26px 0 currentColor, 78px 26px 0 currentColor, 104px 26px 0 currentColor,
    13px -13px 0 -6px currentColor, 57px -16px 0 -4px currentColor;
  animation:nubeDeriva linear infinite;
  animation-duration:var(--dur,140s);
}
body.atardecer .nube{color:rgba(255,170,120,.14)}
.nube.n1{top:16%;left:-14%;--dur:150s}
.nube.n2{top:9%;left:32%;--dur:190s;transform:scale(.62);animation-delay:-70s}
.nube.n3{top:27%;left:60%;--dur:165s;transform:scale(.8);animation-delay:-120s}
.nube.n4{top:40%;left:10%;--dur:210s;transform:scale(.5);animation-delay:-40s}
@keyframes nubeDeriva{
  from{translate:0 0}
  to{translate:130vw 0}
}

/* ----------------------------------------------------------------
   6) CASTILLO (SVG pixel, anclado abajo-izquierda)
   ---------------------------------------------------------------- */
.castillo{
  position:absolute;
  left:max(-40px,-3vw);bottom:9%;
  width:clamp(220px,26vw,420px);
}
.castillo svg{width:100%;height:auto;shape-rendering:crispEdges}
/* Ventanas encendidas: parpadeo suave desincronizado */
.castillo .vt{animation:ventana 4s ease-in-out infinite}
.castillo .vt:nth-of-type(2n){animation-delay:-1.3s;animation-duration:5.2s}
.castillo .vt:nth-of-type(3n){animation-delay:-2.6s;animation-duration:3.4s}
.castillo .vt:nth-of-type(5n){animation-delay:-.8s;animation-duration:6s}
@keyframes ventana{50%{opacity:.45}}
/* Bandera ondeando */
.castillo .bandera{animation:bandera 1.6s steps(2) infinite;transform-origin:left center}
@keyframes bandera{50%{transform:scaleY(.82) skewX(-6deg)}}

/* ----------------------------------------------------------------
   7) ANTORCHAS Y LLAMAS (divs pixel)
   ---------------------------------------------------------------- */
.llama{
  position:absolute;
  width:10px;height:14px;
  background:var(--fuego);
  clip-path:polygon(30% 100%,0 60%,25% 55%,20% 20%,50% 0,80% 25%,75% 55%,100% 62%,70% 100%);
  box-shadow:0 0 18px 6px rgba(255,171,74,.45);
  animation:llama .42s steps(2) infinite;
  transform-origin:50% 100%;
}
.llama::after{
  content:"";position:absolute;left:30%;top:34%;width:40%;height:48%;
  background:var(--oro-vivo);
  clip-path:polygon(20% 100%,0 45%,45% 0,100% 50%,70% 100%);
}
@keyframes llama{
  0%,100%{transform:scale(1) }
  50%{transform:scale(1.18,.86)}
}

/* Farolillos flotantes sueltos por la escena */
.farol{
  position:absolute;
  width:12px;height:16px;
  background:#3a2d16;
  border:2px solid #241b0c;
  box-shadow:0 0 22px 6px rgba(255,207,92,.35);
  animation:farolFlota 6s ease-in-out infinite;
}
.farol::after{
  content:"";position:absolute;inset:2px;
  background:var(--oro);
  animation:farolLuz 2.2s ease-in-out infinite;
}
@keyframes farolFlota{50%{transform:translateY(-10px)}}
@keyframes farolLuz{50%{opacity:.55}}
.farol.f1{left:34%;bottom:26%;animation-delay:-2s}
.farol.f2{left:56%;bottom:14%;animation-delay:-4s;transform:scale(.8)}

/* ----------------------------------------------------------------
   8) ISLAS FLOTANTES (SVG) + PORTAL + CASCADA
   ---------------------------------------------------------------- */
.isla{position:absolute;animation:islaFlota ease-in-out infinite}
.isla svg{width:100%;height:auto;shape-rendering:crispEdges}
@keyframes islaFlota{50%{transform:translateY(-14px)}}

.isla-portal{
  right:4%;top:22%;
  width:clamp(190px,20vw,330px);
  animation-duration:11s;
}
.isla-media{
  right:24%;top:47%;
  width:clamp(120px,12vw,200px);
  animation-duration:14s;animation-delay:-5s;
}
.isla-baja{
  left:16%;bottom:12%;
  width:clamp(110px,11vw,180px);
  animation-duration:12s;animation-delay:-8s;
}

/* Portal mágico: anillo cónico girando + núcleo pulsante */
.portal{
  position:absolute;
  left:50%;top:-28%;
  width:34%;aspect-ratio:3/4;
  transform:translateX(-50%);
}
.portal .anillo{
  position:absolute;inset:0;
  clip-path:var(--recorte-px);
  filter:drop-shadow(0 0 14px rgba(166,137,255,.65)); /* halo estático */
}
/* El giro es una capa cuadrada interior rotando SOLO con transform: el
   conic-gradient viaja con ella y el clip-path del padre la recorta.
   (Antes se animaba filter hue-rotate: repaint en cada frame, siempre.) */
.portal .anillo::before{
  content:"";position:absolute;
  left:50%;top:50%;width:180%;aspect-ratio:1;
  margin:-90% 0 0 -90%; /* centrada; 180% cubre la diagonal del anillo */
  background:conic-gradient(from 0deg,var(--violeta),var(--cian),var(--magenta),var(--violeta));
  animation:portalGira 6s linear infinite;
}
.portal .nucleo{
  position:absolute;inset:14%;
  background:
    radial-gradient(circle at 50% 45%,#efe6ff 0%,var(--violeta) 34%,#3c1e7e 78%);
  clip-path:var(--recorte-px);
  animation:portalLate 2.6s ease-in-out infinite;
}
/* Latido de brillo: velo superpuesto animando SOLO opacity (nada de
   filter:brightness). Hereda el recorte del padre. */
.portal .nucleo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.85) 0%,rgba(239,230,255,.35) 46%,rgba(239,230,255,0) 78%);
  opacity:0;
  animation:portalBrillo 2.6s ease-in-out infinite;
}
@keyframes portalGira{to{transform:rotate(1turn)}}
@keyframes portalLate{50%{transform:scale(.93)}}
@keyframes portalBrillo{50%{opacity:.35}}

/* Cascada: cae desde la isla media hasta el agua */
.cascada{
  position:absolute;
  right:calc(24% + clamp(14px,1.4vw,24px));
  top:calc(47% + clamp(26px,2.6vw,46px));
  bottom:10%;
  width:clamp(10px,1.1vw,18px);
  overflow:hidden;
  opacity:.85;
}
.cascada::before{
  content:"";position:absolute;left:0;right:0;top:-100%;height:200%;
  background:repeating-linear-gradient(
    180deg,
    rgba(137,225,255,.85) 0 8px,
    rgba(89,224,255,.35) 8px 14px,
    rgba(214,247,255,.9) 14px 18px,
    rgba(89,224,255,.4) 18px 26px);
  animation:cascadaCae 1.1s linear infinite;
}
@keyframes cascadaCae{to{transform:translateY(50%)}}
.cascada::after{ /* espuma al pie */
  content:"";position:absolute;left:-60%;right:-60%;bottom:0;height:10px;
  background:rgba(214,247,255,.55);
  filter:blur(3px);
  animation:espuma 1.4s ease-in-out infinite;
}
@keyframes espuma{50%{transform:scaleX(1.35);opacity:.7}}

/* Utilidades de sprites SVG: llamas y cristales animados */
.svg-llama,.vela-llama{
  animation:llama .5s steps(2) infinite;
  transform-origin:50% 100%;transform-box:fill-box;
}
.cristal-brilla{
  animation:cristal 3.2s ease-in-out infinite;
  transform-box:fill-box;
}
@keyframes cristal{50%{opacity:.55}}

/* Cofre brillante (en la isla baja): destello dorado */
.destello-cofre{
  position:absolute;left:46%;top:0;
  width:8px;height:8px;background:var(--oro-vivo);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:destello 2.8s ease-in-out infinite;
}
@keyframes destello{
  0%,100%{transform:scale(.4);opacity:0}
  50%{transform:scale(1.5);opacity:1}
}

/* ----------------------------------------------------------------
   9) LIBROS FLOTANTES Y MAGO EN ESCOBA
   ---------------------------------------------------------------- */
.libro-flotante{
  position:absolute;
  width:clamp(26px,2.6vw,44px);
  animation:libroFlota ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(0,0,10,.5));
}
.libro-flotante svg{shape-rendering:crispEdges}
@keyframes libroFlota{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-16px) rotate(5deg)}
}
.libro-flotante.l1{left:11%;top:17%;animation-duration:7s}
.libro-flotante.l2{right:30%;top:12%;animation-duration:9s;animation-delay:-3s}
.libro-flotante.l3{left:6%;top:48%;animation-duration:8s;animation-delay:-5s;transform:scale(.8)}

/* Mago cruzando el cielo (viaje largo, con vaivén) */
.mago{
  position:absolute;top:13%;left:0;
  width:clamp(60px,6vw,104px);
  animation:magoViaje 46s linear infinite;
  animation-delay:4s;
  translate:-140px 0;
}
.mago .vaiven{animation:magoVaiven 3.2s ease-in-out infinite}
.mago svg{shape-rendering:crispEdges;overflow:visible}
@keyframes magoViaje{
  0%{translate:-140px 0}
  100%{translate:110vw -6vh}
}
@keyframes magoVaiven{50%{transform:translateY(-12px) rotate(2deg)}}
/* Estela de chispas */
.mago .vaiven::after{
  content:"";position:absolute;right:96%;top:52%;
  width:7px;height:7px;background:var(--oro-vivo);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  box-shadow:-14px 4px 0 -1px rgba(89,224,255,.8),-27px -2px 0 -2px rgba(166,137,255,.7),-38px 6px 0 -3px rgba(255,207,92,.6);
  animation:estela .5s steps(2) infinite;
}
@keyframes estela{50%{transform:translateY(3px) scale(.8)}}

/* ----------------------------------------------------------------
   10) AGUA (banda inferior con brillos)
   ---------------------------------------------------------------- */
.agua{
  position:absolute;left:0;right:0;bottom:0;height:11%;
  background:linear-gradient(180deg,var(--agua-brillo) 0,var(--agua-1) 14%,var(--agua-2) 100%);
  transition:background 1.2s ease;
}
.agua i{
  position:absolute;height:3px;background:var(--agua-brillo);
  animation:brilloAgua ease-in-out infinite;
}
@keyframes brilloAgua{
  0%,100%{opacity:.1;transform:scaleX(.5)}
  50%{opacity:.9;transform:scaleX(1.2)}
}
.agua i:nth-child(1){left:12%;top:22%;width:70px;animation-duration:3.4s}
.agua i:nth-child(2){left:36%;top:48%;width:44px;animation-duration:4.6s;animation-delay:-2s}
.agua i:nth-child(3){left:58%;top:30%;width:88px;animation-duration:3.9s;animation-delay:-1s}
.agua i:nth-child(4){left:79%;top:56%;width:52px;animation-duration:5.2s;animation-delay:-3s}
.agua i:nth-child(5){left:24%;top:70%;width:34px;animation-duration:4.1s;animation-delay:-2.6s}
/* Reflejo del portal en el agua */
.agua::after{
  content:"";position:absolute;right:6%;top:10%;
  width:16%;height:70%;
  background:radial-gradient(ellipse at 50% 0%,rgba(166,137,255,.3),transparent 70%);
  animation:reflejo 4s ease-in-out infinite;
}
@keyframes reflejo{50%{opacity:.45}}

/* Viñeta general para dar profundidad al mundo */
.vineta{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 115% 90% at 50% 38%,transparent 55%,rgba(2,3,12,.5) 100%);
}

/* ----------------------------------------------------------------
   10b) VIAJEROS Y DETALLES VIVOS
   ---------------------------------------------------------------- */
/* Búho cruzando el cielo en sentido contrario al mago */
.buho{
  position:absolute;top:26%;left:0;
  width:clamp(28px,2.8vw,46px);
  translate:110vw 0;
  animation:buhoViaje 64s linear infinite;
  animation-delay:9s;
}
@keyframes buhoViaje{
  0%{translate:110vw 0}
  100%{translate:-140px 6vh}
}
.buho .vaiven-b{animation:magoVaiven 2.6s ease-in-out infinite}
.buho svg{shape-rendering:crispEdges}
.buho .ala{
  animation:aleteo .5s steps(2) infinite;
  transform-origin:50% 0;transform-box:fill-box;
}
@keyframes aleteo{50%{transform:scaleY(1.55)}}

/* Farolillos que suben flotando desde el agua */
.farol-volador{
  position:absolute;bottom:-40px;
  animation:farolSube linear infinite;
  opacity:0;
}
.farol-volador .sway{
  display:block;position:relative;
  width:12px;height:16px;
  background:#3a2d16;border:2px solid #241b0c;
  box-shadow:0 0 22px 6px rgba(255,207,92,.35);
  animation:farolVaiven 3.6s ease-in-out infinite;
}
.farol-volador .sway::after{
  content:"";position:absolute;inset:2px;
  background:var(--oro);
  animation:farolLuz 2.2s ease-in-out infinite;
}
@keyframes farolSube{
  0%{opacity:0;translate:0 0}
  6%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;translate:0 -104vh}
}
@keyframes farolVaiven{50%{transform:translateX(10px) rotate(4deg)}}
.farol-volador.fv1{left:21%;animation-duration:36s;animation-delay:4s}
.farol-volador.fv2{left:71%;animation-duration:48s;animation-delay:20s;scale:.8}

/* Barquita a la deriva sobre el agua */
.barca{
  position:absolute;bottom:9.4%;left:0;
  width:clamp(30px,3vw,46px);
  translate:-70px 0;
  animation:barcaDeriva 120s linear infinite;
  animation-delay:-35s;
}
@keyframes barcaDeriva{
  0%{translate:-70px 0}
  100%{translate:105vw 0}
}
.barca .balanceo{
  animation:barcaBalanceo 3.4s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes barcaBalanceo{
  25%{transform:rotate(2.5deg) translateY(1px)}
  75%{transform:rotate(-2.5deg)}
}
.barca svg{shape-rendering:crispEdges}

/* Pez que salta del agua de vez en cuando */
.pez{
  position:absolute;left:41%;bottom:10%;
  width:20px;opacity:0;
  animation:pezSalta 12s ease-in-out infinite;
}
.pez svg{shape-rendering:crispEdges}
@keyframes pezSalta{
  0%,86%{opacity:0;transform:translateY(24px) rotate(-50deg)}
  89%{opacity:1;transform:translateY(-8px) rotate(-28deg)}
  92%{opacity:1;transform:translateY(-30px) rotate(0deg)}
  95%{opacity:1;transform:translateY(-6px) rotate(42deg)}
  97%,100%{opacity:0;transform:translateY(24px) rotate(60deg)}
}
.salpicadura{
  position:absolute;left:calc(41% + 6px);bottom:10.4%;
  width:4px;height:4px;background:rgba(214,247,255,.9);
  opacity:0;
  box-shadow:
    -8px -4px 0 rgba(214,247,255,.7), 8px -5px 0 rgba(214,247,255,.7),
    -4px -10px 0 rgba(137,225,255,.6), 5px -11px 0 rgba(137,225,255,.6);
  animation:salpica 12s linear infinite;
}
@keyframes salpica{
  0%,95%{opacity:0;transform:scale(.4)}
  97%{opacity:1;transform:scale(1.2)}
  100%{opacity:0;transform:scale(1.6) translateY(-4px)}
}

/* Hojas que caen del árbol de la isla del portal */
.hoja{
  position:absolute;left:74%;top:6%;
  width:5px;height:5px;background:#3fae5c;
  opacity:0;
  animation:hojaCae 8s linear infinite;
}
.hoja.h2{left:70%;background:#2f8a49;animation-delay:-4s}
@keyframes hojaCae{
  0%{opacity:0;translate:0 0;transform:rotate(0)}
  6%{opacity:1}
  80%{opacity:1}
  100%{opacity:0;translate:-26px 120px;transform:rotate(300deg)}
}

/* Pulso del portal: anillo que se expande */
.portal::after{
  content:"";position:absolute;inset:-6%;
  border:3px solid rgba(166,137,255,.75);
  clip-path:var(--recorte-px);
  opacity:0;pointer-events:none;
  animation:portalPulso 5s ease-out infinite;
}
@keyframes portalPulso{
  0%{opacity:.9;transform:scale(.7)}
  55%,100%{opacity:0;transform:scale(1.45)}
}

/* ----------------------------------------------------------------
   11) HUD (música + atardecer) — abajo a la izquierda
   ---------------------------------------------------------------- */
.hud{
  position:fixed;left:1rem;bottom:1rem;z-index:var(--z-hud);
  display:flex;gap:.6rem;
}
/* El tooltip del envoltorio también aparece con el foco de teclado
   del botón interior (focus-within): mismo estado que el hover. */
.hud .px-tooltip:focus-within::after,
.hud .px-tooltip:focus-within::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.hud button{
  width:46px;height:46px;
  display:grid;place-items:center;
  font-size:1.15rem;line-height:1;
  background:var(--panel);
  border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:transform .2s var(--ease-out),border-color .2s,filter .2s;
}
.hud button:hover{transform:translateY(-3px);border-color:var(--oro);filter:drop-shadow(0 0 10px rgba(255,207,92,.35))}
.hud button[aria-pressed="true"]{border-color:var(--verde);filter:drop-shadow(0 0 10px rgba(109,255,160,.4))}
.hud button:active{transform:translateY(1px) scale(.92)}
/* Pulsación con rebote al activar un modo (solo transform) */
@media (prefers-reduced-motion:no-preference){
  .hud button[aria-pressed="true"]{animation:hudPulso .4s var(--ease-back)}
}
@keyframes hudPulso{
  0%{transform:scale(.85)}
  60%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* ----------------------------------------------------------------
   12) MOVIMIENTO REDUCIDO — la escena se congela con elegancia
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* html:focus-within (0,1,1) ganaría al html a secas: se iguala
     la especificidad para que el scroll nunca sea smooth aquí */
  html,html:focus-within{scroll-behavior:auto}
  .nube,.castillo .vt,.castillo .bandera,.llama,.llama::after,.farol,.farol::after,
  .isla,.portal .anillo,.portal .anillo::before,.portal .nucleo,
  .portal .nucleo::after,.cascada::before,.cascada::after,
  .destello-cofre,.libro-flotante,.mago,.mago .vaiven,.mago .vaiven::after,
  .svg-llama,.vela-llama,.cristal-brilla,
  .buho,.buho .vaiven-b,.buho .ala,.farol-volador,.farol-volador .sway,
  .farol-volador .sway::after,.barca,.barca .balanceo,.pez,.salpicadura,
  .hoja,.portal::after,
  .agua i,.agua::after{animation:none}
  .mago,.buho,.farol-volador,.barca,.pez,.salpicadura{display:none}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ----------------------------------------------------------------
   13) AJUSTES DE ESCENA EN PANTALLAS ESTRECHAS
   ---------------------------------------------------------------- */
@media (max-width:860px){
  .isla-media,.cascada{display:none}
  .isla-portal{right:-6%;top:16%;width:200px}
  .castillo{left:-60px;bottom:7%;width:230px}
  .libro-flotante.l3{display:none}
  .astro{right:20%;top:5%;width:56px;height:56px}
}
@media (max-width:520px){
  .isla-baja{display:none}
  .libro-flotante.l2{display:none}
  .farol.f1{display:none}
  .barca,.farol-volador.fv2{display:none}
}