@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Covered+By+Your+Grace&family=Patrick+Hand+SC&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


/* font-family: "Patrick Hand SC", cursive;
font-family: "Covered By Your Grace", cursive; 
font-family: "Caveat", cursive;  
font-family: "Rubik", sans-serif;*/

/* Reset CSS */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}





/* ---------------------------inicio contenedor1 Titulo y varios--------------------------------------------- */


#contenedor1 {
    padding: 20px;
}
h1.display-1 {
    font-size: 7rem;
    line-height: 1.2;
    color: #43b5e6;
    text-shadow: #acadad 2px 2px 2px;
}
@media (max-width: 992px) {
    h1.display-1 {
        font-size: 4.5rem;
    }
}
@media (max-width: 768px) {
    h1.display-1 {
        font-size: 3.9rem;
    }
}
@media (max-width: 576px) {
    h1.display-1 {
        font-size: 3.9rem;
    }
}

/* -------------------------------------   Inicio Contenedor2 --------------------------- */


#contenedor2 {
    padding: 20px;
}
h2.display-2 {
    font-size: 3rem;
    line-height: 1.2;
}
@media (max-width: 992px) {
    h2.display-2 {
        font-size: 2.5rem;
    }
}
@media (max-width: 768px) {
    h2.display-2 {
        font-size: 2rem;
    }
}
@media (max-width: 576px) {
    h2.display-2 {
        font-size: 1.9rem;
    }
}

#contenedor3 {
    padding: 30px 15px;
}
#caja1 {
    padding: 2px; }

#caja22 {
    padding: 5px;
}
#parrafo11, .alert {
    font-size: 17px;
    margin: 0 1px;
    text-align: center;
}
.alert {
    font-size: 14px;
}
@media (min-width: 576px) {
    #parrafo15, .alert {
        margin: 0 10px;
    }
}
/* ----------------------------   mejora ------------ */

#caja22 {
    padding: 5px;
}
#parrafo15 {
    font-size: 17px;
    margin: 0 1px;
    text-align: justify;
}
.alert {
    font-size: 14px;
}


@media (max-width: 576px) {
    /* Ajustes de tamaño de fuente y márgenes para dispositivos móviles */
    #parrafo15 {
        font-size: 1rem;
        margin-left: 1px; /* Reduce el margen izquierdo */
        margin-right: 1px; /* Reduce el margen derecho */
    }
}
 

/* --------------------------------- Fin contenedor 2 -------------------------------- */


/* ----------------------------Fin Contenedor1 Titulo y varios-------------------------------------- */

/* ---------------------------Inicio texto Video index contenedor 2 1/2------------------------------------ */

.container500 {
    max-width: 800px; /* Ancho máximo del contenido */
    margin: auto; /* Centrar el contenido en pantallas grandes */
    padding: 20px;
    text-align: center; /* Alineación centrada del contenido */
}

#titulovideo {
    font-size: 3rem;
    margin-bottom: 10px;
}

#textovideo {
    font-size: 1.3rem;
    margin-bottom: 20px;
    margin-left: 90px;
    margin-right: 90px;
}

@media (max-width: 768px) {
    /* Ajustes de tamaño de fuente para tabletas y dispositivos móviles */
    #titulovideo {
        font-size: 2.5rem;
    }
    #textovideo {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    /* Ajustes adicionales de tamaño de fuente para dispositivos móviles pequeños */
    #titulovideo {
        font-size: 2.5rem;
    }
    #textovideo {
        font-size: 1rem;
    }
}

/* ---------------------------------Fin texto Video Index------------------------------------- */

/* ---------------------------  Inicio texto Algunos tratamientos--------------------- */
#titulo33 {
    font-size: 3.5rem; /* Tamaño de fuente predeterminado */
    margin-top: 2rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    /* Ajustes de tamaño de fuente para tabletas */
    #titulo33 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    /* Ajustes de tamaño de fuente para dispositivos móviles */
    #titulo33 {
        font-size: 2rem;
    }
}

/* ---------------------------  Fin texto Algunos tratamientos--------------------- */

/* ----------------------------------- Inicio horario------------------ */

#horario {
    margin: 1rem auto;
    padding: 1rem;
    max-width: 800px;
    background-color: #baf7f4;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    font-size: 2rem;
    color: #363737;
}

/* Estilo para tabletas */
@media (max-width: 768px) {
    #horario {
        margin: 1.5rem auto;
        padding: 0.75rem;
        font-size: 1.5rem;
        max-width: 90%;
    }
}

/* Estilo para móviles */
@media (max-width: 480px) {
    #horario {
        margin: 1rem auto;
        padding: 0.5rem;
        font-size: 1.5rem;
        max-width: 95%;
    }
}



/* -----------------------------------Fin horario------------------ */

/* ----------------------------------------------  Jumbotron de Perez------------------------------------ */
.jumbotron2 {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
}

.perez {
    font-size: 18px;
    text-align: justify;
    margin-right: 20px;
    margin-left: 20px;
}

@media (max-width: 768px) {
    .jumbotron2 {
        padding: 1rem;
    }
    .perez {
        font-size: 16px;
        margin-right: 10px;
        margin-left: 10px;
    }
}

/* -----------------------------------Fin Jumbotron Perez Responsive------------------ */


/* ---------------------- Inicio Texto de Galeria de imagenes y Pincha aqui-------------------------- */
.galeriasfin{
  text-align: center;
}

/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
  .galeriasfin h4 {
    font-size: 1em; /* Tamaño de texto reducido para dispositivos móviles */
  }
}

.pincha1{
font-size: 14px;
}

/* ---------------------- Fin Texto de Galeria de imagenes y Pincha aqui-------------------------- */

/* ----------------------------------Inicio footer--------------------------------------------- */
footer{ margin:10px; padding: 5px 5px;
    text-align: center;}

#pie1{font-family: 'Courier New', Courier, monospace; 
font-size: 60px;
margin-top: 50px;}


.iconoredes{width: 30px;
    margin: 20px;
    filter: opacity(0.2); 
    transition: all 1s ease 0.1s;}

.iconoredes:hover{transform: scale(2);
filter: opacity(1);}

#pie2{ 
    left: 40px;
    transition: all 1s ease 0.1;
    
}

#pie3:hover{ left: 10px;}
#icono{width: 60px;}

/* ----------------------------------- Fin Footer-------------------------------------------- */




/* -------------------------------------------  este es el css para el formulario de contacto-------------------- */

.container4 {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #76b8c7;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    font-size: 30px;
    text-align:justify;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    font-weight: bold;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: 10px;
}

button[type="submit"],
button[type="reset"] {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover,
button[type="reset"]:hover {
    background-color: #0056b3;
}


/* ----------------------Este es el codigo css del navegador  traido de Ai20.------------------------------ */

nav{ background-color: rgb(27, 170, 231);
    width: 100%;
    position: rigth;
text-align: right;
padding: 25px 15px;
/* box-shadow: 0px 3px 3px white; */
border-bottom: 5px solid white;



}
.hnav{color: white;
    font-family: "arial";
    font-size: 15px;
    text-decoration: none;
    margin-left: 20px;
}

.hnav:hover{color: brown; font-size: 20px; }

.hnav:active{color: rgb(12, 35, 141);}

/* ------------------------------------  Linea del tamaño de texto del horario en index.html----------------------------- */

    /* ------------------------------------  Fin texto del horario en index.html----------------------------- */
    
    .titulos7{font-size: 70px; color:#43b5e6 ;
    text-shadow: 5px 5px 5px rgb(184, 186, 186);}

    .privacidad{font-size: 20px;}

    
    /* ------------------------------   nuevo  div de horario ---------------------------
     */
     
     .section1{ background-color: rgba(45, 199, 223, 0.698); color: rgb(119, 116, 116); font-size:28px; padding:10px; margin: 50px;  border-radius: 15px; text-align: center;
     }
     /* -----------------------------------------------Fin Horario Index.html------------------------------------------- */


    
     .jumbotron1{background-color: rgba(45, 199, 223, 0.698);}

     .jumbotron2{background-color: rgba(131, 132, 132, 0.698);}

     /* ---------------------------------------------Inicio  Icono de especialidades----------------------------------------------- */
    
      
        


        iconos {
            display: flex;
            flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias filas si no caben en una sola */
            justify-content: center;
            align-items: center;
          }
          
          .iconos  div {
            text-align: center; /* Centra el texto horizontalmente dentro de cada columna */
            margin-bottom: 20px; /* Agrega un espacio entre cada fila de iconos */
          }
          
          .iconos img {
            width: 280px; /* Tamaño inicial de los iconos */
            transition: transform 0.3s, filter 0.3s; /* Transiciones para el efecto hover */
          }
          
          .iconos img:hover {
            transform: scale(1.1); /* Agrandar en un 20% al hacer hover */
            /* filter: brightness(80%); Cambiar el color de los iconos al hacer hover */
            cursor: pointer; /* Cambiar el cursor al pasar el mouse por encima */
          }
          
          /* Añadir estilos para los títulos h2 */
          .iconos h2 {
            margin-top: 15px; /* Añade un espacio entre el icono y el texto */
          }

.iconos h2:hover{

    transform: scale(1.2); /* Agrandar en un 20% al hacer hover */
    color: rgb(61, 61, 62);
    /* filter: brightness(80%); Cambiar el color de los iconos al hacer hover */
    cursor: pointer; /* Cambiar el cursor al pasar el mouse por encima */

}

.titulo8{ 
    color: #363737;
    text-align: left;
    text-shadow: 2px 2px 2px grey  ;
    margin-top: 70px;

}



/* ----------------------------------- inicio codigo  nuevo de textos 20 al 25 ---------------------------------- */

.container-fluid {
    padding: 0 15px;
  }
  
  .titulo8 {
    text-align: left;
    margin-bottom: 20px;
    color:#43b5e6 ;
  }
  
  /* Grouping all text classes */
  .texto20, .texto21, .texto22, .texto23, .texto24, .texto25 {
    text-align: justify;
    margin: 0 15px;
  }
  
  /* Responsive Adjustments */

  /* For celular screens */
  @media (max-width: 568px) {
    .texto20, .texto21, .texto22, .texto23, .texto24, .texto25 {
      margin: 0 5px;
    }
  
    .container-fluid {
      padding: 0 10px;
    }
  
    .img-fluid {
      max-width: 70%;
      height: auto;
      display: block;
      margin: 0 auto 20px;
    }
  
    .row {
      flex-direction: column;
      align-items: center;
    }
  }
  /* For tablet screens */
  @media (min-width: 700px) and (max-width: 990px) {
    .texto20, .texto21, .texto22, .texto23, .texto24, .texto25 {
        margin-left: 150px; /* Adjust this value to create more space */
        margin-right: 30px; /* Adjust this value to create more space */
    }
  
    .container-fluid {
      padding: 0 20px;
    }
  }
  
  /* For larger screens */
  @media (min-width: 998px) {
    .texto20, .texto21, .texto22, .texto23, .texto24, .texto25 {
      margin-left: 210px; /* Adjust this value to create more space */
      margin-right: 25px; /* Adjust this value to create more space */
    }
  
    .img-fluid {
      max-width: 98%;
      height: auto;
    }
  
    .row {
      align-items: flex-start;
    }

    .container-fluid {
        padding: 0 30px;
      }
  }


/* ----------------------------------- Fin codigo  nuevo de textos 20 al 25 ---------------------------------- */







/* --------------------------------------------Inicio Nuevo Texto26------------------------------------------ */
.texto26 {
    font-size: 17px;
    text-align: justify;
    margin-top: 20px;
  }
  
  @media (min-width: 568px) {
    .texto26 {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  
  @media (min-width: 992px) {
    .texto26 {
      margin-left: 40px;
      margin-right: 40px;
    }
  }
  
  @media (max-width: 767.98px) {
    .texto26 {
      margin-left: 10px;
      margin-right: 10px;
    }
  }

/* --------------------------------------------Fin Nuevo Texto26------------------------------------------ */


/* ----------------------------------------Inicio Divisor artistico ------------------------------------- */
.divisor-artistico {
    display: flex;
    justify-content: center;
    margin: 20px 0; /* Espaciado arriba y abajo del divisor */
  }
  .divisor-artistico img {
    max-width: 400px;
    width: 40%;
    height: auto;
  }
  
  @media (max-width: 767.98px) {
    .divisor-artistico img {
      max-width: 600px; /* Cambia el tamaño máximo de la imagen para móviles */
    }
  }

  /* ----------------------------------------Fin Divisor artistico ------------------------------------- */



  
/* --------------------------------Inicio Por que elgir a estardent texto50----------------------------- */

.texto50 {
    font-size: 17px;
    text-align: justify;
    margin-top: 20px;
  }

  @media (min-width: 568px) {
    .texto50 {
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  @media (min-width: 992px) {
    .texto50 {
      margin-left: 40px;
      margin-right: 40px;
    }
  }

  @media (max-width: 998px) {
    .texto50 {
      margin-left: 10px;
      margin-right: 10px;
     
    }
  }

  .titulo18 {
    margin-left: 20px;
  }
/* ----------------------------------- Fin por que elegir a stardent----------------------------- */

/* <!-- ----------------------------  Inicio  Linea 4 razones para elegir Stardent---------------------------- --> */

.card-custom {
    position: relative;
    padding-top: 40px; /* Adjust based on the logo size */
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    font-style: italic;
  }

  .card-custom .card-logo {
    position: absolute;
    top: -20px; /* Adjust based on the logo size */
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #d2a679; */
    /* border-radius: 50%; */
    padding: 10px;
    width: 60px; /* Adjust based on the logo size */
    height: 60px; /* Adjust based on the logo size */
    display: flex;
    justify-content: center;
    align-items: center;
  
  }

  .card-custom .card-logo img {
    width: 400%;
    height: auto;
    margin-bottom: 50px;
  }

  @media (max-width: 567px) {
    .card-custom {
      margin-top: 100px; /* Margen base para todas las tarjetas */
    }
   
  }
  
/* <!-- ----------------------------  Inicio  Linea 4 razones para elegir Stardent---------------------------- --> */

          /* ---------------------------------------- Fin iconos especialidades --------------------------------- */


       #ico{
font-size: 14px;
margin-left: 20px;
margin-right: 580px;
text-align: justify;
color: rgb(52, 51, 52);
justify-content: center;
            align-items: center;

          }


          .collapse{text-align: justify;}

/* -------------------------------------------  galeria en index.html----------------------- */



        .gallery img {
            width: 100%;
            height: auto;
            margin-left: 15px;
            margin-right: 15px;
            margin: auto; 
            /* Ajusta el valor según tus necesidades */
        }

        /* ----------------------------------Fin galeria INDEX----------------------------- */

       #desplegable{ text-align:justify;}
       #dental1{text-align: justify;}


/* ----------------------------  Atribuir licencia freepick------------------------------------- */
       #freepik{
        font-size: 12px;
        margin-left: 25px;
         margin-right: 25px;
        text-align: center;}

        /* ---------------------------- Fin  atribuir licencia freepick------------------------------------- */

#disenador{
    font-size: 9px;
    margin-bottom: 1px;
}

/* -------------------  Inicio cambio texto en Tratamientos----------------------- */

@media (max-width: 576px) {
    .titulo8 {
        font-size: 1.8rem; /* Ejemplo de tamaño de fuente personalizado */
    }
}

/* --------------------------------Fin cambio texto responsive en tratamientos-------------- */




        /* ---------------------------  Inicio  galeria3 pagina Tratamientos---------------------------- */


        .gallery3 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            padding: 16px;
          }
      
          .gallery3 img {
            width: 100%;
            height: auto;
            display: block;
          }
      
          .gallery-item {
            margin: 8px;
          }
      
          .gallery-item.row-1 {
            flex: 1 1 calc(50% - 32px); /* Dos imágenes en la primera fila */
            max-width: calc(50% - 32px); /* Asegurar que no haya tercera imagen en la primera fila */
          }
      
          .gallery-item.row-2 {
            flex: 1 1 calc(33.33% - 32px); /* Tres imágenes en la segunda fila */
            max-width: calc(33.33% - 32px);
          }
      
          .gallery-item.row-3 {
            flex: 1 1 100%; /* Una imagen completa en la tercera fila */
            max-width: 100%;
          }
      
          @media (max-width: 998px) {
            .gallery-item.row-1,
            .gallery-item.row-2,
            .gallery-item.row-3 {
              flex: 1 1 100%; /* Una imagen por fila en pantallas más pequeñas */
              max-width: 100%;
            }
          }

        /* -----------------------------------Fin Galeria3 Pagina Tratamioentos----------------------------- */

        


        /* ----------------------------------Consentimiento de Cookies ------------------------------------ */

        .cookie-consent {
            display: none;
            position: fixed;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            z-index: 1000;
            text-align: center;
        }
        
        .cookie-consent-content img.cookie-logo {
            width: 50px;
            margin-bottom: 10px;
        }
        
        .cookie-consent-content p {
            margin: 10px 0;
        }
        
        .cookie-consent-content button {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .cookie-consent-content button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

/* ---------------------------------------Fin Consentimiento de Cookies---------------------------- */



/* -------------Inicio  de galeria de profesionales---------------------------------- */


.profesional-card {
    text-align: center;
    margin-bottom: 30px;
}
.profesional-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* -------------Fin  de galeria de profesionales---------------------------------- */


/* ------------------------------  Inicio  de Tema Cookies------------------------------ */


.content67 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 50px;
    margin-right: 50px;

}
.content67 img {
    max-width: 200px;
    height: auto;
    margin-left: 20px;
}
.content67 .text {
    flex: 1;
    text-align: justify;
}
h4 {
    margin-top: 30px;

}@media (max-width: 767px) {
    .content67 {
        flex-direction: column;
    }
    .content67 img {
        width: 300px;
        max-height: 300px;
        margin-left: 0;
        margin-bottom: 20px;
        align-self: center;
    }
}


/* ------------------------------ Fin  de Tema Cookies------------------------------ */

/* ------------------------------Inicio Galeria Nuestra clinica------------------------- */


.gallery99 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

.photo {
    background-color: #f0f0f0;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
}

.photo.large img, .photo.medium img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.photo.large {
    width: calc(67% - 20px); /* 800px width equivalent with margin */
    height: 500px;
}

.photo.medium {
    width: calc(33% - 20px); /* 400px width equivalent with margin */
    height: 500px;
}

@media (max-width: 1200px) {
    .photo.large {
        width: calc(60% - 20px);
        height: auto;
    }
    .photo.medium {
        width: calc(40% - 20px);
        height: auto;
    }
}

@media (max-width: 768px) {
    .photo.large, .photo.medium {
        width: calc(80% - 20px);
        height: auto;
    }
}

@media (max-width: 567px) {
    .photo.large, .photo.medium {
        width: calc(90% - 20px);
        height: auto;
    }
}
   
/* ------------------------------Fin  Galeria Nuestra clinica------------------------- */

/* ---------------------------- Inicio Vision - mision ----------------------------- */
.texto-cursiva1 {
    font-size: 16px;
    font-style: italic;
    text-align: justify;
    margin-left: 40px;
  }

  .texto-cursiva2 {
    font-size: 16px;
    font-style: italic;
    text-align: justify;
    margin-right: 20px;
    margin-left: 40px;
  }
  .texto-centro1 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
  }
  .img-responsive1 {
    max-width: 100%;
    height: auto;
    margin-right: 60px;
    
  }
  .img-responsive2 {
    max-width: 100%;
    height: auto;
    margin-left: 30px;
    
  }
  .vis{
    margin-left: 35px;
  }

  .mis{
    margin-left: 38px;
  }

  .titulov{
    text-align: center;
    
  }


/* -------------------------   Inicio nuevo para titulo mision - vision----------------------------------- */

.titulosmv {
    font-size: 3.5rem; /* Ajusta el tamaño según sea necesario */
    color: #42c2f8;
    text-shadow: 2px 2px 2px grey;
    

  }
  .titulosvm {
    font-size: 2rem; /* Ajusta el tamaño según sea necesario */
  }
  .titulov {
    font-size: 1.5rem; /* Ajusta el tamaño según sea necesario */
  }
  @media (max-width: 576px) { /* Ajustes para pantallas pequeñas */
    .titulosmv {
      font-size: 1.75rem;
    }
    .titulosvm {
      font-size: 1.5rem;
    }
    .titulov {
      font-size: 1.25rem;
    }
  }


/* ---------------------------- Fin Vision - mision ----------------------------- */

#disenador1{
    font-size: 8px;
text-align:center;

}