/* =================== Paleta / Base =================== */
:root{
  --primary:#004E90;       /* azul principal */
  --primary-900:#003a6a;   /* azul profundo para header */
  --white:#FFFFFF;
  --gray-100:#E6E6E6;
  --gray-500:#757575;
  --text:#1A1A1A;
  --radius:12px;
  --maxw: 1200px;          /* ancho máx del contenido */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
  color:var(--text);
  background: var(--gray-100); /* <-- gris claro (#E6E6E6) */
}

main{
  width:min(var(--maxw), 92%);
  margin-inline:auto;
  margin-top: 10px;
}

/* Contenedor centrado y legible en 1080p */
.container{
  width:min(var(--maxw), 92%);
  margin-inline:auto;
}

/* Utilidades */
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img,video{max-width:100%;height:auto}
:focus-visible{outline:3px solid #0b3a66;outline-offset:2px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.embed video{width:100%;height:100%;border:0;display:block}

/* Grilla para múltiples videos embebidos */
.embed-grid { display: grid; gap: 1rem; }
@media (min-width: 860px) {
  .embed-grid { grid-template-columns: 1fr 1fr; }
}

/* =================== Header / Nav =================== */
header{
  background: var(--primary); /* usamos azul oficial para mayor contraste con el logo */
  color:#fff;
  border-bottom:4px solid #00325a;
  position:sticky; top:0; z-index:50;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
header .inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
}

/* Bloque de logo e identificador institucional */
.branding{
  display:flex; align-items:center; gap:.8rem;
}
.branding img{
  height: 64px;           /* puedes ajustar a 56-72px según look */
  max-height:80px;
  width:auto;
}

header h1{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.2;
}
nav{
  display:flex; gap:.75rem; flex-wrap:wrap;
}
nav a{
  color:#fff; text-decoration:none;
  padding:.45rem .5rem;
  border-bottom:2px solid transparent;
  border-radius:8px;
}
nav a:hover{border-color:#fff}
nav a[aria-current="page"]{
  background:rgba(255,255,255,.12);
  border-color:transparent;
}

/* SOLO aplica al menú del header */
header nav{ display:flex; gap:.75rem; flex-wrap:wrap; }
header nav a{
  color:#fff; text-decoration:none;
  padding:.45rem .5rem; border-bottom:2px solid transparent; border-radius:8px;
}
header nav a:hover{ border-color:#fff }
header nav a[aria-current="page"]{ background:rgba(255,255,255,.12); border-color:transparent }

/* Subnavegación horizontal de Capacitación */
nav[aria-label="Subnavegación capacitación"] a{
  color: var(--primary);
  background: transparent;
  border-bottom: 2px solid transparent;
  padding: .45rem .5rem;
  border-radius: 8px;
}
nav[aria-label="Subnavegación capacitación"] a:hover{
  text-decoration: none;
  border-color: var(--primary);
}
nav[aria-label="Subnavegación capacitación"] a[aria-current="page"]{
  background: #eaf2fb;       /* leve contraste en blanco */
  border-color: var(--primary);
  font-weight: 600;
}

nav[aria-label="Subnavegación capacitación"] {
  background:#fff;           /* se mantiene legible */
  margin-bottom:1rem;
}

nav[aria-label="Subnavegación capacitación"] .card {
  padding:0;
  box-shadow:none;
  border:none;
}

/* Lista horizontal que scrollea si es necesario */
nav[aria-label="Subnavegación capacitación"] ul{
  display:flex;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:.5rem 1rem;
  overflow-x:auto;        /* hace scroll horizontal */
  -webkit-overflow-scrolling:touch; /* scroll suave en móvil */
  width:100%;             /* ocupa todo el ancho */
  box-sizing:border-box;
}

nav[aria-label="Subnavegación capacitación"] li{
  flex:0 0 auto;          /* evita que se compriman los ítems */
}

/* ===== Navegación inferior de capacitación ===== */
.nav-bottom{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:2rem;
}

.nav-bottom a{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  flex:1;
  text-align:center;
}

.nav-bottom a:hover{
  background:#00325a;
}

/* =================== Secciones / Página =================== */
section{
  background:#fff; /* cada sección en blanco */
  margin-bottom:1.5rem;
  border-radius:var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  padding:2.5rem 0;
}
section.alt{
  background:#f9f9f9; /* alternativa más clara para diferenciar */
}
section h2{margin-top:0}
.lead{font-size:1.07rem;color:#222}

.note {
  padding-top: 10px;
}

/* Tarjeta de apoyo (reutilizable) */
.card{
  background:#fff;
  border-radius:var(--radius);padding:1rem;
}

/* Lista de pasos (flujo) */
.flow{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.flow li{
  background:#fff;border:1px solid var(--gray-100);
  border-left:6px solid var(--primary);
  padding:.75rem;border-radius:var(--radius);
}

/* Grilla de perfiles (si la usas en otras páginas) */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.profile-card{
  display:block;background:#fff;border:1px solid var(--gray-100);
  border-radius:var(--radius);padding:1rem;color:inherit;text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.profile-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.profile-card h3{margin:.25rem 0}

/* Embeds de video (en página de capacitación) */
.embed{aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--gray-100)}
.embed iframe{width:100%;height:100%;border:0}

/* =================== Footer =================== */
footer{
  background:#0b3a66;color:#e9f3ff;padding:1rem 0;margin-top:2rem;
}
footer a{color:#e9f3ff}
footer p{margin:.2rem 0}

/* =================== Responsive =================== */
@media (max-width: 860px){
  header h1{font-size:1rem}
}

/* ==== Grupos de perfiles diferenciados ==== */
.profile-group {
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  padding: 1rem;
}

.profile-group-title {
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: .8rem;
}

/* Colores diferenciadores */
.profile-group--origen {
  background: #e8f4ff; /* azul muy suave */
  border-left: 6px solid var(--primary);
}

.profile-group--destino {
  background: #f5f9f0; /* verde muy suave */
  border-left: 6px solid #3d7a2a;
}

/* opcional: que las tarjetas hereden sutilmente el color */
.profile-group--origen .profile-card {
  background: #fff;
  border: 1px solid #cfe5fa;
}
.profile-group--destino .profile-card {
  background: #fff;
  border: 1px solid #dce9d6;
}

/* ==== Boton de acción ==== */
.btn-primary {
  display:inline-block;
  background: var(--primary);
  color:#fff;
  padding:.6rem 1rem;
  border-radius: var(--radius);
  font-weight:600;
  text-decoration:none;
}
.btn-primary:hover { background: var(--primary-900); }