/* ============================================================================
 * sca-components.css
 * Sistema Consultor Autónomo (SCA) landing — shared components referenced by
 * name from every fold. Implements B9 shared rules, B7 curve roles, B13
 * hierarchy rules and B14 responsive rules.
 *
 * Anything declared here is DEFINED ONCE. A section never re-declares the fill,
 * radius, height or typography of a CTA — it adds a modifier class or nothing.
 * ==========================================================================*/

/* ============================================================================
 * PRIMARY CTA — `.sca-cta`
 *
 * There is exactly ONE action on this page. The label is CTA_LABEL
 * (t('sca_cta_label')), the href is CTA_HREF, and it appears exactly 5 times,
 * character-identical: fold 1, the sticky bar, fold 8, fold 11, fold 14.
 *
 * It is an <a>, never a <button>, never a form submit. Always:
 *   href="https://calendly.com/pineas333/30min" target="_blank" rel="noopener"
 *
 * Hover is translateY(-2px) and nothing else. No glow, no scale, no colour
 * shift, no shadow bloom, no ripple.
 * ==========================================================================*/

.sca-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  height: 56px;
  padding-inline: 28px;
  border-radius: var(--radius-pill);

  background: var(--accent);
  color: var(--on-accent);

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;

  border: none;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;

  /* OVERSHOOT — declared exception 1 of 2. The other is the fold-11 badge pop. */
  transition: transform .3s var(--overshoot), opacity .12s linear;
}

.sca-cta:hover  { transform: translateY(-2px); }
/* Tap feedback: opacity 0.85 for 120ms and nothing else. It submits nothing,
   so it has no submitting state. */
.sca-cta:active { opacity: 0.85; }

.sca-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Label wrapper. Present on all five occurrences so the fold-1 letter-in
   animation has a stable host. */
.sca-cta__label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Trailing chevron — 16×16, currentColor, stroke-width 2. */
.sca-cta__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

/* -- CTA modifiers ---------------------------------------------------------
 * Each adds exactly one thing. None of them re-declares fill, radius, label
 * typography or hover.
 * -------------------------------------------------------------------------*/

/* Sticky bar (fold 0b) — 48px instead of 56px. Everything else identical. */
.sca-cta--compact { height: 48px; }

/* Fold 11 — hosts an absolutely-positioned <canvas> behind the label for the
   pixel sweep. The canvas is DECORATION ON TOP OF A WORKING LINK: if it fails
   to initialise the <a> is still a 56px tap target with a readable label.
   Never make the label a canvas glyph. */
.sca-cta--pixel { overflow: hidden; }
.sca-cta--pixel > canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
}

/* Fold 14 — the second and last gradient node on the page. Two stops of the
   same hue: --accent → --accent-deep. #1cdaff appears in ZERO gradients. */
.sca-cta--gradient {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
}

/* -- Fold-1 load entrance — the two-stage overlapped pop --------------------
 * T.cta = 880ms from body.is-ready.
 *   stage 1  btnPop     0.5s  OVERSHOOT  scale 0 → 1        at +0ms
 *   stage 2  btnExpand  0.55s EASE       41px → final width at +400ms
 *   letters  letterIn   0.35s EASE       per char, step 40ms at +550ms
 *
 * THE OVERLAP IS THE PIECE. Chained in sequence — pop, then expand — the button
 * visibly stutters at the handoff. 41px and the three delays are not
 * negotiable; --btn-final-width is the only number that adapts.
 *
 * Applied by adding `sca-cta--intro` to the fold-1 CTA only. The other four
 * occurrences are scroll reveals via data-reveal="fade".
 * -------------------------------------------------------------------------*/

.sca-cta--intro {
  --btn-final-width: 248px;   /* ES label at 1440px */
  width: 41px;
  padding-inline: 0;
  overflow: hidden;
  animation: btnPop    0.5s  var(--overshoot) 0.88s both,
             btnExpand 0.55s var(--ease)      1.28s both;
}

.sca-cta--intro .sca-cta__letter {
  display: inline-block;
  /* Load-bearing. Each character is its own inline-block, so the space
     characters of the label would collapse to zero width and the button would
     read "Agendarllamada·30min". `pre` preserves them, which lets the renderer
     emit a real U+0020 instead of &nbsp; and keeps this occurrence of the
     label byte-identical to the other four. */
  white-space: pre;
  animation: letterIn 0.35s var(--ease) both;
  /* the renderer writes the per-character delay:
     style="animation-delay: calc(1.43s + {N} * 0.04s)"  — N is the char index */
}

@keyframes btnPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* width is animated here on purpose. It is a click-free ONE-SHOT, not a loop —
   the "never animate width in a loop" rule of B8 still holds everywhere else. */
@keyframes btnExpand {
  from { width: 41px;                    padding-inline: 0;    }
  to   { width: var(--btn-final-width);  padding-inline: 28px; }
}

@keyframes letterIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
 * NEXT-STEP LINE — `.sca-next`
 * The explicit step after the CTA. Mandatory; without it the CTA is a hole.
 * Appears three times, character-identical: folds 1, 11, 14 —
 * t('sca_next_step'). Fold 11 sits on the inverted surface and takes its own
 * colour, which is the only difference between the three.
 * ==========================================================================*/

.sca-next {
  margin-top: 16px;
  max-width: 58ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.sca-fold--inverted .sca-next { color: rgba(11,11,11,0.6); }

/* ============================================================================
 * DOUBLE-ARROW BULLET — `.sca-arrow`
 * A 14×14 clipped slot holding two copies of the same arrow, stacked
 * absolutely. On hover copy A leaves through the right edge as copy B enters
 * from the left, so it reads as ONE arrow travelling through a slot rather than
 * two arrows fading.
 *
 * ARROWSWAP is a symmetric ease-in-out: the exit and the entry mirror each
 * other. 500ms and this curve are what make that legible.
 *
 * Used by the fold-12 list bullets and the primary CTA chevron. Nowhere else.
 * ==========================================================================*/

.sca-arrow {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 4px;
}

.sca-arrow__a,
.sca-arrow__b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sca-arrow__a { transform: translateX(0);     transition: transform .5s var(--arrowswap); }
.sca-arrow__b { transform: translateX(-150%); transition: transform .5s var(--arrowswap); }

.sca-arrow-host:hover .sca-arrow__a,
li:hover > .sca-arrow .sca-arrow__a { transform: translateX(150%); }
.sca-arrow-host:hover .sca-arrow__b,
li:hover > .sca-arrow .sca-arrow__b { transform: translateX(0); }

/* CTA chevron uses the same slot at 16×16 with no top offset. */
.sca-cta .sca-arrow { width: 16px; height: 16px; margin-top: 0; }
.sca-cta:hover .sca-arrow__a { transform: translateX(150%); }
.sca-cta:hover .sca-arrow__b { transform: translateX(0); }

/* ============================================================================
 * SECONDARY ACTION — `.sca-secondary`
 * THE ONLY ONE ON THE PAGE. Fold 14, below the next-step line, above the PS.
 * It is running body text with an underline on hover. It must never read as a
 * second button: Inter 400 (not 500, not 600), 15px, --text-muted, no
 * background, no border, no fill, no --accent, no button padding. Its tap area
 * is padded to 44px vertically with no visible box.
 * ==========================================================================*/

.sca-secondary {
  display: inline-block;
  padding-block: 12px;          /* 15px × 1.4 ≈ 21px line + 24px = 45px tap area */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
}
.sca-secondary a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.sca-secondary a:hover { text-decoration: underline; }

/* ============================================================================
 * RESPONSIVE — the single 768px breakpoint.
 * Nothing on this page is inside a scaled wrapper, so declared px == rendered
 * px and every touch target below can be read straight off this file.
 * ==========================================================================*/

@media (max-width: 768px) {
  /* Primary CTA goes full-width, height stays 56px. */
  .sca-cta { width: 100%; }
  .sca-cta--compact { height: 48px; }
  .sca-cta--intro   { --btn-final-width: 100%; }
}

/* ============================================================================
 * Touch floor — measured, not assumed.
 *
 * A headless Chromium pass over the rendered page found six tappable elements
 * under the 44px minimum at 390x844: the nav wordmark (71x24), both language
 * buttons (30x44 — the WIDTH fails, not the height), and the three social /
 * WhatsApp links (68x20, 80x20, 73x19).
 *
 * They are inline text links, so the fix is padding and a min box, never a
 * font-size bump: growing the type to reach 44px would wreck the hierarchy
 * these links deliberately sit at the bottom of.
 *
 * Scoped under .sca-* so the shared .lang-btn used by the director, developer
 * and client panels is untouched.
 * ==========================================================================*/

.sca-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.sca-nav .lang-btn {
  min-width: 44px;
  min-height: 44px;
}

/* The social and WhatsApp links sit in a row; vertical padding alone would
   stack their hit areas into each other, so the row gets the gap and each
   link gets the box. */
.sca-about__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

/* The WhatsApp link is an inline <a> inside the .sca-secondary paragraph, not
   the paragraph itself — putting the box on .sca-secondary grew the text block
   and left the actual hit area at 21px. inline-block keeps it in the sentence
   flow while giving it a real box. */
.sca-about__links a,
.sca-secondary a {
  display: inline-block;
  min-height: 44px;
  padding-block: 11px;
  line-height: 22px;
  vertical-align: middle;
}

/* Nav links: 23px tall as inline text. Below 768px they stack into the mobile
   dropdown and already clear 44px, so this only matters for the desktop row —
   but a 23px pointer target is small for anyone, mouse or not. */
.sca-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}