/* ===============================
   BASE DE LA SECCIÓN HERO
=============================== */
.hero{
  position: relative;
  isolation: isolate;              
  width: 100%;
  height: 100vh;
  background: #7CC5AD;
  overflow: hidden;
}

/* ===============================
   LAYOUT INTERNO HERO (3 columnas)
=============================== */
.hero__layout{
  position: relative;
  z-index:3;
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  height: 100%;
  padding: 2rem;
}

/* Título + logo */
.hero__left{
  align-self:start;
  justify-self:start;
  text-align:left;
  padding-top: 1.2rem;
  margin-left: 2rem;
}
.hero__title{
  font-family: 'Tiki Tako', sans-serif;
  color:#FFF3CF;
  line-height:.95;
  letter-spacing:1px;
  margin:0;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
}
.hero__left .logo{
  display:block;
  margin-top:2rem;
  width: clamp(200px, 36vw, 420px);
  height:auto;
}

/* Ilustración central hero */
.hero__center{ display:flex; justify-content:center; align-items:center; }
.illustrations{ position:relative; width:100%; height:100%; }
.ilustracion-general{
  position:relative;
  display:block;
  margin:0 auto;
  max-height: 85vh;
  z-index:3;
}
.ilustracion{
  position:absolute;
  pointer-events:none;
  z-index:4;
}
/* Mariposas */
.mariposa.arriba{ top:-5%; left:70%; width:70px; transform: scaleX(-1); }
.mariposa.abajo { bottom:30%; left:1%; width:90px; }

/* Lago + peces */
:root{ 
  --shore-h: 260px; 
  --paintMs: 1200ms; 
  --bookMs: 1200ms;   
  --verdeFondo: #7CC5AD;
}
.shore{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: var(--shore-h);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
}
.shore.tile-x{ background-repeat: repeat-x; background-size: auto 100%; }
.lago{
  position:absolute; bottom:0; left:0;
  width:100%; height: auto;
  object-fit: cover; z-index:1;
}
.pez1, .pez2{
  width: clamp(90px, 9vw, 220px);
  height:auto;
  bottom: calc(var(--lake-h) * 0.22);
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.25));
}
.pez1{ left: -30%; bottom:-5%; transform: rotate(18deg); }
.pez2{ right: -4%;  bottom:-5%; transform: rotate(-18deg); }

/* ===============================
   MENÚ + BOTONES
=============================== */
.menu{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:2.6rem; position:relative; z-index:6;
  margin-right:3rem; margin-top:-3rem;
}
.menu-item{ position:relative; width:max-content; }

/* Botón base*/
.btn{
  position:relative;
  display: inline-grid;
  place-items: center;
  padding:0.9rem 2.2rem;
  font-family:'Gotham Ultra', sans-serif;
  font-size:1.1rem;
  letter-spacing:1px;
  color:#fff;
  text-decoration:none;
  border-radius:0 20px 0 20px;
  box-shadow:3px 3px 0 #2A3A1C;
  transition: box-shadow .2s ease, transform .2s ease;
  white-space: nowrap;  
}
.btn:hover{ transform: translateY(-3px); box-shadow:5px 5px 0 #E97E16; }

.btn--dark{   background:#2A3A1C; }
.btn--green{  background:#8EAE48; }
.btn--lime{   background:#B2BC34; }
.btn--yellow{ background:#C2C057; }
.btn--wide{   padding-left:3.2rem; padding-right:3.2rem; }

/* Iconos sobre los botones */
.menu-icon{ position:absolute; pointer-events:none; filter:none; }
.menu-icon.lg{ width:120px; height:auto; }
.menu-item.step-0 .menu-icon{ top:-80px; left:-25px; }
.menu-item.step-1 .menu-icon{ top:-93px; right:-25px; }
.menu-item.step-2 .menu-icon{ top:-88px; left:-30px; }
.menu-item.step-3 .menu-icon{ top:-96px; right:-30px; }
.menu-item.step-4 .menu-icon{ top:-60px; left:-28px; }
.menu-item.step-5 .menu-icon{ top:-110px; right:-10px; }

/* Escalonado */
.menu-item.step-0{ margin-left: 1000; margin-right:auto; }
.menu-item.step-1{ margin-left:auto; margin-right:0; }
.menu-item.step-2{ margin-left:0;    margin-right:auto; }
.menu-item.step-3{ margin-left:auto; margin-right:0; }
.menu-item.step-4{ margin-left:0;    margin-right:auto; }
.menu-item.step-5{ margin-left:auto; margin-right:0; }

.btn--flip{
  display:inline-grid;
  place-items:center;
  transform-style: preserve-3d;
  perspective: 800px;
  overflow: hidden;
}
.btn--flip .btn__face{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  color:#fff; padding: inherit; border-radius: inherit;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  
}

.btn__front,
.btn__back{
  grid-area: 1 / 1;         
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;    
}

.btn:hover .btn__front,
.btn:focus-visible .btn__front{ opacity: 0; transform: translateY(-6px); }

.btn:hover .btn__back,
.btn:focus-visible .btn__back{ opacity: 1; transform: translateY(0); }

.btn__front{ opacity: 1; transform: translateY(0); }
.btn__back { opacity: 0; transform: translateY(6px); }

.btn--flip .btn__front{ transform: rotateY(0deg) translateZ(1px); }
.btn--flip .btn__back { transform: rotateY(180deg) translateZ(1px); }
.btn--flip{ transition: transform .55s cubic-bezier(.2,.75,.2,1), box-shadow .2s ease; }
.btn--flip:hover, .btn--flip:focus-visible{ transform: rotateY(180deg); }
.btn--dark.btn--flip   .btn__face{ background:#2A3A1C; }
.btn--green.btn--flip  .btn__face{ background:#8EAE48; }
.btn--lime.btn--flip   .btn__face{ background:#B2BC34; }
.btn--yellow.btn--flip .btn__face{ background:#C2C057; }

@media (prefers-reduced-motion: reduce){
  .btn--flip{ transition: box-shadow .2s ease !important; }
  .btn--flip:hover, .btn--flip:focus-visible{ transform: none !important; }
  .btn--flip .btn__back{ display: none; }
}

/* ===============================
   EFECTOS GLOBALES HERO (lluvia/hojas)
=============================== */
.rain, .leaves{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5;
}
.drop{
  position:absolute; top:-20px; background: rgba(173,216,230,.8);
  border-radius:50%; animation: fall 3s linear forwards;
}
@keyframes fall{ to{ transform: translateY(100vh); } }

.leaf{
  position:absolute; top:-60px; width:55px; animation: leafFall linear forwards;
}
@keyframes leafFall{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); }
  50%{ transform: translateY(50vh) translateX(40px) rotate(180deg); }
  100%{ transform: translateY(100vh) translateX(-40px) rotate(360deg); }
}

/* ===============================
   RESPONSIVE BÁSICO HERO
=============================== */
@media (max-width: 992px){
  :root{ --lake-h: 220px; }
  .pez1{ left:26%; } .pez2{ right:24%; }
  .hero__left .logo{ width: clamp(140px, 38vw, 320px); }
  .menu{ gap:2rem; }
  .menu-icon.lg{ width:80px; }
}

/* ===============================
   SECCIÓN REVEAL
=============================== */
.reveal{
  position: relative;
  isolation: isolate;
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  background: #EFECD1;
  display: grid;
  place-content: center;
  padding: clamp(24px, 4vw, 56px);
  overflow: hidden;
}

/* Capa de pintura */
/* PINTA DE ARRIBA HACIA ABAJO usando el MISMO color del fondo */
.reveal__paint{
  position: absolute;
  inset: 0;
  background: #C2C057;   
  z-index: 0;            
  pointer-events: none;
  transform: scaleY(0);          
  transform-origin: top center; 
  will-change: transform;
  transition: transform 1200ms ease-in-out; 
}

.reveal.opening .reveal__paint{
  opacity:1; animation: paintWipe 0.2s cubic-bezier(.22,.7,.12,.99) forwards;
}
@keyframes paintWipe{
  0%   { clip-path: circle(0%   at 50% 60%); }
  100% { clip-path: circle(150% at 50% 60%); }
}

/* Efectos internos */
.fx{ position:absolute; inset:0; pointer-events:none; z-index:2; }

/* Libro */
.book-stage{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 3;
  transition: opacity .35s ease, transform .35s ease;
}
.reveal.opened .book-stage{
  opacity:0; transform: scale(.96); pointer-events:none;
}
.book{
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  perspective: 1200px;
  position: relative;
  filter: drop-shadow(6px 8px 0 rgba(0,0,0,.18));
  animation: floatBob 6s ease-in-out infinite;
  z-index: 2;
}
.book:focus-visible{ outline: 3px solid #2A3A1C; border-radius: 10px; }
.book__cover{
  display:block;
  width: clamp(320px, 34vw, 560px);  
  height:auto;
  transform-origin: left center;
  will-change: transform;
}

.book__shadow{
  position:absolute;
  left:50%; bottom:-12px;
  width: 66%;
  height: 18px;
  transform: translateX(-50%) scale(1);
  background: rgba(0,0,0,.22);
  filter: blur(8px);
  border-radius: 50%;
  pointer-events: none;
  animation: shadowBob 6s ease-in-out infinite;
}

@keyframes floatBob{
  0%   { transform: translateY(0px)   rotate(0.6deg); }
  25%  { transform: translateY(-12px) rotate(-0.6deg); }
  50%  { transform: translateY(0px)   rotate(0.4deg); }
  75%  { transform: translateY(9px)   rotate(-0.4deg); }
  100% { transform: translateY(0px)   rotate(0.6deg); }
}
@keyframes shadowBob{
  0%   { transform: translateX(-50%) scale(1);   opacity:.85; }
  25%  { transform: translateX(-50%) scale(.92); opacity:.70; }
  50%  { transform: translateX(-50%) scale(1);   opacity:.85; }
  75%  { transform: translateX(-50%) scale(1.06);opacity:.90; }
  100% { transform: translateX(-50%) scale(1);   opacity:.85; }
}

/* Página sintética (si la usas) */
.book__page{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background: linear-gradient(90deg,#fff 0%,#f5f5f5 50%,#fff 100%);
  border-left: 2px solid rgba(0,0,0,.15);
  transform-origin: left center;
  transform: rotateY(90deg);
  opacity:0;
}

/* Animaciones del libro */
.book.is-coverFlip .book__cover{ animation: coverFlip .6s ease forwards; }
@keyframes coverFlip{
  0%   { transform: rotateY(0) scale(1); opacity:1; }
  100% { transform: rotateY(-120deg) scale(.95); opacity:0; }
}
.book.is-pageTurn .book__page{ animation: pageTurn 0.7s ease forwards; }
@keyframes pageTurn{
  0%   { transform: rotateY(90deg); opacity:0; }
  40%  { transform: rotateY(20deg); opacity:1; }
  100% { transform: rotateY(-100deg); opacity:0; }
}

/* Contenido */
.reveal__content{
  position: relative; z-index:3;
  width: min(1400px, 100%);
  margin: 0 auto;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.painted .reveal__content{
  opacity:1; transform: translateY(0); pointer-events:auto;
}

/* Grid */
.reveal__grid{
  --pad: clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--pad);
  align-items: center;
  align-content: center;
  max-height: calc(100vh - var(--pad)*2);
}

.libro-sec{
  position: relative;
  overflow: hidden;
}

.libro-content{
  position: relative;
  z-index: 1;
  opacity: 0;              
  pointer-events: none;
  transition: opacity 400ms ease;
}

.libro-sec.is-opening .bg-paint{ width: 100%; }

.libro-sec.show-content .libro-content{
  opacity: 1;
  pointer-events: auto;
}
.libro-sec.show-content .book{
  opacity: 0;
  pointer-events: none;
}

.bg-paint{
  position: absolute;
  inset: 0;
  width: 0%;               
  background: var(--verdeFondo);
  z-index: 0;               
  transition: width var(--paintMs) ease-in;
  will-change: width;
}

/* Columna imagen */
.col--image{ display:flex; justify-content:flex-start; align-items:center; overflow:hidden; }
.feature-illust{
  display:block;
  width: clamp(380px, 36vw, 520px);
  max-height: calc(100vh - clamp(24px,4vw,56px)*2);
  height:auto; max-width:100%;
  transform: translateX(-20px);
}

/* Columna texto */
.col--text h2{
  font-family: 'Tiki Tako', sans-serif;
  color:#2A3A1C;
  font-size: clamp(28px, 4.5vw, 48px);
  margin: 0 0 .6rem 0;
}
.col--text p{
  font-family: 'Gotham Book', system-ui, sans-serif;
  color:#1c2a1b;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  margin: 0 0 1.4rem 0;
  max-width: 56ch;
}

/* Botón descarga */
.btn--download{
  display:inline-block; background:#E97E16; color:#fff; text-decoration:none;
  font-family:'Gotham Ultra', sans-serif; letter-spacing:.03em;
  font-size: clamp(14px, 1.2vw, 18px);
  padding: .9rem 1.6rem; border-radius: 10px;
  box-shadow: 4px 4px 0 #B45E0F;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn--download:hover{ transform: translateY(-2px); box-shadow: 6px 6px 0 #2A3A1C; }
.btn--download:active{ transform: translateY(0); box-shadow: 3px 3px 0 #2A3A1C; }

/* Animaciones reveal secuenciales */
.reveal .feature-illust{ opacity:0; transform: translateX(-40px) scale(.98); }
.reveal.show-bird .feature-illust{
  animation: birdIn .7s cubic-bezier(.2,.8,.14,1) forwards;
}
@keyframes birdIn{
  0%   { opacity:0; transform: translateX(-40px) scale(.98); }
  70%  { opacity:1; transform: translateX(2px)  scale(1.005); }
  100% { opacity:1; transform: translateX(0)    scale(1); }
}
.reveal .col--text{ opacity:0; transform: translateY(18px); }
.reveal.show-text .col--text{ animation: textIn .6s ease-out forwards; }
@keyframes textIn{
  0%   { opacity:0; transform: translateY(18px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Hojas internas */
.fx-leaves img.leaf{
  position:absolute; top:-60px; width:55px; pointer-events:none;
  animation: leafDown linear forwards;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.15));
}
@keyframes leafDown{
  0%{ transform: translateY(-60px) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  50%{ transform: translateY(55vh) translateX(40px) rotate(180deg); }
  100%{ transform: translateY(110vh) translateX(-40px) rotate(360deg); opacity:.9; }
}

/* Estrellas */
.fx-stars img.star{
  position:absolute; width:24px; height:auto; opacity:0;
  transform: scale(.6) rotate(0deg);
  transition: opacity .4s ease, transform .4s ease;
}
.fx-stars img.star.twinkle{
  opacity:1; transform: scale(1) rotate(8deg);
  animation: starPulse 2.2s ease-out forwards;
}
@keyframes starPulse{
  0%{ opacity:0; transform:scale(.5) rotate(0deg); }
  15%{ opacity:1; transform:scale(1.05) rotate(8deg); }
  60%{ opacity:.95; transform:scale(.9) rotate(5deg); }
  100%{ opacity:0; transform:scale(.4) rotate(0deg); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal__paint{ clip-path: none !important; }
  .reveal.opening .reveal__paint{ animation: none !important; transition: opacity .35s ease; }
}

/* Scroll hint */
.scroll-hint{
  position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 50; pointer-events: none;
  opacity: .9; transition: opacity .3s ease;
}
.scroll-hint.is-hidden{ opacity:0; }
.scroll-hint__icon{
  display:block; width: 26px; height: 40px;
  border: 2px solid #2A3A1C; border-radius: 16px;
  position: relative; opacity: .85;
}
.scroll-hint__icon::after{
  content:""; position:absolute; left:50%; top:8px;
  width: 4px; height: 8px; background:#2A3A1C;
  border-radius: 2px; transform: translateX(-50%);
  animation: scrollWheel 1.6s ease-in-out infinite;
}
@keyframes scrollWheel{
  0%   { transform: translate(-50%,0);     opacity: .9; }
  60%  { transform: translate(-50%,10px);  opacity: .2; }
  100% { transform: translate(-50%,0);     opacity: .9; }
}

html{ scrollbar-width:none; }
body{ -ms-overflow-style:none; }
body::-webkit-scrollbar{ width:0; height:0; }

:root{
  --lake-h: 280px;       
}

.book--zooming .book__cover{
  transform-origin: 50% 50%;                
  animation: bookZoomBig 1.9s linear forwards;
  will-change: transform, filter;
  filter: drop-shadow(14px 18px 0 rgba(0,0,0,.18));
}

@keyframes bookZoomBig{
  0%   { transform: scale(1);    }
  100% { transform: scale(1.8);  }  
}




/* =========================================================
   ≥ 1280px (desktop grande)
========================================================= */
@media (min-width: 1280px){
  .hero__layout{ padding: 2.5rem 3rem; }
  .menu{ gap: 2.8rem; margin-right: 3.2rem; }
  .btn{ font-size: 1.15rem; }
}

/* =========================================================
   1200px – 992px (laptops / tablets apaisado)
========================================================= */
@media (max-width: 1200px){
  :root{ --lake-h: 260px; }
  .hero__layout{ grid-template-columns: 1.1fr 1.8fr 1fr; }
  .hero__title{ font-size: clamp(2rem, 4.2vw, 4.2rem); }
  .menu{ gap: 2.2rem; margin-right: 2.2rem; }
  .menu-icon.lg{ width: 100px; }
  .btn{ font-size: 1rem; padding: .8rem 1.8rem; }
  .feature-illust{ width: clamp(360px, 34vw, 500px); }
}

/* =========================================================
   ≤ 992px (tablet)
========================================================= */
@media (max-width: 992px){
  :root{ --lake-h: 220px; }
  .hero__layout{
    grid-template-columns: 1.2fr 1.3fr;    
    grid-template-areas:
      "left center"
      "right center";
    column-gap: 1.4rem;
    row-gap: 1.2rem;
    align-items: center;
  }
  .hero__left{ grid-area: left; margin-left: 1rem; }
  .hero__center{ grid-area: center; }
  .hero__right{ grid-area: right; align-self: start; }

  .hero__title{ font-size: clamp(1.8rem, 5vw, 3.2rem); }
  .hero__left .logo{ width: clamp(150px, 30vw, 280px); }

  .ilustracion-general{ max-height: 76vh; }
  .menu{
    gap: 1.6rem;
    margin-right: 1rem;
    margin-top: 0;
  }
  .menu-icon.lg{ width: 84px; }
  .btn{ font-size: .95rem; padding: .75rem 1.6rem; }

  .reveal{ padding: clamp(20px, 4vw, 40px); }
  .reveal__grid{
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(16px, 3.5vw, 32px);
    max-height: none;
  }
  .feature-illust{ width: clamp(320px, 42vw, 480px); transform: translateX(-12px); }
  .col--text h2{ font-size: clamp(26px, 4.2vw, 42px); }
  .col--text p{ font-size: clamp(15px, 1.8vw, 18px); }
  .btn--download{ font-size: clamp(13px, 1.6vw, 16px); }
}

/* =========================================================
   ≤ 768px
========================================================= */
@media (max-width: 768px){
  :root{ --lake-h: 190px; }

  .hero__layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "center"
      "right";
    padding: 1.2rem 1rem;
    row-gap: 1.2rem;
  }
  .hero__left{
    margin-left: 0;
    padding-top: .4rem;
    text-align: left;
  }
  .hero__title{ font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .hero__left .logo{ width: clamp(140px, 44vw, 240px); }

  .illustrations{ height: auto; }
  .ilustracion-general{ max-height: 58vh; }

  .menu{
    align-items: flex-start;
    margin: .4rem 0 0 0;
    gap: 1rem;
  }
  .menu-item{ width: 100%; }
  .menu-icon.lg{ width: 72px; }
  .btn{ font-size: .95rem; padding: .7rem 1.4rem; }

  .menu-item.step-0 .menu-icon{ top:-60px; left:-10px; }
  .menu-item.step-1 .menu-icon{ top:-64px; right:-10px; }
  .menu-item.step-2 .menu-icon{ top:-60px; left:-12px; }
  .menu-item.step-3 .menu-icon{ top:-64px; right:-12px; }
  .menu-item.step-4 .menu-icon{ top:-42px; left:-10px; }
  .menu-item.step-5 .menu-icon{ top:-64px; right:-10px; }

  .reveal{ padding: clamp(16px, 5vw, 28px); }
  .reveal__grid{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;  
    gap: clamp(14px, 4vw, 22px);
  }
  .col--image{ justify-content: center; }
  .feature-illust{
    width: min(74vw, 520px);
    max-height: 48vh;
    transform: none;
  }
  .col--text h2{ font-size: clamp(24px, 6.4vw, 36px); }
  .col--text p{ font-size: clamp(15px, 2.3vw, 17px); }
  .btn--download{ font-size: clamp(13px, 2.2vw, 16px); }

  .book__cover{ width: clamp(240px, 55vw, 400px); }
}

/* ===========================
   MODO MÓVIL (≤ 600px)
=========================== */
@media (max-width: 600px){

  :root{ --lake-h: 120px; }

  .hero__layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "center"
      "right";
    row-gap: 1.5rem;
    padding: 12px;
    justify-items: center;  
    text-align: center;
    min-height: calc(100svh - 56px);
  }
  .hero__left{
    margin: 0;
    padding-top: .5rem;
    text-align: center;
  }
  .hero__title{
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    margin: 0;
  }
  .hero__left .logo{
    width: clamp(140px, 42vw, 220px);
    margin: 1rem auto 0;
  }

  .hero__center{ grid-area: center; }
  .ilustracion-general{
    max-height: 55vh; 
    width: auto;
  }

  .hero__right{ grid-area: right; width: 100%; }

  /* ===== MENÚ ===== */
  .menu-icon{ display: none !important; }  

  .menu{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 auto;
    width: 100%;
    justify-items: stretch;
  }
  .menu-item{ 
    width: 100%; 
    margin: 0 !important; 
  }

  .btn{
    width: 100%;
    padding: .6rem .8rem;
    font-size: .9rem;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 2px 2px 0 #2A3A1C;
  }
  .btn--wide{ padding-left: .8rem; padding-right: .8rem; }
  .btn--flip{ transform: none !important; }
  .btn--flip:hover, .btn--flip:focus-visible{ transform:none !important; }


  .shore{ z-index: 1; }
}
/* ===========================
   MÓVILES PEQUEÑOS (≤ 480px)
=========================== */
@media (max-width: 480px){

  html, body{
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }

  section.hero,
  section.reveal{
    height: auto;        
    min-height: 100svh;  
    overflow: visible;    
    display: flex;        
    flex-direction: column;
  }

  .hero__cta{ margin-top: auto; padding-bottom: env(safe-area-inset-bottom); }

  .slides, .page { scroll-snap-type: none; }
  section.hero, section.reveal { scroll-snap-align: auto; }
  
  /* más espacio visible: lago más bajito */
  :root{
    --lake-h: 160px;
    --shore-h: 180px;
  }
  .book__cover{ width: clamp(220px, 80vw, 380px); }
  /* layout hero en una columna (título, ilustración, menú) */
  .hero__layout{
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    row-gap: 16px;
    padding: 12px;
    height: 100%;
    text-align: center;               
  }
  .hero__left{
    align-self: center ;
    justify-self: center;
    margin-left: 0;
    padding-top: 4px;
    text-align: center;
  }
  .hero__center{ grid-area: center; }
  .hero__right{ grid-area: right; align-self: start; }

  .hero__title{ font-size: clamp(3rem, 8.8vw, 1rem); }
  .hero__left .logo{ width: clamp(250px, 42vw, 180px); }

  .ilustracion-general{ max-height: 44vh; }

  /* ===== MENÚ ===== */
  .menu-icon{ display: none !important; }

  .menu{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: 12px;
    row-gap: 10px;
    margin: 6px 0 0 0;
    justify-items: stretch;
    align-items: center;
  }
  .menu-item{
    width: 100%;
    margin: 0 !important;  
  }

  .btn{
    width: 100%;
    padding: .55rem .8rem;
    font-size: .84rem;
    border-radius: 10px;
    box-shadow: 2px 2px 0 #2A3A1C;
    text-align: center;
    white-space: nowrap;
  }
  .btn--wide{ padding-left: .8rem; padding-right: .8rem; }
  .btn--flip{ transform: none !important; }
  .btn--flip:hover, .btn--flip:focus-visible{ transform:none !important; }
  .shore{ z-index: 1; }
}

/* ===========================
   EXTRA COMPACTO (≤ 360px)
=========================== */
@media (max-width: 360px){
  :root{ --lake-h: 110px; }
  .ilustracion-general{ max-height: 40vh; }
  .btn{ font-size: .8rem; padding: .5rem .7rem; }
}