/* ============================================================
   EnigmaWeb — CSS común del sitio
   Estética de época: feldgrau, baquelita, latón, papel envejecido
   Tipografía: EB Garamond (autoalojada, misma del libro)
   ============================================================ */

:root {
  /* Paleta */
  --feldgrau: #515a4f;
  --feldgrau-oscuro: #3a4138;
  --tinta: #2b2620;
  --crema: #e7e1d2;
  --papel: #f4eeda;
  --papel-oscuro: #ece4c9;
  --laton: #b08d57;
  --laton-claro: #d0b183;
  --ambar: #ffcf45;
  --rojo-sello: #8a2a1e;

  /* Tipografía */
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.65;
  font-size: 1.08rem;
}

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--feldgrau-oscuro);
  border-bottom: 3px solid var(--laton);
  padding: .55rem 1.5rem;
}
.cabecera__interior {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.marca {
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laton-claro);
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
}
.marca span { color: var(--crema); }
.navegacion ul {
  list-style: none;
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
}
.navegacion a {
  color: var(--crema);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .04em;
  opacity: .85;
}
.navegacion a:hover, .navegacion a[aria-current="page"] {
  color: var(--ambar);
  opacity: 1;
}

/* ---------- Contenido ---------- */
.contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* ---------- Portada ---------- */
.portada {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
}
.portada__etiqueta {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton);
  border: 1px solid var(--laton);
  padding: .25rem .9rem;
  margin-bottom: 1.6rem;
}
.portada h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.18;
  max-width: 21ch;
  margin: 0 auto 1.2rem;
}
.portada__entradilla {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-style: italic;
  max-width: 58ch;
  margin: 0 auto 2.2rem;
  color: #4a443a;
}

/* Botones tipo placa de latón */
.acciones {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.boton {
  display: inline-block;
  text-decoration: none;
  padding: .8rem 1.7rem;
  font-size: 1.02rem;
  letter-spacing: .05em;
  border-radius: 2px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.boton--principal {
  background: linear-gradient(180deg, var(--laton-claro), var(--laton));
  color: #241c10;
  font-weight: 600;
  border: 1px solid #8a6c40;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(43,38,32,.35);
}
.boton--secundario {
  background: transparent;
  color: var(--feldgrau-oscuro);
  border: 1px solid var(--feldgrau);
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(43,38,32,.3); }
.boton:focus-visible, a:focus-visible { outline: 2px solid var(--rojo-sello); outline-offset: 2px; }

/* ---------- Secciones de tarjetas ---------- */
.seccion-titulo {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 1.6rem;
  padding-left: .8rem;
  border-left: 4px solid var(--laton);
}
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.4rem;
}
.tarjeta {
  background: #fbf7ea;
  border: 1px solid #d8cfaf;
  border-top: 3px solid var(--laton);
  padding: 1.5rem 1.4rem;
  box-shadow: 0 2px 6px rgba(43,38,32,.08);
}
.tarjeta h3 { font-size: 1.22rem; margin-bottom: .5rem; font-weight: 600; }
.tarjeta p  { font-size: 1rem; color: #4a443a; margin-bottom: .9rem; }
.tarjeta a  { color: var(--rojo-sello); text-decoration: none; font-weight: 600; }
.tarjeta a:hover { text-decoration: underline; }

/* ---------- Pie ---------- */
.pie {
  background: var(--feldgrau-oscuro);
  color: var(--crema);
  border-top: 3px solid var(--laton);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: .95rem;
}
.pie a { color: var(--laton-claro); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie p + p { margin-top: .4rem; opacity: .75; font-size: .88rem; }

/* ---------- Página en obras ---------- */
.obras {
  text-align: center;
  padding: 4rem 1rem;
}
.obras__sello {
  display: inline-block;
  border: 3px double var(--rojo-sello);
  color: var(--rojo-sello);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: .5rem 1.6rem;
  transform: rotate(-4deg);
  margin-bottom: 1.8rem;
  font-size: 1.05rem;
}
.obras h1 { font-size: 2.1rem; font-weight: 600; margin-bottom: 1.1rem; }
.obras p { max-width: 60ch; margin: 0 auto 1rem; font-size: 1.12rem; }
.obras .boton { margin-top: 1.2rem; }

/* ---------- Ficha del libro ---------- */
.libro-ficha {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 2.5rem;
  align-items: start;
}
.libro-portada img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(43,38,32,.35);
}
.libro-info h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: .4rem;
}
.libro-subtitulo {
  font-style: italic;
  font-size: 1.25rem;
  color: #4a443a;
  margin-bottom: .4rem;
}
.libro-autor { margin-bottom: 1.2rem; }
.libro-info > p:not(.libro-subtitulo):not(.libro-autor):not(.libro-nota) {
  max-width: 68ch;
}
.libro-datos {
  list-style: none;
  margin: 1.1rem 0 1.5rem;
  padding-left: 0;
}
.libro-datos li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: .45rem;
}
.libro-datos li::before {
  content: "✦";
  position: absolute;
  left: .2rem;
  color: var(--laton);
}
.libro-formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.2rem;
  max-width: 560px;
}
.libro-precio {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--feldgrau-oscuro);
  margin-bottom: .9rem;
}
.libro-nota {
  font-size: .88rem;
  opacity: .75;
  margin-top: .8rem;
}
.libro-cta-final {
  text-align: center;
  margin-top: 3rem;
  font-size: 1.15rem;
}
.libro-cta-final .boton { margin-top: .8rem; }

@media (max-width: 720px) {
  .libro-ficha { grid-template-columns: 1fr; }
  /* Evitar el "grid blowout": el contenido no puede forzar la anchura */
  .libro-ficha > * { min-width: 0; }
  .libro-portada { max-width: 300px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .cabecera__interior { flex-direction: column; align-items: flex-start; }
  .contenido { padding: 1.8rem 1.1rem 2.8rem; }
}