/* Fital API — reset, estructura, nav, pie, progreso. */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--marfil);
  scroll-padding-top: calc(var(--nav-h) + 24px); scroll-padding-bottom: 16px;
}
body {
  margin: 0; min-height: 100vh;
  background: var(--marfil); color: var(--tinta);
  font-family: var(--fuente); font-size: var(--t-cuerpo); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Inter necesita un poco menos de aire que SF; en Apple manda la tipografía del sistema. */
@supports not (font: -apple-system-body) {
  body { letter-spacing: -.011em; }
}
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(201, 154, 67, .28); color: var(--tinta); }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, pre { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.icono * { vector-effect: non-scaling-stroke; }
.boton:active { transform: scale(.98); transition-duration: .08s; }
/* Si #capacidades no carga su CSS, sus SVG no invaden la pantalla. */
#capacidades svg { max-height: 320px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--oro-texto); outline-offset: 3px; }
main:focus-visible, section:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Saltar al contenido */
.salto {
  position: fixed; top: 8px; left: 8px; z-index: 120;
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  background: var(--blanco-calido); color: var(--tinta);
  border: 1px solid var(--oro); border-radius: var(--radio-s);
  transform: translateY(-200%); transition: transform .2s;
}
.salto:focus { transform: none; }

/* Secciones */
.seccion { position: relative; padding-block: var(--seccion); background: var(--marfil); }
.seccion--alt { background: var(--marfil-2); }
.seccion:empty { display: none; }
@media (max-width: 899px) {
  :root { --seccion: 96px; }
  .seccion { padding-bottom: 32px; }
}
/* Sin JS solo queda el hero estático (#hero gana por id) y, debajo, el respaldo. */
html:not(.js) .seccion { display: none; }
html:not(.js) #reto { display: none; }
html:not(.js) .pie:empty { display: none; }
.generica .lead { margin-top: 24px; }

/* Costuras: el hilo de oro que une cada sección con la siguiente. Vive en <main> y se
   calcula en motor.js. Va sobre las secciones, también sobre #flujo fijada (z-index 2):
   su tramo de salida nace en el borde del contenido y no debe quedar tapado. */
main { position: relative; }
.costuras { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.costuras path { fill: none; stroke: var(--oro); stroke-width: 1.5; }
@media (min-width: 900px) {
  #control .eyebrow::before, #seguridad .eyebrow::before { display: none; }
}

/* Barra de progreso */
.progreso { position: fixed; inset: 0 0 auto; z-index: 110; height: 2px; pointer-events: none; }
.progreso__barra { display: block; height: 100%; background: var(--oro); transform: scaleX(0); transform-origin: 0 50%; }

/* Navegación */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.nav--activa {
  background: rgba(252, 251, 248, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hilo);
}
.nav__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); transition: opacity .2s; }
.logo__marca {
  display: block; width: 93px; height: 31px;
  background: currentColor;
  -webkit-mask: url(../assets/brand/fital-logo-mask.svg) center / contain no-repeat;
  mask: url(../assets/brand/fital-logo-mask.svg) center / contain no-repeat;
}
.nav__enlaces { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }
.nav__enlace {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--texto-2); font-size: .9375rem; text-decoration: none;
  transition: color .2s;
}
.nav__enlace[aria-current] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--oro); }
.nav__acciones { display: flex; align-items: center; gap: 8px; }
.nav__menu { display: none; }
.nav__menu path { transform-origin: 12px 12px; transition: transform .2s; }
.nav--abierta .nav__menu path:first-child { transform: rotate(45deg) translateY(4px); }
.nav--abierta .nav__menu path:last-child { transform: rotate(-45deg) translateY(-4px); }

@media (max-width: 899px) {
  .nav__menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .nav__lista {
    position: absolute; inset: var(--nav-h) 0 auto; display: none;
    padding: 8px var(--gutter) 16px;
    background: var(--marfil); border-bottom: 1px solid var(--hilo);
    box-shadow: var(--sombra);
  }
  .nav--abierta { background: var(--marfil); border-bottom-color: var(--hilo); }
  .nav--abierta .nav__lista { display: block; }
  .nav__enlaces { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace { width: 100%; padding: 0; font-size: 1.0625rem; color: var(--tinta); }
  .nav--cta-oculto .boton { display: none; }
}

@media (max-width: 479px) {
  .nav__barra { gap: 8px; }
  .nav__acciones { gap: 4px; }
  .nav .logo__marca { width: 78px; height: 26px; }
  .nav .boton { padding-inline: 12px; font-size: .8125rem; white-space: nowrap; }
}
@media (max-width: 349px) {
  .nav .boton { display: none; }
}

/* Pausa en la esquina del hero; el del pie queda sincronizado. */
.hero-pausa {
  position: absolute; right: var(--gutter); bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--blanco-calido); color: var(--tinta);
  border: var(--borde); border-radius: 999px; cursor: pointer;
  transition: border-color .3s;
}
.hero-pausa .icono { width: var(--ico-s); height: var(--ico-s); }

/* Pie */
.pie { background: var(--marfil-2); border-top: 1px solid var(--hilo); padding-block: 32px; }
.pie__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pie__linea { color: var(--texto-3); font-size: var(--t-meta); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.pie__enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--oro-texto); font-size: var(--t-meta); text-underline-offset: 3px;
  transition: color .2s;
}
.pie__pausa { padding: 0; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.pie__legal { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 40px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--hilo); color: var(--texto-3); font-size: var(--t-meta); line-height: 1.6; }
.pie__aviso { max-width: 68em; }
.pie__copy { flex: none; }
@media (max-width: 899px) {
  .pie__barra { flex-direction: column; align-items: flex-start; }
  .pie__enlaces { margin-left: 0; }
  .pie__legal { flex-direction: column; }
}

/* Respaldo estático: visible solo si el JS no corre */
.respaldo { max-width: 760px; margin-inline: auto; padding: 48px 16px; }
.respaldo section { padding-block: 40px; border-bottom: 1px solid var(--hilo); }
.respaldo h1, .respaldo h2 { margin-bottom: 16px; font-size: var(--t-h2); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; }
.respaldo p { margin-top: 8px; color: var(--texto-2); }
.respaldo pre { margin-top: 16px; padding: 16px; overflow-x: auto; background: var(--ivory); border-radius: var(--radio-s); font-family: var(--mono); font-size: .875rem; }
.respaldo h3 { margin-top: 24px; font-size: var(--t-h4); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.respaldo ul { margin: 12px 0 0; padding-left: 20px; color: var(--texto-2); }
.respaldo li + li { margin-top: 4px; }
.respaldo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--oro-texto); text-underline-offset: 3px; }
html.js .respaldo { display: none; }

@media (hover: hover) {
  .nav__enlace:hover, .pie__enlace:hover { color: var(--tinta); }
  .logo:hover { opacity: .72; }
  .hero-pausa:hover { border-color: var(--oro); }
}

/* Colores forzados: la máscara del logo necesita un color que el sistema no reemplace. */
@media (forced-colors: active) {
  .logo__marca { forced-color-adjust: none; background: LinkText; }
}

/* Movimiento pausado desde el pie (WCAG 2.2.2) */
html.sin-movimiento *, html.sin-movimiento *::before, html.sin-movimiento *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton:active { transform: none; opacity: .85; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}