/* ============================================================================
 * sca-sections-1.css
 * Sistema Consultor Autónomo (SCA) landing — section-specific rules for the
 * batch-1 folds: 0 (nav), 0b (sticky CTA bar), 1 (hero), 2 (video).
 *
 * Loaded AFTER sca-tokens.css / sca-motion.css / sca-components.css. Uses
 * only tokens, curves and the spacing scale already declared there — no new
 * colour, radius or spacing value is introduced here. The single 768px
 * breakpoint is the only media query in this file (B14).
 * ==========================================================================*/

/* ============================================================================
 * FOLD 0 — NAV
 * ==========================================================================*/

.sca-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 72px;
}

/* Five-stop scrim — a legibility device over content, not brand colour.
   Its stops are copied literally and never tokenised (B4). */
.sca-nav__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.2)  80%,
    rgba(0,0,0,0)    100%);
}

.sca-nav__inner {
  position: relative;
  height: 100%;
  width: var(--content-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sca-nav__brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}

.sca-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.sca-nav__links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .25s var(--ease);
}

.sca-nav__links a:hover { color: var(--text-primary); }

.sca-nav__lang { display: flex; align-items: center; gap: 8px; }

/* `.lang-btn` itself carries no base style anywhere in the codebase — it is
   a pure JS hook for initLangSwitcher(). Scoped here so this styling never
   leaks onto the unrelated `.lang-btn` nodes of the pre-SCA landing. */
.sca-nav .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.sca-nav .lang-btn.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* Burger — "shortens instead of becoming an X" (B9). Width is content-sized
   (78px lines), not a fixed square; the ≥48px tap-area floor comes from
   height via padding, not from a square box. */
.sca-burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-width: 48px;
  height: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sca-burger__line {
  display: block;
  width: 78px;
  height: 1px;
  background: var(--text-primary);
  transform-origin: left center;
  transform: scaleX(0);
  animation: sca-line-grow 0.9s var(--ease) both;
}

.sca-burger__line:nth-child(1) { animation-delay: 0.05s; }
.sca-burger__line:nth-child(2) { animation-delay: 0.5s; }

@keyframes sca-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Once behaviors/sca-nav.js flips the 1500ms linesLoaded flag, the lines
   stop obeying the entrance keyframes and follow the menu's open/closed
   state instead — they shorten, they never rotate into an X. */
.sca-burger[data-lines-loaded="1"] .sca-burger__line {
  animation: none;
  transform: scaleX(1);
  transition: transform .45s var(--ease);
}

.sca-burger[data-lines-loaded="1"][aria-expanded="true"] .sca-burger__line {
  transform: scaleX(0.53);
}

@media (max-width: 768px) {
  .sca-nav { height: 60px; }
  .sca-nav__inner { padding-inline: 20px; }
  .sca-burger { display: flex; }

  /* `.sca-nav__links` doubles as the mobile dropdown, toggled by
     behaviors/sca-nav.js via `.is-open` on this same node — B9's DOM
     skeleton names no separate panel; `rgba(0,0,0,0.25)` is the exact
     structural colour sca-tokens.css already reserves for "the mobile menu
     blur", so this reuses the host's own anticipated value. */
  .sca-nav__links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 20px 24px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .sca-nav__links.is-open { display: flex; }
  .sca-nav__links a { padding-block: 12px; font-size: 16px; width: 100%; }
}

/* ============================================================================
 * FOLD 0b — STICKY CTA BAR
 * ==========================================================================*/

.sca-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--surface-elevated);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}

.sca-sticky.is-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.sca-sticky__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .sca-sticky__text { display: none; }
  .sca-sticky .sca-cta { width: 100%; }
}

/* ============================================================================
 * FOLD 1 — HERO
 * ==========================================================================*/

.sca-hero {
  padding-top: 72px;
  padding-bottom: 48px;
  position: relative;
  overflow: hidden;
}

/* Higgsfield network render — full section height, anchored right, fading to
   black on the left for the h1. The container carries the cursor parallax
   (sca-spotlight.js writes --mx/--my); the image inside carries a slow living
   drift so the network feels like it is flowing on its own — the visual claim
   of the whole page. The mask guarantees the left ~52% is black behind text. */
.sca-hero__backdrop {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 40%, #000 70%, #000 100%);
  mask-image: linear-gradient(to right, transparent 40%, #000 70%, #000 100%);
  transform: translate3d(calc(var(--mx, 0.5) * -12px + 6px), calc(var(--my, 0.5) * -10px + 5px), 0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Now a <video>, not an <img>. The Higgsfield clip carries the downward flow
   of the living mesh itself — the CSS drift that used to fake it (sca-net-drift)
   is gone. `display:block` kills the inline-video baseline gap; the poster JPG
   (same crop) fills this box before playback and under reduced motion. */
.sca-hero__backdrop-img {
  position: absolute;
  top: -6%;
  right: 0;
  height: 112%;
  width: 60%;
  min-width: 680px;
  display: block;
  object-fit: cover;
  object-position: right center;
  opacity: 0.9;
}

/* Bottom scrim — the SAME five-stop legibility gradient as .sca-nav__scrim at
   the top, mirrored (black at the bottom edge, fading to transparent going up).
   It sits ABOVE the video (z:0, painted after the backdrop) but BELOW the copy
   column (.sca-hero__inner is z:1), so it fades the bright network into the
   black of the next fold without ever darkening the text. Stops copied
   literally from the nav scrim, never tokenised (B4). */
.sca-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.2)  80%,
    rgba(0,0,0,0)    100%);
}

.sca-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 62%;
  /* Pull the whole copy column left of the centred gutter, tighter to the
     viewport edge — both for a more assertive hero AND to keep the h1's right
     edge clear of the bright network video on the right, so text never sits on
     top of the busy part of the animation. Static offset, not motion — reset
     on mobile (below) where there is no gutter to spend. */
  transform: translateX(-92px);
}

.sca-hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}

.sca-hero__particle {
  position: absolute;
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation-name: sca-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* B10 §2 — the 140-particle drift. Deterministic per-particle custom
   properties (--dx, --dy, --peak) are written inline by sca-particles.js. */
@keyframes sca-drift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  18%  { opacity: var(--peak); }
  82%  { opacity: var(--peak); }
  100% { transform: translate3d(var(--dx), var(--dy), 0); opacity: 0; }
}

/* Quality ribbon — the first visible line of the whole landing. The guarantee,
   lifted out of the old bottom scarcity block, sits above the audience callout
   in accent green as a small wide-tracked strip. */
.sca-hero__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.sca-hero__qualifier {
  display: flex;
  align-items: center;
  margin: 0;
  min-height: 40px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
}

.sca-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  margin-right: 10px;
  display: inline-block;
  flex-shrink: 0;
}

.sca-hero__h1 {
  margin-top: 24px;
  font-size: clamp(40px, 5.6vw, 84px);
}

.sca-hero__sub {
  margin-top: 28px;
  max-width: 62ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
}

.sca-hero .sca-cta { margin-top: 32px; }

.sca-hero__scarcity {
  margin-top: 16px;
  max-width: 600px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .sca-hero { padding-top: 60px; }
  /* Reset del translateX(-92px) del desktop: en mobile no hay gutter que
     compensar, así que el offset dejaba TODO el contenido del hero clipeado
     fuera de la vista por la izquierda (h1, subhead, CTA, todo).
     Reportado por auditoría E2E en 375×800 y 414×896. */
  .sca-hero__inner { max-width: 100%; transform: none; }
  .sca-hero__qualifier { min-height: 36px; }
  .sca-hero__h1 { margin-top: 20px; }
  .sca-hero__sub { margin-top: 24px; font-size: 17px; }
  .sca-hero .sca-cta { margin-top: 28px; }
  .sca-hero__scarcity { margin-top: 14px; }
  /* On a single-column mobile hero the network sits behind the text as a top
     atmosphere rather than a side panel: anchored to the top-right, dimmer, so
     the copy stays legible over it. */
  .sca-hero__backdrop {
    inset: -4% -10% auto -10%;
    height: 56%;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  }
  .sca-hero__backdrop-img { width: 130%; min-width: 0; opacity: 0.5; }
}

/* ============================================================================
 * FOLD 2 — VIDEO
 * ==========================================================================*/

/* Single centred column. The two-column player/script split was removed with
   the script blocks; the player now owns the fold at a comfortable reading
   width. */
.sca-video__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sca-video__h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  max-width: 20ch;
}

/* Player wrapper — now just a centred, max-width column. The frame itself
   (aspect-ratio, radius, shadow, controls, seekable progress bar) is owned by
   the shared brand-video-player (.bv-shell) mounted inside. The old
   subtitle-crop geometry and the 8-layer progressive blur were removed with the
   legacy .sca-player__* / .sca-blur markup — the brand player carries the fold. */
.sca-player {
  width: 100%;
  max-width: 960px;
  margin-top: 40px;
}

.sca-script {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sca-script__item {
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: 20px;
  margin-bottom: 24px;
}
.sca-script__item:last-child { margin-bottom: 0; }

.sca-script__label {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.sca-script__body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .sca-video__inner { flex-direction: column; }
  .sca-video__col--player,
  .sca-video__col--script { flex: 1 1 100%; }
}