/* ================================================================
   APE PORTAL 2026 — Design System aplicado
   HERO: foto institucional + widget-carrusel con imagen FLOTANTE
   (16:9, sobresale, fade+zoom al cambiar), contador discreto,
   dots + flechas + "Próximo evento". Nivel landing premium.
   ================================================================ */

:root {
    --ape-primary:      #1B4B8F;
    --ape-primary-dark: #143a70;
    --ape-ink:          #0E2748;
    --ape-teal:         #10B3A0;
    --ape-green:        #12B56A;
    --ape-bg:           #F4F7FB;
    --ape-surface2:     #EAF0F7;
    --ape-border:       #DCE4F0;
    --ape-muted:        #5B6B84;
    --ape-shadow:       0 2px 10px rgba(14,39,72,.06);
    --ape-shadow-2:     0 12px 30px rgba(14,39,72,.10);
    --ape-shadow-hover: 0 16px 36px rgba(14,39,72,.14);
}

body.rbt-header-sticky { background: var(--ape-bg); }
.hero-scanlines, .hero-vignette, .hero-scroll-indicator { display: none !important; }

/* ================= HERO ================= */
.ape-hero { position: relative; padding: 82px 0 88px; background: var(--ape-ink); overflow: hidden; }
.ape-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url('../assets-main/images/banner/portadaComision.jpeg') center 22% / cover no-repeat; }
.ape-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(11,28,58,.9) 0%, rgba(11,28,58,.68) 46%, rgba(11,28,58,.4) 100%); }
.ape-hero .container { position: relative; z-index: 2; }
.ape-hero-grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 44px; align-items: center; }

.ape-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding: 6px 15px; border-radius: 50px; margin-bottom: 18px; }
.ape-hero-title { color: #fff; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 15px; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.ape-hero-text { color: rgba(255,255,255,.92); font-size: 1.08rem; line-height: 1.6; max-width: 42ch; margin: 0 0 28px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.ape-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ape-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: .95rem; line-height: 1; padding: 13px 22px; border-radius: 11px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.ape-btn i { font-size: 1.03rem; }
.ape-btn-white { background: #fff; color: var(--ape-primary); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.ape-btn-white:hover { background: #eaf1fb; transform: translateY(-2px); }
.ape-btn-outline { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.ape-btn-outline:hover { background: #fff; color: var(--ape-primary); border-color: #fff; }
.ape-btn:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* ---- Widget-carrusel (card blanca; imagen flotante que sobresale) ---- */
.ape-hw { position: relative; background: #fff; border-radius: 22px; box-shadow: 0 34px 70px rgba(8,20,45,.5), 0 0 0 1px rgba(255,255,255,.05); max-width: 600px; margin-left: auto; overflow: hidden; }
.ape-hw-viewport { overflow: hidden; min-height: 236px; }
.ape-hw-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.ape-hw-slide { flex: 0 0 100%; min-width: 0; }
.ape-hw-info { width: 100%; padding: 22px 24px 20px; }

.ape-hw-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }
.ape-hw-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .63rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 50px; background: rgba(27,75,143,.1); color: var(--ape-primary); }
.ape-hw-tag i { font-size: .82rem; }
.ape-hw-tag.t-concurso      { background: rgba(16,179,160,.14); color: #0a7d70; }
.ape-hw-tag.t-investigacion { background: rgba(74,127,196,.16); color: #2f5f9e; }
.ape-hw-tag.t-jornada,
.ape-hw-tag.t-capacitacion  { background: rgba(201,138,30,.16); color: #97690f; }
.ape-hw-status { display: inline-flex; align-items: center; gap: 6px; font-size: .61rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 50px; background: rgba(18,181,106,.14); color: #0a7d4a; }
.ape-hw-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ape-green); box-shadow: 0 0 0 3px rgba(18,181,106,.22); animation: apePulse 2s ease-in-out infinite; }
@keyframes apePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ape-hw-flag { display: inline-flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7a5200; background: linear-gradient(135deg, #FFE7A0, #F4C64A); padding: 5px 12px; border-radius: 50px; margin: 0; box-shadow: 0 3px 10px rgba(210,160,30,.4); }
.ape-hw-flag i { font-size: .74rem; }
/* color de acento por evento (lo define el gestor; por defecto el azul institucional) */
.ape-hw-slide .ape-hw-lema { border-left-color: var(--ev-accent, var(--ape-primary)); }
.ape-hw-slide .ape-hw-cta  { background: var(--ev-accent, var(--ape-primary)); }
.ape-hw-slide .ape-hw-cta:hover { background: var(--ev-accent, var(--ape-primary)); filter: brightness(.92); transform: translateY(-2px); }
/* estados de inscripción */
.ape-hw-status.st-soon { background: rgba(74,127,196,.16); color: #2f5f9e; }
.ape-hw-status.st-soon .dot { background: #4a7fc4; box-shadow: 0 0 0 3px rgba(74,127,196,.22); animation: none; }
.ape-hw-status.st-last { background: rgba(224,124,8,.16); color: #a65c05; }
.ape-hw-status.st-last .dot { background: #E07C08; box-shadow: 0 0 0 3px rgba(224,124,8,.24); }
.ape-hw-status.st-done { background: rgba(91,107,132,.16); color: #4a5670; }
.ape-hw-status.st-done .dot { background: #8894a8; box-shadow: none; animation: none; }

.ape-hw-title { color: var(--ape-ink); font-size: 1.26rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 10px; text-wrap: balance; }
.ape-hw-sub { color: var(--ape-muted); font-size: .83rem; line-height: 1.45; margin: 0 0 12px; }
.ape-hw-lema { position: relative; color: var(--ape-ink); font-style: italic; font-size: .92rem; line-height: 1.5; border-left: 3px solid var(--ape-primary); padding: 5px 0 5px 15px; margin: 0 0 16px; }
.ape-hw-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ape-muted); font-size: .84rem; margin: 0 0 16px; }
.ape-hw-meta i { color: var(--ape-primary); margin-right: 3px; }
.ape-hw-meta .sep { opacity: .45; }

/* contador: bloques bajos, iguales, poco padding */
.ape-hw-cd { display: flex; gap: 9px; margin: 0 0 18px; }
.ape-hw-cd > div { flex: 1; max-width: 60px; background: var(--ape-primary); border-radius: 10px; padding: 9px 5px; text-align: center; }
.ape-hw-cd b { display: block; color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ape-hw-cd span { display: block; color: rgba(255,255,255,.72); font-size: .5rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.ape-hw-cd > div { transition: background .4s ease; }
.ape-hw-cd.cd-mid  > div { background: #E07C08; }   /* faltan 7 a 30 días */
.ape-hw-cd.cd-near > div { background: #D22F26; }   /* faltan menos de 7 días */

.ape-hw-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; background: var(--ape-primary); color: #fff; font-weight: 700; font-size: .98rem; padding: 14px 28px; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 18px rgba(27,75,143,.3); transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.ape-hw-cta:hover { background: var(--ape-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(27,75,143,.36); }

/* cuerpo del card: [contador + botón | imagen] — el texto de arriba va a todo el ancho */
.ape-hw-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: end; margin-top: 2px; }
.ape-hw-body-main { min-width: 0; }
.ape-hw-thumb { display: block; align-self: end; width: 100%; aspect-ratio: 16/9; border-radius: 14px; border: 4px solid #fff; background: #eef2f8; box-shadow: 0 16px 34px rgba(8,20,45,.32), 0 3px 10px rgba(8,20,45,.16); overflow: hidden; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease; }
.ape-hw-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (hover: hover) { .ape-hw-thumb:hover { transform: scale(1.06); box-shadow: 0 24px 48px rgba(8,20,45,.42), 0 6px 16px rgba(8,20,45,.2); } }
.ape-hw-thumb:focus-visible { outline: 3px solid rgba(27,75,143,.5); outline-offset: 3px; }
.ape-hw-thumb.t-congreso      { background: linear-gradient(135deg, #1B4B8F, #143a70); }
.ape-hw-thumb.t-concurso      { background: linear-gradient(135deg, #0f8f80, #0c6f63); }
.ape-hw-thumb.t-investigacion { background: linear-gradient(135deg, #3d6fb4, #2c5490); }
.ape-hw-thumb.t-jornada,
.ape-hw-thumb.t-capacitacion  { background: linear-gradient(135deg, #c98a1e, #9d6a12); }

/* barra inferior: lugar/fecha + navegación "1/N" + barra de progreso */
.ape-hw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--ape-border); background: #fbfcfe; position: relative; z-index: 5; }
.ape-hw-bar-info { display: flex; align-items: center; gap: 8px; color: var(--ape-muted); font-size: .82rem; font-weight: 600; min-width: 0; overflow: hidden; }
.ape-hw-bar-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ape-hw-bar-info i { color: var(--ape-primary); margin-right: 3px; }
.ape-hw-bar-info .sep { opacity: .4; }
.ape-hw-bar-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ape-hw-count { font-size: .8rem; font-weight: 700; color: var(--ape-muted); font-variant-numeric: tabular-nums; }
.ape-hw-count b { color: var(--ape-primary); }
.ape-hw-bar-label { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ape-primary); flex-shrink: 0; }
.ape-hw-bar-label i { font-size: .8rem; }
.ape-hw-prev, .ape-hw-nx { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ape-border); background: #fff; color: var(--ape-primary); cursor: pointer; display: grid; place-items: center; font-size: .85rem; transition: all .16s ease; }
.ape-hw-prev:hover, .ape-hw-nx:hover { background: var(--ape-primary); color: #fff; border-color: var(--ape-primary); }
.ape-hw-prev:focus-visible, .ape-hw-nx:focus-visible { outline: 3px solid rgba(27,75,143,.4); outline-offset: 2px; }
.ape-hw-progress { height: 3px; background: var(--ape-border); position: relative; z-index: 5; }
.ape-hw-progress span { display: block; height: 100%; width: 0; background: var(--ape-primary); }
.ape-hw-progress span.run { animation: apeProg 7s linear forwards; }
@keyframes apeProg { from { width: 0; } to { width: 100%; } }
.ape-hw:hover .ape-hw-progress span.run { animation-play-state: paused; }

/* ================= ACCESOS RÁPIDOS ================= */
.ape-quick-wrap { padding: 30px 0 8px; }
.ape-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ape-quick-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ape-border); border-radius: 12px; padding: 15px 18px; text-decoration: none; color: var(--ape-ink); font-weight: 600; font-size: .98rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow: var(--ape-shadow); }
.ape-quick-item:hover { transform: translateY(-3px); box-shadow: var(--ape-shadow-hover); color: var(--ape-primary); border-color: #c6d4ea; }
.ape-quick-item i { font-size: 1.3rem; color: var(--ape-primary); }

/* ================= BOTONES (fondo claro) ================= */
.ape-btn-primary { background: var(--ape-primary); color: #fff; box-shadow: 0 8px 18px rgba(27,75,143,.28); }
.ape-btn-primary:hover { background: var(--ape-primary-dark); transform: translateY(-2px); }
.ape-btn-soft { background: #fff; color: var(--ape-primary); border-color: var(--ape-border); box-shadow: var(--ape-shadow); }
.ape-btn-soft:hover { background: var(--ape-surface2); border-color: #c6d4ea; transform: translateY(-2px); }
.ape-btn-primary:focus-visible, .ape-btn-soft:focus-visible { outline: 3px solid rgba(27,75,143,.4); outline-offset: 2px; }

/* ================= SOBRE LA APE ================= */
.ape-about { padding: 54px 0 10px; }
.ape-about-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 46px; align-items: center; }
.ape-about-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ape-primary); background: rgba(27,75,143,.08); padding: 6px 13px; border-radius: 50px; margin-bottom: 15px; }
.ape-about-title { color: var(--ape-ink); font-size: 1.85rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.ape-about-text { color: var(--ape-muted); font-size: 1.02rem; line-height: 1.65; margin: 0 0 24px; max-width: 56ch; }
.ape-about-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ape-about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ape-stat { background: #fff; border: 1px solid var(--ape-border); border-radius: 16px; padding: 22px 18px; box-shadow: var(--ape-shadow); text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.ape-stat:hover { transform: translateY(-3px); box-shadow: var(--ape-shadow-hover); }
.ape-stat b { display: block; color: var(--ape-primary); font-size: 1.95rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ape-stat span { display: block; color: var(--ape-muted); font-size: .84rem; margin-top: 8px; font-weight: 600; line-height: 1.35; }
@media (max-width: 860px) { .ape-about-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ================= SERVICIOS COMPACTOS ================= */
.rbt-main-wrapper .rbt-section-gap { padding: 50px 0 !important; }
.servicios-grid { gap: 1.4rem !important; }
.servicio-card { padding: 1.4rem 1.3rem !important; border-radius: 14px !important; border: 1px solid var(--ape-border) !important; box-shadow: var(--ape-shadow) !important; }
.servicio-card:hover { box-shadow: var(--ape-shadow-2) !important; transform: translateY(-4px); }
.servicio-card .servicio-icon { width: 50px !important; height: 50px !important; font-size: 1.25rem !important; border-radius: 12px !important; margin: 0 auto .8rem !important; }
.servicio-card h4 { font-size: 1.05rem !important; color: var(--ape-ink) !important; }
.servicio-card p  { font-size: .92rem !important; color: var(--ape-muted) !important; }
.section-title .title { color: var(--ape-ink) !important; }

/* ================= FIX HEADER ================= */
.rbt-header .mainmenu > li > a { padding: 10px 10px !important; font-size: .95rem !important; }
.rbt-header .header-right { gap: 6px !important; flex-shrink: 0 !important; }
.rbt-header .quick-access { margin-right: 4px !important; }
.rbt-header .rbt-btn-wrapper .rbt-btn { padding: 9px 18px !important; white-space: nowrap !important; font-size: .9rem !important; min-width: 0 !important; }
.rbt-header .rbt-header-wrapper .mainbar-row { flex-wrap: nowrap !important; }

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
    .ape-hero { padding: 54px 0 58px; }
    .ape-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .ape-hw { margin: 0 auto; }
    .ape-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ape-hw-info { padding: 20px 18px 14px; }
    .ape-hw-body { grid-template-columns: 1fr; gap: 16px; }
    .ape-hw-bar { padding: 11px 16px; }
    .ape-hero-actions .ape-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ape-btn, .ape-hw-cta, .ape-hw-track, .ape-hw-prev, .ape-hw-nx, .ape-hw-thumb { transition: none !important; }
    .ape-hw-status .dot { animation: none !important; }
    .ape-hw-progress span.run { animation: none !important; width: 100% !important; }
}