/* ===== TOKENS SEMANTICOS del sistema de color (docs/SISTEMA_COLOR_index.md) ===== */
:root{
  --indigo:#1d2554; --cian:#00b8db; --cian-hover:#0098b5;
  --celeste:#91bde1; --niebla:#bdd7ed; --ambar:#f7a600; --carbon:#424242;
  --accion:var(--cian); --apoyo-osc:var(--celeste); --banda-suave:#e8f4f8;
}
/* ============================================================
   css/index-sepia.css  —  FORK de color (Ana 22/6)
   Paleta institucional + cuenta regresiva + preview marca + retoques.
   Consolidado de los <style> inline que estaban desperdigados en el HTML.
   Un solo lugar para tocar el look del fork.
   ============================================================ */

/* ===== bloque: paleta-fork ===== */
:root{
    --dorado:#00b8db;          /* ACCION = cian FADU (antes el ambar hacia de accion) */
    --cian-fadu:#00b8db;
    --ambar:#f7a600;           /* micro-acento: SOLO la barra */
    --morado-fadu:#2b3573;     /* el degrade del hero queda en familia indigo (sin purpura) */
  }
  /* eyebrow del hero (sobre NAVY) = cian: legible AA. La sepia sobre navy fallaba contraste (WCAG). */
  .hero-areas-label{color:var(--celeste);font-weight:600}
    
/* ===== bloque: preview-marca-uba ===== */
/* tokens fuera de paleta -> oficiales (solo esta página) */
  :root{
    --dorado:#f7a600; --dorado-medio:#f7a600; --dorado-claro:#fccd8e;
    --dorado-oscuro:#cc8a00; --dorado-bg:rgba(247,166,0,.10);
    --uba-azul:#1d2554;
  }
  /* lockup oficial sobre chip blanco (el manual permite la marca sobre blanco) */
  .marca-chip{ background:#fff; padding:7px 11px; border-radius:6px; display:inline-flex; align-items:center; line-height:0; }
  .header-logo-img{ height:42px !important; width:auto !important; }
  .footer-logo-img{ height:50px !important; width:auto !important; }
  /* footer en azul institucional + acentos oficiales */
  .footer{ background:#1d2554 !important; }
  .footer-tagline{ color:#00b8db !important; }   /* cian FADU = identidad de la facultad */
  /* bajada del lockup como TEXTO real (no horneada en la imagen) — Bitter, como el manual */
  .footer-fadu-bajada{
    font-family:'Bitter', Georgia, serif; color:#fff;
    font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
    line-height:1.35; margin:.5rem 0 .2rem; max-width:18em; opacity:.92;
  }
  .footer-ror a{ color:#f7a600 !important; }
  /* botones "dorado" -> naranja institucional */
  .btn-dorado{ background:#00b8db !important; color:#1d2554 !important; }
  .btn-dorado:hover{ background:#0098b5 !important; }

  /* ===== PULIDO HEADER ===== */
  .header-logo{ display:flex !important; align-items:center !important; gap:0 !important; }
  .header-logo-img{ height:36px !important; }
  .header-logo-link-fadu{ display:inline-flex; align-items:center; }
  .header-logo-link-posgrado{ margin-left:14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.28); text-decoration:none; }
  .header-logo-text{ color:#fff !important; font-family:'Bitter',Georgia,serif !important; font-size:.82rem !important; line-height:1.18 !important; font-weight:600 !important; letter-spacing:.01em; display:block; }

  /* ===== PULIDO FOOTER (bloque marca) ===== */
  .footer-logo{ margin:0 0 .75rem !important; }
  .footer-logo-img{ height:44px !important; }
  /* nombres institucionales: contexto chico arriba, unidad protagonista abajo */
  .footer-uba-name{ font-family:'Bitter',Georgia,serif; color:#fff; font-size:.8rem; font-weight:600; line-height:1.25; margin:.1rem 0 0; opacity:.95; }
  .footer-fadu-bajada{ font-family:'Bitter',Georgia,serif; color:#fff; font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; line-height:1.3; margin:.15rem 0 .6rem; max-width:20em; opacity:.72; }
  .footer-brand > p:not([class]){ color:#fff !important; font-family:'Bitter',Georgia,serif !important; font-weight:700 !important; font-size:1.02rem !important; line-height:1.2 !important; margin:0 0 .1rem !important; }
  .footer-tagline{ color:#00b8db !important; font-size:.85rem !important; font-weight:600 !important; margin:.5rem 0 .15rem !important; }
  .footer-hashtag{ color:rgba(255,255,255,.55) !important; font-size:.72rem !important; letter-spacing:.02em !important; margin:0 0 .2rem !important; }
  .footer-social{ margin-top:.85rem !important; }

/* ===== bloque: sin-id ===== */
.cd-anuncio{margin:0;padding:0}
          .cd-anuncio__card{background:#fff;color:#1d2554}
          .cd-anuncio__band{height:10px;display:flex}.cd-anuncio__band i{flex:1}
          .cd-anuncio__band i:nth-child(1){background:#00b8db}
          .cd-anuncio__band i:nth-child(2){background:#f7a600;flex:.7}
          .cd-anuncio__band i:nth-child(3){background:#bdd7ed}
          .cd-anuncio__band i:nth-child(4){background:#91bde1}
          .cd-anuncio__band i:nth-child(5){background:#1d2554;flex:2.2}
          .cd-anuncio__body{max-width:620px;margin:0 auto;padding:34px 28px 30px;text-align:center;font-family:'Bitter',Georgia,serif}
          .cd-anuncio__kicker{font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;color:#1d2554;font-weight:800;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px}
          .cd-anuncio__dot{width:11px;height:11px;border-radius:50%;background:#00b8db;animation:cdAnuncioPulse 1.4s infinite;flex:none}
          .cd-anuncio__dias{font-size:5.2rem;font-weight:900;line-height:.9;color:#1d2554}
          .cd-anuncio__diaslbl{font-size:.78rem;letter-spacing:.35em;color:#1d2554;font-weight:700;margin-top:4px}
          .cd-anuncio__rule{border:0;border-top:1px solid #e6e9f0;margin:22px 0}
          .cd-anuncio__hms{display:flex;justify-content:center}
          .cd-anuncio__hms>div{flex:1;border-left:1px solid rgba(29,37,84,.22)}
          .cd-anuncio__hms>div:first-child{border-left:0}
          .cd-anuncio__n{font-size:2.4rem;font-weight:800;color:#1d2554;font-variant-numeric:tabular-nums;line-height:1}
          .cd-anuncio__l{font-size:.64rem;letter-spacing:.2em;color:#5a6270;font-weight:600;margin-top:6px}
          .cd-anuncio__when{margin-top:24px;font-weight:800;color:#1d2554;font-size:1.5rem;line-height:1.25;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
          .cd-anuncio__when small{display:block;width:100%;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5a6270;margin-bottom:4px}
          .cd-anuncio__pill{display:inline-block;background:#00b8db;color:#1d2554;font-weight:900;padding:3px 14px;border-radius:2px;font-size:1.35rem}
          .cd-anuncio__prep{margin-top:12px;font-size:.92rem;color:#5a6270}
          .cd-anuncio__cta{display:inline-block;margin-top:16px;background:#1d2554;color:#fff;font-weight:800;padding:12px 30px;border-radius:2px;text-decoration:none}
          @keyframes cdAnuncioPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}100%{transform:scale(1);opacity:1}}
          @media (prefers-reduced-motion:reduce){.cd-anuncio__dot{animation:none}}

/* ===== bloque: sin-id ===== */
#idx-proximas-charlas.charlas-prom { max-width: 920px; margin: 2.5rem auto 0; padding: 1.25rem 1.5rem; background: rgba(27,79,114,0.05); border: 1px solid rgba(27,79,114,0.14); border-radius: 4px; }
          #idx-proximas-charlas.charlas-prom:empty { display: none; }

/* ===== bloque: sin-id ===== */
.formacion-express-section{padding:3.5rem 0;background:var(--gris-claro,#f6f7f8)}
        .formacion-express-section .section-subtitle{max-width:640px;margin:.4rem auto 0;color:var(--gris-texto,#555);font-size:1rem}
        .fe-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;margin-top:2rem;align-items:start}
        @media(max-width:860px){.fe-grid{grid-template-columns:1fr}}
        .fe-oferta{display:grid;gap:1rem}
        .fe-card{display:block;background:#fff;border:1px solid var(--gris-borde,#e3e6ea);border-left:3px solid var(--azul-uba,#1d2554);border-radius:3px;padding:1.1rem 1.3rem;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
        a.fe-card:hover{box-shadow:0 6px 18px rgba(27,79,114,.12);transform:translateY(-2px)}
        .fe-card h3{margin:.25rem 0 .4rem;font-size:1.05rem;color:var(--azul-uba,#1d2554)}
        .fe-card p{margin:0;font-size:.9rem;color:var(--gris-texto,#555);line-height:1.45}
        .fe-card-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#2e7d32}
        .fe-card-cta{display:inline-block;margin-top:.6rem;font-size:.85rem;font-weight:600;color:var(--azul-uba,#1d2554)}
        .fe-card-soon{border-left-color:#bbb;opacity:.85}
        .fe-card-tag-soon{color:#767676}
        .fe-medida{border:1px dashed var(--gris-borde,#bdd7ed);border-radius:3px;padding:1.1rem 1.3rem}
        .fe-medida h3{margin:0 0 .4rem;font-size:1rem;color:var(--azul-uba,#1d2554)}
        .fe-medida p{margin:0;font-size:.88rem;color:var(--gris-texto,#555);line-height:1.45}
        .fe-sub{background:var(--azul-uba,#1d2554);color:#fff;border-radius:4px;padding:1.5rem 1.4rem}
        .fe-sub h3{margin:0 0 .3rem;font-size:1.15rem;color:#fff}
        .fe-sub-intro{margin:0 0 1rem;font-size:.88rem;color:rgba(255,255,255,.85);line-height:1.45}
        .fe-sub-form input[type=email]{width:100%;padding:.7rem .8rem;border:0;border-radius:2px;font-size:.95rem;margin-bottom:.8rem;font-family:inherit;box-sizing:border-box}
        .fe-sub-intereses{border:0;margin:0 0 .9rem;padding:0;display:grid;gap:.4rem}
        .fe-sub-intereses legend{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.7);margin-bottom:.3rem;padding:0}
        .fe-sub-intereses label{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:#fff;cursor:pointer}
        .fe-sub-intereses input{accent-color:#fff;flex:0 0 auto}
        #fe-sub-btn{width:100%;padding:.8rem;background:#fff;color:var(--azul-uba,#1d2554);border:0;border-radius:2px;font-weight:700;font-size:.95rem;cursor:pointer;transition:opacity .2s}
        #fe-sub-btn:hover{opacity:.9}
        #fe-sub-btn:disabled{opacity:.6;cursor:default}
        .fe-sub-legal{margin:.8rem 0 0;font-size:.7rem;color:rgba(255,255,255,.6);line-height:1.4}
        .fe-sub-ok{background:rgba(255,255,255,.12);border-radius:3px;padding:1rem;font-size:.95rem;color:#fff;line-height:1.5}
        /* ── Reubicación 31/5: Formación express en Paso 2 (junto al calendario) ── */
        .fe-express-card{border-left:3px solid #2e7d32}
        .fe-express-card h4{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .2rem}
        .fe-express-badge{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#2e7d32;background:rgba(46,125,50,.1);padding:2px 8px;border-radius:10px}
        .fe-express-sub{font-size:.85rem;color:var(--gris-texto,#555);margin:.2rem 0 .6rem;line-height:1.45}
        .fe-express-link{display:block;font-size:.9rem;font-weight:600;color:var(--azul-uba,#1d2554);text-decoration:none;padding:.4rem 0;border-top:1px solid var(--gris-borde,#eee)}
        .fe-express-link:hover{color:#2e7d32}
        .fe-express-medida{display:block;font-size:.8rem;color:var(--gris-texto,#666);text-decoration:none;margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--gris-borde,#ddd)}
        .fe-express-medida:hover{color:var(--azul-uba,#1d2554)}
        /* ── Comunidad: suscripción (azul) + formación a medida (B2B) ── */
        .fe-comunidad-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.5rem;align-items:start;text-align:left}
        @media(max-width:768px){.fe-comunidad-grid{grid-template-columns:1fr}}
        .fe-medida-card{background:#fff;border:1px solid var(--gris-borde,#e3e6ea);border-top:3px solid var(--azul-uba,#1d2554);border-radius:4px;padding:1.5rem 1.4rem}
        .fe-medida-card h3{margin:0 0 .3rem;font-size:1.15rem;color:var(--azul-uba,#1d2554)}
        .fe-medida-intro{margin:0 0 1rem;font-size:.88rem;color:var(--gris-texto,#555);line-height:1.45}
        .fe-medida-form input,.fe-medida-form textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--gris-borde,#d8dde2);border-radius:2px;font-size:.92rem;margin-bottom:.7rem;font-family:inherit;box-sizing:border-box}
        .fe-medida-form textarea{resize:vertical}
        #fa-btn{width:100%;padding:.8rem;background:var(--azul-uba,#1d2554);color:#fff;border:0;border-radius:2px;font-weight:700;font-size:.95rem;cursor:pointer;transition:opacity .2s}
        #fa-btn:hover{opacity:.9}
        #fa-btn:disabled{opacity:.6;cursor:default}
        .fe-medida-ok{background:rgba(27,79,114,.06);border-radius:3px;padding:1rem;font-size:.93rem;color:var(--azul-uba,#1d2554);line-height:1.5}
        /* OC checkbox: full-width fila DENTRO de la card, una línea legible (fix Ana 16/6 —
           antes flotaba fuera del cuadro y se cortaba). align-items:flex-start + texto flexible
           para que envuelva limpio si no entra en una línea. */
        .fe-medida-oc{display:flex;width:100%;box-sizing:border-box;align-items:flex-start;gap:.5rem;font-size:.85rem;color:var(--gris-texto,#555);margin:.1rem 0 .9rem;cursor:pointer;line-height:1.35}
        .fe-medida-oc input{flex:0 0 auto;margin:.15rem 0 0}
        .fe-medida-oc span{flex:1 1 auto}
        .fe-comunidad-solo{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
        .fe-medida-section{padding:2.5rem 0;background:var(--gris-50,#f7f8fa)}
        .fe-medida-section .fe-medida-card{max-width:620px;margin:0 auto}

/* ===== bloque: sin-id ===== */
/* Secciones más juntas (override del section{padding:var(--space-20) 0} global = 5rem) */
        .explorar-section, .cap-evergreen-section, .social-proof-section, .faq-section, .fe-medida-section{padding-top:2.25rem;padding-bottom:2.25rem}
        /* Quitar aire muerto: el panel de área arranca pegado a la 2ª puerta */
        .area-panel{margin-top:1rem}
        /* Comunidad: subtítulo y header más compactos */
        .social-proof-section .section-header{margin-bottom:1.25rem}
        .proof-cta{margin-top:0}
        /* Form Sumate (newsletter) más compacto */
        .fe-sub{padding:1.25rem 1.2rem}
        .fe-sub-intro{margin:0 0 .7rem}
        .fe-sub-intereses{margin:0 0 .7rem;gap:.3rem}
        .fe-sub-form input[type=email]{margin-bottom:.6rem}
        .fe-comunidad-grid{margin-top:1.5rem}
        /* Form B2B (a medida) más compacto */
        .fe-medida-card{padding:1.25rem 1.3rem}
        .fe-medida-intro{margin:0 0 .8rem}
        .fe-medida-form input,.fe-medida-form textarea{margin-bottom:.55rem}

/* ===== bloque: sin-id ===== */
/* Trust al final del hero (tras las 6 áreas): centrado, no en columna de texto */
    .hero-trust--abajo{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;justify-content:center;margin-top:1.75rem}

    /* ── CAP EVERGREEN — card "siempre a mano" ───────────────────────────── */
    .cap-evergreen-section{padding:3.5rem 0;background:var(--gris-50,#f7f8fa)}
    .cap-evergreen-section .section-header{margin-bottom:1.75rem}
    .cap-ever-card{max-width:680px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--gris-200,#e0e0e0);border-left:3px solid var(--cian-fadu,#00b8db);border-radius:4px;padding:2.25rem 2rem 2rem;box-shadow:0 1px 3px rgba(29,37,84,.05)}
    .cap-ever-garantia{display:inline-block;margin:0 0 1.25rem;font-weight:700;font-size:.9rem;line-height:1.4;color:var(--azul-uba,#1d2554);background:rgba(0,184,219,.10);border:1.5px solid rgba(0,184,219,.35);border-radius:999px;padding:.5rem 1.1rem}
    .cap-ever-titulo{font-size:1.6rem;font-weight:900;line-height:1.2;color:var(--azul-uba,#1d2554);margin:0 0 .6rem}
    .cap-ever-claim{max-width:520px;margin:0 auto;color:var(--gris-600,#555);font-size:1rem;line-height:1.55}
    .cap-ever-claim strong{color:var(--azul-uba,#1d2554)}
    .cap-ever-centro{max-width:540px;margin:.85rem auto 0;color:var(--gris-600,#555);font-size:.88rem;line-height:1.55}
    .cap-ever-centro strong{color:var(--azul-uba,#1d2554)}
    .cap-ever-cta{margin-top:1.5rem}
    .cap-ever-btn{display:inline-block;padding:.85rem 2.25rem;border-radius:2px;font-weight:700}
    .cap-ever-nota{max-width:480px;margin:1.1rem auto 0;color:var(--gris-600,#555);font-size:.82rem;line-height:1.5}
    @media (max-width:640px){.cap-ever-card{padding:1.75rem 1.25rem}.cap-ever-titulo{font-size:1.35rem}}

    /* ── SEGUNDA PUERTA — recuadro: buscar por nombre + accesos por tipo ──── */
    .segunda-puerta{margin-top:3.5rem}
    .segunda-puerta-card{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--gris-200,#e0e0e0);border-radius:4px;padding:2rem;box-shadow:0 1px 3px rgba(29,37,84,.05)}
    .segunda-puerta-label{text-align:center;color:var(--azul-uba,#1d2554);font-weight:700;font-size:1.05rem;margin:0 0 1.25rem}
    .segunda-puerta-tipos{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--gris-200,#e0e0e0)}
    .segunda-puerta-tipos a{display:inline-block;padding:.5rem 1.1rem;background:var(--gris-50,#f7f8fa);border:1px solid var(--gris-200,#e0e0e0);border-radius:2px;color:var(--azul-uba,#1d2554);font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
    .segunda-puerta-tipos a:hover{border-color:var(--dorado,#f7a600);color:var(--dorado-oscuro,#cc8a00);background:#fff}
    @media (max-width:640px){.segunda-puerta-card{padding:1.5rem 1.1rem}.segunda-puerta-tipos a{font-size:.85rem;padding:.45rem .9rem}}
    .btn-avisame{background:#fff;color:var(--azul-uba);border:2px solid var(--azul-uba);padding:8px 14px;font-family:var(--font-primary);font-size:.78rem;font-weight:600;border-radius:2px;cursor:pointer;transition:all .2s;width:100%;text-align:center}
    .btn-avisame:hover{background:var(--azul-uba);color:#fff}
    .modal-avisame{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center}
    .modal-avisame.active{display:flex}
    .modal-avisame-content{background:#fff;border-radius:2px;padding:28px;max-width:420px;width:90%;position:relative}
    .modal-avisame-content h3{font-size:1.05rem;color:var(--azul-uba);margin-bottom:4px}
    .modal-avisame-content .modal-prog{font-size:.82rem;color:var(--texto-secundario);margin-bottom:16px}
    .modal-avisame-content label{display:block;font-size:.82rem;font-weight:600;color:var(--texto-principal);margin-bottom:4px}
    .modal-avisame-content input{width:100%;padding:10px 12px;border:2px solid var(--gris-300);border-radius:2px;font-family:var(--font-primary);font-size:.9rem;box-sizing:border-box}
    .modal-avisame-content input:focus{outline:none;border-color:var(--azul-uba)}
    .modal-avisame-campo{margin-bottom:12px}
    .modal-avisame-campo small{font-size:.72rem;color:var(--texto-secundario)}
    .modal-avisame-btn{background:#00b8db;color:var(--azul-uba);border:none;padding:12px;width:100%;font-family:var(--font-primary);font-size:.88rem;font-weight:700;border-radius:2px;cursor:pointer;margin-top:6px;transition:all .2s}
    .modal-avisame-btn:hover{background:#0098b5}
    .modal-avisame-btn:disabled{opacity:.5;cursor:not-allowed}
    .modal-avisame-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--texto-secundario)}
    .modal-avisame-ok{text-align:center;padding:20px 0}
    .modal-avisame-ok svg{color:#4caf50;margin-bottom:8px}
    .modal-avisame-ok p{font-size:.88rem;color:var(--texto-principal);line-height:1.5}

/* ===== HEADER: rollover del menú en cian FADU (identidad/acción) — Ana 22/6 =====
   El header es navy -> cian pasa AA (~6:1). Underline tambien cian. */
.header-nav a:hover { color:var(--cian) !important; }
.nav-dropdown-trigger:hover { color:var(--cian) !important; }
.nav-dropdown .nav-dropdown-content a:hover { color:var(--cian) !important; }
.header-nav a:hover::after { background:var(--cian) !important; }

/* ===== Todas las secciones = franja full-width (Ana 22/6, opcion A: bandas full-width, texto legible) =====
   No hay wrapper que encajone (verificado): cada <section> ya es full-width. Las que estaban transparentes
   (cap-evergreen, fe-medida) reciben fondo para leerse como banda; el contenido sigue en .container (legible). */
.cap-evergreen-section{ background: var(--celeste-muy-claro); }  /* #e8f4f8 niebla suave (distinta de explorar gris-50 y social blanco) */
.fe-medida-section{ background: var(--blanco); }

/* lead de la cuenta regresiva: deja claro que es el tiempo HASTA que abre (Ana 22/6) */
.cd-anuncio__lead{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#3d4663;font-weight:600;margin:0 0 8px}

/* ===== HERO: fila "elegí área" + buscador (Ana 22/6) — dos maneras de buscar, sin scroll ===== */
.hero-areas-top{ display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; margin-bottom:22px; }
.hero-areas-top .hero-areas-label{ margin:0; flex:1 1 260px; }
.hero-areas-top .search-box-hero{ flex:0 1 430px; background:#fff; }
/* botón buscar = cian (acción) y legible sobre el hero navy (navy sobre cian ~6:1, AA) */
.hero-areas-top .search-btn-hero{ background:var(--cian-fadu); color:#1d2554; }
.hero-areas-top .search-btn-hero:hover{ background:#0098b5; }
/* host del panel de áreas: sin fondo ni padding => invisible hasta que se abre (no es banda vacía) */
#area-panel-host.explorar-section{ background:transparent; padding:0; }

/* buscador del hero: mas bajo (Ana 22/6) + boton = accion cian, texto indigo */
.hero-areas-top .search-box-hero input{ padding:.55rem .9rem; font-size:.95rem; }
.hero-areas-top .search-btn-hero{ background:var(--accion); color:var(--indigo); padding:.55rem 1.4rem; }
.hero-areas-top .search-btn-hero:hover{ background:var(--cian-hover); }


/* hero: degrade indigo levemente animado (gradientDrift viene de index.css; respeta reduce-motion).
   3 tonos indigo dan variacion suave para que el drift se PERCIBA sin salir de la familia. */
.hero{ background:linear-gradient(135deg,#1d2554 0%,#141a3a 50%,#28336e 100%); background-size:300% 300%; }

/* boton Buscar = celeste UBA plano (no cian) — armoniza con el highlight del hero. navy/celeste = 7.8:1 AAA */
.hero-areas-top .search-btn-hero{ background:var(--celeste) !important; color:var(--indigo) !important; }
.hero-areas-top .search-btn-hero:hover{ background:#7aacd6 !important; }

/* ===== BOTONES (sistema) — primario navy / secundario outline. Bitter, radius 2px, foco cian ===== */
.btn{ font-family:'Bitter',Georgia,serif; font-size:.88rem; font-weight:700; padding:10px 18px; border-radius:2px; text-decoration:none; display:inline-block; text-align:center; cursor:pointer; border:1.5px solid transparent; transition:background .15s,color .15s; }
.btn:focus-visible{ outline:3px solid var(--cian); outline-offset:2px; }
.btn--primary{ background:var(--indigo); color:#fff; }
.btn--primary:hover{ background:#2c3875; }
.btn--ghost{ background:#fff; color:var(--indigo); border-color:var(--indigo); }
.btn--ghost:hover{ background:var(--indigo); color:#fff; }

/* ===== CARDS DE PROGRAMA (horneadas desde la fuente única — un componente, dos puertas) ===== */
.area-panel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.pcard{ position:relative; background:#fff; border:1px solid #e7eaf1; border-radius:2px; padding:24px 24px 22px 26px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.pcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--color-area,#1d2554); transition:width .2s ease; }
.pcard__eyebrow{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--area-dark,#5a6270); font-weight:700; margin-bottom:9px; }
.pcard__title{ font-size:1.18rem; line-height:1.26; margin:0 0 14px; font-weight:800; letter-spacing:-.01em; }
.pcard__title a{ color:#1d2554; text-decoration:none; }
.pcard__title a:hover{ color:#005f80; text-decoration:underline; }
.pcard__cred{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.pcard__coneau{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:.78rem; font-weight:700; color:#1d2554; background:#eef1f7; border-radius:2px; padding:3px 9px; }
.pcard__coneau svg{ width:13px; height:13px; flex:none; }
.pcard__modo{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:#1d2554; }
.pcard__live{ width:8px; height:8px; border-radius:50%; background:var(--color-area,#1d2554); flex:none; animation:pcardLive 1.8s infinite; }
@keyframes pcardLive{ 0%{opacity:1} 50%{transform:scale(1.25);opacity:.6} 100%{transform:scale(1);opacity:1} }
.pcard__rule{ border:0; border-top:1px solid #e7eaf1; margin:0 0 14px; }
.pcard__meta{ margin:0 0 18px; }
.pcard__meta>div{ display:flex; gap:12px; margin-bottom:7px; font-size:.875rem; align-items:baseline; }
.pcard__meta dt{ color:#5a6270; font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; min-width:90px; flex:none; }
.pcard__meta dd{ color:#353b47; margin:0; }
.pcard__acts{ display:flex; gap:10px; flex-wrap:wrap; }
.pcard:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(29,37,84,.15); border-color:#d6dbe8; }
.pcard:hover::before{ width:7px; }
@media (prefers-reduced-motion:reduce){ .pcard,.pcard::before{transition:none} .pcard:hover{transform:none} .pcard__live{animation:none} }

/* fixes auditoría 22-23/6 */
.cd-anuncio__cta:hover{ background:#2c3875; color:#fff; }
.header-nav .nav-dropdown-content a:hover{ color:var(--cian) !important; }
.nav-dropdown .nav-dropdown-content a:hover::after{ background:var(--cian) !important; }

/* tipo de ingreso en la card (Ana 23/6): admisión / directa / cupo */
.pcard__ingreso{ display:inline-block; align-self:flex-start; font-size:.76rem; font-weight:700; color:#1d2554; background:#eef1f7; border-radius:2px; padding:3px 9px; }
.pcard__ingreso--admision{ background:#fff; border:1.5px solid #1d2554; padding:2px 8px; }  /* outline = "ojo, hay un paso previo" */
.pcard__ingreso-nota{ display:block; font-size:.74rem; color:#5a6270; margin-top:3px; }

/* estado de inscripción por card (Ana 23/6): diferencia visual + anti-cul-de-sac */
.pcard__estado{ display:inline-block; align-self:flex-start; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:2px; padding:3px 9px; }
.pcard__estado--abierta{ background:#eaf5ec; color:#2e7d32; }   /* abierta todo el año (evergreen) */
.pcard__estado--proxima{ background:#eef1f7; color:#5a6270; }   /* próxima inscripción */
.pcard__estado--cerrada{ background:#f1f1f3; color:#6b6b6b; }   /* no abre por ahora */
.pcard--proxima::before{ opacity:.55; }                         /* spine atenuado */
.pcard--cerrada{ background:#fafafb; }                          /* card apagada (texto mantiene contraste) */
.pcard--cerrada::before{ background:#c2c6cf !important; }        /* spine gris, no color de área */