/* Fuentes elegantes y modernas */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;600&display=swap');

/* Estilos generales */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F8D7B9;
    color: #55B4B0;
    overflow: hidden; /* Ocultar la barra de desplazamiento */
    height: 100vh;
    
}

/* Menú fijo en la parte superior */
/* Estilo general para el encabezado */
header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #28E1DA;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para el encabezado */
    justify-content: space-between; /* Espacio entre el logo y el menu-container */
}

/* Logo */
.logo img {
    width: 100px;
    margin: 10px 30px;
}

/* Nombre */
h1 {
    font-family: 'Playfair Display', serif;
    margin: 0;
    background-image: linear-gradient(to right, #55B4B0, #F49E51); 
    -webkit-background-clip: text; /* Aplica el fondo solo al texto */
    color: transparent; /* Hace que el color del texto sea transparente, para que se vea el fondo */
}

/* Contenedor que agrupa el ícono y el menú hamburguesa */
.menu-container {
    display: flex;
    align-items: center;
    margin: 10px 30px;
}

/* Ícono del usuario */
.menu-container .fa-user {
    font-size: 24px; /* Ajusta el tamaño del ícono */
    margin-left: 15px; /* Espacio entre las barras y el ícono */
    background-image: linear-gradient(to right, #55B4B0, #F49E51); /* Degradado similar a las barras */
    -webkit-background-clip: text; /* Aplica el degradado al ícono */
    color: transparent; /* Hace que el color del ícono sea transparente para que se vea el degradado */
}

/* Estilo para el menú hamburguesa */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 30px;
    cursor: pointer;
    margin-right: 10px;
}

/* Barras del menú hamburguesa */
.menu-toggle .bar {
    width: 100%;
    height: 4px;
    background-image: linear-gradient(to right, #55B4B0, #F49E51); /* Degradado de las barras */
    border-radius: 5px;
    margin: 4px 0; /* Espacio entre las barras */
}

/* Transformación de las barras cuando el menú se abre (si es necesario) */
.menu-toggle.open .bar:nth-child(1) {
    transform: rotate(45deg);
    position: relative;
    top: 7px;
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0; /* Oculta la barra del medio */
}

.menu-toggle.open .bar:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -7px;
}

/* Estilo para el nav */
nav {
    display: flex;
    justify-content: flex-start; /* Alineamos los elementos del menú hacia la izquierda */
    align-items: center;
}

/* Muestra los enlaces de navegación horizontalmente */
nav ul {
    list-style: none;
    padding: 0;
    display: flex; /* Para mostrar los enlaces en una fila (horizontalmente) */
    gap: 30px; /* Espaciado entre los enlaces */
}

nav ul li a {
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    color: #55B4B0;
}

/* Ocultar los enlaces de navegación por defecto */
#nav-menu.hidden {
    display: none;
}

/* Mostrar el menú cuando se active */
#nav-menu {
    display: block;
    position: absolute;
    top: 30px; /* Ajuste para que quede justo debajo del header */
    right: 35%;
    background-color: #28E1DA;
    padding: 10px;
    border-radius: 10px;
}

/* Estilo para el icono flotante de WhatsApp */
.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28E1DA;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.whatsapp-icon i {
    font-size: 30px; /* Tamaño del icono */
    color: white;
}

/* Hover effect para el icono de WhatsApp */
.whatsapp-icon:hover {
    background-color: #128C7E;
}


/* Carrusel y secciones */
.carrusel {
    height: calc(100vh - 80px); /* Dejar espacio para el menú fijo */
    overflow: scroll; /* Ocultar la barra de desplazamiento */
    position: relative;
    padding-top: 80px; /* Asegurar que el contenido no quede oculto bajo el menú */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.carrusel::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
  }

  
/* Secciones del carrusel */
.carrusel .pagina {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    scroll-snap-align: start;
    padding: 40px;
}
#inicio {
    background-image: url(../imagenes/pexels-cottonbro-4966570.jpg);
    background-repeat: no-repeat; 
}

#inicio .ini{
    width: 60%;
    height: 50%;
    align-items: center;
    justify-self: center;
    background-color: #F49E51;
    opacity: 0.8;
    border-radius: 30px;
}
/* Estilos para el texto */
.ini .init {
    position: relative;
    z-index: 2;
    color: #f6fbfb;
}

/* Estilos para el título */
.ini h2 {
    font-size: 38px;
    font-weight: bold;
    font-family: 'Playfair Display', serif;
    align-items: center;
    justify-self: center;
    color: #f6fbfb;
    background: linear-gradient(90deg, #28E1DA, #B8F6F3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Estilos para el párrafo */
.ini p {
    font-size: 20px;
    line-height: 1.6;
    align-items: center;
    justify-self: center;
    color: #f6fbfb;
    text-align: center;
}

/* Estilos para la lista */
.ini ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* Estilos para los elementos de la lista */
.ini ul li {
    font-size: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-left: 30%;
    font-weight: bold;
    color: #f6fbfb;
}

/* Icono de check personalizado */
.ini ul li::before {
    content: "✔";
    color: #f6fbfb;
    font-weight: bold;
    margin-right: 10px;
}


#sobre-mi { background-color: #f6fbfb; }
/* Estilos para la sección "Sobre Mí" */
#sobre-mi {
    background-color: #f6fbfb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top:150px;
    padding-right: 150px;
}

/* Contenedor de la imagen y el texto */
.contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Estilos para la imagen */
#sobre-mi .imagen {
    width: 40%; /* La imagen ocupará el 40% del contenedor */
    height: 100%; /* Definimos una altura para que la imagen no se distorsione */
    border-radius: 30px;
    overflow: hidden;
    margin-left: 5%;
}

/* Evita el "zoom" y ajusta la imagen sin distorsionarla */
.imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Estilos para el texto */
.texto {
    width: 55%; /* El texto ocupa el 55% del contenedor */
    padding-left: 40px; /* Espacio entre la imagen y el texto */
    margin-bottom: 35%;
}

.texto h2 {
    margin: 0;
}

.texto p {
    font-size: 18px;
    color: #333;
}

#terapias {
    background-color: #B8F6F3;
    text-align: center;
}

/* Contenedor de opciones de terapia */
.opciones-terapia {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 20px;
}

.opcion {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s;
}

.opcion img {
    width: 300px;
    height: 400px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.opcion p {
    position: absolute;
    top: 50%;  /* Lo centra verticalmente */
    left: 50%;  /* Lo centra horizontalmente */
    transform: translate(-50%, -50%);
    font-weight: bolder;
    color: #f6fbfb;  /* Para que el texto sea visible */
    font-size: 24px;
    background: rgba(44, 92, 90, 0.5); /* Fondo semitransparente */
    padding: 10px 20px;
    border-radius: 5px;
}



.opcion:hover {
    transform: scale(1.1);
}

/* Galería */
.galeria {
    display: none;
    text-align: center;
    padding: 20px;
    background: #55B4B0;
    border-radius: 15px;
}

.galeria-contenedor {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Para Internet Explorer y Edge */
    scrollbar-width: none;  /* Para Firefox */
}

.galeria-contenedor::-webkit-scrollbar {
    display: none;  /* Para Chrome, Safari y Opera */
}
/* Tarjetas */
.tarjeta {
    width: 400px;
    height: 250px;
    position: relative;
    perspective: 1000px;
}

.tarjeta-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    text-align: justify;
    overflow: visible;
}
.tarjeta-inner p{
    text-align: justify;
    padding: 0px 30px;
}


.tarjeta:hover .tarjeta-inner {
    transform: rotateY(180deg);
}

/* Cara frontal */
.tarjeta-front,
.tarjeta-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #55B4B0;
}

.tarjeta-front {
    background-color: #f6fbfb
}

.tarjeta-back {
    background-color: #B8F6F3;
    transform: rotateY(180deg);
}

/* Tooltip styles */

.tooltip-target {
    color: #FF9B26;
    cursor: pointer;
    position: relative;
}

.tooltip {
    display: none;
    position: absolute;
    background-color: #FF9B26;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    bottom: 40px; 
    right: 20px;
    width: 350px;
    z-index: 9999;
    white-space: normal;
}

/* Show the tooltip when hovering over the target */
/* Agregar un pequeño retraso para permitir que se renderice */
.tooltip-target:hover + .tooltip {
    display: block;
}

/* Botón Volver */
.volver {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    border: none;
    background-color: #FF9B26;
    color: #f6fbfb;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.volver:hover {
    background-color: #F49E51;
}

#formacion { background-color: #f6fbfb; }
#contacto {
    background-image: url(../imagenes/pexels-cottonbro-4966570.jpg);
    background-repeat: no-repeat; 
    background-size: cover;
    padding: 20px 0;
}

#contacto .contact {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom:35px;
    margin-top:30px;
    background-color: rgba(244, 158, 81, 0.8);
    border-radius: 30px;
    padding: 30px;
    text-align: center;
    height: 550px; /* Establecer una altura fija para asegurar que se vea el scroll */
    overflow-y: auto; /* Permite que el contenido se desplace solo si es necesario */
    scrollbar-width: none; /* Para Firefox */
    -webkit-overflow-scrolling: touch; /* Habilita el desplazamiento suave en dispositivos móviles */
}
#contacto .contact::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento en navegadores Webkit (Chrome, Safari) */
}

.contact h2 {
    color: #f6fbfb;
    font-size: 1.8em;
    margin-bottom: 15px;
}

.contact p {
    color: #f6fbfb;
    margin-bottom: 15px;
    text-align: start;
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: start;
}

.form-group {
    display: flex;
    flex-direction: column;
}

#mensaje-respuesta {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px;
}


label {
    font-size: 1em;
    color: #f6fbfb;
    margin-bottom: 5px;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    padding: 8px;
    font-size: 0.95em;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 100%;
    background-color: #f6fbfb;
    color: #333;
}

textarea {
    resize: vertical;
}

.submit-btn {
    background-color: #28E1DA;
    color: #f6fbfb;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #55B4B0;
}

/* Puntos de navegación a la izquierda */
div.puntos {
    position: fixed;
    top: 55%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000; /* Asegurarse de que los puntos se muestren por encima del contenido */
}

/* Puntos de navegación (círculos) */
div.punto {
    width: 15px; /* Aumentamos el tamaño de los puntos */
    height: 15px; /* Aumentamos el tamaño de los puntos */
    background-color: #55B4B0;
    border-radius: 50%;
    cursor: pointer; /* Hacer que los puntos sean clickeables */
    transition: background-color 0.3s ease;
}

div.pagina.active .punto {
    background-color: #28E1DA !important; /* Cambiar el color cuando la sección está activa */
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #F49E51;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: none;
}

.footer-contenido {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.newsletter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:30px;
}

.newsletter h3 {
    margin-bottom: 10px;
    font-weight: bold;
}

.btn-newsletter {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28E1DA;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.btn-newsletter:hover {
    background-color: #55B4B0;
}

.redes-sociales {
    font-size: 1.8rem;
    display: flex;
    gap: 15px;
    align-items: center;
}

.redes-sociales a {
    color: #28E1DA;
    transition: color 0.3s ease;
    text-decoration: none;
}

.redes-sociales a:hover {
    color: #55B4B0;
}

#formacion.active + footer {
    display: block; /* Mostrar el footer solo cuando estamos en la última sección */
}

/* Area Personal */

.area_personal {
    display: flex;
    height: 100vh;
    background-image: url('../imagenes/pexels-cottonbro-4966570.jpg');
    background-size: cover;
    background-position: center;
    justify-content: flex-end;
    align-items: center;
  }
  
  .login-container {
    background-color: rgba(40, 225, 218, 0.85);
    padding: 40px;
    padding-top: 40%;
    border-radius: 25px;
    width: 40%;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-family: 'Poppins', sans-serif;
  }
  
  .form-box h2 {
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #f6fbfb;
    text-align: center;
  }
  
  .form-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .form-box input {
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 8px;
    font-size: 1em;
    background-color: #f6fbfb;
  }
  
  .form-box .submit-btn {
    background-color: #FF9B26;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s;
    width: 103%;
  }
  
  .form-box .submit-btn:hover {
    background-color: #F49E51;
  }
  
  .toggle-text {
    text-align: center;
    margin-top: 15px;
    color: #fff;
  }
  
  .toggle-text span {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
  }
  
  .hidden {
    display: none;
  }
  .back-link {
    position: absolute;
    top: 10px;
    left: 10px;
    text-decoration: none;
    color: #f6fbfb;
    font-weight: bold;
    z-index: 10;
    font-size: 20px;
  }
  
  .back-link i {
    margin-right: 5px;
  }
  
  .input-error {
    border: 2px solid red;
}

.error-message {
    color: red;
    font-size: 0.85em;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* HOME */


  
  
 /* Tablets en modo horizontal o pantallas más grandes */
  @media (min-width: 900px) and (max-width: 1199px) {
     /* Inicio */
     .ini {
        width: 60%; /* Mantener un tamaño constante en pantallas grandes */
    }

    .ini h2 {
        font-size: 38px; /* Título grande */
    }

    .ini p {
        font-size: 20px; /* Párrafo en tamaño estándar */
    }

    .ini ul li {
        font-size: 20px; /* Lista en tamaño estándar */
        margin-left: 30%; /* Ajustar el margen izquierdo */
    }

     /* Sobre nosotros */
     #sobre-mi {
        padding-top: 150px;
        padding-right: 80px;
    }

    .contenido {
        flex-direction: row; /* Disposición horizontal */
    }

    .texto {
        width: 50%;
    }

    .imagen {
        width: 40%;
    }

    /* Mantener el orden original en pantallas medianas */
    .contenido .texto {
        order: 1; /* El texto sigue siendo primero */
    }

    .contenido .imagen {
        order: 2; /* La imagen sigue después del texto */
    }
     /* Terapias */
     .opciones-terapia {
        gap: 40px; /* Aumentar el espacio entre las opciones */
        flex-wrap: wrap; /* Permitir que las opciones se acomoden en varias filas si es necesario */
    }

    .opcion img {
        height: 250px; /* Ajustar la altura de las imágenes */
    }

    .opcion p {
        font-size: 22px; /* Ajustar el tamaño del texto */
    }
    .galeria {
        max-height: 700px;
     }
     .galeria-contenedor {
         display:inline-grid;
         margin-bottom: 10PX;  
     }
     .tarjeta {
         width: 800px;
         height: 125px;
     }
 

    .tooltip {
        width: 320px; /* Ajustar el ancho del tooltip */
        font-size: 12px; /* Ajustar el tamaño de la fuente */
    }

    .volver {
        padding: 12px 25px;
        font-size: 16px;
    }

     /* Contacto */
     #contacto .contact {
        max-width: 700px; /* Ampliar el ancho para pantallas más grandes */
        padding: 25px; /* Un padding mayor */
        padding-bottom: 80px;
    }

    .contact h2 {
        font-size: 1.8em; /* Ajuste del tamaño del título */
    }

    .contact p {
        font-size: 1.1em; /* Aumentar tamaño de texto para mejor legibilidad */
    }

    input[type="text"], input[type="email"], input[type="tel"], select, textarea {
        font-size: 1.1em; /* Aumentar tamaño de la fuente de los campos */
    }

    .submit-btn {
        padding: 14px 30px; /* Tamaño adecuado para el botón */
        font-size: 1.1em; /* Tamaño de texto del botón */
    }

     /* Puntos de navegación a la izquierda */
     div.puntos {
        left: 20px; /* Dejar el margen a la izquierda como estaba antes */
      }
      div.punto {
        width: 15px; /* Mantener el tamaño estándar de los puntos */
        height: 15px; /* Mantener el tamaño estándar de los puntos */
      }

     /* Footer */
     footer {
        padding: 20px; 
        font-size: 18px; 
      }

      /* Area personal */
      .login-container {
        width: 60%;
        padding-top: 8%;
        height: auto;
        margin-right: 16%;
      }
    
      .form-box h2 {
        font-size: 24px;
      }
  }
 /* Tablets en modo vertical */
  @media (min-width: 600px) and (max-width: 899px) {
    /* Menú */
    nav {
        flex-direction: column; /* Cambiar la dirección de los elementos a vertical */
        align-items: flex-start; /* Alineamos los elementos a la izquierda */
    }

    /* Ajustar el menú de navegación */
    nav ul {
        flex-direction: column; /* Mostrar los enlaces en una columna */
        gap: 15px; /* Reducir el espacio entre los enlaces */
    }

    /* Ajuste de posición del menú en pantallas pequeñas */
    #nav-menu {
        top: 80px; /* Ajustar para que quede más abajo */
        right: 0%; /* Cambiar el posicionamiento para más espacio */
        padding: 15px; /* Mayor espacio alrededor del menú */
        border-radius: 5px;
    }

    /* Ajuste para el contenedor del menú */
    .menu-container {
        display: flex;
        justify-content: flex-start;
    }

    /* Estilos para el logo */
    .logo img {
        width: 80px; /* Un poco más grande que en pantallas pequeñas */
        margin: 10px 20px; /* Ajuste del margen */
    }

    /* Tamaño de la fuente en los enlaces del menú */
    nav ul li a {
        font-size: 20px; /* Un poco más grande que en pantallas pequeñas */
        color: #55B4B0; /* Mantenemos el mismo color */
    }

    /* Inicio */
    .ini {
        width: 70%; /* La caja ocupa un 70% */
    }

    .ini h2 {
        font-size: 32px; /* Título intermedio */
    }

    .ini p {
        font-size: 18px; /* Párrafo ligeramente más grande */
    }

    .ini ul li {
        font-size: 18px; /* Lista más grande */
        margin-left: 10%; /* Ajustar margen izquierdo */
        text-align: left; /* Alineación a la izquierda */
    }
    /* Área personal */
    .area_personal {
        justify-content: center;
        align-items: center;
        padding: 20px;
      }
    
      .login-container {
        width: 80%;
        padding: 30px;
        padding-top: 10%;
        height: auto;
      }
    
      .form-box h2 {
        font-size: 22px;
      }
    
}
/* Tablets en modo horizontal o pantallas más grandes (900px a 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
    /* Menú */
     nav {
        flex-direction: row; /* Mantener los enlaces en fila (horizontal) */
        justify-content: space-between; /* Alineamos los elementos con espacio entre ellos */
        padding: 10px 20px; /* Agregamos espacio alrededor */
    }

    /* Ajuste para el contenedor del menú */
    .menu-container {
        display: flex;
        justify-content: flex-start;
    }

    /* Estilos para el logo */
    .logo img {
        width: 85px; /* Un poco más grande que en pantallas pequeñas */
        margin: 10px 20px; /* Ajuste del margen */
    }

    /* Tamaño de la fuente en los enlaces del menú */
    nav ul li a {
        font-size: 22px; /* Un poco más grande que en pantallas pequeñas */
        color: #55B4B0; /* Mantenemos el mismo color */
    }

    /* Ajustes en el menú desplegable */
    #nav-menu {
        display: block;
        position: absolute;
        top: 80px; /* Ajuste de la posición */
        right: 10%; /* Ajustamos el valor de right */
        background-color: #28E1DA;
        padding: 15px;
        border-radius: 5px;
    }
    /* Inicio */
    #inicio .ini {
        width: 70%;
    }

    .ini h2 {
        font-size: 36px; /* Título más grande */
        text-align: center;
    }

    .ini p {
        font-size: 20px; /* Párrafo ligeramente más grande */
    }

    .ini ul li {
        font-size: 20px; /* Lista más grande */
        margin-left: 20%; /* Ajuste del margen */
    }

    /* Sobre nosotros */
    .contenido {
        margin-top: 45px;
    }
    #sobre-mi {
        padding-top: 100px;
        padding-right: 40px;
    }

    .contenido {
        flex-direction: column; /* Apilar el texto y la imagen */
    }
    
    .texto p {
        font-size: 0.75rem;
    }

    .texto {
        width: 100%; /* El texto ocupa más espacio en tablets */
        margin-bottom: 25px; /* Ajustar el espacio inferior */
    }

    .imagen {
        width: 70%; /* La imagen ocupa más espacio en tablets */
        margin-top: 20px;
    }

    /* Cambiar el orden: el texto aparece primero */
    .contenido .texto {
        order: 1; /* Poner el texto primero */
    }

    .contenido .imagen {
        order: 2; /* Poner la imagen después del texto */
    }

    /* Terapias */
    .opciones-terapia {
        flex-direction: column; /* Apilar las opciones de terapia */
        gap: 30px; /* Espacio moderado entre las opciones */
        margin-top: 0px;
    }

    .opcion img {
        width: 100%; /* Las imágenes ocupan todo el ancho disponible */
        height: 350px; /* Ajustar la altura de las imágenes */
    }

    .opcion p {
        font-size: 20px; /* Aumentar el tamaño del texto */
        padding: 10px 18px; /* Ajustar el padding */
    }

    /* Tarjetas */
    .galeria {
       max-height: 700px;
    }
    .galeria-contenedor {
        display:inline-grid;
        margin-bottom: 10PX;  
    }
    .tarjeta {
        width: 600px;
        height: 125px;
    }

    .tarjeta-inner p {
        padding: 15px; /* Ajustar el padding de las tarjetas */
        font-size: 1rem;
    }

    .tarjeta-front, .tarjeta-back {
        font-size: 18px; /* Mantener el tamaño de la fuente de las tarjetas */
    }

    /* Tooltip */
    .tooltip {
        width: 300px; /* Ajustar el tamaño del tooltip */
        font-size: 11px; /* Ajustar el tamaño de la fuente */
    }

    /* Botón Volver */
    .volver {
        padding: 10px 20px;
        font-size: 15px;
    }

    /* Contacto */
    #contacto .contact {
        max-width: 500px;
        padding: 20px; /* Mantener un padding adecuado */
        height: auto; /* Ajuste automático de la altura */
    }

    .contact h2 {
        font-size: 1.7em; /* Ajuste del tamaño del título */
    }

    .contact p {
        font-size: 1em; /* Ajuste del tamaño del texto */
    }

    form{
        width: 95%;
    }

    label {
        font-size: 1em; /* Mantener tamaño de fuente de los labels */
    }

    input[type="text"], input[type="email"], input[type="tel"], select, textarea {
        font-size: 1em; /* Mantener el tamaño de la fuente de los campos */
    }

    .submit-btn {
        padding: 12px 25px; /* Tamaño adecuado para el botón */
        font-size: 1em; /* Mantener tamaño estándar del texto del botón */
    }

     /* Puntos de navegación a la izquierda */
     div.puntos {
        left: 15px; /* Ajustar el margen a la izquierda */
      }
      div.punto {
        width: 14px; /* Ajustar el tamaño de los puntos */
        height: 14px; /* Ajustar el tamaño de los puntos */
      }

     /* Footer */
     footer {
        padding: 18px; 
        font-size: 16px;
      }
    
  }
   /* Móviles */
   @media (max-width: 599px) {
    /* Mostrar el icono del menú hamburguesa en pantallas pequeñas */
    .menu-toggle {
        display: flex;
    }
    .logo img {
        width: 75px;
        margin: 5px 10px;
    }
    h1{
        font-size: 1.25rem;
    }
    .menu-container {
        margin: 5px 10px;
    }
    /* El menú de navegación en pantallas pequeñas se oculta por defecto */
   /* Alineación de los elementos del nav para pantallas pequeñas */
    nav {
        flex-direction: column; /* Cambiar la dirección de los elementos a vertical */
        align-items: flex-start; /* Alineamos los elementos a la izquierda */
    }

    /* Ajustar el menú de navegación */
    nav ul {
        flex-direction: column; /* Mostrar los enlaces en una columna */
        gap: 15px; /* Reducir el espacio entre los enlaces */
    }

    /* Reducir el tamaño de la fuente y ajustar el color si es necesario */
    nav ul li a {
        font-size: 18px;
        color: #55B4B0; /* Cambiar color para mejor visibilidad en pantallas pequeñas */
    }

    /* Ajuste de posición del menú en pantallas pequeñas */
    #nav-menu {
        top: 80px; /* Ajustar para que quede más abajo */
        right: 0%; /* Cambiar el posicionamiento para más espacio */
        padding: 15px; /* Mayor espacio alrededor del menú */
        border-radius: 5px;
    }

     /* Inicio */
     #inicio {
        background-position: top center; /* Mover la imagen para mejorar la visibilidad */
    }
    #inicio .ini {
        width: 100%;
        height: 60%;
    }

    .ini {
        width: 80%; /* La caja ocupa más espacio en móviles */
        height: auto; /* Ajustar la altura automáticamente */
        padding: 15px; /* Menos padding en móviles */
    }

    .ini h2 {
        font-size: 1.5rem; /* Título más pequeño */
        text-align: center;
    }

    .ini p {
        font-size: 1rem; /* Párrafo más pequeño */
    }

    .ini ul li {
        font-size: 16px; /* Lista más pequeña */
        margin-left: 0; /* Eliminar el margen izquierdo */
        text-align: center; /* Centrar los elementos de la lista */
    }

     /* Sobre nosotros */
     #sobre-mi {
        padding-top: 80px;
        padding-right: 20px;
        flex-direction: column; /* Colocar los elementos en una columna */
        align-items: center; /* Centrar los elementos */
        justify-content: center;
    }

    .contenido {
        flex-direction: column; /* Apilar el texto y la imagen */
        align-items: center; /* Centrar los elementos */
    }

    .texto p {
        font-size: 0.5rem;
    }

    .texto {
        width: 100%; /* Hacer que el texto ocupe más espacio en móviles */
        padding-left: 0; /* Eliminar el padding en dispositivos pequeños */
        margin-bottom: 20px; /* Ajustar el espacio en la parte inferior */
    }

    .imagen {
        width: 80%; /* La imagen ocupará el 80% en pantallas móviles */
        margin-left: 0; /* Eliminar el margen izquierdo */
        margin-top: 20px; /* Espacio superior entre el texto y la imagen */
    }

    /* Cambiar el orden: el texto aparece primero */
    .contenido .texto {
        order: 1; /* Poner el texto primero */
    }

    .contenido .imagen {
        order: 2; /* Poner la imagen después del texto */
    }

     /* Terapias */
     .opciones-terapia {
        flex-direction: column; /* Asegura que las opciones se apilen verticalmente */
        gap: 20px; /* Menor espacio entre las opciones */
        margin-top: 0px;
    }

    .opcion img {
        width: 100%; /* Las imágenes ocupan todo el ancho disponible */
        height: 250px; /* Ajustar la altura de las imágenes para evitar un tamaño muy grande */
    }

    .opcion p {
        font-size: 18px; /* Reducir el tamaño del texto para dispositivos pequeños */
        padding: 8px 15px; /* Ajustar el padding del texto */
    }

    /* Tarjetas */
    .galeria {
        max-height: 500px;
     }
     .galeria-contenedor {
         display:inline-grid;
         margin-bottom: 10px;  
     }
     .tarjeta {
         width: 325px;
         height: 80px;
     }
 
    .tarjeta-inner p {
        padding: 10px; /* Ajustar el padding de las tarjetas */
        font-size: 0.5rem;
    }

    .tarjeta-front, .tarjeta-back {
        font-size: 16px; /* Ajustar el tamaño de la fuente de las tarjetas */
    }

    /* Tooltip */
    .tooltip {
        width: 250px; /* Reducir el ancho del tooltip */
        font-size: 10px; /* Reducir el tamaño de la fuente */
    }

    /* Botón Volver */
    .volver {
        padding: 8px 15px; /* Reducir el tamaño del botón */
        font-size: 14px; /* Reducir el tamaño de la fuente del botón */
    }

     /* Contacto */
     #contacto .contact {
        max-width: 370px;
        padding: 15px; /* Reducir el padding para ahorrar espacio */
        height: auto; /* Dejar que el formulario se ajuste a su contenido */
    }

    .contact h2 {
        font-size: 1.5em; /* Ajustar el tamaño del título */
    }

    .contact p {
        font-size: 0.9em; /* Reducir el tamaño del texto */
    }

    form{
        width: 95%;
    }

    label {
        font-size: 0.9em; /* Reducir el tamaño de la fuente del label */
    }

    input[type="text"], input[type="email"], input[type="tel"], select, textarea {
        font-size: 0.9em; /* Ajustar el tamaño de la fuente de los campos de formulario */
    }

    .submit-btn {
        padding: 10px 20px; /* Reducir el tamaño del botón */
        font-size: 0.9em; /* Reducir el tamaño del texto del botón */
    }

    /* Puntos de navegación a la izquierda */
    div.puntos {
        left: 10px; /* Reducir el margen a la izquierda */
      }
      div.punto {
        width: 12px; /* Reducir el tamaño de los puntos */
        height: 12px; /* Reducir el tamaño de los puntos */
      }

    /* Footer */
    footer {
        padding: 15px;
        font-size: 14px; 
      }
   /* Área personal */
   .area_personal {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  .login-container {
    width: 90%;
    padding: 25px;
    padding-top: 10%;
    height: auto;
    border-radius: 15px;
  }

  .form-box h2 {
    font-size: 20px;
  }

  .back-link {
    font-size: 16px;
  }
  }