* {
  box-sizing: border-box;
}

/* Selección de texto personalizada */
::selection {
  background-color: #F53102; /* Fondo al seleccionar */
  color: white;              /* Texto al seleccionar */
}

/* =========================================
   1. LA MESA (FONDO DE PANTALLA)
   ========================================= */
body {
  font-size: 20px;
  background-color: #555555; 
  background-image: url("Imagenes/Kill_la_Kill_Nubes_Fondo.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  margin: 0;
  padding-top: 0px; 
  padding-bottom: 0px;
}

/* =========================================
   2. LA HOJA DE PAPEL (CONTENIDO CENTRADO)
   ========================================= */
.hoja {
  width: 85%; 
  min-height: 100vh; 
  color: white; 
  margin: 0 auto; 
  /* 1. Reducimos el padding lateral del 16% al 12% para darle un 25% más de ancho al texto */
  padding: 40px 12%; 
  
  /* 2. Ampliamos el área sólida cambiando los límites del 15%-85% al 7.5%-92.5% */
  background: linear-gradient(
    to right, 
    transparent 0%, 
    rgba(33, 35, 41, 0.88) 7.5%, 
    rgba(33, 35, 41, 0.88) 92.5%, 
    transparent 100%
  );
}

/* =========================================
   3. TIPOGRAFÍA Y TEXTOS
   ========================================= */
h1 {
  text-align: center;   
  font-size: 45px;       
  margin-top: 10px;      
  margin-bottom: 30px;
}

h2 {
  text-align: center;
}
h3 {
  text-align: center;
}


.largo {
  display: inline-block;
  transform: scaleY(3.0);
  transform-origin: center;
}

.perfiles {
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  
  /* Alinea el texto e imágenes internas a la derecha */
  text-align: right; 
  
  /* Empuja el bloque completo hacia la derecha */
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
}

.center {
  text-align: center;
}

.verdana {
  font-family: verdana;
}

/* =========================================
   4. ESTILOS DE ENLACES
   ========================================= */
a {
  color: #F53102;
  text-decoration: underline;
}

a:visited {
  color: #F53102;
}

a:hover {
  color: #ff633b;
}

/* =========================================
   5. REPRODUCTOR DE AUDIO
   ========================================= */
.titulo-cancion {
  font-size: 12px;
  margin-left: 25px;
  margin-top: 30px;
}

.reproductor {
  width: 320px;          
  height: 35px;          
  margin-left: 25px;     
  color-scheme: dark;    
}

/* 1. REGISTRAR EL ARCHIVO DE LA FUENTE */
@font-face {
  font-family: 'RaglanPunch'; /* Asignas un nombre corto a la fuente */
  src: url('SBT-RaglanPunch-Std-UB.otf') format('opentype'); /* Ruta del archivo */
}

/* 2. APLICAR EL NOMBRE REGISTRADO */
.raglan {
  font-family: 'RaglanPunch', sans-serif; /* Usas el nombre asignado arriba */
}

/* 1. Registrar la fuente TTF */
@font-face {
  font-family: 'Trajan Pro';
  src: url('TrajanPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 2. Clase CSS lista para usar */
.trajanpro {
  font-family: 'Trajan Pro', serif;
}

/* 1. Registrar la fuente OTF */
@font-face {
  font-family: 'Matisse Pro';
  src: url('FOT-Matisse Pro EB.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* 2. Clase CSS lista para usar */
.matisse {
  font-family: 'Matisse Pro', serif;
}

  
.gris {
  color: #9B9B9B;
}

.rojo {
  color: #F53102;
}

.azul {
  color: #7CC2F6;
}

.contenedor-listas {
  display: flex;
  justify-content: center; /* Centra el conjunto horizontalmente */
  gap: 50px;               /* Distancia/separación entre ambas columnas */
  text-align: left;        /* Mantiene el texto alineado correctamente */
}

.columna-lista p {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 25px;
}

/* Contenedor principal */
.acordeon-anime {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

/* Título interactivó */
.titulo-anime {
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  color: #F53102;
  transition: color 0.2s ease;
}

.titulo-anime:hover {
  color: #ff633b;
}

/* Estilo del texto */
.descripcion-anime {
  margin-top: 10px;
  padding-left: 15px;
  line-height: 1.5;
}

/* Contenedor flexible que alinea texto e imagen */
.contenido-anime {
  display: flex;
  gap: 20px; /* Separación entre el texto y la imagen */
  margin-top: 10px;
  padding-left: 15px;
  align-items: stretch; /* Obliga a la imagen a estirarse exactamente al alto del texto */
}

/* El texto ocupa todo el espacio sobrante */
.descripcion-anime {
  flex: 1;
  margin: 0;
  line-height: 1.5;
}

/* Propiedades clave de la imagen */
.imagen-anime {
  height: 100%;       /* Hace que sea igual de alta que las líneas de texto */
  width: 140px;       /* Ancho fijo deseado para el póster vertical */
  object-fit: cover;  /* Recorta la imagen limpiamente sin deformar ni aplastar la ilustración */
  border-radius: 0px; /* Opcional: suaviza las esquinas */
}

/* Contenedor padre que coloca las columnas lado a lado */
.contenedor-acordeones {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Alinea ambos arriba incluso si uno tiene más texto */
  gap: 40px;               /* Separación entre ambas columnas */
  width: 100%;
}

/* Cada columna toma el mismo espacio proporcional */
.acordeon-columna {
  flex: 1;
  padding: 15px 20px;
  border-radius: 8px;
}

/* Estilo del botón interactivo */
.titulo-acordeon {
  font-size: 35px;
  font-weight: bold;
  color: #F53102;
  cursor: pointer;
  user-select: none;
}

.titulo-acordeon:hover {
  color: #ff633b;
}

/* Estilo de las listas desplegadas */
.acordeon-columna ul {
  margin-top: 15px;
  padding-left: 20px;
}

.acordeon-columna li {
  margin-bottom: 8px;
}

.lista-mediana{
  font-size: 25px;
  }