/* ============================================================================
 * sca-sections-2.css
 * Sistema Consultor Autónomo (SCA) landing — section-specific rules for the
 * batch-2 folds: 3 (proof), 4 (diagnosis), 5 (twelve months), 6 (flow ⭐).
 *
 * Loaded AFTER sca-sections-1.css. Uses only tokens, curves and the spacing
 * scale already declared in sca-tokens.css — no new colour, radius or
 * spacing value is introduced here. The single 768px breakpoint is the only
 * media query in this file (B14).
 * ==========================================================================*/

/* ============================================================================
 * FOLD 3 — PROOF, TEN APPS
 * ==========================================================================*/

.sca-proof__h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; }

.sca-proof__sub {
  margin: 16px 0 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-muted);
}

/* Full-bleed, edge to edge — the 80px side masks read against the viewport
   edge, not the content column. Second of the three sanctioned
   overflow:hidden instances on the page (B1 §2). */
.sca-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent);
}

.sca-marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
  animation: sca-marquee 32s linear infinite;
}

@keyframes sca-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sca-app {
  flex-shrink: 0;
  width: 208px;
  text-decoration: none;
}

.sca-app__frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 19.5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid rgba(255,255,255,0.06);
}

.sca-app__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* B5 §4 fallback — never a broken-image icon, never an empty box. The <img>
   is hidden by its own onerror handler and this frame paints the app name
   in its place via the data attribute the renderer already writes. */
.sca-app__frame--fallback::after {
  content: attr(data-app-name);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
}

.sca-app__label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .sca-app { width: 156px; }
  .sca-marquee {
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
  }
}

/* ============================================================================
 * FOLD 4 — DIAGNOSIS, WHERE YOU ARE TODAY
 * ==========================================================================*/

.sca-diagnosis__h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; }

/* Grid borders painted as background rather than as elements. 33.3333% /
   66.6666% are structural — they must land on the 3-card gutters. */
#sca-diagnosis .sca-fold__inner {
  position: relative;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-position: 33.3333% 0, 66.6666% 0;
  background-size: 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}

/* Horizontal frame lines, one above and one below the card row. B9 gives no
   exact offset for these — placed flush against the grid they bracket. */
.sca-gridline {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.06) 15%, rgba(255,255,255,0.06) 85%, transparent 100%);
}

.sca-gridline--top { margin-bottom: 40px; }
.sca-gridline--bottom { margin-top: 40px; }

.sca-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Liquid-fill hover — the ::before rises from the bottom with its own
   rounded top; never a background-color transition (B9 fold 4). Reusable:
   later batches reuse `.sca-card` as-is for any other liquid-fill card. */
.sca-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform .55s var(--ease);
}

.sca-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
  transition: transform .55s var(--ease);
  z-index: 0;
}

.sca-card:hover::before { transform: translateY(0); }
.sca-card:hover { transform: translateY(-6px); }
.sca-card:hover .sca-card__label,
.sca-card:hover .sca-card__quote { color: var(--on-accent); }
.sca-card > * { position: relative; z-index: 1; }

/* Diagnosis variant — icon + number header, big decorative quote mark. */
.sca-card--diag { padding-top: 28px; }

.sca-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sca-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--accent);
  transition: color .55s var(--ease), border-color .55s var(--ease);
}

.sca-card__icon svg { width: 22px; height: 22px; }

.sca-card__num {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  transition: color .55s var(--ease);
}

.sca-card--diag:hover .sca-card__icon { color: var(--on-accent); border-color: rgba(0, 0, 0, 0.25); }
.sca-card--diag:hover .sca-card__num { color: rgba(0, 0, 0, 0.3); }

.sca-card__mark {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 0;
  color: var(--accent);
  margin-right: 3px;
  transition: color .55s var(--ease);
}

.sca-card--diag:hover .sca-card__mark { color: var(--on-accent); }

.sca-card__label {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  transition: color .55s var(--ease);
}

.sca-card__quote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  transition: color .55s var(--ease);
}

@media (max-width: 768px) {
  .sca-cards { grid-template-columns: 1fr; }
  .sca-card { padding: 24px; }
  #sca-diagnosis .sca-fold__inner { background-image: none; }
}

/* ============================================================================
 * FOLD 5 — TWELVE MONTHS
 * ==========================================================================*/

/* Shared telemetry-line background. Fold 5 no longer uses it (replaced by the
   decay render), but fold 7 (sprint) still does — keep the positioning here so
   that section is unaffected. */
.sca-linefield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#sca-twelve-months { position: relative; overflow: hidden; }

/* The decaying-network render — full section height, the mirror of the hero
   backdrop. Same network language, but here it is failing: a looping flicker
   makes it read as a connection actively breaking down, the visual answer to
   "if nothing changes". A mask holds the left ~55% black for the copy. */
.sca-twelve__backdrop {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 66%, #000 100%);
  mask-image: linear-gradient(to right, transparent 34%, #000 66%, #000 100%);
}

/* Now a <video>, not an <img>. The Higgsfield clip carries the decay itself —
   the mesh descends and comes apart past the centre of frame — so the fake
   flicker (sca-net-fail) is gone. `display:block` kills the inline-video
   baseline gap; the poster JPG holds this box before playback and under
   reduced motion. */
.sca-twelve__backdrop-img {
  position: absolute;
  top: -6%;
  right: 0;
  height: 112%;
  width: 58%;
  min-width: 620px;
  display: block;
  object-fit: cover;
  object-position: right center;
  opacity: 0.85;
}

/* Top + bottom scrims — the SAME five-stop legibility gradient as the nav /
   hero scrim (B4, copied literally, never tokenised). The network fades into
   black at both edges of the fold without ever darkening the text.

   z-index is load-bearing here. `::before` is the FIRST child of the section,
   so at an equal z-index the video backdrop (also z:0) paints AFTER it and
   covers it — which is exactly why only the bottom (`::after`, the LAST child)
   showed. The layers are therefore stacked explicitly: backdrop z:0 < scrims
   z:1 < copy z:2. Both scrims now sit above the video; the text stays above
   both. Same treatment as fold 1's bottom scrim, mirrored top and bottom. */
.sca-twelve::before,
.sca-twelve::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
}

.sca-twelve::before {
  top: 0;
  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-twelve::after {
  bottom: 0;
  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-twelve__inner { position: relative; z-index: 2; }

.sca-twelve__h2 { position: relative; font-size: clamp(26px, 2.7vw, 38px); line-height: 1.1; max-width: 20ch; }

.sca-consequences {
  position: relative;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.sca-consequences li {
  display: flex;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  max-width: 68ch;
}

.sca-twelve__marker {
  width: 8px;
  height: 8px;
  margin-top: 9px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--danger);
}

.sca-consequences p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-primary);
}

/* This fold is tuned to fit in a SINGLE viewport on desktop — no scroll to read
   it whole (explicit product requirement). The generous fold padding and the
   oversized closing line were the two biggest space consumers, so both are cut
   hard here, scoped to this section only. The old large bottom padding existed
   to clear the sticky CTA bar; now that the whole fold fits above the fold, the
   closing line sits mid-section and never reaches the bar, so the room is no
   longer needed. */
#sca-twelve-months { padding-block: clamp(44px, 6vh, 72px); }

/* Left-aligned in the dark column, not centred full-width: a centred line ran
   its right half over the (now full-height) decaying network and got clipped
   at the fold bottom. As a constrained left block it reads as the section's
   verdict, with the decay as its backdrop. */
.sca-twelve__close {
  position: relative;
  margin-top: 28px;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .sca-consequences p { font-size: 16px; }
  .sca-consequences li { max-width: 100%; }
  .sca-twelve__close { margin-top: 48px; }
  /* Decay render moves to a dim top atmosphere so the bullets own the column. */
  .sca-twelve__backdrop {
    inset: -4% -8% auto -8%;
    height: 48%;
    -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  }
  .sca-twelve__backdrop-img { width: 120%; min-width: 0; top: 0; transform: none; opacity: 0.42; }
}

/* ============================================================================
 * FOLD 6 ⭐ — THE OPERATING FLOW, as a living network.
 * A dim base network, a bright LIT copy revealed only under a radial cursor
 * lantern, three slow pulses circulating the closed loop, one warm human node,
 * HTML labels over the nodes. Atmosphere over diagram (3rd pass — see the
 * section renderer for why).
 * ==========================================================================*/

.sca-flow__h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; }

/* Trimmed ~20% (was clamp(120px, 14vh, 200px)) in the same spacing audit that
   tightened --fold-pad (sca-tokens.css) — still meaningfully more than the
   base fold gap so the signature network diagram keeps its own breathing
   room before fold 7, just not double what neighbouring folds get. */
#sca-flow { padding-bottom: clamp(96px, 11vh, 160px); }

.sca-flow__stage {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 48px auto 0;
  aspect-ratio: 1200 / 620;
}

/* Soft green atmosphere behind the network — the glow that makes it feel
   alive rather than drawn. */
.sca-flow__glow {
  position: absolute;
  inset: 6% 4%;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(0, 252, 168, 0.10), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.sca-flow__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Base network: dim, quiet, always present. */
.sca-flow__svg--base { opacity: 1; }

/* Lit network: bright, but revealed ONLY under the cursor lantern. This is
   the effect restored from the original — inspecting a live system. On touch
   (no pointer) it stays at its initial centred position, so the network still
   reads. sca-spotlight.js writes --mx/--my in px on the stage. */
.sca-flow__svg--lit {
  -webkit-mask-image: radial-gradient(220px 220px at var(--mx) var(--my), #000 0%, #000 42%, transparent 78%);
  mask-image: radial-gradient(220px 220px at var(--mx) var(--my), #000 0%, #000 42%, transparent 78%);
  filter: drop-shadow(0 0 6px rgba(0, 252, 168, 0.5));
}

.sca-flow__svg--top { pointer-events: none; }

/* The one always-warm node — the human point (node 6). */
.sca-flow__you-orb {
  filter: drop-shadow(0 0 10px rgba(0, 252, 168, 0.9)) drop-shadow(0 0 22px rgba(0, 252, 168, 0.5));
  animation: sca-you-pulse 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes sca-you-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}

.sca-flow__dot {
  filter: drop-shadow(0 0 8px rgba(0, 252, 168, 0.95)) drop-shadow(0 0 18px rgba(0, 252, 168, 0.55));
}

/* HTML node labels — subtle by default, positioned above (top row) or below
   (bottom row) their orb so nothing collides. */
.sca-fnode {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 168px;
  text-align: center;
  pointer-events: none;
}

.sca-fnode--top    { transform: translate(-50%, calc(-100% - 18px)); }
.sca-fnode--bottom { transform: translate(-50%, 18px); }

.sca-fnode__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
}

.sca-fnode__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

/* The human node's label is accented and carries the "Tú" tag. */
.sca-fnode--you .sca-fnode__num   { color: var(--accent); }
.sca-fnode--you .sca-fnode__label { color: #fff; }

.sca-fnode__tag {
  align-self: center;
  margin-top: 4px;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Centre payoff — quiet, letting the network carry the moment. */
.sca-flow__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(42%, 480px);
  text-align: center;
}

.sca-flow__center-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.sca-flow__center-line {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Mobile: the loop collapses to a vertical stepper with a glowing rail. */
@media (max-width: 768px) {
  .sca-flow__stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 22px;
    margin-top: 36px;
  }
  .sca-flow__svg, .sca-flow__glow { display: none; }
  .sca-flow__stage::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(0, 252, 168, 0.5), transparent);
  }
  .sca-fnode {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    text-align: left;
    padding: 14px 0;
  }
  .sca-fnode__num { flex-shrink: 0; }
  .sca-fnode__tag { margin: 0 0 0 auto; align-self: center; }
  .sca-flow__center {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    text-align: left;
    order: -1;
    margin-bottom: 8px;
  }
}