/* pages.css — añadidos para la separación index (servicios) /
   postulaciones (reclutamiento). Todo lo de arriba es el CSS original. */

/* Varios de los SVG decorativos de Circuits se posicionan a propósito con
   un borde "sangrado" fuera de su sección (ej. .about__circ con
   right:-30px, .serv__circ con left:-50px) — así se ven en el diseño
   original. La sección que los contiene no siempre tiene overflow:hidden
   (algunas sí, como .hero y .careers-top; "Quiénes Somos" no), así que ese
   sangrado puede empujar el ancho de toda la página y aparece una barra de
   desplazamiento horizontal. Este es el seguro general: no cambia nada del
   layout vertical, solo evita que cualquier elemento (presente o futuro)
   se salga por los costados. */
html, body { overflow-x: hidden; }

/* "Aguascalientes · Jalisco" (Expansión y refuerzo) en rojo, a diferencia
   del navy por defecto de .map__detail-meta strong. El selector necesita
   igual o mayor especificidad que ".map__detail-meta strong" (1 clase +
   1 elemento) o pierde contra esa regla de sections.css aunque cargue
   después — por eso no basta con la sola clase. */
.map__detail-meta strong.map__detail-meta--red { color: var(--red); }

/* ── "Quiénes Somos" en navy ──────────────────────────────────────────────
   Mismo azul marino que el banner "Construyamos la red...". La sección usa
   section--navy (igual que el banner), que ya recolorea automáticamente
   h1-h4 a blanco y .lead a gris azulado claro. Lo único que ese mecanismo
   no cubre son los dos párrafos sueltos de about__text (no llevan className
   "lead"): sin esto se verían en su color oscuro de siempre, casi invisibles
   sobre navy. Las tarjetas Misión/Visión, la lista de datos y la foto no
   necesitan ajuste — son piezas claras autocontenidas (fondo propio blanco/
   panel) que ya se usaban dentro de secciones navy en el diseño original
   (el panel del mapa, por ejemplo), así que ya sabían verse bien ahí. */
.section--navy .about__text > p { color: #b9c8e4; }

/* Los <strong> del texto ("20 años", "Morelia, Michoacán", "talento local")
   usan var(--navy) por diseño original — un azul oscuro pensado para fondo
   claro. Sobre el navy de la sección queda casi del mismo tono que el
   fondo, invisible. --red-bright ("rojo logo", el mismo que el punto del
   pin de la marca) da mejor contraste contra navy que el --red normal
   ("rojo ladrillo", ratio ~2.2:1) — aquí calculado ~3:1. */
.section--navy .about__text strong { color: var(--red-bright); }

/* ── Logo ──────────────────────────────────────────────────────────────────
   El archivo original traía ~110px de relleno transparente arriba y abajo
   de la marca (ver scripts/recortar-logo.js), lo que obligaba a un header
   enorme para no recortarla. Ya recortado al contenido real, el mismo
   tamaño visual de marca cabe en un header normal. */
.hdr__inner { height: 80px; }
.hdr__brand img { height: 52px; }
@media (max-width: 640px) {
  .hdr__inner { height: 64px; }
  .hdr__brand img { height: 40px; }
}

/* El hero (y la portada de postulaciones) empiezan justo debajo del header
   fijo; su padding-top tiene que cubrir el alto del header o el título
   queda tapado. El offset de scroll al saltar por ancla se calcula en JS a
   partir del alto real del header (ver common.jsx), así que no hay que
   sincronizar un número aquí también. */
.hero { padding-top: 128px; }
@media (max-width: 640px) { .hero { padding-top: 112px; } }

/* scroll-padding-top cubre el caso que el JS de common.jsx no alcanza: un
   salto por ancla al cargar la página desde cero (ej. entrar a
   index.html#nosotros desde postulaciones.html). */
html { scroll-padding-top: 96px; }
@media (max-width: 640px) { html { scroll-padding-top: 80px; } }

/* El panel de detalle del mapa se diseñó para estirarse hasta igualar el
   alto del mapa porque terminaba en un botón que llenaba ese espacio. Sin
   botón (ver careers.jsx) queda una franja vacía enorme al fondo; que el
   panel solo mida lo que su contenido necesita. */
#cobertura .map { align-items: start; }
#cobertura .map__detail .tpanel__in { height: auto; }

/* ── Mapa vectorial ───────────────────────────────────────────────────────
   Reemplaza la imagen PNG del mapa. Antes los puntos y las trazas venían
   dibujados dentro del pixel art, así que cambiar el color o la posición de
   un nodo obligaba a editar la imagen. Ahora todo se dibuja en SVG desde los
   datos de careers.jsx (ver NODES / LINKS) y los contornos reales de los
   estados (src/mapdata.jsx, generado por scripts/generar-mapa.js). */
.mapv { width: 100%; height: auto; display: block; }

/* Tonos tomados con cuentagotas del diseño original: el contraste entre el
   relleno del estado y el fondo es MUY sutil (apenas ~12 niveles), y lo que
   define el mapa son las fronteras finas y oscuras, no bloques de color. */
.mapv__state { fill: #e6eaeb; stroke: #6d777e; stroke-width: 1.2; stroke-linejoin: round; }
.mapv__state.is-on { fill: #dfe3e4; stroke: #5d666e; }

/* Ramales decorativos (textura de circuito impreso) */
.mapv__stub { fill: none; stroke-width: 1.6; opacity: .55; }
.mapv__via  { fill: #eef1f3; stroke-width: 1.6; opacity: .55; }
.mapv__stubs .is-blue .mapv__stub, .mapv__stubs .is-blue .mapv__via { stroke: var(--blue); }
.mapv__stubs .is-red  .mapv__stub, .mapv__stubs .is-red  .mapv__via { stroke: var(--red); }

/* Enlaces: una sola línea principal une los nodos; junto a ella corren dos
   líneas acompañantes que llegan a media ruta y rematan en una bolita
   (el detalle de circuito impreso del diseño). */
.mapv__trace, .mapv__lead {
  fill: none; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mapv__lead { stroke-width: 2.6; }
.mapv__lead-dot { fill: #fff; stroke-width: 2.6; }
.mapv__links .is-blue .mapv__trace,
.mapv__links .is-blue .mapv__lead,
.mapv__links .is-blue .mapv__lead-dot { stroke: var(--blue); }
.mapv__links .is-red .mapv__trace,
.mapv__links .is-red .mapv__lead,
.mapv__links .is-red .mapv__lead-dot { stroke: var(--red); }

/* Nodos */
.mapv__node { cursor: pointer; }
.mapv__node-halo { fill: none; stroke-width: 1.4; opacity: .4; }
.mapv__node-ring { fill: none; stroke-width: 5; }
.mapv__node-gap  { fill: none; stroke: #fff; stroke-width: 3.6; }
.mapv__node-hit  { fill: transparent; }        /* área de clic más generosa */
.mapv__node.is-blue .mapv__node-halo,
.mapv__node.is-blue .mapv__node-ring { stroke: var(--blue); }
.mapv__node.is-blue .mapv__node-core { fill: var(--blue); }
.mapv__node.is-red  .mapv__node-halo,
.mapv__node.is-red  .mapv__node-ring { stroke: var(--red); }
.mapv__node.is-red  .mapv__node-core { fill: var(--red); }

.mapv__node-halo { transition: opacity .2s var(--ease); }
.mapv__node:hover .mapv__node-halo { opacity: .85; }

/* Adorno técnico alrededor del nodo: una escala graduada (rayitas finas)
   entre dos aros delgados, y el aro exterior partido en arcos. Es lo que le
   da el aire de instrumento del diseño original. Va tenue a propósito: es
   textura, no información. */
.mapv__node-orn path, .mapv__node-orn circle { fill: none; }
/* Cuatro tramos en las diagonales (forma de X): un arco por fuera y una
   hilera de rayitas por dentro. Las rayitas son guiones cortos con punta
   recta; el grosor del trazo define su LARGO (van en radial), y el hueco
   del guión define su separación. El aro exterior sí va completo. */
.mapv__node-orn-ring { stroke-width: 1.6; opacity: .55; }
/* dos mitades más gruesas sobre el mismo aro, con hueco donde cambian */
.mapv__node-orn-thick { stroke-width: 3.4; opacity: .6; stroke-linecap: butt; }
.mapv__node-orn-dots { stroke-width: 4;   opacity: .55; stroke-linecap: butt;
                       stroke-dasharray: 1.3 4.2; }
.mapv__node.is-blue .mapv__node-orn path,
.mapv__node.is-blue .mapv__node-orn circle { stroke: var(--blue); }
.mapv__node.is-red  .mapv__node-orn path,
.mapv__node.is-red  .mapv__node-orn circle { stroke: var(--red); }
.mapv__node-orn { transition: opacity .2s var(--ease); }
.mapv__node:hover .mapv__node-orn { opacity: 1.35; }

/* Anillo fijo del nodo seleccionado. En el diseño original eran dos aros
   pegados al nodo: uno blanco de separación y encima uno del color de marca
   (box-shadow "0 0 0 3px #fff, 0 0 0 5px"). Se quedan puestos; la onda que
   late es aparte. Los radios están calculados para que no se encimen con el
   aro propio del nodo, que termina en r=27. */
.mapv__node-sep,
.mapv__node-anillo { fill: none; opacity: 0; transition: opacity .2s var(--ease); }
.mapv__node-sep    { stroke: #fff; stroke-width: 3.5; }
.mapv__node-anillo { stroke-width: 3.6; }
.mapv__node.is-blue .mapv__node-anillo { stroke: var(--blue-bright); }
.mapv__node.is-red  .mapv__node-anillo { stroke: var(--red); }
.mapv__node.is-sel .mapv__node-sep,
.mapv__node.is-sel .mapv__node-anillo,
.mapv__node:focus-visible .mapv__node-sep,
.mapv__node:focus-visible .mapv__node-anillo { opacity: 1; }
/* el halo tenue estorba debajo del anillo fijo */
.mapv__node.is-sel .mapv__node-halo { opacity: 0; }

/* El navegador dibuja un recuadro de foco alrededor de todo el grupo (que
   incluye la etiqueta), y se ve feo. Se quita, pero el nodo enfocado con
   teclado sigue siendo visible: se le marca el anillo y late igual que el
   seleccionado, así que no se pierde accesibilidad. */
.mapv__node:focus { outline: none; }
/* el indicador de foco es el anillo (más abajo), igual que el seleccionado */

/* Onda: un anillo del color del nodo que se expande y se desvanece en bucle,
   como "respirando". Solo se ve en el nodo seleccionado (o enfocado con
   teclado).

   `transform-box: fill-box` + `transform-origin: center` no son opcionales:
   en SVG el valor por defecto es `view-box` con origen en (0,0), o sea la
   esquina del mapa. Sin esto la onda no se expandiría en su sitio, saldría
   disparada en diagonal hacia abajo a la derecha. */
.mapv__node-onda {
  fill: none; stroke-width: 3; opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.mapv__node.is-blue .mapv__node-onda { stroke: var(--blue-bright); }
.mapv__node.is-red  .mapv__node-onda { stroke: var(--red); }
.mapv__node.is-sel .mapv__node-onda,
.mapv__node:focus-visible .mapv__node-onda {
  animation: mapvOnda 1.8s ease-out infinite;
}
@keyframes mapvOnda {
  0%        { transform: scale(1);   opacity: .55; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mapv__node.is-sel .mapv__node-onda,
  .mapv__node:focus-visible .mapv__node-onda { animation: none; opacity: .4; }
}

/* Etiqueta con el nombre del estado: visible al pasar el mouse o al elegirlo */
.mapv__label { opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.mapv__node:hover .mapv__label,
.mapv__node.is-sel .mapv__label,
.mapv__node:focus-visible .mapv__label { opacity: 1; }
.mapv__label rect { fill: rgba(255,255,255,.96); stroke: var(--panel-line); stroke-width: 1; }
.mapv__label text {
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  fill: var(--navy);
}
.mapv__node.is-red .mapv__label text { fill: var(--red-deep); }

/* ── Banner de reclutamiento (index) ─────────────────────────────────────── */
/* Franja angosta, no una sección completa: título + botón en una sola fila
   en escritorio, apilados en móvil. Es la única puerta a reclutamiento
   visible en index, deliberadamente discreta. */
.join-banner { padding-block: clamp(36px, 5vw, 56px); }
.join-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.join-banner__title {
  font-size: clamp(19px, 2.2vw, 26px);
  margin-top: 10px;
  max-width: 46ch;
}
.join-banner__cta { flex-shrink: 0; }
@media (max-width: 640px) {
  .join-banner__inner { flex-direction: column; align-items: flex-start; }
  .join-banner__cta { width: 100%; justify-content: center; }
}

/* ── Enlace de texto dentro de párrafos ──────────────────────────────────── */
.lnk {
  color: var(--blue-bright);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(10, 91, 239, .3);
  transition: border-color .2s var(--ease);
}
.lnk:hover { border-bottom-color: var(--blue-bright); }

/* ── Portada de postulaciones.html ───────────────────────────────────────── */
.recruit-hero { padding-top: clamp(112px, 12vw, 160px); }

.recruit-hero__back {
  /* flex (no inline-flex) + fit-content: ocupa su propio renglón, para que el
     eyebrow de abajo no se le pegue al lado, pero el área clicable sigue
     midiendo solo lo que el texto */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8fb4f5;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.recruit-hero__back:hover { color: #fff; }
.recruit-hero__back-ico { width: 15px; height: 15px; transform: rotate(180deg); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
/* Dos campos por fila; se apilan en móvil. */
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.field__hint { font-weight: 400; color: var(--mute); }

/* <select> con el mismo aspecto que los <input> del formulario original */
.field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 13px 40px 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2376849c' d='M0 0h12L6 8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s;
}
.field select:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(10, 91, 239, .12);
}
.field select.has-err { border-color: var(--red); }
.field select:invalid, .field select option[value=""] { color: var(--mute); }

/* Chips de especialidad (selección múltiple) */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s, color .2s;
}
.chip:hover { border-color: var(--blue-tint2); background: var(--blue-tint); }
.chip.is-on {
  border-color: var(--blue-bright);
  background: var(--blue-tint);
  color: var(--navy);
}
.chip__tick { width: 14px; height: 14px; color: var(--blue-bright); }

@media (max-width: 720px) {
  .form2 { grid-template-columns: 1fr; }
}

/* ============ Envío de formularios (WhatsApp / respaldo) ============ */

/* Campo trampa antispam. Se evita display:none y hidden de forma deliberada:
   diversos robots omiten lo oculto por esos medios, con lo que la trampa
   perdería efecto. Esta técnica lo mantiene invisible e inalcanzable para las
   personas, pero presente en el DOM. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Verde oficial de WhatsApp. Se conserva sin sustituir por los azules o rojos
   de la marca porque es el color que permite reconocer el canal de inmediato. */
.btn--wa { background: #25d366; color: #0b3d1f; }
.btn--wa:hover { background: #1eb457; color: #fff; transform: translateY(-2px); }
.btn--wa svg { width: 19px; height: 19px; }

.btn[disabled] { opacity: .6; cursor: progress; pointer-events: none; }

.contact__done .btn--wa { margin-bottom: 4px; }
.contact__done-otra { margin-top: 12px; }

.fallo {
  margin-top: 16px;
  padding: 16px 18px;
  background: #fdf2f1;
  box-shadow: inset 0 0 0 1.5px rgba(190,42,35,.28);
  text-align: left;
}
.fallo__t { display: block; font-family: var(--font-head); font-size: 15px; color: var(--red-deep); }
.fallo__p { margin: 6px 0 14px; font-size: 14px; color: var(--body); }
.fallo__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fallo__btns .btn { padding: 12px 18px; font-size: 14px; }

/* ---- Renglón de WhatsApp dentro de las listas de contacto (.ctrl) ---- */
/* El enlace ocupa el renglón completo, ícono incluido, de modo que toda el área
   resulte accionable y no solo el texto. Hereda el flex de .ctrl__node. */
.ctrl__node--wa .ctrl__link { display: flex; align-items: center; flex: 1; min-width: 0; }
.ctrl__node--wa .ctrl__ico { background: #25d366; color: #0b3d1f; }
.ctrl__node--wa:hover { box-shadow: inset 0 0 0 1.6px #1eb457; }
.ctrl__node--wa:hover .ctrl__v { color: #1eb457; }

/* ---- WhatsApp en el pie de página ---- */
.foot__wa { display: inline-flex; align-items: center; gap: 7px; }
.foot__wa svg { width: 16px; height: 16px; color: #25d366; flex: 0 0 auto; }