/* ===========================================================================
   LANDING — My ECG Academy · estética "monitor médico premium"
   Fundo profundo, grelha de monitor, aurora néon clínico, ECG fosforescente.

   NOTA: esta folha é SÓ da landing PT (index.html). O antigo landing.css
   continua a servir /es/, /en/, termos.html e privacidade.html, intacto.
   Quando o ES/EN migrarem para cá, o landing.css encolhe para o que
   termos/privacidade precisam.
   Cores e tipos vêm todos dos tokens de estilo.css — nada é inventado aqui.
   =========================================================================== */
.lp { background: var(--bg-base); color: var(--text-mid); overflow-x: hidden; position: relative; }
.lp .btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--r-pill); font-weight: 600; }
.lp .btn-sm { padding: 9px 18px; font-size: 13.5px; border-radius: var(--r-pill); font-weight: 600; }

/* Grelha de monitor de fundo (subtil, fixa) */
.lp-grade {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(61,245,138,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,245,138,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}
/* Aurora néon no topo */
.lp-aurora {
  position: fixed; top: -30vh; left: 50%; transform: translateX(-50%);
  width: 130vw; height: 90vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 30% 40%, rgba(0,230,160,0.18), transparent 70%),
    radial-gradient(40% 50% at 72% 30%, rgba(43,215,245,0.14), transparent 70%);
  filter: blur(20px);
}
.lp > *:not(.lp-grade):not(.lp-aurora) { position: relative; z-index: 1; }

/* ---------- Barra de topo ---------- */
.lp-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 15px clamp(14px, 5vw, 60px);
  background: rgba(7,10,15,0); backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.lp-top.scrolled { background: rgba(7,10,15,0.82); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.lp-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.lp-marca-sinal {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px var(--accent);
  animation: lpPulse 2.2s ease-in-out infinite;
}
@keyframes lpPulse { 0%,100%{ box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px var(--accent); } 50%{ box-shadow: 0 0 0 7px transparent, 0 0 8px var(--accent); } }
.lp-marca-txt { font-weight: 700; letter-spacing: .14em; color: var(--text-hi); font-size: 15px; line-height: 1; white-space: nowrap; }
.lp-marca-txt em { color: var(--accent); font-style: normal; }
.lp-nav { display: flex; gap: 28px; margin-left: auto; }
.lp-nav a { color: var(--text-mid); text-decoration: none; font-size: 14px; transition: color .2s; position: relative; }
.lp-nav a::after { content:''; position:absolute; left:0; bottom:-5px; width:0; height:1.5px; background: var(--accent); transition: width .25s; }
.lp-nav a:hover { color: var(--text-hi); } .lp-nav a:hover::after { width: 100%; }
.lp-top-acoes { display: flex; gap: 10px; align-items: center; }

/* ---------- Seletor de idioma ----------
   Desenhado como um seletor de derivação de monitor: mono, compacto, sempre
   visível (também no telemóvel). Três links reais para três páginas reais. */
.lp-idiomas {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--surface-1); border: 1px solid var(--line);
}
.lp-idiomas a {
  display: grid; place-items: center; min-width: 38px; min-height: 30px; padding: 0 9px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--text-lo); text-decoration: none; border-radius: var(--r-pill);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.lp-idiomas a:hover { color: var(--text-hi); background: var(--surface-3); }
.lp-idiomas a.is-ativo { color: #04120C; background: var(--accent); }
.lp-idiomas a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Hero ---------- */
.lp-hero { position: relative; padding: clamp(48px,10vw,140px) clamp(18px,5vw,60px) clamp(44px,7vw,90px); max-width: 1180px; margin: 0 auto; }
.lp-hero-ecg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; z-index: 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-hero-conteudo { position: relative; z-index: 2; max-width: 780px; }
.lp-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 7px 15px; border-radius: var(--r-pill); margin-bottom: 24px;
}
.lp-tag-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: lpPulse 1.6s infinite; flex-shrink: 0; }
.lp-h1 {
  font-size: clamp(38px, 7.6vw, 78px); line-height: 1.02; color: var(--text-hi);
  letter-spacing: -0.03em; margin: 0 0 22px; font-weight: 700;
}
.lp-h1 em { font-style: normal; color: var(--accent); text-shadow: 0 0 36px rgba(0,230,160,0.35); }
.lp-h1-kw {
  display: block; font-size: clamp(16px, 2.1vw, 26px); font-weight: 600;
  letter-spacing: 0; line-height: 1.25; color: var(--text-mid); margin-bottom: 10px;
}
.lp-lead { font-size: clamp(15.5px, 1.7vw, 19px); line-height: 1.65; color: var(--text-mid); max-width: 640px; margin: 0 0 30px; }
.lp-lead strong { color: var(--text-hi); font-weight: 600; }
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-hero-ctas.lp-centro { justify-content: center; }
.lp-btn-demo { display: inline-flex; align-items: center; gap: 10px; }
.lp-play {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  position: relative;
}
.lp-play::after {
  content: ''; position: absolute; top: 50%; left: 52%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--accent);
}

/* Métricas (lista de definição — o rótulo descreve mesmo o número) */
.lp-metricas { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 0; }
.lp-metrica {
  display: flex; flex-direction: column-reverse; gap: 4px; padding: 15px 20px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
  min-width: 108px;
}
.lp-metrica-n { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1; margin: 0; }
.lp-metrica-l { font-size: 12.5px; color: var(--text-lo); }
.lp-metrica-txt { font-size: 15px; color: var(--text-hi); font-family: var(--font-sans); }
.lp-metrica-wide { justify-content: center; }

/* ---------- Secções genéricas ---------- */
.lp-seccao { padding: clamp(56px,8vw,110px) clamp(18px,5vw,60px); max-width: 1180px; margin: 0 auto; }
.lp-seccao-alt { background: var(--surface-1); max-width: none; border-block: 1px solid var(--line); }
.lp-seccao-int { max-width: 1180px; margin-inline: auto; }
.lp-seccao-cabeca { max-width: 680px; margin-bottom: clamp(32px,4vw,48px); }
.lp-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.lp-seccao-cabeca h2, .lp-formador h2, .lp-sobre-h { font-size: clamp(26px,4.2vw,44px); color: var(--text-hi); letter-spacing: -0.025em; margin: 12px 0 14px; line-height: 1.1; }
.lp-seccao-lead { font-size: 16px; line-height: 1.6; color: var(--text-lo); margin: 0; }

/* ---------- Secção FORMADOR ---------- */
.lp-formador { padding: clamp(56px,8vw,110px) clamp(18px,5vw,60px); max-width: 1180px; margin: 0 auto; }
.lp-formador-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px,4vw,56px); align-items: center; }
.lp-formador-lead { font-size: 16.5px; line-height: 1.65; color: var(--text-mid); margin: 0 0 26px; }
.lp-cap { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.lp-cap-item { border-top: 1px solid var(--line); padding-top: 14px; }
.lp-cap-item h3 { font-size: 14.5px; color: var(--text-hi); margin: 0 0 5px; font-weight: 600; }
.lp-cap-item p { font-size: 13.5px; line-height: 1.5; color: var(--text-lo); margin: 0; }

/* Mockup de monitor */
.lp-monitor {
  background: var(--bg-sunken); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lg), 0 0 50px rgba(0,230,160,0.08);
}
.lp-monitor-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; background: var(--surface-1); border-bottom: 1px solid var(--line); }
.lp-monitor-doente { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-mid); }
.lp-dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--crit); box-shadow: 0 0 10px var(--crit); animation: lpPulse 1.3s infinite; flex-shrink: 0; }
.lp-monitor-cod { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--accent); white-space: nowrap; }
.lp-monitor-corpo { display: grid; grid-template-columns: 1fr 116px; }
.lp-monitor-tracos { padding: 8px 0; border-right: 1px solid var(--line); min-width: 0; }
.lp-traco { width: 100%; display: block; }
.lp-traco-ecg { height: 76px; } .lp-traco-pleth { height: 52px; }
.lp-traco path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.lp-traco-ecg path { stroke: var(--ecg); filter: drop-shadow(0 0 5px rgba(61,245,138,.7)); stroke-dasharray: 100; stroke-dashoffset: 100; animation: traco 5s linear infinite; }
.lp-traco-pleth path { stroke: var(--spo2); filter: drop-shadow(0 0 5px rgba(47,212,245,.6)); stroke-dasharray: 100; stroke-dashoffset: 100; animation: traco 5s linear infinite .25s; }
@keyframes traco { to { stroke-dashoffset: 0; } }
.lp-monitor-vitais { display: flex; flex-direction: column; }
.lp-vt { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.lp-vt:last-child { border-bottom: none; }
.lp-vt-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--text-lo); text-transform: uppercase; }
.lp-vt-n { font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 1; }
.lp-vt-ecg .lp-vt-n { color: var(--ecg); } .lp-vt-pa .lp-vt-n { color: var(--pa); font-size: 18px; }
.lp-vt-spo2 .lp-vt-n { color: var(--spo2); } .lp-vt-co2 .lp-vt-n { color: var(--co2); }
.lp-monitor-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 16px; background: var(--surface-1); border-top: 1px solid var(--line); }
.lp-monitor-chips span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text-mid); padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); }

/* ---------- Criar (os dois destaques) ---------- */
.lp-criar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-criar-card {
  padding: clamp(24px,3vw,34px); border-radius: var(--r-lg);
  background: var(--bg-base); border: 1px solid var(--line-strong);
  position: relative; overflow: hidden;
}
.lp-criar-card::before {
  content:''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.lp-criar-card h3 { font-size: clamp(19px,2.2vw,23px); color: var(--text-hi); margin: 0 0 12px; letter-spacing: -0.015em; }
.lp-criar-card p { font-size: 15px; line-height: 1.65; color: var(--text-mid); margin: 0; }

/* ---------- Academia ---------- */
.lp-academia { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
.lp-academia-txt p { font-size: 16px; line-height: 1.7; color: var(--text-mid); margin: 0 0 16px; }
.lp-academia-txt strong { color: var(--text-hi); font-weight: 600; }
.lp-academia-txt .lp-academia-nota {
  padding: 14px 18px; border-left: 2px solid var(--warn);
  background: var(--warn-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.5px; color: var(--text-mid);
}
.lp-academia-txt .lp-academia-nota strong { color: var(--warn); }
.lp-academia-lado { padding: 24px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lp-academia-lado-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-lo); margin: 0 0 12px; font-weight: 600; }
.lp-academia-lado-h + .lp-lista-marca { margin-bottom: 26px; }
.lp-lista-marca { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lp-lista-marca li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--text-mid); }
.lp-lista-marca li::before { content:''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lp-lista-marca strong { color: var(--text-hi); font-weight: 600; }
.lp-lista-breve li { color: var(--text-lo); }
.lp-lista-breve li::before { background: var(--co2); }

/* ---------- Recursos ---------- */
.lp-recursos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 4px 32px; }
.lp-recurso { padding: 22px 0; border-top: 1px solid var(--line); }
.lp-recurso h3 { font-size: 16px; color: var(--text-hi); margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.lp-recurso h3::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.lp-recurso p { font-size: 14px; line-height: 1.55; color: var(--text-lo); margin: 0; }
.lp-recurso strong { color: var(--text-mid); font-weight: 600; }

/* ---------- Como funciona (aqui a numeração é mesmo uma sequência) ---------- */
.lp-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; }
.lp-passo { display: flex; gap: 16px; align-items: flex-start; }
.lp-passo-n { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.lp-passo h3 { font-size: 17px; color: var(--text-hi); margin: 7px 0 6px; }
.lp-passo p { font-size: 14px; line-height: 1.55; color: var(--text-lo); margin: 0; }

/* ---------- Sobre (editorial, centrado) ---------- */
.lp-sobre { padding: clamp(64px,9vw,120px) clamp(18px,5vw,60px); text-align: center; border-top: 1px solid var(--line); background: radial-gradient(80% 100% at 50% 0%, rgba(0,230,160,0.06), transparent 70%); }
.lp-sobre-inner { max-width: 720px; margin: 0 auto; }
.lp-sobre-h { margin: 12px auto 22px; }
.lp-sobre-p { font-size: 16.5px; line-height: 1.7; color: var(--text-mid); margin: 0 auto 18px; max-width: 630px; }
.lp-sobre-p strong { color: var(--text-hi); font-weight: 600; }
.lp-sobre-destaque { font-size: clamp(18px,2.2vw,21px); line-height: 1.5; color: var(--text-hi); font-weight: 500; margin-bottom: 26px; }
.lp-sobre .lp-hero-ctas { margin-top: 34px; }

/* ---------- Rodapé ---------- */
.lp-rodape { border-top: 1px solid var(--line); padding: 44px clamp(18px,5vw,60px); max-width: 1180px; margin: 0 auto; }
.lp-rodape-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.lp-rodape-links { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-rodape-links a { color: var(--text-lo); text-decoration: none; font-size: 14px; transition: color .2s; }
.lp-rodape-links a:hover { color: var(--text-hi); }
.lp-disclaimer { margin-top: 26px; font-size: 12px; line-height: 1.6; color: var(--text-faint); max-width: 680px; }
.lp-copy { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); }

/* ---------- Reveal no scroll ---------- */
.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lp-reveal.vis { opacity: 1; transform: none; }

/* ===========================================================================
   INÍCIO RÁPIDO — caixa "Entrar com código" (hero)
   =========================================================================== */
.lp-inicio-rapido { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lp-ir-form {
  width: 100%; max-width: 440px;
  background: rgba(14,19,27,0.66); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 14px 14px 12px; backdrop-filter: blur(6px);
}
.lp-ir-rotulo { display: block; font-size: 13px; color: var(--text-mid); margin-bottom: 9px; font-weight: 600; }
.lp-ir-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-ir-cod {
  width: 96px; flex: 0 0 auto; text-align: center;
  font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: 0.22em;
  padding: 0 8px; height: 48px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-hi);
}
.lp-ir-cod:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.lp-ir-nome {
  flex: 1 1 130px; min-width: 0; height: 48px; padding: 0 14px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-hi); font-size: 15px;
}
.lp-ir-nome:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.lp-ir-form .btn { flex: 0 0 auto; height: 48px; }
.lp-ir-erro { display: block; margin-top: 9px; font-size: 13px; color: #FF8A8A; }

/* ===========================================================================
   RESPONSIVO — a landing é usada sobretudo no telemóvel
   =========================================================================== */
@media (max-width: 980px){
  .lp-nav { display: none; }
  .lp-top-acoes { margin-left: auto; }   /* sem nav, e este que empurra para a direita */
  .lp-formador-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-academia { grid-template-columns: 1fr; }
  .lp-criar { grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .lp-cap { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px){
  .lp-top { padding: 11px 14px; gap: 10px; }
  .lp-marca-txt { font-size: 12.5px; letter-spacing: .1em; }
  .lp-marca { gap: 9px; }
  .lp-marca-sinal { width: 10px; height: 10px; }
  .lp-idiomas a { min-width: 34px; padding: 0 7px; font-size: 11px; }
  .lp-btn-entrar { padding: 9px 14px; }

  .lp-tag { font-size: 10.5px; padding: 6px 12px; margin-bottom: 20px; }
  .lp-hero-ctas .btn { width: 100%; justify-content: center; }
  .lp-btn-demo { justify-content: center; }

  .lp-metricas { gap: 10px; }
  .lp-metrica { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 13px 14px; }
  .lp-metrica-wide { flex-basis: 100%; }
  .lp-metrica-n { font-size: 22px; }

  .lp-modulo { padding: 22px; }
  .lp-academia-lado { padding: 20px; }
  .lp-monitor-corpo { grid-template-columns: 1fr 92px; }
  .lp-vt-n { font-size: 20px; }
  .lp-vt-pa .lp-vt-n { font-size: 15px; }

  .lp-inicio-rapido { margin-top: 18px; gap: 10px; }
  .lp-ir-form { max-width: 100%; padding: 14px; }
  .lp-ir-linha { flex-direction: column; gap: 10px; }
  .lp-ir-cod  { width: 100%; height: 54px; font-size: 26px; letter-spacing: 0.55em; padding-left: 0.55em; }
  .lp-ir-nome { flex: 0 0 auto; width: 100%; height: 50px; }
  .lp-ir-form .btn { width: 100%; height: 52px; }

  .lp-rodape-links { gap: 14px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .lp-traco path { animation: none; stroke-dashoffset: 0; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-marca-sinal, .lp-tag-ponto, .lp-dot-live { animation: none; }
}

/* ===========================================================================
   DESTAQUE DO HERO — "cria os teus ritmos e cenários"
   Substitui a antiga métrica larga: aqui é um caminho, não um número.
   =========================================================================== */
.lp-destaque {
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  padding: 15px 20px; border-radius: var(--r-lg); text-decoration: none;
  background: linear-gradient(100deg, rgba(0,230,160,0.10), rgba(43,215,245,0.06));
  border: 1px solid var(--accent-line);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lp-destaque:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(0,230,160,0.16); }
.lp-destaque:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lp-destaque-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 19px; font-weight: 700; line-height: 1;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.lp-destaque-txt { flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--text-mid); }
.lp-destaque-txt strong { color: var(--text-hi); font-weight: 600; }
.lp-destaque-seta { flex-shrink: 0; color: var(--accent); font-size: 16px; transition: transform .2s var(--ease); }
.lp-destaque:hover .lp-destaque-seta { transform: translateX(3px); }

/* ===========================================================================
   TESTEMUNHOS
   =========================================================================== */
.lp-testemunhos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-testemunho {
  margin: 0; height: 100%; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px,2.6vw,30px); border-radius: var(--r-lg);
  background: var(--surface-1); border: 1px solid var(--line);
}
.lp-testemunho blockquote { margin: 0; flex: 1; }
.lp-testemunho blockquote p {
  margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-hi);
  position: relative; padding-left: 18px;
}
/* aspa como marca de citação — herda o verde da linha do ECG */
.lp-testemunho blockquote p::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: 2px; background: var(--accent-line);
}
.lp-testemunho-quem { display: flex; align-items: center; gap: 13px; }
.lp-testemunho-av {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.lp-testemunho-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-testemunho-id strong { color: var(--text-hi); font-size: 14.5px; font-weight: 600; }
.lp-testemunho-id > span { font-size: 13px; color: var(--text-lo); }

/* ===========================================================================
   POPUP — entrar com código de sessão
   =========================================================================== */
.lp-modal {
  width: min(460px, calc(100vw - 28px)); padding: 0; border: none;
  background: transparent; color: var(--text-mid); overflow: visible;
}
.lp-modal::backdrop { background: rgba(3,5,8,0.72); backdrop-filter: blur(4px); }
.lp-modal[open] {
  padding: clamp(24px,3vw,32px);
  background: var(--surface-1); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg), 0 0 60px rgba(0,230,160,0.10);
  position: relative;
}
.lp-modal-fechar-form { margin: 0; }
.lp-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  color: var(--text-lo); background: transparent; border: 1px solid transparent;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.lp-modal-x:hover { color: var(--text-hi); background: var(--surface-3); }
.lp-modal-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lp-modal-h { font-size: 23px; color: var(--text-hi); margin: 0 0 10px; letter-spacing: -0.02em; }
.lp-modal-p { font-size: 14.5px; line-height: 1.6; color: var(--text-mid); margin: 0 0 20px; }
.lp-modal-p strong { color: var(--text-hi); font-weight: 600; }
.lp-modal-form { display: flex; flex-direction: column; gap: 14px; }
.lp-modal-campos { display: flex; flex-direction: column; gap: 7px; }
.lp-modal-rot { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.lp-modal-rot span { font-weight: 400; color: var(--text-lo); }
.lp-modal .lp-ir-cod { width: 100%; height: 56px; font-size: 27px; letter-spacing: 0.5em; padding-left: 0.5em; }
.lp-modal .lp-ir-nome { width: 100%; flex: 0 0 auto; height: 48px; }
.lp-modal-btn { width: 100%; justify-content: center; }
.lp-modal-aviso {
  margin: 18px 0 0; padding: 12px 15px;
  border-left: 2px solid var(--warn); background: var(--warn-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px; line-height: 1.55; color: var(--text-mid);
}
.lp-modal-aviso strong { color: var(--warn); font-weight: 600; }
.lp-modal-rodape {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
}
.lp-modal-rodape p { margin: 0; font-size: 13.5px; color: var(--text-lo); }
.lp-modal-demo { font-size: 13.5px; color: var(--accent); text-decoration: none; font-weight: 600; }
.lp-modal-demo:hover { text-decoration: underline; }

/* o CTA do módulo passou a ser <button>: repor o aspeto de link */
button.lp-modulo-cta { background: none; border: none; padding: 0; font: inherit; text-align: left; }

@media (max-width: 760px){
  .lp-testemunhos { grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .lp-destaque { padding: 13px 15px; gap: 11px; }
  .lp-destaque-txt { font-size: 13.5px; }
  .lp-modal[open] { padding: 22px 18px; }
  .lp-modal-h { font-size: 20px; }
}

/* ===========================================================================
   ARTE DA SECÇÃO CRIAÇÃO
   Substitui parágrafos por desenho. Cores todas de tokens: o verde é o do
   ECG, o âmbar é o de alerta e o vermelho é o de crítico — as mesmas
   convenções do monitor real, por isso o diagrama lê-se sem legenda.
   =========================================================================== */
.lp-criar-arte {
  margin: -6px -6px 20px; padding: 12px;
  border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.lp-criar-arte svg { display: block; width: 100%; height: auto; }

/* --- traçado de ECG --- */
.lp-a-base  { stroke: var(--line-strong); stroke-width: 1; }
.lp-a-supra { fill: rgba(0,230,160,0.18); stroke: none; }
.lp-a-traco {
  fill: none; stroke: var(--ecg); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(61,245,138,0.55));
}
.lp-a-pegas rect { fill: var(--bg-sunken); stroke: var(--accent); stroke-width: 1.8; }
.lp-a-cota { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.lp-a-rot  { fill: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }

/* --- árvore do cenário --- */
.lp-a-fios path { fill: none; stroke: var(--text-lo); stroke-width: 1.8; stroke-linecap: round; }
.lp-a-no rect { fill: var(--surface-3); stroke: var(--text-lo); stroke-width: 1.4; }
.lp-a-no text {
  fill: var(--text-hi); font-family: var(--font-mono); font-size: 12px;
  text-anchor: middle; letter-spacing: .02em;
}
.lp-a-no-alerta rect { stroke: var(--warn); fill: var(--warn-soft); }
.lp-a-no-alerta text { fill: var(--warn); }
.lp-a-no-ok rect { stroke: var(--ok); fill: rgba(43,229,166,0.12); }
.lp-a-no-ok text { fill: var(--ok); }
.lp-a-no-crit rect { stroke: var(--crit); fill: var(--crit-soft); }
.lp-a-no-crit text { fill: var(--crit); }

.lp-criar-cta { margin-top: clamp(28px,3vw,40px); }

/* Contacto no rodapé */
.lp-rodape-contacto { display: flex; flex-direction: column; gap: 4px; }
.lp-rodape-contacto-r { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.lp-rodape-contacto a { color: var(--accent); text-decoration: none; font-size: 15px; font-weight: 600; }
.lp-rodape-contacto a:hover { text-decoration: underline; }
.lp-rodape-top { align-items: flex-start; }
@media (max-width: 700px){ .lp-rodape-contacto { order: -1; } }

/* ===========================================================================
   MÓDULOS — cartões vivos
   Mesmo registo da secção "Criação": o desenho fala, o texto é curto.
   Cada cartão tem a sua arte em SVG, animada. As animações correm sempre
   (subtis) e ganham vida ao passar o rato — no telemóvel não há rato, por isso
   nunca podiam depender só do :hover.
   Cores todas de tokens: nada é inventado aqui.
   =========================================================================== */
.lp-modulos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; }
.lp-mod {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: var(--r-lg); background: var(--surface-1);
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.lp-mod:not(.is-breve):hover { border-color: var(--accent-line); background: var(--surface-2); transform: translateY(-3px); }
.lp-mod-destaque { border-color: var(--accent-line); }
.lp-mod-destaque::before {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.lp-mod-arte {
  margin: -20px -20px 4px; padding: 14px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}
.lp-mod-arte svg { display: block; width: 100%; height: auto; }
.lp-mod-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-lo); }
.lp-mod-tag-livre { color: var(--ok); }
.lp-mod-destaque .lp-mod-tag { color: var(--accent); }
.lp-mod h3 { font-size: 19px; color: var(--text-hi); margin: 0; letter-spacing: -0.015em; }
.lp-mod p { font-size: 14px; line-height: 1.55; color: var(--text-mid); flex: 1; margin: 0; }
.lp-mod-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none;
  background: none; border: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.lp-mod-cta span { transition: transform .2s var(--ease); }
.lp-mod:hover .lp-mod-cta span { transform: translateX(3px); }
.lp-mod-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.lp-mod.is-breve { opacity: .58; }
.lp-mod.is-breve .lp-mod-tag { color: var(--co2); }
.lp-mod-cta.is-inerte { color: var(--co2); cursor: default; }

/* --- peças partilhadas pelas artes --- */
.lp-m-ecra  { fill: #05070B; stroke: var(--line-strong); stroke-width: 1; }
.lp-m-traco {
  fill: none; stroke: var(--ecg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(61,245,138,0.5));
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: modTraco 3.2s linear infinite;
}
.lp-m-traco-lento { animation-duration: 4.2s; }
@keyframes modTraco { to { stroke-dashoffset: 0; } }

/* 1. Consola: os chips acendem à vez, como se alguém os estivesse a carregar */
/* --text-lo (nao --text-faint): sobre o fundo #05070B do ecra, o faint dava
   ~4:1 e os chips liam-se mal. Foi o mesmo erro que cometi na arvore da
   seccao Criacao — la, o --text-lo mediu 15:1. */
.lp-m-chip rect { fill: var(--surface-3); stroke: var(--text-lo); stroke-width: 1.2; }
.lp-m-chip text { fill: var(--text-mid); font-family: var(--font-mono); font-size: 10px; text-anchor: middle; }
.lp-m-chip { animation: modChip 7s ease-in-out infinite; }
.lp-m-c1 { animation-delay: 0s; }  .lp-m-c2 { animation-delay: 1s; }
.lp-m-c3 { animation-delay: 2s; }  .lp-m-c4 { animation-delay: 3s; }
.lp-m-c5 { animation-delay: 4s; }  .lp-m-c6 { animation-delay: 5s; }
.lp-m-c7 { animation-delay: 6s; }
@keyframes modChip {
  0%, 88%, 100% { opacity: .55; }
  92%           { opacity: 1; }
}
.lp-mod-destaque:hover .lp-m-chip rect { stroke: var(--accent-line); }

/* 2. Monitor: só ver */
.lp-m-live circle { fill: var(--crit); animation: lpPulse 1.4s infinite; }
.lp-m-live text { fill: var(--crit); font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; }
.lp-m-vt-l { fill: var(--text-lo); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; }
.lp-m-vt-n { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.lp-m-n-ecg { fill: var(--ecg); } .lp-m-n-pa { fill: var(--pa); font-size: 13px; }
.lp-m-n-spo2 { fill: var(--spo2); } .lp-m-n-co2 { fill: var(--co2); }

/* 3. Academia: lições empilhadas */
.lp-m-carta { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.lp-m-carta3 { opacity: .35; } .lp-m-carta2 { opacity: .6; }
.lp-m-carta1 { fill: var(--surface-3); }
.lp-m-mini { fill: none; stroke: var(--ecg); stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.lp-m-perg { fill: var(--text-mid); font-family: var(--font-sans); font-size: 10px; }
.lp-m-op rect { fill: var(--surface-4); stroke: var(--line-strong); stroke-width: 1; }
.lp-m-op text { fill: var(--text-lo); font-family: var(--font-sans); font-size: 9px; }
.lp-m-op-certa rect { fill: rgba(43,229,166,0.12); stroke: var(--ok); }
.lp-m-op-certa text { fill: var(--ok); }
.lp-m-visto {
  fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; animation: modVisto 3.4s ease-in-out infinite;
}
@keyframes modVisto { 0%,20%{stroke-dashoffset:22;} 45%,88%{stroke-dashoffset:0;} 100%{stroke-dashoffset:22;} }
.lp-m-barra-f { fill: var(--surface-4); }
.lp-m-barra { fill: var(--accent); transform-origin: 42px 0; animation: modBarra 3.4s ease-in-out infinite; }
@keyframes modBarra { 0%,20%{transform:scaleX(.12);} 45%,88%{transform:scaleX(.68);} 100%{transform:scaleX(.12);} }

@media (max-width: 560px){ .lp-mod { padding: 18px; } .lp-mod-arte { margin: -18px -18px 4px; padding: 12px; } }
@media (prefers-reduced-motion: reduce){
  .lp-m-traco, .lp-m-chip, .lp-m-visto, .lp-m-barra, .lp-m-live circle { animation: none; }
  .lp-m-traco { stroke-dashoffset: 0; }
  .lp-m-visto { stroke-dashoffset: 0; }
  .lp-m-barra { transform: scaleX(.68); }
}

/* ---------- Mini-monitor do hero (mobile) ----------
   Um pequeno monitor real no hero, para o telemóvel ter movimento e presença
   clínica. Em ecrãs largos fica escondido: aí o traçado de fundo (lp-hero-ecg)
   já cumpre esse papel. Tokens do tema; zero !important. */
.lp-hero-mon {
  display: none;
  margin: 22px 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md, 12px);
  background: var(--bg-sunken, #05070B);   /* opaco: o fundo do hero não transparece */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.lp-hero-mon-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
}
.lp-hero-mon-etq { display: inline-flex; align-items: center; gap: 8px; color: var(--text-mid); text-transform: uppercase; }
.lp-hero-mon-fc { color: var(--accent); }
.lp-hero-mon-fc b { font-size: 15px; font-weight: 700; }
.lp-hero-mon-canvas { display: block; width: 100%; height: 116px; }
@media (max-width: 720px) {
  .lp-hero-mon { display: block; }
  /* O ritmo passa ATRÁS DO TÍTULO (o landing.js posiciona o canvas na zona
     do h1). Opacidade próxima do desktop; o texto mantém-se legível porque
     o traçado é fino e desfocado. */
  .lp-hero-ecg { opacity: .5; }
}

/* ===================== Secção PLANO PRO (conversional) ===================== */
.lp-pro { padding: clamp(48px, 8vw, 96px) 20px; background:
  radial-gradient(120% 80% at 50% 0%, rgba(0,230,160,0.07) 0%, transparent 60%), var(--surface-0, #0B0F15); }
.lp-pro-int { max-width: 1000px; margin: 0 auto; }
.lp-pro-cabeca { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.lp-pro-cabeca h2 { margin: 8px 0 14px; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.12; }
.lp-pro-lead { color: var(--text-mid); font-size: 1.05rem; line-height: 1.6; }
.lp-pro-lead strong { color: var(--text-hi); }

.lp-pro-grelha { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lp-pro-grelha { grid-template-columns: 1fr 1fr; } }

.lp-pro-col {
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-1) 70%);
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  padding: 24px 24px 22px;
}
.lp-pro-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: 1.12rem; color: var(--text-hi); }
.lp-pro-ico { font-size: 1.3rem; line-height: 1; }
.lp-pro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lp-pro-lista li { position: relative; padding-left: 28px; color: var(--text-mid);
  font-size: 0.95rem; line-height: 1.5; }
.lp-pro-lista li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; }
.lp-pro-lista strong { color: var(--text-hi); font-weight: 600; }

.lp-pro-cta {
  margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding: 22px 26px;
  background: linear-gradient(120deg, rgba(0,230,160,0.12), rgba(0,230,160,0.04));
  border: 1px solid var(--accent-line, rgba(0,230,160,0.35)); border-radius: var(--r-lg, 16px);
}
.lp-pro-cta-txt { display: grid; gap: 3px; }
.lp-pro-cta-txt strong { font-size: 1.12rem; color: var(--text-hi); }
.lp-pro-cta-txt span { font-size: 0.9rem; color: var(--text-mid); }
.lp-pro-cta .btn { flex-shrink: 0; }
.lp-pro-nota { margin: 16px 2px 0; text-align: center; font-size: 0.82rem; color: var(--text-lo); line-height: 1.5; }