/* ============================================================
   FACITRABAJO.COM — HOJA DE ESTILOS PRINCIPAL
   ============================================================
   Archivo: css/style.css
   Proyecto: FaciTrabajo.com — Landing page pública
   Última actualización: Abril 2026

   FUENTES (cargadas en index.html via Google Fonts):
     · Sora       → títulos, headings, logo (pesos: 300 400 600 700 800)
     · Inter      → cuerpo de texto, botones, labels (pesos: 300 400 500 600)

   PALETA DE COLORES (tokens en :root — sección 01):
     · Naranja   #E8600A  → color principal, CTAs, highlights
     · Verde     #4A7C59  → color secundario, empresas, éxito
     · Crema     #F7F5F0  → fondo base (nunca usar blanco puro como fondo)
     · Tinta     #1E1E1E  → texto principal

   TABLA DE CONTENIDO:
     01. Reset & tokens CSS (variables globales)
     02. Tipografía (clases utilitarias)
     03. Layout (contenedor, grid)
     04. Botones
     05. Navbar
     06. Hero
     07. Trust bar
     08. Secciones (estilos comunes)
     09. Para quién (dual split)
     10. Cómo funciona
     11. Features / por qué FaciTrabajo
     12. Tabla comparativa
     13. Testimonios y stats
     14. Precios
     15. Cobertura regional
     16. FAQ
     17. CTA final
     18. Footer
     19. WhatsApp FAB & mobile sticky CTA
     20. Animaciones y scroll reveal
     21. Responsive (1024px → 768px → 480px)
     22. Utilidades
   ============================================================ */


/* ============================================================
   01. RESET & TOKENS
   Todos los colores, tipografías, sombras y radios se definen
   aquí como variables CSS. Para cambiar la paleta de marca,
   solo modificar este bloque.
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* — Naranja (color principal, CTAs) — */
  --orange:   #E8600A;
  --orange-l: #FF8B3E; /* hover states */
  --orange-p: #FFF0E6; /* fondos suaves, badges */

  /* — Verde (color secundario, empresas, éxito) — */
  --green:    #4A7C59;
  --green-l:  #7DAA8A; /* acentos suaves */
  --green-p:  #E8F4ED; /* fondos de badges positivos */

  /* — Neutros — */
  --cream:     #F7F5F0; /* fondo base de página */
  --cream-d:   #EDE9E2;
  --white:     #FFFFFF; /* superficies de tarjetas */
  --ink:       #1E1E1E; /* texto principal */
  --ink-s:     #2B2B2B; /* encabezados, fondos oscuros */
  --neutral:   #5A5A5A; /* texto de cuerpo */
  --neutral-l: #9A9A9A; /* texto secundario, placeholders */
  --neutral-p: #F0EEEA; /* separadores, fondos de tabla */

  /* — Tipografía — */
  --display: 'Sora', sans-serif;
  --body:    'Inter', sans-serif;

  /* — Border radius (escala fija) — */
  --r4:  4px;  /* tags */
  --r8:  8px;  /* botones, inputs */
  --r12: 12px; /* tarjetas pequeñas */
  --r16: 16px; /* tarjetas grandes */
  --r24: 24px; /* secciones destacadas */

  /* — Sombras — */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--body);
  background: var(--cream); /* fondo crema, nunca blanco puro */
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}
img    { display: block; max-width: 100%; }
a      { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--body); border: none; outline: none; }
ul     { list-style: none; }


/* ============================================================
   02. TIPOGRAFÍA
   Clases utilitarias para aplicar los estilos tipográficos
   definidos en el brandbook. Usar junto con elementos semánticos
   (h1, h2, p) — no reemplazarlos.
   ============================================================ */
.display    { font-family: var(--display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.heading    { font-family: var(--display); font-weight: 700; line-height: 1.2; }
.subheading { font-family: var(--display); font-weight: 600; line-height: 1.3; }
/* Labels de categoría: siempre uppercase con letter-spacing */
.label   { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.body-lg { font-size: 17px; line-height: 1.7; }
.body-md { font-size: 15px; line-height: 1.65; }
.body-sm { font-size: 13px; line-height: 1.55; }


/* ============================================================
   03. LAYOUT
   max-width: 1200px según brandbook (1280px máx recomendado).
   Márgenes: 64px desktop, 20px móvil.
   ============================================================ */
.container    { max-width: 1200px; margin: 0 auto; padding: 0 64px; }
.container-sm { max-width: 760px;  margin: 0 auto; padding: 0 32px; }

@media (max-width: 768px) {
  .container    { padding: 0 20px; }
  .container-sm { padding: 0 20px; }
}


/* ============================================================
   04. BOTONES
   Jerarquía visual: primary > secondary > ghost > white.
   Regla de marca: el naranja SOLO para la acción principal
   de cada pantalla (un solo botón primario por sección).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r8);
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Primario: naranja — acción principal */
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 2px 8px rgba(232,96,10,0.3); }
.btn-primary:hover  { background: #d4560a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,96,10,0.4); }
.btn-primary:active { transform: translateY(0); }

/* Secundario: verde outline */
.btn-secondary { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-secondary:hover { background: var(--green-p); transform: translateY(-1px); }

/* Ghost: neutro, para acciones terciarias */
.btn-ghost { background: transparent; color: var(--neutral); border: 1.5px solid rgba(0,0,0,0.12); }
.btn-ghost:hover { background: var(--neutral-p); }

/* White: para usar sobre fondos oscuros */
.btn-white { background: var(--white); color: var(--orange); box-shadow: var(--shadow-md); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Tamaños */
.btn-lg { padding: 15px 32px; font-size: 16px; border-radius: var(--r12); }
.btn-sm { padding: 8px 16px;  font-size: 13px; }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }

/* Flecha animada que acompaña CTAs */
.arrow { display: inline-block; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }


/* ============================================================
   05. NAVBAR
   Sticky con blur. Fondo crema semitransparente al inicio,
   agrega sombra al hacer scroll (clase .scrolled via JS).
   Logo: variante B del brandbook (isotipo + wordmark, sin tagline).
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(247,245,240,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.3s;
}
.navbar.scrolled { box-shadow: var(--shadow-sm); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.logo-wordmark { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; }
.logo-wordmark .faci    { color: var(--orange); }
.logo-wordmark .trabajo { color: var(--green); }
.logo-wordmark .dot     { color: var(--neutral-l); font-weight: 300; }

/* Links de navegación */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 8px 14px; border-radius: var(--r8); font-size: 14px; font-weight: 500; color: var(--neutral); transition: all 0.15s; }
.nav-link:hover  { color: var(--ink); background: rgba(0,0,0,0.04); }
.nav-link.active { color: var(--orange); } /* clase añadida por JS en scroll */

/* Botones de acción en navbar */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login { font-size: 14px; font-weight: 500; color: var(--neutral); padding: 8px 14px; border-radius: var(--r8); transition: all 0.15s; }
.nav-login:hover { color: var(--ink); background: rgba(0,0,0,0.04); }

/* Hamburger: visible solo en móvil (< 900px) */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; border-radius: var(--r8); transition: background 0.2s; }
.nav-hamburger:hover { background: rgba(0,0,0,0.04); }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.3s; }
/* Animación de X al abrir el menú (clase .open añadida por JS) */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links          { display: none; } /* se muestra en el menú móvil */
  .nav-hamburger      { display: flex; }
  .btn-sm.btn-primary { display: none; } /* el CTA aparece dentro del menú móvil */
}

/* Overlay del menú móvil */
.mobile-menu {
  display: none; /* .open lo convierte en flex via JS */
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--cream);
  z-index: 999;
  padding: 24px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu .nav-link      { font-size: 18px; padding: 14px 16px; color: var(--ink); }
.mobile-menu-divider        { height: 1px; background: rgba(0,0,0,0.08); margin: 12px 0; }
.mobile-menu-ctas           { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.mobile-menu-ctas .btn      { justify-content: center; width: 100%; }


/* ============================================================
   06. HERO
   Sección de pantalla completa con buscador, tabs candidato/
   empresa y tarjetas flotantes decorativas (solo desktop).
   Background: blobs SVG + grid sutil para profundidad visual.
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 68px; /* compensa la altura del navbar fijo */
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

/* Elementos decorativos de fondo (no interactivos) */
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-blob-1 {
  position: absolute; top: -10%; right: -5%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,96,10,0.08) 0%, transparent 65%);
}
.hero-blob-2 {
  position: absolute; bottom: -15%; left: -8%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,124,89,0.1) 0%, transparent 65%);
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}

.hero-content { position: relative; z-index: 1; padding: 80px 0 60px; }

/* Grid 2 columnas desktop: copy | tarjetas flotantes */
.hero-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* — Tabs candidato / empresa — */
.hero-tabs { display: flex; gap: 8px; margin-bottom: 28px; animation: fadeUp 0.6s 0.15s ease both; }
.hero-tab {
  padding: 10px 20px;
  border-radius: var(--r8);
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  border: 1.5px solid transparent;
  background: transparent;
}
/* Clases de estado gestionadas por switchHeroTab() en js/main.js */
.hero-tab.tab-candidates-active   { background: var(--orange); color: white; border-color: var(--orange); }
.hero-tab.tab-candidates-inactive { background: transparent;   color: var(--orange); border-color: var(--orange); }
.hero-tab.tab-companies-active    { background: var(--green);  color: white; border-color: var(--green); }
.hero-tab.tab-companies-inactive  { background: transparent;   color: var(--green); border-color: var(--green); }
.hero-tab.tab-companies-inactive:hover  { background: var(--green-p); }
.hero-tab.tab-candidates-inactive:hover { background: var(--orange-p); }

/* Eyebrow badge animado */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-p); border: 1px solid rgba(74,124,89,0.2);
  border-radius: 20px; padding: 6px 14px;
  margin-bottom: 24px;
  animation: fadeUp 0.6s ease both;
}
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s ease infinite; flex-shrink: 0; }
.hero-eyebrow span { font-size: 12px; font-weight: 600; color: var(--green); letter-spacing: 0.04em; }

/* H1: tamaño fluido entre 34px y 58px según viewport */
.hero-h1 {
  font-family: var(--display);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800; color: var(--ink);
  line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 20px;
  animation: fadeUp 0.6s 0.1s ease both;
}
/* Palabra de acento en naranja con subrayado decorativo */
.hero-h1 .accent { color: var(--orange); position: relative; display: inline-block; }
.hero-h1 .accent::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 3px; background: var(--orange); border-radius: 2px; opacity: 0.4;
}

.hero-subtitle {
  font-size: 17px; color: var(--neutral); line-height: 1.7;
  max-width: 480px; margin-bottom: 36px;
  animation: fadeUp 0.6s 0.2s ease both;
}

/* — Barra de búsqueda — */
/* En móvil (<768px) el layout cambia a vertical: ver sección 21. Responsive */
.hero-search {
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: var(--r12);
  padding: 6px 6px 6px 20px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-md);
  max-width: 540px; margin-bottom: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: fadeUp 0.6s 0.3s ease both;
}
.hero-search:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,96,10,0.1), var(--shadow-md);
}
.hero-search input {
  flex: 1; border: none; outline: none;
  font-size: 15px; font-family: var(--body); color: var(--ink);
  background: transparent; min-width: 0;
}
.hero-search input::placeholder { color: var(--neutral-l); }
.hero-search select {
  border: none; outline: none;
  font-size: 14px; font-family: var(--body); color: var(--neutral);
  background: transparent; cursor: pointer;
  padding: 0 4px; min-width: 0; max-width: 100px;
}
.hero-search-divider { width: 1px; height: 24px; background: rgba(0,0,0,0.1); flex-shrink: 0; }
.hero-search .btn-primary { border-radius: var(--r8); padding: 10px 20px; font-size: 14px; flex-shrink: 0; }

/* Tags de búsquedas populares */
.hero-search-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; animation: fadeUp 0.6s 0.4s ease both; }
.hero-search-meta span { font-size: 12px; color: var(--neutral-l); }
.hero-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-tag {
  font-size: 12px; font-weight: 500;
  color: var(--neutral); background: var(--white);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 20px; padding: 4px 10px;
  cursor: pointer; transition: all 0.15s;
}
.hero-tag:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-p); }

/* Tarjetas flotantes decorativas (columna derecha, solo desktop) */
.hero-visual { position: relative; height: 500px; animation: fadeIn 0.8s 0.4s ease both; }
.hero-card {
  background: var(--white); border-radius: var(--r16);
  box-shadow: var(--shadow-lg); padding: 20px;
  position: absolute; transition: transform 0.3s ease;
}
.hero-card:hover { transform: translateY(-4px); }

/* Tarjeta principal de vacante */
.hc-main { width: 300px; top: 40px; left: 0; animation: floatUp 3s ease-in-out infinite; }
.hc-main .company   { font-size: 10px; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.hc-main .job-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.hc-main .job-meta  { font-size: 12px; color: var(--neutral-l); margin-bottom: 14px; }
.hc-main .job-footer { display: flex; align-items: center; justify-content: space-between; }
.match-badge { background: var(--green-p); color: var(--green); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.apply-btn   { background: var(--orange); color: white; border-radius: var(--r8); padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: var(--body); }

/* Tarjeta de score de afinidad */
.hc-match { width: 200px; top: 0; right: 10px; animation: floatUp 3s 0.5s ease-in-out infinite; }
.hc-match .match-score { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--green); line-height: 1; }
.hc-match .match-label { font-size: 11px; color: var(--neutral-l); margin-bottom: 8px; }
.hc-match .match-bar   { height: 6px; background: var(--neutral-p); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
/* data-width en HTML controla el ancho final; JS anima desde 0 */
.hc-match .match-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--green-l)); border-radius: 3px; transition: width 1.2s ease; }
.hc-match .match-skill    { font-size: 11px; color: var(--neutral); display: flex; justify-content: space-between; }

/* Tarjeta de estado del pipeline */
.hc-pipeline { width: 220px; bottom: 80px; right: 0; animation: floatUp 3s 1s ease-in-out infinite; }
.hc-pipeline .pipe-title { font-size: 10px; font-weight: 600; color: var(--neutral-l); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.pipe-step  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pipe-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipe-dot.done    { background: var(--green); }
.pipe-dot.active  { background: var(--orange); }
.pipe-dot.pending { background: var(--neutral-p); border: 1.5px solid var(--neutral-l); }
.pipe-label        { font-size: 12px; color: var(--ink); }
.pipe-label.active { font-weight: 600; color: var(--orange); }
.pipe-label.done   { color: var(--neutral-l); text-decoration: line-through; }

/* Tarjeta de notificación */
.hc-notification { width: 240px; bottom: 20px; left: 20px; animation: floatUp 3s 1.5s ease-in-out infinite; }
.hc-notification .notif-icon    { width: 32px; height: 32px; border-radius: 50%; background: var(--orange-p); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hc-notification .notif-icon svg { width: 16px; height: 16px; color: var(--orange); }
.hc-notification .notif-content { flex: 1; }
.hc-notification .notif-title   { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.hc-notification .notif-sub     { font-size: 11px; color: var(--neutral-l); }
.notif-row { display: flex; align-items: center; gap: 10px; }

/* Stats del hero (3 columnas bajo el buscador) */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(0,0,0,0.08);
  border-radius: var(--r12); overflow: hidden;
  margin-top: 24px;
  animation: fadeUp 0.6s 0.5s ease both;
}
.hero-stat { background: var(--white); padding: 18px 20px; }
.hero-stat-num { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.hero-stat-num .stat-accent { color: var(--orange); }
.hero-stat-label { font-size: 12px; color: var(--neutral-l); }


/* ============================================================
   07. TRUST BAR
   Marquee infinito sobre fondo oscuro con logos/keywords de
   la plataforma. El HTML duplica los ítems para el loop.
   Para ajustar velocidad: cambiar duración en @keyframes marquee.
   ============================================================ */
.trust-bar { background: var(--ink-s); padding: 14px 0; overflow: hidden; }
/* animation-duration en @keyframes marquee — más alto = más lento */
.trust-bar-inner { display: flex; align-items: center; gap: 48px; white-space: nowrap; animation: marquee 25s linear infinite; }
.trust-item  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.trust-item span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); }
.trust-dot   { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.trust-highlight { color: var(--orange) !important; font-weight: 700 !important; }


/* ============================================================
   08. SECCIONES — ESTILOS COMUNES
   Sistema de headings consistente para todas las secciones.
   .section-title usa clamp() para tamaño de fuente fluido.
   ============================================================ */
.section    { padding: 100px 0; }
.section-sm { padding: 64px 0; }

/* Eyebrow: línea naranja + texto uppercase antes del título */
.section-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.section-eyebrow span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.section-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--orange); border-radius: 1px; }

/* Título fluido entre 26px (móvil) y 42px (desktop) */
.section-title    { font-family: var(--display); font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; }
.section-subtitle { font-size: 17px; color: var(--neutral); line-height: 1.7; max-width: 560px; }

.section-header { margin-bottom: 56px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-eyebrow  { justify-content: center; }
.section-header.centered .section-subtitle { margin: 0 auto; }


/* ============================================================
   09. PARA QUIÉN — DUAL SPLIT
   Dos tarjetas de pantalla completa: naranja para candidatos,
   verde para empresas. En móvil se apilan verticalmente.
   ============================================================ */
.for-who { padding: 80px 0; }
.for-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.for-who-card {
  border-radius: var(--r24); padding: 48px;
  position: relative; overflow: hidden;
  cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
}
.for-who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.for-who-card.candidates { background: var(--orange); }
.for-who-card.companies  { background: var(--green); }

.for-who-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.2); border-radius: 20px; padding: 5px 12px; margin-bottom: 20px; }
.for-who-badge span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: white; }

.for-who-card h3 { font-family: var(--display); font-size: clamp(22px, 2.5vw, 28px); font-weight: 800; color: white; line-height: 1.2; margin-bottom: 12px; }
.for-who-card p  { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.65; margin-bottom: 28px; max-width: 340px; }

.for-who-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.for-who-item { display: flex; align-items: center; gap: 10px; }
.for-who-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.for-who-check svg { width: 10px; height: 10px; color: white; }
.for-who-item span { font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 500; }

.for-who-cta { display: inline-flex; align-items: center; gap: 8px; background: white; border-radius: var(--r8); padding: 12px 24px; font-size: 15px; font-weight: 700; transition: all 0.2s; }
.for-who-card.candidates .for-who-cta { color: var(--orange); }
.for-who-card.companies  .for-who-cta { color: var(--green); }
.for-who-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Círculos decorativos de fondo */
.for-who-bg-circle   { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.06); right: -80px; bottom: -80px; pointer-events: none; }
.for-who-bg-circle-2 { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.04); right: 40px;  bottom: 60px;  pointer-events: none; }


/* ============================================================
   10. CÓMO FUNCIONA
   3 pasos en grid. Tabs para candidatos/empresas controladas
   por switchHiwTab() en js/main.js.
   Los conectores entre pasos (.hiw-connector) se ocultan en móvil.
   ============================================================ */
.how-it-works { background: var(--white); }

.hiw-tabs { display: flex; gap: 4px; background: var(--neutral-p); border-radius: var(--r12); padding: 4px; margin-bottom: 56px; max-width: 400px; }
.hiw-tab  { flex: 1; padding: 10px; border-radius: var(--r8); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.2s; color: var(--neutral); background: transparent; }
.hiw-tab.active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }

.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hiw-step  { position: relative; }

.hiw-step-number { width: 48px; height: 48px; border-radius: var(--r12); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 20px; font-weight: 800; margin-bottom: 20px; position: relative; }
.hiw-step-number.orange { background: var(--orange-p); color: var(--orange); }
.hiw-step-number.green  { background: var(--green-p);  color: var(--green); }

.hiw-connector { position: absolute; top: 24px; left: calc(100% + 16px); width: calc(100% - 32px); height: 1px; background: rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; }
.hiw-connector::after { content: '→'; font-size: 12px; color: var(--neutral-l); background: var(--white); padding: 0 4px; }
.hiw-step:last-child .hiw-connector { display: none; }

.hiw-step h4 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.hiw-step p  { font-size: 14px; color: var(--neutral); line-height: 1.6; }
.hiw-step .hiw-time { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--green); }
.hiw-time svg { width: 12px; height: 12px; }


/* ============================================================
   11. FEATURES / POR QUÉ FACITRABAJO
   Grid 3 columnas. La primera tarjeta ocupa 2 cols
   (.feature-highlight). En móvil todo pasa a 1 columna.
   ============================================================ */
.features { background: var(--cream); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.feature-card { background: var(--white); border-radius: var(--r16); padding: 32px; border: 1px solid rgba(0,0,0,0.06); transition: all 0.3s; }
.feature-card:hover { border-color: rgba(232,96,10,0.2); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.feature-icon { width: 48px; height: 48px; border-radius: var(--r12); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.feature-icon.orange { background: var(--orange-p); }
.feature-icon.green  { background: var(--green-p); }
.feature-icon svg    { width: 22px; height: 22px; }
.feature-icon.orange svg { color: var(--orange); }
.feature-icon.green  svg { color: var(--green); }

.feature-card h4 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.feature-card p  { font-size: 14px; color: var(--neutral); line-height: 1.6; }

.feature-tag  { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.feature-tag.ai    { background: var(--orange-p); color: var(--orange); }
.feature-tag.legal { background: var(--green-p);  color: var(--green); }
.feature-tag.free  { background: rgba(0,0,0,0.04); color: var(--neutral); }

/* Tarjeta grande de Smart Matching (ocupa 2 columnas) */
.feature-highlight { grid-column: span 2; background: var(--ink-s); border-radius: var(--r16); padding: 40px; overflow: hidden; position: relative; border: none; }
.feature-highlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.feature-highlight h4 { font-family: var(--display); font-size: 22px; font-weight: 800; color: white; margin-bottom: 10px; }
.feature-highlight p  { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.65; max-width: 400px; margin-bottom: 24px; }

.feature-highlight-visual { position: absolute; right: 32px; bottom: 0; width: 220px; }
.kanban-preview   { display: flex; gap: 8px; }
.kanban-col       { flex: 1; background: rgba(255,255,255,0.06); border-radius: var(--r8); padding: 10px; }
.kanban-col-title { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.kanban-chip      { background: rgba(255,255,255,0.1); border-radius: var(--r4); padding: 6px 8px; margin-bottom: 6px; }
.kanban-chip .name  { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.8); }
.kanban-chip .score { font-size: 9px; color: var(--green-l); }
.kanban-chip.active-chip { background: rgba(232,96,10,0.3); border: 1px solid rgba(232,96,10,0.4); }


/* ============================================================
   12. TABLA COMPARATIVA
   Muestra ventajas vs bolsas locales y plataformas globales.
   overflow-x: auto permite scroll horizontal en móvil.
   min-width en la tabla evita colapso de columnas.
   ============================================================ */
.comparison { background: var(--white); padding: 100px 0; }

.comparison-table-wrap {
  overflow-x: auto; /* scroll horizontal en pantallas pequeñas */
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r16);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: var(--shadow-md);
}
.comparison-table { width: 100%; border-collapse: collapse; min-width: 600px; }

.comparison-table thead th {
  padding: 20px 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  text-align: left;
}
.comparison-table thead th:first-child { color: var(--neutral-l); background: var(--cream); width: 38%; }
.comparison-table thead th.col-faci    { background: var(--ink-s); color: var(--orange); text-align: center; }
.comparison-table thead th.col-local   { background: var(--cream); color: var(--neutral); text-align: center; }
.comparison-table thead th.col-global  { background: var(--cream); color: var(--neutral); text-align: center; }

.comparison-table .faci-header-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.comparison-table .faci-badge        { background: var(--orange); color: white; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-top: 2px; }

.comparison-table tbody tr            { border-bottom: 1px solid rgba(0,0,0,0.05); }
.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover td   { background: var(--cream); }

.comparison-table td { padding: 16px 24px; font-size: 14px; color: var(--ink); vertical-align: middle; }
.comparison-table td:first-child { font-weight: 500; color: var(--neutral); }
.comparison-table td.col-faci    { background: rgba(43,43,43,0.03); text-align: center; }
.comparison-table td.col-local   { text-align: center; color: var(--neutral-l); }
.comparison-table td.col-global  { text-align: center; color: var(--neutral-l); }
.comparison-table tbody tr:hover td.col-faci { background: rgba(232,96,10,0.04); }

/* Íconos de resultado: verde=sí, gris=no, amber=parcial */
.check-yes     { color: var(--green);     font-size: 18px; font-weight: 700; }
.check-no      { color: var(--neutral-l); font-size: 18px; }
.check-partial { color: #E89D3A; font-size: 13px; font-weight: 600; }

.comparison-cta  { text-align: center; margin-top: 40px; }
.comparison-note { font-size: 13px; color: var(--neutral-l); margin-top: 12px; }


/* ============================================================
   13. TESTIMONIOS Y STATS
   ============================================================ */
.testimonials { background: var(--white); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.testimonial-card { background: var(--cream); border-radius: var(--r16); padding: 28px; position: relative; }
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-stars span { color: var(--orange); font-size: 16px; }
.testimonial-text { font-size: 15px; color: var(--ink); line-height: 1.65; margin-bottom: 20px; font-style: italic; }
.testimonial-text::before { content: '\201C'; font-size: 32px; color: var(--orange); line-height: 0; vertical-align: -12px; margin-right: 3px; font-family: Georgia, serif; }

.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 14px; font-weight: 700; color: white; flex-shrink: 0; }
.testimonial-name   { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.testimonial-role   { font-size: 12px; color: var(--neutral-l); }
.testimonial-badge  { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.testimonial-badge.candidate { background: var(--orange-p); color: var(--orange); }
.testimonial-badge.company   { background: var(--green-p);  color: var(--green); }

/* Stats oscuras — 4 columnas */
.stats-section { background: var(--ink-s); padding: 80px 0; }
.stats-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); }
.stat-item     { background: var(--ink-s); padding: 40px 32px; text-align: center; }
/* data-target y data-suffix activan animación de contador en js/main.js */
.stat-number   { font-family: var(--display); font-size: 42px; font-weight: 800; color: white; line-height: 1; margin-bottom: 6px; }
.stat-number .orange { color: var(--orange); }
.stat-number .green  { color: var(--green-l); }
.stat-label { font-size: 14px; color: rgba(255,255,255,0.5); }


/* ============================================================
   14. PRECIOS
   Toggle mensual/anual actualiza precios via togglePricing()
   en js/main.js. .featured resalta el plan con borde naranja.
   ============================================================ */
.pricing { background: var(--cream); }

.pricing-toggle { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 48px; }
.pricing-toggle span { font-size: 14px; font-weight: 500; color: var(--neutral); }
.toggle-switch { width: 44px; height: 24px; background: var(--green); border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle-switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.toggle-switch.annual::after { transform: translateX(20px); } /* estado activo = anual */
.toggle-save { background: var(--orange-p); color: var(--orange); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }

.pricing-card { background: var(--white); border-radius: var(--r16); padding: 36px; border: 1.5px solid rgba(0,0,0,0.07); position: relative; transition: all 0.3s; }
.pricing-card:hover    { border-color: var(--orange); box-shadow: var(--shadow-md); }
.pricing-card.featured { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,96,10,0.08); }

.pricing-popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orange); color: white; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 20px; white-space: nowrap; }

.pricing-type.candidate { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; color: var(--orange); }
.pricing-type.company   { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; color: var(--green); }
.pricing-name { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }

.pricing-price          { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.pricing-price .amount  { font-family: var(--display); font-size: 38px; font-weight: 800; color: var(--ink); line-height: 1; }
.pricing-price .currency { font-size: 18px; font-weight: 600; color: var(--neutral); margin-top: 6px; }
.pricing-price .period  { font-size: 14px; color: var(--neutral-l); }
.pricing-price-free     { font-family: var(--display); font-size: 38px; font-weight: 800; color: var(--green); margin-bottom: 6px; }

.pricing-description { font-size: 13px; color: var(--neutral-l); margin-bottom: 24px; line-height: 1.5; }
.pricing-divider     { height: 1px; background: rgba(0,0,0,0.06); margin-bottom: 24px; }
.pricing-features    { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.pricing-feature { display: flex; align-items: flex-start; gap: 10px; }
.pricing-feature-check     { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pricing-feature-check.yes { background: var(--green-p); }
.pricing-feature-check.no  { background: var(--neutral-p); }
.pricing-feature-check svg      { width: 10px; height: 10px; }
.pricing-feature-check.yes svg  { color: var(--green); }
.pricing-feature-check.no  svg  { color: var(--neutral-l); }
.pricing-feature span       { font-size: 14px; color: var(--ink); line-height: 1.4; }
.pricing-feature span.muted { color: var(--neutral-l); }

.pricing-cta { width: 100%; padding: 14px; border-radius: var(--r8); font-size: 15px; font-weight: 700; font-family: var(--body); text-align: center; transition: all 0.2s; display: block; cursor: pointer; }
.pricing-cta.primary-cta   { background: var(--orange); color: white; }
.pricing-cta.primary-cta:hover { background: #d4560a; transform: translateY(-1px); }
.pricing-cta.secondary-cta { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.pricing-cta.secondary-cta:hover { background: var(--green-p); }
.pricing-cta.ghost-cta     { background: transparent; color: var(--neutral); border: 1.5px solid rgba(0,0,0,0.12); }
.pricing-cta.ghost-cta:hover { background: var(--neutral-p); }

.pricing-trial-note { text-align: center; font-size: 13px; color: var(--neutral-l); margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pricing-trial-note svg { width: 14px; height: 14px; color: var(--green); }


/* ============================================================
   15. COBERTURA REGIONAL
   6 banderas en grid. Tablet: 3 cols. Móvil: 2 cols.
   ============================================================ */
.regional { background: var(--white); }
.countries-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.country-card { background: var(--cream); border-radius: var(--r12); padding: 20px 14px; text-align: center; border: 1.5px solid transparent; transition: all 0.2s; cursor: default; }
.country-card:hover { border-color: var(--orange); background: var(--orange-p); }
.country-flag     { font-size: 32px; margin-bottom: 8px; }
.country-name     { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.country-currency { font-size: 11px; color: var(--neutral-l); }

.regional-features { margin-top: 40px; background: var(--cream); border-radius: var(--r16); padding: 32px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.regional-feature-title { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.regional-feature-text  { font-size: 14px; color: var(--neutral); line-height: 1.6; }


/* ============================================================
   16. FAQ
   Acordeón: max-height animado de 0 a 200px.
   Clase .open añadida por toggleFaq() en js/main.js.
   Solo un ítem puede estar abierto a la vez.
   ============================================================ */
.faq { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.faq-item { background: var(--white); border-radius: var(--r12); overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.faq-question { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.15s; }
.faq-question:hover { background: var(--cream); }
.faq-question span  { font-size: 15px; font-weight: 600; color: var(--ink); padding-right: 16px; }

.faq-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--neutral-p); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.faq-icon svg { width: 12px; height: 12px; color: var(--neutral); transition: transform 0.2s; }
.faq-item.open .faq-icon     { background: var(--orange-p); }
.faq-item.open .faq-icon svg { color: var(--orange); transform: rotate(45deg); } /* + → × */

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; }
.faq-answer p { padding: 0 24px 20px; font-size: 14px; color: var(--neutral); line-height: 1.65; }
.faq-item.open .faq-answer { max-height: 200px; }


/* ============================================================
   17. CTA FINAL
   Sección oscura con blobs de color. Incluye formulario de
   email para captura rápida de leads + dos botones duales.
   ============================================================ */
.cta-final { background: var(--ink-s); padding: 100px 0; position: relative; overflow: hidden; }
.cta-final-bg  { position: absolute; inset: 0; pointer-events: none; }
.cta-bg-blob-1 { position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(232,96,10,0.15), transparent 65%); }
.cta-bg-blob-2 { position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(74,124,89,0.15), transparent 65%); }

.cta-final-content { position: relative; z-index: 1; text-align: center; max-width: 700px; margin: 0 auto; }
.cta-final h2      { font-family: var(--display); font-size: clamp(30px, 4vw, 48px); font-weight: 800; color: white; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; }
.cta-final h2 span { color: var(--orange); }
.cta-final p       { font-size: 17px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 40px; }

/* Formulario de captura de email */
.cta-email-row {
  display: flex; gap: 8px;
  max-width: 480px; margin: 0 auto 32px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r12);
  padding: 6px 6px 6px 20px;
}
.cta-email-row input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; font-family: var(--body); color: white; min-width: 0; }
.cta-email-row input::placeholder { color: rgba(255,255,255,0.4); }
.cta-email-row:focus-within { border-color: var(--orange); background: rgba(255,255,255,0.1); }

/* Separador visual "o" entre form y botones */
.cta-or { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: rgba(255,255,255,0.2); font-size: 13px; }
.cta-or::before, .cta-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }

.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.cta-trust { margin-top: 24px; font-size: 13px; color: rgba(255,255,255,0.35); display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-trust-item { display: flex; align-items: center; gap: 5px; }
.cta-trust-item svg { width: 14px; height: 14px; color: var(--green-l); }


/* ============================================================
   18. FOOTER
   Grid 4 columnas → 2 cols tablet → 1 col móvil.
   ============================================================ */
.footer { background: var(--ink); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }

.footer-logo-area { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo-mark { width: 32px; height: 32px; }
.footer-logo-text { font-family: var(--display); font-size: 18px; font-weight: 800; }
.footer-logo-text .faci    { color: var(--orange); }
.footer-logo-text .trabajo { color: var(--green-l); }
.footer-logo-text .dot     { color: rgba(255,255,255,0.25); font-weight: 300; }

.footer-tagline   { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.6; max-width: 260px; margin-bottom: 20px; }
.footer-countries { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.footer-flag { font-size: 16px; }

.footer-social { display: flex; gap: 8px; }
.footer-social-link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: rgba(255,255,255,0.5); }
.footer-social-link:hover { background: rgba(255,255,255,0.12); color: white; }
.footer-social-link svg { width: 16px; height: 16px; }

.footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-link  { font-size: 14px; color: rgba(255,255,255,0.5); transition: color 0.15s; }
.footer-link:hover { color: rgba(255,255,255,0.9); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-copyright { font-size: 13px; color: rgba(255,255,255,0.25); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,0.25); transition: color 0.15s; }
.footer-legal a:hover { color: rgba(255,255,255,0.6); }


/* ============================================================
   19. WHATSAPP FAB & MOBILE STICKY CTA
   WhatsApp es crítico para el mercado CA (70%+ de comunicación
   comercial ocurre por este canal).
   La sticky CTA se oculta automáticamente cuando el usuario
   llega a la sección #registro (ver js/main.js).
   ============================================================ */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  background: #25D366; color: white;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
.whatsapp-fab svg { width: 28px; height: 28px; }

/* Barra fija en la parte inferior del viewport en móvil */
.mobile-sticky-cta {
  display: none; /* visible solo en móvil, ver media query abajo */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: var(--white);
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 12px 20px; gap: 10px;
}
@media (max-width: 768px) {
  .mobile-sticky-cta { display: flex; }
  .mobile-sticky-cta .btn { flex: 1; justify-content: center; padding: 12px 16px; font-size: 14px; }
  /* Subir WhatsApp para no quedar detrás de la sticky CTA */
  .whatsapp-fab { bottom: 80px; right: 16px; width: 48px; height: 48px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
}


/* ============================================================
   20. ANIMACIONES Y SCROLL REVEAL
   .reveal: estado inicial invisible (opacity 0 + translateY).
   La clase .visible la añade el IntersectionObserver en main.js.
   .reveal-delay-N: retraso escalonado para efectos en cascada.
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Flotación suave para las tarjetas del hero */
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
/* Pulso del dot verde en el eyebrow del hero */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}
/* Marquee de la trust bar — ajustar duración para velocidad */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% porque el HTML duplica los ítems */
}

.reveal         { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }


/* ============================================================
   21. RESPONSIVE
   Tres breakpoints:
     · ≤1024px → tablet horizontal
     · ≤768px  → tablet vertical / móvil grande
     · ≤480px  → móvil pequeño
   ============================================================ */

/* — Tablet (≤1024px) — */
@media (max-width: 1024px) {
  .hero-grid-layout  { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual       { display: none; } /* tarjetas flotantes ocultas en tablet */
  .hero-content      { padding: 64px 0 40px; }
  .for-who-grid      { grid-template-columns: 1fr; }
  .features-grid     { grid-template-columns: 1fr 1fr; }
  .feature-highlight { grid-column: span 2; }
  .pricing-grid      { grid-template-columns: 1fr 1fr; }
  .footer-grid       { grid-template-columns: 1fr 1fr; gap: 32px; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid        { grid-template-columns: repeat(2, 1fr); }
  .comparison-table thead th:first-child { width: 32%; }
}

/* — Móvil grande / tablet vertical (≤768px) — */
@media (max-width: 768px) {
  .section    { padding: 64px 0; }
  .for-who    { padding: 48px 0; }
  .for-who-card    { padding: 32px 24px; }
  .for-who-card h3 { font-size: 22px; }

  .hiw-steps { grid-template-columns: 1fr; gap: 24px; }
  .hiw-connector { display: none; } /* sin conectores en layout de 1 columna */

  .features-grid          { grid-template-columns: 1fr; }
  .feature-highlight      { grid-column: span 1; }
  .feature-highlight-visual { display: none; } /* preview kanban oculto */

  .pricing-grid      { grid-template-columns: 1fr; }
  .countries-grid    { grid-template-columns: repeat(3, 1fr); }
  .faq-grid          { grid-template-columns: 1fr; }
  .hero-stats        { grid-template-columns: 1fr 1fr; }
  .footer-grid       { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .regional-features { grid-template-columns: 1fr; padding: 24px; }
  .stats-grid        { grid-template-columns: repeat(2, 1fr); }
  .hero-subtitle     { font-size: 16px; }

  /* Buscador en layout vertical */
  .hero-search        { flex-wrap: wrap; padding: 12px; }
  .hero-search input  { width: 100%; order: 1; }
  .hero-search-divider { display: none; order: 2; }
  .hero-search select {
    order: 3; border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--r8); padding: 8px 10px;
    background: var(--cream); width: 100%;
  }
  .hero-search .btn-primary { order: 4; width: 100%; justify-content: center; margin-top: 4px; }

  /* CTA final en columna */
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn  { width: 100%; justify-content: center; }
  .cta-email-row { flex-direction: column; padding: 12px; }
  .cta-email-row input { padding: 8px 0; }
  .cta-email-row .btn  { width: 100%; justify-content: center; }

  .comparison-table td,
  .comparison-table thead th { padding: 12px 16px; font-size: 13px; }
}

/* — Móvil pequeño (≤480px) — */
@media (max-width: 480px) {
  .hero-stats    { grid-template-columns: repeat(3, 1fr); }
  .hero-stat-num { font-size: 20px; }
  .countries-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-tabs { gap: 6px; }
  .hero-tab  { padding: 8px 14px; font-size: 13px; }
  .for-who-card { padding: 28px 20px; }
  .stats-grid   { grid-template-columns: 1fr 1fr; }
  .stat-number  { font-size: 32px; }
  .hiw-tab      { font-size: 13px; }
  .section-title { letter-spacing: -0.01em; }
}


/* ============================================================
   22. UTILIDADES
   ============================================================ */
.text-orange { color: var(--orange); }
.text-green  { color: var(--green); }
.fw-bold     { font-weight: 700; }
.mt-4        { margin-top: 16px; }
/* Accesibilidad: contenido solo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }