:root {
    --color-primary: #8D6B77;
    --color-secondary: #C8D6C3;
    --color-background: #FAF7F5;
    --color-text-body: #594E51;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-body);
}

.title-font {
    font-family: 'Lato', sans-serif;
    color: var(--color-primary);
    font-weight: 700;
}

.handwriting-font {
    font-family: 'Dancing Script', cursive;
    font-weight: 500;
}

.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Botón Flotante de WhatsApp --- */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-primary);
    color: white;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1000;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* --- Estilos de Servicios (index.html) --- */
.expandable-content {
    display: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.expandable-content.expanded {
    max-height: 5000px;
    opacity: 1;
    display: block;
}

/* Tarjeta de servicio secundaria (expandible) */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%;
    /* REVERTIDO: Vuelve a tener el fondo de la sección */
    background-color: transparent; 
    border-radius: 1.5rem; /* rounded-3xl */
    padding: 2rem; /* p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
}

.service-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
}


.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.nested-services {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-secondary);
}

.therapist-profile {
    display: flex;
    align-items: flex-start; 
    gap: 1rem;
}

.therapist-profile .profile-img-container img {
    width: 72px; 
    height: 72px;
    object-fit: cover;
    border-radius: 9999px; 
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.therapist-profile .profile-img-container {
    flex-shrink: 0; 
    width: 72px; 
    height: 72px;
}

/* --- Estilos de Novedades (index.html) --- */
.event-card {
    background-color: white;
    border: 1px solid var(--color-secondary);
    transition: transform 0.3s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(141, 107, 119, 0.15);
}

.event-image {
    width: 100%;
    height: auto; 
    object-fit: contain;
}

.service-card img:not(.event-image) {
    object-fit: contain; 
    max-height: 250px;
    width: 100%;
}

.google-map-container {
    width: 100%;
    height: 400px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Estilos del Blog (index.html y blog.html) --- */
.blog-card {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--color-secondary);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* --- Estilos de Artículos (páginas de artículos) --- */
.article-content h2 {
    font-size: 1.875rem; /* text-3xl */
    margin-top: 2.5rem; /* mt-10 */
    margin-bottom: 1rem; /* mb-4 */
    font-weight: 700;
    color: var(--color-primary);
}

.article-content h3 {
    font-size: 1.5rem; /* text-2xl */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 0.75rem; /* mb-3 */
    font-weight: 700;
    color: var(--color-primary);
}

.article-content p {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75; /* leading-relaxed */
    margin-bottom: 1.5rem; /* mb-6 */
}

.article-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.article-content ul, .article-content ol {
    font-size: 1.125rem;
    margin-left: 1.5rem; /* ml-6 */
    margin-bottom: 1.5rem; /* mb-6 */
    list-style-position: outside;
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content blockquote {
    border-left: 4px solid var(--color-secondary);
    padding-left: 1.5rem; /* pl-6 */
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.25rem; /* text-xl */
    color: var(--color-text-body);
}

/* --- Estilos para Header/Footer dinámicos --- */
#header-container header {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-secondary);
}

#footer-container footer {
    background-color: var(--color-primary);
}

/* --- Nuevos Estilos para Iconos de Terapeutas --- */
.therapist-contact-icons {
    display: flex;
    align-items: center;
    gap: 1rem; /* Equivalente a space-x-4 de Tailwind */
}

.social-icon-link {
    color: var(--color-text-body);
    opacity: 0.8;
    transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.social-icon-link:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Color específico para WhatsApp en hover */
.social-icon-link.whatsapp-terapeuta:hover {
    color: #25D366; 
}

/* Color específico para Instagram en hover */
.social-icon-link.instagram-terapeuta:hover {
    color: #E1306C; /* Color rosa principal de Instagram */
}


/* --- Media Queries (Responsivo) --- */
@media (min-width: 768px) {
    .nested-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #terapeutas-info .nested-services {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .nested-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #terapeutas-info .nested-services {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .image-container img {
        max-width: 23%;
    }
    
    /* REVERTIDO: Vuelve la regla para expandir tarjetas */
    .service-card.expanded {
        grid-column: span 3 / span 3;
    }
    
    /* REGLA ELIMINADA: 
      Se ha quitado la regla #servicios .grid que estaba aquí 
      para evitar conflictos con la clase lg:grid-cols-3 de Tailwind.
    */
}

/* REVERTIDO: Eliminada la corrección para tablets */
/*
@media (min-width: 768px) and (max-width: 1023px) {
    #servicios .grid:not(.featured-services) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
*/