/* General */
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

/* Fondo de la página */
.bg_color_light {
    background-color: #f0f8ff; /* Color suave para el fondo */
}

/* Colores y estilos del encabezado */
.navcolor {
    background-color: #00B6BE;
}

.navbar {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 1.1rem;
}

/* Estilo para los títulos principales */
.roboto-title {
    font-weight: 700; 
    color: #00B6BE; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.roboto-title {
    font-size: 3rem; /* Tamaño adecuado */
    margin-bottom: 2rem; 
}

/* Para pantallas grandes */
@media (min-width: 992px) {
    .roboto-title {
        font-size: 4rem;
    }
}

/* Estilo para los párrafos */
.roboto-text {
    font-weight: 300; 
    font-size: 1.1rem;
    color: #555; 
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify; 
}

/* Ajustes de espaciado en las secciones */
section {
    padding: 1rem 0; 
    padding-top: 20px;
}

/* Sección "Quiénes Somos" */
#nosotros {
    background-color: #f0f8ff;
    padding-top: 130px; 
}

#nosotros .container {
    text-align: center;
}

#nosotros p {
    font-size: 1.1rem; 
}

/* Sección "Servicios" */
#servicios {
    background-color: #f0f8ff;
}

#servicios .container {
    text-align: center;
}

#servicios .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#servicios .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#servicios .card-body {
    background-color: #fff;
    padding: 1.5rem;
}

.card-title {
    font-weight: 400;
    color: #00B6BE; /* Color de título en las tarjetas */
    font-size: 1.2rem;
}

.card-text {
    font-size: 1rem;
    font-weight: 300;
    color: #555; 
}

/* Color para los textos de las secciones */
.color_texto {
    color: #555;  
}

/* Ajustes en las tarjetas para pantallas pequeñas */
@media (max-width: 767px) {
    .card-body {
        padding: 1rem;
    }
    .card-title {
        font-size: 1rem;
    }
}

/* Sección Contacto */
#contacto {
    background-color: #f0f8ff;
}

#contacto .container {
    text-align: center;
}

#contacto p {
    font-size: 1.1rem;
}

/* Formulario de contacto */
form {
    border-radius: 10px;
    padding: 2rem;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form .form-control {
    margin-bottom: 1.2rem;
}

/* Ajustes para pantallas móviles */
@media (max-width: 767px) {
    .roboto-title {
        font-size: 2.5rem;
    }

    #nosotros p, #servicios p, #contacto p {
        font-size: 1rem;
    }
}

/* Contenedor de la imagen de fondo */
header {
    position: relative;
    height: 600px; /* Altura del header */
    background-image: url('./assets/imgs/sonrisa_2.png');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

/* Overlay para oscurecer la imagen */
header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35); /* Oscurecer el fondo con un color negro semi-transparente */
    z-index: 1;
}

/* Contenedor de texto centrado */
header .position-absolute {
    position: relative;
    z-index: 2; /* Asegura que el contenido quede encima del overlay */
    text-align: center;
    padding: 1rem; /* Agrega un poco de espaciado */
    max-width: 90%;
    width: 80%; /* Ajusta el ancho para que no ocupe todo el contenedor */
}

/* Estilo del título */
.roboto-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    margin-top: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    z-index: 2;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    header {
        height: 500px; /* Ajusta el tamaño del header para pantallas medianas */
    }

    .roboto-title {
        font-size: 2.5rem;
    }

    .position-absolute {
        width: 90%;
    }
}

@media (max-width: 480px) {
    header {
        height: 400px; /* Ajusta aún más la altura en pantallas pequeñas */
    }

    .roboto-title {
        font-size: 1.6rem;
    }

    .position-absolute {
        width: 90%;
        top: 25%; /* Ajuste adicional si necesitas mayor margen superior */
    }
}

/* Ajustes para los párrafos */
.roboto-text-light {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    z-index: 1; /* Aseguramos que el texto esté encima de la imagen */
    text-align: justify;
}

/* Alinear los íconos y textos verticalmente */
.d-flex {
    display: flex;
    align-items: center; /* Alinea verticalmente */
}

/* Asegura que los elementos dentro de li estén alineados a la misma altura */
li {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Separación entre los elementos */
}

/* Ajuste de márgenes entre el ícono y el texto */
li .me-3 {
    margin-right: 15px;
}

/* Espaciado entre el texto y el enlace */
li .mb-0 {
    margin-bottom: 0;
}

/* Estilo para los enlaces */
.link {
  color: #007bff; /* Azul para el enlace */
  text-decoration: none; /* Eliminar subrayado por defecto */
  font-size: 1rem; /* Tamaño de fuente estándar */
  font-weight: normal; /* Fuente normal, no negrita */
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Estilo al pasar el cursor sobre el enlace */
.link:hover {
  color: #0056b3; /* Cambio de color al hacer hover */
  text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Estilo para los tooltips */
.tooltip-inner {
  background-color: #343a40; /* Fondo oscuro para el tooltip */
  color: #fff; /* Texto blanco */
}

/* Estilo para los enlaces de llamada a la acción */
.highlight-link {
  color: #00B6BE; /* Color verde-azulado similar al de Agenda Hoy */
  font-weight: bold;
  transition: color 0.3s ease;
}

/* Efecto hover */
.highlight-link:hover {
  color: #009b9a; /* Color un poco más oscuro al pasar el cursor */
  text-decoration: underline; /* Subraya el enlace al pasar el cursor */
}

/* Estilo para los iconos */
footer .fa-instagram {
  transition: transform 0.3s ease;
}

footer .fa-instagram:hover {
  transform: scale(1.1); /* Aumenta ligeramente el ícono al hacer hover */
}

/* Color para los títulos de las secciones */
.color-nosotros {
    color: #00B6BE; /* Cambié el color a #00B6BE como lo deseas */
}

.color-trat {
    color: #00B6BE;
}

.color-agen {
    color: #00B6BE;
}



/* Header */
header {
    position: relative;
    height: 800px; /* Altura del header */
    background-image: url('./assets/imgs/sonrisa_4.png');
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed; /* Fija el fondo para escritorio */
    background-repeat: no-repeat; /* Asegura que la imagen no se repita */
}

/* Para dispositivos móviles */
@media (max-width: 767px) {
    header {
        background-attachment: scroll; /* Desactiva 'fixed' en móviles para evitar que el fondo se mueva */
        height: 600px; /* Ajusta la altura del header en móviles */
    }
}