/* ==========================================================
   Rumbo — Design tokens (source of truth: CLAUDE.md)
   ========================================================== */
:root {
  /* Brand */
  --navy: #0C2C57;
  --coral: #E07C57;

  /* Light surfaces. The page reads white with a very quiet grey wash; the
     gradient is viewport-anchored (background-attachment: fixed) so any
     section that needs its own opaque fill can reuse it and still line up
     seamlessly with the body behind it. --cream is kept as an alias because
     the dark chapters still reference the warm tone in a few borders. */
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --surface-grad: linear-gradient(180deg, #ffffff 0%, #f2f3f5 100%);
  --cream: #ffffff;
  /* The one warm, saturated cream: used sparingly to mark a real change of
     zone (e.g. "cómo se conecta") without dropping to a dark section. */
  --cream-warm: #F2EEE3;

  /* Derived surfaces (dark) */
  --navy-2: #12365f;
  --navy-3: #1a4170;

  /* Ink on light: neutral near-black, not navy. Against a neutral white/grey
     page the old navy ink read as a blue cast on every paragraph. */
  /* The old navy tints carried a legibility problem that was easy to miss on
     cream: the tertiary tone landed near 3:1. Rebalanced against white so the
     three steps stay clearly distinct AND the smallest one is readable. */
  --ink-100: #14161a;
  --ink-70: rgba(20, 22, 26, 0.74);
  --ink-45: rgba(20, 22, 26, 0.58);

  /* Ink on the navy chapters: white rather than cream, so the warm/cool
     mismatch against the neutral light sections disappears. */
  --cream-100: rgba(255, 255, 255, 1);
  --cream-60: rgba(255, 255, 255, 0.64);

  /* Product recreation states only */
  --ok: #1a9e5c;
  --flag: #d0453a;

  /* Hairlines and card chrome */
  --line: rgba(20, 22, 26, 0.10);

  /* Type — Inter is the sitewide default (titles and body alike); the old
     Bricolage/Schibsted pair survives only as hardcoded exceptions on the
     Agentes section and the Pilares title (see those rules directly). */
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Type scale (1.25 ratio, base 17px) */
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-md: 1.33rem;
  --text-lg: 1.66rem;
  --text-xl: 2.07rem;
  --text-2xl: 2.59rem;
  --text-3xl: 3.24rem;
  --text-display: clamp(2.6rem, 6vw, 4.5rem);
  --text-metric: clamp(4rem, 10vw, 8.75rem);

  /* Spacing (8px base) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;  --s-5: 40px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px; --s-20: 160px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --max-w: 1240px;
  --gutter: clamp(24px, 5vw, 64px);
}

/* ==========================================================
   Base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; } /* Lenis owns scrolling */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-100);
  background: var(--surface-grad) fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-45);
}
.eyebrow--dark { color: var(--cream-60); }

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 26px;
  transition: background-color 0.2s var(--ease-in-out-soft), transform 0.2s var(--ease-out-expo);
}

.btn--navy { background: var(--navy); color: var(--cream-100); }
.btn--navy:hover { background: var(--navy-3); }

.btn--sm { padding: 10px 18px; font-size: 0.9rem; }
.btn--coral { background: var(--coral); color: #fff; width: 100%; justify-content: center; }
.btn--coral:hover { background: #d9704a; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-100);
}
.btn-link svg { transition: transform 0.25s var(--ease-out-expo); }
.btn-link:hover svg { transform: translateX(3px); }
.btn-link--dark { color: var(--cream-100); }

/* ==========================================================
   Header — floating nav pill (Augen-style)

   Three parts: logo alone left, nav pill absolutely centred in the viewport,
   lang + CTA right. Everything here is header-scoped on purpose: the footer
   and the mobile overlay still use the shared .logo / .lang-switch / .btn
   rules further down, so none of those are touched.
   ========================================================== */
.site-header {
  position: fixed;
  top: 22px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 28px;
  /* Lets the page under the pill stay clickable; each child opts back in. */
  pointer-events: none;
  transition: top 0.35s var(--ease-in-out-soft);
}
.site-header.is-scrolled { top: 14px; }

.site-header__inner {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ---- Left: brand lockup in its own pill ----
   Same glass treatment as .nav-pill/.lang-toggle (blur, border, shadow), but
   the fill tints dark rather than white in the default (dark-theme) state:
   a white-tinted pill here caps the achievable contrast of the white lockup
   against the hero photo well short of the brand manual's 7:1 floor (measured
   ~7:1 is the asymptotic ceiling at 10% white with any backdrop), so this pill
   alone needs a dark tint. .nav-pill/.lang-toggle are untouched — they carry
   text, not the logo, and weren't part of that contrast requirement. See
   .hero__header-scrim below for the other half of the fix. */
.hlogo {
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 15px 22px;
  background: rgba(10, 10, 9, 0.30);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: background-color 0.3s var(--ease-in-out-soft), border-color 0.3s var(--ease-in-out-soft);
}
/* Two inline lockups, one shown at a time. Height set here (not width) so the
   SVG's own 5.16:1 viewBox ratio determines width automatically — never
   stretch or distort it. 30px clears the manual's 24px floor with room. */
.hlogo__mark { height: 30px; width: auto; display: block; transition: opacity 0.2s var(--ease-out-expo); }
.hlogo__mark--color { display: none; }
.site-header.is-on-light .hlogo__mark--color { display: block; }
.site-header.is-on-light .hlogo__mark--white { display: none; }

/* ---- Centre: the floating pill, absolutely centred on the viewport ---- */
.nav-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color 0.3s var(--ease-in-out-soft), border-color 0.3s var(--ease-in-out-soft);
}

.nav-links { display: flex; align-items: center; gap: 0; padding: 0 4px; }
.nav-links a {
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  transition: color 0.18s var(--ease-out-expo);
}
.nav-links a:hover { color: #fff; }

/* ---- Right: lang toggle + CTA ---- */
.header-right {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 10px 15px;
  transition: background-color 0.3s var(--ease-in-out-soft), border-color 0.3s var(--ease-in-out-soft);
}
.lang-toggle button, .lang-toggle a {
  font: inherit;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.18s var(--ease-out-expo);
}
.lang-toggle button.is-active, .lang-toggle a.is-active { color: #fff; }
.lang-toggle button:hover, .lang-toggle a:hover { color: #fff; }
.lang-toggle .sep { color: rgba(255, 255, 255, 0.4); font-weight: 400; }

.cta-demo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #111;
  background: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s var(--ease-out-expo), box-shadow 0.18s var(--ease-out-expo);
}
.cta-demo:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }

/* ---- Light context ----
   The header is fixed, so once it leaves the dark hero and rides over the
   cream sections the white ink would vanish. JS flips this class at the point
   where the hero's gradient has already turned light. */
/* Tinted grey, not off-white. The old values were built against cream: over a
   pure white page they composite to white with a white border, so the pill
   lost every edge and the nav read as loose words floating in the header. */
.site-header.is-on-light .hlogo,
.site-header.is-on-light .nav-pill,
.site-header.is-on-light .lang-toggle,
.site-header.is-on-light .menu-toggle {
  background: rgba(20, 22, 26, 0.05);
  border-color: rgba(20, 22, 26, 0.10);
  box-shadow: 0 8px 30px rgba(20, 22, 26, 0.06);
}
.site-header.is-on-light .nav-links a { color: rgba(17, 17, 17, 0.66); }
.site-header.is-on-light .nav-links a:hover { color: #111; }
.site-header.is-on-light .lang-toggle button,
.site-header.is-on-light .lang-toggle a { color: rgba(17, 17, 17, 0.45); }
.site-header.is-on-light .lang-toggle button.is-active,
.site-header.is-on-light .lang-toggle a.is-active,
.site-header.is-on-light .lang-toggle button:hover,
.site-header.is-on-light .lang-toggle a:hover { color: #111; }
.site-header.is-on-light .lang-toggle .sep { color: rgba(17, 17, 17, 0.35); }
.site-header.is-on-light .cta-demo {
  color: #fff;
  background: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.site-header.is-on-light .menu-toggle__bar { background: #111; }

/* ---- Intermediate widths ----
   The pill is centred on the viewport while the logo and CTA are pinned to the
   edges, so the three can collide before any classic breakpoint. Measured
   collision point is ~940px, so the link padding tightens first and the pill
   is swapped for the hamburger well before anything overlaps. */
@media (max-width: 1180px) {
  .nav-links a { padding-inline: 13px; }
}
@media (max-width: 1060px) {
  .nav-links a { padding-inline: 10px; font-size: 13.5px; }
  .header-right { gap: 10px; }
  .cta-demo { padding-inline: 18px; }
}

/* ==========================================================
   Mobile nav (menu-toggle button + full-panel overlay)
   ========================================================== */
/* Wears the same glass treatment as the pill so it reads as part of the
   floating header rather than a leftover button. */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  transition: background-color 0.3s var(--ease-in-out-soft), border-color 0.3s var(--ease-in-out-soft);
}
.menu-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease-in-out-soft), opacity 0.3s var(--ease-in-out-soft), background-color 0.3s var(--ease-in-out-soft);
}
.menu-toggle.is-open .menu-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--surface);
  padding-top: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
  transition:
    opacity 0.4s var(--ease-in-out-soft),
    transform 0.4s var(--ease-in-out-soft),
    visibility 0s linear 0.4s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.4s var(--ease-in-out-soft),
    transform 0.4s var(--ease-in-out-soft),
    visibility 0s linear 0s;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-8) var(--gutter);
}
.mobile-nav__links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  color: var(--ink-100);
  padding-block: 6px;
  opacity: 0;
  transform: translateY(14px);
}
.mobile-nav.is-open .mobile-nav__links a { opacity: 1; transform: none; }

.mobile-nav__foot {
  padding: var(--s-6) var(--gutter) var(--s-8);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.mobile-nav__foot .btn { flex-shrink: 0; }
.lang-switch--mobile { font-size: 0.9rem; }

/* Hamburger takes over at 1000px, comfortably above the ~940px where the
   centred pill would start touching the logo and the CTA. */
@media (max-width: 1000px) {
  .menu-toggle { display: flex; }
  .nav-pill, .lang-toggle, .cta-demo { display: none; }
}
@media (min-width: 1001px) {
  .mobile-nav { display: none; }
}
@media (max-width: 480px) {
  .site-header { padding: 0 20px; }
  /* 26px per the manual (still clear of the 24px floor); width still follows
     the SVG's own ratio automatically. */
  .hlogo__mark { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav__links a, .menu-toggle__bar { transition: none; }
}

/* ==========================================================
   Hero — static photo stage, no product mockup
   The dashboard mockup and its pinned zoom sequence are gone (see
   js/main.js): this is now a single, un-pinned first screen. Copy sits with
   room to breathe near the top, the backers strip is pushed to the bottom
   edge, everything else is a fixed one-viewport frame around a photo.

   Every rule is scoped under .hero on purpose (leftover from the reference
   this was built against), so nothing here leaks into another section.
   ========================================================== */
.hero {
  position: relative;
  /* Own stacking context, so .hero__bg's z-index: -1 stays scoped inside
     .hero (behind its overlay/texture/content) instead of escaping to the
     page root and painting behind .hero's own background-color. */
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Exactly one screen: no pin any more to justify overshooting past 100vh. */
  height: 100vh;
  padding: 0 24px 56px;
  text-align: center;
  overflow: hidden;
  /* Warm sunset tone lifted from the photo itself (sampled from its middle
     band): this is what shows the instant the section paints, before the
     photo has decoded, so the jump to the real image is a color shift
     rather than a stark dark-to-photo pop. The photo itself lives in
     .hero__bg (see below), a separate layer so it can fade in on its own
     without touching this base color, the header or the copy. */
  background-color: #e2c29f;
}

/* Photo layer, isolated so it alone can fade in once loaded. Starts at
   opacity 0 (the .hero background-color above shows through); js/main.js
   preloads the real image and adds .is-loaded when it's actually decoded.
   background-attachment: fixed gives a soft parallax as the rest of the
   page scrolls up over it. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../assets/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  opacity: 0;
  transition: opacity 0.4s var(--ease-in-out-soft);
}
html.webp .hero__bg { background-image: url('../assets/hero-bg.webp'); }
.hero__bg.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg { transition: none; }
}
/* background-attachment: fixed on a non-body element is unreliable on mobile
   browsers (notably iOS Safari) — it can render the layer blank instead of
   just losing the parallax. Mobile falls back to a plain scrolling background. */
@media (max-width: 960px) {
  .hero__bg { background-attachment: scroll; }
}

/* Contrast fix for the white logo lockup sitting over this photo (brand
   manual Task 4: white-on-photo must hit 7:1). The existing .hero::before
   gradient (built for the title's legibility, alpha ~0.5 at the very top) was
   measured against this specific photo at ~4.3:1 at the header band, and the
   .hlogo pill's own translucent fill dragged that back down further — nowhere
   near 7:1. This is a second, independent, more concentrated scrim scoped to
   just the header's height, so it doesn't darken the rest of the hero photo
   the title sits against. Measured with both this scrim and the .hlogo dark
   tint together: ~9.2:1. */
.hero__header-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 9, 0.55) 0%, rgba(10, 10, 9, 0) 100%);
}

/* Overlay is its own layer, never over the content: it sits above the photo
   (the element background) but below the textures (z 0, later in the DOM),
   the product (z 1) and the copy (z 2). Darkens the top for legibility and
   lets the image breathe toward the bottom. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 10, 20, 0.52) 0%,
    rgba(5, 10, 20, 0.35) 40%,
    rgba(5, 10, 20, 0.20) 70%,
    rgba(5, 10, 20, 0.08) 100%);
}

/* Three texture layers: light bloom, compass rays, nautical dot field */
.hero .texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero #tex-bloom {
  background: radial-gradient(ellipse 45% 35% at 50% 28%, rgba(255, 255, 255, 0.09), transparent 70%);
}
.hero #tex-rays {
  background-image: repeating-conic-gradient(from 0deg at 50% 30%,
    rgba(255, 255, 255, 0.05) 0deg 0.5deg, transparent 0.5deg 15deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 0%, transparent 65%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 0%, transparent 65%);
}
.hero #tex-dots {
  /* Halved over the photo so the nautical dots read as a faint accent, not a
     second texture competing with the image's own grain. */
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.32) 1.3px, transparent 1.5px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 32%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 32%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
}

/* margin-top clears the floating header pill; with the dashboard gone there is
   no more squeeze for peek room, so this can breathe instead of hugging 11px
   under the pill the way the old tuned-for-the-mockup value did. */
.hero-content { position: relative; z-index: 2; max-width: 1000px; margin: 128px auto 0; }

/* padding-bottom keeps the descender of "freight" from being clipped by
   background-clip:text */
.hero .hero-title {
  font-size: clamp(3rem, 6.8vw, 6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 30px;
  padding-bottom: 0.08em;
  background: linear-gradient(120deg, #ffffff 0%, #F2EEE3 35%, #e8c99a 72%, var(--coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero .sub-primary {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  max-width: 680px;
  margin: 0 auto 18px;
  letter-spacing: -0.01em;
}
.hero .sub-secondary {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  max-width: 620px;
  margin: 0 auto 42px;
}

.hero .cta-row { display: flex; gap: 12px; justify-content: center; }
.hero .btn-primary {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  padding: 15px 30px;
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
}
.hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32); }
.hero .btn-ghost {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s var(--ease-out-expo);
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }

/* ---- Backers strip: bottom of the hero, over the same photo ----
   margin-top: auto pushes it to the bottom of the flex column regardless of
   how tall the copy above it is — that's what keeps it pinned near the
   viewport's bottom edge instead of drifting with content length. */
.hero__backers { width: 100%; margin-top: auto; }

.hero__backers-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: var(--s-2);
  column-gap: var(--s-10);
}

/* Both bumped toward full opacity plus a soft dark shadow: at the bottom of
   the hero the darkening overlay has almost faded out (by design, to let the
   photo breathe), so the strip sits directly on a bright/warm sky with very
   little built-in contrast. Opacity alone isn't reliable against a photo —
   the shadow is what keeps this legible regardless of what's behind it. */
.backers__label {
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
  margin-right: var(--s-2);
}

.backers__name {
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Brand mark reads as part of the same line as the label/names beside it, not
   a stamped badge: height matched to sit at the same visual weight as the
   bold "Honeystone" name next to it (the manual's own "80% of cap-height"
   guidance was written for a compact "BACKED BY [mark]" pairing and would
   render illegibly small here, where the mark stands in for a full-size name
   chip instead), the row's align-items: center handles vertical centering. */
.backers__mark { height: 17px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45)); }

/* Mobile: no pin, no product to accommodate any more, so this is just a
   normal-height section — grow to fit whatever the copy + backers need. */
@media (max-width: 960px) {
  .hero { height: auto; min-height: 100vh; }
}

@media (max-width: 720px) {
  .hero-content { margin-top: 96px; }
  .hero__backers-inner { justify-content: center; column-gap: var(--s-5); }
  .backers__label { flex-basis: 100%; margin-right: 0; margin-bottom: 2px; text-align: center; }
}

/* ==========================================================
   Problema (light, pinned three-scene sequence)
   Font is Inter throughout — no local override needed any more, it's the
   sitewide default now, same as everywhere except Agentes and the Pilares
   title. Ink hierarchy is literally --navy derived via color-mix, per
   brief, rather than the sitewide neutral --ink-* tokens.
   ========================================================== */
.problema__stage {
  min-height: 100vh;
  width: 100%;
  /* No fill of its own: the page's white-to-grey wash (fixed on body) shows
     through unbroken, exactly like the other light sections. */
  background: transparent;
  /* Pure black, not navy: this section's text reads as neutral ink so it does
     not carry the brand-blue cast the other copy dropped. Only the coral
     eyebrow keeps colour. */
  color: #1a1a1a;
  display: flex;
  align-items: center;
}

.problema__inner {
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  /* s-8 -> s-10: the scenes column (below) used to be the tallest of the
     three and set the row's height; now that it's tightened, this deliberate
     bump plus the stage's own centering (which auto-grows to fill whatever
     the row no longer needs) both add to top/bottom breathing room. */
  padding: var(--s-10) var(--gutter);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.5fr;
  align-items: center;
  gap: 0 var(--s-8);
}

.problema .eyebrow { color: var(--coral); margin-bottom: var(--s-2); }
/* min-width: 0 on every grid item: without it a fr track refuses to shrink
   past its content's max-content width (the classic grid text-blowout bug),
   which at narrow widths grew the whole grid to fit the headline on one line
   instead of letting it wrap. */
.problema__copy { display: flex; flex-direction: column; gap: var(--s-10); min-width: 0; }
.problema__title {
  font-size: clamp(1.9rem, 2.7vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #1a1a1a;
}
.problema__closer { opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
.problema__closer-big { font-size: 1.15rem; font-weight: 500; line-height: 1.42; color: #1a1a1a; margin-bottom: var(--s-2); }
.problema__closer-cost { font-size: 0.95rem; color: rgba(26, 26, 26, 0.62); line-height: 1.55; }
.problema__closer-cost strong { color: #1a1a1a; font-weight: 600; }

/* No align-self:stretch any more: stretching this column to the full row
   height was exactly why its border-left ran edge to edge. Left to its own
   natural (now compact) content height like its sibling columns, the grid's
   own align-items:center centers that shorter box in the row, and the
   border-left — still just a plain property on this box — automatically
   becomes a short, centered line instead of a full-height one. */
.problema__scenes {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-5);
  border-left: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
  min-width: 0;
}
/* s-4 -> s-2: the three scenes read as one tight group instead of three
   loosely related, evenly-spaced blocks. */
.problema__scene {
  padding: var(--s-2) 0;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.problema__scene + .problema__scene { border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); }
.problema__scene-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-2); }
.problema__scene-icon svg { width: 20px; height: 20px; stroke: var(--navy); opacity: 0.85; }
.problema__scene h3 { font-size: 1.02rem; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; }
.problema__scene p { font-size: 0.92rem; line-height: 1.5; color: rgba(26, 26, 26, 0.62); }

.problema__product { display: flex; align-items: center; min-width: 0; }

/* ---- Product stage: decorative port backdrop, independent of the section's
   own palette (same treatment as the hero mockup's stage). Kept exactly as
   in the approved reference. ---- */
.problema__product .stage {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  padding: 40px 40px 0;
  background:
    linear-gradient(180deg, rgba(12, 44, 87, 0.30), rgba(12, 44, 87, 0.10)),
    linear-gradient(155deg, #a7c0d8, #b6c6d4 45%, #cfc9ba);
  box-shadow: 0 30px 70px rgba(12, 44, 87, 0.12);
}
.problema__product .browser {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.24);
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: none;
}
.problema__product .bbar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: rgba(26, 26, 26, 0.5); }
.problema__product .bbar .d { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.problema__product .bbar .u { margin-left: 9px; font-size: 10.5px; color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.14); padding: 4px 11px; border-radius: 5px; }

.problema__product .screens { position: relative; min-height: 340px; }
.problema__product .screen { position: absolute; inset: 0; display: flex; opacity: 0; }
.problema__product .screen:first-child { opacity: 1; }
.problema__product .sb { width: 160px; padding: 15px 12px; background: rgba(245, 245, 245, 0.32); border-right: 1px solid rgba(0, 0, 0, 0.05); }
.problema__product .sb .lg { font-weight: 700; color: #1a1a1a; font-size: 13px; margin-bottom: 16px; }
.problema__product .sb .it { font-size: 12px; color: #555; padding: 7px 9px; border-radius: 6px; margin-bottom: 2px; }
.problema__product .sb .it.on { background: rgba(255, 255, 255, 0.75); color: #111; font-weight: 600; }
.problema__product .mn { flex: 1; padding: 18px 20px; }
.problema__product .mn .g { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; }

.problema__product .mailrow { background: rgba(255, 255, 255, 0.6); border-radius: 9px; padding: 12px; margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, 0.5); }
.problema__product .mailrow.unread { border-left: 3px solid var(--navy); }
.problema__product .mailrow .from { font-size: 11px; font-weight: 600; color: #1a1a1a; margin-bottom: 3px; display: flex; justify-content: space-between; }
.problema__product .mailrow .t { color: #999; font-weight: 400; }
.problema__product .mailrow .subj { font-size: 11.5px; color: #333; }
.problema__product .mailrow .prev { font-size: 10px; color: #999; margin-top: 3px; line-height: 1.4; }

.problema__product .quotecard { background: rgba(255, 255, 255, 0.65); border-radius: 10px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.5); }
.problema__product .quotecard .qh { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.problema__product .quotecard .qs { font-size: 11px; color: #888; margin-bottom: 14px; }
.problema__product .qline { display: flex; justify-content: space-between; font-size: 11.5px; padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.problema__product .qline span:first-child { color: #777; }
.problema__product .qline span:last-child { color: #1a1a1a; font-weight: 600; }
.problema__product .qsent { margin-top: 14px; background: #e7f3ec; color: #1a7a45; font-size: 11.5px; font-weight: 600; padding: 9px 12px; border-radius: 7px; }
.problema__product .docrow { display: flex; justify-content: space-between; font-size: 11.5px; padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.problema__product .docrow span:first-child { color: #777; }
.problema__product .docrow span:last-child { color: #1a1a1a; font-weight: 600; }
.problema__product .docrow.err span:last-child { color: var(--flag); }
.problema__product .errbanner { margin-top: 14px; background: #fbeae8; color: var(--flag); font-size: 11.5px; font-weight: 600; padding: 10px 12px; border-radius: 7px; border-left: 3px solid var(--flag); }

@media (prefers-reduced-motion: reduce) {
  .problema__closer, .problema__scene { opacity: 1; transform: none; }
  .problema__product .screen { position: static; opacity: 1; display: none; }
  .problema__product .screen:first-child { display: flex; }
}

@media (max-width: 960px) {
  /* No pin below this width (see js/main.js): a 340vh pinned stage forcing
     copy + three scenes + the product frame into one fixed viewport would
     either overflow or crush everything. Stacked, normal-flow layout instead,
     content revealed once on scroll rather than scrubbed. */
  .problema__stage { min-height: 0; }
  .problema__inner { grid-template-columns: 1fr; padding-block: var(--s-12); gap: var(--s-8) 0; }
  .problema__scenes { border-left: none; padding: var(--s-4) 0 0; border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent); }
  .problema__closer, .problema__scene { opacity: 1; transform: none; }
  .problema__product .screen { position: static; opacity: 1; display: none; }
  .problema__product .screen:first-child { display: flex; }
}

@media (max-width: 480px) {
  .problema__inner { padding-inline: var(--gutter); }
  .problema__product .screens { min-height: 300px; }
}

/* ==========================================================
   Pilares (DARK, pinned Tonik/Speedrun-style vertical carousel:
   a giant title slide is pushed fully off-screen by scroll while
   the results slide rises in from below, in one continuous motion)
   ========================================================== */
/* Deep opaque navy-black, not a mid-tone: deliberately darker than the
   section used to be so it reads as true black-adjacent, never grey. */
.pilares {
  --pil-line: rgba(255, 255, 255, 0.12);
  background: #030A14;
  color: var(--cream-100);
}

/* Full-bleed dark slab that carries the pin: trigger and pin are the same
   element (same rule as Problema/Agentes). overflow:hidden is what makes the
   carousel read as a clean vertical wipe instead of showing both slides
   spilling past the section's edges while they travel. */
.pilares__stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #030A14;
}

/* Both slides sit stacked in the exact same spot (inset:0 against the
   pinned, viewport-height stage) and are moved with yPercent, which is
   relative to each slide's OWN size — since that size is the full stage
   height, "-100" and "100" always mean exactly one screen, regardless of how
   tall either slide's actual content is. No measured pixel offsets, so
   nothing here depends on a resize/font-load remeasure to stay correct. */
.pilares__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--gutter);
  text-align: center;
}

/* No max-width here: 26ch resolved against this element's own (small,
   inherited) font-size, not the title's giant one, so it wrapped the
   headline into six cramped lines instead of two generous ones. The title
   below constrains its own width in units of its own font-size instead. */
.pilares__head { max-width: 100%; }
.pilares .eyebrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  margin-bottom: var(--s-5);
}
/* The protagonist: large enough to dominate the screen on its own, the way
   a title slide should before anything else is allowed to compete with it. */
/* Sole exception in this section: kept in the old display face on purpose
   (see the sitewide Inter switch — Agentes and this one title are the only
   two hardcoded holdouts). Everything else in Pilares, including the
   metric numbers below, now follows the rest of the site into Inter. */
.pilares__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--cream-100);
  /* ch here resolves against THIS element's own giant font-size, unlike the
     max-width that used to live one level up on .pilares__head. Tuned for a
     clean two-line break on the current copy. */
  max-width: 21ch;
  margin: 0 auto;
}

.pilares__inner { max-width: 1360px; width: 100%; margin: 0 auto; }
.pilares__sub {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 52ch;
  margin: 0 auto var(--s-8);
}

/* One hairline across the top defines the three columns as one row: the
   structure comes from the rule and the shared baselines, not from three
   identical decorated boxes. */
.pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  align-items: start;
  border-top: 1px solid var(--pil-line);
  text-align: left;
}

/* All three are siblings with an identical internal structure —
   title / metric / unit / sub — and each row has a reserved height, so the
   horizontal bands line up exactly no matter how long any one card's copy is. */
.pilar {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-4);
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

.pilar__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  min-height: 1.5em;
  margin-bottom: var(--s-5);
}

/* The metric is the protagonist: display-scale Bricolage, everything else
   demoted around it. Baseline alignment keeps the unit tucked to the number. */
.pilar__metric {
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  margin-bottom: var(--s-4);
}
.pilar__num {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--cream-100);
  font-size: clamp(5.5rem, 9vw, 7.5rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.pilar__suffix {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.4);
}

.pilar__unit {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  min-height: 3em;
  margin-bottom: var(--s-3);
}

.pilar__sub {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid var(--pil-line);
  padding-top: var(--s-3);
}

@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  /* No carousel below this width, and none at all under reduced motion: both
     slides drop out of the pin and stack in normal document flow instead of
     overlapping at inset:0. */
  .pilares__stage { position: static; min-height: 0; overflow: visible; }
  .pilares__slide { position: static; transform: none; padding: var(--s-12) var(--gutter); }
}

@media (max-width: 960px) {
  .pilares__slide--intro { padding-bottom: var(--s-8); }
  .pilares__head { max-width: none; text-align: left; }
  .pilares__title { font-size: clamp(2rem, 7vw, 2.6rem); max-width: none; margin: 0; }
  .pilares__slide--results { text-align: left; padding-top: var(--s-8); }
  .pilares__sub { margin-inline: 0; }
  .pilares__grid { grid-template-columns: 1fr; gap: 0; border-top: none; }
  /* Stacked: each pillar carries its own rule so the rhythm survives. */
  .pilar { border-top: 1px solid var(--pil-line); padding-block: var(--s-6) var(--s-2); }
  .pilar__title, .pilar__unit { min-height: 0; }
  .pilar__unit { max-width: 40ch; }
}

@media (max-width: 480px) {
  .pilares__slide { padding-inline: var(--gutter); }
  .pilar__num { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pilar { opacity: 1; transform: none; }
}

/* ==========================================================
   Nuestra solución (light section): three cards in a row, sharing one
   panoramic photo cut across their visual areas (see .solbox__visual).
   ========================================================== */
.producto { background: transparent; }

.solucion__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--s-16) var(--gutter);
}
.solucion__head { margin-bottom: var(--s-3); }
.solucion__title { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; }

.solucion__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  /* Stretch (grid's default): copy across the three cards is now kept
     close in length on purpose, so the tallest card's natural height is
     only ever a few px more than the others — stretch closes that gap
     exactly instead of leaving three slightly uneven bottoms. */
  align-items: stretch;
}

.solbox {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(20, 22, 26, 0.22);
  opacity: 0;
  transform: translateY(20px);
}

/* One image, three windows: background-size is 300% of a single card's own
   width (= the three cards' combined width), so at 0/50/100% background
   position each card shows exactly its third — left, center, right — and
   the three would tile back into the full photo if placed edge to edge.
   Height stays "auto" so the crop never distorts, just crops top/bottom. */
.solbox__visual {
  position: relative;
  height: 290px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: #0C2C57;
  background-image: url('../assets/solucion-bg.jpg');
  background-size: 300% auto;
  background-position-y: 45%;
}
html.webp .solbox__visual { background-image: url('../assets/solucion-bg.webp'); }
.solbox--1 .solbox__visual { background-position-x: 0%; }
.solbox--2 .solbox__visual { background-position-x: 50%; }
.solbox--3 .solbox__visual { background-position-x: 100%; }
/* Navy scrim (same family as the hero/agentes photo treatment), now flatter
   and present top-to-bottom rather than bottom-weighted: the glass UI below
   covers nearly the whole visual area (not just a bottom-anchored card), so
   it needs consistent legibility contrast everywhere behind it, not just
   at the foot of the frame. */
.solbox__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 44, 87, 0.22) 0%, rgba(12, 44, 87, 0.48) 100%);
}

.solbox__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.solbox__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.85vw, 1.55rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.solbox__text { font-size: 0.875rem; line-height: 1.45; color: var(--ink-70); margin-bottom: 10px; }
.solbox__list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.solbox__list li { position: relative; padding-left: 16px; font-size: 0.8125rem; color: var(--ink-70); line-height: 1.35; }
.solbox__list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* ---- Product UI mockups: a full recreated screen (browser chrome, sidebar,
   header, content) per card, Raft-style — glass rather than an opaque card,
   so the photo keeps reading through the blur instead of being covered by
   it. backdrop-filter blurs the photo+scrim sitting behind it in the same
   stacking context, which is what produces the frosted look. ---- */
.solui {
  position: absolute;
  inset: 14px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 20px 45px -20px rgba(5, 16, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.solui__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.solui__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); }
.solui__url {
  margin-left: 6px;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solui__body { flex: 1; min-height: 0; display: flex; }
.solui__side {
  width: 92px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.solui__side-item {
  font-size: 0.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  padding: 5px 6px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solui__side-item--active { background: rgba(255, 255, 255, 0.2); color: #fff; }

.solui__main { flex: 1; min-width: 0; padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.solui__heading { font-size: 0.6875rem; font-weight: 700; color: #fff; margin-bottom: 2px; }

.solui__row { display: flex; align-items: center; gap: 7px; }
.solui__num {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.5rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.solui__op { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.92); font-weight: 500; font-size: 0.625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solui__cost { font-weight: 700; font-size: 0.625rem; color: rgba(255, 255, 255, 0.75); flex-shrink: 0; }
.solui__cost--high { color: var(--coral); }

.solui__compare { display: flex; flex-direction: column; gap: 5px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; padding: 7px 9px; }
.solui__compare-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.625rem; color: rgba(255, 255, 255, 0.7); }
.solui__compare-row strong { font-size: 0.6875rem; color: #fff; font-weight: 700; }
.solui__compare-row strong.is-flag { color: #ff9c8f; }
.solui__flagbtn { align-self: flex-start; background: var(--flag); color: #fff; font-size: 0.5625rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; }

.solui__tl { display: flex; align-items: center; gap: 7px; font-size: 0.625rem; color: rgba(255, 255, 255, 0.78); }
.solui__tl-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); flex-shrink: 0; }
.solui__tl-dot--auto { background: var(--coral); }

@media (max-width: 960px) {
  .solucion__inner { padding-block: var(--s-10); }
  .solucion__head { margin-bottom: var(--s-6); }
  .solucion__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  /* Stacked cards no longer sit edge to edge, so the "one photo cut into
     three" illusion doesn't apply — each shows the full frame instead of
     an arbitrary third. */
  .solbox--1 .solbox__visual, .solbox--2 .solbox__visual, .solbox--3 .solbox__visual {
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 480px) {
  .solucion__inner { padding-inline: var(--gutter); }
  .solbox__visual { height: 190px; }
}

/* ==========================================================
   "Cómo se conecta" + Seguridad: its own warm-cream zone (distinct from
   the white/grey wash on either side) split into two coherent halves —
   onboarding ease on the cream canvas, security in its own white card.
   ========================================================== */
.pconnect-section { background: var(--cream-warm); }

.conecta-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--s-16) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

/* ---- Part 1: the onboarding claim (checklist) plus the channels it
   plugs into, side by side — claim carries the weight, the channel card
   is the proof. ---- */
.conecta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--s-10);
  align-items: start;
}
.conecta__claim .eyebrow { margin-bottom: var(--s-2); }
.conecta__title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 15ch;
  margin-bottom: var(--s-5);
  opacity: 0;
  transform: translateY(16px);
}
.conecta__checklist { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.conecta__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
}
.conecta__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(224, 124, 87, 0.14);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.conecta__check svg { width: 13px; height: 13px; }
.conecta__point { font-size: 1rem; line-height: 1.5; color: var(--ink-100); padding-top: 2px; }
.conecta__point strong { font-weight: 700; }

.conecta__channels {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--s-5);
  opacity: 0;
  transform: translateY(16px);
}
.conecta__channels-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-4);
}
.conecta__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.conecta__item { min-width: 0; }
.conecta__icon { width: 22px; height: 22px; color: var(--ink-45); margin-bottom: 10px; display: block; }
.conecta__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: 4px; }
.conecta__desc { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-70); }

/* ---- Part 2: security, its own dark card so the two halves stay visually
   distinct while sharing the same cream canvas underneath. Deliberately
   ink-warm/bone rather than the site's navy/cream tokens: this card is
   scoped to read as a dedicated "trust" moment, not a copy of the CTA's
   dark register. Values are hardcoded (not added to :root) since they're
   scoped to this one card, not adopted sitewide.
   Own data-theme="dark" on the card itself (not the whole .pconnect-section,
   which stays "light" for .conecta above it): the floating header still
   passes over this exact spot while scrolling, so without its own zone it
   would keep the light-surface (dark ink) chrome over this now-dark card
   and go illegible — same fix pattern as .cta__inner/.faq elsewhere. */
.seguridad {
  background: #12110E;
  border-radius: 24px;
  border: 1px solid rgba(244, 240, 230, 0.08);
  box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.5);
  padding: var(--s-10) var(--s-8);
  opacity: 0;
  transform: translateY(20px);
}
.seguridad__head { max-width: 40ch; margin-bottom: var(--s-8); }
/* The one deliberate accent moment in this card: brand blue on the eyebrow
   only. Nowhere else in .seguridad uses blue. */
.seguridad__head .eyebrow { margin-bottom: var(--s-2); color: #537DF7; }
.seguridad__title { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; color: #F4F0E6; }

/* No icons: weight comes from the title/detail hierarchy, not decoration
   (that's what read as a generic checklist before). A hairline rule per
   item is structural spacing, not ornament. */
.seguridad__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); }
.seguridad__item { min-width: 0; padding-top: var(--s-5); border-top: 1px solid rgba(244, 240, 230, 0.14); }
.seguridad__name { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; color: #F4F0E6; margin-bottom: 8px; line-height: 1.35; }
.seguridad__desc { font-weight: 400; font-size: 0.9375rem; line-height: 1.55; color: rgba(244, 240, 230, 0.64); }

@media (max-width: 960px) {
  .conecta-wrap { padding-block: var(--s-10); gap: var(--s-8); }
  .conecta { grid-template-columns: 1fr; gap: var(--s-6); }
  .conecta__title { max-width: 100%; }
  .seguridad { padding: var(--s-6); }
  .seguridad__grid { gap: var(--s-6) var(--s-5); }
}

@media (max-width: 640px) {
  .conecta__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .conecta-wrap { padding-inline: var(--gutter); }
  .seguridad { padding: var(--s-5) var(--s-4); border-radius: 18px; }
  .seguridad__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .solbox { opacity: 1; transform: none; }
  .conecta__title, .conecta__checklist li, .conecta__channels, .seguridad { opacity: 1; transform: none; }
}

/* ==========================================================
   Agentes (light section, two cards: photo intro + dark rail box)
   ========================================================== */
/* Flat light grey canvas (same tone the other light sections' off-white
   surface uses) so both cards read as objects floating on it, Raft-style —
   not the page's fixed white-to-grey wash, a deliberate flat fill. */
/* Second (and last) hardcoded holdout from the sitewide Inter switch: this
   whole section keeps the old Bricolage/Schibsted pair. Setting the body
   face here once, at the section root, covers every plain text node
   (eyebrow, sub, agent descriptions, mockup labels) by inheritance; the
   handful of display-styled elements below (title, rail names, agent
   headlines) get their own explicit Bricolage override since a directly
   matching heading rule would otherwise beat this inherited value. */
.agentes { background: #dcdee3; color: var(--ink-100); font-family: "Schibsted Grotesk", sans-serif; }

.agentes__stage {
  min-height: 100vh;
  width: 100%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
}

/* Widened from 1360: at 1440 viewport this used to cap 80px short of the
   available width. That freed width plus the tightened gap below both go
   straight into the cards. */
.agentes__inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-8) var(--gutter);
}

/* Grid, not flex: align-items:stretch (grid's default) makes both cards
   match the taller one's height automatically, whichever that turns out to
   be, instead of hardcoding a shared height that would drift the moment
   either card's content changes. Gap tightened (s-6 -> s-4) for a finer seam
   between the two cards now that they're wider. */
.agentes__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-4);
}

/* ---- Left card: fixed photo intro, does not change with scroll ---- */
.agentes__intro {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  /* 560 -> 640: a moderate bump. Stage stays centered via flex, so both
     cards (matched by grid stretch) grow together and stay centered as a
     pair; still well clear of a 900px viewport with the stage's own padding. */
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding: var(--s-8);
  background-color: #0C2C57;
  background-image: url('../assets/agentes-bg.jpg');
  background-size: cover;
  background-position: center;
}
html.webp .agentes__intro { background-image: url('../assets/agentes-bg.webp'); }
/* Overlay as its own layer so the photo can still read through it, strongest
   at the bottom where the copy sits (matches align-items:flex-end above). */
.agentes__intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 16, 31, 0.15) 0%,
    rgba(5, 16, 31, 0.45) 55%,
    rgba(5, 16, 31, 0.86) 100%);
}
.agentes__intro .agentes__head { position: relative; z-index: 1; max-width: 30ch; }
.agentes__intro .eyebrow { color: rgba(255, 255, 255, 0.62); margin-bottom: var(--s-3); }
.agentes__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--s-3);
}
.agentes__sub { font-size: 1.125rem; color: rgba(255, 255, 255, 0.72); max-width: 38ch; }

/* ---- Right card: white box holding the rail + the scrubbed panel ----
   Every micro-visual below (.avis-*) was originally built for a dark field;
   each one is re-paired here with a light-safe equivalent (dark tints
   instead of white ones, opaque fills instead of translucent-white ones that
   would vanish against a white parent). Coral stays coral throughout — it
   was never white-dependent. */
.agentes__box {
  --box-line: rgba(20, 22, 26, 0.10);
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink-100);
  border: 1px solid var(--box-line);
  box-shadow: 0 24px 60px -36px rgba(20, 22, 26, 0.28);
  padding: var(--s-10) var(--s-8);
  display: flex;
  align-items: center;
}

.agentes__grid {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--s-12);
  align-items: start;
  width: 100%;
}

.agentes__rail { position: relative; padding-left: var(--s-4); }
.agentes__rail-track {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--box-line);
  border-radius: 2px;
}
.agentes__rail-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0%;
  background: var(--coral);
  border-radius: 2px;
}

.agentes__names { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.agentes__names li {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  opacity: 0.4;
  transition: opacity 0.35s var(--ease-in-out-soft), color 0.35s var(--ease-in-out-soft);
}
.agentes__names li.is-active { opacity: 1; color: var(--coral); }

.agentes__panel { position: relative; min-height: 300px; }

.agent-card {
  position: absolute;
  inset: 0 0 auto 0;
  max-width: 620px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-in-out-soft), transform 0.35s var(--ease-in-out-soft);
}
.agent-card.is-active { opacity: 1; transform: none; pointer-events: auto; }

.agent-card__name { display: none; }
.agent-card__line {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink-100);
  margin-bottom: var(--s-2);
}
.agent-card__desc { font-size: 1.0625rem; color: var(--ink-70); max-width: 52ch; }

/* Micro-visuals: small, specific, never the same shape twice. Every neutral
   tint below is dark-on-white now (var(--box-line) family); coral and the
   flag red are untouched since neither ever depended on the dark field. */
.avis { position: relative; height: 88px; margin-bottom: var(--s-4); display: flex; align-items: center; }

.avis-line { display: block; height: 8px; width: 78%; background: var(--box-line); border-radius: 4px; margin-bottom: 8px; }
.avis-line--sm { width: 52%; }
.avis--read { flex-wrap: wrap; align-content: center; gap: 0; }
.avis--read .avis-line { flex-basis: 100%; }
.avis-arrow { color: var(--coral); font-weight: 700; margin-right: 10px; }
.avis-chip { display: inline-block; background: rgba(224, 124, 87, 0.16); color: var(--coral); font-size: 0.72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; margin-right: 6px; }

.avis--rank { gap: 6px; align-items: flex-end; }
.avis-bar { width: 9px; height: 22px; background: var(--box-line); border-radius: 3px 3px 0 0; }
.avis-bar--hit { height: 46px; background: var(--coral); }

/* Was a plain white card that only read against the dark box by color
   contrast alone; now needs its own edge since the box is white too. */
.avis--quote { justify-content: flex-start; }
.avis-qc { width: 168px; background: var(--surface); border: 1px solid var(--box-line); box-shadow: 0 10px 24px -14px rgba(20, 22, 26, 0.3); border-radius: 10px; padding: 12px 14px; }
.avis-qc__id { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--ink-100); margin-bottom: 8px; }
.avis-qc__row { display: block; height: 6px; width: 68%; background: rgba(20, 22, 26, 0.10); border-radius: 3px; margin-bottom: 6px; }
.avis-qc__btn { display: inline-block; margin-top: 4px; background: var(--coral); color: #fff; font-size: 0.68rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }

.avis--watch { position: relative; }
.avis-route { position: absolute; left: 0; right: 15%; top: 50%; border-top: 2px dashed rgba(20, 22, 26, 0.22); }
.avis-vessel { position: absolute; left: 42%; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--ink-100); box-shadow: 0 0 0 4px rgba(20, 22, 26, 0.08); }
.avis-eta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: rgba(224, 124, 87, 0.16); color: var(--coral); font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.avis-eta strong { font-weight: 700; }

/* The back sheet used to be translucent white, showing the dark box through
   it for depth. Translucent white over a white box is invisible, so it is
   now an opaque light grey sheet instead — same "receded second page" read,
   achieved with fill rather than transparency. */
.avis--check { position: relative; justify-content: flex-start; }
.avis-doc { position: absolute; left: 0; top: 0; width: 76px; height: 68px; background: var(--surface); border: 1px solid var(--box-line); border-radius: 7px; box-shadow: 0 8px 20px -10px rgba(20, 22, 26, 0.3); }
.avis-doc--back { left: 26px; top: 12px; background: var(--surface-2); border-color: transparent; box-shadow: none; z-index: 0; }
.avis-doc { z-index: 1; }
.avis-doc__flag { position: absolute; left: 0; bottom: -4px; background: var(--flag); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; z-index: 2; }

.avis--reply { flex-wrap: wrap; }
.avis--reply .avis-line { flex-basis: 100%; }
.avis-pending { flex-basis: 100%; display: inline-block; margin-top: 4px; background: var(--surface-2); color: var(--ink-70); font-size: 0.72rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; width: fit-content; }

.avis--growth { gap: 8px; align-items: flex-end; }
.avis-col { width: 16px; height: 20px; background: var(--box-line); border-radius: 3px 3px 0 0; }
.avis-col--hot { height: 52px; background: var(--coral); }

@media (max-width: 960px) {
  .agentes__stage { min-height: 0; }
  .agentes__inner { padding-block: var(--s-12) var(--s-6); }
  /* Stacked: photo card first (full width, shorter), agents box second —
     grid's row-based stretch only applied to the side-by-side layout. */
  .agentes__layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .agentes__intro { min-height: 340px; padding: var(--s-6); }
  .agentes__intro .agentes__head { max-width: 34ch; }
  .agentes__box { padding: var(--s-6) var(--gutter); }
  .agentes__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .agentes__rail { display: none; }
  .agentes__panel { min-height: 0; display: flex; flex-direction: column; gap: var(--s-10); }
  .agent-card {
    position: static;
    opacity: 0;
    transform: translateY(24px);
    max-width: 100%;
    transition: none;
    pointer-events: auto;
  }
  .agent-card__name {
    display: block;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--coral);
    margin-bottom: var(--s-2);
  }
}

@media (max-width: 480px) {
  .agentes__inner { padding-inline: var(--gutter); }
  .agentes__intro { min-height: 280px; }
  .agentes__intro .agentes__head { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .agentes__names li.is-active { opacity: 1; }
  .agent-card { transition: none; }
}

/* ==========================================================
   Chat (light). The only typewriter effect on the page.
   ========================================================== */
.chat { background: transparent; }
.chat__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--s-16) var(--gutter) var(--s-12);
  display: grid;
  /* Copy column narrowed (420 -> 380) and the mock's own cap widened well
     beyond that (below): together the widget reads as the section's
     protagonist instead of matching the copy's width. */
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--s-12);
  align-items: center;
}
.chat__copy .eyebrow { margin-bottom: var(--s-2); }
.chat__title { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: var(--s-3); max-width: 14ch; }
.chat__text { font-size: 1.0625rem; color: var(--ink-70); margin-bottom: var(--s-3); max-width: 42ch; }
.chat__data { font-size: 0.9375rem; color: var(--ink-45); border-top: 1px solid var(--line); padding-top: var(--s-3); max-width: 42ch; }

.chat__mock { display: flex; justify-content: center; }
.chatw {
  width: 100%;
  /* 420 -> 680: the widget was the same width as the copy column and read
     as a small side illustration. This is the section's actual subject now. */
  max-width: 680px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 32px 80px -40px rgba(20, 22, 26, 0.22);
  overflow: hidden;
}
.chatw__head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.chatw__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.chatw__title { font-weight: 600; font-size: 0.9375rem; color: var(--ink-100); }
/* Fixed height (matches the box's own initial resting measurement) so the
   card never grows as messages are exchanged — the messages area scrolls
   internally instead (see overflow-y below); header and input sit outside
   this element and so stay put. Scrollbar hidden cross-browser since this
   is an auto-scrolling mock, not a manually-scrolled feed. */
.chatw__body {
  padding: 24px 22px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: none;
}
.chatw__body::-webkit-scrollbar { display: none; }

.chatw__bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 0.9375rem; line-height: 1.45; flex-shrink: 0; }
.chatw__bubble--user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; opacity: 0; }
.chatw__caret { display: inline-block; width: 2px; height: 14px; background: #fff; margin-left: 2px; vertical-align: middle; animation: caretBlink 0.8s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

.chatw__thinking { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 10px 14px; opacity: 0; flex-shrink: 0; }
.chatw__thinking-avatar { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.chatw__thinking-label { font-size: 0.8125rem; color: var(--ink-45); }
.chatw__thinking-dots { display: flex; gap: 4px; }
.chatw__thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-45); animation: thinkBounce 1s ease-in-out infinite; }
.chatw__thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.chatw__thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.chatw__bubble--bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-100); border-bottom-left-radius: 4px; opacity: 0; max-width: 96%; }
.chatw__bot-lead { font-weight: 600; margin-bottom: 8px; font-size: 0.875rem; }
.chatw__bot-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.chatw__bot-list li { font-size: 0.8125rem; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.chatw__bot-list li:first-child { border-top: none; padding-top: 0; }
.chatw__bot-list strong { color: var(--ink-100); white-space: nowrap; }
.chatw__bot-list span { color: var(--ink-45); white-space: nowrap; }

/* Second exchange's alert-style answer: a short narrative paragraph (with
   the two key facts bolded), then the suggestion set apart below a hairline,
   echoing how .chatw__bot-lead already separates a headline from detail. */
.chatw__bot-alert { font-size: 0.8125rem; line-height: 1.55; margin-bottom: 10px; }
.chatw__bot-alert strong { font-weight: 700; }
.chatw__bot-suggestion { font-size: 0.8125rem; line-height: 1.5; font-weight: 600; border-top: 1px solid var(--line); padding-top: 10px; }

/* display:none (not just opacity) so the pending second exchange reserves no
   space in the resting layout — an opacity-only hide would leave a blank gap
   between the first answer and the input row before anyone clicks send. */
.chatw__bubble.is-hidden, .chatw__thinking.is-hidden { display: none; }

.chatw__input {
  border-top: 1px solid var(--line);
  padding: 14px 16px 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chatw__input-text {
  /* flex-shrink alone can't shrink this below its content's intrinsic
     width once white-space:nowrap is set — a flex item's default
     min-width is auto, i.e. "at least as wide as my unwrapped text". This
     is what was pushing the whole card (and the page) past the viewport
     edge on narrow screens; min-width:0 lets it actually shrink and hand
     off to the ellipsis instead. */
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatw__send-wrap { position: relative; flex-shrink: 0; }
.chatw__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  transition: transform 0.2s var(--ease-out-expo), opacity 0.2s var(--ease-out-expo);
}
.chatw__send svg { width: 15px; height: 15px; }
.chatw__send:hover { transform: translateY(-1px) scale(1.05); }
.chatw__send:active { transform: scale(0.94); }
/* While a reveal is in flight: visibly inert, not just unclickable, so a
   double-click reads as "already working" rather than doing nothing. */
.chatw__send.is-busy { opacity: 0.5; pointer-events: none; }

/* Nudge bubble: invites the click, sits above the button (the row itself
   has no room to spare), never blocking it — pointer-events off so it can
   never eat the click it's pointing at. */
.chatw__send-hint {
  position: absolute;
  bottom: calc(100% + 11px);
  right: -8px;
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 12px 26px -10px rgba(12, 44, 87, 0.5);
  pointer-events: none;
  animation: sendHintBounce 1.8s ease-in-out infinite;
}
.chatw__send-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 16px;
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.chatw__send-hint.is-hidden { display: none; }
@keyframes sendHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .chatw__send-hint { animation: none; }
}

@media (max-width: 960px) {
  /* minmax(0, 1fr), not bare 1fr: a bare 1fr track's implicit minimum is
     "auto" (the widest min-content of anything placed in it), and the chat
     mock's pre-filled, nowrap input text has a wide one — that's what was
     pushing this column, the section, and the whole page past the viewport
     edge on narrow screens regardless of the flex fix below. */
  .chat__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-12); }
}
@media (max-width: 480px) {
  .chat__inner { padding-inline: var(--gutter); }
}

/* ==========================================================
   CTA final + FAQ (dark). Deliberately darker than the other dark
   sections (own near-black tone, not --navy) so the page's single
   conversion point reads as its own, more serious register.
   ========================================================== */
.cta { position: relative; background: #05101F; color: var(--cream-100); overflow: hidden; }

.cta__pattern {
  position: absolute;
  inset: -10% 0 auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0.05;
  animation: ctaDrift 50s linear infinite;
  pointer-events: none;
}
.cta__pattern::before, .cta__pattern::after { content: ""; display: block; height: 36px; margin-inline: var(--gutter); border-radius: 8px; background: var(--cream-100); }
.cta__pattern::before { width: 60%; }
.cta__pattern::after { width: 40%; margin-left: calc(var(--gutter) + 15%); }
@keyframes ctaDrift { from { transform: translateY(0); } to { transform: translateY(40%); } }

/* Padding tightened from the original (s-16/s-12) so title through the
   form/alt panels fit one 1440x900 screen without scrolling — only the
   FAQ below is expected to require a scroll. */
.cta__inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 64px var(--gutter) var(--s-10); }
.cta__title { font-size: clamp(1.9rem, 3.2vw, 2.55rem); margin-bottom: var(--s-6); max-width: 20ch; }

.cta__panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-8); align-items: center; }

/* Light card, deliberately not navy: a crisp white surface reads as the
   premium, "real form" moment against the section's near-black floor —
   every color below flips to a light-card palette (dark ink text, light
   fills) to match. */
.cta__form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.55);
}
.cta__form-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--ink-100); margin-bottom: 2px; }
.cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.cta__field { display: flex; flex-direction: column; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-70); min-width: 0; }
.cta__field em { font-style: normal; font-weight: 400; font-size: 0.75rem; color: var(--ink-45); }
.cta__field input,
.cta__field select {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-100);
  transition: border-color 0.2s var(--ease-in-out-soft), background-color 0.2s var(--ease-in-out-soft), box-shadow 0.2s var(--ease-in-out-soft);
}
.cta__field input::placeholder { color: var(--ink-45); }
.cta__field input:focus-visible,
.cta__field select:focus-visible {
  outline: none;
  border-color: var(--coral);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(224, 124, 87, 0.16);
}
.cta__field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2C57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  padding-right: 36px;
}
.cta__field select:invalid { color: var(--ink-45); }
.cta__field select option { background: var(--surface); color: var(--ink-100); }
.cta__submit { margin-top: var(--s-1); padding: 15px 26px; font-size: 1rem; }
.cta__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.cta__form-msg { display: none; font-size: 0.875rem; line-height: 1.5; }
.cta__form-msg.is-visible { display: block; }
.cta__form-msg.is-error { color: var(--flag); font-weight: 600; margin-top: -4px; }
/* Success replaces the fields/button in place rather than sitting beside a
   now-pointless empty form: same card, same title, just the body swapped
   for a confirmation once the request actually goes through. */
.cta__form.is-sent .cta__row,
.cta__form.is-sent > .cta__field,
.cta__form.is-sent .cta__submit { display: none; }
.cta__form.is-sent .cta__form-msg.is-visible {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink-100);
  padding: 6px 0 2px;
}

/* Divider rather than a second card: keeps this half quiet and reads as
   "one more way in", not a competing offer next to the form. */
.cta__alt { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: var(--s-6); }
.cta__alt-title { font-weight: 700; font-size: 1.0625rem; margin-bottom: var(--s-2); color: var(--cream-100); }
.cta__alt-text { color: var(--cream-60); font-size: 0.9375rem; max-width: 34ch; margin-bottom: var(--s-4); line-height: 1.5; }

/* Own full-bleed light band (this section sits right after the dark CTA
   form, still inside <section class="cta">): a light canvas with white,
   rounded accordion bars on top, echoing how .seguridad's white card
   stands on the cream canvas earlier in the page. */
.faq { position: relative; z-index: 1; background: var(--surface-2); padding: var(--s-16) 0 var(--s-20); }
.faq__inner { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }
.faq__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: var(--s-6); color: var(--ink-100); }

.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s var(--ease-in-out-soft), box-shadow 0.25s var(--ease-in-out-soft);
}
.faq__item.is-open { border-color: rgba(224, 124, 87, 0.35); box-shadow: 0 20px 45px -32px rgba(20, 22, 26, 0.28); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 22px 26px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink-100);
}

.faq__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
  transition: background-color 0.25s var(--ease-in-out-soft), border-color 0.25s var(--ease-in-out-soft);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--navy);
  transition: transform 0.3s var(--ease-in-out-soft), opacity 0.3s var(--ease-in-out-soft), background-color 0.25s var(--ease-in-out-soft);
}
.faq__icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--coral); border-color: var(--coral); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; }

.faq__a { height: 0; overflow: hidden; transition: height 0.35s var(--ease-in-out-soft); }
.faq__a p { padding: 0 26px 24px; color: var(--ink-70); font-size: 0.9375rem; max-width: 64ch; line-height: 1.6; }

@media (max-width: 960px) {
  .cta__panels { grid-template-columns: 1fr; }
  .cta__alt { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-left: 0; padding-top: var(--s-5); }
}
@media (max-width: 640px) {
  .cta__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cta__inner { padding-inline: var(--gutter); }
  .faq__q { padding: 18px 20px; gap: 12px; }
  .faq__a p { padding: 0 20px 20px; }
}

/* ==========================================================
   Footer
   ========================================================== */
/* Same near-black tone as the CTA form above (#05101F, not --navy) so the
   page's two darkest moments — conversion and close — read as one register. */
.site-footer { background: #05101F; color: var(--cream-60); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site-footer__inner { max-width: 1360px; margin: 0 auto; padding: var(--s-8) var(--gutter); }
.site-footer__top { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-6); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
/* The footer is the only consumer of .logo now that the header has its own
   .hlogo. It's always on this dark surface, so it only ever needs the white
   lockup — no light/dark swap like the header's. */
.logo { display: inline-flex; align-items: center; }
.logo__mark { height: 26px; width: auto; display: block; }
.site-footer__nav { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-left: auto; }
.site-footer__nav a { font-size: 0.875rem; color: var(--cream-60); transition: color 0.2s var(--ease-in-out-soft); }
.site-footer__nav a:hover { color: var(--coral); }
.lang-switch--footer button, .lang-switch--footer a { color: var(--cream-60); }
.lang-switch--footer button.is-active, .lang-switch--footer a.is-active { color: var(--cream-100); }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-4); font-size: 0.8125rem; }
.site-footer__legal { display: flex; gap: var(--s-4); }
.site-footer__legal a { color: var(--cream-60); }
.site-footer__legal a:hover { color: var(--coral); }

@media (max-width: 480px) {
  .site-footer__inner { padding-inline: var(--gutter); }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .site-footer__nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__pattern { animation: none; }
  .faq__a { transition: none; }
  .chatw__bubble--user, .chatw__bubble--bot, .chatw__thinking { opacity: 1; }
  .chatw__caret { display: none; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 480px) {
  .hero { padding: 0 20px 40px; }
  .backers__name { font-size: 1rem; }
  .backers__mark { height: 13px; }
}

/* ==========================================================
   Reduced motion: everything renders in its final state
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .site-header, .btn, .btn-link svg { transition: none; }
  .hero .btn-primary, .hero .btn-ghost { transition: none; }

  .problema__stage { min-height: 0; display: block; }
  .problema__inner { display: flex; flex-direction: column; gap: var(--s-4); align-content: normal; padding-block: var(--s-8); }
  .problema__counter { position: static; text-align: left; }
  .problema__headline .pw { opacity: 1; transform: none; }
  .problema__rows--chaos { display: none; }
  .problema__rows--order { position: static; opacity: 1; }
  .prow { opacity: 1; transform: none; }
  .problema__stories { position: static; }
  .pstory { opacity: 1; transform: none; }
  .problema__closing { position: static; opacity: 1; transform: none; padding: 0; text-align: left; margin: 0; max-width: 60ch; }
}