@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --azul-petroleo: #102A43;
  --coral: #FF6B6B;
  --marfil: #F7F5F2;
  --grafito: #1F2933;
  --blanco: #FFFFFF;
  --font-heading: 'Satoshi', 'Manrope', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  color: var(--grafito);
  background: var(--blanco);
  margin: 0;
  line-height: 1.5;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--azul-petroleo);
}

/* Hero / secciones oscuras */
.sq-hero {
  background: var(--azul-petroleo);
  color: var(--blanco);
  padding: 64px 24px;
}
.sq-hero h1 { color: var(--blanco); }
.sq-hero .sq-tagline { color: var(--marfil); font-size: 1.1rem; }

/* CTA — siempre coral sobre fondo oscuro o marfil, nunca coral sobre coral */
.sq-cta {
  display: inline-block;
  background: var(--coral);
  color: var(--blanco);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.sq-cta:hover { filter: brightness(1.05); }

/* Sección clara estándar */
.sq-section { padding: 56px 24px; background: var(--marfil); }
.sq-section.sq-white { background: var(--blanco); }

/* Checkmark como elemento gráfico recurrente — usar en vez de bullets genéricos */
.sq-check-list { list-style: none; padding: 0; margin: 0; }
.sq-check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.sq-check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--coral);
  font-weight: 700;
}

/* Tarjetas / principios */
.sq-card {
  background: var(--blanco);
  border: 1px solid var(--marfil);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .08);
}
.sq-card h3 { margin-top: 0; }

body{background:var(--marfil)}.btn,.nav button.primary{color:var(--azul-petroleo);text-align:center;text-decoration:none}.hero h1,.scoreband h1{color:var(--blanco)}.question{border:0;padding:0;margin:0;min-width:0}.question legend{float:left;width:100%}.opts{clear:both}.qtext{white-space:pre-line}.sheet h2{font-size:1.1rem;margin-top:0}progress{width:100%;height:8px;accent-color:var(--azul-petroleo)}.progress-note{font-size:.85rem;color:var(--azul-petroleo)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.field input,.field select{width:100%;padding:12px 14px;border:1.5px solid rgba(16,42,67,.35);border-radius:9px;font:inherit;color:var(--grafito);background:var(--blanco)}.field small{font-size:.78rem}.consent input{accent-color:var(--azul-petroleo)}.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}.err{color:var(--azul-petroleo)}.bar .row{gap:12px}.bar .row b{white-space:nowrap}.opt{min-height:54px}.opt.sel{background:var(--marfil)}.rev .l b{color:var(--azul-petroleo)}.qmeta .area{color:var(--azul-petroleo)}.qmeta .count{color:var(--azul-petroleo)}.cell{font-size:.8rem}a{color:var(--azul-petroleo)}:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.btn:disabled{background:var(--marfil);color:var(--azul-petroleo)}#lead-status{min-height:1.6em;font-weight:700}#r-extra{font-size:1.15rem}#q-text:focus,#results-title:focus{outline:none}@media(max-width:520px){.form-grid{grid-template-columns:1fr}.qmeta{letter-spacing:.03em;gap:10px}.nav{gap:8px}.sheet{padding:18px}.opt{padding:14px 12px}}