/* CLARIBELUCIA — estilos */
:root{
  --crema:#FDF9ED; --tinta:#202020; --linea:#E6DCC2; --mostaza:#9C7F1C;
  --amarillo:#F4D266; --subrayado:#D3B240; --campo:#FFFDF6; --borde:#D9CFB4;
  --margen:80px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:'Poppins',Helvetica,Arial,sans-serif;font-weight:300;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--mostaza)}
:focus-visible{outline:2px solid var(--mostaza);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Idiomas */
[data-lang="es"] .en,[data-lang="en"] .es{display:none!important}

/* Etiquetas en Poppins Bold espaciada */
.etiqueta{font-weight:700;font-size:10px;letter-spacing:.4em;text-transform:uppercase}
.boton{display:inline-block;font-weight:700;font-size:10px;letter-spacing:.4em;text-transform:uppercase;border-bottom:2px solid var(--subrayado);padding:10px 0 6px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:var(--tinta);font-family:inherit}

/* Encabezado */
.encabezado{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:22px var(--margen)}
.marca{display:flex;align-items:center;gap:16px;flex-shrink:0}
.marca .flor{width:42px;height:42px}
.marca .nombre{height:30px;width:auto}
.menu{display:flex;align-items:center;gap:18px;font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.menu-lista{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.icono{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.idiomas{display:flex;align-items:center;color:var(--linea)}
.idiomas button{height:44px;min-width:40px;background:none;border:0;cursor:pointer;font:700 9px 'Poppins',sans-serif;letter-spacing:.2em;color:var(--tinta)}
.idiomas button[aria-pressed="true"]{color:var(--mostaza);text-decoration:underline;text-underline-offset:6px}
.abrir-menu{display:none}

/* Portada */
.portada{position:relative;display:flex;align-items:center;min-height:760px}
.portada .retrato{width:700px;height:700px;margin-left:var(--margen);align-self:flex-start;background:var(--amarillo);display:flex;align-items:flex-end;overflow:hidden;flex-shrink:0}
.portada .retrato img{width:640px}
.portada .titular{flex:1;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 40px 60px}
.portada .titular img{width:540px}
.portada .titular p{margin:0;font-size:18px;letter-spacing:.08em}
.portada .lapiz{position:absolute;right:90px;bottom:30px;width:110px;pointer-events:none}

/* Secciones */
.seccion{padding:140px var(--margen) 0}
.titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--linea);padding-bottom:18px;margin-bottom:50px}
.titulo img{width:var(--w);height:auto}
.titulo.centrado{justify-content:center;border-bottom:0;margin-bottom:40px}
.ver-mas{margin-top:40px;text-align:right}

/* Libros */
.libros{display:flex;flex-direction:column;gap:80px}
.libro{display:grid;grid-template-columns:820px 1fr;gap:70px;align-items:center}
.libro>img{width:100%;height:480px;object-fit:contain;object-position:left center}
.libro h3{margin:0 0 16px;font-weight:700;font-size:12px;letter-spacing:.4em;text-transform:uppercase;line-height:1.8}
.libro p{margin:0 0 8px;font-size:14px}
.libro .acciones{display:flex;gap:30px;margin-top:18px}

/* Grillas */
.grilla{display:grid;gap:32px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grilla img{width:100%;height:var(--h,405px);object-fit:cover}
.grilla img.entera{object-fit:contain}
.personajes{display:flex;align-items:flex-end;justify-content:center;gap:44px;border-bottom:1px solid var(--linea)}
.personajes img{height:var(--h);width:auto;min-width:0;object-fit:contain}

/* Galería completa (páginas Ver más): columnas, sin recortar */
.galeria{columns:3;column-gap:28px}
.galeria figure{margin:0 0 28px;break-inside:avoid}
.galeria img{width:100%;height:auto;cursor:zoom-in}
.grupo{margin-bottom:90px}
.grupo h2{margin:0 0 24px;font-weight:700;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--mostaza)}

/* Proyectos (adelanto) */
.proyectos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.proyectos a{display:block}
.proyectos img{width:100%;height:320px;object-fit:cover;margin-bottom:14px}

/* Sobre mí */
.sobre{display:flex;flex-direction:column;gap:70px}
.sobre .fila{display:flex;gap:100px;align-items:flex-start}
.sobre .fila.centro{align-items:center}
.sobre .fila>img{width:470px;height:627px;object-fit:cover;flex-shrink:0}
.sobre .texto{max-width:580px;padding-top:40px}
.sobre .texto p{margin:18px 0 0;font-size:15px;line-height:1.75}
.sobre .texto .nombre{margin-top:34px;font-weight:700;font-size:11px;letter-spacing:.4em;text-transform:uppercase}

/* Contacto */
.contacto{padding:200px var(--margen) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:44px}
.frase{position:relative;width:900px;max-width:100%}
.frase .lapiz{position:absolute;left:83.5%;top:41%;width:13.3%}
.formulario{width:560px;max-width:100%;display:flex;flex-direction:column;gap:14px;text-align:left}
.formulario label{font-weight:700;font-size:9px;letter-spacing:.3em;text-transform:uppercase}
.formulario input,.formulario textarea{display:block;width:100%;margin-top:8px;padding:12px 14px;border:1px solid var(--borde);background:var(--campo);font:300 14px/1.6 'Poppins',sans-serif;color:var(--tinta)}
.formulario input{height:48px}
.formulario .enviar{align-self:flex-start;margin-top:8px;height:48px;padding:0 34px;background:var(--amarillo);border:0;cursor:pointer;font:700 10px 'Poppins',sans-serif;letter-spacing:.4em;text-transform:uppercase;color:var(--tinta)}
.formulario .trampa{position:absolute;left:-9999px}
.aviso{font-size:15px;margin:0}

/* Página de libro */
.libro-portada{display:flex;gap:90px;align-items:center;padding:60px var(--margen) 0}
.libro-portada>img{width:660px;height:440px;object-fit:contain;flex-shrink:0}
.libro-portada .datos{display:flex;flex-direction:column;gap:28px;max-width:480px}
.libro-portada h1{margin:0;font-weight:700;font-size:14px;letter-spacing:.4em;text-transform:uppercase;line-height:1.8}
.libro-portada .ficha{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--linea);padding-top:24px;font-size:14px}
.volver{font-weight:700;font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--mostaza)}

/* Pie */
.pie{margin-top:160px;border-top:1px solid var(--linea);padding:40px var(--margen);display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:700;font-size:9px;letter-spacing:.4em;text-transform:uppercase}
.pie .izq{display:flex;align-items:center;gap:14px}
.pie .izq img{width:32px;height:32px}
.pie .der{display:flex;gap:34px;align-items:center}

/* Visor de imágenes */
.visor{position:fixed;inset:0;background:rgba(253,249,237,.97);display:none;align-items:center;justify-content:center;z-index:50;padding:40px}
.visor.abierto{display:flex}
.visor img{max-width:100%;max-height:100%;object-fit:contain}
.visor button{position:absolute;top:16px;right:16px;width:48px;height:48px;border:0;background:none;font-size:28px;cursor:pointer;color:var(--tinta)}

/* Pantallas medianas */
@media (max-width:1300px){
  :root{--margen:48px}
  .portada .retrato{width:52vw;height:52vw;max-height:700px;max-width:700px}
  .portada .retrato img{width:92%}
  .portada .titular img{width:38vw}
  .libro{grid-template-columns:1.4fr 1fr;gap:48px}
  .libro>img{height:auto;max-height:480px}
  .sobre .fila{gap:56px}
  .sobre .fila>img{width:40%;height:auto;aspect-ratio:3/4}
  .libro-portada{gap:48px}
  .libro-portada>img{width:50%;height:auto}
  .personajes{gap:24px}
  .personajes img{height:calc(var(--h)*.75)}
}
/* Celular */
@media (max-width:760px){
  :root{--margen:20px}
  .encabezado{padding:14px 12px 14px 20px;flex-wrap:wrap;gap:10px}
  .marca .flor{width:32px;height:32px}
  .marca .nombre{height:18px}
  .abrir-menu{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer}
  .menu{gap:0}
  .menu-lista{display:none;position:absolute;left:0;right:0;top:72px;background:var(--crema);flex-direction:column;gap:0;padding:8px 20px 20px;border-bottom:1px solid var(--linea);z-index:20}
  .menu-lista.abierta{display:flex}
  .menu-lista a{display:block;padding:12px 0}
  .portada{flex-direction:column;min-height:0}
  .portada .retrato{width:100%;height:380px;margin:0}
  .portada .retrato img{width:340px}
  .portada .titular{padding:32px 20px 0;gap:12px}
  .portada .titular img{width:318px}
  .portada .titular p{font-size:13px}
  .portada .lapiz{right:16px;bottom:-70px;width:56px}
  .seccion{padding-top:90px}
  .titulo{margin-bottom:24px;padding-bottom:12px}
  .titulo img{width:calc(var(--w)*.62)}
  .libros{gap:40px}
  .libro{grid-template-columns:1fr;gap:8px}
  .libro>img{height:220px}
  .libro h3{font-size:9px;margin-bottom:6px}
  .libro p{font-size:12px;margin:0}
  .grilla{gap:12px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grilla img{height:169px}
  .personajes{flex-wrap:wrap;gap:16px 18px}
  .personajes img{height:calc(var(--h)*.5)}
  .galeria{columns:2;column-gap:12px}
  .galeria figure{margin-bottom:12px}
  .proyectos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .proyectos img{height:169px}
  .sobre{gap:24px}
  .sobre .fila,.sobre .fila.centro{flex-direction:column;gap:24px}
  .sobre .fila>img{width:100%;height:auto}
  .sobre .texto{padding-top:0}
  .sobre .texto p{font-size:13px}
  .contacto{padding-top:110px;gap:26px}
  .libro-portada{flex-direction:column;gap:24px;padding-top:30px}
  .libro-portada>img{width:100%}
  .pie{flex-direction:column;align-items:flex-start;margin-top:100px}
  .pie .der{gap:20px;flex-wrap:wrap}
}
.titulo .boton{white-space:nowrap}
@media (max-width:760px){.titulo .boton{letter-spacing:.25em;font-size:9px}}
.galeria video{width:100%;height:auto;display:block;background:#eee}
/* Home limpia */
.animacion{display:flex;justify-content:center;padding:40px var(--margen) 0}
.animacion img{width:520px;max-width:80%}
.destacadas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:780px;margin:0 auto;padding:70px var(--margen) 0;box-sizing:content-box}
.destacadas figure{margin:0}
.destacadas img,.destacadas video{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:50% 25%;display:block}
.brujita-final{display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box;padding:50px 20px 0;text-align:center}
.brujita-final img{height:340px;width:auto;margin:0 auto;display:block}
@media (max-width:760px){
  .animacion{padding-top:90px}
  .animacion img{width:300px;max-width:90%}
  .destacadas{gap:8px;padding-top:40px}
  .brujita-final img{height:220px}
}
/* Calucita flota suavemente */
@keyframes flotar{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.animacion img{animation:flotar 3.2s ease-in-out infinite;transform-origin:30% 90%}
@media (prefers-reduced-motion:reduce){.animacion img{animation:none}}
/* Portada con animación (sin fondo) */
.portada .portada-anim{width:700px;margin-left:var(--margen);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.portada .portada-anim picture{display:block}
.portada .portada-anim img{width:510px;max-width:100%;height:auto;display:block}
.portada .titular .rol{font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.14em;line-height:1.3;text-align:center}
.portada .titular .bajada{margin:-8px auto 0;max-width:330px;text-align:center;font-weight:300;font-size:12px;line-height:1.9;letter-spacing:.03em}
.portada{min-height:760px}
@media (max-width:1300px){.portada .portada-anim{width:45vw}}
@media (max-width:760px){
  .portada .portada-anim{width:100%;margin:0;padding-top:24px}
  .portada .portada-anim img{width:80vw;max-width:340px}
  .portada .titular .rol{font-size:18px}
  .portada .titular .bajada{font-size:10px;max-width:260px;margin-top:0}
}

/* ===== Encabezado (según maqueta) ===== */
.encabezado{height:108px;padding:0 39px 0 32px;gap:39px;justify-content:flex-start;background:#FCF6EA}
.marca .flor{width:58px;height:58px}
.menu{flex:1;gap:0}
.menu-lista{gap:min(44px,3.05vw);font-size:min(17px,1.181vw);letter-spacing:.14em;color:#0A0A47}
.menu-lista a{color:#0A0A47}
.menu-lista a:hover{color:var(--mostaza)}
.menu .icono{margin-left:auto;width:44px;height:44px}
.menu .icono svg{width:25px;height:25px}
.idiomas{margin-left:min(52px,3.6vw);color:#C9BFA2}
.idiomas button{font-size:min(13.5px,0.941vw);letter-spacing:.14em;color:#121616;min-width:44px}
.idiomas button[aria-pressed="true"]{color:#8D7E00;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px}

/* ===== Home con cielo ===== */
body.home{background:#0C0C60 url(../img/home/fondo-cielo.jpg) center top/cover no-repeat}
body.home main{position:relative}
.h-hero{position:relative;display:grid;grid-template-columns:530px 520px;column-gap:50px;padding:49px 0 0 80px;max-width:1440px;margin:0 auto;box-sizing:border-box}
.h-estrellas{position:absolute;top:0;right:0;width:min(645px,44.8vw);pointer-events:none}
.h-bruja img{width:529px;height:auto;display:block}
.h-texto{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:249px;position:relative;z-index:1}
.h-texto h1{margin:0}
.h-texto h1 img{width:578px;max-width:none;height:auto;display:block}
.h-rol{margin:70px 0 0;font-weight:700;font-size:28px;line-height:1.2;letter-spacing:.17em;text-transform:uppercase;color:#FEFBF1}
.h-desc{margin:15px 0 0;font-weight:300;font-size:24px;line-height:36px;letter-spacing:.09em;color:#FEFBF1}
.h-desc{white-space:nowrap}
.h-desc strong{font-weight:700;color:#F4DD75;font-size:1.15em;letter-spacing:.17em}
.h-desc em{font-style:italic}

body.home .contacto{padding:155px 20px 0;gap:0}
body.home .frase{width:800px}
body.home .frase .lapiz{left:84%;top:69%;width:12.6%}
body.home #escribime{margin-top:72px;font-size:20.5px;letter-spacing:.22em;color:#FEFBF1;border-bottom:2px solid #CCBA18;padding:0 0 12px}
body.home .formulario{margin-top:40px}
body.home .formulario label{color:#FEFBF1}
body.home .aviso{color:#FEFBF1;margin-top:30px}

body.home .pie{margin-top:117px;border-top:0;background:transparent;padding:0 58px 38px 51px;color:#FEFBF1;font-size:17px;letter-spacing:.2em}
body.home .pie a{color:#FEFBF1}
body.home .pie .izq{gap:30px}
body.home .pie .izq img{width:58px;height:58px}
body.home .pie .der{gap:47px}

/* Compu más chica: todo escala en proporción */
@media (max-width:1439px) and (min-width:761px){
  .h-hero{grid-template-columns:36.8vw 36.1vw;column-gap:3.47vw;padding:3.4vw 0 0 5.56vw}
  .h-bruja img{width:36.7vw}
  .h-texto{padding-top:17.3vw}
  .h-texto h1 img{width:40.1vw}
  .h-rol{margin-top:4.86vw;font-size:1.941vw}
  .h-desc{margin-top:1.04vw;font-size:1.667vw;line-height:2.71vw}
  body.home .contacto{padding-top:10.76vw}
  body.home .frase{width:55.6vw}
  body.home #escribime{margin-top:5vw;font-size:1.421vw}
  body.home .pie{margin-top:8.1vw;font-size:1.181vw}
}
/* Celular */
@media (max-width:760px){
  .encabezado{height:auto;padding:14px 12px 14px 20px;justify-content:space-between}
  .marca .flor{width:44px;height:44px}
  .menu{flex:0 1 auto}
  .menu-lista{font-size:11px;letter-spacing:.14em}
  .idiomas{margin-left:4px}
  .idiomas button{font-size:10px}
  .br-d{display:none}
  .h-hero{display:flex;flex-direction:column;align-items:center;padding:40px 20px 0}
  .h-estrellas{width:62vw}
  .h-bruja img{width:66vw;max-width:300px}
  .h-texto{padding-top:34px}
  .h-texto h1 img{width:88vw;max-width:360px}
  .h-rol{margin-top:26px;font-size:18px;letter-spacing:.2em}
  .h-desc{margin-top:16px;font-size:13px;line-height:1.75;letter-spacing:.08em;max-width:330px;white-space:normal}
  .h-desc strong{display:block;white-space:nowrap}
  body.home .contacto{padding-top:90px}
  body.home .frase{width:92vw;max-width:400px}
  body.home #escribime{margin-top:40px;font-size:13px}
  body.home .pie{margin-top:80px;padding:0 20px 30px;font-size:11px}
  body.home .pie .izq{gap:14px}
  body.home .pie .izq img{width:40px;height:40px}
  body.home .pie .der{gap:22px}
}

/* ===== Página Books (según maqueta) ===== */
.b-pag{position:relative;padding:60px var(--margen) 0;max-width:1440px;margin:0 auto;box-sizing:border-box}
.b-estrellas{top:0}
.b-titulo{margin:0 0 70px;position:relative;z-index:1}
.b-titulo img{width:235px;height:auto}
.b-destacado{display:grid;grid-template-columns:240px 380px 1fr;gap:40px;align-items:center;margin-bottom:110px}
.b-nena{width:100%;height:auto}
.b-tapa img{width:100%;height:auto;display:block;filter:drop-shadow(8px 10px 14px rgba(60,50,30,.18))}
.b-ficha-wrap{position:relative}
.b-ficha{background:transparent;padding:22px 0 0}
.b-ficha h3{margin:0 0 14px;font-weight:700;font-size:12px;letter-spacing:.4em;text-transform:uppercase;line-height:1.8}
.b-ficha p{margin:0;font-size:14px;line-height:1.7}
.b-ficha .acciones{display:flex;gap:26px;margin-top:20px}
.b-ficha .boton{font-size:10px}
.b-picaflor{position:absolute;right:0;top:50%;width:56px;transform:translateY(-30%)}
.b-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;margin-bottom:100px;align-items:start}
.b-item{display:flex;flex-direction:column;align-items:center}
.b-item>a{display:block;width:100%}
.b-item>a img{width:100%;height:440px;object-fit:contain;display:block}
.b-item .b-ficha{width:86%;margin-top:6px;box-sizing:border-box}
.b-personales{margin-top:20px}
.b-pp{display:flex;flex-direction:column;align-items:center;gap:90px}
.b-pp figure{margin:0;width:100%;max-width:1000px}
.b-pp img{width:100%;height:auto;display:block}
.b-pp figcaption{margin-top:18px;text-align:center;font-weight:700;font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.b-desc{margin:0;font-size:14px;line-height:1.75;max-width:460px}
@media (max-width:1100px) and (min-width:761px){
  .b-destacado{grid-template-columns:20% 32% 1fr;gap:24px}
  .b-item>a img{height:34vw}
}
@media (max-width:760px){
  .b-pag{padding-top:30px}
  .b-titulo{margin-bottom:30px}
  .b-titulo img{width:150px}
  .b-estrellas{width:62vw}
  .b-destacado{grid-template-columns:1fr 1.6fr;gap:16px;margin-bottom:60px}
  .b-ficha-wrap{grid-column:1 / -1}
  .b-ficha{padding:18px 0 0}
  .b-picaflor{width:40px;right:0;top:10px;transform:none}
  .b-par{grid-template-columns:1fr;gap:50px;margin-bottom:50px}
  .b-item>a img{height:auto;max-height:380px}
  .b-item .b-ficha{width:100%}
  .b-pp{gap:50px}
  .b-pp img{height:auto}
}