/*
  Respiración y jerarquía.

  Dos ajustes, ninguno de identidad:

  1. ESPACIO. Las secciones respiraban poco en pantallas grandes. El lujo
     visual de una firma viene del aire, no del tamaño: se amplía el espacio
     entre secciones y entre el encabezado de cada una y su contenido.

  2. JERARQUÍA. El salto de H2 a H3 era de solo 1.28x, así que los títulos de
     tarjeta competían con los de sección y luego había un vacío enorme hasta
     el texto. Se baja el H3 para que la escala se lea de un vistazo.
*/

/* ---------- Espacio entre secciones ---------- */
.section {
  padding-block: clamp(4.5rem, 11vw, 10rem);
}

.manifesto {
  padding-block: clamp(5rem, 11vw, 10rem);
}

/* Entre el encabezado de sección y su contenido. */
.section-head {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head-left {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* La banda de cifras es un respiro en sí misma: no necesita crecer tanto. */
.stats-band {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* ---------- Jerarquía ---------- */
/*
  H1 ~73px · H2 48px · H3 30px · cuerpo 16px.
  Ahora cada peldaño se distingue solo, sin necesidad de leer.
*/
.card-title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.card-title-sm {
  font-size: 1.2rem;
}

/* El texto de las tarjetas gana un poco de aire al tener menos título encima. */
.card-desc {
  margin-top: .75rem;
  line-height: 1.6;
}

@media (max-width: 719px) {
  /* En el teléfono el aire se nota antes: se amplía menos para no obligar
     a desplazarse de más. */
  .section,
  .manifesto {
    padding-block: 4rem;
  }
  .section-head {
    margin-bottom: 2.25rem;
  }
}

/* ---------- Jerarquía: corrección de especificidad ---------- */
/*
  El tamaño del H3 lo fija `.card-flagship .card-title`, con dos clases, así
  que una regla de una sola clase no podía ganarle. Se iguala la especificidad.
  Objetivo: H1 73px · H2 48px · H3 30px · cuerpo 16px, con peldaños visibles.
*/
.card-flagship .card-title {
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
}
.case-card .card-title {
  font-size: 1.25rem;
}

/* ---------- Menos "carditis" ---------- */
/*
  El sitio convierte casi todo en tarjeta, y cuando todo destaca, nada
  destaca. Las tres tarjetas de servicio insignia se mantienen: ahí la
  tarjeta sí aporta, porque son lo que se vende.

  Las secundarias pasan a bloques abiertos: sin fondo, sin sombra y
  separadas por una línea. Se lee como una publicación, no como un panel de
  control, y las insignia recuperan el protagonismo.
*/
.otros-grid .card-mini {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 1.6rem 0 0;
}
.otros-grid .card-mini:hover {
  box-shadow: none;
  transform: none;
}

/* Las tarjetas de caso también respiran mejor abiertas. */
.case-card {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--oro-deep);
  border-radius: 0;
  box-shadow: none;
  padding: .2rem 0 .2rem 1.6rem;
}
.case-card:hover {
  box-shadow: none;
  transform: none;
}

/* Las insignia se quedan como tarjeta, pero con la sombra más contenida. */
.card-flagship {
  box-shadow: 0 1px 2px rgba(12, 51, 98, .04), 0 18px 40px -26px rgba(12, 51, 98, .22);
}

/* ---------- Metodología con más rigor ---------- */
/*
  Las etapas deben leerse como un método medible, no como una lista bonita.
  El número toma protagonismo, la línea superior se vuelve el eje visual y
  el texto se separa para que cada etapa se lea como una unidad.
*/
.step {
  border-top-width: 3px;
  padding-top: 1.4rem;
}
.step-n {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: .75rem;
  font-style: normal;
  letter-spacing: -0.02em;
}
.step h3 {
  font-size: 1.2rem;
  margin-bottom: .55rem;
}
.step p {
  line-height: 1.6;
}

/* ---------- Cabeceras de las páginas de servicio ---------- */
/*
  Cada método propio tiene su imagen. Van como fondo, con un velo verde
  encima: sin él, el texto claro se pierde sobre las zonas iluminadas de la
  foto y deja de leerse.

  Las imágenes están recortadas a 16:7 y convertidas a WebP (65 y 77 KB,
  desde originales de 16 y 18 MB).
*/
.svc-hero {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* El velo: mantiene legible el texto encima de cualquier zona de la foto. */
/* El velo, igual para las seis páginas de servicio. */
.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(12, 51, 98, .94) 0%,
    rgba(12, 51, 98, .86) 45%,
    rgba(12, 51, 98, .62) 100%);
}

/* Cada servicio, su imagen. */
.pagina-seleccion-de-personal-medellin .svc-hero    { background-image: url("img/svc-seleccion.webp"); }
.pagina-capacitacion-empresarial-medellin .svc-hero { background-image: url("img/svc-capacitacion.webp"); }
.pagina-headhunting-medellin .svc-hero              { background-image: url("img/svc-headhunting.webp"); }
.pagina-banco-de-hojas-de-vida-medellin .svc-hero   { background-image: url("img/svc-banco.webp"); }
.pagina-desarrollo-de-liderazgo-medellin .svc-hero  { background-image: url("img/svc-liderazgo.webp"); }
.pagina-retencion-de-talento-medellin .svc-hero     { background-image: url("img/svc-retencion.webp"); }

@media (max-width: 719px) {
  /* En el teléfono la foto se ve muy recortada y compite con el texto:
     se oscurece más para que mande el mensaje. */
  .svc-hero::before {
    background: linear-gradient(180deg, rgba(12, 51, 98, .93), rgba(12, 51, 98, .97));
  }
}

/* ---------- Menú con desplegables ---------- */
/*
  "Servicios" era un cajón que no decía nada. Ahora el menú enseña las tres
  familias, y al pasar por encima se abren los servicios de cada una.
  Pulsar la familia lleva a su servicio principal.
*/
/* El original oculta este menú por defecto y lo muestra desde 960px, donde
   entra el de hamburguesa. Hay que respetar ese corte: sin la media query,
   el menú de escritorio aparecía también en el teléfono. */
@media (min-width: 960px) {
  .nav-links { display: flex; align-items: center; gap: 1.6rem; }
}

.nav-item { position: relative; }

.nav-item-drop > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.nav-caret {
  width: 9px;
  height: 6px;
  transition: transform .2s ease;
}
.nav-item-drop:hover .nav-caret,
.nav-item-drop:focus-within .nav-caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: calc(100% + 12px);
  left: -1.1rem;
  min-width: 320px;
  padding: .55rem;
  /* Verde profundo: el desplegable se lee como una extensión de la marca,
     no como una ventana del sistema. */
  /* Translúcido y desenfocado, igual que la barra superior sobre el hero:
     el desplegable se funde con la página en vez de aparecer como un panel
     pegado encima. */
  /* Al 65%: lo más ligero que mantiene el texto legible sobre el fondo más
     claro de la página. Por debajo de ahí el título baja de 4.5 de contraste
     y deja de cumplir. El desenfoque sube para compensar la transparencia. */
  background: rgba(12, 51, 98, .82);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(12, 51, 98, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 120;
}

/* Puente invisible para que no se cierre al bajar el ratón. */
.nav-item-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-item-drop:hover .nav-drop,
.nav-item-drop:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-drop-item {
  position: relative;
  display: block;
  padding: .7rem .9rem .7rem 1.05rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .18s ease;
}

/* Marca dorada a la izquierda, que crece al pasar por encima. */
.nav-drop-item::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--oro);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height .22s var(--ease-out, ease);
}
.nav-drop-item:hover::before { height: 62%; }
.nav-drop-item:hover { background: rgba(211, 174, 55, .1); }

.nav-drop-item strong {
  display: block;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cream);
}
.nav-drop-item small {
  display: block;
  font-size: .75rem;
  line-height: 1.4;
  /* Estaba al 62% y daba 3.08 de contraste, por debajo del mínimo de 4.5.
     Al 90% se lee y sigue quedando claramente por debajo del título. */
  color: rgba(247, 245, 241, .78);
  margin-top: .12rem;
}


/* La flecha del menú también en dorado cuando está abierto. */
.nav-item-drop:hover > .nav-link,
.nav-item-drop:focus-within > .nav-link { color: var(--oro-deep); }

.nav-mobile-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .9rem;
  color: rgba(247, 245, 241, .72);
  padding-left: 1.1rem;
  margin: .15rem 0;
  border-left: 1px solid rgba(211, 174, 55, .4);
}

@media (max-width: 1100px) {
  .nav-links { gap: 1.1rem; }
  .nav-drop { min-width: 250px; }
}

/*
  La línea de apoyo solo donde el nombre no se explica solo.

  "Método Origen", "Programa Huella" y "Caza de Talentos" son nombres propios:
  sin una línea que los traduzca, nadie sabe qué está mirando. "Banco de Hojas
  de Vida" y "Desarrollo de Liderazgo" se entienden con leerlos, y ahí la
  descripción solo añade ruido.
*/
.nav-drop-item[href*="banco-de-hojas-de-vida"] small,
.nav-drop-item[href*="desarrollo-de-liderazgo"] small {
  display: none;
}

/* Sin descripción, el bloque necesita el mismo alto para no verse irregular. */
.nav-drop-item[href*="banco-de-hojas-de-vida"],
.nav-drop-item[href*="desarrollo-de-liderazgo"] {
  padding-top: .95rem;
  padding-bottom: .95rem;
}

/* ---------- Enlace de los casos ----------
   .card-link nacio para las tarjetas navy de servicios, donde el dorado
   claro contrasta de sobra. Las tarjetas de casos van sobre fondo claro:
   ahi el mismo dorado se queda en 2.63 de contraste, por debajo del 4.5
   exigido. Sobre claro manda el dorado oscuro, que da 4.55. */
.case-card .card-link {
  color: var(--oro-deep);
  border-bottom-color: rgba(12, 51, 98, .4);
}
.case-card .card-link:hover {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

/* ---------- Legibilidad del menú ----------

   Los enlaces eran #0C3362 en los dos estados. Sobre la foto del hero eso da
   1.84 de contraste: por eso "no se ven al abrir la pagina". Medido sobre el
   fondo real de la cabecera.

   El dorado tampoco servia como color fijo: 3.34 de media y 1.71 en las
   zonas claras de la foto. Asi que mandan los claros, y el dorado se reserva
   para el hover, que es lo que se pidio.

   Para que esos numeros no dependan de que la foto cambie, la cabecera lleva
   un velo propio mientras esta arriba. Con el, el blanco queda en 15.3 y el
   dorado en 5.5 incluso en la parte mas clara de la imagen. */

.nav::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 170px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(12, 51, 98, .82) 0%,
    rgba(12, 51, 98, .72) 55%,
    rgba(12, 51, 98, 0) 100%);
  transition: opacity .4s var(--ease-out);
}

.nav-link { color: #FFFFFF; }
.nav-link:hover,
.nav-item-drop:hover > .nav-link,
.nav-item-drop:focus-within > .nav-link { color: var(--oro); }

/* El subrayado seguia el verde del sitio y sobre oscuro no se veia. */
.nav-link::after { background: currentColor; }

/*
  Cuando hay claro detras —al bajar, o en el blog y la pagina de hojas de
  vida, que abren en crema— mandan los oscuros y el velo sobra.
*/
.nav.is-scrolled::before,
.nav-sobre-claro .nav::before { opacity: 0; }

.nav.is-scrolled .nav-link,
.nav-sobre-claro .nav-link { color: var(--verde); }

.nav.is-scrolled .nav-link:hover,
.nav.is-scrolled .nav-item-drop:hover > .nav-link,
.nav.is-scrolled .nav-item-drop:focus-within > .nav-link,
.nav-sobre-claro .nav-link:hover,
.nav-sobre-claro .nav-item-drop:hover > .nav-link,
.nav-sobre-claro .nav-item-drop:focus-within > .nav-link { color: var(--oro-deep); }

/* ---------- Enlace para candidatos ----------
   El menu habla con empresas; esto habla con personas que buscan empleo. No
   compite con los servicios: va al lado del boton y con menos peso.

   En escritorio dice "Suba su HV": con seis entradas de menu delante, la
   frase completa no cabia sin apretarlo todo. En el movil, que es una lista
   vertical, se lee entera. */
.nav-hv {
  display: none;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: #FFFFFF;
  opacity: .82;
  margin-right: .3rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-out), opacity .25s, border-color .25s;
}
@media (min-width: 1250px) { .nav-hv { display: inline-block; } }

.nav-hv:hover {
  opacity: 1;
  color: var(--oro);
  border-bottom-color: var(--oro);
}

.nav.is-scrolled .nav-hv,
.nav-sobre-claro .nav-hv { color: var(--verde); }

.nav.is-scrolled .nav-hv:hover,
.nav-sobre-claro .nav-hv:hover { color: var(--oro-deep); border-bottom-color: var(--oro-deep); }

/* ---------- La cabecera no se parte ----------

   Al entrar "Suba su HV" la barra pasó a tener tres bloques flexibles: los
   enlaces, ese enlace y el botón. Flexbox repartió el ancho encogiendo los
   enlaces, y cada uno se partió en dos líneas —"Selección de / personal"—
   en todos los anchos, incluso a 1600px. La cabecera pasó de 78 a 92px.

   El arreglo son dos reglas: que ningún enlace pueda romperse por dentro, y
   que el bloque de enlaces no sea el que ceda cuando falte sitio. Cuando ya
   no quepan, lo correcto es pasar al menú de hamburguesa, no apretarlos. */

.nav-link,
.nav-hv { white-space: nowrap; }

.nav-links {
  flex: 0 1 auto;
  flex-wrap: nowrap;
}

.nav-inner > .btn { flex-shrink: 0; }
.nav-brand { flex-shrink: 0; }

/* La barra pedía 1366px de ancho y el contenedor da 1280: no cabía ni en una
   pantalla grande. Con los espaciados apretados baja a unos 1263px y entra
   con holgura.

   El corte está medido, no elegido a ojo: con el texto corto la barra pide
   1225px, así que por debajo de 1250 manda la hamburguesa. Antes el corte
   estaba en 960 y, al subir el del menú horizontal sin tocar el de la
   hamburguesa, entre 960 y 1150 no quedaba ninguna forma de navegar. */
@media (max-width: 1249px) {
  .nav-links { display: none; }
  .nav-inner > .btn { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 1250px) {
  .nav-links { display: flex; gap: 1.1rem; }
  .nav-inner { gap: 1.1rem; }
  .nav-inner > .btn { display: inline-flex; }
  .nav-burger { display: none; }
}

@media (min-width: 1250px) and (max-width: 1399px) {
  .nav-links { gap: .95rem; }
  .nav-hv { font-size: .8rem; }
}

/* ---------- "Cómo trabajamos" dentro de "Por qué Magnata" ----------
   Eran dos secciones seguidas que decian lo mismo en dos pasos: por que
   Magnata, y por que ese "por que" se sostiene. Unidas se leen como un solo
   argumento y el menu pierde un boton.

   Al juntarlas, el aire que antes ponia la separacion entre secciones hay
   que reponerlo aqui dentro, o los pasos se pegan a los diferenciadores. */
.por-que-proceso {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}