/* ===========================================================
   SIDIUNLaR · componentes de las páginas internas
   -----------------------------------------------------------
   Los tokens, la tipografía "Now", el reset, los botones, la
   cabecera y el pie viven en /assets/site.css (fuente de verdad).
   Acá quedan SOLO los componentes: hero interno, tarjetas de
   contenido, formularios y etiquetas de estado.

   Acá NO se importa site.css. Antes había un @import y todas las
   páginas internas terminaban cargándolo dos veces, por dos
   direcciones distintas. Como este archivo siempre se pidió como
   ui.css?v=8 aunque su contenido cambiara, los navegadores servían
   de su caché una copia vieja, que importaba un site.css viejo; esa
   copia entraba al final de la cascada y le ganaba a la nueva. Se
   veía al pasar de la portada a cualquier página interna: el menú
   del celular volvía al diseño anterior.
   Hoy todas las páginas que se muestran enlazan site.css por su
   cuenta (maqueta/*.html, partials/head.ejs y sitio_head.ejs).
   =========================================================== */

/* ===========================================================
   HERO de las páginas internas
   -----------------------------------------------------------
   Va pegado debajo de la cabecera verde, así que usa un verde
   MÁS PROFUNDO que ella (#057d2f) para leerse como otra capa:
   degradé hacia --green-900, malla de puntos muy tenue (la misma
   trama que la portada) y un filete lima que lo cierra abajo.
   Lo comparten las 8 páginas internas para que se vean hermanas.
   =========================================================== */
.pg-hero{
  /* z-index propio: así el filete lima queda DEBAJO de la tarjeta que se le superpone */
  position:relative;z-index:1;overflow:hidden;text-align:center;color:#fff;
  padding:62px 0 96px;
  background:
    radial-gradient(120% 110% at 50% -35%,rgba(105,174,28,.30),transparent 62%),
    linear-gradient(158deg,#045e23 0%,#03501d 52%,#02400f 100%);
}
/* malla de puntos: textura discreta, se desvanece hacia abajo */
.pg-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.2px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 82%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 82%);
}
/* filete lima al pie (mismo gesto que el borde inferior de la cabecera) */
.pg-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,rgba(105,174,28,.35),var(--green-400) 16%,var(--lime) 50%,var(--green-400) 84%,rgba(105,174,28,.35));
}
.pg-hero>*{position:relative;z-index:2}
/* variante "al ras": para las páginas cuyo contenido NO se superpone al hero */
.pg-hero.pg-hero-flat{padding-bottom:54px}

/* ícono y etiqueta: lima sobre verde oscuro (contraste alto) */
.pg-hero .hic{
  width:68px;height:68px;border-radius:20px;display:grid;place-items:center;margin:0 auto 18px;
  color:var(--lime);background:rgba(255,255,255,.08);border:1px solid rgba(192,210,53,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px rgba(0,0,0,.22);
}
.pg-hero .hic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pg-hero .kick{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);background:rgba(192,210,53,.16);border:1px solid rgba(192,210,53,.30);
  padding:6px 15px;border-radius:999px;margin-bottom:16px;
}
.pg-hero h1{font-size:40px;color:#fff;margin-bottom:12px;text-wrap:balance}
.pg-hero h1 em{font-style:normal;color:var(--lime);font-weight:800}
.pg-hero p{max-width:660px;margin:0 auto;color:#dcefe3;font-size:16.5px}

/* entrada sobria del hero */
.pg-hero .hic,.pg-hero .kick,.pg-hero h1,.pg-hero p{animation:pgUp .7s cubic-bezier(.2,.7,.2,1) both}
.pg-hero h1{animation-delay:.07s}
.pg-hero p{animation-delay:.14s}
@keyframes pgUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pg-hero .hic,.pg-hero .kick,.pg-hero h1,.pg-hero p{animation:none}}

@media(max-width:820px){.pg-hero{padding:48px 0 78px}.pg-hero h1{font-size:31px}.pg-hero .hic{width:60px;height:60px;border-radius:18px}}
@media(max-width:560px){.pg-hero h1{font-size:26px}.pg-hero p{font-size:15.5px}}

/* ===========================================================
   CUERPO de las páginas de servicio (capacitaciones, beneficios,
   asesoría legal, turismo): tarjeta superpuesta al hero
   =========================================================== */
.pg-body{max-width:1000px;margin:-60px auto 0;padding:0 26px 72px;position:relative;z-index:2}
.pg-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-lg);padding:40px}
.pg-lead{font-size:17px;color:var(--text);line-height:1.7;margin-bottom:28px}
.pg-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
.pg-feat{display:flex;gap:14px;align-items:flex-start;background:#fbfdfc;border:1px solid var(--border);border-radius:18px;padding:18px}
.pg-feat .fi{flex:none;width:44px;height:44px;border-radius:13px;background:rgba(5,125,47,.12);color:var(--green-600);display:grid;place-items:center}
.pg-feat .fi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pg-feat b{display:block;color:var(--green-900);font-size:15px;margin-bottom:3px;font-weight:700}
.pg-feat span{font-size:13.5px;color:var(--muted);line-height:1.5}
.pg-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:680px){.pg-feats{grid-template-columns:1fr}.pg-card{padding:26px}}

/* ===========================================================
   RITMO COMÚN de las páginas internas
   Mismo aire entre secciones y mismo encabezado de sección.
   =========================================================== */
.in-sec,.lg-sec,.ed-sec{margin-top:44px}
.in-sec:first-of-type,.lg-sec:first-of-type,.ed-sec:first-of-type{margin-top:0}

/* ===========================================================
   MICRO-INTERACCIÓN ÚNICA de tarjetas
   Una sola elevación suave para todo el sitio interno: nada de
   parpadeos, es un sitio institucional.
   =========================================================== */
.pg-feat,.auth,.sede,.dep,.doc,.val,.mv,.ed-card{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.pg-feat:hover,.auth:hover,.sede:hover,.dep:hover,.doc:hover,.val:hover,.mv:hover,.ed-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(3,80,29,.13);
  border-color:rgba(105,174,28,.45);
}
@media(prefers-reduced-motion:reduce){
  .pg-feat:hover,.auth:hover,.sede:hover,.dep:hover,.doc:hover,.val:hover,.mv:hover,.ed-card:hover{transform:none}
}

/* ===========================================================
   FORMULARIOS
   =========================================================== */
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--green-900);margin-bottom:7px}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;color:var(--text);background:#fff;transition:.2s;outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(5,125,47,.12)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.col-span{grid-column:1/-1}
.upload{border:2px dashed var(--border);border-radius:14px;padding:24px;text-align:center;color:var(--muted);cursor:pointer;transition:.2s;background:#fbfdfc}
.upload:hover{border-color:var(--green-500);color:var(--green-600);background:rgba(5,125,47,.04)}
.upload svg{width:30px;height:30px;margin:0 auto 8px;color:var(--green-500)}
@media(max-width:680px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ===========================================================
   ETIQUETAS DE ESTADO
   =========================================================== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px}
.badge.ok{background:rgba(5,125,47,.14);color:var(--green-600)}
.badge.pend{background:rgba(240,160,32,.16);color:#b9730a}
.badge.baja{background:rgba(229,72,77,.13);color:var(--danger)}
.badge.info{background:rgba(47,128,237,.13);color:var(--info)}