/* ── NOISE & PARTICLES ── */
#noise{position:fixed;inset:0;z-index:5;opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px;}

/* ── RESET & VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;}
:root{
  --accent:#2805FF;
  --y:var(--accent);
  --blk:#0a0a12;
  --wht:#ffffff;
  --surface:#ffffff;
  --muted:rgba(40,5,255,.45);
  --border:rgba(40,5,255,.18);
  --red:#ff2200;
}
html,body{width:100%;height:100%;background:var(--surface);cursor:default;font-family:'Arial Black','Arial Bold',Gadget,sans-serif;color:var(--accent);}
body{overflow-y:auto;display:flex;flex-direction:column;min-height:100vh;}

/* ── HEADER ──
   Solo el logo tlrc: cambia la altura en .fp-logo img (height / clamp).
   El menú Draw·News·Play·Store usa .fp-nav a (no toques si solo quieres el logo). */
.fp-head{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.55rem 2.75rem 1.6rem;background:rgba(255,255,255,.98);border-bottom:none;backdrop-filter:blur(8px);}
.fp-nav{display:flex;gap:clamp(4rem,12vw,10rem);}
.fp-nav--left{justify-self:center;}
.fp-nav--right{justify-self:center;}
.fp-nav a{font-family:'Arial Black','Arial Bold',Gadget,sans-serif;font-size:clamp(.82rem,1.35vw,1.05rem);letter-spacing:.1em;text-transform:none;color:var(--accent);text-decoration:none;transition:transform .2s ease,color .2s,opacity .2s;display:inline-block;}
.fp-nav a:hover{transform:scale(1.06);opacity:.88;}
.fp-nav a.active{transform:scale(1.06);opacity:1;}
.fp-logo-link{display:block;text-decoration:none;cursor:pointer;}
.fp-logo{margin:0;text-align:center;line-height:1;}
/* Logo tlrc un poco más grande que el layout original; baja el max (ej. 3.5rem) si lo quieres menor */
.fp-logo img{height:clamp(3.15rem,7.8vw,4.85rem);width:auto;display:block;}

/* ── MAIN CONTENT ── */
.fp-main{flex:1;display:flex;flex-direction:column;justify-content:center;}
.fp-rails{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0;margin:0;}
.fp-subpage-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;}
.fp-subpage-content img:not(.img-underconstruction){max-width:clamp(180px,40vw,420px);width:100%;height:auto;object-fit:contain;}
/* Under construction: casi toda la ventana (por encima del estilo genérico de .fp-subpage-content img) */
.fp-subpage-content--under-construction{
  flex:1;
  width:100%;
  min-height:calc(100vh - 10rem);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(0.25rem,1.5vw,0.75rem) 1vw;
  box-sizing:border-box;
}
img.img-underconstruction{
  display:block !important;
  width:min(96vw,2600px) !important;
  max-width:96vw !important;
  height:auto !important;
  max-height:min(90vh,2400px) !important;
  object-fit:contain;
}
.secret-content.secret-content--under-construction{align-items:center;justify-content:center;padding:1vw;}
.secret-content--under-construction img.img-underconstruction{
  width:min(96vw,2600px) !important;
  max-width:96vw !important;
  max-height:min(92vh,2400px) !important;
}

/* ── STRIP ── */
.fp-strip{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:0;scrollbar-width:none;}
.fp-strip::-webkit-scrollbar{display:none;}
.fp-rails{position:relative;}
.fp-arrow{position:absolute;top:0;bottom:0;width:clamp(36px,4vw,56px);z-index:20;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(255,255,255,.92),transparent);border:none;cursor:pointer;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.fp-arrow--right{background:linear-gradient(270deg,rgba(255,255,255,.92),transparent);}
.fp-arrow.visible{opacity:1;pointer-events:all;}
.fp-arrow--left{left:0;}
.fp-arrow--right{right:0;}
.fp-arrow svg{width:clamp(18px,2.5vw,30px);height:clamp(18px,2.5vw,30px);stroke:rgba(40,5,255,.45);stroke-width:2.5;fill:none;transition:stroke .2s;filter:drop-shadow(0 0 2px rgba(255,255,255,.8));}
.fp-arrow:hover svg{stroke:var(--accent);}
.fp-window{flex:0 0 clamp(160px,22vw,280px);aspect-ratio:1;position:relative;display:block;border:2px solid var(--accent);text-decoration:none;color:var(--accent);cursor:pointer;overflow:hidden;transition:border-color .2s;}
.fp-window:hover{border-color:#000;}
.fp-window-art{position:absolute;inset:0;background:var(--art) center/cover no-repeat #eef0ff;}
.fp-window-shade{position:absolute;inset:0;background:#fff;opacity:1;transition:opacity .38s ease;pointer-events:none;}
.fp-window:hover .fp-window-shade{opacity:0;}
.fp-window-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;text-align:center;line-height:1.5;opacity:1;transition:opacity .28s ease;z-index:2;pointer-events:none;color:var(--accent);}
.fp-window:hover .fp-window-title{opacity:0;}

/* ── TRAIN (hero banner) ── */
.fp-train{flex:0 0 auto;position:relative;height:clamp(200px,42vw,450px);min-width:100%;aspect-ratio:8.26;background:url('trainsideview.png') center/cover no-repeat;}
/* Ventanas: mismo rectángulo que el tren (cover + center), apiladas; no bloquean clics */
.fp-train-ventanas{position:absolute;inset:0;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:cover;}
.fp-train-ventanas--base{z-index:2;background-image:url('ventanastren.png');}
.fp-train-ventanas--book1{z-index:3;background-image:url('ventanastrenbook1.png');opacity:0;transition:opacity .25s ease;}
.fp-train:has(.fp-train-win--book1:hover) .fp-train-ventanas--book1,
.fp-train:has(.fp-train-win--book1:focus-visible) .fp-train-ventanas--book1,
.fp-train:has(.fp-train-win--book1:active) .fp-train-ventanas--book1{opacity:1;}
.fp-train-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(40,5,255,.06) 3px,rgba(40,5,255,.06) 4px);opacity:0;transition:opacity .12s ease;pointer-events:none;z-index:5;}
.fp-strip.scrolling .fp-train-lines{opacity:1;}
.fp-train-win{position:absolute;display:block;text-decoration:none;cursor:pointer;overflow:hidden;z-index:4;}
.fp-train-win-art{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .3s ease;}
.fp-train-win:hover .fp-train-win-art{opacity:1;}
.fp-train-win-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .3s ease;z-index:2;text-align:center;line-height:1.2;background:rgba(255,255,255,.82);pointer-events:none;}
.fp-train-win:hover .fp-train-win-label{opacity:1;}

.fp-train-book1-arrow{
  position:absolute;
  z-index:6;
  pointer-events:none;
  transform:translateX(-50%);
  color:#FFD400;
  animation:fp-book1-arrow-bounce .75s ease-in-out infinite;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.fp-train-book1-arrow svg{
  display:block;
  width:clamp(12px,1.85vw,18px);
  height:auto;
  vertical-align:top;
}
@keyframes fp-book1-arrow-bounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-7px);}
}

/* ── MUSIC MODAL ── */
#music-modal{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease;}
#music-modal.show{opacity:1;pointer-events:all;}
#music-modal-box{padding:2rem 2.2rem;max-width:320px;width:90%;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,248,255,.99));box-shadow:0 14px 40px rgba(40,5,255,.12),inset 0 0 0 1px var(--border);}
#music-modal-title{font-family:'Arial Black','Arial Bold',Gadget,sans-serif;font-size:.65rem;color:rgba(40,5,255,.88);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.4rem;text-align:center;}
.music-platforms{display:flex;flex-direction:column;gap:.7rem;}
.music-platform{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;border:1px solid var(--border);background:transparent;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s;}
.music-platform:hover{border-color:var(--accent);background:rgba(40,5,255,.06);}
.music-platform svg{width:24px;height:24px;flex-shrink:0;}
.music-platform span{font-family:'Arial Black','Arial Bold',Gadget,sans-serif;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(40,5,255,.85);}
.music-platform:hover span{color:var(--accent);}

/* ── BOOK DETAIL ── */
.book-detail{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem 2rem;gap:clamp(2rem,5vw,5rem);}
.book-cover{position:relative;flex-shrink:0;width:clamp(200px,28vw,360px);aspect-ratio:1;border:none;cursor:pointer;overflow:hidden;transition:transform .2s;}
.book-cover:hover{transform:scale(1.03);}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.book-info{max-width:420px;display:flex;flex-direction:column;gap:1.2rem;}
.book-title{font-size:clamp(1.2rem,3vw,2rem);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);}
.book-desc{font-family:Arial,Helvetica,sans-serif;font-size:clamp(.65rem,1.3vw,.82rem);line-height:1.9;letter-spacing:.06em;color:rgba(40,5,255,.5);}
.book-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem;}
.book-link{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-decoration:none;border:1px solid rgba(40,5,255,.35);padding:.5em 1.2em;transition:background .15s,border-color .15s;}
.book-link:hover{background:rgba(40,5,255,.08);border-color:var(--accent);}
@media(max-width:768px){
  .book-detail{flex-direction:column;text-align:center;padding:1.5rem 1.2rem;gap:1.5rem;}
  .book-cover{width:clamp(180px,55vw,280px);}
  .book-info{align-items:center;}
  .book-links{justify-content:center;}
}

/* ── FOOTER: Arial Black en copyright; iconos = solo anillo (borde), sin punto central ── */
.fp-foot{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;column-gap:clamp(.65rem,2.2vw,1.5rem);row-gap:.4rem;padding:1.45rem 2.75rem 1.55rem;border-top:1px solid rgba(40,5,255,.22);margin-top:auto;background:var(--surface);}
.fp-foot-side{display:flex;align-items:center;justify-content:center;min-height:clamp(1.65rem,3.5vw,2rem);}
.fp-foot-side--left{justify-self:start;}
.fp-foot-side--right{justify-self:end;}
.fp-foot-copy{grid-column:2;justify-self:center;margin:0;padding:0;max-width:min(96vw,40rem);text-align:center;font-family:'Arial Black','Arial Bold',Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(12px,1.45vw,15px);line-height:1.3;letter-spacing:.05em;color:var(--accent);-webkit-font-smoothing:antialiased;text-shadow:0.35px 0 0 currentColor,-0.35px 0 0 currentColor,0 0.35px 0 currentColor,0 -0.35px 0 currentColor;}
.fp-foot-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:clamp(1.15rem,3.2vw,1.5rem);height:clamp(1.15rem,3.2vw,1.5rem);border-radius:50%;border:clamp(4px,0.55vw,6px) solid var(--accent);background:transparent;box-sizing:border-box;text-decoration:none;transition:opacity .2s,transform .15s;opacity:.9;}
.fp-foot-icon:hover{opacity:1;transform:scale(1.06);}
.fp-foot-icon:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ── STRIP SHAKE ── */
@keyframes strip-shake-right{
  0%{transform:translateX(0);}
  20%{transform:translateX(6px);}
  40%{transform:translateX(-4px);}
  60%{transform:translateX(2px);}
  80%{transform:translateX(-1px);}
  100%{transform:translateX(0);}
}
@keyframes strip-shake-left{
  0%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-2px);}
  80%{transform:translateX(1px);}
  100%{transform:translateX(0);}
}
.fp-strip.shake-right{animation:strip-shake-right .35s ease;}
.fp-strip.shake-left{animation:strip-shake-left .35s ease;}

/* ── MOBILE / TOUCH ── */
@media(hover:none){
  .fp-window-shade{opacity:0;}
  .fp-window-title{opacity:0;}
  .fp-window:active{border-color:#000;transform:scale(.97);transition:transform .1s;}
  .fp-train-win-art{opacity:0;}
  .fp-train-win-label{opacity:0;}
  .fp-train-win:active .fp-train-win-art{opacity:1;}
  .fp-train-win:active .fp-train-win-label{opacity:1;}
  .music-platform:active{border-color:var(--accent);background:rgba(40,5,255,.06);}
  .music-platform:active span{color:var(--accent);}
}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .fp-head{padding:1.1rem 1.15rem 1.15rem;}
  .fp-nav{gap:1.35rem;}
  .fp-nav a{font-size:clamp(.62rem,2.8vw,.78rem);letter-spacing:.06em;}
  .fp-logo img{height:clamp(2.2rem,8.5vw,2.85rem);}
  .fp-rails{padding:0;}
  .fp-strip{gap:0;padding:0;}
  .fp-window{flex:0 0 clamp(130px,40vw,200px);}
  .fp-window-title{font-size:.7rem;letter-spacing:.12em;padding:.6rem;}
  .fp-train{height:clamp(100px,26vw,180px);}
  .fp-train-win-label{font-size:.4rem;letter-spacing:.08em;}
  .fp-foot{padding:1.1rem 1.1rem 1.2rem;column-gap:.45rem;}
  .fp-foot-copy{font-size:clamp(10px,3.1vw,12px);letter-spacing:.04em;}
  .fp-foot-icon{width:clamp(1.05rem,3.8vw,1.3rem);height:clamp(1.05rem,3.8vw,1.3rem);border-width:clamp(3px,0.65vw,5px);}
  .fp-foot-side--left,.fp-foot-side--right{min-width:1.4rem;}
  #music-modal-box{padding:1.6rem 1.4rem;max-width:90%;}
  #music-modal-title{font-size:.58rem;}
  .music-platform{padding:.6rem .8rem;gap:.8rem;}
  .music-platform svg{width:20px;height:20px;}
  .music-platform span{font-size:.5rem;}
  .fp-subpage-content--under-construction{min-height:calc(100vh - 8.5rem);padding:0.2rem 0.5vw;}
  img.img-underconstruction{width:98vw!important;max-width:98vw!important;max-height:88vh!important;}
}

@media(max-width:380px){
  .fp-window{flex:0 0 clamp(110px,42vw,170px);}
  .fp-strip{gap:0;padding:0;}
  .fp-train{height:clamp(80px,24vw,140px);}
  .fp-train-win-label{font-size:.32rem;}
  .fp-head{padding:.95rem .85rem 1rem;}
  .fp-logo img{height:clamp(1.95rem,9.5vw,2.55rem);}
  .fp-nav a{font-size:.58rem;}
  .fp-foot{padding:1rem .85rem 1.05rem;}
  .fp-foot-copy{font-size:clamp(9px,3.2vw,11px);}
}