:root {
    --degradado-1: #ff416c;
    --degradado-2: #ff4b2b;
    --degradado-3: #9b59b6;
    --degradado-4: #3b2667;
  
    --texto-principal: #ffffff;
    --texto-secundario: #d1d5db;
    --acento: #00d1ff;
    --acento-suave: #ffc107;
    --rojo: #ff0000;
  
    --fuente-titulos: 'DM Sans', sans-serif;
    --fuente-texto: 'Inter', sans-serif;
}
  
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    to bottom right,
    var(--degradado-1),
    var(--degradado-2),
    var(--degradado-3),
    var(--degradado-4)
  );
  color: var(--texto-principal);
  font-family: var(--fuente-texto);
  font-size: 1em;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 2em 1em;
}

.subintro {
  font-size: 1.75em;
  font-weight: 500;
  color: var(--texto-principal);
  margin-top: 0.3em;
  margin-bottom: 0;
  text-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.1);
  text-align: left;
}

.sub-subintro {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--acento-suave);
  margin-top: 1em;
  margin-bottom: 0;
  text-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.1);
  text-align: left;
}

h1 {
  font-family: 'Sora', sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(to right, #fff, var(--acento));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  padding: 0.1em 0;
}

/*Navegacion*/

nav {
  display: flex;
  justify-content: center;
  padding: 0.5em 0;
  background-color: rgba(0, 0, 0, 0.1);
}

nav a {
  color: var(--texto-principal);
  margin: 0 0.6em;
  padding: 0.75em 1.25em;
  font-size: 1em;
  font-family: var(--fuente-titulos);
  text-decoration: none;
  transition: text-shadow 0.2s ease;
}

nav a:hover {
  text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
}

/* BOTON MODO OSCURO */
#modoOscuro {
  padding: 0.6em 1.2em;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--texto-principal);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
  font-family: var(--fuente-titulos);
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
  margin-left: auto;
}

#modoOscuro:hover {
  color: black;
  box-shadow: 0 0 20px 6px rgba(0, 209, 255, 0.2);
}


/* CONTENEDORES */

#contenedor {
    display: grid;
    grid-template-columns: auto auto; /* izquierda y derecha */
    grid-template-rows: auto auto;    /* dos filas */
    gap: 2em;
    justify-content: center;
    padding: 2em;
  }
  
#izq-arriba {
  grid-column: 1;
  grid-row: 1;
  padding: 1em;
}

#izq-abajo {
  grid-column: 1;
  grid-row: 2;
  padding: 1em;
}

.contenedor-der {
  grid-column: 2;
  grid-row: 1 / span 2; /* ocupa ambas filas */
  padding: 1em;
}

  /*Lista Contenedor*/

.contenedor-lista {
  width: 100%;
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  border-radius: 0.5em;
  padding: 2em;
  padding-top: 0.5em;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.lista-contenido {
  list-style: none;
  padding-left: 0;
  margin: 2px;
  font-size: 1.1em;
  line-height: 1.6;
}

.importante {
  color: var(--acento-suave);
  font-weight: bold;
  padding: 0.7em 1.2em 0.7em 1.2em;
  border-radius: 0.3em;
  text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
}


.lista-contenido li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.7em 0;
}

li:hover {
  background-color: rgba(255, 255, 255, 0.06);
  transition: background-color 0.3s ease;
}

.lista-contenido a{
color: var(--texto-principal);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 0.7em 1.2em 0.7em 1.2em;
border-radius: 0.3em;
text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
}

.lista-contenido a:hover{
color: var(--acento-suave);
text-decoration: underline;
}

#menu-toggle {
  display: none;
}

.menu-icono {
  display: none;
  font-size: 2em;
  color: var(--texto-principal);
  cursor: pointer;
  margin-left: 1em;
  user-select: none;
}

.nav-links {
  display: flex;
  gap: 1em;
}


/*Footer*/

footer {
  text-align: center;
  font-size: 0.9em;
  padding: 1em;
  color: var(--texto-secundario);
}
  
  


/* ----------- Responsive ----------- */
@media (max-width: 768px) {

    h1 {
      font-size: 2em;
      text-align: center;
      word-break: break-word;
    }

    nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 1em;
    }
  
    .menu-icono {
        display: block;
    }
  
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 1em;
    }
  
    #menu-toggle:checked + .menu-icono + .nav-links {
        display: flex;
    }
  
    .nav-links a {
        padding: 0.5em 0;
    }

    #contenedor {
      display: flex;
      flex-direction: column;
      gap: 2em;
      padding: 1.5em 1em;
    }
  
    .contenedor-izq, 
    .contenedor-der {
      width: 100%;
      padding: 0;
      margin-top: 0px;
      margin-bottom: 10px;
    }
  
    #izq-arriba,
    #izq-abajo {
      padding: 0;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    
}

/* MODO OSCURO */
body.dark {
  --degradado-1: #3b2667;
  --degradado-2: #2c1a47;
  --degradado-3: #1a1a2e;
  --degradado-4: #0f0c29;

  --texto-principal: #f1f1f1;
  --texto-secundario: #a3a3a3;
  --acento: #00d1ff;
  --acento-suave: #fca311;
  --rojo: #ff4b5c;
}

body.dark h1 {
  background: linear-gradient(
    to bottom right,
    #ff416c,  /* degradado-1 */
    #ff4b2b,  /* degradado-2 */
    #9b59b6,  /* degradado-3 */
    #3b2667   /* degradado-4 */
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}