/* ProveedoresDeGobierno.com — landing + pricing (Plan L7).
   Design tokens carried from docs/ideation/assets/product-tiers-experience-2026-06-30.html
   so the public site reads as the same product. Provider-agnostic plain static CSS:
   no build step, no framework — opens from file:// and deploys to Cloudflare Pages as-is. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px;

  --bg-page: #e9e8e2;
  --bg-primary: #ffffff; --bg-secondary: #f3f2ed; --bg-tertiary: #e9e8e2;
  --bg-info: #E6F1FB; --bg-success: #E1F5EE; --bg-warning: #FAEEDA; --bg-danger: #FCEBEB; --bg-purple: #EEEDFE;

  --text-primary: #1a1a1a; --text-secondary: #5f5e5a; --text-tertiary: #8a8980;
  --text-info: #185FA5; --text-success: #0F6E56; --text-warning: #854F0B; --text-danger: #A32D2D; --text-purple: #3C3489;

  --border-tertiary: rgba(0,0,0,0.12); --border-secondary: rgba(0,0,0,0.22); --border-primary: rgba(0,0,0,0.32);

  /* tier accents — Observa (free) / Prepara (paid) / Participa (future) */
  --tier-free: 29,158,117;
  --tier-paid: 55,138,221;
  --tier-part: 127,119,221;

  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #1a1a1d;
    --bg-primary: #26262a; --bg-secondary: #303035; --bg-tertiary: #1a1a1d;
    --bg-info: #0C447C; --bg-success: #085041; --bg-warning: #633806; --bg-danger: #791F1F; --bg-purple: #3C3489;
    --text-primary: #f2f2f0; --text-secondary: #b4b2a9; --text-tertiary: #8a8980;
    --text-info: #85B7EB; --text-success: #5DCAA5; --text-warning: #FAC775; --text-danger: #F09595; --text-purple: #AFA9EC;
    --border-tertiary: rgba(255,255,255,0.13); --border-secondary: rgba(255,255,255,0.24); --border-primary: rgba(255,255,255,0.34);
    --tier-free: 93,202,165; --tier-paid: 133,183,235; --tier-part: 175,169,236;
    --shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.28);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page); color: var(--text-primary);
  font-family: var(--font-sans); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--text-info); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ---------- layout ---------- */
.wrap { max-width: 960px; margin: 0 auto; padding: 0 22px; }
.section { padding: 56px 0; }
.section-tight { padding: 34px 0; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.lede { font-size: 15.5px; color: var(--text-secondary); max-width: 66ch; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: .5px solid var(--border-tertiary);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 58px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; color: var(--text-primary); }
.brand i { color: rgb(var(--tier-paid)); font-size: 20px; }
.brand:hover { text-decoration: none; }
.nav .spacer { flex: 1; }
.nav a.navlink { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.nav a.navlink:hover { color: var(--text-primary); text-decoration: none; }
@media (max-width: 560px) { .nav a.navlink.hide-sm { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: transform .04s ease, filter .15s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.03); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--tier-paid)); color: #fff; }
.btn-free { background: rgb(var(--tier-free)); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-secondary); }
.btn-lg { padding: 13px 24px; font-size: 15.5px; }
.btn i { font-size: 17px; }

/* ---------- hero ---------- */
.hero { padding: 66px 0 40px; }
.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; max-width: 19ch; text-wrap: balance; }
.hero .sub { font-size: 17.5px; color: var(--text-secondary); max-width: 60ch; margin-top: 18px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.hero .microcopy { font-size: 12.5px; color: var(--text-tertiary); margin-top: 14px; }
@media (max-width: 640px) { .hero h1 { font-size: 30px; } .hero .sub { font-size: 16px; } }

/* ---------- resolution row (three surfaces) ---------- */
.rescards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 8px; }
.rescard { background: var(--bg-primary); border: .5px solid var(--border-tertiary); border-radius: var(--radius-lg); padding: 17px 18px; }
.rescard i { font-size: 22px; color: rgb(var(--tier-paid)); }
.rescard h3 { font-size: 15px; font-weight: 600; margin: 10px 0 5px; }
.rescard p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }
@media (max-width: 720px) { .rescards { grid-template-columns: 1fr; } }

/* ---------- question ladder ---------- */
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.qgroup { background: var(--bg-primary); border: .5px solid var(--border-tertiary); border-radius: var(--radius-lg); padding: 16px 17px; }
.qgroup .qh { font-size: 13.5px; font-weight: 600; margin: 0 0 11px; display: flex; gap: 8px; align-items: baseline; }
.qgroup .qh .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.qgroup ul { margin: 0; padding: 0; list-style: none; }
.qgroup li { font-size: 13.5px; color: var(--text-secondary); padding: 8px 0 8px 22px; position: relative; border-top: .5px dashed var(--border-tertiary); }
.qgroup li:first-child { border-top: none; }
.qgroup li::before { content: "\ea6c"; font-family: "tabler-icons"; position: absolute; left: 0; top: 9px; font-size: 14px; color: var(--text-tertiary); }
.startline { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 15px 18px; margin: 0 0 16px; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.startline i { font-size: 22px; color: var(--text-secondary); }
@media (max-width: 720px) { .qgrid { grid-template-columns: 1fr; } }

/* ---------- tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; max-width: 680px; margin-inline: auto; }
.tier { background: var(--bg-primary); border: .5px solid var(--border-tertiary); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.tier .cap { padding: 16px 18px 14px; border-bottom: .5px solid var(--border-tertiary); position: relative; }
.tier .cap .nm { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.tier .cap .nm i { font-size: 20px; }
.tier .cap .internal { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.tier .cap .tl { font-size: 13px; color: var(--text-secondary); margin-top: 8px; font-style: italic; }
.tier .price { padding: 14px 18px 4px; }
.tier .price .amt { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.tier .price .unit { font-size: 13px; color: var(--text-tertiary); }
.tier .price .free { font-size: 22px; font-weight: 700; color: rgb(var(--tier-free)); }
.tier .body { padding: 12px 18px 6px; font-size: 13.5px; color: var(--text-secondary); flex: 1; }
.tier ul.feat { list-style: none; margin: 8px 0 0; padding: 0; }
.tier ul.feat li { font-size: 13px; color: var(--text-secondary); padding: 7px 0 7px 24px; position: relative; }
.tier ul.feat li::before { content: "\ea5e"; font-family: "tabler-icons"; position: absolute; left: 0; top: 7px; font-size: 15px; }
.tier.free ul.feat li::before { color: rgb(var(--tier-free)); }
.tier.paid ul.feat li::before { color: rgb(var(--tier-paid)); }
.tier .ctarow { padding: 14px 18px 18px; }
.tier .who { padding: 12px 18px; border-top: .5px solid var(--border-tertiary); font-size: 12.5px; color: var(--text-tertiary); display: flex; gap: 7px; align-items: flex-start; }
.tier .who i { font-size: 15px; margin-top: 1px; }

.tier.free .cap { border-top: 3px solid rgb(var(--tier-free)); }
.tier.paid .cap { border-top: 3px solid rgb(var(--tier-paid)); }
.tier.part .cap { border-top: 3px solid rgb(var(--tier-part)); }
.tier.free .nm i { color: rgb(var(--tier-free)); }
.tier.paid .nm i { color: rgb(var(--tier-paid)); }
.tier.part .nm i { color: rgb(var(--tier-part)); }

/* the future tier reads as quieter + clearly not-yet-buyable */
.tier.part { opacity: .92; }
.tier.part .body, .tier.part .price { filter: grayscale(.15); }
.badge-soon { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--bg-purple); color: var(--text-purple); }
.badge-live { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--bg-success); color: var(--text-success); }
.tier .cap .flag { position: absolute; top: 15px; right: 16px; }
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- teaser + matrix tables ---------- */
.scroller { overflow-x: auto; border: .5px solid var(--border-tertiary); border-radius: var(--radius-lg); background: var(--bg-primary); }
table.tz, table.mx { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.tz { min-width: 560px; } table.mx { min-width: 680px; }
table.tz th, table.tz td, table.mx th, table.mx td { border-bottom: .5px solid var(--border-tertiary); padding: 12px 15px; text-align: left; vertical-align: top; }
table.tz th, table.mx thead th { background: var(--bg-secondary); font-weight: 600; font-size: 12.5px; }
table.mx thead th { text-align: center; } table.mx thead th:first-child { text-align: left; min-width: 236px; }
table.tz tr:last-child td, table.mx tr:last-child td { border-bottom: none; }
table.mx td.q { color: var(--text-primary); font-weight: 500; }
table.mx td.c { text-align: center; white-space: nowrap; }
.arrow { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12.5px; }
.a-free { color: var(--text-success); } .a-paid { color: var(--text-info); } .a-part { color: var(--text-purple); }
.pill { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 20px; }
.pill.full { background: var(--bg-success); color: var(--text-success); }
.pill.broad { background: var(--bg-secondary); color: var(--text-secondary); }
.pill.exact { background: var(--bg-info); color: var(--text-info); }
.pill.peek { background: var(--bg-warning); color: var(--text-warning); }
.pill.soon { background: var(--bg-purple); color: var(--text-purple); }
.pill.no { color: var(--text-tertiary); }
.legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 13px; align-items: center; }
.legnote { font-size: 12.5px; color: var(--text-secondary); margin: 12px 0 0; max-width: 74ch; }
.legnote b { color: var(--text-primary); }

/* ---------- callouts ---------- */
.callout { display: flex; gap: 12px; border-radius: var(--radius-lg); padding: 16px 18px; font-size: 14px; line-height: 1.6; }
.callout .ci { font-size: 22px; flex: 0 0 24px; margin-top: 1px; }
.callout.info { background: var(--bg-info); color: var(--text-info); }
.callout.ok { background: var(--bg-success); color: var(--text-success); }
.callout b { font-weight: 600; }

/* ---------- value-prop comparison (sin la herramienta vs con) ---------- */
.cmpwrap { border: .5px solid var(--border-tertiary); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); box-shadow: var(--shadow-card); }
table.cmp { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.cmp th, table.cmp td { padding: 14px 18px; text-align: left; vertical-align: top; width: 50%; }
table.cmp thead th { font-size: 14px; font-weight: 700; letter-spacing: .01em; border-bottom: .5px solid var(--border-tertiary); }
table.cmp thead th i { margin-right: 8px; font-size: 17px; vertical-align: -2px; }
table.cmp .bad { background: var(--bg-secondary); color: var(--text-secondary); }
table.cmp .good { background: var(--bg-success); color: var(--text-success); }
table.cmp thead th.bad { color: var(--text-primary); }
table.cmp thead th.good { color: var(--text-success); }
table.cmp tbody td { border-top: .5px solid var(--border-tertiary); font-size: 13.5px; line-height: 1.5; }
table.cmp .cell { display: flex; gap: 9px; align-items: flex-start; }
table.cmp .cell i { font-size: 16px; margin-top: 1px; flex: 0 0 auto; }
table.cmp .bad .cell i { color: var(--text-tertiary); }
table.cmp .good .cell i { color: rgb(var(--tier-free)); }
@media (max-width: 560px) { table.cmp th, table.cmp td { padding: 11px 12px; font-size: 12.5px; } table.cmp thead th { font-size: 12.5px; } }

/* ---------- signup form ---------- */
.signup { background: var(--bg-primary); border: .5px solid var(--border-tertiary); border-radius: var(--radius-xl); padding: 26px 26px 28px; box-shadow: var(--shadow-card); }
.signup h2 { font-size: 23px; font-weight: 700; }
.signup .lede { margin: 10px 0 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.field .hint { font-size: 11.5px; color: var(--text-tertiary); font-weight: 400; }
.field input, .field select {
  font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-secondary); background: var(--bg-secondary); color: var(--text-primary); width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid rgb(var(--tier-paid)); outline-offset: 1px; border-color: transparent; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8980' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
.consent { grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.consent input { margin-top: 3px; }
.signup .submit-row { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.signup .privacy { font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { border-top: .5px solid var(--border-secondary); padding: 30px 0 48px; margin-top: 20px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; }
.foot .brand { font-size: 14px; }
.foot .spacer { flex: 1; }
.foot a { color: var(--text-secondary); font-size: 13px; }
.foot .fine { font-size: 12px; color: var(--text-tertiary); width: 100%; margin-top: 6px; }

/* ---------- utility ---------- */
.center { text-align: center; }
.mt-s { margin-top: 10px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 32px; }
.divider { height: .5px; background: var(--border-secondary); border: 0; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }