.hero-text h1 {
  text-align: center !important;
}

.hero-text p {
  text-align: justify !important;
  padding: 0 10px !important;
}

.cta {
  display: inline-block !important;
  margin: 20px auto 0 !important;
  text-align: center !important;
}
/* Por defecto ocultamos la imagen móvil */
.hero-image-mobile {
  display: none;
}

/* Y mostramos la de escritorio */
.hero-image-desktop {
  display: block;
}

/* En pantallas pequeñas, invertimos */
@media (max-width: 768px) {
  .hero-image-mobile {
    display: block;
    margin: 20px 0;
    text-align: center;
  }

  .hero-image-desktop {
    display: none;
  }

  .hero-content {
    flex-direction: column;
  }

  .hero-text {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .img-terapia-escritorio {
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}
@media (min-width: 768px) {
  .texto-paso {
    color: #000;         /* Negro puro */
    font-weight: normal;
    text-align: center;
    font-size: 16px;
  }

  .titulo-paso {
    font-weight: 700;    /* Negrita */
    color: #000;
    text-align: center;
    margin-top: 10px;
  }
}
.texto-paso {
  color: #000;
  font-weight: normal;
  text-align: center;
  font-size: 16px;
}

.titulo-paso {
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-top: 10px;
}

@media (min-width: 768px) {
  .img-terapia-escritorio {
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

.swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #000;
}

.swiper-pagination {
  position: relative;
  z-index: 10;
  margin-top: 10px;
}
.titulo-paso {
  min-height: 80px;
}

.texto-paso {
  min-height: 160px;
}
#privacidad {
    max-width: 800px; /* Ajusta el ancho para que el texto sea legible */
    margin: 0 auto; /* Centra el contenedor en la página */
    padding: 20px; /* Añade un poco de espacio alrededor */
}

/* Centra el texto dentro del contenedor (títulos, párrafos) */
#privacidad h2, 
#privacidad h3, {
    text-align: center;
}
#privacidad p, {
    text-align: left;
}
/* Opcional: si quieres que las listas (<ul>) también se centren */
#privacidad ul {
    display: inline-block; /* Permite centrar la lista como un bloque */
    text-align: left; /* Asegura que el texto dentro de la lista permanezca alineado a la izquierda */
}

/* Estilos generales para el formulario */
.formulario-contacto {
    /* Asegura que el formulario ocupa la mayor parte de la pantalla */
    max-width: 90%; 
    margin: 0 auto; /* Centra el formulario */
}

/* Estilos para los campos de entrada de texto (inputs) */
.formulario-contacto input[type="text"],
.formulario-contacto input[type="email"],
.formulario-contacto textarea {
    /* Hace que los campos ocupen todo el ancho disponible */
    width: 100%;
    /* Asegura que el padding no añada más ancho del 100% */
    box-sizing: border-box; 
    padding: 10px;
    margin-bottom: 15px;
}


@media screen and (max-width: 768px) {
    /* Añade esto a tu código CSS para dar más espacio 
        al icono y la palabra "Menú" en móviles. 
    */
    .navbar-toggle {
        padding-right: 15px;
    }
}

/* ========================================================================= */
/* ESTILOS GLOBALES DE LA CABECERA Y EL BOTÓN CTA */
/* ========================================================================= */

/* Ocultamos el botón CTA por defecto (en móvil) */
.header-action-button {
    display: none;
}

/* ========================================================================= */
/* MEDIA QUERY: ESTILOS PARA ESCRITORIO (Mayor o igual a 768px) */
/* ========================================================================= */

@media (min-width: 768px) {
    /* Mostrar el botón CTA en escritorio */
    .header-action-button {
        display: block !important;
    }
    
    /* Ocultar el botón de menú móvil en escritorio */
    .navbar-toggle,
    .navbar-toggle .menu-label {
        display: none !important;
    }
}

/* ========================================================================= */
/* MEDIA QUERY: ESTILOS PARA MÓVIL (Menor o igual a 767px) */
/* ========================================================================= */

@media (max-width: 767px) {
    /* 2. ARREGLO DEL ICONO Y TEXTO "MENÚ" EN MÓVIL */
    .navbar-toggle {
        /* Asegura que el texto y las barras se alineen correctamente */
        display: flex !important; 
        align-items: center;
        gap: 8px; /* Espacio entre el texto "Menú" y el icono */
        background: none !important; /* Limpia cualquier fondo */
        border: none !important; /* Limpia cualquier borde */
    }

    /* Estiliza y muestra el texto "Menú" */
    .navbar-toggle .menu-label {
        display: inline-block !important; /* Mostrar el texto */
        font-weight: 500;
        font-size: 14px;
        color: #93B8C7 !important; /* Color adaptado: cyan/teal */
    }

    /* Estiliza las barras del icono */
    .navbar-toggle .icon-bar {
        background-color: #93B8C7 !important; /* Color adaptado: cyan/teal */
    }

    /* Ocultamos el texto de accesibilidad para que solo se vea el nuevo "Menú" */
    .navbar-toggle .screen-reader-text {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0 !important;
        border: 0 !important;
        height: 1px !important;
        width: 1px !important;
        overflow: hidden;
    }
}
/* ========================================================================= */
/* FIX: BOTÓN DE CIERRE (X) EN LA BARRA LATERAL MÓVIL */
/* ========================================================================= */

.side-nav__close-button .navbar-toggle {
    /* Desactivamos la alineación flex que añadimos para el botón de abrir */
    display: block !important; 
    text-align: right; /* Alinea la X a la derecha */
    gap: 0;
    
    /* Aseguramos que las barras del icono vuelvan al color original si es necesario */
    /* Si la X es un icono SVG, usa el selector adecuado si sigue viéndose mal */
}

/* Ocultar el texto 'Menú' en el botón de cerrar */
.side-nav__close-button .navbar-toggle .menu-label {
    display: none !important;
}

/* Altura de la cabecera fija (ejemplo: 60px) */
:root {
    --header-height: 100px; 
}

/* Aplicar el padding al cuerpo de la página */
body {
    padding-top: var(--header-height); /* Usa la altura de tu cabecera */
}

/* O, si tu cabecera es header#masthead, y ya tiene position: fixed: */
header#masthead {
    position: fixed; /* Si ya lo tiene, déjalo así */
    top: 0;
    width: 100%;
    z-index: 1000; /* Asegura que siempre esté por encima del contenido */
}