:root {
      /* colores base */
      --claro: #E6F1F7;
      --oscuro: #000000;
    
      --medio: #C1D7E6;
      --azul: #7DB0D4;
      --dive: #1B1A2B;
    
      /* texto */
      --TextoGlobal: #000;
      --TextoCaja: #000;
    
      /* fondos */
      --FondoCaja: var(--medio);
      --HeaderF: #7590B8;
    }


    body.tema-oscuro {
      --TextoGlobal: #E6F1F7;
      --TextoCaja: #B59C9C;
    
      --FondoCaja: #470000;
      --HeaderF: #470000;
    }
    
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Times New Roman', Times, serif;
      color: var(--TextoGlobal);
      background-image: url("Media_wallpaper/flores.jpg");
      background-size: cover;
      background-position: center;
    }
    
    body.tema-oscuro {
      background-image: url("Media_wallpaper/eng.jpg");
    }


/* boton cambia tema */


    #toggleTema {
      background: var(--azul);
      border: none;
      padding: 8px 12px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 0.9rem;
      color: #B59C9C;
    }
    
    body.tema-oscuro #toggleTema {
      background: #470000;
    }


/*** header footer ** */


header {
  background: var(--HeaderF);
  text-align: center;
  padding: 50px 20px;
  border-bottom: 3px solid var(--azul);
}

footer {
  background: var(--azul);
  text-align: center;
  padding: 20px;
  font-size: 0.7rem;
  margin-top: 60px;
}

body.tema-oscuro footer {
  background: #000;
  color: #B59C9C;
}





/****************************** cajas incio-index   *************************************************/
/*alineacion cajas */
.home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 60px;

  max-width: 900px;
  margin: 80px auto;
 padding: 1.2rem;
}


/*color */

.card {
  display: block;
  background-color: var(--FondoCaja);
  color: var(--TextoCaja);

  border-radius: 25px;
  padding: 80px 30px;

  text-align: center;
  text-decoration: none;

  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}


.post,
.selector-fecha,
.about,
.intro {
  background: var(--FondoCaja);
  color: var(--TextoCaja);
  padding: 30px;
  border-radius: 20px;
}



/**** boton ver mas ¨¨**/


.texto {
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.texto.expandido {
  max-height: 1000px;
}

.ver-mas {
  background: none;
  border: none;
  color: var(--azul);
  cursor: pointer;
  font-size: 0.85rem;
}


/***** arreglos*/

/***** diario*/

body.tema-oscuro .pagina-proyectos header {
  background: rgba(71, 0, 0, 0.85);
}

main {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
}

.post {
  background-color: var(--FondoCaja);
  color: var(--TextoCaja);

  padding: 30px;
  margin-bottom: 30px;
  border-radius: 20px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}





/***** proyectos */


  .proyectos {
    display: flex;
    gap: 30px;
    max-width: 1100px;
    margin: 5px auto;
    padding: 0 20px;
  }
  .proyecto {
    flex: 1;
    height: 360px;
    border-radius: 25px;
    position: relative;
    text-decoration: none;
    color: var(--claro);
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    background-size: cover;
    background-position: center;
    transition: transform 0.3s;
  }

  .proyecto:hover {
    transform: translateY(-10px);
  }
  
  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
  }

  .overlay h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
  }
  
  .overlay p {
    font-size: 0.8rem;
    letter-spacing: 1px;
  }

/* PROYECTOSS-IMAGENES */
        
        .proyecto-1 {
          background-image: url("Media_wallpaper/encaje.jpg");
        }
        
        .proyecto-2 {
          background-image: url("Media_wallpaper/eng.jpg");
        }
        
        .proyecto-3 {
          background-image: url("Media_wallpaper/flores.jpg");
        }



/************************ DIARIO ******/

/* SELECTOR DE fecha****/ 

  .selector-fecha {
    padding: 25px;
    border-radius: 20px;
    margin: 40px auto;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  
  .selector-fecha h2 {
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 15px;
  }
  
  .selector-fecha select {
    padding: 8px 12px;
    border-radius: 10px;
    border: none;
    font-family: 'Times New Roman', Times, serif;
    background-color: #D7DAE0;
  }


/*** boton volver ¨¨*/


.back {
  display: inline-block;
  margin: 30px auto;
  padding: 6px 14px;

  text-decoration: none;
  font-size: 0.75rem;
  border-radius: 12px;

  background-color: var(--FondoCaja);
  color: var(--TextoCaja);

  transition: background-color 0.3s, color 0.3s;
}

/* contenedor para centrarlo */
.back-wrapper {
  text-align: center;
}

.back:hover {
  filter: brightness(0.95);
}



/*** home **/


.index-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.index-page main {
  flex: 1;
}

.index-page footer {
  margin-top: auto;
}