/* ==========================================================================
   FT · HERO — vitrina rotatoria de la portada            09-09-2026
   --------------------------------------------------------------------------
   Sustituye la captura unica de Odoo por CUATRO capturas reales que se van
   turnando dentro del mismo marco: Odoo, marketplaces, chatbot y web. Las
   cuatro estan siempre en el DOM (los lectores de pantalla leen los cuatro
   alt), solo cambia cual se ve.

   Reglas de la casa (ft-efectos.md):
   - ninguna transicion dice `all`;
   - nada rebota, nada parpadea: solo un fundido de 320 ms;
   - se para al pasar el raton, al recibir el foco y con el boton de pausa;
   - dentro de prefers-reduced-motion NO se mueve: se queda la primera.

   Se enlaza DESPUES de ft-2026.css. No toca styles.css ni main.js.
   ========================================================================== */

/* --- El escenario: caja de proporcion fija, asi no hay salto de maquetacion
       ni con las imagenes aun sin descargar. ------------------------------ */
body.ft-home .ft-h-stage {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 2; line-height: 0;
  background: var(--ft-h-bg-1);
}
/* Especificidad por encima del `img { height: auto }` que main.js inyecta al
   final del body: ahi gana el ultimo a igualdad, aqui ganamos por peso. */
body.ft-home .ft-h-stage img.ft-h-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.22,.61,.36,1);
}
body.ft-home .ft-h-stage img.ft-h-slide.is-on { opacity: 1; }

/* Encuadre por captura: cada pantalla tiene su parte util en otro sitio. */
body.ft-home .ft-h-stage img.ft-h-slide--izq { object-position: 0 0; }

/* --- Barra del marco: cuatro rotulos, se ve el de la captura activa.
       Es decorativa (aria-hidden): el dato real va en el alt y en los chips. */
body.ft-home .ft-h-showbar-i { display: none; }
body.ft-home .ft-h-showbar-i.is-on { display: inline; }

/* --- Fila de chips: nombra las cuatro cosas que hacemos y deja elegir.
       Aunque no se pulse ninguno, los cuatro rotulos estan siempre a la
       vista: es lo que contesta a «solo enseñais Odoo». -------------------- */
body.ft-home .ft-h-showtabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
body.ft-home .ft-h-showtab {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px;
  font: 500 12.5px/1 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  color: var(--ft-h-dim); background: transparent;
  border: 1px solid var(--ft-h-line); border-radius: var(--ft-h-rp);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color var(--ft-h-t), border-color var(--ft-h-t), background var(--ft-h-t);
}
body.ft-home .ft-h-showtab:hover { color: var(--ft-h-ink); border-color: var(--ft-h-line-2); }
body.ft-home .ft-h-showtab::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ft-h-line-2); flex: 0 0 auto;
  transition: background var(--ft-h-t);
}
body.ft-home .ft-h-showtab[aria-pressed="true"] {
  color: var(--ft-h-ink);
  background: var(--ft-h-acc-dim);
  border-color: var(--ft-h-acc-line);
}
body.ft-home .ft-h-showtab[aria-pressed="true"]::before { background: var(--ft-h-accent); }
body.ft-home .ft-h-showtab:focus-visible {
  outline: 3px solid var(--ft-h-accent); outline-offset: 2px;
}

/* Boton de pausa: mismo chip, sin rotulo largo. Solo aparece si hay JS. */
body.ft-home .ft-h-showpause { display: none; padding: 0 12px; }
body.ft-home .ft-h-showpause::before { display: none; }
html.ft-hero-js body.ft-home .ft-h-showpause { display: inline-flex; }
body.ft-home .ft-h-showpause svg { width: 13px; height: 13px; display: block; fill: currentColor; }
body.ft-home .ft-h-showpause .ft-h-ic-play { display: none; }
body.ft-home .ft-h-showpause[aria-pressed="true"] .ft-h-ic-play { display: block; }
body.ft-home .ft-h-showpause[aria-pressed="true"] .ft-h-ic-pause { display: none; }

/* --- Pie de foto: generico y honesto. No cambia con la captura, asi no hay
       texto saltando debajo de una imagen que ya se esta fundiendo. ------- */
body.ft-home .ft-h-cap--show { margin-top: 12px; }

/* --------------------------------------------------------------------------
   MOVIL
   A 390 px una captura de 1400 px encogida es una mancha. Se sube la caja a
   4:3 (mas alto = mas pixeles utiles) y `cover` recorta los laterales, que es
   por donde sobra. Nada se desborda: el escenario es `overflow: hidden` y la
   imagen no sale de el.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.ft-home .ft-h-stage { aspect-ratio: 4 / 3; }
  body.ft-home .ft-h-stage img.ft-h-slide { object-position: 0 0; }
  body.ft-home .ft-h-frame--lift { box-shadow: none; }
}
@media (max-width: 520px) {
  body.ft-home .ft-h-showtab { min-height: 32px; padding: 0 11px; font-size: 11.5px; }
  body.ft-home .ft-h-showtabs { gap: 6px; }
}

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO — no se suaviza, se apaga.
   El guion ni siquiera arranca el temporizador (lo comprueba con matchMedia);
   esto es el cinturon por si alguien cambia el ajuste con la pagina abierta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ft-home .ft-h-stage img.ft-h-slide { transition: none !important; }
}

@media print {
  body.ft-home .ft-h-stage img.ft-h-slide { opacity: 0; }
  body.ft-home .ft-h-stage img.ft-h-slide.is-on { opacity: 1; }
  body.ft-home .ft-h-showtabs { display: none; }
}