/* ============================================================
   Moria Ediciones — hoja de estilos única
   Paleta: Negro tinta #001524 · Verde tormentoso #15616D
           Blanco hueso #FFF8ED · Naranja cosecha #FF7B00
   Tipografías: DM Serif Display (títulos) · Lexend (texto)
   Nota de contraste: el naranja solo se usa como acento sobre
   fondo oscuro o como fondo de botón con texto en negro tinta.
   ============================================================ */

:root {
  --tinta: #001524;
  --tormenta: #15616d;
  --hueso: #fff8ed;
  --cosecha: #ff7b00;
  --hueso-2: #f3ead9;
  --linea: rgba(0, 21, 36, 0.14);
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 14px;
  --ancho: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--tormenta); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--cosecha); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--cosecha); color: var(--tinta);
  padding: .6rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 .6em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.acento { color: var(--tormenta); }
.sobre-oscuro .acento { color: var(--cosecha); }
.subrayado {
  display: block; width: 64px; height: 5px; border-radius: 4px;
  background: var(--cosecha); margin: 1rem 0 1.6rem;
}
.etiqueta {
  display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--tormenta); margin-bottom: .8rem;
}
.sobre-oscuro .etiqueta { color: var(--cosecha); }
.lead { font-size: 1.15rem; max-width: 60ch; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; font: 500 .95rem/1 var(--sans);
  padding: .95rem 1.5rem; border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton-primario { background: var(--cosecha); color: var(--tinta); }
.boton-primario:hover { background: #ff8f26; color: var(--tinta); }
.boton-secundario { border-color: currentColor; color: inherit; background: transparent; }
.sobre-claro .boton-secundario { color: var(--tinta); }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--tinta); color: var(--hueso); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; padding-block: .9rem; }
.marca { text-decoration: none; color: var(--hueso); line-height: 1; display: inline-block; }
.marca small { display: block; font-family: var(--serif); font-size: .95rem; letter-spacing: .02em; }
.marca strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 2rem; letter-spacing: .06em; color: var(--cosecha); }
.menu-boton {
  background: none; border: 2px solid var(--hueso); color: var(--hueso);
  border-radius: 10px; padding: .55rem .8rem; font: 500 .85rem var(--sans); cursor: pointer;
}
.nav { display: none; width: 100%; }
.nav.abierto { display: block; }
.cabecera .contenedor { flex-wrap: wrap; }
.nav ul { list-style: none; margin: .8rem 0 .4rem; padding: 0; display: grid; gap: .2rem; }
.nav a {
  display: block; padding: .8rem .2rem; color: var(--hueso); text-decoration: none;
  border-bottom: 1px solid rgba(255, 248, 237, .15); font-size: 1rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cosecha); }

@media (min-width: 820px) {
  .menu-boton { display: none; }
  .nav { display: block; width: auto; }
  .nav ul { display: flex; gap: 1.8rem; margin: 0; }
  .nav a { border: 0; padding: .4rem 0; font-size: .95rem; }
  .nav a[aria-current="page"] { border-bottom: 2px solid var(--cosecha); }
}

/* ---------- Héroe ---------- */
.heroe { background: var(--tinta); color: var(--hueso); padding-block: clamp(3rem, 9vw, 6.5rem); overflow: hidden; }
.heroe .rejilla { display: grid; gap: 3rem; align-items: center; }
.heroe h1 { max-width: 14ch; }
.heroe .lead { color: rgba(255, 248, 237, .85); }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
@media (min-width: 860px) { .heroe .rejilla { grid-template-columns: 1.15fr .85fr; } }

/* ---------- Portadas (marcador CSS hasta tener las imágenes reales) ---------- */
.portada {
  position: relative; aspect-ratio: 2 / 3; width: 100%; max-width: 280px;
  background: var(--tormenta); color: var(--hueso); border-radius: 6px 12px 12px 6px;
  padding: 1.4rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 6px 0 0 rgba(0, 0, 0, .18);
  overflow: hidden; text-decoration: none;
}
.portada::after {
  content: ""; position: absolute; right: -30%; bottom: -18%; width: 90%; aspect-ratio: 1;
  border: 2px solid rgba(255, 123, 0, .55); border-radius: 50%;
}
.portada .col { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cosecha); }
.portada .tit { font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; position: relative; z-index: 1; }
.portada .aut { font-size: .8rem; letter-spacing: .08em; position: relative; z-index: 1; }
.portada.ensayo { background: var(--tinta); box-shadow: 0 18px 40px rgba(0, 0, 0, .25), inset 6px 0 0 rgba(255, 255, 255, .06); border: 1px solid rgba(255, 248, 237, .18); }
.heroe .portada { margin-inline: auto; transform: rotate(2.5deg); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3rem, 8vw, 5.5rem); }
.seccion.hueso-2 { background: var(--hueso-2); }
.seccion.oscura { background: var(--tinta); color: var(--hueso); }
.seccion.oscura p { color: rgba(255, 248, 237, .85); }
.cabecera-seccion { max-width: 62ch; margin-bottom: 2.4rem; }

.tarjetas { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .tarjetas.tres { grid-template-columns: repeat(3, 1fr); } .tarjetas.dos { grid-template-columns: repeat(2, 1fr); } }
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.6rem;
}
.tarjeta h3 { color: var(--tormenta); }
.tarjeta p:last-child { margin-bottom: 0; }

/* Marcas de colección (según las piezas de logotipo) */
.coleccion-marca { display: inline-block; line-height: 1; margin-bottom: .8rem; }
.coleccion-marca small { display: block; font-family: var(--serif); font-size: .8rem; letter-spacing: .14em; color: var(--tormenta); }
.coleccion-marca span { display: block; font-family: var(--serif); font-size: 2.4rem; color: var(--tinta); }

/* ---------- Catálogo ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filtro {
  font: 500 .88rem var(--sans); padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--tinta); background: transparent; color: var(--tinta);
}
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--hueso); }
.catalogo { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.libro-item[hidden] { display: none; }
.libro-item .portada { max-width: 100%; margin-bottom: 1rem; }
.libro-item h3 { font-size: 1.2rem; margin-bottom: .2em; }
.libro-item h3 a { color: var(--tinta); text-decoration: none; }
.libro-item h3 a:hover { color: var(--tormenta); text-decoration: underline; }
.meta { font-size: .85rem; color: #38505b; margin: 0; }
.sello {
  display: inline-block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  padding: .25rem .6rem; border-radius: 999px; background: var(--tormenta); color: var(--hueso); margin-top: .5rem;
}
.sello.pronto { background: var(--cosecha); color: var(--tinta); }

/* ---------- Ficha de libro ---------- */
.ficha { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .ficha { grid-template-columns: 300px 1fr; gap: 4rem; align-items: start; } }
.ficha .portada { max-width: 300px; margin-inline: auto; }
.datos { border-top: 1px solid var(--linea); margin: 1.6rem 0; }
.datos div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.datos dt { color: #38505b; }
.datos dd { margin: 0; font-weight: 500; text-align: right; }
.pendiente { background: rgba(255, 123, 0, .18); padding: 0 .35em; border-radius: 4px; }
.cita {
  border-left: 5px solid var(--cosecha); padding: .4rem 0 .4rem 1.4rem; margin: 2rem 0;
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: var(--tormenta);
}

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 1.1rem; max-width: 620px; }
.campo label { display: block; font-weight: 500; margin-bottom: .35rem; font-size: .92rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; color: var(--tinta); background: #fff;
  border: 2px solid rgba(0, 21, 36, .35); border-radius: 10px; padding: .85rem 1rem;
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tormenta); outline: 3px solid rgba(255, 123, 0, .55); outline-offset: 1px; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; }
.check input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--tormenta); }
.boletin { display: flex; flex-wrap: wrap; gap: .7rem; max-width: 560px; margin-top: 1.2rem; }
.boletin input[type="email"] {
  flex: 1 1 240px; font: inherit; padding: .95rem 1.1rem; border-radius: 999px;
  border: 2px solid transparent; background: var(--hueso); color: var(--tinta);
}
.nota { font-size: .8rem; opacity: .8; margin-top: .6rem; max-width: 560px; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: rgba(255, 248, 237, .8); padding-block: 3rem 2rem; font-size: .92rem; }
.pie a { color: var(--hueso); text-decoration: none; }
.pie a:hover { color: var(--cosecha); text-decoration: underline; }
.pie .rejilla-pie { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie .rejilla-pie { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie h2 { font: 500 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cosecha); margin-bottom: .8rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pie .legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 248, 237, .18); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .heroe .portada { transform: none; }
}

/* ---------- Listas editoriales ---------- */
.lista-simple { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1rem; max-width: 68ch; }
.lista-simple li { padding-left: 1.2rem; border-left: 4px solid var(--cosecha); }
.lista-cap { margin: 0 0 1rem; padding-left: 1.6rem; display: grid; gap: .4rem; }
.lista-cap li::marker { color: var(--tormenta); font-weight: 600; }
.tarjeta ul { margin: 0; padding-left: 1.2rem; }
.heroe h1 .acento { color: var(--cosecha); }

/* ---------- Portada con imagen real ---------- */
.portada-img { padding: 0; background: none; display: block; aspect-ratio: auto; }
.portada-img::after { display: none; }
.portada-img img { width: 100%; height: auto; border-radius: 6px 12px 12px 6px; display: block; }