/* Fini Empresas — page styles: hero, logos, tabs, radial, comparison, metrics */

/* Lead hero variant */
.emp-hero--lead .emp-stats { margin-top: 22px; gap: 56px; }
.emp-hero--lead .h-display { font-size: clamp(46px, 7vw, 100px); }
/* Page-scoped: deepen the lower-central wash so the lede + mono stat labels
   read comfortably over the watercolor, without flattening the photo up top or
   the leaves at the edges. RUN3 P5: wash alphas eased ~0.85× (photo warmth was
   washed to near-invisibility); the 90%/100% stops keep their full page-bg
   blend so the hero→logos seam stays invisible. */
.emp-hero--lead .hero__scrim {
  background:
    radial-gradient(58% 44% at 50% 66%, rgba(247,252,240,0.49) 0%, rgba(247,252,240,0.26) 52%, rgba(247,252,240,0) 100%),
    radial-gradient(52% 40% at 50% 42%, rgba(247,252,240,0.36) 0%, rgba(247,252,240,0.12) 60%, rgba(247,252,240,0) 100%),
    linear-gradient(180deg, rgba(247,252,240,0.51) 0%, rgba(247,252,240,0.08) 22%, rgba(247,252,240,0.11) 55%, rgba(248,249,246,0.94) 90%, rgb(248,249,246) 100%);
}
.emp-stats { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 10px; }
.emp-stat__num { font-size: clamp(28px, 3vw, 40px); font-weight: 620; letter-spacing: -0.02em; color: var(--green-ink); }
.emp-stat__label { font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--warm-gray); margin-top: 5px; }

/* Nav */
.emp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 1.25em; pointer-events: none; }
.emp-nav__bar { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 34em; padding: 0.65em 1.25em; background: rgba(253,255,250,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: var(--hairline-soft); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.emp-nav__bar img { height: 30px; display: block; }
.emp-nav__links { display: flex; align-items: center; gap: 18px; }
.emp-nav__link { font-size: var(--text-sm); font-weight: 560; color: var(--green-ink); }
.emp-nav__cta { height: 38px; padding: 0 18px; border-radius: var(--radius-md); background: var(--lime-200); color: var(--green-ink); font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; }
.emp-nav__cta:hover { background: var(--lime-500); color: var(--green-ink); }

/* Logos strip */
.emp-logos { padding: 40px 0 90px; }
.emp-logos__label { text-align: center; font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--warm-gray); margin-bottom: 28px; }
.emp-logos__row { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
.emp-logos__row image-slot { display: block; width: 150px; height: 52px; opacity: 0.75; }

/* ---------- Tab System (autoplay) ---------- */
.tab-layout__wrap { z-index: 1; row-gap: 3em; flex-flow: wrap; display: flex; position: relative; }
.tab-layout__col { width: 50%; }
.tab-content__wrap { width: 100%; max-width: 34em; height: 100%; margin-right: auto; }
.tab-content__inner { column-gap: 3em; row-gap: 3em; flex-flow: column; justify-content: space-between; align-items: flex-start; min-height: 100%; padding: 1em 2.5em 0 0; display: flex; }
.tab-content__bottom { flex-flow: column; justify-content: space-between; align-items: stretch; width: 100%; margin: 0; padding: 0; display: flex; }
.tab-content__item { color: var(--green-ink); width: 100%; padding: 1.7em 0; text-decoration: none; transition: opacity 0.25s; position: relative; }
.tab-content__item:hover { color: var(--green-ink); }
.tab-content__item-main { column-gap: 1.6em; justify-content: flex-start; align-items: flex-start; width: 100%; display: flex; }
.content-item__nr { color: var(--paper-50); background-color: var(--green-ink); border: 1px solid var(--green-ink); border-radius: 100em; justify-content: center; align-items: center; width: 2.6em; height: 2.6em; margin-top: 0.2em; font-family: var(--font-label); font-size: var(--text-sm); font-weight: 500; transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1); display: flex; flex: none; }
.content-item__heading { margin: 0; font-size: clamp(1.4em, 2vw, 1.9em); font-weight: 560; letter-spacing: -0.02em; line-height: 1.05; }
.tab-content__item-detail { width: 100%; height: 0; padding-left: 4.2em; overflow: hidden; }
.tab-description { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--ink-500); text-wrap: pretty; }
.tab-description__spacer { padding-top: 1em; }
.tab-content__item-bottom { background-color: #e5eadb; width: 100%; height: 1px; transition: background-color 0.2s; position: absolute; inset: auto 0% 0%; }
.tab-progress { transform-origin: 0%; transform-style: preserve-3d; background: linear-gradient(90deg, var(--lime-bright), var(--green-leaf)); width: 100%; height: 1.5px; transform: scale3d(0, 1, 1); }
.tab-visual__wrap { aspect-ratio: 1.45; width: 100%; position: relative; }
.tab-visual__item { visibility: hidden; justify-content: flex-start; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; }
.tab-visual__item.active { visibility: visible; }
.tab-visual__inner { border: var(--hairline-soft); background: var(--paper-0); border-radius: var(--radius-lg); width: 100%; height: 100%; padding: 0.5em; overflow: hidden; }
.tab-visual__inner .tab-image { position: relative; border-radius: 12px; width: 100%; height: 100%; overflow: hidden; }
.tab-visual__inner image-slot { position: absolute; inset: 0; }

/* ---------- Radial Cards Slider ---------- */
.emp-radial { overflow: clip; padding-bottom: 60px; }
/* Edge-fade: the wheel's cards dissolve softly as they arc off the left/right
   edges ("fading away"). The section's border-box == its overflow:clip region,
   so masking here adds no extra clipping. Two composited layers (default
   mask-composite:add = union): (1) a gentle horizontal fade at the L/R edges;
   (2) a vertical guard that keeps the top band (heading + lede) and bottom band
   (slider controls) fully opaque — needed at narrow widths where those span
   nearly the full width. Background-agnostic (works over the paper gradient),
   pointer-events untouched, no animation (reduced-motion safe). */
.emp-radial {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 23%, transparent 23%, transparent 81%, #000 81%, #000 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 23%, transparent 23%, transparent 81%, #000 81%, #000 100%);
}
.radial-gsap-slider { row-gap: 4em; flex-flow: column; justify-content: center; align-items: center; width: 100%; padding-top: 2em; display: flex; position: relative; }
[data-radial-slider-init] { --slider-rotate: 20deg; --slider-radius: 375%; }
.radial-gsap-slider__collection { max-width: 100%; position: relative; }
.radial-gsap-slider__list { -webkit-user-select: none; user-select: none; will-change: transform; touch-action: pan-y; backface-visibility: hidden; justify-content: center; align-items: center; max-width: 100%; display: flex; position: relative; }
[data-radial-slider-list] > :first-child { position: relative; }
.radial-gsap-slider__item { width: 19em; transform-origin: 50% var(--slider-radius); flex: none; position: absolute; }
[data-radial-slider-drag-status="grab"] .radial-gsap-slider__list { cursor: grab; }
[data-radial-slider-drag-status="grabbing"] .radial-gsap-slider__list { cursor: grabbing; }
.rad-card { color: var(--green-ink); background: var(--paper-0); border: var(--hairline-soft); box-shadow: 0 12px 32px rgba(20,40,8,0.07); border-radius: var(--radius-lg); flex-flow: column; align-items: flex-start; width: 100%; padding: 0.7em; display: flex; }
.rad-card__media { aspect-ratio: 8 / 7; border-radius: 12px; width: 100%; position: relative; overflow: hidden; background: var(--paper-150); display: flex; align-items: center; justify-content: center; }
.rad-card__media i { width: 64px; height: 64px; display: block; }
.rad-card__media i svg { width: 64px; height: 64px; }
.rad-card__info { justify-content: space-between; align-items: center; width: 100%; padding: 1em 0.5em 0.7em; display: flex; gap: 8px; }
.rad-card__h { margin: 0; font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.rad-card__num { font-family: var(--font-label); font-size: var(--text-sm); color: var(--warm-gray); }
[data-radial-slider-item-status="active"] .rad-card { border-color: var(--lime-500); box-shadow: 0 0 0 1px var(--lime-500), 0 18px 44px rgba(20,40,8,0.1); }
.radial-gsap-slider__controls { column-gap: 1em; justify-content: center; align-items: center; padding: 0 3em; display: flex; position: relative; }
.radial-gsap-slider__control-btn { z-index: 1; color: var(--green-ink); letter-spacing: -0.02em; cursor: pointer; background: var(--paper-0); border: 1px solid var(--ink-100); border-radius: 50em; height: 3em; padding: 0 1.5em; font-size: 1em; font-weight: 600; position: relative; transition: background 160ms; }
.radial-gsap-slider__control-btn:hover { background: var(--lime-100); }
.radial-gsap-slider__control-btn.is--next { color: var(--green-ink); background: var(--lime-200); border-color: transparent; }
.radial-gsap-slider__control-btn.is--next:hover { background: var(--lime-500); }
.radial-gsap-slider__dots { justify-content: center; align-items: center; gap: 6px; display: flex; }
.radial-gsap-slider__control-dot { z-index: 1; color: #d5ddc9; cursor: pointer; background-color: currentColor; border: none; border-radius: 50em; width: 0.6em; height: 0.6em; padding: 0; font-size: 1em; transition: color 0.15s ease; position: relative; overflow: hidden; }
.radial-gsap-slider__control-dot[data-radial-slider-control-status="active"] { color: var(--green-leaf); }

/* ---------- Comparison table ---------- */
.comparison-wrap { width: 100%; position: relative; --columns-in-view: 3; border: var(--hairline-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-0); }
.comparison-header { z-index: 10; background-color: var(--paper-0); border-bottom: 1px solid #e5eadb; display: flex; position: sticky; top: 0; }
.comparison-header__corner { min-width: 0; max-width: calc(100% / (var(--columns-in-view) + 1)); flex: 1; }
.comparison-header__list { display: flex; }
.comparison-header__col { row-gap: 0.4em; text-align: center; min-width: 0; max-width: calc(100% / var(--columns-in-view)); flex-flow: column; flex: 1; justify-content: center; align-items: center; padding: 1.6em 0.5em; display: flex; }
.comparison-header__inner { flex: var(--columns-in-view); min-width: 0; max-width: calc(var(--columns-in-view) * 100% / (var(--columns-in-view) + 1)); }
.comparison-header__name { letter-spacing: -0.02em; margin: 0; font-size: 1.4em; font-weight: 600; line-height: 1; color: var(--green-ink); }
.comparison-header__name em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--green-deep); }
.comparison-header__meta { margin: 0; font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.02em; font-weight: 500; line-height: 1; color: var(--warm-gray); }
.comparison-row { border-bottom: 1px solid #eef1e8; display: flex; }
.comparison-row:last-child { border-bottom: none; }
.comparison-row:nth-of-type(even) { background: var(--paper-50); }
.comparison-row__name { max-width: calc(100% / (var(--columns-in-view) + 1)); flex: 1; justify-content: flex-start; align-items: center; padding-left: 1.5em; padding-right: 1.25em; display: flex; }
.comparison-row__cells { flex: var(--columns-in-view); max-width: calc(var(--columns-in-view) * 100% / (var(--columns-in-view) + 1)); display: flex; }
.comparison-row__h { margin: 0; font-size: var(--text-md); font-weight: 560; color: var(--green-ink); }
.comparison-row__pill { color: var(--green-deep); background-color: var(--lime-100); border-radius: 100em; margin: 0; padding: 0.5em 0.75em; font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.02em; line-height: 1; position: relative; }
.comparison-row__cell { text-align: center; min-width: 0; max-width: calc(100% / var(--columns-in-view)); flex-flow: column; flex: 1; justify-content: center; align-items: center; padding: 1.4em 1em; display: flex; }
.comparison-row__label { margin: 0; font-size: var(--text-sm); font-weight: 540; line-height: 1.2; color: var(--ink-500); }
.comparison-row__icon { aspect-ratio: 1; color: var(--green-success); width: 1.25em; }
.comparison-row__cell[aria-label="not included"] .comparison-row__icon { color: #c9cfc0; }
.comparison-cta { margin-top: 28px; display: flex; justify-content: center; }

/* ---------- Metrics band ---------- */
.emp-metrics { background: radial-gradient(60% 50% at 50% 0%, rgba(54,181,96,0.14) 0%, rgba(0,0,0,0) 70%), var(--green-black); }
.emp-metrics .h-section { color: var(--paper-50); }
.emp-metrics .h-section em { color: var(--lime-bright); }
.emp-metrics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.emp-metric { border: 1px solid rgba(253,255,250,0.1); border-radius: var(--radius-lg); padding: 34px 30px; background: rgba(253,255,250,0.04); }
.emp-metric__num { font-size: clamp(38px, 4vw, 56px); font-weight: 620; letter-spacing: -0.025em; line-height: 1; color: var(--lime-bright); font-variant-numeric: tabular-nums; }
.emp-metric__label { margin-top: 12px; font-size: var(--text-sm); color: rgba(253,255,250,0.65); line-height: 1.45; }
.emp-quote { margin-top: 56px; max-width: 760px; }
.emp-quote__text { font-size: clamp(22px, 2.6vw, 32px); font-weight: 540; letter-spacing: -0.02em; line-height: 1.25; color: var(--paper-50); text-wrap: pretty; }
.emp-quote__text em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--lime-bright); }
.emp-quote__who { margin-top: 20px; font-size: var(--text-sm); color: rgba(253,255,250,0.55); }
.emp-quote__who strong { color: var(--paper-50); font-weight: 600; }

/* CTA */
.emp-cta { padding: 160px 0 170px; }
.emp-cta__content { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }

@media screen and (max-width: 991px) {
  .emp-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .tab-layout__col { width: 100%; }
  .tab-content__inner { padding: 0; }
  .emp-metrics__grid { grid-template-columns: 1fr; }
  .emp-nav__links .emp-nav__link { display: none; }
  [data-radial-slider-init] { --slider-rotate: 14deg; --slider-radius: 475%; }
  .radial-gsap-slider__item { width: 15em; }
}
@media screen and (max-width: 767px) {
  .comparison-header__corner { display: none; }
  .comparison-header__inner { max-width: none; }
  .comparison-header__name { font-size: 1.1em; }
  .comparison-row { flex-flow: column; justify-content: flex-start; align-items: stretch; }
  .comparison-row__name { max-width: none; padding-top: 1em; padding-bottom: 0.4em; }
  .comparison-row__cells { max-width: none; }
  .comparison-row__cell { padding-top: 0.8em; padding-bottom: 1.4em; }
}

/* ---------- v2 production port: utilities replacing design inline styles ----- */
.emp-stats.is--center { justify-content: center; }
.emp-logo {
  display: flex; align-items: center; justify-content: center;
  width: 150px; height: 52px; opacity: 0.72;
  font-weight: 620; font-size: 18px; letter-spacing: -0.01em;
  color: var(--green-olive);
  filter: grayscale(1);
  white-space: nowrap;
}
.emp-logo .is--mono { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.02em; }
.emp-logo .is--accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.emp-sec-tight { padding-top: 0; }
.emp-sec-beneficio { padding-top: 60px; }
.emp-sec-paper { background: var(--paper-0); border-top: var(--hairline-soft); border-bottom: var(--hairline-soft); }
.emp-sec-paper-top { background: var(--paper-0); border-top: var(--hairline-soft); }
.emp-cta__h { max-width: 820px; }
.emp-cta__lede { max-width: 480px; }
/* slot fills inside tab image + radial media cover their region */
.tab-image .slot-fill { position: absolute; inset: 0; }
/* emp-fin invoice mini-UI extras */
.fill-shot.is--emp-fin .acuse-doc__lines,
.fill-shot.is--emp-rh .mock-feed { width: 100%; }
.tab-content__item { cursor: pointer; }

/* === RUN4 scene-motifs === */
/* Radial wheel media were bare icon-on-panel tiles. Each now gets a faint
   background UI fragment echoing its card's concept, kept well below the icon
   so the icon stays the hero. Static, decorative, aria-hidden; the section's
   edge-fade mask still fades each card (and its motif) as a unit at the wheel's
   left/right rim. Sized in em against the fixed 19em card so it reads at the
   wheel scale; the icon is lifted above the motif. */
.rad-card__media > i { position: relative; z-index: 1; }
.rad-motif {
  position: absolute;
  inset: 12% 15%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-ink);
  opacity: 0.16;
  pointer-events: none;
}
.rad-motif svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* line-based motifs (spark / checks): stroke; block motifs: fill */
.rad-motif.is--saldo svg path,
.rad-motif.is--decl svg path,
.rad-motif.is--copi svg rect,
.rad-motif.is--doc svg rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rad-motif.is--saldo svg circle { fill: currentColor; stroke: none; }
.rad-motif.is--decl svg rect,
.rad-motif.is--buzon svg rect,
.rad-motif.is--buzon svg circle,
.rad-motif.is--copi svg circle.dot,
.rad-motif.is--doc svg rect.ln,
.rad-motif.is--bars svg rect { fill: currentColor; stroke: none; }
.rad-motif.is--doc svg rect.front { fill: var(--paper-0); }
/* the stacked-doc front panel needs its own fill so the back panel reads behind
   it; nudge the whole motif a hair fainter where lines are dense */
.rad-motif.is--decl, .rad-motif.is--buzon { opacity: 0.15; }
.rad-motif.is--saldo, .rad-motif.is--bars { opacity: 0.18; }
/* active card sits on brighter lime — keep its motif from disappearing */
[data-radial-slider-item-status="active"] .rad-motif { opacity: 0.2; }