/* ============================================================
   BENÁLAGA HOMEPAGE
   Pixel-perfect WordPress recreation of the Claude Design export.
   Mobile-first, with breakpoints at 640px (tablet) and 1024px (desktop).
   ============================================================ */

/* ---------- Lenis smooth-scroll (required base styles) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Prevent mobile auto text-size adjustment (so the tiny CTA stays tiny) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- Reset & base ---------- */
.ben-page *, .ben-page *::before, .ben-page *::after { box-sizing: border-box; }
/* CRITICAL: .ben-page must NOT have any overflow value other than `visible`
   — setting overflow-x or overflow-y to hidden/clip/auto/scroll creates a
   scroll containing block, which makes nested position:sticky elements
   stick to .ben-page (which doesn't scroll) instead of the viewport.
   We constrain horizontal scroll on the document scroller instead (body). */
.ben-page { margin: 0; padding: 0; background: var(--espresso-900); font-family: var(--font-serif); color: var(--paper-50); }
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }
.ben-page img { max-width: 100%; display: block; }
.ben-page a { color: inherit; }
.ben-page button { font: inherit; }

/* Scrollbars (desktop only) */
.ben-page-root::-webkit-scrollbar { width: 10px; }
.ben-page-root::-webkit-scrollbar-track { background: var(--espresso-950); }
.ben-page-root::-webkit-scrollbar-thumb { background: var(--espresso-700); border-radius: 99px; }

/* Animations */
@keyframes benPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes benFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes benFade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   PERSISTENT NAV (single header, page-level, position: fixed)
   ============================================================ */
.ben-nav-fixed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.5rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, rgba(11,9,7,.55) 0%, rgba(11,9,7,0) 100%);
  pointer-events: auto;
  transition: background var(--dur) var(--ease-out);
}
.ben-nav-fixed.is-solid { background: rgba(11,9,7,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ben-nav-fixed .ben-nav__brand img { height: 38px; }
.ben-nav-fixed .ben-nav__brand-text { font-size: 1.15rem; }

/* ============================================================
   STORYTELLING CONTAINER (single timeline, GSAP-pinned)
   - Outer .ben-story provides the scroll distance (height set by JS).
   - .ben-story__pin is what GSAP ScrollTrigger pins (position: fixed).
   - Inside: stacked videos + atmosphere + text layers, all driven by
     ONE scroll-progress value.
   ============================================================ */
/* Height is provided entirely by ScrollTrigger's pin spacer (pinSpacing: true).
   Do NOT set a vh/svh height here — that was the cause of the pin releasing
   before the timeline finished (vh vs svh mismatch + no reserved spacer). */
.ben-story { position: relative; background: var(--espresso-900); width: 100%; }
.ben-story__pin {
  position: relative;
  height: 100svh;            /* the locked viewport; ST sets position:fixed while pinned */
  overflow: hidden;
  background: var(--espresso-900);
  display: block;
}
/* svh fallback for browsers without small-viewport units */
@supports not (height: 100svh) {
  .ben-story__pin { height: 100vh; }
}

/* Canvas frame-sequence layer (z-index 1) */
.ben-story__videos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ben-story__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  background: var(--espresso-900);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
}
.ben-story__canvas[data-ben-canvas="hero"]     { opacity: 1; }
.ben-story__canvas[data-ben-canvas="ventajas"] { opacity: 0; }

/* High-res stills — crossfade in during dwell moments (velocity-gated by JS).
   v4.5.0: cover-fit to match the canvas's cover-fit (no bars, edge-to-edge).
   object-position mirrors the canvas anchorY: hero on mobile favors upper third
   for face composition, everything else stays centered. */
.ben-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block; pointer-events: none;
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.30, 1);
  will-change: opacity;
  background: var(--espresso-900);
}
.ben-still.is-visible { opacity: 1; }

/* Mobile hero: canvas uses anchorY:0.32 for face-first — mirror it on the still */
@media (max-width: 768px) {
  .ben-still--hero-start { object-position: 50% 32%; }
}

/* Atmosphere overlays (z-index 2) — vignettes, scrims, color washes */
.ben-story__atmo { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: none; }
.ben-story__atmo--hero {
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(11,9,7,0) 30%, rgba(11,9,7,.72) 100%),
    linear-gradient(90deg, var(--espresso-900) 0%, rgba(16,13,10,0) 27%, rgba(16,13,10,0) 73%, var(--espresso-900) 100%),
    linear-gradient(180deg, rgba(16,13,10,.55) 0%, rgba(16,13,10,0) 22%, rgba(16,13,10,0) 70%, var(--espresso-900) 100%);
}
.ben-story__atmo--ventajas {
  background: radial-gradient(70% 70% at 50% 50%, rgba(11,9,7,0) 30%, rgba(11,9,7,.55) 78%, rgba(16,13,10,.85) 100%);
}
.ben-story__atmo--proyectos {
  background: linear-gradient(180deg, rgba(12,22,42,.32) 0%, rgba(9,15,30,.55) 55%, rgba(7,11,22,.7) 100%);
}

/* Gold particles overlay (z-index 3) */
.ben-story__particles { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: 0; }

/* ============================================================
   TEXT LAYERS — cinematic depth-driven transitions
   ============================================================ */
.ben-story__layers { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ben-story__layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: none;
  /* transform + opacity ONLY — no animated blur/filter (Jesko finding) */
  will-change: opacity, transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}
.ben-story__layer[data-active="1"] { pointer-events: auto; }

/* Hero layer */
.ben-story__layer--hero { padding: clamp(4rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 3rem); } /* H1 nudged up via smaller top pad */
.ben-story__layer--hero .ben-hero__copy {
  position: relative; flex: 1; display: grid;
  grid-template-columns: 1fr 1.15fr 1fr; align-items: center;
  padding: 2rem clamp(2.4rem, 6vw, 6rem) 1rem; gap: 1rem; /* extra horizontal pad — more breathing room */
}
/* Body para drifts down a touch (extra separation from the gold rule above) */
.ben-story__layer--hero .ben-hero__left .ben-rule--60 { margin: 1.9rem 0 1.5rem; }
.ben-story__layer--hero .ben-hero__ctaband {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(2.4rem, 6vw, 6rem) 2rem; gap: 1rem;
}

/* Ventajas layer */
.ben-story__layer--ventajas { padding: clamp(5rem, 10vh, 7rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 5vh, 4rem); justify-content: center; }
.ben-story__layer--ventajas .ben-ventajas__top-h { padding-top: 0; }

/* ============================================================
   v4.7.0 — PROYECTOS as final beat of seq2 (in-pin layer)
   The carousel lives INSIDE the pinned story; fades in across the
   final ~30% of the timeline and dwells on screen so the user can
   click prev/next, drag the slider, swipe cards.
   ============================================================ */
.ben-story__layer--proyectos {
  display: flex; flex-direction: column;
  padding: clamp(3rem,6vh,5rem) clamp(1rem,4vw,3rem) clamp(1.5rem,3vh,2.5rem);
}
.ben-story__layer--proyectos[data-active="1"] { pointer-events: auto; }
.ben-story__layer--proyectos[data-active="1"] .ben-carousel,
.ben-story__layer--proyectos[data-active="1"] .ben-dots,
.ben-story__layer--proyectos[data-active="1"] .ben-card--side,
.ben-story__layer--proyectos[data-active="1"] .ben-ba,
.ben-story__layer--proyectos[data-active="1"] .ben-carousel__nav,
.ben-story__layer--proyectos[data-active="1"] .ben-ba__divider { pointer-events: auto; }

.ben-proy-overlay {
  position: relative; z-index: 10;
  width: 100%; max-width: 1320px; margin: 0 auto;
  display: flex; flex-direction: column;
  flex: 1;
}
.ben-proy-overlay > .ben-proyectos__head { text-align: center; }
.ben-proy-overlay > .ben-carousel { flex: 1; margin-top: 1.4rem; }
.ben-proy-overlay > .ben-dots { margin: 1rem 0 1rem; }
.ben-proy-overlay > .ben-metrics { margin: 0 auto; }

/* Proyectos backdrop = seq2 final frame (matches the story's last canvas frame) */


/* Legacy nav (still used inside mobile nav off-canvas + sheet) */
.ben-nav { display: none; }  /* No more in-section navs — superseded by .ben-nav-fixed */
.ben-nav--inline { position: relative; padding: 0; margin-bottom: 1rem; max-width: 1320px; display: none; }
.ben-nav__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; -webkit-text-decoration: none; }
.ben-nav__brand:hover, .ben-nav__brand:focus, .ben-nav__brand:visited { text-decoration: none; }
.ben-nav__brand-text { text-decoration: none; }
.ben-nav__brand img { height: 44px; mix-blend-mode: lighten; }
.ben-nav__brand-text { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.30em; color: var(--paper-50); padding-left: 4px; }
.ben-nav__links { position: relative; display: flex; align-items: center; gap: 2.8rem; }
.ben-nav__links a { font-family: var(--font-serif); font-size: 1.0625rem; letter-spacing: 0.03em; text-decoration: none; color: var(--paper-200); position: relative; padding-bottom: 6px; transition: color var(--dur) var(--ease-out); }
.ben-nav__links a:hover { color: var(--paper-50); }
.ben-nav__links a.is-active { color: var(--paper-50); }

.ben-nav__toggle { display: none; background: none; border: none; color: var(--paper-50); cursor: pointer; padding: 8px; z-index: 40; }

/* Hero copy grid */
.ben-hero__copy { position: relative; z-index: 10; flex: 1; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; padding: 8rem clamp(1.5rem,5vw,4.5rem) 1rem; gap: 1rem; }
.ben-hero__left { max-width: 440px; }
.ben-hero__h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem,4.2vw,4rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--paper-50); margin: 0; }
.ben-hero__lede { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem,2.1vw,1.9rem); color: var(--paper-200); margin: 1.2rem 0 0; }
.ben-hero__lede em { font-style: italic; color: var(--gold-500); }
.ben-rule { display: block; height: 1px; background: var(--gold-600); margin: 1.6rem 0; }
.ben-rule--60 { width: 60px; }
.ben-rule--full { width: 100%; background: var(--hairline-gold); }
.ben-hero__body { font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; color: var(--paper-muted); margin: 0; max-width: 320px; }
.ben-hero__right { justify-self: end; max-width: 400px; margin-top: 7rem; text-align: left; }
.ben-hero__right-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem,2.9vw,2.6rem); line-height: 1.14; color: var(--paper-200); margin: 0; }
.ben-hero__right-h em { font-style: italic; color: var(--gold-500); }
.ben-hero__swipe-row { display: flex; align-items: center; gap: 2.6rem; margin-top: 1.3rem; }
.ben-hero__swipe-label { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-muted); }
.ben-hero__discover { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-500); text-decoration: none; }

/* Hero CTA band */
.ben-hero__ctaband { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem,5vw,4.5rem) 3rem; gap: 1rem; }
.ben-hero__ctaband--split { justify-content: space-between; }
.ben-contact-inline { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--paper-200); font-family: var(--font-sans); font-size: 0.95rem; transition: color var(--dur) var(--ease-out); }
.ben-contact-inline:hover { color: var(--paper-50); }
.ben-contact-inline svg { color: var(--gold-500); flex-shrink: 0; }

/* Pill buttons */
.ben-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; font-family: var(--font-sans); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.01em; border: none; border-radius: var(--radius-pill); padding: 1.15rem 2.4rem; cursor: pointer; transition: all var(--dur) var(--ease-out); }
.ben-btn--cream { background: var(--cream-50); color: var(--ink-900); box-shadow: var(--shadow-glow-light); }
.ben-btn--cream:hover { transform: translateY(-1px); box-shadow: 0 0 1px rgba(255,255,255,.7), 0 22px 64px -14px rgba(243,237,225,.5); }
.ben-btn--gold { background: linear-gradient(180deg, var(--gold-600), var(--gold-700)); color: var(--cream-50); box-shadow: 0 10px 30px -16px rgba(196,154,92,.45); padding: 1rem 1.8rem; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ben-btn--gold:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -16px rgba(196,154,92,.6); }

/* ============================================================
   VENTAJAS
   ============================================================ */
.ben-ventajas { height: 320vh; min-height: calc(320 * 1svh); padding: 0; overflow: visible; display: block; min-height: unset; }
.ben-ventajas__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: 5.5rem clamp(1.5rem,5vw,4.5rem) 5rem; display: flex; flex-direction: column; justify-content: center; background: var(--espresso-900); }
.ben-ventajas__scrim { position: absolute; inset: 0; z-index: 2; background: radial-gradient(70% 70% at 50% 50%, rgba(11,9,7,0) 30%, rgba(11,9,7,.55) 78%, rgba(16,13,10,.85) 100%); pointer-events: none; }
.ben-ventajas__particles { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.ben-ventajas__top-h { position: relative; z-index: 10; text-align: center; margin: 1rem auto 0; max-width: 720px; padding-top: 4rem; }
.ben-ventajas__top-h p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.35rem,2.2vw,1.85rem); line-height: 1.35; color: var(--paper-200); }
.ben-ventajas__top-h .ben-1st { color: var(--gold-500); }
.ben-ventajas__top-h sup { font-size: .62em; }
.ben-stats { position: relative; z-index: 10; max-width: 1280px; margin: 2.5rem auto 0; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: clamp(1rem,3vw,3rem); width: 100%; }
.ben-stats__col { display: flex; flex-direction: column; }
.ben-stat { padding: 1.5rem 0; }
.ben-stat + .ben-stat { border-top: 1px solid var(--hairline-gold); }
.ben-stat__row { display: flex; gap: 16px; align-items: flex-start; }
.ben-stat__icon { color: var(--gold-500); flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.ben-stat__num { font-family: var(--font-serif); font-size: 2.1rem; line-height: 1.05; color: var(--paper-50); }
.ben-stat__label { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.4; margin-top: 4px; color: var(--paper-muted); }
.ben-ventajas__bottom { position: relative; z-index: 10; text-align: center; margin-top: 0.5rem; }   /* moved up — was 1.5rem */
.ben-ventajas__bottom-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem,3.6vw,3rem); line-height: 1.08; color: var(--paper-50); margin: 0 0 0; }   /* smaller cap; bottom margin removed so it doesn't push into CTA */
.ben-ventajas__bottom-h em { font-style: italic; color: var(--gold-500); }

/* ============================================================
   PROYECTOS
   ============================================================ */








.ben-proyectos__head { position: relative; z-index: 10; text-align: center; }
.ben-eyebrow { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400); }
.ben-eyebrow--ink { color: var(--gold-600); }
/* v4.6.0 — smaller, single-line on desktop */
.ben-proyectos__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem,2.4vw,2.2rem); line-height: 1.1; color: var(--paper-50); margin: 0.8rem 0 0; letter-spacing: -0.015em; white-space: nowrap; }
.ben-proyectos__h em { font-style: italic; color: var(--gold-400); }
@media (max-width: 760px) { .ben-proyectos__h { white-space: normal; font-size: 1.5rem; } }

/* Carousel */
.ben-carousel { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; gap: clamp(0.5rem,1.5vw,1.5rem); max-width: 1320px; margin: 2.2rem auto 0; }
.ben-carousel__nav { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--hairline-gold); background: rgba(196,154,92,.06); color: var(--gold-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease-out); }
.ben-carousel__nav:hover { background: rgba(196,154,92,.16); border-color: var(--gold-400); }
.ben-carousel__nav--prev svg { transform: scaleX(-1); }
.ben-carousel__stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; position: relative; min-height: 440px; }
.ben-card { transition: all var(--dur-slow) var(--ease-out); }

/* Side preview cards */
.ben-card--side { transform: scale(0.9); opacity: 0.92; animation: benFloat 7s ease-in-out infinite; width: clamp(180px, 17vw, 250px); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.08); }
.ben-card--side .ben-card__head { padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; }
.ben-card--side .ben-card__brand { font-family: var(--font-sans); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ben-card--side .ben-card__menu { display: flex; flex-direction: column; gap: 3px; }
.ben-card--side .ben-card__menu span { width: 16px; height: 1.5px; }
.ben-card--side .ben-card__body { padding: 0.5rem 1.2rem 1.4rem; }
.ben-card--side .ben-card__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.18; max-width: 14ch; }
.ben-card--side .ben-card__sub { font-family: var(--font-serif); font-size: 0.8rem; margin-top: 8px; }
.ben-card--side .ben-card__img { height: 150px; position: relative; }
.ben-card--side .ben-card__btn { position: absolute; left: 1.2rem; bottom: 1rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-50); background: linear-gradient(180deg, var(--gold-600), var(--gold-700)); padding: 0.45rem 0.9rem; border-radius: 6px; }

/* Center before/after card */
/* ============================================================
   v4.6.0 — BEFORE / AFTER OVERLAY SLIDER (center carousel card)
   ============================================================ */
.ben-card--center {
  width: min(620px, 54vw);
  aspect-ratio: 16 / 10;
  max-height: 56svh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 50px 110px -36px rgba(0,0,0,.8);
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
  background: #000;
}
.ben-ba {
  position: relative;
  width: 100%; height: 100%;
  user-select: none;
  --ba-pos: 50%;
  cursor: ew-resize;
}
.ben-ba.is-dragging { cursor: ew-resize; }
.ben-ba__layer { position: absolute; inset: 0; overflow: hidden; }
/* BEFORE shows only the portion LEFT of --ba-pos */
.ben-ba__layer--before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
/* AFTER shows only the portion RIGHT of --ba-pos */
.ben-ba__layer--after  { clip-path: inset(0 0 0 var(--ba-pos)); }

.ben-ba__mock { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem 1.2rem; overflow: hidden; }
.ben-ba__mock--before { background: var(--cream-50); }
.ben-ba__mock--after  { color: var(--paper-50); }

.ben-ba__after-bg { position: absolute; inset: 0; opacity: .9; }
.ben-ba__mock-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 0.4rem 0.2rem 0; }

/* BEFORE mockup styling */
.ben-ba__mock-nav { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.45rem; border-bottom: 1px solid var(--hairline-cream); }
.ben-ba__mock-brand { font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: var(--ink-900); }
.ben-ba__mock-links { font-family: var(--font-sans); font-size: 0.62rem; color: #4a6ad8; }
.ben-ba__mock-content { padding-top: 0.7rem; }
.ben-ba__mock-h { font-family: var(--font-serif); font-weight: 600; font-size: 0.95rem; color: var(--ink-700); margin: 0; }
.ben-ba__mock-body { font-family: var(--font-sans); font-size: 0.66rem; line-height: 1.55; color: var(--ink-500); margin: 0.5rem 0 0.65rem; max-width: 36ch; }
.ben-ba__mock-hero { height: clamp(70px, 11vw, 140px); border-radius: 4px; margin-bottom: 0.55rem; }
.ben-ba__mock-foot { font-family: var(--font-sans); font-size: 0.58rem; line-height: 1.6; color: var(--ink-500); }
.ben-ba__mock-foot a { color: #4a6ad8; }

/* AFTER mockup styling */
.ben-ba__after-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ben-ba__after-brand { display: flex; align-items: center; gap: 6px; }
.ben-ba__after-brand img { height: 16px; mix-blend-mode: lighten; }
.ben-ba__after-brand span { font-family: var(--font-serif); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.18em; color: var(--paper-50); }
.ben-ba__after-links { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.16em; color: var(--paper-200); }
.ben-ba__after-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0.8rem 0; }
.ben-ba__after-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.55rem); line-height: 1.12; color: var(--paper-50); margin: 0; max-width: 18ch; }
.ben-ba__after-sub { font-family: var(--font-serif); font-size: 0.72rem; color: var(--paper-200); margin: 0.5rem 0 0; max-width: 32ch; line-height: 1.4; }
.ben-ba__after-cta { display: inline-block; margin-top: 0.7rem; align-self: flex-start; font-family: var(--font-sans); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-50); background: linear-gradient(180deg, var(--gold-600), var(--gold-700)); padding: 0.5rem 0.95rem; border-radius: 6px; }
.ben-ba__after-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0.6rem 0 0.2rem; border-top: 1px solid rgba(255,255,255,.12); margin-top: 0.4rem; }
.ben-ba__after-features > div { display: flex; flex-direction: column; gap: 2px; }
.ben-ba__after-feature-t { font-family: var(--font-sans); font-weight: 600; font-size: 0.5rem; letter-spacing: 0.05em; color: var(--paper-50); }
.ben-ba__after-feature-d { font-family: var(--font-sans); font-size: 0.48rem; line-height: 1.4; color: var(--paper-muted); }

/* Badges */
.ben-ba__badge { position: absolute; top: 0.7rem; padding: 0.28rem 0.55rem; border-radius: 99px; font-family: var(--font-sans); font-weight: 600; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; z-index: 3; }
.ben-ba__badge--before { left: 0.7rem; background: rgba(26,22,17,.08); color: var(--ink-300); border: 1px solid var(--hairline-cream); }
.ben-ba__badge--after  { right: 0.7rem; background: rgba(243,237,225,.16); color: var(--paper-50); border: 1px solid rgba(243,237,225,.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Divider line + drag handle */
.ben-ba__divider { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 2px; transform: translateX(-50%); z-index: 4; cursor: ew-resize; outline: none; }
.ben-ba__divider:focus-visible .ben-ba__divider-knob { box-shadow: 0 0 0 3px rgba(196,154,92,.7), 0 6px 16px rgba(0,0,0,.4); }
.ben-ba__divider-line { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; background: var(--cream-50); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.ben-ba__divider-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--cream-50); color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.12); transition: transform var(--dur) var(--ease-out); }
.ben-ba.is-dragging .ben-ba__divider-knob { transform: translate(-50%, -50%) scale(1.08); }

/* Dots */
.ben-dots { position: relative; z-index: 10; display: flex; justify-content: center; gap: 9px; margin: 1.8rem 0 2.4rem; }
.ben-dot { width: 8px; height: 8px; border-radius: 99px; border: none; cursor: pointer; padding: 0; background: rgba(243,237,225,.3); transition: all var(--dur) var(--ease-out); }
.ben-dot.is-active { width: 22px; background: var(--gold-500); }

/* Metrics row */
.ben-metrics { position: relative; z-index: 10; display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 2.6rem; }
.ben-metric { display: flex; align-items: center; gap: 14px; padding: 0 clamp(1.5rem,4vw,3.5rem); }
.ben-metric + .ben-metric { border-left: 1px solid var(--hairline-gold); }
.ben-metric__ico { color: var(--gold-400); display: inline-flex; }
.ben-metric__num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--paper-50); line-height: 1; }
.ben-metric__lbl { font-family: var(--font-sans); font-size: 0.82rem; color: var(--paper-muted); margin-top: 3px; }


/* ============================================================
   TESTIMONIOS
   ============================================================ */
.ben-testimonios { background: radial-gradient(120% 80% at 12% 0%, #efe7d8 0%, var(--cream-100) 42%); padding: 5.5rem clamp(1.5rem,5vw,4.5rem) 5rem; }
.ben-testimonios__head { text-align: center; max-width: 820px; margin: 0 auto; }
.ben-testimonios__head .ben-eyebrow { color: var(--gold-600); }
.ben-testimonios__rule { width: 44px; height: 1px; background: var(--gold-600); margin: 14px auto 0; display: block; }
.ben-testimonios__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem,4.6vw,3.7rem); line-height: 1.06; color: var(--ink-900); margin: 1.4rem 0 1.1rem; }
.ben-testimonios__h em { font-style: italic; color: var(--gold-600); }
.ben-testimonios__sub { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-500); margin: 0; }
.ben-stats-row { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; margin: 2.8rem auto 3rem; max-width: 760px; }
.ben-stats-row__cell { display: flex; gap: 14px; align-items: flex-start; padding: 0 clamp(1.5rem,4vw,3rem); }
.ben-stats-row__sep { width: 1px; height: 42px; background: var(--hairline-cream); }
.ben-stats-row__ico { color: var(--gold-500); margin-top: 2px; }
.ben-stats-row__num { font-family: var(--font-serif); font-size: 1.85rem; line-height: 1; color: var(--ink-900); }
.ben-stats-row__lbl { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-500); margin-top: 3px; }

/* ============================================================
   v4.8.0 — Testimonials infinite-scroll marquee
   3 vertical columns (2 on tablet, 1 on mobile), each scrolling
   at its own pace. The track is rendered with TWO copies of its
   testimonials so translateY(-50%) loops seamlessly. Fade masks
   at top/bottom and pause-on-hover keep it premium.
   ============================================================ */
.ben-tmarquee {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  height: clamp(560px, 78vh, 760px);
  overflow: hidden;
  /* Top + bottom fade reveal */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.ben-tcol {
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.ben-tcol__track {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  animation: ben-tscroll linear infinite;
  animation-play-state: running;
  will-change: transform;
  /* GPU compositing hint */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Distinct durations per column = parallax-like depth */
.ben-tcol--1 .ben-tcol__track { animation-duration: 62s; }
.ben-tcol--2 .ben-tcol__track { animation-duration: 78s; animation-direction: reverse; }
.ben-tcol--3 .ben-tcol__track { animation-duration: 55s; }

/* Pause when user hovers anywhere in the marquee */
.ben-tmarquee:hover .ben-tcol__track,
.ben-tmarquee:focus-within .ben-tcol__track { animation-play-state: paused; }

@keyframes ben-tscroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

/* Optional decorative fade overlays (in addition to mask) for browsers
   without mask-image support — also subtly intensify the top/bottom blur. */
.ben-tmarquee__fade {
  position: absolute; left: 0; right: 0;
  height: 90px; z-index: 3; pointer-events: none;
}
.ben-tmarquee__fade--top { top: 0;    background: linear-gradient(180deg, var(--cream-100) 0%, rgba(239,231,216,.4) 60%, transparent 100%); }
.ben-tmarquee__fade--bot { bottom: 0; background: linear-gradient(0deg,   var(--cream-100) 0%, rgba(239,231,216,.4) 60%, transparent 100%); }

/* Card — refined for the vertical column format */
.ben-tcard {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.7rem 1.5rem;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.ben-tcard:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.ben-tcard__top { display: flex; align-items: center; gap: 14px; }
.ben-tcard__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--hairline-gold), 0 0 0 4px rgba(196,154,92,.08);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); color: var(--cream-50); font-size: 1rem;
  letter-spacing: 0.04em;
}
.ben-tcard__id { min-width: 0; }
.ben-tcard__cat { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-weight: 600; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-600); }
.ben-tcard__name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink-900); line-height: 1.18; }
.ben-stars { display: inline-flex; gap: 2px; color: var(--gold-500); margin-top: 5px; }
.ben-tcard__quote { margin: 1rem 0 0; position: relative; padding-left: 1.2rem; }
.ben-tcard__quote::before { content: "\201C"; position: absolute; left: 0; top: -0.15rem; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-500); line-height: 1; }
.ben-tcard__quote p { margin: 0; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.55; color: var(--ink-700); }
.ben-tcard__metric {
  margin-top: 0.95rem; padding-top: 0.85rem;
  border-top: 1px solid var(--hairline-cream);
  display: flex; align-items: baseline; gap: 0.55rem;
}
.ben-tcard__metric b { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; color: var(--gold-600); line-height: 1; }
.ben-tcard__metric span { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-500); text-transform: lowercase; }

@media (prefers-reduced-motion: reduce) {
  .ben-tcol__track { animation: none; }
  .ben-tmarquee { height: auto; max-height: none; overflow: visible;
    -webkit-mask-image: none; mask-image: none; }
  .ben-tmarquee__fade { display: none; }
}


/* Banner */
.ben-banner { max-width: 1100px; margin: 3.2rem auto 0; }
.ben-banner__inner { background: var(--surface-card); border-radius: var(--radius-lg); padding: 1.5rem 2.2rem; border: 1px solid var(--border-card); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ben-banner__left { display: flex; align-items: center; gap: 20px; }
.ben-banner__ico { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--hairline-gold); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-600); flex-shrink: 0; }
.ben-banner__h { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-900); }
.ben-banner__sub { font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink-500); margin-top: 2px; }

/* ============================================================
   FOOTER
   ============================================================ */


/* ============================================================
   CONTACT SHEET
   ============================================================ */
.ben-sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.ben-sheet.is-open { pointer-events: auto; }
.ben-sheet__overlay { position: absolute; inset: 0; background: rgba(11,9,7,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.ben-sheet.is-open .ben-sheet__overlay { opacity: 1; }
.ben-sheet__panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: min(1180px, 94vw); background: var(--cream-50); border-radius: 28px 28px 0 0; padding: 2.6rem clamp(1.5rem,4vw,3.2rem) 2.4rem; box-shadow: var(--shadow-pop); transition: transform var(--dur-slow) var(--ease-out); }
.ben-sheet.is-open .ben-sheet__panel { transform: translateX(-50%) translateY(0); }
.ben-sheet__close { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--cream-50); border: 1px solid var(--hairline-gold); color: var(--ink-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.ben-sheet__grid { display: grid; grid-template-columns: 0.85fr 2fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
.ben-sheet__h { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; color: var(--ink-900); margin: 0; }
.ben-sheet__rule { display: block; width: 48px; height: 1px; background: var(--gold-500); margin: 1rem 0 1.4rem; }
.ben-sheet__lede { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink-700); margin: 0; }
.ben-sheet__secure { display: flex; align-items: center; gap: 8px; margin-top: 1.6rem; color: var(--ink-300); }
.ben-sheet__secure-txt { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ben-sheet__secure-txt a { color: var(--gold-600); }
.ben-sheet__fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.ben-field { display: flex; flex-direction: column; gap: 8px; }
.ben-field__label { font-family: var(--font-sans); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.ben-field input, .ben-field textarea { font-family: var(--font-sans); font-size: 1.0625rem; color: var(--ink-900); background: transparent; border: none; border-bottom: 1px solid var(--hairline-cream); padding: 0.55rem 0; outline: none; resize: none; transition: border-color var(--dur) var(--ease-out); }
.ben-field input:focus, .ben-field textarea:focus { border-color: var(--gold-500); }
.ben-sheet__msg-row { margin-top: 1.6rem; display: flex; align-items: flex-end; gap: 1.6rem; }
.ben-sheet__msg { flex: 1; }
.ben-sheet__submit { width: 56px; height: 56px; border-radius: 50%; background: var(--espresso-900); color: var(--paper-50); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur) var(--ease-out); }
.ben-sheet__submit:hover { background: var(--gold-600); }

/* ============================================================
   MOBILE NAV (off-canvas)
   ============================================================ */
.ben-mobile-nav { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.ben-mobile-nav.is-open { pointer-events: auto; }
.ben-mobile-nav__overlay { position: absolute; inset: 0; background: rgba(11,9,7,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.ben-mobile-nav.is-open .ben-mobile-nav__overlay { opacity: 1; }
.ben-mobile-nav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 82vw); background: var(--espresso-950); padding: 5rem 2rem 2rem; transform: translateX(100%); transition: transform var(--dur) var(--ease-out); display: flex; flex-direction: column; gap: 1.5rem; }
.ben-mobile-nav.is-open .ben-mobile-nav__panel { transform: translateX(0); }
.ben-mobile-nav__panel a { font-family: var(--font-serif); font-size: 1.25rem; color: var(--paper-50); text-decoration: none; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline-dark); }
.ben-mobile-nav__close { position: absolute; top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--hairline-dark); color: var(--paper-50); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   RESPONSIVE — TABLET (max-width 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .ben-nav-fixed .ben-nav__links { display: none; }
  .ben-nav-fixed .ben-nav__toggle { display: inline-flex; }

  /* Hero layer inside story */
  .ben-story__layer--hero .ben-hero__copy { grid-template-columns: 1fr; padding: 5rem clamp(1.5rem,5vw,4.5rem) 2rem; gap: 1.5rem; }
  .ben-hero__right { justify-self: start; max-width: 100%; margin-top: 0; }
  .ben-story__layer--hero .ben-hero__ctaband { flex-direction: column; gap: 1.4rem; align-items: stretch; }
  .ben-story__layer--hero .ben-hero__ctaband > * { justify-content: center; text-align: center; }

  /* Ventajas layer */
  .ben-stats { grid-template-columns: 1fr; max-width: 600px; gap: 0; }
  .ben-stats__col:nth-child(2) { display: none; }

  /* Story scroll distance is ScrollTrigger-managed (pinMult) — no height here */

  /* Proyectos: collapse carousel to a single center card, hide side previews */
  .ben-carousel { gap: 0.5rem; }
  .ben-carousel__nav { width: 44px; height: 44px; }
  .ben-card--side { display: none; }
  .ben-card--center { width: 90%; max-width: 600px; }
  .ben-metrics { gap: 0; }
  .ben-metric { padding: 0 1.5rem; }

  /* Testimonios */
  /* Testimonios marquee — tablet: 2 columns */
  .ben-tmarquee { grid-template-columns: repeat(2, 1fr); height: clamp(520px, 72vh, 700px); }
  .ben-tcol--3 { display: none; }
  .ben-banner__inner { flex-direction: column; text-align: center; }
  .ben-banner__left { flex-direction: column; text-align: center; }

  /* Contact sheet */
  .ben-sheet__grid { grid-template-columns: 1fr; }
  .ben-sheet__fields { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}

/* ============================================================
   RESPONSIVE — MOBILE (max-width 640px)
   ============================================================ */
@media (max-width: 640px) {
  .ben-nav-fixed { padding: 1rem 1.25rem; }
  .ben-nav-fixed .ben-nav__brand img { height: 30px; }
  .ben-nav-fixed .ben-nav__brand-text { font-size: 0.9rem; letter-spacing: 0.22em; }

  /* Story scroll distance is ScrollTrigger-managed (pinMult 3.6 on mobile) */

  /* ===== HERO LAYER — MOBILE EDITORIAL (intentional split composition) =====
     Upper 62svh = HERO CANVAS only (cover-fit, subject centred & prominent).
     Lower 38svh = TEXT COPY directly below the subject, no gap, no overlap.
     The ventajas canvas remains full-pin so the eye animation still fills the
     viewport when it takes over. Only the hero canvas + hero-start still are
     shrunk to the upper portion. */
  .ben-story__canvas[data-ben-canvas="hero"],
  .ben-still--hero-start {
    bottom: auto;
    height: 62svh;
    height: 62vh;  /* fallback */
  }
  @supports (height: 62svh) {
    .ben-story__canvas[data-ben-canvas="hero"],
    .ben-still--hero-start { height: 62svh; }
  }

  .ben-story__layer--hero {
    padding: 0;
    justify-content: flex-start; /* layer pinned top, copy explicitly positioned in lower 38vh */
  }
  .ben-story__layer--hero .ben-hero__copy {
    display: block;
    grid-template-columns: 1fr;
    padding: calc(62svh + 1rem) 1.4rem 0;
    margin: 0; gap: 0;
    flex: 0 0 auto;
  }
  @supports not (padding-top: 62svh) {
    .ben-story__layer--hero .ben-hero__copy { padding-top: calc(62vh + 1rem); }
  }
  .ben-story__layer--hero .ben-hero__left { max-width: 100%; }
  .ben-story__layer--hero .ben-hero__h1 { font-size: clamp(1.7rem, 6.8vw, 2.1rem); line-height: 1.05; }
  .ben-story__layer--hero .ben-hero__lede { font-size: 0.95rem; margin: 0.4rem 0 0; }
  .ben-story__layer--hero .ben-rule--60 { margin: 0.7rem 0; }
  /* Keep the dense paragraph hidden on mobile */
  .ben-story__layer--hero .ben-hero__body { display: none; }
  /* Compact "parezca" line below the rule */
  .ben-story__layer--hero .ben-hero__right { display: block; justify-self: stretch; max-width: 100%; margin: 0; }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1rem; line-height: 1.18; }
  .ben-story__layer--hero .ben-rule--full { margin: 0.65rem 0 0; }
  .ben-story__layer--hero .ben-hero__swipe-row { display: none; }

  /* Contact strip: single compact centered line above the CTA */
  .ben-story__layer--hero .ben-hero__ctaband {
    padding: 0.5rem 1.4rem 1.5rem; gap: 0.8rem; justify-content: center;
  }
  .ben-story__layer--hero .ben-contact-inline { font-size: 0.7rem; gap: 5px; }
  .ben-story__layer--hero .ben-contact-inline svg { width: 12px; height: 12px; }

  /* Hero atmosphere: confined to the canvas band (top 62svh) with a soft fade
     into the dark espresso of the text band. */
  .ben-story__atmo--hero {
    background:
      linear-gradient(180deg, rgba(11,9,7,0) 0%, rgba(11,9,7,0) 48%, rgba(11,9,7,.55) 60%, rgba(11,9,7,.98) 64%, var(--espresso-900) 65%, var(--espresso-900) 100%);
  }
  .ben-story__proyectos-preview { display: none; }

  /* Ventajas layer */
  .ben-story__layer--ventajas { padding: 4.5rem 1.25rem 4rem; justify-content: flex-start; }
  .ben-ventajas__top-h { padding-top: 0; }
  .ben-ventajas__top-h p { font-size: 1.05rem; }
  /* Pin the bottom heading explicitly well above the CTA so there's clear visual separation */
  .ben-story__layer--ventajas { position: relative; }
  .ben-ventajas__bottom {
    position: absolute;
    left: 1rem; right: 1rem;
    bottom: 7rem;     /* CTA at 2rem + ~32px tall = ~4rem; 7rem = ~48px clear gap above the CTA */
    margin: 0; padding: 0;
    text-align: center;
    z-index: 11;
  }
  .ben-ventajas__bottom-h { font-size: 1.35rem; line-height: 1.1; margin: 0; }
  .ben-stat__num { font-size: 1.55rem; }
  .ben-stat__label { font-size: 0.78rem; }
  /* Tighten ventajas vertical layout so stats don't push the heading off the page */
  .ben-story__layer--ventajas { padding: 3.5rem 1.25rem 6rem; }
  .ben-stat { padding: 0.9rem 0; }

  /* Proyectos */



  .ben-card--center { width: min(320px, 88vw); flex: 0 0 auto; aspect-ratio: 16 / 10; max-height: 38svh; }\n  .ben-carousel__stage { min-height: clamp(180px, 38svh, 240px); gap: 0; }\n  .ben-card { flex: 0 0 auto; }
  .ben-ba__mock-h { font-size: 0.82rem; }
  .ben-ba__mock-body { font-size: 0.6rem; max-width: 100%; }
  .ben-ba__mock-foot { font-size: 0.55rem; }
  .ben-ba__after-h { font-size: 1rem; }
  .ben-ba__after-sub { font-size: 0.66rem; }
  .ben-ba__after-links { display: none; }
  .ben-ba__after-features { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ben-ba__divider-knob { width: 32px; height: 32px; }
  /* v4.7.1 — compact metrics on mobile so the row fits above the floating CTA */
  .ben-metrics { flex-direction: row; align-items: stretch; justify-content: center; gap: 0; max-width: 100%; margin: 0.4rem auto 0; flex-wrap: nowrap; }
  .ben-metric { flex: 1 1 0; flex-direction: column; align-items: center; padding: 0 0.35rem; gap: 2px; text-align: center; min-width: 0; }
  .ben-metric + .ben-metric { border-left: 1px solid var(--hairline-gold); border-top: none; padding-top: 0; margin-top: 0; }
  .ben-metric__ico { display: none; }
  .ben-metric__num { font-size: 0.95rem; }
  .ben-metric__lbl { font-size: 0.56rem; line-height: 1.2; }

  /* Testimonios */
  .ben-testimonios { padding: 4.5rem 1.25rem 4rem; }
  .ben-testimonios__h { font-size: 2rem; }
  .ben-testimonios__sub br { display: none; }
  .ben-stats-row { gap: 1rem; }
  .ben-stats-row__cell { padding: 0 1rem; }
  .ben-stats-row__sep { display: none; }
  /* Testimonios marquee — mobile: 1 column */
  .ben-tmarquee { grid-template-columns: 1fr; height: clamp(520px, 76vh, 640px); gap: 1.2rem; }
  .ben-tcol--2, .ben-tcol--3 { display: none; }
  .ben-tcard { padding: 1.35rem 1.4rem 1.3rem; }
  .ben-banner { padding: 0 0.25rem; }
  .ben-banner__inner { padding: 1.5rem; }
  .ben-banner__h { font-size: 1.25rem; }

  /* Footer */
  .ben-footer { padding: 2.5rem 1.25rem; flex-direction: column; text-align: center; }
  .ben-footer__links { flex-direction: column; gap: 0.8rem; }

  /* Contact sheet */
  .ben-sheet__panel { padding: 2.2rem 1.25rem 2rem; }
  .ben-sheet__h { font-size: 1.9rem; }
  .ben-sheet__fields { grid-template-columns: 1fr; }
  .ben-sheet__msg-row { flex-direction: column; align-items: stretch; }
  .ben-sheet__submit { width: 100%; height: 56px; border-radius: 28px; align-self: stretch; }
}

/* ============================================================
   FLOATING CTA (persistent pill — visible from page load)
   ============================================================ */
/* v4.5.5 — Jesko-class pill: deliberate label weight (12px / 16px line-height) */
.ben-page .ben-fab { position: fixed; left: 50%; bottom: clamp(1.2rem, 2.2vw, 1.7rem); transform: translate(-50%, 0); z-index: 49;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none; border-radius: var(--radius-pill); padding: 8px 14px; cursor: pointer;
  background: var(--cream-50); color: var(--ink-900);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 11px -10px rgba(11,9,7,.28);
  opacity: 1; pointer-events: auto;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.ben-page .ben-fab:hover { transform: translate(-50%, -2px); box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 7px 17px -10px rgba(11,9,7,.38); }
.ben-page .ben-fab svg { display: none; }
body.ben-sheet-open .ben-page .ben-fab { opacity: 0 !important; pointer-events: none !important; transform: translate(-50%, 14px) !important; }
body.ben-noscroll { overflow: hidden; }

@media (max-width: 640px) {
  /* Lift the CTA ~17px higher on mobile per spec (0.9rem → 2rem) */
  .ben-page .ben-fab { font-size: 12px; line-height: 16px; padding: 8px 14px; bottom: 2rem; max-width: calc(100vw - 1.6rem); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ben-card--side, .ben-ventajas__particles circle, .ben-page * { animation: none !important; transition: none !important; }
}

/* v4.6.1 hotfix — extend tablet tier inclusively to 1024px for the marquee */
@media (max-width: 1024px) {
  .ben-tmarquee { grid-template-columns: repeat(2, 1fr); }
  .ben-tcol--3 { display: none; }
}
@media (max-width: 640px) {
  .ben-tmarquee { grid-template-columns: 1fr; }
  .ben-tcol--2 { display: none; }
}


/* v4.7.1 — enriched card content (before-list, after-rating, side stat) */
.ben-ba__before-list { list-style: none; margin: 0.4rem 0 0; padding: 0; border-top: 1px dashed rgba(26,22,17,.18); }
.ben-ba__before-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.22rem 0; font-family: 'Times New Roman', serif; font-size: 0.58rem; color: var(--ink-700); border-bottom: 1px dotted rgba(26,22,17,.1); }
.ben-ba__before-list li b { font-weight: 700; color: var(--ink-900); }
.ben-ba__after-actions, .ben-ba__after-rating { display: inline-block; }
.ben-ba__after-rating { margin-left: 0.7rem; vertical-align: middle; }
.ben-ba__after-rating b { font-family: var(--font-serif); font-weight: 500; font-size: 0.78rem; color: var(--paper-50); margin-right: 0.4rem; }
.ben-ba__after-rating em { font-style: normal; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-muted); }
.ben-card--side .ben-card__stat { margin-top: 6px; font-family: var(--font-sans); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.04em; color: var(--gold-400); }

/* Tighten metrics spacing so the row sits above the floating CTA */
.ben-proy-overlay > .ben-metrics { margin-bottom: clamp(2.8rem, 6vh, 4rem); }
.ben-metric__num { font-size: 1.35rem; }
.ben-metric__lbl { font-size: 0.74rem; }
.ben-metric { padding: 0 clamp(1.2rem, 3.5vw, 2.8rem); gap: 12px; }
@media (max-width: 640px) {
  .ben-story__layer--proyectos { padding: clamp(2rem,5vh,3.2rem) 0.85rem clamp(5rem,12vh,7rem); }
  .ben-proy-overlay__head .ben-proyectos__h { font-size: 1.35rem; }
  .ben-proy-overlay > .ben-carousel { margin-top: 0.8rem; }
  .ben-proy-overlay > .ben-dots { margin: 0.5rem 0 0.4rem; }
  .ben-proy-overlay > .ben-metrics { margin: 0.4rem auto 0; }
}

/* v4.7.3 — soft Projects(dark) → Testimonios(cream) dissolve overlay */
.ben-testimonios { position: relative; }
.ben-testimonios::before { content: ''; position: absolute; left: 0; right: 0; top: -120px; height: 200px; pointer-events: none; z-index: 5; background: linear-gradient(180deg, rgba(17,13,9,0) 0%, rgba(17,13,9,.3) 30%, rgba(239,231,216,.55) 70%, var(--cream-100) 100%); }
.ben-testimonios__head { position: relative; z-index: 6; }
/* v4.7.3 hotfix: hide the contact-sheet close handle until the sheet opens (otherwise it peeks above the panel into the viewport like a chevron-down half-moon) */
.ben-sheet:not(.is-open) .ben-sheet__close { opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); }
.ben-sheet.is-open .ben-sheet__close { opacity: 1; }

/* v4.7.5 — traveling nav-active underline (single subtle 1px gold bar that slides between items) */
.ben-nav__indicator {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-500);
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 540ms cubic-bezier(0.65, 0, 0.18, 1),
    width     540ms cubic-bezier(0.65, 0, 0.18, 1),
    opacity   240ms ease;
  will-change: transform, width;
}
.ben-nav__indicator.is-on { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .ben-nav__indicator { transition: opacity 240ms ease; } }

/* ============================================================
   === v4.8.0 — SERVICIOS section (cinematic dark, central timeline,
   floating client-website mockups, scroll-reveal items) ===
   ============================================================ */
.ben-servicios {
  position: relative; overflow: hidden;
  isolation: isolate;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 8vh, 6rem);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(38,28,18,.85) 0%, rgba(11,9,7,1) 60%, #050402 100%),
    linear-gradient(180deg, #0a0806 0%, #050402 100%);
  color: var(--paper-50);
  min-height: 100svh;
}
.ben-servicios__atmo { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ben-srv-glow {
  position: absolute; display: block; border-radius: 50%; pointer-events: none;
  filter: blur(70px);
}
.ben-srv-glow--tl { top: -8%; left: -6%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(196,154,92,.32) 0%, rgba(196,154,92,0) 70%); opacity: .9; }
.ben-srv-glow--br { bottom: -14%; right: -10%; width: 720px; height: 720px; background: radial-gradient(circle, rgba(186,140,80,.22) 0%, rgba(186,140,80,0) 72%); opacity: .8; }
.ben-srv-glow--cm { top: 38%; left: 50%; width: 480px; height: 480px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(218,176,108,.12) 0%, rgba(218,176,108,0) 70%); opacity: .65; }

/* Floating client-website mockups (decorative, parallax-driven) */
.ben-servicios__mockups { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ben-srv-mock {
  position: absolute;
  width: clamp(170px, 15vw, 240px);
  padding: 0.85rem 0.95rem 1rem;
  background: linear-gradient(180deg, rgba(22,17,12,.78) 0%, rgba(16,12,9,.88) 100%);
  border: 1px solid rgba(196,154,92,.16);
  border-radius: 10px;
  box-shadow: 0 30px 80px -32px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  opacity: .38;
  filter: blur(0.4px);
  will-change: transform;
  transition: opacity 800ms ease;
}
.ben-srv-mock--rest    { top: 7%;  right: 3%; transform: rotate(2.5deg); }
.ben-srv-mock--inmo    { bottom: 14%; right: 1%; transform: rotate(-1.5deg); }
.ben-srv-mock--design  { top: 50%; left: 1.5%; transform: rotate(-2deg); }
.ben-srv-mock--service { bottom: 6%; left: 3%; transform: rotate(1.5deg); }
.ben-srv-mock__bar { display: flex; gap: 4px; margin-bottom: 0.5rem; opacity: .5; }
.ben-srv-mock__bar span { width: 6px; height: 6px; border-radius: 50%; background: rgba(243,237,225,.35); }
.ben-srv-mock__h {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 0.78rem; line-height: 1.25;
  color: rgba(243,237,225,.85);
  margin: 0 0 0.55rem;
}
.ben-srv-mock__img {
  height: 86px; border-radius: 4px;
  background: linear-gradient(135deg, #3a2c1c 0%, #1a1411 100%);
  opacity: .85;
}
.ben-srv-mock__img--rest    { background: linear-gradient(180deg, rgba(11,9,7,.12), rgba(11,9,7,.42)), url('/wp-content/uploads/benalaga-2026/proyectos/restaurante-1-despues.jpg') center/cover; }
.ben-srv-mock__img--inmo    { background: linear-gradient(180deg, rgba(11,9,7,.12), rgba(11,9,7,.42)), url('/wp-content/uploads/benalaga-2026/proyectos/clinica-dental-despues.jpg') center/cover; }
.ben-srv-mock__img--design  { background: linear-gradient(180deg, rgba(11,9,7,.12), rgba(11,9,7,.42)), url('/wp-content/uploads/benalaga-2026/proyectos/cafeteria-despues.jpg') center/cover; }
.ben-srv-mock__img--service { background: linear-gradient(180deg, rgba(11,9,7,.12), rgba(11,9,7,.42)), url('/wp-content/uploads/benalaga-2026/proyectos/club-golf-despues.jpg') center/cover; }

/* Layout */
.ben-servicios__layout { position: relative; z-index: 5; max-width: 1320px; margin: 0 auto; }
.ben-servicios__head { max-width: 540px; margin: 0 0 clamp(2.5rem, 5vh, 4rem); }
.ben-servicios__head .ben-eyebrow { color: var(--gold-400); margin-bottom: 1.3rem; display: block; }
.ben-servicios__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  color: var(--paper-50);
  margin: 0 0 1.6rem;
  letter-spacing: -0.02em;
}
.ben-servicios__h em { font-style: italic; color: var(--gold-400); }
.ben-servicios__sub {
  font-family: var(--font-serif);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: var(--paper-200);
  margin: 0;
  max-width: 420px;
}

/* Timeline + alternating items */
.ben-servicios__timeline {
  position: relative;
  padding: clamp(1rem, 3vh, 2rem) 0 clamp(2rem, 5vh, 3.5rem);
}
.ben-servicios__line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(196,154,92,0) 0%,
    rgba(196,154,92,.45) 8%,
    rgba(196,154,92,.45) 92%,
    rgba(196,154,92,0) 100%);
}
.ben-srv-item {
  position: relative;
  display: flex;
  min-height: 170px;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms cubic-bezier(.18,.6,.22,1), transform 720ms cubic-bezier(.18,.6,.22,1);
}
.ben-srv-item.is-in-view { opacity: 1; transform: translateY(0); }
.ben-srv-item:last-of-type { margin-bottom: 0; }
/* Dot anchored at the central line */
.ben-srv-item__dot {
  position: absolute; left: 50%; top: 14px;
  width: 12px; height: 12px;
  background: var(--paper-50);
  border-radius: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(11,9,7,.95), 0 0 0 4px rgba(196,154,92,.55);
  transition: box-shadow 600ms ease, transform 600ms ease;
}
.ben-srv-item.is-in-view .ben-srv-item__dot { box-shadow: 0 0 0 3px rgba(11,9,7,.95), 0 0 0 5px rgba(196,154,92,.85), 0 0 14px rgba(196,154,92,.5); }
/* Big serif number (positioned across the timeline from the body) */
.ben-srv-item__num {
  position: absolute; top: -8px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--gold-500); opacity: .82;
}
/* Body container */
.ben-srv-item__body { width: clamp(280px, 42%, 460px); }
.ben-srv-item__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--paper-50);
  margin: 0 0 0.5rem;
}
.ben-srv-item__lede {
  font-family: var(--font-serif);
  font-size: 0.92rem; line-height: 1.45;
  color: var(--paper-200);
  margin: 0 0 1rem;
}
.ben-srv-item__list {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.ben-srv-item__list li {
  position: relative;
  font-family: var(--font-sans); font-size: 0.78rem;
  color: var(--paper-200);
  letter-spacing: 0.005em;
  padding-left: 1.05rem;
  line-height: 1.3;
}
.ben-srv-item__list li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23c49a5c%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><path d=%27M4 12 l5 5 L20 7%27/></svg>");
  background-size: contain; background-repeat: no-repeat;
}

/* RIGHT-side items (01, 03, 05): body on right of line, number on left */
.ben-srv-item--right { justify-content: flex-end; padding-left: 50%; }
.ben-srv-item--right .ben-srv-item__body { margin-left: clamp(2rem, 4vw, 4rem); text-align: left; }
.ben-srv-item--right .ben-srv-item__num { right: calc(50% + clamp(1.5rem, 3.2vw, 3.2rem)); }
/* LEFT-side items (02, 04, 06): body on left of line, number on right */
.ben-srv-item--left { justify-content: flex-start; padding-right: 50%; }
.ben-srv-item--left .ben-srv-item__body { margin-right: clamp(2rem, 4vw, 4rem); text-align: right; margin-left: auto; }
.ben-srv-item--left .ben-srv-item__list { justify-content: flex-end; }
.ben-srv-item--left .ben-srv-item__list li { padding-left: 0; padding-right: 1.05rem; }
.ben-srv-item--left .ben-srv-item__list li::before { left: auto; right: 0; }
.ben-srv-item--left .ben-srv-item__num { left: calc(50% + clamp(1.5rem, 3.2vw, 3.2rem)); }

/* Head reveal */
.ben-servicios__head { opacity: 0; transform: translateY(20px); transition: opacity 800ms cubic-bezier(.18,.6,.22,1), transform 800ms cubic-bezier(.18,.6,.22,1); }
.ben-servicios__head.is-in-view { opacity: 1; transform: translateY(0); }

/* CTA pill */
.ben-servicios__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 5vh, 3.5rem); opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
.ben-servicios__cta.is-in-view { opacity: 1; transform: translateY(0); }
.ben-btn--srv-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: 99px;
  border: 1px solid rgba(196,154,92,.45);
  background: linear-gradient(180deg, rgba(22,18,13,.4), rgba(11,9,7,.6));
  color: var(--paper-50);
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.ben-btn--srv-pill:hover { border-color: var(--gold-400); color: var(--gold-400); background: linear-gradient(180deg, rgba(28,22,14,.55), rgba(11,9,7,.75)); }
.ben-btn--srv-pill svg { color: var(--gold-500); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ben-srv-item, .ben-servicios__head, .ben-servicios__cta { opacity: 1 !important; transform: none !important; transition: none; }
  .ben-srv-mock { transform: rotate(0deg) !important; }
}

/* Tablet / narrow desktop */
@media (max-width: 1023px) {
  .ben-servicios { padding: clamp(4rem, 8vh, 6rem) 1.5rem clamp(3rem, 6vh, 5rem); }
  .ben-srv-mock { width: clamp(150px, 18vw, 200px); opacity: .28; }
  .ben-srv-item__body { width: clamp(260px, 44%, 420px); }
}

/* Mobile: stack everything in a single column on the LEFT side of the line */
@media (max-width: 640px) {
  .ben-servicios { padding: 4rem 1.1rem 3.5rem; }
  .ben-servicios__head { margin-bottom: 2.5rem; }
  .ben-servicios__h { font-size: clamp(1.85rem, 7vw, 2.4rem); }
  .ben-servicios__line { left: 18px; }
  .ben-srv-item, .ben-srv-item--right, .ben-srv-item--left { padding: 0 0 0 42px; justify-content: flex-start; min-height: 130px; margin-bottom: 2.5rem; }
  .ben-srv-item__dot { left: 18px; }
  .ben-srv-item__num { position: static; display: block; margin-bottom: 0.35rem; font-size: 1.5rem; opacity: .9; }
  .ben-srv-item__body { width: 100%; text-align: left !important; margin: 0 !important; }
  .ben-srv-item--left .ben-srv-item__list { justify-content: flex-start; }
  .ben-srv-item--left .ben-srv-item__list li { padding-left: 1.05rem; padding-right: 0; }
  .ben-srv-item--left .ben-srv-item__list li::before { left: 0; right: auto; }
  /* Hide some mockups on mobile to avoid clutter */
  .ben-srv-mock--design, .ben-srv-mock--service { display: none; }
  .ben-srv-mock { opacity: .2; width: 130px; }
  .ben-srv-mock--rest { top: 4%; right: 2%; }
  .ben-srv-mock--inmo { bottom: 6%; right: 1%; }
}

/* === v4.8.1 — Servicios refinements ===
   Tighter composition + cinematic top transition that bridges Proyectos
   (night-Fuengirola backdrop) into the Servicios charcoal surface.
   These rules OVERRIDE the corresponding v4.8.0 declarations. */
.ben-servicios { padding-top: clamp(2.5rem, 5vh, 4rem); padding-bottom: clamp(4rem, 8vh, 6rem); }
/* Cinematic top transition: deep blue-tinted overlay fades from the prior Proyectos
   night-coast backdrop into the Servicios warm charcoal. ~220px tall. */
.ben-servicios::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg,
    rgba(10,14,24,.85) 0%,
    rgba(12,12,14,.55) 32%,
    rgba(16,13,10,.18) 65%,
    rgba(11,9,7,0) 100%);
}
.ben-servicios__head { margin-bottom: clamp(1.1rem, 2.5vh, 2rem); }
.ben-servicios__timeline { padding: 0 0 clamp(1rem, 3vh, 2.5rem); }
.ben-srv-item { margin-bottom: clamp(1.6rem, 4vh, 2.8rem); min-height: 150px; }
/* Right-side content: bring much closer to the central line so both sides feel balanced */
.ben-srv-item--right .ben-srv-item__body { margin-left: clamp(0.9rem, 1.6vw, 1.4rem); }
.ben-srv-item--right .ben-srv-item__num { right: calc(50% + clamp(2.2rem, 4vw, 3.6rem)); }
/* Slight asymmetric padding-left on right-side container so 50% mark feels
   tighter to the visual content edge. */
.ben-srv-item--right { padding-left: calc(50% + 4px); justify-content: flex-start; }
.ben-srv-item--left  { padding-right: calc(50% + 4px); }
.ben-srv-item--left  .ben-srv-item__body { margin-right: clamp(0.9rem, 1.6vw, 1.4rem); }
.ben-srv-item--left  .ben-srv-item__num  { left: calc(50% + clamp(2.2rem, 4vw, 3.6rem)); }
/* Slightly tighter body width on desktop for a denser editorial feel */
@media (min-width: 1024px) { .ben-srv-item__body { width: clamp(280px, 38%, 420px); } }
/* Mobile reset — keep all content stacked on the left of the line at narrow widths */
@media (max-width: 640px) {
  .ben-srv-item--right, .ben-srv-item--left { padding-left: 42px !important; padding-right: 0 !important; }
  .ben-srv-item--right .ben-srv-item__body, .ben-srv-item--left .ben-srv-item__body { margin: 0 !important; width: 100%; }
  .ben-servicios::before { height: 160px; }
}

/* === v4.8.2 — progressive scroll-reveal on the Servicios timeline ===
   - line base tone (unfilled) is softer
   - .ben-servicios__line-fill is a gold-glow segment whose height is
     driven by JS, tracking the latest revealed item's dot Y
   - .is-active highlights the most recent dot with a stronger halo */
.ben-servicios__line { background: linear-gradient(180deg, rgba(196,154,92,0) 0%, rgba(196,154,92,.16) 7%, rgba(196,154,92,.16) 93%, rgba(196,154,92,0) 100%); }
.ben-servicios__line-fill {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 0;
  background: linear-gradient(180deg, rgba(196,154,92,.95) 0%, rgba(218,176,108,.95) 100%);
  box-shadow: 0 0 14px rgba(196,154,92,.55), 0 0 28px rgba(196,154,92,.25);
  transform-origin: top center;
  transition: height 380ms cubic-bezier(.18,.6,.22,1);
  will-change: height;
  pointer-events: none;
}
.ben-srv-item.is-active .ben-srv-item__dot {
  background: var(--gold-400);
  box-shadow:
    0 0 0 3px rgba(11,9,7,.95),
    0 0 0 6px rgba(196,154,92,.7),
    0 0 22px rgba(196,154,92,.7),
    0 0 40px rgba(196,154,92,.35);
  transform: translate(-50%, 0) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .ben-servicios__line-fill { transition: none; height: 100% !important; }
}

/* ============================================================
   v4.10.0 — LEAD GENERATION (reference-faithful rebuild)
   - full-bleed coastal bg with cream overlay
   - glass form card with floating gold badge
   - icon-prefixed fields, gold gradient CTA
   - process strip with circle icons + connecting gold rule
   ============================================================ */
.ben-lead {
  position: relative;
  background: var(--cream-100);
  color: var(--ink-900);
  padding: clamp(96px, 11vw, 156px) clamp(20px, 5vw, 88px) clamp(64px, 6vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
.ben-lead__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ben-lead__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; transform: scale(1.06); transition: transform 1400ms var(--ease-out); will-change: transform; }
.ben-lead__bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,248,241,.10) 0%, rgba(251,248,241,0) 30%, rgba(251,248,241,0) 70%, rgba(251,248,241,.10) 100%); }
.ben-lead__bg-leaf--left { position: absolute; left: -60px; top: 36%; width: 280px; height: 320px; background: radial-gradient(60% 60% at 40% 50%, rgba(60,72,40,.45) 0%, rgba(60,72,40,.18) 50%, transparent 75%); filter: blur(18px); opacity: .55; }
.ben-lead__inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }
.ben-lead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 96px); align-items: center; min-height: clamp(520px, 56vw, 700px); }
@media (max-width: 980px) { .ben-lead__grid { grid-template-columns: 1fr; gap: 56px; min-height: 0; } }
/* LEFT COPY */
.ben-lead__copy { max-width: 600px; }
.ben-lead__rule { display: block; width: 60px; height: 1.5px; background: var(--gold-500); margin: 0 0 28px; }
.ben-lead__rule--mid { width: 40px; margin: 22px 0 22px; }
.ben-lead__eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 12px; letter-spacing: .28em; font-weight: 600; text-transform: uppercase; color: var(--gold-700); margin: 0 0 22px; }
.ben-lead__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 56px); line-height: 1.06; letter-spacing: -.012em; color: var(--ink-900); margin: 0; }
.ben-lead__h em { font-style: italic; color: var(--gold-600); font-weight: 400; }
.ben-lead__lede { font-family: var(--font-sans); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--ink-700); margin: 0; max-width: 460px; }
.ben-lead__lede strong { font-weight: 700; color: var(--ink-900); }
/* CARD */
.ben-lead__right { display: flex; justify-content: center; }
.ben-lead-card { position: relative; width: 100%; max-width: 620px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); border-radius: 28px; padding: clamp(40px, 4vw, 56px) clamp(28px, 3vw, 44px) clamp(32px, 3.5vw, 44px); box-shadow: 0 40px 110px -42px rgba(40,28,12,.35), 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(196,154,92,.14); margin-top: 36px; }
.ben-lead-card__badge { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%); color: #fff; display: grid; place-items: center; box-shadow: 0 18px 36px -14px rgba(140,106,49,.55), 0 0 0 6px rgba(255,255,255,.78); }
.ben-lead-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.ben-lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .ben-lead-form__row { grid-template-columns: 1fr; } }
/* FIELDS */
.ben-lead-field { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.62); border: 1px solid rgba(196,154,92,.22); border-radius: 14px; padding: 14px 18px; transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 240ms var(--ease-out); min-height: 54px; }
.ben-lead-field:hover { border-color: rgba(196,154,92,.4); background: rgba(255,255,255,.78); }
.ben-lead-field:focus-within { border-color: rgba(196,154,92,.7); background: #fff; box-shadow: 0 0 0 4px rgba(196,154,92,.14); }
.ben-lead-field__icon { color: var(--gold-600); display: inline-flex; flex-shrink: 0; }
.ben-lead-field__icon--top { align-self: flex-start; margin-top: 2px; }
.ben-lead-field input, .ben-lead-field select, .ben-lead-field textarea { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); padding: 0; }
.ben-lead-field input::placeholder, .ben-lead-field textarea::placeholder { color: var(--ink-500); opacity: 1; }
/* SELECT */
.ben-lead-field--select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 28px; color: var(--ink-700); }
.ben-lead-field--select select:not(:invalid) { color: var(--ink-900); }
.ben-lead-field__chev { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; }
/* TEXTAREA */
.ben-lead-field--text { align-items: flex-start; padding: 16px 18px; }
.ben-lead-field__textwrap { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ben-lead-field__textlabel { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-700); font-weight: 500; }
.ben-lead-field--text textarea { resize: vertical; min-height: 86px; line-height: 1.5; font-size: 14.5px; color: var(--ink-900); }
.ben-lead-field--text textarea::placeholder { color: var(--ink-500); }
/* SUBMIT */
.ben-lead-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-50); background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%); border: none; border-radius: 14px; padding: 20px 28px; cursor: pointer; box-shadow: 0 18px 40px -16px rgba(196,154,92,.55), 0 1px 0 rgba(255,255,255,.3) inset; transition: transform 220ms var(--ease-out), box-shadow 240ms var(--ease-out), background 260ms var(--ease-out); width: 100%; }
.ben-lead-form__submit:hover { transform: translateY(-1px); box-shadow: 0 22px 48px -16px rgba(196,154,92,.65), 0 1px 0 rgba(255,255,255,.4) inset; background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%); }
.ben-lead-form__submit:active { transform: translateY(0); }
.ben-lead-form__submit svg { transition: transform 240ms var(--ease-out); }
.ben-lead-form__submit:hover svg { transform: translateX(3px); }
/* TRUST */
.ben-lead-form__trust { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-500); margin: 6px 0 0; text-align: center; }
.ben-lead-form__trust svg { flex-shrink: 0; color: var(--gold-600); }
.ben-lead-form__success { font-family: var(--font-sans); font-size: 13px; color: var(--ink-900); background: rgba(196,154,92,.12); border: 1px solid rgba(196,154,92,.3); border-radius: 8px; padding: 12px 16px; margin: 8px 0 0; text-align: center; }
/* PROCESS STRIP */
.ben-lead-process { position: relative; margin-top: clamp(80px, 9vw, 130px); padding-top: clamp(52px, 5vw, 72px); border-top: 1px solid rgba(196,154,92,.28); display: grid; grid-template-columns: minmax(180px, 0.85fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }
@media (max-width: 1100px) { .ben-lead-process { grid-template-columns: 1fr; gap: 40px; } }
.ben-lead-process__head { padding-top: 6px; }
.ben-lead-process__title { font-family: var(--font-display); font-size: clamp(22px, 1.7vw, 26px); font-weight: 400; line-height: 1.2; color: var(--ink-900); margin: 0 0 14px; }
.ben-lead-process__head-rule { display: block; width: 36px; height: 1.5px; background: var(--gold-500); }
.ben-lead-process__list { list-style: none; padding: 0; margin: 0; display: contents; }
@media (max-width: 1100px) { .ben-lead-process__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 560px) { .ben-lead-process__list { grid-template-columns: 1fr; } }
.ben-lead-process__step { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ben-lead-process__row { display: flex; align-items: center; gap: 16px; position: relative; }
.ben-lead-process__num { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--gold-600); letter-spacing: .05em; min-width: 22px; }
.ben-lead-process__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.72); border: 1px solid rgba(196,154,92,.32); color: var(--gold-700); display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 2; box-shadow: 0 8px 24px -16px rgba(40,28,12,.25); }
/* Connector line between adjacent step icons (desktop only) */
@media (min-width: 1101px) {
  .ben-lead-process__step:not(:nth-child(2))::before { content: ''; position: absolute; left: -1.6vw; right: auto; top: 30px; width: calc(3.2vw); height: 1px; background: rgba(196,154,92,.32); z-index: 1; }
  .ben-lead-process__step:nth-child(2)::before { content: none; }
}
.ben-lead-process__h { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink-900); margin: 0; letter-spacing: -.005em; }
.ben-lead-process__p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-500); margin: 0; }
/* REVEALS */
[data-ben-lead-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out); }
[data-ben-lead-reveal].is-in-view { opacity: 1; transform: translateY(0); }
[data-ben-lead-step] { opacity: 0; transform: translateY(18px); transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out); }
[data-ben-lead-step].is-in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ben-lead__bg-img, [data-ben-lead-reveal], [data-ben-lead-step] { transform: none !important; transition: none !important; opacity: 1 !important; }
}

/* ============================================================
   v4.10.3 — Ventajas mobile rebalance (final)
   The seq2 source frames height-fill the mobile portrait canvas exactly,
   so JS anchorY has no room to act. Instead we translate the ventajas canvas
   itself UP and slightly scale it down so the eye lives in the upper portion
   and the stats below get a calmer, darker background.
   Strictly mobile (<=640px); desktop is untouched.
   ============================================================ */
@media (max-width: 640px) {
  .ben-story__layer--ventajas {
    justify-content: space-between;
    padding-top: 5rem;
    padding-bottom: 5.5rem;
  }
  .ben-story__layer--ventajas .ben-ventajas__top-h {
    margin-top: 0;
    padding-top: 0;
  }
  .ben-story__layer--ventajas .ben-stats {
    margin-top: auto;
    margin-bottom: 1.25rem;
  }
  /* Shift the eye up + scale slightly down so it sits in the upper portion
     rather than the center. Anchor scaling at the top so the upper edge stays
     pinned and the shrink happens toward the bottom. */
  .ben-story__canvas[data-ben-canvas="ventajas"] {
    transform: translate3d(0, -14vh, 0) scale(0.92);
    transform-origin: 50% 0%;
  }
  /* Strengthen the lower-half darkening so the stats stay readable. */
  .ben-ventajas__scrim,
  .ben-story__atmo--ventajas {
    background:
      linear-gradient(180deg, rgba(11,9,7,0) 0%, rgba(11,9,7,0) 32%, rgba(11,9,7,.55) 60%, rgba(11,9,7,.88) 100%),
      radial-gradient(120% 60% at 50% 22%, rgba(11,9,7,0) 0%, rgba(11,9,7,.15) 70%, rgba(11,9,7,.32) 100%);
  }
}

/* ============================================================
   v4.10.5 — Desktop + transition + card refinements
   ============================================================ */
@media (min-width: 769px) {
  /* (2) Push the right stats column further outward for better symmetry */
  .ben-stats__col:last-child {
    transform: translateX(clamp(2.5rem, 5vw, 6.5rem));
  }
  /* (3) Smaller + higher bottom heading */
  .ben-ventajas__bottom { margin-top: -3.5rem; }
  .ben-ventajas__bottom-h {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    letter-spacing: -0.005em;
  }
  /* (3) Keep the testimonios headline on one line */
  .ben-testimonios__head { max-width: 1100px; }
  .ben-testimonios__h { white-space: nowrap; }
}

/* (5) Subtle premium transition between Testimonials and Contact.
   The lead-form bg starts with cream-masked zones already; we add a soft
   warm gradient strip at the very top so the two cream surfaces blend into
   one continuous surface instead of a hard section boundary. Plus a tiny
   gold hairline that fades in/out as a subtle ornament. */
.ben-lead { position: relative; }
.ben-lead::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(100px, 14vh, 160px);
  background: linear-gradient(180deg, var(--cream-100) 0%, rgba(245,239,228,.85) 35%, rgba(245,239,228,0) 100%);
  pointer-events: none;
  z-index: 2;
}
.ben-lead::after {
  content: '';
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: clamp(40px, 5vw, 64px); height: 1px;
  margin-top: clamp(40px, 5vh, 64px);
  background: linear-gradient(90deg, rgba(196,154,92,0), rgba(196,154,92,.55), rgba(196,154,92,0));
  pointer-events: none;
  z-index: 3;
}

/* (6) Reduce the contact form card size while preserving proportions. */
.ben-lead-card { max-width: 540px; padding: clamp(32px, 3.4vw, 46px) clamp(24px, 2.6vw, 38px) clamp(28px, 3vw, 38px); border-radius: 24px; margin-top: 30px; }
.ben-lead-card__badge { width: 60px; height: 60px; top: -30px; }
.ben-lead-card__badge svg { width: 22px; height: 22px; }
.ben-lead-form { gap: 12px; margin-top: 14px; }
.ben-lead-form__row { gap: 12px; }
.ben-lead-field { padding: 12px 16px; min-height: 50px; border-radius: 12px; }
.ben-lead-field input, .ben-lead-field select, .ben-lead-field textarea { font-size: 14.5px; }
.ben-lead-form__submit { padding: 17px 24px; border-radius: 12px; font-size: 12.5px; }
.ben-lead-form__trust { font-size: 12px; }

/* ============================================================
   v4.10.6 — Ventajas: desktop reposition + mobile card redesign
   ============================================================ */

/* (1) DESKTOP: pull the whole Ventajas composition upward so there's
   less empty space above the timeline before the first stat. */
@media (min-width: 769px) {
  .ben-story__layer--ventajas {
    padding-top: clamp(2.5rem, 4.5vh, 3.5rem);
  }
  .ben-ventajas__top-h {
    padding-top: 0;
    margin-top: 0;
  }
  .ben-stats { margin-top: 1.25rem; }
}

/* (2) MOBILE: card-based stats matching the new reference
   - Each stat becomes a self-contained dark card
   - Icon sits inside a gold-ringed circle
   - Chevron on the right (drawn with borders — no extra SVG cost)
   - Card backgrounds let the eye animation still bleed through
   - Tight vertical rhythm so all 6 cards fit cleanly under the eye */
@media (max-width: 768px) {
  /* Stack the columns into a single card list */
  .ben-stats {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 11px;
    padding: 0;
    margin-top: 1rem;
  }
  .ben-stats__col {
    display: flex !important;
    flex-direction: column;
    gap: 11px;
  }
  /* The middle column used to be the eye spacer on desktop — keep it hidden
     on mobile so we only render the 6 stats from cols 1 and 3. */
  .ben-stats__col:nth-child(2) { display: none !important; }

  /* CARD STYLING */
  .ben-stat {
    padding: 14px 50px 14px 16px;
    background: rgba(11,9,7,.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(196,154,92,.22);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 2px 0 rgba(196,154,92,.06) inset, 0 6px 18px -10px rgba(0,0,0,.55);
  }
  /* Override the default top-border separator since each card has its own border now */
  .ben-stat + .ben-stat { border-top: 1px solid rgba(196,154,92,.22); }

  .ben-stat__row {
    align-items: center;
    gap: 14px;
  }
  .ben-stat__icon {
    width: 50px;
    height: 50px;
    border: 1.5px solid rgba(196,154,92,.55);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 0;
    background: rgba(11,9,7,.4);
  }
  .ben-stat__icon svg { width: 22px; height: 22px; }

  .ben-stat__num {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.1;
    color: var(--paper-50);
    font-weight: 400;
  }
  .ben-stat__lbl {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--paper-muted);
    margin-top: 4px;
  }
  /* Right-side chevron drawn from two borders — no markup change */
  .ben-stat::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
    width: 9px;
    height: 9px;
    border-top: 1.6px solid var(--gold-500);
    border-right: 1.6px solid var(--gold-500);
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* Tighten the layer padding so the cards fit cleanly under the eye + headline */
  .ben-story__layer--ventajas {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
  }
  /* The bottom "Detrás de cada negocio hay una visión." tagline is redundant
     with this denser card composition on mobile — hide it. */
  .ben-story__layer--ventajas .ben-ventajas__bottom { display: none; }

  /* Make the FAB feel like the reference's inline pill CTA (still floating;
     just sized / styled to match the visual weight in the design) */
  .ben-fab {
    padding: 14px 22px;
    font-size: 11.5px;
    letter-spacing: .22em;
    border-radius: 999px;
  }
}

/* ============================================================
   v4.10.7 — Mobile Ventajas reference-match + FAB monogram
   ============================================================ */

/* FAB — base markup additions hidden by default (desktop unchanged) */
.ben-fab__brand { display: none; }
.ben-fab__arrow { display: none; }

@media (max-width: 768px) {
  /* (A) EYE COMPOSITION — push the canvas higher so the iris sits firmly in
     the upper third, leaving the lower half clear for the cards.
     Combined with the stats positioning below, the eye remains fully
     visible above the first card. */
  .ben-story__canvas[data-ben-canvas="ventajas"] {
    transform: translate3d(0, -22vh, 0) scale(0.88);
    transform-origin: 50% 0%;
  }

  /* Hide the 6th stat on mobile (the +31% "de predisposición a pagar" card).
     Stats are split across columns 1 and 3 (col 2 is the desktop eye spacer
     and is already hidden). The 6th stat is the last child of col 3. */
  .ben-stats__col:nth-child(3) .ben-stat:nth-child(3) { display: none; }

  /* (B) CARDS POSITIONING — push the stats block lower so the eye area above
     it is breathing room, not stats-overlaid-on-eye. Tighter card heights so
     all 5 fit in the lower portion of the viewport. */
  .ben-story__layer--ventajas {
    padding-top: 4.5rem;
    padding-bottom: 4.25rem;
    justify-content: space-between;
  }
  .ben-stats {
    margin-top: auto;
    gap: 9px;
  }
  .ben-stats__col { gap: 9px; }
  .ben-stat {
    padding: 12px 46px 12px 14px;
    border-radius: 14px;
  }
  .ben-stat__row { gap: 12px; }
  .ben-stat__icon { width: 44px; height: 44px; }
  .ben-stat__icon svg { width: 20px; height: 20px; }
  .ben-stat__num { font-size: 19px; }
  .ben-stat__lbl { font-size: 12.5px; line-height: 1.35; margin-top: 3px; }
  .ben-stat::after { right: 16px; width: 8px; height: 8px; }

  /* (C) CTA — reveal the monogram + arrow on the FAB, small B inside the circle */
  .ben-fab {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    padding: 10px 22px 10px 10px;
    border-radius: 999px;
  }
  .ben-fab__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ink-900);
    flex-shrink: 0;
  }
  .ben-fab__brand img {
    width: 14px; height: 14px;       /* small logo per user spec */
    object-fit: contain;
    opacity: .96;
  }
  .ben-fab__text {
    display: inline-block;
    line-height: 1;
  }
  .ben-fab__arrow {
    display: inline-flex;
    align-items: center;
    color: currentColor;
    flex-shrink: 0;
    margin-left: 4px;
  }
}

/* v4.10.7-fix2: lay out the ventajas layer as a 3-row grid so the headline
   stays at top, the middle row absorbs free space (eye visible behind), and
   the stats block lands in the bottom row. */
@media (max-width: 768px) {
  .ben-story__layer--ventajas {
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    justify-items: stretch;
    padding-top: 4rem;
    padding-bottom: 4.25rem;
  }
  .ben-story__layer--ventajas .ben-ventajas__top-h {
    grid-row: 1;
    margin-top: 0;
    padding-top: 0;
  }
  .ben-story__layer--ventajas .ben-stats {
    grid-row: 3;
    align-self: end;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  /* Compact card sizing so all 5 fit cleanly in the bottom band */
  .ben-stat { padding: 10px 42px 10px 13px; border-radius: 14px; }
  .ben-stat__icon { width: 42px; height: 42px; }
  .ben-stat__icon svg { width: 19px; height: 19px; }
  .ben-stat__num { font-size: 18px; }
  .ben-stat__lbl { font-size: 12px; line-height: 1.35; margin-top: 2px; }
  .ben-stat::after { right: 16px; width: 8px; height: 8px; }
  .ben-stats { gap: 8px; }
  .ben-stats__col { gap: 8px; }
  /* Eye sits higher — same translate as v4.10.3 but slightly stronger */
  .ben-story__canvas[data-ben-canvas="ventajas"] {
    transform: translate3d(0, -18vh, 0) scale(0.92);
    transform-origin: 50% 0%;
  }
}
/* v4.10.7-fix3: make the ventajas layer fill the pinned viewport so the
   middle 1fr grid row actually has space to absorb — forcing stats into the
   true bottom band. */
@media (max-width: 768px) {
  .ben-story__layer--ventajas {
    min-height: 100svh !important;
    box-sizing: border-box;
  }
}

/* v4.10.8 — reset any leftover transforms on the ventajas canvas so it
   stays centered + full-bleed throughout the entire animation. Mobile eye
   positioning is now handled via JS draw params (zoom + anchorY), not CSS. */
.ben-story__canvas[data-ben-canvas="ventajas"] {
  transform: translateZ(0) !important;
  transform-origin: 50% 50% !important;
}

/* v4.10.8 — promote the mobile FAB monogram style to desktop too. */
.ben-fab {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 10px;
  border-radius: 999px;
}
.ben-fab__brand {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink-900);
  flex-shrink: 0;
}
.ben-fab__brand img {
  width: 14px; height: 14px;
  object-fit: contain;
  opacity: .96;
}
.ben-fab__text { display: inline-block; line-height: 1; }
.ben-fab__arrow {
  display: inline-flex !important;
  align-items: center;
  color: currentColor;
  flex-shrink: 0;
  margin-left: 4px;
}

/* ============================================================
   v4.10.9 — Mobile: limit the ventajas canvas to the upper portion of the
   viewport. Image inside stays centered within its container. No transforms.
   Hero canvas (face) untouched — stays full-bleed.
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"] {
    /* Upper-anchored, occupies the top ~52% of the viewport */
    inset: 0 0 auto 0 !important;
    height: 52svh !important;
    transform: translateZ(0) !important;
  }
  /* Match the still image overlay for the ventajas dwell so they stay in sync */
  .ben-still--vent-end {
    inset: 0 0 auto 0 !important;
    height: 52svh !important;
  }
}

/* ============================================================
   v4.11.0 — FOOTER redesign (reference-faithful)
   ============================================================ */
.ben-footer {
  background: var(--espresso-950);
  color: var(--paper-50);
  padding: clamp(56px, 6vw, 92px) clamp(20px, 5vw, 80px) clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--espresso-700);
  font-family: var(--font-sans);
}
.ben-footer__inner { max-width: 1320px; margin: 0 auto; }
/* MAIN 4-col grid (brand wider than the rest) */
.ben-footer__main {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: clamp(40px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 980px) {
  .ben-footer__main { grid-template-columns: 1fr 1fr; }
  .ben-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .ben-footer__main { grid-template-columns: 1fr; gap: 40px; }
}
/* Column headings */
.ben-footer__h {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-500);
  margin: 0 0 10px;
}
.ben-footer__h-rule { display: block; width: 36px; height: 1px; background: rgba(196,154,92,.5); margin: 0 0 24px; }
/* Lists */
.ben-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ben-footer__list a {
  color: var(--paper-200);
  text-decoration: none;
  font-size: 14px;
  font-family: var(--font-serif);
  font-weight: 400;
  transition: color var(--dur) var(--ease-out);
}
.ben-footer__list a:hover { color: var(--gold-400); }
/* BRAND column */
.ben-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.ben-footer__logo { width: 56px; height: auto; opacity: .98; }
.ben-footer__brand-text { display: flex; flex-direction: column; gap: 4px; }
.ben-footer__brand-name {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--paper-50);
}
.ben-footer__brand-sub {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 600;
}
.ben-footer__rule { display: block; width: 38px; height: 1px; background: rgba(196,154,92,.45); margin: 0 0 22px; }
.ben-footer__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper-muted);
  margin: 0 0 28px;
  max-width: 320px;
}
.ben-footer__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: transparent;
  color: var(--paper-50);
  border: 1px solid rgba(196,154,92,.4);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ben-footer__cta:hover { background: rgba(196,154,92,.08); border-color: rgba(196,154,92,.7); color: var(--gold-300); }
.ben-footer__cta svg { transition: transform var(--dur) var(--ease-out); }
.ben-footer__cta:hover svg { transform: translateX(3px); }
/* CONTACT rows */
.ben-footer__contact-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(196,154,92,.12);
}
.ben-footer__contact-row:last-child { border-bottom: none; }
.ben-footer__ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(196,154,92,.35);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-500);
  margin-top: 2px;
}
.ben-footer__contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ben-footer__contact-text strong, .ben-footer__contact-text a {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--paper-50);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.ben-footer__contact-text a:hover { color: var(--gold-400); }
.ben-footer__contact-text small {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--paper-faint);
  line-height: 1.45;
}
/* DIAMOND DIVIDER */
.ben-footer__diamond {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: clamp(48px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
}
.ben-footer__divline { flex: 1; height: 1px; background: rgba(196,154,92,.18); }
.ben-footer__dia {
  width: 9px; height: 9px;
  background: var(--gold-500);
  transform: rotate(45deg);
}
/* MID ROW — brand chip + tagline + socials */
.ben-footer__mid {
  display: flex; justify-content: space-between; align-items: center; gap: 40px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
@media (max-width: 720px) { .ben-footer__mid { flex-direction: column; align-items: flex-start; gap: 24px; } }
.ben-footer__mid-brand { display: flex; align-items: center; gap: 18px; max-width: 540px; }
.ben-footer__mono {
  width: 56px; height: 56px;
  border: 1px solid rgba(196,154,92,.45);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ben-footer__mono img { width: 26px; height: auto; }
.ben-footer__mid-brand p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper-muted);
  margin: 0;
}
/* SOCIAL */
.ben-footer__social { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (max-width: 720px) { .ben-footer__social { align-items: flex-start; } }
.ben-footer__social-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-500);
}
.ben-footer__social-icons { display: flex; gap: 14px; }
.ben-footer__social-icons a {
  width: 40px; height: 40px;
  border: 1px solid rgba(196,154,92,.4);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-500);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.ben-footer__social-icons a:hover { color: var(--gold-300); border-color: rgba(196,154,92,.7); background: rgba(196,154,92,.06); }
/* HAIRLINE + LEGAL */
.ben-footer__hairline { display: block; height: 1px; background: rgba(196,154,92,.14); margin: 0 0 clamp(18px, 2vw, 28px); }
.ben-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ben-footer__copy, .ben-footer__legal-links {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--paper-faint);
}
.ben-footer__legal-links a { color: var(--paper-faint); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.ben-footer__legal-links a:hover { color: var(--paper-200); }
.ben-footer__legal-sep { margin: 0 12px; opacity: .35; }
/* MAGNETIC FAB CSS variables (transform preserves -50% centering) */
.ben-fab { --mag-x: 0px; --mag-y: 0px; transform: translate(calc(-50% + var(--mag-x)), var(--mag-y)); transition: transform 620ms cubic-bezier(.22,1,.36,1); }
.ben-fab.is-magnet { transition: transform 110ms cubic-bezier(.22,1,.36,1); }
/* v4.11.0-fix: shield the footer CTA from Elementor's global button color */
.ben-footer .ben-footer__cta { color: var(--paper-50) !important; border-color: rgba(196,154,92,.4) !important; }
.ben-footer .ben-footer__cta:hover { color: var(--gold-300) !important; border-color: rgba(196,154,92,.7) !important; background: rgba(196,154,92,.08) !important; }
.ben-footer .ben-footer__cta svg { color: inherit; }
/* And the legal links — same Elementor color override may hit them */
.ben-footer .ben-footer__legal-links a { color: var(--paper-faint) !important; }
.ben-footer .ben-footer__legal-links a:hover { color: var(--paper-200) !important; }

/* v4.11.1 — FAB hover stays white + magnetic lerp owns transform + legal-row spacing rebalance */
.ben-fab {
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out) !important;
}
.ben-fab.is-magnet { transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out) !important; }
.ben-fab:hover, .ben-fab:focus-visible {
  background: var(--cream-50) !important;
  color: var(--ink-900) !important;
  box-shadow: 0 0 0 1px rgba(196,154,92,.32), 0 8px 22px -14px rgba(11,9,7,.42) !important;
}
.ben-fab:hover .ben-fab__brand img { filter: none !important; }
.ben-fab:hover .ben-fab__text, .ben-fab:hover .ben-fab__arrow { color: var(--ink-900) !important; }
.ben-footer__hairline { margin-top: clamp(24px, 2.5vw, 36px); }
.ben-footer__legal { margin-top: clamp(4px, 0.5vw, 8px); }

/* ============================================================
   v4.12.0 — Proyectos: image-based 16:9 cards (wider center, smaller sides)
   ============================================================ */
/* Center card — wider, 16:9 image area */
.ben-card--center { position: relative; width: clamp(560px, 62vw, 880px); aspect-ratio: 16 / 9; height: auto !important; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 110px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(196,154,92,.12); background: #0b0907; }
@media (max-width: 980px) { .ben-card--center { width: clamp(320px, 86vw, 620px); } }
.ben-ba { position: relative; width: 100%; height: 100%; user-select: none; --ba-pos: 50%; cursor: ew-resize; }
.ben-ba__layer { position: absolute; inset: 0; overflow: hidden; }
.ben-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; pointer-events: none; }
.ben-ba__badge { position: absolute; top: 16px; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ben-ba__badge--before { left: 16px; background: rgba(11,9,7,.55); color: var(--paper-50); border: 1px solid rgba(255,255,255,.18); }
.ben-ba__badge--after { right: 16px; background: rgba(196,154,92,.85); color: #0b0907; border: 1px solid rgba(196,154,92,.7); }
/* Title overlay at the top of the center card */
.ben-card__title-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; background: linear-gradient(0deg, rgba(11,9,7,.72) 0%, rgba(11,9,7,.4) 60%, rgba(11,9,7,0) 100%); pointer-events: none; z-index: 5; }
.ben-card__cat { display: block; font-family: var(--font-sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--gold-400); margin-bottom: 6px; }
.ben-card__name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.1; color: var(--paper-50); margin: 0; letter-spacing: -.005em; }
/* Side preview cards — 16:9 tighter */
.ben-card--side { position: relative; transform: scale(0.86); opacity: 0.85; animation: benFloat 7s ease-in-out infinite; width: clamp(220px, 22vw, 320px) !important; aspect-ratio: 16 / 9; height: auto !important; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -32px rgba(0,0,0,.65); border: 1px solid rgba(196,154,92,.18); background: #0b0907; }
.ben-card__side-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.ben-card__side-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,7,0) 25%, rgba(11,9,7,.6) 75%, rgba(11,9,7,.85) 100%); pointer-events: none; }
.ben-card__side-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; }
.ben-card__side-cat { display: block; font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gold-400); margin-bottom: 4px; }
.ben-card__side-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--paper-50); line-height: 1.15; }
/* Divider line + drag handle (kept from previous, restated cleanly) */
.ben-ba__divider { position: absolute; top: 0; bottom: 0; left: calc(var(--ba-pos)); width: 2px; background: rgba(255,255,255,.92); transform: translateX(-50%); pointer-events: auto; cursor: ew-resize; z-index: 4; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.3); }
.ben-ba__divider-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--cream-50); color: var(--ink-900); display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(11,9,7,.08); cursor: grab; }
.ben-ba.is-dragging .ben-ba__divider-knob { cursor: grabbing; }
.ben-ba__divider-line { display: none; }

/* ============================================================
   v4.12.1 — Proyectos card proportions + side scale + mobile centering + BA touch
   ============================================================ */
.ben-card--center {
  position: relative;
  width: clamp(420px, 46vw, 680px) !important;
  aspect-ratio: auto !important;
  height: auto !important;
  display: flex; flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 110px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(196,154,92,.12);
  background: #0b0907;
}
.ben-card--center .ben-ba {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  flex: 0 0 auto;
  user-select: none;
  --ba-pos: 50%;
  cursor: ew-resize;
  touch-action: none;
}
.ben-card--center .ben-card__title-overlay {
  position: relative !important;
  left: auto; right: auto; bottom: auto; top: auto;
  background: linear-gradient(180deg, rgba(11,9,7,.96) 0%, rgba(11,9,7,1) 100%) !important;
  padding: 18px 26px 22px !important;
  pointer-events: auto;
}
.ben-card--center .ben-card__cat { color: var(--gold-400); }
.ben-card--center .ben-card__name { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.ben-card--side {
  position: relative;
  transform: scale(0.76) !important;
  opacity: 0.6 !important;
  width: clamp(160px, 14vw, 230px) !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.6);
  border: 1px solid rgba(196,154,92,.14);
  background: #0b0907;
  filter: saturate(.85);
  animation: benFloat 8s ease-in-out infinite;
}
.ben-card--side .ben-card__side-meta { padding: 10px 12px; }
.ben-card--side .ben-card__side-cat { font-size: 8.5px; letter-spacing: .2em; }
.ben-card--side .ben-card__side-name { font-size: 0.92rem; }
@media (max-width: 768px) {
  .ben-carousel__stage { justify-content: center !important; overflow: hidden; gap: 0; padding: 0 12px; box-sizing: border-box; }
  .ben-card[data-ben-slide] { margin: 0 auto !important; max-width: 100% !important; }
  .ben-card--center { width: 100% !important; max-width: clamp(280px, 92vw, 520px) !important; margin: 0 auto !important; }
  .ben-card--center .ben-card__name { font-size: 1.15rem; }
  .ben-card--center .ben-card__title-overlay { padding: 14px 18px 16px !important; }
  .ben-card[data-ben-slide].is-left, .ben-card[data-ben-slide].is-right { display: none !important; }
}
/* v4.12.1-fix: give the active mobile slide an explicit width so the center card has something to fill */
@media (max-width: 768px) {
  .ben-card[data-ben-slide].is-center { width: clamp(280px, 92vw, 520px) !important; max-width: 100% !important; flex: 0 0 auto !important; display: flex !important; justify-content: center; }
  .ben-card[data-ben-slide].is-center .ben-card--center { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
}
/* v4.12.1-fix2: on mobile, float the prev/next nav buttons over the stage so they don't push the active card off-center */
@media (max-width: 768px) {
  .ben-carousel { position: relative; }
  .ben-carousel__nav { position: absolute !important; top: 50%; transform: translateY(-50%); z-index: 5; }
  .ben-carousel__nav--prev { left: 6px !important; }
  .ben-carousel__nav:not(.ben-carousel__nav--prev) { right: 6px !important; }
  .ben-carousel__stage { width: 100% !important; padding: 0 !important; }
}

/* ============================================================
   v4.13.0 — Mobile composition polish + Servicios→Testimonios transition
   ============================================================ */
.ben-srv-trans { position: relative; height: clamp(140px, 18vh, 220px); margin: 0; background: linear-gradient(180deg, #050402 0%, #0a0806 14%, #2a2018 46%, #8a6a3e 72%, #d8c39c 88%, var(--cream-100) 100%); overflow: hidden; isolation: isolate; }
.ben-srv-trans::before { content:''; position:absolute; left:50%; top:0; width:1px; height:0; background: linear-gradient(180deg, rgba(196,154,92,0), rgba(196,154,92,.85) 30%, rgba(196,154,92,.85) 70%, rgba(196,154,92,0)); transform: translateX(-50%); transition: height 600ms cubic-bezier(.22,1,.36,1); z-index:2; }
.ben-srv-trans::after { content:''; position:absolute; left:50%; top:50%; width:54px; height:54px; border-radius:50%; transform: translate(-50%,-50%) scale(.6); background: radial-gradient(circle at 50% 50%, rgba(248,237,214,.0) 0%, rgba(216,195,156,.18) 55%, rgba(196,154,92,0) 72%); border:1px solid rgba(196,154,92,.0); opacity:0; transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1), border-color 600ms cubic-bezier(.22,1,.36,1); z-index:3; }
.ben-srv-trans__core { position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; transform: translate(-50%,-50%) scale(.4); background: var(--gold-400); box-shadow: 0 0 0 0 rgba(196,154,92,.0); opacity:0; transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1), box-shadow 700ms cubic-bezier(.22,1,.36,1); z-index:4; }
.ben-srv-trans__rule { position:absolute; top:50%; height:1px; width:0; background: linear-gradient(90deg, rgba(196,154,92,0), rgba(196,154,92,.55), rgba(196,154,92,0)); transition: width 600ms cubic-bezier(.22,1,.36,1); z-index:1; }
.ben-srv-trans__rule--l { left:50%; transform: translate(-100%,-50%); }
.ben-srv-trans__rule--r { right:50%; transform: translate(100%,-50%); }
.ben-srv-trans__glow { position:absolute; left:50%; top:50%; width:60%; height:120px; transform: translate(-50%,-50%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(216,195,156,.28), rgba(196,154,92,0) 70%); filter: blur(14px); opacity:0; transition: opacity 700ms cubic-bezier(.22,1,.36,1); z-index:0; pointer-events:none; }
.ben-srv-trans.is-in::before { height:100%; }
.ben-srv-trans.is-in::after { opacity:1; transform: translate(-50%,-50%) scale(1); border-color: rgba(196,154,92,.4); }
.ben-srv-trans.is-in .ben-srv-trans__core { opacity:1; transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 16px 3px rgba(196,154,92,.45); }
.ben-srv-trans.is-in .ben-srv-trans__rule { width: clamp(60px, 22vw, 200px); }
.ben-srv-trans.is-in .ben-srv-trans__glow { opacity:1; }
@media (prefers-reduced-motion: reduce){ .ben-srv-trans::before,.ben-srv-trans::after,.ben-srv-trans__core,.ben-srv-trans__rule,.ben-srv-trans__glow { transition:none; } }
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proyectos__head { margin-top: clamp(1.5rem, 6vh, 3.5rem); }
  .ben-srv-item__num { position: static !important; display:block; margin: 0 0 0.9rem; }
  .ben-srv-item__h { margin: 0 0 0.95rem !important; }
  .ben-srv-item__lede { margin: 0 0 1.25rem !important; }
  .ben-srv-item__body { padding-top: 0.4rem; }
  .ben-footer__main { text-align: center; }
  .ben-footer__col, .ben-footer__col--brand, .ben-footer__col--contact { align-items: center; text-align: center; display: flex; flex-direction: column; }
  .ben-footer__brand { flex-direction: column; align-items: center; gap: 10px; }
  .ben-footer__brand-text { align-items: center; text-align: center; }
  .ben-footer__rule, .ben-footer__h-rule { margin-left: auto; margin-right: auto; }
  .ben-footer__desc { margin-left: auto; margin-right: auto; text-align: center; }
  .ben-footer__list { align-items: center; }
  .ben-footer__cta { margin-left: auto; margin-right: auto; }
  .ben-footer__contact-row { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .ben-footer__contact-text { align-items: center; text-align: center; }
  .ben-footer__legal { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .ben-footer__legal-links { text-align: center; }
  .ben-story__layer--hero .ben-hero__left { transform: translateY(-12px); }
  .ben-story__layer--hero .ben-hero__right-h { margin-top: 1.4rem; margin-left: 1.1rem; }
  .ben-ventajas__top-h { margin-left: auto !important; margin-right: auto !important; left: 0; right: 0; text-align: center !important; padding-left: 0; padding-right: 0; }
  .ben-ventajas__top-h p { text-align: center !important; }
}

/* ============================================================
   v4.13.1 — Mobile seq1->seq2 cinematic transition
   - Soft-fade the ventajas band's bottom edge (no hard horizontal cut)
   - Progress-driven black gradient rises during the swap, recedes as seq2 settles
   ============================================================ */
.ben-story__btmgrad { display:none; }
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"],
  .ben-still--vent-end {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  }
  .ben-story__btmgrad {
    display:block; position:absolute; left:0; right:0; bottom:0;
    height: 78svh; z-index: 3; pointer-events:none; opacity:0;
    background: linear-gradient(0deg, #0b0907 0%, #0b0907 26%, rgba(11,9,7,.78) 52%, rgba(11,9,7,.32) 78%, rgba(11,9,7,0) 100%);
    will-change: opacity;
  }
}

/* ============================================================
   v4.13.2 — Mobile hero text, seq2 full-bleed, services num spacing, Contact transition
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"],
  .ben-still--vent-end {
    inset: 0 !important; height: 100% !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
}
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__left { transform: translateY(-44px); }
  .ben-story__layer--hero .ben-hero__right { transform: translateY(-26px); }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1.5rem !important; line-height: 1.16; text-align: right !important; margin-left: auto; margin-top: 1.1rem; max-width: 100%; }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full { margin-left: auto; }
  .ben-story__layer--hero .ben-hero__swipe-row { justify-content: flex-end; }
}
@media (max-width: 768px) {
  .ben-srv-item { flex-direction: column; align-items: flex-start; }
  .ben-srv-item__num { position: static !important; display: block !important; margin: 0 0 1.45rem !important; font-size: 1.6rem; }
}
.ben-lead::after { display: none !important; }
.ben-contact-trans { position: relative; height: clamp(180px, 22vh, 240px); background: radial-gradient(ellipse 95% 72% at 50% 36%, #FBF7EF 0%, #F6F1E8 54%, #EFE7D8 100%); overflow: visible; isolation: isolate; }
.ben-contact-trans__curve { position: absolute; left:0; right:0; top: 14%; width:100%; height: 64px; opacity:0; transform: translateY(10px); transition: opacity 620ms cubic-bezier(.22,1,.36,1), transform 620ms cubic-bezier(.22,1,.36,1); pointer-events:none; }
.ben-contact-trans__curve path { filter: drop-shadow(0 6px 10px rgba(17,17,17,.05)); }
.ben-contact-trans__glow { position:absolute; left:50%; bottom:0; width: 260px; height: 170px; transform: translate(-50%, 42%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,161,90,.22), rgba(201,161,90,0) 70%); filter: blur(8px); opacity:0; transition: opacity 700ms cubic-bezier(.22,1,.36,1); pointer-events:none; z-index:1; }
.ben-contact-trans__line { position:absolute; left:50%; bottom:0; width:0; height:1px; transform: translate(-50%, 50%); background: linear-gradient(90deg, rgba(201,161,90,0), rgba(201,161,90,.75), rgba(201,161,90,0)); box-shadow: 0 0 8px rgba(201,161,90,.3); opacity:0; transition: width 620ms cubic-bezier(.22,1,.36,1), opacity 620ms cubic-bezier(.22,1,.36,1); z-index:2; }
.ben-contact-trans__badge { position:absolute; left:50%; bottom:0; width:52px; height:52px; border-radius:50%; transform: translate(-50%, 50%) scale(.86); background:#111; border:1px solid rgba(201,161,90,.55); display:grid; place-items:center; opacity:0; box-shadow: 0 12px 28px -10px rgba(17,17,17,.45), 0 0 0 6px rgba(246,241,232,.62); transition: opacity 640ms cubic-bezier(.22,1,.36,1), transform 640ms cubic-bezier(.22,1,.36,1); z-index:3; }
.ben-contact-trans__badge img { width:22px; height:auto; opacity:.96; }
.ben-contact-trans.is-in .ben-contact-trans__curve { opacity:1; transform: translateY(0); }
.ben-contact-trans.is-in .ben-contact-trans__glow { opacity:1; }
.ben-contact-trans.is-in .ben-contact-trans__line { width:120px; opacity:1; }
.ben-contact-trans.is-in .ben-contact-trans__badge { opacity:1; transform: translate(-50%, 50%) scale(1); }
@media (max-width: 768px) {
  .ben-contact-trans { height: clamp(120px, 16vh, 160px); }
  .ben-contact-trans__badge { width:44px; height:44px; }
  .ben-contact-trans__badge img { width:18px; }
  .ben-contact-trans.is-in .ben-contact-trans__line { width:92px; }
}
@media (prefers-reduced-motion: reduce) { .ben-contact-trans__curve,.ben-contact-trans__glow,.ben-contact-trans__line,.ben-contact-trans__badge { transition:none; } }

/* ============================================================
   v4.13.3 — Mobile eye frame size stabilization
   Uniform 10% crop on ventajas canvas + still hides per-frame
   size drift inherent to the source sequence.
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__videos { overflow: hidden; }
  .ben-story__canvas[data-ben-canvas="ventajas"],
  .ben-still--vent-end {
    transform: scale(1.10) !important;
    transform-origin: 50% 44% !important;
    will-change: transform;
  }
}

/* ============================================================
   v4.13.4 — mobile hero recompose (higher, larger right-h),
   Contact transition contained (no overlap), Seq2 band-then-expand,
   Proyectos heading centered w/ more top space
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__left { transform: translateY(-60px); }
  .ben-story__layer--hero .ben-hero__right { transform: translateY(-42px); }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1.78rem !important; line-height: 1.24 !important; letter-spacing: -.005em; text-align: right !important; margin-left: auto; margin-top: 0.95rem; max-width: 100%; }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full { margin-left: auto; }
  .ben-story__layer--hero .ben-hero__swipe-row { justify-content: flex-end; }
}
.ben-contact-trans { height: 220px; overflow: hidden; }
.ben-contact-trans__curve { top: 20% !important; }
.ben-contact-trans__glow { top: 62% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; }
.ben-contact-trans__line { top: 62% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; }
.ben-contact-trans__badge { top: 62% !important; bottom: auto !important; transform: translate(-50%, -50%) scale(.86) !important; }
.ben-contact-trans.is-in .ben-contact-trans__badge { transform: translate(-50%, -50%) scale(1) !important; }
@media (max-width: 768px) { .ben-contact-trans { height: 168px; } }
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"],
  .ben-still--vent-end {
    inset: var(--vent-top, 0px) 0 var(--vent-bot, 0px) 0 !important;
    height: auto !important;
    transform: scale(1.10) !important;
    transform-origin: 50% 44% !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    transition: none;
    will-change: inset;
  }
  .ben-story__pin, .ben-story__videos { background: #000; }
}
@media (max-width: 768px) {
  .ben-proyectos__head { text-align: center !important; margin-top: 2.2rem !important; padding-top: 1.2rem; }
  .ben-proyectos__h { text-align: center !important; line-height: 1.16 !important; letter-spacing: .01em; }
  .ben-proyectos__h br { display: inline !important; }
}
/* v4.13.4b — hide duplicate eyebrow in Proyectos on mobile (h2 already carries the phrase) */
@media (max-width: 768px) {
  .ben-proyectos__head .ben-eyebrow { display: none !important; }
}

/* ============================================================
   v4.13.5 — desktop restore + mobile refinements + Contact bg + late Seq2 expand
   ============================================================ */
.ben-only-mobile { display: none; }
@media (max-width: 768px) { .ben-only-mobile { display: inline; } }
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__left { transform: translateY(-78px) !important; }
  .ben-story__layer--hero .ben-hero__right { transform: translateY(-58px) !important; }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1.95rem !important; line-height: 1.15 !important; text-align: right !important; margin-left: auto; margin-top: 0.8rem; letter-spacing: -.005em; }
}
@media (max-width: 768px) { .ben-stats__col > .ben-stat:nth-child(3) { display: none !important; } }
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 3.2rem !important; }
  .ben-proyectos__head { margin-top: 1.8rem !important; padding-top: 1rem !important; }
}
.ben-lead { position: relative; overflow: hidden; }
.ben-lead__bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; overflow: hidden; display: block !important; }
.ben-lead__bg-img { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: .32 !important; filter: blur(28px) saturate(.85) brightness(1.05) sepia(.12); transform: scale(1.08); }
.ben-lead__bg-overlay { position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse 100% 70% at 50% 40%, rgba(251,247,239,.62), rgba(246,241,232,.86) 62%, rgba(239,231,216,.94) 100%), radial-gradient(ellipse 60% 45% at 50% 55%, rgba(201,161,90,.08), transparent 70%) !important; }
.ben-lead__inner { position: relative; z-index: 2; }

/* ============================================================
   v4.13.6 — Mobile Seq2: fixed top-aligned band until frame 50, then
   full-bleed (change lands on a nearly-black frame so no visible jump).
   No scale/zoom modifications. vent-end still is always full-bleed.
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"] {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    bottom: var(--vent-bot, 0px) !important;
    width: 100% !important;
    height: calc(100svh - var(--vent-bot, 0px)) !important;
    aspect-ratio: auto !important;
    transform: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    transition: none !important;
    will-change: bottom, height;
  }
  .ben-still--vent-end {
    inset: 0 !important;
    height: auto !important;
    transform: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .ben-story__pin, .ben-story__videos { background: #000; }
}

/* v4.13.6b — vent-end still forced full-bleed */
@media (max-width: 768px) { .ben-still--vent-end { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100svh !important; aspect-ratio: auto !important; } }

/* ============================================================
   v4.13.7 — Advantages center h, match Seq1/Seq2 dims (62svh),
   Seq1 bottom gradient, mobile hero typography grid, desktop 6 stats
   ============================================================ */
@media (max-width: 768px) { .ben-story__layer--ventajas .ben-ventajas__top-h { text-align: center !important; } }
@media (max-width: 768px) {
  .ben-stats__col:nth-child(2) > .ben-stat:nth-child(1),
  .ben-stats__col:nth-child(2) > .ben-stat:nth-child(3) { display: none !important; }
  /* invalidate the old blanket rule from v4.13.5 by re-showing left col item 3 */
  .ben-stats__col:nth-child(1) > .ben-stat:nth-child(3) { display: block !important; }
}
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="hero"],
  .ben-still--hero-start {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.7) 86%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.7) 86%, transparent 100%);
  }
}
@media (max-width: 768px) {
  .ben-story__layer--hero { position: relative; }
  .ben-story__layer--hero .ben-hero__copy {
    display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 0.5rem;
    align-items: start; padding: 0 5% !important;
  }
  .ben-story__layer--hero .ben-hero__copy > div:empty { display: none !important; }
  .ben-story__layer--hero .ben-hero__left { transform: none !important; padding: 0 !important; text-align: left; }
  .ben-story__layer--hero .ben-hero__right { transform: none !important; padding: 0.55rem 0 0 !important; text-align: right; }
  .ben-story__layer--hero .ben-hero__h1 { font-size: 1.42rem !important; line-height: 1.14 !important; margin: 0 !important; }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1.28rem !important; line-height: 1.16 !important; text-align: right !important; margin: 0 !important; letter-spacing: -.005em; }
  .ben-story__layer--hero .ben-hero__left .ben-rule--60 { margin: 0.7rem 0 0 !important; }
  .ben-story__layer--hero .ben-hero__body { display: none !important; }
  .ben-story__layer--hero .ben-hero__swipe-row { display: none !important; }
  .ben-story__layer--hero .ben-hero__lede {
    position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;
    bottom: 5.6rem !important; margin: 0 !important; text-align: center !important;
    font-size: 1rem !important; z-index: 6;
  }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full {
    position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;
    bottom: 7.6rem !important; width: 48%; z-index: 6;
  }
  .ben-story__layer--hero .ben-hero__ctaband--split { justify-content: center !important; text-align: center; padding-bottom: 1.4rem !important; }
}

/* v4.13.7-fix — correctly target right stats column (3 cols total on desktop; middle is illustration slot). Mobile: keep only 85% in right column. */
@media (max-width: 768px) {
  .ben-stats__col > .ben-stat { display: block !important; }
  .ben-stats__col:nth-child(3) > .ben-stat:nth-child(1),
  .ben-stats__col:nth-child(3) > .ben-stat:nth-child(2) { display: none !important; }
}
/* v4.13.7-fix2 — explicit override: right col nth(3)=85% must stay visible on mobile */
@media (max-width: 768px) { .ben-stats__col:nth-child(3) > .ben-stat:nth-child(3) { display: block !important; } }

/* v4.13.7-fix3 — fix mobile hero: content stays in the bottom zone; grid layout for left+right side by side; lede+rule centered below via absolute */
@media (max-width: 768px) {
  .ben-story__layer--hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .ben-story__layer--hero .ben-hero__copy {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 1rem !important;
    row-gap: 0 !important;
    padding: 0 5% !important;
    margin: 0 0 6.8rem !important;
    align-items: start !important;
  }
  .ben-story__layer--hero .ben-hero__copy > div:not(.ben-hero__left):not(.ben-hero__right) { display: none !important; }
  .ben-story__layer--hero .ben-hero__left { grid-column: 1; transform: none !important; padding: 0 !important; text-align: left !important; }
  .ben-story__layer--hero .ben-hero__right { grid-column: 2; transform: none !important; padding: 0.55rem 0 0 !important; text-align: right !important; }
  .ben-story__layer--hero .ben-hero__h1 { font-size: 1.42rem !important; line-height: 1.14 !important; margin: 0 !important; }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1.28rem !important; line-height: 1.18 !important; margin: 0 !important; text-align: right !important; letter-spacing: -.005em; }
  .ben-story__layer--hero .ben-hero__left .ben-rule--60 { margin: 0.65rem 0 0 !important; }
  .ben-story__layer--hero .ben-hero__body,
  .ben-story__layer--hero .ben-hero__swipe-row { display: none !important; }
  .ben-story__layer--hero .ben-hero__lede {
    position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;
    bottom: 5rem !important; margin: 0 !important; text-align: center !important;
    font-size: 1rem !important; z-index: 6;
  }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full {
    position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;
    bottom: 6.9rem !important; width: 44%; z-index: 6;
  }
  .ben-story__layer--hero .ben-hero__ctaband--split {
    justify-content: center !important; align-items: center !important; text-align: center;
    padding: 0 1rem !important; gap: 1rem; margin: 0 !important; flex-wrap: wrap;
  }
}

/* v4.13.7-fix4 — mobile hero: keep base padding-top calc(62svh + 1rem) so copy sits in the lower 38svh zone; 2-col grid for h1/right-h; centered lede+rule absolute inside copy padding-bottom */
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__copy {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 1rem !important; row-gap: 0 !important;
    padding: calc(62svh + 0.8rem) 5% 7rem !important;
    margin: 0 !important;
    position: relative !important;
    align-items: start !important;
  }
  .ben-story__layer--hero .ben-hero__copy > div:not(.ben-hero__left):not(.ben-hero__right) { display: none !important; }
  .ben-story__layer--hero .ben-hero__left { grid-column: 1 !important; text-align: left !important; transform: none !important; padding: 0 !important; }
  .ben-story__layer--hero .ben-hero__right { grid-column: 2 !important; text-align: right !important; padding: 0.55rem 0 0 !important; transform: none !important; }
  .ben-story__layer--hero .ben-hero__h1 { font-size: 1.42rem !important; line-height: 1.14 !important; margin: 0 !important; }
  .ben-story__layer--hero .ben-hero__right-h { font-size: 1.28rem !important; line-height: 1.18 !important; text-align: right !important; margin: 0 !important; letter-spacing: -.005em; }
  .ben-story__layer--hero .ben-hero__left .ben-rule--60 { margin: 0.65rem 0 0 !important; }
  .ben-story__layer--hero .ben-hero__body,
  .ben-story__layer--hero .ben-hero__swipe-row { display: none !important; }
  .ben-story__layer--hero .ben-hero__lede {
    position: absolute !important; left: 50% !important; right: auto !important; top: auto !important;
    transform: translateX(-50%) !important; bottom: 2.2rem !important;
    margin: 0 !important; text-align: center !important; font-size: 1rem !important; z-index: 6;
  }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full {
    position: absolute !important; left: 50% !important; right: auto !important; top: auto !important;
    transform: translateX(-50%) !important; bottom: 4.1rem !important; width: 44% !important; z-index: 6;
  }
  .ben-story__layer--hero .ben-hero__ctaband--split { justify-content: center !important; padding: 0 1rem 1.2rem !important; gap: 1rem; }
}

/* v4.13.8-b — Ventajas mobile: switch to position:absolute inset:0 so it overlaps hero and cross-fades via opacity (matches desktop). The prior relative-stack approach broke when hero size changed. */
@media (max-width: 768px) {
  .ben-story__layer--ventajas { position: absolute !important; inset: 0 !important; height: 100svh !important; }
  .ben-story__layer--hero { position: absolute !important; inset: 0 !important; height: 100svh !important; }
  /* Keep hero copy in the lower zone via its calc(62svh) padding-top; ensure layer height is 100svh */
  .ben-story__layer--hero .ben-hero__copy { padding-bottom: 0 !important; }
}

/* ============================================================
   v4.13.8 — hero fine-tune, projects heading eyebrow visible on mobile,
   contact modal spacing, form message styling
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__copy { padding: calc(56svh + 0.4rem) 5% 0 !important; }
  .ben-story__layer--hero .ben-hero__right { padding-top: 1.15rem !important; }
  .ben-story__layer--hero .ben-hero__lede { bottom: 5.4rem !important; }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full { bottom: 7.3rem !important; }
  .ben-story__layer--hero .ben-hero__ctaband--split { padding: 0 1rem 3rem !important; }
}
@media (max-width: 768px) {
  .ben-proyectos__head .ben-eyebrow { display: block !important; text-align: center !important; letter-spacing: .12em; font-size: .68rem; margin-bottom: 0.7rem; opacity: .9; }
  .ben-proyectos__head { text-align: center !important; margin-top: 2.4rem !important; padding-top: 1.5rem; }
  .ben-proyectos__h { text-align: center !important; line-height: 1.16 !important; font-size: 1.85rem !important; letter-spacing: -.01em; }
  .ben-proyectos__h br { display: inline !important; }
}
@media (max-width: 768px) {
  .ben-sheet .ben-field { margin-bottom: 0.55rem !important; }
  .ben-sheet .ben-sheet__msg-row { gap: 0.5rem !important; }
  .ben-sheet__submit { min-height: 42px !important; padding: 0 0.8rem !important; }
  .ben-sheet .ben-field input, .ben-sheet .ben-field textarea, .ben-sheet .ben-field select { padding: 0.55rem 0.7rem !important; }
}
.ben-form-msg { margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.95rem; line-height: 1.35; text-align: center; opacity: 0; transition: opacity .3s ease; }
.ben-form-msg[data-kind=loading] { background: rgba(201,161,90,.14); color: #6a5230; border: 1px solid rgba(201,161,90,.28); }
.ben-form-msg[data-kind=ok] { background: rgba(84,140,72,.14); color: #2f5c2a; border: 1px solid rgba(84,140,72,.32); }
.ben-form-msg[data-kind=err] { background: rgba(180,60,60,.14); color: #7a2d2d; border: 1px solid rgba(180,60,60,.32); }
.ben-sheet .ben-form-msg { background: rgba(255,255,255,.08); color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.14); }

/* v4.13.8-c — fix hero layout: keep padding-bottom to reserve space for absolute lede/rule */
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__copy { padding: calc(58svh + 0.4rem) 5% 6.2rem !important; }
  .ben-story__layer--hero .ben-hero__right { padding-top: 1.5rem !important; }
  .ben-story__layer--hero .ben-hero__lede { bottom: 2.4rem !important; }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full { bottom: 4.1rem !important; }
  .ben-story__layer--hero .ben-hero__ctaband--split { padding: 0 1rem 2.6rem !important; }
}

/* ============================================================
   v4.13.9 — mobile-only fine-tune
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__ctaband--split { padding: 0 1rem 4.6rem !important; gap: 0.35rem !important; row-gap: 0.35rem !important; flex-wrap: wrap; }
  .ben-story__layer--hero .ben-hero__ctaband--split > * { margin: 0 !important; }
  .ben-story__layer--hero .ben-hero__ctaband--split a, .ben-story__layer--hero .ben-hero__ctaband--split span { line-height: 1.15 !important; }
  .ben-story__layer--hero .ben-hero__lede { bottom: 6.7rem !important; }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full { bottom: 8.6rem !important; }
}
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"] {
    bottom: var(--vent-bot, 38svh) !important;
    height: calc(100svh - var(--vent-bot, 38svh)) !important;
  }
}
@media (max-width: 768px) {
  .ben-story__layer--ventajas .ben-ventajas__top-h { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; padding-left: 5% !important; padding-right: 5% !important; box-sizing: border-box; }
  .ben-story__layer--ventajas .ben-ventajas__top-h p, .ben-story__layer--ventajas .ben-ventajas__top-h h2, .ben-story__layer--ventajas .ben-ventajas__top-h > * { text-align: center !important; }
}
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 1.2rem !important; }
  .ben-proyectos__head { margin-top: 0.6rem !important; padding-top: 0 !important; }
  .ben-proyectos__head .ben-eyebrow { margin-bottom: 0.55rem; }
}

/* v4.13.9-b — hero: lift contact info only, not lede/rule */
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__lede { bottom: 2.4rem !important; }
  .ben-story__layer--hero .ben-hero__right .ben-rule--full { bottom: 4.1rem !important; }
  .ben-story__layer--hero .ben-hero__ctaband--split { padding: 0 1rem 6.5rem !important; row-gap: 0.15rem !important; gap: 0.15rem !important; }
}

/* ============================================================
   v4.13.10 — hero h1 larger, Advantages heading, logo transparency,
   FAB submit smaller, Proyectos lift down, 2-line balanced heading
   ============================================================ */
.ben-only-desktop { display: inline; }
@media (max-width: 768px) { .ben-only-desktop { display: none !important; } }
@media (max-width: 768px) {
  .ben-story__layer--hero .ben-hero__h1 { font-size: 1.72rem !important; line-height: 1.10 !important; letter-spacing: -.01em; }
}
@media (max-width: 768px) {
  .ben-story__layer--ventajas .ben-ventajas__top-h { text-align: center !important; padding-left: 5% !important; padding-right: 5% !important; }
  .ben-story__layer--ventajas .ben-ventajas__top-h p { text-align: center !important; font-size: 0.96rem !important; line-height: 1.3 !important; max-width: 100%; margin: 0 auto !important; }
  .ben-story__layer--ventajas .ben-ventajas__top-h .ben-1st { display: inline; }
}
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 2.4rem !important; }
  .ben-proyectos__head { margin-top: 1.5rem !important; padding-top: 0.4rem !important; }
}
.ben-nav__brand img { mix-blend-mode: normal !important; background: transparent !important; }
@media (max-width: 768px) {
  .ben-sheet__submit { width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 50% !important; padding: 0 !important; align-self: flex-end !important; }
  .ben-sheet__submit svg { width: 18px !important; height: 18px !important; }
  .ben-sheet__msg-row { align-items: flex-end !important; }
}

/* v4.13.10-b — stack sheet msg-row on mobile so textarea takes full width, submit is small below-right */
@media (max-width: 768px) {
  .ben-sheet__msg-row { flex-direction: column !important; align-items: stretch !important; gap: 0.55rem !important; }
  .ben-sheet__msg-row .ben-sheet__msg { width: 100% !important; }
  .ben-sheet__submit { align-self: flex-end !important; }
}

/* ============================================================
   v4.13.12 — 8-item batch fixes
   ============================================================ */
.ben-lead__bg-img { opacity: .78 !important; filter: blur(6px) saturate(1.05) brightness(1.02) !important; transform: scale(1.04) !important; }
.ben-lead__bg-overlay { background: linear-gradient(180deg, rgba(246,241,232,.28) 0%, rgba(246,241,232,.42) 45%, rgba(246,241,232,.55) 100%) !important; }
@media (max-width: 768px) {
  .ben-sheet { padding: 1.2rem 1rem 1.2rem !important; }
  .ben-sheet__title, .ben-sheet h2 { font-size: 1.75rem !important; margin-bottom: 0.4rem !important; }
  .ben-sheet__lede, .ben-sheet__intro { font-size: 0.9rem !important; margin-bottom: 0.6rem !important; }
  .ben-sheet__policy, .ben-sheet .ben-policy-line { font-size: 0.72rem !important; margin-bottom: 0.6rem !important; }
  .ben-sheet .ben-field { margin-bottom: 0.35rem !important; }
  .ben-sheet .ben-field__label { font-size: 0.7rem !important; margin-bottom: 0.15rem !important; letter-spacing: .08em; }
  .ben-sheet .ben-field input, .ben-sheet .ben-field textarea, .ben-sheet .ben-field select { padding: 0.45rem 0.7rem !important; font-size: 0.95rem !important; }
  .ben-sheet__msg-row { flex-direction: column !important; align-items: stretch !important; gap: 0.4rem !important; }
  .ben-sheet__submit { width: 100% !important; height: 44px !important; min-height: 44px !important; border-radius: 22px !important; align-self: stretch !important; padding: 0 1rem !important; background: var(--espresso-900,#0b0907) !important; border: none !important; color: var(--paper-50,#faf7f0) !important; }
  .ben-sheet__submit svg { width: 18px !important; height: 18px !important; color: currentColor !important; stroke: currentColor !important; }
  .ben-sheet__close, .ben-sheet .ben-sheet__close { top: 0.6rem !important; right: 0.6rem !important; }
}
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 0.6rem !important; }
  .ben-proyectos__head { margin-top: 0 !important; padding-top: 0 !important; }
  .ben-carousel { margin-top: 0.4rem !important; }
  .ben-metrics, .ben-dots { margin-top: 0.5rem !important; }
}
@media (min-width: 769px) {
  .ben-card__title-overlay { padding: 1rem 1.4rem 1.4rem !important; min-height: auto !important; }
  .ben-card__name { padding-bottom: 0.35rem !important; line-height: 1.2 !important; }
  .ben-card--center { padding-bottom: 0 !important; }
  .ben-card--center .ben-ba { max-height: 62% !important; }
}
.ben-metric__lbl { color: rgba(255,255,255,.92) !important; }
@media (max-width: 768px) {
  .ben-story__layer--ventajas .ben-ventajas__top-h { padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; margin: 0 !important; width: 100% !important; }
  .ben-story__layer--ventajas .ben-ventajas__top-h p { text-align: center !important; }
  .ben-stats { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 769px) {
  .ben-srv-mock { transform-origin: 50% 50%; }
  .ben-srv-mock--rest { transform: scale(1.28) translate(60px, 0); }
  .ben-srv-mock--inmo { transform: scale(1.28) translate(-60px, 0); }
  .ben-srv-mock--design { transform: scale(1.28) translate(60px, 0); }
  .ben-srv-mock--service { transform: scale(1.28) translate(-60px, 0); }
}
.ben-nav-fixed, .ben-nav__brand, .ben-nav__brand img { background-color: transparent !important; }
.ben-nav__brand img { mix-blend-mode: normal !important; background: transparent !important; box-shadow: none !important; filter: none !important; isolation: isolate; }
@media (min-width: 769px) {
  .ben-story__layer--ventajas { justify-content: flex-start !important; padding-top: clamp(3rem, 7vh, 5rem) !important; }
}
/* v4.13.12-b — desktop side cards: give title space */
@media (min-width: 769px) {
  .ben-card__side-meta { padding: 0.9rem 1rem 1.1rem !important; }
  .ben-card__side-name { line-height: 1.2 !important; padding-bottom: 0.35rem !important; overflow: visible !important; white-space: normal !important; }
  .ben-card--side { overflow: visible !important; }
}

/* ============================================================
   v4.13.13 — 4 targeted fixes
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--ventajas .ben-ventajas__top-h { padding-left: 1.6rem !important; padding-right: 0.4rem !important; }
}
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 3.6rem !important; }
  .ben-proyectos__head { margin-top: 1.6rem !important; padding-top: 0.6rem !important; }
}
.ben-lead__bg-img { opacity: .82 !important; filter: blur(4px) saturate(1.05) brightness(1.02) !important; }
.ben-lead__bg-overlay { background: linear-gradient(180deg, rgba(246,241,232,.22) 0%, rgba(246,241,232,.35) 45%, rgba(246,241,232,.5) 100%) !important; }
@media (min-width: 769px) {
  .ben-nav__brand img { visibility: hidden; height: 38px !important; }
  .ben-nav__brand { position: relative; }
  .ben-nav__brand::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 38px; background: url('/wp-content/uploads/benalaga-2026/logo-monogram-desktop.png?v=41313') center/contain no-repeat; pointer-events: none; }
}

/* ============================================================
   v4.13.14 — 3 targeted fixes: Proyectos mobile up, Advantages mobile right shift, Contact bg direct section image
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 0 !important; }
  .ben-proyectos__head { margin-top: 0 !important; padding-top: 0 !important; }
  .ben-proyectos__head .ben-eyebrow { margin-bottom: 0.4rem !important; }
  .ben-carousel { margin-top: 0 !important; }
  .ben-metrics, .ben-dots { margin-top: 0.4rem !important; }
}
@media (max-width: 768px) {
  .ben-story__layer--ventajas .ben-ventajas__top-h { padding-left: 3rem !important; padding-right: 0 !important; }
  .ben-stats { padding-left: 1.4rem !important; padding-right: 0 !important; }
}
.ben-lead { background-image: url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41314') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; position: relative; }
.ben-lead__bg, .ben-lead__bg-img, .ben-lead__bg-leaf { display: none !important; }
.ben-lead::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,241,232,.28) 0%, rgba(246,241,232,.38) 45%, rgba(246,241,232,.5) 100%); pointer-events: none; z-index: 0; }
.ben-lead__inner { position: relative; z-index: 2; }
.ben-lead__bg-overlay { display: none !important; }

/* ============================================================
   v4.13.15 — Proyectos mobile balance + Contact bg edge-fade blend
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 1.6rem !important; }
  .ben-proyectos__head { margin: 0 0 0.55rem 0 !important; padding: 0 !important; }
  .ben-proyectos__head .ben-eyebrow { margin-bottom: 0.35rem !important; }
  .ben-carousel { margin-top: 0.25rem !important; margin-bottom: 0.35rem !important; }
  .ben-dots { margin-top: 0.35rem !important; margin-bottom: 0 !important; }
  .ben-metrics { margin-top: 0 !important; }
}
.ben-lead::before {
  background:
    linear-gradient(180deg, #F6F1E8 0%, rgba(246,241,232,0.92) 3%, rgba(246,241,232,0.55) 8%, rgba(246,241,232,0) 15%, rgba(246,241,232,0) 82%, rgba(246,241,232,0.55) 90%, rgba(246,241,232,0.92) 96%, #F6F1E8 100%),
    linear-gradient(180deg, rgba(246,241,232,.18) 30%, rgba(246,241,232,.28) 55%, rgba(246,241,232,.35) 80%) !important;
  z-index: 1 !important;
}

/* v4.13.15-b — cleaner Contact edge-fade via mask-image on ::before */
.ben-lead { background-image: none !important; background: #F6F1E8 !important; position: relative; }
.ben-lead::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41315b') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.ben-lead::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246,241,232,.18) 20%, rgba(246,241,232,.30) 60%, rgba(246,241,232,.40) 100%);
  pointer-events: none;
  z-index: 1;
}
.ben-lead__inner { position: relative; z-index: 2; }

/* v4.13.15-c — clean edge-fade Contact bg */
.ben-lead {
  background-image: url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41315c') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #F6F1E8 !important;
  position: relative;
}
.ben-lead::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  background: linear-gradient(180deg,
    #F6F1E8 0%,
    rgba(246,241,232,0.92) 4%,
    rgba(246,241,232,0) 12%,
    rgba(246,241,232,0) 88%,
    rgba(246,241,232,0.92) 96%,
    #F6F1E8 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.ben-lead::after { display: none !important; }

/* v4.13.15-d — unified stacked background (image + edge-fade gradient in one) */
.ben-lead {
  background: linear-gradient(180deg,
      #F6F1E8 0%,
      rgba(246,241,232,0.9) 4%,
      rgba(246,241,232,0) 14%,
      rgba(246,241,232,0) 86%,
      rgba(246,241,232,0.9) 96%,
      #F6F1E8 100%),
    url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41315d') center center / cover no-repeat #F6F1E8 !important;
  position: relative;
}
.ben-lead::before, .ben-lead::after { display: none !important; content: none !important; }
.ben-lead__inner { position: relative; z-index: 2; }

/* v4.13.15-e — bottom fade earlier (78% → 100% cream) for ¿Qué pasa después? space */
.ben-lead {
  background: linear-gradient(180deg,
      #F6F1E8 0%,
      rgba(246,241,232,0.9) 3%,
      rgba(246,241,232,0) 10%,
      rgba(246,241,232,0) 68%,
      rgba(246,241,232,0.75) 78%,
      #F6F1E8 88%,
      #F6F1E8 100%),
    url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41315e') center center / cover no-repeat #F6F1E8 !important;
}

/* ============================================================
   v4.13.16 — Projects mobile order, Contact bg fade opacity + mobile size, Seq2 flicker keepalive
   ============================================================ */
@media (max-width: 768px) {
  .ben-story__layer--proyectos .ben-proy-overlay { padding-top: 3rem !important; }
  .ben-proyectos__head { margin: 0 0 0.55rem 0 !important; padding: 0 !important; }
  .ben-proyectos__head .ben-eyebrow { margin-bottom: 0.4rem !important; }
  .ben-carousel { margin-top: 0.35rem !important; margin-bottom: 0 !important; }
  .ben-dots { margin-top: 0.15rem !important; margin-bottom: 1.6rem !important; }
  .ben-metrics { margin-top: 0 !important; }
}
.ben-lead {
  background: linear-gradient(180deg,
      #F6F1E8 0%,
      rgba(246,241,232,0.98) 5%,
      rgba(246,241,232,0.65) 11%,
      rgba(246,241,232,0.28) 18%,
      rgba(246,241,232,0.12) 30%,
      rgba(246,241,232,0.12) 55%,
      rgba(246,241,232,0.30) 66%,
      rgba(246,241,232,0.65) 76%,
      rgba(246,241,232,0.95) 84%,
      #F6F1E8 90%,
      #F6F1E8 100%),
    url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41316') center center / cover no-repeat #F6F1E8 !important;
}
@media (max-width: 768px) {
  .ben-lead {
    background: linear-gradient(180deg,
        #F6F1E8 0%,
        rgba(246,241,232,0.98) 5%,
        rgba(246,241,232,0.55) 10%,
        rgba(246,241,232,0.20) 16%,
        rgba(246,241,232,0.15) 30%,
        rgba(246,241,232,0.45) 40%,
        rgba(246,241,232,0.85) 48%,
        #F6F1E8 55%,
        #F6F1E8 100%),
      url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41316') center 20% / 100% auto no-repeat #F6F1E8 !important;
  }
}
@media (max-width: 768px) {
  .ben-story__canvas[data-ben-canvas="ventajas"] { aspect-ratio: auto !important; }
}

/* ============================================================
   v4.13.17 — Projects mobile cards/dots/stats compaction + Contact bg cover + long premium fades
   ============================================================ */
@media (max-width: 768px) {
  /* .ben-proyectos__head keeps prior spacing so headings do not move */
  .ben-carousel { margin-top: 0 !important; margin-bottom: -0.4rem !important; }
  .ben-dots { margin-top: 0 !important; margin-bottom: 0.35rem !important; }
  .ben-metrics { margin-top: -0.6rem !important; }
}
.ben-lead {
  background: linear-gradient(180deg,
      #F6F1E8 0%,
      rgba(246,241,232,0.98) 4%,
      rgba(246,241,232,0.82) 9%,
      rgba(246,241,232,0.50) 15%,
      rgba(246,241,232,0.22) 22%,
      rgba(246,241,232,0.10) 32%,
      rgba(246,241,232,0.10) 50%,
      rgba(246,241,232,0.24) 58%,
      rgba(246,241,232,0.50) 65%,
      rgba(246,241,232,0.80) 71%,
      rgba(246,241,232,0.96) 77%,
      #F6F1E8 82%,
      #F6F1E8 100%),
    url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41317') center center / cover no-repeat #F6F1E8 !important;
}
@media (max-width: 768px) {
  .ben-lead {
    background: linear-gradient(180deg,
        #F6F1E8 0%,
        rgba(246,241,232,0.98) 3%,
        rgba(246,241,232,0.80) 8%,
        rgba(246,241,232,0.45) 14%,
        rgba(246,241,232,0.18) 22%,
        rgba(246,241,232,0.10) 32%,
        rgba(246,241,232,0.10) 50%,
        rgba(246,241,232,0.24) 58%,
        rgba(246,241,232,0.50) 65%,
        rgba(246,241,232,0.80) 71%,
        rgba(246,241,232,0.96) 77%,
        #F6F1E8 82%,
        #F6F1E8 100%),
      url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41317') center center / cover no-repeat #F6F1E8 !important;
  }
}

/* v4.13.17-b — fix mobile Projects overlap: dots need clearance from stats */
@media (max-width: 768px) {
  .ben-carousel { margin-top: 0 !important; margin-bottom: -0.2rem !important; }
  .ben-dots { margin-top: 0 !important; margin-bottom: 0.9rem !important; }
  .ben-metrics { margin-top: 0 !important; }
}

/* v4.13.17-c — mobile bottom fade earlier: image ends by 60% for '¿Qué pasa después?' at 63.6% */
@media (max-width: 768px) {
  .ben-lead {
    background: linear-gradient(180deg,
        #F6F1E8 0%,
        rgba(246,241,232,0.98) 3%,
        rgba(246,241,232,0.80) 8%,
        rgba(246,241,232,0.45) 14%,
        rgba(246,241,232,0.18) 20%,
        rgba(246,241,232,0.10) 28%,
        rgba(246,241,232,0.10) 42%,
        rgba(246,241,232,0.28) 48%,
        rgba(246,241,232,0.60) 53%,
        rgba(246,241,232,0.88) 57%,
        #F6F1E8 60%,
        #F6F1E8 100%),
      url('/wp-content/uploads/benalaga-2026/stills/contact-bg.jpg?v=41317c') center center / cover no-repeat #F6F1E8 !important;
  }
}

/* ============================================================
   v4.13.18 — mobile Projects: lift cards + dots + stats together (headings unchanged)
   ============================================================ */
@media (max-width: 768px) {
  /* Negative margin-top on carousel pulls carousel + dots + stats up together as one block,
     preserving relative card↔stats spacing. Headings are not touched. */
  .ben-carousel { margin-top: -1.2rem !important; margin-bottom: -0.2rem !important; }
}

/* ============================================================
   v4.13.20 — Minimal cookie consent banner (LSSI-CE / GDPR)
   ============================================================ */
.ben-cookies { position: fixed; left: 1rem; bottom: 1rem; z-index: 99990; max-width: 340px; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.8rem 0.95rem; background: rgba(17,15,13,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(201,161,90,0.28); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.55); color: #F6F1E8; font-family: var(--font-sans, system-ui, sans-serif); font-size: 0.78rem; line-height: 1.42; }
.ben-cookies[hidden] { display: none !important; }
.ben-cookies__text { margin: 0; }
.ben-cookies__text a { color: #C9A15A; text-decoration: underline; text-underline-offset: 2px; }
.ben-cookies__actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.ben-cookies__btn { font: inherit; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid rgba(201,161,90,0.45); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ben-cookies__btn--ghost { background: transparent; color: #F6F1E8; }
.ben-cookies__btn--ghost:hover { background: rgba(246,241,232,0.12); }
.ben-cookies__btn--gold { background: #C9A15A; color: #111; border-color: #C9A15A; }
.ben-cookies__btn--gold:hover { background: #d8b26c; }
@media (max-width: 768px) { .ben-cookies { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .ben-cookies__btn { transition: none; } }

/* v4.13.20c — cookie buttons: override Elementor/theme pink (#CC3366) leak with !important */
.ben-cookies__btn { font: inherit !important; font-size: 0.76rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; padding: 0.4rem 0.95rem !important; border-radius: 999px !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; -webkit-appearance: none !important; appearance: none !important; }
.ben-cookies__btn--ghost { background: transparent !important; color: #F6F1E8 !important; border: 1px solid rgba(201,161,90,0.45) !important; }
.ben-cookies__btn--ghost:hover { background: rgba(246,241,232,0.12) !important; color: #F6F1E8 !important; }
.ben-cookies__btn--gold { background: #C9A15A !important; color: #111 !important; border: 1px solid #C9A15A !important; }
.ben-cookies__btn--gold:hover { background: #d8b26c !important; color: #111 !important; border-color: #d8b26c !important; }