/* Estilos base */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #edcfec;
    background: linear-gradient(to right, #ffe6e6, #f3def2); /*Degradado*/
    color: #333;
}
h2 {
   text-decoration: underline ;
}
/* Para controlar el scroll suave lo añadimos a todo el documento*/
html {
    scroll-behavior: smooth;
  }
  

/* Encabezado */
header {
    background-color: #edcfec;
    color: #fff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
}
.logo img {
    height: 50px;        /* Ajusta según el tamaño que desees */
    width: auto;         /* Mantiene la proporción del logo */
    object-fit: contain; /* Evita deformaciones si hay contenedor */
    display: block;
  }

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}
/* Estilo para el icono del menú (solo en móviles) */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle .bar {
    width: 30px;
    height: 4px;
    background-color: #fff;
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    nav ul {
        display: none;  /* Oculta el menú */
        flex-direction: column;  /* Organiza los enlaces en una columna */
        background-color: #edcfec;  /* Fondo del menú desplegable */
        position: absolute;  /* Menú se coloca sobre el contenido */
        top: 60px;  /* Ajusta según la altura del header */
        right: 0;
        width: 100%;
        padding: 20px;
        text-align: center;
    }

    nav ul.active {
        display: flex;  /* Muestra el menú cuando está activo */
    }

    .menu-toggle {
        display: flex;  /* Muestra el icono del menú en móviles */
    }
}

/* Para pantallas más grandes, el menú sigue siendo horizontal */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;  /* Oculta el icono del menú en pantallas grandes */
    }

    nav ul {
        display: flex;  /* El menú es horizontal */
        gap: 20px;
        margin: 0;
        padding: 0;
    }
}
/* Hero */
.hero {
    background: url('img/fondo1.PNG') no-repeat center center/cover;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 100px 20px;
    background-color: #edcfec; /* fallback */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2em;
}

/* Secciones */
.section {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
    margin: 20px 0;
}

#carrusel {
    background: linear-gradient(135deg, #FFB6C1, #A2C2FF); /* Degradado rosa a azul claro */
    max-width: 100%;
    margin: 20px auto;
    overflow: hidden;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.slider {
    position: relative;
}

.slides {
    display: flex;
    transition: transform 0.8s ease-in-out;
    /* No animación infinita automática aquí, ahora haremos "manual" */
    width: 100%; /* Asegura que el contenedor de las imágenes ocupe todo el ancho */
}
/* Cada imagen debe ocupar el 100% del ancho de la pantalla */
.slide {
    min-width: 100%;/* Cada slide debe ocupar todo el ancho del contenedor */
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Quitamos padding que separaba las imágenes */
}

.slide img {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain; /* Mostramos toda la imagen sin recortes feos */
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Ahora hacemos la animación automática pero suave usando JavaScript */
/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .slide img {
        width: 100vw !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block;
    }

    #carrusel,
    .slider,
    .slides,
    .slide {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
    }

    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
}
#location p{
    text-align: center;
}

#redes-sociales {
    display: flex;
    gap: 20px; /* Espacio entre botones */
    justify-content: center;
    margin-top: 20px;
}

#redes-sociales a {
    text-decoration: none;
    padding: 10px 20px;
    background-color: #4267B2; /* Color azul para Facebook */
    color: white;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

#redes-sociales a:first-child {
    background-color: #E4405F; /* Color rosado para Instagram */
}

#redes-sociales a:nth-child(3) {
    background-color: #ffffff; /* Google (rojo típico de Google My Business) */
}
/*Añadimos */
.texto-con-borde {
    color: rgb(129, 124, 124); /* O el color que uses en el fondo */

    font-weight: bold;
  }
  
#redes-sociales a:hover {
    opacity: 0.8;
}
/*Boton para hacer scroll hacia arriba*/
#scrollTopBtn {
    position: fixed; /* Siempre fijo en pantalla */
    bottom: 30px; /* Separado 30px del fondo */
    right: 30px; /* Separado 30px del lado derecho */
    z-index: 99; /* Para que esté encima de todo */
    border: none;
    outline: none;
    background-color: #4267B2; /* Azul Facebook */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    transition: background-color 0.3s;
}

#scrollTopBtn:hover {
    background-color: #555; /* Oscurece un poco al pasar el mouse */
}


/*Lista de servicios*/
.servicios-lista {
    list-style: none;
    padding: 0;
}

.servicios-lista li {
    margin: 10px 0;
    font-weight: bold;
}

/*Cómo llegar*/
#location {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.location-content {
    display: flex;
    flex-direction: column; /* O puedes usar row si quieres al lado */
    align-items: center; /* Centrar en vertical */
    justify-content: center; /* Centrar en horizontal */
    gap: 20px; /* Espacio entre el texto y el mapa */
  }
  
  .location-content h2 {
    font-size: 2rem; /* Tamaño bonito para el título */
    margin: 0;
  }
  
/* Estilo para el mapa (iframe) */
.mapa {
    width: 100%;  /* Hacemos el iframe más flexible */
    max-width: 900px; /* Limitar el tamaño máximo */
    height: 450px;
    border: 0;
}
/* Pie de página */
footer {
    background-color: #222;
    color: #ccc;
    text-align: center;
    padding: 5px 5px;
    font-size: 0.9em;
}

/* Botones del carrusel */
.buttons {
    text-align: center;
    margin-top: 20px;
}

.buttons button {
    background-color: #e7ecff;
    border: none;
    color: white;
    padding: 12px 20px;
    margin: 0 10px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.buttons button:hover {
    background-color: #edcfec;
}

/*Añadido el efecto Acordeon en la seccion de Servicios*/
.acordeon .item {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
  }
  
  .titulo-servicio {
    background-color: #f8f9fa;
    color: #333;
    border: none;
    width: 100%;
    padding: 15px;
    text-align: left;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .titulo-servicio:hover {
    background-color: #e0e7ff;
  }
  
  .contenido-servicio {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    background-color: #ffffff;
    border-left: 4px solid #5c7cfa;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }
  
  .item.active .contenido-servicio {
    max-height: 500px; /* valor suficiente para el contenido */
    padding: 15px;
  }
  
  /*Seccion de opiniones*/

  #opiniones {
    background-color: #f7f7f7;
    padding: 2rem;
    border-top: 1px solid #ddd;
}

#opiniones h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.opinion {
    background-color: #fff;
    border-left: 4px solid #90caf9;
    margin: 1rem auto;
    padding: 1rem;
    max-width: 600px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

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

.comentario {
    font-style: italic;
    color: #333;
}

.autor {
    text-align: right;
    font-weight: bold;
    margin-top: 0.5rem;
    color: #555;
}

.logopagina {
    vertical-align: middle; /* Alinea el logo con el medio de la línea de texto */
    height: 1.5em; /* Ajusta el tamaño del logo al tamaño de la letra */
    width: auto; /* Mantiene la proporción del logo */
    margin-right: 10px; /* Añade espacio entre el logo y el texto */
}