body {
    margin: 0px;
    padding: 0px;
}

#header {
    width: 100%;
    height: 240px;
    ;
    background-color: #292b31;
}

#section {
    width: 850px;
    height: 1310px;
    background-color: #292b31;
    margin-left: auto;
    margin-right: auto;
}

#footer {
    width: 100%;
    height: 200px;
    ;
    background-color: #292b31;
}

#Cheader {
    width: 850px;
    height: 310px;
    background-color: #2f4f6f;
    margin-left: auto;
    margin-right: auto;
}

#Cfooter {
    width: 850px;
    height: 200px;
    background-color: #2f4f6f;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    width: 100px;
    height: 100px;
    background-image: url(logoitc.jpeg);
    background-color: #2f4f6f;
    margin-top: 10px;
    margin-left: 25px;
    margin-right: auto;
    float: left;
    border-radius: 50%;
    background-image: cover;
}

#cajac1 {
    width: 650px;
    height: 50px;
    font-size: x-large;
    background-color: #2f4f6f;
    margin-top: 40px;
    margin-left: 10px;
    margin-right: auto;
    float: left;
}

#cajac2 {
    width: 100px;
    height: 50px;
    background-color: #2f4f6f;
    margin-top: 40px;
    margin-left: 80px;
    float: right;
}

#cajac3 {
    width: 100px;
    height: 50px;
    background-color: #2f4f6f;
    margin-top: 40px;
    margin-right: 30px;
    float: left;
}

#cajac4 {
    width: 800px;
    height: 50px;
    background-color: #292b31;
    margin-top: 40px;
    margin-left: 30px;
    margin-right: auto;
    float: left;
    border-radius: 5%;

}

#cajac42 {
    width: 800px;
    height: 50px;
    background-color: #292b31;
    margin-top: 40px;
    margin-left: 30px;
    margin-right: auto;
    float: left;
    border-radius: 5%;

}

#cajas1 {
    width: 800px;
    height: 150px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas2 {
    width: 380px;
    height: 360px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas3 {
    width: 400px;
    height: 360px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas4 {
    width: 380px;
    height: 180px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas5 {
    width: 400px;
    height: 180px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas6 {
    width: 800px;
    height: 200px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas7 {
    width: 260px;
    height: 195px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas8 {
    width: 525px;
    height: 250px;
    background-color: #2f4f6f;
    margin-left: 15px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajaf1 {
    width: 550px;
    height: 60px;
    background-color: #2f4f6f;
    margin-top: 25px;
    margin-left: 130px;
    margin-right: auto;
    float: left;
    border-radius: 5%;
}

#cajaf2 {
    width: 550px;
    height: 60px;
    background-color: #2f4f6f;
    margin-top: 25px;
    margin-left: 130px;
    margin-right: auto;
    float: left;
    border-radius: 5%;
}

#cajaf3 {
    width: 550px;
    height: 60px;
    background-color: #2f4f6f;
    margin-top: 25px;
    margin-left: 130px;
    margin-right: auto;
    float: left;
    border-radius: 5%;
}

#cajaf4 {
    width: 550px;
    height: 60px;
    background-color: #2f4f6f;
    margin-top: 25px;
    margin-left: 130px;
    margin-right: auto;
    float: left;
    border-radius: 5%;
}


#logo2 {
    width: 75px;
    height: 75px;
    background-color: #2f4f6f;
    margin-top: 10px;
    margin-left: 25px;
    margin-right: auto;
    float: left;
    border-radius: 100px;

}

#cajas21 {
    width: 380px;
    height: 235px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas22 {
    width: 400px;
    height: 235px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas23 {
    width: 800px;
    height: 325px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas24 {
    width: 380px;
    height: 215px;
    background-color: #2f4f6f;
    margin-left: 25px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas25 {
    width: 400px;
    height: 215px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas26 {
    width: 800px;
    height: 130px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 30px;
    float: left;
    border-radius: 5%;
}

#cajas27 {
    width: 260px;
    height: 166px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas28 {
    width: 525px;
    height: 200px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

#cajas29 {
    width: 400px;
    height: 35px;
    background-color: #2f4f6f;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
    border-radius: 5%;
}

/* Párrafos y links */

h1 {
    font-weight: bold;
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 250%;
    text-decoration: none;
    color: rgb(255, 255, 255);
}

h2 {
    font-weight: bold;
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 210%;
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.link1 {
    font-weight: bold;
    margin-bottom: 20;
    padding: 20px;
    text-align: center;
    font-size: 250%;
    text-decoration: none;
    color: #5cd2f2;
}

p {
    margin: 0;
    padding: 10px;
    font-family: Arial;
    font-size: 16px;
    text-align: justify;
    color: white;
}

a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-align: justify;
    margin-right: auto;
    padding: 10px;

}

/* Volver arriba */
#volverArriba {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #0ef;
    padding: 10px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-family: Arial;
    font-weight: bold;
    box-shadow: #2f4f6f;
    ;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

#volverArriba:hover {
    background-color: #2a91c2;
}
/* Volver a inicio */
#volverInicio {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: #0ef;
    padding: 15px 10px;
    border-radius: 20px;
    text-decoration: none;
    font-family: Arial;
    font-weight: bold;
    box-shadow: #2f4f6f;
    ;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

#volverInicio:hover {
    background-color: #2a91c2;
}

.formato_lista_h1 {
    margin: 0;
    padding: 10px;
    font-family: Arial;
    font-size: 16px;
    text-align: justify;
    color: white;
}

.formato_lista_h2 {
    margin: 10;
    padding: 10px;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px;
    text-align: justify;
    color: white;
}

.imagenlogo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

  /* 📱 Celulares (hasta 600px) */
  /* ========================= */
  @media only screen and (max-width: 600px) {
    body {
      font-size: 14px;
      background-color: #292b31;
    }
  
    #Cheader, #Cfooter, #section {
      width: 95%;
      height: auto;
      margin: 0 auto;
    }
  
    #logo {
      width: 80px;
      height: 80px;
      float: none;
      display: block;
      margin: 10px auto;
    }
  
    #cajac1, #cajac2, #cajac3 {
      width: 100%;
      float: none;
      margin: 10px 0;
      text-align: center;
    }
  
    #cajac4, #cajac42 {
      width: 95%;
      height: auto;
      margin: 10px auto;
      float: none;
      border-radius: 10px;
      padding: 10px;
    }
  
    #cajas1, #cajas2, #cajas3, #cajas4, #cajas5, #cajas6,
    #cajas7, #cajas8, #cajas21, #cajas22, #cajas23,
    #cajas24, #cajas25, #cajas26, #cajas27, #cajas28, #cajas29 {
      width: 95%;
      height: auto;
      float: none;
      margin: 10px auto;
      border-radius: 10px;
      padding: 10px;
    }
  
    #cajaf1, #cajaf2, #cajaf3, #cajaf4 {
      width: 90%;
      height: auto;
      margin: 10px auto;
      text-align: center;
      float: none;
      padding: 10px;
    }
  
    h1 {
      font-size: 190%;
      margin-top: 10px;
    }
  
    h2 {
      font-size: 150%;
    }
  
    p {
      font-size: 15px;
      line-height: 1.5;
    }
  
    .link1 {
      font-size: 180%;
    }
     #cajac2,
     #cajac3 {
     display: block;
     text-align: center;
     margin: 8px auto;
    }

    #cajac2 a,
    #cajac3 a {
    display: block;
    width: 50%;
    margin: 8px auto;
    margin-right:2px;
    font-size: 16px;
    padding: 10px;
    background-color: #264b73;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    #cajac2 a:hover,
    #cajac3 a:hover {
    background-color: #3b6ea8;
    transform: scale(1.03);
  }
  
    #volverArriba, #volverInicio {
      font-size: 12px;
      padding: 8px 10px;
    }
  }
  
  /* ============================= */
  /* 💻 Tablets (601px a 1024px) */
  /* ============================= */
  @media only screen and (min-width: 601px) and (max-width: 1024px) {
    #Cheader, #Cfooter, #section {
      width: 90%;
      height: auto;
      margin: 0 auto;
    }
  
    #logo {
      width: 90px;
      height: 90px;
      float: none;
      display: block;
      margin: 10px auto;
    }
  
    #cajac1, #cajac2, #cajac3 {
      width: 100%;
      float: none;
      text-align: center;
      margin: 10px 0;
    }
  
    #cajac4, #cajac42 {
      width: 90%;
      height: auto;
      margin: 15px auto;
      float: none;
      padding: 10px;
      border-radius: 10px;
    }
  
    #cajas1, #cajas2, #cajas3, #cajas4, #cajas5, #cajas6,
    #cajas7, #cajas8, #cajas21, #cajas22, #cajas23,
    #cajas24, #cajas25, #cajas26, #cajas27, #cajas28, #cajas29 {
      width: 90%;
      height: auto;
      float: none;
      margin: 15px auto;
      border-radius: 10px;
      padding: 15px;
    }
  
    #cajaf1, #cajaf2, #cajaf3, #cajaf4 {
      width: 85%;
      height: auto;
      margin: 15px auto;
      text-align: center;
      float: none;
    }
  
    h1 {
      font-size: 220%;
    }
  
    h2 {
      font-size: 180%;
    }
  
    p {
      font-size: 16px;
    }
  
    .link1 {
      font-size: 200%;
    }
     #cajac2,
     #cajac3 {
      display: inline-block;
      text-align: center;
      margin: 10px;
      margin-left: 5px;
  }

    #cajac2 a,
    #cajac3 a {
      font-size: 18px;
    padding: 10px 22px;
    background-color: #264b73;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

    #cajac2 a:hover,
    #cajac3 a:hover {
    background-color: #3b6ea8;
    transform: scale(1.05);
  }
  }