@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
    --color-primary: #09a1ad;
    --color-secondary: #e08081;

    /* Variantes usadas como fondo de botones.
       El teal se oscurece para cumplir contraste (5.09:1 sobre blanco).
       El rosado se mantiene en el tono exacto de marca #e08081 por
       decision suya (21-ago-2026): con texto blanco encima da 2.77:1,
       bajo el minimo AA de 4.5:1. #c96060 es el tono oscuro que ya
       existia en el original, para los hover. */
    --color-primary-strong: #077a84;
    --color-primary-stronger: #05616a;
    --color-secondary-strong: #e08081;
    --color-secondary-stronger: #c96060;
    --color-text: #666666;
    --color-text-dark: #333333;
    --color-white: #ffffff;
    
    --navbar-height: 100px;
    --navbar-height-mobile: 70px;
    --logo-height-desktop: 90px;
    --logo-height-tablet: 70px;
    --logo-height-mobile: 60px;
    
    /* Espaciado */
    --spacing-xxs: 0.125rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    

    /* Contenedores */
    --container-padding-desktop: 120px;
    --container-padding-tablet: 60px;
    --container-padding-mobile: 20px;

    /* Utilidades */
    --border-radius: 25px;
    --transition: all 0.3s ease;
    --navbar-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    --header-gap: 10px;
    --header-gap-mobile: 5px;

    --color-light: #f5f5f5;
    --color-background: #f9f9f9;
    --container-width: 1200px;
    --container-padding: 120px;
}

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

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text);
    line-height: 1.5;
}

.navbar {
    height: var(--navbar-height);
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-white);
    box-shadow: var(--navbar-shadow);
    width: 100%;
    z-index: 1000;
}

.navbar .navbar__container {
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.navbar .navbar__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.navbar .navbar__logo img {
    height: var(--logo-height-desktop);
    width: auto;
    object-fit: contain;
}

/* Enlaces de navegación */
.navbar .navbar__links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 28px;
    align-items: center;
}

/* Estilos para los enlaces del menú */
.nav-link {
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--color-primary);
}

/* Estilo para el enlace activo */
.nav-link--active {
    color: var(--color-primary);
}

/* Línea deslizante debajo del enlace */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width 0.3s ease;
}

/* Animación al hover */
.nav-link:hover::after {
    width: 100%;
}

/* Línea permanente para enlace activo */
.nav-link--active::after {
    width: 100%;
}
/* Botón CTA */
.navbar .btn--cta {
    flex-shrink: 0;
    padding: 12px 24px;
    border-radius: 50px;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
}

.navbar .btn--cta:hover {
    background-color: var(--color-primary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Menú hamburguesa - oculto en desktop */
.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
}

/* Barras del menú hamburguesa */
.navbar__toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-dark);
    transition: var(--transition);
}


/* Media Queries */
@media (max-width: 1200px) {
    .navbar .navbar__container {
        padding: 0 var(--container-padding-tablet);
    }

    .navbar .navbar__links {
        gap: 18px;
    }
}

@media (max-width: 1024px) {
    .navbar .navbar__logo img {
        height: var(--logo-height-tablet);
        max-width: calc(var(--logo-height-tablet) * 2);
    }
}

@media (max-width: 768px) {
    /* Ajustes navbar móvil */
    .navbar {
        height: var(--navbar-height-mobile);
    }

    .navbar .navbar__container {
        padding: 0 var(--spacing-sm);
        justify-content: flex-start;
        position: relative;
    }

    .navbar .btn--cta {
        margin-left: calc(2vw + var(--spacing-xs));
        padding: 6px 12px;
        font-size: 13px;
    }

    .navbar__toggle {
        position: absolute;
        right: var(--spacing-sm);
        top: 50%;
        transform: translateY(-50%);
    }

    /* Logo móvil */
    .navbar .navbar__logo img {
        height: var(--logo-height-mobile);
        max-width: calc(var(--logo-height-mobile) * 2);
    }

    /* Menú móvil y links */
    .navbar__toggle {
        margin-left: var(--spacing-sm);
        order: 3;
    }

    .navbar .navbar__links {
        position: fixed;
        top: var(--navbar-height-mobile);
        left: 0;
        right: 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-lg) 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        box-shadow: var(--navbar-shadow);
        gap: 20px;
    }

    .navbar .navbar__links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Ajustes del botón CTA en móvil */
    .navbar .btn--cta {
        margin-left: calc(2vw + var(--spacing-xs));
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Ajustes de tipografía responsiva */
    h1 { font-size: calc(2rem + 1vw); }
    h2 { font-size: calc(1.5rem + 1vw); }
    h3 { font-size: calc(1.2rem + 1vw); }
    p { font-size: calc(1rem + 0.5vw); }

    /* Ajustes de contenido */
    .main-content {
        padding: var(--spacing-md);
    }

    .page-title {
        font-size: 2rem;
    }

    .content-container {
        padding: var(--spacing-sm);
    }
}

@media (max-width: 576px) {
    .navbar .navbar__container {
        padding: 0 var(--spacing-sm);
    }
}

/* Estilos generales responsivos */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--spacing-xl) 0;
}

/* Grid responsivo */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

/* Tipografía responsiva */
@media (max-width: 768px) {
    h1 {
        font-size: calc(2rem + 1vw);
    }
    
    h2 {
        font-size: calc(1.5rem + 1vw);
    }
    
    h3 {
        font-size: calc(1.2rem + 1vw);
    }
    
    p {
        font-size: calc(1rem + 0.5vw);
    }
}

/* Estilos para el contenido principal */
.main-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
}

.page-title {
    color: var(--color-text-dark);
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.content-container {
    padding: var(--spacing-lg);
}

/* Formulario de contacto */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

/* Grids */
.specialties-grid,
.team-grid,
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
}

/* Media queries */
@media (max-width: 768px) {
    .main-content {
        padding: var(--spacing-md);
    }

    .page-title {
        font-size: 2rem;
    }

    .content-container {
        padding: var(--spacing-sm);
    }
}

/* Media Queries para ajustar el tamaño del logo */
@media (max-width: 1024px) {
    .navbar .navbar__logo img {
        height: var(--logo-height-tablet);
    }
}

@media (max-width: 768px) {
    /* Ajustes navbar móvil */
    .navbar {
        height: var(--navbar-height-mobile);
    }

    .navbar .navbar__container {
        padding: 0 var(--container-padding-mobile);
    }

    /* Logo móvil */
    .navbar .navbar__logo img {
        height: var(--logo-height-mobile);
    }

    /* Menú móvil */
    .navbar__toggle {
        display: flex;
    }

    .navbar .navbar__links {
        position: fixed;
        top: var(--navbar-height-mobile);
        left: 0;
        right: 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-lg) 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        box-shadow: var(--navbar-shadow);
    }

    .navbar .navbar__links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 368px) {
    .navbar .navbar__logo img {
        height: clamp(40px, 12vw, var(--logo-height-mobile)); /* Reducción gradual */
    }

    .navbar .btn--cta {
        font-size: clamp(11px, 3vw, 13px);
        padding: clamp(4px, 1.5vw, 8px) clamp(8px, 2.5vw, 12px);
        transform: scale(clamp(0.9, 0.9 + 0.1vw, 1));
    }
}

/* Especialidades */
.specialties {
    margin-top: 2rem;
    padding: 2rem;
}

.specialties__title {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.specialties__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilos base para las tarjetas de especialidades */
.specialties__grid .specialty-box {
    background: var(--color-white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover para las tarjetas tanto en index como en pages/especialidades.html */
.specialties__grid .specialty-box:hover {
    background: var(--color-primary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.specialties__grid .specialty-box:hover a {
    color: white;
}

/* Estilos específicos para el contenido dentro de las páginas individuales de especialidades */
.specialty-container .specialty-box {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: left;
    transition: none;
    cursor: default;
}

.specialty-container .specialty-box:hover {
    background: #f5f5f5;
    transform: none;
    box-shadow: none;
}

.specialty-box a {
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 500;
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .specialties__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .specialties__grid {
        grid-template-columns: 1fr;
    }
}

.specialty-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
}

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

.specialty-card__title {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
}

.specialty-card__description {
    color: var(--color-text);
    margin-bottom: auto;
    line-height: 1.6;
}

/* Media Queries para Especialidades */
@media (max-width: 768px) {
    .specialties {
        padding: var(--spacing-lg) var(--container-padding-mobile);
    }

    .specialties__title {
        font-size: 2rem;
    }

    .specialty-card {
        padding: var(--spacing-md);
        width: 100%;
    }
}

/* Botón de las tarjetas de especialidades */
.specialty-card__button {
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    margin-top: var(--spacing-md);
}

.specialty-card__button:hover {
    background-color: var(--color-primary-stronger);
}



/* Page Nosotros Header */
.page-header {
    width: 100%;
    background-color: var(--color-secondary-strong);
    padding: var(--spacing-xl) 0;
    margin-top: calc(var(--navbar-height) + var(--header-gap));
}

/* .page-header ya libra la navbar fija con su propio margin-top;
   el de .main-content quedaba encima y dejaba 100px de banda muerta */
.page-header + .main-content {
    margin-top: 0;
}

.page-header__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    text-align: center;
}

.page-header__title {
    color: var(--color-white);
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.page-header__subtitle {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 400;
    opacity: 0.9;
}

/* Media Queries */
@media (max-width: 768px) {
    .page-header {
        margin-top: calc(var(--navbar-height-mobile) + var(--header-gap-mobile));
        padding: var(--spacing-lg) 0;
    }

    .page-header__container {
        padding: 0 var(--container-padding-mobile);
    }

    .page-header__title {
        font-size: 2rem;
    }

    .page-header__subtitle {
        font-size: 1.1rem;
    }
}

/* Sección Nosotros */
.section-about {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--container-padding-desktop);
    max-width: 1440px;
    margin: 0 auto;
}

.about-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    position: relative;
}

.about-card__content {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    transition: var(--transition);
    flex: 0 1 65%;
}

.about-card__content:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.about-card__title {
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
}

.about-card__text {
    color: var(--color-text);
    line-height: 1.6;
}

.about-card__img {
    width: 35%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius);
    flex: 0 0 auto;
}

.about-card--right {
    justify-content: flex-start;
}

.about-card--left {
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .section-about {
        padding: var(--spacing-lg) var(--container-padding-mobile);
        gap: var(--spacing-lg);
    }

    .about-card {
        flex-direction: column;
    }

    .about-card__content {
        width: 100%;
        flex: none;
    }

    .about-card__img {
        width: 100%;
        height: 200px;
        order: -1;
    }
}

.about-card__title-container {
    margin-bottom: var(--spacing-md);
}

.about-card__title {
    margin-bottom: 0.5rem;
}

.about-card__title-line {
    width: 100%;
    height: 3px;
    border-radius: 2px;
}

/* Sección Valores y Por qué elegirnos */
.section-values,
.section-why-choose {
    padding: var(--spacing-xl) var(--container-padding-desktop);
    text-align: center;
    max-width: 1440px;
    margin: 0 auto;
}

.section-title {
    color: var(--color-text-dark);
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
}

.values-container,
.reasons-container {
    display: grid;
    /* auto-fit en vez de 3 fijas: con 120px de padding a cada lado,
       tres columnas no caben entre 769 y 1100px de viewport */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1100px;
    margin: 0 auto;
}

.value-card,
.reason-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    transition: var(--transition);
}

.value-card:hover,
.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.value-card .icon,
.reason-card .icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    display: block;
    color: var(--color-primary);
}

.value-card h4,
.reason-card h4 {
    color: var(--color-text-dark);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.value-card p,
.reason-card p {
    color: var(--color-text);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .section-values,
    .section-why-choose {
        padding: var(--spacing-lg) var(--container-padding-mobile);
    }

    .values-container,
    .reasons-container {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.8rem;
    }
}

/* Ajuste para los iconos emoji */
.reason-card .icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    display: block;
    height: 50px;
    line-height: 50px;
}

/* Estilos para el dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-white);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 8px;
    top: 100%;
    left: 0;
    padding: 8px 0;
}

.dropdown-content a {
    color: var(--color-text);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: var(--color-light);
    color: var(--color-primary);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        padding-left: 20px;
    }

    .dropdown.active .dropdown-content {
        display: block;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .navbar .navbar__container {
        gap: var(--spacing-md);
    }

    .navbar .navbar__logo {
        flex: 0 0 auto;
    }

    .navbar .navbar__links {
        position: relative;
        left: 0;
        transform: none;
        flex: 1;
        justify-content: center;
        gap: 24px;
    }

    .navbar .btn--cta {
        flex: 0 0 auto;
        position: absolute;
        right: var(--spacing-lg);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Ajuste del logo */
    .navbar .navbar__logo img {
        height: 80px;
    }

    /* Ajuste del contenedor */
    .navbar .navbar__container {
        gap: var(--spacing-sm);
    }

    /* Ajustes de los links */
    .navbar .navbar__links {
        position: relative;
        left: 0;
        transform: none;
        flex: 1;
        justify-content: center;
        gap: 12px;
        margin-right: 120px;
        padding-left: calc((900px - 100vw) * 0.1);
        transition: var(--transition);
    }

    /* Ajuste del tamaño de fuente de los links */
    .navbar .navbar__links .nav-link {
        font-size: 13px;
    }

    /* Ajuste del botón CTA */
    .navbar .btn--cta {
        font-size: 12px;
        padding: 8px 14px;
        position: absolute;
        right: var(--spacing-lg);
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .navbar .navbar__container {
        padding-left: calc(var(--container-padding-tablet) * 0.5);
    }
}

@media (min-width: 1201px) {
    .navbar .navbar__container {
        padding-left: calc(var(--container-padding-desktop) * 0.7); /* Ajustamos el padding para pantallas grandes */
    }
}

.specialty-faq {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-white);
}

.specialty-faq h2 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.faq-item {
    background-color: var(--color-white);
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: var(--spacing-md);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 1.1rem;
}

.faq-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 var(--spacing-md);
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding-bottom: var(--spacing-md);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.image-carousel {
    width: 45%;
    margin-left: auto;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.carousel-container {
    width: 100%;
    position: relative;
    height: 400px; /* Altura fija del carrusel */
}

.carousel-slide {
    display: flex;
    width: 500%;
    height: 400px; /* Altura fija igual que el contenedor */
}

.carousel-slide img {
    width: 20%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .image-carousel {
        width: 100%;
        margin-top: var(--spacing-lg);
    }
}

/* Estilos para el carrusel */
.carousel-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.carousel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

.intro-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    margin: 0; /* Quitamos el margen vertical */
    width: 45%; /* Mismo ancho que el carrusel */
    transition: var(--transition);
    
    /* Igualamos exactamente la altura al carrusel */
    height: 400px;
    overflow-y: auto;
}

/* Personalizar la barra de scroll */
.intro-card::-webkit-scrollbar {
    width: 8px;
}

.intro-card::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.intro-card::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.intro-card::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

@media (max-width: 768px) {
    .intro-card {
        min-height: 250px; /* altura mínima más pequeña en móvil */
        max-height: 350px; /* altura máxima más pequeña en móvil */
        height: auto; /* altura automática en móvil */
    }
}

/* Estilos del carrusel */
.image-carousel {
    width: 45%;
    margin-left: auto;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.carousel-container {
    width: 100%;
    position: relative;
    height: 400px; /* Altura fija del carrusel */
}

.carousel-slide {
    display: flex;
    width: 500%;
    height: 400px; /* Altura fija igual que el contenedor */
}

.carousel-slide img {
    width: 20%;
    height: 100%;
    object-fit: cover;
}

/* Estilos de la tarjeta intro */
.intro-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    margin: 0; /* Quitamos el margen vertical */
    width: 45%; /* Mismo ancho que el carrusel */
    transition: var(--transition);
    
    /* Igualamos exactamente la altura al carrusel */
    height: 400px;
    overflow-y: auto;
}

/* Contenedor que agrupa la tarjeta y el carrusel */
.intro-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--container-padding-desktop);
    max-width: 1440px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .intro-section {
        flex-direction: column;
        padding: var(--spacing-lg) var(--container-padding-mobile);
    }

    .intro-card,
    .image-carousel {
        width: 100%;
        height: 350px; /* Altura reducida para móvil */
    }
}

/* Solo necesitamos agregar estos estilos nuevos */
.intro-card {
    display: flex;
    flex-direction: column;
}

.intro-card__content {
    flex: 1;
}

.intro-card__buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-top: auto;
    justify-content: center;
    padding-top: var(--spacing-lg);
}

/* Modificamos los botones dentro de la tarjeta */
.intro-card__buttons .btn--cta {
    background-color: var(--color-secondary-strong); /* El color rosado */
    padding: 8px 20px; /* Padding más pequeño */
    font-size: 14px; /* Texto más pequeño */
    border-radius: 25px; /* Bordes más redondeados */
    color: var(--color-white);
}

.intro-card__buttons .btn--cta:hover {
    background-color: var(--color-primary-stronger); /* Color hover */
    transform: translateY(-2px);
}

/* Estilos para la galería */
.gallery-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg) var(--container-padding-desktop);
    background-color: var(--color-light);
    gap: var(--spacing-sm);
}

.gallery-header .gallery-navigation {
    align-self: flex-start;
    padding: 0;
    margin: 0;
}

.gallery-title {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.gallery-subtitle {
    color: var(--color-text);
}

.before-after-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.before-after-images-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--color-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
}

.image-container {
    position: relative;
    width: 25%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.before-image,
.after-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.image-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* Ajustes para la descripción */
.case-description {
    text-align: center;
    margin-top: 1rem;
    padding: 0 1rem;
}

.treatment-time {
    display: block;
    color: var(--color-text);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.treatment-details {
    color: var(--color-text);
    font-size: 0.9rem;
    font-style: italic;
}

/* Mejorar las etiquetas Antes/Después */
.image-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.case-description {
    text-align: center;
    margin-top: 1rem;
    padding: 0 1rem;
}

.treatment-time {
    display: block;
    color: var(--color-text);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.treatment-details {
    color: var(--color-text);
    font-size: 0.9rem;
    font-style: italic;
}

.treatment-info {
    padding: var(--spacing-xl) var(--container-padding-desktop);
    background-color: var(--color-white);
    
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-cta {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

/* Media Queries */
@media (max-width: 768px) {
    .before-after-images-stack {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

.specialty-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forzamos 2 columnas */
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--container-padding-desktop);
    max-width: 1200px; /* Reducimos un poco el ancho máximo */
    margin: 0 auto;
}

.specialty-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.specialty-card__title {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.specialty-card__text {
    color: var(--color-text);
    line-height: 1.6;
    flex-grow: 1;
}

.specialty-card__button {
    display: inline-block;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    text-decoration: none;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    transition: var(--transition);
    margin-top: auto;
}

.specialty-card__button:hover {
    background-color: var(--color-primary-stronger);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .specialty-cards {
        grid-template-columns: 1fr; /* Una columna en móvil */
        padding: var(--spacing-lg) var(--container-padding-mobile);
        gap: var(--spacing-md);
    }
}

/* Ajustamos el responsive para mantener las 2 columnas hasta cierto breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .specialty-cards {
        padding: var(--spacing-lg) var(--container-padding-tablet);
    }
}

.gallery-navigation {
    padding: var(--spacing-md) var(--container-padding-desktop);
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-back-link,
.gallery-back {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.gallery-back-link:hover,
.gallery-back:hover {
    color: var(--color-secondary);
}

.back-arrow {
    margin-right: var(--spacing-sm);
    font-size: 1.2em;
}

@media (max-width: 768px) {
    .gallery-navigation {
        padding: var(--spacing-md) var(--container-padding-mobile);
    }
}

/* Contenedor de tarjetas de equipo */
.team-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr); /* Ajustado el ancho máximo */
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--container-padding-desktop);
    max-width: 1440px;
    margin: 0 auto;
    justify-content: center; /* Centra las tarjetas en el grid */
}

/* Tarjeta individual */
.team-card {
    perspective: 1000px;
    height: 470px; /* Aumentamos un poco más la altura */
    width: 100%;
    max-width: 280px;
}

.team-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

/* Cara visible de la tarjeta. Antes esto vivia en una regla compartida
   con .team-card__back; al quitar el reverso se perdio el estilo del
   frente y las tarjetas quedaron sin fondo ni borde. */
.team-card__front {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 15px;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Título */
.team-card__title {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

/* Contenedor de imagen */
.team-card__image-container {
    width: 100%;
    height: 400px; /* Altura ajustada para mantener la proporción */
    overflow: hidden;
    position: relative;
}

.team-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transform: scale(1.0); /* Sin zoom adicional */
    image-rendering: -webkit-optimize-contrast;
    max-width: 853px; /* Máximo ancho igual al original */
    margin: 0 auto;
}


/* Para pantallas más pequeñas */
@media (max-width: 768px) {
    .team-card__image-container {
        height: 350px;
    }
}

.team-card__button {
    background-color: var(--color-primary-strong);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-align: center; /* Centra el texto dentro del botón */
    width: 120px; /* Reducido al tamaño de "Ver Galería" */
    height: 30px; /* Ajustada la altura */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Para quitar el subrayado del enlace */
    cursor: pointer;
    white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
}

.team-card__button:hover {
    transform: translateY(-2px);
    background-color: var(--color-secondary-stronger);
}

/* Responsive */
@media (max-width: 900px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .team-cards {
        grid-template-columns: 1fr;
        padding: var(--spacing-lg) var(--container-padding-mobile);
        align-items: center;
        justify-items: center;
    }

    .team-card {
        height: 420px;
        max-width: 320px;
        width: 100%;
    }

    .team-card__image-container {
        height: 260px;
    }
}

/* Ajustamos los estilos de la tarjeta giratoria */
.team-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

/* Estilo para el nombre del profesional */
.team-card__name {
    color: var(--color-text-dark);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Responsive */
.specialty-box {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem auto;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.specialty-box__title {
    overflow-wrap: anywhere;
    hyphens: auto;
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.specialty-box__description {
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.specialty-box__subtitle {
    color: var(--color-text-dark);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.specialty-box__list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 2rem; /* Añadir espacio después de la lista */
}

.specialty-box__list li {
    color: var(--color-text);
    font-size: 1.1rem;
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.specialty-box__list li::before {
    content: "•";
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .specialty-box {
        margin: 1rem;
        padding: 1.5rem;
    }

    .specialty-box__title {
        font-size: 1.8rem;
    }

    .specialty-box__subtitle {
        font-size: 1.3rem;
    }
}

.team-card {
    max-width: 400px; /* Ajusta el ancho máximo de la tarjeta */
    margin: 1rem;
}

.team-card__image-container {
    width: 100%;
    height: 320px; /* Altura proporcional al ancho de 400px */
    overflow: hidden;
    position: relative;
    border-radius: 8px; /* Opcional: para bordes redondeados */
}

.team-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: scale(1.0);
    image-rendering: high-quality; /* Para mejor calidad */
    -webkit-backface-visibility: hidden; /* Mejora la nitidez */
    backface-visibility: hidden;
}


/* Para pantallas más pequeñas */
@media (max-width: 768px) {
    .team-card {
        max-width: 320px;
    }
    
    .team-card__image-container {
        height: 280px;
    }
}

/* Responsive */
/* Responsive */
.faq {
    padding: 4rem 0;
    background-color: var(--color-background);
}

.faq__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.faq__title {
    text-align: center;
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.faq__item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq__question {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq__icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.faq__question.active .faq__icon {
    transform: rotate(45deg);
}

.faq__answer {
    display: none;
    padding: 0 1.5rem 1.5rem;
    color: var(--color-text);
    line-height: 1.6;
}

.faq__answer.active {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .faq {
        padding: 3rem 0;
    }

    .faq__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .faq__question {
        font-size: 1rem;
        padding: 1.2rem;
    }
}

/* Responsive */
/* Responsive */
.specialty-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

@media (max-width: 1200px) {
    .specialty-container {
        padding: 0 var(--container-padding-tablet);
    }
}

@media (max-width: 768px) {
    .specialty-container {
        padding: 0 var(--container-padding-mobile);
    }
}

.specialty-box__carousel {
    margin-top: 0; /* Quitar el margen superior ya que viene después de la lista */
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem auto; /* Mantener margen inferior */
}

.carousel {
    position: relative;
}

.carousel__track-container {
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.carousel__track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel__slide.current-slide {
    opacity: 1;
}

.carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    gap: 1rem;
}

.carousel__button {
    background: var(--color-primary-strong);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel__button img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.carousel__indicators {
    display: flex;
    gap: 0.5rem;
}

.carousel__indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    cursor: pointer;
}

.carousel__indicator.current-slide {
    background: var(--color-primary);
}

.specialty-box__content {
    display: grid;
    grid-template-columns: 40% 50%; /* Reducido el ancho de la segunda columna */
    gap: 2rem; /* Reducido el gap */
    margin-top: 2rem;
    align-items: start; /* Alinear al inicio para mejor distribución */
}

.specialty-box__services {
    padding-right: 1rem;
}

.specialty-box__list {
    list-style: none;
    padding: 0;
}

.specialty-box__list li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--color-text-dark);
}

.specialty-box__list li::before {
    content: "•";
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.specialty-box__carousel {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Mantener el resto de los estilos igual */

.specialty-box__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.specialty-box__buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
    width: 100%;
}

/* Agregado nueva clase para el botón de "Ver Galería" */
.specialty-box__buttons--left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

.specialty-box__buttons .team-member__button {
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    margin-left: auto;
    margin-right: 75px;
    display: inline-block;
}

.specialty-box__buttons .button--primary {
    background-color: var(--color-primary-strong);
    color: var(--color-white);
}

.specialty-box__buttons .button--secondary {
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
}

/* Responsive */
@media (max-width: 768px) {
    .specialty-box__header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .specialty-box__content {
        grid-template-columns: 1fr;
    }

    .specialty-box__services {
        padding-right: 0;
    }
}

/* Responsive */
/* Responsive */
/* Responsive */
.comparison-section {
    padding: 2rem 0;
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-light); /* Agregado para mejor contraste */
    border-radius: var(--border-radius);
}

.comparison-container {
    position: relative;
    width: 100%;
    height: 500px; /* Aumentado para mejor visibilidad */
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: var(--color-white);
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 10; /* Asegurar que esté por encima de las imágenes */
}

.slider-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; /* Ligeramente más grande */
    height: 44px;
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 11;
}

.slider-handle::after {
    content: '↔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
    font-size: 24px; /* Más grande */
    font-weight: bold;
    z-index: 12;
}

/* Agregar etiquetas "Antes" y "Después" */
.comparison-container::before,
.comparison-container::after {
    content: 'Antes';
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 500;
    z-index: 9;
}

.comparison-container::after {
    content: 'Después';
    left: auto;
    right: 20px;
}

.gallery-grid {
    padding: 2rem;
}

.gallery-card .before-after-images-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-card .image-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-card .image-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.gallery-card .before-image,
.gallery-card .after-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.treatment-box {
    background: var(--color-white);
    border-radius: 25px; /* Mismo radio que la tarjeta del profesional */
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil como la tarjeta del profesional */
    max-width: 400px; /* Ancho similar a la tarjeta del profesional */
    margin: 1rem;
    text-align: center;
}

.treatment-info {
    padding: 1.5rem 0 0;
}

.treatment-title {
    font-size: 1.5rem;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

.treatment-time {
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.treatment-description {
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

/* Mantener los estilos existentes para las imágenes */
.before-after-images-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.image-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* Estilo específico para los botones en las tarjetas de especialidades */
.specialty-card .btn--cta {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    display: inline-block;
    margin-top: 15px;
    text-align: center;
    width: 180px;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
}

/* Mantenemos el mismo hover que los otros botones */
.specialty-card .btn--cta:hover {
    background-color: var(--color-primary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.specialty-box__buttons .btn--cta {
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    font-weight: 500;
    transition: var(--transition);
    display: inline-block;
    width: auto;
    min-width: 180px;
    text-align: center;
}

.specialty-box__buttons .btn--cta:hover {
    background-color: var(--color-primary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.specialty-box__buttons .btn--cta[href*="galeria"] {
    background-color: var(--color-primary-strong);
}

.specialty-box__buttons .btn--cta[href*="galeria"]:hover {
    background-color: var(--color-secondary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-buttons .btn--cta {
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    font-weight: 500;
    transition: var(--transition);
    display: inline-block;
    width: auto;
    min-width: 180px;
    text-align: center;
}

.gallery-buttons .btn--cta:hover {
    background-color: var(--color-primary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Index */

.hero-split {
    display: grid;
    /* El video es 1:1 y la caja lleva la misma proporcion, asi que no hay
       recorte de CSS ni franjas vacias.
       La columna se dimensiona segun el video (min-content), y el alto del
       video lo manda el viewport, para que el cuadro entre COMPLETO sobre
       el pliegue al cargar. */
    /* minmax(444px, 1fr) reserva el ancho que necesitan las tarjetas
       (380px + 2rem de padding a cada lado); sin eso, en una ventana
       angosta y muy alta el cuadrado del video se comia esa columna. */
    grid-template-columns: min-content minmax(444px, 1fr);
}

.hero-split__video {
    position: relative;
    overflow: hidden;
    /* Misma proporcion que el archivo (1000x800): cero recorte */
    aspect-ratio: 5 / 4;
    /* El alto lo manda el viewport, para que el video entre COMPLETO
       sobre el pliegue al cargar, en cualquier navegador. */
    height: min(
        /* que entre completo bajo la navbar: 100px de navbar fija
           + 48px de padding de .main-content + 16px de respiro */
        calc(100vh - var(--navbar-height) - var(--spacing-xl) - 16px),
        /* que deje vivir a las tarjetas. El ancho util del hero es
           min(100vw - 96px, 1440px - 96px), porque .main-content esta
           topado en 1440px; usar 100vw a secas se pasaba en monitores
           anchos y las tarjetas se salian del contenedor.
           Se divide por 1.25 porque el video es 5:4. */
        calc((min(100vw - 96px, 1344px) - 444px) / 1.25),
        860px
    );
}

.hero-split__video video {
    /* Absoluto para que el video no dicte la altura de la fila: la manda
       la regla de arriba, atada al viewport. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-split__info {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-split__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Sin margin-top negativo y sin padding vertical: asi el borde
       superior e inferior de las tarjetas coincide con el del video. */
    margin-top: 0;
    padding: 0 2rem;
}

/* Las tarjetas crecen para que el bloque mida exactamente lo mismo que
   el video. El contenido se centra dentro de cada una. */
.hero-split__info .info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Contenido compacto SOLO en el hero: con los espaciados por defecto las
   dos tarjetas piden ~693px y no caben en el alto del video, que esta
   topado por el pliegue; la de Direccion se desbordaba por abajo.
   El mayor desperdicio era entre la ultima fila de horarios y el boton:
   schedule-list tenia margin-bottom 2rem y info-box__cta margin-top 20px,
   que se suman (52px). */
.hero-split__info .info-box {
    padding: 16px;
}

.hero-split__info .info-box__title {
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

.hero-split__info .schedule-list {
    gap: 0.65rem;
    margin-bottom: 0;
}

.hero-split__info .schedule-item {
    padding: 0.7rem 1rem;
}

.hero-split__info .info-box__cta {
    margin-top: 1.1rem;
}

.hero-split__info .location-content {
    margin: 8px 0 0;
}

@media (max-width: 768px) {
    .hero-split__info {
        margin-top: 0;
        align-items: center;
        padding: 2rem 1rem;
    }
}

.info-box {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
}

/* En el hero la columna es mas ancha que 300px; sin esto quedaba un
   hueco blanco notorio al costado de las tarjetas. */
.hero-split__info .info-box {
    max-width: 380px;
}

.info-box__title {
    color: var(--color-primary);
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.schedule-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--color-light);
    border-radius: 5px;
}

.day {
    font-weight: 500;
}

.hours {
    color: var(--color-primary);
}

.info-box__cta {
    margin-top: 20px;
}

.btn--cta {
    background-color: var(--color-primary-strong);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn--cta:hover {
    background-color: var(--color-secondary-stronger);
}

/* Bajo ~1100px la columna de informacion se angosta, las tarjetas crecen
   en alto y superan al cuadrado del video, dejando un hueco blanco debajo.
   A partir de ahi conviene apilar. */
@media (max-width: 1100px) {
    .hero-split__video {
        height: auto;
    }

    .hero-split {
        grid-template-columns: 1fr;
        /* Apilado, sin tope el cuadrado del video se iria a 1000px de lado */
        max-width: 620px;
        margin-inline: auto;
    }

    .hero-split__info {
        margin-top: 0;
        align-items: center;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-split {
        grid-template-columns: 1fr;
        height: auto;
    }

    .hero-split__video {
        height: auto;
    }

    .hero-split__info {
        padding: 3rem 1rem;
    }
}

.hours-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: right;
}

.agenda-index {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: var(--color-primary-strong);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.agenda-index:hover {
    background-color: var(--color-secondary-stronger);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.info-box__divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 40px 0;
}

.location-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0;
}

.location-content i {
    color: var(--color-primary);
    font-size: 24px;
}

.location-content p {
    margin: 0;
    line-height: 1.4;
    color: #333;
}

.btn--map {
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    width: 100%;
    text-align: center;
}

.btn--map:hover {
    background-color: var(--color-secondary-stronger);
}

.featured-services {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-white);
}

.featured-services__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.featured-services__title {
    text-align: center;
    color: var(--color-text-dark);
    font-size: 2rem;
    margin-bottom: var(--spacing-xl);
}

.featured-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.service-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card__image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* La foto de alineadores trae el logo KeepSmiling pegado al borde inferior
   izquierdo. Con el encuadre por defecto (centro) se recortaban 10px por
   lado y lo cortaban. Anclando el recorte abajo a la izquierda, lo que se
   pierde sale siempre del borde superior y derecho, nunca del logo.
   Se descarto object-fit: contain porque a ~1024px la tarjeta se angosta
   y dejaba franjas de 37px que se veian como bandas. */
.service-card__image--completa img {
    object-position: left bottom;
}

.service-card__content {
    padding: var(--spacing-lg);
    text-align: center;
}

.service-card__content h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}

.service-card__content p {
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.service-card .btn--cta {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 992px) {
    .featured-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .featured-services__grid {
        grid-template-columns: 1fr;
    }
}

.footer {
    background-color: var(--color-primary-strong);
    color: var(--color-white);
    padding: var(--spacing-xl) 0 0;
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.footer__title {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.footer__contact-list,
.footer__hours-list {
    list-style: none;
    padding: 0;
}

.footer__contact-list li,
.footer__hours-list li {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.footer__contact-list a {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__contact-list a:hover {
    opacity: 0.8;
    text-decoration: underline; /* Opcional: agrega subrayado al hover */
}

.footer__social {
    display: flex;
    gap: var(--spacing-md);
}

.social-link {
    color: var(--color-white);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px);
}

.footer__bottom {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 992px) {
    .footer__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer__container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer__section {
        text-align: center;
    }

    .footer__contact-list li {
        justify-content: center;
    }

    .footer__social {
        justify-content: center;
    }
}


/* ===== Sección de estadísticas (Nosotros) ===== */
.section-stats {
    background: linear-gradient(135deg, var(--color-primary), #077a84);
    padding: var(--spacing-xl) var(--container-padding-desktop);
    margin: var(--spacing-xl) 0;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-lg);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
}

.stat-label {
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .section-stats {
        padding: var(--spacing-xl) var(--container-padding-mobile);
    }

    .stats-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md);
    }

    .stat-number {
        font-size: 2.2rem;
    }
}

/* ===== CTA de cierre (Nosotros) ===== */
.section-cta {
    padding: var(--spacing-xl) var(--container-padding-desktop);
}

.cta-box {
    background: linear-gradient(135deg, var(--color-secondary), #c96060);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-box__title {
    color: var(--color-white);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-sm);
}

.cta-box__text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

.cta-box .btn--cta {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    background-color: var(--color-white);
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.cta-box .btn--cta:hover {
    background-color: var(--color-primary-stronger);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .section-cta {
        padding: var(--spacing-xl) var(--container-padding-mobile);
    }

    .cta-box__title {
        font-size: 1.4rem;
    }
}

/* ===== Títulos de sección dentro de galerías ===== */
.gallery-section-title {
    text-align: center;
    padding: var(--spacing-xl) var(--container-padding-desktop) var(--spacing-md);
    max-width: 900px;
    margin: 0 auto;
}

.gallery-section-title h2 {
    color: var(--color-primary);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-xs);
}

.gallery-section-title p {
    color: var(--color-text);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .gallery-section-title {
        padding: var(--spacing-lg) var(--container-padding-mobile) var(--spacing-sm);
    }

    .gallery-section-title h2 {
        font-size: 1.4rem;
    }
}

/* ===== Carrusel de especialidades (prueba) ===== */
.specialties-carousel-section {
    padding: var(--spacing-xl) var(--container-padding-desktop);
    background: var(--color-light);
}

.specialties-carousel {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

.specialties-carousel__track-wrapper {
    overflow: hidden;
    flex: 1;
}

.specialties-carousel__track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform 0.4s ease;
}

.specialty-carousel-card {
    min-width: 300px;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    overflow: hidden;
    flex-shrink: 0;
    transition: var(--transition);
}

.specialty-carousel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.specialty-carousel-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.specialty-carousel-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.specialty-carousel-card__content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.specialty-carousel-card__content h3 {
    color: var(--color-primary);
    font-size: 1.2rem;
}

.specialty-carousel-card__content p {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.specialty-carousel-card__content .btn--cta {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    background-color: var(--color-secondary-strong);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    align-self: flex-start;
}

.specialty-carousel-card__content .btn--cta:hover {
    background-color: var(--color-primary-stronger);
}

.carousel-arrow {
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
    font-size: 1rem;
}

.carousel-arrow:hover {
    background: var(--color-primary-stronger);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .specialties-carousel-section {
        padding: var(--spacing-lg) var(--container-padding-mobile);
    }

    .specialty-carousel-card {
        min-width: 260px;
    }
}

/* ===== Carrusel Servicios Destacados ===== */
.featured-carousel {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.featured-carousel__wrapper {
    overflow: hidden;
    flex: 1;
}

.featured-carousel__track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform 0.4s ease;
}

.featured-carousel__track .service-card {
    min-width: calc(33.333% - var(--spacing-lg));
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .featured-carousel__track .service-card {
        min-width: calc(50% - var(--spacing-lg));
    }
}

@media (max-width: 640px) {
    .featured-carousel__track .service-card {
        min-width: 85%;
    }
}

/* ===== Botón flotante WhatsApp ===== */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    background-color: #128c7e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.whatsapp-float i {
    color: white;
    font-size: 2rem;
    line-height: 1;
}

/* ===== Sección Google Maps ===== */
.map-section {
    padding: var(--spacing-xl) 0 0;
    background: var(--color-white);
}

.map-section__title {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-lg);
    padding: 0 var(--spacing-lg);
}

.map-section__iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* ===== Sección FAQ (home) ===== */
.home-faq {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--color-background);
}

.home-faq__title {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-xl);
}

.home-faq__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.home-faq__item {
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    overflow: hidden;
}

.home-faq__question {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-dark);
    gap: var(--spacing-md);
}

.home-faq__question i {
    color: var(--color-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.home-faq__item.open .home-faq__question i {
    transform: rotate(180deg);
}

.home-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 var(--spacing-lg);
    color: var(--color-text);
    line-height: 1.7;
    font-size: 0.95rem;
}

.home-faq__item.open .home-faq__answer {
    max-height: 300px;
    padding: 0 var(--spacing-lg) var(--spacing-md);
}

/* ===== Página Contacto ===== */
.contact-page {
    padding: 60px var(--spacing-lg) 80px;
    max-width: 1100px;
    margin: 0 auto;
}

.contact-page__title {
    text-align: center;
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: var(--spacing-xl);
}

.contact-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.contact-info-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.contact-info-card h2 {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: var(--spacing-lg);
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.contact-info-item i {
    color: var(--color-primary);
    font-size: 1.4rem;
    width: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-info-item p, .contact-info-item a {
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.5;
    font-size: 0.95rem;
}

.contact-info-item a:hover {
    color: var(--color-primary);
}

.contact-hours table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--color-text);
}

.contact-hours td {
    padding: 6px 0;
}

.contact-hours td:last-child {
    text-align: right;
    color: var(--color-primary);
    font-weight: 500;
}

.contact-map {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.contact-map iframe {
    width: 100%;
    height: 460px;
    border: none;
    display: block;
}

.contact-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    margin-top: var(--spacing-xl);
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(37,211,102,0.35);
}

.contact-wa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,211,102,0.45);
}

@media (max-width: 768px) {
    .contact-page__grid {
        grid-template-columns: 1fr;
    }

    .contact-map iframe {
        height: 280px;
    }

    /* 48px de padding por lado dejaban 194px de texto en un telefono
       de 402px, menos de lo que mide el correo en una linea */
    .contact-page {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .contact-info-card {
        padding: var(--spacing-lg);
    }
}

/* Ninguna direccion larga puede empujar el ancho de la tarjeta */
.contact-info-item p,
.contact-info-item a {
    overflow-wrap: anywhere;
}

/* ===== Página 404 ===== */
.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.not-found__code {
    font-size: 8rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.not-found__title {
    font-size: 1.8rem;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

.not-found__text {
    color: var(--color-text);
    max-width: 480px;
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
}

@media (max-width: 480px) {
    .not-found__code { font-size: 5rem; }
    .not-found__title { font-size: 1.4rem; }
}

/* ===== Botón volver arriba ===== */
.scroll-top {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 46px;
    height: 46px;
    /* Neutro a proposito: es una utilidad, no un CTA. En teal competia
       visualmente con el flotante de WhatsApp, justo encima. */
    background-color: var(--color-white);
    color: var(--color-primary-stronger);
    border: 1px solid var(--color-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    z-index: 9998;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover {
    background-color: var(--color-light);
    border-color: var(--color-text-dark);
    transform: translateY(-2px);
}

/* ===== Animaciones al scroll ===== */
.animate-hidden {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Escalonar tarjetas en grid */
.specialties__grid .specialty-box:nth-child(2)  { transition-delay: 0.08s; }
.specialties__grid .specialty-box:nth-child(3)  { transition-delay: 0.16s; }
.specialties__grid .specialty-box:nth-child(4)  { transition-delay: 0.08s; }
.specialties__grid .specialty-box:nth-child(5)  { transition-delay: 0.16s; }
.specialties__grid .specialty-box:nth-child(6)  { transition-delay: 0.24s; }

.featured-services__grid .service-card:nth-child(2) { transition-delay: 0.1s; }
.featured-services__grid .service-card:nth-child(3) { transition-delay: 0.2s; }

.values-container .value-card:nth-child(2) { transition-delay: 0.1s; }
.values-container .value-card:nth-child(3) { transition-delay: 0.2s; }

.reasons-container .reason-card:nth-child(2) { transition-delay: 0.08s; }
.reasons-container .reason-card:nth-child(3) { transition-delay: 0.16s; }
.reasons-container .reason-card:nth-child(4) { transition-delay: 0.08s; }
.reasons-container .reason-card:nth-child(5) { transition-delay: 0.16s; }
.reasons-container .reason-card:nth-child(6) { transition-delay: 0.24s; }

.stats-container .stat-item:nth-child(2) { transition-delay: 0.1s; }
.stats-container .stat-item:nth-child(3) { transition-delay: 0.2s; }
.stats-container .stat-item:nth-child(4) { transition-delay: 0.3s; }

/* Respetar preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .animate-hidden {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Before/After Slider ===== */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.ba-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ba-caption {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 0.95rem;
}

.ba-slider {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    cursor: col-resize;
    user-select: none;
    touch-action: pan-y;
}

.ba-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

.ba-img--after {
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0.05s linear;
}

.ba-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

.ba-handle__line {
    flex: 1;
    width: 2px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

.ba-handle__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    color: var(--color-primary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ba-label {
    position: absolute;
    top: 14px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    pointer-events: none;
    z-index: 5;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ba-label--l {
    left: 14px;
    background: rgba(0,0,0,0.45);
}

.ba-label--r {
    right: 14px;
    background: rgba(9,161,173,0.85);
}

@media (max-width: 768px) {
    .ba-grid {
        grid-template-columns: 1fr;
    }

    .ba-slider {
        height: 260px;
    }
}

/* =========================================================================
   ACCESIBILIDAD
   ========================================================================= */

/* --- Texto solo para lectores de pantalla --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Salto al contenido: visible solo al recibir foco --- */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 2000;
    padding: 12px 24px;
    background-color: var(--color-primary-stronger);
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* main recibe el foco tras el salto, sin dibujar un anillo alrededor
   de toda la pagina */
.main-content:focus {
    outline: none;
}

/* --- Indicador de foco visible y consistente --- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-primary-stronger);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Sobre fondos de marca oscuros el anillo teal se pierde: se invierte */
.footer a:focus-visible,
.page-header a:focus-visible,
.navbar .btn--cta:focus-visible,
.btn--cta:focus-visible,
.btn--map:focus-visible,
.whatsapp-float:focus-visible,
.scroll-top:focus-visible {
    outline-color: var(--color-white);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--color-primary-stronger);
}

/* --- Desplegable de Especialidades accesible por teclado ---
   Antes solo abria con :hover y su contenido estaba en display:none,
   por lo que los 10 enlaces no eran enfocables (WCAG 2.1.1). */
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* --- Area tactil del boton de menu ---
   El icono sigue midiendo 24x20, pero la zona pulsable pasa a 48x44
   (WCAG 2.5.8 pide 24x24 como minimo; 44x44 es lo recomendado).
   NO poner position aqui: el boton ya es absolute dentro del media query
   de 768px, y declararlo relative aca lo pisaba (esta regla va despues en
   el archivo), rompiendo el centrado vertical en movil. */
.navbar__toggle::before {
    content: "";
    position: absolute;
    inset: -12px;
}



/* =========================================================================
   BANNER DE ESPECIALIDAD  (componente unico)

   Reemplaza a 10 clases casi identicas (.cirugia-banner, .endodoncia-banner,
   .implantologia-banner, etc.) que sumaban ~480 lineas. Si hay que cambiar
   el diseno del banner, ahora se cambia aca y no en diez lugares.
   ========================================================================= */

.spec-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Alto atado al ancho, no a vh: evita el problema de 100vh en Safari iOS
       y escala de forma continua en vez de saltar en un breakpoint. */
    height: clamp(300px, 38vw, 500px);
    overflow: hidden;
    text-align: center;
    /* Se ve cuando la especialidad no tiene foto (hoy solo Periodoncia) */
    background: linear-gradient(135deg,
                var(--color-primary-stronger) 0%,
                var(--color-primary) 60%,
                #0bbfcc 100%);
}

.spec-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ajuste de encuadre por foto. El banner recorta al ~56% del alto en
   escritorio, asi que segun donde este el motivo hay que correr el recorte
   para que el titulo no le caiga encima. */
.spec-hero__img--arriba { object-position: center 30%; }
.spec-hero__img--abajo  { object-position: center 70%; }

/* Velo oscuro: garantiza que el titulo blanco se lea sobre cualquier foto.
   Sin el, tres banners fallaban contraste (Implantologia daba 1.68:1 y el
   minimo para texto grande es 3:1). */
.spec-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.30) 0%,
                rgba(0, 0, 0, 0.58) 100%);
}

/* Sin foto el degradado de marca ya contrasta: basta un velo leve */
.spec-hero--marca::after {
    background: rgba(0, 0, 0, 0.18);
}

.spec-hero__content {
    position: relative;
    z-index: 2;
    max-width: min(90%, 900px);
    padding: 0 var(--spacing-md);
}

.spec-hero__title {
    color: var(--color-white);
    /* clamp en vez de media queries: escala parejo en todo el rango.
       El titulo mas largo (ODONTOPEDIATRIA) se salia del banner en movil. */
    /* A 320px "ODONTOPEDIATRIA" medía 273px de texto en una caja de 197px y el
       overflow:hidden del banner le cortaba 76px. La recta se recalculó para
       dar ~20px a 320 y los mismos 54,4px de siempre a partir de 1440. */
    font-size: clamp(1.25rem, 0.64rem + 3.07vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-xs);
    text-wrap: balance;
    /* red de seguridad: ningún nombre de especialidad puede volver a cortarse */
    hyphens: auto;
    overflow-wrap: break-word;
}

.spec-hero__subtitle {
    color: var(--color-white);
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.3rem);
    line-height: 1.35;
    max-width: 44ch;
    margin: 0 auto;
}


/* Imagen explicativa dentro de una pagina de especialidad */
.specialty-figura {
    margin: var(--spacing-lg) 0;
}

.specialty-figura img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    display: block;
}

.specialty-figura figcaption {
    margin-top: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--color-text);
    text-align: center;
    font-style: italic;
}


/* =========================================================================
   ARREGLOS DE MOVIL
   Van al final a proposito: esta hoja tiene 32 bloques @media de 768px
   repartidos, y una regla puesta antes queda pisada por la original.
   ========================================================================= */

@media (max-width: 768px) {
    /* El contenedor del FAQ heredaba el padding de escritorio (120px por
       lado). En un iPhone de 402px dejaba ~114px utiles y las preguntas se
       partian en columnas de dos palabras. */
    .faq__container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* .specialty-card se declara dos veces (tarjetas de especialidades y galeria);
   la segunda pisaba el padding movil. Se reinstala aqui para que gane. */
@media (max-width: 768px) {
    .specialty-card {
        padding: var(--spacing-md);
        min-width: 0;
    }
}

/* .gallery-header y .treatment-info eran las dos unicas secciones que
   conservaban los 120px de padding de escritorio en telefono */
@media (max-width: 768px) {
    .gallery-header,
    .treatment-info {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }
}

@media (max-width: 380px) {
    .contact-info-card {
        padding: var(--spacing-md);
    }
}


/* =========================================================================
   ÁREAS TÁCTILES
   WCAG 2.5.8 (nivel AA) exige 24x24 px CSS; Apple y Google recomiendan 44x44.
   Medido con elementFromPoint —no con el tamaño de la caja— sobre 15
   dispositivos táctiles de 320 a 1024px de ancho.
   ========================================================================= */

/* Enlaces de la navbar: 20px de alto entre 810 y 1024px, o sea en tablets.
   Se agranda el área con un pseudo-elemento en vez de padding para no mover
   el subrayado deslizante, que está anclado al borde inferior del enlace. */
.nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

/* Botón "Agenda tu hora": quedaba en 26px de alto y 11px de letra */
.navbar .btn--cta {
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

@media (max-width: 368px) {
    .navbar .btn--cta {
        /* el clamp bajaba a 11px, por debajo de lo legible */
        font-size: clamp(12px, 3vw, 13px);
        /* el scale reducía el botón por debajo del mínimo táctil */
        transform: none;
    }
}

/* Datos de contacto del pie: 24px de alto */
.footer__contact-list a,
.footer__hours-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Iconos de redes: 21x36. El gap baja para compensar el ancho nuevo y que
   la separación visual entre iconos siga siendo la de antes. */
.footer__social {
    gap: 4px;
}

.social-link,
.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Teléfonos y correo de la página de Contacto: 21px de alto */
.contact-info-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Puntos del carrusel: 10x10. El punto sigue viéndose de 10px, lo que crece
   es el área de toque alrededor. 28px de ancho y no 44 porque la fila entera
   (2 flechas + 5 puntos + separaciones) tiene que caber en los 184px que hay
   a 320px de viewport; si no cabe, el contenedor recorta la flecha izquierda. */
.carousel__nav {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.carousel__indicators {
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.carousel__indicator {
    width: 28px;
    height: 44px;
    padding: 0;
    background: none;
    border-radius: 0;
    display: grid;
    place-items: center;
}

.carousel__indicator::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s ease;
}

.carousel__indicator.current-slide {
    background: none;
}

.carousel__indicator.current-slide::after {
    background: var(--color-primary);
}

/* Flechas del carrusel: 35x40 */
.carousel__button {
    min-width: 44px;
    min-height: 44px;
}

/* "Volver" de las galerías: 78x23 */
.gallery-back-link,
.gallery-back {
    min-height: 44px;
}

/* Botón de las tarjetas de especialidad: 37px de alto */
.specialty-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* Cajas de especialidad de la portada: solo la línea de texto era pulsable */
.specialty-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}


/* La columna de botones flotantes ocupa los 142px inferiores del viewport por
   la derecha (WhatsApp de 28 a 88, "subir" de 96 a 142). Al llegar al final del
   documento tapaban el enlace "Política de privacidad". Se reserva ese espacio.
   En teléfono el texto va centrado a todo el ancho, así que hace falta librar
   la columna entera; de 561px para arriba basta con librar el de WhatsApp. */
@media (max-width: 768px) {
    .footer__bottom {
        padding-bottom: 152px;
    }
}

/* Bajo 390px la fila del carrusel no cabe en una linea y las flechas
   quedaban apiladas una sobre otra. Los puntos pasan a su propia fila y
   las dos flechas quedan juntas debajo. */
@media (max-width: 389px) {
    .carousel__indicators {
        order: -1;
        flex: 1 0 100%;
    }
}

/* --- Desplegable en movil: solo lo abre el toque (clase .active) ---
   En el celular el :hover queda pegado y el :focus-within sigue activo tras
   el toque, asi que el submenu no se podia cerrar. Va al final para pisar
   las reglas de escritorio. */
@media (max-width: 768px) {
    .dropdown:not(.active) .dropdown-content {
        display: none;
    }
}