html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.sin_margen {
  margin: 0px;
}

.iconos_chi {
  width: 20px;
  height: 20px;
}

.azul_osc {
  color:#00337b;
}

.azul_claro {
  color: #2d82e7;
}

.gris{
  color: #5e5e5e;
}

.text-shadow {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.text_font {
  font-family: sans-serif;
}

#contacto {
  scroll-margin-top: 113px;
}


/* INDEX */

    /* Sección 1 */
    
    #navbar {
      transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }
    
    .navegacion {
      list-style: none;
      display: flex;                
      justify-content: flex-end; 
      align-items: center;       
      gap: 30px;                    
      padding: 0;
      margin: 0;
    }

    .navegacion li {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .navegacion a {
      color: #FFFFFF;
      text-decoration: none;
      font-weight: lighter;
      font-size: 15px;
      font-family: sans-serif;
    }

    .navegacion p {
      color: #FFFFFF;
      text-decoration: none;
      font-weight: lighter;
      font-size: 15px;
      font-family: sans-serif;
    }

    .main-nav {
      position: absolute;
      top: 23px; 
      left: 0;
      width: 100%;
      z-index: 10;
    }
      
    .navbar-toggler-icon {
      filter: brightness(0) invert(1);
    }

    .nav-link {
      position: relative;
      transition: color 0.3s;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      bottom: 0;
      left: 50%;
      background-color: white;
      transition: width 0.3s ease, left 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
      left: 0;
    }

    .boton {
      background-color: #294f8e; 
      color: #FFFFFF; 
      font-size: 19px;
      transition: all 0.3s ease;
    }

    .boton:hover {
      background-color: #ffffff;
      color: #294f8e;
    }
  
    @media (max-width: 576px) {
      .navegacion li a {
        font-size: 13px;
      }
    
      .iconos_chi {
        width: 16px;
      }
      .barra-contacto {
        display: none !important;
      }
      .logo-principal {
        height: 50px !important;
      }
    }

    /* Certificados */
    .imag1 {
      background-position: center;
      background-size: cover;
      height: 100px;
      width: 100px;
      margin-left: 50px;
      margin-right: 50px;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .logo-imagen {
      height: 100px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Candidatos */
    .cuadrado {
      background-color: #2d82e7;
      padding: 30px;
      margin: 30px 20px 30px 20px;
      height: 330px;
      border-radius: 30px;

      display: flex;
      flex-direction: column;     
      justify-content: center;    
      align-items: center;        

      text-align: center;
      list-style: none;
      color: #ffffff;
    }
    
    .plus-icon {
      width: 24px;
      height: 24px;
      margin-top: 15px;
    }

    a.candidatos {
      display: inline-block;
      transition: transform 0.2s ease;
    }

    a.candidatos:hover {
      transform: translateY(-3px);
    }

    @media (max-width: 576px) {
      .cuadrado {
        height: 300px;
      }
      
      .cuadrado h4 {
        font-size: 20px;
        font-weight: bold;
      }
    
      .cuadrado p {
        font-size: 17px;
      }
    
      .boton1 {
        width: 30px;
      }
    }
    

    /* Compromiso */
    .seccion4 {
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 25px;
      text-align: center;
      font-weight: 400;
      
      color: #2d82e7;
    }

    .boton4 {
      background-color: #2d82e7;
      color: #ffffff;
      padding: 10px;
      border-radius: 10px;
      border: 0;
      font-size: 16px;
      cursor: pointer;
      width: 11%;
      margin: 30px;
      transition: all 0.3s ease;
    }

    .boton4:hover {
      background-color: #FFFFFF;
      color: #2d82e7;
    }

    @media (max-width: 576px) {
      .seccion4 {
        font-size: 20px;
        padding: 30px 15px;
      }
    
      .seccion4 p {
        margin-top: 10px;
        margin-bottom: 15px;
      }
    
      .seccion4 img {
        margin: 0px;
      }
    
      .boton4 {
        font-size: 16px;
        width: 60%;
        margin-bottom: 20px;
      }
    }

     /* Seccion Gastroplastía */
    .cuadrado2 {
      background-color: #2d82e7;
      padding: 25px;
      margin: 30px 30px 30px 30px;
      height: 300px;
      width: 350px;
      border-radius: 30px;

      display: flex;
      flex-direction: column;     
      justify-content: center;    
      align-items: center;        

      text-align: center;
      color: #ffffff;
    }

    @media (max-width: 576px) {
      .cuadrado2 {
        margin: 0;
      }
      .p2 p{
        font-size: 16px;
      }
    }

    /* Seccion Contacto */

    .mapa-iframe {
      display: block;
      height: 100%;
      border: 0;
    }

    .contact-list {
      text-align: left;
      align-items: flex-start;
    }

    .contacto-link {
      text-decoration: none;
      color: #000;
    }
    .contacto-link:hover {
      text-decoration:underline;
    }

    .altura {
      height: 600px;
    }

    .titulo {
      margin: 60px 0px 60px 0px;
    }

    @media (max-width: 576px) {
      h1.contacto {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
      }

      .altura {
        height: 693px;
      }

      .titulo {
        margin: 0px 0px 60px 0px;
      }

    }

    /* Footer */

    .img2 {
      background-position: center;
      background-size: cover;
      height: 80px;
      width: 400px;
      margin: 30px 40px 30px 40px;
      padding: 0%;
    }

    .icono {
      height: 30px;
      width: 30px;
    }

    .footer-section {
      background-color: #00337b;
      color: white;
      font-family: 'Arial', sans-serif;
    }
    
    .footer-icon {
      width: 30px;
      height: 30px;
      margin-top: 3px;
    }
    
    .footer-link {
      color: white;
      text-decoration: none;
    }
    
    .footer-link:hover {
      text-decoration: underline;
    }

    @media (max-width: 576px) {
      .foot {
        font-size: 13px;
      }
    
      .iconos_chi {
        width: 16px;
      }
    }

/* Obesidad */

    .bg-header {
      background-image: url('imagenes/head_ob.png');
      background-size: cover;
      background-position: center;
      min-height: 400px;
    }
    .pad {
      padding: 50px 50px 0px 50px;
    }

    .cuadro3 {
      background-color: #ffffff;
      padding: 20px;
      height: 100%;
      max-width: 360px;
      margin: 0 auto;
      border-radius: 30px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text-align: center;
      color: #2d82e7;
    }

    .margen2 {
      margin-bottom: 40px;
    }

    .boton5 {
      background-color: #1a3fe1;
      color: #ffffff;
      border: none; 
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .boton5:hover {
      background-color: #00337b;
      color: #ffffff;
    }  
    
    .card-imc {
      min-height: 320px;
    }

    @media (max-width: 768px) {
      .cuadro3 {
        min-height: 320px;
      }
      .margen2 {
        margin-bottom: 20px;
      }
    }
  
/* PROC ENDOSCOPICOS */

    .cuadro {
      background-color: #ffffff;
      padding: 20px;
      height: 100%;
      max-width: 360px;
      margin: 0 auto;
      border-radius: 30px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text-align: center;
      color: #2d82e7;
    }

    .circulo  {
      background-color: #ffffff;
      padding: 25px;
      margin: 30px 30px 30px 30px;
      height: 250px;
      width: 250px;
      border-radius: 1000px;

      display: flex;
      flex-direction: column;     
      justify-content: center;    
      align-items: center;        

      text-align: center;
      color: #2d82e7;
    }

    .icono_gra {
      height: 110px;
    }

    .icono_med {
      height: 50px;
      margin: 50px;
    }
    .icono_med2 {
      height: 90px;
    }

/* PROC ENDOSCOPICOS */
    .cuadro2 {
      background-color: #ffffff;
      padding: 30px;
      height: 300px;
      max-width: 360px;
      margin: 0 auto;
      border-radius: 30px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text-align: center;
    }

    @media (max-width: 576px) {
      .cuadro2 {
        height: 250px;
      }
      .espaciado-superior {
        padding-top: 72px; 
      }
      .consulta-btn {
        margin-top: 0 !important;
        margin-bottom: 20px;
      }
    }
    @media (min-width: 577px) {
      .espaciado-superior {
        padding-top: 123px;
      }
    }

/* QUIENES SOMOS */

    .texto_cel {
      text-align: left;
    }
    .borde {
      border-radius: 30px;
    }
    @media (max-width: 576px) {
      .texto_cel {
        text-align: center;
      }
    }

/* QUIENES SOMOS */

 .img_test {
  max-width: 400px;
 }


/* CIRUGIA */ 
  .cuadro3 {
    background-color: #ffffff;
    padding: 30px;
    height: 320px;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
  }