* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    margin: 0;
    font-family: "poppins", sans-serif;
}


.top-section {
    height: 500px;
    background: #A557D0;
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1; 
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #A557D0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 0px solid white;
    object-fit: cover;
    margin-right: 15px; /* Espacio entre la imagen y el texto */
    margin-top: 58px;
    z-index: 9999; /* un número bien alto para que esté encima de todo */
}

.logo-text {
    color: white; /* O el color que prefieras */
    font-size: 20px;
}

.logo-text h1 {
    font-size: 35px;
    font-weight: bold;
    font-family: "Rancho", regular;
    letter-spacing: 0.8px;
}

h1.sin-margen {
    margin: 0;
    font-size: 1.5em;
    font-family: "Rancho", cursive;
    text-align: left;
}

.logo-text p {
    font-size: 18px;
    margin-left: 10px;
    margin-top: -10px;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #f1c40f;
}

/* Estilos para el botón de menú en móviles */
.menu-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    max-width: 100%
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        background-color: rgba(153,91,200,0.9);
    }

    .nav-links li {
        text-align: center;
        padding: 15px 0;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links.active {
        display: flex;
    }
    .logo-text p {
    font-size: 14px;
    margin-right: 30px;
    }
    .logo-text h1 {
        font-size: 30px;
    }
    .top-section {
        height: 400px;
    }
    .logo img {
        height: 100px;
        width: 100px;
        margin-top: 30px;
    }
}

/*carrusel inicio*/
.carousel-wrapper {
    margin-top: -400px; /* Esto lo sube y hace que se meta en el morado */
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-bottom: 50px;
}
.carousel-container {
    width: 90%;
    top: 10%;
    max-width: 1000px;
    overflow: hidden;
    position: relative;
    border: 2px solid #fff;
    background: white;
}
.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}
.buttons button {
    background-color: rgba(255, 255, 255, 0.5); /* Morado transparente */
    color:  #A557D0;
    font-size: 25px;
    border: none;
    padding: 10px;
    cursor: pointer;
}
        
@media (max-width: 600px) {
    .carousel img.desktop {
        display: none;
    }
    .carousel img.mobile {
        display: block;
    }
    .carousel-wrapper {
        padding: 6px;
        margin-bottom: 10px;
    }
}
        
@media (min-width: 601px) {
    .carousel img.desktop {
        display: block;
    }
    .carousel img.mobile {
        display: none;
    }
}

.Presentacion {
  background-color: #3333AA;
  color: white;
  font-family: 'Rancho', cursive;
  font-size: 24px;
  text-align: center;
  padding: 20px 0;
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .Presentacion {
    font-size: 12px;
    margin-top: 10px;
    padding: 20px;
  }
}

.carousel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Estilos para "sobre nosotros" */
.info-box {
    display: flex;
    width: 80%;
    max-width: 1000px;
    background-color: #F9F9F9;
    margin: 0px auto;
    align-items: center;
    margin-bottom: 60px;
    margin-top: 50px;
}
.info-box img {
    width: 41.66%; /* 5/12 */
    height: 100%;
    object-fit: cover;
    margin: 0;
}
.info-text {
    width: 58.33%; /* 7/12 */
    padding: 80px;
    text-align: left;
}
.info-text h2 {
    margin: 0 0 10px 0;
    font-family: "Rancho", Regular;
    color: #995BC8;
    font-size: 1.8em;
    margin-bottom: 20px;
}
.info-text p {
    margin-bottom: 12px;
}
.desktop-img {
    display: block;
}
.mobile-img {
    display: none;
}
@media (max-width: 600px) {
    .desktop-img {
        display: none;
    }

    .info-box {
        flex-direction: column-reverse; /* Cambia la dirección para que la imagen quede abajo */
        align-items: center;
        width: 100%;
        max-width: none;
    }

    .info-text {
        width: 90%;
        padding: 10%;
        text-align: left;
    }

    .info-box .mobile-img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 1; /* Hace que sea cuadrada */
        object-fit: cover;
        margin-bottom: 40px;
    }
}
/*Estilos para "nosotro centro"*/
.custom-body {
    margin: 0;
    font-family: Poppins, sans-serif;
}
.section {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('Imagenes/FondoSeccion2.png') repeat, #004080;
    color: white;
    padding: 0;
}
.text-content {
    width: 50%;
    text-align: right;
    padding: 80px;
}
.text-content h2 {
    font-size: 2em;
    margin-bottom: 20px;
    font-family: "Rancho", regular;
}
.text-content p {
    margin-bottom: 10px;
    text-align: justify;
    text-align: right;
}
.custom-carousel-wrapper {
    width: 50%;
    display: flex;
    justify-content: center;
}
.custom-carousel-container {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    position: relative;
    border: 2px solid #fff;
    background: white;
}
.custom-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.custom-carousel img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-width: 600px;
}
.custom-buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}
.custom-buttons button {
    background-color: rgba(255, 255, 255, 0.5);
    color: #004080;
    font-size: 25px;
    border: none;
    padding: 10px;
    cursor: pointer;
}
@media (max-width: 768px) { 
    .section {
        flex-direction: column;
        text-align: center;
        padding: 0;
    }
    .text-content, .custom-carousel-wrapper {
        width: 100%;
        padding: 0;
    }
    .text-content {
        text-align: right;
        width: 80%;
        margin-bottom: 40px;
        margin-top: 40px;
    }
    .custom-carousel-container {
        margin-bottom: 40px;
    }
}
/*Estilos para "nuestro personal"*/
.Personal {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    text-align: center;
}
header {
    color: #A557D0;
    padding: 20px;
}
h1 {
    margin: 0;
    font-size: 2em;
    font-family: "Rancho", regular;
    text-align: left;
    padding: 10px;
}

/* Estilos del carrusel */
.team-carousel {
    width: 80%;
    margin: auto;
    padding: 30px 0;
    position: relative;
}

.team-member {
    background: #F9F9F9;
    padding: 0px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.team-member img {
    width: 150px;
    height: 200px;
    object-fit: cover;
    border-bottom: 4px solid #A557D0; /* Línea morada debajo */
    margin-bottom: 10px;
}

.team-member h2 {
    font-size: 1.2em;
    margin: 10px 0 1px;
    padding: 10px;
}

.team-member h3 {
    font-size: 1em;
    margin: 0;
    padding: 0px;
}

.team-member li {
    font-size: 1em;
    padding: 5px;
    color: #555;
}

.team-member ul {
  padding: 15px;
}

.Personal .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* para que las flechas no bloqueen los clics al contenido */
}

/* Botones de flecha */
.Personal .owl-nav button {
  pointer-events: auto;
  background: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 10px;
  z-index: 10;
}

/* Flechas hacia afuera del carrusel */
.Personal .owl-prev {
  position: absolute;
  left: -20px; /* ¡esto las saca! puedes aumentar para más separación */
}

.Personal .owl-next {
  position: absolute;
  right: -20px;
}

/* Íconos más grandes y con color */
.Personal .owl-nav .material-symbols-outlined {
  font-size: 30px;
  color: #A557D0;
}

/* Efecto al pasar el mouse */
.Personal .owl-nav button:hover {
  transform: scale(1.1);
}

.Personal .owl-nav button.owl-prev::before,
.Personal .owl-nav button.owl-next::before {
  content: none;
}


/*Estilos para Pacientes*/
#pacientes {
    width: 100%;
    padding: 20px 0; /* Espaciado alrededor de la sección */
    background-color: white; /* Color de fondo */
}

.pacientes-fondo {
    width: 100%;
    background: url('Imagenes/FondoPacientes.jpeg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 60px 0; /* agrega espacio arriba y abajo */
    box-sizing: border-box;
}


.pacientes-container {
    width: 90%;
    max-width: 500px;
    height: 350px;
    background: rgba(255, 255, 255, 0.7);
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px;
}

.title-banner {
    position: absolute;
    top: -12px; /* Estaba en -40px, ahora se superpone más suavemente */
    left: 50%;
    transform: translateX(-50%);
    background: #995BC8;
    color: white;
    padding: 18px 50px; /* Aumentamos el alto del rectángulo */
    font-size: 38px; /* Más grande el texto */
    font-weight: bold;
    font-family: 'Rancho', regular;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* opcional: sombrita sutil */
    z-index: 10; /* asegura que quede encima de las tarjetas */
}


/* 🔹 Secciones de contenido */
.left-section {
    width: 120px; 
    text-align: center;
    padding: 10px;
}

.left-section img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
    max-width: none;
}

.right-section {
    width: 80%; 
    text-align: left;
    padding: 20px;
    margin-top: 30px;
}

.pacientes-container-grid {
    width: 90%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
    padding: 50px 20px;
}

.paciente-card {
    display: flex;
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .pacientes-container-grid {
        grid-template-columns: 1fr;
    }

    .paciente-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .right-section {
        padding: 10px 0;
        width: 100%;
    }
}



/*servicios*/
#Servicios {
    font-family: 'Rancho', cursive;
}
 
#Servicios .servicios-container {
    padding: 20px;
    max-width: 90%; /* Limita el ancho total de la sección */
    margin: 0 auto; /* Centra la sección en la página */
    align-content: center;
}

#Servicios .imagen-desktop {
    display: block;
    width: 100%;
    height: auto;
  }

#Servicios .imagen-mobile {
    display: none;
    width: 100%;
    height: auto;
  }

  /* Media query para dispositivos móviles */
  @media (max-width: 768px) {
    #Servicios .servicios-container {
        padding: 0px;
        max-width: 100%; /* Limita el ancho total de la sección */
        margin: 0 auto; /* Centra la sección en la página */
    }
    #Servicios .imagen-desktop {
      display: none;
    }

    #Servicios .imagen-mobile {
      display: block;
    }
  }

/*Estilos para "consejos"*/
/* Estilos generales */
.Consejos {
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    padding: 20px;
}

h1 {
    margin: 0;
    font-size: 2em;
    font-family: "Rancho", cursive;
    text-align: left;
    margin-left: 15%;
}

/* Estilos del carrusel */
.tips-carousel {
    width: 80%;
    margin: auto;
    padding: 30px 0;
}

.tips-cards {
    background: #f4f4f4;
    padding: 0px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tips-cards img {
    width: 180px;
    height: 150px;
    object-fit: cover;
    border-bottom: 4px solid #A557D0; /* Línea morada debajo */
    margin-bottom: 10px;
}

.tips-cards h2 {
    font-size: 1.2em;
    margin: 10px 0 1px;
    padding: 10px;
    margin: 15px;
    font-family: "Rancho", regular;
}

.tips-cards p {
    font-size: 1em;
    padding: 20px;
    color: #555;
    text-align: left;
}

/*flecha de ver mas*/

.arrow {
    width: 65.5px;
    height: 2px;
    background-color: #995BC8;
    position: relative;
    transition: width 0.3s ease;
    display: inline-block;
    margin-left: 10px;
}
.arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4.5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #995BC8;
    border-right: 2px solid #995BC8;
    transform: rotate(45deg);
}
.arrow:hover {
    width: 100px;
}
.ver-mas {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #A557D0;
    text-decoration: none;
    font-weight: regular;
    padding: 20px;
}

/*Estilos para "horarios"*/

@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.franja {
    width: 100%;
    height: 360px;
    background: url('Imagenes/FondoSeccion2.png') repeat, #004080;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.horario-container {
    background-color: white;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 400px;
    text-align: left;
    position: relative;
}

.titulo {
    display: flex;
    align-items: center;
    font-family: 'Rancho', cursive;
    font-size: 28px;
    color: #2C2D89;
    margin-bottom: 10px;
    margin-top: 10px;
}

.titulo img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

.horario {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin: 15px 0;
}

.negrita {
    font-weight: bold;
}

.gato {
    position: absolute;
    top: -185px;
    right: -45px;
    width: 280px;
    height: auto;
}
@media (max-width: 768px) {
    .franja {
        padding: 0;
        display: flex;
        align-items: center;
    }
    .horario-container {
        width: 100%;
        max-width: none;
        box-shadow: none;
    }
}

/*Estilos para "contactos"*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.contenedor-principal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
}
.contenedor {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    max-width: 350px;
}
.item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.circulo {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #995BC8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
.icono {
    position: absolute;
    width: 30px;
    height: 30px;
}
.texto {
    font-size: 16px;
    color: black;
}
.mapa-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}
.mapa-container h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
iframe {
    width: 100%;
    max-width: 400px;
    height: 250px;
    border: 0;
}
@media (min-width: 768px) {
    .contenedor-principal {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        max-width: 850px;
        margin: auto;
    }
    .mapa-container {
        align-items: flex-start;
    }
    .mapa-container h3 {
        align-self: flex-start;
    }
}

/*Estilos para "pie de pagina"*/
.footer {
    position: relative;  /* Coloca el pie de página en su posición normal dentro del flujo de la página */
    width: 100%;  /* Hace que ocupe todo el ancho de la pantalla */
    background-color: #3333AA;  /* Color de fondo */
    color: white;  /* Color del texto */
    text-align: center;  /* Centra el texto */
    padding: 20px;  /* Espaciado interno */
    font-size: 14px;  /* Tamaño de la fuente */
    margin-top: 40px;  /* Asegura que se desplace hacia abajo con el contenido */
}

/* Se asegura que el contenido se expanda para que el pie de página se mantenga abajo al final */
body, html {
    height: 100%;
    margin: 0;
}

/* Añade un pequeño espacio al final para garantizar que el pie de página siempre se vea */
.content {
    padding-bottom: 100px; /* Espacio para el pie de página */
}

/* Estilos del contenido */
.content {
    text-align: center;
    margin: 50px 20px;
}


/*Pagina web diseñada y programada por Francisca Silva Piña*/