/* ==========================================================================
   webinar-cedditec — sistema de diseño
   Línea gráfica real de CEDDITEC (ver intranet-cedditec/recursos/linea grafica.txt):
     - Azul de fondo:  #00194c
     - Cian claro:     #9de8ff
     - Tipografías de marca: Acumin Variable Concept / Anton / adineue PRO Black
       (comerciales/no disponibles como web font). Títulos y etiquetas usan "Poppins"
       (geométrica, negritas redondeadas — es la que más se parece a las piezas gráficas
       reales de CEDDITEC, como los flyers de cada webinar) y el cuerpo de texto usa
       "Manrope" por legibilidad en párrafos largos.
   ========================================================================== */

:root {
    --navy: #00194c;
    --navy-2: #041d52;
    --navy-soft: #0a2a6b;
    --cyan: #9de8ff;
    --cyan-deep: #5bc9ea;
    --ink: #0b1220;
    --paper: #f6f9fc;
    --muted: #5c6b8a;
    --line: #e3e9f3;
    --radius: 16px;
    --shadow: 0 20px 40px -20px rgba(0, 25, 76, .35);
    --font-display: "Poppins", "Arial", sans-serif;
    --font-label: "Poppins", "Arial", sans-serif;
    --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* scroll-padding-top: el topbar es sticky (se queda pegado arriba) — sin esto, saltar a un
   ancla (#quienes-somos, #serie, #inscripcion) deja el título tapado detrás del topbar. */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- Animación general (reveal-on-scroll), ver assets/js/reveal.js ---------- */
.reveal-init { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal-init.reveal-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal-init { opacity: 1; transform: none; transition: none; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.eyebrow {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
}

h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
}

/* ---------- Topbar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(0, 25, 76, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(157, 232, 255, .15);
}
.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    height: 72px;
}
.topbar .brand { min-width: 0; flex-shrink: 1; }
.topbar .brand img { display: block; max-height: 44px; width: auto; max-width: 100%; }
@media (max-width: 719px) {
    .topbar .container {
        display: grid;
        grid-template-columns: 32px 1fr 32px;
        justify-content: initial;
    }
    .topbar .brand { grid-column: 2; justify-self: center; }
    .topbar .brand img { max-height: 58px; }
    .topbar-nav { grid-column: 3; justify-self: end; }
}
@media (min-width: 640px) {
    .topbar .container { height: 105px; }
    .topbar .brand img { max-height: 80px; }
}
.brand {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    color: #fff;
}
.brand .wordmark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: .02em;
}
.brand .tagline {
    display: none;
    font-family: var(--font-label);
    font-size: .72rem;
    color: var(--cyan);
    max-width: 220px;
    line-height: 1.15;
}
@media (min-width: 900px) { .brand .tagline { display: block; } }

.topbar-nav { display: flex; align-items: center; gap: 1.8rem; }
.topbar-nav > a:not(.nav-cta) {
    display: none;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: .88rem;
    color: #cfe0ff;
    text-decoration: none;
    transition: color .15s ease;
}
.topbar-nav > a:not(.nav-cta):hover { color: var(--cyan); }
@media (max-width: 719px) { .topbar-nav > a.nav-cta { display: none; } }
@media (min-width: 720px) { .topbar-nav > a:not(.nav-cta) { display: inline-block; } }

.nav-cta {
    font-family: var(--font-label);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--navy);
    background: var(--cyan);
    padding: .6rem 1.2rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(157,232,255,.6); }
@media (max-width: 480px) {
    .nav-cta { padding: .5rem .9rem; font-size: .78rem; }
    .topbar-nav { gap: .7rem; }
}

.topbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.topbar-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar-toggle.is-active span:nth-child(2) { opacity: 0; }
.topbar-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 719px) { .topbar-toggle { display: flex; } }

.topbar-mobile {
    display: none;
    flex-direction: column;
    background: rgba(0, 25, 76, .97);
    border-top: 1px solid rgba(157, 232, 255, .15);
}
.topbar-mobile.is-open { display: flex; }
.topbar-mobile a {
    padding: .95rem 1.4rem;
    color: #fff;
    font-family: var(--font-label);
    font-size: .9rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(157, 232, 255, .08);
}
.topbar-mobile a:last-child { border-bottom: none; }
.topbar-mobile a:hover { color: var(--cyan); }
.topbar-mobile a.topbar-mobile-cta {
    margin: .7rem 1.4rem .9rem;
    padding: .7rem 1.2rem;
    background: var(--cyan);
    color: var(--navy);
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    border-bottom: none;
}
.topbar-mobile a.topbar-mobile-cta:hover { color: var(--navy); opacity: .9; }
@media (min-width: 720px) { .topbar-mobile { display: none !important; } }

/* ---------- Coordinadores (dentro del hero) ---------- */
.hero-coordinadores { margin-top: 2.4rem; }
.hero-coordinadores .eyebrow { font-style: italic; color: var(--cyan); margin-bottom: .9rem; }
.hero-coordinadores .lista { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.hero-coordinadores .coordinador { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; width: 150px; }
@media (max-width: 420px) {
    .hero-coordinadores .lista { justify-content: center; }
    .hero-coordinadores .coordinador { width: 100%; max-width: 220px; }
}
.hero-coordinadores .foto {
    width: 75px; height: 75px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--navy-soft); color: var(--cyan);
    font-family: var(--font-display); font-size: 1.2rem;
}
.hero-coordinadores .foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-coordinadores .nombre { font-weight: 800; font-size: .88rem; color: #fff; }
.hero-coordinadores .cargo { font-size: .7rem; color: #9fb1d9; line-height: 1.35; margin-top: .15rem; }
.hero-coordinadores .institucion { font-size: .68rem; color: var(--cyan); line-height: 1.3; margin-top: .1rem; }

/* ---------- Hero con fondo "circuito" ---------- */
.hero {
    position: relative;
    background: radial-gradient(120% 140% at 15% 0%, #06265c 0%, var(--navy) 55%, #000c26 100%);
    color: #fff;
    overflow: hidden;
    padding: 76px 0 90px;
}
.hero-bg {
    position: absolute;
    inset: 0;
    opacity: .55;
    pointer-events: none;
}
.hero-bg svg { width: 100%; height: 100%; }
/* Mapa de continentes (Norte/Centro/Sudamérica + España y Portugal), generado a partir de
   datos geográficos reales y proyectado a SVG — no es un dibujo a mano. "meet" (no "slice")
   para que nunca se recorte: siempre se ve el continente completo con España/Portugal. */
.hero-bg .mapa { stroke: var(--cyan); stroke-width: 1; fill: rgba(157, 232, 255, .04); opacity: .4; }

.hero-inner { position: relative; z-index: 2; }
@media (min-width: 960px) {
    .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        column-gap: 2.5rem;
        align-items: center;
    }
    .hero-titulo-full { grid-column: 1 / -1; margin-bottom: .6rem; }
    .hero-coordinadores { margin-top: 0; }
}

/* Entrada escalonada del texto del banner: fundido + leve subida, formal (sin rebote). */
.hero-inner > * {
    opacity: 0;
    transform: translateY(16px);
    animation: heroEntrada .7s ease forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .15s; }
.hero-inner > *:nth-child(3) { animation-delay: .25s; }
.hero-inner > *:nth-child(4) { animation-delay: .35s; }
.hero-inner > *:nth-child(5) { animation-delay: .45s; }
.hero-inner > *:nth-child(6) { animation-delay: .55s; }
.hero-inner > *:nth-child(7) { animation-delay: .65s; }
@keyframes heroEntrada {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-inner > * { animation: none; opacity: 1; transform: none; }
}

.badge-libre {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--cyan);
    color: var(--navy);
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    padding: .4rem .9rem;
    border-radius: 999px;
}
.badge-pago {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    padding: .4rem .9rem;
    border-radius: 999px;
}

/* ---------- Countdown ---------- */
.countdown {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.8rem;
}
.countdown .unidad {
    background: rgba(157, 232, 255, .08);
    border: 1px solid rgba(157, 232, 255, .3);
    border-radius: 12px;
    padding: .7rem 1rem;
    min-width: 76px;
    text-align: center;
}
.countdown .unidad .num {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--cyan);
    line-height: 1;
}
.countdown .unidad .label {
    font-family: var(--font-label);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b9c8ec;
    margin-top: .25rem;
}
.countdown-en-vivo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.8rem;
    background: rgba(255, 90, 90, .15);
    border: 1px solid rgba(255, 120, 120, .4);
    color: #ffb3b3;
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .82rem;
    padding: .55rem 1.1rem;
    border-radius: 999px;
}
.countdown-en-vivo .punto {
    width: 9px; height: 9px; border-radius: 50%;
    background: #ff5a5a;
    animation: pulso 1.4s infinite;
}
@keyframes pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.3); }
}

.hero .eyebrow { color: var(--cyan); margin-bottom: .9rem; }
.hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.8rem); color: #fff; }
.hero h1 .accent { color: var(--cyan); display: block; }
.hero p.lead {
    font-family: var(--font-body);
    color: #cfe0ff;
    font-size: 1.05rem;
    max-width: 620px;
    margin: 1.1rem 0 1.8rem;
    line-height: 1.6;
}

/* ---------- Título + descripción del banner, debajo del hero oscuro ---------- */
.banner-titulo { padding: 3.4rem 0; }
.banner-titulo h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--navy); }
.banner-titulo h1 .accent { color: var(--cyan-deep); display: block; }
.banner-titulo p.lead {
    font-family: var(--font-body);
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 680px;
    margin-top: 1.1rem;
    line-height: 1.6;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
    margin-top: 1.6rem;
}
.hero-meta .item { display: flex; align-items: center; gap: .5rem; min-width: 0; }
/* nowrap solo desde donde el hero pasa a 2 columnas (hero-inner) — en móvil, con todo el
   ancho de pantalla disponible, dejarlo envolver evita que el texto se corte/superponga. */
@media (min-width: 960px) {
    .hero-meta { flex-wrap: nowrap; }
    .hero-meta .item .value, .hero-meta .item .label { white-space: nowrap; }
}
.hero-meta .ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(157,232,255,.12);
    border: 1px solid rgba(157,232,255,.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--cyan);
    flex-shrink: 0;
}
.hero-meta .label { font-family: var(--font-label); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #9fb1d9; white-space: nowrap; }
.hero-meta .value { font-weight: 700; font-size: .95rem; white-space: nowrap; }
@media (max-width: 420px) {
    .hero-meta .value { font-size: .82rem; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary { background: var(--cyan); color: var(--navy); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(157,232,255,.55); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
/* Mismo botón, pero para usar sobre fondo claro (secciones blancas fuera del hero). */
.btn-ghost-navy { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn-ghost-navy:hover { background: var(--paper); border-color: var(--navy-soft); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Secciones ---------- */
section { padding: 72px 0; }
.section-head { margin-bottom: 2.2rem; }
.section-head .eyebrow { color: var(--cyan-deep); }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--navy); }
.section-head p { color: var(--muted); max-width: 640px; margin-top: .6rem; }
.section-head-ancho p { max-width: none; }
.objetivo-columna p { color: var(--muted); margin-top: .6rem; }
@media (min-width: 860px) {
    .objetivo-columnas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.6rem; }
}

.fila-banderas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .6rem;
    margin-top: 2.4rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--line);
}
.fila-banderas .bandera { display: block; height: 20px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); cursor: default; }

.section-dark { background: var(--navy); color: #fff; }
.section-dark .section-head h2 { color: #fff; }
.section-dark .section-head p { color: #b9c8ec; }

/* ---------- Grid webinars (serie) ---------- */
.grid-webinars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
}
.card-webinar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card-webinar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-webinar .thumb {
    height: 150px;
    background: linear-gradient(135deg, var(--navy) 0%, #0a3a8a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.card-webinar .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-webinar .thumb .numero {
    position: absolute; top: 10px; left: 10px;
    background: var(--cyan); color: var(--navy);
    font-family: var(--font-label); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .3rem .7rem; border-radius: 999px;
}
.card-webinar .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-webinar .fecha { font-family: var(--font-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan-deep); font-weight: 700; }
.card-webinar h3 { font-family: var(--font-body); font-weight: 800; text-transform: none; letter-spacing: 0; font-size: 1.05rem; line-height: 1.35; color: var(--navy); }
.card-webinar .estado-nota { font-size: .82rem; color: var(--muted); margin-top: auto; padding-top: .6rem; }

/* ---------- Invitados/Ponentes en el hero del webinar (grupos apilados, columna derecha) ---------- */
/* Columna derecha más ancha que la del home (ahí solo van 2 coordinadores) — aquí necesita
   espacio para 3 fotos por fila sin apretarse. */
@media (min-width: 960px) {
    .hero-inner:has(.hero-grupos) { grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); align-items: start; }
}
.hero-grupos { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1.8rem; }
.hero-grupos .hero-coordinadores { margin-top: 0; }
.hero-grupos .lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
}
.hero-grupos .coordinador { width: 150px; flex-direction: column; align-items: center; text-align: center; }
.hero-grupos .foto { width: 96px; height: 96px; font-size: 1.6rem; }
.hero-grupos .nombre { font-size: 1rem; }
.hero-grupos .cargo { font-size: .78rem; }
.hero-grupos .institucion { font-size: .74rem; }
.hero-grupos .cita {
    margin-top: .5rem;
    font-size: .8rem;
    font-style: italic;
    color: var(--cyan);
    line-height: 1.4;
}
@media (max-width: 559px) {
    .hero-grupos .coordinador { width: 100%; max-width: 260px; }
}

/* ---------- Itinerario: lista numerada (estilo flyer, con número grande) ---------- */
.lista-itinerario {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3rem;
}
@media (min-width: 760px) {
    .lista-itinerario {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: column;
        grid-template-rows: repeat(var(--filas-itinerario, 1), auto);
        column-gap: 3rem;
    }
}
.item-itinerario {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}
.item-itinerario:last-child { border-bottom: none; }
.item-itinerario .numero {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--cyan-deep);
    line-height: 1;
    flex-shrink: 0;
    min-width: 2.4rem;
}
.item-itinerario .hora { font-family: var(--font-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-deep); font-size: .78rem; }
.item-itinerario .titulo { font-weight: 800; color: var(--navy); margin-top: .2rem; line-height: 1.3; }
.item-itinerario .ponente { font-size: .84rem; color: var(--muted); margin-top: .2rem; }
.item-itinerario .desc { font-size: .84rem; color: var(--muted); margin-top: .35rem; line-height: 1.5; }

/* ---------- Galería ---------- */
.grid-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.grid-galeria .item { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--navy); }
.grid-galeria .item img { width: 100%; height: 100%; object-fit: cover; }
.grid-galeria .item.video { display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 2.4rem; }

/* ---------- Entidades ---------- */
.strip-entidades { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; }
.chip-entidad {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(157,232,255,.25);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-family: var(--font-label);
    font-size: .82rem;
    letter-spacing: .02em;
}
.chip-entidad img { height: 22px; width: auto; }
.chip-entidad .tipo { color: var(--cyan-deep); font-size: .68rem; text-transform: uppercase; }

/* ---------- Planes ---------- */
.grid-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; max-width: 720px; margin: 0 auto; }
.card-plan { background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 1.8rem; text-align: center; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.card-plan:hover { transform: translateY(-3px); }
.card-plan.selected { border-color: var(--cyan-deep); box-shadow: 0 0 0 4px rgba(157,232,255,.25); }
.card-plan .nombre { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-size: .85rem; }
.card-plan .precio { font-family: var(--font-display); font-size: 2.2rem; color: var(--navy); margin: .4rem 0; }
.card-plan .precio small { font-family: var(--font-body); font-size: .95rem; color: var(--muted); font-weight: 600; }
.card-plan ul { list-style: none; padding: 0; margin: 1rem 0 0; text-align: left; font-size: .85rem; color: var(--muted); }
.card-plan ul li { padding: .3rem 0; padding-left: 1.4rem; position: relative; }
.card-plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan-deep); font-weight: 700; }

/* ---------- Formulario de inscripción ---------- */
.panel-inscripcion {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    max-width: 620px;
    margin: 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-family: var(--font-label); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .35rem; }
.field input, .field select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .7rem .9rem;
    font-family: var(--font-body);
    font-size: .95rem;
    background: var(--paper);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--cyan-deep); background: #fff; }

.alert { border-radius: 10px; padding: .8rem 1rem; font-size: .88rem; margin-bottom: 1rem; }
.alert-error { background: #fdeceb; color: #b3261e; border: 1px solid #f6c9c5; }
.alert-success { background: #e7f8ef; color: #1a7f4a; border: 1px solid #b9e8cc; }

/* ---------- Blog ---------- */
.grid-blog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
}
.card-blog {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card-blog:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-blog .thumb { height: 150px; background: linear-gradient(135deg, var(--navy) 0%, #0a3a8a 100%); overflow: hidden; }
.card-blog .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-blog .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-blog .fecha { font-family: var(--font-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan-deep); font-weight: 700; }
.card-blog h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; line-height: 1.35; color: var(--navy); }
.card-blog .resumen { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* ---------- Modal-carrusel de flyers (se abre solo al cargar el home) ---------- */
.modal-flyer {
    display: flex;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 10, 38, .88);
    align-items: center; justify-content: center; padding: 2rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.modal-flyer.abierto {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .8s ease;
}
.modal-flyer-carrusel {
    position: relative; width: min(92vw, 640px);
    transform: scale(.92) translateY(14px);
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.modal-flyer.abierto .modal-flyer-carrusel { transform: scale(1) translateY(0); }
.modal-flyer-carrusel { overflow: hidden; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.modal-flyer-pista { display: flex; transition: transform .45s ease; }
.modal-flyer-slide { flex: 0 0 100%; }
.modal-flyer-slide img { width: 100%; height: auto; display: block; }
.modal-flyer .cerrar {
    position: absolute; top: .7rem; right: .7rem;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0, 10, 38, .28);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    color: rgba(255, 255, 255, .85);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; cursor: pointer; border: none; z-index: 3;
    transition: background .2s ease, color .2s ease;
}
.modal-flyer .cerrar:hover { background: rgba(0, 10, 38, .55); color: #fff; }
.modal-flyer-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(0, 25, 76, .55); color: #fff; font-size: 1.4rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s ease;
}
.modal-flyer-nav:hover { background: rgba(0, 25, 76, .8); }
.modal-flyer-nav.prev { left: .7rem; }
.modal-flyer-nav.next { right: .7rem; }
.modal-flyer-dots { position: absolute; bottom: .9rem; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; }
.modal-flyer-dots .dot {
    width: 8px; height: 8px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .4); cursor: pointer; padding: 0;
    transition: background .2s ease, transform .2s ease;
}
.modal-flyer-dots .dot.activo { background: var(--cyan); transform: scale(1.25); }

/* ---------- Quiénes somos: pilares ---------- */
.grid-pilares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
    margin-top: 2.4rem;
}
.card-pilar { text-align: center; padding: 0 .5rem; }
.card-pilar .icono {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 14px;
    background: var(--paper);
    color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
}
.card-pilar h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: .6rem; }
.card-pilar p { font-size: .88rem; color: var(--muted); line-height: 1.6; }

/* ---------- "Objetivo" del webinar + imagen institucional a la derecha ---------- */
.objetivo-con-imagen { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.objetivo-con-imagen img { width: 100%; border-radius: var(--radius); }
@media (min-width: 860px) {
    .objetivo-con-imagen { grid-template-columns: 1.3fr 1fr; }
}

/* ---------- Footer ---------- */
.footer { background: #000c26; color: #90a0c9; padding: 40px 0; font-size: .85rem; }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.footer .wordmark { font-family: var(--font-display); color: #fff; font-size: 1.1rem; }
.footer-logo { display: block; max-height: 44px; width: auto; max-width: 100%; }
@media (min-width: 640px) { .footer-logo { max-height: 80px; } }
.footer-carrusel {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 36px 20px;
}
.footer-carrusel-viewport { overflow: hidden; max-width: 100%; }
.footer-carrusel-pista { display: flex; align-items: center; transition: transform .4s ease; }
/* Ancho fijo e igual para todos los slots: el JS del carrusel desplaza la pista asumiendo
   un paso uniforme (el ancho del primer ítem) — si cada logo tuviera su ancho natural
   (según su proporción), ese paso no calzaría con el resto y se verían huecos/cortes. */
.footer-carrusel-item { flex: 0 0 auto; width: 176px; box-sizing: border-box; padding: 0 1rem; display: flex; align-items: center; justify-content: center; }
/* Colores originales del logo, sin filtros — solo se ajusta el tamaño para que se vean
   parejos en altura, sin importar la proporción de cada archivo. */
.footer-carrusel-item img { height: 52px; width: auto; max-width: 100%; display: block; object-fit: contain; }
@media (max-width: 480px) {
    /* El ancho del "slide" debe ser EXACTAMENTE el del viewport para que el cálculo de
       cuántos logos entran dé 1 y no se corte ninguno. */
    .footer-carrusel-item { width: 100%; padding: 0 1rem; }
    .footer-carrusel-item img { max-width: 85%; }
}
.footer-carrusel-nav {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: var(--navy); color: #fff; font-size: 1.4rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s ease;
}
.footer-carrusel-nav:hover { background: var(--navy-soft); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }