/* Variables y estilos base mejorados */
:root {
  --sombra-caja: 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
  --borde: 1px solid #ddd;
  --margen: 10px;
  --padding: 15px;
  --sombra-suave: 0 2px 5px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

/* Reset y configuración base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  user-select: none;
  line-height: 1.6;
}

/* Layout principal */
main {
  box-shadow: var(--sombra-caja);
  padding: var(--padding);
  color: white;
  margin: 20px auto;
  max-width: 1200px;
  width: 95%;
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}

/* Header mejorado - Manteniendo estructura original */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding);
  box-shadow: var(--sombra-caja);
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  flex-wrap: nowrap;
  gap: 15px;
}

.img-container {
  width: 200px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6, h7, h8 {
  box-shadow: var(--sombra-caja);
  text-align: center;
  color: white;
  padding: 10px;
  margin: 15px 0;
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.5);
}

p {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  display: block;
  margin-bottom: 15px;
}

/* Secciones y artículos */
article, section, aside {
  border: var(--borde);
  margin: var(--margen) 0;
  padding: var(--padding);
  box-shadow: var(--sombra-suave);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
}

hr {
  border: none;
  height: 5px;
  width: 100%;
  margin: 20px 0;
  border-radius: 2px;
}

/* Transiciones suaves */
p, body, main, h1, h2, h3, h4, h5, h6, article, section, aside, panel, hr {
  transition: var(--transition);
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fall {
  0% { 
    top: -10px; 
    opacity: 1; 
    transform: translateX(0) rotate(0deg);
  }
  100% { 
    top: 100vh; 
    opacity: 0; 
    transform: translateX(20px) rotate(360deg);
  }
}

.fade-effect {
  animation: fadeIn 0.5s ease-in-out;
}

/* Elementos animados (flores, nieve, etc.) */
.flower, .sun, .leaf, .snowflake, .aniversario {
  position: fixed;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: fall linear infinite;
  pointer-events: none;
  z-index: 9999;
}

.flower { background: pink; }
.sun { background: yellow; }
.leaf { background: orange; }
.snowflake { background: white; }
.aniversario {
  background: conic-gradient(from 90deg, #FF0000, #FF7F00, #FFFF00, #90EE90, #00FF00, #00FFFF, #0000FF, #4B0082, #800080);
}

/* Cajetines mejorados */
.cajetines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
  max-height: none;
  overflow-y: visible;
}

.cajetin {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 0, 255, 0.6));
  padding: 20px;
  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--transition);
  height: auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cajetin:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.cajetin img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 15px;
}

.cajetin-titulo {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
}

.cajetin-description {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.cajetin-fechas, .cajetin-footer {
  font-size: 0.8rem;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.8);
}

/* Cajetines de música */
.cajetinesMusica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.cajetinMusica {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 0, 255, 0.6));
  padding: 20px;
  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--transition);
}

.cajetinMusica:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.cajetinMusica img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 15px;
}

.cajetin-tituloMusica {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
}

.cajetin-descriptionMusica {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.cajetin-fechasMusica, .cajetin-footerMusica {
  font-size: 0.8rem;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.8);
}

.cajetin-footerMusica {
  background: #00ff5087;
  padding: 5px 10px;
  border-radius: 4px;
  margin-top: 10px;
}

/* Tarjetas mejoradas */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
  max-height: none;
}

.tarjeta {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.tarjeta img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 15px;
  flex-shrink: 0;
}

.tarjeta-content {
  flex: 1;
}

.tarjeta h2 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  background: transparent !important;
  box-shadow: none !important;
}

.tarjeta p {
  margin: 0 0 5px 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Sección de música mejorada */
.musica-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  margin: 20px 0;
}

.left-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.left-section img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.right-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  max-height: 400px;
  padding: 15px;
}

/* ========================================================================== */
/* FOOTER - ESTRUCTURA ORIGINAL MEJORADA */
/* ========================================================================== */

footer {
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  border: 2px solid white;
  background: #0000009c;
  border-radius: var(--border-radius);
}

.footer-imagenes {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 5px;
}

.footer-imagenes img {
  width: auto;
  height: auto;
  max-width: 60px;
  max-height: 30px;
  margin: 5px;
  transition: var(--transition);
}

.footer-imagenes img:hover {
  transform: scale(1.1);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.footer-column {
  flex: 1;
  text-align: center;
  min-width: 200px;
}

.footer-column img {
  max-width: 80%;
  height: auto;
}

.footer-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.footer-bottom {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.disabled-link {
  color: gray;
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

/* ========================================================================== */
/* TEMAS ESPECÍFICOS - MANTENIENDO LOS ORIGINALES */
/* ========================================================================== */

/* Default Theme */
html, body { 
  background: linear-gradient(120deg, magenta, cyan); 
}

.img-container { 
  background-image: url('https://grouvex.github.io/img/Grouvex1.png'); 
}

hr { 
  background: linear-gradient(120deg, silver, gold); 
}

/* Theme 1 */
body.theme1 { 
  background: linear-gradient(120deg, red, yellow, blue, transparent); 
}

main.theme1 { 
  background: radial-gradient(circle, red, rgb(99, 99, 168), black); 
}

h1.theme1, h2.theme1, h3.theme1, h4.theme1, h5.theme1, h6.theme1 { 
  background: linear-gradient(to bottom, green, rgb(99, 99, 168), black); 
}

header.theme1 { 
  background: linear-gradient(45deg, red, white, blue); 
}

article.theme1 { 
  background: linear-gradient(to bottom, pink, rgb(99, 99, 168), black); 
}

section.theme1 { 
  background: linear-gradient(to bottom, yellow, rgb(99, 99, 168), black); 
}

aside.theme1 { 
  background: radial-gradient(circle, rgb(200, 71, 226), rgb(99, 99, 168), black); 
}

hr.theme1 { 
  border-top: 1px solid cyan; 
  background: none; 
}

/* Theme 2 */
body.theme2 { 
  background: lightcoral; 
}

main.theme2 { 
  background: radial-gradient(circle, pink, rgb(99, 99, 168), black); 
}

h1.theme2, h2.theme2, h3.theme2, h4.theme2, h5.theme2, h6.theme2 { 
  background: linear-gradient(to bottom, cyan, rgb(99, 99, 168), black); 
}

header.theme2 { 
  background: linear-gradient(45deg, green, yellow, blue, red, pink, cyan); 
}

/* Theme Space */
body.space { 
  background-image: url(https://th.bing.com/th/id/R.2233dd9dbbdc72fd46d1ae218bae965d?rik=mlwKyBXXRrJU6A&pid=ImgRaw&r=0); 
}

main.space { 
  background-image: url(https://th.bing.com/th/id/OIP.NdcwLYq7n6iTiiu1IUHLFAHaEv?rs=1&pid=ImgDetMain); 
}

h1.space, h2.space, h3.space, h4.space, h5.space, h6.space { 
  background-image: url(https://th.bing.com/th/id/R.bbc58b224e5d27d5648d8ae74e01bc2a?rik=MtYc%2bepoyXyjrw&pid=ImgRaw&r=0); 
}

header.space { 
  background-image: url(https://live.staticflickr.com/7060/6971643495_05dc317572_b.jpg); 
}

article.space { 
  background-image: url(https://th.bing.com/th/id/OIP.kBY4LxAeo1gzY_un8PIWJAHaEb?rs=1&pid=ImgDetMain); 
}

section.space { 
  background-image: url(https://th.bing.com/th/id/OIP.XhSnvyZ7S0hRkD_erqTc0QHaEo?rs=1&pid=ImgDetMain); 
}

aside.space { 
  background-image: url(https://i.pinimg.com/originals/a5/d0/67/a5d0672466ca12f67241a1dc99171b75.jpg); 
}

/* Theme Star Wars */
body.starwars { 
  background-image: url(https://wallpapers.com/images/hd/star-wars-place-ztno3exzqff0m0ci.jpg); 
}

main.starwars { 
  background-image: url(https://th.bing.com/th/id/OIP.npOsomw2bikOEQXahXpM0QHaEK?w=329&h=185&c=7&r=0&o=5&pid=1.7); 
}

h1.starwars, h2.starwars, h3.starwars, h4.starwars, h5.starwars, h6.starwars { 
  background-image: url(https://th.bing.com/th/id/OIP.fXzET8932QEAPm2_VL9h2wHaEK?w=316&h=180&c=7&r=0&o=5&pid=1.7); 
}

header.starwars { 
  background-image: url(https://images.squarespace-cdn.com/content/v1/531630f6e4b0fa5080a5596f/1845bb78-5fb1-4250-a2b9-e959c995cef9/Star+Wars+v2.jpg); 
}

article.starwars { 
  background-image: url(https://th.bing.com/th/id/OIP.Q0rcMIyko5F5ado-TefV6wHaEK?w=316&h=180&c=7&r=0&o=5&pid=1.7); 
}

section.starwars { 
  background-image: url(https://th.bing.com/th/id/OIP.fXzET8932QEAPm2_VL9h2wHaEK?w=316&h=180&c=7&r=0&o=5&pid=1.7); 
}

aside.starwars { 
  background-image: url(https://th.bing.com/th/id/OIP.JsQzo18AdsLv04LuKo4-9AHaEK?w=313&h=180&c=7&r=0&o=5&pid=1.7); 
}

hr.starwars { 
  background: url('https://img.freepik.com/fotos-premium/fondo-pantalla-planeta-estrellas-nubes-llamado-star-wars_910135-9709.jpg'); 
  height: 10px; 
}

/* Theme Jurassic World */
body.jurassicworld { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8k6I58I0r2yWS20ImbGZO2viw0K_ncxugsA&s); 
}

main.jurassicworld { 
  background-image: url(https://th.bing.com/th/id/OIP.J_Epz6FeCHuiohqcJU72oQHaDs?w=349&h=174&c=7&r=0&o=5&pid=1.7); 
}

h1.jurassicworld, h2.jurassicworld, h3.jurassicworld, h4.jurassicworld, h5.jurassicworld, h6.jurassicworld { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTspVYXunQxW8ToCzewEXHfrD74p2QtILTTZw&s); 
}

header.jurassicworld { 
  background-image: url(https://th.bing.com/th/id/OIP.TJK__-FIvQRNVUIPkvJQ9QHaEd); 
}

article.jurassicworld { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNG2bTMhZUu7owtd-3a6dDjM6yeB_p3DpzYA&s); 
}

section.jurassicworld { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUBGAIO4J6icDD29q9HqP7MA4Nae4IAwLsQ&s); 
}

aside.jurassicworld { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCwwbTxxtBwVBs6rK7GigiCwkcIha0VOezXg&s); 
}

/* Theme Taylor Swift */
body.taylorswift { 
  background-image: url(https://th.bing.com/th/id/OIP.ZmgHb2BlqKPtoCS_pNH4pwHaQC?w=115&h=180&c=7&r=0&o=5&pid=1.7); 
}

main.taylorswift { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHXyi8v9iFgQH_K_GH-JjUeqsmWcx-VCHhMdze264y2n2iLDjjDekdF-QVIYYBgUcTxXE&usqp=CAU); 
}

h1.taylorswift, h2.taylorswift, h3.taylorswift, h4.taylorswift, h5.taylorswift, h6.taylorswift { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJlo5xIOwnn-TWiURYLAg1mJ9Fo54oUBVsVw&s); 
}

header.taylorswift { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgbFt-ngiiBOWghZHp8cO2TbaIPic31Wv6Qg&s); 
}

article.taylorswift { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUSPNVF4QDrgiHN2AWmeWfis6Yts175pbWLQ&s); 
}

section.taylorswift { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1ukN6qhXGOeh062E3_z3RH9o4WxyqFZS2oA&s); 
}

aside.taylorswift { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN8YN7Ve2FszAe_VElFp4ep6F_7Aof7Gv1HQ&s); 
}

/* Theme Pokemon */
body.pokemon { 
  background-image: url(https://assets.pokemon.com//assets/cms2-es-es/img/misc/virtual-backgrounds/sword-shield/pokemon-in-the-wild.png); 
}

main.pokemon { 
  background-image: url(https://th.bing.com/th/id/OIP.93-XtZpSnUMUofVyqLMZ2gHaNK?rs=1&pid=ImgDetMain); 
}

h1.pokemon, h2.pokemon, h3.pokemon, h4.pokemon, h5.pokemon, h6.pokemon { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYQ7jqd02fXQQMjVwbxlW4l-hbdQqircT4NQ&s); 
}

header.pokemon { 
  background-image: url(https://th.bing.com/th/id/OIP.JSYCbRX-KusrVVSgeYcOpQHaEK?w=297&h=180&c=7&r=0&o=5&pid=1.7); 
}

article.pokemon { 
  background-image: url(https://i.pinimg.com/originals/24/cc/a4/24cca421862a694fffcf184eab118f52.gif); 
}

section.pokemon { 
  background-image: url(https://th.bing.com/th/id/OIP.P_LxOVsyJfQaDltcpeXPuwHaEs?w=261&h=180&c=7&r=0&o=5&pid=1.7); 
}

aside.pokemon { 
  background-image: url(https://th.bing.com/th/id/OIP.RzVl-RnbVt3LC_VoLCWZMgHaEK?w=308&h=180&c=7&r=0&o=5&pid=1.7); 
}

/* Theme Super Heroes */
body.superheroes { 
  background-image: url(https://th.bing.com/th/id/R.6c83f52b1da153957504285959058b46?rik=5kwxZeA0BsJG%2fA&pid=ImgRaw&r=0); 
}

main.superheroes { 
  background-image: url(https://www.tuexpertomovil.com/wp-content/uploads/2019/04/fondos-de-pantalla-vengadores-endgame-para-movil-01.jpg); 
}

h1.superheroes, h2.superheroes, h3.superheroes, h4.superheroes, h5.superheroes, h6.superheroes { 
  background-image: url(https://dam.smashmexico.com.mx/wp-content/uploads/2018/04/24160210/lo-que-debes-recordar-avengers-infinity-war.jpg); 
}

header.superheroes { 
  background-image: url(https://cdn2.mediotiempo.com/uploads/media/2019/05/05/avengers-internet.jpg); 
}

article.superheroes { 
  background-image: url(https://images.hdqwalls.com/download/avengers-infinity-war-movie-bill-poster-7e-1440x900.jpg); 
}

section.superheroes { 
  background-image: url(https://th.bing.com/th/id/OIP.PtMZcfKCKBDrm5mTDmzHHgHaEW?rs=1&pid=ImgDetMain); 
}

aside.superheroes { 
  background-image: url(https://static1.moviewebimages.com/wordpress/wp-content/uploads/article/vXIntIpv5EJCrh2WncQ634QBbOLsG3.jpg); 
}

/* Theme The Wild Robot */
body.thewildrobot { 
  background-image: url(https://th.bing.com/th/id/OIP.9IJqsdTIYe-3tvaja3v8AwHaD3?w=1442&h=752&rs=1&pid=ImgDetMain); 
}

main.thewildrobot { 
  background-image: url(https://th.bing.com/th/id/OIP.PZFnac4UZPYzXyZb6MhehgHaDt?rs=1&pid=ImgDetMain); 
}

h1.thewildrobot, h2.thewildrobot, h3.thewildrobot, h4.thewildrobot, h5.thewildrobot, h6.thewildrobot { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsx1DJS9a81yuTwitR4oBTxSacXqax7aopQA&s); 
}

header.thewildrobot { 
  background-image: url(https://televitos.com/wp-content/uploads/2024/09/RobotSalvaje_01-1.webp); 
}

article.thewildrobot { 
  background-image: url(https://media.tenor.com/Od7045DYNKEAAAAM/glowing-roz.gif); 
}

section.thewildrobot { 
  background-image: url(https://es.gizmodo.com/app/uploads/2024/10/Diseno-sin-titulo-15-2.jpg); 
}

aside.thewildrobot { 
  background-image: url(https://images4.alphacoders.com/138/1380398.jpg); 
}

/* Theme Naturaleza 1 */
body.naturaleza1 { 
  background-image: url(https://th.bing.com/th/id/R.33f8b44…?rik=A%2fDnI88HMj5p3Q&pid=ImgRaw&r=0); 
}

main.naturaleza1 { 
  background-image: url(https://static.nationalgeographic.es/files/styles/image_3200/public/canoe-lake-wyoming-14.webp?w=1190&h=794); 
}

h1.naturaleza1, h2.naturaleza1, h3.naturaleza1, h4.naturaleza1, h5.naturaleza1, h6.naturaleza1 { 
  background-image: url(https://s1.1zoom.me/b5050/892/432626-svetik_1366x768.jpg); 
}

header.naturaleza1 { 
  background-image: url(https://th.bing.com/th/id/OIP.T5PqdU-B6jYYqzBPelW2EwHaFj?rs=1&pid=ImgDetMain); 
}

article.naturaleza1 { 
  background-image: url(https://th.bing.com/th/id/R.efa3563dc34b39d6f6b087c20e014608?rik=rR0bIEpvuiFOwQ&pid=ImgRaw&r=0); 
}

section.naturaleza1 { 
  background-image: url(https://w0.peakpx.com/wallpaper/1007/584/HD-wallpaper-nature-nature.jpg); 
}

aside.naturaleza1 { 
  background-image: url(https://th.bing.com/th/id/R.d630144c16d6ca1072900d57415a2d72?rik=mZmAuzQBo4Ip9g&pid=ImgRaw&r=0); 
}

/* Theme Naturaleza 2 */
body.naturaleza2 { 
  background-image: url(https://th.bing.com/th/id/R.36c399a1906a4e753e49a04b69f1e8c5?rik=F6xkD%2brClFTZWA&pid=ImgRaw&r=0); 
}

main.naturaleza2 { 
  background-image: url(https://th.bing.com/th/id/R.d1d3096e631e5795571d48fbb5844beb?rik=ApzRZjkI516j2w&pid=ImgRaw&r=0); 
}

h1.naturaleza2, h2.naturaleza2, h3.naturaleza2, h4.naturaleza2, h5.naturaleza2, h6.naturaleza2 { 
  background-image: url(https://th.bing.com/th/id/OIP.QPJQJLqTcrngDPFnC9PIYAHaEp?rs=1&pid=ImgDetMain); 
}

header.naturaleza2 { 
  background-image: url(https://th.bing.com/th/id/OIP.aoYdHlS-eY68KaN3ZqXipQHaFB?rs=1&pid=ImgDetMain); 
}

article.naturaleza2 { 
  background-image: url(https://th.bing.com/th/id/R.b9b0c57168515141e7e5d60eee0cec82?rik=vb765zkcnB7u4Q&pid=ImgRaw&r=0); 
}

section.naturaleza2 { 
  background-image: url(https://p0.pikist.com/photos/577/451/northern-lights-aurora-borealis-northern-night-sky-green-lights-phenomenon-astronomy-thumbnail.jpg); 
}

aside.naturaleza2 { 
  background-image: url(https://www.banditdenuit.com/wp-content/uploads/2022/08/aurore-boreale-polaire.jpg); 
}

/* Temas Grouvex Studios */
body.gstudios1 { 
  background-image: url(https://grouvex.com/port/Si%20Fuera.gif); 
}

body.gstudios2 { 
  background-image: url(https://grouvex.github.io/port/The%20Night%20Sky.jpg); 
}

body.gstudios3 { 
  background-image: url(https://grouvex.github.io/port/La%20Magia%20de%20la%20Estrella%20Polar.jpg); 
}

body.gstudios4 { 
  background-image: url(https://grouvex.github.io/port/Unstoppable%20Friendship.jpg); 
}

body.gstudios5 { 
  background-image: url(https://raw.githubusercontent.com/Grouvex/grouvex.github.io/refs/heads/main/port/Libra.gif); 
}

body.gstudios6 { 
  background-image: url(https://raw.githubusercontent.com/Grouvex/grouvex.github.io/refs/heads/main/port/The%20Treasure.gif); 
}

body.gstudios7 { 
  background-image: url(https://raw.githubusercontent.com/Grouvex/grouvex.github.io/refs/heads/main/port/Yo%20Quiero%20v2.jpg); 
}

/* Theme Wicked */
body.wicked { 
  background-image: url(https://images5.alphacoders.com/139/thumb-1920-1396596.jpg); 
}

main.wicked { 
  background-image: url(https://pbs.twimg.com/media/GdFOIKwXcAA_ab9.jpg); 
}

h1.wicked, h2.wicked, h3.wicked, h4.wicked, h5.wicked, h6.wicked { 
  background-image: url(https://www.youloveit.com/uploads/posts/2024-05/1715958753_youloveit_com_wicked_movie_2024_hd_wallpaper24.jpg); 
}

header.wicked { 
  background-image: url(https://snworksceo.imgix.net/ame-egl/d0745e29-040b-403e-8e72-281554c9b657.sized-1000x1000.jpeg?w=800&dpr=2&ar=16%3A9&fit=crop&crop=faces); 
}

article.wicked { 
  background-image: url(https://4kwallpapers.com/images/walls/thumbs/24448.jpg); 
}

section.wicked { 
  background-image: url(https://snworksceo.imgix.net/ame-egl/d0745e29-040b-403e-8e72-281554c9b657.sized-1000x1000.jpeg?w=800&dpr=2&ar=16%3A9&fit=crop&crop=faces); 
}

aside.wicked{
  background-image: url(https://images4.alphacoders.com/137/1374991.jpg);
}

/* Theme HTTYD */
body.httyd { 
  background-image: url(https://th.bing.com/th/id/OIP.rNJ8l2pKgEYsDHFsVBNJZAHaKM?dpr=1,9&pid=ImgDetMain&PC=EMMX01); 
}

main.httyd { 
  background-color: transparent; 
}

h1.httyd, h2.httyd, h3.httyd, h4.httyd, h5.httyd, h6.httyd { 
  background-image: url(https://images6.alphacoders.com/955/thumb-1920-955571.jpg); 
}

header.httyd { 
  background-image: url(https://th.bing.com/th/id/OIP.GSPiB_i4DFW__QygF3wa_wHaEK?dpr=1,9&pid=ImgDetMain&PC=EMMX01); 
}

article.httyd { 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgfWszYKfMi6AZJZWQXvsMU04jmoltIvQJUg&s); 
}

section.httyd { 
  background-image: url(https://wallpapercave.com/wp/wp1969390.jpg); 
}

aside.httyd{
  background-image: url(https://images.alphacoders.com/139/1393361.jpg);
}

/* ========================================================================== */
/* ESTILOS PARA FONDOS CON IMÁGENES - MEJORADOS */
/* ========================================================================== */

body.space, body.starwars, body.jurassicworld, body.taylorswift, 
body.pokemon, body.superheroes, body.thewildrobot, body.naturaleza1, 
body.naturaleza2, body.gstudios1, body.gstudios2, body.gstudios3, 
body.gstudios4, body.gstudios5, body.gstudios6, body.gstudios7, 
body.httyd, body.wicked {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Asegurar que los elementos con imágenes de fondo sean responsivos */
header.space, header.starwars, header.jurassicworld, header.taylorswift,
header.pokemon, header.superheroes, header.thewildrobot, header.naturaleza1,
header.naturaleza2, header.gstudios1, header.gstudios2, header.gstudios3,
header.gstudios4, header.gstudios5, header.gstudios6, header.gstudios7,
header.httyd, header.wicked,
main.space, main.starwars, main.jurassicworld, main.taylorswift,
main.pokemon, main.superheroes, main.thewildrobot, main.naturaleza1,
main.naturaleza2, main.gstudios1, main.gstudios2, main.gstudios3,
main.gstudios4, main.gstudios5, main.gstudios6, main.gstudios7,
main.httyd, main.wicked,
article.space, article.starwars, article.jurassicworld, article.taylorswift,
article.pokemon, article.superheroes, article.thewildrobot, article.naturaleza1,
article.naturaleza2, article.gstudios1, article.gstudios2, article.gstudios3,
article.gstudios4, article.gstudios5, article.gstudios6, article.gstudios7,
article.httyd, article.wicked,
section.space, section.starwars, section.jurassicworld, section.taylorswift,
section.pokemon, section.superheroes, section.thewildrobot, section.naturaleza1,
section.naturaleza2, section.gstudios1, section.gstudios2, section.gstudios3,
section.gstudios4, section.gstudios5, section.gstudios6, section.gstudios7,
section.httyd, section.wicked,
aside.space, aside.starwars, aside.jurassicworld, aside.taylorswift,
aside.pokemon, aside.superheroes, aside.thewildrobot, aside.naturaleza1,
aside.naturaleza2, aside.gstudios1, aside.gstudios2, aside.gstudios3,
aside.gstudios4, aside.gstudios5, aside.gstudios6, aside.gstudios7,
aside.httyd, aside.wicked {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================================================== */
/* MEDIA QUERIES PARA RESPONSIVIDAD */
/* ========================================================================== */

@media (max-width: 1024px) {
  .musica-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .left-section img {
    max-width: 300px;
  }
  
  .cajetines,
  .cajetinesMusica {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .tarjetas {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --padding: 12px;
    --margen: 8px;
  }
  
  body {
    margin: 5px;
  }
  
  main {
    margin: 10px auto;
    width: 98%;
    padding: 15px;
  }
  
  /* Header en columna para móviles */
  header {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
  }
  
  .img-container {
    width: 180px;
    height: 70px;
    margin: 0 auto;
  }
  
  .cajetines,
  .cajetinesMusica {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px 0;
  }
  
  .cajetin,
  .cajetinMusica {
    padding: 15px;
    min-height: 180px;
  }
  
  .tarjetas {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .tarjeta {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  
  .tarjeta img {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .musica-section {
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .left-section {
    margin-bottom: 20px;
  }
  
  .left-section img {
    max-width: 250px;
  }
  
  .right-section {
    max-height: none;
    padding: 10px;
  }
  
  /* Footer en columna para móviles */
  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .footer-row {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .footer-imagenes {
    justify-content: center;
  }
  
  .footer-imagenes img {
    height: 30px;
  }
  
  /* Ajustes para temas con imágenes en móviles */
  body.space, body.starwars, body.jurassicworld, body.taylorswift, 
  body.pokemon, body.superheroes, body.thewildrobot, body.naturaleza1, 
  body.naturaleza2, body.gstudios1, body.gstudios2, body.gstudios3, 
  body.gstudios4, body.gstudios5, body.gstudios6, body.gstudios7, 
  body.httyd {
    background-attachment: scroll;
  }
}

@media (max-width: 480px) {
  :root {
    --padding: 10px;
    --margen: 5px;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-size: 0.9em;
    padding: 8px;
    margin: 10px 0;
  }
  
  .cajetin,
  .cajetinMusica {
    padding: 12px;
    min-height: 160px;
  }
  
  .cajetin-titulo,
  .cajetin-tituloMusica {
    font-size: 1.1rem;
  }
  
  .cajetin-description,
  .cajetin-descriptionMusica {
    font-size: 0.85rem;
  }
  
  .musica-section {
    padding: 15px;
  }
  
  .left-section img {
    max-width: 200px;
  }
  
  .tarjeta {
    padding: 12px;
  }
  
  .tarjeta img {
    width: 50px;
    height: 50px;
  }
  
  .footer-container {
    gap: 20px;
  }
  
  .footer-imagenes img {
    height: 25px;
  }
}

/* Mejoras para elementos animados en móviles */
@media (max-width: 768px) {
  .flower, .sun, .leaf, .snowflake, .aniversario {
    width: 8px;
    height: 8px;
  }
}

/* Soporte para orientación landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
  .cajetines,
  .cajetinesMusica {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-height: 300px;
    overflow-y: auto;
  }
  
  .musica-section {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .right-section {
    max-height: 200px;
  }
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .flower, .sun, .leaf, .snowflake, .aniversario {
    animation: none;
    display: none;
  }
  
  .fade-effect {
    animation: none;
  }
  
  .cajetin:hover,
  .cajetinMusica:hover,
  .tarjeta:hover {
    transform: none;
  }
  
  * {
    transition: none;
  }
}