/* ==========================================================================
   Capa UX / accesibilidad del portal (WCAG 2.1 AA)
   Mantener alineada con revista y Aletheia: foco, skip-link y movimiento reducido.
   ========================================================================== */

/* Salto al contenido */
.skip-link {
    position: absolute;
    top: -60px;
    left: 8px;
    z-index: 10000;
    background: #12163b;
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    transition: top .2s ease;
}
.skip-link:focus { top: 8px; outline: 3px solid #ff8a6b; outline-offset: 2px; }
#main-content:focus { outline: none; }

/* Foco visible para teclado */
:focus-visible {
    outline: 3px solid #1e3a8a;
    outline-offset: 2px;
    border-radius: 4px;
}
.bg-primary :focus-visible,
#mobile-menu :focus-visible,
footer :focus-visible,
#top-bar :focus-visible { outline-color: #ff8a6b; }

/* Textos diminutos: mínimo legible 12px */
.text-\[0\.55rem\], .text-\[0\.6rem\], .text-\[0\.65rem\] { font-size: .75rem !important; }

/* Selector de idioma: área táctil >= 44px */
.lang-switch-premium { font-size: .8rem !important; padding: 4px 8px !important; gap: 4px !important; }
.lang-switch-premium .lang-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.lang-link { color: #64748b !important; }

/* Botón menú móvil: área táctil */
.mobile-menu-btn { min-width: 44px; min-height: 44px; }

/* Menú móvil: pantalla completa desplazable bajo la barra */
#mobile-menu { position: fixed; inset: 64px 0 0 0; overflow-y: auto; z-index: 999; }
#mobile-menu a { display: block; padding: 6px 0; min-height: 44px; }

/* Banner de cookies: compacto para no tapar contenido */
#cookie-banner { padding: 12px 16px !important; }
@media (max-width: 640px) { #cookie-banner { padding: 10px 12px !important; } }

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .hover\:-translate-y-2:hover, .hover\:-translate-y-1:hover, .hover\:-translate-y-0\.5:hover { transform: none !important; }
}

/* Contraste del microtexto del hero sobre fondo oscuro */
#inicio [style*="rgba(255,255,255,0.35)"],
#inicio [style*="rgba(255,255,255,0.45)"],
#inicio [style*="rgba(255,255,255,0.55)"],
#inicio [style*="rgba(255,255,255,0.60)"] { color: rgba(255,255,255,.78) !important; }

/* Logo blanco (solo móvil sobre hero): oculto por completo en escritorio para evitar el "fantasma" */
@media (min-width: 1025px) {
    .navbar .logo-white { display: none !important; }
}
/* Móvil: solo un logo visible a la vez (el oculto no ocupa espacio) */
@media (max-width: 1024px) {
    .navbar.home-nav:not(.scrolled) .logo-dark { visibility: hidden; position: absolute; }
    .navbar.home-nav.scrolled .logo-white { visibility: hidden; position: absolute; }
    .navbar:not(.home-nav) .logo-white { display: none !important; }
}

/* Buscador: filtros, orden y paginación */
.search-toolbar { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin:0 0 24px; }
.search-filters { display:flex; flex-wrap:wrap; gap:8px; }
.search-chip { padding:8px 16px; min-height:40px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; color:#12163b; font-weight:600; font-size:.875rem; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.search-chip:hover:not(:disabled) { border-color:#e43c25; color:#e43c25; }
.search-chip.is-active { background:#12163b; border-color:#12163b; color:#fff; }
.search-chip:disabled { opacity:.45; cursor:not-allowed; }
.search-sort { display:flex; align-items:center; gap:8px; font-size:.875rem; color:#475569; }
.search-sort select { padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; min-height:40px; }
.search-pager { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:32px 0 8px; }

/* Enlace externo: icono discreto tras el texto */
#main-content a.ext-link::after {
    content: "\f08e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .65em; margin-left: .35em; opacity: .7; text-decoration: none; display: inline-block;
}

/* Migas de pan */
.breadcrumbs-bar { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:10px 16px; font-size:.8125rem; }
.breadcrumbs-bar ol { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; }
.breadcrumbs-bar li + li::before { content:"\203A"; margin-right:6px; color:#94a3b8; }
.breadcrumbs-bar a { color:#12163b; font-weight:600; }
.breadcrumbs-bar a:hover { color:#e43c25; text-decoration:underline; }
.breadcrumbs-bar [aria-current] { color:#475569; }

/* Titulares sobre fondos oscuros: heredan el color claro del contenedor (evita azul sobre azul).
   :where() mantiene especificidad mínima, así cualquier clase text-* explícita sigue mandando. */
:where(.text-white, .bg-primary, .bg-slate-900, .bg-slate-800, .bg-gray-900) :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* ==========================================================================
   Hero unificado de páginas internas
   Todas las variantes antiguas adoptan el patrón estándar: azul de marca sólido,
   trama de puntos sutil, mismo espaciado y títulos blancos.
   ========================================================================== */
.course-hero, .diploma-hero, .events-hero, .events-hero1, .pubs-hero, .seminar-hero,
.taller-hero, .cookies-hero, .header-banner-text {
    background-color: #12163b !important;
    background-image: radial-gradient(rgba(255,255,255,.05) 0.5px, transparent 0.5px) !important;
    background-size: 30px 30px !important;
    color: #fff !important;
    padding-top: clamp(80px, 9vw, 128px) !important;
    padding-bottom: clamp(56px, 7vw, 96px) !important;
    margin-top: 0 !important;
}
.course-hero::before, .course-hero::after, .diploma-hero::before, .diploma-hero::after,
.events-hero::before, .events-hero::after, .pubs-hero::before, .pubs-hero::after,
.seminar-hero::before, .seminar-hero::after, .taller-hero::before, .taller-hero::after {
    background-image: none !important;
}
:is(.course-hero, .diploma-hero, .events-hero, .events-hero1, .pubs-hero, .seminar-hero, .taller-hero, .cookies-hero, .header-banner-text) :is(h1, h2) {
    color: #fff !important;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
:is(.course-hero, .diploma-hero, .events-hero, .events-hero1, .pubs-hero, .seminar-hero, .taller-hero, .cookies-hero, .header-banner-text) p {
    color: rgba(255,255,255,.85) !important;
}

/* ==========================================================================
   Botón "Cotizar Servicios" del menú: una sola línea, altura contenida dentro
   de la barra, sombra suave y estados de foco/hover claros.
   ========================================================================== */
.navbar .nav-link-cta {
    white-space: nowrap;
    flex-shrink: 0;
    height: 40px;
    padding: 0 20px;
    margin: 0 4px;
    gap: 8px;
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    background: #e43c25;
    border: 1px solid #e43c25;
    box-shadow: 0 2px 8px rgba(228, 60, 37, .28);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.navbar .nav-link-cta i { margin-right: 0; font-size: .85em; }
.navbar .nav-link-cta:hover {
    background: #c9321c;
    border-color: #c9321c;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(228, 60, 37, .32);
}
.navbar .nav-link-cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(228, 60, 37, .3); }
.navbar .nav-link-cta:focus-visible { outline: 3px solid #12163b; outline-offset: 3px; border-radius: 999px; }

/* Anchos medios: menos espacio entre ítems y sin ícono en el botón para que todo quepa */
@media (min-width: 1025px) and (max-width: 1279px) {
    .nav-links { gap: 12px !important; }
    .nav-link-item { font-size: 15px !important; }
    .nav-link-item i { margin-right: 5px !important; }
    .navbar .nav-link-cta { padding: 0 16px; }
    .navbar .nav-link-cta i { display: none; }
    .lang-switch-premium { margin-left: 8px !important; }
}

/* ==========================================================================
   Hero de páginas internas — versión optimizada (UX)
   · Compacto por defecto: el contenido útil queda a la vista sin scroll excesivo.
   · .ee-hero--lg: solo páginas de conversión (Editorial, Cursos, Servicios...).
   · Las migas de pan se integran al hero (misma banda azul, sin franja gris).
   ========================================================================== */
.ee-hero,
.course-hero, .diploma-hero, .events-hero, .events-hero1, .pubs-hero, .seminar-hero,
.taller-hero, .cookies-hero, .header-banner-text {
    padding-top: clamp(40px, 5vw, 72px) !important;
    padding-bottom: clamp(44px, 5.5vw, 80px) !important;
}
.ee-hero--lg,
.course-hero, .diploma-hero, .seminar-hero, .taller-hero {
    padding-top: clamp(56px, 7vw, 104px) !important;
    padding-bottom: clamp(64px, 8vw, 112px) !important;
}

/* Título: escala fluida, sin saltos exagerados */
.ee-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
}
.ee-hero--lg h1 { font-size: clamp(2.25rem, 5vw, 3.75rem) !important; }

/* Etiqueta superior legible (antes 11px) */
.ee-hero span.uppercase,
.ee-hero p.uppercase {
    font-size: .8125rem !important;
    letter-spacing: .14em !important;
    margin-bottom: .75rem !important;
}

/* Subtítulo: ancho de lectura cómodo y contraste alto */
.ee-hero p:not(.uppercase) {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    max-width: 62ch;
    opacity: 1 !important;
    color: rgba(255,255,255,.88);
}

/* Brillo sutil a la derecha: equilibra el hero sin añadir contenido */
.ee-hero::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -8%;
    width: min(46vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228,60,37,.22) 0%, rgba(228,60,37,0) 65%);
    pointer-events: none;
    z-index: 0;
}

/* Migas de pan integradas: si un hero las sigue, la barra toma el mismo azul */
.breadcrumbs-bar:has(~ .ee-hero),
.breadcrumbs-bar:has(~ :is(.course-hero, .diploma-hero, .events-hero, .pubs-hero, .seminar-hero, .taller-hero, .cookies-hero)) {
    background: #12163b;
    border-bottom: 0;
    padding-top: 14px;
    padding-bottom: 0;
}
.breadcrumbs-bar:has(~ .ee-hero) a,
.breadcrumbs-bar:has(~ :is(.course-hero, .diploma-hero, .events-hero, .pubs-hero, .seminar-hero, .taller-hero, .cookies-hero)) a { color: #fff; }
.breadcrumbs-bar:has(~ .ee-hero) [aria-current],
.breadcrumbs-bar:has(~ :is(.course-hero, .diploma-hero, .events-hero, .pubs-hero, .seminar-hero, .taller-hero, .cookies-hero)) [aria-current] { color: rgba(255,255,255,.75); }
.breadcrumbs-bar:has(~ .ee-hero) li + li::before,
.breadcrumbs-bar:has(~ :is(.course-hero, .diploma-hero, .events-hero, .pubs-hero, .seminar-hero, .taller-hero, .cookies-hero)) li + li::before { color: rgba(255,255,255,.5); }
.breadcrumbs-bar:has(~ .ee-hero) + .ee-hero,
.breadcrumbs-bar:has(~ .ee-hero) ~ .ee-hero { padding-top: clamp(24px, 3vw, 40px) !important; }

.ee-hero { text-align: left; }
.ee-hero.text-center { text-align: center; }

/* Texto secundario dentro del hero: contraste mínimo AA (antes opacity 40-60%) */
.ee-hero :is(.opacity-30, .opacity-40, .opacity-50, .opacity-60, .opacity-70) { opacity: .85 !important; }
.ee-hero :is(.text-slate-400, .text-slate-500, .text-gray-400, .text-gray-500) { color: rgba(255,255,255,.8) !important; }

/* ==========================================================================
   Botones flotantes: una sola columna, sin solapamientos
   Orden de arriba a abajo: subir · asistente IA · WhatsApp.
   ========================================================================== */
.fab-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;           /* solo los botones capturan clics */
}
.fab-stack > *, .fab-wa-wrap { pointer-events: auto; }

.fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(18, 22, 59, .28);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .25s ease;
    text-decoration: none;
}
.fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 24px rgba(18, 22, 59, .34); }
.fab:active { transform: scale(.97); }
.fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #12163b; }

.fab--wa  { width: 58px; height: 58px; background: #25D366; font-size: 1.9rem; box-shadow: 0 6px 20px rgba(37, 211, 102, .45); }
.fab--wa:hover { background: #1fb457; }
.fab--ai  { background: #12163b; }
.fab--ai:hover { background: #e43c25; }

/* Subir: discreto y solo tras hacer scroll (override del #back-to-top fijo de main.css) */
#fab-top {
    position: relative !important;
    inset: auto !important;
    width: 44px; height: 44px;
    background: #fff; color: #12163b;
    border: 1px solid #e2e8f0;
    font-size: 1rem;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    z-index: auto;
}
#fab-top.visible { opacity: 1; pointer-events: auto; transform: none; }
#fab-top:hover { background: #12163b; color: #fff; transform: translateY(-2px); }

/* Etiqueta al pasar el cursor o enfocar (solo con puntero) */
@media (hover: hover) and (min-width: 768px) {
    .fab[data-label]::before {
        content: attr(data-label);
        position: absolute; right: calc(100% + 12px); top: 50%;
        transform: translate(6px, -50%);
        background: #12163b; color: #fff;
        font-size: .8125rem; font-weight: 600; white-space: nowrap;
        padding: 6px 12px; border-radius: 8px;
        opacity: 0; pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
    }
    .fab:hover::before, .fab:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
    .fab--wa::before { display: none; }      /* WhatsApp usa su burbuja contextual */
}

/* Burbuja contextual de WhatsApp: aparece unos segundos y luego solo al pasar el cursor */
.fab-wa-wrap { position: relative; display: flex; align-items: center; }
.fab-bubble {
    position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translate(8px, -50%);
    width: max-content; max-width: min(280px, calc(100vw - 120px));
    background: #fff; color: #12163b;
    border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 9px 14px;
    font-size: .8125rem; font-weight: 600; line-height: 1.35;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.fab-bubble::after {            /* colita hacia el botón */
    content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px;
    background: #fff; border-top: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
    transform: translateY(-50%) rotate(45deg);
}
.fab-bubble.is-visible,
.fab-wa-wrap:hover .fab-bubble,
.fab-wa-wrap:focus-within .fab-bubble { opacity: 1; transform: translate(0, -50%); }

/* Ventana del asistente: junto a la columna, nunca encima de los botones */
#ai-chat-window {
    right: 92px !important;
    bottom: 20px !important;
    width: min(380px, calc(100vw - 112px)) !important;
    height: min(580px, calc(100vh - 140px)) !important;
    border-radius: 16px;
}

/* Móvil: más compacto, sube sobre la barra inferior y el chat ocupa el ancho */
@media (max-width: 767px) {
    .fab-stack { right: 14px; bottom: 14px; gap: 10px; }
    .fab { width: 48px; height: 48px; font-size: 1.2rem; }
    .fab--wa { width: 54px; height: 54px; font-size: 1.7rem; }
    body.sticky-bar-on .fab-stack { bottom: 84px; }
    .fab-bubble { display: none; }                    /* en móvil sin burbuja: no tapa contenido */
    #ai-chat-window {
        right: 8px !important; left: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        height: min(80vh, 560px) !important;
        z-index: 1001;
    }
}

/* Mientras el banner de cookies está visible, la columna se sube sobre él (clase puesta por JS) */
body.cookie-on .fab-stack { bottom: calc(var(--cookie-h, 110px) + 16px); }

/* Banner de cookies: flota con margen y es completamente visible y legible (antes quedaba casi fuera de pantalla) */
#cookie-banner {
    background: #fff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .22) !important;
    max-width: 960px !important;
    padding: 16px 20px !important;
    z-index: 9999 !important;
}
#cookie-banner p { color: #334155 !important; margin: 0; }
#cookie-banner #accept-cookies { min-height: 44px; border-radius: 10px; padding: 12px 24px; white-space: nowrap; }
@media (max-width: 767px) {
    #cookie-banner { left: 10px !important; right: 10px !important; bottom: 10px !important; padding: 14px !important; gap: 12px !important; }
}

/* Buscador: tarjetas en vertical. En horizontal el texto quedaba en ~80 px y se recortaba. */
.search-results-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 24px !important; }
.search-result-card-premium { flex-direction: column !important; }
.search-result-card-premium .result-card-media {
    width: 100% !important; height: 190px !important;
    border-right: 0 !important; border-bottom: 1px solid #e2e8f0;
}
.search-result-card-premium .result-card-content { padding: 18px 20px 20px; min-width: 0; }
.search-result-card-premium .result-card-title { height: auto !important; min-height: 2.8em; overflow-wrap: anywhere; }
.search-result-card-premium .result-card-footer { margin-top: auto; padding-top: 12px; }

/* Buscador: cabecera más compacta (el relleno original dejaba ~200 px vacíos) */
.search-hero-premium { padding: 24px 0 8px !important; margin: 0 !important; min-height: 0 !important; }
.search-page-container { padding-top: 8px !important; }
.search-container .section-title { margin-bottom: 8px !important; text-align: center; }