/* =========================================================
   STORY.CSS · LIBRO DE RECUERDOS PREMIUM
   Estructura compatible con el index actual
========================================================= */

#storyExperience{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none !important;
  overflow:hidden !important;
  background:
    linear-gradient(rgba(250,245,236,.72),rgba(250,245,236,.72)),
    url("../img/story/book-cover.png") center/cover no-repeat !important;
}

#storyExperience.is-open{ display:block !important; }

#storyExperience .story-experience-shell{
  position:relative !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
}

#storyExperience .story-screen{
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
}

#storyExperience .story-screen.is-active{ display:block !important; }

/* PORTADA */
#storyExperience .story-cover-hero{
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  cursor:pointer !important;
}

#storyExperience .story-cover-hero img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

#storyExperience.is-cover .story-experience-controls{ display:none !important; }

/* LIBRO ABIERTO */
#storyExperience .story-screen.story-spread.is-active{
  display:grid !important;
  place-items:center !important;
  padding:36px 22px 74px !important;
}

#storyExperience .story-spread-inner{
  position:relative !important;
  width:min(1240px,94vw) !important;
  height:min(720px,calc(100vh - 108px)) !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  overflow:visible !important;
  filter:drop-shadow(0 34px 55px rgba(58,38,25,.30)) !important;
}

/* tapa antigua visible */
#storyExperience .story-spread-inner::before{
  content:"" !important;
  position:absolute !important;
  inset:-28px -30px -34px !important;
  border-radius:42px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(135deg,#c6aa7a,#8b6645 58%,#62452f) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,245,220,.28),
    inset 0 0 0 12px rgba(80,52,32,.10),
    0 40px 85px rgba(45,28,18,.34) !important;
  z-index:0 !important;
}

/* hojas apiladas abajo */
#storyExperience .story-spread-inner::after{
  content:"" !important;
  position:absolute !important;
  left:42px !important;
  right:42px !important;
  bottom:-24px !important;
  height:42px !important;
  border-radius:0 0 32px 32px !important;
  background:
    repeating-linear-gradient(
      to bottom,
      #f8ecd7 0 3px,
      #d7bea0 4px 5px,
      #fff4e2 6px 8px
    ) !important;
  box-shadow:0 18px 32px rgba(65,42,26,.24) !important;
  z-index:1 !important;
}

/* páginas */
#storyExperience .story-spread-left,
#storyExperience .story-spread-right{
  position:relative !important;
  overflow:hidden !important;
  min-width:0 !important;
  height:100% !important;
  z-index:3 !important;
  border:1px solid rgba(151,112,62,.22) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.72), transparent 38%),
    radial-gradient(circle at 80% 90%, rgba(221,184,130,.18), transparent 44%),
    linear-gradient(135deg,#fff9ee,#ead6b8) !important;
}

/* textura fina papel */
#storyExperience .story-spread-left::before,
#storyExperience .story-spread-right::before{
  content:"" !important;
  position:absolute !important;
  inset:22px !important;
  border:1px solid rgba(181,142,58,.18) !important;
  border-radius:24px !important;
  pointer-events:none !important;
  z-index:8 !important;
  background:
    linear-gradient(120deg, transparent 0 47%, rgba(151,112,62,.035) 48% 49%, transparent 50%),
    linear-gradient(40deg, transparent 0 48%, rgba(255,255,255,.18) 49%, transparent 50%) !important;
  background-size:120px 120px !important;
}

#storyExperience .story-spread-left{
  border-radius:34px 10px 10px 34px !important;
  padding:46px 54px !important;
  box-shadow:
    inset -70px 0 95px rgba(74,48,29,.18),
    inset -18px 0 26px rgba(74,48,29,.13) !important;
}

#storyExperience .story-spread-right{
  border-radius:10px 34px 34px 10px !important;
  padding:92px 72px 72px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  box-shadow:
    inset 70px 0 95px rgba(74,48,29,.18),
    inset 18px 0 26px rgba(74,48,29,.13) !important;
}

/* lomo real */
#storyExperience .story-spread-left::after{
  content:"" !important;
  position:absolute !important;
  top:-2px !important;
  right:-30px !important;
  width:60px !important;
  height:calc(100% + 4px) !important;
  background:
    linear-gradient(90deg,
      rgba(54,34,20,.32),
      rgba(255,255,255,.40),
      rgba(48,30,18,.38),
      rgba(255,255,255,.30),
      rgba(54,34,20,.28)
    ) !important;
  z-index:40 !important;
  pointer-events:none !important;
  box-shadow:
    -8px 0 18px rgba(54,34,20,.18),
    8px 0 18px rgba(54,34,20,.12) !important;
}

#storyExperience .story-spread-right::after{
  content:"" !important;
  position:absolute !important;
  top:28px !important;
  bottom:28px !important;
  left:0 !important;
  width:36px !important;
  background:linear-gradient(90deg, rgba(54,34,20,.20), transparent) !important;
  z-index:39 !important;
  pointer-events:none !important;
}

/* texto */
#storyExperience .story-copy-hand{
  position:relative !important;
  z-index:20 !important;
  max-width:480px !important;
  transform:translateY(-30px) !important;
}

#storyExperience .story-chapter{
  display:block !important;
  margin-bottom:12px !important;
  font-family:"Fraunces",serif !important;
  font-size:.76rem !important;
  letter-spacing:.30em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  color:#a98349 !important;
}

#storyExperience .story-copy-hand h2{
  margin:0 !important;
  font-family:"Alex Brush","Great Vibes",cursive !important;
  font-size:clamp(2.7rem,3.65vw,4.05rem) !important;
  line-height:.98 !important;
  font-weight:400 !important;
  color:#744f3a !important;
}

#storyExperience .story-copy-hand h2::after{
  content:"" !important;
  display:block !important;
  width:58% !important;
  height:9px !important;
  margin:14px 0 0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(204,122,106,.38),transparent) !important;
}

#storyExperience .story-copy-hand p{
  margin:24px 0 0 !important;
  max-width:430px !important;
  font-size:1rem !important;
  line-height:1.72 !important;
  color:rgba(74,50,36,.76) !important;
}

/* polaroids */
#storyExperience .story-polaroid{
  position:absolute !important;
  margin:0 !important;
  padding:12px 12px 50px !important;
  border-radius:16px !important;
  background:#fffdf8 !important;
  box-shadow:
    0 24px 46px rgba(70,45,28,.18),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#storyExperience .story-polaroid::before{ display:none !important; }

#storyExperience .story-polaroid::after{
  content:"A&E" !important;
  position:absolute !important;
  right:14px !important;
  bottom:14px !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:"Fraunces",serif !important;
  font-size:.7rem !important;
  color:#8b6048 !important;
  border:1px solid rgba(139,96,72,.35) !important;
  background:rgba(255,248,236,.76) !important;
}

#storyExperience .story-polaroid img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:10px !important;
}

#storyExperience .story-polaroid figcaption{
  position:absolute !important;
  left:12px !important;
  right:50px !important;
  bottom:13px !important;
  font-family:"Alex Brush","Great Vibes",cursive !important;
  font-size:1.55rem !important;
  color:#7a5942 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#storyExperience .story-polaroid-main{
  width:390px !important;
  height:500px !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) rotate(-4deg) !important;
}

#storyExperience .story-spread-collage .story-spread-left{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:1fr 1fr !important;
  gap:24px !important;
  padding:56px 54px 68px !important;
  align-items:center !important;
  justify-items:center !important;
}

#storyExperience .story-spread-collage .story-polaroid{
  position:relative !important;
  width:240px !important;
  height:230px !important;
}

#storyExperience .story-polaroid-tilt-a{
  grid-column:1 !important;
  grid-row:1 !important;
  transform:rotate(-5deg) !important;
}

#storyExperience .story-polaroid-tilt-b{
  grid-column:2 !important;
  grid-row:1 !important;
  transform:rotate(4deg) !important;
}

#storyExperience .story-polaroid-tilt-c{
  grid-column:1 / 3 !important;
  grid-row:2 !important;
  width:260px !important;
  transform:rotate(-2deg) !important;
}

#storyExperience .story-polaroid-video{
  width:430px !important;
  height:500px !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) rotate(-3deg) !important;
}

#storyExperience .story-polaroid-video video{
  position:absolute !important;
  left:12px !important;
  top:12px !important;
  width:calc(100% - 24px) !important;
  height:calc(100% - 74px) !important;
  object-fit:cover !important;
  border-radius:10px !important;
  background:#000 !important;
}

/* decoración */
#storyExperience .story-mountains{
  position:absolute !important;
  top:34px !important;
  left:50% !important;
  width:310px !important;
  height:92px !important;
  transform:translateX(-50%) !important;
  opacity:.44 !important;
  background:url("../img/story/mountains-premium.svg") center/contain no-repeat !important;
  z-index:3 !important;
}

#storyExperience .story-stamp{
  position:absolute !important;
  right:48px !important;
  top:42px !important;
  width:118px !important;
  height:118px !important;
  opacity:.58 !important;
  background:url("../img/story/stamp-premium.svg") center/contain no-repeat !important;
  font-size:0 !important;
  color:transparent !important;
  border:0 !important;
  z-index:4 !important;
}

#storyExperience .story-dry-flower{
  position:absolute !important;
  left:28px !important;
  bottom:126px !important;
  width:102px !important;
  height:205px !important;
  opacity:.34 !important;
  background:url("../img/story/botanical-premium.svg") center/contain no-repeat !important;
  z-index:2 !important;
}

#storyExperience .story-footpath{
  position:absolute !important;
  right:18px !important;
  bottom:72px !important;
  width:110px !important;
  height:270px !important;
  opacity:.28 !important;
  background:url("../img/story/footpath-premium.svg") center/contain no-repeat !important;
  z-index:2 !important;
}

#storyExperience .story-note-paper{
  position:absolute !important;
  right:60px !important;
  bottom:38px !important;
  z-index:18 !important;
  max-width:320px !important;
  min-width:250px !important;
  padding:16px 22px !important;
  border-radius:8px !important;
  border:1px solid rgba(181,142,58,.16) !important;
  background:repeating-linear-gradient(0deg,#f8ecd8 0 23px,#ead8be 24px 25px) !important;
  box-shadow:0 16px 32px rgba(70,45,28,.12) !important;
  font-family:"Alex Brush","Great Vibes",cursive !important;
  font-size:1.55rem !important;
  line-height:1.12 !important;
  color:#76573f !important;
  transform:rotate(-3deg) !important;
}

#storyExperience .story-note-paper::before{ display:none !important; }

#storyExperience .story-spread-left .story-paper-map::after{
  content:"" !important;
  position:absolute !important;
  right:36px !important;
  bottom:42px !important;
  width:78px !important;
  height:170px !important;
  background:url("../img/story/footprints-premium.svg") center/contain no-repeat !important;
  opacity:.23 !important;
  transform:rotate(-10deg) !important;
  z-index:3 !important;
}

/* =========================================================
   CONTROLES LIBRO · MINIMAL
========================================================= */

#storyExperience:not(.is-cover) .story-experience-controls{
  position:fixed !important;
  left:50% !important;
  bottom:24px !important;
  transform:translateX(-50%) !important;
  z-index:100004 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:16px !important;

  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

#storyExperience .story-experience-controls button{
  width:auto !important;
  height:auto !important;

  padding:0 !important;
  margin:0 !important;

  border:none !important;
  border-radius:0 !important;

  background:none !important;
  box-shadow:none !important;

  color:#8c6a4f !important;

  font-size:34px !important;
  font-weight:400 !important;
  line-height:1 !important;

  cursor:pointer !important;

  transition:.25s ease !important;
}

#storyExperience .story-experience-controls button:hover{
  color:#b07f63 !important;
  transform:scale(1.08) !important;
}

#storyExperience .story-experience-controls button:disabled{
  opacity:.25 !important;
}

#storyExperience .story-book-path{
  position:relative !important;

  width:120px !important;
  height:18px !important;

  flex:0 0 120px !important;

  background:none !important;
  pointer-events:none !important;
}

#storyExperience .story-book-path::before{
  content:"" !important;

  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;

  height:2px !important;

  transform:translateY(-50%) !important;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(150,118,78,.55) 0 8px,
      transparent 8px 15px
    ) !important;
}

/* móvil */
@media (max-width:760px){
  #storyExperience .story-screen.story-spread.is-active{
    padding:42px 12px 76px !important;
  }

  #storyExperience .story-spread-inner{
    width:94vw !important;
    height:calc(100vh - 116px) !important;
    grid-template-columns:1fr !important;
    overflow-y:auto !important;
  }

  #storyExperience .story-spread-left,
  #storyExperience .story-spread-right{
    min-height:50vh !important;
    border-radius:24px !important;
    padding:26px !important;
  }

  #storyExperience .story-spread-left::after,
  #storyExperience .story-spread-right::after{
    display:none !important;
  }

  #storyExperience .story-spread-right{
    align-items:center !important;
    text-align:center !important;
  }

  #storyExperience .story-copy-hand{ transform:none !important; }

  #storyExperience .story-polaroid-main,
  #storyExperience .story-polaroid-video{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(330px,90%) !important;
    height:420px !important;
    transform:rotate(-3deg) !important;
    margin:auto !important;
  }

  #storyExperience .story-note-paper,
  #storyExperience .story-mountains,
  #storyExperience .story-stamp,
  #storyExperience .story-dry-flower,
  #storyExperience .story-footpath{
    display:none !important;
  }
}
/* =========================================================
   FIX FINAL · COLLAGE NO INVADE LOMO + PASO SUAVE
========================================================= */

/* 1) Evitar que la foto derecha del collage monte sobre el centro */
#storyExperience .story-spread-collage .story-polaroid-tilt-b{
  transform:translateX(-26px) rotate(4deg) !important;
}

/* 2) Separar un poco más el collage del lomo */
#storyExperience .story-spread-collage .story-spread-left{
  padding-right:84px !important;
}

/* 3) Quitar efecto relámpago al pasar página */
#storyExperience .story-screen.is-active .story-spread-inner{
  animation:storySoftFade .32s ease both !important;
}

@keyframes storySoftFade{
  from{
    opacity:.88;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* =========================================================
   STORY · NOTA MANUSCRITA ROSA/ORO PREMIUM
========================================================= */

#storyExperience .story-note-paper{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.70), transparent 42%),
    linear-gradient(135deg, #fff1f4 0%, #f6d8df 48%, #ead0b0 100%) !important;

  border:1px solid rgba(181,142,58,.34) !important;

  box-shadow:
    0 16px 34px rgba(70,45,28,.14),
    inset 0 1px 0 rgba(255,255,255,.72) !important;

  color:#744f3a !important;

  padding:18px 24px 18px 58px !important;
}

/* sello/corazón lateral */
#storyExperience .story-note-paper::after{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  width:28px !important;
  height:28px !important;
  transform:translateY(-50%) rotate(-8deg) !important;
  opacity:.72 !important;
  background:
    url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%23b58e3a' stroke-width='3'/%3E%3Cpath d='M32 45 C20 36 15 30 18 23 C21 17 29 18 32 24 C35 18 43 17 46 23 C49 30 44 36 32 45Z' fill='%23c78b98' opacity='.9'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
}

/* versión final un poco más solemne */
#storyExperience .story-spread-final .story-note-paper{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.76), transparent 42%),
    linear-gradient(135deg, #fff5f7 0%, #f3d3db 42%, #e5c18c 100%) !important;
}
/* Cierre suave del libro */
#storyExperience{
  transition:opacity .52s ease !important;
}

#storyExperience.is-closing{
  opacity:0 !important;
  pointer-events:none !important;
}
/* =========================================================
   PASO DE PÁGINA SUAVE · ÁLBUM PREMIUM
========================================================= */

#storyExperience .story-screen{
  opacity:0;
  transform:translateX(18px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.22,.61,.36,1);
}

#storyExperience .story-screen.is-active{
  opacity:1;
  transform:translateX(0);
}

/* página saliente */
#storyExperience .story-screen.story-leaving{
  opacity:0;
  transform:translateX(-24px);
}
/* =========================================================
   STORY · NUEVAS PLANTILLAS CAPÍTULOS I-VI
========================================================= */

/* CAPÍTULO I · doble foto */
#storyExperience .story-double-polaroid{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:430px !important;
  height:520px !important;
  transform:translate(-50%,-50%) !important;
  z-index:12 !important;
}

#storyExperience .story-polaroid-a{
  width:270px !important;
  height:350px !important;
  left:0 !important;
  top:8px !important;
  transform:rotate(-6deg) !important;
}

#storyExperience .story-polaroid-b{
  width:270px !important;
  height:350px !important;
  right:0 !important;
  bottom:8px !important;
  transform:rotate(5deg) !important;
}

/* CAPÍTULO III · collage con música */
#storyExperience .story-spread-music .story-spread-left{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:1fr 1fr !important;
  gap:24px !important;
  padding:56px 54px 68px !important;
  align-items:center !important;
  justify-items:center !important;
}

#storyExperience .story-spread-music .story-polaroid{
  position:relative !important;
  width:240px !important;
  height:245px !important;
}

#storyExperience .story-audio{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:50px !important;
  width:calc(100% - 28px) !important;
  height:30px !important;
  z-index:20 !important;
  opacity:.92 !important;
}

/* CAPÍTULO IV · invertido */
#storyExperience .story-spread-reverse .story-spread-left{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  padding:92px 72px 72px !important;
}

#storyExperience .story-spread-reverse .story-spread-right{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:1fr 1fr !important;
  gap:24px !important;
  padding:56px 70px 68px 54px !important;
  align-items:center !important;
  justify-items:center !important;
}

#storyExperience .story-spread-reverse .story-polaroid{
  position:relative !important;
  width:235px !important;
  height:230px !important;
}

/* CAPÍTULO V · collage libre */
#storyExperience .story-chaos-collage{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  z-index:12 !important;
}

#storyExperience .story-chaos-collage .story-polaroid{
  position:absolute !important;
}

#storyExperience .story-chaos-collage .p1{
  width:235px !important;
  height:285px !important;
  left:42px !important;
  top:28px !important;
  transform:rotate(-7deg) !important;
  z-index:4 !important;
}

#storyExperience .story-chaos-collage .p2{
  width:205px !important;
  height:245px !important;
  right:42px !important;
  top:76px !important;
  transform:rotate(5deg) !important;
  z-index:3 !important;
}

#storyExperience .story-chaos-collage .p3{
  width:210px !important;
  height:240px !important;
  left:34px !important;
  bottom:42px !important;
  transform:rotate(4deg) !important;
  z-index:2 !important;
}

#storyExperience .story-chaos-collage .p4{
  width:245px !important;
  height:285px !important;
  right:36px !important;
  bottom:28px !important;
  transform:rotate(-4deg) !important;
  z-index:5 !important;
}

/* textos algo más compactos en capítulos largos */
#storyExperience .story-spread-music .story-copy-hand h2,
#storyExperience .story-spread-reverse .story-copy-hand h2,
#storyExperience .story-spread-chaos .story-copy-hand h2{
  font-size:clamp(2.45rem,3.3vw,3.75rem) !important;
}

/* evitar que collages invadan el lomo */
#storyExperience .story-spread-collage .story-polaroid-tilt-b,
#storyExperience .story-spread-music .story-polaroid-tilt-b,
#storyExperience .story-spread-reverse .story-polaroid-tilt-a{
  transform:translateX(-22px) rotate(4deg) !important;
}

/* móvil */
@media (max-width:760px){
  #storyExperience .story-double-polaroid{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:560px !important;
    transform:none !important;
    margin:auto !important;
  }

  #storyExperience .story-polaroid-a,
  #storyExperience .story-polaroid-b{
    width:245px !important;
    height:320px !important;
  }

  #storyExperience .story-spread-music .story-spread-left,
  #storyExperience .story-spread-reverse .story-spread-right{
    min-height:620px !important;
    padding:30px 22px !important;
  }

  #storyExperience .story-chaos-collage{
    min-height:680px !important;
  }
}
.story-polaroid{
  position:relative;
}

.story-music-chip{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;

  padding:10px 16px;

  border:none;
  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,250,250,.96),
      rgba(245,230,234,.96)
    );

  color:#8c5b62;

  font-family:inherit;
  font-size:.82rem;
  font-weight:600;

  cursor:pointer;

  box-shadow:
    0 10px 24px rgba(0,0,0,.08);

  transition:.25s ease;
}

.story-music-chip:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 28px rgba(0,0,0,.12);
}
.story-music-photo{
  cursor:pointer;
}
/* =========================================================
   CAMINO VISIBLE ENTRE FLECHAS
========================================================= */

#storyExperience .story-book-path{
  position:relative !important;
  width:120px !important;
  height:22px !important;
  flex:0 0 120px !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:none !important;
}

#storyExperience .story-book-path::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:2px !important;
  transform:translateY(-50%) !important;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(150,118,78,.65) 0 8px,
      transparent 8px 15px
    ) !important;
}

#storyExperience .story-book-path::after{
  content:"·· ·· ··" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-56%) rotate(-4deg) !important;

  font-size:18px !important;
  letter-spacing:5px !important;
  color:rgba(126,104,72,.72) !important;
  font-family:serif !important;
}
/* =========================================================
   STORY · FIRMA FINAL + MÓVIL DEFINITIVO
========================================================= */

#storyExperience .story-final-signature{
  position:relative !important;
  z-index:22 !important;
  margin-top:34px !important;
  align-self:center !important;
  text-align:center !important;
  color:#744f3a !important;
}

#storyExperience .story-final-signature strong{
  display:block !important;
  font-family:"Alex Brush","Great Vibes",cursive !important;
  font-size:clamp(2.4rem,3.5vw,3.8rem) !important;
  font-weight:400 !important;
  line-height:1 !important;
}

#storyExperience .story-final-signature span{
  display:block !important;
  margin-top:8px !important;
  font-family:"Fraunces",serif !important;
  font-size:.86rem !important;
  letter-spacing:.28em !important;
  font-weight:700 !important;
  color:#a98349 !important;
}

/* Última página un poco más especial */
#storyExperience .story-spread-final .story-polaroid-main{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.045) !important;
}

/* MÓVIL REAL */
@media (max-width:760px){

  #storyExperience .story-screen.story-spread.is-active{
    padding:18px 10px 72px !important;
    overflow:hidden !important;
  }

  #storyExperience .story-spread-inner{
    width:94vw !important;
    height:calc(100vh - 92px) !important;
    display:block !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:26px !important;
  }

  #storyExperience .story-spread-inner::before,
  #storyExperience .story-spread-inner::after{
    display:none !important;
  }

  #storyExperience .story-spread-left,
  #storyExperience .story-spread-right{
    width:100% !important;
    min-height:auto !important;
    height:auto !important;
    border-radius:24px !important;
    padding:24px 22px !important;
    box-shadow:none !important;
  }

  #storyExperience .story-spread-left{
    min-height:430px !important;
  }

  #storyExperience .story-spread-right{
    min-height:auto !important;
    padding-top:34px !important;
    padding-bottom:38px !important;
    align-items:center !important;
    text-align:center !important;
  }

  #storyExperience .story-copy-hand{
    max-width:100% !important;
    transform:none !important;
  }

  #storyExperience .story-copy-hand h2{
    font-size:clamp(2.15rem,12vw,3.05rem) !important;
    line-height:1.02 !important;
  }

  #storyExperience .story-copy-hand p{
    font-size:.95rem !important;
    line-height:1.58 !important;
    margin-top:18px !important;
  }

  #storyExperience .story-note-paper{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin:24px auto 0 !important;
    max-width:92% !important;
    min-width:0 !important;
    font-size:1.34rem !important;
    line-height:1.12 !important;
    transform:rotate(-2deg) !important;
  }

  #storyExperience .story-double-polaroid{
    height:430px !important;
  }

  #storyExperience .story-polaroid-a,
  #storyExperience .story-polaroid-b{
    width:220px !important;
    height:285px !important;
  }

  #storyExperience .story-polaroid-b{
    right:4px !important;
    bottom:18px !important;
  }

  #storyExperience .story-spread-collage .story-spread-left,
  #storyExperience .story-spread-music .story-spread-left,
  #storyExperience .story-spread-reverse .story-spread-right{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    min-height:auto !important;
    padding:24px 18px !important;
  }

  #storyExperience .story-spread-collage .story-polaroid,
  #storyExperience .story-spread-music .story-polaroid,
  #storyExperience .story-spread-reverse .story-polaroid{
    width:145px !important;
    height:175px !important;
  }

  #storyExperience .story-polaroid-tilt-c{
    grid-column:1 / 3 !important;
    width:170px !important;
  }

  #storyExperience .story-chaos-collage{
    min-height:460px !important;
  }

  #storyExperience .story-chaos-collage .p1{
    width:170px !important;
    height:215px !important;
    left:8px !important;
    top:8px !important;
  }

  #storyExperience .story-chaos-collage .p2{
    width:155px !important;
    height:200px !important;
    right:8px !important;
    top:52px !important;
  }

  #storyExperience .story-chaos-collage .p3{
    width:155px !important;
    height:200px !important;
    left:12px !important;
    bottom:18px !important;
  }

  #storyExperience .story-chaos-collage .p4{
    width:175px !important;
    height:220px !important;
    right:8px !important;
    bottom:0 !important;
  }

  #storyExperience .story-polaroid-main{
    width:min(300px,86vw) !important;
    height:390px !important;
  }

  #storyExperience .story-spread-final .story-polaroid-main{
    transform:rotate(-2deg) scale(1) !important;
  }

  #storyExperience .story-final-signature{
    margin-top:24px !important;
  }

  #storyExperience .story-final-signature strong{
    font-size:2.7rem !important;
  }

  #storyExperience .story-experience-controls{
    bottom:18px !important;
  }
}
/* =========================================================
   STORY · MÓVIL DEFINITIVO EN SCROLL VERTICAL
========================================================= */

@media (max-width:760px){

  #storyExperience{
    overflow:auto !important;
  }

  #storyExperience .story-experience-shell,
  #storyExperience .story-screen{
    height:100dvh !important;
    overflow:hidden !important;
  }

  #storyExperience .story-screen.story-spread.is-active{
    display:block !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #storyExperience .story-spread-inner{
    width:100vw !important;
    height:100dvh !important;
    display:block !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:18px 14px 92px !important;
    border-radius:0 !important;
    filter:none !important;
    background:
      linear-gradient(rgba(250,245,236,.72),rgba(250,245,236,.72)),
      url("../img/story/book-cover.png") center/cover no-repeat !important;
  }

  #storyExperience .story-spread-inner::before,
  #storyExperience .story-spread-inner::after,
  #storyExperience .story-spread-left::after,
  #storyExperience .story-spread-right::after{
    display:none !important;
  }

  #storyExperience .story-spread-left,
  #storyExperience .story-spread-right{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:26px !important;
    padding:24px 18px !important;
    margin:0 0 16px !important;
    box-shadow:
      0 18px 36px rgba(70,45,28,.14),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
    overflow:visible !important;
  }

  #storyExperience .story-spread-right{
    display:block !important;
    text-align:center !important;
  }

  #storyExperience .story-copy-hand{
    max-width:100% !important;
    transform:none !important;
    text-align:center !important;
  }

  #storyExperience .story-chapter{
    font-size:.68rem !important;
    letter-spacing:.24em !important;
    margin-bottom:10px !important;
  }

  #storyExperience .story-copy-hand h2{
    font-size:clamp(2.05rem,12vw,3rem) !important;
    line-height:1.05 !important;
  }

  #storyExperience .story-copy-hand h2::after{
    width:120px !important;
    height:7px !important;
    margin:14px auto 0 !important;
  }

  #storyExperience .story-copy-hand p{
    max-width:100% !important;
    margin:18px auto 0 !important;
    font-size:.96rem !important;
    line-height:1.62 !important;
  }

  #storyExperience .story-note-paper{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin:22px auto 0 !important;
    max-width:92% !important;
    min-width:0 !important;
    padding:16px 20px 16px 52px !important;
    font-size:1.28rem !important;
    line-height:1.12 !important;
    transform:rotate(-2deg) !important;
  }

  #storyExperience .story-mountains,
  #storyExperience .story-stamp,
  #storyExperience .story-dry-flower,
  #storyExperience .story-footpath{
    display:none !important;
  }

  #storyExperience .story-polaroid,
  #storyExperience .story-polaroid-main,
  #storyExperience .story-polaroid-video{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:min(285px,82vw) !important;
    height:350px !important;
    margin:0 auto 18px !important;
    transform:rotate(-2deg) !important;
  }

  #storyExperience .story-polaroid img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  #storyExperience .story-double-polaroid,
  #storyExperience .story-chaos-collage{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    transform:none !important;
  }

  #storyExperience .story-polaroid-a,
  #storyExperience .story-polaroid-b,
  #storyExperience .story-chaos-collage .p1,
  #storyExperience .story-chaos-collage .p2,
  #storyExperience .story-chaos-collage .p3,
  #storyExperience .story-chaos-collage .p4{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:min(285px,82vw) !important;
    height:350px !important;
    margin:0 auto 18px !important;
  }

  #storyExperience .story-polaroid-a{ transform:rotate(-4deg) !important; }
  #storyExperience .story-polaroid-b{ transform:rotate(3deg) !important; }
  #storyExperience .story-chaos-collage .p1{ transform:rotate(-4deg) !important; }
  #storyExperience .story-chaos-collage .p2{ transform:rotate(3deg) !important; }
  #storyExperience .story-chaos-collage .p3{ transform:rotate(-2deg) !important; }
  #storyExperience .story-chaos-collage .p4{ transform:rotate(2deg) !important; }

  #storyExperience .story-spread-collage .story-spread-left,
  #storyExperience .story-spread-music .story-spread-left,
  #storyExperience .story-spread-reverse .story-spread-right{
    display:block !important;
    padding:24px 18px !important;
  }

  #storyExperience .story-spread-collage .story-polaroid,
  #storyExperience .story-spread-music .story-polaroid,
  #storyExperience .story-spread-reverse .story-polaroid{
    width:min(285px,82vw) !important;
    height:350px !important;
  }

  #storyExperience .story-spread-reverse .story-spread-left{
    padding:28px 20px !important;
  }

  #storyExperience .story-final-signature{
    margin:22px auto 0 !important;
    text-align:center !important;
  }

  #storyExperience .story-final-signature strong{
    font-size:2.55rem !important;
  }

  #storyExperience .story-final-signature span{
    font-size:.78rem !important;
  }

  #storyExperience:not(.is-cover) .story-experience-controls{
    position:fixed !important;
    left:50% !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    background:rgba(255,248,236,.88) !important;
    backdrop-filter:blur(10px) !important;
  }

  #storyExperience .story-experience-controls button{
    font-size:32px !important;
  }

  #storyExperience .story-book-path{
    width:96px !important;
    flex-basis:96px !important;
  }
}
/* =========================================================
   STORY · MÓVIL ORDEN PRO: TEXTO ARRIBA + FOTOS DEBAJO
========================================================= */

@media (max-width:760px){

  #storyExperience .story-spread-inner{
    display:flex !important;
    flex-direction:column !important;
  }

  /* Capítulos normales: derecha = texto, izquierda = fotos */
  #storyExperience .story-spread:not(.story-spread-reverse) .story-spread-right{
    order:1 !important;
  }

  #storyExperience .story-spread:not(.story-spread-reverse) .story-spread-left{
    order:2 !important;
  }

  /* Capítulo IV reverse: izquierda = texto, derecha = fotos */
  #storyExperience .story-spread-reverse .story-spread-left{
    order:1 !important;
  }

  #storyExperience .story-spread-reverse .story-spread-right{
    order:2 !important;
  }

  /* La página final también: texto primero, foto después */
  #storyExperience .story-spread-final .story-spread-right{
    order:1 !important;
  }

  #storyExperience .story-spread-final .story-spread-left{
    order:2 !important;
  }

  /* Menos aire arriba en móvil */
  #storyExperience .story-spread-right,
  #storyExperience .story-spread-reverse .story-spread-left{
    margin-bottom:14px !important;
  }

  /* Aviso elegante en la foto musical */
  #storyExperience .story-music-photo::before{
    content:"Pulsa la foto para escuchar nuestra canción" !important;
    position:absolute !important;
    left:50% !important;
    top:12px !important;
    transform:translateX(-50%) !important;
    z-index:30 !important;

    width:max-content !important;
    max-width:82% !important;
    padding:8px 13px !important;

    border-radius:999px !important;
    background:rgba(255,248,236,.92) !important;
    border:1px solid rgba(181,142,58,.26) !important;
    box-shadow:0 10px 22px rgba(70,45,28,.14) !important;

    font-family:"Plus Jakarta Sans",sans-serif !important;
    font-size:.72rem !important;
    font-weight:600 !important;
    line-height:1.15 !important;
    color:#744f3a !important;
    text-align:center !important;
    pointer-events:none !important;
  }

  #storyExperience .story-music-photo::after{
    content:"♫" !important;
  }
}
/* =========================================================
   STORY · PORTADA MÓVIL COMPLETA SIN CORTAR NOMBRES
========================================================= */

@media (max-width:760px){

  #storyExperience.is-cover{
    background:
      linear-gradient(rgba(250,245,236,.34),rgba(250,245,236,.34)),
      #efe1cc !important;
  }

  #storyExperience .story-cover-hero{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:18px 14px !important;
    background:
      linear-gradient(rgba(250,245,236,.58),rgba(250,245,236,.58)),
      url("../img/story/book-cover.png") center/cover no-repeat !important;
  }

  #storyExperience .story-cover-hero img{
    width:100% !important;
    height:auto !important;
    max-height:calc(100dvh - 36px) !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:22px !important;
    box-shadow:0 22px 44px rgba(70,45,28,.22) !important;
  }
}
/* =========================================================
   STORY · FIX MÓVIL PORTADA ÚNICA + TEXTO SIEMPRE VISIBLE
========================================================= */

@media (max-width:760px){

  /* PORTADA: un solo libro, sin duplicado de fondo */
  #storyExperience.is-cover{
    background:#efe1cc !important;
  }

  #storyExperience.is-cover .story-cover-hero{
    padding:18px 12px !important;
    background:
      linear-gradient(rgba(250,245,236,.55),rgba(250,245,236,.55)),
      #efe1cc !important;
  }

  #storyExperience.is-cover .story-cover-hero img{
    width:min(94vw,430px) !important;
    height:auto !important;
    max-height:calc(100dvh - 42px) !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    border-radius:22px !important;
    box-shadow:0 22px 44px rgba(70,45,28,.22) !important;
  }

  /* Cada capítulo en móvil: texto arriba, fotos abajo, sin taparse */
  #storyExperience .story-screen.story-spread.is-active{
    height:100dvh !important;
    overflow:hidden !important;
  }

  #storyExperience .story-spread-inner{
    height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    padding:16px 12px 96px !important;
  }

  #storyExperience .story-spread-right,
  #storyExperience .story-spread-left{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    overflow:visible !important;
  }

  /* Texto primero en todos */
  #storyExperience .story-spread:not(.story-spread-reverse) .story-spread-right,
  #storyExperience .story-spread-reverse .story-spread-left,
  #storyExperience .story-spread-final .story-spread-right{
    order:1 !important;
    display:block !important;
    padding:28px 20px 30px !important;
    text-align:center !important;
    z-index:20 !important;
  }

  /* Fotos después en todos */
  #storyExperience .story-spread:not(.story-spread-reverse) .story-spread-left,
  #storyExperience .story-spread-reverse .story-spread-right,
  #storyExperience .story-spread-final .story-spread-left{
    order:2 !important;
    display:block !important;
    padding:24px 18px !important;
    z-index:10 !important;
  }

  #storyExperience .story-copy-hand{
    position:relative !important;
    z-index:30 !important;
    transform:none !important;
    max-width:100% !important;
    text-align:center !important;
  }

  #storyExperience .story-copy-hand h2{
    font-size:clamp(2rem,10.5vw,2.75rem) !important;
    line-height:1.08 !important;
    margin:0 !important;
  }

  #storyExperience .story-copy-hand p{
    display:block !important;
    margin:18px auto 0 !important;
    font-size:.96rem !important;
    line-height:1.62 !important;
    max-width:100% !important;
  }

  #storyExperience .story-note-paper{
    display:block !important;
    position:relative !important;
    margin:22px auto 0 !important;
    right:auto !important;
    bottom:auto !important;
    max-width:92% !important;
  }

  #storyExperience .story-polaroid,
  #storyExperience .story-polaroid-a,
  #storyExperience .story-polaroid-b,
  #storyExperience .story-polaroid-main,
  #storyExperience .story-chaos-collage .p1,
  #storyExperience .story-chaos-collage .p2,
  #storyExperience .story-chaos-collage .p3,
  #storyExperience .story-chaos-collage .p4{
    position:relative !important;
    width:min(285px,82vw) !important;
    height:350px !important;
    margin:0 auto 20px !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
  }
}
/* =========================================================
   STORY · PORTADA MÓVIL PREMIUM INTEGRADA
========================================================= */

@media (max-width:760px){

  #storyExperience.is-cover{
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.52), transparent 34%),
      linear-gradient(180deg,#f3e4d2 0%,#ead6bd 48%,#d7b991 100%) !important;
  }

  #storyExperience.is-cover .story-cover-hero{
    padding:0 !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.38), transparent 34%),
      linear-gradient(180deg,rgba(250,245,236,.70),rgba(234,214,189,.82)) !important;
  }

  #storyExperience.is-cover .story-cover-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:22px 18px !important;
    border-radius:30px !important;
    background:
      linear-gradient(rgba(250,245,236,.16),rgba(250,245,236,.16)),
      url("../img/story/book-cover.png") center/cover no-repeat !important;
    opacity:.42 !important;
    filter:blur(.2px) !important;
    box-shadow:inset 0 0 80px rgba(92,58,34,.18) !important;
  }

  #storyExperience.is-cover .story-cover-hero img{
    position:relative !important;
    z-index:2 !important;

    width:92vw !important;
    max-width:420px !important;
    height:auto !important;
    max-height:86dvh !important;

    object-fit:contain !important;
    object-position:center !important;

    border-radius:0 !important;
    box-shadow:none !important;

    filter:
      drop-shadow(0 26px 30px rgba(70,45,28,.22))
      drop-shadow(0 4px 8px rgba(70,45,28,.12)) !important;
  }

  #storyExperience.is-cover .story-cover-hero::after{
    content:"Toca para abrir nuestro libro" !important;
    position:absolute !important;
    left:50% !important;
    bottom:24px !important;
    transform:translateX(-50%) !important;
    z-index:3 !important;

    padding:9px 16px !important;
    border-radius:999px !important;

    background:rgba(255,248,236,.78) !important;
    border:1px solid rgba(181,142,58,.24) !important;
    box-shadow:0 10px 24px rgba(70,45,28,.12) !important;

    font-family:"Plus Jakarta Sans",sans-serif !important;
    font-size:.78rem !important;
    font-weight:600 !important;
    color:#744f3a !important;
    white-space:nowrap !important;
  }
}
/* =========================================================
   STORY · PORTADA MÓVIL FULLSCREEN ÚNICA
========================================================= */

@media (max-width:760px){

  #storyExperience.is-cover{
    background:#ead8bf !important;
  }

  #storyExperience.is-cover .story-cover-hero{
    padding:0 !important;
    background:
      linear-gradient(rgba(250,245,236,.18),rgba(250,245,236,.18)),
      url("../img/story/book-cover.png") center/cover no-repeat !important;
  }

  /* eliminamos la segunda portada superpuesta */
  #storyExperience.is-cover .story-cover-hero img{
    display:none !important;
  }

  #storyExperience.is-cover .story-cover-hero::before{
    display:none !important;
  }

  #storyExperience.is-cover .story-cover-hero::after{
    content:"Toca para abrir nuestro libro" !important;
    position:absolute !important;
    left:50% !important;
    bottom:28px !important;
    transform:translateX(-50%) !important;
    z-index:3 !important;

    padding:10px 18px !important;
    border-radius:999px !important;

    background:rgba(255,248,236,.82) !important;
    border:1px solid rgba(181,142,58,.24) !important;
    box-shadow:0 10px 24px rgba(70,45,28,.14) !important;

    font-family:"Plus Jakarta Sans",sans-serif !important;
    font-size:.78rem !important;
    font-weight:600 !important;
    color:#744f3a !important;
    white-space:nowrap !important;
  }
}