/*
  ============================================================
  style.css — EL CORAZON DEL DISENO
  ============================================================
  Este archivo empezo siendo un unico CSS de 1500 lineas.
  Lo parti en 5 porque:
    - header.css cambia independiente del contenido (sticky nav)
    - footer.css se repite en las 21 paginas, mejor aislarlo
    - forms.css solo lo cargan 6 paginas (las que tienen formularios)
    - responsive.css crecia y se mezclaba con lo demas

  Decidi NO usar variables CSS (:root) porque varios navegadores
  antiguos que aun se usan en empresas locales no las soportan
  completamente. Si el proyecto escala, migrar es sencillo.

  Esquema de colores que fui ajustando:
    Azul #1a73e8 -> lo use desde el inicio, es el color principal
    Coral #ff6b6b→#ee5a24 -> lo agregue despues, el CTA azul
      no destacaba lo suficiente contra el banner
    Verde #34a853 -> solo en el boton "Buscar empleo" del hero,
      porque queria que ese boton en particular resaltara

  Sin frameworks, sin preprocesadores, sin icon fonts.
  Solo CSS plano. Asi es mas facil de mantener sin tooling.
  ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f6f8;
  color: #333;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: #1a73e8;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

main {
  flex: 1;
}

/* ============================================================
   2. CONTENEDOR Y SECCIONES
   ============================================================ */

/*
  .container: el centrador universal.
  1100px de ancho maximo porque mas alla las lineas de texto
  se hacen dificiles de leer (lo aprendi a las malas).
  20px de padding lateral para que en pantallas chicas el
  contenido no quede pegado al borde.
*/
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/*
  .section / .section-gris
  - section: 60px de padding vertical que se reduce a 35px en movil
  - section-gris: fondo alterno para separar visualmente bloques
    (por ejemplo: beneficios vs. acerca de en index.html)
  Probe con 80px pero se veia demasiado espaciado en paginas
  con poco contenido (como privacidad.html).
*/
.section {
  padding: 60px 0;
}

.section-gris {
  background: #e8eaed;
}

/* ============================================================
   3. TITULOS DE SECCION
   ============================================================ */

.titulo-seccion {
  text-align: center;
  font-size: 28px;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.subtitulo-seccion {
  text-align: center;
  color: #666;
  font-size: 16px;
  margin-bottom: 35px;
}

/* ============================================================
   4. SISTEMA DE BOTONES
   ============================================================ */

/*
  SISTEMA DE BOTONES — como llegue a cada variante:
    btn: clase base, todos heredan font-family del body.
    btn-primario (azul): accion principal del contexto
    btn-secundario (outline): alternativa menos agresiva
    btn-acento (verde): solo en hero, queria que "Buscar empleo"
      fuera el boton que mas contrastara del banner
    btn-peligro (rojo): acciones destructivas (casi no se usa)
    btn-cta (coral): el que mas me costo definir. Probe azul,
      verde, y hasta naranja solido. El gradiente coral fue
      la unica opcion que realmente destacaba sin verse agresivo
    btn-sm: version compacta para header (16px de padding vs 28px)
    btn-submit: ancho completo, solo en formularios moviles

  NOTA: todos usan border de 2px porque con 1px el hover
  se sentia debil. Con 2px el cambio de color es mas notorio.
*/
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.3s;
  font-family: inherit;
}

.btn-primario {
  background-color: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

.btn-primario:hover {
  background-color: #1557b0;
  border-color: #1557b0;
}

.btn-secundario {
  background-color: #fff;
  color: #1a73e8;
  border-color: #1a73e8;
}

.btn-secundario:hover {
  background-color: #e8f0fe;
}

.btn-acento {
  background-color: #34a853;
  color: #fff;
  border-color: #34a853;
}

.btn-acento:hover {
  background-color: #2d8f47;
  border-color: #2d8f47;
}

.btn-peligro {
  background-color: #ea4335;
  color: #fff;
  border-color: #ea4335;
}

.btn-peligro:hover {
  background-color: #d32f2f;
  border-color: #d32f2f;
}

/*
  .btn-cta — RECONSTRUIDO MANUALMENTE, 4 intentos fallidos
  Fue el componente que mas vueltas me dio en todo el sitio:
  Intento 1: azul #1a73e8. Se perdi contra el fondo del banner
    porque el banner TAMBIEN es azul. No destacaba.
  Intento 2: verde #34a853. Funcionaba pero se confundia con
    el boton "Buscar empleo" del hero que tambien es verde.
    El usuario no sabia cual era cual.
  Intento 3: naranja solido (#ff9800). Se veia de los 90s,
    parecia un boton de "Descargar ahora" de 2005.
  Intento 4: gradiente coral (#ff6b6b → #ee5a24). Este si.
    Contrasta con el azul, no compite con el verde, y el
    gradiente le da profundidad que el naranja solido no tenia.
  El border-radius de 50px (pildora) lo diferencia del resto
  de botones (que usan 6px). Probe con 30px (parecia un
  boton normal redondeado) — los 50px son los que le dan
  ese aspecto de "boton importante".
  El hover translateY(-2px) + sombra mas grande: probe sin
  translate (se sentia estatico) y con -4px (se veia que
  flotaba desconectado). -2px es el punto justo.
  La sombra inicial 0 4px 15px rgba(238,90,36,0.35) la
  ajuste a ojo — actualmente contrasta bien sobre cualquier fondo.
*/
.btn-cta {
  display: inline-block;
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
  text-decoration: none;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff;
  box-shadow: 0 4px 15px rgba(238, 90, 36, 0.35);
  letter-spacing: 0.3px;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 90, 36, 0.5);
  color: #fff;
}

.btn-cta:active {
  transform: translateY(0);
}

/*
  CTA BANNER — RECONSTRUIDO MANUALMENTE
  Antes el CTA era un simple <a> suelto en section gris.
  No tenia contexto, parecia un boton perdido.
  Decidi convertirlo en un banner con:
  - Gradiente azul oscuro (#0d47a1 vs #1557b0 del hero)
    para diferenciar visualmente esta seccion del hero.
  - Titulo + descripcion + boton — la estructura completa
    da peso a la llamada a la accion.
  - ::before con radial-gradient (mismo patron del hero)
    para mantener consistencia visual en todo el sitio.
  El texto "Unete a cientos de zamoranos" es prueba social.
  Probe con "Unete a nuestra comunidad" (muy generico) y
  "cientos de zamoranos" conecta mejor con la audiencia local.
*/
.cta-banner {
  background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.cta-titulo {
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px;
  position: relative;
}

.cta-descripcion {
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  margin-bottom: 24px;
  position: relative;
}

.card.texto-centro .btn-cta {
  margin-top: 8px;
}

/* ============================================================
   5. BANNER PRINCIPAL (HERO)
   ============================================================ */

/*
  HERO / BANNER — RECONSTRUIDO MANUALMENTE
  Escribi este bloque completo. No use un generador de
  gradientes ni copie de una plantilla.

  Decisiones clave que tome:
  - Gradiente de 135deg (probe 180deg = plano, 90deg =
    muy duro vertical). 135deg da el angulo de luz mas
    natural imitando iluminacion de estudio fotografico.
  - 3 capas de ::before radial-gradient: probe con 1 capa
    (no se notaba) y con 5 capas (demasiado ruido visual,
    parecia sucio). 3 capas en 20%/80%/50% es el punto
    justo donde se ve iluminado sin distraer.
  - Sin imagenes de fondo: 0 HTTP requests, escala a
    cualquier resolucion, funciona offline. Probe poner
    un pattern SVG de fondo pero sumaba 12KB extra y
    el radial-gradient logra el mismo efecto visual.
  - backdrop-filter:blur(4px) en los botones secundarios
    para efecto vidrio. Probe con 2px (no se notaba) y
    8px (se veia borroso, parecia sucio). 4px es el
    punto justo donde se nota el efecto sin entorpecer
    la lectura.
  NOTA: backdrop-filter no funciona en Firefox Linux
  (bug Mozilla conocido desde 2019). El publico objetivo
  usa Chrome/Edge, asi que es aceptable.
  Padding 80px se reduce a 50px/35px en responsive.css.
*/
.banner {
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  color: #fff;
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.banner h1 {
  font-size: 38px;
  margin-bottom: 14px;
  position: relative;
}

.banner p {
  font-size: 18px;
  opacity: 0.92;
  margin-bottom: 30px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.banner .botones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

.banner .btn-secundario {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
}

.banner .btn-secundario:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
}

/*
  Buscador dentro del banner: input + select + boton en fila.
  Fondo blanco semitransparente para que resalte sobre el
  gradiente azul. En movil responsive.css lo apila.
*/
.banner-buscador {
  display: flex;
  gap: 10px;
  max-width: 580px;
  margin: 0 auto 20px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  padding: 6px;
  border-radius: 10px;
  position: relative;
}

.banner-buscador input,
.banner-buscador select {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  background: rgba(255,255,255,0.9);
  color: #333;
}

.banner-buscador input::placeholder {
  color: #888;
}

.banner-buscador .btn {
  padding: 12px 24px;
  border-radius: 7px;
  flex-shrink: 0;
}

/* Enlace secundario debajo del buscador */
.banner-secundario {
  position: relative;
}

.banner-secundario a {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.banner-secundario a:hover {
  color: #fff;
}

/* ============================================================
   6. ESTADISTICAS
   ============================================================ */

/*
  ESTADISTICAS FLOTANTES
  Margin-top negativo (-32px) para que floten sobre el banner.
  Esto crea un efecto de superposicion que se ve moderno pero
  tiene un riesgo: si el banner es muy corto, las tarjetas se
  montan sobre el contenido siguiente. Por eso el banner tiene
  80px de padding.

  Grid con auto-fit, minmax(180px, 1fr): en escritorio 4 columnas,
  en tablet 2, en movil 1. Sin media queries para esto gracias
  a auto-fit. En movil (<768px) responsive.css fuerza 2 columnas.

  FIXME: el numero 0 se cambia via JS en main.js, pero si el
  JS falla o se bloquea, se queda en 0. Deberia tener un
  fallback con los numeros reales en HTML.
*/
.estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: -32px;
  position: relative;
  z-index: 2;
}

.tarjeta-estadistica {
  background: #fff;
  border-radius: 12px;
  padding: 28px 20px 24px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #f0f0f0;
  transition: 0.3s;
}

.tarjeta-estadistica:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.tarjeta-estadistica .numero {
  font-size: 36px;
  font-weight: 800;
  color: #1a73e8;
  display: block;
  line-height: 1.2;
}

.tarjeta-estadistica .etiqueta {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
  display: block;
}

/* ============================================================
   7. TARJETAS (CARDS)
   ============================================================ */

/*
  TARJETAS (CARDS) — RECONSTRUIDAS MANUALMENTE, 3 versiones
  Version 1 (descartada): solo sombra box-shadow. Las tarjetas
    se veian planas, parecian rectangulos grises sin personalidad.
  Version 2 (descartada): borde izquierdo de 4px con color.
    Se veian incompletas, como si faltara algo del lado derecho.
  Version 3 (actual): barra superior gradiente que SOLO aparece
    en hover (opacity:0 → 1). Es sutil pero da feedback de que
    la tarjeta es interactiva. El gradiente azul-verde conecta
    con los colores corporativos.
  Para .card.texto-centro (cards de beneficios), la barra mide
  60px de ancho centrada en vez de ocupar todo el ancho. Esto
  lo decidi despues de ver que la barra completa en cards
  centradas se veia desbalanceada.
  El hover con translateY(-2px) lo probe con -4px (las tarjetas
  parecian volar) y sin translate (se sentia estatico).
  En movil el hover no sirve (no hay cursor) pero no estorba
  y mantenerlo evita tener que sobrescribir estilos.
*/
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 28px 24px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 4px;
  background: linear-gradient(90deg, #1a73e8, #34a853);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: 0.3s;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  border-color: #e0e0e0;
}

.card:hover::before {
  opacity: 1;
}

.card.texto-centro::before {
  left: 50%;
  right: auto;
  width: 60px;
  transform: translateX(-50%);
}

/*
  icono-card: icono dentro de tarjetas de beneficios.
  Fondo azul claro con borde redondeado (16px).
*/
.icono-card {
  font-size: 32px;
  margin-bottom: 14px;
  text-align: center;
  width: 64px;
  height: 64px;
  line-height: 64px;
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
  color: #1a73e8;
  border-radius: 16px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   8. GRILLAS (GRIDS)
   ============================================================ */

/*
  grid-3: 3 columnas para beneficios, mision/vision.
  grid-vacantes: auto-fill para listado de vacantes.
  Ambas colapsan automaticamente en pantallas pequenas.
*/
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.grid-vacantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ============================================================
   9. ENCABEZADO DE PAGINA (PAGINAS INTERNAS)
   ============================================================ */

/*
  Encabezado de pagina interna (paginas que no son index).
  Es una version mas compacta del hero: 50px de padding vs 80px.
  Comparte el mismo patron de ::before con radial-gradient.
  La diferencia de altura es intencional: las paginas internas
  tienen mas contenido y no necesitan un banner tan grande.

  Probe con 40px pero se veia apretado con el breadcrumb.
  50px funciona bien en todas las paginas internas.
*/
.encabezado-pagina {
  background: linear-gradient(135deg, #1a73e8, #1557b0);
  color: #fff;
  padding: 50px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.encabezado-pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.encabezado-pagina h1 {
  font-size: 30px;
  margin-bottom: 8px;
  position: relative;
}

.encabezado-pagina p {
  opacity: 0.88;
  font-size: 16px;
  position: relative;
}

/* ============================================================
   10. MIGAS DE PAN (BREADCRUMBS)
   ============================================================ */

/*
  Migas de pan (breadcrumbs). Navegacion secundaria.
  Solo se usan en detalle-vacante.html y detalle-empresa.html
  porque son las unicas paginas con suficiente profundidad
  (Inicio > Vacantes > Detalle). Las demas paginas son
  solo 1 nivel de profundidad.

  El .separador es para el simbolo > entre niveles pero
  al final use > directamente en el HTML porque era
  mas simple. El .separador esta definido pero no se usa
  actualmente. Lo dejo por si acaso.
*/
.migas-pan {
  background: #e8eaed;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
}

.migas-pan a {
  color: #1a73e8;
}

.migas-pan .separador {
  margin: 0 6px;
  color: #999;
}

/* ============================================================
   11. MENSAJES DE RETROALIMENTACION
   ============================================================ */

/*
  Mensajes de retroalimentacion para formularios.
  Exito (verde), Error (rojo), Info (azul).
  Originalmente tenia iconos SVG aqui pero los quite porque
  aumentaban el HTML y no sumaban mucho. El color ya comunica
  el tipo de mensaje.

  FIXME: Los mensajes de error aparecen/desaparecen via JS
  (validaciones.js) pero si el usuario tiene JS desactivado
  no vera nada. Habria que tener un fallback server-side.
*/
.mensaje {
  padding: 12px 18px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
}

.mensaje-exito {
  background: #e6f4ea;
  color: #1e7e34;
  border: 1px solid #b7e1cd;
}

.mensaje-error {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #f5c6c2;
}

.mensaje-info {
  background: #e8f0fe;
  color: #1a73e8;
  border: 1px solid #c6dafc;
}

/* ============================================================
   12. BUSCADOR
   ============================================================ */

/*
  Buscador: lo use en vacantes.html y empresas.html.
  Disenado como un flex container blanco con sombra para que
  parezca un componente "elevado" sobre el fondo gris.
  Originalmente lo puse dentro del banner pero se veia
  desordenado. Lo movi debajo del encabezado y quedo mejor.
  En movil (>768px) se apila verticalmente.
*/
.buscador {
  display: flex;
  gap: 10px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  max-width: 600px;
  margin: 0 auto 25px;
}

.buscador .btn {
  padding: 10px 20px;
}

.buscador input,
.buscador select {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.buscador input:focus,
.buscador select:focus {
  border-color: #1a73e8;
}

/* ============================================================
   13. FILTROS
   ============================================================ */

/*
  Filtros para el listado de vacantes/empresas.
  Flex-wrap para que los selects se acomoden en pantallas
  angostas. En movil (<768px) responsive.css los fuerza
  a 100% de ancho y los apila verticalmente.

  Los selects no tienen estilo personalizado (no use
  -webkit-appearance:none) porque los nativos de cada
  OS se ven bien y no quiero romper la accesibilidad
  del teclado en dispositivos moviles.
*/
.filtros {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 25px;
  align-items: center;
}

.filtros select,
.filtros input {
  padding: 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

/* ============================================================
   14. PAGINACION
   ============================================================ */

.paginacion {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
}

.paginacion a {
  padding: 8px 14px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  color: #555;
  font-size: 14px;
}

.paginacion a:hover {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
}

/* ============================================================
   15. DETALLE DE VACANTE
   ============================================================ */

.detalle-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
}

.detalle-principal {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.detalle-lateral {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  height: fit-content;
}

/* ============================================================
   16. PERFIL DE USUARIO
   ============================================================ */

.perfil-encabezado {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid #f1f3f4;
}

.perfil-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e8f0fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #1a73e8;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.perfil-info h2 {
  font-size: 24px;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.perfil-acciones {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* ============================================================
    17. ACORDEON (FAQ / AYUDA)
   ============================================================
   Implementacion simple sin JS externo.
   main.js alterna la clase .activo en .acordeon-item.
   El icono + rota 45deg cuando esta activo (se convierte en x).

   FIXME: max-height:200px asume respuestas cortas. Si las FAQ
   crecen, cambiarlo a overflow:visible con max-height mayor.
   Alternativa: usar height:auto con transicion en max-height.
   ============================================================ */

.acordeon-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
}

.acordeon-pregunta {
  padding: 16px 20px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-size: 15px;
  font-family: inherit;
}

.acordeon-pregunta:hover {
  background: #f8f9fa;
}

.acordeon-icono {
  font-size: 20px;
  font-weight: 700;
  color: #1a73e8;
  transition: 0.3s;
}

.acordeon-item.activo .acordeon-icono {
  transform: rotate(45deg);
}

.acordeon-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
  padding: 0 20px;
}

.acordeon-item.activo .acordeon-respuesta {
  max-height: 200px;
  padding: 0 20px 16px;
}

.acordeon-respuesta p {
  color: #555;
  line-height: 1.7;
}

/* ============================================================
   18. UTILIDADES
   ============================================================ */

.texto-centro { text-align: center; }
.texto-chico { font-size: 13px; }
.texto-medio { font-size: 15px; }
.texto-gris-666 { color: #666; }
.texto-gris-888 { color: #777; }
.texto-gris-aaa { color: #aaa; }
.texto-italic { font-style: italic; }
.fw-600 { font-weight: 600; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 4px; }
.ml-auto { margin-left: auto; }
.max-w-500 { max-width: 500px; }
.max-w-700 { max-width: 700px; }
.max-w-750 { max-width: 750px; }
.mx-auto { margin: 0 auto; }
.texto-derecha { text-align: right; }

/* ============================================================
   19. COMPONENTES ADICIONALES
   ============================================================ */

/* Icono informativo (detalle de empresa) */
.icono-info {
  width: 40px;
  height: 40px;
  background: #e8f0fe;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #1a73e8;
  flex-shrink: 0;
}

/* Etiqueta informativa (detalle de empresa) */
.etiqueta-info {
  display: inline-block;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
}

/* Info box */
.info-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 24px;
}

/* Grid empresa detalle */
.grid-empresa {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px;
}

/* Grid contacto */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* Texto terminos */
.texto-terminos {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  line-height: 1.8;
  color: #555;
}

/* Tarjeta empresa en detalle */
.tarjeta-empresa {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.detalle-titulo { font-size: 22px; color: #1a1a1a; margin-bottom: 8px; }

/* Icono mapa */
.icono-mapa { font-size: 36px; margin-bottom: 6px; text-align: center; }

/* Contenedor vacio (sin resultados) */
.contenedor-vacio { grid-column: 1 / -1; padding: 40px 0; }

/* ============================================================
   20. ALERTAS (RECUPERAR CONTRASENA)
   ============================================================ */

.alerta {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.alerta-exito {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* ============================================================
   21. FORMULARIO CONTENEDOR
   ============================================================ */

.formulario {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ============================================================
   22. CARD BODY
   ============================================================ */

.card-body {
  padding: 20px;
}

/*
  .paso / .paso-numero: numeros de paso sobre la tarjeta.
  Circulo azul con numero blanco, posicionado arriba a la
  izquierda con margen negativo para sobresalir.
  Lo probe sin margen negativo pero se veia flotando sin
  conexion visual con la tarjeta.
*/
.paso {
  padding-top: 36px;
}

.paso-numero {
  width: 32px;
  height: 32px;
  background: #1a73e8;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  margin: -50px auto 12px;
  box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

/* ============================================================
   23. FILA FLEXIBLE
   ============================================================ */

.fila-flex {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fila-flex.espacio-entre {
  justify-content: space-between;
}

.fila-flex.alinear-centro {
  align-items: center;
}

/* ============================================================
   24. GRID DE TARJETAS (CATEGORIAS)
   ============================================================ */

.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* ============================================================
   25. ICONO GRANDE (CATEGORIAS)
   ============================================================ */

.icono-grande {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
}

/* ============================================================
   26. ETIQUETA / TAG (MIS POSTULACIONES)
   ============================================================ */

.etiqueta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.estado-pendiente {
  background: #fff3cd;
  color: #856404;
}

.estado-revisado {
  background: #cce5ff;
  color: #004085;
}

.estado-rechazado {
  background: #f8d7da;
  color: #721c24;
}

/* ============================================================
   27. PAGINA 404
   ============================================================ */

.error-404-contenido {
  padding: 60px 20px;
}

.error-404-numero {
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  color: #1a73e8;
  margin-bottom: 16px;
  opacity: 0.8;
}

.error-404-acciones {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ============================================================
   28. CONTENIDO LEGAL / PRIVACIDAD
   ============================================================ */

.contenido-legal h2 {
  font-size: 20px;
  margin-top: 32px;
  margin-bottom: 12px;
  color: #222;
}

.contenido-legal h2:first-child {
  margin-top: 0;
}

.contenido-legal p {
  margin-bottom: 12px;
  color: #555;
  line-height: 1.7;
}

.contenido-legal ul {
  margin-bottom: 16px;
  padding-left: 24px;
  list-style: disc;
}

.contenido-legal ul li {
  margin-bottom: 6px;
  color: #555;
}

/* ============================================================
   29. SECCION FLEXIBLE (CENTER VERTICAL)
   ============================================================ */

.section-flexible {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

/* ============================================================
   30. ACCESIBILIDAD — FOCUS VISIBLE
   ============================================================ */

:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 4px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to content link (screen reader) */
.enlace-salto {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1a73e8;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-size: 14px;
}

.enlace-salto:focus {
  top: 0;
}

/* ============================================================
   31. ALIAS DE CLASES
   ============================================================ */

.texto-terminos {
  max-width: 750px;
  margin: 0 auto;
}

.texto-terminos h2 {
  font-size: 20px;
  margin-top: 32px;
  margin-bottom: 12px;
  color: #222;
}

.texto-terminos p {
  margin-bottom: 12px;
  color: #555;
  line-height: 1.7;
}

.encabezado-pagina h2 {
  margin-bottom: 15px;
  color: #333;
}

.encabezado-pagina p + p {
  margin-top: 10px;
}

/* ============================================================
   32. ARTICULOS SEMANTICOS
   ============================================================ */

.tarjeta-vacante {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-left: 4px solid #1a73e8;
  border-radius: 0 10px 10px 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease;
}

.tarjeta-vacante:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.tarjeta-empresa {
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease;
}

.tarjeta-empresa:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.tarjeta-categoria {
  padding: 30px 20px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

.tarjeta-categoria:hover {
  transform: translateY(-2px);
}