/*HOJA DE ESTILOS*/
/*============*/
/*ESTILOS DE LA ESTRUCTURA*/
/*MENU NAVEGACION*/
.menu-navegacion {
  height: 100px;
  background-color: black;
}

.custom-logo {
  width: 100px;
}

#menu-menu-superior {
  display: flex;
  gap: 15px;
}

#menu-menu-superior li {
  padding: 0px 0px 20px 0px;
}

#menu-menu-superior li a {
  color: gold;
  font-weight: 500;
}

#menu-menu-superior li a:hover {
  color: var(--color-principal);
}

.navbar-toggler {
  background-color: white;
  border: 1px solid grey;
}

@media (max-width: 576px) {
  .menu-navegacion {
    padding-top: 20px;
  }
}

/*MENU HAMBURGESA*/
@media (max-width: 991.98px) {
  #menu-menu-superior {
    display: block;
    background-color: white;
    margin: 0 !important;
    padding: 0;
    border-radius: 5px;
  }

  #menu-menu-superior li {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid gray;
  }

  #menu-menu-superior li:last-child {
    border-bottom: none;
  }

  #menu-menu-superior li a {
    display: block;
    width: 100%;
    padding: 14px 0;
    margin: 0;
    text-align: center;
    color: black !important;
    text-decoration: none;
  }

  #menu-menu-superior li a:hover {
    background-color: gold;
    color: white !important;
  }
}

.footer-container {
  height: 70px;
  padding-top: 20px;
  background-color: black;
  color: white;
}

/*CSS 2*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*Este vá por todo el sitio*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font-family: 'Quintessential';
  /* Fuente artística */
  background-color: #F5DEB3;
  /* Color de fondo base */
  background-image: url('../../img/bg-sheet2.png');
  /* Imagen de fondo */
  background-size: cover;
  /* Ajusta la imagen al viewport */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita que se repita */
  background-attachment: fixed;
  /* Fondo fijo al hacer scroll */
  background-blend-mode: multiply;
  /* Mezcla con el color base */
}

/* Fuente alternativa disponible */
.lora-font {
  font-family: 'Lora', serif;
  /* Fuente elegante y legible */
}

/* Títulos */
h1,
.autor-titulo,
.poema-titulo,
.selector-title {
  color: #7B1F1F;
}

/* Texto autor */
.autor-texto {
  background-color: #F5DEB3;
  /* Color de fondo base */
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #333;
  line-height: 1.8;
  white-space: pre-line;
}

/* Texto del poema centrado y elegante */
.poema-texto {
  font-family: 'Quintessential', serif;
  line-height: 2.8;
  /* separación entre líneas */
  white-space: pre-line;
  /* respeta saltos de línea del ACF */
  text-align: center;
  /* CENTRAR TODO */
  border-radius: 12px;
  color: #2c2c2c;
  padding: 2rem 3rem;
  /* espacio interno */
  max-width: 900px;
  /* ancho cómodo */
  margin: auto;
  /* centra el bloque */
  background-color: #f5deb373;
}


/* Texto poema con fondo de hoja antigua */
.poema-texto {
  font-family: 'Quintessential';
  line-height: 3;
  /* Aumenta la distancia entre versos */
  white-space: pre-line;
  border-radius: 12px;
  color: #2c2c2c;
  text-align: center;
  letter-spacing: 0.5px;
  /* Opcional: mejora la legibilidad */
  background-color: #f5deb373;
  /* Color de fondo base */
}

/* -------------------------------------
   CHAPTERS — Tarjetas con animación 3D
-------------------------------------- */
.card-container {
  perspective: 1500px;
  /* Mantén solo esto */
}

/* TARJETA MÁS GRANDE */
.card {
  width: 420px;
  /* antes 320px */
  height: 620px;
  /* antes 480px */
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.4s, transform 0.4s ease;
  transform-origin: center bottom;
  cursor: pointer;
  position: relative;
  filter: grayscale(100%);
}

/* Contenedor de la imagen del poeta */
#poeta-img {
  width: 100%;
  max-width: 750px;
  /* Tamaño fijo sugerido */
  height: 650px;
  /* Alto fijo */
  object-fit: cover;
  /* Recorta la imagen manteniendo proporción */
  object-position: center;
  /* Centra el recorte */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* IMAGEN MÁS GRANDE — ocupa el 100% de la tarjeta */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* TÍTULO MÁS GRANDE Y MISMO ESTILO */
.card h3 {
  position: absolute;
  bottom: 15px;
  /* antes 10px */
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px 12px;
  /* antes 15px 10px */
  font-size: 1.7em;
  /* antes 1.3em */
  color: #FFFFFF;
  font-family: 'Quintessential', serif;
  user-select: none;
  line-height: 1.2;
}

/* HOVER ORIGINAL */
.card.hovered {
  filter: grayscale(0%);
  box-shadow: 0 0 50px #7B1F1F;
  /* un poco más fuerte por ser más grande */
  z-index: 10;
  transition: box-shadow 0.3s, filter 0.3s;
}

/* Centrado de las columnas */
.col {
  display: flex;
  justify-content: center;
}

/*Map*/
#vmap {
  width: 100%;
  height: 100vh;
}

#vmap path {
  transition: fill 0.3s ease-in-out;
}