:root {
  --eco-ink: #0A0A0A;
  --eco-ink-2: #333333;
  --eco-body: #555555;
  --eco-muted: #999999;
  --eco-border: #E4E2DC;
  --eco-surface: #F5F4F0;
  --eco-bg: #FFFFFF;
  --eco-hover-surface: #EDEBE4;
  --eco-ok: #2F7D4F;
  --eco-ok-bg: #EAF2EC;
  --eco-warn: #9A6B22;
  --eco-warn-bg: #F5EEE0;
  --eco-danger: #B3261E;
  --eco-danger-bg: #F5E7E5;
  --eco-info: #3B4C7A;
  --eco-info-bg: #E9ECF2;
  --blue: var(--eco-ink);
  --c-0a0a0a: var(--eco-ink);
  --c-ffffff: var(--eco-bg);
  --c-fafafa: var(--eco-bg);
  --c-f5f5f5: var(--eco-surface);
  --c-e8e8e8: var(--eco-border);
  --c-a3a3a3: var(--eco-muted);
  --c-737373: var(--eco-body);
  --c-525252: var(--eco-ink-2);
  --c-fef2f2: var(--eco-danger-bg);
  --c-fca5a5: var(--eco-danger-bg);
  --c-b91c1c: var(--eco-danger);
  --c-1e7d4f: var(--eco-ok);
  --c-fff: var(--eco-bg);
  --c-fbf3ea: var(--eco-warn-bg);
  --c-b5651d: var(--eco-warn);
  --c-2a5bff: var(--eco-ink);
  --c-b45309: var(--eco-warn);
  --c-fffbeb: var(--eco-warn-bg);
  --c-dcfce7: var(--eco-ok-bg);
  --c-15803d: var(--eco-ok);
  --c-fef3c7: var(--eco-warn-bg);
  --c-fee2e2: var(--eco-danger-bg);
  --c-dc2626: var(--eco-danger);
  --c-f3efff: var(--eco-info-bg);
  --c-7c3aed: var(--eco-info);
  --c-f0fdf4: var(--eco-ok-bg);
  --c-bbf7d0: var(--eco-ok-bg);
  --c-16a34a: var(--eco-ok);
  --c-1c1c1e: var(--eco-ink);
  --c-ff5f57: var(--eco-ink);
  --c-febc2e: var(--eco-body);
  --c-28c840: var(--eco-muted);
  --c-111: var(--eco-ink);
  --c-e4e2dc: var(--eco-border);
  --c-aaaaaa: var(--eco-muted);
  --c-f0efeb: var(--eco-border);
  --c-f5f4f0: var(--eco-surface);
  --c-333: var(--eco-ink-2);
  --black: var(--c-0a0a0a);
  --white: var(--c-ffffff);
  --gray-50: var(--c-fafafa);
  --gray-100: var(--c-f5f5f5);
  --gray-200: var(--c-e8e8e8);
  --gray-400: var(--c-a3a3a3);
  --gray-500: var(--c-737373);
  --gray-600: var(--c-525252);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
}

.brand { display: flex; align-items: center; }
.brand-logo { height: 26px; width: auto; display: block; }

.nav-right { display: flex; align-items: center; gap: 20px; }

.lang-switch {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
}
.lang-current { color: var(--black); }
.lang-sep { color: var(--gray-200); }
.lang-link { color: var(--gray-400); transition: color 0.15s ease; }
.lang-link:hover { color: var(--black); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--black); color: var(--white);
  font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 100px;
  white-space: nowrap;
}

/* ARCO DE ICONOS (W1) -- 6 figuras de residuo en contorno, ancho completo
   del contenedor, arriba del titular (con aire entre los dos, ver
   .icon-arc margin-bottom). Cada item define su propia altura optica via
   --h inline (ver index.html) -- a una sola altura comun la botella (muy
   angosta) se veia mucho mas chica que la paca (casi cuadrada); ajustado
   a ojo por icono hasta que el peso visual quedo parejo. Rotacion/
   elevacion: -13 a +13deg / -4 a -88px, simetrico sobre las 6 posiciones. */
.icon-arc {
  --elev-scale: 1;
  --size-scale: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  margin-bottom: 48px;
  color: var(--eco-ink);
}
.icon-arc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(calc(var(--elev) * var(--elev-scale))) rotate(var(--rot));
}
.icon-arc-item svg {
  height: calc(var(--h, 60px) * var(--size-scale));
  width: auto;
  display: block;
  color: var(--eco-ink);
}
.icon-arc-item:focus-visible {
  outline: 2px solid var(--blue, #2A5BFF);
  outline-offset: 4px;
  border-radius: 4px;
}
.icon-arc-name {
  position: absolute;
  top: calc(100% + 8px);
  font-size: 10px;
  color: var(--eco-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
/* Solo dispositivos con hover real (mouse/trackpad) -- en tactil el
   nombre nunca aparece, pedido explicito del brief. */
@media (hover: hover) and (pointer: fine) {
  .icon-arc-item:hover .icon-arc-name { opacity: 1; }
}
.icon-arc-item:focus-visible .icon-arc-name { opacity: 1; }

@media (max-width: 640px) {
  .icon-arc { --elev-scale: .32; --size-scale: .45; gap: 14px; margin-bottom: 32px; }
}

/* AGENTE -- panel de conversacion (mic/texto/transcripcion), extraido de
   agente/index.html (Bloque U, 2026-09-06) para reutilizarse tambien en el
   home (W3, bloque de entrada). Todos los comentarios de fixes de iOS son
   reales, verificados en dispositivo -- no borrar sin repetir esas pruebas. */
  .agente-hero { padding: 40px 0 80px; min-height: calc(100vh - 200px); }
  .agente-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--eco-muted); margin-bottom: 10px; }
  .agente-title { font-family: 'DM Serif Display', serif; font-size: 40px; line-height: 1.1; color: var(--eco-ink); margin-bottom: 36px; }
  .agente-title em { font-style: italic; }

  .agente-grid { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
  @media (max-width: 900px) { .agente-grid { grid-template-columns: 1fr; } }

  /* ── Columna izquierda: mic + estado + texto ── */
  .agente-panel { background: var(--eco-surface); border: 1px solid var(--eco-border); border-radius: 14px; padding: 28px 24px; position: sticky; top: 90px; }
  @media (max-width: 900px) { .agente-panel { position: static; } }

  .agente-mic-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 22px; }
  .agente-mic-btn {
    width: 96px; height: 96px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--eco-ink); color: #fff; display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 10px 30px rgba(10,10,10,.18);
    /* Prueba real en iPhone (2026-09-07 21:16): "se ve azul en Toca para
       hablar" -- el fondo en reposo YA es negro (var(--eco-ink)); lo que
       se veia era el highlight/foco azul por default de Safari al tocar
       un boton, sin -webkit-tap-highlight-color ni outline propios. */
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .agente-mic-btn:hover { transform: scale(1.04); }
  .agente-mic-btn:focus-visible { outline: 2px solid var(--eco-ink); outline-offset: 3px; }
  /* Item 5a (sesion autonoma 2026-09-07, pedido explicito de Edgar):
     negro en reposo (ya lo era, var(--eco-ink)), azul #2A5BFF SOLO
     mientras escucha, con pulso -- fuera el azul grisaceo (--eco-info,
     #3B4C7A) que tenia "hablando". Hex LITERAL, no var(--c-2a5bff): el
     rebranding monocromatico remapeo esa variable a negro (ver
     CONTINUIDAD.md), asi que la variable NO sirve para un azul real. */
  .agente-mic-btn.escuchando { background: #2A5BFF; animation: agente-pulso 1.4s ease-in-out infinite; }
  .agente-mic-btn.hablando { background: var(--eco-ink); }
  .agente-mic-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  @keyframes agente-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(42,91,255,.35); } 50% { box-shadow: 0 0 0 16px rgba(42,91,255,0); } }
  .agente-mic-btn svg { width: 34px; height: 34px; }
  .agente-reintento-btn, .agente-reproducir-btn {
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; color: #fff;
    background: var(--eco-ink); border: none; border-radius: 100px; padding: 6px 14px; margin-top: 8px;
    cursor: pointer; display: block;
  }

  .agente-estado { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--eco-body); text-align: center; min-height: 16px; }
  .agente-estado.activo { color: var(--eco-ink); }

  .agente-form { display: flex; gap: 8px; margin-top: 4px; }
  .agente-input {
    /* Prueba real en iPhone (2026-09-08, pedido explicito de Edgar):
       Safari hace zoom automatico del viewport al enfocar un input/
       textarea con font-size menor a 16px -- nunca se resuelve con
       maximum-scale en el viewport (eso rompe el pellizco-para-zoom real
       del usuario, un problema de accesibilidad). 16px es el minimo
       real que evita el zoom, sin tocar el meta viewport. */
    flex: 1; border: 1px solid var(--eco-border); border-radius: 100px; padding: 12px 16px; font-size: 16px;
    font-family: 'Inter', sans-serif; background: #fff; color: var(--eco-ink);
  }
  .agente-input:focus { outline: none; border-color: var(--eco-ink); }
  .agente-send-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--eco-ink); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .agente-send-btn:disabled { opacity: .4; cursor: not-allowed; }

  .agente-nota { font-size: 11.5px; color: var(--eco-muted); text-align: center; margin-top: 16px; line-height: 1.5; }

  /* ── Columna derecha: transcripcion ── */
  .agente-transcript { background: #fff; border: 1px solid var(--eco-border); border-radius: 14px; min-height: 480px; max-height: 72vh; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
  .agente-msg { max-width: 84%; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
  .agente-msg.user { align-self: flex-end; background: var(--eco-ink); color: #fff; border-bottom-right-radius: 4px; }
  .agente-msg.agente { align-self: flex-start; background: var(--eco-surface); color: var(--eco-ink); border-bottom-left-radius: 4px; }
  .agente-msg.sistema { align-self: center; background: var(--eco-warn-bg); color: var(--eco-warn); font-size: 12.5px; text-align: center; border-radius: 10px; }

  .agente-lotes { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .agente-lote-card { border: 1px solid var(--eco-border); background: var(--eco-surface); border-radius: 10px; padding: 14px; }
  .agente-lote-ficha { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--eco-muted); margin-bottom: 4px; }
  .agente-lote-material { font-size: 13.5px; font-weight: 600; color: var(--eco-ink); margin-bottom: 8px; }
  .agente-lote-precio { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--eco-ink); }
  .agente-lote-precio span { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--eco-muted); font-weight: 600; }
  .agente-lote-vol { font-size: 12px; color: var(--eco-body); margin-top: 4px; }

  .agente-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 16px; }
  .agente-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--eco-muted); animation: agente-typing 1.2s ease-in-out infinite; }
  .agente-typing span:nth-child(2) { animation-delay: .15s; }
  .agente-typing span:nth-child(3) { animation-delay: .3s; }
  @keyframes agente-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

  .agente-empty { color: var(--eco-muted); font-size: 13.5px; text-align: center; margin: auto 0; }

/* HERO */
/* padding-top da aire real sobre el punto mas alto del arco -- el item
   central sube hasta -84px via translateY (no afecta la caja de layout,
   solo el render), asi que 64px de padding no bastaba: el arco quedaba
   pegado o por encima del nav al cargar. 132px cubre los -84px + ~48px
   de aire visible. */
.hero { padding: 132px 0 48px; }

/* W2 -- titular centrado, cargado arriba */
h1.hero-headline {
  text-align: center;
  font-size: clamp(35px, 6.4vw, 83px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--black);
  margin-bottom: 28px;
}
h1.hero-headline > span { display: block; color: var(--black); }
h1.hero-headline > span.is-indent { padding-left: 0.22em; }
h1.hero-headline .is-underline {
  text-decoration: underline;
  text-underline-offset: 0.08em;
  text-decoration-thickness: 0.05em;
}

.hero-sub {
  max-width: 52ch;
  margin: 0 auto 56px;
  text-align: center;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  color: #6B6B6B;
  line-height: 1.5;
}

/* W4 -- las 3 cifras se movieron a .problem-section, mismas clases */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}
.stat-figure { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.stat-title { font-size: 13px; font-weight: 700; margin-top: 6px; }
.stat-line { font-size: 12px; color: var(--gray-500); margin-top: 4px; line-height: 1.4; }

/* W3 -- bloque de entrada con puerta de datos */
.gate-block {
  max-width: 920px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--eco-border, var(--gray-200));
  border-radius: 18px;
  overflow: hidden;
}
.gate-form { padding: 24px; border-bottom: 1px solid var(--eco-border, var(--gray-200)); }
.gate-fields {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.gate-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gate-field label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gray-500);
}
.gate-field input {
  border: 1px solid var(--eco-border, var(--gray-200));
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--black);
  background: var(--white);
  width: 100%;
}
.gate-field input:focus {
  outline: none;
  border-color: var(--blue, #2A5BFF);
  box-shadow: 0 0 0 3px rgba(42,91,255,0.12);
}
/* Validacion antes de enviar (JS agrega/quita .is-invalid por campo) --
   rojo solo en el/los campo(s) que faltan, no en todo el formulario. */
.gate-field.is-invalid label { color: #B3261E; }
.gate-field.is-invalid input { border-color: #B3261E; }
.gate-field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(179,38,30,0.12); }
.gate-submit {
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease;
}
.gate-submit:hover { opacity: .88; }
.gate-submit:disabled { opacity: .5; cursor: default; }
.gate-form-error { font-size: 12.5px; color: #B3261E; padding: 12px 24px 0; }

.gate-columns {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
}
.gate-columns.is-locked .gate-col { opacity: .34; pointer-events: none; }
.gate-col { padding: 24px; min-width: 0; }
/* El bloque quedaba muy alto -- reducir SOLO aqui (el .gate-col-agent del
   home), sin tocar la regla base .agente-transcript que tambien usa
   /agente/index.html standalone (esa pagina no fue parte de este pedido). */
.gate-col-agent .agente-transcript { min-height: 260px; max-height: 44vh; padding: 18px; }
.gate-col-agent .agente-mic-btn { width: 72px; height: 72px; }
.gate-col-agent .agente-mic-btn svg { width: 26px; height: 26px; }
.gate-col-agent .agente-mic-wrap { margin-bottom: 14px; }
.gate-divider { background: var(--eco-border, var(--gray-200)); }

.gate-lock-note {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border: 1px solid var(--eco-border, var(--gray-200));
  border-radius: 100px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600);
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(10,10,10,0.06);
}
.gate-columns.is-locked .gate-lock-note { display: block; }

.scanner-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-500);
  margin-bottom: 6px;
}
.scanner-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 20px; }

.drop-zone {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1.5px dashed var(--gray-200);
  border-radius: 16px;
  background: var(--white);
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.drop-zone:hover { border-color: var(--black); }
.drop-zone.has-image { border-style: solid; padding: 0; }
.drop-zone.drag-over { border-color: var(--black); background: var(--gray-100); }

#dropZoneEmpty {
  min-height: 172px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}

.drop-zone-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; font-size: 18px; color: var(--gray-500);
}
.drop-zone-text { font-size: 13.5px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
.drop-zone-subtext { font-size: 12px; color: var(--gray-500); }

.preview-wrap { position: relative; }
.preview-img { width: 100%; height: 220px; object-fit: cover; display: block; }
.preview-filename {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(10,10,10,0.75), transparent);
  color: var(--white); font-size: 11.5px; font-weight: 500;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

input[type="file"] { display: none; }

.change-image-link {
  display: inline-flex;
  margin-top: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-500);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.change-image-link:hover { color: var(--black); }

/* CTA — always solid black, maximum prominence, same treatment as nav CTA */
.scan-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--black); color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px; font-weight: 700;
  padding: 16px 20px; margin-top: 16px;
  border: none; border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.scan-submit:hover { transform: translateY(-1px); opacity: 0.92; }
.scan-submit:active { transform: translateY(0); }
.scan-submit svg { width: 16px; height: 16px; }

.scanner-note { font-size: 10.5px; color: var(--gray-400); text-align: center; margin-top: 14px; }

/* N3 (2026-09-10, pedido de hace tiempo que nunca se ejecuto): en pantallas
   de escritorio realmente anchas, .gate-block se quedaba fijo en 920px con
   mucho aire blanco a los lados mientras el nav (.wrap) ya llega a 1280px --
   el bloque no llegaba ni cerca del ancho real disponible. SOLO arriba de
   1600px (laptop chica tipica, 1280-1440px, y movil quedan sin cambios) el
   bloque crece hasta el mismo ancho que usa el nav: borde izquierdo con el
   logo, derecho con "Mi Ecohero". El texto NUNCA se estira con el
   contenedor -- se limita a max-width:70ch en cada elemento de texto (los
   titulos/leyendas quedan alineados a la izquierda tal como ya estaban,
   asi que el limite simplemente deja aire a la derecha; .scanner-note SI
   necesita margin-inline:auto porque su texto va centrado). El espacio
   extra que gana el bloque va al drop-zone/imagen (ya es width:100% de su
   columna, crece solo) y al padding de cada columna. */
@media (min-width: 1600px) {
  /* .gate-block vive dentro de .hero .wrap, que SI tiene padding:0 24px
     (a diferencia de .nav-inner, que pisa ese padding a 0 -- por eso el
     logo/CTA del nav llegan hasta el borde exterior real de .wrap). Para
     que el bloque alinee con ese mismo borde exterior (no con el borde
     interior, 24px mas adentro), se extiende exactamente esos 24px de
     mas por lado con calc()/margen negativo -- no es un numero magico,
     es el padding de .wrap.*/
  .gate-block {
    max-width: 1280px;
    width: calc(100% + 48px);
    margin-inline: -24px;
  }
  .gate-col { padding: 40px; }
  .scanner-title, .scanner-eyebrow, .drop-zone-text, .drop-zone-subtext {
    max-width: 70ch;
  }
  .scanner-note { max-width: 70ch; margin-inline: auto; }
  .gate-col-agent .agente-msg { max-width: 70ch; }
}

/* SCAN ERROR — validacion rechazada (imagen no es residuo / es un anuncio) o
   fallo de red/servidor, mostrado justo debajo del boton de envio. */
.scan-error {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--c-fef2f2);
  border: 1px solid var(--c-fca5a5);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--c-b91c1c);
  line-height: 1.4;
}

/* Codigo de referencia discreto (Bloque P, 2026-09-01) -- solo aparece
   cuando el backend lo manda (excepcion no manejada del pipeline). El
   usuario no necesita entender que significa, solo poder copiarlo si
   soporte se lo pide -- por eso mas chico/tenue que el mensaje principal. */
.scan-error-id {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--c-b91c1c);
  opacity: 0.65;
  user-select: all;
}

/* Boton "Reintentar" (2026-09-10, N1 item 4) -- solo aparece en el timeout
   del cliente y en el fallo terminal de runScanPlain(), reusa .scan-result-btn
   pero sin flex:1 (aqui no vive dentro de .scan-result-actions). */
.scan-error-retry {
  margin-top: 10px;
  display: inline-flex;
  width: auto;
  padding: 9px 16px;
}

/* SCAN PROGRESS — indicador por etapas durante el escaneo (2026-08-25).
   Cada check se enciende cuando llega el evento SSE real de esa etapa,
   nunca por temporizador -- ver runScanStream() en script.js. */
.scan-progress {
  margin-top: 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: var(--white);
}
.scan-progress-row { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; }
.scan-progress-row + .scan-progress-row { border-top: 1px solid var(--gray-100); }
.scan-progress-icon {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.scan-progress-icon svg { width: 10px; height: 10px; }
.scan-progress-icon.pending { border: 1.5px solid var(--gray-200); color: transparent; }
.scan-progress-icon.active { border: 1.5px solid var(--black); position: relative; color: transparent; }
.scan-progress-icon.active::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--black);
  animation: scan-progress-spin 0.85s linear infinite;
}
@keyframes scan-progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scan-progress-icon.active::after { animation: none; border-color: var(--black); }
}
.scan-progress-icon.done { background: var(--c-1e7d4f); border: 1.5px solid var(--c-1e7d4f); color: var(--c-fff); }
.scan-progress-label { font-size: 12.5px; font-weight: 600; color: var(--gray-400); }
.scan-progress-row.is-active .scan-progress-label,
.scan-progress-row.is-done .scan-progress-label { color: var(--black); }
.scan-progress-warn {
  display: none; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  background: var(--c-fbf3ea); color: var(--c-b5651d); font-size: 11px; font-weight: 600; line-height: 1.5;
}
.scan-progress-warn.visible { display: flex; }

/* SCAN RESULT — ficha resumida que aparece tras un escaneo exitoso, mismo
   lenguaje visual que el mockup .wap-* de la seccion "Una sola vision". */
.scan-result {
  margin-top: 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
}
.scan-result-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.scan-result-emoji { font-size: 22px; line-height: 1; }
.scan-result-material { font-size: 14.5px; font-weight: 700; color: var(--black); }
.scan-result-tipo { font-size: 11.5px; color: var(--gray-500); margin-top: 1px; }
.scan-result-body { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scan-result-value-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); margin-bottom: 3px; }
.scan-result-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); }
.scan-result-value.na { color: var(--gray-400); font-size: 14px; font-weight: 600; }
.scan-result-actions { padding: 0 16px 16px; display: flex; gap: 8px; }
.scan-result-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: none; transition: transform 0.1s ease, opacity 0.1s ease;
}
.scan-result-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.scan-result-btn.primary { background: var(--black); color: var(--white); }
.scan-result-btn.secondary { background: var(--gray-100); color: var(--black); border: 1px solid var(--gray-200); }
.scan-result-restart {
  display: block; width: 100%; text-align: center;
  font-size: 11.5px; font-weight: 600; color: var(--gray-500);
  text-decoration: underline; text-underline-offset: 2px;
  padding: 12px 16px 16px; cursor: pointer;
}
.scan-result-restart:hover { color: var(--black); }

/* LEAD MODAL — captura de contacto antes de descargar/compartir, mismo
   momento "value first" que ya usa Usuario Casual en la app interna. */
.lead-modal-overlay {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(10,10,10,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.lead-modal {
  background: var(--white);
  border-radius: 18px;
  width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
  padding: 28px;
}
.lead-modal-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.lead-modal-sub { font-size: 12.5px; color: var(--gray-500); margin-bottom: 20px; line-height: 1.4; }
.lead-field { margin-bottom: 12px; }
.lead-field label { display: block; font-size: 11px; font-weight: 700; color: var(--gray-600); margin-bottom: 5px; }
.lead-field input, .lead-field select {
  /* Bloque F1 (sesion 2026-09-09, pedido explicito de Edgar): Safari en
     iOS hace zoom automatico al enfocar un campo con font-size <16px --
     16px es el minimo real que lo evita, sin tocar el meta viewport. */
  width: 100%; font-family: 'Inter', sans-serif; font-size: 16px;
  padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: 9px;
  background: var(--white); color: var(--black);
}
.lead-field select { cursor: pointer; }
.lead-field input:focus, .lead-field select:focus { outline: none; border-color: var(--black); }
.lead-field-row { display: flex; gap: 8px; }
.lead-field-row .lead-field:first-child { width: 118px; flex-shrink: 0; }
.lead-modal-error { font-size: 12px; color: var(--c-b91c1c); margin-bottom: 10px; }
.lead-modal-actions { display: flex; gap: 8px; margin-top: 18px; }
.lead-modal-cancel {
  flex: 1; background: var(--gray-100); color: var(--black); border: 1px solid var(--gray-200);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
}
.lead-modal-submit {
  flex: 2; background: var(--black); color: var(--white); border: none;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
}
.lead-modal-submit:disabled { opacity: 0.5; cursor: default; }

/* FICHA MODAL — ficha tecnica completa del material, se abre SIN pedir
   registro; solo Descargar/Compartir dentro de ella activan el lead-modal. */
.ficha-modal-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(10,10,10,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ficha-modal {
  background: var(--white);
  border-radius: 18px;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
}
.ficha-modal-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--white);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.ficha-modal-eyebrow { font-size: 11px; font-weight: 700; color: var(--gray-400); letter-spacing: 0.04em; margin-bottom: 3px; }
.ficha-modal-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--black); }
.ficha-modal-close {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-500);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ficha-modal-close:hover { background: var(--gray-100); color: var(--black); }

.ficha-photo-wrap { margin: 16px 24px 0; border-radius: 12px; overflow: hidden; }
.ficha-photo { display: block; width: 100%; height: 220px; object-fit: cover; }
.ficha-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 150px; padding: 0 16px; text-align: center;
  background: var(--gray-50); color: var(--gray-400); font-size: 13px;
  border-radius: 12px;
}

.ficha-modal-body { padding: 8px 24px 4px; }
.ficha-resumen { background: var(--gray-50); border-radius: 10px; padding: 14px 16px; margin: 8px 0 4px; }
.ficha-resumen:empty { display: none; margin: 0; padding: 0; }
.ficha-resumen-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 6px;
}
.ficha-resumen-text { font-size: 13.5px; line-height: 1.6; color: var(--black); }
/* Nota "todavia no se valido" (2026-08-29) -- mismo ambar que .ficha-badge.is-amber,
   pero como linea de texto (no pildora): el mensaje es una oracion completa,
   no una etiqueta corta. */
.ficha-resumen-nota-pendiente {
  font-size: 12.5px; line-height: 1.5; color: var(--c-b45309); background: var(--c-fffbeb);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.ficha-resumen-block-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue); margin: 10px 0 4px;
}
.ficha-resumen-block-label:first-of-type { margin-top: 0; }
.ficha-resumen-block-bullets { margin: 0; padding: 0 0 0 16px; list-style: disc; }
.ficha-resumen-block-bullets li { font-size: 13px; line-height: 1.55; color: var(--black); margin-bottom: 2px; }
.ficha-section { padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.ficha-section:last-child { border-bottom: none; }
.ficha-section-title {
  font-size: 12px; font-weight: 800; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.ficha-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.ficha-field { margin-bottom: 4px; }
.ficha-field-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray-400); margin-bottom: 2px;
}
.ficha-field-value { font-size: 13px; font-weight: 600; color: var(--black); line-height: 1.4; }
.ficha-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
}
.ficha-badge.is-green { background: var(--c-dcfce7); color: var(--c-15803d); }
.ficha-badge.is-amber { background: var(--c-fef3c7); color: var(--c-b45309); }
.ficha-badge.is-red { background: var(--c-fee2e2); color: var(--c-dc2626); }
.ficha-badge.is-neutral { background: var(--gray-100); color: var(--gray-500); }
.ficha-badge.is-purple { background: var(--c-f3efff); color: var(--c-7c3aed); }
.ficha-modal-actions {
  position: sticky; bottom: 0;
  background: var(--white);
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--gray-100);
}
.ficha-modal-actions-row { display: flex; gap: 8px; }
@media (max-width: 520px) {
  .ficha-grid { grid-template-columns: 1fr; }
}

/* PROBLEM SECTION (W4) -- lo que hoy vivia en el hero (enunciado del $1
   billon, 3 cifras, diagrama) se movio aqui. El diagrama usa las mismas
   figuras de contorno del arco (sprite compartido), no las formas
   abstractas de antes. */
/* padding-top mas chico que el bottom: se suma al padding-bottom de .hero
   justo arriba -- juntos daban demasiado blanco entre el gate-block y este
   encabezado. */
.problem-section { padding: 48px 0 96px; background: var(--white); }
.problem-headline {
  max-width: 26ch;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 48px;
}

.problem-diagram-box {
  margin-top: 56px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  padding: 40px 32px;
}
.problem-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.problem-diagram-node { display: flex; flex-direction: column; align-items: center; text-align: center; }
.problem-diagram-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray-500);
  margin-top: 16px;
}
.problem-diagram-label strong { display: block; color: var(--black); margin-top: 2px; }

.problem-diagram-cluster {
  position: relative;
  width: 100%;
  max-width: 160px;
  height: 100px;
  color: var(--gray-400);
}
.cluster-icon { position: absolute; height: 72px; width: auto; }
.cluster-icon-1 { left: 4px; top: 8px; transform: rotate(-12deg); z-index: 1; }
.cluster-icon-2 { left: 46px; top: -4px; transform: rotate(6deg); height: 58px; color: var(--gray-500); z-index: 2; }
.cluster-icon-3 { left: 66px; top: 18px; transform: rotate(-4deg); height: 64px; color: var(--black); z-index: 3; }

.problem-diagram-logo { width: 64px; height: 64px; }

.problem-diagram-weighted { position: relative; color: var(--black); }
.problem-diagram-weighted svg { height: 90px; width: auto; }
.problem-diagram-badge {
  position: absolute; top: -6px; right: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--black); color: var(--white);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.problem-diagram-arrow { display: flex; align-items: center; justify-content: center; }
.problem-diagram-arrow svg { width: 60px; height: auto; }

/* HOW IT WORKS */
.how-it-works {
  background: var(--gray-50);
  padding: 104px 0 120px;
}

.section-headline {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--black);
  margin-bottom: 80px;
}
.section-headline span { display: block; color: var(--black); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 72px;
}

.step-number {
  font-size: clamp(72px, 9vw, 140px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--black);
  text-stroke: 1.5px var(--black);
  margin-bottom: 8px;
}
.step-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 10px; color: var(--black);
}
.step-body {
  font-size: 15px; color: var(--gray-500);
  line-height: 1.55; max-width: 440px;
}

/* COMPARE (Without Ecohero / With Ecohero) */
.compare-panel { padding: 56px 0 88px; }
.compare-panel.is-alt { background: var(--gray-100); }

.compare-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-600);
  margin-bottom: 18px;
}
.compare-headline {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--black); max-width: 760px;
}

.compare-diagram-wrap {
  margin: 56px 0 16px;
  overflow-x: auto;
}
.compare-svg { display: block; width: 100%; height: auto; }
.compare-node-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  fill: var(--gray-500); text-anchor: middle;
}
.compare-node-label.is-strong { font-weight: 800; fill: var(--black); font-size: 11.5px; }
.compare-curve-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  fill: var(--gray-500); text-anchor: middle;
}

.compare-bullets { list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.compare-bullets li {
  display: flex; gap: 10px; align-items: flex-start; justify-content: flex-start;
  font-size: 14.5px; line-height: 1.5; color: var(--black); text-align: left;
}
.compare-bullets li .arrow { color: var(--black); flex-shrink: 0; }

/* VISION / HOW IT WORKS (EH Node + platform) */
.vision-section { padding: 56px 0 120px; background: var(--white); }
.vision-section .section-headline { margin-bottom: 32px; }
.vision-intro {
  font-size: clamp(17px, 2vw, 20px); font-weight: 500;
  color: var(--gray-600); max-width: 560px; line-height: 1.5;
}

.vision-visual { display: flex; align-items: center; gap: 48px; margin-top: 64px; }

.vision-node-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.vision-node-media { position: relative; width: 300px; }
.vision-node-svg, .vision-node-img { width: 100%; height: auto; display: block; }
.vision-node-img { aspect-ratio: 600 / 384; }
.vision-node-detect { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vision-node-caption {
  margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-500);
}
.vision-connector-svg { flex: 1; min-width: 60px; height: 160px; }

/* Authentic app.ecohero.io — Waste Agent panel, compacted, same visual system as the real dashboard */
@keyframes wap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.wap-panel {
  position: relative;
  flex: 0 0 380px;
  font-family: 'DM Sans', sans-serif;
  padding-top: 14px;
}
.wap-inner {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10,10,10,0.14), 0 0 0 1px rgba(10,10,10,0.06);
}
.wap-live-badge {
  position: absolute; top: 0; right: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-f0fdf4); border: 1px solid var(--c-bbf7d0); border-radius: 100px;
  padding: 6px 12px;
}
.wap-live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-16a34a); animation: wap-pulse 2s infinite; }
.wap-live-badge span { font-size: 9.5px; font-weight: 700; color: var(--c-16a34a); }

.wap-chrome { background: var(--c-1c1c1e); padding: 9px 12px; display: flex; align-items: center; gap: 10px; }
.wap-dots { display: flex; gap: 5px; }
.wap-dot { width: 8px; height: 8px; border-radius: 50%; }
.wap-dot.r { background: var(--c-ff5f57); } .wap-dot.y { background: var(--c-febc2e); } .wap-dot.g { background: var(--c-28c840); }
.wap-url {
  flex: 1; text-align: center; background: rgba(255,255,255,0.1); border-radius: 6px;
  padding: 3px 10px; font-size: 9px; color: rgba(255,255,255,0.5); font-family: monospace;
}

.wap-body { background: var(--c-fff); padding: 14px 16px; }
.wap-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; color: var(--c-111); margin-bottom: 12px; }
.wap-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-2a5bff); animation: wap-pulse 2s infinite; }

.wap-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-e4e2dc); border: 1px solid var(--c-e4e2dc); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.wap-kpi { background: var(--c-fff); padding: 9px 10px; }
.wap-kpi-label { font-size: 6.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-aaaaaa); margin-bottom: 3px; }
.wap-kpi-value { font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--c-111); line-height: 1; }
.wap-kpi-value.blue { color: var(--c-2a5bff); }
.wap-kpi-value.green { color: var(--c-16a34a); }

.wap-table { background: var(--c-fff); border: 1px solid var(--c-e4e2dc); border-radius: 10px; overflow: hidden; }
.wap-table-head {
  padding: 7px 12px; border-bottom: 1px solid var(--c-f0efeb);
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-aaaaaa);
}
.wap-table-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--c-f5f4f0); font-size: 10.5px; color: var(--c-333); }
.wap-table-row:last-child { border-bottom: none; }
.wap-material { display: flex; align-items: center; gap: 6px; }
.wap-ia-badge { font-size: 7.5px; font-weight: 700; padding: 2px 6px; border-radius: 100px; background: var(--c-dcfce7); color: var(--c-15803d); }
.wap-val { font-weight: 700; color: var(--c-111); }

/* VALUE PROPS (Tres formas de generar valor) */
.value-section { padding: 104px 0 112px; background: var(--gray-100); }
.value-section .section-headline { margin-bottom: 20px; }
.value-subheadline {
  font-size: clamp(16px, 1.8vw, 19px); font-weight: 500;
  color: var(--gray-600); max-width: 640px; line-height: 1.55;
  margin-bottom: 56px;
}

.value-cards { display: flex; flex-direction: column; min-width: 0; }
.value-card {
  border-top: 1px solid var(--gray-200);
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  min-width: 0;
}
.value-card:last-child { border-bottom: 1px solid var(--gray-200); }
.value-card > * { min-width: 0; }

.value-tag {
  display: inline-block; padding: 6px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 20px; max-width: 100%;
}
.value-tag.is-solid { background: var(--c-2a5bff); color: var(--c-ffffff); }
.value-tag.is-outline { background: transparent; border: 1.5px solid var(--c-2a5bff); color: var(--c-2a5bff); padding: 4.5px 12.5px; }
.value-tag.is-tint { background: rgba(42, 91, 255, 0.12); color: var(--c-0a0a0a); }

.value-card-title {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.01em;
  color: var(--black); line-height: 1.25; margin-bottom: 14px;
  overflow-wrap: break-word;
}
.value-card-desc {
  font-size: 14.5px; color: var(--gray-600); line-height: 1.65; max-width: 520px;
  overflow-wrap: break-word;
}

.value-stats {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200);
  min-width: 0;
}
.value-stats li { font-size: 14.5px; color: var(--gray-600); line-height: 1.5; overflow-wrap: break-word; }
.value-stats li strong { color: var(--black); font-weight: 800; }

.value-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 24px; padding: 10px 18px; border-radius: 100px;
  border: 1.5px solid var(--blue); color: var(--blue);
  background: transparent; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.value-card-cta:hover { background: var(--blue); color: var(--white); }

/* CONTACT */
.contact-section { padding: 96px 0 112px; background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.contact-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 18px;
}
.contact-headline {
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.contact-headline span { display: block; font-weight: 800; color: var(--black); }
.contact-headline span.is-serif-italic {
  font-family: 'DM Serif Display', serif; font-style: italic; font-weight: 400;
  color: var(--blue);
}
.contact-sub { font-size: 17px; color: var(--gray-600); line-height: 1.55; max-width: 480px; margin-bottom: 40px; }
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 100px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.contact-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.contact-btn.primary { background: var(--black); color: var(--white); }
.contact-btn.secondary { background: transparent; color: var(--black); border: 1.5px solid var(--gray-200); }
.contact-investor-note { font-size: 13.5px; color: var(--gray-500); }
.contact-investor-note a { color: var(--gray-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.contact-investor-note a:hover { color: var(--blue); }

/* FAQ */
.faq-section { padding: 104px 0 120px; background: var(--white); }
.faq-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; margin-bottom: 56px;
}
.faq-header .section-headline { margin-bottom: 0; }
.faq-contact { font-size: 13.5px; color: var(--gray-500); max-width: 300px; line-height: 1.5; text-align: right; }
.faq-contact a { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq-contact a:hover { color: var(--c-2a5bff); }

.faq-list { display: flex; flex-direction: column; min-width: 0; }
.faq-item {
  display: grid; grid-template-columns: 56px 1fr 1.7fr; gap: 28px;
  padding: 28px 0; border-top: 1px solid var(--gray-200); align-items: baseline;
  min-width: 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--gray-200); }
.faq-item > * { min-width: 0; }
.faq-num { font-size: 13px; font-weight: 700; color: var(--gray-400); }
.faq-question { font-size: 18px; font-weight: 700; color: var(--black); line-height: 1.35; overflow-wrap: break-word; }
.faq-answer { font-size: 14.5px; color: var(--gray-600); line-height: 1.65; overflow-wrap: break-word; }

/* FOOTER */
.site-footer { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 64px 0 32px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px; min-width: 0;
}
.footer-grid > * { min-width: 0; }
.footer-brand-logo { height: 24px; width: auto; margin-bottom: 14px; }
.footer-tagline { font-size: 13.5px; color: var(--gray-500); line-height: 1.55; max-width: 260px; overflow-wrap: break-word; }

.footer-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-500); margin-bottom: 16px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-links a { font-size: 14px; color: var(--gray-600); overflow-wrap: break-word; }
.footer-links a:hover { color: var(--black); }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center; color: var(--gray-600); flex-shrink: 0;
}
.footer-social a:hover { border-color: var(--black); color: var(--black); }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom { border-top: 1px solid var(--gray-200); padding-top: 24px; }
.footer-bottom p { font-size: 12px; color: var(--gray-400); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero { padding: 36px 0 56px; }
  .gate-fields { grid-template-columns: 1fr 1fr; }
  .gate-columns { grid-template-columns: 1fr; }
  .gate-divider { height: 1px; }
  .gate-col { padding: 24px; }
  .hero-stats { grid-template-columns: 1fr; gap: 24px; }
  .problem-diagram-box { padding: 32px 24px; }
  .problem-diagram { grid-template-columns: 1fr; gap: 8px; }
  .problem-diagram-arrow svg { width: 64px; transform: rotate(90deg); }
  .problem-diagram-node .problem-diagram-label { margin-top: 12px; }
  .how-it-works { padding: 64px 0 72px; }
  .section-headline { margin-bottom: 48px; }
  .steps-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .step-number { font-size: clamp(52px, 16vw, 84px); }
  .compare-panel { padding: 64px 0 56px; }
  .compare-svg { width: auto; min-width: 820px; }
  .vision-section { padding: 64px 0 72px; }
  .vision-visual { flex-direction: column; gap: 40px; }
  .vision-connector-svg { display: none; }
  .wap-panel { flex-basis: auto; width: 100%; max-width: 400px; }
  .value-section { padding: 64px 0 72px; }
  .value-card { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
  .faq-section { padding: 64px 0 72px; }
  .faq-header { align-items: flex-start; }
  .faq-contact { text-align: left; max-width: 100%; }
  .faq-item { grid-template-columns: 40px 1fr; row-gap: 8px; column-gap: 16px; padding: 22px 0; }
  .faq-answer { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  h1.hero-headline { font-size: 35px; }
  .brand-logo { height: 22px; }
  .nav-cta span.full { display: none; }
  .gate-form, .gate-col { padding: 18px; }
  .gate-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nav-right { gap: 14px; }
  .section-headline { font-size: 36px; }
  .vision-node-media { width: 240px; }
}