/* diegovaquero.es - hoja de estilo unica */

:root{
  --fondo:      #0b0e11;
  --fondo-alt:  #11161a;
  --tarjeta:    #151b20;
  --linea:      #262e35;
  --texto:      #e6e2d9;
  --texto-sec:  #a3a49f;
  --acento:     #c2a06b;
  --acento-alt: #8a2f24;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ancho: 1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.estrecho{max-width:720px}

/* ---------- cabecera ---------- */
header.sitio{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,17,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
header.sitio .contenedor{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:66px;
}
.marca{
  font-family:var(--serif);
  font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto);text-decoration:none;white-space:nowrap;
}
.marca:hover{text-decoration:none;color:var(--acento)}
nav.principal{display:flex;gap:26px;flex-wrap:wrap}
nav.principal a{
  color:var(--texto-sec);font-size:.9rem;letter-spacing:.05em;
  text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;
}
nav.principal a:hover,nav.principal a[aria-current="page"]{
  color:var(--texto);border-bottom-color:var(--acento);text-decoration:none;
}

/* ---------- portada ---------- */
.hero{
  padding:88px 0 72px;
  border-bottom:1px solid var(--linea);
  background:
    radial-gradient(900px 420px at 78% 12%, rgba(194,160,107,.09), transparent 60%),
    linear-gradient(180deg,#0b0e11 0%,#0e1317 100%);
}
.hero .contenedor{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.sobretitulo{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);margin:0 0 18px;
}
h1{
  font-family:var(--serif);
  font-size:clamp(2.2rem,5.2vw,3.4rem);
  line-height:1.12;margin:0 0 22px;font-weight:400;
}
h2{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.1rem);font-weight:400;line-height:1.2;margin:0 0 18px}
h3{font-family:var(--serif);font-size:1.28rem;font-weight:400;margin:0 0 10px}
.entradilla{font-size:1.12rem;color:var(--texto-sec);margin:0 0 28px;max-width:52ch}
.cubierta{border:1px solid var(--linea);box-shadow:0 26px 60px rgba(0,0,0,.65)}

/* ---------- botones ---------- */
.boton{
  display:inline-block;background:var(--acento);color:#10130f;
  font-weight:600;font-size:.98rem;letter-spacing:.02em;
  padding:14px 28px;border-radius:2px;border:1px solid var(--acento);
  text-decoration:none;transition:background .15s,color .15s;
}
.boton:hover{background:#d6b984;text-decoration:none}
.boton.hueco{background:transparent;color:var(--acento)}
.boton.hueco:hover{background:rgba(194,160,107,.12)}
.acciones{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- secciones ---------- */
section{padding:76px 0}
section.alterna{background:var(--fondo-alt);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.titulo-seccion{text-align:center;margin-bottom:48px}
.titulo-seccion p{color:var(--texto-sec);max-width:56ch;margin:12px auto 0}

/* ---------- captura de correo ---------- */
.captura{
  background:linear-gradient(180deg,#12181d,#0e1317);
  border:1px solid var(--linea);border-left:3px solid var(--acento);
  padding:44px 40px;border-radius:3px;
}
.captura h2{margin-bottom:14px}
.captura p{color:var(--texto-sec);max-width:58ch}
form.suscripcion{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
form.suscripcion input[type=email],form.suscripcion input[type=text]{
  flex:1 1 260px;min-width:0;
  background:#0a0d10;border:1px solid var(--linea);color:var(--texto);
  padding:14px 16px;border-radius:2px;font-size:1rem;font-family:var(--sans);
}
form.suscripcion input:focus{outline:none;border-color:var(--acento)}
form.suscripcion button{
  background:var(--acento);color:#10130f;border:none;cursor:pointer;
  padding:14px 30px;border-radius:2px;font-size:1rem;font-weight:600;font-family:var(--sans);
}
form.suscripcion button:hover{background:#d6b984}
.consentimiento{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--texto-sec);line-height:1.5}
.consentimiento input{margin-top:4px;flex:0 0 auto}
.letra-chica{font-size:.82rem;color:var(--texto-sec);margin-top:14px}
.aviso-form{margin-top:16px;padding:12px 14px;border-radius:2px;font-size:.9rem;display:none}
.aviso-form.error{display:block;background:rgba(138,47,36,.18);border:1px solid #8a2f24;color:#f0c9c4}
.aviso-form.ok{display:block;background:rgba(194,160,107,.12);border:1px solid var(--acento);color:var(--texto)}

/* ---------- libros ---------- */
.rejilla-libros{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.libro{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,border-color .18s;
}
.libro:hover{transform:translateY(-4px);border-color:#3a444d}
.libro .cuerpo{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.libro .cuerpo p{color:var(--texto-sec);font-size:.96rem;flex:1}
.etiqueta{
  display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);border:1px solid rgba(194,160,107,.45);
  padding:3px 10px;border-radius:2px;margin-bottom:14px;align-self:flex-start;
}
.etiqueta.gris{color:var(--texto-sec);border-color:var(--linea)}
.sin-portada{
  aspect-ratio:2/3;background:linear-gradient(150deg,#161d23,#0d1215);
  display:flex;align-items:center;justify-content:center;padding:28px;text-align:center;
  font-family:var(--serif);font-size:1.5rem;color:#4e5860;border-bottom:1px solid var(--linea);
}

/* ---------- ficha de libro ---------- */
.ficha{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start;padding-top:64px}
.datos{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--linea)}
.datos li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--linea);font-size:.92rem}
.datos span:first-child{color:var(--texto-sec)}
blockquote{
  border-left:2px solid var(--acento);margin:32px 0;padding:6px 0 6px 22px;
  font-family:var(--serif);font-size:1.16rem;line-height:1.6;color:var(--texto);
}
.aviso-spoiler{
  background:rgba(138,47,36,.14);border:1px solid rgba(138,47,36,.5);
  padding:14px 18px;border-radius:2px;font-size:.92rem;color:#e8cfcb;margin:0 0 28px;
}

/* ---------- texto largo ---------- */
.prosa p{max-width:66ch}
.prosa h2{margin-top:44px}
.prosa h3{margin-top:32px}
.prosa ul{max-width:66ch;color:var(--texto)}
.prosa li{margin-bottom:8px}

/* ---------- pie ---------- */
footer.sitio{
  border-top:1px solid var(--linea);background:#080b0d;
  padding:44px 0 56px;color:var(--texto-sec);font-size:.88rem;
}
footer.sitio .contenedor{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
footer.sitio a{color:var(--texto-sec)}
footer.sitio a:hover{color:var(--acento)}
.enlaces-pie{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .contenedor{grid-template-columns:1fr;gap:38px}
  .hero .visual{max-width:300px}
  .rejilla-libros{grid-template-columns:1fr;gap:26px}
  .ficha{grid-template-columns:1fr;gap:34px}
  .ficha .cubierta{max-width:280px}
  section{padding:56px 0}
  .hero{padding:56px 0 48px}
  .captura{padding:32px 24px}
  header.sitio .contenedor{flex-direction:column;align-items:flex-start;padding-top:12px;padding-bottom:12px;gap:10px}
  nav.principal{gap:18px}
}