/* ============ Fini Landing — production slot fills ============
   Replaces the design-canvas placeholder regions with shipped CSS/SVG craft:
   botanical gradient scenes, mini product shots (mock-* patterns), avatar discs. */

/* ---------- Base: every fill covers its region ---------- */
.slot-fill {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.twostep-nav__visual { position: relative; }

/* ---------- Keyboard focus (token-consistent) ----------
   :focus-visible only — a plain :focus fallback rings mouse clicks
   (e.g. the nav hamburger) which reads as a stuck selected state. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green-leaf);
  outline-offset: 3px;
}

/* ---------- Skip to content (visually hidden until keyboard focus) ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 500; /* above the nav (100) */
  padding: 12px 20px;
  background: var(--lime-200);
  color: var(--green-ink);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(20, 40, 8, 0.18);
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none;
}
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Small utilities (replace repeated inline styles) ---------- */
.section-head.is--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.btn--lg {
  height: 60px;
  padding: 0 36px;
  font-size: 18px;
}
/* No danger token exists yet — keep the raw accent for the "borrar datos" icon. */
.fini-icon--danger { color: #e5484d; }

/* ---------- Layout-stability + hit-target hardening ---------- */
/* The chat typing indicator toggles display (none→flex→none) during its
   scripted sequence; in flow that changes the bento card height ~42px and
   the browser drags the reader's scroll position along (felt as a "jump"
   at the footer). Overlay it on the reply bubble's already-reserved slot
   (the reply holds space at opacity 0) so page height never changes. */
.mock-chat { position: relative; }
.mock-chat .mock-typing { position: absolute; bottom: 0; left: 0; }

/* Footer physics canvas (pointer-events: auto, z-index 3) overlapped the
   bottom ~12px of the social buttons, eating clicks. Interactive rows sit
   above the canvas; falling leaves pass visually behind them. */
.fp-footer .social-share,
.fp-bottom { position: relative; z-index: 4; }

/* ---------- Hero photo ---------- */
.hero__bg img.slot-fill { object-fit: cover; }

/* ---------- Botanical scenes (vida-1..5, emp-4, nav) ---------- */
.fill-scene { background: var(--paper-warm); }
.fill-scene__leaves {
  position: absolute;
  height: auto;
  pointer-events: none;
}
.fill-scene__leaves path:nth-child(1) { fill: rgba(12, 42, 5, 0.30); }
.fill-scene__leaves path:nth-child(2) { fill: rgba(12, 42, 5, 0.20); }
.fill-scene__leaves path:nth-child(3) { fill: rgba(12, 42, 5, 0.38); }
.fill-scene__leaves.is--brand path:nth-child(1) { fill: var(--green-leaf); }
.fill-scene__leaves.is--brand path:nth-child(2) { fill: #d6f597; }
.fill-scene__leaves.is--brand path:nth-child(3) { fill: var(--lime-bright); }
.fill-scene__leaves.is--a {
  left: -7%;
  bottom: -14%;
  width: 58%;
  transform: rotate(12deg);
  opacity: 0.5;
}
.fill-scene__leaves.is--b {
  right: -5%;
  top: -10%;
  width: 34%;
  transform: rotate(-158deg);
  opacity: 0.42;
}

.fill-scene.is--vida1 {
  background:
    radial-gradient(58% 48% at 76% 18%, rgba(252, 244, 222, 0.92) 0%, rgba(252, 244, 222, 0) 62%),
    radial-gradient(95% 85% at 14% 104%, rgba(31, 110, 31, 0.5) 0%, rgba(31, 110, 31, 0) 68%),
    linear-gradient(158deg, var(--lime-200) 0%, #94d967 46%, var(--green-leaf) 100%);
}
.fill-scene.is--vida2 {
  background:
    radial-gradient(52% 44% at 22% 14%, rgba(252, 244, 222, 0.55) 0%, rgba(252, 244, 222, 0) 60%),
    radial-gradient(90% 80% at 86% 108%, rgba(12, 42, 5, 0.55) 0%, rgba(12, 42, 5, 0) 66%),
    linear-gradient(198deg, var(--lime-500) 0%, #4f9a4a 48%, var(--green-deep) 100%);
}
.fill-scene.is--vida2 .fill-scene__leaves.is--a { left: auto; right: -9%; transform: rotate(38deg); }
.fill-scene.is--vida2 .fill-scene__leaves.is--b { right: auto; left: -4%; transform: rotate(-120deg); }
.fill-scene.is--vida3 {
  background:
    radial-gradient(64% 52% at 70% 12%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(100% 70% at 50% 112%, rgba(63, 107, 34, 0.42) 0%, rgba(63, 107, 34, 0) 62%),
    linear-gradient(172deg, var(--paper-cream) 0%, #e2ffb0 44%, var(--lime-500) 100%);
}
.fill-scene.is--vida3 .fill-scene__leaves.is--a { width: 50%; transform: rotate(4deg); }
.fill-scene.is--vida4 {
  background:
    radial-gradient(50% 42% at 82% 20%, rgba(240, 97, 47, 0.16) 0%, rgba(240, 97, 47, 0) 58%),
    radial-gradient(96% 84% at 10% 108%, rgba(20, 40, 8, 0.6) 0%, rgba(20, 40, 8, 0) 64%),
    linear-gradient(150deg, var(--paper-warm) 0%, #c9d99a 42%, var(--green-olive) 100%);
}
.fill-scene.is--vida4 .fill-scene__leaves.is--a { transform: rotate(26deg); width: 62%; }
.fill-scene.is--vida5 {
  background:
    radial-gradient(60% 46% at 30% 12%, rgba(252, 244, 222, 0.95) 0%, rgba(252, 244, 222, 0) 60%),
    radial-gradient(92% 78% at 88% 106%, rgba(31, 110, 31, 0.46) 0%, rgba(31, 110, 31, 0) 64%),
    linear-gradient(164deg, var(--paper-150) 0%, var(--lime-300) 48%, #74c463 100%);
}
.fill-scene.is--vida5 .fill-scene__leaves.is--a { left: auto; right: -8%; transform: rotate(-16deg) scaleX(-1); }
.fill-scene.is--vida5 .fill-scene__leaves.is--b { right: auto; left: -3%; transform: rotate(-172deg); }
.fill-scene.is--emp4 {
  background:
    radial-gradient(62% 50% at 74% 14%, rgba(252, 244, 222, 0.8) 0%, rgba(252, 244, 222, 0) 58%),
    radial-gradient(96% 84% at 16% 106%, rgba(31, 110, 31, 0.44) 0%, rgba(31, 110, 31, 0) 66%),
    linear-gradient(160deg, var(--lime-100) 0%, #b8ec78 48%, var(--green-leaf) 100%);
}

/* Nav menu square: phone mockup with a mini Fini screen on the lime field */
.fill-nav {
  background:
    radial-gradient(78% 66% at 74% 22%, rgba(252, 244, 222, 0.85) 0%, rgba(252, 244, 222, 0) 62%),
    linear-gradient(152deg, var(--lime-200) 0%, var(--lime-500) 58%, var(--green-leaf) 100%);
}
.fill-nav .fill-scene__leaves.is--b {
  right: auto;
  left: -7%;
  top: auto;
  bottom: -10%;
  width: 44%;
  transform: rotate(-24deg);
  opacity: 0.4;
}
.fill-phone {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 56%;
  aspect-ratio: 10 / 19;
  transform: translate(-50%, -50%) rotate(-7deg);
  background: var(--green-ink);
  border-radius: 22px;
  padding: 6px;
  box-shadow:
    0 2px 4px rgba(12, 42, 5, 0.18),
    0 22px 44px rgba(12, 42, 5, 0.32);
}
.fill-phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  background: linear-gradient(180deg, var(--paper-150), var(--paper-50));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 12px 12px;
  position: relative;
}
.fill-phone__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--green-ink);
  opacity: 0.9;
}
.fill-phone__greet { font-size: 10px; font-weight: 560; color: var(--warm-gray); }
.fill-phone__amount {
  font-size: 21px;
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--green-ink);
  font-variant-numeric: tabular-nums;
}
.fill-phone__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--lime-200);
  color: var(--green-ink);
  font-size: 8.5px;
  font-weight: 640;
}
.fill-phone__chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-success);
}
.fill-phone__spark {
  width: 100%;
  height: auto;
  margin-top: auto;
  overflow: visible;
}
.fill-phone__spark path {
  fill: none;
  stroke: var(--green-leaf);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fill-phone__spark circle { fill: #fff; stroke: var(--green-leaf); stroke-width: 2; }
.fill-phone__bar {
  height: 7px;
  border-radius: 4px;
  background: var(--paper-200);
}
.fill-phone__bar.is--w60 { width: 60%; }
.fill-phone__bar.is--w40 { width: 40%; }

/* ---------- Mini product shots (pills + empresas) ---------- */
.fill-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
}
/* Real product screenshots (captured from the live Fini app). The pill
   fills that had a real UI counterpart (anual/mensual/emitir/vigilar/saldo)
   now render an <img> that covers the pane; their .fill-shot.is--* gradient
   backgrounds were removed as fully unused. The product-reveal frame's img
   inherits the .pr-embed height (640/460) and crops from the top. */
.pr-embed--shot { object-fit: cover; object-position: top center; }
.fill-app { display: block; }
.fill-app__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fill-shot.is--copiloto {
  background:
    radial-gradient(66% 58% at 78% 16%, rgba(193, 255, 71, 0.35) 0%, rgba(193, 255, 71, 0) 60%),
    linear-gradient(168deg, var(--paper-150) 0%, var(--paper-warm) 52%, var(--lime-100) 100%);
}
.fill-shot.is--emp1 {
  background:
    radial-gradient(70% 60% at 78% 10%, rgba(252, 244, 222, 0.85) 0%, rgba(252, 244, 222, 0) 60%),
    linear-gradient(158deg, var(--lime-100) 0%, var(--paper-150) 46%, var(--lime-300) 110%);
}
.fill-shot.is--emp2 {
  background:
    radial-gradient(68% 58% at 22% 88%, rgba(54, 181, 96, 0.24) 0%, rgba(54, 181, 96, 0) 60%),
    linear-gradient(200deg, var(--lime-200) 0%, #e2ffb0 52%, var(--paper-150) 100%);
}
.fill-shot.is--emp3 {
  background:
    radial-gradient(70% 58% at 80% 90%, rgba(210, 255, 138, 0.5) 0%, rgba(210, 255, 138, 0) 60%),
    linear-gradient(164deg, var(--paper-warm) 0%, var(--paper-150) 50%, var(--lime-100) 100%);
}

.fill-shot__card {
  width: min(380px, 100%);
  background: var(--paper-0);
  border: var(--hairline-soft);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 6px rgba(20, 40, 8, 0.05),
    0 24px 60px rgba(20, 40, 8, 0.14);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.fill-shot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fill-shot__head img { height: 22px; display: block; }
.fill-shot__year {
  font-family: var(--font-mono-ui);
  font-size: 12px;
  color: var(--warm-gray);
  letter-spacing: 0.06em; /* match the mono-badge treatment (.pr-frame__badge/.hero-dash__year) */
}
.fill-shot__title {
  font-size: 14.5px;
  font-weight: 620;
  color: var(--green-ink);
  letter-spacing: -0.01em;
}
.fill-shot__chip {
  position: absolute;
  top: -13px;
  right: 18px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--lime-200);
  color: var(--green-ink);
  font-size: 12px;
  font-weight: 640;
  box-shadow: 0 8px 20px rgba(20, 40, 8, 0.18);
  white-space: nowrap;
}
.fill-shot__amt {
  font-size: 34px;
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--green-ink);
  font-variant-numeric: tabular-nums;
}
.fill-shot__amt small {
  font-size: 0.42em;
  font-weight: 580;
  color: var(--green-olive);
  letter-spacing: 0;
}
.fill-shot__label {
  font-family: var(--font-mono-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
/* Line placeholders reuse the editorial .acuse-doc__line primitive
   (+ .is--w70/.is--w50, already defined in editorial.css). Only the group
   wrapper is new here. */
.acuse-doc__lines { display: flex; flex-direction: column; gap: 7px; }

.fill-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.fill-chart .fill-chart__grid { stroke: var(--paper-200); stroke-width: 1; }
.fill-chart .fill-chart__area { fill: rgba(54, 181, 96, 0.16); }
.fill-chart .fill-chart__line {
  fill: none;
  stroke: var(--green-leaf);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fill-chart .fill-chart__dot { fill: #fff; stroke: var(--green-leaf); stroke-width: 2.5; }

.fill-shot__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fill-shot__tile {
  background: var(--paper-50);
  border: var(--hairline-soft);
  border-radius: var(--radius-md);
  padding: 16px;
}
.fill-shot__tile-num {
  font-size: 30px;
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--green-ink);
  font-variant-numeric: tabular-nums;
}
.fill-shot__tile-lbl {
  font-family: var(--font-mono-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-top: 7px;
}

.fill-shot__prog {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--paper-200);
  overflow: hidden;
}
.fill-shot__prog i {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lime-bright), var(--green-leaf));
}

/* ---------- Pills cover: brand composition ---------- */
.fill-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(72% 60% at 28% 18%, rgba(252, 244, 222, 0.8) 0%, rgba(252, 244, 222, 0) 62%),
    linear-gradient(158deg, var(--lime-100) 0%, var(--lime-300) 52%, var(--lime-500) 100%);
}
.fill-cover__logo {
  width: min(320px, 56%);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 18px 40px rgba(20, 40, 8, 0.18));
}
.fill-cover .fill-scene__leaves.is--a {
  left: -8%;
  bottom: -16%;
  width: 52%;
  transform: rotate(18deg);
  opacity: 0.28;
}
.fill-cover .fill-scene__leaves.is--b {
  right: -6%;
  top: -14%;
  width: 36%;
  transform: rotate(-146deg);
  opacity: 0.24;
}

/* ---------- Avatar discs — one primitive for the feed shot + testimonials.
   Sized by context: the testimonial slot-fill fills its round-clipped visual;
   the feed shot opts into the fixed 32px .is--sm modifier. Shared gradient set. */
.fill-ava {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.7em;
  font-weight: 640;
  letter-spacing: -0.01em;
  color: var(--green-ink);
}
.fill-ava.is--sm { width: 32px; height: 32px; flex: none; font-size: 13px; }
.fill-ava.is--t1 { background: linear-gradient(135deg, var(--lime-200) 0%, #8fd66a 100%); }
.fill-ava.is--t2 { background: linear-gradient(135deg, var(--paper-warm) 0%, var(--lime-500) 100%); }
.fill-ava.is--t3 { background: linear-gradient(135deg, var(--paper-cream) 0%, var(--lime-300) 100%); }
.fill-ava.is--t4 { background: linear-gradient(135deg, #e4f6d2 0%, #74c463 100%); }

/* ---------- Fit inside the narrower pill pane / sticky column ---------- */
@media screen and (max-width: 1180px) {
  .fill-shot { padding: 1.25em; }
}

.empresas.sticky-features { overflow-x: clip; }