/* Wasabil — Mercury-inspired DARK palette (v2)
   Mercury's public site uses a dark canvas with off-white text, muted chrome,
   and very restrained green accents. We emulate:
   - Deep near-black canvas (#0a0b0d), slightly lifted panels (#111214, #17181b)
   - Warm off-white text (#f3efe7) to stay compatible with our mascot's warmth
   - Cool slate-gray borders and muted copy
   - Wasabi green accent, pushed a touch brighter to sit on dark
   - Generous use of whitespace and thin 1px borders
*/
/* ============================================================
   REDISEÑO 2026 v2 — "blanco Apple × Wasabil" (dirección A+E,
   aprobada por Ignacio 13-ago-2026: documento heroico + mascota
   presentando). Fondo primario BLANCO, aire generoso, sombras
   suaves; lima = acento de ACCIÓN (fills), esmeralda profunda =
   acento de TEXTO (AA sobre blanco). Footer claro; la única
   banda oscura del sitio es el CTA final (momento de contraste).
   ============================================================ */
:root {
  --bg: #ffffff;
  --bg-2: #f5f7f3;
  --bg-3: #edf3e4;
  --paper: #ffffff;
  --panel: #f7faf2;
  --ink: #0e1c14;
  --ink-2: #3d4f42;
  --ink-3: #55685a;
  --muted: #5a6a5c;
  --muted-2: #66765f;
  --rule: #e4ead9;
  --rule-2: #d2dec0;
  --accent: #c6f53a;
  --accent-2: #aef23a;
  --accent-ink: #0a2417;
  --accent-text: #177231;
  --accent-deep: #0b3d1f;   /* verde bosque: glifos sobre lima suave (7-sep-2026) */
  --accent-soft: #e3ff7a;   /* lima intenso suave: chips de ícono y etiquetas (7-sep-2026) */
  --accent-wash: #f1fbd0;   /* superficies: hover/seleccionado/pastillas — tono lima, ya no menta */
  --accent-cool: #1fb573;
  --danger: oklch(0.62 0.19 30);
  --serif: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(14,28,20,0.05), 0 8px 24px -12px rgba(14,28,20,0.10);
  --shadow: 0 2px 4px rgba(14,28,20,0.04), 0 24px 60px -24px rgba(14,28,20,0.16);
  --shadow-lg: 0 2px 6px rgba(14,28,20,0.05), 0 48px 110px -36px rgba(14,28,20,0.24);
  --glow-accent: 0 0 32px rgba(198,245,58,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* Type */
.serif { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; }
.mono  { font-family: var(--mono); font-feature-settings: "ss01"; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  font-weight: 600;
}
.eyebrow .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right:8px; vertical-align: 1px; box-shadow: 0 0 10px var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; }
.display-1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.display-2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.display-3 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(27px, 3.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
}
/* Énfasis = palabra en esmeralda profunda AA sobre blanco (regla de marca:
   nunca itálica serif). En la banda CTA oscura se sobreescribe a lima
   vía --accent-text local en la <section>. */
.italic { font-style: normal; color: var(--accent-text); }

/* Nav — blanca translúcida con blur (estilo Apple) */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
/* Con el menú abierto el body queda position:fixed (bloqueo de scroll iOS) y
   el nav sticky volvería a su lugar en el flujo, fuera de pantalla. Fijo al
   viewport sigue visible: es la única vía para CERRAR el menú. Fondo sólido
   y sobre la burbuja de WhatsApp (z 1000) para que nada se cuele encima. */
.nav.menu-abierto {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  background: var(--bg);
  border-bottom-color: var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  max-width: 1440px; margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--rule-2);
  display: grid; place-items: center;
  color: var(--ink);
  font-family: var(--serif); font-size: 18px;
  position: relative;
}
.logo-mark::after {
  content: ""; position: absolute; inset: 4px;
  background: radial-gradient(circle at 35% 35%, var(--accent-2), var(--accent));
  border-radius: 4px;
}
.logo-mark span { position: relative; z-index: 1; color: var(--bg); font-weight: 600; }
.nav-links {
  display: flex; gap: 4px; align-items: center;
}
.nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-link:hover { background: var(--bg-2); color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::after {
  content:""; position:absolute; left:14px; right:14px; bottom: 2px;
  height: 1px; background: var(--ink);
}
.nav-cta { display: flex; gap: 8px; align-items: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--sans);
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 28px -10px rgba(198,245,58,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(198,245,58,0.6), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-ghost {
  background: rgba(14,28,20,0.03);
  color: var(--ink);
  border-color: rgba(14,28,20,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--accent-wash); border-color: var(--accent-text); color: var(--accent-text); }
.btn-link {
  background: transparent;
  color: var(--ink);
  padding: 11px 0;
}
.btn-link .arrow { transition: transform 0.2s; }
.btn-link:hover .arrow { transform: translateX(4px); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* Pills / chips — blanca con borde verdoso y tag lima */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.pill .pill-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Sections */
.section { padding: 120px 0; overflow-x: clip; }   /* clip: los reveals laterales no ensanchan el documento en ventanas angostas (13-ago) */
.section-sm { padding: 72px 0; }
.section-title {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: 56px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.section-title .label { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* Rules */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Product window (macOS chrome) */
.window {
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f0f4e8, #e9f0dd);
  border-bottom: 1px solid var(--rule);
}
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 11px; height: 11px; border-radius: 50%; background: #d2dec0; }
.window-dots span:nth-child(1) { background: #e06c5e; }
.window-dots span:nth-child(2) { background: #e5b046; }
.window-dots span:nth-child(3) { background: #6bbf59; }
.window-title {
  margin: 0 auto; font-size: 12px; color: var(--muted); font-family: var(--mono);
}

/* Little mascot blob — easter egg */
.mascot {
  position: absolute;
  pointer-events: none;
  width: 48px; height: 48px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  opacity: 0.95;
}

/* Footnote / caption */
.caption {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Utility */
.flex { display: flex; }
.grid { display: grid; }
.gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }

/* Logo cloud */
.logo-cloud-strip {
  display: flex;
  gap: 36px 44px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
}
.logo-cloud-strip > span { opacity: 0.7; white-space: nowrap; }
@media (max-width: 860px) {
  .logo-cloud-strip { font-size: 17px; gap: 20px 28px; }
}

/* Hamburger menu */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--ink);
  border-radius: 8px;
  line-height: 0;
  transition: background 0.15s;
}
.nav-burger:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }

.nav-mobile-menu {
  position: fixed;
  top: 61px; left: 0; right: 0; bottom: 0;
  z-index: 1100; /* sobre la burbuja de WhatsApp (1000) */
  background: var(--bg);
  padding: 18px 22px calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: navMmIn .22s ease;
}
@keyframes navMmIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Menú móvil rediseñado (14-ago-2026): filas grandes con hairline,
   un solo nivel — se lee de una pasada. */
.nav-mm-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  margin: 6px 2px 8px;
}
.nav-mm-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 2px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.nav-mm-link::after {
  content: "→";
  font-size: 16px; color: var(--muted);
  flex: none;
}
.nav-mm-link:active { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.nav-mm-link.es-actual { color: var(--accent-text); }
.nav-mm-link.es-actual::after { color: var(--accent-text); }
.nav-mm-link .tag { margin-left: 10px; }
.nav-mm-secondary {
  display: flex; gap: 28px;
  padding: 22px 2px 4px;
}
.nav-mm-secondary a { font-size: 15.5px; color: var(--ink-2); }
.nav-mm-cta { justify-content: center; margin-top: 18px; padding: 15px 20px; font-size: 16px; }

.nav-mobile-link {
  display: block;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 17px;
  color: var(--ink);
  transition: background 0.15s;
}
.nav-mobile-link:hover,
.nav-mobile-link.active { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.nav-mobile-divider { height: 1px; background: var(--rule); margin: 8px 0; }

/* Responsive */
@media (max-width: 960px) {
  .container { padding: 0 20px; }
  .container-wide { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav-inner { padding: 14px 20px; }
  .nav-links { display: none; }
  .nav-desktop-only { display: none !important; }
  .nav-burger { display: flex; align-items: center; justify-content: center; }
  .section-title { flex-direction: column; align-items: flex-start; }
  .display-1 { font-size: clamp(42px, 9vw, 72px) !important; }
}

/* Footer — claro, estilo Apple */
.footer {
  background: #f5f7f3;
  color: var(--ink-2);
  padding: 96px 0 48px;
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}
.footer a { color: var(--muted); font-size: 14px; }
.footer a:hover { color: var(--ink); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule);
}
.footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; color: var(--muted-2); margin-bottom: 20px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px;
  font-size: 12px;
  color: var(--muted-2);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer { padding: 64px 0 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  padding: 52px 0 36px;
  overflow-x: clip;
  background:
    radial-gradient(720px 420px at 78% 8%, rgba(198,245,58,0.14), transparent 62%),
    radial-gradient(560px 380px at 12% 88%, rgba(31,181,115,0.08), transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 860px) {
  .hero-section { padding: 64px 0 48px; }
  /* el stage (mascota + tarjetas) SÍ se muestra en móvil, compacto;
     sus reglas propias achican la escena (min-height 400, mascot 210px) */
  .hero-mascot { display: none; }
}

/* ── Pricing page ─────────────────────────────────────────────────────────── */
.pricing-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pricing-card { padding: 36px; }
.pricing-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.pricing-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 860px) {
  /* Los planes se hojean de lado, no apilados hacia abajo (pedido de
     Ignacio, 14-ago-2026). Misma mecánica que .testimonials-grid:
     snap + la siguiente tarjeta asomando como invitación. */
  .pricing-plans-grid {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    max-width: none; margin-inline: -20px; padding: 20px 20px 20px;
    scrollbar-width: none;
  }
  .pricing-card { padding: 28px; }
  .pricing-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-calc-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Home page ────────────────────────────────────────────────────────────── */
.feature-row { display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--paper); }
.feature-row-text { padding: 56px 48px; }
.feature-row-demo { padding: 56px 48px; }
.mcp-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.home-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cta-band-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.clients-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; }
.clients-logos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.clients-logo-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}

@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row-text { padding: 36px 28px; border-right: none !important; border-bottom: 1px solid var(--rule); }
  .feature-row-demo { padding: 32px 28px; }
  .mcp-demo-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-plans-grid {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    max-width: none; margin-inline: -20px; padding: 4px 20px 20px;
    scrollbar-width: none;
  }
  .cta-band-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-band-grid > div:last-child { display: none; }
  .clients-grid { grid-template-columns: 1fr; gap: 40px; }
  .clients-logos-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; padding-bottom: 16px; scrollbar-width: none;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }
  .testimonials-grid > * { scroll-snap-align: start; flex-shrink: 0; width: calc(85vw - 40px); max-width: 360px; }
  .pricing-plans-grid::-webkit-scrollbar, .home-plans-grid::-webkit-scrollbar { display: none; }
  .pricing-plans-grid > *, .home-plans-grid > * {
    flex: 0 0 min(84%, 360px); scroll-snap-align: start; min-width: 0;
  }
  .clients-logo-strip {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    background: none; border: none; border-radius: 0;
    gap: 12px; padding-bottom: 8px; scrollbar-width: none;
  }
  .clients-logo-strip::-webkit-scrollbar { display: none; }
  .clients-logo-strip > * {
    scroll-snap-align: start; flex-shrink: 0;
    width: 140px; border: 1px solid var(--rule); border-radius: 12px;
    min-height: 100px !important; padding: 24px 20px !important;
  }
}

.hero-cta-row { flex-wrap: nowrap; }
.hero-stats-row { flex-wrap: nowrap; }

@media (max-width: 640px) {
  .hero-cta-row { flex-wrap: wrap !important; }
  .hero-demo-link { width: 100%; justify-content: flex-start; }

  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    flex-wrap: unset !important;
  }
}

/* ============================================================
   Intent Picker — acordeón inline (home)
   "¿En qué puedo ayudarte?" con expansión in-place al click.
   ============================================================ */
.ip-shell {
  padding: 96px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.ip-head { max-width: 1100px; }
.ip-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) { .ip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ip-grid { grid-template-columns: 1fr; } }

.ip-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.ip-card:hover { border-color: var(--rule-2); transform: translateY(-1px); }
.ip-card.is-open {
  grid-column: 1 / -1;
  border-color: var(--accent);
  background: var(--paper);
  transform: none;
}

.ip-card-trigger {
  display: flex; flex-direction: column;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 24px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--sans);
  min-height: 200px;
}
.ip-card.is-open .ip-card-trigger {
  border-bottom: 1px solid var(--rule);
  min-height: 0;
  padding: 22px 28px;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.ip-card.is-open .ip-card-body { flex: 1; margin: 0; }
.ip-card.is-open .ip-card-foot { margin: 0; padding: 0; border: none; }

.ip-card-head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--accent);
}
.ip-card-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-wash);
  border: 1px solid var(--rule);
  color: var(--accent);
  flex-shrink: 0;
}
.ip-card-num { font-size: 11px; color: var(--muted); letter-spacing: .12em; }
.ip-card.is-open .ip-card-num { display: none; }
.ip-card-body { margin-top: 22px; flex: 1; }
.ip-card-title {
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
}
.ip-card-label {
  font-size: 13.5px; color: var(--muted);
  margin-top: 6px; line-height: 1.5;
}
.ip-card.is-open .ip-card-label { display: none; }
.ip-card-foot {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
}
.ip-card-hint {
  font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.ip-card.is-open .ip-card-hint { display: none; }
.ip-card-arrow {
  color: var(--ink-2);
  display: inline-flex;
  transition: transform .2s, color .2s;
}
.ip-card:hover .ip-card-arrow { color: var(--accent); transform: translate(2px, -2px); }
.ip-card.is-open .ip-card-arrow {
  color: var(--accent);
  transform: rotate(45deg);
}

.ip-card-panel {
  padding: 36px 32px 32px;
  animation: ipFade .2s ease;
}
@keyframes ipFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ip-panel-head { max-width: 70ch; }
.ip-panel-head h3 { letter-spacing: -0.015em; }
.ip-panel-head p  { margin-top: 14px; }

.ip-details {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
}
@media (max-width: 760px) { .ip-details { grid-template-columns: 1fr; } }
.ip-details li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.ip-details li:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 24px; }
@media (max-width: 760px) { .ip-details li:nth-child(odd) { border-right: none; padding-right: 0; } }
.ip-detail-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-wash);
  border: 1px solid var(--rule);
  color: var(--accent); flex-shrink: 0;
}
.ip-detail-title { font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.ip-detail-desc  { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.ip-hiw {
  margin-top: 32px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.ip-hiw-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ip-hiw-head .caption {
  font-size: 11px; color: var(--accent);
  letter-spacing: .12em; text-transform: uppercase;
}
.ip-hiw-counter { font-size: 11.5px; color: var(--muted); letter-spacing: .08em; }
.ip-hiw-progress { display: flex; gap: 4px; margin-bottom: 22px; }
.ip-hiw-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--rule);
  transition: background .25s;
}
.ip-hiw-bar.is-filled { background: var(--accent); }
.ip-hiw-body {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: flex-start;
  padding: 8px 0 22px;
  animation: ipFade .2s ease;
}
.ip-hiw-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--accent-wash);
  border: 1px solid var(--rule);
  color: var(--accent);
}
.ip-hiw-title { font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.ip-hiw-desc  { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 60ch; }
.ip-hiw-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.ip-hiw-btn {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 7px 14px; border-radius: 999px;
  color: var(--ink); cursor: pointer; font-family: var(--sans);
  font-size: 13px;
  transition: border-color .15s, background .15s, opacity .15s;
}
.ip-hiw-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
.ip-hiw-btn:disabled { opacity: .4; cursor: not-allowed; }
.ip-hiw-dots { display: flex; gap: 8px; }
.ip-hiw-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--rule-2);
  border: none; cursor: pointer;
  transition: background .15s, transform .15s;
  padding: 0;
}
.ip-hiw-dot:hover { transform: scale(1.2); }
.ip-hiw-dot.is-active { background: var(--accent); }

.ip-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
}


/* ============================================================
   Reveal on scroll (estilo Mercury)
   ============================================================ */
/* Regla fail-safe (auditoría 04-ago + verificador de wasabil-v2): el reveal
   anima SOLO transform. El reposo es SIEMPRE visible — sin scroll, sin JS o
   con el observer caído, el contenido está ahí (opacity:0 dejaba planes,
   logos y testimonios como huecos de 900-1000px para quien no scrollea). */
[data-reveal] {
  opacity: 1;
  transform: translate3d(0, 24px, 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
[data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform: translate3d( 32px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.96); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ============================================================
   Marquee infinito — logos de clientes
   ============================================================ */
.clients-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.clients-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: clientsScroll 32s linear infinite;
  will-change: transform;
}
.clients-marquee:hover .clients-marquee-track {
  animation-play-state: paused;
}
.clients-marquee-item {
  flex-shrink: 0;
  transition: transform .25s ease, border-color .25s ease;
}
.clients-marquee-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent) !important;
}
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-marquee-track { animation: none; }
}

/* ============================================================
   Hover global — botones, pills, cards, iconos
   ============================================================ */
.btn:not(:disabled) {
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease, border-color .2s ease, color .15s ease !important;
}
.btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.30);
}
.btn:not(:disabled):active {
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
}

.pill {
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.pill:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* Cards genéricas con border + hover lift */
.window,
.pricing-card,
.feature-row,
.option-card,
.ip-card,
.ip-jump-item,
.hiw-trigger {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.window:hover,
.pricing-card:hover,
.option-card:hover,
.hiw-trigger:hover {
  transform: translateY(-3px);
}

/* Iconos con accent-wash brillan en hover de su card padre */
.ip-card:hover .ip-card-icon,
.ip-card:hover .ip-detail-icon,
.hiw-trigger:hover .hiw-trigger-icon,
.feature-row:hover [data-icon],
.option-card:hover .option-card-icon {
  background: var(--accent) !important;
  color: var(--paper) !important;
  box-shadow: 0 0 18px -2px var(--accent);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Links con flecha */
.btn-link:hover .arrow,
.btn:hover .arrow {
  transform: translateX(5px);
}

/* Nav links — subrayado animado al hover */
.nav-link {
  transition: color .15s ease, background .15s ease;
}
.nav-link:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .pill,
  .window,
  .pricing-card,
  .feature-row,
  .option-card,
  .ip-card,
  .hiw-trigger {
    transition: none !important;
  }
  .btn:hover, .pill:hover, .window:hover, .pricing-card:hover,
  .feature-row:hover, .option-card:hover, .ip-card:hover, .hiw-trigger:hover {
    transform: none !important;
  }
}


/* ============================================================
   "Ve cómo funciona" — botón inline + modal paso a paso (paleta oscura)
   ============================================================ */
.hiw-trigger {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
}
.hiw-trigger-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.hiw-trigger-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hiw-trigger-label { font-size: 14px; font-weight: 500; }
.hiw-trigger-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.hiw-trigger-arrow { color: var(--ink-2); transition: transform .2s; display: inline-flex; }

.hiw-portal {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none; opacity: 0;
  transition: opacity .22s ease;
}
.hiw-portal.is-open { pointer-events: auto; opacity: 1; }
.hiw-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.hiw-sheet {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: min(560px, 92vw);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  max-height: 88vh;
}
.hiw-portal.is-open .hiw-sheet { transform: translate(-50%, -50%) scale(1); }
.hiw-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 22px 24px 16px;
  border-bottom: 1px solid var(--rule);
}
.hiw-title { font-size: 22px; margin-top: 6px; letter-spacing: -0.01em; color: var(--ink); }
.hiw-close {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--rule);
  color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.hiw-close:hover { background: var(--bg-3, var(--bg-2)); }
.hiw-progress {
  display: flex; gap: 4px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
}
.hiw-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--rule);
  transition: background .25s;
}
.hiw-bar.is-filled { background: var(--accent); }
.hiw-bar.is-current { background: var(--accent-2, var(--accent)); }
.hiw-body {
  padding: 36px 32px 24px;
  text-align: center;
  animation: fadeIn .22s ease;
  overflow-y: auto;
}
.hiw-step-num {
  font-size: 11px; color: var(--muted);
  letter-spacing: .14em; text-transform: uppercase;
}
.hiw-icon-big {
  width: 76px; height: 76px;
  margin: 18px auto 22px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--accent-wash);
  border: 1px solid var(--rule);
  color: var(--accent);
}
.hiw-step-title { font-size: 24px; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--ink); }
.hiw-step-desc  { font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 44ch; margin: 0 auto; }
.hiw-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--rule);
}
.hiw-dots { display: flex; gap: 8px; }
.hiw-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--rule-2);
  border: none; cursor: pointer;
  transition: background .15s, transform .15s;
}
.hiw-dot:hover { transform: scale(1.2); }
.hiw-dot.is-active { background: var(--accent); }

@media (max-width: 540px) {
  .hiw-header { padding: 18px 18px 12px; }
  .hiw-body   { padding: 28px 20px 18px; }
  .hiw-step-title { font-size: 20px; }
  .hiw-nav    { padding: 14px 18px 18px; flex-wrap: wrap; }
}

/* ============================================================
   Palette switch — modo claro
   Cuando <html data-palette="light"> activo, sobreescribimos los tokens.
   La transición ocurre porque cada elemento que usa var(--bg) etc tiene
   transition global definido abajo.
   ============================================================ */

/* Transición global: todos los elementos que pintan con tokens */
body,
.nav,
.section,
.section-title,
.btn,
.btn-primary,
.btn-ghost,
.btn-link,
.pill,
.window,
.window-bar,
.feature-row,
.pricing-card,
.option-card,
.ip-card,
.ip-card-trigger,
.ip-card-icon,
.ip-detail-icon,
.ip-card-panel,
.ip-jump-item,
.ip-shell,
.ip-hiw,
.ip-hiw-icon,
.ip-hiw-btn,
.hiw-trigger,
.hiw-trigger-icon,
.hiw-sheet,
.hiw-icon-big,
.hiw-close,
.clients-marquee-item,
.eyebrow .dot {
  transition:
    background-color 600ms ease,
    color 600ms ease,
    border-color 600ms ease,
    box-shadow 600ms ease;
}

/* No queremos que la transición de paleta interfiera con los efectos hover
   (que usan transform/box-shadow más rápidos). Los hovers ya tienen su
   propio transition definido y como están más abajo en cascada ganan. */

/* ============================================================
   Mobile optimization — ≤640px
   Pase global de ajustes para que el sitio se sienta nativo en
   pantallas pequeñas (320–640px). Tipografías más contenidas,
   paddings reducidos, grids que apilan, marquee de clientes y
   "Respaldados por" reflujados.
   ============================================================ */
@media (max-width: 640px) {
  /* Containers: menos aire lateral */
  .container,
  .container-wide { padding: 0 20px; }

  /* Tipografía display más contenida */
  .display-1 { font-size: clamp(34px, 8.6vw, 48px) !important; line-height: 1.04; }
  .display-2 { font-size: clamp(30px, 8.2vw, 44px) !important; line-height: 1.06; }
  .display-3 { font-size: clamp(22px, 6.4vw, 30px) !important; }
  .lede { font-size: 15.5px; line-height: 1.5; }
  .eyebrow { font-size: 10.5px; }

  /* Section padding global más compacto */
  .section { padding: 56px 0 !important; }
  .section-title { gap: 16px; }

  /* Hero: tighten */
  .hero-section { padding: 40px 0 28px !important; }
  .hero-grid { gap: 32px; }

  /* Nav: alto y padding más finos */
  .nav { padding: 10px 0; }
  .nav-inner { padding: 0 20px; }
  .nav .btn { padding: 8px 14px; font-size: 13px; }

  /* Botones globales un poco más densos */
  .btn { padding: 10px 16px; font-size: 14px; }
  .btn-sm { padding: 7px 12px; font-size: 12.5px; }

  /* Stats strip: 2 col en mobile */
  .stats-strip,
  [data-stats-strip] { gap: 16px !important; padding: 22px 18px !important; }

  /* Cards genéricas */
  .window,
  .card,
  figure { padding: 22px !important; }

  /* Marquee de clientes: tarjetas más pequeñas */
  .clients-marquee-item {
    min-width: 150px !important;
    min-height: 96px !important;
    padding: 22px 16px !important;
    border-radius: 10px !important;
  }
  .clients-marquee-item img { max-height: 36px !important; }

  /* "Respaldados por" (LogoCloud) */
  .logo-cloud-strip,
  .logo-cloud { gap: 10px 12px !important; }

  /* Feature rows */
  .feature-row-text { padding: 28px 22px !important; }
  .feature-row-demo { padding: 24px 22px !important; }

  /* Pricing cards en mobile */
  .pricing-card { padding: 22px !important; }

  /* Footer */
  .footer { padding: 48px 0 32px !important; }

  /* Imágenes y media: no overflow horizontal */
  img, video, iframe { max-width: 100%; height: auto; }

  /* Evita scroll horizontal accidental.
     13-ago-2026: era overflow-x:hidden, que convierte a body en contenedor
     de scroll y ROMPE position:sticky en móvil (la película .cine dejaba de
     quedar pegada). overflow-x:clip corta igual pero no crea scroll container. */
  html, body { overflow-x: clip; }

  /* Headings dentro de section-title se sienten más equilibrados */
  .section-title h2 { margin-top: 12px !important; }
}

/* ─ Extra tight para pantallas ultra-pequeñas (≤380px, iPhone SE) ─ */
@media (max-width: 380px) {
  .container,
  .container-wide { padding: 0 16px; }
  .display-1 { font-size: 32px !important; }
  .display-2 { font-size: 28px !important; }
  .btn { padding: 9px 14px; font-size: 13.5px; }
  .clients-marquee-item { min-width: 130px !important; }
}

/* Salvavidas: logos de clientes y "Respaldados por" SIEMPRE sin filtros.
   Los logos están guardados en sus colores corporativos (azules oscuros,
   negros) sobre transparencia. Cualquier filtro brightness/invert los
   destruye. El contenedor lleva fondo blanco fijo para garantizar contraste
   en cualquier paleta. */
.clients-marquee-item { background: #ffffff !important; }
.clients-marquee-item img { filter: none !important; opacity: 1 !important; }

/* ==== NUKE: garantizar logos visibles en clientes y "Respaldados por" ==== */
.clients-marquee,
.clients-marquee *,
.clients-marquee-item,
.clients-marquee-item * {
  filter: none !important;
}
.clients-marquee-item {
  background: #ffffff !important;
  border: 1px solid #e3ddcf !important;
}
.clients-marquee-item img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* Logo cloud (Respaldados por) — chip blanco fijo */
[data-logo-cloud-chip] {
  background: #ffffff !important;
  border: 1px solid #e3ddcf !important;
}
[data-logo-cloud-chip] img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* ── Logo cloud (Respaldados por) ──────────────────────────────────────────── */
.logo-cloud-wrapper {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.logo-cloud-chips {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .logo-cloud-wrapper { flex-direction: column; align-items: flex-start; gap: 20px; }
  .logo-cloud-chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 12px; }
}

/* ── Stat dividers ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .stat-divider { display: none; }
}

/* ── Home stats strip (Testimonials) ───────────────────────────────────────── */
.home-stats-strip {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 32px 40px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
@media (max-width: 640px) {
  .home-stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
  }
  .home-stats-strip > * { text-align: center; }
}

/* ── Reconciliation demo chip ──────────────────────────────────────────────── */
.recon-chip {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.recon-chip-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.recon-chip-note  { color: var(--muted); flex-shrink: 0; }

/* Accesibilidad: indicador de foco para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   NAV INTELIGENTE — mega-menú (rediseño UX 2026)
   Expone Producto (5 verticales) + Recursos (Blog/Docs/Calc/Contacto)
   ============================================================ */
.nav.scrolled {
  background: rgba(255,255,255,0.88);
  box-shadow: 0 1px 0 var(--rule), 0 8px 30px -18px rgba(14,28,20,0.12);
}
.nav.menu-active { background: rgba(255,255,255,0.96); }
.nav-links { gap: 2px; }

.nav-item-wrap { position: relative; display: inline-flex; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
}
.nav-caret { transition: transform .22s cubic-bezier(.2,.7,.2,1); opacity: .55; margin-top: 1px; }
.nav-trigger.is-open .nav-caret { transform: rotate(180deg); opacity: .9; }
.nav-trigger.is-open { background: var(--bg-2); color: var(--ink); }

/* scrim detrás del panel */
.nav-scrim {
  position: fixed; left: 0; right: 0; top: 61px; bottom: 0;
  background: rgba(10,12,8,0.28);
  backdrop-filter: blur(1.5px);
  z-index: 40; border: none;
  animation: navScrimIn .25s ease forwards;
}
@keyframes navScrimIn { from { opacity: 0; } to { opacity: 1; } }

/* panel mega */
.nav-mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  width: 440px; max-width: calc(100vw - 32px);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(10,12,8,0.32), 0 4px 12px -6px rgba(10,12,8,0.18);
  padding: 10px;
  z-index: 60;
  animation: navMegaIn .2s cubic-bezier(.2,.7,.2,1) forwards;
}
.nav-mega::before { /* puente invisible para que el hover no se corte */
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-mega-sm { width: 320px; }
@keyframes navMegaIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.nav-mega-grid, .nav-mega-list { display: flex; flex-direction: column; gap: 2px; }
.nav-mega-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 11px 12px; border-radius: 11px;
  transition: background .15s ease;
}
.nav-mega-item:hover { background: var(--bg-2); }
.nav-mega-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-wash); color: oklch(0.42 0.13 135);
  transition: background .15s ease, color .15s ease;
}
.nav-mega-item:hover .nav-mega-icon { background: var(--accent); color: var(--accent-ink); }
.nav-mega-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-mega-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; line-height: 1.25;
}
.nav-mega-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.nav-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.nav-tag.is-new { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

.nav-mega-foot {
  display: flex; gap: 8px; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.nav-mega-foot a {
  flex: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); background: var(--bg-2);
  transition: background .15s ease;
}
.nav-mega-foot a:hover { background: color-mix(in oklab, var(--accent) 16%, var(--bg-2)); }
.nav-mega-foot .arrow { transition: transform .2s ease; }
.nav-mega-foot a:hover .arrow { transform: translateX(3px); }

/* ---- mega-menú móvil: acordeón ---- */
.nav-mobile-acc {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 13px 16px; border-radius: 10px;
  font-family: inherit; font-size: 17px; color: var(--ink);
  transition: background .15s;
}
.nav-mobile-acc:hover, .nav-mobile-acc.is-open { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.nav-mobile-acc svg { transition: transform .22s ease; opacity: .5; }
.nav-mobile-acc.is-open svg { transform: rotate(180deg); opacity: .9; }
.nav-mobile-subgroup {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px; padding-left: 8px;
  border-left: 2px solid var(--rule);
  animation: navSubIn .2s ease forwards;
}
@keyframes navSubIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nav-mobile-sublink {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 9px;
  font-size: 14.5px; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.nav-mobile-sublink:hover { background: var(--bg-2); color: var(--ink); }
.nav-mobile-subicon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-wash); color: oklch(0.42 0.13 135);
}
.nav-mobile-subicon svg { width: 17px; height: 17px; }
.nav-mobile-sublink .nav-tag { margin-left: 8px; }
.nav-mobile-subfoot { font-weight: 600; color: var(--ink); padding-left: 16px; }

@media (max-width: 960px) {
  .nav-item-wrap { display: none; }   /* el mega-menú desktop no aplica en móvil */
}

/* ============================================================
   MEGA-MENÚ POR TIPO DE CLIENTE (reestructura 2026-07)
   El menú deja de listar funcionalidades sueltas y pasa a
   agrupar: una COLUMNA por tipo de cliente, y dentro de cada
   una sus funcionalidades. Se puede entrar a la landing del
   tipo de cliente (cabecera) o saltar directo a una
   funcionalidad concreta (ítem). Ese agrupamiento es lo que
   le da orden al sitio.
   Reutiliza .nav-mega / .nav-mega-item del bloque anterior.
   ============================================================ */
.nav-mega-clientes {
  --cols: 2;
  /* 4-sep-2026: dos columnas arriba + fila transversal abajo → 820px */
  width: 820px;
  max-width: calc(100vw - 40px);
  padding: 12px;
  /* el panel de 4 columnas se centra en la ventana, no bajo el botón:
     anclado al botón se salía por la izquierda */
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
}
.nav-mega-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 4px;
}
.nav-col { min-width: 0; padding: 4px; display: flex; flex-direction: column; }
.nav-col + .nav-col { border-left: 1px solid var(--rule); }

/* Cabecera de la columna = la landing de ese tipo de cliente */
.nav-col-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px 12px; border-radius: var(--radius-sm);
  transition: background .15s ease;
  min-height: 92px;
}
.nav-col-head > span:last-child { min-width: 0; }
.nav-col-head:hover { background: var(--bg-3); }
.nav-col-icon {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.nav-col-title {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--ink); line-height: 1.25; letter-spacing: -0.01em;
}
.nav-col-desc {
  display: block; font-size: 12px; line-height: 1.45;
  color: var(--muted); margin-top: 3px;
}
.nav-col-sep { height: 1px; background: var(--rule); margin: 2px 10px 6px; }

/* Funcionalidades dentro del tipo de cliente */
.nav-col-list { display: grid; gap: 1px; flex: 1; align-content: start; }
.nav-col-item {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.4; color: var(--ink-3);
  transition: background .15s ease, color .15s ease;
}
.nav-col-item:hover { background: var(--bg-3); color: var(--ink); }
.nav-col-item .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}
.nav-col-ver {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 10px 2px; font-size: 12px; font-weight: 600;
  color: var(--accent-text);
}
.nav-col-ver:hover { text-decoration: underline; text-underline-offset: 3px; }



/* ============================================================
   SELECTOR DE CASO EN EL HOME (reestructura 2026-07)
   Sustituye al intent-picker: 4 tarjetas por tipo de cliente
   que llevan a su landing, en vez de 6 por funcionalidad que
   se desplegaban dentro del propio home.
   ============================================================ */
.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.caso-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.caso-card:hover {
  border-color: color-mix(in oklab, var(--accent) 42%, var(--rule));
  background: var(--bg-3);
  transform: translateY(-3px);
}
.caso-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.caso-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); font-weight: 500; margin-top: 4px;
}
.caso-title {
  font-size: 18px; line-height: 1.25; letter-spacing: -.015em;
  color: var(--ink); font-weight: 500;
}
.caso-copy { font-size: 14px; line-height: 1.55; color: var(--ink-3); flex: 1; }
.caso-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--accent-text); margin-top: 6px;
}
.caso-card:hover .caso-cta { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) { .casos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Móvil: carrusel horizontal con snap (pedido de Ignacio, 14-ago-2026) —
   las tarjetas apiladas a lo ancho completo se veían estiradas y feas.
   Ahora deslizan de lado, con la siguiente asomando como invitación. */
@media (max-width: 640px) {
  .casos-grid {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding: 4px 20px 16px;
    scrollbar-width: none;
  }
  .casos-grid::-webkit-scrollbar { display: none; }
  .casos-grid > .caso-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Acordeón móvil del menú por tipo de cliente.
   Los <button> traen apariencia nativa (fondo blanco); hay que resetearla
   para que se lean igual que los enlaces del menú. */
.nav-mobile-acc { display: block; }
.nav-mobile-subgroup > button {
  appearance: none; -webkit-appearance: none;
  width: 100%; background: transparent; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; font-size: 17px; font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.nav-mobile-subgroup > button:hover { color: var(--accent-text); }
.nav-mobile-subgroup .nav-caret {
  font-family: var(--mono); font-size: 18px; line-height: 1;
  color: var(--muted); flex: none;
}
.nav-mobile-subfoot {
  display: grid; gap: 2px; padding: 8px 0 12px 12px;
  border-left: 1px solid var(--rule); margin: 8px 0 8px 4px;
}
.nav-mobile-subfoot .nav-col-item { font-size: 15px; padding: 9px 8px; }
.nav-mobile-subfoot .nav-col-item strong { color: var(--accent-text); font-weight: 600; }

/* ============================================================
   DOS REGIONES EN EL MENÚ + MARCADOR DE "DÓNDE ESTOY"
   (corrección Ignacio 02-ago-2026)
   Izquierda: 3 casos EXCLUYENTES (uno por campaña).
   Derecha:  temas TRANSVERSALES que le sirven a los tres.
   Y en color, siempre, la sección en la que está el visitante.
   ============================================================ */
.nav-mega-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 4px;
}
/* 4-sep-2026: fila a todo el ancho bajo los casos, sobre fondo tintado */
.nav-transversal {
  margin: 10px 0 0; padding: 8px 6px 6px;
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px;
}
.nav-transversal .nav-group-label { margin: 2px 10px 8px; }
.nav-trans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.nav-group-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin: 4px 10px 10px;
}
.nav-trans-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.nav-trans-item:hover { background: #fff; box-shadow: var(--shadow-sm); }
.nav-trans-item > span:last-child { min-width: 0; }
.nav-trans-item .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}

/* ── DÓNDE ESTOY: la sección actual va marcada en color ── */
.nav-col.es-actual .nav-col-head,
.nav-trans-item.es-actual {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-col.es-actual .nav-col-title,
.nav-trans-item.es-actual .nav-col-title { color: var(--accent-text); }
.nav-mobile-subgroup > button.es-actual,
.nav-mobile-link.es-actual { color: var(--accent-text); }
.nav-link.es-actual { color: var(--accent-text); }

@media (max-width: 760px) { .nav-mega-clientes { --cols: 1; } .nav-trans-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SUB-NAV DE LA LANDING — "estás en esta sección"
   Barra pegajosa bajo el nav: muestra las secciones del caso y
   resalta en cuál va el visitante mientras hace scroll.
   ============================================================ */
.sub-nav {
  position: sticky; top: 62px; z-index: 40;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.sub-nav-inner {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  padding: 8px 0; min-height: 52px;
}
.sub-nav-inner::-webkit-scrollbar { display: none; }
.sub-nav-caso {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  padding-right: 14px; margin-right: 10px;
  border-right: 1px solid var(--rule); white-space: nowrap; flex: none;
}
.sub-nav a {
  padding: 8px 13px; border-radius: 999px; font-size: 14px;
  color: var(--ink-3); white-space: nowrap; flex: none;
  transition: background .15s ease, color .15s ease;
}
.sub-nav a:hover { background: var(--bg-3); color: var(--ink); }
.sub-nav a.es-actual {
  background: var(--accent-wash); color: var(--accent-text); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent);
}
/* La sección apuntada por el ancla no queda tapada por las dos barras */
.section[id] { scroll-margin-top: 124px; }


/* ============================================================
   LAYOUT DE SECCIÓN DE CASO — corrección 02-ago-2026
   Medido con auditar.mjs: las secciones sin demo usaban el 58%
   del ancho y dejaban 488px muertos a la derecha; el FAQ, 34%
   con 751px muertos. Ahora TODA sección es de dos columnas y
   siempre hay algo visual al costado.
   ============================================================ */
.caso-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.caso-split-vis { min-width: 0; display: flex; align-items: center; }
.caso-split-vis > * { width: 100%; }

@media (min-width: 1000px) {
  .caso-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px; align-items: center;
  }
  .caso-split.invertida .caso-split-txt { order: 2; }
  .caso-split.invertida .caso-split-vis { order: 1; }
}

/* El bloque de "el problema" ocupa el ancho, en dos columnas de lectura */
.panel-dolor { max-width: none; }
@media (min-width: 900px) {
  .panel-dolor { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
  .panel-dolor > h2 { margin: 0; }
  .panel-dolor > ul { margin-top: 0 !important; }
}

/* El FAQ se centra en vez de colgar del borde izquierdo */
.faq-centrado { max-width: 880px; }
.faq-centrado > .eyebrow, .faq-centrado > h2 { text-align: center; }
.faq-centrado > .eyebrow { justify-content: center; display: flex; align-items: center; }
.faq-centrado > h2 { margin-inline: auto; }

/* Menos aire muerto entre secciones dentro de una landing */
.caso-page .section { padding-block: 72px; }
@media (min-width: 768px) { .caso-page .section { padding-block: 88px; } }

/* ── CONTRASTE del marcador de sección activa ──
   .es-actual pintaba lima claro sobre el fondo claro que ya trae
   .nav-link.active: medido en 1.9:1. Ahora el estado activo lleva
   su propio fondo oscuro y el texto queda muy por encima de AA. */
.nav-link.es-actual,
.nav-link.active.es-actual {
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--accent-text);
  border-radius: 0;
}
.nav-col.es-actual .nav-col-title,
.nav-trans-item.es-actual .nav-col-title { color: var(--ink); }
.nav-col.es-actual .nav-col-head,
.nav-trans-item.es-actual {
  background: color-mix(in oklab, var(--accent-text) 10%, var(--bg-3));
  box-shadow: inset 2px 0 0 var(--accent-text);
}
.sub-nav a.es-actual {
  background: color-mix(in oklab, var(--accent-text) 12%, var(--bg));
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-text) 28%, transparent);
}
.nav-mobile-subgroup > button.es-actual,
.nav-mobile-link.es-actual { color: var(--ink); }

/* Objetivos de la barra: alto real de 44px */
.nav-link, .sub-nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* Tarjeta del hero de cada caso: sin ella el hero dejaba ~585px muertos
   a la derecha (medido con auditar.mjs). Dice, tachado, lo que el
   visitante deja de hacer — específico de su caso. */
.hero-tacha {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
}
.hero-tacha-cap {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.hero-tacha-fila {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.45; color: var(--ink-3);
}
.hero-tacha-fila svg { flex: none; margin-top: 2px; }
.hero-tacha-fila span { text-decoration: line-through; text-decoration-color: var(--muted-2); }

/* ============================================================
   LEGIBILIDAD DEL MOCK DEL HERO (auditoría 02-ago-2026)
   El dashboard de ejemplo del home traía glifos y microtextos
   a 1.2:1–3.2:1 sobre su propio fondo: ilegibles. Se suben al
   mínimo AA sin tocar su estructura ni su look.
   ============================================================ */
.hero-shot, .window { --mock-tenue: #5a6a5c; }
.hero-shot .caption, .window .caption { color: var(--mock-tenue); }
.hero-shot [style*="color: var(--muted-2)"],
.window [style*="color: var(--muted-2)"] { color: var(--mock-tenue) !important; }
/* El chrome decorativo (chevrones, flechas) sube a un gris legible */
.hero-shot span, .window span { }
/* NO tocar el color de .pill-tag: su regla propia (.pill .pill-tag) ya pone
   tinta casi negra sobre el verde de acento. Forzar aquí var(--ink) dejaba
   crema sobre verde = 1.67:1. */

/* Últimos microtextos bajo AA detectados por auditar.mjs, en los mocks
   heredados del sitio. Se corrigen por clase para no tocar su estructura. */
.recon-chip-note { color: #5a6a5c !important; }
.window .pill, .hero-shot .pill { color: var(--ink) !important; }
.window [style*="opacity: 0.6"], .hero-shot [style*="opacity: 0.6"] { opacity: .82 !important; }

/* El cierre (banda CTA) es el único momento oscuro del sitio; el pie va claro. */

/* OJO: NO forzar aquí el color de .cta-band-grid. Existen DOS bandas de
   cierre — la oscura de demos.jsx (fondo #0d0d12) y la clara de home.jsx
   (fondo var(--ink), crema) que usan las páginas heredadas. Cada una ya
   fija su color en la propia <section> y el grid lo hereda. Una regla
   global aquí pintaba de crema el titular de la banda CREMA y lo dejaba
   invisible en /about/, /pricing/ y /producto/. */


/* ============================================================
   RESET DE BOTÓN EN LA BARRA (02-ago-2026)
   "Soluciones" es un <button> (abre el mega-menú) pero .nav-link
   se escribió para <a>: heredaba el estilo nativo del navegador
   — borde `2px outset` (la "caja blanca" sobre fondo oscuro) y
   font-family Arial en vez de la del sitio.
   ============================================================ */
button.nav-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button.nav-link:focus { outline: none; }
button.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ============================================================
   BLOQUES CLAROS ESTÁTICOS (03-ago-2026)
   Antes el sitio cambiaba de paleta con el scroll: reescribía
   las variables en la RAÍZ, así que cada scroll repintaba el
   documento entero, la barra y el pie se invertían, el logo
   cambiaba de variante y el contraste dependía de dónde
   estuvieras. Encima la transición de 600ms pasaba por grises
   que no existen en la paleta.

   Ahora el bloque claro es ESTÁTICO y de alcance LOCAL: las
   variables se redefinen dentro del bloque, no en :root. Todo
   lo de fuera —barra, sub-nav, pie— conserva sus colores sin
   necesidad de !important.
   ============================================================ */
.bloque-claro {
  --bg: #f5f8f0;
  --bg-2: #ecf2e3;
  --bg-3: #e2ebd3;
  --paper: #ffffff;
  --panel: #eff4e7;
  --ink: #0e1c14;
  --ink-2: #24382a;
  --ink-3: #44584a;
  --muted: #5c6f60;
  --muted-2: #7c8b7e;
  --rule: #dfe8d3;
  --rule-2: #cbd9b8;
  --accent: #c6f53a;
  --accent-2: #aef23a;
  --accent-text: #177231;
  --accent-deep: #0b3d1f;
  --accent-soft: #e3ff7a;
  --accent-wash: #f1fbd0;
  --shadow-sm: 0 1px 2px rgba(14,28,20,.05), 0 8px 24px -12px rgba(14,28,20,.08);
  --shadow: 0 2px 4px rgba(14,28,20,.04), 0 24px 60px -24px rgba(14,28,20,.14);
  --shadow-lg: 0 2px 6px rgba(14,28,20,.05), 0 48px 110px -36px rgba(14,28,20,.2);
  background: var(--bg);
  color: var(--ink);
}
/* Corte suave entre el blanco y el tinte verdoso */
.bloque-claro { border-block: 1px solid var(--rule); }

/* ============================================================
   PIE: colores explícitos, no derivados de --bg
   El pie derivaba su texto de `color-mix(in oklab, var(--bg) …)`,
   un patrón que asumía estar dentro de la paleta clara. Con el
   pie fijo en oscuro eso daba texto oscuro sobre fondo oscuro
   (1,04:1). Ahora lleva sus propios colores.
   ============================================================ */
.footer { color: #3d4f42; }
.footer p, .footer span, .footer li, .footer a { color: #3d4f42; }
.footer h4 { color: #0e1c14; }
.footer a:hover { color: #0e1c14; }
.footer .footer-legal, .footer small { color: #6b7c6f; }
.footer img { opacity: 1; }



/* ============================================================
   LAYOUTS DE LAS PÁGINAS HEREDADAS (about · agenda · producto · blog)
   ------------------------------------------------------------
   Vivían solo en styles.css. Al unificar las páginas en
   styles-v3.css se quedaron sin estos grids y cada bloque se
   cayó a UNA columna: en /about/ eso dejó 5 paneles de 1200px
   con una mascota de 120px al centro. Portados tal cual desde
   la hoja que sirve wasabil.com hoy, con sus media queries.
   Lo hace cumplir lint-clases.mjs (fail-closed).
   ============================================================ */

.agenda-hero-section {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--rule);
}

.agenda-main-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: start;
}

.agenda-left-col {
  position: sticky;
  top: 96px;
}

.agenda-trust-outer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: center;
}

.agenda-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  .agenda-hero-section {padding: 40px 0 40px;}
  .agenda-main-grid {grid-template-columns: 1fr; gap: 32px;}
  .agenda-left-col {position: static;}
  .agenda-trust-outer {grid-template-columns: 1fr; gap: 28px;}
  .agenda-stats-grid {grid-template-columns: repeat(2, 1fr); gap: 20px;}
}

.about-hero-mascot {
  position: absolute;
  right: -20px;
  top: 40px;
  transform: rotate(-6deg);
  opacity: 0.95;
  pointer-events: none;
}

.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}

.about-mascot-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.about-backed-card {
  margin-top: 96px;
  padding: 56px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 56px;
}

.about-backed-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 960px) {
  .about-hero-mascot { right: 0; }   /* el bleed -20px desborda entre 861-960px */
}
@media (max-width: 860px) {
  .about-hero-mascot {opacity: 0.2; transform: rotate(-6deg) scale(0.65); right: -48px; top: 16px;}
  .about-principles-grid {grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px;}
  .about-mascot-timeline {grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px;}
  .about-team-grid {grid-template-columns: 1fr; gap: 32px;}
  .about-backed-card {margin-top: 56px; padding: 28px 24px; grid-template-columns: 1fr; gap: 32px;}
}

@media (max-width: 560px) {
  .about-principles-grid {grid-template-columns: 1fr;}
  .about-mascot-timeline {grid-template-columns: repeat(2, 1fr);}
}

.producto-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.producto-feature-text { order: 1;
}

.producto-feature-text-reverse { order: 2;
}

.producto-feature-demo { order: 2; display: grid; place-items: center;
}

.producto-feature-demo-reverse { order: 1; display: grid; place-items: center;
}

.producto-roadmap-mascot {
  position: absolute;
  right: 20px;
  top: 60px;
  opacity: 0.95;
  pointer-events: none;
  transform: rotate(-4deg);
}

.producto-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 56px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .producto-feature-grid {grid-template-columns: 1fr; gap: 40px;}
  .producto-feature-text,
  .producto-feature-text-reverse {order: 1;}
  .producto-feature-demo,
  .producto-feature-demo-reverse {order: 2;}
  .producto-roadmap-mascot {opacity: 0.2; transform: rotate(-4deg) scale(0.6); right: -24px; top: 16px;}
  .producto-roadmap-grid {grid-template-columns: repeat(2, 1fr); margin-top: 40px;}
}

@media (max-width: 560px) {
  .producto-roadmap-grid {grid-template-columns: 1fr;}
}

.blog-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.blog-featured-image {
  /* proporción NATURAL de las portadas del blog (900×491): un contenedor 1/1
     obligaba a cover a recortar el 45% del sujeto (familia imagen, 04-ago).
     align-self:center evita que el grid la estire a la altura del texto. */
  aspect-ratio: 900 / 491;
  align-self: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.blog-featured-content {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-newsletter-mascot-left {
  position: absolute;
  left: 40px;
  bottom: -20px;
  transform: rotate(-8deg);
  opacity: 0.9;
  pointer-events: none;
}

.blog-newsletter-mascot-right {
  position: absolute;
  right: 60px;
  top: 30px;
  transform: rotate(6deg);
  opacity: 0.9;
  pointer-events: none;
}

@media (max-width: 860px) {
  .blog-featured-grid {grid-template-columns: 1fr;}
  .blog-featured-image {aspect-ratio: 16/9;}
  .blog-featured-content {padding: 28px 24px;}
  .blog-posts-grid {grid-template-columns: repeat(2, 1fr); gap: 16px;}
  .blog-newsletter-mascot-left {opacity: 0.2; transform: rotate(-8deg) scale(0.6); left: -10px;}
  .blog-newsletter-mascot-right {opacity: 0.2; transform: rotate(6deg) scale(0.6); right: -10px;}
}

@media (max-width: 560px) {
  .blog-posts-grid {grid-template-columns: 1fr;}
}



/* ============================================================
   HUECOS PROPIOS QUE EL LINT DE CLASES DEJÓ AL DESCUBIERTO
   ------------------------------------------------------------
   .panel se usaba en el bloque "el problema" de cada landing
   sin existir: la tarjeta salía sin fondo ni borde, solo con el
   padding inline. Las otras dos son ganchos de layout que
   estaban escritos en el JSX y nunca en la hoja.
   ============================================================ */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* En el hero la columna de texto pesa más que la visual */
@media (min-width: 1000px) {
  .caso-split-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

/* Celda de texto dentro de la grilla de "cómo funciona": sin
   min-width:0 una palabra larga ensancha la columna y estruja el resto */
.ip-hiw-text { min-width: 0; }


/* ============================================================
   EL ✓ DE LAS LISTAS DE PLAN
   ------------------------------------------------------------
   Estaba escrito a mano como oklch(0.55 0.15 135) en cuatro
   componentes: un verde medio que no llega a 4.5:1 ni sobre la
   tarjeta oscura ni sobre el mock claro. Ahora se adapta al
   fondo sobre el que cae.
   ============================================================ */
/* No se puede decidir por clase: la tarjeta "destacada" es CLARA en /pricing/
   y OSCURA dentro del mock de las landings. Así que el verde se deriva del
   color de texto de la propia tarjeta — se oscurece sobre claro y se aclara
   sobre oscuro, sin saber en qué contexto está. */
.check-ok { color: var(--accent-text); }
/* la tarjeta destacada de precios es OSCURA: ahí el check va lima */
.check-ok.sobre-claro { color: #c6f53a; }


/* ============================================================
   ESQUINA INFERIOR DERECHA: LA RESERVA LA BURBUJA DE WHATSAPP
   ------------------------------------------------------------
   14-ago-2026: la burbuja que inyectaba GTM (con un <img> externo de
   Wikimedia, look arcaico — reporte de Ignacio) se APAGA aquí y se
   reemplaza por .wa-float, la pastilla lima propia (componente WaFloat
   en shell-fixed2.jsx). La reserva de espacio del footer se mantiene.
   ============================================================ */
.whatsapp-button { display: none !important; }
.wa-float {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1000; /* bajo el menú móvil (1100) y el nav fijo (1200) */
  display: inline-flex; align-items: center; gap: 9px;
  height: 54px; padding: 0 18px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid color-mix(in oklab, var(--accent-2) 30%, transparent);
  box-shadow: var(--shadow-lg);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
}
.wa-float svg { width: 24px; height: 24px; display: block; flex: none; }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -18px rgba(14,28,20,0.35); }
.wa-float:active { transform: translateY(-1px); }
@media (max-width: 700px) {
  .wa-float { width: 54px; padding: 0; justify-content: center; }
  .wa-float .wa-float-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }
.footer-bottom { padding-right: 96px; }
@media (max-width: 700px) {
  .footer-bottom { padding-right: 0; padding-bottom: 84px; }
}

/* Canales de contacto: 2×2. Ver comentario en contacto.jsx. */
.contacto-canales {
  display: grid; gap: 16px; max-width: 960px; margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .contacto-canales { grid-template-columns: minmax(0, 1fr); } }


/* Cabecera de página: titular a la izquierda, bajada alineada abajo a la
   derecha. Sin esto /producto/ y /blog/ dejaban 565 y 784px muertos. */
.cabecera-pagina { display: grid; gap: 24px; }
@media (min-width: 1000px) {
  .cabecera-pagina {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 64px; align-items: end;
  }
  .cabecera-pagina > p { padding-bottom: 8px; }
  /* Cualquier fila que vaya DEBAJO de la cabecera cruza las dos columnas;
     si no, las pastillas de sección se comprimen y se parten en dos filas. */
  .cabecera-pagina > .cabecera-ancho-total { grid-column: 1 / -1; }
}

/* ============================================================
   PIPELINE DE PROCESO — el "cómo funciona" en una sola mirada
   (auditoría 04-ago-2026, T6: explicar con íconos, no párrafos.
   Se usa dentro de .bloque-claro → hereda la paleta crema.)
   ============================================================ */
.pipeline {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 22px; grid-template-columns: 1fr;
  counter-reset: paso;
}
@media (min-width: 880px) {
  .pipeline { grid-template-columns: repeat(var(--pasos, 4), minmax(0, 1fr)); gap: 20px; }
}
.pipeline-paso {
  position: relative; display: grid; justify-items: start; gap: 10px;
  padding: 24px 20px 26px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pipeline-num {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
/* Objetivo táctil mínimo del pie (auditor: ≥24px de alto) */
.footer button, .footer a { min-height: 24px; display: inline-flex; align-items: center; }
.pipeline-icono {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 15px; background: var(--accent-wash); color: var(--accent-text);
}
.pipeline-icono svg { width: 30px; height: 30px; }
.pipeline-titulo { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.pipeline-caption { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@media (min-width: 880px) {
  .pipeline-paso:not(:last-child)::after {
    content: ""; position: absolute; top: 50px; right: -16px; z-index: 1;
    width: 12px; height: 12px; border-top: 2px solid var(--rule-2); border-right: 2px solid var(--rule-2);
    transform: rotate(45deg) translateY(-50%);
  }
}

/* ===== Franja de precios de una línea (reemplaza el pricing duplicado) ===== */
.pricing-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper); padding: 24px 28px; box-shadow: var(--shadow-sm);
}
.pricing-strip b { font-size: 18px; color: var(--ink); font-weight: 600; }
.pricing-strip span { color: var(--ink-3); font-size: 15px; }

/* (Las escenas generadas se retiraron el 04-ago por corrección de Ignacio:
   la mascota de la web son las poses OFICIALES del cliente.) */

/* ============================================================
   BENEFICIOS EXTRA DE UNA SECCIÓN
   ------------------------------------------------------------
   Fila a ancho completo bajo el split, para los beneficios
   concretos que no caben junto al demo. Cruza las dos columnas.
   ============================================================ */
.caso-extras {
  display: grid; gap: 1px; margin-top: 40px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
}
.caso-extra { background: var(--panel); padding: 20px 22px; display: grid; gap: 6px; align-content: start; }
.caso-extra-t { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.caso-extra-t .tag { margin-left: 8px; }
.caso-extra-d { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
@media (min-width: 760px)  { .caso-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .caso-extras { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}


/* ============================================================
   FX 2026 — capa "hyper moderno tecnológico"
   Grid de ingeniería + glows lima/esmeralda + canvas 3D del hero.
   Todo es decorativo (pointer-events:none) y respeta
   prefers-reduced-motion; el contenido nunca depende de estas capas.
   ============================================================ */

/* Grid de ingeniería sobre secciones oscuras (estilo SimpleTrust) */
.fx-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(198,245,58,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,245,58,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 78%);
}

/* Orbes de glow — lima y esmeralda, difusos */
.fx-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}
.fx-glow--lima    { background: rgba(198,245,58,0.20); }
.fx-glow--emerald { background: rgba(31,181,115,0.22); }

/* Canvas 3D del hero (Three.js, components/hero-3d.jsx).
   Sin WebGL el componente no monta nada y quedan los glows CSS. */
.hero-3d {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-3d canvas {
  display: block;
  width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 98%);
          mask-image: linear-gradient(180deg, black 55%, transparent 98%);
}

/* La mascota del hero flota con un halo lima suave */
.hero-mascot img,
.GenkiMascot img { filter: drop-shadow(0 18px 44px rgba(198,245,58,0.18)); }

/* Selección de texto en marca */
::selection { background: rgba(198,245,58,0.85); color: #0a2417; }

/* Scrollbar sutil acorde al tema (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd9b8; border-radius: 8px; }
::-webkit-scrollbar-track { background: #f5f7f3; }

/* Cards: elevación suave al hover */
.caso-card:hover,
.pricing-card:hover,
.panel:hover {
  box-shadow: 0 18px 48px -18px rgba(14,28,20,0.18), 0 0 0 1px rgba(23,114,49,0.14);
}

/* Iconos de features/pasos: halo lima */
.caso-icon, .pipeline-icono, .nav-col-icon {
  box-shadow: 0 0 22px -6px rgba(198,245,58,0.45);
}

/* Números protagonistas (stats): grotesque pesada con aire mono */
.stats-strip .serif,
.hero-stats-row .serif { letter-spacing: -0.03em; }

/* En bloque claro, la sombra se mantiene suave */
.bloque-claro .caso-card:hover,
.bloque-claro .pricing-card:hover,
.bloque-claro .panel:hover {
  box-shadow: 0 18px 44px -18px rgba(14,28,20,0.18), 0 0 0 1px rgba(23,114,49,0.16);
}

@media (prefers-reduced-motion: reduce) {
  .fx-glow { opacity: .35; }
}

/* Manifiesto de /about: rail editorial izquierdo + texto (rellena la banda) */
.manifiesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.manifiesto-rail { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .manifiesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifiesto-rail { position: static; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .manifiesto-rail > div:last-child { margin-top: 0 !important; }
  .manifiesto-rail img { width: 96px !important; height: auto !important; }
}

/* Glow de hero en landings y agenda (paridad con el home) */
.caso-page > section:first-of-type,
.agenda-hero-section {
  position: relative;
  overflow: hidden;
}
.caso-page > section:first-of-type::before,
.agenda-hero-section::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 360px at 84% 0%, rgba(198,245,58,0.09), transparent 65%),
    radial-gradient(520px 320px at 4% 100%, rgba(31,181,115,0.08), transparent 60%);
}
.caso-page > section:first-of-type > .container,
.agenda-hero-section > .container-wide { position: relative; }

/* Stats del hero en móvil: número más contenido para la grilla de 3 */
@media (max-width: 640px) {
  .hero-stats-row .serif { font-size: 21px !important; }
  .hero-stats-row .caption { font-size: 10px; }
}

/* Stats del hero: tamaño contenido para que la fila quepa en una línea (inline=28px) */
.hero-stats-row .serif { font-size: 24px !important; }
.hero-stats-row .caption { letter-spacing: 0.1em !important; }


/* ============================================================
   DIRECCIÓN A+E (aprobada 13-ago-2026) — home: mascota oficial
   en stage blanco + documento heroico con tilt 3D.
   ============================================================ */

/* ── STAGE DEL HERO (home) ── */
.hero-stage {
  position: relative;
  min-height: 520px;
  --px: 0; --py: 0;
}
.stage-scene {
  position: absolute; inset: 0;
  border-radius: 32px;
  background: #f4f7f0 url("/assets/escenas-2026/stage-hero.webp") center/cover;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.stage-layer { position: absolute; inset: 0; pointer-events: none; }
.stage-layer > * { pointer-events: auto; }

/* Podio blanco tipo keynote + mascota oficial */
.stage-podium {
  position: absolute; left: 50%; bottom: 26px;
  width: min(360px, 78%); height: 78px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ffffff 25%, #edf3e4 68%, transparent 74%);
  box-shadow: 0 26px 44px -18px rgba(14,28,20,0.20);
}
.stage-mascot {
  position: absolute; left: 50%; bottom: 58px;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(14,28,20,0.18));
}
.stage-mascot img { display: block; }

/* Tarjetas flotantes: parallax por capa (--d) + flote propio (inner) */
.stage-card { position: absolute; transform: translate3d(calc(var(--px) * var(--d, .4) * 18px), calc(var(--py) * var(--d, .4) * 13px), 0); will-change: transform; }
.stage-card-in {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
  animation: stageFloat 6.5s ease-in-out infinite;
}
.stage-card-boleta { left: 2%; top: 20%; --d: .85; }
.stage-card-boleta .stage-card-in { animation-duration: 7.5s; }
.stage-card-iva { right: 1%; top: 34%; --d: .6; }
.stage-card-notif { right: 14%; top: 6%; --d: 1; }
.stage-card-notif .stage-card-in { animation-duration: 5.6s; }
.stage-card-sii { left: 10%; bottom: 14%; --d: .5; }
@keyframes stageFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@media (prefers-reduced-motion: reduce) {
  .stage-card-in { animation: none !important; }
}

/* Mini boleta dentro de la tarjeta flotante */
.mini-doc { padding: 16px 18px; min-width: 208px; transform: rotate(-4deg); }
.mini-doc-cap { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.mini-doc-folio { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; margin-top: 6px; }
.mini-doc-row { display: flex; justify-content: space-between; gap: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 5px; }
.mini-doc-row b { color: var(--ink); font-weight: 600; }
.mini-doc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--rule-2); font-family: var(--mono); }
.mini-doc-total b { font-size: 16px; color: var(--accent-text); }

.stage-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.stage-chip small { display: block; font-weight: 500; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.stage-chip .ok-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); flex: none; }
.stage-chip .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); flex: none; box-shadow: 0 0 0 3px var(--accent-wash); }

/* Botón "Ver demo" bajo los CTA */
.hero-demo-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--accent-text);
}
.hero-demo-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-demo-link .play { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-wash); display: grid; place-items: center; }

@media (max-width: 1120px) {
  .hero-stage { min-height: 460px; }
}
@media (max-width: 860px) {
  .hero-stage { min-height: 400px; margin-top: 8px; }
  .stage-card-boleta { left: 1%; top: 12%; }
  .stage-card-boleta .mini-doc { min-width: 172px; padding: 12px 14px; }
  .stage-card-iva { right: -2%; top: 40%; }
  .stage-card-notif { right: 2%; top: 2%; }
  .stage-card-sii { display: none; }
  .stage-mascot img { width: 210px !important; height: auto !important; }
}

/* ── DOCUMENTO HEROICO (sección A del home) ── */
.doc-spot { perspective: 1400px; }
.doc-3d {
  position: relative;
  transform: rotateY(calc(-10deg + var(--tx, 0deg))) rotateX(calc(5deg + var(--ty, 0deg)));
  transform-style: preserve-3d;
  transition: transform .12s linear;
  max-width: 460px; margin-inline: auto;
}
.doc-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
}
.doc-card::before, .doc-card::after { /* documentos fantasma detrás */
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  background: var(--bg-2); border: 1px solid var(--rule);
  transform: translateZ(-60px) translateX(-26px) rotate(-2.5deg);
  z-index: -1;
}
.doc-card::after { transform: translateZ(-120px) translateX(-46px) rotate(-4.5deg); background: var(--bg-soft, #f5f7f3); }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.doc-head img { height: 26px; width: auto; }
.doc-tipo { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; }
.doc-folio { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; margin-top: 18px; }
.doc-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.doc-items { margin-top: 18px; display: grid; gap: 10px; }
.doc-item { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--ink-2); }
.doc-item .m { font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.doc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--ink); font-size: 14px; }
.doc-total b { font-family: var(--mono); font-size: 22px; color: var(--accent-text); }
.doc-iva-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* DocSpotlight en una columna (teléfonos y tablets): FUERA el 3D. Con
   preserve-3d + translateZ, Safari móvil pinta los dos documentos fantasma
   grises ENCIMA de la tarjeta con texto y no se puede leer (reporte de
   Ignacio 14-ago-2026). Plano: los fantasmas quedan detrás, asomando abajo. */
@media (max-width: 999px) {
  .doc-spot { perspective: none; }
  .doc-3d { transform: none; transform-style: flat; }
  .doc-card::before { transform: translate(-8px, 10px) rotate(-1.2deg); }
  .doc-card::after { transform: translate(-16px, 20px) rotate(-2.4deg); }
}

/* ── ESCENA GENERADA EN HERO DE LANDING + tacha flotante ── */
.caso-split-vis { flex-direction: column; align-items: stretch; }
.caso-escena {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  background: var(--bg-2);
}
.caso-escena img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.caso-split-vis .hero-tacha {
  margin: -52px 0 0;
  align-self: center;
  width: calc(100% - 44px);
  position: relative;
  box-shadow: var(--shadow-lg);
}

/* ── Thumbs de escena en las cards del selector (home) ── */
.caso-thumb { margin: -24px -24px 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.caso-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.caso-card:hover .caso-thumb img { transform: scale(1.04); }


/* ============================================================
   CINE — scrollytelling (piloto /tienda-online-cine/, 13-ago-2026)
   La página ES el video: escena sticky a pantalla completa y el
   scroll mueve la línea de tiempo. Todo el timing vive aquí:
   el JS solo escribe --p (0..1) por escena y los contadores.
   ============================================================ */
.cine { position: relative; height: calc(var(--n, 6) * 135vh); }
.cine-stage {
  position: sticky; top: 0;
  /* dvh (no svh): con svh el stage quedaba MÁS BAJO que la pantalla cuando
     iOS esconde la barra de Safari, y por el borde inferior se colaba la
     sección siguiente — se veía como si la película "se separara". dvh sigue
     al viewport visible y la mantiene pegada en los 4 bordes. */
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
/* 22-sep-2026 (Ignacio, teléfono: "salta entre secciones al volver suave"):
   dvh cambia cuando la barra del navegador aparece/desaparece → el stage
   cambiaba de alto y las escenas se recentraban de golpe. Ahora el stage mide
   el viewport GRANDE (lvh, estable) y el contenido se centra dentro del
   viewport CHICO (svh, estable) con el padding inferior: nada se mueve al
   mostrar u ocultar la barra, y el stage nunca es más bajo que la pantalla. */
.cine-stage { height: 100lvh; }
.cine-scene { padding-bottom: calc(100lvh - 100svh + 48px); }
.cine-skip { bottom: calc(100lvh - 100svh + 22px); }
.cine-scene {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 110px 24px 48px;
  --p: 0;
  opacity: calc(clamp(0, var(--p) * 4, 1) * clamp(0, (1 - var(--p)) * 4, 1));
  pointer-events: none;
}
.cine-scene.primera { opacity: clamp(0, (1 - var(--p)) * 4, 1); }
/* Los clicks los habilita el motor por JS (ventana "hot" por escena en
   useCineProgress). Antes .ultima tenía pointer-events:auto fijo: como va
   última en el DOM, sus CTA invisibles tapaban las tarjetas-enlace del
   diagrama del home. Sin JS manda la regla .cine-reduced de más abajo. */
.cine-scene.ultima { opacity: clamp(0, var(--p) * 4, 1); }
.cine-inner {
  width: 100%; max-width: 880px; margin: 0 auto; text-align: center;
  transform: scale(calc(0.965 + 0.035 * clamp(0, var(--p) * 4, 1)));
}

/* Elementos que entran con retardo propio (--a = umbral 0..1) */
.cine-scene [style*="--a"] {
  opacity: clamp(0, (var(--p) - var(--a, 0.1)) * 5, 1);
  transform: translateY(calc(clamp(0, (var(--a, 0.1) + 0.18 - var(--p)) * 5, 1) * 26px));
}

/* HUD de video — 14-ago-2026 (noche): Ignacio pidió FUERA la barra de
   progreso y el contador de todas las películas; queda solo "saltar". */
.cine-skip {
  position: absolute; bottom: 22px; left: 28px; z-index: 6;
  background: none; border: none; cursor: pointer; padding: 8px 4px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.cine-skip:hover { color: var(--ink); }

/* Tipografía de escena */
.cine-title { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; font-size: clamp(38px, 5.6vw, 74px); }
.cine-title-sm { font-size: clamp(34px, 4.6vw, 62px); }
.cine-caption { font-family: var(--display); font-weight: 800; letter-spacing: -0.028em; line-height: 1.05; font-size: clamp(26px, 3.4vw, 44px); }
.cine-sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--ink-2); line-height: 1.55; max-width: 52ch; margin: 20px auto 0; }
.cine-mini { font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.04em; }

/* Imagen 3D generada, como prop del set.
   14-ago-2026: la escena 1 es flex-column de altura completa y la imagen
   tiene max-height — antes el conjunto titular+imagen era más alto que el
   stage y la imagen se iba bajo el pliegue, dejando un HUECO en blanco
   gigante en la primera pantalla (reporte de Ignacio). */
.cine-scene-1 .cine-inner {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cine-heroimg { margin: 24px auto 0; max-width: 500px; flex: 0 1 auto; min-height: 0; display: flex; justify-content: center; }
.cine-heroimg img {
  display: block; width: auto; max-width: 100%; max-height: 30vh;
  border-radius: 26px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
}

/* Hint de scroll */
.cine-scrollhint { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.cine-scrollhint span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); animation: cineHint 1.6s ease-in-out infinite; }
@keyframes cineHint { 0%,100% { transform: translateY(0); opacity: 1 } 50% { transform: translateY(7px); opacity: .45 } }

/* Tarjetas de escena (el "set" blanco) */
.cine-card {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 22px;
  box-shadow: var(--shadow-lg); padding: 26px 28px;
  max-width: 460px; margin: 26px auto 0; text-align: left;
}
.cine-card-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cine-live { color: var(--accent-text); font-weight: 700; }
.cine-big { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin-top: 12px; }
.cine-big-sm { font-size: 30px; }
.cine-rows { margin-top: 14px; display: grid; gap: 8px; }
.cine-rows > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); }
.cine-rows .mono { font-size: 13px; color: var(--ink); }
.cine-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 14px; }
.cine-total b { font-size: 24px; color: var(--accent-text); }
.cine-mini-card { padding: 20px 22px; max-width: 340px; }
.cine-duo { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cine-arrow { font-size: 26px; color: var(--accent-text); font-weight: 800; }
.cine-nc { border-color: var(--rule-2); box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-wash); }

/* Sello "Emitida · SII" con pop */
.cine-stamp { position: absolute; right: 18px; bottom: 18px; }
.cine-stamp span {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  transform: scale(clamp(0, (var(--p) - 0.55) * 7, 1)) rotate(-6deg);
  box-shadow: 0 10px 26px -8px rgba(150,200,40,0.6);
}
.cine-doc { position: relative; padding-bottom: 76px; /* despeja el sello "Emitida" del total */ }

/* Conciliación: filas que se cruzan una a una */
.cine-recon { max-width: 560px; }
.cine-recon-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-2); text-align: left;
  opacity: clamp(0, (var(--p) - var(--d, 0.2)) * 6, 1);
  transform: translateX(calc(clamp(0, (var(--d, 0.2) + 0.12 - var(--p)) * 6, 1) * -22px));
}
.cine-recon-row:last-of-type { border-bottom: none; }
.cine-recon-link { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cine-recon-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); display: grid; place-items: center; font-size: 12px; font-weight: 700; }

/* Mascota del cierre */
.cine-mascot img { width: 150px; height: auto; filter: drop-shadow(0 14px 26px rgba(14,28,20,0.16)); animation: stageFloat 5s ease-in-out infinite; }
.cine-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.cine-backlink { margin-top: 22px; font-size: 13.5px; }
.cine-backlink a { color: var(--accent-text); font-weight: 600; }
.cine-backlink a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Móvil */
@media (max-width: 640px) {
  .cine-scene { padding: 96px 16px calc(100lvh - 100svh + 40px); }
  .cine-card { padding: 20px; }
  .cine-duo { gap: 10px; }
  .cine-arrow { transform: rotate(90deg); }
  .cine-heroimg { max-width: 78vw; }
}

/* INTRO del home (14-ago-2026): presentación de MARCA, no titular de texto.
   Logo + set 3D + mascota entran con pop/ rise al cargar la página (keyframes
   de una sola corrida — no dependen de --p ni del JS de scroll). */
.cine-intro-logo {
  width: min(280px, 52vw); height: auto; margin: 0 auto;
  animation: cineIntroPop .7s cubic-bezier(.2,1.3,.3,1) .05s both;
}
.cine-intro-set {
  position: relative; max-width: min(560px, 84vw); margin: 28px auto 0;
  animation: cineIntroRise .8s cubic-bezier(.22,1,.36,1) .18s both;
}
.cine-intro-img {
  display: block; width: 100%; max-height: 38vh; object-fit: cover;
  border-radius: 26px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
}
.cine-intro-mascot {
  position: absolute; right: -24px; bottom: -20px;
  width: clamp(96px, 14vw, 150px); height: auto;
  filter: drop-shadow(0 14px 26px rgba(14,28,20,0.18));
  animation: cineIntroPop .7s cubic-bezier(.2,1.4,.3,1) .45s both, stageFloat 5s ease-in-out 1.3s infinite;
}
.cine-intro-sub { margin-top: 40px; font-weight: 400; animation: cineIntroRise .7s ease .55s both; }
.cine-intro .cine-scrollhint { animation: cineIntroRise .7s ease .72s both; }
@keyframes cineIntroPop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes cineIntroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cine-intro-logo, .cine-intro-set, .cine-intro-mascot, .cine-intro-sub, .cine-intro .cine-scrollhint { animation: none !important; }
}

/* Reduced-motion: todo apilado y visible, sin línea de tiempo */
.cine-reduced { height: auto !important; }
.cine-reduced .cine-stage { position: static; height: auto; overflow: visible; }
.cine-reduced .cine-scene { position: relative; opacity: 1 !important; min-height: 60vh; pointer-events: auto; }
.cine-reduced .cine-inner { transform: none !important; }
.cine-reduced .cine-scene [style*="--a"],
.cine-reduced .cine-recon-row { opacity: 1 !important; transform: none !important; }
.cine-reduced .cine-stamp span { transform: rotate(-6deg) !important; }
.cine-reduced .cine-skip, .cine-reduced .cine-scrollhint { display: none; }

/* Hooks por escena (lint-clases) + wrap de la columna visual del hero */
.cine-scene-1, .cine-scene-2, .cine-scene-3, .cine-scene-4, .cine-scene-5, .cine-scene-6 {}
.cine-pedido, .cine-fade {}
.hero-product-shot-wrap { min-width: 0; }

/* La escena 1 ya viene compuesta (es el frame inicial del video) */
.cine-scene-1 [style*="--a"] { opacity: 1; transform: none; }

/* ============================================================
   ECOSYSTEM HUB (traspaso de Benja 14-ago-2026) — banda CLARA del
   sistema v2 (Ignacio 19-ago: "adapta colores, tipografías y todo
   lo que sea diseño al diseño actual"). El componente hereda
   nuestros tokens; los acentos lima del tema dark original pasan a
   verde profundo (--accent-text) en components/ecosistema.jsx,
   porque lima sobre papel no se lee (1,19:1). Título en Archivo 800
   con énfasis verde, igual que el resto del sitio.
   ============================================================ */
.hub-section { border-block: 1px solid var(--rule); padding-bottom: 56px; }
@media (max-width: 980px) { .hub-section { padding-bottom: 40px; } }

/* Variante chat (facturar-con-ia): burbujas que aparecen en secuencia */
.cine-chat { max-width: 520px; display: grid; gap: 10px; }
.cine-bubble {
  max-width: 78%;
  padding: 12px 16px; border-radius: 18px 18px 18px 6px;
  background: var(--bg-2); border: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink); line-height: 1.45; text-align: left;
  opacity: clamp(0, (var(--p) - var(--d, 0.2)) * 6, 1);
  transform: translateY(calc(clamp(0, (var(--d, 0.2) + 0.1 - var(--p)) * 6, 1) * 14px));
}
.cine-bubble.me { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--accent-wash); border-color: var(--rule-2); }
.cine-chat-done {
  justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  margin-top: 6px; padding: 9px 14px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  opacity: clamp(0, (var(--p) - var(--d, 0.6)) * 6, 1);
  transform: scale(clamp(0.6, 0.6 + 0.4 * clamp(0, (var(--p) - var(--d, 0.6)) * 6, 1), 1));
}
.ok-dot-sm { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(10,36,23,0.9); color: var(--accent); font-size: 11px; }

/* ── Escena DIAGRAMA del home (14-ago-2026): de un solo nodo (Wasabil)
   salen las tres ramas de cliente. Las líneas se dibujan con el scroll
   (dashoffset sobre --p) y cada tarjeta es enlace a la landing de ese
   cliente. Pedido de Ignacio: el home le habla a cualquier negocio. ── */
.cine-scene-d .cine-inner { max-width: 960px; }
.cine-diagrama {
  display: grid; grid-template-columns: auto 130px minmax(0, 1fr);
  align-items: center; max-width: 880px; margin: 30px auto 0; text-align: left;
}
.cine-nodo {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 20px 24px;
  display: grid; gap: 8px; justify-items: center;
}
.cine-nodo img { width: 118px; height: auto; display: block; }
.cine-nodo-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cine-lineas { width: 130px; height: 290px; display: block; }
.cine-lineas path {
  fill: none; stroke: var(--accent-text); stroke-width: 2; opacity: 0.55;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 0.14) * 3.2, 1));
}
.cine-lineas circle { fill: var(--accent-text); opacity: clamp(0, (var(--p) - var(--c, 0.3)) * 7, 1); }
.cine-tronco { display: none; }
.cine-ramas { display: grid; gap: 14px; min-width: 0; }
.cine-rama {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cine-rama:hover { border-color: var(--accent-text); background: var(--accent-wash); box-shadow: var(--shadow-lg); }
.cine-rama-ico {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  background: var(--accent-wash); color: var(--accent-text);
  display: grid; place-items: center;
}
.cine-rama-ico svg { width: 24px; height: 24px; display: block; }
.cine-rama-body { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.cine-rama-t { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.cine-rama-d { font-size: 14px; color: var(--ink-3); line-height: 1.45; }
/* CTA en pastilla lima: que se VEA clickeable (pedido de Ignacio 14-ago) */
.cine-rama-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cine-diagrama-hint { margin-top: 24px; }
@media (max-width: 640px) {
  .cine-diagrama { grid-template-columns: 1fr; justify-items: center; margin-top: 16px; }
  .cine-nodo { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); }
  .cine-nodo img { width: 86px; }
  .cine-nodo-sub { font-size: 9.5px; }
  .cine-lineas { display: none; }
  .cine-tronco {
    display: block; width: 2px; height: 24px; background: var(--accent-text); opacity: 0.55;
    transform: scaleY(clamp(0, (var(--p) - 0.14) * 3.2, 1)); transform-origin: top;
  }
  .cine-ramas { width: 100%; gap: 10px; margin-top: 10px; }
  .cine-rama { padding: 12px 16px; border-radius: 16px; gap: 12px; }
  .cine-rama-ico { width: 40px; height: 40px; border-radius: 12px; }
  .cine-rama-ico svg { width: 21px; height: 21px; }
  .cine-rama-t { font-size: 16px; }
  .cine-rama-cta { margin-top: 6px; }
  .cine-diagrama-hint { margin-top: 14px; }
}
/* Teléfonos BAJOS (SE y similares, ~640px de alto útil): la tercera tarjeta
   se salía del stage. Se aprietan paddings/gaps y se sacrifica el hint. */
@media (max-width: 640px) and (max-height: 720px) {
  .cine-scene-d { padding-top: 76px; }
  .cine-scene-d .cine-caption { font-size: clamp(22px, 6.4vw, 28px); }
  .cine-diagrama { margin-top: 8px; }
  .cine-nodo { padding: 7px 16px; }
  .cine-tronco { height: 10px; }
  .cine-ramas { gap: 8px; margin-top: 6px; }
  .cine-rama { padding: 10px 12px; gap: 10px; }
  .cine-rama-ico { width: 34px; height: 34px; border-radius: 10px; }
  .cine-rama-ico svg { width: 18px; height: 18px; }
  .cine-rama-d { line-height: 1.3; }
  .cine-rama-cta { margin-top: 4px; padding: 5px 11px; }
  .cine-diagrama-hint { display: none; }
  /* En pantallas bajas el botón "saltar" choca con la 3ª tarjeta del
     diagrama (la película del home son 2 escenas: saltar sobra ahí). */
  .cine-corto .cine-skip { display: none; }
}

/* 14-ago-2026: la sub-nav ya NO se monta sobre la película (va después del
   cine en el DOM), así que el HUD y las escenas no necesitan el padding
   extra de 122/132px que la compensaba. */

/* ============================================================
   4-sep-2026 — HOME POR PANTALLAS (ley de Ignacio): en escritorio cada
   sección del home cae COMPLETA en la pantalla: mide como el viewport
   menos la barra, centra su contenido y nunca queda partida. Lo vigila
   lint-pantallas.mjs (fail-closed). En móvil el flujo sigue natural.
   ============================================================ */
:root { --nav-h: 77px; }
@media (min-width: 1024px) {
  .section.pantalla, .hero-section.pantalla {
    min-height: calc(100svh - var(--nav-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 44px; padding-bottom: 44px;
  }
  .pantalla > .container, .pantalla > .container-wide { width: 100%; }
  /* 7-sep-2026 (Ignacio): FUERA el scroll-snap por pantallas — "corrige el scroll
     solo, se siente bugueado". El scroll queda 100 % libre. */
}

/* ── HERO nuevo ("El sistema de facturación para escalar tu negocio") ── */
.hero-section { padding: 52px 0 36px; }
.hero-h1 { font-size: clamp(42px, 4.7vw, 72px); }
.hero-lede { margin-top: 20px; }
.hero-cta-row { display: flex; gap: 12px; margin-top: 26px; align-items: center; flex-wrap: wrap; }
.hero-btn-1, .hero-btn-2 { padding: 14px 22px; font-size: 15px; }
.hero-respaldo { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-respaldo-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-respaldo-chip {
  background: #fff; border: 1px solid #dfe8d3; border-radius: 9px;
  padding: 7px 13px; display: grid; place-items: center; min-height: 38px;
}
.hero-respaldo-chip img { width: auto; display: block; }
/* El fondo del escenario ya no usa la imagen IA (stage-hero.webp): luz de
   estudio hecha en CSS, mismo tono. */
.stage-scene {
  background: radial-gradient(60% 70% at 50% 42%, #ffffff 0%, #f4f7f0 60%, #edf3e4 100%);
}

/* B — centrado + escena de tiendas */
.hero-b-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-b-inner .hero-lede { max-width: 58ch; }
.hero-b-inner .hero-cta-row { justify-content: center; }
.hero-b-inner .hero-respaldo { justify-content: center; margin-top: 26px; }
.hero-b-escena { margin-top: 28px; width: 100%; display: flex; justify-content: center; }
.hero-b-escena .et { width: min(100%, calc(clamp(220px, 100svh - 580px, 400px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
.hero-b-inner .hero-lede strong { display: block; }

/* C — lima completo */
.hero-c { background: var(--accent); }
.hero-c .hero-lede { color: var(--ink); }
.hero-c .hero-lede strong { color: var(--ink); }
.hero-c .hero-btn-1 { background: var(--ink); color: var(--accent); box-shadow: 0 14px 30px -12px rgba(14,28,20,0.5); }
.hero-c .hero-btn-1:hover { background: #1a2e22; transform: translateY(-2px); }
.hero-c .hero-btn-2 { border-color: rgba(14,28,20,0.35); color: var(--ink); }
.hero-c .hero-btn-2:hover { background: rgba(255,255,255,0.45); border-color: var(--ink); color: var(--ink); }
.hero-c .hero-demo-link { color: var(--ink); }
.hero-c .hero-demo-link .play { background: rgba(255,255,255,0.7); }
.hero-c .caption { color: rgba(14,28,20,0.7); }
.hero-c .hero-respaldo-chip { border-color: rgba(14,28,20,0.12); }
.hero-c-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hero-c-set { position: relative; min-height: 520px; }
.hero-c-halo {
  position: absolute; left: 56%; top: 52%; width: 440px; height: 440px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0) 72%);
}
.hero-c-mascota {
  position: absolute; left: 56%; bottom: 6%; width: 400px; height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 26px 40px rgba(14,28,20,0.28));
}
.hero-c-card { position: absolute; }
.hero-c-card-doc { left: -2%; top: 10%; }
.hero-c-card-ok { right: 0; top: 24%; }
.hero-c-card-iva { right: 6%; bottom: 8%; }
@media (max-width: 1120px) { .hero-c-set { min-height: 460px; } .hero-c-mascota { width: 320px; } }
@media (max-width: 860px) {
  .hero-c-set { min-height: 380px; }
  .hero-c-mascota { width: 240px; }
  .hero-c-card-doc .mini-doc { min-width: 172px; padding: 12px 14px; }
  .hero-c-card-iva { display: none; }
}

/* ── Diagrama "tres necesidades" como sección propia (2ª pantalla) ── */
.diagrama-seccion .cine-inner { transform: none; max-width: 960px; }
.diagrama-seccion [style*="--a"] {
  opacity: clamp(0, (var(--p) - var(--a, 0.1)) * 5, 1);
  transform: translateY(calc(clamp(0, (var(--a, 0.1) + 0.18 - var(--p)) * 5, 1) * 26px));
  transition: none;
}
.diagrama-seccion .cine-caption { text-align: center; }
.diagrama-seccion .cine-diagrama-hint { text-align: center; display: block; }

/* ============================================================
   ESCENA TIENDAS (estilo Wasabil, sin IA) — componente EscenaTiendas
   ============================================================ */
.et {
  position: relative; width: 100%; max-width: 760px; aspect-ratio: 16 / 10;
  border-radius: 28px; border: 1px solid var(--rule);
  background:
    radial-gradient(70% 80% at 50% 45%, #ffffff 0%, #f6f9f2 55%, #eef4e6 100%);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 27% 33% 40%; align-items: center;
  overflow: hidden;
  container-type: inline-size;
}
.et-lineas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.et-lineas path {
  fill: none; stroke: var(--accent-text); stroke-width: 2; opacity: .55;
  vector-effect: non-scaling-stroke; stroke-dasharray: 6 8;
  animation: etDash 1.1s linear infinite;
}
.et-lineas path.et-salida { stroke-width: 2.5; opacity: .8; }
.et-paquetes circle { fill: var(--accent-text); }
.et-paquetes .et-paquete-doc { fill: var(--accent-text); }
@keyframes etDash { to { stroke-dashoffset: -28; } }

.et-canales { display: grid; gap: 6cqw; padding-left: 4cqw; position: relative; z-index: 1; }
.et-canal {
  position: relative; display: flex; align-items: center; gap: 1.4cqw;
  background: #fff; border: 1px solid var(--rule); border-radius: 1.8cqw;
  padding: 1.4cqw 1.6cqw; box-shadow: var(--shadow-sm);
  animation: stageFloat 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s);
}
.et-canal-ico {
  flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw;
  background: var(--accent-wash); color: var(--accent-text);
  display: grid; place-items: center;
}
.et-canal-ico svg { width: 2.6cqw; height: 2.6cqw; display: block; }
.et-canal-txt { display: grid; gap: .3cqw; min-width: 0; }
.et-canal-n { font-weight: 600; font-size: max(11px, 1.85cqw); color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.et-canal-d { font-family: var(--mono); font-size: max(11px, 1.35cqw); color: var(--muted); white-space: nowrap; }
.et-canal-dot { position: absolute; right: -0.5cqw; top: 50%; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--accent-text); transform: translateY(-50%); box-shadow: 0 0 0 .45cqw var(--accent-wash); }

.et-centro { position: relative; height: 100%; display: grid; place-items: end center; z-index: 1; }
.et-podio {
  position: absolute; left: 50%; bottom: 10%; width: 78%; height: 12%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, #ffffff 25%, #e7efdc 68%, transparent 74%);
  box-shadow: 0 3cqw 5cqw -2cqw rgba(14,28,20,0.22);
}
.et-mascota {
  position: relative; width: 66%; height: auto; margin-bottom: 12%;
  filter: drop-shadow(0 2.4cqw 3.6cqw rgba(14,28,20,0.2));
  animation: etMascota 5s ease-in-out infinite;
}
@keyframes etMascota { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-1.2cqw) } }

.et-doc { position: relative; z-index: 1; padding-right: 4cqw; display: grid; gap: 1.6cqw; justify-items: start; }
.et-minidoc {
  background: #fff; border: 1px solid var(--rule); border-radius: 2cqw; box-shadow: var(--shadow);
  transform: rotate(-3deg); min-width: 0; width: 100%;
  padding: 2cqw 2.2cqw;
  animation: stageFloat 7.5s ease-in-out infinite;
}
.et-minidoc .mini-doc-cap { font-size: max(11px, 1.3cqw); letter-spacing: .08em; }
.et-minidoc .mini-doc-folio { font-size: max(15px, 2.6cqw); margin-top: .8cqw; }
.et-minidoc .mini-doc-row { font-size: max(11px, 1.4cqw); margin-top: .7cqw; }
.et-minidoc .mini-doc-total { margin-top: 1.1cqw; padding-top: 1cqw; }
.et-minidoc .mini-doc-total { font-size: max(11px, 1.4cqw); }
.et-minidoc .mini-doc-total b { font-size: max(13px, 2cqw); }
.et-chip {
  display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 1.6cqw 1cqw 1cqw;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: max(11px, 1.6cqw); font-weight: 600; color: var(--ink); white-space: nowrap;
  margin-left: 1cqw;
}
.et-chip .ok-dot { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.et-chip .ok-dot svg { width: 1.6cqw; height: 1.6cqw; }
/* Versión compacta (dentro de la película de /ecommerce/) */
.et-compacta { max-width: 640px; }
@media (prefers-reduced-motion: reduce) {
  .et-lineas path, .et-canal, .et-mascota, .et-minidoc { animation: none !important; }
  .et-paquetes { display: none; }
}
/* Escena de tiendas dentro de la película y del hero de landing */
.cine-heroescena { max-width: 680px; width: 100%; }
/* Tamaño por ANCHO (no por alto): con height fijo + max-width, en móvil el set
   salía de la pantalla y ensanchaba el titular (recorte a la derecha). */
.cine-heroescena .et { width: min(100%, calc(min(40vh, 420px) * 1.6)); height: auto; aspect-ratio: 16 / 10; margin: 0 auto; }
.caso-escena .et { border: 0; box-shadow: none; border-radius: 0; max-width: none; aspect-ratio: 4 / 3; }
.pantalla .section-title { margin-bottom: 28px; padding-bottom: 16px; }
.pantalla .section-title .display-2 { font-size: clamp(32px, 3.6vw, 48px); }
.hero-txt { min-width: 0; }

/* Mapa del ecosistema en una pantalla: las tarjetas escalan con el mapa
   (antes tenían px fijos y se salían del stage al reducirlo). */
@media (min-width: 1024px) {
  .hub-stage .hub-card { zoom: 0.78; }
  .hub-stage .hub-badge { zoom: 0.9; }
}
/* Pantallas bajas (portátiles de 800 px de alto): mismo contenido, más
   apretado — la ley es que cada sección quepa entera. */
@media (min-width: 1024px) and (max-height: 860px) {
  .section.pantalla, .hero-section.pantalla { padding-top: 28px; padding-bottom: 28px; }
  .pantalla .section-title { margin-bottom: 18px; padding-bottom: 12px; }
  .pantalla .section-title .lede { font-size: 15px; }
  .pantalla .section-title .display-2 { font-size: clamp(30px, 3.2vw, 42px); }
  .diagrama-seccion .cine-caption { font-size: clamp(24px, 3vw, 38px); }
  .diagrama-seccion .cine-diagrama { margin-top: 18px; }
  .diagrama-seccion .cine-ramas { gap: 10px; }
  .diagrama-seccion .cine-rama { padding: 12px 18px; }
  .diagrama-seccion .cine-diagrama-hint { margin-top: 14px; }
  .home-plans-grid .window { padding: 20px !important; }
  .home-plans-grid .window ul { margin: 12px 0 14px !important; gap: 5px !important; }
  .home-plans-grid .window li { font-size: 12.5px !important; }
  .clients-marquee-item { min-height: 78px !important; padding: 14px 20px !important; }
  .clients-marquee { margin-bottom: 18px !important; }
  .testimonials-grid figure { min-height: 0 !important; padding: 18px !important; }
  .testimonials-grid blockquote { font-size: 17px !important; }
  .home-stats-strip { margin-top: 22px !important; padding: 16px 0 !important; }
  .hub-stage .hub-card { zoom: 0.7; }
  .hub-head .lede { font-size: 15px !important; }
  .hub-foot { margin-top: 14px !important; padding-top: 12px !important; }
}
/* Dentro de la película, la regla genérica .cine-heroimg img le ponía marco,
   sombra y recorte a la MASCOTA de la escena (se veía una caja blanca). */
.cine-heroescena img, .cine-heroescena .et-mascota { border: 0; border-radius: 0; box-shadow: none; max-height: none; }
.cine-heroescena .et-mascota { filter: drop-shadow(0 2.4cqw 3.6cqw rgba(14,28,20,0.2)); }
/* En el hero de landing la tacha "Lo que dejas de hacer" se monta sobre el
   borde inferior de la escena: el contenido sube para que no tape la mascota. */
.caso-escena .et { padding-bottom: 16%; }
.diagrama-seccion .cine-caption { max-width: 22ch; margin-inline: auto; }

/* Escena angosta (película, hero de landing, móvil): mismos elementos, menos
   detalle — el texto nunca baja de 11 px y nada se monta sobre la mascota. */
@container (max-width: 600px) {
  .et { grid-template-columns: 31% 30% 39%; }
  .et-canales { padding-left: 3cqw; gap: 5cqw; }
  .et-canal { padding: 1.6cqw 1.6cqw; gap: 1.2cqw; }
  .et-canal-n { white-space: normal; line-height: 1.15; }
  .et-canal-d { display: none; }
  .et-doc { padding-right: 3cqw; }
  .et-minidoc .mini-doc-cap span:last-child { display: none; }
  .et-minidoc .mini-doc-row { display: none; }
  .et-minidoc .mini-doc-total { margin-top: 1.4cqw; }
  .et-chip { padding: .8cqw 1.4cqw .8cqw .8cqw; }
}
@media (max-width: 1120px) { .hero-c-grid { grid-template-columns: 1fr; } }
/* Aire entre pantallas: el diagrama y el documento se estiran un poco para
   que no quede una banda vacía de >260 px al cruzar de una sección a otra. */
@media (min-width: 1024px) and (min-height: 861px) {
  .diagrama-seccion .cine-diagrama { margin-top: 44px; }
  .diagrama-seccion .cine-diagrama-hint { margin-top: 40px; }
  .pantalla .doc-3d { max-width: 520px; }
  .pantalla .caso-split-txt ul { gap: 16px !important; }
}
/* Columnas del set: nunca crecen por su contenido (el chip "Emitida" nowrap
   ensanchaba la columna del documento y se cortaba a la derecha en móvil). */
.et-canales, .et-centro, .et-doc { min-width: 0; }
.et-doc .et-chip { max-width: 100%; }
@container (max-width: 600px) {
  .et-chip { white-space: normal; text-align: left; line-height: 1.2; }
  .et-minidoc .mini-doc-cap { white-space: normal; }
}

/* ── Hero C (lima): opciones de COLOR y DISPOSICIÓN del texto (4-sep-2026) ──
   txt-1  todo tinta, énfasis por peso/subrayado lima-oscuro (monocromo)
   txt-2  tinta + énfasis verde bosque profundo
   txt-3  tinta + énfasis resaltado con marcador blanco
   txt-4  titular completo en verde bosque, bajada tinta
   txt-5  disposición CENTRADA: titular arriba, mascota y tarjetas abajo
   txt-6  titular a todo el ancho en 2 líneas; bajada+CTA izquierda, mascota derecha */
.hero-c.txt-1 .hero-h1 .italic { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(14,28,20,0.35); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
.hero-c.txt-2 .hero-h1 .italic { color: #0b3d1f; }
.hero-c.txt-3 .hero-h1 .italic { color: var(--ink); background: #fff; padding: 0 0.16em; margin: 0 -0.04em; border-radius: 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-c.txt-4 .hero-h1 { color: #0b3d1f; }
.hero-c.txt-4 .hero-h1 .italic { color: #0b3d1f; }

.hero-c.txt-5 .hero-c-grid { grid-template-columns: 1fr; gap: 8px; text-align: center; }
.hero-c.txt-5 .hero-txt { display: flex; flex-direction: column; align-items: center; }
.hero-c.txt-5 .hero-h1 { font-size: clamp(42px, 5.2vw, 76px); }
.hero-c.txt-5 .hero-h1 .italic { color: #0b3d1f; }
.hero-c.txt-5 .hero-lede { max-width: 56ch; }
.hero-c.txt-5 .hero-cta-row { justify-content: center; }
.hero-c.txt-5 .hero-respaldo { justify-content: center; margin-top: 22px; }
.hero-c.txt-5 .hero-c-set { min-height: 0; height: clamp(240px, calc(100svh - 620px), 360px); width: min(720px, 100%); margin: 0 auto; }
.hero-c.txt-5 .hero-c-mascota { width: auto; height: 100%; bottom: 0; left: 50%; transform: translateX(-50%); }
.hero-c.txt-5 .hero-c-halo { width: 360px; height: 360px; left: 50%; }
.hero-c.txt-5 .hero-c-card-doc { left: 6%; top: 8%; }
.hero-c.txt-5 .hero-c-card-ok { right: 6%; top: 10%; }
.hero-c.txt-5 .hero-c-card-iva { right: 8%; bottom: 10%; }

.hero-c.txt-6 .hero-txt { display: contents; }
.hero-c.txt-6 .hero-c-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "h1 h1" "lede set" "cta set" "resp set";
  grid-template-rows: auto auto auto 1fr;
  align-items: start; row-gap: 0; column-gap: 40px;
}
.hero-c.txt-6 .hero-h1 { grid-area: h1; font-size: clamp(44px, 5.3vw, 78px); }
.hero-c.txt-6 .hero-h1 .italic { color: #0b3d1f; }
.hero-c.txt-6 .hero-lede { grid-area: lede; margin-top: 22px; }
.hero-c.txt-6 .hero-cta-row { grid-area: cta; }
.hero-c.txt-6 .hero-respaldo { grid-area: resp; align-self: end; }
.hero-c.txt-6 .hero-c-set { grid-area: set; min-height: 0; height: clamp(260px, calc(100svh - 520px), 400px); margin-top: 8px; }
.hero-c.txt-6 .hero-c-mascota { width: auto; height: 92%; bottom: 0; left: 55%; }
.hero-c.txt-6 .hero-c-halo { width: 340px; height: 340px; }
.hero-c.txt-6 .hero-c-card-doc { left: 2%; top: 2%; }
.hero-c.txt-6 .hero-c-card-ok { right: 0; top: 8%; }
.hero-c.txt-6 .hero-c-card-iva { right: 2%; bottom: 4%; }
@media (max-width: 1120px) { .hero-c.txt-6 .hero-txt { display: block; } .hero-c.txt-6 .hero-c-grid { grid-template-areas: none; grid-template-columns: 1fr; } .hero-c.txt-6 .hero-h1, .hero-c.txt-6 .hero-lede, .hero-c.txt-6 .hero-cta-row, .hero-c.txt-6 .hero-respaldo, .hero-c.txt-6 .hero-c-set { grid-area: auto; } }
/* Escena generada (Nano Banana Pro) como imagen: en hero B, en hero C (?img=1) y en /ecommerce/ */
.hero-escena-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-b-escena .hero-escena-img { width: auto; height: clamp(220px, calc(100svh - 580px), 400px); aspect-ratio: 4 / 3; border-radius: 28px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg); background: #fff; }
.hero-c-escena { position: relative; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -30px rgba(14,28,20,0.45); aspect-ratio: 4 / 3; max-height: calc(100svh - var(--nav-h) - 88px); margin-inline: auto; }
.hero-c-escena .hero-escena-img { object-fit: cover; }
.hero-c.txt-5 .hero-c-escena { width: min(640px, 100%); height: clamp(240px, calc(100svh - 620px), 380px); aspect-ratio: auto; }
.hero-c.txt-6 .hero-c-escena { grid-area: set; height: clamp(260px, calc(100svh - 520px), 400px); aspect-ratio: auto; margin-top: 8px; }
/* Hero de landing: la escena generada se ve ENTERA (contain) y la tacha
   "Lo que dejas de hacer" ya no se monta encima de la mascota. */
.caso-escena img { object-fit: contain; background: #fff; }
.caso-split-vis .hero-tacha { margin-top: -20px; }

/* ============================================================
   ILUSTRACIONES GENERADAS (Nano Banana Pro, Wasabilito en escena)
   4-sep-2026 — se FUNDEN con el fondo: el blanco de la imagen desaparece
   con multiply sobre fondos claros (y el negro con screen sobre la banda
   oscura). Nada de marcos ni sombras: son parte de la sección.
   ============================================================ */
.ilus { display: block; mix-blend-mode: multiply; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.ilus-celebra { mix-blend-mode: screen; }
/* Landing: panel del dolor con la escena al costado */
.panel-dolor-ilus { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; }
.ilus-dolor { width: 100%; max-height: 240px; }
/* "Cómo funciona": título + escena de los tres pasos */
.como-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 32px; align-items: end; }
.ilus-pasos { width: 100%; max-height: 220px; justify-self: end; }
/* Sección de producto: sello-escena sobre el eyebrow */
.ilus-spot { height: 168px; width: auto; max-width: 100%; margin: -12px 0 14px -8px; }
/* Preguntas: fila de poses centrada */
.ilus-poses { width: min(560px, 100%); margin: 0 auto 8px; }
.ilus-poses-about { width: min(760px, 100%); margin: 0 auto 32px; }
/* Cabeceras de página (producto, blog): escena junto a la bajada */
.cabecera-lado { display: flex; align-items: center; gap: 24px; }
.ilus-cabecera { height: 200px; width: auto; flex: none; }
/* Precios: escena bajo la bajada, centrada */
.ilus-planes { height: 220px; width: auto; margin: 28px auto 0; }
/* Agenda: bajo la ficha de la llamada */
.ilus-agenda { width: min(420px, 100%); margin-top: 24px; }
/* Contacto: entre el título y los canales */
.ilus-contacto { height: 220px; width: auto; margin: 24px auto 0; }
/* CTA final: escena oscura fundida en la banda */
.cta-band-ilus { position: relative; display: grid; place-items: center; }
.ilus-celebra { width: min(420px, 100%); }
@media (max-width: 860px) {
  .panel-dolor-ilus { grid-template-columns: 1fr; }
  .ilus-dolor { max-height: 200px; }
  .como-cabecera { grid-template-columns: 1fr; }
  .ilus-pasos { justify-self: start; max-height: 180px; }
  .ilus-spot { height: 130px; }
  .cabecera-lado { flex-direction: column; align-items: flex-start; }
  .ilus-cabecera { height: 160px; }
  .cta-band-grid > div:last-child { display: grid; }
  .ilus-celebra { width: min(300px, 100%); }
}
.panel-dolor-txt { min-width: 0; }
/* La escena del panel del dolor va a la DERECHA (columna angosta); el texto
   conserva la columna ancha aunque la imagen vaya primero en el DOM. */
.panel-dolor-ilus .ilus-dolor { grid-column: 2; grid-row: 1; }
.panel-dolor-ilus .panel-dolor-txt { grid-column: 1; grid-row: 1; }
@media (max-width: 860px) { .panel-dolor-ilus .ilus-dolor, .panel-dolor-ilus .panel-dolor-txt { grid-column: 1; grid-row: auto; } }
/* Cabecera con escena: la bajada cede ancho antes de desbordar (1024-1100). */
.cabecera-lado { min-width: 0; flex-wrap: wrap; }
.cabecera-lado .lede { min-width: 0; flex: 1 1 240px; }
/* La escena de celebración trae su propio fondo oscuro (no es negro puro):
   además de screen, una máscara radial funde los bordes con la banda. */
.ilus-celebra {
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 48%, transparent 74%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 48%, transparent 74%);
}

/* ── HERO D: DRAGÓN (escena completa generada; texto y botones encima) ── */
.hero-d { position: relative; overflow: hidden; background: #1a2a1f; color: #f1faee; --accent-text: #c6f53a; }
.hero-d-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
/* velo: oscurece y limpia el tercio izquierdo para que el texto se lea; se
   desvanece hacia la acción. */
.hero-d-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,18,12,0.86) 0%, rgba(10,18,12,0.72) 32%, rgba(10,18,12,0.25) 56%, rgba(10,18,12,0) 72%),
    linear-gradient(180deg, rgba(10,18,12,0.35) 0%, rgba(10,18,12,0) 30%, rgba(10,18,12,0) 70%, rgba(10,18,12,0.4) 100%);
}
.hero-d-inner { position: relative; z-index: 1; }
.hero-d-txt { max-width: 640px; }
.hero-d .hero-h1 { color: #f1faee; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.hero-d .hero-h1 .italic { color: #c6f53a; }
.hero-d .hero-lede { color: rgba(241,250,238,0.88); }
.hero-d .hero-lede strong { color: #ffffff; }
.hero-d .hero-btn-2 { border-color: rgba(241,250,238,0.4); color: #f1faee; }
.hero-d .hero-btn-2:hover { background: rgba(255,255,255,0.12); border-color: #f1faee; color: #fff; }
.hero-d .hero-demo-link { color: #c6f53a; }
.hero-d .hero-demo-link .play { background: rgba(198,245,58,0.18); }
.hero-d .caption { color: rgba(241,250,238,0.7); }
.hero-d .hero-respaldo-chip { border-color: rgba(255,255,255,0.15); }
@media (max-width: 1023px) {
  .hero-d { min-height: 640px; display: flex; align-items: flex-end; padding-bottom: 40px; }
  .hero-d-img { object-position: 60% 20%; }
  .hero-d-velo { background: linear-gradient(180deg, rgba(10,18,12,0.1) 0%, rgba(10,18,12,0.55) 42%, rgba(10,18,12,0.92) 68%); }
}
/* Hero dragón en móvil: escena vertical, texto abajo */
@media (max-width: 860px) { .hero-d-img { object-position: 50% 0%; } .hero-d { min-height: 700px; } }
/* Hero dragón en MÓVIL (7-sep-2026): la escena vertical arriba, entera, y el
   texto debajo sobre fondo oscuro — nada tapa a Wasabilito ni al dragón. */
@media (max-width: 860px) {
  .hero-d { display: flex; flex-direction: column; min-height: 0; padding: 0 0 36px; align-items: stretch; }
  .hero-d picture { display: block; position: relative; width: 100%; height: min(78vw, 560px); order: 0; }
  .hero-d-img { position: absolute; inset: 0; object-position: 50% 30%; }
  .hero-d-velo { position: absolute; left: 0; right: 0; top: 0; height: min(78vw, 560px); background: linear-gradient(180deg, rgba(10,18,12,0) 70%, #0f1a12 100%); }
  .hero-d-inner { order: 1; padding-top: 12px; }
  .hero-d { background: #0f1a12; }
}
/* Hero dragón móvil (7-sep-2026, ajuste): la escena vertical se ve casi
   completa (dragón arriba, Wasabilito abajo) y sin banda vacía sobre ella. */
@media (max-width: 860px) {
  .hero-section.hero-d { padding: 0 0 36px; }
  .hero-d picture, .hero-d-velo { height: clamp(440px, 150vw, 640px); }
  .hero-d-img { object-position: 50% 40%; }
}
@media (max-width: 860px) { .hero-section.hero-d { padding-top: 0 !important; } }

/* ── CALCULADORA v2 (7-sep-2026) ── */
/* Tarjeta de entrada + tarjeta de resultado en papel claro. Sin bloque negro
   ni mascota rotada: la escena va discreta en la cabecera. Los controles son
   propios (pista fina, pulgar lima) y el valor grande es un campo editable
   sincronizado con el deslizador. Prefijo calc2- en todo. */
.calc2 { min-width: 0; }
.calc2-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-bottom: 40px; }
.calc2-cabecera-txt { min-width: 0; }
/* 19ch: el título corta "…queda sin | documentar hoy?" y nunca deja "hoy?" huérfano (medido 861–1440). */
.calc2-cabecera-txt .display-2 { max-width: 19ch; }
.calc2-ilus { height: 210px; width: auto; max-width: 100%; justify-self: end; }
.calc2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.calc2-card {
  container-type: inline-size;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px 40px 36px;
  box-shadow: var(--shadow-sm);
}
.calc2-entrada { display: flex; flex-direction: column; }
.calc2-resultado { box-shadow: var(--shadow); }
.calc2-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.calc2-card-head-der { color: var(--muted-2); letter-spacing: 0.08em; }

/* Controles */
.calc2-control + .calc2-control { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--rule); }
.calc2-label { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.calc2-hint { margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.calc2-valor { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; min-width: 0; }
.calc2-valor-prefijo { font-size: clamp(22px, 5cqw, 28px); font-weight: 600; line-height: 1; color: var(--ink-3); }
.calc2-valor-input {
  appearance: none; -webkit-appearance: none;
  font-size: clamp(30px, 8cqw, 42px); font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 8px; padding: 4px 5px; margin: -4px -5px;
  min-width: 2ch; max-width: 100%;
  outline: none; caret-color: var(--accent-deep);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.calc2-control:hover .calc2-valor-input { background: var(--bg-2); }
.calc2-valor-input:focus { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.calc2-valor-unidad { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.calc2-lapiz { flex: none; align-self: center; color: var(--muted); opacity: 0.55; transition: opacity 0.15s ease; }
.calc2-control:hover .calc2-lapiz { opacity: 1; }

/* Deslizador: pista fina (relleno tinta hasta el pulgar) y pulgar lima. El
   relleno se calcula con --p (0..1) descontando el ancho del pulgar para que
   coincida con su centro en todo el recorrido. */
.calc2-range {
  --p: 0; --pulgar: 22px;
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 30px; margin: 10px 0 0;
  background: transparent; cursor: pointer; outline: none;
}
.calc2-range::-webkit-slider-runnable-track {
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ink) 0 calc(var(--pulgar) / 2 + (100% - var(--pulgar)) * var(--p)), var(--rule-2) calc(var(--pulgar) / 2 + (100% - var(--pulgar)) * var(--p)) 100%);
}
.calc2-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--pulgar); height: var(--pulgar); margin-top: calc((3px - var(--pulgar)) / 2);
  border-radius: 50%; background: var(--accent);
  border: 1px solid rgba(14,28,20,0.24);
  box-shadow: 0 0 0 3px #fff, 0 1px 2px rgba(14,28,20,0.18), 0 8px 18px -6px rgba(14,28,20,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.calc2-range:hover::-webkit-slider-thumb, .calc2-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.calc2-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(23,114,49,0.35), 0 8px 18px -6px rgba(14,28,20,0.35); }
.calc2-range::-moz-range-track { height: 3px; border-radius: 999px; background: var(--rule-2); }
.calc2-range::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--ink); }
.calc2-range::-moz-range-thumb {
  width: var(--pulgar); height: var(--pulgar); border-radius: 50%; background: var(--accent);
  border: 1px solid rgba(14,28,20,0.24);
  box-shadow: 0 0 0 3px #fff, 0 1px 2px rgba(14,28,20,0.18), 0 8px 18px -6px rgba(14,28,20,0.35);
}
.calc2-minmax { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; letter-spacing: 0.04em; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* Resultado */
.calc2-cifra-label { font-size: 15px; color: var(--ink-2); letter-spacing: -0.01em; }
.calc2-cifra { margin-top: 10px; font-size: clamp(34px, 11.5cqw, 72px); line-height: 1; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc2-cifra-sub { margin-top: 12px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); }
.calc2-filas { margin-top: 28px; border-top: 1px solid var(--rule); }
.calc2-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.calc2-fila-k { color: var(--ink-2); }
.calc2-fila-v { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc2-nota { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--muted); }
.calc2-fila-plan { align-items: center; }
.calc2-plan {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.calc2-plan strong { font-weight: 700; }
.calc2-plan-precio { font-size: 12px; font-weight: 500; opacity: 0.85; }
.calc2-cta { width: 100%; justify-content: center; margin-top: 28px; padding: 14px 22px; font-size: 15px; }
.calc2-cta-nota { margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }

@media (max-width: 1100px) {
  .calc2-card { padding: 28px 28px 32px; }
  .calc2-ilus { height: 180px; }
}
@media (max-width: 860px) {
  .calc2-cabecera { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  /* la escena trae aire blanco arriba y abajo: se compensa para no abrir un hueco */
  .calc2-ilus { height: 150px; justify-self: start; margin: -22px 0 -18px; }
  .calc2-grid { grid-template-columns: 1fr; gap: 16px; }
  .calc2-card { padding: 24px 22px 26px; border-radius: var(--radius); }
  .calc2-card-head { padding-bottom: 14px; margin-bottom: 22px; }
  .calc2-control + .calc2-control { margin-top: 24px; padding-top: 24px; }
  .calc2-valor { flex-wrap: wrap; row-gap: 4px; }
  .calc2-fila { padding: 12px 0; }
  .calc2-fila-plan { grid-template-columns: 1fr; }
  .calc2-fila-plan .calc2-plan { justify-self: start; }
}

/* ============================================================
   7-sep-2026 — VERDE DE ÍCONOS Y ETIQUETAS (decisión de Ignacio: opción 4,
   lima intenso suave + verde bosque) y criterio de diseño para no volver el
   sitio chillón: la saturación va SOLO en los acentos pequeños (chips de
   ícono, etiquetas, puntos de estado). Las superficies grandes (tarjetas del
   producto, hover, seleccionado, pastillas dentro de mocks) usan --accent-wash,
   que cambió de menta (#eafbe2) a un lima claro y calmado (#f1fbd0).
   ============================================================ */
.nav-col-icon, .nav-mega-icon, .caso-icon, .pipeline-icono, .cine-rama-ico,
.hero-demo-link .play, .cine-recon-ok, .et-canal-ico {
  background: var(--accent-soft); color: var(--accent-deep);
  border: 1px solid color-mix(in oklab, var(--accent) 70%, transparent);
}
.nav-mega-item:hover .nav-mega-icon { background: var(--accent); color: var(--accent-ink); }
.tag, .nav-col-item .tag, .nav-trans-item .tag, .caso-card .tag {
  background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 70%, transparent);
}
.eyebrow .dot { box-shadow: none; }
.ip-card-icon, .ip-detail-icon, .ip-hiw-icon, .hiw-trigger-icon, .hiw-icon-big, .nav-mobile-subicon {
  background: var(--accent-soft); color: var(--accent-deep);
}
/* Clientes con TRES testimonios (7-sep-2026): compactar para que la pantalla
   siga cabiendo en 1440×900. */
@media (min-width: 1024px) {
  .testimonials-grid blockquote { font-size: 17px !important; line-height: 1.32 !important; }
  .testimonials-grid figure { padding: 20px !important; min-height: 0 !important; }
  .testimonials-grid figcaption { margin-top: 16px !important; padding-top: 12px !important; }
  .clients-marquee-item { min-height: 84px !important; padding: 16px 20px !important; }
  .clients-marquee { margin-bottom: 20px !important; }
  .home-stats-strip { margin-top: 28px !important; padding: 20px 0 !important; }
}
/* Hero dragón MÓVIL v3 (7-sep-2026, Ignacio: "el texto ni siquiera se ve"):
   la escena ocupa ~60 % de la pantalla y el titular se monta sobre su borde
   inferior con velo oscuro — título y botones dentro de la primera pantalla. */
@media (max-width: 860px) {
  .hero-d picture, .hero-d-velo { height: min(58svh, 520px); }
  .hero-d-img { object-position: 50% 28%; }
  .hero-d-velo { background: linear-gradient(180deg, rgba(10,18,12,0) 38%, rgba(10,18,12,0.62) 68%, #0f1a12 100%); }
  .hero-d-inner { margin-top: -170px; position: relative; z-index: 1; padding-top: 0; }
  .hero-d .hero-h1 { font-size: clamp(34px, 9.6vw, 42px); }
  .hero-d .hero-lede { margin-top: 14px; font-size: 16px; }
  .hero-d .hero-cta-row { margin-top: 18px; }
  .hero-d .hero-respaldo { margin-top: 22px; }
}
/* Hero dragón MÓVIL v4 (7-sep-2026, Ignacio): la escena vertical se ve ENTERA
   (dragón arriba-derecha, Wasabilito abajo-izquierda) y el texto va en el cielo
   vacío de arriba a la izquierda, sin tapar a ninguno. Los logos de respaldo
   pasan a una franja bajo la escena. */
@media (max-width: 860px) {
  .hero-section.hero-d { display: block; padding: 0; min-height: 0; background: #0f1a12; }
  .hero-d picture { display: block; position: relative; width: 100%; aspect-ratio: 9 / 16; height: auto; max-height: none; order: 0; }
  .hero-d-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .hero-d-velo { height: auto; inset: 0; aspect-ratio: 9 / 16; background:
    radial-gradient(90% 62% at 0% 0%, rgba(10,18,12,0.78) 0%, rgba(10,18,12,0.5) 45%, rgba(10,18,12,0) 75%); }
  .hero-d-inner { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 22px 20px 0; z-index: 1; }
  .hero-d-txt { max-width: 78%; }
  .hero-d .hero-h1 { font-size: clamp(30px, 8.6vw, 38px); line-height: 1; }
  .hero-d .hero-lede { margin-top: 10px; font-size: 14.5px; line-height: 1.4; max-width: 30ch; }
  .hero-d .hero-cta-row { margin-top: 14px; gap: 8px; }
  .hero-d .hero-btn-1, .hero-d .hero-btn-2 { padding: 11px 16px; font-size: 14px; }
  .hero-d .hero-demo-link { font-size: 13px; }
  /* respaldo: fuera de la escena, en franja propia bajo la imagen */
  .hero-d .hero-respaldo { position: absolute; top: calc(100% * 16 / 9); left: 0; right: 0; margin: 0; padding: 14px 20px 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hero-d .hero-respaldo-chips { flex-wrap: nowrap; }
}
@media (max-width: 860px) { .hero-section.hero-d { padding-bottom: 76px; } }
@media (max-width: 860px) {
  .hero-section.hero-d { padding-bottom: 76px !important; }
  .hero-d-txt { max-width: 60%; }
  .hero-d .hero-h1 { font-size: clamp(28px, 8vw, 34px); }
  .hero-d .hero-lede { max-width: 26ch; font-size: 14px; }
}
/* Hero móvil v4b: rejilla — escena y texto en la misma celda, logos en la
   franja inferior; el alto del hero sale solo (sin absolutos que se salgan). */
@media (max-width: 860px) {
  .hero-section.hero-d { display: grid; grid-template-columns: 100%; position: relative; padding: 0 0 76px !important; }
  .hero-d picture { grid-area: 1 / 1; position: relative; aspect-ratio: 9 / 16; }
  .hero-d-velo { grid-area: 1 / 1; position: relative; inset: auto; height: auto; aspect-ratio: 9 / 16; pointer-events: none; }
  .hero-d-inner { display: contents; }
  .hero-d-txt { grid-area: 1 / 1; position: relative; z-index: 1; align-self: start; padding: 22px 20px 0; max-width: 60%; }
  .hero-d .hero-respaldo { position: absolute; left: 0; right: 0; bottom: 0; top: auto; margin: 0; padding: 14px 20px 16px; }
}
@media (max-width: 860px) { .hero-d-txt { position: static; z-index: 1; } }
@media (max-width: 860px) {
  .hero-d-txt { max-width: 66%; }
  .hero-d .hero-h1 { font-size: clamp(25px, 7.3vw, 32px); }
  .hero-d .hero-lede { font-size: 13.5px; max-width: 24ch; }
  /* "Ver demo" caía sobre la hoja de Wasabilito en teléfonos bajos: fuera en móvil
     (el video sigue en escritorio; en móvil el CTA es Pruébalo gratis / Agenda). */
  .hero-d .hero-demo-link { display: none; }
}
@media (max-width: 860px) { .hero-d .hero-h1 { font-size: clamp(24px, 7vw, 30px); } }
@media (max-width: 860px) { .hero-d .hero-h1 { font-size: clamp(24px, 6.8vw, 30px); letter-spacing: -0.045em; } }
/* 7-sep-2026: sin "font boosting" del navegador móvil — el tamaño de texto es
   el que define el CSS (el h1 del hero se inflaba de 26 a 34 px en Chrome móvil). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* el .display-1 móvil lleva !important (línea ~1109): el hero dragón necesita su propio tamaño */
@media (max-width: 860px) { .hero-d .hero-h1 { font-size: clamp(24px, 6.8vw, 30px) !important; line-height: 1 !important; } }

/* ── 7-sep-2026 (Ignacio): logos "Respaldados por" en móvil vuelven a sus
   dimensiones originales — la franja de una sola línea los apretaba y
   escondía al SII fuera de pantalla. Leyenda arriba, chips en fila que
   envuelve, mismo chip (7×13, min 38) que en escritorio. */
@media (max-width: 860px) {
  .hero-d .hero-respaldo { flex-wrap: wrap; overflow: visible; gap: 10px 14px; padding: 16px 20px 18px; }
  .hero-d .hero-respaldo > .caption { flex: 0 0 100%; }
  .hero-d .hero-respaldo-chips { flex-wrap: wrap; gap: 8px; }
}

/* ── 7-sep-2026 (Ignacio): carruseles móviles (planes, testimonios) — la
   tarjeta activa queda SIEMPRE al centro y un gesto corto mueve exactamente
   una tarjeta (snap center + scroll-snap-stop always). El relleno lateral
   deja centrar también la primera y la última. */
@media (max-width: 860px) {
  .home-plans-grid, .pricing-plans-grid {
    --tarjeta: min(84vw, 360px);
    scroll-snap-type: x mandatory;
    padding-left: calc((100vw - var(--tarjeta)) / 2) !important;
    padding-right: calc((100vw - var(--tarjeta)) / 2) !important;
    scroll-padding-inline: calc((100vw - var(--tarjeta)) / 2);
    overscroll-behavior-x: contain;
  }
  .testimonials-grid {
    --tarjeta: min(84vw, 360px);
    scroll-snap-type: x mandatory;
    padding-left: calc((100% - var(--tarjeta)) / 2);
    padding-right: calc((100% - var(--tarjeta)) / 2);
    scroll-padding-inline: calc((100% - var(--tarjeta)) / 2);
    overscroll-behavior-x: contain;
  }
  .home-plans-grid > *, .pricing-plans-grid > *, .testimonials-grid > * {
    flex: 0 0 var(--tarjeta); width: var(--tarjeta); max-width: none;
    scroll-snap-align: center; scroll-snap-stop: always;
  }
}
/* la franja de logos ya no va absoluta: es la segunda fila de la rejilla del
   hero, así su alto (dos filas de chips) no pisa a Wasabilito. */
@media (max-width: 860px) {
  .hero-section.hero-d { grid-template-rows: auto auto; padding-bottom: 0 !important; }
  .hero-d .hero-respaldo { position: static; grid-area: 2 / 1; }
}