.contenidoSummer {
  width: 100%;
  margin-top: calc(var(--header-height) - 1px);
  background-color: #3b3a3a;
}

.imgsummer {
  width: 100%;
  background-color: #3b3a3a;
}

.imgsummer img{
  width: 100%; 
  min-height: 400px;
  max-height: 710px;
}

.summer-event {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#intro{
  width: 100%;
  background-image: url(../images/summer/crayons.png);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#explicacion{
  padding: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.caja_texto{
  background-image: url(../images/summer/pizarra.jpg);
  padding: 30px;
  border-radius: 4px;
  outline: 10px solid #A0522D;
}

.caja_texto p{
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 5vw, 20px);
  color: white;
  width: 100%;
}

.caja_texto h1{
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  color: #ffffff;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

.summer-semanas {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1%;
  padding-bottom: 1%;
}

a{
  cursor: pointer;
  text-decoration: none;
}

#Art, #Science, #Sport, #English{
  scroll-margin-top: 120px; /* Altura del menú fijo */
}

.semana1,
.semana2,
.semana3,
.semana4 {
  background-color: #ffffff;
  padding: 20px;
  border: 8px solid #649bda;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.semana1{
  background-color: #f0f8ff;
  border: 8px solid #2f67a9;
  display: flex;
  justify-content: center; 
  align-items: center;
  text-align: center;      
  padding: 1rem;
  border-radius: 8px;
}

.semana1 h3 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: bold;
  color: #2f67a9;
  /*text-shadow: -1px -1px 1px #001f43, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #001f43, 2px 2px 4px #001f43;*/
}

.semana1:hover{
  background-color: #2f67a9;
}

.semana1:hover h3{
  color: #f0f8ff;
}

.semana2 {
  background-color: #ffeaea; 
  border: 8px solid #e04343; 
  display: flex;
  justify-content: center; 
  align-items: center;
  text-align: center;      
  padding: 1rem;
  border-radius: 8px;
}

.semana2 h3 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: bold;
  color: #e04343; 
  /*text-shadow: -1px -1px 1px #4b0000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #4b0000, 2px 2px 4px #4b0000;*/
}

.semana2:hover{
  background-color: #e04343;
}

.semana2:hover h3{
  color: #ffeaea;
}

.semana3 {
  background-color: #f3e8ff; 
  border: 8px solid #7a1fa2; 
  display: flex;
  justify-content: center; 
  align-items: center;
  text-align: center;      
  padding: 1rem;
  border-radius: 8px;
}

.semana3 h3 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: bold;
  color: #7a1fa2; 
  /*text-shadow: -1px -1px 1px #33004d, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #33004d, 2px 2px 4px #33004d;*/
}

.semana3:hover{
  background-color: #7a1fa2;
}

.semana3:hover h3{
  color: #f3e8ff;
}

.semana4 {
  background-color: #ffffff;
  border: 8px solid #E0A800;
  display: flex;
  justify-content: center; 
  align-items: center;
  text-align: center;      
  padding: 1rem;
  border-radius: 8px;
}

.semana4 h3 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: bold;
  color: #E0A800;
  /*text-shadow: -1px -1px 1px #665100, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #665100, 2px 2px 4px #665100;*/
}

.semana4:hover{
  background-color: #E0A800;
}

.semana4:hover h3{
  color: #ffffff;
}

.semana1body {
  border-top: 4px solid #ffffff;
  padding: 40px;
  background-color: #2f67a9;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  gap: 40px;
}

.semana1body h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  color: #ffffff;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

.semana1body p {
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 5vw, 20px);
  color: #ffffff;
  text-align: left;
  margin-bottom: 20px;
 /* text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;*/
}


.semana2body {
  border-top: 3px solid #E63946;
  background-color: #FFF1E0;
  padding: 40px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  gap: 40px;
}

.semana2body h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  color: #E63946;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

.semana2body p {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  color: #E63946;
  text-align: left;
  margin-bottom: 20px;
  /*text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;*/
}

.semana3body {
  background-color: #EAE2F8;
  padding: 40px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  gap: 40px;
  border-top: 3px solid #a25ddc;
}

.semana3body h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  color: #a25ddc;
  text-align: left;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

.semana3body p {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  color: #4C1D95;
  text-align: left;
  margin-bottom: 20px;
  /*text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;*/
}

.semana4body {
  background-color: #FFF4B1;
  padding: 40px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  gap: 40px;
  border-top: 3px solid #E0A800;
}

.semana4body h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  color: #E0A800;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

.semana4body p {
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 5vw, 20px);
  color: #3B3B3B;
  text-align: left;
  margin-bottom: 20px;
  /*text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;*/
}

.registrarse{
  background: linear-gradient(rgba(75, 75, 75, 0.9)), url(../images/fondo.jpg);
  padding: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  gap: 40px;
  border-top: 3px solid #E0A800;
}

.registrarse h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  color: #5dacfa;
  text-align: left;
  margin-bottom: 20px;
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

.registrarse p {
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 5vw, 20px);
  color: #ffffff;
  text-align: left;
  margin-bottom: 20px;    
  width: 40%;
}

#boton{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: first baseline;
}

#boton a{
  display: flex;
  justify-content: center;
  align-items: first baseline;
  width: 120px;
  padding: 10px 0px;
  border-radius: 8px;
  text-decoration: none;

  font-size: clamp(15px, 2.8vw, 18px);
  background: #ffffff;
  color: #448fd9;
  outline: #448fd9 2px solid;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
}

#boton a:hover {
  color: #ffffff;
  background-color: #448fd9;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  outline: rgb(34, 115, 208) 1px solid;
  border-radius: 5px;
}

.imagensemana img {
  width: 100%;
  min-height: 350px;
  max-height: 550px;
  border-radius: 8px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.imagensemanaciencia{
  width: 48% ;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/summer/fondo_ciencia.jpg);
  border-radius: 8px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  border: 2px solid #E63946;
}

.imagensemanaciencia video {
  width: auto;
  max-height: 500px;
  min-height: 350px;
  border-radius: 8px;
  border-left: 2px solid #E63946;
  border-right: 2px solid #E63946;
  background-color: #E63946;
}

.semana1body img {
  border: 2px solid #ffffff;
}

.semana3body img {
  border: 2px solid #4C1D95;
}

.semana4body img {
  border: 2px solid #E0A800;
}

.textosemana {
  width: 48% ;
}

.imagensemana {
  width: 48% ;
}

b{
  text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000,
    1px 1px 1px #000, 2px 2px 4px #000;
}

@media (max-height: 600px){
  #Art, #Science, #Sport, #English{
    scroll-margin-top: 20px; /* Altura del menú fijo */
  }
}

@media (max-width: 900px){
  .registrarse p{
    width: 100%;
  }
}

@media (max-width: 690px) {
  .summer-semanas {
    display: none;
  }
  
  .semana1,
  .semana2,
  .semana3,
  .semana4 {
    width: 100%;
  }

  .semana1body,
  .semana2body,
  .semana3body,
  .semana4body,
  .registrarse {
    flex-direction: column;
  }

  .semana1body{
    margin-top: 0px;
  }

  .semana2body{
    gap: 40px;
  }

  .textosemana,
  .imagensemana, .imagensemanaciencia {
    width: 100%;
  }

  .imagensemana img{
    max-height: 575px;
    width: 100%;
  }

  .imagensemanaciencia {
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
  }

  .imagensemanaciencia video{
    border-right: none;
    border-left: none;
    border: 2px solid #E63946;
  }
  
}