:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #FFC107;
    --secundario: #50b9c5;
    --secundariob: #c5eef3;
    --gris: #757575;
    --grisClaro: #DFE9F3;

    /*forma */

    --color-background: #cbd5e1;
    --color-background-alt: #64748b;
    --color-border-active: #64748b;
    --color-border-default: #94a3b8;
    --color-highlight: #cbd5e1;
    --color-primary: #1e293b;
    --color-primary-active: #090f1d;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Roboto ital", system-ui, sans-serif;
    --font-family-display: "Roboto ital", system-ui, sans-serif;

}

/*  Globales **/
html {
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model **/
    /*scroll-snap-type: y mandatory;*/
}
/** Scroll Snap**/

.servicios,
.navegacion-principal,
.formulario {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}


*, *:before, *:after {
    box-sizing: inherit;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    font-family:Arial, Helvetica, sans-serif;
}

header{
    width:100%;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
}

.top-header{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
}

.logo img{
    width:150px;
}

.empresa{
    flex:1;
    margin-left:20px;
}

.empresa h1{
    color:#1d7272;
    font-size:34px;
}

.empresa span{
    color:#666;
}

.datos{
    text-align:right;
    line-height:1.8;
    font-size:16px;
}

/* Navegacion Principal */
.nav-bg {
    background-color: var(--secundario);
}

.navegacion-principal {
    display: flex;
    flex-direction: column;    
}

@media (min-width: 768px) {
    .navegacion-principal {
        flex-direction: row;
        justify-content: space-evenly;  /*space-evenly*/
    }
}

.navegacion-principal a{
    display:block;
    text-align: center;
    color: var(--blanco);
    text-decoration:none;
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem;
}

.navegacion-principal a:hover{
    background-color:var(--secundariob); /*--primario*/
    color: var(--oscuro);
}



.site-footer {
  background-color: var(--secundario);
  color: var(--oscuro);
  text-align: center;
  padding: 20px;
  font-family: sans-serif;
   

}

.nosotro_titulo {
    display: flex;    
    justify-content: center;
    font-size: 2.5rem;
    line-height: 10rem;
}
/* nosotros historia */
.nosotros_historia {
   display: flex;
   flex-direction: row;
   gap: 30px;    /* Espacio de separación entre imagen y texto */
   align-items: center;  /* Centra verticalmente la imagen con el texto */
   max-width: 1200px;       /* Evita que las cajas se estiren demasiado */
   margin: 0 auto;         /* Centra el contenedor completo en la pantalla */
   padding: 20px;          /* Colchón de seguridad para pantallas móviles */

}

.nosotros_historia_imagen {
    flex: 1;
    width: 40%;
    
  
/*    padding: 20px;
    font-size: 3rem;
    font-weight: 300;
    text-align: justify; */

}

.nosotros_historia_texto p {
    align-items: center;
    padding: 1.25rem;
    font-size: 3rem;
    font-weight: 300;
    text-align: justify;
    margin: 4rem;
    color: var(--color-primary-active);
    

}





/* fin historia */
.nosotros_mision {
   display: flex;
   flex-direction: row;
   gap: 30px;    /* Espacio de separación entre imagen y texto */
   align-items: center;  /* Centra verticalmente la imagen con el texto */
   max-width: 1200px;       /* Evita que las cajas se estiren demasiado */
   margin: 0 auto;         /* Centra el contenedor completo en la pantalla */
   padding: 20px;          /* Colchón de seguridad para pantallas móviles */

}


.nosotros_mision_imagen {
    flex: 1;
/*    padding: 20px;
    font-size: 3rem;
    font-weight: 300;
    text-align: justify; */

}


.nosotros_mision_texto p {
    align-items: center;
    padding: 1.25rem;
    font-size: 3rem;
    font-weight: 300;
    text-align: justify;
    margin: 4rem;
}

.nosotros_vision {
   display: flex;
   flex-direction: row;
   gap: 30px;    /* Espacio de separación entre imagen y texto */
   align-items: center;  /* Centra verticalmente la imagen con el texto */
   max-width: 1200px;       /* Evita que las cajas se estiren demasiado */
   margin: 0 auto;         /* Centra el contenedor completo en la pantalla */
   padding: 20px;          /* Colchón de seguridad para pantallas móviles */

}

.nosotros_vision_imagen {
    flex: 1;
/*    padding: 20px;
    font-size: 3rem;
    font-weight: 300;
    text-align: justify; */

}

.nosotros_vision_texto p {
    align-items: center;
    padding: 1.25rem;
    font-size: 3rem;
    font-weight: 300;
    text-align: justify;
    margin: 4rem;
}

.directorio_contenedor {
    display: flex;
    flex-direction: row;
    
    gap: 30px;    /* Espacio de separación entre imagen y texto */
    align-items: center;  /* Centra verticalmente la imagen con el texto */
    max-width: 600px;       /* Evita que las cajas se estiren demasiado */
    margin: 0 auto;         /* Centra el contenedor completo en la pantalla */
    padding: 20px;    

}

/* medicos.html*/

.directorio_titulo {
    display: flex;    
    justify-content: center;
    font-size: 2.5rem;
    line-height: 10rem;
}

.directorio_especialidades_contenedor {
    display: flex;
    flex-direction: column;
    gap: 40px;    /* Espacio de separación entre imagen y texto */
    align-items: center;  /* Centra verticalmente la imagen con el texto */
    max-width: 1200px;       /* Evita que las cajas se estiren demasiado */
    margin: 0 auto;         /* Centra el contenedor completo en la pantalla */
    padding: 20px; 
   
}

.directorio_especialidades_contenedor table {
    width: 100%;
    border-collapse: collapse; /* Elimina dobles bordes molestos */
    font-family: Arial, sans-serif; /* Cambia el tipo de letra */
    margin: 20px 0;
    line-height: 8rem;
    font-size: 3rem;   
}


.directorio_especialidades_contenedor td a {
  color: #333333; /* Color gris oscuro para el texto */
  text-decoration: none; /* Quita el subrayado azul clásico de los enlaces */
  display: block; /* Hace que toda la celda sea clickeable, no solo las letras */
}

/* 5. Efecto visual al pasar el mouse por encima */
.directorio_especialidades_contenedor tr:hover {
  background-color: #f5f9ff; /* Cambia el fondo de la fila al pasar el cursor */
}

.directorio_especialidades_contenedor td a:hover {
  color: #0056b3; /* El texto se vuelve azul al pasar el cursor */
  text-decoration: underline; /* Aparece un subrayado sutil */
}


.medicos_alergologia {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 50px;
    padding: 4rem;
   
}


#alergologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}




#anestesiologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}

#cardiologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#cirugia-bariatrica {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}

#cirugia-general {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#cirugia-plastica {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}

#coloproctologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#dermatologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#dermatologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#gastroenterologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#ginecologia  {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#medicina-interna {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#neumologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}



#neurofisiologia-neurologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#odontologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#oftalmologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}



#oncologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#ortodoncia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}

#otorrinolaringologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#pediatria  {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}

#psiquiatria {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#radiologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#reumatologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#traumatologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}


#urologia {
    display: flex;    
    justify-content: center;
    font-size: 3rem;
    line-height: 10rem;
 
}