/* Ciudadex marketing site — Sunlit Stone.
   Hand-rolled like /admin/ciudadex.css: no build step, plain CSS.
   Sections mirror product/design/website/marketing/sections.jsx 1:1; the
   design tokens are window.TOKENS from Inicio.html, lifted verbatim as
   custom properties. Linked with a manual ?v=N cache-buster (public/ ships
   a 1-year cache header and this file isn't digest-stamped — bump N on
   every change). */

/* ── Fonts — self-hosted (RGPD: no fonts.gstatic.com request) ─────────────
   Variable woff2 (latin + latin-ext) fetched once from Google Fonts.
   Fredoka + Geist + Geist Mono are OFL-licensed; redistribution is fine. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/site/fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/site/fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/site/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/site/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/site/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/site/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens (window.TOKENS, Sunlit Stone) ─────────────────────────────── */
:root {
  --cdx-bg: #F6EFE1;
  --cdx-surface: #FFFFFF;
  --cdx-surface-alt: #FAF4E7;
  --cdx-line: rgba(40, 28, 12, 0.08);
  --cdx-line-strong: rgba(40, 28, 12, 0.18);
  --cdx-ink: #1A1208;
  --cdx-ink-soft: #5B4A33;
  --cdx-ink-mute: #8A7656;
  --cdx-brand: #D17C4F;
  --cdx-brand-ink: #7A3E18;
  --cdx-brand-wash: #FBE9DC;
  --cdx-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --cdx-body: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --cdx-mono: "Geist Mono", ui-monospace, monospace;
  /* dark sections reuse these */
  --cdx-cream-74: rgba(246, 239, 225, 0.74);
  --cdx-cream-66: rgba(246, 239, 225, 0.66);
  --cdx-cream-60: rgba(246, 239, 225, 0.6);
  --cdx-cream-50: rgba(246, 239, 225, 0.5);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cdx-bg);
  color: var(--cdx-ink);
  font-family: var(--cdx-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(209, 124, 79, 0.25); }
img { -webkit-user-drag: none; user-select: none; }
a { -webkit-tap-highlight-color: transparent; }

.cdx-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* mono eyebrow with the short leading rule */
.cdx-eyebrow {
  font-family: var(--cdx-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cdx-brand);
  display: flex; align-items: center; gap: 10px;
}
.cdx-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.5;
}
.cdx-eyebrow--light { color: var(--cdx-cream-60); }

/* buttons */
.cdx-btn {
  display: inline-block; padding: 15px 28px; border-radius: 999px;
  font-family: var(--cdx-body); font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; border: none;
}
.cdx-btn--primary {
  background: var(--cdx-brand); color: #fff;
  box-shadow: 0 12px 30px rgba(122, 62, 24, 0.28);
}
.cdx-btn--ghost {
  background: transparent; color: var(--cdx-ink);
  border: 1.5px solid var(--cdx-line-strong);
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.cdx-nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: all .3s;
}
.cdx-nav.is-solid {
  background: rgba(246, 239, 225, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cdx-line);
}
.cdx-nav-inner {
  display: flex; align-items: center; justify-content: space-between; height: 68px;
}
.cdx-nav-wordmark {
  font-family: var(--cdx-display); font-weight: 600; font-size: 22px;
  color: var(--cdx-brand); text-decoration: none;
}
.cdx-navlinks { display: flex; align-items: center; gap: 28px; }
.cdx-navlinks a {
  font-family: var(--cdx-body); font-size: 14.5px;
  color: var(--cdx-ink-soft); text-decoration: none;
}
.cdx-nav-right { display: flex; align-items: center; gap: 16px; }
.cdx-nav-lang {
  font-family: var(--cdx-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; display: flex; align-items: center; gap: 6px;
}
.cdx-nav-lang a { color: var(--cdx-ink-mute); text-decoration: none; }
.cdx-nav-lang a.is-current { color: var(--cdx-brand); font-weight: 600; }
.cdx-nav-lang .sep { color: var(--cdx-line-strong); }
.cdx-nav-cta {
  padding: 9px 18px; border-radius: 999px; background: var(--cdx-ink);
  color: var(--cdx-bg); font-family: var(--cdx-body); font-weight: 600;
  font-size: 14px; text-decoration: none;
}

/* ── Hero (withPhone layout — homepage default) ───────────────────────── */
.cdx-hero { position: relative; overflow: hidden; }
.cdx-hero-glow {
  position: absolute; top: -160px; right: 38%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(209, 124, 79, 0.18), transparent 62%);
  pointer-events: none;
}
.cdx-hero-inner { padding-top: 56px; padding-bottom: 40px; position: relative; }
.cdx-hero-grid {
  display: grid; gap: 48px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}
.cdx-hero-title {
  font-family: var(--cdx-display); font-weight: 600; color: var(--cdx-ink);
  font-size: clamp(38px, 5vw, 60px); line-height: 1.02;
  letter-spacing: -0.015em; margin: 20px 0 0; text-wrap: balance;
}
.cdx-hero-title span { display: block; }
.cdx-hero-title .accent { color: var(--cdx-brand); }
.cdx-hero-sub {
  font-family: var(--cdx-body); font-size: 17px; line-height: 1.6;
  color: var(--cdx-ink-soft); margin: 22px 0 0; max-width: 560px; text-wrap: pretty;
}
.cdx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cdx-hero-metric {
  margin-top: 18px; font-family: var(--cdx-mono); font-size: 11.5px;
  color: var(--cdx-ink-mute); letter-spacing: 0.02em; max-width: 480px;
}
.cdx-hero-phone { display: grid; place-items: center; }
/* reserve the phone's height so lazy hydration doesn't shift the layout */
.cdx-demo-slot { min-height: 700px; display: grid; place-items: center; width: 100%; }

/* ── How it works — loop "recorrido" (path variant) ───────────────────── */
.cdx-loop {
  background: var(--cdx-surface-alt);
  border-top: 1px solid var(--cdx-line); border-bottom: 1px solid var(--cdx-line);
}
.cdx-loop .cdx-wrap { padding-top: 84px; padding-bottom: 84px; }
.cdx-h2 {
  font-family: var(--cdx-display); font-weight: 600;
  font-size: clamp(30px, 4vw, 46px); color: var(--cdx-ink);
  margin: 18px 0 0; line-height: 1.05; letter-spacing: -0.01em;
  max-width: 720px; text-wrap: balance;
}
.cdx-loop-sub {
  font-family: var(--cdx-body); font-size: 17px; line-height: 1.6;
  color: var(--cdx-ink-soft); margin: 16px 0 0; max-width: 600px; text-wrap: pretty;
}
.cdx-loop-wrap { margin-top: 56px; }
.cdx-loop-path { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; position: relative; }
.cdx-loop-line {
  position: absolute; top: 25px; left: calc(100% / 12); right: calc(100% / 12); height: 2px;
  background: repeating-linear-gradient(90deg, var(--cdx-brand) 0 10px, transparent 10px 18px);
  opacity: 0.55;
}
.cdx-loop-step { position: relative; text-align: center; }
.cdx-node {
  width: 50px; height: 50px; border-radius: 50%; margin: 0 auto;
  background: var(--cdx-brand); color: #fff; display: grid; place-items: center;
  font-family: var(--cdx-display); font-weight: 600; font-size: 18px;
  box-shadow: 0 0 0 6px var(--cdx-surface-alt), 0 6px 16px rgba(122, 62, 24, 0.28);
  position: relative; z-index: 2;
}
.cdx-loop-text { margin-top: 16px; }
.cdx-loop-text h3 {
  font-family: var(--cdx-display); font-weight: 600; font-size: 18px;
  color: var(--cdx-ink); margin: 0 0 6px; line-height: 1.12;
}
.cdx-loop-text p {
  font-family: var(--cdx-body); font-size: 13.5px; line-height: 1.5;
  color: var(--cdx-ink-soft); margin: 0; text-wrap: pretty;
}
.cdx-loop-chip-row { display: flex; justify-content: center; margin-top: 36px; }
.cdx-loop-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px;
  border-radius: 999px; background: var(--cdx-brand-wash); border: 1px solid var(--cdx-line);
  font-family: var(--cdx-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--cdx-brand-ink); text-transform: uppercase;
}

/* ── Heritage / archive collage ───────────────────────────────────────── */
.cdx-heritage .cdx-wrap { padding-top: 84px; padding-bottom: 84px; }
.cdx-heritage-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px; align-items: center;
}
.cdx-heritage .cdx-h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; }
.cdx-heritage-body {
  font-family: var(--cdx-body); font-size: 17px; line-height: 1.62;
  color: var(--cdx-ink-soft); margin: 18px 0 0; text-wrap: pretty;
}
.cdx-points { margin-top: 26px; display: grid; gap: 14px; }
.cdx-point { display: flex; gap: 14px; align-items: flex-start; }
.cdx-point-n {
  flex-shrink: 0; margin-top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cdx-brand-wash); color: var(--cdx-brand-ink);
  display: grid; place-items: center;
  font-family: var(--cdx-mono); font-size: 11px; font-weight: 600;
}
.cdx-point-t { font-family: var(--cdx-body); font-weight: 600; font-size: 15.5px; color: var(--cdx-ink); }
.cdx-point-d { font-family: var(--cdx-body); font-size: 14px; line-height: 1.5; color: var(--cdx-ink-soft); margin-top: 2px; text-wrap: pretty; }
.cdx-collage { position: relative; min-height: 380px; }
.cdx-polaroid {
  position: absolute; margin: 0; background: #fff; padding: 8px 8px 26px;
  border-radius: 3px; box-shadow: 0 18px 40px rgba(40, 28, 12, 0.18);
}
.cdx-polaroid img, .cdx-polaroid .ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.cdx-polaroid .ph { background: var(--cdx-surface-alt); }
.cdx-polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 7px; text-align: center;
  font-family: var(--cdx-mono); font-size: 10px; letter-spacing: 0.1em; color: #5a4a33;
}

/* ── Invite / download ────────────────────────────────────────────────── */
.cdx-invite { background: var(--cdx-surface-alt); border-top: 1px solid var(--cdx-line); }
.cdx-invite .cdx-wrap { padding-top: 78px; padding-bottom: 78px; }
.cdx-invite-card {
  background: var(--cdx-surface); border-radius: 26px; border: 1px solid var(--cdx-line);
  padding: clamp(28px, 4vw, 52px); box-shadow: 0 12px 36px rgba(40, 28, 12, 0.06);
}
.cdx-invite-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px; align-items: center;
}
.cdx-invite .cdx-h2 { font-size: clamp(26px, 3.3vw, 38px); margin: 16px 0 0; line-height: 1.08; }
.cdx-invite-body {
  font-family: var(--cdx-body); font-size: 16px; line-height: 1.6;
  color: var(--cdx-ink-soft); margin: 16px 0 0; text-wrap: pretty;
}
.cdx-store-row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.cdx-store-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border-radius: 14px; background: var(--cdx-ink); color: var(--cdx-bg);
  font-family: var(--cdx-body); font-weight: 600; font-size: 14px;
}
.cdx-store-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cdx-brand);
}
.cdx-invite-steps {
  list-style: none; margin: 0; padding: 0; display: grid;
  border: 1px solid var(--cdx-line); border-radius: 16px; overflow: hidden;
}
.cdx-invite-steps li {
  display: flex; gap: 14px; align-items: center; padding: 18px 20px;
  background: var(--cdx-bg); border-top: 1px solid var(--cdx-line);
}
.cdx-invite-steps li:first-child { border-top: none; }
.cdx-step-n {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cdx-brand); color: #fff; display: grid; place-items: center;
  font-family: var(--cdx-display); font-weight: 600; font-size: 15px;
}
.cdx-invite-steps span:last-child { font-family: var(--cdx-body); font-size: 15px; color: var(--cdx-ink); font-weight: 500; }

/* ── FAQ — native <details> accordion ─────────────────────────────────── */
.cdx-faq .cdx-wrap { padding-top: 84px; padding-bottom: 84px; max-width: 860px; }
.cdx-faq .cdx-h2 { font-size: clamp(28px, 3.6vw, 44px); margin: 18px 0 36px; line-height: 1.06; }
.cdx-faq-list { border-top: 1px solid var(--cdx-line-strong); }
.cdx-faq-item { border-bottom: 1px solid var(--cdx-line); }
.cdx-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; cursor: pointer; list-style: none;
}
.cdx-faq-item summary::-webkit-details-marker { display: none; }
.cdx-faq-q {
  font-family: var(--cdx-display); font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px); color: var(--cdx-ink); line-height: 1.2;
}
.cdx-faq-plus {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--cdx-line-strong); display: grid; place-items: center;
  color: var(--cdx-brand); font-size: 18px; line-height: 1;
  transition: transform .25s;
}
.cdx-faq-item[open] .cdx-faq-plus { transform: rotate(45deg); }
.cdx-faq-a {
  font-family: var(--cdx-body); font-size: 16px; line-height: 1.62;
  color: var(--cdx-ink-soft); margin: 0; padding: 0 4px 24px;
  max-width: 680px; text-wrap: pretty;
}

/* ── Founder + contact (dark) ─────────────────────────────────────────── */
.cdx-founder { background: var(--cdx-ink); color: var(--cdx-bg); }
.cdx-founder .cdx-wrap { padding-top: 88px; padding-bottom: 88px; }
.cdx-founder-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px;
}
.cdx-founder .cdx-h2 {
  font-size: clamp(28px, 3.6vw, 42px); color: var(--cdx-bg);
  margin: 18px 0 22px; line-height: 1.08;
}
.cdx-founder-p {
  font-family: var(--cdx-body); font-size: 16px; line-height: 1.65;
  color: var(--cdx-cream-74); margin: 0 0 14px; text-wrap: pretty;
}
.cdx-founder-sig {
  font-family: var(--cdx-display); font-style: italic; font-size: 18px;
  color: var(--cdx-bg); margin-top: 18px;
}
.cdx-contact-card {
  background: rgba(246, 239, 225, 0.05); border: 1px solid rgba(246, 239, 225, 0.14);
  border-radius: 22px; padding: clamp(24px, 3vw, 36px);
}
.cdx-contact-card h3 {
  font-family: var(--cdx-display); font-weight: 600; font-size: 26px;
  color: var(--cdx-bg); margin: 0 0 6px; line-height: 1.1;
}
.cdx-contact-sub {
  font-family: var(--cdx-body); font-size: 15px; line-height: 1.5;
  color: var(--cdx-cream-66); margin: 0 0 22px;
}
.cdx-contact-card .cdx-btn--primary { display: block; text-align: center; }
.cdx-contact-alt {
  margin-top: 18px; font-family: var(--cdx-mono); font-size: 12px;
  color: var(--cdx-cream-50); letter-spacing: 0.02em;
}
.cdx-contact-alt a { color: var(--cdx-brand); text-decoration: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.cdx-footer { background: var(--cdx-bg); border-top: 1px solid var(--cdx-line); }
.cdx-footer .cdx-wrap {
  padding-top: 40px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.cdx-footer-wordmark { font-family: var(--cdx-display); font-weight: 600; font-size: 19px; color: var(--cdx-brand); }
.cdx-footer-tagline { font-family: var(--cdx-body); font-size: 13.5px; color: var(--cdx-ink-mute); margin-top: 4px; }
.cdx-footer-right { text-align: right; }
.cdx-footer-right div { font-family: var(--cdx-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--cdx-ink-mute); }
.cdx-footer-right div + div { margin-top: 4px; letter-spacing: normal; }
.cdx-footer-right a { color: var(--cdx-ink-mute); text-decoration: underline; text-underline-offset: 2px; }

/* ── Keyframes (demo island: confetti / reticle / light burst) ────────── */
@keyframes cdxFall {
  0%   { transform: translate(0, 0) rotate(var(--rot)); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--drift), 680px) rotate(calc(var(--rot) + 600deg)); opacity: 0; }
}
@keyframes cdxSpin { to { transform: rotate(360deg); } }
@keyframes cdxPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
@keyframes cdxBurstIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Responsive (breakpoints from Inicio.html) ────────────────────────── */
@media (max-width: 880px) {
  .cdx-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cdx-loop-path { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
  .cdx-loop-line {
    top: 25px; bottom: 25px; left: 25px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--cdx-brand) 0 10px, transparent 10px 18px);
  }
  .cdx-loop-step {
    display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: start;
    text-align: left; padding: 14px 0;
  }
  .cdx-loop-step .cdx-node { margin: 0; }
  .cdx-loop-step .cdx-loop-text { margin-top: 11px; }
}
@media (max-width: 720px) {
  .cdx-navlinks { display: none; }
}

/* ── Reduced motion: effects resolve instantly to their end state ─────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  [style*="cdxFall"], [style*="cdxSpin"], [style*="cdxPulse"], [style*="cdxBurstIn"] {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  }
}