/* ============================================================================
   Licita Radar — Header, hero, footer
   Content sections (problem → CTA) are appended in later phases.
   ========================================================================== */

/* ---- Header -------------------------------------------------------------- */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Solid-ish only after the user scrolls — the hero stays cinematic at rest */
.header.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border-subtle);
}

.header__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* ---- Brand lockup --------------------------------------------------------
   The shipped logo asset (assets/images/logo-licita-radar.png) is a square,
   heavily padded, stacked lockup — it reads as a smudge at header size and its
   navy outer ring disappears on a dark background. This rebuilds the same
   marks (target + LICITA / RADAR wordmark) as a horizontal SVG + text lockup:
   crisp at any size, correct optical weight, no image request.              */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.brand__mark { flex: none; width: 38px; height: 38px; }
.brand__mark .ring-out { stroke: var(--text); opacity: 0.28; }
.brand__mark .ring-mid { stroke: var(--brand-teal); }
.brand__mark .dot      { fill: var(--brand-green); }
.brand__mark .needle   { stroke: var(--brand-green-bright); }

.brand__word {
  display: grid;
  gap: 0.18em;
  line-height: 1;
}

.brand__word b {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* compensate trailing tracking so the block optically centers */
  color: var(--brand-green-bright);
}

.brand__word i {
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  color: var(--text-muted);
}

.brand--lg .brand__mark { width: 52px; height: 52px; }
.brand--lg .brand__word b { font-size: 1.4rem; }
.brand--lg .brand__word i { font-size: 0.72rem; }

@media (max-width: 480px) {
  .brand__word b { font-size: 0.92rem; letter-spacing: 0.26em; text-indent: 0.26em; }
  .brand__mark { width: 32px; height: 32px; }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
}

/* nowrap is load-bearing, and the inline padding is sized around it: these are
   flex items, so without it they shrink to their longest word instead of
   overflowing, and a two-word label silently stacks into two lines while the
   one-word links stay on one — which is exactly what "El problema", "Cómo
   funciona" and "Ventaja IA" did. The row must actually fit; see the note on
   the breakpoint below for the budget. */
.header__link {
  padding: 0.5rem 0.6rem;
  font-size: var(--step--1);
  font-weight: 520;
  color: var(--text-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.header__link:hover { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* 1260, not 900: with seven section links the row runs out of room well before
   the tablet breakpoint and the primary CTA gets clipped off the right edge.
   Raise this again if another link is added — it was 1150 at six links.

   The nav's budget is capped, not viewport-driven: .header__inner tops out at
   --measure (1180px), so past ~1280px a wider monitor buys the row nothing —
   it always gets 1180 − brand (≈133) − actions (≈306) − 2 × --sp-5 (48)
   ≈ 693px. Seven links at 0.85rem inline padding wanted 696.5px and so never
   fit at ANY size; at 0.6rem they measure ≈640px.

   Slack is tightest at this breakpoint, not at the cap: at 1261px the header
   is still gutter-limited (inner ≈1154px), and 0.7rem padding landed there at
   exactly 0px to spare. The remaining margin has to survive a font swap — the
   stack is system fonts, so these same seven labels are set in Segoe UI here,
   -apple-system on macOS, Arial on Linux. Measured at that width: ~22px spare
   in Segoe UI, ~26px in Arial/Helvetica. Adding a link (or widening the CTA
   block) spends that: re-measure the row instead of assuming, since with
   white-space: nowrap it now overflows visibly instead of hiding the problem
   in wrapped labels. */
@media (max-width: 1260px) {
  .header__nav { display: none; }
  .header__actions { margin-inline-start: auto; }
}

@media (max-width: 480px) {
  .header__actions .btn--primary { display: none; }
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)) clamp(4rem, 9vw, 8rem);
  padding-inline: var(--gutter);
  overflow: hidden;
}

/* Layer 1 — aurora mesh. Three offset radial gradients read as one soft light
   source; cheaper and crisper than a background image at any resolution.
   Deliberately no filter: blur() — the gradients are already soft, and blurring
   a viewport-sized layer is one of the most expensive things a page can do. */
.hero__aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  background:
    radial-gradient(48% 42% at 68% 18%, rgb(46 204 138 / 0.20), transparent 68%),
    radial-gradient(52% 46% at 18% 4%,  rgb(26 100 100 / 0.34), transparent 70%),
    radial-gradient(40% 38% at 88% 72%, rgb(14 45 61 / 0.85), transparent 72%);
  pointer-events: none;
}

/* Layer 2 — technical grid, masked to fade out toward the edges */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, var(--white-a04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--white-a04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(72% 60% at 50% 32%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* Layer 3 — bottom fade into the next section */
.hero::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 22%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { justify-items: center; }
  .hero__badge, .hero__cta, .hero__trust { justify-content: center; }
  /* width:100% is load-bearing — `margin-inline:auto` alone makes this grid
     item shrink-to-fit, and .radar's `width:100%` then resolves against an
     indefinite width and collapses the whole visual to 0×0. */
  .hero__visual { order: -1; width: 100%; max-width: 380px; margin-inline: auto; }
}

.hero__copy { display: grid; gap: var(--sp-4); justify-items: start; }
@media (max-width: 940px) { .hero__copy { justify-items: center; } }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.6em;
  justify-self: start;
  padding: 0.4rem 0.5rem 0.4rem 0.4rem;
  font-size: var(--step--1);
  font-weight: 560;
  color: var(--text-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--white-a04);
  backdrop-filter: blur(8px);
}
@media (max-width: 940px) { .hero__badge { justify-self: center; } }

.hero__badge b {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #042118;
  background: var(--brand-green);
  border-radius: var(--r-pill);
}

/* Sized against the column, not the viewport: at --step-6 the headline broke
   into four short, ragged lines inside a ~600px column. */
.hero h1 {
  font-size: clamp(2.3rem, 1.1rem + 2.6vw, 4rem);
  max-width: 17ch;
}
@media (max-width: 940px) { .hero h1 { max-width: 18ch; margin-inline: auto; } }

.hero__lead { max-width: 46ch; }
@media (max-width: 940px) { .hero__lead { margin-inline: auto; } }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-2);
}

.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.hero__trust li { display: flex; align-items: center; gap: 0.5em; list-style: none; }
.hero__trust svg { color: var(--brand-green); flex: none; }
.hero__trust ul { display: contents; }

/* ---- Hero visual: radar ---------------------------------------------------
   Pure SVG + CSS. The sweep is a conic gradient rotated on its own layer, so
   only `rotate` animates (compositor-only, no layout/paint per frame).        */

.radar {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.radar__glow {
  position: absolute; inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--green-a16) 0%, rgb(46 204 138 / 0.06) 44%, transparent 68%);
}

.radar__rings { position: absolute; inset: 0; }
.radar__rings circle { fill: none; stroke: var(--white-a08); }
.radar__rings .ring--lit { stroke: var(--green-a16); }
.radar__rings line { stroke: var(--white-a04); }

.radar__sweep {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgb(46 204 138 / 0.42) 0deg,
    rgb(46 204 138 / 0.10) 26deg,
    transparent 72deg,
    transparent 360deg
  );
  animation: radar-sweep 5.5s linear infinite;
  will-change: rotate;
}

@keyframes radar-sweep { to { rotate: 360deg; } }

/* Static vignette over the sweep. Doing the fade here instead of as a
   mask-image on .radar__sweep keeps the animated layer mask-free, so the
   rotation stays a pure compositor transform. */
.radar__vignette {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    transparent 42%,
    transparent 72%,
    color-mix(in srgb, var(--bg) 78%, transparent) 100%
  );
  pointer-events: none;
}

/* Blips — each fades up on the beat the sweep passes it, then decays.
   Only opacity and scale are animated: a box-shadow keyframe forces a full
   repaint every frame and was measurably hammering the compositor. */
.radar__blip {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-green-bright);
  box-shadow: 0 0 12px 2px var(--green-a32);
  animation: blip-fade 5.5s var(--ease-out) infinite;
  animation-delay: var(--blip-delay, 0s);
}

/* Expanding ring, drawn as a pseudo-element so the ping is a pure transform */
.radar__blip::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--brand-green-bright);
  animation: blip-ping 5.5s var(--ease-out) infinite;
  animation-delay: inherit;
}

@keyframes blip-fade {
  0%, 6% { opacity: 1; }
  100%   { opacity: 0.28; }
}

@keyframes blip-ping {
  0%      { opacity: 0.7; scale: 1; }
  30%,
  100%    { opacity: 0; scale: 3.4; }
}

/* Floating match chips — real product language on top of the radar */
.radar__chip {
  position: absolute;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 560;
  line-height: 1.25;
  color: var(--text);
  /* Solid on purpose: these float above an animated layer, and a
     backdrop-filter here would force a blur re-render every frame. */
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: chip-float 7s var(--ease-in-out) infinite;
  animation-delay: var(--chip-delay, 0s);
}

.radar__chip .score {
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem; font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #042118;
  background: var(--brand-green);
  border-radius: var(--r-sm);
}

/* Kept inside the radar box: .hero is overflow:hidden, so a chip hanging past
   the right edge gets clipped at narrow desktop widths. */
.radar__chip--a { top: 10%;   left: -4%; }
.radar__chip--b { top: 45%;   right: 0; }
.radar__chip--c { bottom: 12%; left: 2%; }

@keyframes chip-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* On phones the chips must live fully inside the radar box: .hero is
   overflow:hidden and a nowrap chip is wider than the column. Two chips read
   better than three at this size, so the third is dropped rather than shrunk. */
@media (max-width: 700px) {
  .radar__chip {
    font-size: 0.7rem;
    padding: 0.4rem 0.55rem;
    max-width: 76%;
    white-space: normal;
  }
  .radar__chip--a { top: 4%;  left: 0; right: auto; }
  .radar__chip--b { top: auto; bottom: 8%; right: 0; left: auto; }
  .radar__chip--c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .radar__sweep { animation: none; rotate: -18deg; }
  .radar__blip, .radar__blip::after { animation: none; }
  .radar__blip::after { opacity: 0; }
  .radar__chip  { animation: none; }
}

/* ---- Footer -------------------------------------------------------------- */

.footer {
  position: relative;
  padding-block: var(--sp-10) var(--sp-6);
  padding-inline: var(--gutter);
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
}

.footer__inner {
  width: 100%; max-width: var(--measure); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-6);
}

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

.footer__brand .brand { margin-bottom: var(--sp-5); }
.footer__brand p { max-width: 34ch; font-size: var(--step--1); color: var(--text-2); }

/* h3, not h4: jumping straight from the last section h2 to an h4 skips a
   heading level for screen-reader navigation. */
.footer__col h3 {
  margin-bottom: var(--sp-4);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}

.footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.footer__col a {
  font-size: var(--step--1);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--brand-green-bright); }

.footer__bottom {
  width: 100%; max-width: var(--measure); margin: var(--sp-8) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.footer__bottom .nube4 {
  display: flex; align-items: center; gap: 0.55rem;
  margin-inline-start: auto;
}
.footer__bottom .nube4 img {
  height: 34px; width: 34px; object-fit: contain;
  border-radius: var(--r-sm);
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer__bottom .nube4:hover img { opacity: 1; }

@media (max-width: 560px) {
  .footer__bottom .nube4 { margin-inline-start: 0; }
}