/* ==========================================================================
   BROCA UNIDAD NEUROLÓGICA — HOJA DE ESTILOS UNIFICADA
   Auditoría y refactor: colores, tipografía y estructura consolidados.
   Índice:
     1. Variables y reseteo global
     2. Header y navegación
     3. Responsive del header (móvil)
     4. Sección Hero
     5. Sección Beneficios
     6. Sección Historia de marca ("¿Por qué Broca?")
     7. Sección informativa (el cerebro)
     8. Carrusel de la sede
     9. Acordeón de motivos de consulta
    10. Equipo médico
    11. Banner de cierre / CTA
    12. Ubicación y mapas (usado en index.html)
    13. Enlaces de interés (aliados institucionales)
    14. Footer
    15. Botón flotante de WhatsApp
    16. Página de Políticas (acordeón legal)
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================================================== */
:root {
    /* Paleta de verdes unificada. Antes el sitio mezclaba #4B5945, #1e5631,
       #3E8A5E y #2f6947 sueltos por todo el CSS: ahora todo sale de aquí. */
    --verde-principal: #1e5631;   /* Verde institucional (marca, títulos, botones sólidos) */
    --verde-acento: #3E8A5E;      /* Verde de apoyo (iconos, detalles, hover claro) */
    --verde-hover: #2f6947;       /* Hover intermedio para elementos con --verde-acento */
    --verde-oscuro: #153e22;      /* Hover/estado activo para elementos con --verde-principal */
    --verde-suave: #E7EFE9;       /* Fondo suave para etiquetas/badges */

    /* SEGUNDA RONDA DE AUDITORÍA: estos diez colores estaban escritos a mano
       por todo el archivo, fuera del sistema. Lo llamativo es que el verde de
       los botones (--verde-cta) NO era el verde institucional: había dos
       verdes de marca conviviendo sin que ninguno estuviera declarado. Se
       suben aquí para que exista una sola fuente de verdad. */
    --verde-cta: #063e1a;         /* Fondo de los tres botones de conversión */
    --verde-cta-hover: #0a5c28;   /* Hover de esos botones (ver nota de contraste) */
    --verde-whatsapp: #25d366;    /* Verde de marca de WhatsApp (botón flotante) */
    --verde-whatsapp-hover: #20ba5a;

    --gris-oscuro: #555555;       /* Texto de párrafos y subtítulos */
    --gris-texto: #4a4a4a;        /* Texto de cuerpo secundario */
    --gris-claro: #F4F4F4;        /* Fondo secundario */
    --gris-medio: #666666;        /* Texto secundario menor (mínimo legible) */
    --gris-titulo: #333333;       /* Texto de párrafos con más peso */
    --gris-azulado: #4a5568;      /* Texto sobre fondos claros en Políticas */
    --blanco: #FFFFFF;

    --borde-suave: #DEE3DE;       /* Borde de tarjetas */
    --fondo-crema: #fafafa;       /* Fondo de la sección de cierre */
    --fondo-verde-claro: #f9fbf9; /* Fondo de la sección del cerebro */
    --fondo-gris-claro: #fcfcfc;  /* Fondo del bloque de ubicación */

    --fuente-titulos: 'Playfair Display', serif;
    --fuente-cuerpo: 'Montserrat', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    /* El header es "sticky" (siempre visible arriba). Sin esto, al hacer
       clic en un enlace ancla (#historia, #equipo, #motivos-consulta...)
       el navegador salta justo al borde superior de la sección y el
       header fijo tapa el título. scroll-padding-top reserva ese espacio
       para que el salto se detenga por debajo del menú. */
    scroll-padding-top: 90px;
}

body {
    font-family: var(--fuente-cuerpo);
    color: var(--gris-oscuro);
    background-color: var(--blanco);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    color: var(--verde-principal);
    font-weight: 700;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Foco visible para accesibilidad y SEO técnico (navegación por teclado) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--verde-acento);
    outline-offset: 2px;
}

/* ==========================================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   El sitio tenía scroll suave global, un pulso infinito en el botón flotante,
   transformaciones en el hover de cada tarjeta y un carrusel que avanzaba
   solo. Nada de eso consultaba la preferencia del sistema operativo.
   Para un paciente con migraña vestibular o vértigo —dos de los motivos de
   consulta que el propio sitio lista— ese movimiento puede disparar
   síntomas. Con esta regla, quien active "reducir movimiento" en su
   dispositivo ve exactamente el mismo diseño, pero quieto.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   2. HEADER Y NAVEGACIÓN
   ========================================================================== */
.main-header {
    background-color: var(--blanco);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 76px;
    box-sizing: border-box;
    /* position: relative permite que el logo se centre de forma absoluta,
       de manera totalmente independiente del texto de marca y del menú */
    position: relative;
}

.brand-block {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.brand-text {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.brand-title {
    display: block;
    font-family: var(--fuente-titulos);
    color: var(--verde-principal);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 1px;
}

.brand-subtitle {
    display: block;
    font-family: var(--fuente-cuerpo);
    color: var(--gris-oscuro);
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.2;
    margin-top: 3px;
}

/* ------------------------------------------------------------------------
   LOGO: siempre centrado horizontal y verticalmente dentro del header,
   sin importar el ancho del texto de marca ni el menú. Al ser un elemento
   independiente y posicionado de forma absoluta respecto al header, se
   mantiene centrado de forma responsive en cualquier tamaño de pantalla.
   ------------------------------------------------------------------------ */
.brand-logo-link {
    /* En escritorio/tablet el logo va en el flujo normal, antes del texto
       de marca, para que nunca se superponga con el menú de navegación
       (antes estaba centrado de forma absoluta sobre todo el header, lo
       que provocaba choques con el <nav> en anchos intermedios). */
    order: -1;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.brand-logo {
    display: inline-block;
    line-height: 0;
}

.brand-logo img {
    height: 52px;
    width: auto;
    object-fit: contain;
    display: block;
}

.main-nav {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-left: auto;
}

/* El botón hamburguesa solo existe para móvil: se oculta por defecto en
   escritorio/tablet. Antes no tenía "display:none" aquí, por lo que el
   ícono se veía flotando sobre el logo y el menú en pantallas grandes.

   Pasó de <label> a <button> para que se pueda accionar con teclado; hay
   que neutralizar los estilos que el navegador aplica por defecto a los
   botones (fondo gris, borde y tipografía propia). */
.menu-toggle-btn {
    display: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.nav-list {
    display: inline-block;
    list-style: none;
}

.nav-list li {
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
}

.nav-link {
    text-decoration: none;
    color: var(--gris-oscuro);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--verde-principal);
}

/* Se eliminaron las reglas de ".btn-contact": esa clase ya no existe en
   ningún HTML del sitio. El comentario que las acompañaba decía además que
   "el HTML usa la clase btn-contact en las 3 páginas", cuando el sitio hoy
   tiene dos páginas y ninguna la usa. Un comentario desactualizado confunde
   más que la ausencia de comentario. */

/* ==========================================================================
   3.b AJUSTE PARA TABLETS (entre escritorio y el menú hamburguesa)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 991px) {
    .nav-list li {
        margin-left: 16px;
    }

    .nav-link {
        font-size: 0.85rem;
    }

    .brand-logo img {
        height: 44px;
    }
}

/* ==========================================================================
   3. RESPONSIVE DEL HEADER (MÓVIL: MENÚ TIPO PANEL LATERAL)
   ========================================================================== */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 75px;
    }

    /* El panel del menú vive DENTRO del header, y .main-header es un
       elemento posicionado con z-index: 1000, o sea que abre su propio
       contexto de apilamiento. Eso significa que el z-index: 100000 del
       panel no compite contra el resto de la página, sino solo contra sus
       hermanos dentro del header: hacia afuera, todo el header vale 1000.
       Con el velo del menú (z-index 99999) colgando del <body>, el velo
       quedaba por encima del header entero y teñía también el panel.
       Subir aquí el header por encima del velo lo resuelve sin tocar los
       z-index internos, que conservan su orden relativo. */
    .main-header {
        z-index: 100000;
    }

    .header-container {
        min-height: 64px;
        padding: 10px 20px;
    }

    .brand-title {
        font-size: 1.6rem;
    }

    .brand-subtitle {
        font-size: 0.70rem;
    }

    .brand-logo img {
        height: 42px;
    }

    /* En móvil el logo vuelve a centrarse de forma absoluta e independiente
       del texto de marca y del botón hamburguesa. z-index más alto que el
       panel del menú (100000) y el botón (100001) para que nunca quede
       oculto, ni siquiera con el menú abierto. */
    .brand-logo-link {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        order: 0;
        margin-right: 0;
        z-index: 100002;
    }

    .menu-toggle-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* 44x44 es el objetivo táctil mínimo recomendado. Antes el área
           activa medía 30x21: en un sitio cuyo público incluye personas con
           temblor esencial o Parkinson, ese blanco era difícil de acertar.
           Las tres barras siguen midiendo lo mismo; lo que crece es la zona
           pulsable alrededor, gracias al padding.

           La geometría interior queda fija en 26x20 (44 menos el padding):
           tres barras de 3px con dos huecos de 5,5px, así que el centro de
           la barra superior está a 8,5px del centro del botón. Ese número es
           el que usan las transformaciones de la X más abajo. */
        width: 44px;
        height: 44px;
        padding: 12px 9px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 14px;
        z-index: 100001;
    }

    .menu-toggle-btn .bar {
        display: block;
        height: 3px;
        width: 100%;
        background-color: var(--verde-principal);
        border-radius: 3px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 260px;
        height: 100vh;
        background-color: var(--blanco);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        display: block !important;
        padding: 100px 30px;
        box-sizing: border-box;
        transition: right 0.4s ease-in-out;
        z-index: 100000;
    }

    .nav-list {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        width: 100%;
    }

    .nav-list li {
        display: block;
        margin-left: 0;
        width: 100%;
    }

    .nav-link {
        font-size: 1.2rem;
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    /* La apertura del panel la controla ahora la clase .abierto, que pone y
       quita main.js al pulsar el botón. Antes dependía del selector
       ":checked" de un checkbox oculto, que era justamente lo que hacía el
       menú inaccesible por teclado. */
    .main-nav.abierto {
        right: 0;
    }

    /* Aspa de cierre. Los valores anteriores (rotate + translate encadenados)
       venían calibrados para el botón de 30x21 del diseño viejo y, con la
       caja nueva, las dos barras se cruzaban descentradas: el icono se veía
       como un ">" en lugar de una X. Ahora se desplaza primero cada barra
       hasta el centro (8,5px, la mitad de la separación entre la primera y
       la tercera) y después se gira: el cruce cae siempre en el centro
       exacto, sin depender del tamaño del botón. */
    .menu-toggle-btn[aria-expanded="true"] .bar:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .menu-toggle-btn[aria-expanded="true"] .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle-btn[aria-expanded="true"] .bar:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* Capa que oscurece el contenido con el menú abierto: da contexto de que
       el panel es modal y ofrece una zona clara donde pulsar para cerrarlo. */
    .velo-menu {
        position: fixed;
        inset: 0;
        background: rgba(13, 35, 20, 0.45);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .velo-menu.visible {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 380px) {
    .brand-title {
        font-size: 1.35rem;
    }

    .brand-subtitle {
        font-size: 0.62rem;
    }

    .brand-logo img {
        height: 34px;
    }
}

/* ==========================================================================
   4. SECCIÓN HERO
   ========================================================================== */
.hero-section {
    background-color: var(--blanco);
    padding-bottom: 50px;
    width: 100%;
}

.hero-main-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.hero-banner-image {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 20px;
}

.hero-banner-image img {
    width: 100%;
    max-width: 1160px;
    height: auto;
    /* Reserva el espacio real de la imagen (1376x768) antes de que termine
       de cargar, evitando el "salto"/corte visual mientras se descarga */
    aspect-ratio: 1376 / 768;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    object-fit: cover;
}

.contenedor-caja-titulo {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

.caja-titulo-broca {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--blanco);
    border: 1px solid #DEE3DE;
    border-radius: 16px;
    padding: 28px 40px;
    margin: 30px 0;
    box-shadow: 0 6px 20px rgba(30, 86, 49, 0.08);
    text-align: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.caja-titulo-broca:hover {
    box-shadow: 0 10px 26px rgba(30, 86, 49, 0.14);
    transform: translateY(-3px);
}

.etiqueta-caja {
    display: inline-block;
    background: var(--verde-suave);
    color: var(--verde-principal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.titulo-caja {
    color: var(--verde-principal);
    font-size: clamp(1.4rem, 3vw, 2rem);
    /* Era 800, pero de Playfair Display solo se descargan los pesos 400 y
       700: el navegador tenía que sintetizar una negrita falsa engordando
       los trazos. El titular principal del sitio se estaba pintando con una
       deformación de la tipografía en lugar de con la tipografía. */
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.linea-acento {
    display: block;
    width: 60px;
    height: 4px;
    background: var(--verde-acento);
    border-radius: 4px;
    margin-top: 16px;
}

.tarjeta-medica-central {
    background: var(--blanco);
    padding: 32px 24px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    border-top: 4px solid var(--verde-principal);
    text-align: center;
    max-width: 640px;
    margin: 25px auto;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tarjeta-medica-central:hover {
    box-shadow: 0 12px 28px rgba(30, 86, 49, 0.15);
    transform: translateY(-4px);
}

.titulo-seo {
    color: var(--verde-principal);
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.texto-seo {
    color: var(--gris-texto);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.cta-seo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--verde-cta);
    color: var(--blanco);
    text-decoration: none;
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(6, 62, 26, 0.25);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* CORRECCIÓN DE CONTRASTE: el hover pasaba a #1ebd58, un verde neón sobre
   el que el texto blanco quedaba en 2.48:1 — muy por debajo del mínimo de
   4.5:1. Era además al revés de como debe comportarse un estado de
   interacción: el botón se volvía ilegible justo en el momento del clic, y
   el salto del verde institucional al neón rompía la identidad de marca.
   Ahora oscurece en lugar de aclarar: 8.16:1. */
.cta-seo:hover,
.cta-seo:focus-visible {
    background-color: var(--verde-cta-hover);
    box-shadow: 0 6px 20px rgba(6, 62, 26, 0.35);
    transform: translateY(-2px);
}

/* ==========================================================================
   GRUPO DE BOTÓN DE CONTACTO (WhatsApp / Agendar cita), siempre centrado
   ========================================================================== */
.grupo-cta-contacto {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Texto claro de contacto directo (teléfono/WhatsApp) que acompaña al
   botón. Pensado para adultos mayores: tamaño grande, alto contraste,
   centrado y con el número siempre visible. */
.texto-contacto-directo {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--verde-cta);
    margin: 0 0 16px;
    line-height: 1.5;
}

.texto-contacto-directo strong {
    /* 800 no existe entre los pesos descargados de Montserrat (400/600/700):
       el navegador lo sintetizaba. 700 es el peso real más cercano. */
    font-weight: 700;
    white-space: nowrap;
}

/* Evita que iOS/Safari (WebKit) pinte de azul el número de teléfono.
   color/text-decoration heredan el verde ya definido en
   .texto-contacto-directo (#063e1a); no se introduce ningún color nuevo.
   -webkit-text-fill-color es necesario porque WebKit puede ignorar
   "color" en enlaces tel: si no se declara explícitamente. */
.enlace-telefono {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
}

@media (max-width: 480px) {
    .texto-contacto-directo {
        font-size: 16px;
    }

    .grupo-cta-contacto {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-banner-image {
        padding: 5px 10px;
    }
}

@media (max-width: 480px) {
    .caja-titulo-broca {
        padding: 22px 24px;
        width: 100%;
        margin: 15px 0;
    }

    .tarjeta-medica-central {
        padding: 24px 18px;
        margin: 15px auto;
        width: calc(100% - 40px);
    }

    .titulo-seo {
        font-size: 18px;
    }

    .texto-seo {
        font-size: 14px;
    }

    .cta-seo {
        width: 100%;
    }
}

/* ==========================================================================
   5. SECCIÓN BENEFICIOS
   ========================================================================== */
.beneficios-broca {
    max-width: 1140px;
    margin: 0 auto;
    padding: 60px 24px;
}

.beneficios-contenedor {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.beneficio-card {
    flex: 1 1 300px;
    max-width: 340px;
    background: var(--blanco);
    border: 1px solid #DEE3DE;
    border-radius: 16px;
    padding: 32px 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.beneficio-card:hover {
    transform: translateY(-6px);
    border-color: var(--verde-principal);
    box-shadow: 0 12px 24px rgba(30, 91, 60, 0.15);
}

.beneficio-icono {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--verde-acento);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    flex-shrink: 0;
}

.beneficio-icono svg {
    width: 20px;
    height: 20px;
}

.beneficio-titulo {
    color: var(--verde-principal);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}

.beneficio-texto {
    color: var(--gris-texto);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 720px) {
    .beneficios-broca {
        /* Reducimos el padding superior a 0 para eliminar el espacio muerto */
        padding: 0px 20px 20px 20px !important; 
    }

    .beneficios-contenedor {
        /* Reducimos el espacio entre las tarjetas */
        gap: 15px !important; 
    }

    .beneficio-card {
        max-width: 100%;
        flex: 1 1 100%;
        /* Reducimos el padding interno para que la tarjeta sea más compacta */
        padding: 20px 20px !important;
    }
}

/* ==========================================================================
   6. SECCIÓN HISTORIA DE MARCA ("¿POR QUÉ BROCA?")
   ========================================================================== */
.seccion-historia-broca {
    width: 100%;
    padding: 60px 24px;
    background-color: var(--blanco);
    box-sizing: border-box;
    text-align: center;
}

.contenedor-historia-broca {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.contenido-historia-texto {
    width: 100%;
    max-width: 650px;
    text-align: center;
}

.titulo-historia {
    color: var(--verde-principal);
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.parrafo-historia {
    color: #333333;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.65;
    margin-bottom: 18px;
    text-align: justify; /* Esto justifica el texto */
    text-align-last: left; /* Opcional: evita que la última línea quede muy extendida si es corta */
}

.contenido-historia-visual {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contenedor-imagen-ilustracion {
    width: 100%;
    max-width: 580px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
}

.imagen-ilustracion-medica {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .contenedor-historia-broca {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .seccion-historia-broca {
        padding: 10px 16px;
    }
}

/* ==========================================================================
   7. SECCIÓN INFORMATIVA (EL CEREBRO)
   ========================================================================== */
.info-cerebro-section {
    background-color: #f9fbf9;
    padding: 80px 24px;
    width: 100%;
}

.cerebro-contenedor {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.cerebro-bloque-izq {
    flex: 1;
    display: flex;
    justify-content: center;
}

.cerebro-bloque-izq img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.cerebro-bloque-der {
    flex: 1.2;
    width: 100%;
}

.caja-info-cerebro {
    background: var(--blanco);
    border: 1px solid #DEE3DE;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(30, 91, 60, 0.06);
    padding: 40px;
    box-sizing: border-box;
}

.cerebro-subtitulo {
    /* Era --verde-acento (#3E8A5E): el texto blanco quedaba en 4.2:1. Como
       este título arranca en 17,6px con peso 600, no llega al umbral de
       "texto grande" y necesita 4.5:1. Con --verde-hover sube a 6.5:1 y el
       tono sigue dentro de la misma familia de verdes.
       El acento se mantiene en los iconos y las flechas del carrusel, donde
       4.2:1 sí cumple: los elementos no textuales solo exigen 3:1. */
    background: var(--verde-hover);
    color: var(--blanco);
    font-family: var(--fuente-titulos);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 600;
    text-align: center;
    padding: 14px 20px;
    border-radius: 12px;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.45;
}

/* Se eliminó ".cerebro-contenido-lista": no existe en ningún HTML. */

.cerebro-pregunta {
    font-family: var(--fuente-cuerpo);
    color: var(--verde-principal);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.cerebro-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.cerebro-lista li {
    font-family: var(--fuente-cuerpo);
    color: var(--gris-texto);
    font-size: 0.98rem;
    line-height: 1.6;
    position: relative;
}

.cerebro-lista li::before {
    content: "—";
    color: var(--verde-acento);
    font-weight: bold;
    margin-right: 8px;
}

@media (max-width: 900px) {
    .info-cerebro-section {
        padding: 50px 20px;
    }

    .cerebro-contenedor {
        flex-direction: column;
        gap: 35px;
    }

    .caja-info-cerebro {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   8. CARRUSEL DE LA SEDE
   ========================================================================== */
.sede-galeria-section {
    padding: 60px 24px;
    background-color: var(--blanco);
    width: 100%;
    box-sizing: border-box;
}

.titulo-galeria {
    text-align: center;
    color: var(--verde-principal);
    font-family: var(--fuente-titulos);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 40px;
}

.carrusel-contenedor-global {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.carrusel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding: 10px 5px;
}

.carrusel-track::-webkit-scrollbar {
    display: none;
}

.carrusel-track {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carrusel-item {
    flex: 0 0 calc(33.333% - 14px);
    scroll-snap-align: start;
    box-sizing: border-box;
}

.carrusel-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #DEE3DE;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: block;
}

.flecha-carrusel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--verde-acento);
    color: var(--blanco);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, transform 0.2s;
}

.flecha-carrusel:hover {
    background: var(--verde-hover);
    transform: translateY(-50%) scale(1.05);
}

.flecha-carrusel.prev {
    left: -22px;
}

.flecha-carrusel.next {
    right: -22px;
}

/* Fila de controles: puntos indicadores + botón de pausa, centrados juntos */
.carrusel-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.carrusel-indicadores {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Los puntos pasaron de <div> a <button> para poder accionarlos con
   teclado, así que hay que neutralizar el estilo por defecto del botón.
   El área pulsable se amplía con padding sin agrandar el punto visible. */
.punto-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* #DEE3DE daba 1.3:1 sobre blanco: el punto era prácticamente invisible
       y no cumplía el mínimo de 3:1 que exigen los elementos de interfaz. */
    background: #7f8f84;
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}

.punto-dot.active {
    background: var(--verde-principal);
    width: 24px;
    border-radius: 10px;
}

/* Aquí vivían los estilos del botón de pausa del carrusel, retirado a
   petición del cliente. Ver la nota en index.html sobre WCAG 2.2.2. */

@media (max-width: 900px) {
    .carrusel-item {
        flex: 0 0 calc(50% - 10px);
    }

    .flecha-carrusel.prev {
        left: -10px;
    }

    .flecha-carrusel.next {
        right: -10px;
    }
}

@media (max-width: 600px) {
    .carrusel-item {
        flex: 0 0 100%;
    }

    .carrusel-item img {
        height: 250px;
    }

    .flecha-carrusel {
        display: none;
    }
}

/* ==========================================================================
   9. ACORDEÓN DE MOTIVOS DE CONSULTA
   ========================================================================== */
.contenedor-acordeon-medico {
    max-width: 900px;
    margin: 30px auto;
    padding: 10px;
    font-family: inherit;
    box-sizing: border-box;
}

.titulo-principal-acordeon {
    color: var(--verde-principal);
    font-size: clamp(1.4rem, 2.5vw, 1.6rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.3;
}

.bloque-patologia {
    background: var(--blanco);
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.03);
    border: 1px solid #eef2f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.bloque-patologia[open] {
    border-left: 4px solid var(--verde-principal);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06);
}

.cabecera-patologia {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--verde-principal);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    list-style: none;
}

.cabecera-patologia::-webkit-details-marker {
    display: none;
}

.flecha {
    font-size: 11px;
    color: var(--verde-principal);
    transition: transform 0.3s ease;
}

.bloque-patologia[open] .flecha {
    transform: rotate(180deg);
}

.contenido-patologia {
    padding: 5px 20px 18px 20px;
    background: #fafafa;
}

.contenido-patologia ul {
    list-style: none;
}

.contenido-patologia ul li {
    padding: 10px 0;
    font-size: 14.5px;
    color: #333333;
    border-bottom: 1px solid #eef2f0;
    position: relative;
    padding-left: 20px;
}

.contenido-patologia ul li::before {
    content: "•";
    color: var(--verde-principal);
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 8px;
}

.contenido-patologia ul li:last-child {
    border-bottom: none;
}

@media (max-width: 600px) {
    .cabecera-patologia {
        font-size: 14px;
        padding: 14px 16px;
    }

    .contenido-patologia ul li {
        font-size: 13.5px;
        padding: 9px 0 9px 18px;
    }
}

/* El bloque "UBICACION WAZE MAPS" que estaba aquí se fundió con la
   sección 12; ver la nota completa allí. */

/* ==========================================================================
   10. EQUIPO MÉDICO
   ========================================================================== */
.seccion-equipo-broca {
    max-width: 1040px;
    margin: 40px auto;
    padding: 40px 20px;
    background-color: var(--blanco);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    text-align: center;
    box-sizing: border-box;
}

.titulo-equipo {
    color: var(--verde-principal);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin: 5px auto 10px;
    letter-spacing: -0.5px;
    text-align: center;
    width: 100%;
}

.subtitulo-equipo {
    color: #666666;
    font-size: 16px;
    margin: 0 auto 45px;
    max-width: 600px;
    line-height: 1.5;
    text-align: center;
}

.contenedor-tarjetas-medicas {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    flex-wrap: wrap;
    margin: 0 auto 40px;
}

.tarjeta-doctora {
    background: var(--blanco);
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 30px 24px;
    width: 310px;
    min-width: 280px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tarjeta-doctora:hover {
    transform: translateY(-6px);
    border-color: var(--verde-principal);
    box-shadow: 0 12px 24px rgba(30, 86, 49, 0.1);
}

.avatar-medico {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--verde-principal), var(--verde-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 6px 16px rgba(30, 86, 49, 0.25);
}

.inicial-avatar {
    color: var(--blanco);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.nombre-doctora {
    color: #222222;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin: 0 0 12px;
    line-height: 1.4;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.especialidad-doctora {
    color: var(--verde-principal);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    text-align: center;
}

.enfoque-doctora {
    color: #666666;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

.contenedor-cta-equipo {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.btn-cta-equipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--verde-cta);
    color: var(--blanco);
    text-decoration: none;
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(6, 62, 26, 0.25);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    text-align: center;
}

.icono-whatsapp {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Mismo arreglo de contraste que en .cta-seo */
.btn-cta-equipo:hover,
.btn-cta-equipo:focus-visible {
    background-color: var(--verde-cta-hover);
    box-shadow: 0 6px 20px rgba(6, 62, 26, 0.35);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .seccion-equipo-broca {
        margin: 20px auto;
        padding: 30px 15px;
    }

    .titulo-equipo {
        font-size: 24px;
    }

    .contenedor-tarjetas-medicas {
        flex-direction: column;
        align-items: center;
    }

    .tarjeta-doctora {
        width: 100%;
        max-width: 340px;
    }

    .btn-cta-equipo {
        width: 100%;
        max-width: 340px;
        box-sizing: border-box;
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ==========================================================================
   11. BANNER DE CIERRE / CTA
   ========================================================================== */
.seccion-cierre-broca {
    width: 100%;
    padding: 80px 24px;
    background-color: #fafafa;
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;
}

.contenedor-cierre-broca {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.contenido-cierre-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.marco-imagen-cierre {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.imagen-banner-final {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.contenido-cierre-texto {
    flex: 1;
    max-width: 520px;
}

.subtitulo-cierre {
    display: block;
    color: var(--verde-principal);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.titulo-cierre {
    color: var(--verde-principal);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.parrafo-cierre {
    color: #555555;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    line-height: 1.65;
    margin-bottom: 30px;
    text-align: justify;
    text-justify: inter-word;
}

.bloque-boton-final {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.btn-agendar-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--verde-cta);
    color: var(--blanco);
    text-decoration: none;
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(6, 62, 26, 0.25);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.flecha-btn {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

/* Mismo arreglo de contraste que en .cta-seo */
.btn-agendar-final:hover,
.btn-agendar-final:focus-visible {
    background-color: var(--verde-cta-hover);
    box-shadow: 0 6px 20px rgba(6, 62, 26, 0.35);
    transform: translateY(-2px);
}

.btn-agendar-final:hover .flecha-btn,
.btn-agendar-final:focus-visible .flecha-btn {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .seccion-cierre-broca {
        padding: 50px 20px;
    }

    .contenedor-cierre-broca {
        flex-direction: column-reverse;
        gap: 40px;
        text-align: center;
    }

    .contenido-cierre-texto {
        max-width: 100%;
    }

    .parrafo-cierre {
        text-align: center;
        margin-bottom: 35px;
    }

    .bloque-boton-final {
        justify-content: center;
    }

    .marco-imagen-cierre {
        max-width: 380px;
    }
}

@media (max-width: 480px) {
    .btn-agendar-final {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   12. UBICACIÓN Y MAPAS

   NOTA DE AUDITORÍA: esta sección estaba escrita DOS VECES en el archivo,
   con reglas que se contradecían. La primera versión (que vivía entre el
   acordeón y el equipo médico, bajo el comentario "UBICACION WAZE MAPS")
   declaraba flex-direction: row y max-width: 1100px; la segunda, column y
   800px. Ganaba la segunda por orden de cascada, de modo que unas 200
   líneas de la primera no pintaban nada — pero sus @media sí seguían
   aplicándose y peleaban con los de abajo.

   El detalle que hacía peligroso borrar la primera sin más: contenía reglas
   que la segunda NO tenía (.fondo-icono-broca, .maps-bg-broca,
   .waze-bg-broca, .texto-btn-broca, .sub-accion-broca, .nombre-app-broca,
   el :hover de las tarjetas y el @media de 540px). Eliminarla entera habría
   dejado los botones de Google Maps y Waze sin sus iconos ni su tipografía.

   Aquí quedan las dos fundidas en una sola versión, conservando el
   resultado visual exacto que se veía antes. Se descartaron cuatro reglas
   que no tienen elemento en ningún HTML: .contenido-ubicacion-visual,
   .marco-imagen-ubicacion, .imagen-tarjeta-ubicacion y .titulo-ubicacion
   .tag-seo (esta última apuntaba a un contacto.html que ya no existe).
   ========================================================================== */

.bloque-ubicacion-broca {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 40px auto;
    padding: 50px 35px;
    background-color: var(--fondo-gris-claro);
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}

.contenido-ubicacion-info {
    width: 100%;
    max-width: 540px;
}

.titulo-ubicacion {
    color: var(--verde-principal);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.25;
    text-align: center;
}

.texto-ubicacion {
    color: var(--gris-oscuro);
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    margin-bottom: 28px;
    line-height: 1.65;
    text-align: justify;
    text-justify: inter-word;
}

.contenedor-botones-mapas {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.enlace-mapa-broca {
    display: flex;
    align-items: center;
    background: var(--blanco);
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--gris-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
    width: 230px;
    height: 68px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
    box-sizing: border-box;
}

.enlace-mapa-broca:hover {
    border-color: var(--verde-principal);
    box-shadow: 0 6px 16px rgba(30, 86, 49, 0.1);
    transform: translateY(-2px);
}

.fondo-icono-broca {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.maps-bg-broca {
    background-color: #f0f4f9;
}

.waze-bg-broca {
    background-color: #ebf8ff;
}

.texto-btn-broca {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.sub-accion-broca {
    font-size: 11px;
    /* #888888 daba 3.54:1 sobre blanco, insuficiente a 11px. #666 sube a
       5.74:1 y es el gris que ya usa el resto del sitio. */
    color: var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    line-height: 1;
}

.nombre-app-broca {
    font-size: 15px;
    font-weight: 700;
    color: var(--verde-principal);
    line-height: 1.2;
}

@media (max-width: 991px) {
    .bloque-ubicacion-broca {
        padding: 40px 24px;
        max-width: 90%;
    }

    .contenido-ubicacion-info {
        max-width: 100%;
    }

    .texto-ubicacion {
        margin-bottom: 24px;
    }

    .contenedor-botones-mapas {
        gap: 14px;
    }
}

@media (max-width: 540px) {
    .contenedor-botones-mapas {
        flex-direction: column;
        align-items: center;
    }

    .enlace-mapa-broca {
        width: 100%;
        max-width: 280px;
    }
}

/* ==========================================================================
   13. ENLACES DE INTERÉS (ALIADOS INSTITUCIONALES)
   ========================================================================== */
.seccion-enlaces-interes {
    width: 100%;
    padding: 60px 24px;
    background-color: var(--blanco);
    box-sizing: border-box;
}

.cabecera-enlaces-broca {
    text-align: center;
    margin-bottom: 50px;
}

.icono-tablet-broca {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px auto;
    color: var(--verde-principal);
}

.icono-tablet-broca svg {
    width: 100%;
    height: 100%;
    display: block;
}

.titulo-enlaces-broca {
    color: var(--verde-principal);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.contenedor-marcas-aliadas {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
}

.tarjeta-aliado-broca {
    flex: 1;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 24px;
    background-color: var(--blanco);
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

.contenedor-logo-aliado {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.logo-aliado-img {
    max-width: 85%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter 0.3s ease;
}

.acn-ajuste {
    max-height: 90%;
}

.url-aliado-texto {
    color: var(--verde-principal);
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 700;
    text-align: center;
    word-break: break-all;
    font-family: serif;
    transition: color 0.3s ease;
}

.tarjeta-aliado-broca:hover {
    border-color: var(--verde-principal);
    box-shadow: 0 8px 25px rgba(30, 86, 49, 0.08);
    transform: translateY(-4px);
}

.tarjeta-aliado-broca:hover .logo-aliado-img {
    filter: grayscale(0%);
}

.tarjeta-aliado-broca:hover .url-aliado-texto {
    color: var(--verde-oscuro);
}

@media (max-width: 868px) {
    .contenedor-marcas-aliadas {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .tarjeta-aliado-broca {
        width: 100%;
        max-width: 360px;
        padding: 30px 20px;
    }

    .contenedor-logo-aliado {
        height: 120px;
        margin-bottom: 14px;
    }
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer-principal-broca {
    background-color: #0d2314;
    padding: 50px 24px 30px 24px;
    width: 100%;
    box-sizing: border-box;
}

.contenedor-footer-broca {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.columna-seo-broca {
    flex: 1.2;
    max-width: 400px;
}

.footer-marca-titulo {
    color: var(--blanco);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.footer-tagline {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Enlaces del sitio en el footer: reutilizan .nav-list/.nav-link (mismo
   comportamiento y tipografía del menú). Solo se ajusta el color porque el
   gris oscuro por defecto de .nav-link no se ve sobre el fondo oscuro del
   footer; se usa el mismo tono ya empleado en .footer-tagline y el verde
   de acento ya definido en la paleta para el hover (sin colores nuevos). */
.footer-nav-list {
    margin-top: 14px;
}

.footer-nav-list li {
    margin-left: 0;
    margin-right: 20px;
}

.footer-nav-list .nav-link {
    color: #94a3b8;
}

.footer-nav-list .nav-link:hover {
    color: var(--verde-acento);
}

.columna-contacto-broca {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.direccion-estructura-broca {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dato-contacto-broca {
    color: #e2e8f0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.columna-contacto-broca .cel-destacado {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--blanco);
}

.columna-contacto-broca .correo-destacado {
    color: #e2e8f0;
}

.columna-contacto-broca .correo-destacado a {
    color: #e2e8f0;
    text-decoration: underline;
}

.columna-contacto-broca .correo-destacado a:hover {
    color: var(--blanco);
}

/* El celular del footer era texto plano: en móvil obligaba a memorizarlo o
   copiarlo a mano. Ahora es un enlace tel:, con el mismo aspecto que tenía
   (hereda el blanco de .cel-destacado) para no alterar el diseño. */
.enlace-telefono-footer {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
}

.enlace-telefono-footer:hover {
    text-decoration: underline;
}

.columna-contacto-broca .ciudad-destacada {
    font-weight: 500;
    color: var(--blanco);
}

.columna-redes-broca {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 5px;
}

.enlace-red-broca {
    color: var(--blanco);
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.enlace-red-broca svg {
    width: 26px;
    height: 26px;
    display: block;
}

.enlace-red-broca:hover {
    color: #a3b899;
    transform: translateY(-2px);
}

.base-legal-broca {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 20px;
    width: 100%;
}

.contenedor-legal-broca {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.contenedor-legal-broca p {
    color: #94a3b8;
    margin: 0;
    font-size: 0.8rem;
}

.contenedor-legal-broca .nota-medica-broca {
    font-style: italic;
    color: #cbd5e1;
}

@media (max-width: 902px) {
    .contenedor-footer-broca {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 35px;
    }

    .columna-seo-broca {
        max-width: 100%;
    }

    .direccion-estructura-broca {
        align-items: center;
    }

    .columna-redes-broca {
        justify-content: center;
    }

    .contenedor-legal-broca {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* ==========================================================================
   15. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.boton-flotante-whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: var(--verde-whatsapp);
    /* Botón circular de solo icono. Antes llevaba además el texto "Solicita
       tu cita"; se retiró a petición del cliente. El nombre accesible no se
       pierde: vive en el aria-label del enlace, así que los lectores de
       pantalla lo siguen anunciando igual.
       56px supera con holgura el objetivo táctil mínimo de 44px. */
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    z-index: 99998;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    animation: pulsoEleganteWa 2s infinite;
}

.icono-wa-flotante {
    width: 28px;
    height: 28px;
    display: block;
    /* El icono va en BLANCO, no en el verde oscuro que hereda del botón.
       El <path> del SVG usa fill="currentColor", así que basta con fijar
       aquí el color.

       Por qué el icono puede ir en blanco y el texto no: el glifo de
       WhatsApp sobre su verde de marca es el logotipo oficial, y WCAG 1.4.11
       exime expresamente a los logotipos del mínimo de contraste. El texto
       "Solicita tu cita" sí es texto corriente y necesita 4.5:1, por eso se
       queda en verde oscuro (6.19:1). Blanco lo dejaría en 1.98:1. */
    color: var(--blanco);
}

.boton-flotante-whatsapp:hover {
    transform: scale(1.06) translateY(-3px);
    background-color: var(--verde-whatsapp-hover);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.3);
}

@keyframes pulsoEleganteWa {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* La media query que volvía circular el botón en móvil se retiró: ahora es
   circular en todos los anchos, así que no hay nada que ajustar. */

/* ==========================================================================
   16. PÁGINA DE POLÍTICAS (ACORDEÓN LEGAL)
   NOTA DE AUDITORÍA: este bloque estaba triplicado en el CSS original
   (una vez aquí, y dos veces más embebidas como <style> dentro del propio
   politicas.html). Se dejó una sola fuente de verdad.
   ========================================================================== */
.contenedor-politicas-broca {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.titulo-politicas {
    color: var(--verde-principal);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
}

.subtitulo-politicas {
    color: #4a5568;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 25px;
}

.introduccion-politicas {
    /* #718096 se quedaba en 4.02:1, justo por debajo del mínimo. Se usa el
       mismo gris azulado del subtítulo de la página: 7.53:1. */
    color: var(--gris-azulado);
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.grupo-acordeon-broca {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 60px;
}

.item-acordeon-broca {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.item-acordeon-broca[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.titulo-acordeon {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.titulo-acordeon::-webkit-details-marker {
    display: none;
}

.titulo-acordeon::after {
    content: "＋";
    font-size: 1.1rem;
    color: var(--verde-principal);
    transition: transform 0.3s ease;
}

.item-acordeon-broca[open] .titulo-acordeon::after {
    content: "－";
}

.contenido-acordeon {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #e2e8f0;
    background-color: var(--blanco);
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.6;
}

.contenido-acordeon p {
    margin: 15px 0 0 0;
}

.lista-politicas {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.lista-politicas li {
    margin-bottom: 8px;
}

.sub-item-titulo {
    font-size: 1rem;
    color: var(--verde-principal);
    margin: 20px 0 5px 0;
    font-weight: 600;
}

.caja-nota-importante {
    background-color: #f1f5f9;
    border-left: 4px solid var(--verde-principal);
    padding: 15px;
    margin-top: 20px;
    border-radius: 0 6px 6px 0;
}

.caja-nota-importante strong {
    color: #0f172a;
    display: block;
    margin-bottom: 5px;
}

.caja-nota-importante ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9rem;
}

/* ==========================================================================
   17. AJUSTES FINALES DE AUDITORÍA
   ========================================================================== */

/* --------------------------------------------------------------------------
   Texto justificado solo en pantallas anchas.
   .parrafo-historia, .parrafo-cierre y .texto-ubicacion usaban
   text-align: justify sin excepción. En una columna estrecha, justificar
   abre "ríos" de espacio blanco entre palabras y obliga a la vista a saltar,
   justo para el público de más edad al que apunta el sitio. En escritorio,
   donde la línea es larga, el justificado sí se ve bien y se conserva.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .parrafo-historia,
    .parrafo-cierre,
    .texto-ubicacion {
        text-align: left;
        text-align-last: left;
    }
}

/* --------------------------------------------------------------------------
   Espacio para el botón flotante de WhatsApp.
   Al ser position:fixed en la esquina inferior derecha, tapaba el final de
   la línea "Escríbenos a WhatsApp o llámanos: (+57) 315 345 7764" justo
   cuando el usuario llegaba al número: el botón estaba estorbando la
   conversión que intenta provocar. Se reserva un carril inferior en los
   tres bloques que terminan con ese texto y su botón.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .tarjeta-medica-central,
    .seccion-equipo-broca,
    .contenido-cierre-texto {
        padding-bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
   Foco visible en el panel del menú móvil.
   El contorno verde por defecto se confunde con el fondo blanco del panel
   cuando el enlace está enfocado; aquí se refuerza con un fondo suave para
   que quien navegue con teclado vea sin dudas dónde está.
   -------------------------------------------------------------------------- */
.main-nav .nav-link:focus-visible {
    background-color: var(--verde-suave);
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Enlace de salto al contenido.
   Permite a quien navega con teclado esquivar los seis enlaces del menú en
   cada carga de página. Permanece invisible hasta que recibe el foco.
   -------------------------------------------------------------------------- */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100003;
    padding: 12px 20px;
    background: var(--verde-principal);
    color: var(--blanco);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.salto-contenido:focus {
    left: 0;
}

/* ==========================================================================
   18. PÁGINA 404
   Antes el sitio devolvía el 404 genérico de Apache: sin cabecera, sin menú
   y sin forma de volver ni de contactar. Un enlace roto era un callejón sin
   salida. Reutiliza los componentes que ya existen (.cta-seo,
   .texto-contacto-directo, header y footer) para no introducir estilos
   nuevos innecesarios.
   ========================================================================== */
.pagina-error-broca {
    max-width: 640px;
    margin: 0 auto;
    padding: 80px 24px 90px;
    text-align: center;
}

.codigo-error {
    display: inline-block;
    background: var(--verde-suave);
    color: var(--verde-principal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.titulo-error {
    color: var(--verde-principal);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin: 0 0 18px;
}

.texto-error {
    color: var(--gris-texto);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 auto 32px;
    max-width: 52ch;
}

.btn-volver-inicio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--verde-principal);
    border: 2px solid var(--verde-principal);
    text-decoration: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-volver-inicio:hover,
.btn-volver-inicio:focus-visible {
    background-color: var(--verde-principal);
    color: var(--blanco);
}

.enlaces-error {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--borde-suave);
}

.titulo-enlaces-error {
    color: var(--gris-medio);
    font-size: 0.9rem;
    margin: 0 0 14px;
}

.enlaces-error ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    padding: 0;
    margin: 0;
}

.enlaces-error a {
    color: var(--verde-principal);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.enlaces-error a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .pagina-error-broca {
        padding: 50px 20px 70px;
    }

    .btn-volver-inicio {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   19. HORARIO DE ATENCIÓN
   El sitio no publicaba el horario en ninguna parte, siendo lo primero que
   consulta un paciente antes de desplazarse. Se muestra junto al "cómo
   llegar" y, en versión compacta, en el footer. Los mismos valores están en
   el openingHoursSpecification del JSON-LD: texto visible y dato
   estructurado deben coincidir siempre, o Google descarta el segundo.
   ========================================================================== */
.bloque-horario {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    background: var(--verde-suave);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 28px;
}

.icono-horario {
    width: 26px;
    height: 26px;
    color: var(--verde-principal);
    flex-shrink: 0;
    margin-top: 2px;
}

.icono-horario svg {
    width: 100%;
    height: 100%;
    display: block;
}

.etiqueta-horario {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verde-hover);
    margin-bottom: 4px;
}

.detalle-horario {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--verde-principal);
}

.detalle-horario strong {
    font-weight: 700;
}

.nota-horario {
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--gris-texto);
}

/* Versión del footer: hereda el claro del bloque de contacto y se destaca
   con el mismo tratamiento que la ciudad. */
.columna-contacto-broca .horario-destacado {
    margin-top: 8px;
    font-weight: 600;
    color: var(--blanco);
}

@media (max-width: 480px) {
    .bloque-horario {
        padding: 16px;
        gap: 12px;
    }

    .detalle-horario {
        font-size: 1rem;
    }
}