/* CGC Publishers — colores reales de la web (claros) + formularios estilo UnboringBooks */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --ink:#1A1A1A; --white:#FFFFFF; --beige:#BAB0A8; --beige2:#BAB0A8;
  --slate:#42484D; --dark:#303538; --light:#F2F0EB; --red:#DE0000;
  --muted:#6E6A64; --line:#B7AFA4; --line2:#DAD5CD; --maxw:1200px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',system-ui,sans-serif; background:var(--beige); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-weight:700; line-height:1.1; letter-spacing:-0.01em; }
a { color:var(--ink); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 40px; }

header.site { position:sticky; top:0; z-index:50; background:var(--white); border-bottom:1px solid var(--line2); }
header.site .wrap { display:flex; align-items:center; gap:40px; height:80px; }
header.site nav.main { margin-right:auto; }
header.site .ig { margin-left:auto; color:var(--ink); display:inline-flex; }
.logo { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.logo:hover { text-decoration:none; }
.logo .mark { width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
nav.main a { color:var(--ink); font-size:16px; margin-left:0; margin-right:28px; padding-bottom:4px; }
nav.main a.active { border-bottom:2px solid var(--ink); font-weight:600; }
.nav-toggle { display:none; background:none; border:0; font-size:24px; cursor:pointer; color:var(--ink); }
@media (max-width:760px){ nav.main{ display:none; position:absolute; top:80px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--line2); flex-direction:column; padding:16px 40px; } nav.main.open{ display:flex; } nav.main a{ margin:8px 0; } .nav-toggle{ display:block; } .wrap{ padding:0 24px; } }

.band-beige{ background:var(--beige); } .band-beige2{ background:var(--beige2); }
.band-slate{ background:var(--slate); color:var(--white); } .band-dark{ background:var(--dark); color:var(--white); } .band-light{ background:var(--light); }

.hero { padding:64px 0 24px; }
.hero-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .hero-grid{ grid-template-columns:1fr; gap:32px; } }
.hero .eyebrow { font-size:19px; color:#fff; font-weight:600; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.03em; }
.hero h1 { font-size:clamp(24px,3.2vw,34px); margin-bottom:22px; }
.hero p { margin-bottom:10px; }
.hero .status { display:block; font-weight:700; margin-top:22px; }
.hero .cover-main { width:100%; border-radius:4px; border:1px solid var(--line); }
.hero .cover-main .ph { aspect-ratio:2/3; background:#0E2A4A; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; font-weight:700; border-radius:4px; }

section { padding:64px 0; }
.section-head { margin-bottom:40px; }
.section-head h2 { font-size:clamp(26px,3.5vw,40px); }
.section-head .prep { color:var(--red); font-weight:700; font-size:20px; margin-bottom:8px; }
.section-head p { margin-top:8px; max-width:74ch; opacity:0.8; }
.band-slate .section-head p,.band-dark .section-head p { opacity:0.88; }
.band-slate .section-head h2,.band-dark .section-head h2 { color:#fff; opacity:0.92; }

.books { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:32px; }

@media (max-width:760px){ .books.cols-3{ grid-template-columns:1fr; } }
.book .cover { aspect-ratio:2/3; border-radius:4px; overflow:hidden; background:#0E2A4A; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; }
.book:hover .cover { transform:translateY(-5px); }
.book .cover img { width:100%; height:100%; object-fit:cover; }
.book .cover .ph { color:#fff; text-align:center; padding:20px; font-weight:700; font-size:16px; line-height:1.25; }

.btn { display:inline-block; font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; padding:14px 28px; border-radius:999px; border:2px solid var(--ink); cursor:pointer; transition:transform .12s ease,background .15s ease; text-decoration:none; }
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn-primary { background:var(--ink); color:var(--white); }
.btn-primary:hover { background:var(--red); border-color:var(--red); color:#fff; }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--white); }

.form-card { background:var(--white); border:1px solid var(--line2); border-radius:16px; padding:36px; }
.field { margin-bottom:16px; text-align:left; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.field label .req { color:var(--red); }
.field input,.field textarea { width:100%; font-family:'DM Sans',sans-serif; font-size:15px; padding:13px 15px; border:1px solid var(--line2); border-radius:10px; background:var(--white); color:var(--ink); }
.field input:focus,.field textarea:focus { outline:2px solid var(--ink); border-color:var(--ink); }
.check { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.check input[type="checkbox"] { width:18px; height:18px; margin-top:3px; flex-shrink:0; accent-color:var(--ink); cursor:pointer; }
.check label { font-size:14px; line-height:1.5; cursor:pointer; }
.check label .req { color:var(--red); }
.form-ok,.form-err { display:none; margin-top:14px; font-weight:600; font-size:14px; }
.form-ok { color:#1a7a3a; }
.form-err { color:var(--red); }

.nl-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .nl-grid{ grid-template-columns:1fr; gap:28px; } }
.nl-grid h2 { font-size:clamp(28px,4vw,42px); margin-bottom:16px; }
.nl-grid .intro { opacity:0.8; }

.cookie-banner { position:fixed; left:16px; right:16px; bottom:16px; z-index:100; max-width:560px; margin:0 auto; background:var(--ink); color:var(--white); border-radius:16px; padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,0.35); display:none; }
.cookie-banner.show { display:block; animation:cb-up .3s ease; }
@keyframes cb-up { from{ transform:translateY(20px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.cookie-banner h4 { font-size:18px; margin-bottom:8px; }
.cookie-banner p { font-size:14px; color:rgba(255,255,255,0.75); margin-bottom:16px; }
.cookie-banner p a { color:#fff; text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn { font-size:14px; padding:10px 20px; }
.cookie-btn-accept { background:var(--white); color:var(--ink); border-color:var(--white); }
.cookie-btn-accept:hover { background:var(--red); border-color:var(--red); color:#fff; }
.cookie-btn-reject,.cookie-btn-prefs { background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.cookie-btn-reject:hover,.cookie-btn-prefs:hover { background:rgba(255,255,255,0.12); }
.cookie-prefs { margin:4px 0 16px; display:none; }
.cookie-prefs.show { display:block; }
.cookie-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid rgba(255,255,255,0.15); }
.cookie-row:first-child { border-top:0; }
.cookie-row .ck-text strong { display:block; font-size:14px; }
.cookie-row .ck-text span { font-size:13px; color:rgba(255,255,255,0.65); }
.cookie-row input[type="checkbox"] { width:18px; height:18px; margin-top:3px; accent-color:#fff; }

.legal-body { max-width:740px; margin:0 auto; }
.legal-body h1 { font-size:clamp(30px,5vw,48px); margin-bottom:8px; }
.legal-body h2 { font-size:22px; margin:32px 0 10px; }
.legal-body p,.legal-body li { margin-bottom:12px; opacity:0.85; }
.legal-body ul { padding-left:22px; }
.legal-body .updated { color:var(--muted); font-size:14px; margin-bottom:28px; opacity:1; }
.legal-note { font-size:12px; color:var(--muted); margin-top:14px; line-height:1.6; }

footer.site { background:var(--red); color:#fff; padding:18px 0; }
footer.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer.site .logo { color:#fff; }
footer.site .logo .mark { width:36px; height:36px; font-size:13px; }
footer.site .flinks a { color:#fff; font-size:13px; margin:0 12px; text-decoration:underline; }
.hidden { display:none; }

/* Trilogía IA: portadas 193px de ancho, centradas */
.books-tri { display:grid; grid-template-columns:repeat(3,193px); justify-content:center; gap:56px; }
/* Artificial Images: cuadradas, tamaño cómodo (no diminutas) */
.books-ai { display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:36px; }
.books-ai .book .cover { aspect-ratio:1/1; }
@media (max-width:760px){
  .books-tri { grid-template-columns:minmax(0,180px); justify-content:center; gap:28px; }
  .books-ai  { grid-template-columns:minmax(0,210px); justify-content:center; gap:28px; }
}

/* Página de contacto: imagen a la izquierda, formulario a la derecha */
.contacto-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:stretch; }
.contacto-img { display:flex; }
.contacto-img img { width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid var(--line2); display:block; }
@media (max-width:820px){ .contacto-grid { grid-template-columns:1fr; gap:28px; } .contacto-img img { height:auto; } }

/* Acerca de: la foto no debe pegarse al footer */
.legal-body { padding-bottom:20px; }
.legal-body::after { content:""; display:block; clear:both; }

/* El body ocupa toda la altura para que el footer no quede "flotando" */
html, body { min-height:100%; }
body { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1 0 auto; }
footer.site { flex-shrink:0; }

/* ─── Newsletter caja oscura (igual que UnboringBooks) ───── */
.nl-box { background:var(--dark); color:#fff; border-radius:20px; padding:56px 40px; text-align:center; }
.nl-box h2 { font-size:clamp(26px,4vw,40px); color:#fff; margin-bottom:0; }
.nl-box > p { color:rgba(255,255,255,0.7); margin-top:12px; max-width:48ch; margin-inline:auto; }
.nl-form { margin-top:28px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.nl-form input { font-family:'DM Sans',sans-serif; font-size:15px; padding:13px 18px; border-radius:999px;
  border:0; min-width:280px; background:#fff; color:var(--ink); }
.nl-form .btn { border-color:#fff; }
.nl-checks { max-width:460px; margin:18px auto 0; text-align:left; }
.nl-checks .check { margin-bottom:10px; }
.nl-checks label { color:rgba(255,255,255,0.85); }
.nl-checks label a { color:#fff; text-decoration:underline; }
.nl-checks input[type="checkbox"] { accent-color:var(--red); }
.nl-ok { display:none; margin-top:16px; color:#fff; font-weight:600; }
.nl-err { display:none; margin-top:12px; color:#ffb3b3; font-weight:600; }

/* Link de política en formularios: amarillo; asterisco obligatorio: rojo */
.check label a { color:#E8B500; text-decoration:underline; }
.field label .req, .check label .req { color:var(--red); }

/* ===== Página Acerca de ===== */
/* Kicker reutilizable: etiqueta en mayúsculas con filete rojo */
.about-kicker { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:white /*var(--muted)*/; margin-bottom:10px; }
/*.about-kicker::before { content:""; display:inline-block; width:26px; height:2px; background:var(--red); }*/
.about-kickernero { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:#BAB0A8 /*var(--muted)*/; margin-bottom:10px; }

.about-hero { padding:72px 0 10px; }
.about-hero h1 { font-size:clamp(30px,4vw,44px); line-height:1.06; }
.about-hero .lead { font-size:clamp(17px,1.9vw,20px); color:var(--ink); opacity:0.68; max-width:46ch; margin-top:16px; line-height:1.5; }

.about-prose { max-width:720px; }
.about-prose h2 { font-size:clamp(22px,2.6vw,28px); line-height:1.18; margin-bottom:18px; }
.about-prose p { font-size:17px; line-height:1.75; }
.about-prose p + p { margin-top:16px; }

/* Sobre mí (foto + texto) — foto 20% más pequeña (300 -> 240) y nombre contenido */
.sobre-mi { display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:center; max-width:860px; margin:0; }
.sobre-mi-foto img { width:100%; border-radius:12px; border:1px solid var(--line); display:block; box-shadow:0 16px 38px rgba(0,0,0,0.16); }
.sobre-mi-name { font-size:clamp(17px,2.4vw,14px); line-height:1.1; text-transform:uppercase; margin:2px 0 16px; margin-top:35px; font-weight:300;}
.sobre-mi-texto p { font-size:16.5px; line-height:1.72; }
.sobre-mi-texto p + p { margin-top:14px; }
@media (max-width:760px){
  .sobre-mi { grid-template-columns:1fr; gap:26px; text-align:center; justify-items:center; }
  .sobre-mi-foto img { max-width:210px; margin:0 auto; }
  .about-kicker { justify-content:center; }
}