/* =============================================================================
   ft-2026.css — FlexigoTech · rediseño 2026
   -----------------------------------------------------------------------------
   Hoja NUEVA. No sustituye a styles.css ni a blog.css: se enlaza SIEMPRE la
   ÚLTIMA (después de blog.css y después del <style> local de cada página).

   Reglas de la casa:
   · Todas las clases nuevas llevan prefijo  .ft-
   · Se apoya en las variables que ya existen (--odoo-purple, --font-mono,
     --container, --border-light…) con fallback, porque no todas las páginas
     cargan styles.css: index.html lleva <style> local, partners.html carga
     styles.css dos veces, y las páginas-puerta van cada una por su lado.
   · !important sólo en el bloque CABECERA y en el bloque NEUTRALIZAR, donde es
     inevitable: la cabecera compite contra un <style> local lleno de
     !important y contra el <style id="ft-responsive-fixes"> que main.js
     inyecta en <body> en tiempo de ejecución (y que, por ir después, gana a
     igualdad de especificidad). Por eso esos dos bloques escalan a #header.
   · Mobile first: el estado base es el de móvil; se crece con min-width.

   Índice
     00  Tokens
     01  Neutralizar la plantilla (sombras, 3D, marquesina, gradientes)
     02  Tipografía y utilidades de texto
     03  Retícula y secciones
     04  Botones y enlaces
     05  CABECERA de 8 entradas (sustituye al parche <style id="ft-nav-fix">)
     06  Pie
     07  Hero 7/5 + captura + sello de partner
     08  Barra de enrutado (quién eres)
     09  Retícula de servicios
     10  Muro de módulos del App Store
     11  Banda de logos de conectores
     12  Tira de capturas de backend
     13  Tarjetas técnicas, tiles y listas
     14  Cifras con unidad
     15  Chips de público
     16  Diagrama de tres cajas (página de fabricante)
     17  Cierre
     18  FAQ (restilo, el HTML y el JS no se tocan)
     19  Accesibilidad, movimiento reducido e impresión
   ========================================================================== */


/* =============================================================================
   00 · TOKENS
   Un solo acento: el morado de Odoo. El oro queda EXCLUSIVAMENTE para el
   "Tech" del logotipo, así que aquí no se usa como color de interfaz.
   ========================================================================== */
:root {
  /* Superficie */
  --ft-bg:            #FFFFFF;
  --ft-panel:         #F7F8FA;
  --ft-panel-odoo:    #F6F2F5;

  /* Tinta */
  --ft-ink:           #0C0D14;
  --ft-text:          #505768;
  --ft-muted:         #79808F;

  /* Línea */
  --ft-line:          #E6E9F0;
  --ft-line-strong:   #CBD5E1;

  /* Acento único — reutiliza --odoo-purple, ya declarado y hoy sin usar */
  --ft-accent:        var(--odoo-purple, #714B67);
  --ft-accent-ink:    #5B3C53;
  --ft-accent-wash:   rgba(113, 75, 103, .08);

  /* Tipografías ya cargadas por la página */
  --ft-sans: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --ft-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);

  /* Métrica */
  --ft-container: var(--container, 1200px);
  --ft-gutter: 24px;
  --ft-pad-x: 20px;          /* móvil */
  --ft-sec-y: 48px;          /* móvil */
  --ft-radius: 8px;
  --ft-radius-sm: 4px;
  --ft-header-h: 72px;          /* una barra + hamburguesa */
  --ft-measure: 62ch;
  --ft-t: .16s ease;
}

@media (min-width: 900px) {
  :root { --ft-pad-x: 32px; --ft-sec-y: 72px; }
}

/* A partir de 1120px la cabecera pasa a dos alturas: 56px + 43px + hairline */
@media (min-width: 1120px) {
  :root { --ft-header-h: 100px; }
}


/* =============================================================================
   01 · NEUTRALIZAR LA PLANTILLA
   Lo que hace que la página parezca plantilla de 2019: rotación 3D del hero,
   marquesina infinita de logos, translateY(-4px)+sombra en todas las tarjetas,
   gradientes y glows. Se apaga aquí, sin tocar el HTML.
   Sólo afecta a las páginas que enlazan esta hoja.
   ========================================================================== */

/* Hero: fuera perspectiva, rotación y drop-shadow azul */
.hero-visual { perspective: none !important; }
.hero-3d-scene {
  transform: none !important;
  filter: none !important;
  transition: none !important;
  max-width: 100% !important;
}
.hero-3d-scene:hover { transform: none !important; }

/* Marquesina de logos: se congela y se convierte en fila estática */
.marquee-wrap {
  width: 100% !important;
  animation: none !important;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: center;
}
.marquee-content { width: auto !important; gap: 40px; flex-wrap: wrap; justify-content: center; }
.marquee-content + .marquee-content { display: none !important; }

/* Tarjetas que flotan todas igual: se aplanan */
.service-card,
.metric-card,
.ft-door,
.ft-line,
.ft-post,
.ft-proof-item {
  box-shadow: none !important;
  border-radius: var(--ft-radius) !important;
  border-color: var(--ft-line) !important;
  transition: border-color var(--ft-t) !important;
}
.service-card:hover,
.metric-card:hover,
.ft-door:hover,
.ft-line:hover,
.ft-post:hover,
.ft-proof-item:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--ft-accent) !important;
}

/* Gradientes, glows y burbujas radiales */
.cta-box-sleek { background: var(--ft-ink) !important; box-shadow: none !important; border-radius: var(--ft-radius) !important; }
.cta-box-sleek::before,
.cta-box-sleek::after { display: none !important; }
.tech-highlight-sec::before { display: none !important; }
.cw-btn {
  background: var(--ft-accent) !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
.cw-btn:hover { transform: none !important; box-shadow: none !important; background: var(--ft-accent-ink) !important; }
.cw-popup { border-radius: var(--ft-radius) !important; box-shadow: 0 12px 32px rgba(12,13,20,.12) !important; }
.cw-popup-head { background: var(--ft-ink) !important; }

/* El contenedor del sitio y el de index dejan de ir por libre */
.container { max-width: var(--ft-container); padding-left: var(--ft-pad-x); padding-right: var(--ft-pad-x); }


/* =============================================================================
   02 · TIPOGRAFÍA Y UTILIDADES DE TEXTO
   La monoespaciada es LA señal técnica: cejas, etiquetas, versiones, pies.
   ========================================================================== */

/* Ceja monoespaciada — el marcador de sección */
.ft-eyebrow {
  display: block;
  font-family: var(--ft-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-accent);
  margin: 0 0 14px;
}
.ft-eyebrow--muted { color: var(--ft-muted); }

/* Etiqueta monoespaciada suelta (versiones, «EN PILOTO», pies de captura) */
.ft-tag {
  display: inline-block;
  font-family: var(--ft-mono);
  font-size: 11px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-muted);
}
.ft-tag--accent { color: var(--ft-accent); }
.ft-tag--box {
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-sm);
  padding: 3px 8px;
  background: var(--ft-bg);
  color: var(--ft-text);
}
.ft-tag--pilot { border-color: var(--ft-line-strong); color: var(--ft-ink); }

/* Versiones escritas como versiones: 19.0 · 18.0 · 17.0 */
.ft-versions {
  font-family: var(--ft-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ft-text);
  white-space: nowrap;
}

/* Titulares */
.ft-h1 {
  font-family: var(--ft-sans);
  font-weight: 800;
  font-size: clamp(30px, 7.4vw, 38px);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--ft-ink);
  margin: 0;
  text-wrap: balance;
}
.ft-h2 {
  font-family: var(--ft-sans);
  font-weight: 800;
  font-size: clamp(24px, 5.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ft-ink);
  margin: 0;
  text-wrap: balance;
}
.ft-h3 {
  font-family: var(--ft-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ft-ink);
  margin: 0;
}
.ft-h4 {
  font-family: var(--ft-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ft-ink);
  margin: 0;
}

.ft-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ft-text);
  margin: 0;
  max-width: 60ch;
}
.ft-body   { font-size: 16px; line-height: 1.6; color: var(--ft-text); margin: 0; max-width: var(--ft-measure); }
.ft-small  { font-size: 14px; line-height: 1.55; color: var(--ft-text); margin: 0; max-width: var(--ft-measure); }
.ft-micro  { font-size: 13px; line-height: 1.5; color: var(--ft-muted); margin: 0; }

.ft-strong { color: var(--ft-ink); font-weight: 700; }
.ft-nowrap { white-space: nowrap; }

@media (min-width: 900px) {
  .ft-h1   { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.05; }
  .ft-h2   { font-size: clamp(28px, 3.1vw, 36px); }
  .ft-lead { font-size: 18px; }
  .ft-eyebrow { font-size: 12px; }
}


/* =============================================================================
   03 · RETÍCULA Y SECCIONES
   12 columnas, gutter 24px, contenedor 1200. Las cabeceras de sección se
   alinean a la IZQUIERDA con la columna 1 — nada de max-width 640px centrado.
   Separación por hairline a ancho completo, no por alternado de fondos.
   ========================================================================== */

.ft-wrap {
  width: 100%;
  max-width: var(--ft-container);
  margin-inline: auto;
  padding-inline: var(--ft-pad-x);
}
.ft-wrap--narrow { max-width: 820px; }

.ft-sec {
  padding-block: var(--ft-sec-y);
  background: var(--ft-bg);
  border-top: 1px solid var(--ft-line);
}
.ft-sec--first { border-top: 0; }
.ft-sec--flush { border-top: 0; padding-top: 0; }
.ft-sec--tight { padding-block: calc(var(--ft-sec-y) * .6); }

/* Las DOS únicas bandas tintadas de la home */
.ft-sec--odoo  { background: var(--ft-panel-odoo); }
.ft-sec--close { background: var(--ft-panel); }

/* Cabecera de sección, alineada a la izquierda */
.ft-sec-head { margin-bottom: 32px; }
.ft-sec-head .ft-lead { margin-top: 12px; }
.ft-sec-head--split { display: grid; gap: 16px; }

@media (min-width: 900px) {
  .ft-sec-head { margin-bottom: 40px; }
  .ft-sec-head--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ft-gutter);
    align-items: end;
  }
}

/* Rejilla de 12 columnas por si una página necesita colocar a mano */
.ft-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ft-gutter);
}
@media (min-width: 700px)  { .ft-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ft-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Hairline suelta, a ancho de contenedor */
.ft-rule { height: 1px; background: var(--ft-line); border: 0; margin: 0; }


/* =============================================================================
   04 · BOTONES Y ENLACES
   Aplanados: radius 6px, sin sombra, primario morado.
   ========================================================================== */

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ft-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ft-t), border-color var(--ft-t), color var(--ft-t);
}
.ft-btn--primary { background: var(--ft-accent); color: #fff; }
.ft-btn--primary:hover { background: var(--ft-accent-ink); color: #fff; }
.ft-btn--ghost {
  background: var(--ft-bg);
  color: var(--ft-ink);
  border-color: var(--ft-line-strong);
}
.ft-btn--ghost:hover { border-color: var(--ft-accent); color: var(--ft-accent); }

/* Los botones que ya existen en el HTML, aplanados a la misma receta */
.btn-primary {
  background: var(--ft-accent);
  border-radius: 6px;
  box-shadow: none;
}
.btn-primary:hover { background: var(--ft-accent-ink); }
.btn-secondary { border-radius: 6px; box-shadow: none; border-color: var(--ft-line-strong); }
.btn-secondary:hover { border-color: var(--ft-accent); color: var(--ft-accent); background: var(--ft-bg); }

/* Enlace con flecha: lo único que se mueve en toda la página */
.ft-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ft-accent);
  transition: gap var(--ft-t);
}
.ft-arrow::after { content: "\2192"; font-family: var(--ft-sans); }
.ft-arrow:hover { gap: 12px; color: var(--ft-accent-ink); }
.ft-arrow--out::after { content: "\2197"; }
.ft-arrow--sm { font-size: 13px; }

/* .link-arrow ya existe y se comporta bien: sólo cambia de color */
.link-arrow { color: var(--ft-accent); }
.link-arrow:hover { color: var(--ft-accent-ink); }

/* Sub-enlaces en línea, en monoespaciada (Implantación · Conectores · …) */
.ft-sublinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--ft-mono);
  font-size: 12px;
  letter-spacing: .02em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-sublinks a { color: var(--ft-text); border-bottom: 1px solid var(--ft-line-strong); padding-bottom: 1px; }
.ft-sublinks a:hover { color: var(--ft-accent); border-bottom-color: var(--ft-accent); }
.ft-sublinks .ft-sep { color: var(--ft-line-strong); }


/* =============================================================================
   05 · CABECERA DE 8 ENTRADAS — DOS ALTURAS
   -----------------------------------------------------------------------------
   Sustituye al parche <style id="ft-nav-fix"> que hoy se repite página a página.

   El HTML y los enlaces NO se tocan. Lo que hay realmente en la cabecera no son
   sólo los 7 enlaces + botón del HTML: shop.js inyecta en .header-actions, en
   tiempo de ejecución, un bloque .ft-headicons con «Probar demo» + cuenta +
   carrito (226px medidos), y al lado va el selector de tres idiomas (88px).

   La cuenta, medida en navegador y no estimada — suma real de los anchos de los
   8 enlaces, no el ancho de la caja .nav, que engaña porque flex la encoge y el
   desbordamiento se va hacia la IZQUIERDA, por debajo del logotipo, sin que
   scrollWidth lo denuncie:

     enlaces a 12px/pad 8   es 1004 · ca 1021 · en  993
     enlaces a 13px/pad 11  es 1113 · ca 1131 · en 1102
     logotipo 134 · idiomas 88 · ft-headicons 226 · huecos 32 · padding 64

   En una sola fila la cabecera pediría ~1460px. Es decir: NO cabe en ningún
   portátil. Por eso el parche actual acaba partiendo el menú en dos alturas
   dentro de los 80px, con letra de 12px apretada.

   Solución: dos alturas DE VERDAD, no un wrap accidental.
     · Fila 1 (56px): logotipo a la izquierda; idiomas, demo, cuenta y carrito
       a la derecha.
     · Fila 2 (44px): los 8 enlaces, a ancho completo y alineados a la columna 1
       de la rejilla de 1200 (de ahí el margin-left negativo: compensa el
       padding del enlace para que el TEXTO caiga sobre la columna, no la caja).
   Con la fila para él solo el menú dispone de 1136px útiles y entra a 13px con
   ~50px de holgura en catalán, que es la traducción más larga de las tres.
   Cabecera de 100px, hairline entre alturas y otra abajo. Cero sombra, cero
   blur: la cabecera se separa por línea, como el resto de la página.

   Por debajo de 1120px: una sola barra de 72px y hamburguesa a pantalla
   completa, con destinos de 16px y separadores de 1px.

   Por qué #header y por qué !important: el <style> local de cada página declara
   .header{...!important} y .header.scrolled .nav-link{...!important}; main.js
   inyecta en <body> un <style id="ft-responsive-fixes"> con .nav.open{...
   !important}; y shop.js inyecta en <head> un <style id="ft-shop-css"> con el
   estilo de .ft-demobtn/.ft-icn. Todos van DESPUÉS de esta hoja, así que a
   igualdad de especificidad ganan ellos. Escalando a #header (1,x,0) gana ésta,
   porque la especificidad se evalúa antes que el orden. Es la única forma de
   retirar el parche sin editar HTML ni JS.
   ========================================================================== */

#header.header,
#header.header.scrolled {
  height: var(--ft-header-h) !important;
  background: var(--ft-bg) !important;
  border-bottom: 1px solid var(--ft-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#header .header-inner {
  max-width: var(--ft-container) !important;
  padding-inline: var(--ft-pad-x) !important;
  gap: 12px !important;
  height: 100% !important;
}

#header .logo { flex: 0 0 auto !important; min-width: 0 !important; }
/* El logotipo no se deja aplastar: sin esto, en móvil el ancho de los iconos de
   shop.js le come sitio y el lettering «FlexigoTech» se recorta hasta el icono. */
#header .logo img { height: 28px !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; }

/* Pantallas estrechas: se compacta todo lo accesorio antes que el logotipo */
@media (max-width: 519px) {
  #header .header-inner { gap: 8px !important; }
  #header .logo img { height: 24px !important; }
  #header .lang-selector { padding: 1px !important; }
  #header .lang-opt { font-size: 10px !important; padding: 4px 5px !important; }
  #header .ft-headicons { gap: 6px !important; margin-left: 0 !important; }
  #header .ft-demobtn { padding: 8px 10px !important; }
  #header .ft-icn { width: 30px !important; height: 30px !important; }
}

/* --- Bloque inyectado por shop.js: demo + cuenta + carrito --------------- */
#header .ft-headicons { gap: 8px !important; margin-left: 4px !important; }
#header .ft-demobtn {
  background: var(--ft-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 15px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
#header .ft-demobtn:hover { background: var(--ft-accent-ink) !important; color: #fff !important; transform: none !important; }
#header .ft-icn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  border: 1px solid var(--ft-line) !important;
  background: var(--ft-bg) !important;
  color: var(--ft-ink) !important;
}
#header .ft-icn:hover { background: var(--ft-panel) !important; color: var(--ft-accent) !important; border-color: var(--ft-accent) !important; }
#header .ft-icn svg { width: 17px !important; height: 17px !important; }
#header .ft-cartcount { background: var(--ft-accent) !important; font-family: var(--ft-mono) !important; font-weight: 500 !important; }

/* --- Estado base (< 1120px): una barra y hamburguesa --------------------- */
#header .nav { display: none !important; }

#header .nav.open {
  display: flex !important;
  position: fixed !important;
  top: var(--ft-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: auto !important;
  z-index: 1001 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 8px var(--ft-pad-x) 32px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: var(--ft-bg) !important;
  border-top: 1px solid var(--ft-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#header .nav.open .nav-link {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ft-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  color: var(--ft-ink) !important;
  white-space: normal !important;
}
#header .nav.open .nav-link:hover,
#header .nav.open .nav-link.active { color: var(--ft-accent) !important; background: transparent !important; }
#header .nav.open .nav-cta {
  margin-top: 20px !important;
  padding: 15px 20px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--ft-accent) !important;
  color: #fff !important;
  text-align: center !important;
  justify-content: center !important;
}
#header .nav.open .nav-cta:hover { background: var(--ft-accent-ink) !important; transform: none !important; }

#header .mobile-toggle { display: flex !important; }
#header .mobile-toggle span { background: var(--ft-ink) !important; }

/* --- A partir de 1120px: cabecera de dos alturas ------------------------- */
@media (min-width: 1120px) {
  #header .header-inner {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    row-gap: 0 !important;
  }
  /* Fila 1 */
  #header .logo,
  #header .header-actions {
    height: 56px !important;
    align-items: center !important;
  }
  #header .logo { order: 1 !important; }
  #header .header-actions { order: 2 !important; }

  /* Fila 2: el menú, a ancho completo y sobre la columna 1 */
  #header .nav {
    display: flex !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 43px !important;
    position: static !important;
    inset: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 0 0 -8px !important;   /* sangrado óptico sobre la columna 1 */
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ft-line) !important;
    overflow: visible !important;
  }
  #header .nav .nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--ft-ink) !important;
    white-space: nowrap !important;
    transition: color var(--ft-t), background var(--ft-t) !important;
  }
  #header .nav .nav-link:hover,
  #header .nav .nav-link.active { color: var(--ft-accent) !important; background: var(--ft-panel) !important; }
  #header .nav .nav-cta {
    margin-left: 8px !important;
    padding: 6px 14px !important;
    border-radius: 5px !important;
    background: var(--ft-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  #header .nav .nav-cta:hover { background: var(--ft-accent-ink) !important; color: #fff !important; transform: none !important; }
  #header .mobile-toggle { display: none !important; }
}

/* --- A partir de 1280px el menú respira a 13px --------------------------- */
@media (min-width: 1280px) {
  #header .nav .nav-link { font-size: 13px !important; padding: 6px 9px !important; }
  #header .nav { margin-left: -9px !important; }
  #header .nav .nav-cta { padding: 7px 16px !important; }
}

/* Selector de idioma: compacto y sin caja de plantilla */
#header .lang-selector {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 6px !important;
  padding: 2px !important;
  gap: 0 !important;
}
#header .lang-opt {
  font-family: var(--ft-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  padding: 4px 7px !important;
  border-radius: 4px !important;
  color: var(--ft-muted) !important;
  box-shadow: none !important;
}
#header .lang-opt:hover { color: var(--ft-ink) !important; }
#header .lang-opt.active { background: var(--ft-panel) !important; color: var(--ft-accent) !important; box-shadow: none !important; }

/* El cuerpo arranca por debajo de la cabecera fija */
.ft-below-header { padding-top: var(--ft-header-h); }


/* =============================================================================
   06 · PIE
   HTML y enlaces intactos: sólo restilo.
   ========================================================================== */

.footer {
  background: var(--ft-bg);
  border-top: 1px solid var(--ft-line);
  padding-block: 56px 24px;
}
.footer-col h5,
.footer-col .ft-foot-h,
.ft-foot-h {
  /* 2026-09-10: el rotulo de columna del pie era un <h5> despues de un <h2>,
     lo que rompia la jerarquia de encabezados en 513 paginas sin aportar
     semantica. Pasa a <div class="ft-foot-h">; el aspecto no cambia. */
  font-family: var(--ft-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ft-muted);
  margin-bottom: 18px;
}
.footer-links a { font-size: 14px; color: var(--ft-text); }
.footer-links a:hover { color: var(--ft-accent); }
.footer-brand p { color: var(--ft-text); }
.footer-bottom { border-top: 1px solid var(--ft-line); color: var(--ft-muted); font-size: 13px; }
.footer-bottom a:hover { color: var(--ft-accent); }


/* =============================================================================
   05 · PÁGINAS DE SERVICIO  ·  soluciones.html · atendyo.html
   Bloques por servicio, claramente separados por hairline y con ancla propia.
   Reutiliza los tokens y las utilidades de arriba; no redefine ninguna.
   ========================================================================== */

/* Hero de página: hueco para la cabecera fija de 80px */
.ft-page-hero {
  padding-top: calc(var(--ft-header-h) + 40px);
  padding-bottom: var(--ft-sec-y);
  background: var(--ft-bg);
  border-top: 0;
}
@media (min-width: 900px) {
  .ft-page-hero { padding-top: calc(var(--ft-header-h) + 56px); }
}
.ft-page-hero .ft-lead { margin-top: 18px; }

/* --- Barra de enrutado a las secciones (sin chrome de tarjeta) ----------- */
.ft-jump {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ft-line);
  border-bottom: 1px solid var(--ft-line);
}
.ft-jump-item {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--ft-line);
  color: inherit;
  transition: background var(--ft-t), color var(--ft-t);
}
.ft-jump-item:first-child { border-top: 0; }
.ft-jump-num {
  display: block;
  font-family: var(--ft-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ft-accent);
  margin-bottom: 5px;
}
.ft-jump-name { display: block; font-size: 15px; font-weight: 700; color: var(--ft-ink); margin-bottom: 3px; }
.ft-jump-line { display: block; font-size: 13px; line-height: 1.45; color: var(--ft-text); }
.ft-jump-item:hover .ft-jump-name { color: var(--ft-accent); }

@media (min-width: 760px) {
  .ft-jump { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-jump-item {
    border-top: 0;
    border-left: 1px solid var(--ft-line);
    padding: 18px 22px;
  }
  .ft-jump-item:first-child { border-left: 0; padding-left: 0; }
  .ft-jump-item:hover { background: var(--ft-panel); }
}

/* --- Sección de servicio ------------------------------------------------- */
.ft-blk { scroll-margin-top: calc(var(--ft-header-h) + 16px); }
.ft-blk-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .ft-blk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}
/* Regla morada de 3px: sólo la lleva el bloque que manda en su página */
.ft-blk-rule { border-left: 3px solid var(--ft-accent); padding-left: 22px; }
.ft-blk-head .ft-h2 { margin-bottom: 12px; }

/* --- Lista «qué incluye» ------------------------------------------------- */
.ft-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ft-line); }
.ft-list li {
  position: relative;
  padding: 13px 0 13px 28px;
  border-bottom: 1px solid var(--ft-line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ft-text);
}
.ft-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 21px;
  width: 6px;
  height: 6px;
  background: var(--ft-accent);
  transform: rotate(45deg);
}
.ft-list-label {
  display: block;
  font-family: var(--ft-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ft-muted);
  margin: 0 0 10px;
}

/* --- Acciones ------------------------------------------------------------ */
.ft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }

/* --- Tarjeta plana ------------------------------------------------------- */
.ft-card {
  background: var(--ft-bg);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius);
  padding: 20px 22px;
  transition: border-color var(--ft-t);
}
.ft-card:hover { border-color: var(--ft-accent); }
.ft-card .ft-h4 { margin-bottom: 6px; }
.ft-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px)  { .ft-cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
                             .ft-cards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .ft-cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* --- Fila de logos: estática, gris, alineada a la rejilla ---------------- */
.ft-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; margin-top: 20px; }
.ft-logos img { height: 24px; width: auto; display: block; opacity: .75; filter: grayscale(1); }
.ft-logos--brand img { height: 28px; filter: none; opacity: 1; }

/* --- Capturas reales ----------------------------------------------------- */
.ft-shots { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .ft-shots { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* --- Bloque de instalación (monoespaciada) ------------------------------ */
.ft-code {
  display: block;
  font-family: var(--ft-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ft-ink);
  background: var(--ft-panel);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  white-space: pre;
}

/* --- Diagrama de cajas y flechas ---------------------------------------- */
.ft-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft-flow-box {
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-sm);
  padding: 11px 14px;
  font-family: var(--ft-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ft-ink);
  background: var(--ft-bg);
}
.ft-flow-arrow { font-family: var(--ft-mono); font-size: 14px; color: var(--ft-accent); }

/* --- Cifras con unidad --------------------------------------------------- */
.ft-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--ft-line);
  border-bottom: 1px solid var(--ft-line);
}
@media (min-width: 760px) { .ft-figs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ft-fig { padding: 18px 20px; border-left: 1px solid var(--ft-line); }
.ft-fig:first-child { border-left: 0; padding-left: 0; }
.ft-fig-n { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ft-accent); }
.ft-fig-l { display: block; font-family: var(--ft-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ft-muted); margin-top: 8px; }

/* --- Chips de cierre ----------------------------------------------------- */
.ft-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ft-chips a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--ft-radius-sm);
  background: var(--ft-bg);
  border: 1px solid var(--ft-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ft-ink);
  transition: border-color var(--ft-t), color var(--ft-t);
}
.ft-chips a:hover { border-color: var(--ft-accent); color: var(--ft-accent); }

/* --- Foco visible -------------------------------------------------------- */
.ft-blk a:focus-visible,
.ft-page-hero a:focus-visible,
.ft-jump-item:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 3px;
  border-radius: 3px;
}


/* =============================================================================
   07 · HERO
   Asimétrico 7/5 (texto/captura), no 1fr 1fr centrado. La captura va PLANA
   dentro del cromo .browser-bar que ya existe. Debajo del par H1+subtítulo,
   el sello de partner en su propia línea, con hairline vertical.
   ========================================================================== */

.ft-hero {
  padding-top: calc(var(--ft-header-h) + 32px);
  padding-bottom: var(--ft-sec-y);
  background: var(--ft-bg);
  border-bottom: 1px solid var(--ft-line);
}
.ft-hero-grid { display: grid; gap: 36px; align-items: center; }
.ft-hero-copy { min-width: 0; }
.ft-hero-copy .ft-lead { margin-top: 18px; }

.ft-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.ft-hero-actions .ft-btn { width: 100%; }

/* Sello de partner: sello, no badge de colores */
.ft-seal {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ft-line);
}
.ft-seal img { height: 40px; width: auto; flex: 0 0 auto; }
.ft-seal-text {
  font-family: var(--ft-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ft-ink);
  padding-left: 14px;
  border-left: 1px solid var(--ft-line);
}
.ft-seal-text small { display: block; font-size: 11px; color: var(--ft-muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }

/* Ventana de navegador reutilizando .browser-bar / .browser-url */
.ft-shot {
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius);
  overflow: hidden;
  background: var(--ft-bg);
}
.ft-shot .browser-bar { background: var(--ft-panel); border-bottom: 1px solid var(--ft-line); padding: 9px 12px; }
.ft-shot .browser-url {
  background: var(--ft-bg);
  border: 1px solid var(--ft-line);
  border-radius: 4px;
  font-family: var(--ft-mono);
  font-size: 11px;
  color: var(--ft-muted);
}
.ft-shot-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ft-panel); }
.ft-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ft-shot-cap {
  font-family: var(--ft-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ft-muted);
  margin-top: 10px;
}

@media (min-width: 900px) {
  .ft-hero { padding-top: calc(var(--ft-header-h) + 56px); }
  .ft-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ft-gutter);
    column-gap: 48px;
  }
  .ft-hero-actions { flex-direction: row; }
  .ft-hero-actions .ft-btn { width: auto; }
  .ft-seal img { height: 44px; }
}


/* =============================================================================
   08 · BARRA DE ENRUTADO — «QUIÉN ERES»
   Una sola fila, sin cromo de tarjeta. Cuatro columnas separadas por hairlines
   verticales. En móvil se apila con hairlines horizontales, sin tocar el HTML.
   ~110px de alto en lugar de los ~420px de las cuatro tarjetas de hoy.
   ========================================================================== */

.ft-router {
  padding-block: 0 var(--ft-sec-y);
  background: var(--ft-bg);
  border-bottom: 1px solid var(--ft-line);
}
.ft-router-inner { display: grid; gap: 0; border-top: 1px solid var(--ft-line); }
.ft-router-label {
  font-family: var(--ft-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-accent);
  padding: 16px 0 8px;
}

.ft-route {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ft-line);
  transition: background var(--ft-t);
}
.ft-route:last-child { border-bottom: 0; }
.ft-route-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ft-ink);
  transition: color var(--ft-t);
}
.ft-route-name::after {
  content: "\2192";
  font-weight: 400;
  color: var(--ft-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ft-t), transform var(--ft-t);
}
.ft-route-line { font-size: 13px; line-height: 1.45; color: var(--ft-text); }
.ft-route:hover { background: var(--ft-panel); }
.ft-route:hover .ft-route-name { color: var(--ft-accent); }
.ft-route:hover .ft-route-name::after { opacity: 1; transform: translateX(0); }

@media (min-width: 860px) {
  .ft-router-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--ft-line);
    border-bottom: 1px solid var(--ft-line);
  }
  .ft-router-label { grid-column: 1 / -1; border-bottom: 1px solid var(--ft-line); padding: 14px 0 12px; }
  .ft-route {
    padding: 20px 24px;
    border-bottom: 0;
    border-left: 1px solid var(--ft-line);
  }
  .ft-route:first-of-type { border-left: 0; padding-left: 0; }
}


/* =============================================================================
   09 · RETÍCULA DE SERVICIOS
   Odoo pesa el doble en superficie y es el único con imagen; los otros cuatro
   conservan el mismo tamaño de titular (20px) y el mismo tratamiento: son
   bloques hermanos más pequeños, no un pie de página del bloque Odoo.
   ========================================================================== */

.ft-services { display: grid; gap: var(--ft-gutter); }

.ft-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 24px;
  background: var(--ft-bg);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius);
  transition: border-color var(--ft-t);
}
.ft-svc:hover { border-color: var(--ft-accent); }
.ft-svc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ft-svc-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ft-accent); }
.ft-svc-icon svg { width: 20px; height: 20px; display: block; }
.ft-svc-icon svg * { stroke-width: 1.5; }
.ft-svc-line { font-size: 15px; line-height: 1.55; color: var(--ft-text); margin: 0; max-width: 46ch; }
.ft-svc .ft-arrow { margin-top: auto; padding-top: 6px; }
.ft-svc-flag { position: static; align-self: flex-start; }

/* El bloque Odoo: dos columnas de ancho, tinte morado, regla de 3px */
.ft-svc--odoo {
  background: var(--ft-panel-odoo);
  border-color: transparent;
  border-left: 3px solid var(--ft-accent);
  border-radius: 0 var(--ft-radius) var(--ft-radius) 0;
  gap: 16px;
}
.ft-svc--odoo:hover { border-color: transparent; border-left-color: var(--ft-accent-ink); }
.ft-svc--odoo .ft-svc-line { max-width: 60ch; }

/* Atendyo: el único con marca propia y el único que sale del dominio */
.ft-svc--atendyo { border-color: var(--ft-line-strong); }

@media (min-width: 700px) {
  .ft-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-svc--odoo { grid-column: span 2; padding: 32px; }
}
@media (min-width: 1000px) {
  .ft-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-svc { padding: 28px; }
  .ft-svc--odoo { grid-column: span 2; padding: 36px 36px 36px 33px; }
}


/* =============================================================================
   10 · MURO DE MÓDULOS DEL APP STORE
   img/apps/*.png son 113 banners REALES de las fichas (600×337). Una cuadrícula
   densa con desvanecido inferior es la prueba más convincente de la página, y
   es producto real, no stock.
   ========================================================================== */

.ft-wall { position: relative; }
.ft-wall-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 18px;
}
.ft-wall-num {
  font-family: var(--ft-sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ft-accent);
}
.ft-wall-cap {
  font-family: var(--ft-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-muted);
}

.ft-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}
.ft-wall-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 337;
  object-fit: cover;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-line);
  background: var(--ft-panel);
  display: block;
}

/* Desvanecido inferior: la cuadrícula se corta sin borde duro */
.ft-wall-fade { position: relative; }
.ft-wall-fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--ft-bg) 92%);
  pointer-events: none;
}
.ft-sec--odoo .ft-wall-fade::after { background: linear-gradient(to bottom, rgba(246,242,245,0), var(--ft-panel-odoo) 92%); }
.ft-sec--close .ft-wall-fade::after { background: linear-gradient(to bottom, rgba(247,248,250,0), var(--ft-panel) 92%); }
.ft-wall-foot { margin-top: 16px; }

@media (min-width: 700px) {
  .ft-wall-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .ft-wall-num { font-size: 38px; }
}
@media (min-width: 1000px) {
  .ft-wall-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}


/* =============================================================================
   11 · BANDA DE LOGOS DE CONECTORES
   Fila ESTÁTICA, gris, alineada a la rejilla. Sin marquesina.
   ========================================================================== */

.ft-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-logos img {
  height: 20px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .75;
  transition: opacity var(--ft-t), filter var(--ft-t);
}
.ft-logos a:hover img,
.ft-logos img:hover { filter: grayscale(0); opacity: 1; }
.ft-logos-label {
  font-family: var(--ft-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-muted);
  margin-bottom: 14px;
}
@media (min-width: 700px) {
  .ft-logos { gap: 24px 40px; }
  .ft-logos img { height: 24px; }
}


/* =============================================================================
   12 · TIRA DE CAPTURAS DE BACKEND
   Evidencia real dentro del bloque Odoo. Pie monoespaciado bajo cada una.
   ========================================================================== */

.ft-shots { display: grid; gap: 16px; }
.ft-shots figure { margin: 0; min-width: 0; }
.ft-shots img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-sm);
  background: var(--ft-bg);
}
.ft-shots figcaption {
  font-family: var(--ft-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ft-muted);
  margin-top: 8px;
}
@media (min-width: 800px) { .ft-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ft-gutter); } }


/* =============================================================================
   13 · TARJETAS TÉCNICAS, TILES Y LISTAS
   Tarjeta = borde 1px + radius 8px, SIN sombra. Hover = el borde pasa a morado.
   Tile = «muchas cosas sin cajón»: una línea, icono + nombre, sin párrafo.
   ========================================================================== */

.ft-cards { display: grid; gap: 16px; }
.ft-cards--2 > * { min-width: 0; }
@media (min-width: 700px) {
  .ft-cards { gap: var(--ft-gutter); }
  .ft-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .ft-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ft-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px;
  background: var(--ft-bg);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius);
  transition: border-color var(--ft-t);
}
.ft-card:hover { border-color: var(--ft-accent); }
.ft-card--flat { background: var(--ft-panel); }
.ft-card p { font-size: 15px; line-height: 1.6; color: var(--ft-text); margin: 0; }
.ft-card .ft-arrow { margin-top: auto; padding-top: 4px; }

/* Mosaico de tiles de una línea */
.ft-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--ft-line);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius);
  overflow: hidden;
}
.ft-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--ft-bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--ft-ink);
  transition: background var(--ft-t), color var(--ft-t);
}
.ft-tile svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ft-accent); }
.ft-tile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ft-tile:hover { background: var(--ft-panel); color: var(--ft-accent); }

/* Lista técnica con la marca de FlexigoTech como viñeta */
.ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ft-text);
  max-width: var(--ft-measure);
}
.ft-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ft-accent);
}
.ft-list--mono li { font-family: var(--ft-mono); font-size: 13px; letter-spacing: .01em; }


/* =============================================================================
   14 · CIFRAS CON UNIDAD
   Adjetivos fuera: 102 módulos, 3 versiones, 7 conectores propios, 2 fabricantes.
   ========================================================================== */

.ft-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ft-line);
}
.ft-fig {
  padding: 18px 0;
  border-bottom: 1px solid var(--ft-line);
  min-width: 0;
}
.ft-fig:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--ft-line); }
.ft-fig-num {
  display: block;
  font-family: var(--ft-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ft-accent);
}
.ft-fig-label {
  display: block;
  font-family: var(--ft-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-muted);
  margin-top: 8px;
}
.ft-fig-note { display: block; font-size: 13px; line-height: 1.5; color: var(--ft-text); margin-top: 6px; }

@media (min-width: 860px) {
  .ft-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ft-line); }
  .ft-fig { padding: 24px 20px; border-bottom: 0; border-left: 1px solid var(--ft-line); }
  .ft-fig:first-child { border-left: 0; padding-left: 0; }
  .ft-fig:nth-child(even) { padding-left: 20px; }
  .ft-fig-num { font-size: 38px; }
}


/* =============================================================================
   15 · CHIPS DE PÚBLICO
   La misma segmentación de la barra de enrutado, abajo y accionable.
   ========================================================================== */

.ft-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--ft-line-strong);
  border-radius: 6px;
  background: var(--ft-bg);
  color: var(--ft-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color var(--ft-t), color var(--ft-t);
}
.ft-chip::after { content: "\2192"; color: var(--ft-accent); font-weight: 400; }
.ft-chip:hover { border-color: var(--ft-accent); color: var(--ft-accent); background: var(--ft-bg); }


/* =============================================================================
   16 · DIAGRAMA DE TRES CAJAS — página del fabricante
   TU API  ↔  CONECTOR FLEXIGOTECH  ↔  ODOO 19·18·17
   El mecanismo dibujado explica en dos segundos lo que hoy tardan cinco
   párrafos. Debajo, los DOS únicos logos que se pueden mostrar.
   ========================================================================== */

.ft-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 24px;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius);
  background: var(--ft-panel);
}
.ft-dbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 18px 16px;
  background: var(--ft-bg);
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-sm);
  text-align: center;
  min-width: 0;
}
.ft-dbox--mid { border-color: var(--ft-accent); background: var(--ft-bg); }
.ft-dbox-name {
  font-family: var(--ft-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ft-ink);
}
.ft-dbox--mid .ft-dbox-name { color: var(--ft-accent); }
.ft-dbox-sub { font-size: 13px; line-height: 1.45; color: var(--ft-muted); }

.ft-darrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ft-accent);
  font-family: var(--ft-mono);
  font-size: 15px;
  padding: 10px 0;
}
.ft-darrow::before { content: "\2195"; }

.ft-made-with {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ft-line);
}
.ft-made-with .ft-logos img { height: 22px; max-width: 150px; }

@media (min-width: 780px) {
  .ft-diagram {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 28px;
  }
  .ft-darrow { padding: 0 14px; }
  .ft-darrow::before { content: "\2194"; }
}


/* =============================================================================
   17 · CIERRE
   ========================================================================== */

.ft-close { display: grid; gap: 20px; }
.ft-close .ft-lead { max-width: 58ch; }
@media (min-width: 900px) {
  .ft-close { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
}


/* =============================================================================
   18 · FAQ — restilo. El HTML y main.js no se tocan.
   ========================================================================== */

.faq-item { border-bottom: 1px solid var(--ft-line); }
.faq-question { font-size: 17px; font-weight: 700; color: var(--ft-ink); }
.faq-question:hover { color: var(--ft-accent); }
.faq-icon { color: var(--ft-accent); }
.faq-answer { color: var(--ft-text); max-width: var(--ft-measure); }


/* =============================================================================
   19 · ACCESIBILIDAD, MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */

.ft-sec :focus-visible,
.ft-hero :focus-visible,
.ft-router :focus-visible,
#header :focus-visible,
.footer :focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Texto sólo para lectores de pantalla */
.ft-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Nada de scroll horizontal: tablas, código y cuadrículas anchas se desplazan
   dentro de su propio contenedor. */
.ft-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  .ft-arrow,
  .ft-route,
  .ft-route-name,
  .ft-route-name::after,
  .ft-card,
  .ft-svc,
  .ft-chip,
  .ft-tile,
  .ft-logos img {
    transition: none !important;
  }
  .marquee-wrap { animation: none !important; }
}

@media print {
  #header.header, .cw-btn, .cw-popup, .ft-router { display: none !important; }
  .ft-sec, .ft-hero { border: 0; padding-block: 16px; }
  .ft-wall-fade::after { display: none; }
}

/* =============================================================================
   20 · PORTADA 2026 — «panel oscuro»  (candidata C, corregida por el panel)
   -----------------------------------------------------------------------------
   TODO lo de este bloque va scoped a  body.ft-home  y sus clases llevan el
   prefijo .ft-h-  para que ninguna otra pagina que enlaza esta hoja
   (atendyo.html, soluciones.html, conector-odoo-para-tu-software.html,
   demo-efectos.html) se vea afectada: esas siguen siendo claras.

   Contrastes WCAG calculados sobre el fondo REAL, anotados junto a cada token.
   ========================================================================== */

html[data-page="home"] { color-scheme: only light; }

body.ft-home {
  /* --- Superficies. Portada CLARA: es el fondo del resto del sitio. --- */
  --ft-h-bg:    #FFFFFF;
  --ft-h-bg-1:  #F7F8FB;   /* banda alterna */
  --ft-h-bg-2:  #EEF1F6;   /* panel dentro de tarjeta */
  --ft-h-bg-3:  #E3E8F0;   /* hover */
  --ft-h-panel: #F2F4F8;   /* panel de la tira de logos */

  /* --- Tinta sobre blanco --- */
  --ft-h-ink:   #0B0F1A;   /* 18.62:1 sobre bg · 17.55:1 sobre bg-1  AAA */
  --ft-h-dim:   #4C5468;   /*  8.31:1 sobre bg ·  7.83:1 sobre bg-1  AAA */
  --ft-h-faint: #6A7284;   /*  5.28:1 sobre bg ·  4.98:1 sobre bg-1  AA  */

  /* --- Acento: el mismo morado, ahora como tinta sobre blanco --- */
  --ft-h-accent:  #6B3FA0;      /*  7.38:1 sobre bg  AAA */
  --ft-h-solid:   #6B3FA0;
  --ft-h-solid-2: #58328A;
  --ft-h-acc-dim:  rgba(107,63,160,.08);
  --ft-h-acc-line: rgba(107,63,160,.30);

  /* --- Estado --- */
  --ft-h-live: #0B7A55;    /* 5.86:1 sobre bg  AA */
  --ft-h-wa:   #005C4B;

  /* --- Lineas, radios, movimiento --- */
  --ft-h-line:   rgba(11,15,26,.10);
  --ft-h-line-2: rgba(11,15,26,.20);
  --ft-h-r1: 8px; --ft-h-r2: 12px; --ft-h-r3: 18px; --ft-h-rp: 999px;
  --ft-h-t: .18s cubic-bezier(.2,.8,.2,1);

  background: var(--ft-h-bg);
  color: var(--ft-h-ink);
  color-scheme: only light;
}

/* La portada no usa la retícula clara de la hoja: se apaga el fondo heredado */
body.ft-home main#ft-main { background: var(--ft-h-bg); display: block; }

body.ft-home .ft-h-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Foco visible universal (el sitio no tenia ni una regla :focus-visible) */
body.ft-home :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--ft-h-accent);
  outline-offset: 3px;
  border-radius: var(--ft-h-r1);
}

body.ft-home .ft-h-skip {
  position: absolute; left: 12px; top: -70px; z-index: 3000;
  background: var(--ft-h-ink); color: var(--ft-h-bg);
  padding: 12px 18px; border-radius: var(--ft-h-r1);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
body.ft-home .ft-h-skip:focus { top: 12px; }

body.ft-home .ft-h-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
body.ft-home .ft-h-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   CABECERA Y PIE — la portada usa EXACTAMENTE los del resto del sitio.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TIPOGRAFIA
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-h1 {
  /* El titular pasa de una frase a dos (que hacemos · en que somos
     especialistas): con 15ch y 62px ocupaba seis lineas y se comia el fold.
     20ch y 56px lo dejan en tres o cuatro sin perder presencia. */
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 800;
  margin: 0; max-width: 20ch; color: var(--ft-h-ink);
  text-wrap: balance;
}
body.ft-home .ft-h-h1 em { font-style: normal; color: var(--ft-h-accent); }
@media (min-width: 1081px) { body.ft-home .ft-h-h1 { max-width: 16ch; } }
body.ft-home .ft-h-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14; letter-spacing: -.025em; font-weight: 700; margin: 0; max-width: 20ch;
}
body.ft-home .ft-h-eyebrow {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ft-h-faint); font-weight: 600; margin: 0 0 14px;
}
body.ft-home .ft-h-lead {
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55;
  color: var(--ft-h-dim); max-width: 56ch; margin: 20px 0 0;
}
body.ft-home .ft-h-p { font-size: 16px; line-height: 1.65; color: var(--ft-h-dim); max-width: 60ch; margin: 14px 0 0; }
body.ft-home .ft-h-micro { font-size: 13px; line-height: 1.5; color: var(--ft-h-faint); margin: 0; }

/* --------------------------------------------------------------------------
   BOTONES Y ENLACES
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--ft-h-r1);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--ft-h-t), border-color var(--ft-h-t), color var(--ft-h-t);
}
body.ft-home .ft-h-btn--solid { background: var(--ft-h-solid); color: #fff; }
body.ft-home .ft-h-btn--solid:hover { background: var(--ft-h-solid-2); color: #fff; }
body.ft-home .ft-h-btn--ghost { background: transparent; color: var(--ft-h-ink); border-color: var(--ft-h-line-2); }
body.ft-home .ft-h-btn--ghost:hover { background: var(--ft-h-bg-1); border-color: var(--ft-h-ink); color: var(--ft-h-ink); }

body.ft-home .ft-h-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; font-size: 15px; font-weight: 600;
  color: var(--ft-h-accent); text-decoration: none; line-height: 1.2;
}
body.ft-home .ft-h-link:hover { color: var(--ft-h-ink); }
body.ft-home .ft-h-link .ft-h-arrow { transition: transform var(--ft-h-t); }
body.ft-home .ft-h-link:hover .ft-h-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-hero { position: relative; overflow: hidden; padding: calc(var(--ft-header-h, 100px) + 76px) 0 0; }
body.ft-home .ft-h-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 10% -12%, rgba(107,63,160,.13), transparent 64%),
    linear-gradient(180deg, rgba(11,15,26,.022), transparent 40%);
}
body.ft-home .ft-h-hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.3fr);
  gap: 48px; align-items: center;
}

/* Sello de partner: pildora CLARA. Sobre negro el SVG de Odoo (trazos #8f8f8f
   y banda #e46f78) se convertia en una mancha ilegible. */
body.ft-home .ft-h-seal {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 5px 14px 5px 10px;
  background: var(--ft-h-panel); border-radius: var(--ft-h-rp);
  text-decoration: none; margin-bottom: 24px;
  border: 1px solid rgba(11,15,26,.12);
}
body.ft-home .ft-h-seal img { height: 22px; width: auto; display: block; }
body.ft-home .ft-h-seal span { font-size: 13px; font-weight: 700; color: #0B0F1A; letter-spacing: .005em; } /* 17.55:1 */
body.ft-home .ft-h-seal:hover { background: #E8ECF4; border-color: var(--ft-h-acc-line); }

body.ft-home .ft-h-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
body.ft-home .ft-h-hero-note { margin-top: 16px; letter-spacing: .01em; }

/* --- Marco de ventana --- */
body.ft-home .ft-h-frame {
  position: relative; border: 1px solid var(--ft-h-line-2); border-radius: var(--ft-h-r2);
  background: var(--ft-h-bg-1); overflow: hidden; margin: 0;
}
body.ft-home .ft-h-frame--lift { box-shadow: 0 22px 48px -28px rgba(11,15,26,.22); }
body.ft-home .ft-h-bar {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  background: var(--ft-h-bg-2); border-bottom: 1px solid var(--ft-h-line);
}
body.ft-home .ft-h-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,15,26,.16); flex: 0 0 auto; }
body.ft-home .ft-h-bar b {
  margin-left: 10px; font-size: 11px; font-weight: 500; color: var(--ft-h-faint);
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ft-home .ft-h-clip { display: block; overflow: hidden; line-height: 0; }
body.ft-home .ft-h-imgbox { position: relative; display: block; line-height: 0; }
body.ft-home .ft-h-imgbox img { display: block; width: 100%; height: auto; }
body.ft-home .ft-h-clip--fade {
  max-height: 400px;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}

/* Mascaras RGPD. Van SIEMPRE sobre .ft-h-imgbox (no sobre .ft-h-clip): si el
   recorte estuviera en la misma caja, los % se calcularian sobre la caja
   recortada y la mancha se saldria del dato. */
body.ft-home .ft-h-mask {
  position: absolute; display: block; border-radius: 3px;
  background: rgba(226,230,238,.62);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: inset 0 0 0 1px rgba(11,15,26,.06);
}
/* screen_05_delivery: menu «Leroy Merlin» (marca no reclamable) + nº de pedido de Amazon */
body.ft-home .ft-h-mask--a { left: 36.4%; top: .6%;  width: 6.6%;  height: 3.8%; }
body.ft-home .ft-h-mask--b { left: 87.2%; top: 73.0%; width: 11.0%; height: 3.6%; }
/* screen_06_delivery: direccion de entrega real de un tercero */
body.ft-home .ft-h-mask--c { left: 13.2%; top: 6.6%;  width: 31.5%; height: 4.6%; }
/* ca-chatter: nº de pedido de Amazon, destinatario y localidad impresos en la etiqueta */
body.ft-home .ft-h-mask--d { left: 59.5%; top: 39.0%; width: 35.0%; height: 3.0%; }
body.ft-home .ft-h-mask--e { left: 6.0%;  top: 62.0%; width: 34.0%; height: 3.0%; }
body.ft-home .ft-h-mask--f { left: 7.5%;  top: 52.0%; width: 22.0%; height: 3.4%; }

body.ft-home .ft-h-cap { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ft-h-faint); max-width: 56ch; }

/* --------------------------------------------------------------------------
   TIRA DE LOGOS — panel CLARO.
   En la candidata C los 7 logos iban invertidos a blanco sobre negro: el panel
   los llamo «siluetas indistinguibles» y ademas borraba el color de marca.
   Sobre panel claro se ven tal cual son, y la fila se centra: sin huerfanos.
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-logos { padding: 60px 0 0; }
body.ft-home .ft-h-logos-panel {
  background: var(--ft-h-panel); border-radius: var(--ft-h-r3); padding: 24px 26px;
  border: 1px solid rgba(11,15,26,.08);
}
body.ft-home .ft-h-logos-head {
  margin: 0 0 18px; text-align: center;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #5B6270; font-weight: 700;   /* 5.99:1 sobre #F4F5F8 ✓ AA */
}
body.ft-home .ft-h-logos-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 34px;
}
body.ft-home .ft-h-logos-row li { display: flex; align-items: center; justify-content: center; height: 44px; }
body.ft-home .ft-h-logos-row img {
  max-height: 24px; max-width: 122px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.1); opacity: .72;
  transition: opacity var(--ft-h-t), filter var(--ft-h-t);
}
body.ft-home .ft-h-logos-row li:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   FILA-ROUTER DE LOS CINCO SERVICIOS
   Los cinco destinos son ANCLAS DE LA PROPIA PAGINA: la candidata C mandaba
   fuera del sitio antes de haber explicado nada.
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-router { padding: 64px 0 0; }
body.ft-home .ft-h-router-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px;
}
body.ft-home .ft-h-router-grid > li { display: flex; }
body.ft-home .ft-h-router-grid > li:first-child { grid-column: span 2; }

body.ft-home .ft-h-card {
  display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 18px 18px 16px;
  border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r2);
  background: var(--ft-h-bg-1); text-decoration: none; color: inherit;
  transition: background var(--ft-h-t), border-color var(--ft-h-t), transform var(--ft-h-t);
}
body.ft-home .ft-h-card:hover { background: var(--ft-h-bg-2); border-color: var(--ft-h-line-2); transform: translateY(-2px); }
body.ft-home .ft-h-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ft-h-accent); }
body.ft-home .ft-h-card-top .ft-h-num { font-size: 11px; letter-spacing: .1em; color: var(--ft-h-faint); }
body.ft-home .ft-h-card h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--ft-h-ink); letter-spacing: -.01em; line-height: 1.25; }
body.ft-home .ft-h-card p { font-size: 14px; line-height: 1.45; color: var(--ft-h-dim); margin: 0; }
/* La linea mono va abajo del todo: iguala opticamente las cinco tarjetas, que
   en la candidata C quedaban con 80-100px de vacio bajo el texto. */
body.ft-home .ft-h-card .ft-h-cmeta {
  margin-top: auto; padding-top: 12px; font-size: 11.5px; letter-spacing: .02em;
  color: var(--ft-h-faint); border-top: 1px solid var(--ft-h-line);
}
body.ft-home .ft-h-card--lead {
  background: linear-gradient(180deg, rgba(107,63,160,.10), var(--ft-h-bg-1) 72%);
  border-color: var(--ft-h-acc-line);
}

/* --------------------------------------------------------------------------
   BANDA DE PRUEBA
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-proof { padding: 52px 0 0; }
body.ft-home .ft-h-proof-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px;
  border-top: 1px solid var(--ft-h-line); border-bottom: 1px solid var(--ft-h-line); padding: 34px 0;
}
body.ft-home .ft-h-proof-item { display: block; text-decoration: none; color: inherit; }
body.ft-home .ft-h-proof-k {
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; color: var(--ft-h-ink); white-space: nowrap;
}
/* El separador va a tamaño de texto y no como <small>: en la candidata C el
   «17·18·19» se leia «17.18.19», como si fuera una version de software. */
body.ft-home .ft-h-proof-k .ft-h-sep { color: var(--ft-h-accent); opacity: .8; font-weight: 400; padding: 0 .12em; }
body.ft-home .ft-h-proof-d { font-size: 13.5px; color: var(--ft-h-dim); margin-top: 8px; line-height: 1.45; }
body.ft-home a.ft-h-proof-item:hover .ft-h-proof-k { color: var(--ft-h-accent); }

/* --------------------------------------------------------------------------
   MOLDE UNICO DE SECCION  (se repite 5 veces: asi no parece cajon de sastre)
   Bandas alternas: la candidata C era una sola plancha de 6.400px.
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-sec { padding: 92px 0; border-top: 1px solid var(--ft-h-line); }
body.ft-home .ft-h-sec--alt { background: var(--ft-h-bg-1); }
body.ft-home .ft-h-sec-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr);
  gap: 52px; align-items: start;   /* start, no center: evita los huecos muertos */
}
body.ft-home .ft-h-sec-grid.ft-h-rev > .ft-h-copy { order: 2; }
body.ft-home .ft-h-copy, body.ft-home .ft-h-visual { min-width: 0; }

body.ft-home .ft-h-bullets { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
body.ft-home .ft-h-bullets li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
body.ft-home .ft-h-bullets svg { margin-top: 3px; color: var(--ft-h-accent); }
body.ft-home .ft-h-bullets b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ft-h-ink); }
body.ft-home .ft-h-bullets span { display: block; font-size: 14px; color: var(--ft-h-dim); line-height: 1.5; }
body.ft-home .ft-h-cta { margin-top: 20px; }

body.ft-home .ft-h-tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 5px 12px;
  background: var(--ft-h-bg-2); border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-rp);
  font-size: 12px; font-weight: 700; color: var(--ft-h-dim); letter-spacing: .04em; text-transform: uppercase;
}

/* --- Diagrama tu software -> conector -> Odoo (HTML/CSS puro) --- */
body.ft-home .ft-h-diagram {
  display: flex; align-items: stretch; padding: 26px 20px;
  border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r3);
  background: linear-gradient(180deg, rgba(11,15,26,.02), transparent), var(--ft-h-bg-1);
}
body.ft-home .ft-h-node {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center;
  padding: 18px 12px; text-align: center;
  border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r2); background: var(--ft-h-bg-2);
}
body.ft-home .ft-h-node b { font-size: 14px; font-weight: 700; color: var(--ft-h-ink); line-height: 1.3; }
body.ft-home .ft-h-node span { font-size: 12px; color: var(--ft-h-dim); line-height: 1.4; }
/* dos lineas a proposito: en la candidata C el tercer nodo partia «Odoo 19 · 18 ·» / «17» */
body.ft-home .ft-h-node .ft-h-nowrap { white-space: nowrap; }
body.ft-home .ft-h-node--mid { border-color: var(--ft-h-acc-line); background: linear-gradient(180deg, rgba(107,63,160,.13), var(--ft-h-bg-2)); }
body.ft-home .ft-h-node--mid b { color: var(--ft-h-accent); }
body.ft-home .ft-h-flow { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; color: var(--ft-h-faint); }
body.ft-home .ft-h-flow svg { width: 100%; height: 14px; }

body.ft-home .ft-h-makers { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
body.ft-home .ft-h-makers p {
  width: 100%; margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ft-h-faint); font-weight: 700;
}
body.ft-home .ft-h-makers a { display: inline-flex; align-items: center; min-height: 36px; }
body.ft-home .ft-h-makers img { height: 22px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .74; }
body.ft-home .ft-h-makers a:hover img { opacity: 1; }

/* --- Consola de automatizacion --- */
body.ft-home .ft-h-console { border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r2); background: var(--ft-h-bg-1); overflow: hidden; }
body.ft-home .ft-h-sec--alt .ft-h-console { background: var(--ft-h-bg); }
body.ft-home .ft-h-console-bar {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  background: var(--ft-h-bg-2); border-bottom: 1px solid var(--ft-h-line);
  font-size: 11.5px; color: var(--ft-h-faint); letter-spacing: .05em;
}
body.ft-home .ft-h-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ft-h-live); flex: 0 0 auto; }
body.ft-home .ft-h-log { list-style: none; margin: 0; padding: 16px 14px; display: grid; gap: 9px; }
body.ft-home .ft-h-log li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; font-size: 12.5px; line-height: 1.45; align-items: baseline; }
body.ft-home .ft-h-log time { color: var(--ft-h-faint); }
body.ft-home .ft-h-log span { color: var(--ft-h-dim); overflow-wrap: anywhere; }
body.ft-home .ft-h-log .ft-h-ok { color: var(--ft-h-live); font-weight: 600; }
body.ft-home .ft-h-stackv { display: grid; gap: 20px; }

/* --- Panel de desarrollo web --- */
body.ft-home .ft-h-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
body.ft-home .ft-h-tiles div { padding: 15px 16px; border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r2); background: var(--ft-h-bg-1); }
body.ft-home .ft-h-sec--alt .ft-h-tiles div { background: var(--ft-h-bg); }
body.ft-home .ft-h-tiles b { display: block; font-size: 14px; font-weight: 700; color: var(--ft-h-ink); }
body.ft-home .ft-h-tiles span { display: block; font-size: 13px; color: var(--ft-h-dim); margin-top: 5px; line-height: 1.45; }

/* --- Atendyo: pestañas + burbujas --- */
body.ft-home .ft-h-chat { max-width: 470px; border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r3); background: var(--ft-h-bg-1); overflow: hidden; }
body.ft-home .ft-h-sec--alt .ft-h-chat { background: var(--ft-h-bg); }
body.ft-home .ft-h-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--ft-h-line); background: var(--ft-h-bg-2); }
body.ft-home .ft-h-tab {
  flex: 1 1 0; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid transparent; border-radius: var(--ft-h-r1);
  color: var(--ft-h-dim); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--ft-h-t), color var(--ft-h-t), border-color var(--ft-h-t);
}
body.ft-home .ft-h-tab:hover { color: var(--ft-h-ink); }
body.ft-home .ft-h-tab[aria-selected="true"] { background: var(--ft-h-bg-3); color: var(--ft-h-ink); border-color: var(--ft-h-line-2); }
body.ft-home .ft-h-thread { padding: 20px 18px; display: grid; gap: 12px; }
body.ft-home .ft-h-thread[hidden] { display: none; }
body.ft-home .ft-h-bub { margin: 0; max-width: 88%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; }
body.ft-home .ft-h-bub--in { justify-self: start; background: var(--ft-h-bg-3); color: var(--ft-h-ink); border-radius: 14px 14px 14px 4px; }
body.ft-home .ft-h-bub--out { justify-self: end; background: var(--ft-h-solid); color: #fff; border-radius: 14px 14px 4px 14px; }
/* El hilo de WhatsApp se distingue del hilo web por color, no solo por la pestaña */
body.ft-home #ft-h-th-wa .ft-h-bub--out { background: var(--ft-h-wa); color: #E9EDEF; }

/* --------------------------------------------------------------------------
   MODULOS: vitrina de banners reales + indice de nombres tecnicos
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-modstrip {
  list-style: none; margin: 26px 0 0; padding: 0 0 8px;
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  border-radius: var(--ft-h-r2);
}
body.ft-home .ft-h-modstrip li { flex: 0 0 auto; scroll-snap-align: start; }
body.ft-home .ft-h-modstrip img {
  width: 208px; height: auto; display: block;
  border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-r1);
}
body.ft-home .ft-h-rail:focus-visible { outline: 3px solid var(--ft-h-accent); outline-offset: 4px; }

body.ft-home .ft-h-modwall {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--ft-h-line); border: 1px solid var(--ft-h-line);
  border-radius: var(--ft-h-r2); overflow: hidden;
}
body.ft-home .ft-h-modwall li {
  background: var(--ft-h-bg-1); padding: 10px 14px; font-size: 12.5px; line-height: 1.4;
  color: var(--ft-h-dim); overflow-wrap: anywhere;
}
body.ft-home .ft-h-modwall li::before { content: "\25B8 "; color: var(--ft-h-accent); }
body.ft-home .ft-h-modwall li.ft-h-more { color: var(--ft-h-faint); background: var(--ft-h-bg-2); }
body.ft-home .ft-h-modwall li.ft-h-more::before { content: ""; }

/* --------------------------------------------------------------------------
   CUATRO PUERTAS + CIERRE
   -------------------------------------------------------------------------- */
body.ft-home .ft-h-paths-grid { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
body.ft-home .ft-h-paths-grid > li { display: flex; }
body.ft-home .ft-h-paths-grid .ft-h-card p { min-height: 0; }

body.ft-home .ft-h-end { padding: 88px 0 96px; border-top: 1px solid var(--ft-h-line); background: linear-gradient(180deg, rgba(107,63,160,.07), transparent 62%); }
body.ft-home .ft-h-end-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
body.ft-home .ft-h-end-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.ft-home .ft-h-end-links a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px;
  font-size: 15px; color: var(--ft-h-dim); text-decoration: none; transition: color var(--ft-h-t);
}
body.ft-home .ft-h-end-links a:hover { color: var(--ft-h-ink); }
body.ft-home .ft-h-end-links a::before { content: ""; width: 16px; height: 1px; background: var(--ft-h-line-2); flex: 0 0 auto; transition: width var(--ft-h-t), background var(--ft-h-t); }
body.ft-home .ft-h-end-links a:hover::before { width: 26px; background: var(--ft-h-accent); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* la captura se sale del contenedor por la derecha, como hace Linear */
  body.ft-home .ft-h-hero-grid > .ft-h-visual { margin-right: -48px; }
}

@media (max-width: 1080px) {
  body.ft-home .ft-h-hero { padding-top: calc(var(--ft-header-h, 72px) + 48px); }
  body.ft-home .ft-h-hero-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  body.ft-home .ft-h-h1 { max-width: 20ch; }
  body.ft-home .ft-h-sec-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  body.ft-home .ft-h-sec-grid.ft-h-rev > .ft-h-copy { order: 0; }
  body.ft-home .ft-h-router-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.ft-home .ft-h-router-grid > li:first-child { grid-column: span 2; }
  body.ft-home .ft-h-proof-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
  body.ft-home .ft-h-paths-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.ft-home .ft-h-modwall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.ft-home .ft-h-sec { padding: 72px 0; }
  body.ft-home .ft-h-end { padding: 72px 0 80px; }
  body.ft-home .ft-h-chat { max-width: 100%; }
}

@media (max-width: 768px) {
  /* La captura del hero se AMPLIA y se recorta en vez de encogerse hasta ser
     ilegible. Se escala el envoltorio entero (imagen + mascaras juntas), asi
     las mascaras RGPD siguen cuadrando sobre el dato. */
  body.ft-home .ft-h-clip--zoom { aspect-ratio: 16 / 11; }
  body.ft-home .ft-h-clip--zoom > .ft-h-imgbox { transform: scale(1.7); transform-origin: left top; }
  body.ft-home .ft-h-frame--lift { box-shadow: none; }
}

@media (max-width: 640px) {
  body.ft-home .ft-h-wrap { padding-inline: 20px; }
  body.ft-home .ft-h-actions { flex-direction: column; align-items: stretch; }
  body.ft-home .ft-h-actions .ft-h-btn { width: 100%; }
  body.ft-home .ft-h-router-grid,
  body.ft-home .ft-h-paths-grid,
  body.ft-home .ft-h-tiles { grid-template-columns: minmax(0,1fr); }
  body.ft-home .ft-h-router-grid > li:first-child { grid-column: span 1; }
  body.ft-home .ft-h-proof-grid { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 26px 0; }
  body.ft-home .ft-h-modwall { grid-template-columns: minmax(0,1fr); }
  body.ft-home .ft-h-sec { padding: 48px 0; }
  body.ft-home .ft-h-end { padding: 48px 0 56px; }
  body.ft-home .ft-h-router { padding-top: 44px; }
  body.ft-home .ft-h-logos { padding-top: 44px; }
  body.ft-home .ft-h-logos-panel { padding: 20px 16px; }
  body.ft-home .ft-h-logos-row { gap: 6px 22px; }
  body.ft-home .ft-h-end-inner { flex-direction: column; align-items: stretch; }
  body.ft-home .ft-h-diagram { flex-direction: column; padding: 18px 14px; }
  body.ft-home .ft-h-flow { flex: 0 0 30px; transform: rotate(90deg); }
  body.ft-home .ft-h-modstrip img { width: 176px; }
  /* 21 filas de nombres tecnicos son dos pantallas de mas en un movil */
  body.ft-home .ft-h-modwall li:nth-child(n+11):not(.ft-h-more) { display: none; }
  body.ft-home .ft-h-h2 { max-width: 100%; }
}

/* A 420px la barra mono del marco perdia «Correos Express» por ellipsis:
   el trozo largo se retira del DOM visual en vez de cortarse a medias. */
@media (max-width: 520px) {
  body.ft-home .ft-h-bar-more { display: none; }
  body.ft-home .ft-h-bar b { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ft-home *, body.ft-home *::before, body.ft-home *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Flotantes inyectados por JS con style inline (main.js: #ft-demo-btn y
   #ft-videocall-btn; shop.js: la banda .ft-appstore-foot). Solo se pueden
   vencer con !important, y solo hacen falta en la portada: asi en pantalla
   hay UN morado, no tres. --- */
body.ft-home #ft-demo-btn {
  background: var(--ft-h-solid) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
body.ft-home #ft-videocall-btn {
  background: #12161D !important; color: #F2F4F9 !important;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
body.ft-home .ft-appstore-foot { background: var(--ft-h-bg) !important; }
body.ft-home .ft-appstore-foot a {
  background: var(--ft-h-solid) !important; color: #fff !important; box-shadow: none !important;
}

/* === anti #ft-responsive-fixes ============================================
   main.js inyecta <style id="ft-responsive-fixes"> al FINAL del <body>: a
   igualdad de especificidad gana el, porque va despues. Estas cuatro reglas
   son las unicas que necesitan !important en todo el bloque de la portada.
   ========================================================================== */
body.ft-home main#ft-main h1.ft-h-h1 { font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.06 !important; }
body.ft-home main#ft-main h2.ft-h-h2 { font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.14 !important; }
@media (max-width: 640px) {
  body.ft-home main#ft-main h1.ft-h-h1 { font-size: 34px !important; line-height: 1.09 !important; }
  body.ft-home main#ft-main h2.ft-h-h2 { font-size: 27px !important; line-height: 1.16 !important; }
}
/* main.js impone img{height:auto}: estas necesitan altura fija. */
body.ft-home main#ft-main .ft-h-seal img { height: 22px; width: auto; }
body.ft-home main#ft-main .ft-h-makers img { height: 22px; width: auto; }
body.ft-home main#ft-main .ft-h-imgbox img { height: auto; width: 100%; }

/* Anclas de la propia pagina: que no queden bajo la cabecera fija */
body.ft-home main#ft-main section[id] { scroll-margin-top: calc(var(--ft-header-h, 100px) + 16px); }
html[data-page="home"] { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html[data-page="home"] { scroll-behavior: auto; } }

/* =============================================================================
   21 · LIMPIEZA DEL PRIMER PANTALLAZO
   Sobre la portada flotaban CUATRO cosas a la vez: el banner de cookies (una
   caja centrada que tapaba el hero), la pildora «Prueba la demo», la pildora
   «Videollamada gratis» y el lanzador del chat. Las dos pildoras repiten
   exactamente los dos botones que ya estan en el hero, asi que en la portada
   sobran. El chat se queda: es producto nuestro.
   ========================================================================== */
body.ft-home #ft-demo-btn,
body.ft-home #ft-videocall-btn { display: none !important; }

/* --- El aviso de cookies, como barra fina y no como caja que tapa ---------
   Los estilos base los inyecta cookie-consent.js en un <style> al vuelo, que
   por orden de documento gana: por eso aqui hace falta subir especificidad
   (body #ft-cc) y marcar !important. No se toca el JS: el texto, los enlaces
   y el consentimiento siguen siendo exactamente los suyos.
   ------------------------------------------------------------------------- */
body #ft-cc {
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-width: none !important; margin: 0 !important;
  display: flex !important; align-items: center !important; gap: 18px !important;
  flex-wrap: wrap !important;
  padding: 12px clamp(16px, 4vw, 40px) !important;
  border-radius: 0 !important;
  background: #0B0F1A !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 -10px 30px -20px rgba(11,15,26,.5) !important;
  font-size: 13px !important; line-height: 1.45 !important;
}
body #ft-cc > *:first-child { flex: 1 1 420px !important; min-width: 0 !important; margin: 0 !important; }
body #ft-cc .ft-cc-row { margin: 0 !important; flex: 0 0 auto !important; gap: 8px !important; }
body #ft-cc button { padding: 8px 16px !important; font-size: 13px !important; border-radius: 7px !important; }
body #ft-cc .ft-acc { background: #6B3FA0 !important; min-width: 0 !important; flex: 0 0 auto !important; }
body #ft-cc .ft-rej { background: #2A3140 !important; min-width: 0 !important; flex: 0 0 auto !important; }
body #ft-cc a { color: #C79BE8 !important; }
@media (max-width: 700px) {
  body #ft-cc { gap: 10px !important; padding: 12px 16px !important; }
  body #ft-cc .ft-cc-row { width: 100% !important; }
  body #ft-cc button { flex: 1 1 0 !important; }
}
