@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Baloo+2:wght@600;700;800&family=Caveat:wght@700&display=swap');

:root{
  --bg:#F1F4EE; --surface:#FFFFFF; --surface-alt:#E9EEE4;
  --ink:#122318; --ink-soft:#4B594E;
  --forest:#173B2C; --forest-deep:#0F281E;
  --green:#3E8E41; --green-deep:#2C6B2F; --green-pale:#DCEDD8;
  --amber:#E3A33E; --amber-pale:#FBEDD6;
  --clay:#C1443D; --clay-pale:#F7DEDC;
  --line:#D8DED2;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:14px;}
.site-bg{position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center; background-repeat:no-repeat;}
.site-bg-video{position:fixed; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--font-display); margin:0}
ul,ol{margin:0; padding:0}

/* ---------- Shell / layout ---------- */
.shell{display:flex; min-height:100vh}
.sidebar{width:230px; flex-shrink:0; background:var(--forest); padding:20px; display:flex; flex-direction:column}
.brand-title{font-family:var(--font-display); font-weight:600; color:#fff; font-size:16px; margin:0}
.brand-title.dark{color:var(--forest)}
.brand-sub{font-family:var(--font-mono); font-size:11px; color:#9BC49E; margin:2px 0 8px}
.brand-sub.dark{color:var(--green-deep)}
.brand{margin-bottom:24px}
.brand-logo{width:56px; height:auto; margin-bottom:14px; display:block}
.brand-initials{font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:#9BC49E; margin:8px 0 0; opacity:.85}
.nav{display:flex; flex-direction:column; gap:4px}
.nav-item{padding:10px 12px; border-radius:12px; color:#B9CCB9; font-size:14px}
.nav-item:hover{color:#fff}
.nav-item.active{background:rgba(255,255,255,.12); color:#fff}
.nav-item.logout{margin-top:16px; color:#B9CCB9}
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:16px 20px; background:transparent; border-bottom:none}
.topbar-title{font-family:var(--font-display); font-weight:600; color:var(--forest); font-size:15px}
.topbar-spacer{flex:1}
.mobile-only{display:none}
.content{padding:24px 32px 20px; max-width:1000px; width:100%; margin:0 auto; display:flex; flex-direction:column; flex:1;}
.page-title{font-size:20px; font-weight:600; margin-bottom:14px}

/* ---------- Bell ---------- */
.bell-wrap{position:relative}
.bell-btn{background:var(--surface-alt); border:none; border-radius:999px; width:34px; height:34px; cursor:pointer; position:relative; font-size:15px}
.bell-dot{position:absolute; top:2px; right:4px; width:9px; height:9px; border-radius:50%; background:var(--clay)}
.bell-dropdown{display:none; position:absolute; right:0; top:42px; width:280px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:20}
.bell-dropdown.open{display:block}
.bell-title{font-size:11px; font-weight:600; color:var(--ink-soft); margin:0 0 8px}
.bell-item{font-size:12px; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:8px}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px}
.card-forest{background:var(--forest); border:none; color:#fff}
.card-green{background:var(--green-pale); border:none; color:var(--green-deep)}
.card-amber{background:var(--amber-pale); border:none; color:#8A5A15; padding:14px 18px}
.card-wait{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-highlight{border-color:var(--green)}
.card-title{font-family:var(--font-display); font-weight:600; font-size:14px; margin:0 0 4px}
.eyebrow{font-family:var(--font-mono); font-size:11px; color:var(--green-pale); letter-spacing:.03em}
.hero-title{font-size:26px; font-weight:600; color:#fff; margin:8px 0}
.hero-sub{color:#CFE3D2; max-width:520px; font-size:14px; margin:0 0 20px}

/* ---------- Ruta (stepper) ---------- */
.ruta{display:flex; gap:18px; overflow-x:auto; padding-top:4px}
.ruta-step{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:88px; font-size:12px; text-align:center}
.ruta-step span:last-child{font-weight:500}
.ruta-badge{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); color:var(--ink-soft); font-family:var(--font-display); font-weight:600}
.ruta-step.done .ruta-badge{background:var(--green); color:#fff}
.ruta-step.active .ruta-badge{background:var(--forest); color:#fff}
.card-forest .ruta-badge{background:rgba(255,255,255,.15); color:#fff}
.card-forest .ruta-step.done .ruta-badge{background:var(--green)}
.card-forest .ruta-step span:last-child{color:#fff}

/* ---------- Grids / stats ---------- */
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stat-label{font-family:var(--font-display); font-weight:600; font-size:13px; margin:0 0 4px}
.stat-num{font-family:var(--font-mono); font-size:28px; color:var(--forest); margin:0}
.section-label{font-family:var(--font-display); font-weight:600; font-size:13px; margin:18px 0 10px}
.access-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; font-size:12px; font-weight:500}
.access-card:hover{opacity:.85}

/* ---------- Pills / bullets / steps ---------- */
.pill{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:999px; background:var(--green-pale); color:var(--green-deep)}
.pill-amber{background:var(--amber-pale); color:#8A5A15}
.pill-ink{background:var(--surface-alt); color:var(--ink-soft)}
.pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.bullets{list-style:none; margin-top:8px}
.bullets li{font-size:13px; padding-left:14px; position:relative; margin-bottom:6px}
.bullets li:before{content:''; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:var(--green)}
.steps{list-style:decimal; padding-left:18px}
.steps li{font-size:13px; margin-bottom:8px; color:var(--ink-soft)}

/* ---------- Universidades convenio: cuadritos clicables + vista de detalle ---------- */
.uni-tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.uni-tile{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:8px; padding:16px; border-radius:18px; background:var(--surface); border:1px solid var(--line);
  border-top:5px solid var(--green); transition:transform .18s ease, box-shadow .18s ease;
}
.uni-tile:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 12px 28px rgba(23,59,44,.14)}
.uni-tile.accent-1{border-top-color:var(--green)}
.uni-tile.accent-2{border-top-color:var(--amber)}
.uni-tile.accent-3{border-top-color:var(--forest)}
.uni-tile.accent-4{border-top-color:var(--clay)}
.uni-tile-emoji{font-size:30px}
.uni-tile-name{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); line-height:1.3}
.uni-tile-hint{font-size:11px; color:var(--green-deep); font-weight:500}
@media (max-width:860px){.uni-tile-grid{grid-template-columns:repeat(2,1fr)}}

.uni-detail-card{max-width:640px}
.uni-detail-emoji{font-size:36px}
.uni-detail-title{margin:10px 0 2px}
.uni-detail-program{color:var(--ink-soft); font-size:14px; margin:0 0 16px}

/* ---------- Utilidades ---------- */
.muted{color:var(--ink-soft)}
.small{font-size:12px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.row-gap{display:flex; gap:8px; flex-wrap:wrap}
.inline-filter select{padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-family:var(--font-body); font-size:13px}
.divider{border:none; border-top:1px solid var(--line); margin:10px 0}

/* ---------- Eventos ---------- */
.event-card{display:flex; gap:14px; align-items:flex-start}
.event-date{display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--green-pale); border-radius:12px; padding:8px 12px; min-width:56px}
.event-date span{font-family:var(--font-mono); font-size:11px; color:var(--green-deep)}
.event-date strong{font-family:var(--font-display); font-size:18px; color:var(--green-deep)}

/* ---------- Formularios ---------- */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px}
.field{display:block; margin-bottom:16px}
.field-wide{grid-column:1 / -1}
.field span, .field-label{display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:6px}
input[type=text],input[type=tel],input[type=search],input[type=url],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); font-family:var(--font-body); font-size:14px; outline:none;
}
textarea{resize:vertical}
.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; font-size:14px; font-weight:500; border:none; cursor:pointer; font-family:var(--font-body)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{opacity:.88}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--forest)}
.btn-block{width:100%; justify-content:center}
.icon-btn{background:none; border:none; cursor:pointer; font-size:15px}

/* Escala 1-5 de la encuesta */
.scale{display:flex; gap:8px; margin:8px 0 18px}
.scale-opt input{display:none}
.scale-opt span{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--surface-alt); color:var(--ink-soft); font-family:var(--font-mono); cursor:pointer}
.scale-opt input:checked + span{background:var(--green); color:#fff}

/* ---------- Auth ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px}
.auth-card.wide{max-width:640px}
.auth-title{font-size:19px; font-weight:600; margin:14px 0 16px}
.auth-alt{font-size:13px; color:var(--ink-soft); margin-top:14px}
.auth-alt a{color:var(--green-deep); font-weight:500}
.alert{padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px}
.alert-error{background:var(--clay-pale); color:var(--clay)}

/* ---------- Modal (popup de registro) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,40,30,.6); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50}
.hom-modal{display:none}
.hom-modal.open{display:flex}
.pill-clickable{border:none; cursor:pointer; font-family:var(--font-mono)}
.pill-clickable:hover{opacity:.85}
.card-title-btn{
  background:none; border:none; padding:0; text-align:left; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
}
.card-title-btn:hover{color:var(--green-deep)}
.card-title-hint{font-size:13px; opacity:.7}
.modal-card{width:100%; max-width:520px; max-height:90vh; overflow-y:auto; background:var(--surface); border-radius:20px; padding:26px; position:relative}
.modal-close{position:absolute; top:16px; right:16px; color:var(--ink-soft); font-size:16px; background:none; border:none; cursor:pointer}
.modal-title{font-family:var(--font-display); font-weight:600; font-size:16px; margin:12px 0 4px}
.modal-sub{color:var(--ink-soft); font-size:13px; margin:0 0 18px}
.link-muted{display:block; margin-top:14px; font-size:12px; color:var(--ink-soft); text-decoration:underline}

/* ---------- Listas admin ---------- */
.list-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg); border-radius:12px; padding:12px 16px; margin-bottom:8px; font-size:13px}

/* ---------- Inicio: sin cajas, todo sobre el fondo ---------- */
.page-dashboard .page-title,
.page-dashboard .hero-title{ display:none; }
.page-dashboard .card,
.page-dashboard .card-forest,
.page-dashboard .access-card{
  background:transparent; border:none; box-shadow:none; padding:12px 0;
}
.page-dashboard .card-forest{ text-shadow:0 1px 6px rgba(0,0,0,.55); }
.page-dashboard .stat-num,
.page-dashboard .stat-label{ text-shadow:0 1px 6px rgba(255,255,255,.85), 0 1px 6px rgba(255,255,255,.85); }
.page-dashboard .access-card{
  color:#fff; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.page-dashboard .section-label{ text-shadow:0 1px 6px rgba(255,255,255,.85); }

/* ---------- Top menu (rectángulo blanco con desplegables) ---------- */
.topbar{ align-items:stretch; }
.top-menu{
  display:flex; align-items:center; gap:8px; background:#fff; border-radius:14px;
  padding:6px 10px; box-shadow:0 6px 18px rgba(0,0,0,.10); flex:1; width:100%;
}
.top-menu-items{ display:flex; align-items:center; flex:1; justify-content:space-around; }
.top-menu .bell-wrap{ position:relative; flex-shrink:0; }
.top-menu-item{position:relative}
.top-menu-item > button{
  background:none; border:none; padding:9px 14px; font-family:var(--font-body); font-size:13px;
  font-weight:600; color:var(--forest); cursor:pointer; border-radius:9px; white-space:nowrap;
}
.top-menu-item > button:hover{ background:var(--surface-alt); }
.chevron{ font-size:10px; display:inline-block; margin-left:2px; color:var(--ink-soft); transition:transform .15s ease; }
.top-menu-item.open .chevron{ transform:rotate(180deg); }
.top-menu-dropdown{
  display:none; position:absolute; top:46px; left:50%; transform:translateX(-50%); min-width:250px; background:#fff;
  border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.14); padding:14px; z-index:35;
}
.top-menu-dropdown.open{ display:block; }
.top-menu-dropdown a{ display:block; font-weight:600; color:var(--forest); padding:8px 0 2px; font-size:13px; }
.top-menu-dropdown a:hover{ text-decoration:underline; }
.top-menu-dropdown p{ margin:0 0 4px; }
.top-menu-recent{
  display:flex; flex-direction:column; gap:2px; padding:8px 0;
  border-bottom:1px solid var(--line);
}
.top-menu-recent:last-of-type{ border-bottom:none; }
.top-menu-recent-title{ font-size:13px; font-weight:600; color:var(--ink); }

/* ---------- Botón flotante de sonido ---------- */
.site-sound-toggle{
  position:fixed; right:20px; bottom:20px; z-index:40; width:46px; height:46px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.15);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.site-sound-toggle:hover{ background:var(--surface-alt); }

/* ---------- Footer institucional ---------- */
.page-footer{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  margin:auto 0 0; padding:14px 22px; background:rgba(255,255,255,.82); border-radius:14px;
  backdrop-filter:blur(2px);
}
.page-footer-logo{ width:46px; height:auto; }
.page-footer-name{
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.4px; color:var(--forest-deep); margin:0;
}

/* ---------- Mobile ---------- */
.mobile-nav{display:none}
@media (max-width: 860px){
  .sidebar{display:none}
  .mobile-only{display:block}
  .content{padding:18px 16px 90px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .top-menu{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
  .top-menu-item > button{padding:9px 10px; font-size:12px}
  .mobile-nav{
    display:flex; overflow-x:auto; gap:4px; position:fixed; bottom:0; left:0; right:0;
    background:var(--forest); padding:10px 8px; z-index:30;
  }
  .mobile-nav-item{flex-shrink:0; padding:6px 10px; border-radius:10px; color:#8AA98D; font-size:11px; font-family:var(--font-mono)}
  .mobile-nav-item.active{color:#fff}
}

/* =========================================================
   Inicio de sesión (egresados y panel de funcionarios)
   ========================================================= */
.login-page{
  --lg-green-1:#0B5E1A; --lg-green-2:#178A1F; --lg-green-3:#2FA70F; --lg-green-4:#4CC21A;
  --lg-dark:#0D4A26; --lg-dark-2:#08361B; --lg-pale:#E8F3E6; --lg-gold:#D9B54A;
  margin:0; min-height:100vh; overflow-x:hidden; position:relative;
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(0,0,0,.14) 18% 24%, transparent 24% 100%),
    linear-gradient(135deg, transparent 0 34%, rgba(255,255,255,.07) 34% 41%, transparent 41% 100%),
    linear-gradient(135deg, transparent 0 58%, rgba(0,0,0,.10) 58% 63%, transparent 63% 100%),
    linear-gradient(120deg, var(--lg-green-1) 0%, var(--lg-green-2) 35%, var(--lg-green-3) 70%, var(--lg-green-4) 100%);
  font-family:var(--font-body); color:var(--ink);
}
.login-logo-corner{position:absolute; top:34px; left:40px; width:120px; height:auto; z-index:3}

.login-photo{
  position:absolute; top:0; right:0; bottom:0; width:52%;
  background:url('../img/login-sede-girardot.jpg') right center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
  z-index:1;
}

.login-wrap{
  position:relative; z-index:2; min-height:100vh;
  display:flex; align-items:center; padding:120px 40px 40px 14%;
}
.login-card{
  width:100%; max-width:660px; border-radius:28px; overflow:hidden;
  background:var(--lg-pale);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 30px 60px -20px rgba(4,40,12,.55);
}
.login-card-head{
  position:relative; text-align:center; color:#fff; padding:28px 24px 26px;
  background:
    linear-gradient(135deg, rgba(120,220,90,.35) 0 9%, transparent 9% 13%, rgba(120,220,90,.18) 13% 17%, transparent 17%),
    linear-gradient(160deg, #1B6B35 0%, var(--lg-dark) 45%, var(--lg-dark-2) 100%);
}
.login-card-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--lg-green-3), var(--lg-green-4) 60%, var(--lg-gold));
}
.login-card-logo{width:98px; height:auto; display:block; margin:0 auto 10px}
.login-card-title{font-family:var(--font-display); font-weight:600; font-size:25px; margin:0; letter-spacing:.2px}
.login-card-sub{font-size:16px; margin:4px 0 0; color:#D9EED8; letter-spacing:.4px}

.login-card-body{padding:30px 40px 32px}
.login-heading{font-family:var(--font-display); font-weight:700; font-size:29px; color:var(--lg-dark); text-align:center; margin:0 0 22px}
.login-fields{display:grid; grid-template-columns:1fr 1fr; gap:0 30px}
.login-field{display:block; margin-bottom:26px}
.login-field > span{display:block; font-size:16px; font-weight:500; color:var(--lg-dark); margin-bottom:10px}
.login-input{position:relative}
.login-input svg{position:absolute; left:20px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--lg-dark); pointer-events:none}
.login-input input{
  width:100%; height:58px; padding:0 18px 0 56px; font-size:15px; font-family:var(--font-body); color:var(--ink);
  background:#DCEBDA; border:2px solid #B9CDB7; border-radius:16px;
  box-shadow:inset 0 2px 4px rgba(13,74,38,.08);
  transition:border-color .15s, background-color .15s;
}
.login-input input:focus{outline:none; border-color:var(--lg-green-2); background:#fff}
.login-input input:focus-visible{box-shadow:0 0 0 4px rgba(47,167,15,.25)}

.login-btn{
  width:100%; height:66px; border:none; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--font-display); font-size:22px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, #2E9A1C 0%, #13701A 55%, #0E5E17 100%);
  box-shadow:0 10px 20px -8px rgba(9,70,20,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition:filter .15s, transform .1s;
}
.login-btn svg{width:30px; height:30px}
.login-btn:hover{filter:brightness(1.08)}
.login-btn:active{transform:translateY(1px)}
.login-btn:focus-visible{outline:3px solid var(--lg-gold); outline-offset:3px}

.login-card .alert{margin:0 0 18px}
.login-links{margin:20px 0 0; text-align:center; font-size:14px; color:var(--ink-soft)}
.login-links p{margin:6px 0}
.login-links a{color:var(--lg-green-2); font-weight:600}
.login-links a:hover{text-decoration:underline}
.login-demo{font-size:12px; color:var(--ink-soft)}

@media (max-width: 1100px){
  .login-wrap{padding-left:40px}
  .login-photo{width:45%}
}
@media (max-width: 860px){
  .login-photo{display:none}
  .login-logo-corner{top:22px; left:22px; width:80px}
  .login-wrap{padding:120px 18px 30px; justify-content:center}
  .login-card-body{padding:26px 22px 28px}
  .login-heading{font-size:24px}
  .login-fields{grid-template-columns:1fr}
  .login-field{margin-bottom:18px}
  .login-btn{height:58px; font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  .login-input input, .login-btn{transition:none}
}

/* ---------- Ventanas emergentes: preguntas ---------- */
[hidden]{display:none !important}
.ubicacion-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.popup-q > label{display:block}
.popup-q .field-label{margin-bottom:8px}
.popup-q .ubicacion-grid .field span{font-weight:400}
.alert-list{margin:6px 0 0 18px; padding:0}
.alert-list li{margin:2px 0}
.form-grid > .alert{grid-column:1 / -1}
@media (max-width: 560px){
  .ubicacion-grid{grid-template-columns:1fr}
}

/* ---------- Panel: preguntas emergentes ---------- */
.pe-ventana{border-left:4px solid var(--green)}
.pe-ventana.inactiva{border-left-color:var(--line); opacity:.85}
.pe-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.pe-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.pe-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:0 14px}
.pe-grid .field-wide{grid-column:1 / -1}
.pe-tiempo{display:flex; gap:8px}
.pe-tiempo input{width:90px}
.pe-pregunta{background:var(--surface-alt); border-radius:12px; padding:14px; margin-bottom:10px}
.pe-pregunta .pe-grid{grid-template-columns:2fr 1fr 1fr 70px}
.pe-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); margin-bottom:16px}
.pe-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.pe-cond{font-size:12px; color:var(--green-deep); margin:0 0 8px}
.pe-table-wrap{overflow-x:auto}
.pe-table{width:100%; border-collapse:collapse; font-size:13px}
.pe-table th,.pe-table td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.pe-table th{font-weight:600; color:var(--ink-soft); background:var(--surface-alt)}
@media (max-width: 860px){
  .pe-grid,.pe-pregunta .pe-grid{grid-template-columns:1fr}
}

/* ---------- Panel: pestañas de "Encuestas y preguntas" ---------- */
.admin-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; width:fit-content; max-width:100%}
.admin-tab{padding:8px 16px; border-radius:999px; font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.admin-tab:hover{color:var(--forest); background:var(--green-pale)}
.admin-tab.active{background:var(--green); color:#fff}
@media (max-width: 560px){ .admin-tabs{border-radius:16px} }

/* ---------- Panel: egresados por año (vista tipo hoja de cálculo) ---------- */
.xl-years{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.xl-year{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--forest); font-weight:600; font-size:14px; text-decoration:none}
.xl-year span{font-family:var(--font-mono); font-size:11px; font-weight:500; background:var(--surface-alt); color:var(--ink-soft); padding:2px 7px; border-radius:999px}
.xl-year:hover{border-color:var(--green)}
.xl-year.active{background:var(--green); border-color:var(--green); color:#fff}
.xl-year.active span{background:rgba(255,255,255,.22); color:#fff}
.xl-toolbar{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.xl-search{width:220px}
.xl-wrap{overflow:auto; max-height:70vh; background:#fff; border:1px solid #C9D3C4; border-radius:8px}
.xl-table{border-collapse:separate; border-spacing:0; font-size:13px; font-family:Calibri, "Segoe UI", Arial, sans-serif; color:#1b1b1b}
.xl-table th,.xl-table td{border-right:1px solid #DADFD6; border-bottom:1px solid #DADFD6; padding:5px 9px; white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; text-align:left; vertical-align:middle}
.xl-table tbody tr:nth-child(even) td{background:#F7F9F5}
.xl-table tbody tr:hover td{background:#E6F2E3}
.xl-table thead th{position:sticky; z-index:2}
.xl-letters th{top:0; height:24px; background:#EEF1EC; color:#6b7468; font-weight:400; font-size:11px; text-align:center; padding:3px 9px}
.xl-head th{top:24px; background:#DCEDD8; color:#173B2C; font-weight:700}
.xl-head th.xl-q{background:#C3E3BC}
.xl-table tbody tr td.xl-q{background:#F1F9EF}
.xl-table tbody tr:hover td{background:#E6F2E3}
.xl-rownum,.xl-corner{position:sticky; left:0; z-index:1; background:#EEF1EC !important; color:#6b7468; text-align:center !important; font-size:11px; min-width:38px}
.xl-table thead .xl-rownum,.xl-table thead .xl-corner{z-index:3}
.xl-table tbody td:nth-child(2){position:sticky; left:38px; z-index:1; background:#fff; font-weight:600; box-shadow:1px 0 0 #C9D3C4}
.xl-table tbody tr:nth-child(even) td:nth-child(2){background:#F7F9F5}
.xl-table thead .xl-head th:nth-child(2){position:sticky; left:38px; z-index:3}
.xl-table thead .xl-letters th:nth-child(2){left:38px; z-index:3}
@media (max-width: 560px){ .xl-search{width:100%} }

/* Fichas dentro de un año */
.xl-fichas{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:4px 0 18px}
.xl-ficha{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:8px; background:var(--surface); border:1px solid var(--line); color:var(--forest); font-family:var(--font-mono); font-size:12px; text-decoration:none}
.xl-ficha span{color:var(--ink-soft)}
.xl-ficha:hover{border-color:var(--green)}
.xl-ficha.active{background:var(--forest); border-color:var(--forest); color:#fff}
.xl-ficha.active span{color:#cfe3cf}
.xl-grupo{margin-bottom:26px}
.xl-grupo-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:8px; padding-left:10px; border-left:4px solid var(--green)}
.xl-grupo-title{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--forest); margin:0}

/* ---------- Egresados por año: navegación paso a paso ---------- */
.eg-top{margin-bottom:14px}
.eg-ruta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; margin:0 0 20px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.eg-ruta a{color:var(--green-deep); font-weight:500; text-decoration:none}
.eg-ruta a:hover{text-decoration:underline}
.eg-ruta span{color:var(--ink-soft)}
.eg-ruta .actual{color:var(--forest); font-weight:700; text-decoration:none}
.eg-paso{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--forest); margin:0 0 14px}
.eg-paso span{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:14px}
.eg-paso-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.eg-paso-row .eg-paso{margin:0}
.eg-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px}
.eg-card{display:flex; flex-direction:column; gap:4px; padding:18px; background:var(--surface); border:2px solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s, box-shadow .15s}
.eg-card:hover{border-color:var(--green); transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(23,59,44,.35)}
.eg-card:focus-visible{outline:3px solid var(--green); outline-offset:2px}
.eg-card-big{font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--forest); line-height:1.1}
.eg-card-label{font-size:13px; color:var(--ink-soft)}
.eg-card-sub{font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eg-card-count{margin-top:8px; align-self:flex-start; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--green-pale); color:var(--green-deep)}
.eg-card-gris{border-style:dashed}
.eg-card-gris .eg-card-big{color:var(--ink-soft)}
.eg-nota{margin-top:14px}
.eg-vacio{text-align:center; padding:36px 20px}
.eg-vacio-icono{font-size:38px; margin:0}
.eg-ficha-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.eg-ficha-title{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--forest); margin:0}
.eg-herramientas{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.eg-buscar{flex:1; min-width:240px; max-width:420px; font-size:15px !important; padding:11px 14px !important}
.eg-switch{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--forest); cursor:pointer; user-select:none}
.eg-switch input{width:18px; height:18px; accent-color:var(--green)}
.eg-tabla .eg-extra{display:none}
.eg-tabla.eg-mostrar-todo .eg-extra{display:table-cell}
.xl-simple .xl-head th{top:0; padding:9px 10px}
.xl-simple td{padding:8px 10px}
.eg-nombre{background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--green-deep); cursor:pointer; text-align:left}
.eg-nombre:hover{text-decoration:underline}
.eg-nombre span{color:var(--ink-soft)}
.eg-vacio-celda{color:#a3aaa0}
.eg-dialog{width:min(640px, 94vw); max-height:88vh; border:none; border-radius:18px; padding:0; box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.eg-dialog::backdrop{background:rgba(15,40,30,.55)}
.eg-dialog-head{position:sticky; top:0; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 22px; background:var(--forest); color:#fff}
.eg-dialog-head .muted{color:#cfe0d2}
.eg-dialog-title{font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 2px}
.eg-cerrar{background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; flex-shrink:0}
.eg-cerrar:hover{background:rgba(255,255,255,.28)}
.eg-dialog-body{padding:8px 22px 22px}
.eg-sec{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--green-deep); text-transform:uppercase; letter-spacing:.04em; margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.eg-datos{display:grid; grid-template-columns:minmax(140px, 40%) 1fr; gap:6px 14px; margin:0; font-size:14px}
.eg-datos dt{color:var(--ink-soft)}
.eg-datos dd{margin:0; color:var(--ink); word-break:break-word}
.eg-corregir{margin-top:20px; padding:12px 14px; background:var(--surface-alt); border-radius:12px}
.eg-corregir summary{cursor:pointer; font-weight:600; color:var(--forest)}
.eg-corregir form{margin-top:12px}
@media (max-width: 560px){
  .eg-datos{grid-template-columns:1fr}
  .eg-datos dt{margin-top:6px}
}

/* Egresados: años arriba + micro apartado de fichas */
.eg-anios{margin:0 0 18px}
.eg-anios-label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 8px}
.eg-anios-tabs{display:flex; gap:8px; flex-wrap:wrap}
.eg-anio{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:12px; background:var(--surface); border:2px solid var(--line); color:var(--forest); font-family:var(--font-display); font-weight:700; font-size:16px; text-decoration:none}
.eg-anio span{font-family:var(--font-body); font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--green-pale); color:var(--green-deep)}
.eg-anio:hover{border-color:var(--green)}
.eg-anio.active{background:var(--green); border-color:var(--green); color:#fff}
.eg-anio.active span{background:rgba(255,255,255,.25); color:#fff}
.eg-anio-sin{border-style:dashed; font-weight:600}
.eg-layout{display:grid; grid-template-columns:250px minmax(0, 1fr); gap:20px; align-items:start}
.eg-fichas-panel{position:sticky; top:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px}
.eg-fichas-title{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--forest); margin:0 0 2px}
.eg-fichas-lista{display:flex; flex-direction:column; gap:6px}
.eg-ficha-item{display:grid; grid-template-columns:1fr auto; grid-template-areas:"num n" "prog n"; gap:0 8px; align-items:center; padding:9px 11px; border-radius:10px; border:1px solid transparent; text-decoration:none; color:var(--ink)}
.eg-ficha-item:hover{background:var(--surface-alt)}
.eg-ficha-item.active{background:var(--green-pale); border-color:var(--green)}
.eg-ficha-num{grid-area:num; font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--forest)}
.eg-ficha-prog{grid-area:prog; font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eg-ficha-n{grid-area:n; font-size:12px; font-weight:700; min-width:26px; text-align:center; padding:3px 7px; border-radius:999px; background:var(--surface-alt); color:var(--forest)}
.eg-ficha-item.active .eg-ficha-n{background:var(--green); color:#fff}
.eg-ficha-sin .eg-ficha-num{font-family:var(--font-body); color:var(--ink-soft)}
.eg-main{min-width:0}
@media (max-width: 900px){
  .eg-layout{grid-template-columns:1fr}
  .eg-fichas-panel{position:static}
}

/* ---------- Egresados en carpetas (explorador) ---------- */
.cp-explorador{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.cp-barra{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-alt)}
.cp-subir{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--surface); border:1px solid var(--line); color:var(--forest); text-decoration:none; font-weight:700; flex-shrink:0}
.cp-subir:hover{border-color:var(--green)}
.cp-subir-off{opacity:.4}
.cp-ruta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; padding:6px 12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; flex:1; min-width:0}
.cp-ruta a{color:var(--green-deep); text-decoration:none; font-weight:500}
.cp-ruta a:hover{text-decoration:underline}
.cp-ruta span{color:var(--ink-soft)}
.cp-ruta .actual{color:var(--forest); font-weight:700}
.cp-cuerpo{display:grid; grid-template-columns:230px minmax(0, 1fr); min-height:420px}
.cp-arbol{border-right:1px solid var(--line); padding:12px 8px; display:flex; flex-direction:column; gap:2px; background:#FAFBF8}
.cp-nodo{display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:14px}
.cp-nodo:hover{background:var(--surface-alt)}
.cp-nodo.active{background:var(--green-pale); color:var(--forest); font-weight:600}
.cp-raiz{font-weight:600}
.cp-nivel1{padding-left:12px}
.cp-nivel2{padding-left:40px; font-family:var(--font-mono); font-size:13px}
.cp-flecha{width:10px; color:var(--ink-soft); font-size:11px}
.cp-cuenta{margin-left:auto; font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--surface-alt); padding:1px 7px; border-radius:999px}
.cp-nodo.active .cp-cuenta{background:#fff}
.cp-contenido{padding:18px 20px 22px; min-width:0}
.cp-titulo{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--forest); margin:0 0 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cp-titulo .muted{font-family:var(--font-body); font-weight:400; font-size:14px}
.cp-titulo-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.cp-titulo-row .cp-titulo{margin:0}
.cp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px}
.cp-carpeta{display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:16px 10px 14px; border-radius:14px; border:2px solid transparent; text-decoration:none; color:var(--ink); transition:background .15s, border-color .15s}
.cp-carpeta:hover{background:var(--green-pale); border-color:var(--green)}
.cp-carpeta:focus-visible{outline:3px solid var(--green); outline-offset:2px}
.cp-icono{width:72px; height:60px; margin-bottom:6px}
.cp-icono .cp-tab{fill:#2C6B2F}
.cp-icono .cp-body{fill:#4FA84F}
.cp-icono.cp-gris .cp-tab{fill:#9AA396}
.cp-icono.cp-gris .cp-body{fill:#C3CAC0}
.cp-mini{width:20px; height:17px; margin:0; flex-shrink:0}
.cp-nombre{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--forest)}
.cp-prog{font-size:12px; color:var(--ink); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-meta{font-size:12px; color:var(--ink-soft)}
.cp-nota{margin-top:16px}
@media (max-width: 860px){
  .cp-cuerpo{grid-template-columns:1fr}
  .cp-arbol{border-right:none; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap}
  .cp-nivel1,.cp-nivel2{padding-left:10px}
}

/* Revisar por qué no le sale una pregunta a un egresado */
.rv-resultado{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; color:var(--forest); font-weight:600; text-decoration:none}
.rv-resultado:hover{border-color:var(--green); background:var(--green-pale)}
.rv-panel{margin-top:14px; padding:14px; border-radius:12px; background:var(--surface-alt)}
.rv-nombre{font-family:var(--font-display); font-weight:700; color:var(--forest); margin:0 0 10px}
.rv-fila{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface); border-radius:10px; margin-bottom:6px; border-left:4px solid var(--line)}
.rv-ok{border-left-color:var(--green)}
.rv-pendiente{border-left-color:#E0A526}
.rv-espera{border-left-color:#7FA7C9}
.rv-pausada{border-left-color:#B7B7B7}
.rv-icono{font-size:18px}
.rv-texto{flex:1; min-width:0}

/* ---------- Barra superior: botones tipo "píldora" en degradado verde → azul ---------- */
.top-menu{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px; padding:8px 12px;
  box-shadow:0 8px 24px -10px rgba(10,60,50,.35);
}
.top-menu-items{ gap:10px; justify-content:space-between; }
/* Un color por botón: del verde SENA al azul */
.top-menu-item:nth-child(1){ --pill:#1E9E5A; --pill-luz:#D3F5E2; --pill-txt:#137344; }
.top-menu-item:nth-child(2){ --pill:#12A38A; --pill-luz:#CDF3EC; --pill-txt:#0B7564; }
.top-menu-item:nth-child(3){ --pill:#0E9CB3; --pill-luz:#CBEFF6; --pill-txt:#08738A; }
.top-menu-item:nth-child(4){ --pill:#1C84D4; --pill-luz:#D2E7FA; --pill-txt:#12609F; }
.top-menu-item:nth-child(5){ --pill:#2A62D0; --pill-luz:#D6E1FA; --pill-txt:#1C47A0; }
.top-menu-item > button{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px 9px 22px; border-radius:999px;
  border:3px solid var(--pill, #1E9E5A);
  background:linear-gradient(180deg, #FFFFFF 0%, var(--pill-luz, #D3F5E2) 100%);
  color:var(--pill-txt, #137344);
  font-family:var(--font-body); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.85),
    inset 0 -8px 14px -6px var(--pill, #1E9E5A),
    0 6px 14px -8px var(--pill, #1E9E5A);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.top-menu-item > button:hover{
  background:linear-gradient(180deg, #FFFFFF 0%, var(--pill-luz, #D3F5E2) 100%);
  transform:translateY(-2px);
  filter:saturate(1.15);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    inset 0 -10px 16px -6px var(--pill, #1E9E5A),
    0 10px 18px -8px var(--pill, #1E9E5A);
}
.top-menu-item > button:active{ transform:translateY(0); }
.top-menu-item > button:focus-visible{ outline:3px solid var(--pill, #1E9E5A); outline-offset:3px; }
.top-menu-item.open > button{
  background:linear-gradient(180deg, var(--pill-luz, #D3F5E2) 0%, #FFFFFF 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), inset 0 6px 12px -6px var(--pill, #1E9E5A);
}
.top-menu-item .chevron{ font-size:9px; margin:0; color:var(--pill, #1E9E5A); transition:transform .2s ease; }
.top-menu-item.open .chevron{ transform:rotate(90deg); }
.top-menu-dropdown{ top:54px; border-top:4px solid var(--pill, #1E9E5A); }
.top-menu .bell-btn{ background:#fff; box-shadow:0 0 0 2px rgba(42,98,208,.25); }
@media (max-width: 1100px){
  .top-menu-item > button{ padding:8px 12px 8px 15px; font-size:11px; letter-spacing:.03em; gap:7px; }
}
@media (max-width: 860px){
  .top-menu{ border-radius:18px; }
  .top-menu-items{ justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .top-menu-item > button, .top-menu-item .chevron{ transition:none; }
}

/* ---------- Fondo institucional (sede Girardot) para inicio de sesión y registro ---------- */
.login-page,
.fondo-sena{
  background:#2FA70F url('../img/fondo-login.jpg') center center / cover no-repeat fixed;
}
/* El logo y la foto de la sede ya vienen en la imagen de fondo */
.login-page .login-logo-corner,
.login-page .login-photo{ display:none; }

/* Registro: tarjeta sobre la zona verde de la izquierda, como en el inicio de sesión */
.fondo-sena.auth-body{ justify-content:flex-start; padding:130px 40px 40px 10%; }
.fondo-sena .auth-card{ border:1px solid rgba(255,255,255,.6); box-shadow:0 30px 60px -20px rgba(4,40,12,.55); }

@media (max-width: 860px){
  .login-page, .fondo-sena{ background-attachment:scroll; background-position:left top; }
  .fondo-sena.auth-body{ justify-content:center; padding:110px 16px 30px; }
}

/* Nombre completo del centro en el inicio de sesión y el registro */
.login-card-title{font-size:19px; line-height:1.3; max-width:420px; margin:0 auto}
.login-card-sub{font-size:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:6px}
.fondo-sena .brand-title.dark{font-size:15px; line-height:1.35}
.fondo-sena .brand-sub.dark{font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-top:2px}
@media (max-width: 860px){ .login-card-title{font-size:16px} }

/* Menú lateral con nombres en forma de pregunta (más largos) */
.nav-item{line-height:1.3}

/* ================= Rediseño: marca, botones flotantes y pie ================= */

/* Barra lateral: nombre del centro con línea verde y ondas abajo */
.sidebar{position:relative; overflow:hidden}
.brand-centro{font-family:var(--font-body); font-weight:600; font-size:13px; line-height:1.35; color:#fff; margin:0}
.brand-linea{display:block; width:100%; max-width:170px; height:3px; margin-top:10px; border-radius:3px;
  background:linear-gradient(90deg, #6BD35E 0%, #3FAE49 60%, rgba(63,174,73,0) 100%)}
.sidebar .nav, .sidebar .logout{position:relative; z-index:1}
.sidebar-ondas{display:block; margin:auto -20px -20px; width:calc(100% + 40px); height:130px; flex-shrink:0; pointer-events:none}

/* Barra superior: solo queda la campana de notificaciones */
.topbar{justify-content:flex-end; align-items:center}
.topbar .bell-btn{background:#fff; width:40px; height:40px; box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}

/* Botones flotantes en la mitad del lado derecho */
.flotantes{position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; gap:12px; align-items:flex-end}
.flotante{
  --c:#1E9E5A; --c-luz:#D3F5E2; --c-txt:#137344;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:12px 18px 12px 20px; border-radius:999px 0 0 999px;
  border:3px solid var(--c); border-right:none;
  background:linear-gradient(180deg, #fff 0%, var(--c-luz) 100%);
  color:var(--c-txt); font-family:var(--font-body); font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85), inset 0 -8px 14px -6px var(--c), -6px 8px 18px -10px var(--c);
  transition:transform .15s ease, padding .15s ease;
}
.flotante-nosotros{--c:#1C84D4; --c-luz:#D2E7FA; --c-txt:#12609F}
.flotante:hover{padding-right:26px}
.flotante:focus-visible{outline:3px solid var(--c); outline-offset:2px}

/* Panel que se abre al tocar un botón flotante */
.panel-info-fondo{position:fixed; inset:0; background:rgba(10,40,25,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:48}
.panel-info-fondo.open{opacity:1; pointer-events:auto}
.panel-info{position:fixed; right:16px; top:50%; width:min(340px, calc(100vw - 32px)); transform:translate(120%, -50%);
  background:#fff; border-radius:18px; padding:22px 22px 20px; z-index:49; transition:transform .25s ease;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.45); border-top:5px solid #1E9E5A}
.panel-info.open{transform:translate(0, -50%)}
.panel-info{text-align:left}
#panel-nosotros{border-top-color:#1C84D4}
.panel-info-titulo{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--forest); margin:0 0 4px}
.panel-info-sub{font-size:12px; color:var(--ink-soft); margin:0 0 14px}
.panel-info-dato{display:flex; flex-direction:column; gap:2px; padding:10px 0; border-top:1px solid var(--line); font-size:14px}
.panel-info-dato span{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
.panel-info-dato a{color:var(--green-deep); font-weight:600}
.panel-info-cerrar{position:absolute; top:12px; right:12px; width:30px; height:30px; border:none; border-radius:50%; background:var(--surface-alt); cursor:pointer}

/* Pie de página: tarjeta verde claro con hojas en las esquinas */
.page-footer{
  position:relative; overflow:hidden; gap:6px; padding:14px 130px 16px;
  background:linear-gradient(180deg, #F5FBF2 0%, #E3F1DD 100%);
  border:1px solid rgba(255,255,255,.8); border-radius:18px; backdrop-filter:none;
  box-shadow:0 10px 26px -14px rgba(10,60,30,.45);
}
.pf-hojas{position:absolute; bottom:-2px; width:120px; height:90px; pointer-events:none}
.pf-izq{left:6px}
.pf-der{right:6px; transform:scaleX(-1)}
.pf-centro{display:flex; align-items:center; justify-content:center; gap:18px; width:100%}
.pf-linea{flex:0 1 150px; height:3px; border-radius:3px; background:linear-gradient(90deg, rgba(46,139,62,0), #2E8B3E 40%, #2E8B3E 60%, rgba(46,139,62,0))}
.page-footer-logo{width:44px}
.page-footer-name{font-family:var(--font-body); font-size:14px; font-weight:700; letter-spacing:0; color:#1F6B34}

@media (max-width: 860px){
  .flotante{padding:9px 12px 9px 14px; font-size:11px}
  .flotantes{top:auto; bottom:96px; transform:none}
  .page-footer{padding:12px 16px 14px}
  .pf-hojas{width:70px; height:52px; opacity:.6}
  .page-footer-name{font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  .flotante, .panel-info, .panel-info-fondo{transition:none}
}

/* =================== Portada "¿Buscas empleo?" =================== */
.hero-emp{
  --lima:#B6F24A; --crema:#F4F1E4; --verde-oscuro:#0B4F24;
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:10px 28px; padding:28px 32px 22px; margin-bottom:22px; border-radius:26px; color:#fff;
  background:
    radial-gradient(circle at 92% 12%, #EAF4DF 0 20%, transparent 20.5%),
    radial-gradient(ellipse at 100% 100%, #CFE8C0 0 30%, transparent 30.5%),
    radial-gradient(ellipse at 70% 40%, #3FA34A 0 38%, transparent 38.5%),
    linear-gradient(160deg, #0E6B30 0%, var(--verde-oscuro) 55%, #0A4420 100%);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.55);
}
.he-hoja{position:absolute; fill:#1C7F3A; opacity:.55; pointer-events:none}
.he-hoja .he-vena{stroke:#0B4F24; stroke-width:2; fill:none; opacity:.6}
.he-hoja-1{width:70px; left:36%; top:-18px; transform:rotate(35deg)}
.he-hoja-2{width:90px; right:-20px; bottom:40px; transform:rotate(-30deg); fill:#7CC96A; opacity:.7}
.he-maletin{position:absolute; right:22px; top:18px; width:62px; height:62px; display:grid; place-items:center; font-size:28px;
  background:#177B3A; border-radius:50%; box-shadow:0 0 0 6px #EAF4DF; z-index:2}
.he-texto{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start}
.he-marca{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.he-marca img{width:74px}
.he-marca p{margin:0; max-width:260px; font-family:'Baloo 2', var(--font-display); font-weight:600; font-size:15px; line-height:1.2; padding-bottom:6px;
  background:linear-gradient(90deg, var(--lima), transparent) bottom left / 80% 3px no-repeat}
.he-titulo{position:relative; margin:6px 0 14px 70px; display:flex; flex-direction:column; align-items:flex-start;
  font-family:'Baloo 2', var(--font-display); font-weight:800; line-height:.95; letter-spacing:-.01em}
.he-megafono{position:absolute; left:-78px; top:10px; font-size:58px; transform:rotate(-12deg); filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.he-t1,.he-t2{display:inline-block; padding:4px 18px 0; font-size:clamp(38px, 5vw, 64px); color:var(--verde-oscuro); border-radius:10px}
.he-t1{background:var(--crema); transform:rotate(-4deg)}
.he-t2{background:var(--lima); transform:rotate(-4deg); margin:-4px 0 0 18px}
.he-parrafo{font-family:'Baloo 2', var(--font-body); font-weight:600; font-size:clamp(17px, 1.7vw, 22px); line-height:1.2; margin:6px 0 10px; max-width:430px}
.he-lima{color:var(--lima); font-weight:800}
.he-etiqueta{display:inline-block; padding:4px 22px; background:var(--crema); color:#122318; border-radius:999px;
  font-family:'Baloo 2', var(--font-display); font-weight:800; font-size:clamp(20px, 2.2vw, 30px); transform:rotate(-2deg)}
.he-boton{display:inline-block; margin-top:14px; padding:10px 20px; border-radius:999px; background:var(--lima); color:var(--verde-oscuro);
  font-weight:800; text-decoration:none; box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.he-boton:hover{filter:brightness(1.05); transform:translateY(-1px)}
.he-media{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:10px 20px 0}
.he-marco{width:100%; max-width:420px; aspect-ratio:4 / 5; background:#fff; padding:10px; border-radius:6px; transform:rotate(2.5deg);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.55)}
.he-marco video,.he-marco img{width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; background:#0B4F24}
.he-franja{grid-column:1 / -1; justify-self:center; position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin:8px 0 0;
  padding:10px 28px 10px 12px; background:#0A4420; border-radius:999px; font-family:'Baloo 2', var(--font-display); font-weight:700;
  font-size:clamp(17px, 1.9vw, 26px); box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.he-check{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--lima); color:var(--verde-oscuro); font-weight:900; font-size:22px}
@media (max-width: 900px){
  .hero-emp{grid-template-columns:1fr; padding:22px 18px 18px}
  .he-maletin{display:none}
  .he-titulo{margin-left:56px}
  .he-megafono{font-size:44px; left:-58px}
  .he-marco{max-width:320px}
  .he-franja{padding:8px 18px 8px 8px; gap:10px}
}

/* =================== Portada "¿Quieres homologar?" =================== */
.hero-hom{
  position:relative; overflow:hidden; padding:24px 30px 20px; margin-bottom:22px; border-radius:26px;
  background:linear-gradient(135deg, #FFFFFF 0%, #F2F7EE 60%, #E7F1E0 100%); color:#0E3B22;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.45);
}
.hh-fondo{position:absolute; inset:0 0 0 40%; background:center / cover no-repeat; opacity:.14; filter:grayscale(.3);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%); mask-image:linear-gradient(90deg, transparent, #000 40%)}
.hh-ola{position:absolute; width:260px; height:200px; border-radius:50%; pointer-events:none}
.hh-ola-izq{left:-120px; bottom:-60px; background:radial-gradient(ellipse at 30% 70%, #1F7A38 0 45%, #7DC243 46% 58%, transparent 59%)}
.hh-ola-der{right:-120px; bottom:-80px; background:radial-gradient(ellipse at 70% 70%, #1F7A38 0 45%, #9BD24E 46% 58%, transparent 59%)}
.hh-cabecera{position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.hh-marca{display:flex; align-items:center; gap:16px}
.hh-marca img{width:78px}
.hh-marca p{margin:0; padding-left:16px; border-left:3px solid #0E3B22; max-width:260px; font-family:'Baloo 2', var(--font-display);
  font-weight:700; font-size:16px; line-height:1.15; color:#0E3B22}
.hh-lema{margin:0; max-width:230px; text-align:right; font-family:'Caveat', cursive; font-size:clamp(24px, 2.6vw, 34px); line-height:1; color:#0E3B22;
  transform:rotate(-8deg); padding-bottom:8px; background:linear-gradient(90deg, transparent, #2E9E3E) bottom right / 90% 4px no-repeat}
.hh-titulo-fila{position:relative; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px}
.hh-icono{font-size:58px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.hh-titulo{margin:0; display:flex; flex-direction:column; align-items:flex-start; font-family:'Baloo 2', var(--font-display); font-weight:800; line-height:.9}
.hh-t1{background:#1F8A3C; color:#fff; font-size:clamp(22px, 2.6vw, 34px); padding:4px 18px 0; border-radius:999px; transform:rotate(-4deg); margin-left:14px}
.hh-t2{font-size:clamp(48px, 7vw, 92px); color:#0B4F24; letter-spacing:-.02em}
.hh-sub{position:relative; text-align:center; margin:6px 0 18px; font-size:clamp(14px, 1.4vw, 18px); color:#23392B}
.hh-negrita{font-weight:800; color:#0E3B22}
.hh-grid{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
.hh-card{--uc:#2E9E3E; position:relative; display:grid; grid-template-columns:48% 1fr; align-items:center; gap:0; min-height:118px;
  padding:14px 18px 20px; background:#fff; border-radius:16px; text-decoration:none; color:#23392B; overflow:hidden;
  border:1px solid #E3E8DF; border-bottom:7px solid var(--uc); box-shadow:0 10px 22px -14px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease}
.hh-card::before{content:""; position:absolute; left:0; top:0; border-style:solid; border-width:34px 34px 0 0; border-color:var(--uc) transparent transparent transparent}
.hh-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px -14px rgba(0,0,0,.4)}
.hh-card:focus-visible{outline:3px solid var(--uc); outline-offset:3px}
.hh-card-logo{display:flex; align-items:center; justify-content:center; height:80px; padding-right:14px; border-right:2px solid var(--uc)}
.hh-card-logo img{max-width:100%; max-height:80px; object-fit:contain}
.hh-card-emoji{font-size:42px}
.hh-card-nombre{padding-left:14px; font-size:15px; line-height:1.25; font-weight:600}
.hh-card-flecha{position:absolute; right:12px; bottom:10px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:var(--uc); color:#fff; font-size:22px; font-weight:700; line-height:1; box-shadow:0 4px 10px -4px var(--uc)}
.hh-franja{position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 0; margin:18px auto 0; padding:10px 18px;
  max-width:1000px; background:rgba(255,255,255,.85); border-radius:18px; border:1px solid #E3E8DF}
.hh-ventaja{display:flex; align-items:center; gap:10px; padding:0 20px; font-size:14px; font-weight:600; border-right:2px solid #CFD8CA; max-width:210px; line-height:1.2}
.hh-v-icono{flex-shrink:0; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#1F7A38; font-size:20px}
.hh-cierre{margin-left:20px; padding:6px 22px; background:#0E3B22; color:#fff; font-family:'Caveat', cursive; font-size:clamp(24px, 2.4vw, 32px);
  transform:rotate(-6deg); border-radius:6px 16px 6px 16px}
.uni-detail-logo{max-height:90px; max-width:240px; object-fit:contain; display:block; margin-bottom:10px}
@media (max-width: 1000px){ .hh-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 640px){
  .hero-hom{padding:18px 14px}
  .hh-cabecera{flex-direction:column}
  .hh-lema{align-self:flex-end}
  .hh-grid{grid-template-columns:1fr}
  .hh-icono{font-size:40px}
  .hh-ventaja{border-right:none; padding:0 10px}
  .hh-cierre{margin:6px 0 0}
}
/* ajustes finos de la portada de homologar */
.hh-fondo{opacity:.1}
.hh-card{padding-right:14px}
.hh-card-nombre{padding-right:34px}
.hh-ventaja{padding:0 14px; max-width:190px}
.hh-cierre{margin-left:14px; white-space:nowrap}

/* Panel → Portadas */
.pt-media-fila{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start}
.pt-preview{width:200px; flex-shrink:0}
.pt-preview img,.pt-preview video{width:100%; max-height:260px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#0B4F24}
.pt-unis{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px}
.pt-uni{display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:14px; border:1px solid var(--line); border-bottom:6px solid var(--uc); background:#fff}
.pt-uni-logo{height:74px; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); border-radius:10px; font-size:34px}
.pt-uni-logo img{max-height:64px; max-width:90%; object-fit:contain}
.pt-uni-nombre{font-weight:700; color:var(--forest); margin:4px 0 2px; font-size:14px}
.pt-uni .field{margin-bottom:6px}
.pt-color input{height:40px; padding:2px; width:80px}

/* Portadas a hoja completa: el apartado es solo la portada */
.content.con-portada{padding-top:8px}
.content.con-portada .page-footer{display:none}
.content.con-portada .hero-emp,
.content.con-portada .hero-hom{min-height:calc(100vh - 96px); margin-bottom:0}
.content.con-portada .hero-emp{align-content:center}
.content.con-portada .hero-hom{display:flex; flex-direction:column; justify-content:space-between; gap:6px}
.content.con-portada .hero-hom .hh-grid{flex:0 0 auto}
/* Íconos reemplazados por imágenes */
.he-megafono.portada-img{width:72px; height:auto; filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.he-maletin.portada-img{width:62px; height:62px; object-fit:contain; padding:10px}
.hh-icono.portada-img{width:130px; height:auto}
@media (max-width: 900px){
  .content.con-portada .hero-emp,.content.con-portada .hero-hom{min-height:0}
  .he-megafono.portada-img{width:52px}
}
.content.con-portada{max-width:none; width:100%}
.pt-diseno{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 14px; margin-bottom:14px; border-radius:12px; background:var(--green-pale); font-size:13px}
.pt-diseno span{flex:1; min-width:240px}

/* =========== Portada "¿Buscas empleo?" — lienzo con la proporción exacta del diseño (1574 × 999) ===========
   Todo se ubica en % del lienzo y las letras en cqw (1cqw = 1% del ancho del lienzo), así el diseño
   se agranda o achica completo sin deformarse. A los lados se rellena con el mismo verde y crema. */
.hemp-wrap{
  display:flex; align-items:center; justify-content:center; border-radius:26px; overflow:hidden;
  background:linear-gradient(90deg, #0B5226 0 50%, #EEF3E4 50% 100%);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.55);
}
.content.con-portada .hemp-wrap{min-height:calc(100vh - 96px)}
.hemp{
  position:relative; container-type:inline-size; overflow:hidden;
  width:min(100%, calc((100vh - 96px) * 1.5756)); aspect-ratio:1574 / 999;
  font-family:'Baloo 2', var(--font-display); color:#fff;
}
.hemp > *{position:absolute}
.hemp-fondo{inset:0; width:100%; height:100%}
.hemp-marca{left:3.2%; top:2.2%; width:26%; display:flex; flex-direction:column; gap:.6cqw}
.hemp-marca img{width:36%}
.hemp-marca p{margin:0; font-weight:600; font-size:1.75cqw; line-height:1.15; padding-bottom:.6cqw;
  background:linear-gradient(90deg, #B6F24A, rgba(182,242,74,0)) bottom left / 78% .3cqw no-repeat}
.hemp-megafono{left:1.4%; top:27.5%; width:11.5%; transform:rotate(-14deg); z-index:2}
.hemp-megafono .hemp-megafono-img{display:block; font-size:9.5cqw; line-height:1; filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.35))}
.hemp-megafono img.hemp-megafono-img{width:100%; height:auto}
.hemp-titulo{left:10.5%; top:27%; margin:0; display:flex; flex-direction:column; align-items:flex-start; font-weight:800; line-height:.92; letter-spacing:-.01em}
.hemp-t1,.hemp-t2{display:inline-block; color:#0B4F24; padding:.6cqw 1.8cqw 0; border-radius:.8cqw; transform:rotate(-4deg)}
.hemp-t1{font-size:6.6cqw; background:#F4F1E4}
.hemp-t2{font-size:7.2cqw; background:#B6F24A; margin:-.4cqw 0 0 1.6cqw}
.hemp-flecha{left:9%; top:50.5%; width:34%}
.hemp-parrafo{left:3.8%; top:59%; width:38%; margin:0; font-weight:600; font-size:2.65cqw; line-height:1.18}
.hemp-lima{color:#B6F24A; font-weight:800}
.hemp-etiqueta{left:7.8%; top:75.2%; padding:.2cqw 2cqw; background:#F4F1E4; color:#122318; border-radius:999px; font-weight:800; font-size:3.2cqw; transform:rotate(-2deg)}
.hemp-boton{left:3.8%; top:86.5%; padding:.7cqw 1.6cqw; border-radius:999px; background:#B6F24A; color:#0B4F24; font-family:var(--font-body); font-weight:800; font-size:1.2cqw; text-decoration:none; box-shadow:0 .6cqw 1.2cqw -.6cqw rgba(0,0,0,.5)}
.hemp-boton:hover{filter:brightness(1.06)}
.hemp-marco{left:44.6%; top:5.4%; width:41.4%; height:77.5%; background:#fff; padding:.9cqw; border-radius:.4cqw; transform:rotate(-2deg);
  box-shadow:0 1.4cqw 2.6cqw -1cqw rgba(0,0,0,.5)}
.hemp-marco video,.hemp-marco img{width:100%; height:100%; object-fit:cover; display:block; background:#0B4F24}
.hemp-destellos{left:80.5%; top:10%; width:6.5%; transform:rotate(-10deg)}
.hemp-maletin{left:89.4%; top:6.6%; width:8.8%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#177B3A;
  box-shadow:0 0 0 .6cqw #F4F7EE, 0 .8cqw 1.4cqw -.6cqw rgba(0,0,0,.4)}
.hemp-maletin .hemp-maletin-img{font-size:4.2cqw; line-height:1}
.hemp-maletin img.hemp-maletin-img{width:62%; height:auto}
.hemp-franja{left:24%; top:85.2%; width:54%; height:11.2%; margin:0; display:flex; align-items:center; justify-content:center; gap:1.4cqw;
  background:#0A4420; border-radius:999px; font-weight:700; font-size:2.75cqw; box-shadow:0 .8cqw 1.6cqw -.8cqw rgba(0,0,0,.6)}
.hemp-check{width:4.4cqw; height:4.4cqw; display:grid; place-items:center; border-radius:50%; background:#B6F24A; color:#0B4F24; font-size:2.8cqw; font-weight:900; flex-shrink:0}
/* Celular: el lienzo ocupa todo el ancho (se ve completo, igual que la imagen) */
@media (max-width: 860px){
  .content.con-portada .hemp-wrap{min-height:0; border-radius:16px}
  .hemp{width:100%}
}
/* Ilustraciones tomadas del diseño: bordes difuminados para que se fundan con el fondo */
.hemp-megafono img.portada-pred{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%)}
.hemp-megafono:has(img){transform:none; left:1.3%; top:28%; width:11.4%}
.hemp-maletin:has(img){background:none; box-shadow:none; width:9.6%; left:89%; top:6.2%}
.hemp-maletin img.hemp-maletin-img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.hemp-curva{left:41.6%; top:66%; width:4.6%}
.hh-icono.portada-pred{width:150px; -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 65%, transparent 100%); mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 65%, transparent 100%)}
@media (max-width: 640px){ .hh-icono.portada-pred{width:96px} }
/* El fondo de formas va en toda la hoja (detrás del lienzo), así no hay cortes a los lados */
.hemp-wrap{position:relative; background:#EEF3E4}
.hemp-wrap > .hemp-fondo{position:absolute; inset:0; width:100%; height:100%}
.hemp{z-index:1}
.hemp-megafono img.portada-pred{-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%, #000 48%, transparent 78%); mask-image:radial-gradient(ellipse 58% 58% at 50% 50%, #000 48%, transparent 78%)}

/* ---------- Homologar: buscador, resultados y programas por universidad ---------- */
.hh-buscar{position:relative; display:flex; align-items:center; gap:0; max-width:620px; width:100%; margin:0 auto 18px;
  background:#fff; border:2px solid #1F8A3C; border-radius:999px; padding:5px 5px 5px 18px; box-shadow:0 10px 22px -14px rgba(0,0,0,.35)}
.hh-buscar-icono{font-size:18px; margin-right:10px}
.hh-buscar input{flex:1; min-width:0; border:none !important; background:transparent !important; box-shadow:none !important; font-size:16px; padding:10px 6px !important; outline:none}
.hh-buscar button{border:none; cursor:pointer; padding:11px 24px; border-radius:999px; background:#1F8A3C; color:#fff; font-weight:700; font-size:15px}
.hh-buscar button:hover{background:#176B2F}
.hh-buscar:focus-within{box-shadow:0 0 0 4px rgba(31,138,60,.2)}
.hh-resultados-cab{position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.hh-resultados-cab p{margin:0}
.hh-limpiar{color:#1F6B34; font-weight:600; text-decoration:none}
.hh-limpiar:hover{text-decoration:underline}
.hh-sin{position:relative; background:#fff; border-radius:14px; padding:16px; color:var(--ink-soft)}
.hh-resultados{position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.hh-res{--uc:#2E9E3E; position:relative; display:flex; align-items:center; gap:14px; padding:14px 56px 14px 14px; background:#fff; border-radius:14px;
  border:1px solid #E3E8DF; border-left:6px solid var(--uc); text-decoration:none; color:#23392B; box-shadow:0 8px 18px -12px rgba(0,0,0,.3)}
.hh-res:hover{transform:translateY(-2px)}
.hh-res-logo{width:78px; height:54px; flex-shrink:0; display:grid; place-items:center; font-size:30px}
.hh-res-logo img{max-width:100%; max-height:100%; object-fit:contain}
.hh-res-texto{display:flex; flex-direction:column; gap:2px; min-width:0}
.hh-res-texto strong{font-size:15px; color:#0E3B22}
.hh-res-texto span{font-size:13px; color:var(--ink-soft)}
.hh-res-datos{font-size:12px !important}
.hh-card-nombre small{display:block; margin-top:4px; font-size:12px; font-weight:500; color:var(--ink-soft)}
@media (max-width: 760px){ .hh-resultados{grid-template-columns:1fr} }

.hu{--uc:#2E9E3E; max-width:900px}
.hu-volver{display:inline-block; margin-bottom:14px; color:var(--green-deep); font-weight:600; text-decoration:none}
.hu-migas{margin-bottom:14px; font-size:14px; color:var(--ink-soft)}
.hu-migas a{color:var(--green-deep); font-weight:600; text-decoration:none}
.hu-migas a:hover,.hu-volver:hover{text-decoration:underline}
.hu-cabecera{display:flex; align-items:center; gap:18px; margin-bottom:18px}
.hu-logo{width:150px; height:90px; flex-shrink:0; display:grid; place-items:center; background:#fff; border-radius:14px; border:1px solid var(--line);
  border-bottom:5px solid var(--uc); font-size:40px; padding:8px}
.hu-logo img{max-width:100%; max-height:100%; object-fit:contain}
.hu-nombre{margin:0; font-family:var(--font-display); font-size:24px; color:var(--forest)}
.hu-uni{margin:0 0 2px; font-weight:600; color:var(--ink-soft)}
.hu-programas{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px}
.hu-programa{display:flex; flex-direction:column; gap:10px; padding:18px; background:#fff; border-radius:16px; border:1px solid var(--line);
  border-top:5px solid var(--uc); text-decoration:none; color:var(--ink); box-shadow:0 10px 22px -16px rgba(0,0,0,.35); transition:transform .15s}
.hu-programa:hover{transform:translateY(-3px)}
.hu-programa strong{font-size:16px; color:var(--forest)}
.hu-datos{display:flex; flex-wrap:wrap; gap:6px}
.hu-datos span{font-size:12px; padding:4px 9px; border-radius:999px; background:var(--surface-alt)}
.hu-ver{margin-top:auto; font-weight:700; color:var(--uc)}
.hu-detalle{border-top:6px solid var(--uc)}
.hu-stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px}
.hu-stats > div{display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:12px; background:var(--surface-alt)}
.hu-stat-num{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--forest)}
.hu-stat-lbl{font-size:12px; color:var(--ink-soft)}
.hu-otros{display:flex; flex-wrap:wrap; gap:8px}
.hu-otros a{padding:8px 14px; border-radius:999px; border:1px solid var(--uc); color:var(--forest); font-weight:600; font-size:13px; text-decoration:none}
.hu-otros a:hover{background:var(--surface-alt)}
@media (max-width: 700px){
  .hu-stats{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .hu-cabecera{flex-direction:column; align-items:flex-start}
}

/* =========== Portada "¿Quieres formarte en algo nuevo?" — lienzo 1661 × 947 =========== */
.hfo-wrap{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:26px; background:#F1F6ED;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.content.con-portada .hfo-wrap{min-height:calc(100vh - 96px)}
.hfo-wrap > .hfo-fondo{position:absolute; inset:0; width:100%; height:100%}
.hfo{position:relative; z-index:1; container-type:inline-size; width:min(100%, calc((100vh - 96px) * 1.754)); aspect-ratio:1661 / 947;
  font-family:'Baloo 2', var(--font-display); color:#0E4A26}
.hfo > *{position:absolute; margin:0}
.hfo-titulo{left:6%; top:2%; display:flex; flex-direction:column; align-items:flex-start; font-weight:800; line-height:1}
.hfo-t1{background:#0E5A2A; color:#fff; font-family:'Caveat', 'Baloo 2', cursive; font-weight:700; font-size:4.3cqw; padding:.3cqw 2.2cqw .6cqw 2cqw;
  border-radius:1.2cqw 2.4cqw 1cqw 2.2cqw; transform:rotate(-5deg); box-shadow:0 .5cqw 1cqw -.5cqw rgba(0,0,0,.35)}
.hfo-t2{background:#6CC04A; color:#fff; font-size:6.8cqw; padding:.2cqw 2.2cqw .2cqw 2cqw; margin:-.6cqw 0 0 2.4cqw; border-radius:1.4cqw 2.6cqw 1.2cqw 2.4cqw;
  transform:rotate(-4deg); text-shadow:0 .25cqw 0 rgba(14,74,38,.35)}
.hfo-destellos{width:3.4%}
.hfo-d1{left:3%; top:13%}
.hfo-d2{left:49%; top:6%}
.hfo-linea{width:.25cqw; background:#0E4A26; border-radius:2px}
.hfo-linea-1{left:53.6%; top:7%; height:15%}
.hfo-linea-2{left:68.2%; top:8%; height:12%}
.hfo-logo{left:56%; top:4.6%; width:10%}
.hfo-centro{left:70%; top:8%; width:28%; font-weight:700; font-size:2.15cqw; line-height:1.12}
.hfo-link{left:9.9%; top:29.6%; width:79.8%; height:11.4%; display:flex; align-items:center; gap:1.4cqw; padding-left:1cqw;
  background:#D6EDC8; border-radius:999px}
.hfo-globo{width:5.4cqw; height:5.4cqw; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#0E5A2A; font-size:3cqw}
.hfo-link p{width:40%; font-family:var(--font-body); font-size:1.62cqw; line-height:1.2; color:#1B6B34; font-weight:500}
.hfo-negrita{font-weight:800; color:#0E4A26}
.hfo-url{left:58.1%; top:30.2%; width:30.4%; height:7.8%; display:flex; align-items:center; justify-content:center; gap:1cqw; border-radius:999px;
  background:#0E5A2A; color:#fff; font-family:var(--font-body); font-weight:600; font-size:1.55cqw; text-decoration:none; box-shadow:0 .5cqw 1cqw -.5cqw rgba(0,0,0,.4)}
.hfo-url span:first-child{text-decoration:underline; text-underline-offset:.35cqw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:85%}
.hfo-url:hover{background:#0B4A22}
.hfo-cursor{font-size:2cqw; transform:rotate(-20deg) translate(.6cqw, .8cqw)}
.hfo-banda{left:20.8%; top:42.2%; width:59.9%; height:7%; display:flex; align-items:center; justify-content:center; background:#0E5A2A; color:#fff;
  font-weight:700; font-size:1.8cqw; border-radius:.8cqw 2cqw .8cqw 2cqw; transform:rotate(-.6deg)}
.hfo-ilus{top:49%; height:27.2%; display:flex; align-items:flex-end; justify-content:center}
.hfo-ilus-1{left:5.7%; width:25.6%}
.hfo-ilus-2{left:34.9%; width:23.8%}
.hfo-ilus-3{left:63.2%; width:24.1%}
.hfo-ilus img.hfo-ilus-img{max-width:100%; max-height:100%; object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 55%, #000 55%, transparent 80%); mask-image:radial-gradient(ellipse 60% 62% at 50% 55%, #000 55%, transparent 80%)}
.hfo-ilus span.hfo-ilus-img{font-size:10cqw}
.hfo-card{top:76.8%; height:10.4%; display:flex; align-items:center; gap:1.4cqw; padding:0 1.6cqw 0 1.4cqw; background:#0E5A2A; color:#fff; text-decoration:none;
  border-radius:2.6cqw; box-shadow:0 .7cqw 1.4cqw -.7cqw rgba(0,0,0,.45)}
a.hfo-card:hover{background:#0B4A22; transform:translateY(-.2cqw)}
.hfo-card-1{left:5.1%; width:26.2%}
.hfo-card-2{left:34.3%; width:24.1%}
.hfo-card-3{left:62.6%; width:23.2%}
.hfo-icono{width:4.4cqw; height:4.4cqw; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#fff; overflow:hidden}
.hfo-icono img{width:100%; height:100%; object-fit:cover}
.hfo-icono span{font-size:2.4cqw}
.hfo-card-texto{font-weight:700; font-size:1.62cqw; line-height:1.15}
.hfo-lema{top:89.2%; display:flex; align-items:center; justify-content:center; gap:1cqw; font-family:var(--font-body); font-size:.95cqw;
  letter-spacing:.2em; text-transform:uppercase; color:#2E4234}
.hfo-lema::before,.hfo-lema::after{content:""; flex:1; height:1px; background:#6B7D6F}
.hfo-lema-1{left:4.9%; width:28.2%}
.hfo-lema-2{left:35.7%; width:24.5%}
.hfo-lema-3{left:62.9%; width:22.7%}
.hfo-cierre{left:86.8%; top:79%; width:12%; font-family:'Caveat', cursive; font-weight:700; font-size:2.6cqw; line-height:.95; color:#0E4A26;
  transform:rotate(-12deg); padding-bottom:.6cqw; background:linear-gradient(90deg, #2E9E3E, rgba(46,158,62,0)) bottom left / 100% .3cqw no-repeat}
@media (max-width: 860px){
  .content.con-portada .hfo-wrap{min-height:0; border-radius:16px}
  .hfo{width:100%}
}
.hfo-card-texto{font-size:1.52cqw}
.hfo-cierre{width:12.6%}

/* =========== Portada "¿Tienes un emprendimiento que quieras impulsar?" — lienzo 1672 × 941 =========== */
.hem-wrap{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:26px; background:#F3F6F0;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.content.con-portada .hem-wrap{min-height:calc(100vh - 96px)}
.hem-wrap > .hem-fondo{position:absolute; inset:0; width:100%; height:100%}
.hem-wrap::after{content:""; position:absolute; left:0; right:0; bottom:0; height:14%; background:linear-gradient(180deg, rgba(10,68,32,0), #0A4420 70%); pointer-events:none}
.hem{position:relative; z-index:1; container-type:inline-size; width:min(100%, calc((100vh - 96px) * 1.777)); aspect-ratio:1672 / 941;
  font-family:'Baloo 2', var(--font-display); color:#0E4A26}
.hem > *{position:absolute; margin:0}
.hem-media{left:41.9%; top:12.8%; width:30.2%; height:83.4%}
.hem-media img,.hem-media video{width:100%; height:100%; object-fit:cover; display:block;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%)}
.hem-media-pred img{object-fit:contain; object-position:bottom}
.hem-ola{left:0; top:0; width:100%; height:100%; pointer-events:none}
.hem-marca{left:3%; top:3.2%; width:36%; display:flex; align-items:center; gap:2cqw}
.hem-marca img{width:22%; padding-right:2cqw; border-right:.2cqw solid #0E4A26}
.hem-marca p{font-weight:700; font-size:1.75cqw; line-height:1.12; color:#0E4A26}
.hem-bombillo{left:33.6%; top:11.5%; width:10.8%}
.hem-bombillo img{width:100%; height:auto; -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%, #000 55%, transparent 85%); mask-image:radial-gradient(ellipse 60% 58% at 50% 50%, #000 55%, transparent 85%)}
.hem-bombillo span{font-size:7cqw}
.hem-titulo{left:0; top:0; width:100%; height:100%; pointer-events:none; font-weight:800; line-height:1}
.hem-titulo > span{position:absolute; color:#fff; white-space:nowrap}
.hem-t1{left:6%; top:20%; font-family:'Caveat', cursive; font-weight:700; font-size:4.4cqw; padding:.2cqw 2cqw .6cqw 1.6cqw; background:#3FA63A;
  border-radius:1cqw 2.6cqw 1cqw 2.2cqw; transform:rotate(-8deg)}
.hem-t2{left:4.4%; top:27.5%; font-size:6.4cqw; padding:.4cqw 2.2cqw .2cqw 2cqw; background:linear-gradient(90deg, #1E8A38, #4DB34A 70%, #7CC243);
  border-radius:1.2cqw 3cqw 1.4cqw 3cqw; transform:rotate(-4deg); text-shadow:0 .25cqw 0 rgba(10,68,32,.35); box-shadow:0 .8cqw 1.6cqw -.8cqw rgba(0,0,0,.35)}
.hem-t3{left:14.8%; top:39.5%; font-size:2.55cqw; padding:.5cqw 2cqw .7cqw; background:#0E5A2A; border-radius:.8cqw 2cqw .8cqw 2cqw; transform:rotate(-5deg)}
.hem-texto{left:4.5%; top:53%; width:35%; font-family:var(--font-body); font-weight:500; font-size:1.85cqw; line-height:1.25; color:#1B4D2D}
.hem-negrita{font-weight:800; color:#0E4A26}
.hem-subrayado{left:13.2%; top:66%; width:21.2%; height:.9cqw; border-radius:999px; background:linear-gradient(90deg, #2E9E3E, #7CC243); transform:rotate(-1deg)}
.hem-frase{left:2.4%; top:75%; width:20%; font-family:'Caveat', cursive; font-weight:700; font-size:3.2cqw; line-height:.95; color:#fff; transform:rotate(-12deg); z-index:2}
.hem-card{left:72.7%; width:23.9%; height:15.2%; display:flex; align-items:center; gap:1.3cqw; padding:0 1.4cqw 0 1cqw; border-radius:3cqw;
  background:rgba(255,255,255,.88); box-shadow:0 .8cqw 1.8cqw -1cqw rgba(0,0,0,.35); z-index:2}
.hem-card-1{top:9.8%} .hem-card-2{top:26.6%} .hem-card-3{top:43.8%} .hem-card-4{top:60.6%}
.hem-icono{width:6.4cqw; height:6.4cqw; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#0E5A2A; overflow:hidden}
.hem-icono img{width:100%; height:100%; object-fit:cover}
.hem-icono span{font-size:3cqw}
.hem-card-texto{display:flex; flex-direction:column; font-family:var(--font-body); font-size:1.02cqw; line-height:1.3; color:#2A4A34}
.hem-card-texto strong{font-family:'Baloo 2', var(--font-display); font-size:1.3cqw; color:#0E4A26; line-height:1.15; margin-bottom:.2cqw}
.hem-boton{left:72.4%; top:80.2%; width:22.7%; height:12.3%; display:flex; align-items:center; gap:1.2cqw; padding:0 1.6cqw 0 1cqw; cursor:pointer; z-index:3;
  border:.25cqw solid #7CC243; border-radius:999px; background:linear-gradient(90deg, #0F5E2C, #0A4420); color:#fff; text-align:left;
  box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.6); transform:rotate(-3deg); transition:transform .15s ease, filter .15s ease}
.hem-boton:hover{transform:rotate(-3deg) translateY(-.3cqw); filter:brightness(1.1)}
.hem-boton:focus-visible{outline:3px solid #B6F24A; outline-offset:4px}
.hem-flecha{width:4.6cqw; height:4.6cqw; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 35%, #B6F24A, #5DB14A); color:#0A4420; font-size:2.2cqw; font-weight:900}
.hem-boton-texto{display:flex; flex-direction:column; font-family:'Baloo 2', var(--font-display); font-size:1.4cqw; line-height:1.1}
.hem-boton-texto strong{font-size:2cqw; font-weight:800}
.hem-dialogo form .field{margin-bottom:10px}
.hem-wa{display:inline-block; margin-top:10px; background:#25D366 !important; border-color:#25D366 !important}
@media (max-width: 860px){
  .content.con-portada .hem-wrap{min-height:0; border-radius:16px}
  .hem{width:100%}
}
/* la ola sale del lienzo hacia los lados para cubrir toda la hoja */
.hem{overflow:visible}
.hem-ola{overflow:visible}
.hem-wrap::after{display:none}
.hem-media-pred img{-webkit-mask-image:none; mask-image:none}
.hem-media{left:41.3%; top:11.7%; width:30.8%; height:84.5%}

/* Autorización de datos en el registro */
.acepta-datos{grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px;
  background:var(--green-pale); font-size:13px; line-height:1.4; color:var(--ink); cursor:pointer}
.acepta-datos input{width:20px; height:20px; margin-top:1px; flex-shrink:0; accent-color:#1F8A3C; cursor:pointer}
.acepta-datos a{color:var(--green-deep); font-weight:700; text-decoration:underline}
.politica h2{font-family:var(--font-display); font-size:16px; color:var(--forest); margin:18px 0 6px}
.politica p,.politica li{font-size:14px; line-height:1.55}

/* Emprendimiento: la palabra grande no debe tapar la cara de la foto */
.hem-t2{font-size:5.3cqw}
.acepta-datos + .btn{grid-column:1 / -1}

/* Año → programa → ficha */
.cascada{padding:12px 14px 4px; border-radius:14px; background:var(--green-pale); margin-bottom:6px}
.cascada-pasos{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); gap:0 12px}
.cascada select:disabled{opacity:.6}
.cascada-manual{margin:2px 0 10px; font-size:12px}
@media (max-width: 640px){ .cascada-pasos{grid-template-columns:1fr} }

/* Panel → Fichas */
.fi-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:16px}
.fi-grid .card{margin-bottom:16px}
.fi-prog{padding:12px 0; border-top:1px solid var(--line)}
.fi-prog-nombre{font-weight:700; color:var(--forest); margin:0 0 8px}
.fi-chips{display:flex; flex-wrap:wrap; gap:8px}
.fi-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 12px; border-radius:999px; background:var(--green-pale); font-size:13px}
.fi-chip strong{font-family:var(--font-mono); color:var(--forest)}
.fi-cuenta{font-size:12px; color:var(--ink-soft)}
.fi-chip button{border:none; background:#fff; width:24px; height:24px; border-radius:50%; cursor:pointer; color:var(--ink-soft)}
.fi-chip button:hover{background:#FBE3E3; color:#B42318}
@media (max-width: 860px){ .fi-grid{grid-template-columns:1fr} }

/* ---------- Panel → Notificaciones ---------- */
.nt-aviso{background:#FFF6E0; border:1px solid #F2D48A; color:#6B4E00}
.nt-aviso a{font-weight:700; color:#6B4E00}
.nt-canales{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
.nt-canal{display:flex; align-items:center; gap:10px; padding:12px 14px; border:2px solid var(--line); border-radius:14px; cursor:pointer; background:#fff}
.nt-canal:has(input:checked){border-color:var(--green); background:var(--green-pale)}
.nt-canal input{width:18px; height:18px; accent-color:#1F8A3C}
.nt-canal span{display:flex; flex-direction:column; font-size:14px}
.nt-canal small{font-size:11px; color:var(--ink-soft)}
.nt-filtros{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px}
.nt-grupo{border:1px solid var(--line); border-radius:14px; padding:10px; background:#fff; min-width:0}
.nt-grupo-titulo{display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--forest); font-size:13px; margin:0 0 8px}
.nt-limpiar{border:none; background:none; color:var(--ink-soft); font-size:11px; cursor:pointer; text-decoration:underline}
.nt-buscar{width:100%; margin-bottom:6px; padding:6px 10px !important; font-size:12px !important}
.nt-lista{max-height:230px; overflow:auto; display:flex; flex-direction:column; gap:2px}
.nt-op{display:flex; align-items:flex-start; gap:8px; padding:5px 6px; border-radius:8px; font-size:13px; cursor:pointer}
.nt-op:hover{background:var(--surface-alt)}
.nt-op:has(input:checked){background:var(--green-pale)}
.nt-op input{margin-top:2px; accent-color:#1F8A3C}
.nt-op small{display:block; font-size:11px}
.nt-enviar{position:sticky; bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px;
  background:var(--forest); color:#fff; border-radius:16px; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); z-index:5}
.nt-conteo{margin:0; font-size:14px}
.nt-enviar .btn-primary{background:#B6F24A; color:#0B4F24; border-color:#B6F24A; font-weight:800}
.nt-mensaje{background:var(--surface-alt); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.5}
.nt-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-top:12px}
.nt-stats > div{display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:12px; background:var(--surface-alt); font-size:12px; color:var(--ink-soft)}
.nt-num{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--forest)}
.nt-progreso{margin-top:14px}
.nt-barra{height:10px; border-radius:999px; background:var(--surface-alt); overflow:hidden}
.nt-barra span{display:block; height:100%; background:linear-gradient(90deg, #1F8A3C, #7CC243); transition:width .3s}
.nt-wa{padding:6px 12px; font-size:12px}
.nt-item{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; text-decoration:none; color:var(--ink)}
.nt-item:hover{border-color:var(--green)}
.nt-item-canales{display:flex; align-items:center; gap:8px; font-size:18px}
.nt-ayuda p{margin:6px 0}
.nt-plantilla{background:var(--surface-alt); padding:10px 12px; border-radius:10px; white-space:pre-wrap; font-size:12px}
@media (max-width: 1000px){ .nt-filtros{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 640px){ .nt-filtros,.nt-canales{grid-template-columns:1fr} }

/* Campana del egresado: mensajes del Centro */
.bell-item.nt-nueva{border-left:3px solid #1F8A3C; padding-left:8px}
.bell-item strong{display:block; font-size:13px; color:var(--forest)}
.bell-item p{margin:2px 0 0; font-size:12px; color:var(--ink-soft)}
.bell-item a{font-size:12px; font-weight:700; color:var(--green-deep)}
.bell-dropdown{max-height:70vh; overflow:auto}
.bell-dot.bell-num{width:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:10px; font-weight:800; color:#fff; display:grid; place-items:center; top:-4px; right:-4px}

/* =========== Portada "¿Qué es la certificación en competencia laboral?" — lienzo 1672 × 941 =========== */
.hco-wrap{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:26px; background:#F3F7F0;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.content.con-portada .hco-wrap{min-height:calc(100vh - 96px)}
.hco-wrap > .hco-fondo{position:absolute; inset:0; width:100%; height:100%}
.hco{position:relative; z-index:1; container-type:inline-size; width:min(100%, calc((100vh - 96px) * 1.777)); aspect-ratio:1672 / 941;
  font-family:'Baloo 2', var(--font-display); color:#0E4A26}
.hco > *{position:absolute; margin:0}
.hco-cert{left:1.9%; top:2.8%; width:13.5%}
.hco-cert img{width:100%; height:auto; -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 60%, transparent 90%); mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 60%, transparent 90%)}
.hco-cert span{font-size:9cqw}
.hco-titulo{left:0; top:0; width:100%; height:24%; pointer-events:none; font-weight:800; line-height:1}
.hco-titulo > span{position:absolute; white-space:nowrap}
.hco-t1{left:16.8%; top:12%; font-size:3.7cqw; color:#0E4A26; transform:rotate(-2deg)}
.hco-t2{left:15%; top:40%; font-size:3.95cqw; color:#fff; padding:.3cqw 2cqw .1cqw 1.8cqw; background:linear-gradient(90deg, #3E9A48, #5DB14A 60%, #4AA146);
  border-radius:1.2cqw 2.6cqw 1.2cqw 2.4cqw; transform:rotate(-3deg); box-shadow:0 .6cqw 1.2cqw -.6cqw rgba(0,0,0,.3)}
.hco-sub{left:21.6%; top:18.8%; width:53%; font-family:var(--font-body); font-size:1.45cqw; line-height:1.35; color:#1B3D27}
.hco-negrita{font-weight:800; color:#0E4A26}
.hco-lema{left:81.8%; top:4.5%; width:16.5%; font-family:'Caveat', cursive; font-weight:700; font-size:3.2cqw; line-height:.95; transform:rotate(-8deg);
  padding-bottom:.8cqw; background:linear-gradient(90deg, #0E4A26, rgba(14,74,38,0)) bottom left / 90% .35cqw no-repeat}
.hco-video{left:2.9%; top:26.8%; width:69.8%; height:64.6%; background:#0E4A26; padding:.6cqw; border-radius:1cqw; box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.45);
  transition:box-shadow .3s}
.hco-video.hco-resalta{box-shadow:0 0 0 .6cqw #B6F24A}
.hco-video video,.hco-video img,.hco-video iframe{width:100%; height:100%; display:block; border:0; border-radius:.5cqw; object-fit:cover; background:#000}
.hco-panel{left:73.7%; top:27.4%; width:24.4%; height:67%; background:rgba(255,255,255,.92); border-radius:2cqw; box-shadow:0 1cqw 2.4cqw -1.2cqw rgba(0,0,0,.3)}
.hco-item{left:74.8%; width:22.4%; height:10.8%; display:flex; align-items:center; gap:1.2cqw; padding-right:1cqw; background:#F2F5F0; border-radius:999px}
.hco-item-1{top:30.2%} .hco-item-2{top:43.3%} .hco-item-3{top:56.2%} .hco-item-4{top:69.1%}
.hco-icono{width:6cqw; height:6cqw; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#0E5A2A; overflow:hidden}
.hco-icono img{width:100%; height:100%; object-fit:cover}
.hco-icono span{font-size:2.8cqw}
.hco-item-texto{font-family:var(--font-body); font-size:1.25cqw; line-height:1.25; color:#1B3D27}
.hco-boton{left:76.4%; top:81.5%; width:18.6%; height:10.5%; display:flex; align-items:center; gap:1cqw; padding:0 1.4cqw 0 1cqw; cursor:pointer; border:none;
  border-radius:999px; background:#0E4A26; color:#fff; font-family:'Caveat', cursive; font-weight:700; font-size:2.1cqw; line-height:.95; text-align:left;
  transform:rotate(-6deg); box-shadow:0 .8cqw 1.6cqw -.8cqw rgba(0,0,0,.5); transition:transform .15s}
.hco-boton:hover{transform:rotate(-6deg) translateY(-.3cqw)}
.hco-boton:focus-visible{outline:3px solid #B6F24A; outline-offset:4px}
.hco-play{width:3.4cqw; height:3.4cqw; flex-shrink:0; display:grid; place-items:center; border-radius:50%; border:.25cqw solid #fff; font-family:var(--font-body); font-size:1.4cqw}
@media (max-width: 860px){
  .content.con-portada .hco-wrap{min-height:0; border-radius:16px}
  .hco{width:100%}
}
.nt-busqueda{display:flex; align-items:center; gap:10px; padding:4px 6px 4px 16px; margin-bottom:10px; border:2px solid #1F8A3C; border-radius:999px; background:#fff}
.nt-busqueda input{flex:1; border:none !important; background:transparent !important; box-shadow:none !important; font-size:15px; padding:10px 4px !important; outline:none}
.nt-busqueda:focus-within{box-shadow:0 0 0 4px rgba(31,138,60,.18)}
.nt-seleccion{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; font-size:13px}
.nt-chip{border:none; cursor:pointer; padding:5px 10px; border-radius:999px; background:var(--green-pale); color:var(--forest); font-weight:600; font-size:12px}
.nt-chip:hover{background:#FBE3E3; color:#B42318}
.nt-grupo-titulo span{font-weight:400}
.hco-t2{font-size:3.6cqw}
.hco-t1{font-size:3.5cqw}
.hco-lema{font-size:2.9cqw}
.hco-item-texto{font-size:1.15cqw}
.hco-boton{font-size:1.85cqw}
.hco-video img{object-position:left center}
/* Competencia laboral: el lema no se monta sobre el título */
.hco-lema{left:84%; width:14.5%; font-size:2.6cqw}
.hco-t2{font-size:3.35cqw}

/* =================== Portada "¿Quieres ser parte de los grupos de investigación?" =================== */
.hin{position:relative; overflow:hidden; padding:28px 34px 26px; border-radius:26px; background:linear-gradient(180deg, #F6F9F4, #EEF4EA);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.4)}
.content.con-portada .hin{min-height:calc(100vh - 96px)}
.hin-hoja{position:absolute; border-radius:0 100% 0 100%; pointer-events:none}
.hin-hoja-1{left:-40px; top:40px; width:120px; height:160px; background:#CFE3C2; transform:rotate(20deg); opacity:.8}
.hin-hoja-2{right:-30px; bottom:-40px; width:160px; height:200px; background:#8CC66A; transform:rotate(-30deg); opacity:.55}
.hin::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70px; pointer-events:none;
  background:radial-gradient(120% 90px at 30% 100%, #CFE3C2 60%, transparent 61%), radial-gradient(90% 70px at 85% 100%, #6FAE55 55%, transparent 56%)}
.hin-cabecera{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start}
.hin-icono{width:130px; margin-top:6px}
.hin-icono img{width:100%; height:auto}
.hin-icono span{font-size:74px}
.hin-titulo{margin:0; display:flex; flex-direction:column; align-items:flex-start; font-family:'Baloo 2', var(--font-display); line-height:1}
.hin-t1{font-weight:800; font-size:clamp(26px, 3.2vw, 46px); color:#0E3B22}
.hin-t2{font-family:'Caveat', cursive; font-weight:700; font-size:clamp(34px, 4.2vw, 62px); color:#fff; padding:4px 28px 8px 22px; margin-top:4px;
  background:linear-gradient(90deg, #2E8B3E, #4AA146); border-radius:10px 30px 12px 26px; transform:rotate(-3deg)}
.hin-sub{margin:12px 0 0; max-width:720px; font-size:clamp(14px, 1.35vw, 19px); color:#1B3D27; line-height:1.35}
.hin-negrita{font-weight:800}
.hin-lema{margin:0; max-width:230px; font-family:'Caveat', cursive; font-weight:700; font-size:clamp(28px, 3vw, 44px); line-height:.95; color:#0E3B22;
  transform:rotate(-12deg); padding-bottom:10px; background:linear-gradient(90deg, rgba(14,59,34,0), #0E3B22) bottom right / 90% 4px no-repeat; max-width:190px}
.hin-filtro{position:relative; display:inline-flex; align-items:center; gap:8px; margin:18px 0 18px; padding:4px 8px 4px 18px; background:#fff; border-radius:999px;
  box-shadow:0 8px 18px -12px rgba(0,0,0,.35)}
.hin-filtro select{border:none !important; background:transparent !important; box-shadow:none !important; font-weight:600; font-size:15px; padding:8px 30px 8px 4px !important}
.hin-grid{position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:20px; z-index:1}
.hin-card{--ic:#1E6B3A; --icl:#E3F1DC; position:relative; display:flex; flex-direction:column; background:#fff; border-radius:22px; padding:10px;
  box-shadow:0 16px 30px -20px rgba(0,0,0,.4)}
.hin-card-img{height:170px; border-radius:16px 16px 40px 16px; overflow:hidden; border-bottom-right-radius:60px}
.hin-card-img img{width:100%; height:100%; object-fit:cover}
.hin-card-icono{position:absolute; left:18px; top:130px; width:84px; height:84px; border-radius:50%; overflow:hidden; border:5px solid #fff; background:var(--ic);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.hin-card-icono img{width:100%; height:100%; object-fit:cover}
.hin-card-cuerpo{display:flex; flex-direction:column; flex:1; padding:52px 12px 8px}
.hin-card h2{margin:0 0 6px; font-family:'Baloo 2', var(--font-display); font-size:21px; line-height:1.15; color:var(--ic)}
.hin-card p{margin:0 0 10px; font-size:14px; line-height:1.45; color:#3A4A3F}
.hin-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.hin-chips span{padding:4px 12px; border-radius:999px; background:var(--icl); color:var(--ic); font-family:var(--font-mono); font-size:12px}
.hin-card-pie{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px}
.hin-cupos{font-weight:700; font-size:14px; color:#23392B}
.hin-boton{margin-left:auto; padding:9px 20px; border-radius:999px; background:var(--ic); color:#fff; font-weight:700; text-decoration:none; font-size:14px}
.hin-boton:hover{filter:brightness(1.12)}
.hin-vacio{background:#fff; border-radius:16px; padding:18px; color:var(--ink-soft)}
.hin-pie{position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin-top:22px; padding-left:40px}
.hin-bombillo{width:56px}
.hin-bombillo img{width:100%; height:auto}
.hin-bombillo span{font-size:40px}
.hin-frase{margin:0; font-family:'Caveat', cursive; font-weight:700; font-size:clamp(24px, 2.4vw, 34px); color:#0E3B22; transform:rotate(-4deg);
  padding-bottom:6px; background:linear-gradient(90deg, #0E3B22, rgba(14,59,34,0)) bottom left / 70% 3px no-repeat}
.hin-detalle{border-top:6px solid var(--ic)}
.hin-detalle-img{height:240px; border-radius:16px; overflow:hidden; margin-bottom:14px}
.hin-detalle-img img{width:100%; height:100%; object-fit:cover}
@media (max-width: 900px){
  .hin{padding:20px 16px}
  .hin-cabecera{grid-template-columns:1fr}
  .hin-icono{width:80px}
  .hin-lema{justify-self:end}
}

/* =========== Portada "Actualización y red de egresados" — lienzo 1536 × 1024 =========== */
.hac-wrap{position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:26px; background:#F1F6F8;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.content.con-portada .hac-wrap{min-height:calc(100vh - 96px)}
.hac-wrap > .hac-fondo{position:absolute; inset:0; width:100%; height:100%}
.hac{position:relative; z-index:1; container-type:inline-size; width:min(100%, calc((100vh - 96px) * 1.5)); aspect-ratio:1536 / 1024;
  font-family:'Baloo 2', var(--font-display); color:#12345C}
.hac > *{position:absolute; margin:0}
.hac-titulo{left:4.5%; top:2.5%; width:44%; height:19%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 3cqw;
  background:#12345C; border-radius:2cqw 5cqw 3cqw 6cqw; transform:rotate(-5deg); font-family:'Caveat', cursive; font-weight:700; line-height:.95;
  box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.4)}
.hac-t1{font-size:5.4cqw; color:#fff; white-space:nowrap}
.hac-t2{font-size:5.4cqw; color:#A8E6F0; margin-left:6cqw; white-space:nowrap}
.hac-sub{left:50%; top:5.5%; width:20.5%; font-family:'Baloo 2', var(--font-display); font-weight:600; font-size:1.6cqw; line-height:1.3; color:#12345C; transform:rotate(-4deg)}
.hac-negrita{font-weight:800}
.hac-birrete{left:72.2%; top:3%; width:10.8%}
.hac-birrete img{width:100%; height:auto; mix-blend-mode:multiply}
.hac-birrete span{font-size:7cqw}
.hac-lema{left:84%; top:3%; width:14.5%; font-family:'Caveat', cursive; font-weight:700; font-size:2.4cqw; line-height:1; transform:rotate(-8deg);
  padding-bottom:.8cqw; background:linear-gradient(90deg, #3EA7E8, #3EA7E8) bottom left / 85% .35cqw no-repeat}
.hac-card{display:flex; gap:1.2cqw; align-items:center; padding:1.4cqw 1.2cqw 1.4cqw 1.2cqw; background:rgba(255,255,255,.95); border-radius:2cqw;
  box-shadow:0 1cqw 2.4cqw -1.4cqw rgba(18,52,92,.45)}
.hac-card-1{left:1.6%; top:23.1%; width:26.4%; height:31.3%}
.hac-card-2{left:1.6%; top:56.2%; width:26.4%; height:30.2%}
.hac-card-3{left:72.1%; top:23.1%; width:26.4%; height:31.3%}
.hac-card-4{left:72.1%; top:56.2%; width:26.4%; height:29.8%}
.hac-ilus{width:40%; flex-shrink:0; align-self:stretch; display:flex; align-items:center; justify-content:center}
.hac-ilus img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
.hac-ilus span{font-size:7cqw}
.hac-card-texto{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.hac-card h2{margin:0 0 .6cqw; font-size:1.75cqw; line-height:1.1; color:#12345C}
.hac-card-2 h2{color:#155E4A}
.hac-card p{margin:0 0 1cqw; font-family:var(--font-body); font-size:1.1cqw; line-height:1.35; color:#3D4B5C}
.hac-boton{display:inline-flex; align-items:center; gap:1cqw; padding:.6cqw 1.6cqw; border-radius:999px; font-family:'Caveat', cursive; font-weight:700; font-size:1.7cqw;
  color:#12345C; text-decoration:none; transition:transform .15s}
.hac-boton:hover{transform:translateY(-.2cqw)}
.hac-lila .hac-boton{background:#D4CBF7}
.hac-menta .hac-boton{background:#C4EBD8}
.hac-sol .hac-boton{background:#FFD659}
.hac-cielo .hac-boton{background:#C4E2FB}
.hac-video{left:29.8%; top:22.1%; width:40.5%; height:55.5%; padding:.5cqw; background:#12345C; border:.3cqw solid #2E8A83; border-radius:1.6cqw;
  box-shadow:0 1.4cqw 2.6cqw -1.2cqw rgba(0,0,0,.45)}
.hac-video video,.hac-video img,.hac-video iframe{width:100%; height:100%; display:block; border:0; border-radius:1.1cqw; object-fit:cover; background:#000}
.hac-franja{left:31.7%; top:80%; width:37.2%; height:10.3%; display:flex; align-items:center; gap:1.4cqw; padding:0 2cqw; border-radius:999px;
  background:linear-gradient(90deg, #BFE3F7, #D8F0FA); color:#12345C; text-decoration:none; font-weight:600; font-size:1.55cqw; line-height:1.2; transform:rotate(-1.5deg)}
a.hac-franja:hover{filter:brightness(1.04)}
.hac-personas{width:6.5cqw; flex-shrink:0}
.hac-personas img{width:100%; height:auto; mix-blend-mode:multiply}
.hac-personas span{font-size:3cqw}
@media (max-width: 860px){
  .content.con-portada .hac-wrap{min-height:0; border-radius:16px}
  .hac{width:100%}
}
.hac-t1,.hac-t2{font-size:4.9cqw}
.hac-boton{white-space:nowrap; font-size:1.55cqw}

/* ---------- Iguana mascota en las ventanas emergentes (grande y asomada en la orilla) ---------- */
.modal-marco{position:relative; width:100%; max-width:520px; margin-top:100px}
.modal-marco > .modal-card{max-height:calc(90vh - 100px)}
.modal-iguana{position:absolute; right:-54px; top:-138px; width:200px; z-index:3; pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(15,40,30,.3)); transform-origin:70% 100%;
  animation:iguana-asoma .7s cubic-bezier(.34,1.56,.64,1) .1s both}
.modal-iguana img{display:block; width:100%; height:auto}
.modal-iguana--descanso{width:230px; top:-96px}
.modal-iguana--mensaje{width:210px; top:-150px}
.modal-iguana-letrero{position:absolute; left:44%; top:44%; width:48%; height:34%; display:grid; place-items:center; text-align:center;
  font-family:'Caveat', cursive; font-weight:700; font-size:22px; line-height:1; color:#0E4A26; transform:rotate(-8deg)}
@keyframes iguana-asoma{
  0%{transform:translate(40px, 60px) rotate(14deg) scale(.4); opacity:0}
  60%{transform:translate(-4px, -6px) rotate(-5deg) scale(1.05); opacity:1}
  100%{transform:none}
}
@media (max-width: 640px){
  .modal-marco{margin-top:76px}
  .modal-iguana{width:130px; right:-6px; top:-96px}
  .modal-iguana--mensaje{width:140px; top:-100px}
  .modal-iguana-letrero{font-size:15px}
}
@media (prefers-reduced-motion: reduce){ .modal-iguana{animation:none} }
.modal-marco{margin-top:150px}
.modal-marco > .modal-card{max-height:calc(92vh - 150px)}
.modal-iguana{top:-190px; right:-62px}
.modal-iguana--mensaje{top:-196px}
.modal-iguana--descanso{top:-120px}
.modal-marco .pill,.modal-marco .modal-title,.modal-marco .modal-sub{margin-right:110px}
@media (max-width: 640px){
  .modal-marco{margin-top:96px}
  .modal-marco > .modal-card{max-height:calc(92vh - 96px)}
  .modal-iguana{top:-118px; right:-6px}
  .modal-iguana--mensaje{top:-122px}
  .modal-marco .pill,.modal-marco .modal-title,.modal-marco .modal-sub{margin-right:70px}
}
.cascada-nota{margin:0 0 10px; padding:8px 12px; border-radius:10px; background:#FFF6E0; color:#6B4E00; font-size:12px}
.registro-sub{margin:6px 0 0; font-weight:700; color:var(--forest)}
.ficha-resumen{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:12px 14px; border-radius:12px; background:var(--green-pale); font-size:14px; margin-bottom:8px}
.ficha-resumen span{font-weight:700; color:var(--forest); margin-right:6px}
.fondo-sena .cascada-pasos{grid-template-columns:minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr)}
.nt-canal-off{opacity:.55; cursor:not-allowed; background:var(--surface-alt)}
.nt-quienes{opacity:.85; font-size:12px}
.fi-relacion{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px}
.fi-relacion > div{padding:10px 12px; border-radius:10px; background:var(--surface-alt); font-family:var(--font-mono); font-size:13px}
.fi-relacion .muted{font-family:var(--font-body)}

/* ---------- Panel organizado como el menú del egresado ---------- */
.nav-grupo{margin:16px 12px 6px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9BC49E}
.nav-otros{margin-top:12px}
.nav-otros summary{cursor:pointer; padding:8px 12px; font-size:12px; color:#9BC49E; list-style:none}
.nav-otros summary::before{content:"▸ "}
.nav-otros[open] summary::before{content:"▾ "}
.nav-otros .nav-item{font-size:13px; opacity:.85}
.sec-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.sec-miga{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep)}
.sec-tabs{margin-bottom:18px}
.sec-sub{font-family:var(--font-display); font-size:18px; color:var(--forest); margin:0 0 10px}
.sec-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px}
.sec-card{display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:16px; background:var(--surface); border:2px solid var(--line); text-decoration:none; color:var(--ink);
  transition:border-color .15s, transform .15s}
.sec-card:hover{border-color:var(--green); transform:translateY(-2px)}
.sec-card-icono{font-size:28px}
.sec-card strong{font-family:var(--font-display); font-size:16px; color:var(--forest)}
.sec-card-partes{margin-top:auto; font-size:12px; font-weight:600; color:var(--green-deep)}

/* =================== Panel de administración: diseño nuevo =================== */
.panel-admin{background:linear-gradient(135deg, #F4F8F1 0%, #EEF4EA 60%, #F6F9F4 100%)}
.panel-admin .sidebar{background:linear-gradient(180deg, #0E4A2A 0%, #0B3F23 100%); position:relative; overflow:hidden; padding-bottom:150px}
.ad-marca{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.ad-marca img{width:52px}
.ad-marca .brand-title{font-family:var(--font-display); font-size:26px; font-weight:800; line-height:1; margin:0}
.ad-marca-sub{margin:0; font-family:var(--font-display); font-size:21px; font-weight:700; color:#B6F24A; line-height:1.1}
.panel-admin .nav-item{border-radius:14px; padding:10px 14px; font-size:14px}
.panel-admin .nav-item.active{background:linear-gradient(90deg, #3FA34A, #2E8B3E); color:#fff; font-weight:700; box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.panel-admin .nav-item:not(.active):hover{background:rgba(255,255,255,.08)}
.panel-admin .logout{margin-top:14px; border-top:1px solid rgba(255,255,255,.15); border-radius:0; padding-top:16px}
.ad-hojas{position:absolute; left:0; bottom:0; width:100%; height:160px; pointer-events:none}
.panel-admin .topbar{display:none}

.ad-hola{position:relative; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:22px; margin-bottom:20px}
.ad-iguana{width:200px; height:auto; filter:drop-shadow(0 10px 14px rgba(15,60,30,.18))}
.ad-hola h1{margin:0; font-family:var(--font-display); font-size:clamp(26px, 2.6vw, 38px); line-height:1.1; color:#0E3B22}
.ad-hola p{margin:10px 0 0; font-size:16px; color:#2E5A40; max-width:460px}
.ad-fecha{display:flex; align-items:center; gap:12px; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.75); box-shadow:0 8px 20px -14px rgba(0,0,0,.3)}
.ad-fecha span{font-size:28px}
.ad-fecha small{display:block; font-size:12px; color:var(--ink-soft)}
.ad-fecha strong{font-size:14px; color:#0E3B22}
.ad-hola .ad-lema{margin:0; max-width:190px; font-family:'Caveat', cursive; font-weight:700; font-size:34px; line-height:1; color:#0E4A26; transform:rotate(-10deg);
  padding-bottom:6px; background:linear-gradient(90deg, #0E4A26, rgba(14,74,38,0)) bottom left / 80% 3px no-repeat}

.ad-bloque{background:rgba(255,255,255,.85); border-radius:24px; padding:22px 22px 24px; margin-bottom:20px; box-shadow:0 14px 30px -22px rgba(15,60,30,.35)}
.ad-bloque-cab{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.ad-bloque-cab h2{margin:0; font-family:var(--font-display); font-size:22px; color:#0E3B22}
.ad-bloque-cab p{margin:2px 0 0; font-size:14px; color:#2E6B8C}
.ad-bloque-icono{width:46px; height:46px; display:grid; place-items:center; font-size:26px}
.ad-rayo{border-radius:50%; background:#0E4A2A; font-size:22px}
.ad-btn-oscuro{margin-left:auto; padding:11px 20px; border-radius:999px; background:#0E4A2A; color:#fff; font-weight:600; text-decoration:none; font-size:14px}
.ad-btn-oscuro:hover{background:#0B3F23}
.ad-juntos{margin-left:auto !important; font-family:'Caveat', cursive; font-weight:700; font-size:26px !important; color:#0E4A26 !important; transform:rotate(-5deg)}

.ad-verde{--a1:#2E8B3E; --a2:#E4F2DF}
.ad-azul{--a1:#1553A6; --a2:#E3EDFA}
.ad-morado{--a1:#6A3DB8; --a2:#EFE8FA}
.ad-naranja{--a1:#EA7B12; --a2:#FDF0E1}
.ad-teal{--a1:#137E86; --a2:#E0F3F3}
.ad-oscuro{--a1:#0E3B22; --a2:#E9EFEA}

.ad-stats{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px}
.ad-stat{position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"icono num flecha" "icono texto texto" "pie pie pie";
  gap:4px 14px; padding:18px 16px 12px; border-radius:18px; text-decoration:none; color:var(--ink);
  background:linear-gradient(160deg, #fff 40%, var(--a2)); border:1px solid rgba(0,0,0,.05); transition:transform .15s}
.ad-stat:hover{transform:translateY(-3px)}
.ad-stat-icono{grid-area:icono; width:60px; height:60px; display:grid; place-items:center; border-radius:50%; background:var(--a1); font-size:26px; align-self:start}
.ad-stat-num{grid-area:num; font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1; color:var(--a1)}
.ad-stat-flecha{grid-area:flecha; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--a1); font-weight:700}
.ad-stat-texto{grid-area:texto; font-size:14px; line-height:1.25; color:var(--a1)}
.ad-stat-pie{grid-area:pie; margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,.06); font-size:12px; color:var(--a1); font-weight:600}

.ad-accesos{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px}
.ad-acceso{display:flex; flex-direction:column; gap:8px; padding:18px 16px; border-radius:18px; background:#fff; border:1px solid rgba(0,0,0,.06);
  text-decoration:none; color:var(--ink); box-shadow:0 10px 22px -18px rgba(0,0,0,.4); transition:transform .15s}
.ad-acceso:hover{transform:translateY(-3px)}
.ad-acceso-icono{width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:var(--a1); font-size:28px; margin:0 auto 6px}
.ad-acceso strong{font-family:var(--font-display); font-size:17px; line-height:1.2; color:var(--a1)}
.ad-acceso span{font-size:13px; line-height:1.4; color:#4B594E}
.ad-acceso .ad-acceso-ir{margin:auto auto 0; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--a1); color:#fff; font-size:18px; font-weight:700}

@media (max-width: 1280px){
  .ad-stats{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .ad-accesos{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width: 900px){
  .ad-hola{grid-template-columns:auto 1fr}
  .ad-iguana{width:130px}
  .ad-fecha,.ad-hola .ad-lema{display:none}
  .ad-stats,.ad-accesos{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
.panel-admin .content{max-width:1340px}
.ad-stat{grid-template-columns:auto 1fr auto; gap:4px 12px; padding:16px 14px 12px}
.ad-stat-icono{width:50px; height:50px; font-size:22px}
.ad-stat-num{font-size:30px}
.ad-stat-texto{font-size:13px}
.ad-acceso .ad-acceso-icono{font-size:28px; line-height:1; color:#fff}
.ad-acceso .ad-acceso-ir{font-size:18px; color:#fff}
.ad-hola h1{max-width:560px}

/* ===== Panel: quién entró, Correo y WhatsApp, Administradores ===== */
.ad-accesos{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
.ad-quien{display:flex; align-items:center; gap:10px; margin:4px 0 14px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.08); color:#fff}
.ad-quien-avatar{width:34px; height:34px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:#6DBE5A; color:var(--forest-deep); font-weight:700; font-family:var(--font-display)}
.ad-quien strong{display:block; font-size:13px; line-height:1.2; overflow-wrap:anywhere}
.ad-quien small{display:block; font-size:11px; color:#BFE0B8}

.cx-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; align-items:start}
@media (max-width: 980px){ .cx-grid{grid-template-columns:1fr} }
.cx-card{margin:0}
.cx-card .field{display:block; margin-bottom:12px}
.cx-card .field input, .cx-card .field select{width:100%}
.cx-cab{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.cx-cab .pill{margin-top:4px; display:inline-block}
.cx-icono{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px}
.cx-correo{background:#E3EEFB}
.cx-wa{background:var(--green-pale)}
.cx-ayuda{margin:4px 0 14px; padding:10px 14px; border-radius:12px; background:var(--surface-alt); font-size:13px; color:var(--ink-soft)}
.cx-ayuda summary{cursor:pointer; font-weight:600; color:var(--forest)}
.cx-ayuda ol{padding-left:20px; margin:10px 0 0}
.cx-ayuda li{margin-bottom:6px}
.cx-acciones{display:flex; gap:10px; flex-wrap:wrap}
.cx-prueba{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line)}
.cx-quitar{margin-top:12px; background:none; border:none; padding:0; color:var(--clay); font-size:13px; cursor:pointer; text-decoration:underline}

.adm-fila-cab{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.adm-avatar{width:42px; height:42px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--green-pale); color:var(--green-deep); font-weight:700; font-size:18px; font-family:var(--font-display)}
.adm-avatar-principal{background:var(--amber-pale); color:#9A6414}
.adm-yo details summary{list-style:none; display:inline-block; cursor:pointer}
.adm-yo details summary::-webkit-details-marker{display:none}
.adm-dos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; margin-top:14px}
@media (max-width: 760px){ .adm-dos{grid-template-columns:1fr} }
.adm-dos .field{display:block; margin-bottom:10px}
.adm-dos .field input{width:100%}
.adm-sub{font-weight:600; color:var(--forest); margin:6px 0 8px}
.adm-permisos{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin-bottom:14px}
.adm-permiso{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer}
.adm-permiso:has(input:checked){border-color:var(--green); background:#F3FAF1}
.adm-permiso input{margin-top:3px; accent-color:var(--green)}
.adm-permiso strong{display:block; font-size:13px}
.adm-permiso small{display:block; color:var(--ink-soft); font-size:12px; margin-top:2px}
.adm-item.adm-pausado{opacity:.7}
.pe-num{background:var(--forest); color:#fff}
.cx-google{display:inline-flex; align-items:center; gap:10px}
.cx-google:disabled{opacity:.5; cursor:not-allowed}
.cx-g{width:22px; height:22px; border-radius:50%; background:#fff; color:#4285F4; display:grid; place-items:center; font-weight:800; font-family:Arial,sans-serif; font-size:14px}
.cx-uri{display:block; margin:6px 0 2px; padding:8px 10px; border-radius:8px; background:#fff; border:1px dashed var(--green); font-size:12px; overflow-wrap:anywhere; user-select:all}
.hh-aviso{position:relative; z-index:1; max-width:900px; margin:14px auto 0; padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.88); color:#4B594E; font-size:12.5px; line-height:1.45; text-align:center}
.hh-girardot{display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px; background:#E7F5E3; color:#2C6B2F; font-style:normal; font-size:11px; font-weight:700}

/* ===== Universidad → programas (diseño con tarjetas e iguana) ===== */
.hh-etqs{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.hh-etqs .hh-girardot{margin-top:0}
.hp{--uc:#2E9E3E; max-width:1180px}
.hp-cab{display:flex; align-items:center; gap:18px; padding:18px 22px; margin-bottom:18px; border-radius:20px; background:#fff; box-shadow:0 10px 30px -18px rgba(0,0,0,.35); border-left:6px solid var(--uc)}
.hp-logo{width:120px; height:80px; flex-shrink:0; display:grid; place-items:center; border-radius:14px; background:#F7F9F5; font-size:38px; overflow:hidden}
.hp-logo img{max-width:100%; max-height:100%; object-fit:contain}
.hp-nombre{font-size:24px; color:var(--forest)}
.hp-sub{margin:4px 0 8px; color:var(--ink-soft)}
.hp-etqs{display:flex; flex-wrap:wrap; gap:6px}
.hp-etqs span{padding:3px 10px; border-radius:999px; background:#E7F5E3; color:#2C6B2F; font-size:12px; font-weight:700}
.hp-cuerpo{display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:18px; align-items:start}
.hp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
.hp-card{position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#fff; text-decoration:none; color:var(--ink); box-shadow:0 8px 22px -14px rgba(0,0,0,.4); border:1px solid #E6ECE2; transition:transform .15s, box-shadow .15s}
.hp-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
.hp-card-img{position:relative; height:92px; background:linear-gradient(135deg, var(--c1), var(--c2)); overflow:hidden}
.hp-card-img::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 18%, transparent 19%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.22) 0 25%, transparent 26%)}
.hp-card-emoji{position:absolute; right:12px; bottom:-10px; font-size:72px; opacity:.35; transform:rotate(-8deg)}
.hp-card-icono{position:absolute; top:66px; left:14px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:var(--c1); color:#fff; border:3px solid #fff; box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.hp-card-cuerpo{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:30px 14px 14px}
.hp-card-titulo{font-family:var(--font-display); font-size:15px; line-height:1.25; color:var(--forest)}
.hp-pill{padding:3px 10px; border-radius:999px; background:#E7F5E3; color:#2C6B2F; font-size:12px; font-weight:700}
.hp-dato{font-size:12.5px; color:var(--ink-soft)}
.hp-tag{padding:2px 8px; border-radius:6px; background:#F1F3EE; color:#6B7A6E; font-size:11px}
.hp-ver{margin-top:4px; padding:5px 12px; border-radius:999px; border:1px solid #CFE3C8; color:var(--green-deep); font-size:12px; font-weight:700}
.hp-card:hover .hp-ver{background:var(--green); color:#fff; border-color:var(--green)}
.hp-lado{position:sticky; top:16px; display:flex; flex-direction:column; gap:14px}
.hp-ventajas{display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:18px; background:#fff; box-shadow:0 8px 22px -16px rgba(0,0,0,.4)}
.hp-ventajas div{display:flex; gap:10px; align-items:center}
.hp-ventajas p{margin:0; font-size:13px; color:var(--ink-soft)}
.hp-ventajas strong{color:var(--forest)}
.hp-v-icono{width:40px; height:40px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:#E7F5E3; color:var(--green-deep); font-weight:800; font-size:17px}
.hp-cerca{padding:8px; border-radius:12px; background:#FFF6DA}
.hp-iguana{position:relative; min-height:190px; padding:16px; border-radius:18px; background:linear-gradient(160deg, #EAF6E4, #CFEBC4); overflow:hidden}
.hp-lema{position:relative; z-index:1; margin:0; font-family:'Caveat', 'Segoe Script', cursive; font-size:24px; line-height:1.05; color:var(--forest)}
.hp-lema strong{font-size:30px; color:var(--green-deep)}
.hp-iguana img{position:absolute; right:-8px; bottom:-6px; width:130px}
.hp-contacto{display:block; padding:12px; border-radius:999px; background:var(--forest); color:#fff; text-align:center; font-weight:700; text-decoration:none}
.hp-contacto:hover{background:var(--green-deep)}
@media (max-width: 900px){ .hp-cuerpo{grid-template-columns:1fr} .hp-lado{position:static} .hp-cab{flex-direction:column; align-items:flex-start} }

/* Sigla de la universidad cuando aún no hay logo */
.uni-sigla{display:inline-grid; place-items:center; min-width:64px; max-width:100%; padding:10px 12px; border-radius:14px; background:linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 65%, #fff)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:.5px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.25); box-shadow:0 6px 14px -8px var(--sc)}
.uni-sigla-larga{font-size:14px}
.hh-res-logo .uni-sigla{min-width:0; padding:6px 7px; font-size:11px; border-radius:10px}

/* Programas de una universidad: de 3 en 3 */
.hp-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 1100px){ .hp-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 600px){ .hp-grid{grid-template-columns:1fr} }

/* Programas de una universidad: más ancho y más aire entre tarjetas */
.content:has(.hp){max-width:1480px}
.hp{max-width:none}
.hp-cab{padding:22px 28px; margin-bottom:28px}
.hp-cuerpo{grid-template-columns:minmax(0, 1fr) 270px; gap:36px}
.hp-grid{gap:28px 26px}
.hp-card-img{height:104px}
.hp-card-icono{top:78px; left:18px; width:52px; height:52px}
.hp-card-cuerpo{gap:8px; padding:36px 20px 20px}
.hp-card-titulo{font-size:16px; margin-bottom:2px}
.hp-lado{gap:20px}
@media (max-width: 1200px){ .hp-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 900px){ .hp-cuerpo{grid-template-columns:1fr} }
@media (max-width: 600px){ .hp-grid{grid-template-columns:1fr} }

/* ===== Lagartija (reemplaza a la iguana) que habla con un globo de diálogo ===== */
.modal-iguana{width:210px; top:-200px; right:-70px}
.modal-iguana img{animation:lagartija-habla 1.1s ease-in-out .8s 2}
@keyframes lagartija-habla{0%,100%{transform:none} 25%{transform:rotate(-3deg) translateY(-3px)} 75%{transform:rotate(3deg) translateY(-2px)}}
.lagartija-globo{position:absolute; right:128px; top:-150px; z-index:4; margin:0; max-width:240px; padding:10px 16px; border-radius:18px;
  background:#fff; color:#0E4A26; font-family:'Caveat','Segoe Print','Comic Sans MS',cursive; font-weight:700; font-size:24px; line-height:1.1;
  box-shadow:0 10px 24px -10px rgba(15,40,30,.45); border:2px solid #CFE7C6;
  animation:globo-sale .45s cubic-bezier(.34,1.56,.64,1) .55s both}
.lagartija-globo::after{content:""; position:absolute; right:-12px; bottom:14px; border:10px solid transparent; border-left-color:#fff; border-right:0}
.lagartija-globo::before{content:""; position:absolute; right:-15px; bottom:12px; border:12px solid transparent; border-left-color:#CFE7C6; border-right:0}
@keyframes globo-sale{0%{opacity:0; transform:scale(.3) translateX(30px)} 100%{opacity:1; transform:none}}
@media (max-width: 640px){
  .modal-iguana{width:130px; top:-124px; right:-6px}
  .lagartija-globo{right:118px; top:-96px; font-size:19px; max-width:180px}
}
@media (prefers-reduced-motion: reduce){ .lagartija-globo,.modal-iguana img{animation:none} }

/* Panel → Lo que dice la lagartija */
.lg-cab{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.lg-img{width:74px; height:auto; flex-shrink:0}
.lg-lista{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.lg-fila{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:#FBFCF9}
.lg-texto{flex:1 1 260px; display:flex; flex-direction:column; gap:4px}
.lg-texto input{width:100%; font-size:15px}
.lg-botones{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.lg-botones .btn{padding:7px 12px; font-size:13px}
.lg-subir{cursor:pointer}
.lg-grabando{background:#FDE2E1 !important; color:#B42318 !important; border-color:#F5A3A0 !important; animation:lg-pulso 1s infinite}
@keyframes lg-pulso{50%{opacity:.6}}
.pill-gris{background:#EEF1EC; color:#5B6B5F}

/* ================= Menú lateral del egresado: MAYÚSCULAS y botones llamativos ================= */
body:not(.panel-admin) .sidebar .nav{gap:8px}
body:not(.panel-admin) .sidebar .nav-item{
  position:relative; display:block;
  padding:11px 14px 11px 16px; border-radius:14px;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.3;
  color:#E4F2E1;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(155,214,145,.28);
  box-shadow:0 4px 12px -8px rgba(0,0,0,.6);
  overflow:hidden;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
/* barrita de color a la izquierda */
body:not(.panel-admin) .sidebar .nav-item::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0;
  background:#6BD35E; opacity:.55; transition:opacity .18s ease, top .18s ease, bottom .18s ease;
}
body:not(.panel-admin) .sidebar .nav-item:hover{
  color:#fff; transform:translateX(4px);
  background:linear-gradient(135deg, rgba(107,211,94,.30), rgba(63,174,73,.16));
  border-color:rgba(107,211,94,.65);
  box-shadow:0 8px 18px -8px rgba(63,174,73,.7);
}
body:not(.panel-admin) .sidebar .nav-item:hover::before{opacity:1; top:0; bottom:0}
body:not(.panel-admin) .sidebar .nav-item:focus-visible{outline:2px solid #FFD25A; outline-offset:2px}

/* botón activo: verde sólido brillante */
body:not(.panel-admin) .sidebar .nav-item.active{
  color:#fff;
  background:linear-gradient(90deg, #4CB848 0%, #2E8B3E 100%);
  border-color:#7EDB6F;
  box-shadow:0 10px 22px -10px rgba(76,184,72,.9), inset 0 1px 0 rgba(255,255,255,.25);
}
body:not(.panel-admin) .sidebar .nav-item.active::before{background:#FFD25A; opacity:1; top:0; bottom:0}

/* cerrar sesión: botón rojizo para diferenciarlo */
body:not(.panel-admin) .sidebar .nav-item.logout{
  margin-top:18px; color:#FFE3E0;
  background:linear-gradient(135deg, rgba(193,68,61,.35), rgba(193,68,61,.15));
  border-color:rgba(240,130,120,.5);
}
body:not(.panel-admin) .sidebar .nav-item.logout::before{background:#F0827A; opacity:.9}
body:not(.panel-admin) .sidebar .nav-item.logout:hover{
  color:#fff; background:linear-gradient(135deg, #C1443D, #9E2F29);
  border-color:#F0827A; box-shadow:0 8px 18px -8px rgba(193,68,61,.8);
}
@media (prefers-reduced-motion: reduce){
  body:not(.panel-admin) .sidebar .nav-item{transition:none}
  body:not(.panel-admin) .sidebar .nav-item:hover{transform:none}
}

/* ================= Portada "Grupos de investigación" (video protagonista + grupos compactos) ================= */
.hiv{position:relative; overflow:hidden; padding:22px; border-radius:26px; background:linear-gradient(180deg, #F5F9F6, #EEF5F0);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:18px}
.content.con-portada .hiv{min-height:calc(100vh - 96px)}
.hiv-mancha{position:absolute; border-radius:50%; pointer-events:none; filter:blur(2px)}
.hiv-mancha-1{right:-70px; top:-70px; width:200px; height:200px; background:#CFE8D2; opacity:.8}
.hiv-mancha-2{left:-80px; bottom:-90px; width:220px; height:220px; background:#D7ECD9; opacity:.8}

.hiv-top{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 2.1fr) minmax(250px, 1fr); gap:18px; align-items:stretch}

/* Video */
.hiv-marco{background:#fff; border-radius:24px; padding:10px; box-shadow:0 14px 30px -20px rgba(14,59,34,.55)}
.hiv-video{position:relative; height:100%; min-height:clamp(320px, 46vh, 520px); border-radius:18px; overflow:hidden;
  background:linear-gradient(110deg, #0B3B22 0%, #14562F 45%, #2E7D43 100%)}
.hiv-video video, .hiv-video iframe, .hiv-poster{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}
.hiv-poster, .hiv-video video{object-position:right center}
/* La foto se funde con el verde de la izquierda para que el texto se lea */
.hiv-video:not(.reproduciendo)::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,48,26,.92) 0%, rgba(10,60,32,.78) 32%, rgba(12,70,38,.25) 58%, rgba(0,0,0,0) 75%)}
.hiv-capa{position:absolute; z-index:2; inset:0; padding:clamp(18px, 3vw, 34px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  max-width:min(520px, 62%); pointer-events:none; transition:opacity .25s ease}
.hiv-onda{position:absolute; right:-60%; top:-30px; width:220px; height:120px; border-radius:0 0 0 100%; background:linear-gradient(135deg, rgba(122,203,90,.0), rgba(122,203,90,.35));}
.hiv-etiqueta{display:inline-flex; align-items:center; gap:8px; padding:7px 16px 7px 10px; border-radius:999px; background:#1E8B3E; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:clamp(11px, 1vw, 13px); letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.hiv-etiqueta svg, .hiv-mini-etiqueta svg{width:18px; height:18px; flex-shrink:0}
.hiv-lema{margin:14px 0 6px; display:flex; flex-direction:column; align-items:flex-start; font-family:'Caveat', cursive; font-weight:700;
  font-size:clamp(40px, 4.6vw, 74px); line-height:.86; transform:rotate(-7deg); transform-origin:left center; text-shadow:0 4px 18px rgba(0,0,0,.35)}
.hiv-lema span{display:block}
.hiv-lema-a{color:#fff}
.hiv-lema-b{color:#7ED957; margin-left:.25em}
.hiv-lema span:last-child{position:relative; padding-bottom:6px}
.hiv-lema span:last-child::after{content:""; position:absolute; left:.2em; right:-.2em; bottom:0; height:5px; border-radius:5px; background:#7ED957; transform:rotate(-3deg)}
.hiv-texto{margin:20px 0 0; color:#E9F5EA; font-size:clamp(13px, 1.15vw, 16px); line-height:1.45; max-width:380px}
.hiv-negrita{color:#fff; font-weight:700}
.hiv-play{position:absolute; z-index:3; left:62%; top:50%; transform:translate(-50%, -50%); width:clamp(70px, 7vw, 104px); height:clamp(70px, 7vw, 104px);
  border-radius:50%; border:none; cursor:pointer; background:#fff; color:#1E8B3E; display:grid; place-items:center;
  box-shadow:0 0 0 10px rgba(255,255,255,.28), 0 14px 30px -10px rgba(0,0,0,.6); transition:transform .2s ease, box-shadow .2s ease}
.hiv-play svg{width:46%; height:46%; margin-left:8%}
.hiv-play:hover{transform:translate(-50%, -50%) scale(1.07); box-shadow:0 0 0 16px rgba(255,255,255,.3), 0 18px 34px -10px rgba(0,0,0,.6)}
.hiv-play:focus-visible{outline:3px solid #FFD25A; outline-offset:4px}
@media (prefers-reduced-motion: no-preference){
  .hiv-play::after{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,.6); animation:hiv-pulso 2.2s ease-out infinite}
}
@keyframes hiv-pulso{from{transform:scale(1); opacity:.9} to{transform:scale(1.45); opacity:0}}
.hiv-video.reproduciendo .hiv-capa, .hiv-video.reproduciendo .hiv-play, .hiv-video.reproduciendo .hiv-poster{opacity:0; visibility:hidden}

/* Conoce más */
.hiv-conoce{position:relative; background:#fff; border-radius:24px; padding:18px 16px; box-shadow:0 14px 30px -20px rgba(14,59,34,.55);
  display:flex; flex-direction:column; gap:10px; overflow:hidden}
.hiv-conoce::after{content:""; position:absolute; right:-40px; bottom:-40px; width:130px; height:110px; border-radius:50%; background:#E1F1E3; z-index:0}
.hiv-conoce > *{position:relative; z-index:1}
.hiv-conoce-titulo{margin:0 0 4px 4px; font-family:'Caveat', cursive; font-weight:700; font-size:clamp(30px, 2.6vw, 40px); color:#0E3B22; transform:rotate(-4deg); transform-origin:left}
.hiv-citem{display:flex; align-items:center; gap:12px; padding:10px 12px 10px 10px; border-radius:16px; background:#F1F8F2; color:inherit; text-decoration:none;
  cursor:pointer; list-style:none; transition:background .18s ease, transform .18s ease, box-shadow .18s ease}
.hiv-citem::-webkit-details-marker{display:none}
.hiv-citem:hover, .hiv-citem-d[open] > .hiv-citem{background:#E2F2E4; transform:translateX(3px); box-shadow:0 6px 14px -10px rgba(14,59,34,.6)}
.hiv-citem:focus-visible{outline:2px solid #1E8B3E; outline-offset:2px}
.hiv-ci{flex-shrink:0; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%, #4CB848, #1E7A3A); border:3px solid #fff; box-shadow:0 4px 10px -4px rgba(14,59,34,.6)}
.hiv-ci svg{width:22px; height:22px}
.hiv-ct{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.hiv-ct strong{font-family:var(--font-display); font-size:14px; color:#0E3B22}
.hiv-ct small{font-size:12px; color:#4B594E; line-height:1.3}
.hiv-cf{font-size:22px; font-weight:700; color:#1E8B3E; transition:transform .18s ease}
.hiv-citem-d[open] .hiv-cf{transform:rotate(90deg)}
.hiv-cinfo{margin:6px 6px 4px; padding:10px 12px; border-left:3px solid #4CB848; background:#F8FBF8; border-radius:0 10px 10px 0; font-size:13px; line-height:1.45; color:#2C3D31}

/* Grupos de investigación: más compactos */
.hiv-grupos{position:relative; z-index:1; background:#fff; border-radius:22px; padding:14px 16px 16px; box-shadow:0 10px 24px -20px rgba(14,59,34,.55)}
.hiv-grupos-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap}
.hiv-mini-etiqueta{display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 8px; border-radius:999px; background:#E3F1E5; color:#1E7A3A;
  font-family:var(--font-display); font-weight:700; font-size:12px}
.hiv-grupos-titulo{margin:6px 0 2px; font-family:'Baloo 2', var(--font-display); font-weight:800; font-size:clamp(20px, 1.8vw, 26px); line-height:1.1; color:#0E3B22}
.hiv-grupos-sub{margin:0; font-size:13px; color:#4B594E}
.hiv-grupos-der{display:flex; align-items:center; gap:14px}
.hiv-frase{margin:0; max-width:210px; font-family:'Caveat', cursive; font-weight:700; font-size:clamp(20px, 1.7vw, 26px); line-height:1; color:#0E3B22; transform:rotate(-6deg); text-align:right}
.hiv-flechas{display:flex; gap:6px}
.hiv-flecha{width:32px; height:32px; border-radius:50%; border:1px solid #D5E5D7; background:#fff; color:#0E3B22; font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 4px 10px -6px rgba(0,0,0,.4)}
.hiv-flecha:hover:not(:disabled){background:#1E8B3E; color:#fff; border-color:#1E8B3E}
.hiv-flecha:disabled{opacity:.35; cursor:default}
.hiv-filtros{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 10px}
.hiv-filtros a{padding:4px 12px; border-radius:999px; border:1px solid #D5E5D7; font-size:12px; color:#2C3D31; text-decoration:none; background:#fff}
.hiv-filtros a:hover{border-color:#1E8B3E; color:#1E7A3A}
.hiv-filtros a.activo{background:#1E8B3E; border-color:#1E8B3E; color:#fff; font-weight:600}
.hiv-carrusel{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px, calc((100% - 28px) / 3)); gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:4px}
.hiv-card{--ic:#1E6B3A; --icl:#E3F1DC; scroll-snap-align:start; display:flex; gap:12px; padding:8px; border-radius:16px; background:#fff;
  border:1px solid #E4EEE5; box-shadow:0 6px 14px -12px rgba(0,0,0,.5); transition:transform .18s ease, box-shadow .18s ease; min-height:0}
.hiv-card:hover{transform:translateY(-2px); box-shadow:0 12px 22px -14px rgba(0,0,0,.5)}
.hiv-card-img{flex-shrink:0; width:96px; height:120px; border-radius:12px 12px 26px 12px; overflow:hidden; background:var(--icl)}
.hiv-card-img img{width:100%; height:100%; object-fit:cover}
.hiv-card-cuerpo{display:flex; flex-direction:column; min-width:0; flex:1}
.hiv-card-icono{width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--ic); margin-bottom:4px}
.hiv-card-icono img{width:100%; height:100%; object-fit:cover}
.hiv-card h3{margin:0 0 3px; font-family:'Baloo 2', var(--font-display); font-size:15px; line-height:1.15; color:var(--ic)}
.hiv-card p{margin:0 0 6px; font-size:12px; line-height:1.35; color:#4B594E; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.hiv-card-pie{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px}
.hiv-boton{display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; background:var(--ic); color:#fff; font-weight:700; font-size:12px; text-decoration:none}
.hiv-boton:hover{filter:brightness(1.12)}
.hiv-cupos{font-size:11px; font-weight:600; color:#4B594E}
.hiv-vacio{margin:0; padding:14px; border-radius:12px; background:#F5F9F6; color:var(--ink-soft)}

@media (max-width: 1100px){
  .hiv-top{grid-template-columns:1fr}
  .hiv-conoce{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr))}
  .hiv-conoce-titulo{grid-column:1 / -1}
}
@media (max-width: 860px){
  .hiv{padding:12px}
  .hiv-capa{max-width:100%}
  .hiv-video:not(.reproduciendo)::before{background:linear-gradient(180deg, rgba(8,48,26,.35) 0%, rgba(8,48,26,.85) 70%)}
  .hiv-play{left:auto; right:18px; top:18px; transform:none; width:62px; height:62px}
  .hiv-play:hover{transform:scale(1.05)}
  .hiv-conoce{display:flex}
  .hiv-carrusel{grid-auto-columns:85%}
  .hiv-frase{display:none}
}

/* ================= Sin campana: las portadas llegan al borde de arriba ================= */
body:not(.panel-admin) .topbar{display:none}
body:not(.panel-admin) .content{padding-top:16px}
body:not(.panel-admin) .content.con-portada{padding-top:0}
body:not(.panel-admin) .content.con-portada > :is(.hero-emp, .hero-hom, .hemp-wrap, .hfo-wrap, .hem-wrap, .hco-wrap, .hin, .hac-wrap, .hiv){
  border-top-left-radius:0; border-top-right-radius:0; min-height:calc(100vh - 20px)}
@media (max-width: 860px){
  /* En el celular se deja solo el nombre del apartado arriba */
  body:not(.panel-admin) .topbar{display:flex; justify-content:flex-start; padding:12px 16px}
  body:not(.panel-admin) .content.con-portada > :is(.hero-emp, .hero-hom, .hemp-wrap, .hfo-wrap, .hem-wrap, .hco-wrap, .hin, .hac-wrap, .hiv){min-height:0}
}

/* ================= Campana de notificaciones (solo en Inicio) ================= */
body:not(.panel-admin) .main{position:relative}
.bell-inicio{position:absolute; top:16px; right:22px; z-index:30}
.bell-inicio .bell-btn{width:46px; height:46px; display:grid; place-items:center; background:#fff; color:#1E7A3A; border-radius:50%;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.45); transition:transform .18s ease}
.bell-inicio .bell-btn:hover{transform:scale(1.06)}
.bell-inicio .bell-btn svg{width:24px; height:24px}
.bell-inicio .bell-dropdown{top:54px; width:330px; padding:14px; border-radius:16px}
.bell-item-btn{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; background:#F5F9F6; border:1px solid transparent; border-radius:12px;
  padding:10px 12px; margin:0 0 8px; cursor:pointer; font:inherit; color:inherit; transition:background .15s ease, border-color .15s ease}
.bell-item-btn:hover, .bell-item-btn:focus-visible{background:#E6F3E8; border-color:#BFE0C4; outline:none}
.bell-item-btn.nt-nueva{border-left:4px solid #1F8A3C}
.bell-resumen{font-size:12px; color:var(--ink-soft); line-height:1.35}
.bell-fecha{font-size:10px; color:#7A887D}
.nt-modal-fondo{display:none; position:fixed; inset:0; z-index:90; background:rgba(10,30,18,.45)}
.nt-modal-fondo.open{display:block}
.nt-modal{display:none; position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%, -50%); width:min(520px, calc(100vw - 32px)); max-height:80vh; overflow:auto;
  background:#fff; border-radius:20px; padding:24px 24px 20px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); border-top:6px solid #1F8A3C}
.nt-modal.open{display:block}
.nt-modal-cerrar{position:absolute; top:12px; right:12px; width:34px; height:34px; border:none; border-radius:50%; background:#EEF4EF; cursor:pointer; font-size:15px}
.nt-modal-etiqueta{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1E7A3A}
.nt-modal h3{margin:0 40px 4px 0; font-size:20px; color:var(--forest)}
.nt-modal-fecha{margin:0 0 14px; font-size:12px; color:#7A887D}
.nt-modal-texto{white-space:pre-line; font-size:15px; line-height:1.55; color:#23392B; margin-bottom:16px}
@media (max-width: 860px){
  .bell-inicio{top:6px; right:12px}
  .bell-inicio .bell-btn{width:40px; height:40px}
  .bell-inicio .bell-dropdown{width:min(330px, calc(100vw - 24px))}
}

/* ================= Egrecko: muñecos intercalados en las preguntas (arriba del mensaje, a un lado y al otro) ================= */
.egk-marco{margin-top:190px}
.egk-marco > .modal-card{max-height:calc(92vh - 190px)}
.egk-marco .pill, .egk-marco .modal-title, .egk-marco .modal-sub{margin-right:0}
.egk-escena{position:absolute; left:-30px; right:-30px; bottom:calc(100% - 26px); z-index:3; display:flex; align-items:flex-start; gap:4px; pointer-events:none}
.egk-der{flex-direction:row-reverse}
.egk-img{display:block; height:auto; filter:drop-shadow(0 10px 16px rgba(15,40,30,.35)); transform-origin:50% 100%;
  animation:egk-asoma .7s cubic-bezier(.34,1.56,.64,1) .1s both, lagartija-habla 1.1s ease-in-out .9s 2}
.egk-pulsera{width:340px}
.egk-corazon{width:200px}
.egk-birrete{width:165px}
.egk-letrero{width:235px}
@keyframes egk-asoma{0%{transform:translateY(70px) scale(.5); opacity:0} 60%{transform:translateY(-6px) scale(1.04); opacity:1} 100%{transform:none}}
.egk-escena .lagartija-globo{position:relative; right:auto; left:auto; top:auto; margin-top:24px; flex:0 1 auto}
/* Pico del globo hacia el muñeco */
.egk-izq .lagartija-globo::after{right:auto; left:-12px; border-left:0; border-right:10px solid #fff; border-left-color:transparent}
.egk-izq .lagartija-globo::before{right:auto; left:-15px; border-left:0; border-right:12px solid #CFE7C6; border-left-color:transparent}
.egk-izq .lagartija-globo{animation-name:globo-sale-izq}
@keyframes globo-sale-izq{0%{opacity:0; transform:scale(.3) translateX(-30px)} 100%{opacity:1; transform:none}}
@media (max-width: 640px){
  .egk-marco{margin-top:130px}
  .egk-marco > .modal-card{max-height:calc(92vh - 130px)}
  .egk-escena{left:-4px; right:-4px; bottom:calc(100% - 18px)}
  .egk-pulsera{width:220px} .egk-corazon{width:130px} .egk-birrete{width:108px} .egk-letrero{width:150px}
  .egk-escena .lagartija-globo{margin-top:8px; font-size:18px; max-width:170px}
}
@media (prefers-reduced-motion: reduce){ .egk-img{animation:none} }

/* Egrecko saluda al entrar a un apartado */
.egk-visita{position:fixed; bottom:0; z-index:80; display:flex; align-items:flex-end; gap:6px; cursor:pointer;
  animation:egk-sube .6s cubic-bezier(.34,1.56,.64,1) both}
.egk-visita[hidden]{display:none}
.egk-visita-der{right:24px; flex-direction:row}
.egk-visita-izq{left:254px; flex-direction:row-reverse}
.egk-visita-img{display:block; height:200px; width:auto; max-width:320px; object-fit:contain; margin-bottom:-6px;
  filter:drop-shadow(0 10px 18px rgba(15,40,30,.35))}
.egk-visita-globo{margin:0 0 150px; max-width:220px; padding:10px 16px; border-radius:18px; background:#fff; color:#0E4A26; border:2px solid #CFE7C6;
  font-family:'Caveat','Segoe Print','Comic Sans MS',cursive; font-weight:700; font-size:24px; line-height:1.1; box-shadow:0 10px 24px -10px rgba(15,40,30,.45);
  animation:globo-sale .45s cubic-bezier(.34,1.56,.64,1) .45s both}
.egk-visita-cerrar{position:absolute; top:-6px; width:26px; height:26px; border-radius:50%; border:none; background:#fff; color:#0E4A26; font-size:12px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.4); cursor:pointer}
.egk-visita-der .egk-visita-cerrar{right:0}
.egk-visita-izq .egk-visita-cerrar{left:0}
.egk-visita.saliendo{animation:egk-baja .4s ease-in both}
@keyframes egk-sube{0%{transform:translateY(110%)} 100%{transform:none}}
@keyframes egk-baja{0%{transform:none; opacity:1} 100%{transform:translateY(110%); opacity:0}}
@media (max-width: 860px){
  .egk-visita{bottom:64px}
  .egk-visita-der{right:8px} .egk-visita-izq{left:8px}
  .egk-visita-img{height:130px; max-width:220px}
  .egk-visita-globo{margin-bottom:96px; font-size:19px; max-width:160px}
}
@media (prefers-reduced-motion: reduce){ .egk-visita, .egk-visita.saliendo, .egk-visita-globo{animation:none} }

/* ================= Fondo con video de YouTube (cubre toda la pantalla, sin controles) ================= */
.site-bg-yt{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; background:#0F281E}
/* El video se ve COMPLETO (sin recortar ni ampliar) y las orillas se rellenan con una versión difuminada */
.site-bg-yt-difuso{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(28px) brightness(.8) saturate(1.1)}
/* Zona del video: todo el espacio a la derecha del menú, centrado */
.site-bg-yt-zona{position:absolute; top:14px; bottom:14px; left:calc(230px + 22px); right:22px; display:flex; align-items:center; justify-content:center}
/* Marco: blanco, con borde verde y sombra; ocupa toda la zona */
.site-bg-yt-marco{position:relative; width:100%; height:100%; overflow:hidden; container-type:size;
  border-radius:26px; border:8px solid #fff; background:#0F281E;
  box-shadow:0 0 0 3px #3FAE49, 0 0 0 9px rgba(255,255,255,.35), 0 30px 60px -20px rgba(0,0,0,.65)}
/* El video cubre el marco sin deformarse; el iframe es más alto para esconder el título y el logo de YouTube */
.site-bg-yt iframe{position:absolute; left:50%; top:50%; width:max(100cqw, 177.78cqh); height:calc(max(56.25cqw, 100cqh) + 140px);
  transform:translate(-50%, -50%); border:0; pointer-events:none}
@media (max-width: 860px){
  .site-bg-yt-zona{left:12px; right:12px; top:70px; bottom:auto}
  .site-bg-yt-marco{width:100%; height:auto; aspect-ratio:16 / 9; border-width:5px; border-radius:18px}
}

/* ================= Panel → Correo: opción rápida y ventanita con el paso a paso ================= */
.cx-guia-btn{display:flex; align-items:center; gap:8px; width:100%; margin:0 0 14px; padding:12px 16px; border-radius:14px; border:2px dashed #8FCB8B;
  background:#F1F8F0; color:#1E6B3A; font:inherit; font-weight:700; font-size:14px; cursor:pointer; text-align:left}
.cx-guia-btn:hover{background:#E3F2E2; border-style:solid}
.cx-rapido{padding:14px 16px; border-radius:14px; background:#FAFCF9; border:1px solid var(--line); margin-bottom:6px}
.cx-rapido-titulo{margin:0 0 10px; font-weight:700; color:var(--forest)}
.cx-o{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--ink-soft); font-size:12px}
.cx-o::before, .cx-o::after{content:""; flex:1; height:1px; background:var(--line)}
.cx-guia{width:min(680px, calc(100vw - 24px)); max-height:88vh; padding:26px 26px 20px; border:none; border-radius:22px; border-top:6px solid #2E8B3E;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55); color:var(--ink)}
.cx-guia::backdrop{background:rgba(10,30,18,.5)}
.cx-guia-cerrar{position:absolute; top:12px; right:12px; width:34px; height:34px; border:none; border-radius:50%; background:#EEF4EF; cursor:pointer}
.cx-guia-etq{margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1E7A3A}
.cx-guia h3{margin:0 40px 14px 0; font-size:20px; color:var(--forest)}
.cx-guia-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.cx-guia-tabs button{flex:1; min-width:200px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; font:inherit; font-weight:600; font-size:13px; cursor:pointer; text-align:left; color:var(--ink)}
.cx-guia-tabs button small{display:block; font-weight:400; color:var(--ink-soft)}
.cx-guia-tabs button.activo{background:#2E8B3E; border-color:#2E8B3E; color:#fff}
.cx-guia-tabs button.activo small{color:#DDF0DC}
.cx-pasos{counter-reset:paso; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.cx-pasos li{counter-increment:paso; position:relative; padding:10px 12px 10px 48px; border-radius:12px; background:#F5F9F4; font-size:14px; line-height:1.5}
.cx-pasos li::before{content:counter(paso); position:absolute; left:12px; top:10px; width:26px; height:26px; border-radius:50%; background:#2E8B3E; color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:13px}
.cx-pasos a{color:#1553A6; font-weight:600}
.cx-guia-nota{margin-top:12px; padding:10px 12px; border-radius:12px; background:#FFF6E0; color:#6B4E00; font-size:13px; line-height:1.45}
.cx-guia-pie{margin:14px 0 0; font-size:12px; color:var(--ink-soft)}

/* Busca empleo: video de YouTube dentro del marco (completo, con las orillas difuminadas) */
.hemp-yt{position:relative; width:100%; height:100%; overflow:hidden; background:#0B4F24; display:flex; align-items:center}
.hemp-yt-difuso{position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(22px) brightness(.75)}
.hemp-yt iframe{position:relative; width:100%; aspect-ratio:16 / 9; height:auto; border:0; display:block}