[hidden] { display: none !important }
/* Layout: portada partida (texto en banda marina | foto de proa), estantería de tres lomos, y bandas alternas mar / arena como las cubiertas */
:root {
  --mar: #12344d;        /* azul marino de las cubiertas */
  --mar-hondo: #0b2335;
  --arena: #e9c48c;      /* color de las citas de contraportada */
  --espuma: #f6f7f5;
  --tinta: #16222c;
  --gris: #5d6b75;
  --linea: #d9dfe3;
  --tarjeta: #ffffff;
  --display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --texto: "Lora", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --espuma: #0e1d29; --tinta: #e8ecef; --gris: #9fb0bc; --linea: #23394a; --tarjeta: #132a3b; color-scheme: dark } }
:root[data-theme="dark"] { --espuma: #0e1d29; --tinta: #e8ecef; --gris: #9fb0bc; --linea: #23394a; --tarjeta: #132a3b; color-scheme: dark }

* { box-sizing: border-box }
body { margin: 0; background: var(--espuma); color: var(--tinta); font: 400 1.0625rem/1.65 var(--texto) }
a { color: inherit }
img { max-width: 100%; display: block }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.eyebrow { font: 600 .75rem/1 var(--ui); letter-spacing: .22em; text-transform: uppercase }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0 }
h2 { font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: .01em; text-transform: uppercase; line-height: 1.05 }
.cursiva { font-family: var(--texto); font-style: italic; font-weight: 500 }
.btn { display: inline-flex; align-items: center; gap: .5em; font: 600 .95rem/1 var(--ui); text-decoration: none; padding: .95em 1.4em; border-radius: 3px; border: 1.5px solid currentColor; transition: background .2s, color .2s }
.btn-sol { background: var(--arena); color: var(--mar-hondo); border-color: var(--arena) }
.btn-sol:hover { background: #f3d6a8; border-color: #f3d6a8 }
.btn-linea:hover { background: rgba(255,255,255,.1) }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--arena); outline-offset: 3px }

/* Cabecera */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--mar-hondo) }
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--mar-hondo); color: #fff }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem }
.marca { font: 900 1.05rem/1 var(--display); letter-spacing: .14em; text-decoration: none; white-space: nowrap }
.marca span { font: italic 500 1rem var(--texto); letter-spacing: 0; color: var(--arena); margin-left: .35em }
.marca { display: inline-flex; align-items: center }
.avatar-mini { width: 36px; height: 36px; border-radius: 50%; margin-right: .7em; border: 2px solid var(--arena); object-fit: cover }
.avatar { width: clamp(120px, 14vw, 160px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid var(--arena); box-shadow: 0 10px 28px rgba(0,0,0,.35) }
nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font: 500 .9rem/1 var(--ui) }
nav a { text-decoration: none; opacity: .85 } nav a:hover { opacity: 1; color: var(--arena) }

/* Portada */
.portada { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--mar); color: #fff }
.portada-texto { padding: clamp(2.5rem, 7vw, 6rem) max(20px, env(safe-area-inset-left, 0px)) clamp(2.5rem, 6vw, 5rem) max(20px, calc((100vw - 1120px) / 2 + 20px)); display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; min-width: 0 }
.portada .eyebrow { color: rgba(255,255,255,.8) }
.portada h1 { font-weight: 900; font-size: clamp(3.6rem, 10vw, 7.4rem); line-height: .9; letter-spacing: -.01em; text-shadow: 0 4px 0 rgba(0,20,35,.35) }
.portada h1 small { display: block; font-weight: 800; font-size: .32em; letter-spacing: .3em; margin-top: .45em; text-shadow: none }
.portada .lema { font: italic 500 clamp(1.15rem, 2.2vw, 1.4rem)/1.45 var(--texto); max-width: 30ch; color: #f1f4f6 }
.portada .acciones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem }
.bitacora { display: flex; gap: .9rem; align-items: center; font: 500 .8rem/1.3 var(--ui); color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.1rem; margin-top: .6rem; max-width: 420px }
.bitacora b { font: 600 .95rem var(--ui); color: var(--arena); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap }
.portada-foto { position: relative; min-height: 420px }
.portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55% }

/* Serie */
section { padding-block: clamp(3.5rem, 8vw, 6rem) }
.cabeza { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.6rem }
.cabeza p { max-width: 46ch; margin: 0; color: var(--gris) }
.cabeza .eyebrow { color: var(--gris); margin-bottom: .8rem; display: block }
.libros { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem) }
.libro { display: flex; flex-direction: column; gap: 1rem; min-width: 0 }
.libro .tapa { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; box-shadow: 0 18px 30px -14px rgba(11,35,53,.55), 0 2px 4px rgba(11,35,53,.2); transition: transform .3s }
.libro:hover .tapa { transform: translateY(-4px) rotate(-.4deg) }
.libro .tapa img { width: 100%; height: 100%; object-fit: cover }
.libro .num { color: var(--gris) }
.libro h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2 }
.libro h3 em { display: block; font: italic 500 1.05rem/1.35 var(--texto); margin-top: .25rem }
.libro p { margin: 0; color: var(--gris); font-size: 1rem }
.libro .datos { font: 500 .82rem/1.4 var(--ui); color: var(--gris); font-variant-numeric: tabular-nums }
.libro .btn { align-self: flex-start; margin-top: auto; color: var(--mar); border-color: var(--mar) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .libro .btn { color: var(--arena); border-color: var(--arena) } }
:root[data-theme="dark"] .libro .btn { color: var(--arena); border-color: var(--arena) }
.libro .btn:hover { background: var(--mar); color: #fff }
.proximo { display: inline-block; font: 600 .78rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; background: var(--arena); color: var(--mar-hondo); padding: .55em .8em; border-radius: 2px; align-self: flex-start; margin-top: auto }

/* Autora */
.autora { background: var(--tarjeta); border-block: 1px solid var(--linea) }
.autora .wrap { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center }
.autora figure { margin: 0; position: relative }
.autora figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px }
.autora figure::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--arena); z-index: -1; border-radius: 2px }
.autora .cuerpo { min-width: 0; max-width: 62ch }
.autora .cuerpo p { margin: 1rem 0 0 }
.cita { font: italic 600 clamp(1.3rem, 2.6vw, 1.7rem)/1.35 var(--texto); color: var(--mar); margin: 1.4rem 0 0 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cita { color: var(--arena) } }
:root[data-theme="dark"] .cita { color: var(--arena) }

/* Blog */
.blog { position: relative; color: #fff; padding-block: 0; overflow: hidden; background: var(--mar-hondo) }
.blog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .55 }
.blog .wrap { position: relative; padding-block: clamp(4rem, 10vw, 7rem) }
.blog .caja { max-width: 560px; display: grid; gap: 1.1rem }
.blog .caja p { margin: 0; font-size: 1.1rem; color: #eef2f4 }
.blog .eyebrow { color: var(--arena) }

/* Galería */
.galeria .fotos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 10px }
.galeria .fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px }
.galeria .fotos img:first-child { grid-row: span 2 }
.galeria .fotos img:last-child { grid-column: span 2 }
.aviso { margin-top: 1.6rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font: 500 .95rem/1.5 var(--ui); color: var(--gris) }

/* Pie */
footer { background: var(--mar-hondo); color: rgba(255,255,255,.75); font: 400 .9rem/1.6 var(--ui) }
footer .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 2.4rem }
footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3) }
footer .marca { color: #fff }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr }
  .portada-texto { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)) }
  .portada-foto { min-height: 0; aspect-ratio: 4 / 3 }
  .libros { grid-template-columns: 1fr; max-width: 420px }
  .autora .wrap { grid-template-columns: 1fr }
  .autora figure { max-width: 260px }
  .galeria .fotos { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px 160px }
  .galeria .fotos img:first-child { grid-row: auto; grid-column: span 2 }
  nav { display: none }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* Páginas interiores */
.pagina { padding-block: clamp(3rem, 7vw, 5rem) }
.pagina .intro { max-width: 60ch; color: var(--gris); margin: 1rem 0 0 }
.formulario { margin-top: 2rem; display: grid; gap: 1rem; max-width: 460px; background: var(--tarjeta); border: 1px solid var(--linea); padding: 1.6rem; border-radius: 3px }
.formulario label { font: 600 .85rem/1.3 var(--ui); display: grid; gap: .4rem }
.formulario input[type=text], .formulario input[type=email] { font: 400 1rem var(--ui); padding: .8em .9em; border: 1px solid var(--linea); border-radius: 3px; background: var(--espuma); color: var(--tinta) }
.formulario .consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--gris) }
.formulario .consent input { margin-top: .2rem }
.formulario button { justify-self: start; cursor: pointer; font: 600 .95rem/1 var(--ui); padding: .95em 1.4em; border: 0; border-radius: 3px; background: var(--mar); color: #fff }
.formulario button:hover { background: var(--mar-hondo) }
.gracias { margin-top: 2rem; max-width: 460px; display: grid; gap: 1rem }
.rejilla { margin-top: 2.2rem; columns: 3 260px; column-gap: 12px }
.rejilla figure { margin: 0 0 12px; break-inside: avoid }
.rejilla img { width: 100%; border-radius: 2px }
.rejilla figcaption { font: 500 .8rem/1.4 var(--ui); color: var(--gris); padding: .4rem .1rem 0 }
.volver { font: 600 .9rem var(--ui); color: var(--gris) }

.lema-banda { background: var(--mar); color: #fff }
.lema-banda .eyebrow { color: var(--arena) }
.lema-banda h2 { margin-top: .8rem; max-width: 18ch }
.lema-texto { margin-top: 1.6rem; max-width: 62ch; display: grid; gap: 1rem }
.lema-texto p { margin: 0; color: #e8eef2 }
.lema-banda .cita { color: var(--arena) !important; margin-top: .4rem }