/* =========================================================================
   Sitio publico SMHAP (Inicio / Objetivos / Directorio / Directivos /
   Contacto / Buscador / Perfil medico / Agenda de citas).

   Sistema de diseño: paleta institucional real (negro + azul, tomada del
   logotipo SMHAP; nada de morados genericos de IA), una sola escala de
   radios (16px tarjetas/imagenes, pill en botones),
   sombras tenidas de navy (no negro puro), tipografia Poppins con jerarquia
   real por peso/tracking, ritmo de espaciado generoso (institucion medica,
   no SaaS denso). Reveal-on-scroll sutil vía IntersectionObserver
   (pages/ajax/scrollReveal.js), respeta prefers-reduced-motion.
   ========================================================================= */

:root {
    /* Paleta institucional real, tomada del logotipo SMHAP (texto negro +
       "H" y lineas en azul). Antes se usaba un navy+dorado inventado que no
       corresponde a la marca; se reemplaza por negro/azul, que es lo que
       el cliente realmente usa en su logo. Los nombres de variable
       --hap-accent/--hap-accent-soft se mantienen (antes --hap-gold) para
       no tener que tocar cada regla que los usa. */
    --hap-primary: #123a66;
    --hap-primary-soft: #1b5490;
    --hap-accent: #1e73be;
    --hap-accent-soft: #4e9bd6;
    --hap-ink: #1a1a1a;
    --hap-muted: #6b7280;
    --hap-bg: #f6f7f9;
    --hap-surface: #ffffff;
    --hap-border: #e6e8ee;
    --hap-radius: 16px;
    --hap-shadow-sm: 0 4px 16px rgba(18, 58, 102, .08);
    --hap-shadow-md: 0 10px 32px rgba(18, 58, 102, .12);
    --hap-shadow-lg: 0 22px 60px rgba(18, 58, 102, .18);
}

html, body.hap-publico {
    background: var(--hap-bg);
    font-family: 'Poppins', sans-serif;
    color: var(--hap-ink);
    -webkit-font-smoothing: antialiased;
}

body.hap-publico h1, body.hap-publico h2, body.hap-publico h3 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--hap-ink);
}

body.hap-publico p {
    line-height: 1.75;
}

/* ---- Header / navegacion ---- */

.hap-header {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--hap-shadow-sm);
    border-bottom: 1px solid var(--hap-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* Se agrega/quita con JS (scrollReveal.js) al pasar ~40px de scroll: el
   header gana opacidad y sombra, sutil pero perceptible al bajar. */
.hap-header.hap-header-scrolled {
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--hap-shadow-md);
}

/* Barra de progreso de lectura, generada por JS (scrollReveal.js). */
.hap-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--hap-accent), var(--hap-accent-soft));
    z-index: 2000;
    pointer-events: none;
    transition: width .1s linear;
}

.hap-header .navbar {
    min-height: 68px;
}

.hap-logo-header {
    max-height: 42px;
    object-fit: contain;
}

/* Chapa blanca detras del logo cuando va sobre el footer navy (el logo es
   texto negro/azul, pensado para fondos claros). */
.hap-logo-chip {
    background: #fff;
    border-radius: 12px;
    padding: .5rem .9rem;
    line-height: 0;
}

.hap-header .nav-link {
    position: relative;
    color: var(--hap-primary);
    font-weight: 500;
    font-size: .94rem;
    transition: color .2s ease;
}

.hap-header .nav-link::after {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 2px;
    height: 2px;
    background: var(--hap-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.hap-header .nav-link:hover,
.hap-header .nav-link.active {
    color: var(--hap-accent);
}

.hap-header .nav-link:hover::after,
.hap-header .nav-link.active::after {
    transform: scaleX(1);
}

.hap-main {
    min-height: 60vh;
}

/* ---- Botones (una sola escala: pill) ---- */

.hap-btn-primario {
    background: var(--hap-primary);
    border-color: var(--hap-primary);
    color: #fff;
    border-radius: 999px;
    padding: .65rem 1.6rem;
    font-weight: 600;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .25s ease;
}

.hap-btn-primario:hover {
    background: var(--hap-primary-soft);
    border-color: var(--hap-primary-soft);
    color: #fff;
    transform: translateY(-2px);
}

.hap-btn-primario:active {
    transform: translateY(0) scale(.98);
}

.btn.btn-outline-dark,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-light {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.btn.btn-outline-dark:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-success:hover,
.btn.btn-outline-light:hover {
    transform: translateY(-2px);
}

/* Boton "accent": para usarse SOLO sobre fondos oscuros (ej. hap-cta-final,
   hero). hap-btn-primario (azul oscuro) se vuelve casi invisible sobre un
   panel del mismo azul oscuro -- este boton resuelve ese contraste con el
   azul institucional mas claro (WCAG AA). Antes se llamaba hap-btn-dorado
   cuando la paleta usaba dorado; se renombro junto con el resto de la
   paleta para reflejar los colores reales del logo SMHAP. */
.hap-btn-accent {
    background: var(--hap-accent);
    border-color: var(--hap-accent);
    color: var(--hap-primary);
    border-radius: 999px;
    padding: .65rem 1.6rem;
    font-weight: 600;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .25s ease;
}

.hap-btn-accent:hover {
    background: var(--hap-accent-soft);
    border-color: var(--hap-accent-soft);
    color: var(--hap-primary);
    transform: translateY(-2px);
}

/* ---- Hero de pantalla completa (foto real + tarjeta de vidrio) ----
   Mismo patron que sociedadmedicahap.com.mx: fondo fotografico a pantalla
   completa con una tarjeta flotante (glassmorphism) para el texto, en vez
   de un panel de color solido. Aqui la foto es un carrusel de fotos reales
   del Hospital Angeles Puebla en vez de un banco de imagenes generico. */

.hap-hero-full {
    position: relative;
    min-height: min(86vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

/* Carrusel de fotos reales (fachada / quirofanos / tecnologia / cuneros del
   Hospital Angeles Puebla, imagenes oficiales) con efecto Ken Burns sutil.
   pages/ajax/heroCarousel.js alterna la clase .hap-carousel-slide-activa
   cada 5s. Se reutiliza tambien como fondo de otras secciones si hace falta. */
.hap-hero-carousel {
    /* Se extiende 60px arriba de lo normal (en vez de inset:0) porque
       scrollReveal.js le aplica un parallax sutil (translateY hasta 60px
       al bajar) -- sin este margen extra se veria un hueco en la orilla
       superior del hero al hacer scroll. */
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: calc(100% + 60px);
    will-change: transform;
}

.hap-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.4s ease;
    animation: hapKenBurns 10s ease-in-out infinite;
}

.hap-carousel-slide-activa {
    opacity: 1;
    z-index: 1;
}

@keyframes hapKenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hap-carousel-slide {
        animation: none;
        transform: none;
    }
}

.hap-hero-overlay {
    /* Oscurece mas del lado izquierdo (donde va la tarjeta de texto) y deja
       ver mas la foto real del lado derecho -- tecnica estandar para poner
       texto legible sobre fotografia sin tapar la imagen por completo. */
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        rgba(10, 25, 46, .82) 0%,
        rgba(10, 25, 46, .58) 42%,
        rgba(10, 25, 46, .22) 72%,
        rgba(10, 25, 46, .08) 100%);
}

.hap-hero-full-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 96px 0;
}

.hap-hero-glass {
    max-width: 600px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: var(--hap-radius);
    padding: 2.75rem;
    box-shadow: var(--hap-shadow-lg);
}

.hap-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--hap-accent-soft);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hap-hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--hap-accent-soft);
}

/* Variante de eyebrow para secciones de fondo claro (video, beneficios,
   noticias): el mismo patron visual pero en azul institucional solido en
   vez del azul claro pensado para fondos oscuros. */
.hap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--hap-primary-soft);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.hap-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--hap-accent);
}

body.hap-publico .hap-hero-glass h1 {
    color: #fff;
    font-size: clamp(2.2rem, 3.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -.03em;
}

.hap-hero-glass p.lead {
    color: rgba(255, 255, 255, .88);
    font-size: 1.08rem;
}

/* Boton "glass": secundario, para usarse junto al boton accent sobre fotos
   (ej. hero). Borde y relleno translucidos, se ve bien sobre cualquier
   foto real sin competir por atencion con el CTA principal. */
.hap-btn-glass {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    border-radius: 999px;
    padding: .65rem 1.6rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .25s ease;
}

.hap-btn-glass:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    transform: translateY(-2px);
}

.hap-hero-badge {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(18, 58, 102, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--hap-shadow-md);
}

.hap-hero-badge i {
    color: var(--hap-accent-soft);
}

@media (max-width: 991.98px) {
    .hap-hero-full {
        min-height: 0;
        padding: 40px 0;
    }
    .hap-hero-full-content {
        padding: 32px 0;
    }
    .hap-hero-glass {
        max-width: none;
        padding: 2rem;
    }
    .hap-hero-badge {
        display: none;
    }
}

/* ---- Wave dividers (transiciones curvas entre secciones) ---- */

.hap-certificacion-strip {
    position: relative;
    color: #fff;
    background: var(--hap-accent);
    font-weight: 500;
    font-size: .92rem;
    letter-spacing: .01em;
    overflow: visible;
}

/* Linea de electrocardiograma corriendo de fondo, como un monitor de
   signos vitales -- referencia directa a hospital, muy sutil (opacidad
   baja) para no competir con el texto. */
.hap-certificacion-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .16;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: 320px 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='80' viewBox='0 0 320 80'><path d='M0,40 L60,40 L74,14 L90,66 L104,40 L128,40 L140,26 L152,40 L320,40' fill='none' stroke='white' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    animation: hapEcgScroll 7s linear infinite;
}

.hap-certificacion-strip .container {
    position: relative;
    z-index: 1;
}

@keyframes hapEcgScroll {
    from { background-position-x: 0; }
    to   { background-position-x: -320px; }
}

@media (prefers-reduced-motion: reduce) {
    .hap-certificacion-strip::after {
        animation: none;
    }
}

.hap-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 44px;
    display: block;
    pointer-events: none;
}

.hap-wave-top {
    top: -1px;
}

.hap-wave-bottom {
    bottom: -1px;
}

/* ---- Video institucional ---- */

.hap-video-frame {
    border-radius: var(--hap-radius);
    overflow: hidden;
    box-shadow: var(--hap-shadow-lg);
    background: var(--hap-primary);
    line-height: 0;
}

.hap-video-frame video {
    width: 100%;
    max-height: 560px;
    display: block;
}

/* ---- Encabezado de subpaginas (Objetivos / Directivos / Contacto) ---- */

.hap-page-header {
    position: relative;
    color: #fff;
    padding: 64px 0;
    overflow: hidden;
    background-color: var(--hap-primary);
    background-image:
        radial-gradient(800px 420px at 92% -20%, rgba(30, 115, 190, .22), transparent 60%),
        linear-gradient(135deg, var(--hap-primary) 0%, var(--hap-primary-soft) 100%);
}

body.hap-publico .hap-page-header h1 {
    color: #fff;
    font-size: clamp(1.9rem, 2.8vw, 2.5rem);
    letter-spacing: -.02em;
}

.hap-page-header p {
    color: rgba(255, 255, 255, .78);
}

/* ---- Cita / mision (pull-quote asimetrico) ---- */

.hap-mision {
    background: var(--hap-surface);
}

.hap-mision-marca {
    font-size: 4rem;
    line-height: 1;
    color: var(--hap-accent);
    font-weight: 700;
    display: block;
    margin-bottom: -12px;
}

.hap-mision blockquote {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--hap-ink);
    letter-spacing: -.01em;
}

.hap-mision p.hap-mision-detalle {
    color: var(--hap-muted);
    max-width: 60ch;
}

/* Imagen "blob" (mascara organica en vez de rectangulo): mismo recurso que
   usa sociedadmedicahap.com.mx para las fotos de sus secciones editoriales.
   Un anillo dorado desfasado detras (::before) le da profundidad. */
.hap-mision-blob {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 4 / 3.3;
    overflow: hidden;
    box-shadow: var(--hap-shadow-lg);
    animation: hapBlobVivoGrande 11s ease-in-out infinite;
    will-change: border-radius;
}

@keyframes hapBlobVivoGrande {
    0%, 100% { border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%; }
    33%      { border-radius: 45% 55% 40% 60% / 55% 45% 62% 38%; }
    66%      { border-radius: 55% 45% 62% 38% / 38% 62% 40% 60%; }
}

@media (prefers-reduced-motion: reduce) {
    .hap-mision-blob {
        animation: none;
        border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%;
    }
}

.hap-mision-blob-wrap {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
}

/* Celulas flotantes de fondo (circulos suaves y borrosos, como celulas al
   microscopio) -- referencia bioquimica/hospital, muy sutiles. */
.hap-celula {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, var(--hap-accent-soft), var(--hap-accent));
    opacity: .16;
    filter: blur(3px);
    pointer-events: none;
    animation: hapCelulaFlotar 8s ease-in-out infinite;
}

.hap-celula-1 { width: 110px; height: 110px; top: -34px; left: -26px; animation-delay: 0s; }
.hap-celula-2 { width: 64px; height: 64px; bottom: -14px; right: 6px; animation-delay: 1.6s; }
.hap-celula-3 { width: 42px; height: 42px; top: 40%; right: -20px; animation-delay: 3.2s; }

@keyframes hapCelulaFlotar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(10px, -16px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .hap-celula {
        animation: none;
    }
}

.hap-mision-blob::before {
    content: '';
    position: absolute;
    inset: -18px 14px 14px -18px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--hap-accent-soft), var(--hap-accent));
    opacity: .35;
}

.hap-mision-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Beneficios (grid con ritmo: primer item destacado) ---- */

.hap-card-beneficio {
    background: var(--hap-surface);
    border: 1px solid var(--hap-border);
    border-radius: var(--hap-radius);
    box-shadow: var(--hap-shadow-sm);
    height: 100%;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.hap-card-beneficio:hover {
    transform: translateY(-4px);
    box-shadow: var(--hap-shadow-md);
}

.hap-card-beneficio.hap-beneficio-destacado {
    background: var(--hap-primary);
    border-color: var(--hap-primary);
    color: #fff;
}

.hap-card-beneficio.hap-beneficio-destacado .hap-icono-beneficio {
    color: var(--hap-accent-soft);
}

.hap-icono-beneficio {
    position: relative;
    color: var(--hap-accent);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(30, 115, 190, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hap-beneficio-destacado .hap-icono-beneficio {
    background: rgba(255, 255, 255, .14);
}

/* "Latido": anillo que se expande y se desvanece, como un monitor de
   signos vitales -- toque hospitalario en los iconos de beneficios. */
.hap-icono-beneficio::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--hap-accent);
    opacity: 0;
    animation: hapLatido 2.6s ease-out infinite;
    pointer-events: none;
}

.hap-beneficio-destacado .hap-icono-beneficio::after {
    border-color: rgba(255, 255, 255, .75);
}

.hap-card-beneficio:nth-child(2) .hap-icono-beneficio::after { animation-delay: .5s; }
.hap-card-beneficio:nth-child(3) .hap-icono-beneficio::after { animation-delay: 1s; }

@keyframes hapLatido {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hap-icono-beneficio::after {
        animation: none;
        opacity: 0;
    }
}

/* ---- Noticias ---- */

/* Tarjetas "Newsletter" (imagen blob + boton "Ver más" al pasar el
   cursor) -- mismo patron que sociedadmedicahap.com.mx, con fotos reales
   del hospital en vez de banco de imagenes generico. Enlazan a
   pages/publico/noticia.php?slug=... (detalle real, no un enlace muerto). */
.hap-noticia-blob {
    position: relative;
    display: block;
    width: 172px;
    height: 172px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: var(--hap-shadow-md);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    /* "Celula viva": la forma organica cambia sola, muy despacio, todo el
       tiempo (como una ameba respirando); al pasar el cursor se acelera y
       se nota mucho mas -- efecto pedido explicitamente por el cliente. */
    animation: hapBlobVivo 9s ease-in-out infinite;
    will-change: border-radius, transform;
}

.hap-noticia-blob:hover {
    transform: translateY(-4px) scale(1.04);
    animation-duration: 2.2s;
}

@keyframes hapBlobVivo {
    0%, 100% { border-radius: 58% 42% 63% 37% / 41% 55% 45% 59%; }
    25%      { border-radius: 42% 58% 39% 61% / 58% 42% 61% 39%; }
    50%      { border-radius: 63% 37% 55% 45% / 45% 63% 37% 55%; }
    75%      { border-radius: 48% 52% 62% 38% / 38% 55% 45% 62%; }
}

@media (prefers-reduced-motion: reduce) {
    .hap-noticia-blob,
    .hap-noticia-blob:hover {
        animation: none;
        border-radius: 58% 42% 63% 37% / 41% 55% 45% 59%;
    }
}

.hap-noticia-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--hap-border);
}

.hap-noticia-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: rgba(18, 58, 102, .55);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .25s ease;
}

.hap-noticia-blob:hover .hap-noticia-zoom {
    opacity: 1;
}

.hap-noticia-titulo {
    margin-top: 1.1rem;
    font-weight: 600;
    font-size: .95rem;
}

.hap-noticia-titulo a {
    color: var(--hap-ink);
    text-decoration: none;
}

.hap-noticia-titulo a:hover {
    color: var(--hap-accent);
}

/* ---- CTA final ---- */

.hap-cta-final {
    position: relative;
    overflow: hidden;
    background-color: var(--hap-primary);
    background-image:
        radial-gradient(700px 380px at 10% -30%, rgba(30, 115, 190, .2), transparent 60%),
        linear-gradient(135deg, var(--hap-primary), var(--hap-primary-soft));
    color: #fff;
    border-radius: var(--hap-radius);
    box-shadow: var(--hap-shadow-lg);
}

/* Mismo bug de especificidad que .hap-hero-copy h1 / .hap-page-header h1:
   la regla global body.hap-publico h1,h2,h3 (color ink oscuro) le gana a
   un simple ".hap-cta-final h2 { color:#fff }" por especificidad CSS, y el
   titulo queda invisible sobre el panel navy. Se sube la especificidad. */
body.hap-publico .hap-cta-final h2 {
    color: #fff;
    position: relative;
    z-index: 1;
}

.hap-cta-final .text-muted {
    color: rgba(255, 255, 255, .78) !important;
    position: relative;
    z-index: 1;
}

.hap-cta-final .btn {
    position: relative;
    z-index: 1;
}

/* ---- Directivos ---- */

.hap-foto-directivo {
    width: 152px;
    height: 152px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--hap-border);
    box-shadow: var(--hap-shadow-md);
    border: 4px solid var(--hap-surface);
}

.hap-pill-activo {
    background: var(--hap-primary) !important;
    color: #fff !important;
    border-radius: 999px;
}

.nav-pills .nav-link {
    border-radius: 999px;
}

/* ---- Contenido de paginas fijas / contacto ---- */

.hap-contenido-pagina {
    line-height: 1.85;
    color: var(--hap-ink);
}

.hap-datos-contacto p {
    margin-bottom: .6rem;
}

/* ---- Tarjeta medico (Directorio, Fase 1) ---- */

.hap-card-medico {
    border: 1px solid var(--hap-border);
    border-radius: var(--hap-radius);
    box-shadow: var(--hap-shadow-sm);
    overflow: hidden;
    height: 100%;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.hap-card-medico:hover {
    transform: translateY(-4px);
    box-shadow: var(--hap-shadow-md);
}

.hap-card-medico .hap-foto {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--hap-border);
}

.hap-slot-hora {
    min-width: 78px;
    border-radius: 999px;
}

.hap-slot-hora.active {
    background: var(--hap-primary);
    border-color: var(--hap-primary);
    color: #fff;
}

/* ---- Footer ---- */

.hap-footer {
    background: var(--hap-primary);
    color: rgba(255, 255, 255, .68);
    border-top: 0;
}

.hap-footer h6 {
    color: #fff;
}

.hap-footer a {
    color: rgba(255, 255, 255, .78);
}

.hap-footer a:hover {
    color: var(--hap-accent-soft);
}

/* ---- Reveal on scroll (vanilla JS + IntersectionObserver) ----
   Anima solo transform/opacity. Si el navegador prefiere menos movimiento,
   scrollReveal.js NUNCA agrega la clase oculta -- el contenido se queda
   visible desde el principio, sin depender de esta regla CSS. */

.hap-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

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

/* Variantes de direccion, combinables con "hap-reveal" (ej.
   class="hap-reveal hap-reveal-left"). El contenido entra desde su propio
   lado en vez de siempre desde abajo -- util en layouts de dos columnas
   (texto/imagen) para que ambos lados no se muevan identicos. */
.hap-reveal-left {
    transform: translateX(-36px);
}

.hap-reveal-left.hap-reveal-visible {
    transform: translateX(0);
}

.hap-reveal-right {
    transform: translateX(36px);
}

.hap-reveal-right.hap-reveal-visible {
    transform: translateX(0);
}

.hap-reveal-scale {
    transform: scale(.94);
}

.hap-reveal-scale.hap-reveal-visible {
    transform: scale(1);
}

/* ---- Rail de redes sociales (fijo al borde de pantalla) ----
   Mismo patron que sociedadmedicahap.com.mx: iconos circulares apilados en
   el borde derecho, siempre visibles. Cada uno con su color de marca; solo
   se muestran los que tengan URL/numero real capturado (ver
   pages/components/footer-publico.php). */

.hap-social-rail {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hap-social-rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--hap-shadow-md);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}

.hap-social-rail-item:hover {
    color: #fff;
    transform: scale(1.1);
    box-shadow: var(--hap-shadow-lg);
}

.hap-social-facebook { background: #1877f2; }
.hap-social-instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.hap-social-whatsapp {
    background: #25d366;
    position: relative;
}

/* Anillo tipo "gota"/pulso, como los botones de WhatsApp reales -- llama
   la atencion sin ser invasivo. */
.hap-social-whatsapp::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: #25d366;
    animation: hapGotaPulso 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes hapGotaPulso {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hap-social-whatsapp::before {
        animation: none;
        opacity: 0;
    }
}

@media (max-width: 767.98px) {
    .hap-social-rail {
        right: 10px;
        gap: 8px;
    }
    .hap-social-rail-item {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}