/* =====================================================================
   Conecta tu Futuro — hoja de estilos principal
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gris-texto);
  background: var(--fondo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/*
 * Jerarquía del manual de marca (pp. 18-20).
 *
 * El h1 va en azul noche —el manual titula así cada lámina— y el verde
 * vuelve en los títulos de sección (h2/h3), que es donde se nota. El tono
 * sale de la familia del verde bosque, no del #94C04D: ese último sobre
 * blanco da 2.12:1 y no se lee ni a tamaño de titular. Ver --texto-seccion.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  color: var(--texto-titulo);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-weight: 700; font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1.15; }
h2 { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.05rem); line-height: 1.2; color: var(--texto-seccion); }
h3 { font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--texto-seccion); }
h4 { font-weight: 600; font-size: 1.1rem; }
h5, h6 { font-weight: 600; font-size: 1rem; }

/*
 * Filete verde sobre el título de sección: es el recurso con el que el
 * manual abre cada lámina (pp. 2, 13, 23, 28).
 */
.titulo-filete::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: var(--verde-conecta);
  margin-bottom: 1.1rem;
}

p { margin: 0 0 1rem; }
a { color: var(--verde-800); text-decoration-color: var(--verde-300); text-underline-offset: 2px; }
a:hover { color: var(--azul-noche); text-decoration-color: currentColor; }
figcaption, .leyenda { font-family: var(--fuente-leyenda); font-size: .9rem; color: var(--gris-medio); }
small { font-family: var(--fuente-leyenda); }

img { max-width: 100%; height: auto; }

.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 1.25rem; }
.contenedor-angosto { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }
/*
 * Solo el eje vertical, en longhand a propósito.
 *
 * Con `padding: 3rem 0` esta regla ganaba el shorthand entero a
 * `.contenedor` —misma especificidad, pero va después— y dejaba en cero el
 * padding lateral de las 22 páginas que llevan ambas clases. El contenido
 * quedaba pegado al borde de la pantalla en móvil.
 */
.seccion { padding-top: 3rem; padding-bottom: 3rem; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan). */
.hp-campo {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
/*
 * Selector de una sola clase a propósito: si acá dijera "a.btn, button.btn"
 * su especificidad (0,1,1) le ganaría a todos los modificadores de abajo
 * —.btn-candidato, .btn-peligro, .btn-secundario— que son (0,1,0), y los
 * botones se quedarían naranjas sin importar su clase.
 */
.btn {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radio-boton);
  padding: .85em 1.75em;
  background: var(--naranja-conecta);
  color: #fff;
  transition: background-color .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--azul-noche); color: #fff; }
.btn[disabled], .btn.cargando { opacity: .6; cursor: not-allowed; }

.btn-secundario { background: transparent; color: var(--gris-texto); border: 2px solid var(--gris-linea); }
.btn-secundario:hover { background: var(--gris-suave); color: var(--azul-marino); }
.btn-peligro { background: var(--error); }
.btn-peligro:hover { background: #7d1f20; }
.btn-pequeno { padding: .5em 1.1em; font-size: .9rem; }

/* Los CTA conservan el amarillo y el celeste con tinta blanca, como venían. */
.btn-candidato { background: var(--amarillo-cta); color: #fff; }
.btn-candidato:hover, .btn-candidato:focus-visible { background: var(--amarillo-cta-hover); color: #fff; transform: translateY(-4px); }
.btn-empresa { background: var(--celeste-cta); color: #fff; }
.btn-empresa:hover, .btn-empresa:focus-visible { background: var(--celeste-cta-hover); color: #fff; transform: translateY(-4px); }

.enlace-simple { background: none; border: 0; padding: 0; color: var(--verde-800); font: inherit; cursor: pointer; text-decoration: underline; }
.enlace-simple:hover { color: var(--azul-noche); }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header { background: var(--verde-conecta); width: 100%; }
/*
 * A todo el ancho, igual que el footer: el tope de --ancho-max estrechaba la
 * píldora y la obligaba a partirse en dos líneas en pantallas anchas, que es
 * justo donde más sitio hay.
 */
.header-inner {
  width: 100%;
  padding: .9rem clamp(1rem, 2.5vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.75rem, 1.5vw, 1.5rem);
}

/*
 * Recorte de relleno transparente.
 *
 * Los archivos de marca vienen sobre un lienzo con aire alrededor, así que
 * reservarían mucho más espacio del que realmente ocupan. Estos márgenes
 * negativos recortan ese relleno sin deformar la imagen.
 *
 * Cada contenedor declara las proporciones medidas de SU archivo y el ancho
 * visible que quiere; todo lo demás se deriva:
 *   --arte-ancho      ancho del arte / ancho del lienzo
 *   --lienzo-aspecto  ancho del lienzo / alto del lienzo
 *   --relleno-*       relleno transparente, como fracción del lienzo
 *   --arte-visible    ancho final del arte en pantalla
 */
.recorte-arte img {
  --lienzo: calc(var(--arte-visible) / var(--arte-ancho));
  --lienzo-alto: calc(var(--lienzo) / var(--lienzo-aspecto));
  width: var(--lienzo);
  height: auto;
  display: block;
  margin: calc(var(--lienzo-alto) * var(--relleno-arriba) * -1)
          calc(var(--lienzo) * var(--relleno-lateral) * -1)
          calc(var(--lienzo-alto) * var(--relleno-abajo) * -1);
}

/* conecta tu futuro logo.webp — lienzo 1254x1254, arte 1186x349 */
.brand, .footer-brand {
  --arte-ancho: 0.94577;
  --lienzo-aspecto: 1;
  --relleno-lateral: 0.027113;
  --relleno-arriba: 0.354067;
  --relleno-abajo: 0.367624;
}

.brand { --arte-visible: 192px; display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }

.nav-pill {
  background: #fff;
  border: 2px solid var(--verde-conecta);
  border-radius: 999px;
  padding: .85rem 1.4rem;
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.4vw, 1.25rem);
  flex-wrap: wrap;
  justify-content: center;
}
.nav-pill a {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 16px;
  color: var(--gris-texto);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  transition: transform .18s ease, color .18s ease;
}
.nav-pill a:hover, .nav-pill a:focus-visible { transform: scale(1.12); color: var(--azul-marino); }
.nav-pill a[aria-current="page"] { color: var(--azul-marino); }

.nav-toggle, .nav-close { display: none; }

/* ---------------------------------------------------------------------
   Burbuja de cuenta
   Saca 'Mi Perfil' y 'Cerrar sesión' de la píldora, que con siete ítems
   se partía en dos líneas, y de paso deja ver con qué cuenta se entró.
   --------------------------------------------------------------------- */
.cuenta { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; }

/* Amarillo sobre azul marino: 11:1 de contraste y se despega del verde
   del header, que es justo lo que se busca en un distintivo de privilegio. */
.cuenta-insignia {
  font-family: var(--fuente-leyenda);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--azul-marino);
  background: var(--amarillo-cta);
  padding: .22rem .62rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Reutiliza los tonos de .aviso-alerta: se lee como información de estado,
   no como un botón sobre el que haya que hacer clic. */
.cuenta-insignia.pendiente {
  background: var(--aviso-fondo);
  color: var(--aviso);
}

.cuenta-nota {
  margin: 0 1rem .7rem;
  padding: .6rem .7rem;
  font-family: var(--fuente-leyenda);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--aviso);
  background: var(--aviso-fondo);
  border-radius: 8px;
}

.cuenta-boton {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cuenta-boton:hover, .cuenta-boton:focus-visible { transform: scale(1.08); box-shadow: var(--sombra-suave); }

.cuenta-avatar {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  color: var(--azul-noche);
  letter-spacing: .02em;
}
img.cuenta-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.cuenta-menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  z-index: 50;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--gris-linea);
  border-radius: 14px;
  box-shadow: var(--sombra-panel);
  padding: .9rem 0 .4rem;
  display: flex;
  flex-direction: column;
}
.cuenta-menu[hidden] { display: none; }

.cuenta-nombre {
  margin: 0 1rem .1rem;
  font-weight: 600;
  color: var(--gris-texto);
  overflow-wrap: break-word;
}
.cuenta-rol {
  margin: 0 1rem;
  font-family: var(--fuente-leyenda);
  font-size: .8rem;
  color: var(--verde-800);
}
.cuenta-correo {
  margin: 0 1rem .7rem;
  font-family: var(--fuente-leyenda);
  font-size: .8rem;
  color: var(--gris-medio);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--gris-linea);
  padding-bottom: .7rem;
}

.cuenta-menu a, .cuenta-salir {
  display: block;
  width: 100%;
  text-align: left;
  padding: .6rem 1rem;
  font-family: var(--fuente-cuerpo);
  font-size: .95rem;
  color: var(--gris-texto);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.cuenta-menu a:hover, .cuenta-salir:hover { background: var(--gris-suave); color: var(--azul-marino); }
.cuenta-salir { color: var(--error); font-weight: 600; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--gris-texto); color: #fff; margin-top: 3rem; }
/*
 * El footer ocupa todo el ancho de la ventana (sin el tope de --ancho-max
 * del resto del sitio). El padding y el gap crecen con la pantalla para que
 * las tres columnas queden bien separadas también en monitores anchos.
 */
.footer-inner {
  width: 100%;
  padding: 3rem clamp(1.25rem, 5vw, 5rem);
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
/*
 * Las columnas NO crecen (flex-grow: 0): si crecieran se repartirían todo el
 * ancho y 'space-between' no tendría espacio sobrante que distribuir. Así la
 * primera queda pegada al margen izquierdo y la última al derecho.
 * El max-width evita que el párrafo de la primera columna se estire de más.
 */
.footer-col { flex: 0 1 auto; min-width: 200px; max-width: 340px; }
.footer-col h3 { color: #fff; font-size: 1.05rem; }
.footer-brand { --arte-visible: 150px; display: flex; align-items: center; text-decoration: none; margin-bottom: .75rem; }
.site-footer p, .site-footer li { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: .5rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal a { font-family: var(--fuente-leyenda); font-size: 14px; text-decoration: underline; }
/* libro-reclamaciones-blanco.webp — lienzo 500x200, arte 400x163 */
.footer-libro {
  display: inline-block;
  margin-top: 1rem;
  --arte-ancho: 0.8;
  --lienzo-aspecto: 2.5;
  --relleno-lateral: 0.1;
  --relleno-arriba: 0.11;
  --relleno-abajo: 0.075;
  --arte-visible: 140px;
}
.footer-copy { font-family: var(--fuente-leyenda); font-size: 14px; opacity: .85; }

/* ---------------------------------------------------------------------
   Hero de inicio
   --------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 55% 45%; width: 100%; }
.hero-copy {
  position: relative;   /* ancla de los adornos, que van en absolute */
  overflow: hidden;     /* recorta el arco que sangra por el borde */
  display: grid;
  grid-template-rows: 1fr auto 1fr;  /* filas 1fr vacías: el bloque queda centrado y unido */
  padding: 2rem 3rem;
  text-align: center;
}
.hero-copy > .hero-bloque { grid-row: 2; max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
/* Cada separación del hero es un solo número: el margen inferior del bloque
   de arriba. .hero-acciones va sin margen propio para que no se sumen. */
.hero-copy h1 { margin-bottom: 1.5rem; }
.hero-copy .hero-bloque p { margin-bottom: 2.5rem; }
.hero-acciones { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 0; }

/* La palabra destacada del titular. Es el único sitio del hero donde el
   verde carga texto, y a 2.9rem sobra contraste. */
.hero-copy h1 em { font-style: normal; color: var(--texto-seccion); }
.hero-entrada { font-size: 1.08rem; line-height: 1.65; }

/* Píldora de antetítulo. El manual la usa en la p. 29 sobre "Presentación
   comercial", con borde fino y sin relleno. */
.pildora {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .38rem 1rem;
  border: 1.5px solid var(--verde-conecta);
  border-radius: var(--radio-chip);
  font-family: var(--fuente-leyenda);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Verde en el relleno y el borde; la tinta va en azul noche porque a este
     tamaño y en versalitas el verde sobre claro no se sostiene. */
  background: var(--verde-100);
  color: var(--azul-noche);
}

/* ---------------------------------------------------------------------
   Adornos de marca (manual p. 23)
   Decorativos: siempre aria-hidden, nunca capturan el puntero y se apagan
   con prefers-reduced-motion junto con el resto de la animación.
   --------------------------------------------------------------------- */
.adorno { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
.adorno-arco {
  top: -70px; right: -80px; width: 280px; height: 280px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%2394C04D' stroke-width='5' stroke-linecap='round' stroke-dasharray='0.5 9'/%3E%3C/svg%3E");
  opacity: .85;
}
.adorno-destellos {
  bottom: 8%; left: -30px; width: 170px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 60'%3E%3Cg fill='%23FC7C3F'%3E%3Cpath d='M28 4c2 14 6 18 20 20-14 2-18 6-20 20-2-14-6-18-20-20 14-2 18-6 20-20z'/%3E%3Cpath d='M85 16c1.4 10 4.2 12.6 14 14-9.8 1.4-12.6 4.2-14 14-1.4-9.8-4.2-12.6-14-14 9.8-1.4 12.6-4.2 14-14z'/%3E%3Cpath d='M138 24c1 7 3 9 10 10-7 1-9 3-10 10-1-7-3-9-10-10 7-1 9-3 10-10z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .9;
}
/*
 * Fotos descuadradas sobre un panel de color.
 *
 * Dos capas de fondo en el mismo elemento: la foto y un panel liso. La foto
 * se recorta a la caja de contenido y el panel a la caja completa, así el
 * padding deja asomar el color por dos lados sin necesidad de otro elemento.
 * --foto la inyecta js/pagina-inicio.js desde IMAGENES (config.js).
 */
.hero-media, .split-media {
  --desfase: 2rem;
  --panel: var(--verde-conecta);
  background-image: var(--foto, none), linear-gradient(var(--panel), var(--panel));
  background-clip: content-box, border-box;
  background-origin: content-box, border-box;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, auto;
}

.hero-media {
  min-height: 650px;
  background-position: center top, 0 0;
  /* el color asoma por la izquierda y abajo; arriba y a la derecha sangra */
  padding: 0 0 var(--desfase) var(--desfase);
}

/*
 * Pasos y ventajas. Misma anatomía: disco de color con el icono de marca
 * a la izquierda y el texto a la derecha. Cada <li> trae su propio --tinte
 * desde el HTML, así la paleta se reordena sin tocar el CSS.
 *
 * Los pasos llevan además el número, que lo pone un contador CSS y no el
 * HTML: agregar o quitar un paso no obliga a renumerar nada a mano.
 */
.pasos, .ventajas {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}
.pasos { counter-reset: paso; }
.ventajas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.pasos li, .ventajas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: start;
}
.pasos li { counter-increment: paso; }

/* Disco tintado con el icono de marca recortado por máscara: un solo SVG
   sirve para cualquier color, sin duplicar archivos por tinte. */
.paso-icono {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tinte) 15%, #fff);
}
.paso-icono::before {
  content: "";
  position: absolute;
  inset: .72rem;
  background: var(--tinte);
  -webkit-mask: var(--icono) center / contain no-repeat;
          mask: var(--icono) center / contain no-repeat;
}
.paso-icono[data-icono="perfil"]    { --icono: url("/assets/marca/icono-perfil.svg"); }
.paso-icono[data-icono="clic"]      { --icono: url("/assets/marca/icono-clic.svg"); }
.paso-icono[data-icono="respuesta"] { --icono: url("/assets/marca/icono-respuesta.svg"); }
.paso-icono[data-icono="mapa"]      { --icono: url("/assets/marca/icono-mapa.svg"); }
.paso-icono[data-icono="cv"]        { --icono: url("/assets/marca/icono-cv.svg"); }
/* Iconos genéricos del manual (p. 24), disponibles para el resto del sitio. */
.paso-icono[data-icono="comunidad"] { --icono: url("/assets/marca/icono-comunidad.svg"); }
.paso-icono[data-icono="conexion"]  { --icono: url("/assets/marca/icono-conexion.svg"); }
.paso-icono[data-icono="destello"]  { --icono: url("/assets/marca/icono-destello.svg"); }
.paso-icono[data-icono="alcance"]   { --icono: url("/assets/marca/icono-alcance.svg"); }
.paso-icono[data-icono="formacion"] { --icono: url("/assets/marca/icono-formacion.svg"); }

/* El número del paso, en una cápsula sobre el borde del disco. */
.pasos .paso-icono::after {
  content: counter(paso);
  position: absolute;
  right: -.28rem;
  bottom: -.28rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--tinte);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.45rem;
  text-align: center;
  box-shadow: 0 0 0 3px var(--fondo);
}

.pasos h3, .ventajas h3 { margin: 0 0 .2rem; font-size: 1.15rem; align-self: center; color: var(--azul-noche); }
.pasos p, .ventajas p { margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: 3rem; }
/* El botón va centrado aunque el texto de la banda quede alineado a la izquierda */
.accion-centrada { text-align: center; margin-bottom: 0; }
.split.invertido .split-media { order: 2; }
.split.invertido .split-copy { order: 1; }

.split-media {
  min-height: 500px;
  background-position: center, 0 0;
}

/* Banda de candidatos: la foto va a la izquierda, el amarillo asoma a la
   derecha y abajo. El color de cada banda es el de su botón. */
.split:not(.invertido) .split-media {
  --panel: var(--amarillo-cta);
  padding: 0 var(--desfase) var(--desfase) 0;
}

/* Banda de empresas: la foto va a la derecha, el celeste asoma a la izquierda. */
.split.invertido .split-media {
  --panel: var(--celeste-cta);
  padding: 0 0 var(--desfase) var(--desfase);
}

/*
 * Ritmo de la página: las dos bandas no pueden ser el mismo plano crema o
 * el inicio se lee como un solo bloque. La de empresas se asienta sobre el
 * verde más claro y lleva la rejilla de aspas del manual al 5%, que es
 * textura de fondo y nunca protagonista.
 */
.split.invertido .split-copy {
  background-color: var(--verde-200);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%2394C04D' stroke-width='3' stroke-linecap='round' opacity='0.5'%3E%3Cpath d='M14 14l12 12M26 14L14 26'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 34px 34px;
}

.split-copy { position: relative; overflow: hidden; }
.split-copy .adorno-arco { top: auto; right: -110px; bottom: -110px; width: 240px; height: 240px; opacity: .55; }

/*
 * Tarjeta blanca sobre el fondo de color y textura. Sin ella el texto se
 * pelea con la rejilla de fondo; el manual resuelve esto igual en la p. 29.
 */
.panel-copy {
  position: relative;
  z-index: 1;
  background: var(--base);
  border-radius: var(--radio-caja);
  padding: 2.25rem;
  box-shadow: var(--sombra-suave);
}

/* Cada ventaja en su propia pastilla crema, para separarla de la tarjeta. */
.ventajas li {
  background: var(--fondo);
  border-radius: var(--radio-caja);
  padding: 1.15rem 1.25rem;
  column-gap: .9rem;
  align-items: center;
}
.ventajas .paso-icono { width: 2.7rem; height: 2.7rem; }
.ventajas .paso-icono::before { inset: .62rem; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form { max-width: 640px; }
.form-ancho { max-width: 900px; }
.campo { margin-bottom: 1.15rem; }
.campo > label, .campo-titulo {
  display: block;
  font-weight: 600;
  color: var(--gris-texto);
  margin-bottom: .35rem;
}
.requerido { color: var(--error); }
.ayuda { font-family: var(--fuente-leyenda); font-size: .875rem; color: var(--gris-medio); margin-top: .25rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--gris-texto);
  background: #fff;
  border: 1px solid var(--gris-linea);
  border-radius: 8px;
  padding: .65rem .8rem;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde-conecta); outline-offset: 1px; border-color: var(--verde-conecta); }
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: .5rem; accent-color: var(--verde-conecta); }

.opciones { display: flex; flex-direction: column; gap: .4rem; }
.opciones.horizontal { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
.opciones label { font-weight: 400; display: flex; align-items: center; gap: .1rem; cursor: pointer; }

.campo-bio textarea { width: 100%; max-width: 600px; }

.form-errores {
  background: var(--error-fondo);
  border-left: 4px solid var(--error);
  color: var(--error);
  padding: .9rem 1.1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}
.form-errores ul { margin: 0; padding-left: 1.1rem; }
.form-errores:empty { display: none; }

.aviso { padding: 1rem 1.15rem; border-radius: var(--radio-caja); border-left: 4px solid var(--gris-linea); background: var(--gris-suave); margin-bottom: 1.5rem; }
.aviso-exito { background: var(--exito-fondo); border-left-color: var(--exito); color: var(--exito); }
.aviso-error { background: var(--error-fondo); border-left-color: var(--error); color: var(--error); }
.aviso-alerta { background: var(--aviso-fondo); border-left-color: var(--aviso); color: var(--aviso); }
.aviso p:last-child { margin-bottom: 0; }
.aviso a { font-weight: 600; }

.acciones { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }

.divisor-o { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--gris-medio); font-family: var(--fuente-leyenda); }
.divisor-o::before, .divisor-o::after { content: ""; flex: 1; height: 1px; background: var(--gris-linea); }

.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; background: #fff; color: var(--gris-texto);
  border: 1px solid var(--gris-linea); border-radius: var(--radio-boton);
  padding: .8em 1.5em; font-weight: 600; cursor: pointer; font-size: 1rem;
}
.btn-google:hover { background: var(--gris-suave); color: var(--azul-marino); }
.btn-google svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Páginas de cuenta: login, registro, recuperar y restablecer contraseña,
   activar cuenta.

   Dos columnas: a la izquierda el bloque de color pleno con tipografía
   blanca del manual (p. 29), a la derecha el formulario en tarjeta blanca.
   El panel de marca es decorativo-informativo, no funcional: en pantallas
   angostas se reduce a una franja con el logo para no empujar el formulario
   fuera de la primera pantalla.
   --------------------------------------------------------------------- */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}

/*
 * El color del bloque y el del acento son variables: cada página de cuenta
 * las fija en su propio HTML. Sin fijarlas cae en azul noche + verde, que es
 * lo que usa el login.
 */
.auth-marca {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 4rem 3rem;
  background-color: var(--auth-fondo, var(--azul-noche));
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%2394C04D' stroke-width='3.2' stroke-linecap='round' opacity='0.22'%3E%3Cpath d='M14 14l12 12M26 14L14 26'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 36px 36px;
}
.auth-marca-cuerpo { position: relative; z-index: 1; max-width: 26rem; margin-left: auto; }
.auth-logo { display: block; width: 210px; height: auto; margin-bottom: 2.25rem; }
.auth-marca h2 {
  color: #fff;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
/* Los adornos del manual, recolocados para este panel. */
.auth-marca .adorno-arco { top: -90px; left: -90px; right: auto; width: 260px; height: 260px; opacity: .5; }
.auth-marca .adorno-destellos { bottom: 6%; right: -20px; left: auto; opacity: .75; }

/* Lista de ventajas con el visto verde en lugar de viñeta. */
.auth-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.auth-lista li {
  position: relative;
  padding-left: 2.1rem;
  color: rgba(255, 255, 255, .9);
  font-family: var(--fuente-leyenda);
}
.auth-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--auth-acento, var(--verde-conecta));
  -webkit-mask: url("/assets/marca/icono-respuesta.svg") center / 1.35rem no-repeat;
          mask: url("/assets/marca/icono-respuesta.svg") center / 1.35rem no-repeat;
}

/* Nota al pie del panel, separada de la lista por un filete del acento. */
.auth-nota {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--fuente-leyenda);
  font-size: .92rem;
  color: rgba(255, 255, 255, .75);
}

/* Variante para formularios largos —el registro de empresa tiene diez
   campos—: el panel de marca cede ancho y los campos van a dos columnas. */
.auth-ancho { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.auth-caja-ancha { max-width: 40rem; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); column-gap: 1rem; }

/* Subtítulo de bloque dentro de un formulario. No compite con el h1 de la
   tarjeta: va en versalitas pequeñas con el filete verde al costado. */
.form-seccion {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2rem 0 1.1rem;
  font-family: var(--fuente-leyenda);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-noche);
}
.form-seccion::after { content: ""; flex: 1; height: 3px; border-radius: 999px; background: var(--verde-conecta); }
.form-seccion:first-child { margin-top: 0; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 3.5rem 2rem; }
.auth-caja {
  width: 100%;
  max-width: 27rem;
  background: var(--base);
  border-radius: var(--radio-caja);
  padding: 2.5rem;
  box-shadow: var(--sombra-suave);
}
.auth-caja h1 { font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: .35rem; }
.auth-entrada { color: var(--texto-cuerpo); margin-bottom: 1.75rem; }
.auth-caja .form { max-width: none; }
/* El botón manda; el enlace de contraseña olvidada queda debajo y discreto. */
.acciones-auth { flex-direction: column; align-items: stretch; gap: .9rem; }
.acciones-auth a { align-self: center; font-family: var(--fuente-leyenda); font-size: .92rem; }
.btn-ancho { width: 100%; }
.auth-pie { margin: 1.5rem 0 0; font-family: var(--fuente-leyenda); font-size: .92rem; text-align: center; }

@media (max-width: 900px) {
  /* El panel de marca pasa a franja: solo el logo y el titular, sin la lista,
     para que el formulario siga entrando en la primera pantalla. */
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-marca { padding: 2.25rem 1.5rem; }
  .auth-marca-cuerpo { max-width: none; margin-left: 0; text-align: center; }
  .auth-logo { width: 170px; margin: 0 auto 1.25rem; }
  .auth-marca h2 { font-size: 1.4rem; margin-bottom: 0; }
  .auth-lista, .auth-nota { display: none; }
  .auth-marca .adorno { display: none; }
  .auth-panel { padding: 2.5rem 1rem; }
  .auth-caja { padding: 1.75rem 1.35rem; box-shadow: none; background: none; }
}

/* ---------------------------------------------------------------------
   Tarjetas y tablas
   --------------------------------------------------------------------- */
.caja {
  background: #fff;
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.caja-suave { background: var(--gris-suave); border-color: transparent; }
.caja h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.caja > p:last-child, .caja > div:last-child > p:last-child { margin-bottom: 0; }

/* Caja con acento verde arriba: se usa para lo que el usuario debe notar
   sin que sea una alerta. */
.caja-destacada { border-top: 4px solid var(--verde-conecta); }

/* Zona de acciones irreversibles. El coral aquí no es decoración: es la
   única parte de la página donde el color advierte. */
.caja-peligro { border-left: 4px solid var(--coral-conecta); }
.caja-peligro h2 { color: var(--coral-conecta); }

/* ---------------------------------------------------------------------
   Cabecera de página y formulario en tarjeta
   Patrón compartido por Mi Perfil, Mi Empresa y Publicar oferta.
   --------------------------------------------------------------------- */
.pagina-cabecera { margin-bottom: 2rem; }
.pagina-cabecera h1 { margin-bottom: .4rem; }
.pagina-entrada { max-width: 60ch; color: var(--texto-cuerpo); margin-bottom: 0; }

.tarjeta-form {
  max-width: none;
  background: var(--base);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra-suave);
}

/* Fila de controles que deben quedar en línea, no apilados a lo ancho:
   el select global es width:100% y aquí hay que devolverlo a su medida. */
.acciones-linea select { width: auto; min-width: 14rem; }

/* El input de archivo nativo es feo pero funcional; al menos se le da la
   misma caja que al resto de campos. */
.campo-archivo input[type="file"] {
  width: 100%;
  font-family: var(--fuente-leyenda);
  font-size: .92rem;
  padding: .6rem .7rem;
  border: 1px dashed var(--noche-200);
  border-radius: 8px;
  background: var(--fondo);
}
#cv-actual:empty { display: none; }

/* El consentimiento legal se separa del resto: es lo último que se marca
   antes de guardar y conviene que se lea como un bloque aparte. */
.campo-consentimiento {
  background: var(--fondo);
  border-radius: var(--radio-caja);
  padding: 1rem 1.15rem;
}
.campo-consentimiento label { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; line-height: 1.55; }
.campo-consentimiento input { margin-top: .25rem; }

/* ---------------------------------------------------------------------
   Listas de casillas (reemplazan a <select multiple>)
   --------------------------------------------------------------------- */
.casillas {
  border: 1px solid var(--gris-linea);
  border-radius: 8px;
  background: var(--base);
  padding: .6rem;
}
.casillas-buscar { margin-bottom: .5rem; }
.casillas-lista { max-height: 17rem; overflow-y: auto; padding-right: .25rem; }

.casilla {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-weight: 400;
  font-size: .93rem;
  line-height: 1.5;
  padding: .3rem .4rem;
  border-radius: 6px;
  cursor: pointer;
  margin: 0;
}
.casilla:hover { background: var(--verde-100); }
.casilla input { flex: 0 0 auto; margin: .2rem 0 0; }

/* Región completa: manda sobre sus provincias, así que va con más peso. */
.casilla-padre { font-weight: 600; color: var(--azul-noche); }

.casillas-grupo { border-bottom: 1px solid var(--noche-100); padding: .15rem 0; }
.casillas-grupo:last-child { border-bottom: 0; }

.casillas-hijas > summary {
  list-style: none;
  cursor: pointer;
  margin: .1rem 0 .1rem 2rem;
  font-family: var(--fuente-leyenda);
  font-size: .82rem;
  color: var(--verde-800);
  text-decoration: underline;
}
.casillas-hijas > summary::-webkit-details-marker { display: none; }
.casillas-hijas[open] > summary { margin-bottom: .3rem; }
.casillas-hijas .casilla { margin-left: 2rem; }

.casillas-conteo {
  margin: .5rem 0 0;
  padding-top: .5rem;
  border-top: 1px solid var(--noche-100);
  font-family: var(--fuente-leyenda);
  font-size: .82rem;
  color: var(--texto-suave);
}

/* Defensa: cualquier regla que fije display en un elemento que el JS oculta
   con la propiedad `hidden` lo volvería visible. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Tarjeta de oferta
   Rejilla de tarjetas, no lista de barras anchas: a 320 px mínimo entran
   dos por fila en escritorio y una en móvil sin media query propia.
   --------------------------------------------------------------------- */
.listado-ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.15rem; }

.oferta-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gris-linea);
  border-top: 4px solid var(--verde-conecta);
  border-radius: var(--radio-caja);
  padding: 1.35rem 1.5rem;
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease;
}
.oferta-card:hover { box-shadow: var(--sombra-panel); transform: translateY(-2px); }
/* El filete superior toma el color de la señal cuando la oferta cierra pronto. */
.oferta-card.urgente { border-top-color: var(--coral-conecta); }

.oferta-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.oferta-card h3 { margin-bottom: .15rem; font-size: 1.18rem; }
.oferta-card h3 a { color: var(--azul-noche); text-decoration: none; }
.oferta-card h3 a:hover { color: var(--verde-conecta); }
.oferta-empresa { font-family: var(--fuente-leyenda); font-weight: 700; color: var(--texto-cuerpo); margin-bottom: .6rem; }
.oferta-salario {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  color: var(--azul-conecta);
  margin-bottom: .75rem;
}
.oferta-salario.sin-dato { color: var(--texto-suave); font-weight: 500; }

/* Señal de estado: coral para lo que cierra pronto, verde para lo recién
   publicado. Nunca las dos a la vez —manda la urgencia—. */
.oferta-senal {
  flex: 0 0 auto;
  padding: .28rem .7rem;
  border-radius: var(--radio-chip);
  font-family: var(--fuente-leyenda);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--verde-100);
  color: var(--azul-noche);
}
.oferta-senal.urgente { background: var(--coral-conecta); color: #fff; }

/* Etiquetas. Cada familia con su color para poder distinguirlas de un
   vistazo: modalidad, carrera y región. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; }
.chip {
  padding: .26rem .7rem;
  border-radius: var(--radio-chip);
  font-family: var(--fuente-leyenda);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--azul-noche);
  background: var(--noche-100);
}
.chip-tipo    { background: var(--verde-200); }
.chip-carrera { background: #E2EEF2; }   /* celeste al 20 %: variante del #71ACBD */
.chip-mas     { background: none; border: 1px dashed var(--noche-200); color: var(--texto-suave); }

.oferta-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: auto;          /* pega el pie abajo aunque las tarjetas midan distinto */
  padding-top: .9rem;
  border-top: 1px solid var(--noche-100);
}
.oferta-plazo { font-family: var(--fuente-leyenda); font-size: .85rem; color: var(--texto-suave); margin: 0; }
.oferta-plazo.urgente { color: var(--coral-conecta); font-weight: 700; }

/* ---------------------------------------------------------------------
   Detalle de una oferta
   Dos columnas: el texto largo a la izquierda y los datos duros más el
   botón de postular en una tarjeta lateral que acompaña el scroll. Antes
   todo iba en una sola columna y el botón quedaba al final del todo.
   --------------------------------------------------------------------- */
.volver { margin-bottom: 1.25rem; font-family: var(--fuente-leyenda); font-size: .92rem; }

/*
 * Tres hijos y dos columnas: cabecera y cuerpo se apilan en la izquierda,
 * la tarjeta lateral ocupa la derecha cruzando ambas filas. Así el orden
 * del DOM (cabecera, tarjeta, cuerpo) es el correcto al apilarse en móvil
 * sin necesidad de reordenar nada.
 */
.oferta-detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  align-items: start;
  column-gap: 2.5rem;
}
.oferta-encabezado { grid-column: 1; grid-row: 1; }
.oferta-lateral    { grid-column: 2; grid-row: 1 / span 2; }
.oferta-cuerpo     { grid-column: 1; grid-row: 2; }

.oferta-encabezado { margin-bottom: 2.25rem; }
.oferta-encabezado .oferta-senal { display: inline-block; margin-bottom: .9rem; }
.oferta-encabezado h1 { margin-bottom: .3rem; }
.oferta-encabezado .oferta-empresa { font-size: 1.05rem; margin-bottom: 1rem; }
/* El nombre de la empresa va en azul noche y no en el verde de enlace: es
   lo segundo que se lee después del título y necesita peso propio. */
.oferta-encabezado .oferta-empresa a { color: var(--azul-noche); text-decoration: none; }
.oferta-encabezado .oferta-empresa a:hover { text-decoration: underline; }
.oferta-encabezado .chips { margin-bottom: 0; }

/*
 * El cuerpo va en tarjeta, igual que el listado y que el resumen lateral.
 * No es solo estética: suelto sobre el fondo, el texto quedaba a 20 px del
 * borde en móvil mientras que en el listado queda a 40 px, y se notaba
 * apretado al lado de la otra página.
 */
.oferta-cuerpo {
  background: var(--base);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  padding: 1.9rem;
  box-shadow: var(--sombra-suave);
}
.oferta-bloque { margin-bottom: 2.25rem; }
.oferta-bloque:last-child { margin-bottom: 0; }
.oferta-bloque h2 { font-size: 1.4rem; }
.oferta-bloque p:last-child { margin-bottom: 0; }

.oferta-lateral { position: sticky; top: 1.5rem; }
.oferta-resumen {
  background: var(--base);
  border: 1px solid var(--gris-linea);
  border-top: 4px solid var(--verde-conecta);
  border-radius: var(--radio-caja);
  padding: 1.6rem;
  box-shadow: var(--sombra-suave);
}
.resumen-salario {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--azul-conecta);
  margin: 0 0 1.25rem;
}
.resumen-salario.sin-dato { font-size: 1.15rem; color: var(--texto-suave); font-weight: 600; }

.resumen-datos { margin: 0 0 1.5rem; display: grid; gap: .85rem; }
.resumen-datos > div { display: grid; gap: .1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--noche-100); }
.resumen-datos > div:last-child { padding-bottom: 0; border-bottom: 0; }
.resumen-datos dt {
  font-family: var(--fuente-leyenda);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.resumen-datos dd { margin: 0; color: var(--azul-noche); font-weight: 600; }

/* El bloque de postulación lo rellena el JS con un botón, un aviso o un
   texto explicativo; todos tienen que verse bien en la misma caja. */
#postulacion .btn { width: 100%; }
#postulacion p:last-child { margin-bottom: 0; }
#postulacion > p { font-family: var(--fuente-leyenda); font-size: .92rem; color: var(--texto-cuerpo); }
#postulacion .aviso { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Una sola columna: cada hijo cae en su propia fila en orden de DOM, que
     ya es el correcto —título, tarjeta, texto—. */
  .oferta-detalle { grid-template-columns: minmax(0, 1fr); }
  .oferta-encabezado, .oferta-lateral, .oferta-cuerpo { grid-column: 1; grid-row: auto; }
  .oferta-lateral { position: static; margin-bottom: 1.5rem; }
  .oferta-encabezado { margin-bottom: 1.5rem; }
  .oferta-cuerpo { padding: 1.5rem 1.35rem; }
  .oferta-resumen { padding: 1.35rem; }
  .oferta-bloque { margin-bottom: 1.75rem; }
}

.tabla-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
table.tabla th, table.tabla td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--gris-linea); vertical-align: top; }
table.tabla th { font-weight: 600; color: var(--gris-texto); background: var(--gris-suave); white-space: nowrap; }
table.tabla tbody tr:hover { background: #fbfcfb; }
.celda-alerta { color: var(--error); font-weight: 600; }

.etiqueta-estado {
  display: inline-block; padding: .15em .7em; border-radius: 999px;
  font-size: .8rem; font-family: var(--fuente-leyenda); background: var(--gris-suave); color: var(--gris-texto);
}
.etiqueta-estado.ok { background: var(--exito-fondo); color: var(--exito); }
.etiqueta-estado.pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta-estado.info { background: #E2EEF2; color: #285C6B; }   /* celeste de marca, oscurecido para leerse */
.etiqueta-estado.no { background: var(--error-fondo); color: var(--error); }

.paginacion { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  padding: .4rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--gris-linea); color: var(--gris-texto); font-size: .95rem;
}
.paginacion .activo { background: var(--verde-conecta); color: #fff; border-color: var(--verde-conecta); }

.definiciones { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1.5rem; }
.definiciones dt { font-weight: 600; color: var(--gris-texto); }
.definiciones dd { margin: 0; }

/* ---------------------------------------------------------------------
   Listado de ofertas: barra lateral de filtros
   --------------------------------------------------------------------- */
.layout-ofertas {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}

/* La barra de filtros deja de ser una columna gris pegada al borde y pasa
   a ser una tarjeta que acompaña al scroll. */
.filtros {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  background: var(--base);
  box-shadow: var(--sombra-suave);
}
.filtros h2 { font-size: 1.05rem; margin-bottom: 1.25rem; color: var(--azul-noche); }
.filtros fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.filtros legend {
  font-family: var(--fuente-leyenda);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--azul-noche);
  padding: 0;
  margin-bottom: .5rem;
}
.filtros label { display: flex; align-items: flex-start; gap: .35rem; font-size: .92rem; font-weight: 400; margin-bottom: .2rem; cursor: pointer; }
.filtros-lista { max-height: 220px; overflow-y: auto; padding-right: .25rem; }
.filtros .btn-pequeno { width: 100%; }

.resultados { min-width: 0; }
/* Cabecera del listado: título, conteo y el aviso de filtros activos. */
.resultados-cabecera { margin-bottom: 1.75rem; }
.resultados-cabecera h1 { margin-bottom: .35rem; }
#conteo { margin: 0; font-family: var(--fuente-leyenda); color: var(--texto-cuerpo); }

/* ---------------------------------------------------------------------
   Mapa interactivo de postulantes
   --------------------------------------------------------------------- */
/*
 * Tarjeta del mapa. El mapa es lo que trae a un empleador a esta página, así
 * que ocupa el ancho completo y los pasos van debajo, no al costado.
 */
.mapa-tarjeta {
  background: var(--base);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--sombra-suave);
}
.mapa-tarjeta-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.mapa-tarjeta-cabecera h2 { margin-bottom: .15rem; }
.mapa-tarjeta-cabecera .leyenda { margin: 0; }
.mapa-total {
  margin: 0;
  font-family: var(--fuente-leyenda);
  color: var(--gris-medio);
  white-space: nowrap;
}
.mapa-total strong {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--mapa-3);
  margin-right: .25rem;
}

/* Filtros sobre el mapa: recolorean el mapa entero, así que responden
   "dónde hay gente de esta carrera" sin abrir región por región. */
.mapa-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gris-linea);
}
.mapa-filtros .campo { margin: 0; min-width: 200px; flex: 0 1 260px; }
.mapa-filtros .campo > label { font-size: .85rem; color: var(--gris-medio); }
.mapa-filtros [data-mapa-limpiar] { padding-bottom: .7rem; }

/*
 * Mapa a la izquierda con ancho fijo, panel a la derecha con el resto.
 * Como el mapa está limitado a 460px, al panel le quedan unos 600px: los
 * dos caben en pantalla y no hace falta desplazarse para ver los pasos.
 */
.mapa-modulo {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.mapa-lienzo { position: relative; min-width: 0; }

/*
 * El mapa es muy alto (1:1.46), así que se limita por ANCHO y no por alto:
 * a ancho completo mediría casi dos mil píxeles de alto. 460px de ancho dan
 * unos 670px de alto, que es el tamaño en el que las regiones pequeñas
 * —Tumbes, Moquegua, Callao— siguen siendo clicables.
 */
.mapa-peru {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  margin-inline: auto;
}
.mapa-peru path {
  fill: var(--mapa-0);
  stroke: var(--mapa-borde);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .15s ease;
}
.mapa-peru path.nivel-1 { fill: var(--mapa-1); }
.mapa-peru path.nivel-2 { fill: var(--mapa-2); }
.mapa-peru path.nivel-3 { fill: var(--mapa-3); }
.mapa-peru path:hover, .mapa-peru path.seleccionado { fill: var(--mapa-activo); }

.mapa-tooltip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  background: var(--azul-marino);
  color: #fff;
  font-family: var(--fuente-leyenda);
  font-size: .85rem;
  padding: .35rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
  display: none;
}
.mapa-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 1rem; font-family: var(--fuente-leyenda); font-size: .82rem; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.mapa-leyenda i { width: 16px; height: 16px; border: 1px solid var(--mapa-borde); display: inline-block; }

/*
 * El panel ya no es una tarjeta al costado sino la continuación del mapa:
 * separado por una línea y a todo el ancho de la tarjeta grande.
 */
/*
 * El panel es la columna derecha. Se limita su alto al del mapa y se le da
 * scroll propio: una región con 40 postulantes no debe estirar la tarjeta
 * ni descolocar el mapa de al lado.
 */
.mapa-panel {
  min-width: 0;              /* sin esto, un hijo ancho estira la columna del grid */
  overflow-wrap: break-word; /* la presentación y las habilidades son texto libre */
  max-height: 700px;
  overflow-y: auto;
  padding-right: .5rem;
}
.mapa-panel h3 { font-size: 1.2rem; overflow-wrap: break-word; margin-bottom: .75rem; }
.mapa-instruccion { color: var(--gris-medio); margin: 0 0 1rem; }
.mapa-acciones { margin: 0 0 1.25rem; }
.mapa-invitar { margin-top: 1.25rem; margin-bottom: 0; }
.mapa-invitar h4 { margin-bottom: .75rem; }
.mapa-invitar .campo { margin-bottom: .75rem; }

.mapa-panel .definiciones {
  grid-template-columns: max-content minmax(0, 1fr);
  max-width: 720px;
  margin-bottom: 1.25rem;
}
.mapa-panel .definiciones dt { color: var(--gris-medio); }
/*
 * En columnas: con 26 regiones o 20 carreras, una lista de una sola columna
 * obligaba a desplazarse en un panel estrecho. A todo el ancho caben varias
 * y se ven todas de golpe.
 */
.mapa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  column-gap: 2rem;
}
.mapa-lista li { border-bottom: 1px solid var(--gris-linea); }
.mapa-lista button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .6rem .2rem; font: inherit; color: var(--gris-texto);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.mapa-lista button:hover { color: var(--azul-marino); }
.mapa-lista .conteo { font-family: var(--fuente-leyenda); font-size: .85rem; color: var(--gris-medio); }
.mapa-volver { margin-bottom: .75rem; }

/* ---------------------------------------------------------------------
   Paneles (empleador / admin)
   --------------------------------------------------------------------- */
.panel-dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.admin-nav { background: var(--gris-suave); border-bottom: 1px solid var(--gris-linea); }
.admin-nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: .9rem 1.25rem; max-width: var(--ancho-max); margin-inline: auto; }
.admin-nav a { color: var(--gris-texto); text-decoration: none; font-size: .95rem; font-weight: 600; }
.admin-nav a:hover, .admin-nav a[aria-current="page"] { color: var(--verde-conecta); }

.resumen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.resumen-caja { border: 1px solid var(--gris-linea); border-radius: var(--radio-caja); padding: 1.25rem 1.5rem; }
.resumen-caja .cifra { font-family: var(--fuente-titulo); font-weight: 700; font-size: 2.2rem; color: var(--verde-conecta); line-height: 1; display: block; margin-bottom: .35rem; }
.resumen-caja ul { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .93rem; }
.resumen-caja li { margin-bottom: .3rem; }

/* ---------------------------------------------------------------------
   Gráfico de líneas
   Los colores de las series los pone el JS (paleta de datos validada);
   acá solo va el cromo: ejes, textos y tooltip, en los tokens del sitio.
   --------------------------------------------------------------------- */
.grafico-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-family: var(--fuente-leyenda);
  font-size: .88rem;
  color: var(--gris-texto);
}
.grafico-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.grafico-leyenda i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.grafico-leyenda button { margin-left: auto; }

.grafico-lienzo { position: relative; }
.grafico-lienzo svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Los textos del gráfico llevan tinta, nunca el color de su serie. */
.g-tick {
  font-family: var(--fuente-leyenda);
  font-size: 12px;
  fill: var(--gris-medio);
}
.g-directa {
  font-family: var(--fuente-cuerpo);
  font-size: 12px;
  font-weight: 600;
  fill: var(--gris-texto);
}

.grafico-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  background: var(--base);
  border: 1px solid var(--gris-linea);
  box-shadow: var(--sombra-panel);
  border-radius: 8px;
  padding: .55rem .7rem;
  font-family: var(--fuente-leyenda);
  font-size: .82rem;
  color: var(--gris-texto);
  white-space: nowrap;
  z-index: 5;
}
.grafico-tooltip strong { display: block; margin-bottom: .3rem; color: var(--azul-marino); }
.grafico-tooltip span { display: flex; align-items: center; gap: .4rem; }
.grafico-tooltip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.grafico [data-tabla] { margin-top: 1.25rem; }

.editor-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; border: 1px solid var(--gris-linea); border-bottom: 0; border-radius: 8px 8px 0 0; padding: .4rem; background: var(--gris-suave); }
.editor-toolbar button { font-family: var(--fuente-cuerpo); font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--gris-linea); background: #fff; border-radius: 6px; cursor: pointer; }
.editor-toolbar button:hover { background: var(--verde-conecta); color: #fff; border-color: var(--verde-conecta); }
.editor-area { border: 1px solid var(--gris-linea); border-radius: 0 0 8px 8px; min-height: 320px; padding: 1rem; overflow-y: auto; background: #fff; }
.editor-area:focus { outline: 2px solid var(--verde-conecta); outline-offset: -2px; }
.editor-area h1, .editor-area h2, .editor-area h3 { color: var(--azul-noche); }

.contenido-legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.contenido-legal h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.contenido-legal ul, .contenido-legal ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.contenido-legal li { margin-bottom: .4rem; }
/*
 * El contenido legal lo pega un admin desde el panel y sanitizarHTML() deja
 * pasar <table>. Sin esta regla saldría con los estilos por defecto del
 * navegador —sin bordes ni separación— en medio de un documento de texto.
 */
.contenido-legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.contenido-legal th, .contenido-legal td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--gris-linea);
  font-size: .95rem;
  vertical-align: top;
}
.contenido-legal th { background: var(--gris-suave); font-weight: 600; color: var(--azul-noche); }

.cargando-texto { color: var(--gris-medio); font-family: var(--fuente-leyenda); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /*
   * minmax(0, 1fr) y no 1fr: '1fr' equivale a 'minmax(auto, 1fr)', y ese
   * 'auto' impide que la columna baje del ancho mínimo de su contenido. Con
   * el mapa dentro, la columna crecía más que la pantalla y arrastraba a
   * toda la página: el mapa se cortaba a la derecha y el panel del menú
   * —position: fixed— se anclaba al borde de esa página ensanchada en vez
   * de al de la pantalla.
   */
  .panel-dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .mapa-modulo { grid-template-columns: minmax(0, 1fr); }
  .mapa-lienzo { min-width: 0; }
  /* Apilados, el panel deja de tener alto propio: limitarlo aquí obligaría
     a desplazarse dentro de un scroll metido en otro scroll. */
  .mapa-panel { max-height: none; overflow-y: visible; padding-right: 0;
                border-top: 1px solid var(--gris-linea); padding-top: 1.5rem; }
  .mapa-tarjeta { padding: 1.25rem; }
  .mapa-peru { max-height: 520px; margin-inline: auto; }
}

@media (max-width: 780px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  /* apilado y con la foto a 260px, el desfase se achica para no comérsela */
  .hero-media, .split-media { --desfase: 1rem; }
  .hero-media { order: -1; min-height: 260px; }
  .hero-copy { padding: 2rem 1.25rem; grid-template-rows: auto; }
  .hero-copy > .hero-bloque { grid-row: auto; }
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .hero-acciones .btn { width: 100%; text-align: center; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-media { min-height: 260px; order: -1; }
  .split.invertido .split-media { order: -1; }
  .split.invertido .split-copy { order: 0; }
  .split-copy { padding: 2rem 1.25rem; }
}

@media (max-width: 860px) {
  /* Apilados, la barra de filtros deja de ser pegajosa: si no, se comería
     la pantalla entera antes de llegar a la primera oferta. */
  .layout-ofertas { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem 1rem 3rem; }
  .filtros { position: static; max-height: none; padding: 1.25rem; }
  .filtros-lista { max-height: 190px; }
}

/* Menú hamburguesa */
@media (max-width: 600px) {
  .header-inner { padding: .75rem 1rem; gap: .75rem; }
  .brand { --arte-visible: 121px; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--gris-texto); font-size: 1.4rem; line-height: 1;
  }

  /* La burbuja se queda fuera del panel plegable: saber con qué cuenta
     estás no debería exigir abrir el menú. */
  .cuenta { order: 3; }
  .cuenta-boton { width: 44px; height: 44px; }
  .cuenta-menu { min-width: 208px; }

  .nav-pill {
    display: none;
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 60;
    width: min(280px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 1rem;
    border-radius: 18px;
    padding: 3.25rem 1.25rem 1.75rem;
    box-shadow: var(--sombra-panel);
  }
  .nav-pill.abierto { display: flex; }
  .nav-pill a { font-size: 1.05rem; }

  .nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: .75rem; right: .75rem;
    width: 44px; height: 44px;
    border-radius: 50%; border: 0; cursor: pointer;
    background: var(--gris-suave); color: var(--gris-texto);
    font-size: 1.3rem; line-height: 1;
  }

  .nav-fondo {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(17, 17, 17, .35);
  }

  .footer-inner { flex-direction: column; gap: 2rem; padding: 2rem 1.25rem; }
  .footer-col { min-width: 0; }
  .definiciones { grid-template-columns: 1fr; gap: .1rem 0; }
  .definiciones dd { margin-bottom: .6rem; }
}

@media (max-width: 380px) {
  .brand { --arte-visible: 104px; }
  .contenedor, .contenedor-angosto { padding: 0 1rem; }
}

@media print {
  .site-header, .site-footer, .admin-nav, .acciones { display: none; }
}