/* --- Estilos Base y Variables (Mobile-First) --- */
:root {
    --primary-color: #5b7c99; /* Azul suave y profesional */
    --secondary-color: #8aa399; /* Verde salvia */
    --accent-color: #d4c2ad; /* Arena/Dorado suave */
    --light-color: #fdfdfd;
    --dark-color: #333d42;
    --white-color: #ffffff;
    --text-color: #556066; /* Ligeramente oscurecido para mejorar contraste */
    --font-family: 'Poppins', sans-serif;
    --transition-speed: 0.4s ease;
    --header-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-family);
    line-height: 1.7;
    color: var(--text-color);
    background: linear-gradient(180deg, #f2eefc 0%, #e9e3f5 100%); /* Gradiente morado más notorio y moderno */
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

h1, h2, h3, h4 {
    color: var(--dark-color);
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 300;
}

.highlight {
    color: var(--accent-color);
    font-weight: 600;
}

section {
    padding: 5rem 0;
    overflow: hidden;
}

section:nth-of-type(even) {
    /* Ahora las secciones pares heredarán el gradiente morado del body */
}

.btn {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition-speed);
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); /* Sombra más notoria */
    animation: pulse 2s infinite; /* Aplicar animación de pulso */
}

.btn:hover {
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); /* Sombra más notoria al pasar el cursor */
    filter: brightness(0.9); /* Oscurece ligeramente el fondo en hover */
}

.btn-subtle {
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color);
    border: 1px solid var(--primary-color); /* Borde azulado */
    padding: 0.4rem 1rem; /* Padding reducido */
    font-size: 0.8rem; /* Fuente más pequeña */
    animation: none; /* Anula la animación de la clase .btn */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Sombra reducida */
    transition: all var(--transition-speed);
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado */
}

.btn-subtle:hover {
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    border-color: var(--primary-color); /* Borde azulado */
    transform: translateY(-3px); /* Consistente con otros botones */
    filter: brightness(0.9); /* Oscurece ligeramente el fondo en hover */
}

/* Botón para acciones secundarias sobre fondos claros */
.btn-secondary-action {
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    border: 2px solid var(--primary-color); /* Borde azulado */
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    animation: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all var(--transition-speed);
    cursor: pointer;
    border-radius: 50px;
    font-weight: 500;
    text-decoration: none; /* Añadido para quitar el subrayado */
}
.btn-secondary-action i {
    margin-right: 8px;
}
.btn-secondary-action:hover {
    filter: brightness(0.9); /* Oscurece ligeramente el fondo en hover */
    transform: translateY(-3px); /* Consistente con otros botones */
}

.btn-hero {
    margin-top: 2rem;
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    padding: 0.8rem 2rem; /* Reducido un tercio */
    font-size: 0.9rem; /* Reducido para mejor proporción */
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    border-color: var(--primary-color); /* Borde azulado */
}

.btn-hero:hover {
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    border-color: var(--primary-color); /* Borde azulado */
    filter: brightness(0.9); /* Oscurece ligeramente el fondo en hover */
}

/* --- Barra de Navegación Fija --- */
.header-agendar-btn { /* Estilo unificado para el botón de agendar en el header */
    display: inline-block; /* Changed to be visible by default (desktop-first) */
    padding: 0.5rem 1.2rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    font-weight: 600; /* Unificado con el resto de los botones */
    font-size: 0.9rem; /* Tamaño ajustado */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: var(--transition-speed); /* Asegura la transición en hover */
    animation: pulse 2s infinite;
}
.header-agendar-btn:hover {
    filter: brightness(0.9); /* Oscurece ligeramente el fondo en hover */
    transform: translateY(-3px); /* Consistente con otros botones */
}

.main-header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    transition: top 0.3s;
}

.main-header.header-hidden {
    top: -80px;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.main-header.landing-page-header .container {
    justify-content: space-between;
}

.logo {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem; /* Reducido un 25% */
    text-decoration: none;
    transition: color var(--transition-speed);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    height: 32px;
    width: 32px;
}

.main-nav {
    display: none; /* Oculto por defecto en móvil */
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--white-color);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

.main-nav.active {
    display: block;
}

.main-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.main-nav ul li a {
    display: block;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    border-bottom: 1px solid var(--light-color);
}


.hamburger-menu {
    display: block; /* Visible por defecto en móvil */
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--dark-color);
    transition: color var(--transition-speed), transform var(--transition-speed);
}

.hamburger-menu:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* --- 1. Hero Section --- */
#hero {
    position: relative; /* Necesario para los pseudo-elementos */
    color: var(--white-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--header-height) 1rem 0 1rem; /* Padding combinado para evitar sobreescritura */
}

/* Pseudo-elementos para las imágenes de fondo */
#hero::before,
#hero::after { /* Mantenemos el after para el degradado oscuro */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* Detrás del contenido */
}

#hero::before {
    background: url('images/hero-background.jpeg') no-repeat center center/cover;
    animation: kenburns 20s ease-out infinite; /* Aplicamos la animación Ken Burns */
}

#hero::after {
    background: linear-gradient(rgba(40, 50, 60, 0.5), rgba(40, 50, 60, 0.5));
}

/* Fondo específico para la página de Sesión de Orientación */
.page-orientacion #hero::before {
    background-image: url('images/hero-orientacion.jpeg');
}

#hero h1 {
    font-size: 1.7rem; /* Tamaño reducido un tercio */
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--white-color);
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-subtitle-secondary {
    font-size: 1.4rem;
    font-weight: 700;
    color: #daa520; /* Tono dorado metalizado */
    text-shadow: none; /* Sombras eliminadas */
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}
/* Estilos para el subtítulo rotativo */
#rotating-subtitle span {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#rotating-subtitle span.fade-out {
    opacity: 0;
}


.hero-subtitle {
    font-size: 0.8rem !important; /* Reducido un tercio (forzado) */
    font-weight: 400;
    color: var(--white-color);
    text-shadow: 0 1px 5px rgba(0,0,0,0.2);
    margin-top: 0.5rem; /* Ajustado para el nuevo subtítulo único */
    margin-bottom: 1.5rem; /* Espacio antes del botón */
}
/* Estilo para el subtítulo de ubicación */
.hero-location {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 5px rgba(0,0,0,0.2);
    margin-top: -1rem; /* Lo acerca al subtítulo anterior */
    margin-bottom: 2rem; /* Espacio antes de los botones */
}

#hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto 0 auto; /* Centra el bloque del párrafo horizontalmente */
}

/* Estilos específicos para el hero de las landing pages */
.hero-landing h1 {
    font-size: 1.9rem; /* Mantenemos el tamaño base para las landing */
}

.hero-landing p {
    font-size: 1rem; /* Ajustamos el párrafo de las landing */
    max-width: 700px;
}

/* Asegura que el contenedor del hero ocupe todo el ancho para centrar el texto */
#hero .container {
    width: 100%;
}

/* Contenedor para los botones del hero */
.hero-actions {
    margin-bottom: 2rem; /* Espacio entre el botón y las nuevas tarjetas */
    text-align: center;
}

/* --- NUEVA SECCIÓN: Sobre Nosotros --- */
#sobre-nosotros {
    /* El fondo ahora hereda del body para ser consistente con la sección de la consulta */
}

.about-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.about-us-image {
    text-align: center;
}

.about-us-image img {
    max-width: 100%;
    height: auto;
    max-height: 400px; /* Limita la altura de la imagen */
    border-radius: 12px; /* Bordes redondeados para un look moderno */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra sutil para darle profundidad */
    border: 1px solid #eee; /* Borde fino para enmarcarla */
}

.about-us-content {
    text-align: center;
}

.about-us-content h2 {
    margin-bottom: 1.5rem;
}

.about-us-content p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* --- Animación Ken Burns para el fondo del Hero --- */
@keyframes kenburns {
    0% {
        transform: scale(1.1) translateX(0);
    }
    50% {
        transform: scale(1.1) translateX(0);
    }
    50% {
        transform: scale(1.2) translateX(-5%);
    }
    100% {
        transform: scale(1.1) translateX(0);
    }
}

/* --- Indicador de Scroll --- */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-15px); }
    60% { transform: translateX(-50%) translateY(-8px); }
}

/* --- Tarjetas de Terapeutas en el Hero --- */
.therapists-grid-hero {
    display: flex;
    flex-direction: row; /* Cambiado a fila para que estén lado a lado */
    justify-content: center; /* Centra las tarjetas en el espacio disponible */
    gap: 1rem; /* Reducimos el espacio entre tarjetas */
    margin-top: 2rem;
    width: 100%;
}

.therapist-card-mini {
    background-color: rgba(0, 0, 0, 0.25); /* Fondo oscuro semitransparente, como el de precios */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde claro sutil */
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    color: var(--white-color); /* Texto claro para contraste con fondo oscuro */
    width: 48%;
    max-width: 220px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Sombra consistente */
    transition: var(--transition-speed);
    display: flex; /* Añadido para centrar contenido */
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    cursor: pointer;
}

.therapist-card-mini:hover {
    transform: translateY(-5px);
    background-color: rgba(0, 0, 0, 0.35); /* Ligeramente más oscuro en hover */
    box-shadow: 0 12px 30px rgba(0,0,0,0.1); /* Sombra mejorada en hover */
}

.therapist-mini-img {
    width: 80px; /* Tamaño aumentado un tercio */
    height: 80px; /* Tamaño aumentado un tercio */
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.therapist-card-mini h3 {
    color: var(--white-color);
    /* Tipografía fluida: se adapta al tamaño de la pantalla */
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    margin-bottom: 0.25rem;
}

.therapist-card-mini .therapist-subtitle {
    /* Tipografía fluida: se adapta al tamaño de la pantalla */
    font-size: clamp(0.65rem, 2.5vw, 0.8rem);
    font-weight: 400; /* Peso más ligero que el nombre */
    color: rgba(255, 255, 255, 0.8); /* Color más sutil */
    margin: 0; /* Quitamos margen superior/inferior */
    margin-bottom: 1rem; /* Espacio antes del botón */
}

/* --- Información de Precios en el Hero --- */
.hero-pricing {
    margin-top: 3rem; /* Aumentado para compensar la eliminación del botón principal */
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1rem 1.2rem; /* Reducido aún más */
    max-width: 380px; /* Reducido */
    width: 90%;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    color: var(--white-color);
    text-align: center;
    margin-left: auto; /* Añadido para centrar */
    margin-right: auto; /* Añadido para centrar */
}

.hero-pricing h4 {
    color: var(--white-color);
    font-size: 1rem; /* Reducido */
    margin-bottom: 0.75rem; /* Reducido */
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.5rem; /* Reducido */
}

.hero-pricing p {
    font-size: 0.85rem; /* Reducido para diferenciarlo del título */
    margin: 0.5rem 0; /* Reducido */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem; /* Reducido */
}

.pricing-item {
    font-size: 0.85rem;
    margin: 0.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem; /* Aumentado para mayor área de clic */
    text-decoration: none;
    color: var(--white-color);
    border-radius: 8px;
    transition: background-color var(--transition-speed);
    gap: 1rem; /* Aumenta el espacio entre el texto y el precio */
}

.pricing-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.02); /* Añade un ligero zoom para dar feedback */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.pricing-item span {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-color);
    white-space: nowrap; /* Evita que el precio se divida en dos líneas */
    display: flex; /* Para alinear el ícono */
    align-items: center;
    gap: 0.75rem; /* Espacio entre el precio y el ícono */
}

.pricing-item span i {
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity var(--transition-speed);
}

.hero-pricing p span {
    font-weight: 700;
    font-size: 0.95rem; /* Reducido */
    color: var(--accent-color); /* Color de acento para el precio */
    margin-right: 1rem;
}

.hero-pricing-actions {
    margin-top: 1rem; /* Reducido */
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.hero-pricing-actions .btn-secondary-action {
    padding: 0.4rem 0.8rem; /* Padding más pequeño para estos botones */
}

/* Se reutiliza el estilo .btn-secondary-action para el botón "Ver Detalles" */
.therapist-card-mini .btn-subtle {
    margin-top: auto; /* Empuja el botón hacia abajo */
}

/* --- Animación para el Título H1 --- */
.animated-title .word {
    display: inline-block; /* Permite aplicar transformaciones */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards; /* 'forwards' mantiene el estado final */
}

/* Keyframes para la animación de aparición */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated-title .highlight .word {
    color: var(--accent-color); /* Asegura que las palabras dentro del highlight mantengan su color */
}

/* --- 2. Servicios --- */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.service-card {
    background: var(--white-color);
    padding: 2.5rem 2rem;
    border-radius: 8px;
    border: 1px solid #eee;
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.service-card .icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.service-card p {
    margin-bottom: 1.5rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animación de pulso para botones destacados */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
}

.btn-notification {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-speed);
}
.btn-notification:hover {
    color: var(--dark-color);
}

/* --- 4. Sobre Mí --- */
.about-me-image .image-wrapper {
    width: 280px; /* Tamaño fijo para el contenedor de la imagen */
    height: 280px;
    margin: 0 auto 2rem auto; /* Centrado en móvil */
}

.about-me-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-me-image .image-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Imagen circular */
    object-fit: cover;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border: 10px solid var(--white-color);
}

.about-me-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.about-me-content {
    text-align: center;
}

#sobre-mi h2, #sobre-mi h3, #sobre-mi h4 {
    color: var(--dark-color); /* Aseguramos que los títulos sean oscuros */
}

.about-me-grid {
    grid-template-columns: 1fr;
}
.about-me-credentials {
    margin-bottom: 1.5rem;
}
.about-me-credentials h3 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
}
.about-me-credentials p {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
}
.about-me-description {
    /* Contenedor para el texto principal en el nuevo layout de escritorio */
    margin-top: 2rem;
}
.about-me-text {
    font-size: 1.1rem; /* Mantenemos el tamaño de fuente */
    margin: 2rem 0; /* Espacio vertical consistente */
}

.about-me-cta {
    position: relative;
    font-style: italic;
    color: var(--primary-color);
    margin: 2rem 0;
    font-size: 1.2rem;
    padding: 1.5rem 2rem 1.5rem 3rem;
    border-left: 4px solid var(--accent-color);
    background-color: #fdfcfb;
    text-align: left;
}
.about-me-cta::before {
    content: '“';
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 4rem;
    color: var(--accent-color);
    opacity: 0.5;
    font-family: Georgia, serif;
    line-height: 1;
}
.about-me-signature {
    font-weight: 600;
    color: var(--dark-color);
    margin-top: 1rem;
}

/* --- Estilos para los botones de acción en "Sobre Mí" --- */
.about-me-actions {
    margin-top: 2.5rem;
    text-align: center; /* Centrado en móvil */
}

.about-me-social {
    display: flex;
    justify-content: center; /* Centrado por defecto */
    margin-top: 1.5rem;
    gap: 2rem;
}

.about-me-social a {
    font-size: 1.6rem;
    color: var(--secondary-color);
    transition: color var(--transition-speed), transform var(--transition-speed);
}

.about-me-social a:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* --- Estilos para la información de precios en "Sobre Mí" --- */
.pricing-info {
    margin: 2rem 0; /* Espacio vertical consistente */
    padding: 1.5rem;
    background-color: #f9fafb;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.pricing-info h4 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.pricing-info ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.pricing-info ul li {
    margin-bottom: 0.5rem;
}

.pricing-note {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 1rem;
}

/* --- Nuevo Sistema de Tarjetas de Terapeutas --- */
.therapists-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil */
    gap: 2.5rem; /* Espacio entre tarjetas */
}

.therapist-card {
    background-color: var(--white-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    text-align: center;
}

/* Ajustes para el contenido de las tarjetas en móvil */
.therapist-card {
    padding: 1.5rem; /* Padding reducido en móvil */
}

.therapist-card .about-me-image .image-wrapper {
    width: 150px; /* Imagen más pequeña en móvil */
    height: 150px;
    margin: 0 auto 1.5rem auto; /* Margen reducido */
}
.therapist-card .about-me-credentials h3 {
    font-size: 1.3rem; /* Título ligeramente más pequeño */
}

.therapist-card .about-me-text {
    margin: 1.5rem 0; /* Margen reducido */
}

.therapist-card .about-me-image {
    /* No se necesita order en móvil */
}

.therapist-card .pricing-info {
    margin: 1.5rem 0; /* Margen reducido */
}

.therapist-card .pricing-info {
    margin-top: auto; /* Empuja la sección de precios hacia abajo */
}

/* --- Estilos para la descripción expandible --- */
.about-me-description-wrapper {
    position: relative;
    max-height: 70px; /* Altura inicial para móvil */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    margin-bottom: 1rem; /* Espacio antes del botón */
    text-align: center; /* Centrado por defecto en móvil */
}

.therapist-card .about-me-description-wrapper {
    text-align: left; /* Alinea el texto a la izquierda dentro de la tarjeta */
}

.about-me-description-wrapper.expanded {
    max-height: none; /* Permite la altura completa */
}

.about-me-description-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Altura del efecto de desvanecimiento */
    background: linear-gradient(to top, var(--white-color), transparent);
    pointer-events: none; /* Permite clics a través del overlay */
    transition: opacity 0.5s ease-out;
}

.about-me-description-wrapper.expanded::after {
    opacity: 0; /* Oculta el efecto de desvanecimiento cuando está expandido */
}

.read-more-btn {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem; /* Espacio añadido para separar del bloque de precios */
    display: block; /* Para que margin-top y auto margins funcionen */
    margin-left: auto;
    margin-right: auto;
    width: fit-content; /* Ajusta el ancho al contenido del botón */
    cursor: pointer;
}

.about-me-description-wrapper .about-me-text {
    margin: 0; /* Reinicia el margen del texto dentro del wrapper */
}

.dark-section { /* Clase reutilizable para secciones con fondo oscuro */
    background-color: var(--dark-color);
    color: var(--light-color);
}

.dark-section h2 { /* El título solo es blanco si la sección es oscura */
    color: var(--white-color) !important; /* Usamos !important para asegurar la anulación */
}

.accordion-container {
    max-width: 800px;
    margin: auto;
}
.accordion-item {
    margin-bottom: 1rem;
}
.accordion-button {
    width: 100%;
    background-color: var(--white-color);
    color: var(--dark-color);
    cursor: pointer;
    padding: 1.2rem;
    text-align: left;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 1.2rem;
    font-weight: 600;
    transition: background-color 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Sombra sutil añadida */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-button:hover, .accordion-button.active { /* Se mantiene el hover */
    background-color: #f0f0f0;
}
.accordion-button .icon {
    transition: transform 0.3s ease;
}
.accordion-button.active .icon {
    transform: rotate(180deg);
}
.accordion-content, .tab-content {
    display: none;
    padding: 1.5rem;
    background-color: var(--white-color);
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.accordion-content ul {
    list-style-position: outside;
    padding-left: 0.5rem;
}
.accordion-content p, .accordion-content ul, .tab-content p, .tab-content ul {
    margin-bottom: 1rem;
}
.accordion-content .source-link, .tab-content .source-link {
    font-size: 0.9rem;
    font-style: italic;
}
.accordion-content .source-link a, .tab-content .source-link a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}
.accordion-content .source-link a:hover, .tab-content .source-link a:hover {
    text-decoration: underline;
}
.accordion-content .disclaimer, .tab-content .disclaimer {
    background-color: #fff3cd;
    border-left: 4px solid #ffeeba;
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

/* --- NUEVA SECCIÓN: Recursos y Modalidades --- */
/* Se eliminan los fondos específicos para que hereden del body o de la regla nth-of-type */

.recursos-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    font-size: 1.1rem;
}

.recursos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.recursos-group {
    background-color: var(--white-color);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.recursos-group:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.recursos-group h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--dark-color);
}

.recursos-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn-recurso {
    display: block;
    padding: 1rem; /* Mantenemos el padding */
    border: 2px solid var(--primary-color); /* Borde azulado */
    color: var(--white-color); /* Letras blancas */
    background-color: var(--primary-color); /* Fondo azulado */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-speed); /* Transición completa */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra sutil por defecto */
    animation: none; /* Aseguramos que no tenga animación de pulso */
}

.btn-recurso:hover {
    background-color: var(--secondary-color);
    color: var(--light-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); /* Sombra mejorada en hover */
}

/* Estilo para detalles del profesional (FONASA) */
.professional-details {
    background-color: #f8f9fa; /* Tono neutro y elegante */
    border-left: 4px solid var(--primary-color);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 4px 4px 0;
}
.professional-details p {
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: var(--dark-color);
}
.professional-details ul {
    padding-left: 0; /* Resetea el padding para que no se vea desalineado */
}
.professional-details ul li a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    transition: color var(--transition-speed);
}
.professional-details ul li a:hover {
    text-decoration: none;
}

/* --- Estilos para la sección de la Consulta --- */
.consulta-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    font-size: 1.1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.gallery-item img {
    width: 100%;
    height: 250px; /* Altura fija para consistencia */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

/* Estilo unificado para el texto de las landing pages */
.landing-text {
    font-size: 1.05rem; /* Tamaño de fuente consistente */
}

/* Estilos para nuevas secciones en landing pages */
.landing-section {
    margin-top: 4rem;
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: -2rem auto 3rem auto;
}

/* Estilos para la lista de Mitos y Realidades (dl) */
.myths-realities-list dt {
    font-weight: bold;
}
.myths-realities-list dd {
    margin-left: 0; /* Resetea la indentación por defecto */
    margin-bottom: 1rem; /* Espacio entre cada par de mito/realidad */
}

/* Estilos para listas con iconos */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}
.icon-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.8rem;
}
.icon-list-icon {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-right: 1.5rem;
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}
.icon-list-content {
    flex-grow: 1;
}
.icon-list-content strong {
    color: var(--dark-color);
    display: block;
    margin-bottom: 0.2rem;
}

/* Estilos para guías paso a paso */
.step-guide {
    margin: 2rem 0;
}
.step-item {
    display: flex;
    align-items: flex-start;
    background-color: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: var(--transition-speed);
}
.step-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.step-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-right: 1.5rem;
    line-height: 1;
}
.step-content strong {
    color: var(--dark-color);
}

/* --- 6. Contacto --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

/* --- 7. Pie de Página --- */
.main-footer {
    background-color: var(--dark-color);
    color: #adb5bd;
    padding: 5rem 0 2rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
}

.footer-grid h4 {
    color: var(--white-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-grid p, .footer-grid a {
    color: #adb5bd;
    text-decoration: none;
    font-size: 0.9rem;
}
.footer-grid a i { /* Añade el color de acento a los iconos del footer */
    color: var(--accent-color);
    margin-right: 5px;
    transition: color var(--transition-speed);
}

.footer-grid a:hover {
    color: var(--white-color);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.social-links {
    display: flex;
    justify-content: center; /* Centra los iconos en móvil */
    gap: 1.5rem; /* Espacio entre los iconos */
    margin-bottom: 1rem; /* Espacio debajo de los iconos */
}

.social-links a {
    font-size: 1.5rem;
}

.footer-bottom {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #495057;
    font-size: 0.8rem;
}

.footer-bottom p {
    margin-bottom: 0.5rem;
}

/* --- Animaciones de Scroll --- */
.reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* --- Estilos para el Modal de Terapeutas --- */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Fondo oscuro semitransparente */
    backdrop-filter: blur(5px);
    animation: fadeInModal 0.3s ease-out;
}

.modal.active {
    display: flex; /* Usamos flex para centrar el contenido */
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: slideInModal 0.4s ease-out;
    max-height: 90vh; /* Altura máxima para que no ocupe toda la pantalla */
    overflow-y: auto; /* Scroll si el contenido es muy largo */
}

.therapist-card-full .about-me-text {
    font-size: 1rem;
    margin: 1rem 0;
}

.therapist-card-full .pricing-info {
    text-align: left;
    margin: 1rem 0;
}

.therapist-card-full .about-me-social {
    margin-top: 2rem;
}

.fab-option:hover {
    transform: translateY(5px) scale(1); /* Efecto de elevación al pasar el cursor */
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    filter: brightness(1.15);
}

.fab-container.active .fab-option {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- Media Queries para Tablets y Desktop --- */
@media (min-width: 768px) {
    /* Hamburger menu is hidden on desktop */
    .hamburger-menu {
        display: none;
    }

    /* Main navigation is visible and static on desktop */
    .main-nav {
        display: block;
        position: static;
        width: auto;
        background: none;
        box-shadow: none;
        display: flex; /* Ensure flex for aligning nav items and button */
        align-items: center;
        margin-left: auto; /* Push nav and button to the right */
    }
    .main-nav ul {
        list-style: none;
        display: flex;
        flex-direction: row; /* Horizontal navigation */
    }

    /* Main nav links */
    .main-nav ul li a {
        border: none; /* No border for main nav links */
        padding: 0.5rem 1.2rem;
    }

    .header-agendar-btn {
        margin-left: 1.5rem; /* Space between nav and button */
    }

    h2 { font-size: 2.8rem; }
    #hero h1 { font-size: 2.5rem; }

    .hero-subtitle-secondary {
        font-size: 1.6rem;
    }

    .services-grid { grid-template-columns: repeat(3, 1fr); }

    .hero-subtitle {
        font-size: 1rem !important; /* Reducido un tercio (forzado) */
        margin-bottom: 2rem;
    }
    
    .about-me-image {
        align-items: flex-start;
    }
    .about-me-grid {
        grid-template-columns: 280px 1fr; /* Columna fija para la imagen, el resto para el texto */
        gap: 3rem;
        align-items: flex-start;
        text-align: left;
    }
    .about-me-grid.single-column {
        grid-template-columns: 1fr; /* Anula el estilo de dos columnas para que ocupe todo el ancho */
        align-items: flex-start;
        text-align: left;
    }
    .therapist-card {
        display: grid;
        grid-template-columns: 220px 1fr; /* Columna de imagen más pequeña */
        gap: 2.5rem;
        text-align: left;
        align-items: flex-start;
    }
    .therapists-grid {
        grid-template-columns: 1fr 1fr; /* Dos columnas para las tarjetas en escritorio */
        padding: 0 5%; /* Añade padding horizontal para que no toque los bordes */
        max-width: 100%; /* Asegura que ocupe todo el ancho disponible */
        gap: 2.5rem;
    }
    .therapist-card {
        padding: 2rem; /* Restauramos el padding para desktop */
    }
    .therapist-card .about-me-image .image-wrapper {
        width: 220px; /* Tamaño de imagen reducido */
        height: 220px; /* Tamaño de imagen reducido */
        margin: 0; /* Restauramos el margen para desktop */
    }
    .therapist-card .about-me-credentials h3 {
        font-size: 1.5rem;
    }
    .about-me-description-wrapper {
        max-height: 100px; /* Un poco más de altura para desktop */
    }
    .read-more-btn {
        margin-left: 0; /* Alinea el botón a la izquierda en desktop */
        margin-right: auto;
    }
    .therapist-content-col {
        display: flex;
        flex-direction: column;
    }
    #sobre-nosotros .about-me-description-wrapper {
        text-align: left;
    }
    .therapist-card .about-me-social {
        justify-content: flex-start;
    }
    .therapist-card .about-me-actions {
        text-align: left;
    }
    /* Ajustes del modal para escritorio */
    .therapist-card-full {
        grid-template-columns: 220px 1fr;
        gap: 2.5rem;
        text-align: left;
    }

    /* Restauramos el tamaño del botón del hero para escritorio */
    .btn-hero-secondary {
        padding: 1.2rem 3rem;
        font-size: 1.1rem;
    }

    .about-me-credentials {
        margin-top: 0 !important; /* Resetea el margen en escritorio */
    }
    
    .contact-grid { grid-template-columns: 1fr 1fr; }
    
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        text-align: left;
    }

    .footer-grid .social-links {
        justify-content: flex-start; /* Alinea los iconos a la izquierda en escritorio */
    }

    .recursos-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
    }

}
@media (min-width: 600px) {
    .therapists-grid-hero {
        flex-direction: row;
        justify-content: center;
    }
}

/* Ocultar/Mostrar elementos según el tamaño de pantalla */
@media (max-width: 767px) {
    .about-us-grid {
        grid-template-columns: 1fr; /* La imagen y el texto se apilan en móvil */
    }

    #hero::before {
        background-position: right center; /* Alinea la imagen de fondo a la derecha en móvil */
    }
    /* Reducción de tamaño de texto en hero de landing pages para móvil */
    .hero-landing h1 {
        font-size: 1.5rem;
    }
    .hero-landing p {
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }
}

/* --- Media Query para Móvil en modo Horizontal (Landscape) --- */
@media (orientation: landscape) and (max-height: 500px) {
    /* Ajusta el hero de la página principal para que no se corte */
    #hero {
        height: auto; /* Permite que la altura se ajuste al contenido */
        min-height: 100vh; /* Asegura que al menos ocupe la pantalla, pero puede crecer */
        padding-top: calc(var(--header-height) + 3rem); /* Espacio superior */
        padding-bottom: 3rem; /* Espacio inferior */
    }

    /* Reduce el padding en los heroes de las páginas de aterrizaje */
    .hero-landing {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* --- Botón Flotante de WhatsApp (Unificado) --- */
.whatsapp-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color);
    border-radius: 50px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-fab:hover {
    background-color: var(--primary-color); /* Fondo azulado */
    color: var(--white-color); /* Letras blancas */
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.whatsapp-fab i {
    font-size: 1.8rem;
}