:root {
  --fondo-pagina:       #0d0005;
  --fondo-tarjeta:      #1a0508;
  --fondo-encabezado:   #2a0a0f;
  --fondo-nav:          #3d1017;
  --color-borde:        #1a0508;
  --texto-principal:    #f5e6c8;
  --texto-claro:        #e8d5a0;
  --color-enlace:       #c9a84c;
  --enlace-hover:       #f0c040;
  --acento:             #f0c040;
  --otro-color:         #b85050;
}

html {
  height: 100%;
  width: 100%;
  background-color: var(--fondo-pagina);
}
@font-face {
    font-family: 'DSS';
    src: url('../Fuente/Dss_v2.ttf');
}
@font-face {
    font-family: 'Zalan';
    src: url('../Fuente/ZalandoSans-VariableFont_wdth,wght.ttf');
}
@font-face {
    font-family: 'Azeret';
    src: url('../Fuente/AzeretMono-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'Mono';
    src: url('../Fuente/MartianMono-VariableFont_wdth,wght.ttf');
}
body {
  font-family: 'Zalan', sans-serif;
  text-decoration: none;
  font-weight: normal;
  color: var(--texto-principal);
  padding: 0;
  margin: 0;
  background-color: var(--fondo-pagina);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
}

/* ===== CONTENEDOR PRINCIPAL PARA MANTENER ANCHURAS COHERENTES ===== */
.ContenedorGlobal {
  width: 45vw;
  min-width: 320px;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0 auto;
}

/* ===== ENCABEZADO ===== */
.HeaderPrincipal {
  width: 100%;
  border: 1px solid var(--color-borde);
  margin-top: 20px;
  background-color: var(--fondo-encabezado);
  box-sizing: border-box;
  display: block;
}

.Titulo {
  border: 1px solid var(--color-borde);
  font-family: 'DSS';
  text-align: center;
  color: var(--acento);
  background-color: #83210d;
  background-image: radial-gradient(circle at center center, #be263d, #3d1017),
                    repeating-radial-gradient(circle at center center, #ffffff, #a0192d, 17px, transparent 34px, transparent 17px);
  background-blend-mode: multiply;
  box-sizing: border-box;
}

.Links {
  border: 1px solid var(--color-borde);
  text-align: center;
  padding: 10px;
  background-color: var(--fondo-nav);
  display: flex;
  gap: 30px;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.Links a {
  color: var(--color-enlace);
  text-decoration: none;
}

.Links a:hover {
  color: var(--enlace-hover);
}

/* ===== CUERPO PRINCIPAL ===== */
.ContenedorBody {
  display: flex;
  width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  gap: 10px;
  box-sizing: border-box;
}

.MainPrincipal {
  flex: 1;
  min-width: 0; /* Permite que el contenido se reduzca si es necesario */
  border: 1px solid var(--color-borde);
  background-color: var(--fondo-tarjeta);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.HeaderMain {
  border: 1px solid var(--color-borde);
  margin: 10px;
  background-color: var(--fondo-encabezado);
  color: var(--acento);
  box-sizing: border-box;
}

.HeaderMain img {
  width: 100%;
  display: block;
  background-color: var(--fondo-tarjeta);
}

.MainContenedor {
  display: flex;
  gap: 10px;
  margin: 10px;
  flex: 1;
  min-width: 0; /* Permite que los hijos se reduzcan */
}

.InformacionPrimaria {
  flex: 1;
  min-width: 0; /* Permite que el texto se ajuste */
  border: 1px solid var(--color-borde);
  background-color: var(--fondo-encabezado);
  color: var(--texto-principal);
  box-sizing: border-box;
  overflow-wrap: break-word; /* Evita desbordamiento de texto */
  word-wrap: break-word;
}

.InformacionPrimaria p {
  margin: 15px;
  overflow-wrap: break-word;
}
.PrePieDePagina {
  overflow: visible;
  padding: 8px 5px 8px;
  background: #1a040c;
}
.EntrePieDePagina {
  overflow: visible;
  padding: 4px 5px 4px;
  background: #3e1834;
}
/* ===== PIE DE PÁGINA ===== */
footer {
  width: 100%;
  border: 1px solid var(--color-borde);
  margin-top: 10px;
  background-color: var(--fondo-encabezado);
  color: var(--color-enlace);
  box-sizing: border-box;
}

footer p {
  margin: 20px;
  text-align: justify;
  overflow-wrap: break-word;
}

/* ===== TÍTULOS ===== */
h1,
h2,
h3 {
  color: var(--acento);
}

/* ===== RESPONSIVE PARA PANTALLAS PEQUEÑAS ===== */
@media (max-width: 768px) {
  .ContenedorGlobal {
    width: 90vw;
  }
  
  .MainContenedor {
    flex-direction: column;
  }
  
  .Links {
    gap: 15px;
  }
}
/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
  .ContenedorGlobal {
    width: 80vw;
  }
}

/* Móviles grandes (landscape) */
@media (max-width: 768px) {
  .ContenedorGlobal {
    width: 85vw;
  }
  
  .MainContenedor {
    flex-direction: column;
  }
  
  .Links {
    gap: 15px;
  }
}

/* Móviles pequeños (portrait) */
@media (max-width: 480px) {
  .ContenedorGlobal {
    width: 95vw;  /* Casi todo el ancho de la pantalla */
    min-width: unset; /* Eliminamos el min-width fijo */
  }
  
  .HeaderPrincipal {
    margin-top: 10px;
  }
  
  .ContenedorBody {
    margin-top: 15px;
    margin-bottom: 15px;
    gap: 8px;
  }
  
  .MainContenedor {
    margin: 8px;
    gap: 8px;
  }
  
  .HeaderMain {
    margin: 8px;
  }
  
  .InformacionPrimaria p {
    margin: 10px;
  }
  
  footer p {
    margin: 15px;
  }
  
  .Links {
    gap: 12px;
    font-size: 12px;
    padding: 8px;
  }
}

/* Móviles muy pequeños (menos de 360px) */
@media (max-width: 360px) {
  .ContenedorGlobal {
    width: 98vw;  /* Prácticamente sin espacio muerto */
  }
  
  .Links {
    gap: 8px;
    font-size: 11px;
  }
  
  .Titulo h1 {
    font-size: 1.5rem;
  }
}