/* Definición de la paleta de colores personalizada */
:root {
    --color-primary-sage: #a8cbca; /* Verde salvia suave */
    --color-secondary-blue-gray: #4A6B7F; /* Azul grisáceo profundo */
    --color-li-subtitle: #004067;
    /*--color-accent-terracotta: #CC8B65; /* Terracota quemado */
    --color-accent-terracotta: #56aa87; /* Terracota quemado */
    /*--color-light-terracotta: #e09e7a; /* Terracota claro */
    --color-light-terracotta: #6ad8aa; /* Terracota claro */
    --color-neutral-off-white: #F5F5F0; /* Blanco roto */
    --color-neutral-light-gray: #DCDCDC; /* Gris claro */
    --text-color-dark: #333; /* Color de texto oscuro por defecto */
    --text-color-card: #525f75;
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 20px 25px rgba(0, 0, 0, 0.2);
    --color-accent-blue: #004067;

    /* mensajes.css */
    --mensaje-fondo: rgba(240, 240, 240, 0.9);  
    --mensaje-borde: rgba(160, 118, 68, 0.5);
    --mensaje-color-fondo: #fff;

    /* Info cookies */
    --cookies-backgr: rgba(250, 230, 230, 1);

}

/* Estilos generales para el cuerpo y fuentes */
body {
    font-family: 'Quicksand', sans-serif; /* Usando Poppins para el cuerpo de texto */
    color: var(--text-color-dark);
    background-color: var(--color-neutral-off-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

main {
    overflow-x: clip;
}

/* -------------------------------- */
/* Iconos material symbols	        */
/* -------------------------------- */

.material-symbols-outlined {
  font-size: 24px !important;
  cursor: pointer;
}

.material-symbols-disabled {
  color: #bbb !important;
  cursor: default !important;
}

.material-symbols-no-pointer {
  cursor: default !important;
}

/* -------------------------------- */

.container {
    max-width: 1200px;
    margin-left: 1rem;
    margin-right: 1rem;
    /*padding-left: 1rem; /* px-4 */
    /*padding-right: 1rem; /* px-4 */
}

@media (min-width: 768px) { /* md:px-6 */
    .container {
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.p-nom-empresa {
    font-family: 'Gruppo';
    font-size: 1.4rem; /* text-2xl */
    font-weight: 100; /* font-semibold */
    color: var(--color-secondary-blue-gray);
}

header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-neutral-off-white);
    box-shadow: var(--shadow-light);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    height: 35px;
    top: 0;
    z-index: 50;
}

header .header-content {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
}

header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

header .logo img {
    height: 50px;
    margin-right: 0.5rem; /* space-x-2 */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate(0%, -50%) 
}

header .logo-text {
    font-family: 'Gruppo';
    font-size: 1rem; /* text-2xl */
    font-weight: 100; /* font-semibold */
    color: black;
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translate(0%, -50%) 
}

/* Menú de Navegación (Desktop) */
header nav.desktop-menu {
    display: none; /* hidden */
}

@media (min-width: 768px) { /* md:flex */
    header {
        display: flex;
        background-color: white;
    }

    header .logo {
        display: none;
    }

    header nav.desktop-menu {
        display: flex;
        gap: 2rem; /* space-x-8 */
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translate(0%, -50%) 
    }
}

header nav.desktop-menu a {
    color: var(--color-secondary-blue-gray);
    font-family: Quicksand;
    font-size: 1rem; /* text-lg */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.2s ease, font-weight 0s ease;
}

header nav.desktop-menu a:hover {
    color: #053452;
    font-weight: 600;
}

header nav.desktop-menu a.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent-terracotta);
    transition: width 0.3s ease-in-out;
}

header nav.desktop-menu a.nav-link:hover::after {
    width: 100%;
}

header nav.desktop-menu .cta-button {
    background-color: var(--color-accent-terracotta);
    color: white;
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    border-radius: 9999px; /* rounded-full */
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: var(--shadow-light);
}

header nav.desktop-menu .cta-button:hover {
    opacity: 0.5;
}

/* Botón de Menú Móvil (Hamburger) */
.mobile-menu-toggle {
    display: block; /* md:hidden */
    margin-top: 46px;
}

#mobile-menu-button {
    display: block;
    position: absolute; 
    right: 1rem; 
    color: var(--color-secondary-blue-gray);
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    top: 50%; 
    transform: translate(0%, -50%);
}

/* Botón auxiliar que aparece cuando estamos al principio 
   de la home en un dispositivo móvil y desaparece el header */
#mobile-menu-button-aux {
    display: block;
    position: fixed; 
    top: 0.75rem;
    right: 1rem; 
    color: white;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    z-index: 49;
}

#mobile-menu-button span, 
#mobile-menu-button-aux span {
    font-size: 34px !important;
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }
    #mobile-menu-button, 
    #mobile-menu-button-aux {
        display: none;
    }
}

.mobile-menu-toggle svg {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
}

/* Menú Móvil (Oculto por defecto) */
nav.mobile-menu {
    display: none; /* hidden */
    background-color: var(--color-neutral-off-white);
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* shadow-inner */
    position: fixed;
    left: 0;
    width: 100%;
    z-index:50;    
}

nav.mobile-menu a {
    display: block;
    color: var(--color-secondary-blue-gray);
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-medium */
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    text-decoration: none;
    transition: color 0.3s ease;
}

nav.mobile-menu a:hover {
    color: var(--color-accent-terracotta);
}

nav.mobile-menu .cta-button {
    display: block;
    background-color: var(--color-accent-terracotta);
    color: white;
    text-align: center;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    margin-top: 1rem; /* mt-4 */
    margin-left: 1.5rem; /* mx-6 */
    margin-right: 1.5rem; /* mx-6 */
    border-radius: 9999px; /* rounded-full */
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: var(--shadow-light);
}

nav.mobile-menu .cta-button:hover {
    opacity: 0.9;
}

/* Corrección de scroll cuando saltamos 
   directamente a una sección, para evitar 
   que se tape con la cabecera */
section {
    scroll-margin-top: 3.7rem;
}

/* Hero Section */
.hero-section-bg {
    position: relative;
    height: 100vh;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    /*text-align: center;*/
    overflow: hidden;
    background: url('../img/banner/banner-1.jpg') center center fixed no-repeat; 
    background-size: 245% 100%; /*cover*/
    background-color: transparent !important;
    transition: background .5s linear;
}

@media (min-width: 768px) {
    .hero-section-bg { 
        margin-top: 0rem; 
        background-size: cover;
    }
}

.hero-section {
    position: absolute;
    margin: 0rem 4rem 0rem 4rem;
    top: 37%;
    transform: translate(0%, -37%);
}

@media (max-width: 640px) {
    .hero-section { margin: 0rem 2rem; }
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
/*    background: linear-gradient(45deg, var(--color-primary-sage), var(--color-secondary-blue-gray));*/
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    opacity: 0.7;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-content {
    position: relative;
    z-index: 10;
    color: white;
}

.hero-content table {
    margin-left: -16px;
}

.hero-content table img {
    width: 130px;
}

.hero-content .info-content {
    font-family: 'Quicksand'; /*'Playfair Display'; /*'Playwrite AU QLD';*/
    font-style: italic;
    font-size: 2.5rem; /* text-4xl */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 3rem; /* mb-4 */
    font-weight: 400; /* font-bold */
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* drop-shadow-lg */
}

.hero-content .nom-empresa {
    font-family: 'Gruppo';
    font-size: 2.2rem; /* text-4xl */
    /*line-height: 1.25; /* leading-tight */
    /*margin-bottom: 1rem; /* mb-4 */
    font-weight: 400;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    padding-left: 0.5rem;
}

.hero-content .tratamientos {
    font-family: 'Gruppo';
    font-size: 1.2rem;
    font-weight: 400;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.hero-content p {
    font-family: Gruppo;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (min-width: 640px) {
    .hero-content h1 { font-size: 3rem; }
}

@media (max-width: 640px) {
    .hero-content p { font-size: 2rem; }
    .hero-content .cta-button { font-size: 0.2rem; }
}
@media (min-width: 768px) {
    .hero-content h1 { font-size: 3.75rem; }

    .hero-content p { 
        font-size: 2.5rem; 
        margin-bottom: 4rem;
    }

    .hero-content table img { width: 200px; }

    .hero-content .nom-empresa {
        font-size: 3.2rem;
        padding-left: 1rem;
    }

    .hero-content .tratamientos {
        font-size: 2.2rem;
    }

    .hero-content .info-content {
        font-size: 4rem;
    }

}

.hero-content .cta-button {
    position: absolute;
    background-color: var(--color-accent-terracotta);
    color: white;
    padding: 1rem 2rem; /* px-8 py-4 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.25rem; /* text-xl */
    font-weight: 400; /* font-semibold */
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.5s ease;
    box-shadow: var(--shadow-medium);
}

.hero-content .cta-button:hover {
    transform: translateY(-5px);
    background-color: var(--color-light-terracotta);
    color: var(--text-color-dark);
}

/* Secciones */
.fisio-section {
    padding-top: 2rem; /* py-16 */
    padding-bottom: 4rem; /* py-16 */
}

@media (min-width: 768px) {
    .fisio-section {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }
}

.fisio-section h2 {
    font-family: Gruppo;
    font-size: 2rem;
    font-weight: 700;
}

/* Sección "Nuestra Filosofía" */
.philosophy-section {
    background-color: var(--color-neutral-off-white);
    text-align: center;
}

@media (max-width: 767px) {
    .philosophy-section { padding-bottom: 2rem; }
}

.philosophy-section h2 {
    color: var(--color-secondary-blue-gray);
    margin-bottom: 3rem;
}

.philosophy-section p {
    padding: 0rem 1.2rem;
    text-align: center;
    font-family: 'Quicksand';/*'Playwrite AU QLD';*/
    font-size: 1.25rem;
    font-style: italic;
}

@media (min-width: 768px) {
    .philosophy-section h2 { font-size: 2.25rem; }
    .philosophy-section p { font-size: 1.5rem; }
    .philosophy-section .container { max-width: 100%; }
}

/* Sección "Servicios Destacados" */
.services-section {
    background-color: var(--color-primary-sage);
    color: white;
    text-align: left;
}

.services-section h2 {
    margin-bottom: 3rem;
    text-align: center;
}

@media (min-width: 768px) { /* md:text-4xl */
    .services-section h2 { font-size: 2.25rem; }
}

.services-grid {
    display: grid;
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) { /* md:grid-cols-2 */
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg:grid-cols-3 */
    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.service-card {
    background-color: white;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--shadow-light);
    overflow: hidden;
    position: relative; /* Para el efecto hover de la imagen */
    cursor: pointer;
}

.service-card img {
    width: 100%;
    height: 14rem; /* h-56 */
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover img {
    transform: scale(1.05);
}

.service-card-content {
    padding: 0rem 1.5rem 2rem 1.5rem;
    color: var(--color-secondary-blue-gray);
}

.service-card-content h3 {
    font-family: Gruppo;
    font-size: 1.3rem; /* text-2xl (originalmente, ajustado para que no sea tan grande como h2) */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
}

.service-card-content p {
    color: var(--text-color-card);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.service-card-content a {
    position: absolute;
    right: 2rem;
    bottom: 1rem;
    color: var(--color-accent-terracotta);
    font-weight: 600;
    text-decoration: none;
}

.service-card-content a:hover {
    opacity: 0.9;
}

/* Sección "Quiénes Somos" */
.about-section {
    background-color: var(--color-neutral-off-white);
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.about-content p {
    color: var(--text-color-card);
    font-family: Quicksand;
}

@media (min-width: 1024px) { /* lg:flex-row */
    .about-content {
        flex-direction: row;
    }
}

.about-image-wrapper {
    width: 100%;
    text-align: center;
}

@media (min-width: 1024px) { /* lg:w-1/2 */
    .about-image-wrapper {
        width: 50%;
    }
}

.about-image-wrapper img {
    display: inline-block;
    width: 40%;
    height: auto;
    object-fit: cover;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--shadow-medium);
    margin: 0.5rem;
}

@media (min-width: 768px) { /* lg:flex-row */
    .about-image-wrapper img {
        width: 44%;
    }
}

.about-text-content {
    width: 100%;
    text-align: center;
}

@media (min-width: 1024px) { /* lg:w-1/2 lg:text-left */
    .about-text-content {
        width: 50%;
        text-align: left;
    }
}

@media (min-width: 768px) { /* md:text-4xl */
    .about-text-content h2 { 
        font-size: 2.25rem; 
        margin: 0rem 0rem 1.5rem 0rem;
        text-align: left;
    }
}

.about-text-content p {
    font-size: 1.125rem; /* text-lg */
    color: #4a5568; /* gray-700 */
    line-height: 1.625; /* leading-relaxed */
    margin: 1.5rem;
    text-align: left;
}

@media (min-width: 768px) { /* md:text-4xl */
    .about-text-content p { 
        margin: 0rem;
    }
}

.about-text-content p:last-of-type {
    margin-bottom: 2rem; /* mb-8 */
}

.about-text-content a {
    background-color: #839f9e;
    color: white;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 9999px; /* rounded-full */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: var(--shadow-light);
}

.about-text-content a:hover {
    background-color: #b5dbda;
    color: var(--text-color-dark);
}

/* Sección "Testimonios" (Carrusel) */
.testimonials-section {
    background-color: var(--color-secondary-blue-gray);
    color: white;
    text-align: center;
}

.testimonials-section h2 {
    font-size: 2rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 768px) { /* md:text-4xl */
    .testimonials-section h2 { font-size: 2.25rem; }
}

.carousel-container {
    overflow: hidden;
    position: relative;
    /*max-width: 960px;*/
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--shadow-large);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    position: relative;
    flex: 0 0 100%; /* Cada item ocupa el 100% del ancho del contenedor */
    min-width: 100%; /* Asegura que no se encoja */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
    padding: 2rem; /* p-8 */
    background-color: var(--color-neutral-off-white);
    border-radius: 0.75rem; /* rounded-xl */
    color: var(--text-color-dark);
    text-align: center;
}

.carousel-ver-resenna {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

.carousel-ver-resenna a {
    position: absolute;
    right: 2rem;
    bottom: 1rem;
    color: var(--color-accent-terracotta);
    font-weight: 600;
    text-decoration: none;
}

.carousel-ver-resenna a:hover {
    opacity: 0.9;
}

@media (min-width: 768px) { /* En pantallas medianas y grandes, muestra 2 o 3 items */
    .carousel-item {
        flex: 0 0 50%; /* Muestra 2 items */
        min-width: 50%;
    }
}
@media (min-width: 1024px) {
    .carousel-item {
        flex: 0 0 33.33%; /* Muestra 3 items */
        min-width: 33.33%;
    }
}

.carousel-item p.testimonial-text {
    font-size: 1.125rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    /*height: 250px;
    overflow-x: hidden;
    overflow-y: auto;*/
}

.carousel-author {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1rem;
}

.carousel-author img {
    width: 6rem; /* w-16 */
    height: 2rem; /* h-16 */
    border-radius: 9999px; /* rounded-full */
    margin-right: 1rem; /* mr-4 */
    object-fit: cover;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(204, 139, 101, 0.4); /* Terracota con transparencia */
    color: white;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    border: none;
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(204, 139, 101, 0.6);
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.testimonials-section .all-resennas-button {
    margin-top: 3rem; /* mt-12 */
    display: inline-block;
    background-color: #cc8b65;
    color: white;
    padding: 1rem 2rem; /* px-8 py-4 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: var(--shadow-medium);
    transition: color 0.3s ease, background-color 0.3s ease, font-weight 0.3s ease;
}

.testimonials-section .all-resennas-button:hover {
    color: var(--text-color-dark);
    background-color: #fcaa7b;
    font-weight: 400;
}

/* Sección "Blog" */
.blog-section {
    background-color: var(--color-neutral-off-white);
    text-align: center;
}

.blog-section h2 {
    font-size: 2rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: var(--color-secondary-blue-gray);
    margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 768px) { /* md:text-4xl */
    .blog-section h2 { font-size: 2.25rem; }
}

.blog-grid {
    display: grid;
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) { /* md:grid-cols-2 */
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg:grid-cols-3 */
    .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.blog-post-card {
    background-color: white;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: var(--shadow-light);
    overflow: hidden;
    position: relative;
}

.blog-post-card img {
    width: 100%;
    height: 12rem; /* h-48 */
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-post-card:hover img {
    transform: scale(1.05);
}

.blog-post-content {
    padding: 1.5rem; /* p-6 */
    color: var(--color-secondary-blue-gray);
}

.blog-post-content h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
}

.blog-post-content p {
    color: #4a5568; /* gray-700 */
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 1rem; /* mb-4 */
}

.blog-post-content a {
    position: absolute;
    right: 2rem;
    bottom: 1rem;
    color: var(--color-accent-terracotta);
    font-weight: 600; /* font-medium */
    text-decoration: none;
}

.blog-post-content a:hover {
    text-decoration: underline;
}

.blog-section .all-articles-button {
    margin-top: 3rem; /* mt-12 */
    display: inline-block;
    background-color: var(--color-secondary-blue-gray);
    color: white;
    padding: 1rem 2rem; /* px-8 py-4 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
    box-shadow: var(--shadow-medium);
}

.blog-section .all-articles-button:hover {
    color: var(--text-color-dark);
    background-color: #7fb5d6;
    font-weight: 400;
}

/* Sección de Contacto */
.contact-section {
    padding-top: 3rem; /* py-16 */
    padding-bottom: 4rem; /* py-16 */
    background-color: var(--color-accent-terracotta);
    color: white;
    text-align: center;
}

.contact-section h2 {
    font-size: 2rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1.5rem; /* mb-6 */
}

.contact-section iframe {
    height: 250px;
}

@media (min-width: 768px) { /* md:text-4xl */
    .contact-section h2 { font-size: 2.25rem; }
    .contact-section iframe { height: 450px; }
}

.contact-section p {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 2rem; /* mb-8 */
    max-width: 48rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) { /* md:text-xl */
    .contact-section p { font-size: 1.25rem; }
}

/* Footer */
footer {
    background-color: var(--color-secondary-blue-gray);
    color: var(--color-neutral-off-white);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* gap-8 */
    text-align: center;
    /*margin-bottom: 2.5rem;*/
}

@media (min-width: 768px) { /* md:grid-cols-3 md:text-left */
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
        margin-bottom: 0;
    }
}

footer h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

footer p {
    margin-bottom: 0.5rem; /* mb-2 */
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 0.5rem; /* mb-2 */
}

footer ul li a, .footer-contact a {
    color: var(--color-neutral-off-white);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

footer ul li a:hover, .footer-contact a:hover {
    color: white;
    text-shadow: black 1px 1px 3px;
}

.footer-contact .material-symbols-outlined {
    vertical-align: middle;
    background-color: transparent;
    border-radius: 60px;
    padding: 3px;
    transition: background-color 0.3s ease;    
}

.footer-contact a:hover > .material-symbols-outlined {
    background-color: var(--color-accent-terracotta);
}

.footer-contact:last-child {
    /*height: 50px;
    line-height: 50px;*/
    text-align: center;
}

.footer-contact img {
    height: 28px;
    vertical-align: middle;
    margin-right: 8px;
    background-color: transparent;
    
    transition: background-color 0.3s ease;
}

.footer-contact a:hover > img {
    background-color: var(--color-accent-terracotta);
    border-radius: 14px;
}

.social-links {
    display: flex;
    gap: 1rem;
    /*margin-bottom: 1.5rem; */
    justify-content: center;
}

@media (min-width: 768px) { /* md:justify-start */
    .social-links {
        justify-content: flex-start;
    }
}

.social-links a img {
    width: 26px;
    height: 26px;
    background-color: transparent;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.social-links a img:hover {
    background-color: var(--color-accent-terracotta);
}

footer .legal-text {
    font-size: 0.875rem;
}

footer .legal-text a {
    color: var(--color-neutral-off-white);
    text-decoration: none;
}

/* Botón flotante para reservar cita */
.floating-button {
    position: fixed;
    bottom: 1.5rem;
    right: 1rem;
    background-color: var(--color-accent-terracotta);
    color: white;
    padding: 10px 40px;
    border-radius: 9999px; /* Para hacerlo completamente redondo si el padding es igual */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-family: Quicksand;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.5s ease;;
    z-index: 1000;
}

.floating-button:hover {
    transform: translateY(-5px);
    background-color: var(--color-light-terracotta); /* Un tono más claro de terracota */
    color: var(--text-color-dark);
}

@media (max-width: 767px) {
    .floating-button-desktop {
        display: none;
    }

    .floating-button-cookies {
        bottom: 10rem !important;
    }

}

@media (min-width: 768px) {
    .floating-button-desktop {
        position: relative;
        background-color: var(--color-accent-terracotta);
        color: white;
        padding: 10px 40px;
        border-radius: 9999px; /* Para hacerlo completamente redondo si el padding es igual */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        font-family: Quicksand;
        font-size: 1.2rem;
        text-decoration: none;
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.5s ease;;
        z-index: 49;
    }

    .floating-button-desktop:hover {
        transform: translateY(-5px);
        background-color: var(--color-light-terracotta); /* Un tono más claro de terracota */
        color: var(--text-color-dark);
    }

    .floating-button {
        display: none;
        right: 1.5rem;
    }

    .floating-button-cookies {
        bottom: 7.5rem !important;
    }

}

/* Animación de aparición al hacer scroll (manteniendo Intersection Observer por eficiencia) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}