/* ==========================================================================
   Vincula Talento · micrositio de cursos (cursos.vinculatalento.com)
   Va DESPUES de sitio.css y usa sus tokens: la paleta medida del logotipo, Montserrat y la escala.
   Tonos de area (todos con contraste >= 5.9:1 sobre blanco, para texto blanco encima):
     1 marino #01276B · 2 corporativo #006CD8 · 3 azul de la portada #0A4FB0 · 4 gris institucional #586579
   ========================================================================== */

.micrositio { --tono: var(--marino); }
.tono-1 { --tono: #01276B; }
.tono-2 { --tono: #006CD8; }
.tono-3 { --tono: #0A4FB0; }
.tono-4 { --tono: #586579; }

/* ---------- encabezado ---------- */
.marca-cursos { gap: var(--e-3); text-decoration: none; }
.marca-sello {
  display: inline-flex; align-items: center; height: 28px; padding: 0 .7rem; border-radius: 999px;
  background: var(--marino); color: var(--blanco); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.marca-cursos img { height: 38px; }
@media (min-width: 64rem) { .marca-cursos img { height: 44px; } }

/* ---------- portada alta ---------- */
.heroe-cursos { padding-bottom: calc(var(--e-9) + 2rem); }
.heroe-cursos-rejilla { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 64rem) { .heroe-cursos-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.heroe-cursos h1 { font-size: var(--t-6); max-width: 18ch; }
.heroe-cursos-visual { position: relative; display: grid; gap: var(--e-4); }
.foto-sesion { margin: 0; position: relative; border-radius: var(--radio); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 10, 40, .35); }
.foto-sesion img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.foto-sesion figcaption {
  position: absolute; left: var(--e-3); bottom: var(--e-3); padding: .25rem .7rem; border-radius: 999px;
  background: rgba(0, 23, 74, .82); color: var(--blanco); font-size: .8125rem; font-weight: 700;
}
@media (min-width: 64rem) {
  .heroe-cursos-visual { display: block; min-height: 26rem; }
  .foto-sesion-1 { width: 78%; transform: rotate(-2deg); }
  .foto-sesion-2 { width: 62%; position: absolute; right: 0; top: 46%; transform: rotate(2.5deg); border: 6px solid var(--blanco); }
}
.credencial {
  display: flex; gap: var(--e-4); align-items: center; padding: var(--e-4) var(--e-5); border-radius: var(--radio);
  background: rgba(255, 255, 255, .96); color: var(--tinta); box-shadow: 0 14px 30px rgba(0, 10, 40, .3); max-width: 24rem;
}
.credencial .icono-caja { margin: 0; flex: none; background: #E3F4EC; color: var(--exito); }
.credencial p { margin: 0; }
.credencial-titulo { font-weight: 800; color: var(--marino); line-height: 1.3; }
.credencial-dato { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9rem; color: var(--tinta); }
.credencial-nota { font-size: var(--t-0); color: var(--exito); font-weight: 700; }
@media (min-width: 64rem) { .credencial { position: absolute; left: 0; bottom: -1.5rem; } }

/* ---------- franja de cifras (se monta sobre la portada) ---------- */
.franja-cifras { margin-top: -3rem; position: relative; z-index: 2; }
.franja-cifras ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .franja-cifras ul { grid-template-columns: repeat(3, 1fr); } }
.franja-cifras li {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: var(--e-4) var(--e-5); color: var(--gris); line-height: 1.4;
}
.franja-cifras strong { display: block; font-size: var(--t-4); color: var(--marino); line-height: 1.1; margin-bottom: .2rem; }

/* ---------- portada corta y de curso ---------- */
.heroe-curso { background: radial-gradient(120% 160% at 90% 10%, color-mix(in srgb, var(--tono) 70%, #0A4FB0) 0%, var(--tono) 40%, var(--marino-hondo) 100%); }
.heroe .migas, .heroe .migas a { color: #CFE4FF; }
.heroe .migas { font-size: var(--t-0); margin-bottom: var(--e-4); }
.curso-hechos {
  list-style: none; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .curso-hechos { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 52rem; } }
.curso-hechos li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radio-chico); padding: var(--e-3) var(--e-4); }
.curso-hechos span { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #CFE4FF; font-weight: 700; }
.curso-hechos strong { color: var(--blanco); font-size: var(--t-1); line-height: 1.3; display: block; }

/* ---------- sello DC-3 ---------- */
.sello-dc3 {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px;
  background: #E3F4EC; color: var(--exito); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.sello-dc3::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--exito); }
.sello-chico { font-size: .72rem; padding: .1rem .5rem; vertical-align: middle; }

/* ---------- tarjeta de curso ---------- */
.cursos-rejilla { align-items: stretch; }
.curso-tarjeta {
  position: relative; display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--linea);
  border-top: 5px solid var(--tono); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.curso-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(1, 39, 107, .08), 0 16px 32px rgba(1, 39, 107, .14); }
.curso-tarjeta h3 { font-size: var(--t-2); margin-bottom: var(--e-2); }
.curso-tarjeta .tarjeta-enlace::after { content: ''; position: absolute; inset: 0; border-radius: var(--radio); }
.curso-tarjeta .tarjeta-enlace:focus-visible { box-shadow: none; }
.curso-tarjeta .tarjeta-enlace:focus-visible::after { box-shadow: var(--foco); }
.curso-tarjeta p { margin-bottom: var(--e-3); }
.curso-area { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 var(--e-2); font-size: .8125rem; font-weight: 700; color: var(--tono); text-transform: uppercase; letter-spacing: .06em; }
.curso-area svg { width: 18px; height: 18px; }
.curso-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; padding-top: var(--e-3); border-top: 1px solid var(--linea); }
.curso-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-0); color: var(--gris); font-weight: 600; }
.curso-tarjeta[hidden] { display: none; }

/* ---------- encuentra tu curso ---------- */
.buscador-opciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-bottom: var(--e-5); }
.buscador-pregunta { text-align: center; font-weight: 700; color: var(--marino); margin: 0 auto var(--e-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: .55rem var(--e-4);
  border: 2px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--marino);
  font: 600 var(--t-0)/1.3 'Montserrat', sans-serif; cursor: pointer; text-align: left; transition: border-color .15s, background .15s, color .15s;
}
.chip svg { width: 20px; height: 20px; flex: none; color: var(--corporativo); }
.chip:hover { border-color: var(--corporativo); }
.chip[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.chip[aria-pressed="true"] svg { color: var(--blanco); }
.chip-todos { color: var(--gris); }
.buscador-estado { text-align: center; color: var(--gris); font-weight: 600; min-height: 1.6em; margin: 0 auto var(--e-4); }
.buscador.sin-eleccion [data-buscador-resultados] { display: none; }
.grupo-area + .grupo-area { margin-top: var(--e-8); }
.grupo-area[hidden] { display: none; }
.grupo-area-titulo { margin-bottom: var(--e-5); max-width: 46rem; }
.grupo-area-titulo h2 { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-4); margin-bottom: var(--e-2); }
.grupo-area-titulo h2 svg { width: 28px; height: 28px; color: var(--corporativo); flex: none; }
.grupo-area-titulo h2 a { color: inherit; text-decoration: none; }
.grupo-area-titulo h2 a:hover { text-decoration: underline; }
.grupo-area-titulo p { color: var(--gris); margin: 0; }
.nota-catalogo { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-7); font-weight: 600; }
.nota-catalogo svg { width: 22px; height: 22px; color: var(--corporativo); }

/* ---------- carpetas (areas) ---------- */
.carpetas { margin-top: var(--e-6); row-gap: var(--e-7); }
.carpeta {
  position: relative; display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 0 var(--radio) var(--radio) var(--radio); padding: var(--e-6) var(--e-5) var(--e-5); box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.carpeta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(1, 39, 107, .08), 0 16px 32px rgba(1, 39, 107, .14); }
.carpeta-pestana {
  position: absolute; left: -1px; top: -2.1rem; height: 2.1rem; display: inline-flex; align-items: center; gap: .45rem;
  margin: 0; padding: 0 var(--e-4) 0 var(--e-3); border-radius: var(--radio-chico) var(--radio-chico) 0 0;
  background: var(--tono); color: var(--blanco); font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
}
.carpeta-pestana::after {
  content: ''; position: absolute; right: -1.1rem; bottom: 0; width: 1.2rem; height: 100%;
  background: var(--tono); clip-path: polygon(0 0, 35% 0, 100% 100%, 0 100%);
}
.carpeta-pestana svg { width: 18px; height: 18px; }
/* `.carpeta p` (gris) le ganaba a `.carpeta-pestana` y el texto de la pestaña no se leia sobre su color
   (vista previa del 2026-11-11). */
.carpeta .carpeta-pestana { color: var(--blanco); }
.carpeta h3 { font-size: var(--t-3); margin-bottom: var(--e-2); }
.carpeta .tarjeta-enlace::after { content: ''; position: absolute; inset: -2.1rem 0 0 0; }
.carpeta .tarjeta-enlace:focus-visible { box-shadow: none; }
.carpeta .tarjeta-enlace:focus-visible::after { box-shadow: var(--foco); border-radius: var(--radio); }
.carpeta p { color: var(--gris); }
.carpeta-cursos { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-2); }
.carpeta-cursos li { padding: var(--e-2) var(--e-3); background: var(--suave); border-radius: var(--radio-chico); font-weight: 600; color: var(--marino); font-size: var(--t-0); }
.carpeta .mas { margin-top: auto; font-weight: 700; color: var(--corporativo); display: inline-flex; gap: .35rem; }
.carpeta .mas::after { content: '→'; transition: transform .15s; }
.carpeta:hover .mas::after { transform: translateX(3px); }

/* ---------- casos ---------- */
.casos { align-items: stretch; }
.caso { margin: 0; display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.caso-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.caso-cuerpo { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); flex: 1; }
.caso-cuerpo h3, .caso-cuerpo strong { font-size: var(--t-2); color: var(--marino); margin: 0; }
.caso-cuerpo p { margin: 0; }
.caso-cliente { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--corporativo); margin: 0; }
.caso-donde { color: var(--gris); font-size: var(--t-0); }
.caso-resultado { display: grid; gap: .15rem; padding: var(--e-3); background: var(--suave-azul); border-radius: var(--radio-chico); }
.caso-resultado span { font-size: var(--t-0); color: var(--gris); }
.caso .mas { margin-top: auto; padding-top: var(--e-2); font-weight: 700; text-decoration: none; }
.casos-curso { display: grid; gap: var(--e-4); }
@media (min-width: 48rem) { .casos-curso { grid-template-columns: repeat(2, 1fr); } }
.casos-curso .caso-cuerpo strong { font-size: var(--t-1); }

/* ---------- quien imparte ---------- */
.agente { display: grid; gap: var(--e-5); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); }
@media (min-width: 64rem) { .agente { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: var(--e-6); gap: var(--e-7); } }
.agente-persona { display: flex; gap: var(--e-5); align-items: flex-start; }
.monograma {
  flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #0A4FB0, var(--marino)); color: var(--blanco); font-size: 1.6rem; font-weight: 800;
}
.agente-persona h3 { margin-bottom: .2rem; }
.agente-cargo { color: var(--exito); font-weight: 700; margin-bottom: var(--e-3); }
.agente-registro { background: var(--suave); border-radius: var(--radio-chico); padding: var(--e-5); }
.agente-etiqueta { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--e-2); }
.agente-numero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--t-2); font-weight: 700; color: var(--marino); margin-bottom: var(--e-5); word-break: break-all; }
.agente-numero .boton-texto { font-family: 'Montserrat', sans-serif; font-size: var(--t-0); }
.agente-cursos { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: var(--e-3); }
.agente-cursos li { display: grid; gap: .1rem; }
.agente-cursos a { font-weight: 700; }
.agente-cursos span { font-size: var(--t-0); color: var(--gris); }
.nota-agente { color: var(--gris); font-size: var(--t-0); margin: 0; }
.boton-texto { background: none; border: 0; padding: 0; color: var(--corporativo); font: 700 var(--t-0) 'Montserrat', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ficha de curso ---------- */
.detalle-curso .curso-contenido > h2 { margin-top: var(--e-7); }
.detalle-curso .curso-contenido > h2:first-child { margin-top: 0; }
.temario { counter-reset: tema; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.temario li { counter-increment: tema; position: relative; padding: var(--e-3) var(--e-4) var(--e-3) 3.4rem; background: var(--suave); border-radius: var(--radio-chico); }
.temario li::before {
  content: counter(tema); position: absolute; left: var(--e-3); top: var(--e-3); width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--marino); color: var(--blanco); font-weight: 800; font-size: var(--t-0);
}
.nota-curso { padding: var(--e-4); background: var(--suave); border-radius: var(--radio-chico); color: var(--gris); }
.aviso-dc3, .aviso-sin-dc3 { display: flex; gap: var(--e-4); align-items: flex-start; margin-top: var(--e-7); padding: var(--e-5); border-radius: var(--radio); }
.aviso-dc3 { background: #EEF8F3; border: 1px solid #BFE3D0; }
.aviso-dc3 p, .aviso-sin-dc3 p { margin: 0 0 var(--e-2); }
.aviso-dc3 a { font-weight: 700; }
.aviso-sin-dc3 { background: var(--suave); border: 1px solid var(--linea); color: var(--gris); }
.aviso-sin-dc3 p { margin: 0; }
.tarjeta-cotiza { background: var(--blanco) !important; border-top: 5px solid var(--corporativo); box-shadow: var(--sombra) !important; }
.nota-fechas { font-size: var(--t-0); color: var(--gris); margin: var(--e-3) 0 0; }
.otros-cursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.otros-cursos a { font-weight: 600; }
.imagen-lateral { border-radius: var(--radio); }
.area-intro { max-width: 46rem; margin-bottom: var(--e-6); font-size: var(--t-2); color: var(--tinta); }

/* ---------- barra de accion en celular ---------- */
.barra-accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: var(--e-2);
  padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--linea); box-shadow: 0 -6px 18px rgba(1, 39, 107, .08);
}
.barra-accion .boton { flex: 1; }
.barra-accion .boton-whatsapp { flex: 0 0 56px; padding: 0; }
.micrositio { padding-bottom: 72px; }
/* El boton del asistente y su ventana suben por encima de la barra: si no, se enciman con «Cotiza un curso». */
.micrositio .flotante { bottom: calc(72px + var(--e-3)); }
.micrositio .asistente { bottom: calc(72px + var(--e-3) + 64px); height: min(38rem, calc(100vh - 7rem - 72px)); }
@media (max-width: 47.99rem) { .micrositio .asistente { bottom: 0; height: 100dvh; } }
@media (min-width: 64rem) {
  .barra-accion { display: none; }
  .micrositio { padding-bottom: 0; }
  .micrositio .flotante { bottom: var(--e-4); }
  .micrositio .asistente { bottom: calc(var(--e-4) + 64px); height: min(38rem, calc(100vh - 7rem)); }
}

/* ---------- catalogo para imprimir ---------- */
.catalogo-portada { border-bottom: 3px solid var(--marino); padding-bottom: var(--e-5); margin-bottom: var(--e-6); }
.catalogo-portada h1 { font-size: var(--t-5); }
.catalogo-liga { color: var(--gris); }
.catalogo-area { margin-bottom: var(--e-7); }
.catalogo-area h2 { font-size: var(--t-4); border-left: 6px solid var(--corporativo); padding-left: var(--e-3); }
.catalogo-area-titular { color: var(--gris); }
.catalogo-curso { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); break-inside: avoid; }
.catalogo-curso h3 { font-size: var(--t-2); margin-bottom: var(--e-1); }
.catalogo-curso p { margin-bottom: var(--e-2); max-width: none; }
.catalogo-datos { color: var(--corporativo); font-weight: 700; font-size: var(--t-0); }
.catalogo-cierre { padding: var(--e-5); background: var(--suave); border-radius: var(--radio); }
@media print {
  .barra-accion, .asistente, .flotante { display: none !important; }
  .micrositio { padding-bottom: 0; }
  .catalogo { padding: 0; }
  .catalogo-area h2 { break-after: avoid; }
  .sello-dc3 { border: 1px solid var(--exito); }
}