/* ===== 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-home.css  —  estilos del index (home)
   Paleta institucional + cards de programa + cuenta regresiva + preview marca.
   Consolidado de los <style> inline que estaban desperdigados en el HTML.
   Un solo lugar para tocar el look del home. (Antes: index-sepia.css; "sepia"
   era el nombre del fork de color descartado — renombrado 24/6.)
   ============================================================ */

/* ===== bloque: paleta ===== */
:root{
    /* --naranja se define abajo una sola vez = #f7a600 (oficial). Acá NO se redefine como cian
       (era contradictorio: decía dorado=cian y el bloque de abajo lo pisaba con naranja). Acción
       cian = --cian-fadu; micro-acento naranja = --ambar. (P1.7 dedup de token, 25/6) */
    --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{
    --naranja:#f7a600; --naranja-medio:#f7a600; --naranja-claro:#fccd8e;
    --naranja-oscuro:#cc8a00; --naranja-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(--texto-secundario,#4a4a4a);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(--texto-secundario,#4a4a4a);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(--texto-terciario,#52596b);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(--naranja,#f7a600);color:var(--naranja-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; }
/* El componente .pcard* vive ahora SOLO en css/pcard.css (fuente única, que index.html también
   carga). Dedup 25/6 (Ana): "un solo objeto con variantes por nivel, no una copia" — base liviana
   = index, .pcard--catalogo densa = catálogo. Acá quedan solo las reglas que NO son del componente. */

/* 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; }

/* (.pcard__ingreso* y .pcard__estado* + variantes --proxima/--cerrada → ahora en css/pcard.css) */

/* ============================================================
   REMATE DEL SCROLL (Ana 24/6) — B2B (Formación a medida) + Sumate (newsletter)
   en UNA banda de doble columna asimétrica 60/40. Cierra la página con una
   herramienta operativa, no con bloques sueltos. Reemplaza .fe-comunidad-solo.
   ============================================================ */
.fe-remate-grid{
    display:grid;
    grid-template-columns:3fr 2fr;   /* 60 / 40 asimétrico: B2B izq, newsletter der */
    gap:1.6rem;
    margin-top:1.75rem;
    align-items:start;
    text-align:left;
}
/* B2B (izq) = card clara, como antes pero ocupa la columna ancha */
.fe-remate-grid .fe-medida-card{ height:100%; box-sizing:border-box; max-width:none; margin:0; }
/* Sumate (der) = tarjeta destacada navy, llena su columna */
.fe-remate-grid .fe-sub{ height:100%; box-sizing:border-box; }

/* MOBILE: se apila y el newsletter (acción rápida) va PRIMERO, para no enterrar
   la herramienta operativa al fondo del scroll. */
@media (max-width:860px){
    .fe-remate-grid{ grid-template-columns:1fr; gap:1.25rem; }
    .fe-remate-grid .fe-sub{ order:-1; }
}

/* ============================================================
   MOBILE DEL HOME (Ana 24/6) — auditado a 390px y 768px.
   Scoped a este archivo (no toca shared-components.css). Corrige overflow,
   tap targets >=44px, tipografías diminutas y compacta la cuenta regresiva.
   ============================================================ */

/* --- 768px y abajo: tablets/celulares grandes --- */
@media (max-width:768px){
    /* HERO: la fila "elegí área" + buscador pasa a columna; el buscador full-width */
    .hero-areas-top{ flex-direction:column; align-items:stretch; gap:14px; margin-bottom:18px; }
    .hero-areas-top .hero-areas-label{ flex:none; }
    .hero-areas-top .search-box-hero{ flex:none; width:100%; }
    /* buscador: input y botón con altura tocable (>=44px) */
    .hero-areas-top .search-box-hero input{ padding:.7rem .9rem; font-size:1rem; min-height:44px; }
    .hero-areas-top .search-btn-hero{ padding:.7rem 1.2rem; min-height:44px; }

    /* CUENTA REGRESIVA: compactar para que entre sin apretar */
    .cd-anuncio__body{ padding:26px 18px 24px; }
    .cd-anuncio__kicker{ font-size:.95rem; margin-bottom:14px; }
    .cd-anuncio__dias{ font-size:4rem; }
    .cd-anuncio__n{ font-size:1.9rem; }
    .cd-anuncio__when{ font-size:1.2rem; }
    .cd-anuncio__pill{ font-size:1.1rem; }
    .cd-anuncio__cta{ min-height:44px; padding:12px 26px; box-sizing:border-box; }

    /* PANEL DE ÁREA: menos padding (era 2rem) y header que no rompe en pantalla chica */
    .area-panel-header{ flex-wrap:wrap; gap:.75rem; }
    .area-panel-close{ min-height:40px; }

    /* CARDS DE PROGRAMA: 1 columna (el resto del mobile de .pcard vive en pcard.css) */
    .area-panel-grid{ grid-template-columns:1fr; gap:16px; }

    /* checkboxes de intereses (newsletter) + OC (B2B): área tocable cómoda en touch */
    .fe-sub-intereses label,
    .fe-medida-oc{ min-height:32px; align-items:center; }
    .fe-sub-intereses input,
    .fe-medida-oc input{ width:18px; height:18px; }
    .fe-medida-oc input{ margin-top:0; }
}

/* --- 480px y abajo: celulares (390px de referencia) --- */
@media (max-width:480px){
    /* HERO: el grid de áreas en 2 columnas ya viene de index.css; aseguramos legibilidad */
    .hero-areas-label{ font-size:.95rem; }

    /* CUENTA REGRESIVA: un punto más compacta para 390px */
    .cd-anuncio__band{ height:7px; }
    .cd-anuncio__dias{ font-size:3.4rem; }
    .cd-anuncio__diaslbl{ letter-spacing:.25em; }
    .cd-anuncio__n{ font-size:1.6rem; }
    .cd-anuncio__l{ font-size:.58rem; letter-spacing:.12em; }
    .cd-anuncio__when{ font-size:1.05rem; }
    .cd-anuncio__pill{ font-size:1rem; padding:3px 11px; }
    .cd-anuncio__hms>div{ padding:0 2px; }

    /* PANEL DE ÁREA: padding mínimo para ganar ancho útil */
    .area-panel{ padding:1.1rem; }
    .area-panel-title{ font-size:1.25rem; }

    /* REMATE: cards con padding cómodo en pantalla angosta */
    .fe-remate-grid{ margin-top:1.25rem; }
}