:root{
  --navy:#07346b;--navy2:#02284f;--blue:#0798d5;--yellow:#ffb61b;
  --pink:#ff5c91;--text:#234762;--muted:#637f93;--paper:#f7fcff;
  --shadow:0 22px 55px rgba(2,55,99,.15)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,"Trebuchet MS",sans-serif;color:var(--text);background:var(--paper)}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1280px,calc(100% - 36px));margin:auto}
.skip-link{position:fixed;top:-60px;left:20px;z-index:200;background:#fff;padding:12px 16px;border-radius:12px}.skip-link:focus{top:20px}

/* Navegación blanca independiente sobre el fondo azul */
.site-header{position:relative;z-index:100;padding-top:16px;background:#55cee5}
.nav-shell{min-height:78px;background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:0 16px 34px rgba(2,50,91,.18);display:flex;align-items:center;justify-content:space-between;padding:7px 16px 7px 22px}
.brand{height:64px;display:flex;align-items:center}
.brand img{width:138px;height:64px;object-fit:contain;filter:drop-shadow(0 7px 10px rgba(2,44,80,.18));transition:.22s}
.brand:hover img{transform:translateY(-2px)}
.main-menu{display:flex;align-items:center;gap:34px;font-weight:800;color:var(--navy)}
.main-menu>a:not(.button):hover{color:var(--blue)}
.menu-toggle{display:none;border:0;background:none;font-size:28px;color:var(--navy)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;border-radius:18px;font-weight:900;transition:.22s}
.button:hover{transform:translateY(-2px)}
.button-blue{background:linear-gradient(135deg,#14a5e5,#0575c9);color:#fff;box-shadow:0 10px 24px rgba(0,111,192,.25)}

/* Hero separado del menú, con espacio azul y esquinas redondeadas */
.hero{position:relative;overflow:hidden;background:#55cee5;padding:22px 0 0}
.hero-backdrop{display:none}
.hero:after{content:"";display:block;height:90px;background:linear-gradient(180deg,#e8f7fc,#fff)}
.hero-image{position:relative;width:min(1280px,calc(100% - 36px));margin:0 auto;border-radius:29px;box-shadow:0 24px 58px rgba(2,58,102,.20);object-fit:cover;display:block}

/* Secciones */
.section{padding:96px 0}
.section-heading{text-align:center;max-width:800px;margin:0 auto 44px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:900;color:var(--pink);margin:0 0 15px}
.section-heading h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;margin:0 0 16px;color:var(--navy);letter-spacing:-.035em}
.section-heading h2 span{color:var(--yellow)}
.section-heading>p:last-child{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:0}

/* Personajes: escenas oficiales completas y encuadre uniforme */
.characters{background:linear-gradient(180deg,#fff,#eefaff)}
.character-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.character-card{position:relative;overflow:hidden;background:#fff;border:1px solid #dcebf2;border-radius:22px;box-shadow:0 14px 34px rgba(3,55,100,.11);transition:.22s}
.character-card:hover{transform:translateY(-6px);box-shadow:0 23px 48px rgba(3,55,100,.18)}
.character-card img{width:100%;aspect-ratio:7/5;object-fit:contain;object-position:center;background:linear-gradient(180deg,#f8fdff,#eefaff);padding:5px}
.character-copy{position:relative;padding:19px 14px 22px;text-align:center;background:#fff}
.character-copy:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}
.character-card p{margin:0;line-height:1.48;color:#35556d;font-size:.79rem;font-weight:650}
.green{--accent:#25a844}.purple{--accent:#7d2fc4}.pink{--accent:#eb4076}.orange{--accent:#ef7915}.yellow{--accent:#f0b000}.blue{--accent:#166ec9}

/* Libros */
.published{background:#f8fcff}
.published-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.book-card{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #e3edf2;transition:.22s}
.book-card:hover{transform:translateY(-7px)}
.cover-wrap{padding:16px 16px 0;background:linear-gradient(180deg,#e8f8ff,#fff)}
.cover-wrap img{width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:17px;box-shadow:0 15px 28px rgba(4,54,99,.18)}
.book-body{padding:19px}
.book-body span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--pink)}
.book-body h3{min-height:62px;margin:8px 0 17px;color:var(--navy);font-size:1rem;line-height:1.35}
.book-body a{display:block;text-align:center;background:var(--blue);color:#fff;border-radius:15px;padding:12px;font-weight:900}

/* Próximamente */
.upcoming{background:linear-gradient(135deg,#044a89,#0ba7df)}
.section-heading.light h2,.section-heading.light>p:last-child{color:#fff}.section-heading.light .eyebrow{color:#bdf5ff}
.upcoming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.upcoming figure{position:relative;margin:0;padding:14px;background:rgba(255,255,255,.97);border-radius:25px;box-shadow:0 22px 45px rgba(0,30,72,.25);transition:.22s}
.upcoming figure:hover{transform:translateY(-6px)}
.upcoming figure img{width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:14px}
.upcoming figcaption{position:absolute;top:26px;right:26px;background:var(--yellow);color:var(--navy);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:9px 12px;border-radius:999px}

/* Colección */
.full-collection{background:#fff}
.collection-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.collection-strip img{width:100%;aspect-ratio:2/3;object-fit:contain;padding:8px;background:#f7fbfd;border:1px solid #e0eaf0;border-radius:18px;box-shadow:0 12px 28px rgba(3,55,100,.12);transition:.22s}
.collection-strip img:hover{transform:translateY(-5px)}

/* Pie con el logo final integrado y transparente */
footer{background:linear-gradient(180deg,#073969,#02284f);color:#fff;padding:34px 0}
.footer-grid{display:grid;grid-template-columns:205px 1fr auto;align-items:center;gap:30px}
.footer-grid img{width:205px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.footer-grid p{color:#c5e9f8}.footer-grid small{color:#a8d5e9}

@media(max-width:1100px){
 .character-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
 .main-menu{position:absolute;top:90px;left:18px;right:18px;display:none;flex-direction:column;background:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow)}
 .main-menu.open{display:flex}.menu-toggle{display:block}
 .published-grid{grid-template-columns:repeat(2,1fr)}
 .collection-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
 .container{width:min(100% - 20px,1280px)}
 .site-header{padding-top:8px}.nav-shell{min-height:66px;border-radius:20px}.brand{height:54px}.brand img{width:105px;height:54px}
 .hero{padding:14px 0 0}.hero-image{width:calc(100% - 20px);min-height:390px;border-radius:21px;object-fit:cover;object-position:center}.hero:after{height:55px}
 .section{padding:70px 0}
 .character-grid{grid-template-columns:repeat(2,1fr);gap:11px}
 .character-copy{padding:15px 9px 17px}.character-card p{font-size:.7rem}
 .published-grid,.upcoming-grid{grid-template-columns:1fr}
 .collection-strip{grid-template-columns:repeat(2,1fr);gap:12px}
 .footer-grid{grid-template-columns:1fr;text-align:center}.footer-grid img{margin:auto}
}
@media(max-width:420px){
 .character-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* VERSIÓN MEJORADA CON IMÁGENES NATURALES */
.natural-version{background:linear-gradient(180deg,#eefaff 0,#fff 30%,#f7fcff 100%)}
.natural-version .site-header{background:linear-gradient(180deg,#58cee5,#4ec9e1);padding-bottom:2px}
.natural-version .nav-shell{border-radius:26px;box-shadow:0 15px 38px rgba(0,63,109,.18)}
.natural-version .brand img{width:148px;filter:drop-shadow(0 8px 10px rgba(3,56,96,.2))}
.natural-version .hero{padding:20px 0 0;background:linear-gradient(180deg,#4ec9e1,#dff7fc)}
.natural-version .hero-image{width:min(1280px,calc(100% - 36px));aspect-ratio:16/10;object-fit:cover;object-position:center;border-radius:28px;box-shadow:0 28px 65px rgba(0,58,103,.24)}
.natural-version .hero:after{height:72px;background:linear-gradient(180deg,#e7f8fc 0,#fff 100%)}
.natural-version .section{padding-top:92px;padding-bottom:92px}
.natural-version .character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.natural-version .character-card{overflow:hidden;border:1px solid rgba(197,225,237,.9);border-radius:26px;background:#fff;box-shadow:0 18px 42px rgba(3,54,95,.12);transition:transform .25s ease,box-shadow .25s ease}
.natural-version .character-card:hover{transform:translateY(-7px);box-shadow:0 27px 58px rgba(3,54,95,.19)}
.natural-version .character-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:center;padding:0;background:#dff7ff}
.natural-version .character-copy{min-height:135px;padding:22px;text-align:left;background:#fff}
.natural-version .character-copy:before{display:none}
.natural-version .character-copy p{margin:0;color:#3e6178;font-size:.9rem;line-height:1.58;font-weight:650}
.natural-version .book-card img,.natural-version .product-book{filter:drop-shadow(0 19px 20px rgba(3,45,81,.20))}
.natural-version footer{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 0,rgba(34,165,210,.25),transparent 30%),linear-gradient(180deg,#073d70,#02254b)}
@media(max-width:1000px){.natural-version .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .natural-version .hero-image{width:calc(100% - 18px);aspect-ratio:4/5;border-radius:21px}
 .natural-version .character-grid{grid-template-columns:1fr}
 .natural-version .character-copy{min-height:0}
 .natural-version .brand img{width:118px}
}

/* NOMBRES INTEGRADOS EN LAS TARJETAS */
.character-visual{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#dff7ff;
}
.natural-version .character-visual img{
  width:100%;
  height:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center;
  display:block;
}
.character-name{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  min-width:118px;
  padding:10px 22px;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:1rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.05em;
  text-align:center;
  text-shadow:0 2px 3px rgba(0,0,0,.16);
  box-shadow:0 8px 20px rgba(2,42,77,.26);
}
@media(max-width:640px){
  .character-name{
    bottom:13px;
    min-width:105px;
    padding:9px 18px;
    font-size:.92rem;
  }
}

/* PACK DE 4 LIBROS — añadido sin cambiar el diseño original */
.pack-card{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:34px;
  align-items:center;
  margin:0 0 42px;
  padding:34px;
  border:1px solid rgba(197,225,237,.95);
  border-radius:28px;
  background:linear-gradient(135deg,#effbff,#fff8e8);
  box-shadow:0 20px 46px rgba(3,54,95,.13);
}
.pack-covers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
.pack-covers img{display:block;width:100%;border-radius:10px;box-shadow:0 14px 24px rgba(3,45,81,.18)}
.pack-copy{text-align:left}
.pack-copy h3{margin:.2rem 0 .7rem;color:#083f70;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05}
.pack-copy>p:not(.eyebrow){margin:0 0 18px;color:#46677d;font-weight:700;line-height:1.55}
.pack-price{display:flex;align-items:baseline;gap:14px;margin:0 0 20px}
.pack-price span{color:#8294a1;font-size:1.05rem;font-weight:800;text-decoration:line-through}
.pack-price strong{color:#ef6f38;font-size:2rem;font-weight:900}
.book-body a{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:10px 15px;border-radius:999px;background:#0797d5;color:#fff!important;font-weight:900;text-decoration:none;box-shadow:0 8px 18px rgba(7,151,213,.22)}
.book-body a:hover{transform:translateY(-2px)}
@media(max-width:850px){
  .pack-card{grid-template-columns:1fr;padding:24px}
  .pack-copy{text-align:center}
  .pack-price{justify-content:center}
}
@media(max-width:520px){
  .pack-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}