/* =============================================================================
   ft-portada-bloques.css — SOLO la portada (index.html).

   Se carga DESPUES de ft-2026.css y no reescribe nada suyo: solo anade las
   piezas nuevas de estos cuatro bloques y, cuando hace falta pisar algo, lo
   hace desde aqui.

     1 · .ftb-conn   banda deslizante de conectores (sustituye a la rejilla
                     grande de 7 tarjetas y a la galeria en movimiento)
     2 · .ftb-pt     partners tecnologicos (6 logos con su frase)
     3 · .ftb-shots  pila de capturas reales (desarrollo web y Atendyo)

   Paleta: la de la PORTADA 2026 (--ft-h-*). Fondo blanco, sin un solo panel
   oscuro. No se define ningun color nuevo que no salga de esos tokens.

   Accesibilidad:
   · la banda es una <ul> real con texto real; los logos llevan alt.
   · se para al pasar el raton Y al entrar el foco de teclado (:focus-within).
   · con prefers-reduced-motion no se mueve: se convierte en un carril que se
     desplaza con el dedo o con las flechas, y la copia duplicada desaparece.
   ========================================================================== */

/* =============================================================================
   1 · BANDA DESLIZANTE DE CONECTORES
   ========================================================================== */

body.ft-home .ftb-conn { padding-top: 54px; padding-bottom: 54px; }
body.ft-home .ftb-conn .ft-h-h2 { margin-top: 4px; }
body.ft-home .ftb-conn-lead { margin-top: 12px; max-width: 68ch; }
body.ft-home .ftb-hint { color: var(--ft-h-faint); }
/* En tactil no hay raton que pasar: la frase sobra. */
@media (hover: none), (max-width: 860px) {
  body.ft-home .ftb-hint { display: none; }
}

/* El carril. overflow:hidden recorta el bucle; la mascara difumina los bordes
   para que los logos no aparezcan y desaparezcan de golpe. */
body.ft-home .ftb-band {
  position: relative;
  margin-top: 22px;
  padding: 6px 0 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
body.ft-home .ftb-band:focus-visible {
  outline: 3px solid var(--ft-h-accent);
  outline-offset: 3px;
  border-radius: var(--ft-h-r2);
}

body.ft-home .ftb-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: ftb-marquee 78s linear infinite;
  will-change: transform;
}
/* Se para con el raton encima y con el foco del teclado dentro. */
body.ft-home .ftb-band:hover .ftb-track,
body.ft-home .ftb-band:focus-within .ftb-track { animation-play-state: paused; }

@keyframes ftb-marquee {
  from { transform: translate3d(0, 0, 0); }
  /* -50% del carril menos la mitad del hueco entre las dos copias */
  to   { transform: translate3d(calc(-50% - 7px), 0, 0); }
}

body.ft-home .ftb-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ft-home .ftb-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Todas las piezas miden lo mismo, lleven logo o texto: asi la tira se lee
   como una linea continua y no como una fila de logos con agujeros. */
body.ft-home .ftb-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 54px;
  min-width: 138px;
  max-width: 196px;
  padding: 0 18px;
  background: var(--ft-h-bg);
  border: 1px solid var(--ft-h-line);
  border-radius: var(--ft-h-r2);
  text-decoration: none;
  color: var(--ft-h-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  transition: border-color var(--ft-h-t), background var(--ft-h-t), box-shadow var(--ft-h-t);
}
body.ft-home .ft-h-sec--alt .ftb-pill { background: var(--ft-h-bg); }

body.ft-home a.ftb-pill:hover,
body.ft-home a.ftb-pill:focus-visible {
  border-color: var(--ft-h-acc-line);
  background: var(--ft-h-bg-1);
  box-shadow: 0 2px 10px rgba(11, 15, 26, .06);
}

/* Victor pidio COLOR: los logos van en color desde el primer fotograma.
   Nada de grayscale de reposo. */
body.ft-home main#ft-main .ftb-pill img {
  height: auto;
  width: auto;
  max-height: 27px;
  max-width: 148px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
/* Logos con poca anchura por mucho alto (Leroy Merlin, Mirakl, Correos
   Express): con el tope comun se quedaban del tamano de un sello. */
body.ft-home main#ft-main .ftb-pill--alto img { max-height: 38px; }

/* Microetiqueta de familia bajo cada pieza. */
body.ft-home .ftb-kind {
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ft-h-faint);
}

body.ft-home .ftb-conn-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 22px 0 0;
}

@media (max-width: 640px) {
  body.ft-home .ftb-conn { padding-top: 42px; padding-bottom: 42px; }
  body.ft-home .ftb-pill { height: 48px; min-width: 118px; padding: 0 14px; font-size: 14px; }
  body.ft-home main#ft-main .ftb-pill img { max-height: 22px; max-width: 118px; }
  body.ft-home main#ft-main .ftb-pill--alto img { max-height: 32px; }
  body.ft-home .ftb-track { animation-duration: 58s; }
}

/* Sin movimiento: la banda se queda quieta y se recorre con el dedo o con las
   flechas del teclado. La copia duplicada sobra, se quita. */
@media (prefers-reduced-motion: reduce) {
  body.ft-home .ftb-track { animation: none; width: auto; }
  body.ft-home .ftb-band {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    scrollbar-width: thin;
  }
  body.ft-home .ftb-row[aria-hidden="true"] { display: none; }
}

@media print {
  body.ft-home .ftb-track { animation: none; }
  body.ft-home .ftb-band { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  body.ft-home .ftb-track { flex-wrap: wrap; width: auto; }
  body.ft-home .ftb-row { flex-wrap: wrap; }
  body.ft-home .ftb-row[aria-hidden="true"] { display: none; }
}

/* =============================================================================
   2 · PARTNERS TECNOLOGICOS (bloque 02 · Integraciones)
   ========================================================================== */

body.ft-home .ftb-pt { margin-top: 24px; }
body.ft-home .ftb-pt-title {
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ft-h-faint);
}
body.ft-home .ftb-pt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ft-home .ftb-pt-grid > li { display: flex; }
body.ft-home .ftb-pt-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px 13px;
  border: 1px solid var(--ft-h-line);
  border-radius: var(--ft-h-r2);
  background: var(--ft-h-bg);
  text-decoration: none;
  transition: border-color var(--ft-h-t), background var(--ft-h-t), box-shadow var(--ft-h-t);
}
body.ft-home .ft-h-sec--alt .ftb-pt-card { background: var(--ft-h-bg); }
body.ft-home a.ftb-pt-card:hover,
body.ft-home a.ftb-pt-card:focus-visible {
  border-color: var(--ft-h-acc-line);
  background: var(--ft-h-bg-1);
  box-shadow: 0 2px 10px rgba(11, 15, 26, .06);
}
body.ft-home .ftb-pt-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 26px;
}
/* En color, como el resto del bloque. */
body.ft-home main#ft-main .ftb-pt-logo img {
  height: auto;
  width: auto;
  max-height: 22px;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
body.ft-home .ftb-pt-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ft-h-ink);
  line-height: 1.2;
}
body.ft-home .ftb-pt-what {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ft-h-dim);
}

@media (max-width: 1080px) {
  body.ft-home .ftb-pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  body.ft-home .ftb-pt-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   3 · PILA DE CAPTURAS REALES (04 · Desarrollo web y 05 · Atendyo)
   ========================================================================== */

body.ft-home .ftb-shots { display: grid; gap: 16px; }
body.ft-home .ftb-shots-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.ft-home .ftb-shots .ft-h-cap { margin-top: 8px; }
body.ft-home .ftb-shots-pair .ft-h-cap { font-size: 12.5px; }

@media (max-width: 560px) {
  body.ft-home .ftb-shots-pair { grid-template-columns: 1fr; }
}