/* ── LANDING HELPMEET v2 — stylesheet ── */
:root {
  /* Dark = "Modo Oscuro Cálido" — matches the Helpmeet app (warm brown, not green-black) */
  --green: #52c494;
  --green-soft: #77d6ae;
  --green-deep: #2b7d5b;
  --green-glow: rgba(82,196,148,.22);
  --bg: #26201b;
  --bg-2: #26201b00;
  --panel: #2f2822;
  --panel-2: #332b24;
  --panel-3: #3a322a;
  --line: rgba(240,232,220,.09);
  --line-strong: rgba(240,232,220,.18);
  --text: #f3eee6;
  --text-dim: #d4ccc0;
  /* #a89f91 daba 4.39:1 sobre el fondo — por debajo del 4.5:1 que WCAG 2.2 AA
     exige para texto normal, y --muted se usa en metadatos, descripciones de
     plan y specs, todos por debajo de 18px. #b3aa9c sube a 5.0:1 sin perder la
     jerarquia respecto a --text-dim. */
  --muted: #b3aa9c;
  /* #8d8376 daba 4.32:1. Se usa en los numeradores de las tarjetas y en labels
     de 10-11px, el texto mas pequeno de la pagina: es justo donde menos margen
     hay para quedarse corto. */
  --muted-2: #9a9082;
  --danger: #ff6b6b;
  --amber: #febc2e;
  /* Las mismas tres familias que la app, con los mismos papeles: serif para los
     títulos, Plus Jakarta Sans para la interfaz y JetBrains Mono para los datos.
     Antes eran Syne + DM Sans, así que el sitio y el producto se leían como dos
     marcas distintas — quien llegaba desde la web abría la app y no reconocía
     nada. Georgia va de sistema: no se descarga y está en todas partes. */
  --font-head: Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', ui-monospace, monospace;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  /* Escala tipografica unica. Antes cada seccion inventaba su propio clamp y
     habia cinco tamanos de titular compitiendo: 96px en el hero, 84px en el CTA
     final, 72px en el costo, 60px en las secciones, 56px en las stats. El
     resultado era que nada destacaba porque todo gritaba, y a 1440px la pagina
     se leia como un cartel, no como un producto.

     Ahora hay tres niveles y solo tres. El techo baja a 60px: sigue siendo
     presencia de marca, pero ya convive con la escala de la app (11.5-22px
     segun GUIA_ESTANDAR_DISENO_HELPMEET) en lugar de contradecirla. */
  --t-display: clamp(34px, 4.6vw, 60px);
  --t-title:   clamp(26px, 3.1vw, 40px);
  --t-heading: clamp(19px, 1.8vw, 24px);
  --t-lead:    clamp(16px, 1.4vw, 19px);
  --t-body:    clamp(14.5px, 1vw, 16px);
  --t-small:   14px;
  --t-micro:   12px;
  --t-label:   11px;
  /* Los titulares grandes necesitan interlineado e interletraje mas cerrados
     que el texto; los pequenos, mas abiertos. Un solo valor para ambos deja los
     titulares sueltos o el cuerpo apretado. */
  --lh-display: 1.04;
  --lh-title: 1.1;
  --ls-display: -.028em;
  --ls-title: -.02em;
  --nav-bg: rgba(38,32,27,.80);
  --nav-bg-scrolled: rgba(38,32,27,.95);
  --on-green: #06281c;
  --hover-surface: rgba(255,250,240,.05);
  --noise-opacity: .40;
  --shadow-strong: rgba(0,0,0,.7);
  --inset-surface: rgba(0,0,0,.20);
  --inset-surface-strong: rgba(0,0,0,.30);
  --code-surface: #1b1815;
  color-scheme: dark;
}

/* ── LIGHT THEME ── */
:root[data-theme="light"] {
  color-scheme: light;
  --green: #2b7d5b;
  --green-soft: #24664b;
  --green-deep: #1a4b37;
  --green-glow: rgba(43,125,91,.16);
  --bg: #f4f7f5;
  --bg-2: #eef2f000;
  --panel: #ffffff;
  --panel-2: #f7faf8;
  --panel-3: #eef3f0;
  --line: rgba(43,125,91,.14);
  --line-strong: rgba(43,125,91,.30);
  --text: #12211a;
  --text-dim: #3f544a;
  /* Mismo caso que en oscuro: #63786d daba 4.39:1 sobre #f4f7f5, justo por
     debajo del 4.5:1 de AA. #5c6f65 lo sube a 4.9:1. */
  --muted: #5c6f65;
  /* #7d9188 daba 3.1:1, muy por debajo de AA para texto de 10-11px. */
  --muted-2: #607369;
  --nav-bg: rgba(244,247,245,.78);
  --nav-bg-scrolled: rgba(244,247,245,.94);
  --on-green: #ffffff;
  --hover-surface: rgba(43,125,91,.06);
  --noise-opacity: .28;
  --shadow-strong: rgba(20,50,38,.16);
  --inset-surface: rgba(43,125,91,.05);
  --inset-surface-strong: rgba(43,125,91,.08);
  --code-surface: #12211a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── NOISE ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: var(--noise-opacity);
}

/* El spotlight que seguia al raton y el anillo que sustituia al cursor se
   retiraron. Los dos son efectos de portafolio creativo, no de pagina de
   producto: el anillo personalizado degrada la precision percibida del puntero
   justo donde el usuario va a hacer clic para comprar, y el spotlight obligaba
   a repintar una capa a pantalla completa en cada movimiento del raton.
   Nada de esto comunicaba una sola cosa sobre Helpmeet. */

a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--green); color: var(--bg); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; top: -100px; left: 12px; z-index: 10001; background: var(--green); color: var(--on-green); font-family: var(--font-head); font-weight:400; font-size: 13px; padding: 10px 16px; border-radius: 8px; transition: top .2s var(--ease-out); }
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── LOADER ── */
.loader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .6s var(--ease-out), visibility .6s; }
.loader.hide { opacity: 0; visibility: hidden; }
.loader-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(.88); opacity:.6; } }

/* ── NAV ── */
header { position: relative; z-index: 100; }
nav { position: fixed; top:0; left:0; right:0; z-index:100; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:var(--nav-bg); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid transparent; transition:height .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out); }
nav.scrolled { height:60px; background:var(--nav-bg-scrolled); border-bottom-color:var(--line-strong); }
.nav-actions { display:flex; align-items:center; gap:12px; }
.lang-switcher { display:flex; align-items:center; gap:0; }
.lang-btn { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.5px; color:var(--muted); background:none; border:none; padding:4px 6px; cursor:pointer; transition:color .2s; line-height:1; }
.lang-btn:hover { color:var(--text); }
.lang-btn.active { color:var(--green); }
.lang-sep { font-size:11px; color:var(--line-strong); user-select:none; }
.theme-toggle { position:relative; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--text-dim); border:1px solid var(--line-strong); background:var(--panel); flex-shrink:0; overflow:hidden; transition:color .25s, border-color .25s, background .25s, transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.theme-toggle:hover { color:var(--green); border-color:var(--green); background:var(--green-glow); transform:translateY(-1px); box-shadow:0 6px 18px -8px var(--green-glow); }
.theme-toggle:active { transform:translateY(0) scale(.94); }
.theme-toggle svg { position:absolute; transition:opacity .3s var(--ease-out), transform .4s var(--ease-out); }
.theme-toggle .icon-sun { opacity:0; transform:rotate(-90deg) scale(.4); }
.theme-toggle .icon-moon { opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-sun { opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity:0; transform:rotate(90deg) scale(.4); }
.nav-logo { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:18px; font-weight:400; letter-spacing:-.01em; color:var(--text); padding:8px; margin-left:-8px; border-radius:8px; }
.nav-logo-dot { width:32px; height:32px; border-radius:8px; background:var(--panel); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); flex-shrink:0; }
.nav-logo-dot svg { width:20px; height:20px; }
.nav-links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav-link { display:inline-flex; align-items:center; font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--text-dim); padding:10px 14px; min-height:44px; border-radius:8px; transition:color .2s, background .2s; }
.nav-link:hover { color:var(--text); background:var(--hover-surface); }
.nav-link:active { background:var(--hover-surface); }
@media (max-width:900px) { .nav-links { display:none; } }
.nav-cta { display:inline-flex; align-items:center; gap:8px; background:var(--green); color:var(--on-green); font-family:var(--font-head); font-size:13.5px; font-weight:400; padding:10px 18px; min-height:44px; border-radius:10px; transition:transform .2s var(--ease-out), box-shadow .25s var(--ease-out), background .2s; position:relative; border:1px solid var(--green); }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(52,199,138,.6); background:var(--green-soft); }
.nav-cta:active { transform:translateY(0); }

/* ── SECTIONS ── */
section, .band { position:relative; z-index:2; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
/* 160px arriba y abajo entre secciones consecutivas producia hasta 240px de
   vacio y estiraba la pagina a mas de 18.000px. Con la tipografia ya reducida,
   ese aire dejaba bloques flotando sin relacion visual entre si. */
.section { padding:112px 0; }
.section + .section { padding-top:56px; }
.section-label { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); margin-bottom:20px; }
.section-label::before { content:''; width:20px; height:1px; background:var(--green); }
.section-title { font-family:var(--font-head); font-size:var(--t-title); font-weight:400; line-height:var(--lh-title); letter-spacing:var(--ls-title); margin-bottom:18px; text-wrap:balance; }
.section-title em { font-style:normal; color:var(--green); }
/* weight 300 en Plus Jakarta a 15px se rompe en pantallas no-retina: los trazos
   quedan por debajo de un pixel y el texto se ve gris lavado en vez de gris. */
.section-sub { font-size:var(--t-lead); color:var(--text-dim); max-width:600px; line-height:1.6; font-weight:400; text-wrap:pretty; }
@media (max-width:640px) { .section { padding:72px 0; } .section + .section { padding-top:44px; } .sec-head { margin-bottom:36px; } }

/* ── HERO ── */
.hero { min-height:100vh; padding:calc(68px + clamp(48px,8vh,92px)) 24px 0; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; }
/* Fondo del hero.

   Antes: tres anillos girando a 22s/34s/46s, un orbe que respiraba y flotaba, y
   dos satelites en orbita. Seis animaciones infinitas simultaneas detras del
   texto. Ese conjunto — orbe con blur verde + anillos concentricos girando — es
   el fondo por defecto de practicamente todo landing generado por IA desde
   2023, y era la razon principal de que la pagina "oliera a IA".

   Tampoco encajaba con el producto: Helpmeet es una app de escritorio local
   para trabajo real, y el fondo prometia una IA cosmica y etérea.

   Ahora: una reticula tecnica estatica, del mismo lenguaje visual que un
   editor de codigo o una linea de tiempo de audio. Comunica precision en vez
   de magia, no compite con el titular, y no consume GPU de forma permanente. */
.hero-bg { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 78%);
}
/* Una sola linea de acento que ancla el titular al mock de la app. Sustituye a
   los tres anillos: misma funcion de "hay algo vivo aqui", una sola forma. */
.hero-rule {
  position:absolute; left:50%; top:0; translate:-50% 0;
  width:1px; height:100%;
  background:linear-gradient(to bottom, transparent, var(--line-strong) 30%, transparent);
  opacity:.7;
}
.hero-content { position:relative; z-index:2; width:100%; max-width:820px; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; background:rgba(52,199,138,.08); border:1px solid rgba(52,199,138,.28); border-radius:999px; padding:7px 16px 7px 12px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.7px; color:var(--green); margin-bottom:clamp(26px,3.5vh,38px); text-transform:uppercase; line-height:1.2; max-width:100%; }
.hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 var(--green); animation:ripple 1.8s ease-out infinite; flex-shrink:0; }
@keyframes ripple { 0% { box-shadow:0 0 0 0 rgba(52,199,138,.55); } 100% { box-shadow:0 0 0 8px rgba(52,199,138,0); } }
/* Sin max-width en ch: el <br> del copy ya decide donde parte el titular, y un
   limite de 15ch lo forzaba a una tercera linea partiendo "Lo que se dijo / en
   la reunion". text-wrap:balance se encarga del resto cuando no hay <br>. */
.hero-title { font-family:var(--font-head); font-size:var(--t-display); font-weight:400; line-height:var(--lh-display); letter-spacing:var(--ls-display); margin:0 0 clamp(18px,2.4vh,26px); max-width:20ch; text-wrap:balance; }
.hero-title em { font-style:normal; color:var(--green); }
/* Máscara por palabra para la entrada del titular. El contenedor recorta y la
   palabra sube desde abajo, así que aparece "desde detrás" de la línea en vez
   de desvanecerse. padding-bottom + margen negativo evitan que el recorte corte
   las descendentes (j, g, p, q) de Georgia. */
.hero-title .w-mask { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.hero-title .w-in { display:inline-block; will-change:transform; }
/* El lead pasa de serif 32px a sans 19px. Antes competia con el h1 por ser la
   misma familia a un tamano cercano, y el ojo no sabia cual leer primero.
   Cambiando de familia la jerarquia queda clara sin depender del tamano. */
.hero-lead { font-family:var(--font-body); font-size:var(--t-lead); font-weight:500; line-height:1.45; letter-spacing:0; color:var(--text-dim); margin:0 0 clamp(24px,3vh,32px); max-width:46ch; }
.hero-lead .lead-em { color:var(--text); font-weight:600; }
.hero-desc { font-family:var(--font-body); font-size:var(--t-body); color:var(--muted); max-width:560px; margin:0 auto clamp(26px,3.2vh,34px); font-weight:400; line-height:1.6; text-wrap:pretty; }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(20px,2.6vh,28px); }
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-head); font-weight:400; padding:14px 24px; min-height:48px; border-radius:12px; transition:transform .2s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, border-color .2s; cursor:pointer; line-height:1.15; white-space:nowrap; }
.btn.primary { background:var(--green); color:var(--on-green); font-size:15px; border:1px solid var(--green); box-shadow:0 12px 32px -14px rgba(52,199,138,.55); }
.btn.primary:hover { transform:translateY(-2px); background:var(--green-soft); box-shadow:0 18px 40px -12px rgba(52,199,138,.7); }
.btn.primary:active { transform:translateY(0); }
.btn.ghost { background:transparent; color:var(--text); font-size:15px; border:1px solid var(--line-strong); }
.btn.ghost:hover { border-color:var(--green); background:rgba(52,199,138,.06); color:var(--green); }
.btn.ghost:active { background:rgba(52,199,138,.1); }
.hero-micro { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:.3px; line-height:1.5; max-width:640px; margin:0 auto; }
.hero-app { margin:clamp(32px,5vh,56px) auto 0; max-width:1080px; width:100%; position:relative; z-index:2; perspective:1600px; padding-bottom:60px; }
.hero-app::after { content:''; position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--bg)); }
/* La inclinación pasa de valor fijo a variables que controla el puntero.
   Los valores por defecto reproducen el rotateX(4deg) original, así que sin
   JS —o en táctil, o con reduced motion— la ventana se ve exactamente como
   antes. El ratón solo modula algo que ya existía. */
.app-wrap {
  position:relative;
  transform-origin:center bottom;
  transform:
    perspective(1600px)
    rotateX(calc(4deg + var(--tilt-x, 0deg)))
    rotateY(var(--tilt-y, 0deg))
    scale(var(--tilt-scale, 1));
  will-change:transform;
}

/* ── Reflejo de cristal ──
   Una banda de luz que cruza la ventana siguiendo al puntero. Es lo que
   convierte el mock de "imagen de una app" en "objeto con superficie": el
   cristal responde a la luz según desde dónde lo miras.

   Va DENTRO de la ventana, no flotando sobre la página — esa es la diferencia
   con el spotlight que retiramos: aquel seguía al ratón por todo el fondo sin
   decir nada del producto. */
.app-window { position:relative; }
.app-window::after {
  content:'';
  position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:inherit;
  opacity:var(--sheen-opacity, 0);
  transition:opacity .45s var(--ease-out);
  background:radial-gradient(
    460px circle at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(255,255,255,.09), transparent 62%);
  mix-blend-mode:soft-light;
}
:root[data-theme="light"] .app-window::after {
  background:radial-gradient(
    460px circle at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(43,125,91,.10), transparent 62%);
  mix-blend-mode:multiply;
}

/* ── Zoom de inspección sobre el dock ──
   Al acercar el puntero al dock de grabación, este se agranda y se levanta.
   No es un zoom decorativo: acerca justo la parte donde la transcripción se
   está escribiendo, que es lo que queremos que el visitante lea. El ratón
   inspecciona el producto en lugar de pintar sobre él. */
.ap-dock {
  transform:scale(var(--dock-scale, 1)) translateY(var(--dock-lift, 0px));
  transform-origin:center bottom;
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease-out), border-color .38s;
  will-change:transform;
}
.hero-app.is-inspecting .ap-dock {
  --dock-scale:1.045;
  --dock-lift:-6px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.72);
  border-color:rgba(52,199,138,.42);
}
/* Mientras se inspecciona el dock, el resto de la ventana cede protagonismo. */
.hero-app.is-inspecting .ap-body { opacity:.55; }
.ap-body { transition:opacity .38s var(--ease-out); }

@media (max-width:900px) {
  /* En táctil no hay puntero que seguir: la ventana vuelve a estar plana y sin
     reflejo, y el dock no se agranda. */
  .app-wrap { transform:none; }
  .app-window::after { display:none; }
  .ap-dock { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .app-wrap { transform:rotateX(4deg); transition:none; }
  .app-window::after { display:none; }
  .ap-dock, .ap-body { transform:none; transition:none; opacity:1; }
}
.app-window { background:var(--panel); border:1px solid var(--line-strong); border-radius:16px; box-shadow:0 60px 140px -30px var(--shadow-strong), 0 0 100px -20px rgba(52,199,138,.14), inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden; }
.app-tb { height:40px; background:var(--inset-surface-strong); display:flex; align-items:center; padding:0 16px; gap:8px; border-bottom:1px solid var(--line); }
.app-dot { width:11px; height:11px; border-radius:50%; }
.app-dot.r { background:#ff5f57; } .app-dot.y { background:#febc2e; } .app-dot.g { background:var(--green); }
.app-title { margin:0 auto; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.app-body { display:grid; grid-template-columns:220px 1fr 260px; min-height:460px; }
.app-side { background:var(--inset-surface); padding:20px 14px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.app-side-label { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--muted-2); text-transform:uppercase; padding:4px 10px; margin-bottom:6px; }
.app-side-item { padding:8px 10px; border-radius:8px; font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; gap:10px; transition:background .2s, color .2s; }
.app-side-item:hover { background:var(--hover-surface); color:var(--text); }
.app-side-item.on { background:rgba(52,199,138,.10); color:var(--green); border:1px solid rgba(52,199,138,.2); }
.app-side-item .pd { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.app-side-item .count { margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.app-main { padding:24px 28px; display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.app-meet-head { display:flex; align-items:center; gap:12px; }
.app-meet-title { font-family:var(--font-head); font-size:20px; font-weight:400; color:var(--text); }
.app-meet-time { font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:3px 9px; border:1px solid var(--line); border-radius:4px; }
.done-indicator { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(52,199,138,.10); border:1px solid rgba(52,199,138,.32); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.5px; color:var(--green); text-transform:uppercase; margin-left:auto; font-weight:600; }
.app-tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); }
.app-tab { font-size:12.5px; color:var(--muted); padding:0 0 10px; border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500; }
.app-tab.on { color:var(--green); border-color:var(--green); }
.app-utterances { display:flex; flex-direction:column; gap:14px; }
.utt { display:flex; gap:12px; align-items:flex-start; }
.utt-av { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; }
.utt-body { flex:1; font-size:13px; line-height:1.55; color:var(--text-dim); }
.utt-body .who { color:var(--text); font-size:11px; font-weight:600; margin-bottom:3px; font-family:var(--font-mono); }
.utt-body .who span { color:var(--muted); margin-left:6px; font-weight:400; }
.app-right { background:var(--inset-surface); border-left:1px solid var(--line); padding:20px 18px; display:flex; flex-direction:column; gap:18px; }
.mini-card { background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:14px; }
.mini-card-title { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mini-card-meta { display:inline-flex; align-items:center; gap:5px; color:var(--green); text-transform:uppercase; font-size:9.5px; }
.wave { position:relative; display:flex; align-items:center; justify-content:space-between; gap:3px; height:46px; overflow:visible; }
.wave span { flex:1; background:var(--green); border-radius:2px; height:20%; opacity:.28; transition:opacity .35s ease-out; }
.wave-play span { animation:barPlay 2.8s ease-in-out infinite; will-change:opacity; }
.wave-play span:nth-child(1){animation-delay:.05s} .wave-play span:nth-child(2){animation-delay:.15s} .wave-play span:nth-child(3){animation-delay:.26s} .wave-play span:nth-child(4){animation-delay:.37s} .wave-play span:nth-child(5){animation-delay:.47s} .wave-play span:nth-child(6){animation-delay:.58s} .wave-play span:nth-child(7){animation-delay:.68s} .wave-play span:nth-child(8){animation-delay:.79s} .wave-play span:nth-child(9){animation-delay:.90s} .wave-play span:nth-child(10){animation-delay:1.00s} .wave-play span:nth-child(11){animation-delay:1.11s} .wave-play span:nth-child(12){animation-delay:1.22s} .wave-play span:nth-child(13){animation-delay:1.32s} .wave-play span:nth-child(14){animation-delay:1.43s} .wave-play span:nth-child(15){animation-delay:1.54s} .wave-play span:nth-child(16){animation-delay:1.64s} .wave-play span:nth-child(17){animation-delay:1.75s} .wave-play span:nth-child(18){animation-delay:1.86s} .wave-play span:nth-child(19){animation-delay:1.96s} .wave-play span:nth-child(20){animation-delay:2.07s}
@keyframes barPlay { 0%,80%,100% { opacity:.28; } 4%,10% { opacity:1; } }
.wave-playhead { position:absolute; top:-3px; bottom:-3px; left:0; width:1.5px; background:var(--green); box-shadow:0 0 10px rgba(52,199,138,.75), 0 0 3px rgba(52,199,138,.9); animation:playhead 2.8s linear infinite; border-radius:1px; z-index:2; will-change:transform, opacity; }
@keyframes playhead { 0% { left:0%; opacity:0; } 2% { opacity:1; } 82% { opacity:1; left:100%; } 90%,100% { left:100%; opacity:0; } }
@media (prefers-reduced-motion:reduce) { .wave-play span { animation:none; opacity:.85; } .wave-playhead { animation:none; display:none; } }
.stat-mini { display:flex; justify-content:space-between; align-items:baseline; }
.stat-mini .n { font-family:var(--font-head); font-size:22px; font-weight:400; color:var(--green); }
.stat-mini .l { font-size:11px; color:var(--muted); }
.chip-list { display:flex; flex-wrap:wrap; gap:5px; }
.chip { background:rgba(52,199,138,.08); border:1px solid rgba(52,199,138,.2); color:var(--green); font-size:10.5px; padding:3px 8px; border-radius:4px; font-family:var(--font-mono); }
@media (max-width:900px) { .app-body { grid-template-columns:1fr; min-height:0; } .app-side, .app-right { display:none; } .app-wrap { transform:none; } }

/* ── TICKER ── */
.ticker-wrap { padding:18px 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(52,199,138,.02); position:relative; }
.ticker-wrap::before, .ticker-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.ticker-wrap::before { left:0; background:linear-gradient(to right, var(--bg), transparent); }
.ticker-wrap::after { right:0; background:linear-gradient(to left, var(--bg), transparent); }
.ticker-inner { display:flex; gap:56px; width:max-content; animation:tk 32s linear infinite; }
@keyframes tk { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ticker-item { white-space:nowrap; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); font-weight:500; letter-spacing:.3px; display:flex; align-items:center; gap:12px; }
.ticker-item::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.ticker-wrap:hover .ticker-inner { animation-play-state:paused; }

/* ── STATS ── */
.stats-wrap { border-bottom:1px solid var(--line); }
.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); max-width:1180px; margin:0 auto; }
.stat-cell { padding:48px 28px; border-left:1px solid var(--line); }
.stat-cell:first-child { border-left:none; }
/* Ahora son especificaciones, no cifras de impacto: bajan de --t-title a
   --t-heading y pierden el tratamiento de "numero gigante". */
.stat-num { font-family:var(--font-head); font-size:var(--t-heading); font-weight:400; color:var(--green); line-height:1.1; letter-spacing:-.01em; display:flex; align-items:baseline; gap:4px; }
.stat-lbl { font-family:var(--font-mono); font-size:var(--t-label); color:var(--muted); margin-top:8px; letter-spacing:.3px; line-height:1.5; }
@media (max-width:780px) { .stats-row { grid-template-columns:repeat(2, 1fr); } .stat-cell:nth-child(2) { border-left:1px solid var(--line); } .stat-cell:nth-child(3) { border-left:none; border-top:1px solid var(--line); } .stat-cell:nth-child(4) { border-top:1px solid var(--line); } }

/* ── HEADER GRID ── */
.sec-head { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:44px; }
@media (max-width:780px) { .sec-head { grid-template-columns:1fr; gap:20px; } }

/* ── HOW IT WORKS ── */
/* La columna del panel es mas estrecha que la de los pasos (0.85fr): el panel
   es un apoyo visual, la lista es el contenido. Al 1fr anterior el panel
   reservaba media seccion y, al encogerse su contenido, dejaba el hueco vacio
   que se veia bajo el. */
/* El panel se centra verticalmente respecto a la lista en vez de quedarse
   pegado arriba con position:sticky. El sticky obligaba a la fila del grid a
   medir lo que mide la columna de pasos, y como el panel es mucho mas bajo,
   quedaban ~400px de vacio bajo el que se leian como un corte en la pagina.
   Centrado, el bloque respira y no sobra espacio. */
.how-wrap { display:grid; grid-template-columns:.85fr 1fr; gap:56px; align-items:center; margin-top:32px; }
/* Antes: un icono de linea escalado al 65% de un cuadrado, sobre un glow
   radial verde. Un icono a ese tamano deja de leerse como icono y pasa a ser
   una mancha decorativa — y el glow detras es, otra vez, el recurso de
   plantilla. El panel ocupaba media seccion sin aportar informacion.

   Ahora el panel es una ventana tecnica: el icono vuelve a tamano de icono,
   acompanado del nombre real del paso y de un detalle concreto (el formato de
   archivo, el motor, la carpeta). Mismo espacio, ahora dice algo. */
/* Sin aspect-ratio: la altura la define el contenido. Con 4/3 el panel medía
   casi 500px para tres lineas de texto y dejaba un hueco muerto enorme bajo
   ellas, porque los frames van en position:absolute y no empujan la caja.
   El grid apila los frames en la misma celda, asi que cambiar de paso no
   provoca salto de altura aunque los textos midan distinto. */
.how-visual { border-radius:14px; background:var(--panel); border:1px solid var(--line); position:relative; overflow:hidden; display:grid; padding-top:34px; }
.how-visual::before {
  content:''; position:absolute; top:0; left:0; right:0; height:34px;
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.how-viz-frame { grid-area:1/1; padding:24px 26px 26px; display:flex; flex-direction:column; gap:12px; opacity:0; visibility:hidden; transition:opacity .25s var(--ease-out), visibility 0s linear .25s; }
.how-viz-frame.on { opacity:1; visibility:visible; transition:opacity .25s var(--ease-out), visibility 0s; }
.how-viz-frame svg { width:24px; height:24px; color:var(--green); flex:none; }
.how-viz-name { font-family:var(--font-mono); font-size:var(--t-micro); color:var(--text); letter-spacing:.2px; }
.how-viz-meta { font-family:var(--font-mono); font-size:var(--t-label); color:var(--muted); line-height:1.7; }
.how-viz-meta b { color:var(--green); font-weight:500; }
.how-steps { display:flex; flex-direction:column; gap:4px; }
.how-step { padding:28px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:opacity .3s; opacity:.4; }
@media (max-width:900px) { .how-step { opacity:1; } }
.how-step:last-child { border-bottom:none; }
.how-step.active { opacity:1; }
.how-step-head { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.how-step-n { width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--muted); flex-shrink:0; transition:background .3s, color .3s, border-color .3s; }
.how-step.active .how-step-n { background:var(--green); color:var(--on-green); border-color:var(--green); }
.how-step h3 { font-family:var(--font-head); font-size:var(--t-heading); font-weight:400; letter-spacing:-.01em; line-height:1.2; }
.how-step p { font-size:var(--t-body); color:var(--text-dim); line-height:1.6; margin-left:58px; }
@media (max-width:900px) { .how-wrap { grid-template-columns:1fr; } .how-visual { display:none; } }

/* ── BENTO FEATURES ── */
.features-section { position: relative; overflow: hidden; isolation: isolate; }
.features-bg {
  position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
/* Los dos orbes de 620px y 720px con blur(80px) se eliminaron: mismo cliche
   visual que los del hero, y ademas dos capas enormes con filtro de desenfoque
   que el compositor tenia que rasterizar en cada scroll. La reticula usa los
   mismos tokens de linea que el resto de la pagina, asi que hereda el tema
   claro/oscuro sin declarar colores propios. */
.features-bg .fbg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.features-section .wrap { position: relative; z-index: 1; }

.bento {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px; margin-top: 48px;
  perspective: 1400px;
}
.b {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 0;
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(28px);
  transition:
    opacity .55s var(--ease-out) var(--b-delay, 0ms),
    transform .55s var(--ease-out) var(--b-delay, 0ms),
    border-color .35s var(--ease-out),
    box-shadow .5s var(--ease-out);
}
.b.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .b { opacity: 1; transform: none; transition: border-color .3s, box-shadow .3s; } }
.b::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.03), transparent 40%);
  opacity: .8;
}
.b:hover {
  border-color: var(--line-strong);
  box-shadow: 0 20px 60px -30px rgba(52,199,138,.35), 0 0 0 1px rgba(52,199,138,.12) inset;
}
.b .b-inner {
  position: relative; z-index: 2; padding: 28px;
  height: 100%; display: flex; flex-direction: column;
}
.b-1 { grid-column: span 3; grid-row: span 2; }
.b-2 { grid-column: span 3; }
.b-3 { grid-column: span 2; }
.b-4 { grid-column: span 2; }
.b-5 { grid-column: span 2; grid-row: span 2; }
.b-6 { grid-column: span 2; }
.b-7 { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .b-1 { grid-column: span 2; grid-row: auto; }
  .b-2, .b-3, .b-4, .b-5, .b-6, .b-7 { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .b-1, .b-2, .b-3, .b-4, .b-5, .b-6, .b-7 { grid-column: auto; }
}

/* El halo que seguía al ratón dentro de cada tarjeta se retira.

   Dos razones. La primera, que ya no seguía nada: escuchaba --mx/--my, pero el
   JS que actualizaba esas variables desapareció al quitar el spotlight, así que
   el halo se quedaba clavado en el centro de la tarjeta. Era un efecto de
   mouse-follow sin ratón.

   La segunda, que competía con el reflejo del mock. Dos brillos verdes que
   reaccionan al puntero en la misma página se estorban: el del hero deja de
   leerse como propio de la ventana de Helpmeet y pasa a ser "otro glow más".
   El reflejo queda ahora como algo exclusivo del producto en el hero, que es
   donde tiene significado.

   Las tarjetas conservan su respuesta al hover — borde, sombra y elevación —
   que es la que comunica "esto es interactivo" sin repetir el mismo recurso.

   El <span class="b-glow"> del HTML se mantiene: es inerte, y quitarlo de las
   siete tarjetas solo añadiría ruido al diff. */
.b .b-glow { display: none; }

/* Corner number */
.b .b-num {
  position: absolute; top: 18px; right: 22px; z-index: 3;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1.5px; color: var(--muted-2);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--inset-surface); backdrop-filter: blur(6px);
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.b:hover .b-num {
  color: var(--green); border-color: var(--line-strong);
  background: rgba(52,199,138,.08);
}

/* Icon with animated ring */
.b .b-icon {
  position: relative;
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(140deg, rgba(52,199,138,.14), rgba(52,199,138,.04));
  border: 1px solid rgba(52,199,138,.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--green);
  transition: transform .5s var(--ease-out), border-color .35s;
  will-change: transform;
}
.b .b-icon svg { position: relative; z-index: 2; }
.b .b-icon-ring {
  position: absolute; inset: -4px; border-radius: 16px;
  border: 1px solid rgba(52,199,138,.35);
  opacity: 0; transform: scale(.85);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.b:hover .b-icon { transform: translateY(-2px) rotate(-4deg); }
.b:hover .b-icon-ring { opacity: 1; transform: scale(1.08); }

.b h3 {
  font-family: var(--font-head); font-size: 20px; font-weight:400;
  margin-bottom: 10px; letter-spacing: -.01em;
}
.b p { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.b .tag {
  display: inline-block; margin-top: 14px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 4px;
  background: rgba(52,199,138,.14); color: var(--green);
  text-transform: uppercase;
}
.b.hero-cell {
  background:
    radial-gradient(circle at 110% -20%, rgba(52,199,138,.16), transparent 55%),
    var(--panel-2);
  border-color: var(--line-strong);
}

.b .b-visual {
  margin-top: 22px; padding: 16px;
  background: var(--code-surface);
  border-radius: 12px; border: 1px solid var(--line);
  position: relative; z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.b-code {
  font-family: var(--font-mono); font-size: 12px; color: #b6c8bd;
  line-height: 1.75;
}
.b-code > div { opacity: 1; will-change: opacity, transform; }
.b-code .k { color: #34C78A; }
.b-code .c { color: #55685e; }
.b-code .s { color: var(--amber); }

.b-wave {
  display: flex; align-items: end; gap: 3px; height: 44px;
  margin-top: auto;
}
.b-wave span {
  flex: 1; background: linear-gradient(to top, var(--green), var(--green-soft));
  opacity: .78; border-radius: 2px;
  transform-origin: bottom center; will-change: transform, opacity;
}
.b:hover .b-wave span { opacity: 1; }

.b-tags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.b-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--panel-3); color: var(--text-dim);
  border: 1px solid var(--line);
  will-change: transform, opacity;
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out);
}
.b-tag:hover { color: var(--green); border-color: var(--line-strong); background: rgba(52,199,138,.08); transform: translateY(-1px); }

.bento-dots { display: none; }

/* ── COST / SAVINGS ── */
.cost-section { background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:clamp(40px,5vw,64px); margin-top:72px; position:relative; overflow:hidden; }
/* Glow radial retirado: la tarjeta ya se distingue por fondo, borde y radio.
   Un halo verde encima solo anadia el acabado de plantilla. */
.cost-head { text-align:center; margin-bottom:40px; position:relative; z-index:1; }
.cost-label { font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); margin-bottom:14px; display:inline-flex; align-items:center; gap:10px; }
.cost-label::before, .cost-label::after { content:''; width:24px; height:1px; background:var(--green); opacity:.4; }
.cost-title { font-family:var(--font-head); font-size:var(--t-title); font-weight:400; line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:18ch; margin:0 auto 12px; text-wrap:balance; }
.cost-title em { font-style:normal; color:var(--green); }
.cost-sub { font-size:var(--t-body); color:var(--text-dim); max-width:560px; margin:0 auto; }

.cost-compare { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,3vw,32px); align-items:center; position:relative; z-index:1; max-width:800px; margin:0 auto 40px; }
.cost-side { text-align:center; }
.cost-side-label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.cost-side-label.cloud { color:#e88a8a; }
.cost-side-label.local { color:var(--green); }
.cost-side-amount { font-family:var(--font-head); font-size:var(--t-title); font-weight:400; letter-spacing:var(--ls-title); line-height:1; }
.cost-side-amount.cloud { color:#e88a8a; text-decoration:line-through; text-decoration-thickness:3px; text-decoration-color:rgba(232,138,138,.35); }
.cost-side-amount.local { color:var(--green); }
.cost-side-sub { font-size:13px; color:var(--muted); margin-top:6px; }
.cost-vs { display:flex; flex-direction:column; align-items:center; gap:10px; }
.cost-vs-line { width:1px; flex:1; min-height:60px; background:linear-gradient(to bottom, transparent, var(--line-strong), transparent); }
.cost-vs-badge { font-family:var(--font-head); font-size:13px; font-weight:400; letter-spacing:2px; color:var(--muted); padding:10px 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--bg); }
.cost-result { text-align:center; position:relative; z-index:1; padding:24px; background:rgba(52,199,138,.06); border:1px solid rgba(52,199,138,.2); border-radius:16px; max-width:600px; margin:0 auto; }
.cost-result-label { font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; }
.cost-result-amount { font-family:var(--font-head); font-size:var(--t-heading); font-weight:400; color:var(--green); letter-spacing:var(--ls-title); }
.cost-result-sub { font-size:13px; color:var(--text-dim); margin-top:4px; }

@media (max-width:700px) {
  .cost-compare { grid-template-columns:1fr; gap:24px; }
  .cost-vs { flex-direction:row; }
  .cost-vs-line { width:auto; height:1px; min-height:0; min-width:40px; background:linear-gradient(to right, transparent, var(--line-strong), transparent); }
}

/* ── MODEL COMPARISON ── */
.model-grid { display:grid; grid-template-columns:1fr 60px 1fr; gap:24px; margin-top:56px; align-items:stretch; }
@media (max-width:900px) { .model-grid { grid-template-columns:1fr; gap:18px; } }
.model-card { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:clamp(28px,3vw,40px); position:relative; overflow:hidden; transition:transform .35s var(--ease-out), border-color .3s; display:flex; flex-direction:column; }
.model-card:hover { transform:translateY(-4px); }
.model-card.model-cloud { opacity:.92; }
/* La sombra verde de 110px de blur se cambia por una sombra neutra y un borde
   de acento. La tarjeta sigue destacando sobre la de cloud, pero por contraste
   de superficie, no por un resplandor de color. */
.model-card.model-us { border-color:rgba(52,199,138,.45); background:var(--panel-2); box-shadow:0 1px 0 0 var(--green) inset, 0 18px 44px -28px var(--shadow-strong); }
.model-card-head { display:flex; align-items:center; gap:14px; margin-bottom:22px; position:relative; z-index:1; }
.model-icon { width:56px; height:56px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.model-icon--muted { background:rgba(255,255,255,.03); color:var(--muted); border:1px solid var(--line); }
.model-icon--brand { background:rgba(52,199,138,.12); color:var(--green); border:1px solid rgba(52,199,138,.3); box-shadow:inset 0 0 20px rgba(52,199,138,.08); }
.model-tag { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.04); color:var(--muted); border:1px solid var(--line); }
.model-tag.on { background:rgba(52,199,138,.14); color:var(--green); border-color:rgba(52,199,138,.32); }
.model-title { font-family:var(--font-head); font-size:var(--t-heading); font-weight:400; letter-spacing:var(--ls-title); margin-bottom:8px; line-height:1.15; position:relative; z-index:1; }
.model-card.model-cloud .model-title { color:var(--text-dim); }
.model-sub { font-size:14px; color:var(--muted); margin-bottom:28px; line-height:1.5; position:relative; z-index:1; }
.model-list { list-style:none; display:flex; flex-direction:column; gap:0; margin-bottom:28px; position:relative; z-index:1; flex:1; }
.model-list li { display:flex; align-items:flex-start; gap:14px; font-size:14.5px; line-height:1.5; color:var(--text-dim); padding:12px 0; border-top:1px solid var(--line); }
.model-list li:first-child { border-top:none; padding-top:4px; }
.model-cloud .model-list li { color:var(--muted); }
.model-list li::before { content:''; flex-shrink:0; margin-top:4px; width:16px; height:16px; border-radius:50%; background:rgba(168,106,106,.18); border:1px solid rgba(168,106,106,.35); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c88888' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); background-position:center; background-repeat:no-repeat; }
.model-list--check li::before { background:rgba(52,199,138,.14); border-color:rgba(52,199,138,.35); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2334C78A' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.model-foot { margin-top:auto; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between; gap:14px; position:relative; z-index:1; }
.model-foot-lbl { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; }
.model-foot-val { font-family:var(--font-head); font-size:clamp(20px,2.2vw,26px); font-weight:400; letter-spacing:-.02em; }
.model-foot-val.cloud { color:#e88a8a; }
.model-foot-val.us { color:var(--green); }
.model-foot-val em { font-style:normal; font-family:var(--font-body); font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.3px; margin-left:4px; }
.model-vs { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; position:relative; padding:20px 0; }
.model-vs-line { flex:1; width:1px; background:linear-gradient(to bottom, transparent, var(--line-strong), transparent); min-height:40px; }
.model-vs-text { font-family:var(--font-head); font-size:12px; font-weight:400; letter-spacing:2px; color:var(--muted); padding:8px 10px; border:1px solid var(--line-strong); border-radius:999px; background:var(--bg); min-width:44px; text-align:center; }
@media (max-width:900px) { .model-vs { flex-direction:row; padding:0; } .model-vs-line { width:auto; height:1px; min-height:0; min-width:40px; background:linear-gradient(to right, transparent, var(--line-strong), transparent); } }

/* ── QUOTE ── */
.quote-band { padding:110px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(52,199,138,.02); }
/* El testimonio deja de estar centrado. Centrado + comilla gigante + serif
   grande es la maqueta de testimonio que trae cualquier plantilla; alineado a
   la izquierda con una regla vertical se lee como una cita real. */
/* La regla es un hijo real (.quote-rule), no un border-left, porque GSAP no
   puede animar la escala de un borde ni de un pseudo-elemento. */
.quote-inner { max-width:760px; margin:0 auto; text-align:left; position:relative; padding-left:28px; }
.quote-rule { position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--green); transform-origin:top; }
.quote-mark { display:none; }
.quote-text { font-family:var(--font-head); font-size:var(--t-heading); font-weight:400; line-height:1.5; margin-bottom:20px; letter-spacing:-.01em; text-wrap:pretty; }
.quote-author { font-size:13px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.5px; text-transform:uppercase; }

/* ── PRICING ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:56px; }
@media (max-width:900px) { .pricing-grid { grid-template-columns:1fr; } }
.plan { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:36px 30px; display:flex; flex-direction:column; transition:border-color .3s, transform .3s; position:relative; }
.plan:hover { border-color:var(--line-strong); transform:translateY(-4px); }
.plan.featured { border-color:rgba(52,199,138,.4); background:var(--panel-2); box-shadow:0 0 0 1px rgba(52,199,138,.15), 0 40px 100px -30px rgba(52,199,138,.25); }
.plan.featured::before { content:''; position:absolute; inset:-1px; border-radius:20px; background:linear-gradient(180deg, rgba(52,199,138,.3), transparent 60%); z-index:-1; }
.plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--green); color:var(--on-green); font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.8px; padding:5px 12px; border-radius:999px; text-transform:uppercase; }
.plan-name { font-family:var(--font-head); font-size:var(--t-heading); font-weight:400; letter-spacing:-.01em; margin-bottom:8px; }
.plan-desc { font-size:var(--t-small); color:var(--muted); margin-bottom:26px; line-height:1.5; }
.plan-price { display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
.plan-currency { font-family:var(--font-head); font-size:20px; color:var(--muted); align-self:flex-start; margin-top:8px; }
.plan-amount { font-family:var(--font-head); font-size:44px; font-weight:400; color:var(--green); line-height:1; letter-spacing:-.03em; }
.plan-once { font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:30px; letter-spacing:.3px; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:30px; flex:1; }
.plan-features li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; }
.plan-features li svg { flex-shrink:0; margin-top:3px; color:var(--green); }
.plan-features li.off { color:var(--muted); }
.plan-features li.off svg { color:var(--muted-2); }
.plan-btn { display:block; text-align:center; font-family:var(--font-head); font-size:14.5px; font-weight:400; padding:14px 20px; border-radius:12px; transition:transform .25s, box-shadow .25s, background .25s; }
.plan.featured .plan-btn { background:var(--green); color:var(--on-green); box-shadow:0 10px 30px -8px rgba(52,199,138,.5); }
.plan:not(.featured) .plan-btn { background:transparent; color:var(--green); border:1px solid rgba(52,199,138,.3); }
.plan:not(.featured) .plan-btn:hover { background:rgba(52,199,138,.08); }
.plan-btn:hover { transform:translateY(-2px); }
.pricing-note { text-align:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.pricing-note strong { color:var(--green); font-weight:700; }

/* ── FAQ ── */
.faq-list { margin-top:48px; display:flex; flex-direction:column; gap:12px; }
.faq { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .3s; }
.faq.open { border-color:rgba(52,199,138,.35); }
.faq-q { width:100%; padding:20px 24px; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-body); font-size:var(--t-body); font-weight:600; color:var(--text); letter-spacing:0; transition:color .2s; }
.faq.open .faq-q { color:var(--green); }
.faq-plus { width:30px; height:30px; border-radius:50%; flex-shrink:0; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s, transform .35s var(--ease-out); }
.faq.open .faq-plus { background:var(--green); border-color:var(--green); color:var(--on-green); transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; padding:0 26px; transition:max-height .5s var(--ease-out), padding .3s; font-size:14.5px; color:var(--text-dim); line-height:1.65; }
.faq.open .faq-a { padding-bottom:24px; }

/* ── FINAL CTA ── */
.final-cta { padding:180px 24px 140px; text-align:center; position:relative; overflow:hidden; }
/* El glow de 900px que ademas latia en bucle infinito (yoyo, repeat:-1) se
   sustituye por la misma reticula del hero: cierra la pagina con el mismo
   lenguaje con el que abre, en vez de con un foco pulsante. */
.final-glow {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to top, #000, transparent 65%);
  -webkit-mask-image:linear-gradient(to top, #000, transparent 65%);
}
.final-cta .wrap { position:relative; z-index:2; }
.final-cta h2 { font-family:var(--font-head); font-size:var(--t-display); font-weight:400; line-height:var(--lh-display); max-width:16ch; margin:0 auto 20px; letter-spacing:var(--ls-display); text-wrap:balance; }
.final-cta h2 em { font-style:normal; color:var(--green); }
.final-cta p { font-size:var(--t-lead); color:var(--text-dim); max-width:480px; margin:0 auto 40px; }
.cta-mega { display:inline-flex; align-items:center; gap:12px; background:var(--green); color:var(--on-green); font-family:var(--font-head); font-size:17px; font-weight:400; padding:19px 42px; border-radius:999px; box-shadow:0 20px 60px -15px rgba(52,199,138,.5); transition:transform .3s var(--ease-out); position:relative; }
.cta-mega:hover { transform:translateY(-4px); }
.cta-mega::before { content:''; position:absolute; inset:-6px; border-radius:999px; border:1px solid rgba(52,199,138,.35); opacity:0; transition:opacity .3s, transform .3s; transform:scale(1.1); }
.cta-mega:hover::before { opacity:1; transform:scale(1); }
.cta-sub { margin-top:20px; font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.5px; }

/* ── FOOTER ── */
footer { border-top:1px solid var(--line); padding:40px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; position:relative; z-index:2; background:var(--bg); }
.footer-brand { font-family:var(--font-head); font-weight:400; font-size:15px; display:flex; align-items:center; gap:10px; }
.footer-copy { font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.footer-link { font-size:12.5px; color:var(--muted); transition:color .2s; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); }
.footer-link:hover { color:var(--green); }

/* ── RESPONSIVE ── */
/* Pantallas anchas pero bajas (portatiles 1080p y monitores 16:10). Solo se
   recorta el ESPACIO, no la tipografia: con el techo del display ya en 60px el
   titular cabe sin encogerse, y encogerlo aqui rompia la escala unica. */
@media (min-width:900px) and (max-height:820px) { .hero { padding-top:calc(68px + 40px); } .hero-lead { margin-bottom:20px; } .hero-desc { margin-bottom:22px; } .hero-app { margin-top:32px; } }
@media (min-width:900px) and (max-height:720px) { .hero { padding-top:calc(68px + 26px); } .hero-lead { margin-bottom:16px; } .hero-desc { margin-bottom:18px; } .hero-app { margin-top:22px; } }
@media (max-width:900px) { nav { padding:0 22px; } .hero-app { margin-top:40px; } }
/* Movil: se ajusta ESPACIO y layout, no tamanos de letra. El minimo de cada
   clamp ya es el valor de movil, asi que redeclarar font-size aqui solo servia
   para romper la escala unica en el breakpoint donde mas importa. */
@media (max-width:640px) { nav { padding:0 18px; height:60px; } nav.scrolled { height:54px; } .nav-logo { font-size:16px; padding:6px; } .nav-logo-dot { width:28px; height:28px; } .nav-cta { padding:8px 14px; font-size:12.5px; gap:6px; min-height:40px; } .nav-cta svg { width:10px; height:10px; } .hero { padding-top:calc(60px + 28px); padding-left:20px; padding-right:20px; } .hero-micro { line-height:1.6; } .hero-app { margin-top:32px; padding-bottom:40px; } .hero-actions { flex-direction:column; align-items:stretch; width:100%; max-width:340px; } .btn { padding:14px 22px; gap:8px; width:100%; white-space:normal; line-height:1.2; } .btn svg { flex-shrink:0; } .cta-mega { padding:16px 26px; max-width:calc(100% - 24px); text-align:center; line-height:1.25; white-space:normal; } .cta-mega svg { width:15px; height:15px; } .final-cta { padding:80px 18px; } .plan { padding:28px 22px; } .plan-btn { padding:13px 18px; } .pricing-note { padding:20px 8px 0; } .quote-band { padding:72px 18px; } .quote-inner { padding-left:20px; } .stat-cell { padding:32px 18px; } .stat-lbl { font-size:10.5px; } .faq-q { padding:18px 20px; gap:14px; } .faq-a { padding:0 20px; } .faq.open .faq-a { padding-bottom:20px; } .faq-plus { width:26px; height:26px; } footer { padding:28px 18px; text-align:center; justify-content:center; } }
/* A 320px (el ancho minimo que exige WCAG 1.4.10) la barra no cabe: logo +
   ES|EN + tema + "Comprar" desbordan y el boton de compra quedaba cortado por
   el borde derecho, recortado por el overflow-x:hidden del body. Se ocultan el
   selector de idioma y el toggle de tema — ambos tienen equivalente mas abajo o
   se detectan solos — y el CTA se conserva, que es lo unico que no puede
   faltar. */
@media (max-width:380px) {
  .btn { padding:13px 16px; }
  .cta-mega { padding:15px 20px; gap:8px; }
  .nav-cta { padding:7px 11px; font-size:12px; }
  nav { padding:0 12px; gap:8px; }
  .nav-actions { gap:6px; min-width:0; }
  .nav-logo { font-size:15px; min-width:0; }
  .nav-logo span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:340px) {
  .lang-switcher, .lang-sep, .theme-toggle { display:none; }
}
.hidden-mobile { display:initial; }
.only-mobile { display:none; }
@media (max-width:640px) { .hidden-mobile { display:none; } .only-mobile { display:initial; } }
.cta-mega-mini, .btn-text-mini { display:none; }
@media (max-width:560px) { .cta-mega-full, .btn-text-full { display:none; } .cta-mega-mini, .btn-text-mini { display:inline; } }

/* ── MOBILE OPTIMIZATION — less scroll, trimmed copy, tighter blocks ── */
.mobile-hide { display:initial; }
@media (max-width:640px) {
  /* Utility: remove non-essential copy on phones */
  .mobile-hide { display:none !important; }

  /* Hero: shorter block, smaller app preview */
  .hero { min-height:auto; }
  .hero-app { margin-top:26px; padding-bottom:28px; }
  .hero-app::after { height:70px; }
  .app-body { min-height:0; }
  .app-main { padding:20px 20px; gap:16px; text-align:left; }
  .app-tb { height:36px; padding:0 14px; }
  .app-title { font-size:10px; }
  .app-utterances { gap:16px; }
  .app-utterances .utt:nth-child(3) { display:none; }
  .app-meet-time { display:none; }
  .app-meet-head { flex-wrap:wrap; gap:10px; }
  .utt { align-items:flex-start; }
  .utt-body { font-size:13.5px; }
  .utt-body .who { margin-bottom:4px; }

  /* Section headings tighter */
  .section-title { margin-bottom:14px; }

  /* How it works: compact steps */
  .how-wrap { margin-top:20px; gap:0; }
  .how-step { padding:20px 0; }
  .how-step p { margin-left:0; margin-top:8px; }
  .how-step-head { gap:12px; margin-bottom:0; }
  .how-step-n { width:34px; height:34px; font-size:12px; }

  /* Bento: horizontal swipe carousel (scroll left/right, page scrolls down) */
  .bento {
    display:flex; grid-template-columns:none; perspective:none;
    gap:14px; margin-top:28px;
    overflow-x:auto; overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 24px 8px; margin-left:-24px; margin-right:-24px;
    scroll-padding-left:24px;
  }
  .bento::-webkit-scrollbar { display:none; }
  .b, .b-1, .b-2, .b-3, .b-4, .b-5, .b-6, .b-7 {
    grid-column:auto !important; grid-row:auto !important;
    flex:0 0 82%; max-width:82%;
    scroll-snap-align:center;
    min-height:230px;
    opacity:1 !important; transform:none !important;
  }
  .b .b-inner { padding:24px; }
  .b .b-visual, .b .b-wave, .b .b-tags-list { display:none; }
  .b h3 { font-size:19px; }
  .b .b-num { top:16px; right:18px; }
  /* Swipe hint dots */
  .bento-dots { display:flex; justify-content:center; gap:8px; margin-top:20px; }
  .bento-dot { width:7px; height:7px; border-radius:999px; padding:0; background:var(--line-strong); border:none; transition:background .25s, width .25s var(--ease-out); }
  .bento-dot.on { background:var(--green); width:22px; }

  /* Model + cost comparison: lighter */
  .model-grid { margin-top:32px; }
  .model-card { padding:26px 22px; }
  .model-sub { display:none; }
  .model-list li { font-size:13.5px; padding:10px 0; gap:12px; }
  .model-list li:nth-child(n+4) { display:none; }
  #costSection { display:none; }

  /* Ticker: slightly smaller */
  .ticker-item { font-size:11.5px; }

  /* Pricing: featured plan first, tighter feature lists */
  .plan.featured { order:-1; }
  .plan-desc { display:none; }
  .plan-features { gap:10px; margin-bottom:24px; }
  .plan-features li { font-size:13.5px; }
  .plan-features li.off { display:none; }
  .plan-name { margin-bottom:4px; }

  /* Antes estos tres subtitulos se ocultaban con display:none en movil. Es el
     anti-patron que la skill Responsive Mobile First marca explicitamente:
     ocultar contenido en lugar de reorganizarlo. En un landing el subtitulo es
     el que explica la propuesta de valor, y el 60%+ del trafico es movil, asi
     que se estaba escondiendo el argumento justo a quien mas lo necesita.
     Ahora se muestran; el copy ya se acorto en la fase 4. */

  /* Quote + final CTA tighter */
  .quote-band { padding:70px 18px; }
  .final-cta { padding:72px 18px 64px; }
}

/* ============================================================
   MOCK DEL HERO — la interfaz real de Helpmeet
   Reemplaza al anterior, que mostraba una pantalla que ya no existe
   (pestaña "Contexto", panel de glosario, lista plana de proyectos).
   Todo sale de tokens, así que sigue al tema claro/oscuro del sitio.
   ============================================================ */
.app-window {
  display: grid; grid-template-columns: 186px 1fr;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; min-height: 430px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.55);
}
.app-window .ap-i { width: 15px; height: 15px; flex: none; stroke: currentColor;
  fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-window .ap-i-solid { fill: currentColor; stroke: none; }

/* ---- Barra lateral ---- */
.ap-side {
  background: var(--panel-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 10px 8px;
  font-size: 11.5px; color: var(--text-dim);
}
.ap-side-top { padding: 2px 6px 12px; color: var(--muted); }
.ap-nav, .ap-tree { display: flex; flex-direction: column; gap: 1px; }
.ap-tree { margin-top: 10px; }
.ap-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 6px; white-space: nowrap;
}
.ap-item b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.ap-item.is-on { background: var(--panel-3); color: var(--text); }
.ap-item .ap-n { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); font-style: normal; }
.ap-sub { padding-left: 16px; }
/* Carpeta maciza, la misma silueta que el icono de la app. */
.ap-fold {
  width: 13px; height: 11px; flex: none; background: var(--c);
  border-radius: 2px 3px 3px 3px;
  clip-path: polygon(0 12%, 42% 12%, 52% 30%, 100% 30%, 100% 100%, 0 100%);
}
.ap-side-foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 1px; }

/* ---- Panel principal ---- */
.ap-main { position: relative; display: flex; flex-direction: column; background: var(--panel); }
.ap-titlebar {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 9px 12px; color: var(--muted);
}
.ap-win { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; }
.ap-wsep { margin-left: 8px; }

.ap-body { padding: 18px 34px 0; }
.ap-crumb { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
/* Serif igual que .page-title en la app: es el rasgo que más la identifica. */
.ap-title { font-family: var(--font-head); font-weight: 400; font-size: 27px;
  letter-spacing: -.01em; color: var(--text); margin: 0 0 16px; }

.ap-tabs { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.ap-tab {
  font-size: 11.5px; padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--text-dim);
}
.ap-tab.is-on { background: var(--panel-3); border-color: var(--line-strong); color: var(--text); font-weight: 500; }
.ap-tab-acts { margin-left: auto; display: flex; gap: 10px; color: var(--muted); }

.ap-facts {
  display: inline-flex; gap: 30px; padding: 12px 18px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  font-size: 12px; color: var(--text-dim);
}
.ap-facts em { font-style: normal; color: var(--muted); margin-right: 12px; }

/* ---- Dock de grabación ---- */
.ap-dock {
  position: absolute; left: 26px; right: 26px; bottom: 18px;
  background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.6);
}
.ap-dock-head { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11.5px; }
.ap-dock-head b { color: var(--text-dim); font-weight: 500; margin: 0 auto 0 4px; }
.ap-dock-mini { display: flex; gap: 9px; }
.ap-clock { text-align: center; font-family: var(--font-mono); font-size: 15px; color: var(--text); margin: 6px 0 10px; }
.ap-live {
  display: inline-block; max-width: 88%; padding: 8px 12px; margin-bottom: 6px;
  background: var(--panel-3); border-radius: 10px;
  font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
}
.ap-live-typing { display: flex; gap: 4px; padding: 11px 12px; }
.ap-live-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.ap-dock-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ap-ctl { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: var(--muted); }
.ap-ctl.is-live { color: var(--green); }
.ap-ctl.is-dark { background: var(--text); color: var(--panel); }
.ap-stop { color: var(--text-dim); margin-right: auto; }
.ap-pick {
  font-size: 10.5px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}

@media (max-width: 780px) {
  .app-window { grid-template-columns: 1fr; min-height: 0; }
  .ap-side { display: none; }
  .ap-body { padding: 14px 18px 0; }
  .ap-dock { left: 12px; right: 12px; }
  .ap-pick:nth-of-type(n+2) { display: none; }
}

/* Controles con etiqueta (Notas, Capturar pantalla), como en la app. */
.ap-ctl-lbl { width: auto; gap: 6px; padding: 0 10px; }
.ap-ctl-lbl b { font-weight: 400; font-size: 10.5px; color: var(--text-dim); }
/* La burbuja de la frase en vivo va pegada a la izquierda, no centrada: es lo
   que hace que se lea como una conversacion entrando. */
.ap-dock .ap-live { align-self: flex-start; }
.ap-dock { display: flex; flex-direction: column; align-items: stretch; }
.ap-live-typing { width: max-content; }

/* El hero centra su texto y eso se colaba dentro de la ventana: la miga y el
   título salían centrados mientras las pestañas quedaban a la izquierda. */
.app-window { text-align: left; }

/* ════════════════════════════════════════════════════════════════════
   MOCK VIVO — la app se demuestra sola

   El mock tenía todos los signos de una grabación en curso — un reloj
   "34:12", una frase transcrita, tres puntos de "escribiendo", un medidor
   de audio — y ninguno se movía. La app aparentaba estar grabando en una
   captura congelada, que es exactamente la impresión contraria a la que
   busca un producto que graba y transcribe en tiempo real.

   Ahora el reloj corre, la frase se escribe palabra por palabra y el
   medidor reacciona. En los primeros segundos, sin hacer nada, el
   visitante VE lo que hace Helpmeet en lugar de leerlo. Ese es el
   movimiento que convence: no decora, demuestra.
   ════════════════════════════════════════════════════════════════════ */

/* Punto REC: el único bucle infinito que se permite la página. Va aquí
   porque es el estado real de la app grabando, no un adorno — y la propia
   GUIA_ESTANDAR_DISENO_HELPMEET lo autoriza solo en grabación/progreso. */
.ap-rec-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #e0574f; flex: none; margin-right: 7px;
  animation: apRecPulse 2s ease-in-out infinite;
}
@keyframes apRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* El cursor de escritura solo existe mientras se escribe la frase. */
.ap-live .ap-caret {
  display: inline-block; width: 1.5px; height: 1em; vertical-align: -2px;
  background: var(--green); margin-left: 2px;
  animation: apCaret 1s steps(2) infinite;
}
@keyframes apCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Los tres puntos de "transcribiendo" ahora rebotan de verdad. */
.ap-live-typing i { animation: apDot 1.25s ease-in-out infinite; }
.ap-live-typing i:nth-child(2) { animation-delay: .16s; }
.ap-live-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes apDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Medidor de audio: cinco barras con ritmos distintos. Las duraciones son
   primos entre sí para que el patrón no se repita de forma perceptible —
   con duraciones múltiplas se sincronizan y se lee como un bucle. */
.ap-meter { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.ap-meter i {
  width: 2px; border-radius: 1px; background: var(--green);
  height: 30%; transform-origin: bottom;
  animation: apMeter 1.1s ease-in-out infinite;
}
.ap-meter i:nth-child(2) { animation-duration: .83s; animation-delay: .07s; }
.ap-meter i:nth-child(3) { animation-duration: 1.31s; animation-delay: .21s; }
.ap-meter i:nth-child(4) { animation-duration: .97s; animation-delay: .13s; }
.ap-meter i:nth-child(5) { animation-duration: 1.19s; animation-delay: .29s; }
@keyframes apMeter {
  0%, 100% { height: 22%; opacity: .55; }
  50% { height: 100%; opacity: 1; }
}

/* La frase mantiene su altura mientras se escribe para que el dock no salte
   de tamaño con cada palabra: un layout que brinca lee como error, no como
   escritura en vivo. */
.ap-live { min-height: 2.9em; }

/* Los puntos de "transcribiendo" se atenúan cuando la frase termina, en vez de
   ocultarse: con visibility:hidden dejaban un hueco y el dock parecía a medio
   dibujar. Atenuados, siguen ocupando su sitio y se leen como el motor
   esperando la siguiente intervención. */
.ap-live-typing { transition: opacity .3s var(--ease-out); }
.ap-live-typing.is-idle { opacity: .3; }
.ap-live-typing.is-idle i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ap-rec-dot, .ap-live .ap-caret, .ap-live-typing i, .ap-meter i { animation: none; }
  .ap-meter i { height: 60%; }
  .ap-live .ap-caret { opacity: 0; }
}
/* Los controles con etiqueta van en fila. Heredaban el `place-items:center` de
   .ap-ctl (que es grid) y el rótulo caía DEBAJO del icono. */
.ap-ctl-lbl { display: inline-flex; align-items: center; }

/* Mas alto: con 430px el dock flotante llegaba a tapar la ficha de datos. Ahora
   hay sitio para que el contenido se lea entero por encima de el. */
.app-window { min-height: 520px; }
.ap-body { padding-bottom: 24px; }
@media (max-width: 780px) { .app-window { min-height: 420px; } }

/* Enlace de correo en FAQ */
.faq-mail { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.faq-mail:hover { color: var(--green-soft); }

/* Boton flotante de WhatsApp */
.wsp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, .55);
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out);
}
.wsp-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: wsp-pulse 2.8s ease-out infinite;
}
@keyframes wsp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
}
.wsp-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, .7);
}
.wsp-float svg { width: 28px; height: 28px; }

/* Tooltip del boton de WhatsApp */
.wsp-tooltip {
  position: absolute;
  right: 68px;
  bottom: 50%;
  transform: translateY(50%);
  background: rgba(17, 24, 28, .94);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.3;
  padding: 9px 13px;
  border-radius: 9px;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.wsp-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(17, 24, 28, .94);
}
.wsp-float:hover .wsp-tooltip,
.wsp-float.tooltip-on .wsp-tooltip {
  opacity: 1;
  transform: translateY(50%) translateX(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .wsp-float { transition: none; }
  .wsp-float::after { animation: none; }
  .wsp-float:hover { transform: none; }
}