/* =====================================================================
   Pueblo Latino — Capa de estilo profesional
   Se carga DESPUÉS de style.css y del <style> del header, por lo que
   estas reglas tienen prioridad. No reemplaza nada: solo refina.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. Paleta y tokens refinados                                       */
/* ------------------------------------------------------------------ */
:root {
    --primary-color:  #0057a8;
    --primary-dark:   #003d7a;
    --primary-deep:   #042a52;
    --primary-soft:   #e8f1fb;

    --accent-color:   #f5b301;   /* oro más cálido y legible */
    --accent-dark:    #d99700;

    --ink:            #16243a;    /* títulos */
    --text-dark:      #283549;
    --text-light:     #5d6b7e;
    --muted:          #8a97a8;

    --border-color:   #e6ebf2;
    --bg-light:       #f4f7fb;
    --secondary-color:#f4f7fb;
    --white:          #ffffff;

    --whatsapp-color: #25d366;
    --facebook-color: #1877f2;

    --shadow-sm: 0 1px 3px rgba(16, 36, 64, .06), 0 1px 2px rgba(16, 36, 64, .08);
    --shadow-md: 0 8px 24px rgba(16, 36, 64, .10);
    --shadow-lg: 0 18px 48px rgba(16, 36, 64, .16);
    --shadow-brand: 0 12px 30px rgba(0, 87, 168, .28);

    --radius:    16px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --container: 1200px;

    --font-head: 'Montserrat', 'Poppins', sans-serif;
    --font-body: 'Poppins', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/*  2. Base                                                            */
/* ------------------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Accesible para lectores/buscadores pero oculto visualmente (H1 SEO) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--primary-color); color: #fff; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.2;
}

img { max-width: 100%; }

a { transition: color .25s var(--ease); }

/* Foco accesible y visible para teclado */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(0, 87, 168, .35);
    outline-offset: 2px;
    border-radius: 6px;
}

.container { max-width: var(--container); }

/* ------------------------------------------------------------------ */
/*  3. Botones                                                         */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
                background-color .25s var(--ease), color .25s var(--ease);
    will-change: transform;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0061bd, var(--primary-deep));
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 87, 168, .38);
    color: #fff;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
    color: #1d1500;
    box-shadow: 0 10px 24px rgba(245, 179, 1, .32);
}
.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(245, 179, 1, .42);
    color: #1d1500;
}

.btn-outline {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(4px);
}
.btn-outline:hover {
    background: #fff;
    color: var(--primary-color);
    transform: translateY(-3px);
}

.btn-lg { padding: 15px 34px; font-size: 1.02rem; }

/* ------------------------------------------------------------------ */
/*  4. Header / navegación                                            */
/* ------------------------------------------------------------------ */
.header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 1px 0 rgba(16, 36, 64, .06);
    border-bottom: 1px solid rgba(16, 36, 64, .05);
}
.header.scrolled { box-shadow: 0 6px 24px rgba(16, 36, 64, .10); }

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

.logo { color: var(--primary-color); gap: 12px; flex-shrink: 0; }
.logo img { height: 46px; flex-shrink: 0; }

/* Marca "Pueblo Latino": horizontal, oro oscuro con shimmer premium */
.logo span {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -.01em;
    line-height: 1.05;
    white-space: nowrap;            /* siempre en una sola línea */
    background-image: linear-gradient(
        100deg,
        #5e4708 0%, #8a6d1a 18%, #b8860b 34%, #e3c046 50%,
        #b8860b 66%, #8a6d1a 82%, #5e4708 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8a6d1a;                 /* respaldo si no hay soporte de clip */
    animation: goldSweep 5.5s linear infinite;
    transition: filter .3s var(--ease);
}
.logo:hover span { filter: drop-shadow(0 2px 8px rgba(184, 134, 11, .45)); }

@media (max-width: 380px) {
    .logo span { font-size: 1.3rem; }
}

.nav-menu a {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: .98rem;
    color: var(--text-dark);
}
.nav-menu a:hover { color: var(--primary-color); }
.nav-menu a::after { height: 2.5px; border-radius: 2px; background: var(--accent-color); }

/* Separación entre el logo y el menú (solo cuando el menú completo está
   inline, ≥1241px; debajo es un panel hamburguesa y no debe desplazarse). */
@media (min-width: 1241px) {
    .nav-menu { margin-left: 40px; gap: 26px; }
}

/* Botones del nav un poco más compactos */
.nav-cta .btn { padding: 10px 20px; font-size: .92rem; }
.nav-cta .btn-primary { box-shadow: 0 8px 18px rgba(0, 87, 168, .25); }

/* Color de texto correcto en los botones del menú
   (vence a la regla genérica `.nav-menu a { color:dark }`). */
.nav-menu .nav-cta a.btn-primary,
.nav-menu .nav-cta a.btn-primary i { color: #fff; }
.nav-menu .nav-cta a.btn-secondary,
.nav-menu .nav-cta a.btn-secondary i { color: #1d1500; }
/* Sin la rayita inferior del menú en los botones */
.nav-menu .nav-cta a::after { display: none; }

/* ---- Botones del menú animados y premium ---- */
.nav-cta .btn { position: relative; overflow: hidden; }

/* Barrido de brillo continuo (no solo al hover) */
.nav-cta .btn::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: navBtnShine 3.8s ease-in-out infinite;
    pointer-events: none;
}
.nav-cta .btn-secondary::before { animation-delay: 1.9s; }
@keyframes navBtnShine {
    0%   { left: -60%; }
    30%  { left: 130%; }
    100% { left: 130%; }
}

/* Resplandor que "respira" suavemente */
.nav-cta .btn-primary { animation: navPulseBlue 3.2s ease-in-out infinite; }
.nav-cta .btn-secondary { animation: navPulseGold 3.2s ease-in-out infinite; animation-delay: .5s; }
@keyframes navPulseBlue {
    0%, 100% { box-shadow: 0 8px 18px rgba(0, 87, 168, .25); }
    50%      { box-shadow: 0 8px 24px rgba(0, 87, 168, .42), 0 0 0 4px rgba(0, 87, 168, .08); }
}
@keyframes navPulseGold {
    0%, 100% { box-shadow: 0 10px 24px rgba(245, 179, 1, .32); }
    50%      { box-shadow: 0 10px 28px rgba(245, 179, 1, .5), 0 0 0 4px rgba(245, 179, 1, .12); }
}

/* Hover: elevación marcada + icono con vida propia */
.nav-cta .btn:hover { transform: translateY(-3px) scale(1.035); }
.nav-cta .btn i { display: inline-block; transition: transform .3s var(--ease), filter .3s var(--ease); }
.nav-cta .btn-primary:hover i { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(255, 255, 255, .65)); }
.nav-cta .btn-secondary:hover i { transform: translateX(2px) scale(1.1); }

@media (prefers-reduced-motion: reduce) {
    .nav-cta .btn, .nav-cta .btn::before { animation: none !important; }
}

/* ------------------------------------------------------------------ */
/*  5. Hero                                                            */
/* ------------------------------------------------------------------ */
.hero-overlay {
    background:
        radial-gradient(120% 120% at 15% 10%, rgba(0, 87, 168, .55) 0%, transparent 55%),
        linear-gradient(135deg, rgba(4, 42, 82, .92) 0%, rgba(0, 61, 122, .82) 55%, rgba(0, 87, 168, .72) 100%);
}

.hero-content { max-width: 960px; margin: 0 auto; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    margin-bottom: 22px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
}
.hero-eyebrow i { color: var(--accent-color); }

.hero-content h2 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.hero-content h3 { color: #fff; font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.9rem); }
.hero-content h4 { color: rgba(255, 255, 255, .92); font-weight: 400; }
.hero-content p  { color: rgba(255, 255, 255, .9); }

/* Indicador de scroll opcional */
.hero-slider::after {
    content: '';
    position: absolute;
    bottom: 18px; left: 50%;
    width: 22px; height: 36px;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    z-index: 6;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*  6. Acceso rápido                                                   */
/* ------------------------------------------------------------------ */
.quick-access { box-shadow: var(--shadow-md); border-radius: 0; }
.quick-btn {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.quick-btn:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}
.quick-btn-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-deep));
    box-shadow: 0 8px 18px rgba(0, 87, 168, .28);
    flex-shrink: 0;
}
.quick-btn-content h4 { font-family: var(--font-head); }

/* ------------------------------------------------------------------ */
/*  7. Encabezados de sección                                          */
/* ------------------------------------------------------------------ */
.section-header { margin-bottom: 54px; }
.section-header h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
}
.section-header.text-center h2::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 64px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}
.section-header p { color: var(--text-light); max-width: 640px; margin: 0 auto; }

.bg-light { background: var(--bg-light); }

/* Etiqueta "eyebrow" reutilizable para secciones */
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 12px;
}

/* ------------------------------------------------------------------ */
/*  8. Banda de estadísticas / confianza                              */
/* ------------------------------------------------------------------ */
.stats-band {
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 55%, var(--primary-color) 100%);
    color: #fff;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}
.stats-band::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(60% 120% at 85% 10%, rgba(245, 179, 1, .18), transparent 60%);
    pointer-events: none;
}
.stats-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.stat-item { padding: 10px; }
.stat-number {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2.8rem;
    line-height: 1;
    color: #fff;
}
.stat-number .plus { color: var(--accent-color); }
.stat-label {
    margin-top: 10px;
    font-size: .98rem;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .85);
}
.stat-item i {
    color: var(--accent-color);
    font-size: 1.5rem;
    margin-bottom: 12px;
    display: block;
}

/* ------------------------------------------------------------------ */
/*  9. Tarjetas (cursos, programas, eventos, publicaciones)           */
/* ------------------------------------------------------------------ */
.curso-card,
.evento-card,
.publicacion-card,
.programa-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: #fff;
}
.curso-card:hover,
.evento-card:hover,
.publicacion-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-8px); }

.curso-content h3,
.evento-content h3 { font-family: var(--font-head); color: var(--ink); }
.curso-content > .btn { margin-top: 6px; }

/* Meta de la tarjeta de curso (instructor + precio) */
.curso-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}
.curso-info span { display: inline-flex; align-items: center; gap: 7px; }
.curso-info i { color: var(--primary-color); }
.curso-precio {
    margin-left: auto;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-soft);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.curso-precio i { color: var(--primary-color); }
.curso-precio.is-free {
    color: #1d6b2f;
    background: #e6f6ea;
}
.curso-precio.is-free i { color: #1d6b2f; }

.curso-nivel {
    background: rgba(255, 255, 255, .92);
    color: var(--primary-dark);
    font-family: var(--font-head);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
}
.curso-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(4, 42, 82, .35), transparent 45%);
    pointer-events: none;
    z-index: 1;
}
.curso-image { position: relative; }

/* Portada de marca cuando el curso no tiene miniatura propia */
.curso-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.curso-cover::before {
    content: '';
    position: absolute;
    inset: -20%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.16) 0, transparent 12%),
        radial-gradient(circle at 75% 70%, rgba(255,255,255,.12) 0, transparent 14%),
        radial-gradient(circle at 60% 20%, rgba(255,255,255,.10) 0, transparent 10%);
    background-size: 120px 120px, 160px 160px, 90px 90px;
    opacity: .8;
}
.curso-cover i {
    position: relative;
    color: rgba(255, 255, 255, .96);
    font-size: 3.4rem;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
    transition: transform .5s var(--ease);
}
.curso-card:hover .curso-cover i { transform: scale(1.12) rotate(-3deg); }

/* Variantes de degradado para dar variedad visual */
.cover-v1 { background: linear-gradient(135deg, #0057a8, #042a52); }
.cover-v2 { background: linear-gradient(135deg, #0a6fb8, #044a86); }
.cover-v3 { background: linear-gradient(135deg, #1d4e89, #0a2a52); }
.cover-v4 { background: linear-gradient(135deg, #2a6f97, #073b5c); }
.cover-v5 { background: linear-gradient(135deg, #00518f, #1b3b6f); }

.programa-card {
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}
.programa-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}
.programa-card:hover::before { transform: scaleX(1); }
.programa-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.programa-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-deep));
    box-shadow: 0 10px 22px rgba(0, 87, 168, .26);
}
.programa-card h3 { font-family: var(--font-head); }
.programa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    color: var(--primary-color);
    text-decoration: none;
}
.programa-link i { transition: transform .3s var(--ease); }
.programa-card:hover .programa-link { color: var(--primary-dark); }
.programa-card:hover .programa-link i { transform: translateX(5px); }

.evento-destacado { background: var(--accent-color); color: #1d1500; font-family: var(--font-head); font-weight: 700; }
.evento-fecha { color: var(--primary-color); font-family: var(--font-head); font-weight: 600; }
.evento-content h3 { color: var(--ink); }

/* ---- Cuadrícula de Noticias: 3 columnas (rectangulares) ---- */
.eventos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 992px) {
    .eventos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .eventos-grid { grid-template-columns: 1fr; }
}

/* Tablet: 2 columnas consistentes en cursos, programas, publicaciones y
   accesos rápidos (corrige el salto a 1 columna del CSS heredado). */
@media (min-width: 601px) and (max-width: 992px) {
    .cursos-grid,
    .programas-grid,
    .publicaciones-grid,
    .fb-posts-grid,
    .quick-access-buttons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cursos-grid,
    .programas-grid,
    .publicaciones-grid,
    .fb-posts-grid,
    .quick-access-buttons { grid-template-columns: 1fr; }
}

/* Tarjeta rectangular de altura uniforme */
.evento-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.evento-card .evento-image {
    position: relative;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
}
.evento-card .evento-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.evento-card:hover .evento-image img { transform: scale(1.06); }
/* Portada de marca un poco más compacta dentro de la noticia */
.evento-card .curso-cover { height: 180px; }
.evento-card .curso-cover i { font-size: 2.8rem; }

/* Etiqueta (tag/categoría) sobre la imagen */
.evento-image .evento-destacado {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    box-shadow: var(--shadow-sm);
}
.evento-content { padding: 22px; }
.noticia-card .evento-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.noticia-card .evento-content h3 { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.35; margin: 6px 0 10px; }
.noticia-card .evento-content p { color: var(--text-light); font-size: .94rem; margin-bottom: 16px; }
.noticia-card .evento-content .noticia-footer { margin-top: auto; }
.noticia-card .evento-content .programa-link { margin-top: 0; }

/* ---- Página de noticia individual (noticia.php) ---- */
.noticia-single { background: var(--bg-light); }
.noticia-articulo { max-width: 820px; margin: 0 auto; }
.noticia-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--primary-color); text-decoration: none;
    font-family: var(--font-head); font-weight: 600; margin-bottom: 20px;
    transition: gap .25s var(--ease);
}
.noticia-back:hover { gap: 13px; }
.noticia-articulo .noticia-tag {
    display: inline-block; background: var(--accent-color); color: #1d1500;
    font-family: var(--font-head); font-weight: 700; padding: 5px 15px;
    border-radius: var(--radius-pill); font-size: .8rem; margin-bottom: 14px;
}
.noticia-articulo h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.22;
    color: var(--ink); margin-bottom: 14px;
}
.noticia-meta {
    color: var(--text-light); font-family: var(--font-head); font-weight: 600;
    display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
}
.noticia-meta i { color: var(--primary-color); }
.noticia-cover {
    width: 100%; height: 380px; border-radius: var(--radius);
    overflow: hidden; margin-bottom: 26px; box-shadow: var(--shadow-md);
}
.noticia-cover.curso-cover { height: 380px; }
.noticia-cover img { width: 100%; height: 100%; object-fit: cover; }
.noticia-cover.curso-cover i { font-size: 4.6rem; }
.noticia-extracto {
    font-size: 1.14rem; line-height: 1.85; color: var(--text-dark); margin-bottom: 28px;
}
@media (max-width: 600px) {
    .noticia-cover, .noticia-cover.curso-cover { height: 230px; }
}

/* ---- Barra de compartir en la tarjeta de noticia ---- */
.noticia-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.noticia-share .share-lbl {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    cursor: pointer;
    text-decoration: none;
    font-size: .88rem;
    position: relative;
    transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.share-btn:hover { transform: translateY(-3px); color: #fff; }
.sh-fb:hover   { background: #1877f2; border-color: #1877f2; }
.sh-wa:hover   { background: #25d366; border-color: #25d366; }
.sh-x:hover    { background: #111;    border-color: #111; }
.sh-in:hover   { background: #0a66c2; border-color: #0a66c2; }
.sh-copy:hover { background: var(--primary-color); border-color: var(--primary-color); }
.sh-copy.copied { background: #1d9d4f; border-color: #1d9d4f; color: #fff; }

/* Tooltip de confirmación "¡Enlace copiado!" */
.share-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 132%;
    left: 50%;
    transform: translateX(-50%);
    background: #16243a;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 7px;
    white-space: nowrap;
    z-index: 6;
    box-shadow: var(--shadow-md);
}
.share-btn[data-tip]::before {
    content: '';
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #16243a;
    z-index: 6;
}

.publicacion-card { box-shadow: var(--shadow-sm); }
.pub-header h4 { font-family: var(--font-head); color: var(--primary-color); }
.pub-title h3 { font-family: var(--font-head); font-size: 1.15rem; padding: 0 20px; color: var(--ink); }

/* ---- Publicaciones de Facebook embebidas (SDK) ---- */
.fb-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 26px;
    justify-items: center;
}
.fb-post-card {
    width: 100%;
    max-width: 360px;
    min-width: 0;                 /* deja que el ítem flex se achique de verdad */
    min-height: 220px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 10px;
    /* El plugin de Facebook exige un mínimo de 350px de ancho — en
       celulares angostos esto no cabe. En vez de dejar que estire TODA
       la página (el bug clásico de los widgets de FB en móvil), el
       desbordamiento se contiene con scroll horizontal SOLO dentro de
       esta tarjeta. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.fb-post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.fb-post-card .fb-post { width: 350px; max-width: none; flex-shrink: 0; display: flex; justify-content: center; }
.fb-post-card .fb-page { width: 350px; max-width: none; flex-shrink: 0; }

/* Esta sección necesita más ancho que el resto del sitio para que las
   tarjetas de Facebook se vean grandes y cómodas de leer. */
#publicaciones > .container { max-width: 1440px; }

/* ---- Fila 1: feed automático de Facebook (lo más reciente) ---- */
.fb-live-band {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 44px;
    align-items: start;
    max-width: 100%;
    margin: 0 auto;
}
.fb-live-band > * { min-width: 0; }   /* evita que el contenido interno estire la grilla */
.fb-live-text { padding-top: 8px; }
.fb-live-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fdecec; color: #d92b2b;
    font-family: var(--font-head); font-weight: 700;
    font-size: .76rem; letter-spacing: .6px; text-transform: uppercase;
    padding: 5px 13px; border-radius: var(--radius-pill); margin-bottom: 15px;
}
.fb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e02424; animation: fbLivePulse 1.4s infinite; }
@keyframes fbLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,36,36,.6); } 50% { box-shadow: 0 0 0 5px rgba(224,36,36,0); } }
.fb-live-text h3 { font-family: var(--font-head); font-size: 1.9rem; color: var(--ink); margin-bottom: 12px; }
.fb-live-text > p { color: var(--text-light); font-size: 1.05rem; line-height: 1.7; margin-bottom: 22px; }
.fb-live-benefits { list-style: none; padding: 0; margin: 0 0 26px; }
.fb-live-benefits li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--font-head); font-weight: 500; color: var(--text-dark); }
.fb-live-benefits i { color: var(--facebook-color); width: 20px; text-align: center; }
/* Fila de 2 publicaciones recientes lado a lado */
.fb-live-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
}
.fb-live-feed .fb-post-card {
    flex: 1 1 380px;
    max-width: 480px;
    height: 600px;
}
/* Respaldo (si no hay publicaciones curadas): widget de muro completo */
.fb-live-feed .fb-page-wrap {
    width: 100%; max-width: 420px;
    background: #fff; border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 8px;
    box-shadow: var(--shadow-sm); overflow: hidden;
    min-height: 260px;
}
/* Solo el widget de respaldo (muro completo) se ajusta a 100%: usa
   data-adapt-container-width, así que sí puede achicarse de verdad. */
.fb-live-feed .fb-page-wrap .fb-page,
.fb-live-feed .fb-page-wrap .fb-page > span,
.fb-live-feed .fb-page-wrap iframe { max-width: 100% !important; }

/* Skeleton mientras el SDK de Facebook aún no se activó (carga diferida) */
@keyframes fbSkeletonShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.fb-skel {
    border-radius: 10px;
    background: linear-gradient(90deg, #eef1f6 25%, #e4e9f1 37%, #eef1f6 63%);
    background-size: 400% 100%;
    animation: fbSkeletonShine 1.5s ease-in-out infinite;
}
.fb-live-feed .fb-page-wrap .fb-skel { width: 100%; height: 600px; }
.fb-page .fb-xfbml-parse-ignore { display: none; }   /* respaldo oculto hasta que el SDK cargue */
.fb-post-card .fb-skel { width: 100%; height: 100%; min-height: 200px; border-radius: var(--radius); }
.fb-loaded .fb-skel { display: none; }

@media (max-width: 460px) {
    .fb-live-feed .fb-post-card { height: 480px; }
}

.fb-row-title {
    font-family: var(--font-head); font-size: 1.4rem; color: var(--ink);
    text-align: center; margin: 50px 0 26px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.fb-row-title i { color: var(--accent-color); }

@media (max-width: 980px) {
    .fb-live-band { grid-template-columns: 1fr; gap: 28px; max-width: 520px; }
    .fb-live-text { text-align: center; }
    .fb-live-benefits li { justify-content: center; }
}

/* ---- Carrusel automático de publicaciones de Facebook ---- */
.fb-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1240px;
    margin: 0 auto;
    padding-bottom: 46px;      /* espacio para los puntos */
}
.fb-viewport { overflow: hidden; flex: 1; min-width: 0; }
.fb-track {
    display: flex;
    gap: 24px;
    min-width: 0;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    align-items: flex-start;
}
.fb-slide {
    flex: 0 0 calc((100% - 48px) / 3);   /* 3 visibles en escritorio */
    min-width: 0;                         /* permite que el ítem se achique de verdad */
    display: flex;
    justify-content: center;
}
.fb-carousel .fb-post-card {
    width: 100%;
    max-width: 380px;
    min-width: 0;
    height: 560px;
    min-height: 0;
    /* Igual que en la Fila 1: el embed de Facebook no baja de 350px de
       ancho, así que si la tarjeta es más angosta, se desplaza en
       horizontal SOLO dentro de ella (nunca en toda la página). */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0;
    align-items: stretch;
}
.fb-carousel .fb-post-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 52px;
    background: linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events: none;
}
.fb-carousel .fb-post-card .fb-post { width: 350px; max-width: none; flex-shrink: 0; display: flex; justify-content: center; padding-top: 4px; }

.fb-nav {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--primary-color);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
    z-index: 3;
}
.fb-nav:hover { background: var(--primary-color); color: #fff; transform: scale(1.08); }

.fb-dots {
    position: absolute;
    bottom: 8px; left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.fb-dot {
    width: 9px; height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c7d2df;
    cursor: pointer;
    transition: all .3s var(--ease);
}
.fb-dot.active { background: var(--primary-color); width: 26px; border-radius: 5px; }

@media (max-width: 1023px) {
    .fb-slide { flex-basis: calc((100% - 24px) / 2); }   /* 2 visibles en tablet */
}
@media (max-width: 639px) {
    .fb-slide { flex-basis: 100%; }                       /* 1 visible en móvil */
    .fb-carousel .fb-post-card { max-width: 100%; }
    .fb-nav { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------------ */
/* 10. Banda CTA de inscripción                                       */
/* ------------------------------------------------------------------ */
.enroll-cta {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary-color));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.enroll-cta::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(50% 120% at 10% 0%, rgba(245, 179, 1, .20), transparent 55%),
        radial-gradient(60% 120% at 100% 100%, rgba(255, 255, 255, .12), transparent 55%);
    pointer-events: none;
}
.enroll-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 58px 0;
}
.enroll-cta-text { max-width: 640px; }
.enroll-cta-text .section-eyebrow { color: var(--accent-color); }
.enroll-cta-text h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin-bottom: 12px;
}
.enroll-cta-text p { color: rgba(255, 255, 255, .9); font-size: 1.08rem; margin: 0; }
.enroll-cta-actions { display: flex; flex-direction: column; gap: 14px; min-width: 240px; }
.enroll-cta-actions .btn { width: 100%; }
.enroll-cta-actions small { color: rgba(255, 255, 255, .75); text-align: center; font-size: .85rem; }

/* ------------------------------------------------------------------ */
/*  Testimonios (prueba social)                                       */
/* ------------------------------------------------------------------ */
.testimonios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonio-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonio-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonio-card::before {
    content: '\201C';
    position: absolute; top: 2px; right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 5.5rem; line-height: 1;
    color: var(--primary-soft);
    z-index: 0;
}
.testimonio-stars { color: var(--accent-color); display: flex; gap: 3px; margin-bottom: 14px; font-size: .95rem; position: relative; z-index: 1; }
.testimonio-texto { color: var(--text-dark); line-height: 1.75; margin-bottom: 22px; flex: 1; position: relative; z-index: 1; }
.testimonio-autor { display: flex; align-items: center; gap: 14px; }
.testimonio-avatar {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-deep));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
    box-shadow: 0 6px 14px rgba(0, 87, 168, .28);
}
.testimonio-autor strong { display: block; font-family: var(--font-head); color: var(--ink); }
.testimonio-rol { font-size: .85rem; color: var(--text-light); }

.trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 46px; }
.trust-chips span {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--border-color);
    border-radius: var(--radius-pill); padding: 10px 20px;
    font-family: var(--font-head); font-weight: 600; font-size: .92rem;
    color: var(--text-dark); box-shadow: var(--shadow-sm);
}
.trust-chips i { color: var(--primary-color); }

@media (max-width: 1023px) { .testimonios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .testimonios-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* 11. Contacto y formularios                                         */
/* ------------------------------------------------------------------ */
.contacto-form { border: 1px solid var(--border-color); }
.form-control {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.form-control:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 87, 168, .12);
}
.contacto-icon { box-shadow: 0 8px 18px rgba(0, 87, 168, .22); }

/* Aviso de envío del formulario de contacto */
.form-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 22px;
}
.form-alert i { font-size: 1.15rem; flex-shrink: 0; }
.form-alert-ok  { background: #e6f6ea; color: #1d6b2f; border: 1px solid #b6e2c1; }
.form-alert-err { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; }

/* ------------------------------------------------------------------ */
/*  Captura de leads: newsletter, mensajes y popup                    */
/* ------------------------------------------------------------------ */
.footer-newsletter-sub { font-size: .85rem; opacity: .85; margin: 4px 0 12px; }
.pl-lead-msg { font-size: .85rem; margin-top: 8px; min-height: 1em; font-weight: 600; }
.pl-lead-msg.ok  { color: #7dffb0; }   /* sobre el footer oscuro */
.pl-lead-msg.err { color: #ffb3b0; }

.pl-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.pl-modal.is-open { display: block; }
.pl-modal-overlay { position: absolute; inset: 0; background: rgba(4, 20, 40, .62); backdrop-filter: blur(3px); animation: plFade .3s var(--ease); }
.pl-modal-box {
    position: relative; z-index: 1;
    max-width: 440px; margin: 12vh auto 0;
    background: #fff; border-radius: 20px; padding: 38px 34px 28px;
    text-align: center; box-shadow: var(--shadow-lg);
    animation: plPop .35s var(--ease);
}
.pl-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--muted); cursor: pointer; }
.pl-modal-close:hover { color: var(--text-dark); }
.pl-modal-icon {
    width: 72px; height: 72px; margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-deep));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; box-shadow: var(--shadow-brand);
}
.pl-modal-box h3 { font-family: var(--font-head); color: var(--ink); font-size: 1.5rem; margin-bottom: 10px; }
.pl-modal-box > p { color: var(--text-light); margin-bottom: 22px; }
.pl-modal-form input[type=email] {
    width: 100%; padding: 14px 16px; margin-bottom: 12px;
    border: 1.5px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-light); font-size: 1rem; font-family: var(--font-body);
}
.pl-modal-form input[type=email]:focus { outline: none; border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 4px rgba(0,87,168,.12); }
.pl-modal-note { display: inline-block; margin-top: 14px; color: var(--muted); font-size: .8rem; }
.pl-modal-box .pl-lead-msg.ok  { color: #1d9d4f; }
.pl-modal-box .pl-lead-msg.err { color: #b3261e; }
@keyframes plFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes plPop  { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .pl-modal-box { margin: 8vh 16px 0; padding: 32px 22px; } }

/* ------------------------------------------------------------------ */
/* 12. WhatsApp flotante                                              */
/* ------------------------------------------------------------------ */
.whatsapp-float { box-shadow: 0 10px 26px rgba(37, 211, 102, .45); }
.whatsapp-float-label {
    position: absolute;
    right: 74px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: #16243a;
    color: #fff;
    padding: 9px 15px;
    border-radius: 12px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .86rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    box-shadow: var(--shadow-md);
}
.whatsapp-float-label::after {
    content: '';
    position: absolute;
    right: -6px; top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #16243a;
}
.whatsapp-float:hover .whatsapp-float-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 600px) { .whatsapp-float-label { display: none; } }

/* ------------------------------------------------------------------ */
/* 13. Footer (acentos)                                               */
/* ------------------------------------------------------------------ */
.footer { background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%); }
.footer-col h4 { font-family: var(--font-head); }
.footer-social a:hover { background: var(--accent-color); color: #1d1500; }

/* ------------------------------------------------------------------ */
/* 14. Scroll reveal                                                  */
/* ------------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    html { scroll-behavior: auto; }
    .hero-slide { transition: none; }
}

/* ------------------------------------------------------------------ */
/* 15. Responsive                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 992px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 768px) {
    .enroll-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; padding: 44px 0; }
    .enroll-cta-actions { width: 100%; }
    .nav-cta .btn { width: 100%; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .stat-number { font-size: 2.2rem; }
}

/* ==================================================================== */
/* 16. PREMIUM — Letras doradas animadas + iconos premium               */
/*     (capa aditiva: no elimina ni cambia ninguna sección)             */
/* ==================================================================== */

/* Animaciones base */
@keyframes goldSweep {
    to { background-position: 200% center; }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes goldGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 179, 1, 0)); }
    50%      { filter: drop-shadow(0 0 12px rgba(245, 179, 1, .6)); }
}
@keyframes goldRingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, .45); }
    50%      { box-shadow: 0 0 22px 2px rgba(245, 179, 1, .55); }
}

/* Utilidad: degradado de oro de lujo recortado al texto */
.gold-anim,
.hero-content h2,
.stat-number,
.enroll-cta-text h2,
.footer-logo h3,
.footer-col h4 {
    background-image: linear-gradient(
        100deg,
        #aa771c 0%, #d4af37 18%, #fcf6ba 32%, #ffffff 42%,
        #fcf6ba 52%, #d4af37 68%, #aa771c 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f3d27a;            /* respaldo si no hay soporte de clip */
    animation: goldSweep 5s linear infinite;
}

/* En el hero, sombra de profundidad sin halo sobre el texto recortado */
.hero-content h2 {
    text-shadow: none;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}

/* Texto dorado LEGIBLE sobre fondos claros (oros más oscuros) */
.section-header h2,
.section-eyebrow {
    background-image: linear-gradient(
        100deg,
        #8a6d1a 0%, #b8860b 22%, #d4af37 42%, #e7c349 50%,
        #d4af37 60%, #b8860b 80%, #8a6d1a 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #a67c00;            /* respaldo */
    animation: goldSweep 6s linear infinite;
}
/* El subrayado dorado del título (::after) conserva su propio color */

/* Eyebrow del hero: letras y borde dorados sobre la píldora */
.hero-eyebrow {
    color: #ffe9a8;
    border-color: rgba(245, 179, 1, .45);
    box-shadow: 0 0 18px rgba(245, 179, 1, .18) inset;
}
.hero-eyebrow i { color: #ffd25e; text-shadow: 0 0 12px rgba(245, 179, 1, .6); }

/* ---------- Iconos premium ---------- */

/* Iconos-acento dorados con leve resplandor */
.stat-item i,
.enroll-cta-actions small i,
.curso-info .curso-precio.is-free i {
    text-shadow: 0 0 14px rgba(245, 179, 1, .5);
}
.stat-item i { animation: floatY 4.5s ease-in-out infinite; }

/* Círculos de icono (acceso rápido, programas, contacto):
   anillo dorado al hover + flotación + resplandor */
.quick-btn-icon,
.programa-icon,
.contacto-icon {
    position: relative;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quick-btn-icon::after,
.programa-icon::after,
.contacto-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
    pointer-events: none;
}
.quick-btn:hover .quick-btn-icon,
.programa-card:hover .programa-icon,
.contacto-item:hover .contacto-icon {
    transform: translateY(-4px) scale(1.05);
    animation: goldGlowPulse 1.8s ease-in-out infinite;
}
.quick-btn:hover .quick-btn-icon::after,
.programa-card:hover .programa-icon::after,
.contacto-item:hover .contacto-icon::after {
    border-color: rgba(245, 179, 1, .9);
    box-shadow: 0 0 20px rgba(245, 179, 1, .5);
}

/* Insignia de nivel del curso con borde dorado sutil */
.curso-nivel {
    border: 1px solid rgba(212, 175, 55, .55);
    color: #8a6d1a !important;
}

/* Iconos de redes del footer: brillo dorado al hover */
.footer-social a:hover {
    box-shadow: 0 0 18px rgba(245, 179, 1, .55);
}

/* ---------- Botones premium ---------- */

/* Botón dorado: barrido de brillo al pasar el cursor */
.btn-secondary { position: relative; overflow: hidden; }
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0; left: -130%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: skewX(-18deg);
    transition: left .6s var(--ease);
    pointer-events: none;
}
.btn-secondary:hover::after { left: 150%; }

/* Botón flotante de WhatsApp con anillo dorado pulsante */
.whatsapp-float { animation: goldRingPulse 2.4s ease-in-out infinite; }

/* ---------- Respeto a accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    .gold-anim, .logo span,
    .hero-content h2, .stat-number, .enroll-cta-text h2,
    .footer-logo h3, .footer-col h4,
    .section-header h2, .section-eyebrow { animation: none; }
    .stat-item i,
    .quick-btn:hover .quick-btn-icon,
    .programa-card:hover .programa-icon,
    .contacto-item:hover .contacto-icon,
    .whatsapp-float { animation: none; }
}