/* ==========================================================================
   Página principal de la novela (La novela): portada y secciones resumen.
   Se carga solo en esa página, después de comun.css.
   ========================================================================== */

/* ---------- Portada / hero ---------- */
.hero {
  background:
    radial-gradient(ellipse at 78% 45%, rgba(139, 69, 19, .38), transparent 60%),
    var(--negro);
  color: var(--crema);
}
.hero-in {
  display: grid; gap: 2.5rem; align-items: center;
  max-width: 1100px; margin: 0 auto;
  padding: 2.5rem 1rem 3rem;
}
.insignia {
  display: inline-block; width: fit-content; max-width: 100%;
  background: rgba(212, 168, 85, .15);
  border: 1px solid rgba(212, 168, 85, .5);
  color: var(--dorado);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.5;
  padding: 6px 14px; border-radius: 2px; margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3.5rem); line-height: 1.08;
  margin-bottom: .5rem;
}
.hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--dorado); }
.hero-sub { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 245, 230, .6); margin-bottom: .4rem; }
.hero-autor { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: rgba(255, 245, 230, .8); margin-bottom: 1.5rem; }
.hero-destacado {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem); line-height: 1.45;
  color: var(--dorado); max-width: 30rem; margin-bottom: 1.5rem; text-wrap: balance;
}
.hero-linea { width: 60px; height: 1px; background: var(--dorado); opacity: .6; margin-bottom: 1.5rem; }
.hero-lema { font-size: 1.05rem; line-height: 1.75; color: rgba(255, 245, 230, .82); max-width: 32rem; margin-bottom: 2rem; }
.hero-botones { display: flex; flex-direction: column; gap: .75rem; }

/* Ilustración detrás y portada real delante, asomando por la izquierda */
.hero-libro { display: flex; justify-content: center; }
.libro-composicion { position: relative; width: 275px; padding: 0 0 28px 75px; }
.hero-arte {
  width: 100%; height: auto;
  border-radius: 4px;
  box-shadow: -8px 8px 30px rgba(0, 0, 0, .6);
}
.portada {
  position: absolute; left: 0; bottom: 0;
  width: 125px; height: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow: -10px 14px 32px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 245, 230, .08);
  transform: rotate(-3deg);
}

@media (min-width: 640px) {
  .hero-botones { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .hero-in { grid-template-columns: 1fr 360px; gap: 4rem; padding: 4.5rem 1.5rem; min-height: 620px; }
  .libro-composicion { width: 360px; padding: 0 0 36px 100px; }
  .portada { width: 165px; }
}

/* ---------- Franja de palabras clave ---------- */
.franja {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem;
  background: var(--marron);
  padding: 1.1rem 1rem;
  color: rgba(212, 168, 85, .85);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
}
.franja span { color: var(--dorado); font-size: 15px; margin-right: .35rem; }

/* ---------- Ya a la venta: anuncio con el libro en 3D ---------- */
.anuncio-in {
  display: grid; gap: 2.25rem; align-items: center;
  max-width: 920px; margin: 0 auto;
  background: var(--tarjeta); border: 1px solid var(--borde); border-top: 3px solid var(--dorado);
  border-radius: 4px; padding: 2.25rem 1.25rem 2rem;
  box-shadow: 0 18px 40px -24px rgba(44, 26, 14, .45);
}
.anuncio-libro {
  display: flex; justify-content: center; perspective: 1100px; padding: 0 0 .5rem;
  filter: drop-shadow(18px 22px 18px rgba(44, 26, 14, .4)); /* aquí y no en .libro3d: un filtro aplana el 3D */
}
.anuncio-titulo {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; color: var(--marron); text-wrap: balance;
}
.anuncio-titulo em { font-style: italic; color: var(--cobre); }
.anuncio .regla { margin: 1rem 0 1.25rem; }
.anuncio-cita { margin: 0 0 1.25rem; font-size: 1.15rem; }
.anuncio-regalo { background: var(--papel); border: 1px dashed var(--borde); border-radius: 4px; padding: .9rem 1.1rem; }
.anuncio-regalo span { margin-right: .3rem; }
.anuncio-botones { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.btn-tinta { color: var(--marron); border-color: var(--marron); }
.btn-tinta:hover { background: var(--marron); color: var(--crema); }

/* Libro en 3D (tapa blanda de 412 páginas: 2,6 cm de grosor sobre 14 cm de ancho) */
.libro3d {
  --w: 170px; --h: 272px; --t: 32px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d; transform: rotateY(-28deg);
}
.libro3d > div { position: absolute; backface-visibility: hidden; }
.libro3d-frente {
  inset: 0; border-radius: 1px 3px 3px 1px;
  transform: translateZ(calc(var(--t) / 2));
  background: url("../img/portada-600.webp") center / 100% 100%;
}
.libro3d-frente::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 1.5%, rgba(255, 255, 255, .2) 3%, rgba(0, 0, 0, .18) 4.6%, rgba(0, 0, 0, 0) 7%),
    linear-gradient(112deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .14) 100%);
}
.libro3d-trasera { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: #4a0a1c; }
.libro3d-canto {
  top: 2px; bottom: 2px; width: var(--t); left: calc((var(--w) - var(--t)) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 1px));
  background:
    linear-gradient(90deg, #6d1029 0, #6d1029 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #6d1029 calc(100% - 1.5px)),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .22) 100%),
    repeating-linear-gradient(90deg, #faf5ea 0, #faf5ea 1.1px, #ddd2bc 1.1px, #ddd2bc 1.8px);
}
.libro3d-lomo {
  top: 0; bottom: 0; width: var(--t); left: calc((var(--w) - var(--t)) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(90deg, #3e0817, #6d1029 50%, #3e0817);
}

@media (min-width: 640px) {
  .anuncio-botones { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 760px) {
  .anuncio-in { grid-template-columns: 240px 1fr; gap: 3rem; padding: 2.75rem 2.75rem 2.5rem 2rem; }
  .libro3d { --w: 200px; --h: 320px; --t: 37px; }
}

/* ---------- Presentaciones (datos en src/presentaciones.json) ---------- */
.sec-presentaciones { background: var(--papel); border-top: 3px solid #6E1423; }
.presentaciones-lista { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
.presentacion {
  display: grid; overflow: hidden;
  background: var(--tarjeta); border: 1px solid var(--borde); border-top: 3px solid var(--dorado); border-radius: 4px;
  box-shadow: 0 18px 40px -24px rgba(44, 26, 14, .45);
}
.presentacion-cartel { display: block; background: #0d1a33; }
.presentacion-cartel img { width: 100%; height: auto; transition: transform .4s ease; }
.presentacion-cartel:hover img { transform: scale(1.02); }
.presentacion-cuerpo { padding: 1.5rem 1.25rem 1.6rem; }
.presentacion-fecha { font: 700 13px/1.3 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: #6E1423; margin-bottom: .45rem; }
.presentacion-titulo { font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 4.4vw, 1.6rem); line-height: 1.25; color: var(--marron); text-wrap: balance; }
.presentacion-lugar { margin-top: .5rem; color: var(--tinta); }
.presentacion-detalle { margin-top: .35rem; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--etiqueta); }
.presentacion-botones { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.3rem; }
.presentacion-botones .btn { text-align: center; }
.presentacion-google { margin-top: .7rem; font-size: 14px; }
.presentaciones-mas { margin-top: 1.75rem; text-align: center; color: var(--tinta); }
@media (min-width: 640px) {
  .presentacion-botones { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 860px) {
  .presentacion.con-cartel { grid-template-columns: 460px 1fr; align-items: center; }
  .presentacion-cartel { height: 100%; display: flex; align-items: center; }
  .presentacion-cuerpo { padding: 1.75rem 2rem; }
}
@media (prefers-reduced-motion: reduce) { .presentacion-cartel img { transition: none; } }

/* ---------- Secciones generales ---------- */
.sec { padding: 3.5rem 1rem; }
.sec-in { max-width: 920px; margin: 0 auto; }
.sec-estrecha { max-width: 760px; }
.sec-sepia { background: var(--sepia); }
.sec-oscura { background: var(--negro); color: var(--crema); }

.etiqueta { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--etiqueta); margin-bottom: .5rem; }
.etiqueta-oro { color: var(--dorado); }
.trailer { margin-top: 2.5rem; }
/* La imagen previa del tráiler lleva el título a la izquierda: el botón va
   debajo de él, en la zona oscura, para no tapar ni el título ni las caras */
.trailer .video-boton {
  position: absolute; left: 29.3%; top: 90%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .6rem; white-space: nowrap;
  padding: .4rem 1rem .4rem .4rem; border-radius: 999px;
  background: rgba(21, 10, 4, .6); border: 1px solid rgba(212, 168, 85, .55);
}
.trailer .video-icono { width: 40px; height: 40px; }
.trailer .video-icono::after { left: 15px; top: 12px; border-width: 8px 0 8px 13px; }
@media (max-width: 600px) {
  .trailer .video-boton { padding: .25rem .7rem .25rem .25rem; gap: .4rem; }
  .trailer .video-icono { width: 26px; height: 26px; }
  .trailer .video-icono::after { left: 10px; top: 8px; border-width: 5px 0 5px 8px; }
  .trailer .video-texto { font-size: 10px; letter-spacing: 1.5px; }
}
.titulo { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.25; color: var(--marron); }
.sec-oscura .titulo { color: var(--crema); }
.subtitulo { font-size: 14px; letter-spacing: 1px; color: rgba(255, 245, 230, .7); margin-top: .25rem; }
.regla { width: 50px; height: 2px; background: var(--dorado); margin: 1rem 0 1.75rem; }

.texto { font-size: 1.0625rem; line-height: 1.85; color: var(--tinta); margin-bottom: 1rem; }
.texto a { color: var(--cobre); text-decoration-color: var(--dorado); text-underline-offset: 3px; }

.cita {
  font-family: var(--serif); font-style: italic;
  font-size: 1.2rem; line-height: 1.7; color: var(--cobre);
  border-left: 3px solid var(--dorado); padding-left: 1.25rem;
  margin: 2rem 0;
}

@media (min-width: 900px) {
  .sec { padding: 5rem 1.5rem; }
  .cita { font-size: 1.35rem; padding-left: 1.5rem; }
}

/* ---------- Línea de tiempo ---------- */
.tl { margin: 2rem 0 3rem; }
.tl-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 1rem;
  padding-bottom: 1.75rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(139, 99, 64, .3);
}
.tl-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.tl-ano { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; line-height: 1.3; color: var(--dorado); }
.tl-evento { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--crema); margin-bottom: .3rem; }
.tl-desc { font-size: .95rem; line-height: 1.7; color: rgba(255, 245, 230, .75); }
@media (min-width: 640px) {
  .tl-item { grid-template-columns: 90px 1fr; gap: 1.5rem; }
  .tl-ano { font-size: 1.5rem; }
}

.video-titulo-seccion { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.4; color: var(--crema); margin-bottom: 1.25rem; }

/* ---------- Personajes ---------- */
.rejilla-pj { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.pj-card { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; }
.pj-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pj-simbolo {
  height: 110px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--marron), #6B3A2A);
  color: var(--dorado); font-size: 3.5rem;
}
@media (min-width: 600px) {
  .pj-simbolo { height: auto; aspect-ratio: 1 / 1; font-size: 4.5rem; }
}
.pj-cuerpo { padding: 1.25rem; }
.pj-nombre { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--marron); margin-bottom: .2rem; }
.pj-tipo { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--etiqueta); margin-bottom: .6rem; }
.pj-desc { font-size: .95rem; line-height: 1.6; color: var(--marron-suave); }
@media (min-width: 600px) { .rejilla-pj { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rejilla-pj { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Mapas ---------- */
.rejilla-mapas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.mapa-card { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.mapa-enlace { display: block; background: var(--sepia); cursor: zoom-in; }
.mapa-enlace img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.mapa-cuerpo { padding: 1rem 1.25rem 1.25rem; display: block; }
.mapa-titulo { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--marron); margin-bottom: .25rem; }
.mapa-desc { display: block; font-size: .92rem; line-height: 1.55; color: var(--marron-suave); }
.nota-mapas { margin-top: 1rem; font-size: 13px; color: var(--etiqueta); text-align: center; }
@media (min-width: 700px) { .rejilla-mapas { grid-template-columns: repeat(2, 1fr); } }

/* Visor de mapas ampliados */
.visor { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.visor::backdrop { background: rgba(15, 7, 2, .88); }
.visor figure { display: flex; flex-direction: column; align-items: center; }
.visor img { max-width: 96vw; max-height: 82vh; width: auto; height: auto; border-radius: 3px; background: var(--sepia); }
.visor figcaption { margin-top: .75rem; color: var(--crema); font-family: var(--serif); text-align: center; }
.visor-cerrar {
  position: absolute; right: 4px; top: -46px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--dorado); color: var(--negro); font-size: 1.6rem; line-height: 1; cursor: pointer;
}

/* ---------- Compasión (texto + vídeo) ---------- */
.dos-col { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ---------- Autor ---------- */
.autor-grid { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.autor-avatar {
  width: 130px; height: 130px; border-radius: 50%;
  background: linear-gradient(135deg, #6B3A2A, var(--cobre));
  object-fit: cover; object-position: 50% 18%;
}
.autor-bio { font-size: 1.0625rem; line-height: 1.85; color: var(--tinta); }
.autor-bio a { text-decoration-color: var(--dorado); text-underline-offset: 3px; }
.etiquetas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 1.25rem; }
.etiquetas li { background: var(--papel); border: 1px solid var(--borde); padding: 5px 14px; border-radius: 20px; font-size: 12px; color: var(--marron-suave); }
.autor-red {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem;
  color: var(--cobre); font-weight: 700; font-size: .95rem; text-decoration: none;
  border-bottom: 2px solid var(--dorado); padding-bottom: 2px;
}
.autor-red svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 700px) {
  .autor-grid { grid-template-columns: 140px 1fr; gap: 2.5rem; align-items: start; justify-items: start; text-align: left; }
  .etiquetas { justify-content: flex-start; }
}

/* ---------- Preguntas frecuentes ---------- */
.faq details { border-bottom: 1px solid var(--borde); }
.faq details:first-child { border-top: 1px solid var(--borde); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--marron);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; color: var(--cobre); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1.25rem; font-size: 1rem; line-height: 1.8; color: var(--marron-suave); }
.faq-enlace {
  display: inline-block; margin-top: 1.75rem;
  color: var(--cobre); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--dorado); padding-bottom: 2px;
}

/* ---------- Comprar ---------- */
.sec-compra { background: var(--marron); color: var(--crema); padding: 4rem 1rem; }
.compra-in { max-width: 560px; margin: 0 auto; text-align: center; }
.compra-titulo { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 6vw, 2.2rem); margin-bottom: .5rem; }
.compra-sub { color: rgba(255, 245, 230, .7); margin-bottom: 2rem; }
.compra-portada {
  width: 150px; height: auto; margin: 0 auto 2rem;
  border-radius: 2px 5px 5px 2px;
  box-shadow: -8px 10px 28px rgba(0, 0, 0, .6);
}
.precio-caja {
  background: rgba(212, 168, 85, .08); border: 1px solid rgba(212, 168, 85, .35);
  border-radius: 4px; padding: 1.75rem 1.5rem; max-width: 380px; margin: 0 auto 2rem;
}
.precio-pvp { font-size: .9rem; color: rgba(255, 245, 230, .65); margin-bottom: .25rem; }
.precio-actual { font-size: 3rem; font-weight: 400; line-height: 1.1; color: var(--crema); }
.precio-formato { font-size: .85rem; color: rgba(255, 245, 230, .65); margin-top: .6rem; }
.garantia { color: rgba(255, 245, 230, .6); font-size: .85rem; margin-top: 1.25rem; }


/* ---------- Enlaces "Ver más" hacia cada página ---------- */
.seccion-mas {
  display: inline-block; margin-top: 1.75rem;
  color: var(--cobre); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--dorado); padding-bottom: 2px;
}
.sec-oscura .seccion-mas { color: var(--dorado); }
.seccion-mas:hover { border-bottom-color: currentColor; }
.seccion-enlaces { display: flex; flex-wrap: wrap; gap: 0 2rem; }

/* ---------- En pocas palabras: ficha del libro ---------- */
.ficha-libro { display: grid; gap: 0; margin: 1.5rem 0 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.ficha-libro > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--sepia); font-size: 15px; line-height: 1.5; }
.ficha-libro > div:last-child { border-bottom: 0; }
.ficha-libro dt { color: var(--etiqueta); font-weight: 700; }
.ficha-libro dd { margin: 0; color: var(--tinta); }
.ficha-libro a { color: var(--cobre); text-underline-offset: 3px; }
@media (min-width: 760px) { .ficha-libro { grid-template-columns: 1fr 1fr; } .ficha-libro > div { grid-template-columns: 6rem 1fr; } }