:root {
  --crema:        #f7f1e8;
  --crema-oscuro: #ece2d0;
  --marron:       #6b4d3a;
  --marron-oscuro:#3f2e22;
  --negro-suave:  #2a2320;
  --blanco:       #fffaf3;
  --morado-suave: #a892b0;

  --fuente-titulo: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --fuente-cuerpo: -apple-system, 'Segoe UI', Verdana, sans-serif;
  --fuente-firma:  Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
--fuente-nombre: 'Love Light', cursive;


}

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background:  linear-gradient(rgba(42, 35, 32, 0.35), rgba(42, 35, 32, 0.55)),
  url('fondo.jpeg') center center / cover no-repeat fixed;
  color: var(--marron-oscuro);
  font-family: var(--fuente-cuerpo);
  line-height: 1.7;
  position: relative;
  overflow-x: hidden;
}

.room {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}

/* =========================================================
   DECORACIÓN DE FONDO (estrellas discretas)
   ========================================================= */
.decor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.decor.star {
  position: absolute;
  color: var(--morado-suave);
  opacity: 0.35;
  font-size: 1.2rem;
}

/* =========================================================
   CABECERA
   ========================================================= */
.entrada {
  text-align: center;
  margin-bottom: 3rem;
  margin-top: -4rem;
}
.nombre {
  font-family: var(--fuente-nombre);
  font-style: italic;
  font-weight: 600;
  font-size: 5.5rem;
  color: var(--crema);
  margin-bottom: 0.5rem;
}
  .subtitulo {
  font-size: 1rem;
  color: var(--crema);
  text-align: left;
  margin: 0;
}


/* =========================================================
   BIENVENIDA
   ========================================================= */
.bienvenida {
  position: relative;
  padding: 2rem 2.2rem;
  margin-bottom: 2.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.bienvenida p {
  font-size: 1.02rem;
  margin: 0;
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.decor.lampara {
  position: absolute;
  top: -18px;
  left: -18px;
  font-size: 1.6rem;
  opacity: 0.8;
}


/* =========================================================
   REPRODUCTOR DE MÚSICA
   ========================================================= */
.reproductor {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--marron-oscuro);
  color: var(--crema);
  border-radius: 12px;
  padding: 1.2rem 1.6rem;
  margin-bottom: 3rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}
.disco {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: girar 6s linear infinite;
  animation-play-state: paused; /* arranca solo cuando suena la música */
  transform-origin: center center;
}
.disco.girando {
  animation-play-state: running;
}
@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.info-cancion { flex: 1; }
.titulo-cancion {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.15rem;
  margin: 0;
}
.artista-cancion {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0 0 0.6rem 0;
}
.controles {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
#btn-play {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--crema);
  padding: 0;
  outline: none;
  transition: transform 0.3s ease, background 0.3s ease;
}
#btn-play:hover {
  transform: scale(1.08);
  background: rgba(255,255,255,0.15);
}
#btn-play:focus {
  outline: none;
}
.barra-progreso {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
}
.barra-relleno {
  height: 100%;
  width: 0%;
  background: var(--morado-suave);
  transition: width 0.2s linear;
}

/* =========================================================
   GRID DE ACCESOS A SECCIONES
   ========================================================= */
/* Grid de accesos: cuadrado, no "banderas" */
.accesos{
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.marco{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.7rem;

    height: 145px;      /* antes 120px */

    text-decoration: none;
    color: var(--crema);

    background: url('caja.jpeg') repeat;
    background-size: 100px 100px;

    border-radius: 8px;
    padding: 1.7rem 1rem;   /* un poco más de aire */

    font-size: 1.9rem;      /* icono más grande */

    text-align: center;

    box-shadow: 0 3px 10px rgba(63,46,34,.06);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}
.marco span {
    font-size: 0.88rem;   /* antes 0.78rem */
    line-height: 1.35;
}
.marco:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(63, 46, 34, 0.14);
}
.banner-separador {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 2.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.banner-chico {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 auto 1.5rem auto;

}
/* =========================================================
   CUADRO "LA LUZ ESTÁ ENCENDIDA"
   ========================================================= */
.cuadro-luz {
  text-align: center;
  padding: 1.6rem;
  margin-bottom: 2.5rem;
  margin-top: -3rem;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   DESPEDIDA FINAL
   ========================================================= */
.despedida {
  text-align: left;
  font-family: var(--fuente-firma);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--crema);
  max-width: 600px;
  margin: 0 auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 480px) {
  .nombre { font-size: 2.3rem; }
  .reproductor { flex-direction: column; align-items: flex-start; }
}
/* Contenedor de las páginas de sección (MBTI, Diario, etc.) */
.pagina-seccion {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  color: var(--marron-oscuro);
}
.pagina-seccion h1 {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 2rem;
}
.pagina-seccion p {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1.8rem;
}
.volver {
  display: inline-block;
  margin-top: 2rem;
  color: var(--marron);
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.3s ease;
}
.volver:hover {
  opacity: 0.6;
}
/* =========================================================
   NOTAS DEL SITIO (bitácora)
   ========================================================= */
.notas-sitio {
  max-width: 600px;
  margin: 0 auto 3rem auto;
  padding: 0 1rem;
}
.notas-sitio h2 {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.5rem;
  color: var(--crema);
  text-align: center;
  margin-bottom: 1.8rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);

}

.nota {
background:  linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)),
    url('violet-plaid.jpeg') center center / cover no-repeat;  
  border-left: 3px solid var(--negro-suave);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

}
.nota-fecha {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  color: var(--crema);
  opacity: 0.75;
  margin: 0 0 0.3rem 0;
  letter-spacing: 0.03rem;
}
.nota-titulo {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.1rem;
  color: var(--crema);
  margin: 0 0 0.4rem 0;
}
.nota-texto {
 font-family: 'JetBrains Mono', 'Fira Code', monospace;
  opacity: 0.85;
  font-size: 0.95rem;
  color: var(--crema);
  line-height: 1.7;
  margin: 0;
}

/* Fondo exclusivo de la página de MBTI */
body.pagina-mbti {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('../morado.jpeg') center center / cover no-repeat fixed;
}
body.pagina-mbti .pagina-seccion h1,
body.pagina-mbti .pagina-seccion p,
body.pagina-mbti .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.imagen-mediana {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto 2.5rem auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.apartado {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 0.9rem 1.4rem;
  margin-bottom: 1rem;
}
.apartado summary {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--crema);
  cursor: pointer;
  list-style: none;
}
.apartado summary::-webkit-details-marker {
  display: none;
}
.apartado summary::before {
  content: '+ ';
  color: var(--morado-suave);
}
.apartado[open] summary::before {
  content: '– ';
}
.apartado p {
  color: var(--crema);
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0.8rem 0 0.2rem 0;
}
/* Gatito decorativo, esquina inferior derecha */
.decor-gato {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 400px;
  height: auto;
  opacity: 0.95;
}

/* Columna de 3 fotos tipo "cuadros" del lado izquierdo */
.cuadros-izquierda {
  position: absolute;
  top: 20%;
  left: 2%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.cuadro-foto {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 4px solid var(--crema);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transform: rotate(-2deg);
}
.cuadro-foto:nth-child(2) {
  transform: rotate(2deg);
  margin-left: 1rem;
}
.cuadro-foto:nth-child(3) {
  transform: rotate(-1deg);
}
.nombre {
  animation: brillo-suave 4s ease-in-out infinite;
}

@keyframes brillo-suave {
  0%, 100% {
    text-shadow: 0 0 4px rgba(247, 241, 232, 0.15);
  }
  50% {
    text-shadow: 0 0 9px rgba(247, 241, 232, 0.35);
  }
}

/* fondo de seccion fotografias */
body.pagina-fotografias {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('verde.jpeg') center center / cover no-repeat fixed;
}

body.pagina-fotografias .pagina-seccion h1,
body.pagina-fotografias .pagina-seccion p,
body.pagina-fotografias .volver {

  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
} 

/* reglas nuevas para las fotos y sus apartados en seccion fotografia*/

.bloque-foto {
  max-width: 460px;
  margin: 0 auto 1.8rem auto;
}
.foto-galeria {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}
.detalle-foto {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}
.detalle-foto summary {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1rem;
  color: var(--crema);
  cursor: pointer;
  list-style: none;
}
.detalle-foto summary::-webkit-details-marker {
  display: none;
}
.detalle-foto summary::before {
  content: '+ ';
  color: var(--morado-suave);
}
.detalle-foto[open] summary::before {
  content: '– ';
}
.detalle-foto p {
  color: var(--crema);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0.6rem 0 0 0;
}
.reloj {
  position: fixed;
  bottom: 15px;
  left: 2%;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1rem;
  color: var(--crema);
  opacity: 0.75;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05rem;
}
.fila-subtitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 560px;
  margin: 0 auto;
}
.gif-cafecito {
  width: 70px;
  height: auto;
  flex-shrink: 0;
  border-radius: 8px;
}
/* Fondo exclusivo de la página de Música */
body.pagina-musica {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('etereo.jpeg') center center / cover no-repeat fixed;
}
body.pagina-musica .pagina-seccion h1,
body.pagina-musica .pagina-seccion p,
body.pagina-musica .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}  

/* Filas de banda/solista: texto a la izquierda, foto a la derecha */


.columna-fotos-banda {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  flex-shrink: 0;
  margin-top: 4rem;
}
.banda-foto-chica {
  width: 380px;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.fila-banda {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
  width: 100%;
}
.banda-texto {
  flex: 1;
  min-width: 0;
}
.banda-foto {
  width: 380px;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

@keyframes flotar {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 20px 24px rgba(0, 0, 0, 0.15);
  }
}

.banda-nombre {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.6rem;
  margin: 0 0 0.6rem 0;
  text-align: left;
}
.fila-banda .banda-desc {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 0.6rem 0;
  text-align: left;
}
.subtitulo-texto + .banda-desc,
.banda-desc + .banda-desc {
  margin: 0 0 0.6rem 0;
}


body.pagina-musica .pagina-seccion h1 {
  font-size: 3rem;
}
body.pagina-musica .pagina-seccion {
  margin: 0 auto 0 5%;
  max-width: 1300px;
}

body.pagina-fanarts {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('sebastian.jpeg') center center / cover no-repeat fixed;
}
body.pagina-fanarts .pagina-seccion h1,
body.pagina-fanarts .pagina-seccion p,
body.pagina-fanarts .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Contenedor más ancho, para que entren 4 fotos por fila cómodamente */
.pagina-seccion-ancha {
  max-width: 950px;
}

/* Título de cada mini-sección */
.mini-titulo {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  margin: 2.5rem 0 1.2rem 0;
  text-align: center;
}

/* Grid de 4 columnas para las galerías */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.item-galeria {
  display: flex;
  flex-direction: column;
}
.foto-galeria-chica {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Reutilizamos el mismo estilo de desplegable que en Fotografías */
.detalle-foto {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}
.detalle-foto summary {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--crema);
  cursor: pointer;
  list-style: none;
}
.detalle-foto summary::-webkit-details-marker {
  display: none;
}
.detalle-foto summary::before {
  content: '+ ';
  color: var(--morado-suave);
}
.detalle-foto[open] summary::before {
  content: '– ';
}
.detalle-foto p {
  color: var(--crema);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0.5rem 0 0 0;
}
 .foto-completa {
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
}


body.pagina-redes {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('azulcito.jpeg') center center / cover no-repeat fixed;
}
body.pagina-redes .pagina-seccion h1,
body.pagina-redes .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Tarjetas de redes sociales */
.tarjeta-red {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.2rem;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tarjeta-red:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.red-icono-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}
.red-info {
  display: flex;
  flex-direction: column;
}
.red-nombre {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--crema);
}
.red-desc {
  font-size: 0.85rem;
  color: var(--crema);
  opacity: 0.75;
}

body.pagina-animes {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('estrellanaranja.jpeg') center center / cover no-repeat fixed;
}
body.pagina-animes .pagina-seccion h1,
body.pagina-animes .pagina-seccion p,
body.pagina-animes .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
body.pagina-animes .pagina-seccion {
  margin: 0 auto;
  width: 96vw;
  max-width: 1550px;

}
.anime-foto {
  float: right;
  flex-shrink: 0;
   width: 620px;
  height: 400px;;
  object-fit: cover;
  border-radius: 8px;
  margin: 0.3rem 0 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
html, body {
  overflow-x: hidden;
}

.separador-ancho {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 170px;
  object-fit: contain;
  border-radius: 6px;
  margin: 1.5rem 0;
}

.subtitulo-texto {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--crema);
  opacity: 1;
  margin: 1.8rem 0 0.6rem 0;
  text-align: left;
}


/* Fondo exclusivo de Personajes favoritos */
body.pagina-personajes {
  background:
    linear-gradient(rgba(42, 35, 32, 0.4), rgba(42, 35, 32, 0.6)),
    url('libro.jpeg') center center / cover no-repeat fixed;
}
/* Contenedor exclusivo para la página Personajes */
body.pagina-personajes .pagina-seccion {
  max-width: 1350px;
  width: 95%;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}




body.pagina-personajes .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* seccion personajes fav*/
body.pagina-personajes .pagina-seccion h1{
  max-width: 1450px; 
  width: 95%; 
  margin: 0 auto; 
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.subtitulo-seccion {
  width:760px;
  max-width: 90%;
  margin: 1.5rem auto  2.5rem auto;
  line-height: 1.8;
  text-align: justify;
  text-align-last: center;
    color: var(--crema);
    opacity: 85%; 
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  
}

/* seccion personajes fav */


/* Caja semi-transparente con la info del personaje */
.caja-personaje {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 2.6rem 3rem;
  margin-bottom: 2rem;
  
  flex: 1; 
  max-width: none;
  width: 100%
}
.personaje-nombre {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.03rem;
  color: var(--crema);
  text-align: left;
  margin: 0 0 1rem 0;
}
.personaje-subtitulo {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--crema);
  text-align: left;
  margin: 1.4rem 0 0.5rem 0;
}
.personaje-texto {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--crema);
  text-align: left;
  margin: 0;
}
.jumin-ilustracion { 
  width: 285px;
  height: 560px;
object-fit: contain; 
}

/* Cuadros tipo fotos colgadas, fijos a la izquierda */
.cuadros-lateral-personaje {
  position: absolute;
  top: 250px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  z-index: 5;
}
.cuadro-foto-personaje {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 4px solid var(--crema);
  border-radius: 4px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
}
.cuadro-foto-personaje:nth-child(2) {
  transform: rotate(2deg);
  margin-left: 0.8rem;
}
.cuadro-foto-personaje:nth-child(3) {
  transform: rotate(-1deg);
}

/* Gif anclado a un grupo de capítulos específico (no a toda la página) */
.grupo-capitulos {
  position: relative;
}
.gif-anclado-capitulo {
  position: absolute;
  width: 130px;
  height: auto;
  border-radius: 8px;
  z-index: 5;
}

/* Capítulos desplegables */
.capitulo-desplegable {
  margin: 1.2rem 0;
}
.capitulo-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.04rem;
  color: var(--morado-suave);
  text-align: left;
  cursor: pointer;
  list-style: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.capitulo-titulo::-webkit-details-marker {
  display: none;
}
.capitulo-titulo::before {
  content: '+ ';
}
.capitulo-desplegable[open] .capitulo-titulo::before {
  content: '– ';
}
.capitulo-desplegable p {
  margin-top: 1.2rem;
}

.fila-personaje {
  display: flex;
 align-items: flex-start;
 justify-content: flex-start;
 width: 100%; 
 gap: 1.5rem; 
 padding-left: 3.5rem;
 margin-top: 3.5rem; 
}
.ilustracion-personaje {
  width: 285px;
  height: 570px;
  object-fit: contain;
  border-radius: 6px;
  
    margin-top: -35px;

  flex-shrink: 0;
}

.header-personajes {
  margin: 0 auto 3rem auto; 
  position: relative;
  text-align: center;
  padding: 2rem 0;
}
.imagen-detras-titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 860px !important;
  max-width: none !important;
  height: 320px;
  z-index: -1;
  opacity: 0.85;
  border-radius: 8px;
}

.imagen-debajo-caja {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 2.5rem auto;
  border-radius: 8px;
}


.bienvenida-fila {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.foto-circular-decorada {
  position: relative;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}
.foto-circular {
  position: relative;
  z-index: 3;
  width: 180px;
  height: 180px;
  object-fit: cover;
    border-radius: 50%;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.cuadro-detras {
  position: absolute;
  width: 70px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.cuadro-detras-1 {
  top: -10px;
  left: -30px;
  transform: rotate(-15deg);
  z-index: 1;
}
.cuadro-detras-2 {
  bottom: -15px;
  right: -25px;
  transform: rotate(12deg);
  z-index: 2;
}
.bienvenida-texto {
  flex: 1;
  text-align: left;
  margin: 0;
}
.subtitulo-integrado {
  font-style: italic;
  opacity: 0.9;
}

.iframe-guestbook {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 750px;
  margin: 0 auto 2rem auto;
  border: none;
  border-radius: 8px;
}
body.pagina-guestbook .pagina-seccion h1 {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.guestbook-contenedor {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
.tapa-titulo-guestbook {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  z-index: 2;
  pointer-events: none;
}
.tapa-abajo-guestbook {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 0 0 8px 8px;
  z-index: 2;
  pointer-events: none;
}
body.pagina-guestbook {
  background:
    linear-gradient(rgba(42, 35, 32, 0.45), rgba(42, 35, 32, 0.65)),
    url('fondoparalibro.jpeg') center center / cover no-repeat fixed;
}
body.pagina-guestbook .pagina-seccion h1,
body.pagina-guestbook .volver {
  color: var(--crema);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
/* Portada del álbum, estilo vintage cálido */
.reproductor-portada-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.reproductor-portada {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid rgba(247, 241, 232, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Contenedor de las notas musicales flotantes */
.notas-musicales {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.nota-flotante {
  position: absolute;
  bottom: 10%;
  font-size: 1.1rem;
  color: var(--morado-suave);
  text-shadow: 0 0 6px rgba(168, 146, 176, 0.6);
  animation-name: flotar-nota;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes flotar-nota {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-55px) scale(1.1);
  }
}
/* =========================================================
   EMBED ME
   ========================================================= */
.embed-me-seccion {
 background:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)),
    url('sdvcartel.jpg') center center / cover no-repeat;  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 2.5rem 0;
  max-width: 400px; 
}
.embed-me-titulo {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.3rem;
  color: var(--morado);
  margin: 0 0 1.2rem 0;
  text-align: center;
}
.embed-me-fila {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.embed-me-boton {
  flex-shrink: 0;
    width: 120px;
      margin-top: -20px;

  height: auto;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.embed-me-codigo-wrap {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.embed-me-textarea {
  width: 100%;
  height: 60px;
  resize: none;
  background: rgba(0, 0, 0, 0.35);
  color: var(--crema);
  border: 1px solid var(--marron);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  padding: 0.5rem;
}
.embed-me-btn-copiar {
  align-self: flex-start;
  background: var(--morado-suave);
  color: var(--marron-oscuro);
  border: none;
  border-radius: 6px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.embed-me-btn-copiar:hover {
  opacity: 0.85;
}

/* =========================================================
   LINKS / MIS AMIGOS
   ========================================================= */
.amigos-seccion {
    position: relative;

   background:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
    url('sdvcartel.jpg') center center / contain no-repeat;
  border-radius: 10px;
  padding: 1rem 1rem;
  margin: 2.5rem 0;
  max-width: 400px;
}
.gif-esquina-amigos {
  position: absolute;
  bottom: 270px;
  right: 720px;
  width: 70px;
  height: auto;
  pointer-events: none;
}
.amigos-titulo {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;

  font-size: 1.3rem;
  color: var(--morado-);
  margin: 0 0 1.2rem 0;
  text-align: center;
}
.amigos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
.amigos-boton {
  display: block;
  transition: transform 0.3s ease;
}
.amigos-boton:hover {
  transform: translateY(-3px);
}
.amigos-boton img {
  display: block;
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
/* =========================================================
   REPRODUCTOR ESTILO IPOD (playlist de YouTube)
   ========================================================= */
.ipod-widget {
  all: initial;
  display: block;
  font-family: var(--fuente-cuerpo), sans-serif;
}

.ipod-widget .ipod {
  width: 200px;
  background: var(--marron-oscuro);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  text-align: center;
  margin: 20px auto;
  border: 1px solid rgba(247, 241, 232, 0.15);
  position: relative;
  overflow: hidden;
}

.ipod-widget .youtube-hidden-container {
  width: 2px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.01;
  overflow: hidden;
}

.ipod-widget .screen {
  background: #1a1310;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.5);
}

.ipod-widget .screen img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--morado-suave);
}

.ipod-widget .screen p {
  font-family: 'Slackey', cursive;
  font-size: 13px;
  color: var(--crema);
  margin: 5px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.ipod-widget .time-display {
  font-size: 10px;
  color: var(--crema);
  opacity: 0.7;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.ipod-widget .progress-container {
  width: 100%;
  background: rgba(247, 241, 232, 0.15);
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 5px;
  position: relative;
}

.ipod-widget .progress-bar {
  background: var(--morado-suave);
  height: 100%;
  width: 0%;
  border-radius: 3px;
}

.ipod-widget .controls-wheel {
  position: relative;
  width: 140px;
  height: 140px;
  background: var(--crema);
  border-radius: 50%;
  margin: 20px auto 5px auto;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2), inset 0 2px 5px rgba(0,0,0,0.05);
}

.ipod-widget .ipod-btn {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}

.ipod-widget .ipod-btn:active {
  transform: scale(0.85);
}

.ipod-widget .btn-play-pause {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--blanco);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
}
.ipod-widget .btn-play-pause:active {
  transform: translate(-50%, -50%) scale(0.9);
}

.ipod-widget .play-icon {
  display: block;
  transition: all 0.1s ease;
}

.ipod-widget .state-paused .play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid var(--marron-oscuro);
  margin-left: 4px;
}

.ipod-widget .state-playing .play-icon {
  width: 12px;
  height: 14px;
  border-left: 4px solid var(--marron-oscuro);
  border-right: 4px solid var(--marron-oscuro);
  box-sizing: border-box;
}

.ipod-widget .btn-prev {
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}
.ipod-widget .btn-prev:active {
  transform: translateY(-50%) scale(0.85);
}
.ipod-widget .icon-prev {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid var(--marron-oscuro);
  position: relative;
}
.ipod-widget .icon-prev::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid var(--marron-oscuro);
}

.ipod-widget .btn-next {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.ipod-widget .btn-next:active {
  transform: translateY(-50%) scale(0.85);
}
.ipod-widget .icon-next {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--marron-oscuro);
  position: relative;
}
.ipod-widget .icon-next::after {  
  content: '';
  position: absolute;
  top: -6px;
  right: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--marron-oscuro);
}


/* =========================================================
   LAYOUT DE 3 COLUMNAS (nueva estructura de navegación)
   ========================================================= */

.layout-3-columnas {
  display: flex;
  align-items: flex-start;

  gap: 1.1rem;

  max-width: 1500px;
  margin: 0 auto;
  padding: 1rem 1rem;
}


/* =========================================================
   COLUMNA IZQUIERDA
   ========================================================= */

.columna-izquierda-fija {
  flex: 0 0 220px;

  position: sticky;
  top: 1rem;

  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}


/* =========================================================
   COLUMNA DERECHA
   ========================================================= */

.columna-derecha-fija {
  flex: 0 0 215px;

  position: sticky;
  top: 1rem;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /*
     La columna conserva su espacio dentro del layout,
     pero visualmente se desplaza hacia la derecha.
  */
  transform: translateX(35px);
}


/* =========================================================
   COLUMNA CENTRAL
   ========================================================= */

.columna-central {
  flex: 1;
  min-width: 0;
  min-height: 400px;

  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;

  /*
     Un poco menos de espacio interno para que
     el contenido respire sin ocupar tanto.
  */
  padding: 1.25rem;

  color: var(--crema);

  /*
     Tamaño general del texto.
  */
  font-size: 0.88rem;
  line-height: 1.5;
}


/* =========================================================
   CONTENIDO DE LAS SECCIONES CENTRALES
   ========================================================= */

/*
   Estos ajustes afectan solamente a lo que aparece
   dentro del centro.

   La idea es que se sienta más compacto y cómodo
   de recorrer visualmente.
*/


.columna-central h1 {
  font-size: 1.65rem;
  line-height: 1.2;

  margin-top: 0;
  margin-bottom: 0.7rem;
}


.columna-central h2 {
  font-size: 1.3rem;
  line-height: 1.25;

  margin-top: 0.8rem;
  margin-bottom: 0.55rem;
}


.columna-central h3 {
  font-size: 1.05rem;
  line-height: 1.3;

  margin-top: 0.7rem;
  margin-bottom: 0.4rem;
}


.columna-central h4 {
  font-size: 0.95rem;
  line-height: 1.3;

  margin-top: 0.6rem;
  margin-bottom: 0.35rem;
}


/* ---------------------------------------------------------
   PÁRRAFOS
   --------------------------------------------------------- */

.columna-central p {
  font-size: 0.86rem;
  line-height: 1.5;

  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}


/* ---------------------------------------------------------
   LISTAS
   --------------------------------------------------------- */

.columna-central ul,
.columna-central ol {
  font-size: 0.84rem;
  line-height: 1.45;

  margin-top: 0.3rem;
  margin-bottom: 0.6rem;

  padding-left: 1.2rem;
}


/* ---------------------------------------------------------
   ENLACES
   --------------------------------------------------------- */

.columna-central a {
  font-size: 0.86rem;
}


/* ---------------------------------------------------------
   IMÁGENES
   --------------------------------------------------------- */

/*
   Las imágenes pueden ocupar todo el ancho disponible,
   pero nunca se van a salir de la columna ni deformarse.
*/

.columna-central img {
  max-width: 100%;
  height: auto;
}


/*
   Si tus secciones utilizan <figure>, también reducimos
   el espacio innecesario alrededor de las imágenes.
*/

.columna-central figure {
  margin: 0.6rem 0;
}


/* ---------------------------------------------------------
   TABLAS
   --------------------------------------------------------- */

.columna-central table {
  width: 100%;

  font-size: 0.8rem;

  border-collapse: collapse;
}

.columna-central th,
.columna-central td {
  padding: 0.35rem 0.5rem;
}


/* ---------------------------------------------------------
   CITAS
   --------------------------------------------------------- */

.columna-central blockquote {
  font-size: 0.83rem;
  line-height: 1.45;

  margin: 0.6rem 0;
  padding-left: 0.75rem;
}


/* ---------------------------------------------------------
   CAJAS INTERNAS
   --------------------------------------------------------- */

.columna-central .caja,
.columna-central .card,
.columna-central .tarjeta,
.columna-central .bloque {
  padding: 0.7rem;
}


/* =========================================================
   CAJAS LATERALES
   ========================================================= */

.caja-sobre-mi,
.caja-reproductor-lateral,
.caja-redes-lateral,
.caja-widgets {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 7px;

  padding: 0.6rem;

  color: var(--crema);
  font-size: 0.78rem;
}


/* =========================================================
   BIENVENIDA
   ========================================================= */

.caja-sobre-mi .bienvenida-fila {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.caja-sobre-mi .foto-circular-decorada {
  align-self: center;

  transform: scale(0.88);
  transform-origin: top center;

  margin-bottom: -0.8rem;
}

.caja-sobre-mi .bienvenida-texto {
  text-align: left;

  font-size: 0.78rem;
  line-height: 1.45;

  margin: 0;
}


/* =========================================================
   NAVEGACIÓN DE CATEGORÍAS
   ========================================================= */

.categorias-nav {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;

  margin-top: 0.2rem;
}

.categoria-btn,
.categoria-link {
  display: block;
  width: 100%;

  background: transparent;

  border: none;
  border-bottom: 1px solid rgba(247, 241, 232, 0.22);

  border-radius: 0;

  color: var(--crema);
  text-decoration: none;

  text-align: left;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 0.92rem;
  letter-spacing: 0.02em;

  padding: 0.28rem 0.15rem;

  cursor: pointer;

  transition:
    color 0.2s ease,
    padding-left 0.2s ease,
    border-color 0.2s ease;
}

.categoria-btn:hover,
.categoria-link:hover {
  background: transparent;

  color: #fff4df;

  padding-left: 0.45rem;

  border-bottom-color: rgba(247, 241, 232, 0.55);
}

.categoria-activa {
  background: transparent;

  font-weight: bold;

  color: #fff4df;

  padding-left: 0.45rem;

  border-bottom-color: rgba(247, 241, 232, 0.65);
}


/* =========================================================
   REPRODUCTOR DE MÚSICA
   ========================================================= */

.columna-izquierda-fija .caja-reproductor-lateral {
  width: 100%;
  box-sizing: border-box;

  margin-top: 0.15rem;
}


/* =========================================================
   TÍTULO DE LA ESQUINA
   ========================================================= */

.titulo-esquina {
  display: flex;
  align-items: center;

  max-width: 1500px;

  margin: 0 auto;

  padding: 0.45rem 1rem 0 1rem;
}

.titulo-esquina h1 {
  text-align: left;

  margin: 0;

  flex-shrink: 0;
}

.titulo-esquina .fila-subtitulo {
  display: flex;
  align-items: center;

  justify-content: flex-start;

  margin: 0 0 0 0.65rem;

  flex-shrink: 0;
}


/* =========================================================
   TAZA
   ========================================================= */

.gif-cafecito {
  display: block;

  width: 55px;
  height: auto;
}


/* =========================================================
   REDES — COLUMNA DERECHA
   ========================================================= */

.columna-derecha-fija .tarjeta-red {
  padding: 0.42rem 0.45rem;

  gap: 0.4rem;

  margin-bottom: 0.3rem;
}

.columna-derecha-fija .red-nombre {
  font-size: 0.8rem;
}

.columna-derecha-fija .red-desc {
  font-size: 0.63rem;
  line-height: 1.3;
}


/* =========================================================
   NOTAS DEL SITIO
   ========================================================= */

.columna-derecha-fija .notas-sitio {
  max-width: 100%;
  padding: 0;
}

.columna-derecha-fija .nota {
  padding: 0.48rem 0.6rem;
  margin-bottom: 0.35rem;
}

.columna-derecha-fija .nota-texto {
  font-size: 0.68rem;
}


/* =========================================================
   EMBED ME
   ========================================================= */

.embed-me-seccion {
  font-size: 0.7rem;
  padding: 0.5rem;
}

.embed-me-titulo {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.embed-me-fila {
  gap: 0.4rem;
}

.embed-me-boton {
  width: 70px;
  height: auto;
}

.embed-me-textarea {
  font-size: 0.56rem;
  line-height: 1.2;
}

.embed-me-btn-copiar {
  font-size: 0.6rem;
  padding: 0.22rem 0.38rem;
}

.gif-esquina-amigos {
  max-width: 52px;
}


/* =========================================================
   LINKS / MIS AMIGOS
   ========================================================= */

.amigos-seccion {
  font-size: 0.7rem;
  padding: 0.5rem;
}

.amigos-titulo {
  margin-top: 0;
  margin-bottom: 0.35rem;
}


/* =========================================================
   FONDOS DE LAS SECCIONES CENTRALES
   ========================================================= */

/*
   Se eliminaron completamente las imágenes de fondo.

   Cada sección conserva solamente una caja negra
   bastante opaca.
*/

.fondo-mbti,
.fondo-fotografias,
.fondo-musica,
.fondo-redes,
.fondo-personajes,
.fondo-animes,
.fondo-fanarts {

  background-image: none;

  background-color: rgba(0, 0, 0, 0.40);

  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}


/* =========================================================
   DECORACIONES
   ========================================================= */

/*
   Los elementos decorativos pertenecen al documento,
   no al viewport.

   Al hacer scroll hacia abajo, quedan arriba y dejan
   de verse.
*/

.decor-layer {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  pointer-events: none;

  z-index: 1;
}

.cuadros-izquierda {
  transform: scale(0.82);
  transform-origin: left top;
}

.decor.star {
  transform: scale(0.8);
}

.reloj {
  transform: scale(0.85);
  transform-origin: left top;
}

body {
  position: relative;
}