/* ============================================================
   live2fast.css
   Complement to /assets/css/site-v2.css — it does not replace it.

   Live2FAST defines no colour and no typography of its own.
   Everything comes from the design-system variables
   (--talos, --agro, --grid, --public, --ink, --body).

   Required load order:
     1. /assets/css/site-v2.css
     2. /assets/css/live2fast.css
   ============================================================ */

/* Mid-page diagram inside a .panel-body.
   The SVG also carries width:100% inline, so the page survives
   this file failing to load. */
.l2f-mid{width:100%;height:auto;margin:4px 0 2px}

/* Second label of .panel-cap. The home page writes it inline;
   declared here as a class so the markup stays clean. */
.panel-cap .cap-soft{color:var(--body);font-weight:500}

/* Boundary and gap ledgers carry a second line per row. */
.ledger td small{display:block;margin-top:2px;opacity:.8}

/* Density. Live2FAST is a product page, not the corporate home:
   less vertical air between consecutive bands. */
.sect.band + .sect.band{padding-top:0}
.pipe-cell p{margin-top:4px}

@media (max-width:900px){
  .l2f-mid{margin-top:8px}
}

/* ============================================================
   INTRO TALOS — banda de marca bajo la cabecera
   ------------------------------------------------------------
   Los tres colores están tomados del arte original del logo
   (azul marino del fondo, teal de la diagonal, verde del
   chevron). Van declarados como variables locales de este
   bloque: no contaminan el sistema y se sustituyen en un sitio
   si el manual de TALOS fija otros valores.
   ============================================================ */
.talos-intro{
  --t-navy:#031A35;
  --t-teal:#00A5B1;
  --t-green:#75BB41;
  --t-ease:cubic-bezier(.22,.68,.3,1);
  position:relative;
  overflow:hidden;
  background:var(--t-navy);
}

/* Eco de la diagonal del arte original, contenido. */
.talos-intro::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:var(--t-teal);
  clip-path:polygon(100% 0, 100% 100%, 26% 100%);
  opacity:.14;
}

.ti-in{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:22px;padding:44px 0 40px;text-align:center;
}

.ti-lockup{
  width:196px;height:auto;display:block;
}

.ti-words{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0;margin:0;
}
.ti-words span{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
.ti-words i{
  font-style:normal;color:var(--t-green);
  margin:0 20px;font-size:14px;line-height:1;
}

/* Entrada secuenciada: el logo primero, después cada palabra. */
.ti-lockup,
.ti-words span,
.ti-words i{
  opacity:0;transform:translateY(10px);
  animation:tiIn .7s var(--t-ease) forwards;
}
.ti-lockup{animation-delay:.08s}
.ti-words span:nth-of-type(1){animation-delay:.52s}
.ti-words i:nth-of-type(1){animation-delay:.66s}
.ti-words span:nth-of-type(2){animation-delay:.80s}
.ti-words i:nth-of-type(2){animation-delay:.94s}
.ti-words span:nth-of-type(3){animation-delay:1.08s}

@keyframes tiIn{to{opacity:1;transform:none}}

@media (max-width:640px){
  .ti-in{padding:32px 0 30px;gap:18px}
  .ti-lockup{width:150px}
  .ti-words span{font-size:12.5px;letter-spacing:.18em}
  .ti-words i{margin:0 12px}
}

/* Reduced-motion: todo visible desde el primer fotograma. */
@media (prefers-reduced-motion:reduce){
  .ti-lockup,
  .ti-words span,
  .ti-words i{opacity:1;transform:none;animation:none}
}