html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fdf8f5;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contenedor-principal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.barra-navegacion {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

    .barra-navegacion .logo a {
        font-weight: bold;
        font-size: 1.5rem;
        color: #4a2c11;
    }

    .barra-navegacion nav ul {
        display: flex;
        gap: 20px;
    }

        .barra-navegacion nav ul li a {
            color: #6b4c3a;
            font-size: 1rem;
        }

.seccion-bienvenida {
    text-align: center;
    padding: 60px 0;
}

.titulo-principal {
    font-size: 3rem;
    font-weight: bold;
    color: #4a2c11;
    margin-bottom: 20px;
}

.subtitulo-info {
    font-size: 1.25rem;
    color: #6b4c3a;
    margin-bottom: 30px;
}

    .subtitulo-info .telefono {
        font-weight: bold;
    }

.grupo-botones {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.btn-primario {
    background-color: #8b5a2b;
    color: #fff;
    border: 1px solid #8b5a2b;
}

.btn-secundario {
    background-color: transparent;
    color: #8b5a2b;
    border: 2px solid #8b5a2b;
}

.btn-deshabilitado {
    background-color: #f1f1f1;
    color: #a0a0a0;
    border: 1px solid #ddd;
    pointer-events: none;
}

.caja-descripcion {
    background-color: #fff;
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

    .caja-descripcion p {
        text-align: center;
        color: #4a2c11;
        font-size: 1rem;
        line-height: 1.7;
    }

.pie-pagina {
    margin-top: 50px;
    padding: 20px 0;
    text-align: left;
    font-size: 0.9rem;
    border-top: 1px solid transparent;
}

    .pie-pagina p {
        color: #888;
    }

    .pie-pagina a {
        color: #8b5a2b;
    }


/* --- ESTILOS DE LAS TARJETAS (PÁGINA MENÚ) --- */
.seccion-servicios {
    padding: 40px 0;
}

.titulo-servicios {
    font-size: 2.5rem;
    color: #4a2c11;
    margin-bottom: 10px;
}

.subtitulo-servicios {
    font-size: 1.1rem;
    color: #6b4c3a;
    margin-bottom: 40px;
}

.contenedor-tarjetas {
    display: flex;
    gap: 20px; 
    justify-content: space-between;
}

.tarjeta {
    background-color: #fff;
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    padding: 30px 20px;
    flex: 1; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    display: flex;
    flex-direction: column; 
}

    .tarjeta h3 {
        color: #4a2c11;
        font-size: 1.3rem;
        margin-top: 0;
    }

    .tarjeta p {
        color: #555;
        margin-bottom: 30px;
        flex-grow: 1; 
    }


.btn-tarjeta {
    background-color: #8b5a2b;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: block;
}

    .btn-tarjeta:hover {
        background-color: #6b4c3a;
    }

/* --- ESTILOS PARA EL DESPLEGABLE DE INFORMACIÓN --- */

/* Ajustamos el botón para que se vea bien como <button> en lugar de <a> */
button.btn-tarjeta {
    width: 100%;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    outline: none; /* Quita un borde azul automático que ponen los navegadores al hacer clic */
}

/* Diseño de la cajita que se despliega */
.info-extra {
    display: none; /* ¡ESTO ES CLAVE! Oculta la caja por defecto */
    margin-top: 15px;
    padding: 15px;
    background-color: #f8f1eb; /* Un tono café muy suave para resaltarlo dentro de la tarjeta blanca */
    border: 1px solid #e0d8d3;
    border-radius: 4px;
}

    .info-extra p {
        margin-bottom: 0; /* Evita que quede espacio vacío innecesario abajo */
        font-size: 0.95rem;
        color: #4a2c11; /* Texto oscuro corporativo */
    }

/* --- ESTILO PARA LA CAJA DE ESPECIALIDADES EN INICIO --- */
.info-especialidades {
    background-color: #f8f1eb; /* Fondo café claro */
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto 30px auto; /* Centrado y con separación abajo */
    text-align: center;
    color: #4a2c11;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

    .info-especialidades h3 {
        margin-top: 0;
        color: #8b5a2b; /* Título en café más fuerte */
    }

/* --- ESTILOS PARA LA PÁGINA "NOSOTROS" (TABS) --- */

.seccion-nosotros {
    padding: 40px 0;
    text-align: left; /* Alineamos a la izquierda como en tu imagen */
}

.titulo-nosotros {
    font-size: 2.5rem;
    color: #4a2c11;
    margin-bottom: 10px;
}

.descripcion-nosotros {
    font-size: 1.1rem;
    color: #6b4c3a;
    margin-bottom: 30px;
    max-width: 900px; /* Para que el texto no se estire de lado a lado en pantallas grandes */
}

/* Contenedor de los botones */
.grupo-botones-nosotros {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

/* Estilo base de los botones (cuando NO están seleccionados) */
.btn-tab {
    background-color: transparent;
    color: #8b5a2b; /* Texto café */
    border: 1px solid #8b5a2b; /* Borde delgado café */
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

    /* Estilo del botón cuando SÍ está seleccionado */
    .btn-tab.activo {
        background-color: #8b5a2b; /* Fondo café sólido */
        color: #fff; /* Texto blanco */
        border: 2px solid #8b5a2b; /* Borde un poco más grueso */
    }

/* La caja blanca con la información */
.caja-tab {
    background-color: #fff;
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

    .caja-tab p {
        color: #4a2c11;
        margin: 0;
        line-height: 1.6;
    }

/* --- ESTILOS PARA LA GALERÍA --- */

.seccion-galeria {
    padding: 40px 0;
}

.titulo-galeria {
    font-size: 2.5rem;
    color: #4a2c11;
    margin-bottom: 10px;
}

.subtitulo-galeria {
    font-size: 1.1rem;
    color: #6b4c3a;
    margin-bottom: 40px;
}

.contenedor-imagenes {
    display: flex;
    gap: 30px; /* Separación entre las imágenes */
    justify-content: space-between;
}

.tarjeta-imagen {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el botón justo debajo de la imagen */
    flex: 1; /* Hace que las 3 columnas midan lo mismo */
}

    /* Magia para que las imágenes se vean perfectas */
    .tarjeta-imagen img {
        width: 100%;
        height: 250px; /* Forzamos a que todas tengan la misma altura */
        object-fit: cover; /* Si la foto original es muy alta o ancha, esto la recorta sin deformarla */
        border-radius: 10px; /* Bordes redondeados */
        margin-bottom: 15px; /* Espacio entre la foto y el botón */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

/* --- ESTILOS PARA LA PÁGINA DE CONTACTO --- */

.seccion-contacto {
    padding: 40px 0;
}

.titulo-contacto {
    font-size: 2.5rem;
    color: #4a2c11;
    margin-bottom: 10px;
}

.subtitulo-contacto {
    font-size: 1.1rem;
    color: #6b4c3a;
    margin-bottom: 40px;
}

/* La tarjeta blanca principal */
.tarjeta-contacto {
    background-color: #fff;
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    padding: 40px;
    max-width: 600px; /* No queremos que sea tan ancha como la pantalla */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Separación entre teléfono y dirección */
.info-item {
    margin-bottom: 25px;
}

    .info-item h4 {
        margin: 0 0 5px 0;
        font-size: 1.2rem;
        color: #4a2c11;
        font-weight: normal; /* Para que se parezca más a tu imagen */
    }

    .info-item p {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

/* Estilo del botón "Cómo llegar" */
.btn-largo {
    width: 100%;
    background-color: transparent;
    color: #8b5a2b;
    border: 2px solid #8b5a2b;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

    .btn-largo:hover {
        background-color: #8b5a2b;
        color: #fff;
    }

/* La caja que aparece al hacer clic */
.caja-ubicacion {
    margin-top: 20px;
    padding: 20px;
    background-color: #fdf8f5;
    border: 1px solid #e0d8d3;
    border-radius: 6px;
    color: #4a2c11;
}

    .caja-ubicacion p {
        margin: 0;
    }

/* --- ESTILOS PARA LA PÁGINA DE HORARIOS --- */

.seccion-horarios {
    padding: 40px 0;
}

.titulo-horarios {
    font-size: 2.5rem;
    color: #4a2c11;
    margin-bottom: 10px;
}

.subtitulo-horarios {
    font-size: 1.1rem;
    color: #6b4c3a;
    margin-bottom: 40px;
}

/* La caja blanca contenedora */
.tarjeta-horarios {
    background-color: #fff;
    border: 1px solid #e0d8d3;
    border-radius: 8px;
    max-width: 900px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Quitamos los puntos de la lista */
.lista-horarios {
    list-style: none;
    padding: 0;
    margin: 0;
}

    /* Estilo para cada día de la semana */
    .lista-horarios li {
        padding: 20px 25px;
        border-bottom: 1px solid #e0d8d3; /* Esta es la línea divisoria gris */
        font-size: 1.1rem;
        color: #333;
    }

        /* Le quitamos la línea al último elemento para que no se vea doble con el borde de la caja */
        .lista-horarios li:last-child {
            border-bottom: none;
        }

    /* Destacamos el día de la semana con el color café */
    .lista-horarios strong {
        color: #4a2c11;
        display: inline-block;
        width: 100px; /* Esto empuja las horas para que queden alineadas verticalmente */
    }