/* adomi.mx — marketing site styles. Tokens: Adomi Design System (PRD Part 2);
   brand palette used boldly per MARKETING-SITE.md (the one brand-color surface). */
:root {
  --pink: #FF6F91; --pink-deep: #D6486F; --pink-tint: #FFEDF1;
  --teal: #117A77; --teal-deep: #0D5F5C; --teal-tint: #E4F4F3;
  --gold: #FFC845; --gold-deep: #E0A81F; --gold-tint: #FFF6DE; --gold-ink: #3A2E00;
  --ink: #15171A; --ink-2: #74787F;
  --surface: #FFFFFF; --surface-2: #FAFAFA; --line: #E4E5E7;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --f-display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", sans-serif;
  --f-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--f-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; margin: 0 0 .4em; }

/* header */
header.site { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
header.site .mark { width: 34px; height: 34px; flex: none; }
header.site .word { font: 700 22px/1 var(--f-display); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px; }
header.site nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14.5px; font-weight: 600; }
header.site nav a { color: var(--ink); text-decoration: none; }
header.site nav a:hover { color: var(--pink-deep); }
header.site nav a.cta { background: var(--pink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill); }
header.site nav a.cta:hover { background: var(--pink-deep); color: #fff; }
@media (max-width: 720px) { header.site nav a.plink { display: none; } }

/* hero fields */
.hero { padding: 64px 24px 72px; text-align: center; }
.hero.pink { background: var(--pink); color: #fff; }
.hero.teal { background: var(--teal); color: #fff; }
.hero.gold { background: var(--gold); color: var(--gold-ink); }
.hero .mark-big { width: 130px; height: 130px; margin: 0 auto 18px; display: block; }
.hero h1 { font-size: 44px; max-width: 17em; margin-left: auto; margin-right: auto; }
.hero .sub { font-size: 19px; max-width: 34em; margin: 0 auto 28px; opacity: .95; }
@media (max-width: 720px) { .hero h1 { font-size: 30px; } .hero .sub { font-size: 16.5px; } .hero { padding: 44px 20px 52px; } }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-block; padding: 15px 28px; border: 0; border-radius: var(--r-pill); font: 700 16px/1 var(--f-body); text-decoration: none; cursor: pointer; }
.btn.on-pink { background: #fff; color: var(--pink-deep); }
.btn.on-pink:hover { background: var(--pink-tint); }
.btn.on-teal { background: #fff; color: var(--teal-deep); }
.btn.on-gold { background: var(--gold-ink); color: var(--gold); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.pink:hover { background: var(--pink-deep); }
.btn.ghost { background: transparent; border: 2px solid rgba(255,255,255,.75); color: #fff; padding: 13px 26px; }
.btn.ghost:hover { background: rgba(255,255,255,.12); }

/* sections */
section.wrap { max-width: 1020px; margin: 0 auto; padding: 64px 24px; }
section.wrap > h2 { font-size: 32px; text-align: center; margin-bottom: 36px; }
@media (max-width: 720px) { section.wrap { padding: 44px 20px; } section.wrap > h2 { font-size: 26px; } }

/* how it works */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 720px) { .steps3 { grid-template-columns: 1fr; } }
.step3 { text-align: center; padding: 0 8px; }
.step3 .num { width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font: 700 21px/1 var(--f-display); margin: 0 auto 14px; }
.step3 h3 { font-size: 19px; }
.step3 p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* persona router cards */
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .personas { grid-template-columns: 1fr; } }
.pcard { display: block; border-radius: var(--r-lg); padding: 26px 22px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.pcard h3 { font-size: 21px; }
.pcard p { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; }
.pcard .go { font-weight: 700; font-size: 14.5px; }
.pcard.pink { background: var(--pink-tint); } .pcard.pink .go { color: var(--pink-deep); }
.pcard.teal { background: var(--teal-tint); } .pcard.teal .go { color: var(--teal-deep); }
.pcard.gold { background: var(--gold-tint); } .pcard.gold .go { color: var(--gold-ink); }
.pcard:hover { border-color: var(--ink-2); }

/* differentiation strip */
.strip { background: var(--teal); color: #fff; padding: 54px 24px; text-align: center; }
.strip .claims { display: flex; gap: 12px 40px; justify-content: center; flex-wrap: wrap; font: 700 19px/1.35 var(--f-display); max-width: 1020px; margin: 0 auto 18px; }
.strip .honest { opacity: .9; font-size: 15px; margin: 0; }

/* value props */
.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.props.five { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 860px) { .props, .props.five { grid-template-columns: 1fr; } }
.prop { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 20px; }
.prop .emo { font-size: 26px; }
.prop h3 { font-size: 18px; margin-top: 8px; }
.prop p { color: var(--ink-2); font-size: 14.5px; margin: 0; }

/* honest scope note */
.scope { max-width: 720px; margin: 0 auto; background: var(--gold-tint); border-radius: var(--r-lg); padding: 18px 22px; font-size: 15px; color: var(--gold-ink); text-align: center; }

/* numbered flow (negocios) */
ol.flow { max-width: 640px; margin: 0 auto; padding: 0; list-style: none; counter-reset: f; }
ol.flow li { counter-increment: f; display: flex; gap: 16px; align-items: baseline; padding: 12px 0; font-size: 16px; }
ol.flow li::before { content: counter(f); flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font: 700 16px/34px var(--f-display); text-align: center; }
.trust { text-align: center; color: var(--ink-2); font-size: 14px; max-width: 560px; margin: 22px auto 0; }

/* waitlist */
#waitlist { background: var(--pink-tint); }
#waitlist .inner { max-width: 560px; margin: 0 auto; text-align: center; }
#waitlist h2 { font-size: 32px; }
#waitlist p.lead { color: var(--ink-2); margin: 0 0 24px; }
form.wl { display: flex; flex-direction: column; gap: 12px; text-align: left; }
form.wl label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
form.wl input, form.wl select { width: 100%; padding: 14px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); font: 400 16px/1 var(--f-body); background: var(--surface); color: var(--ink); }
form.wl input:focus, form.wl select:focus { outline: 2px solid var(--pink); border-color: var(--pink); }
form.wl .btn { margin-top: 6px; }
.wl-ok { display: none; background: var(--teal-tint); color: var(--teal-deep); border-radius: var(--r-lg); padding: 20px; font-weight: 600; }
.wl-err { display: none; color: var(--pink-deep); font-size: 14px; }

/* footer */
footer.site { background: var(--surface-2); border-top: 1px solid var(--line); padding: 36px 24px 44px; color: var(--ink-2); font-size: 14px; }
footer.site .cols { max-width: 1020px; margin: 0 auto; display: flex; gap: 28px 56px; flex-wrap: wrap; align-items: flex-start; }
footer.site a { color: var(--ink-2); text-decoration: none; display: block; margin-bottom: 8px; }
footer.site a:hover { color: var(--pink-deep); }
footer.site .brand { display: flex; align-items: center; gap: 8px; font: 700 17px/1 var(--f-display); color: var(--ink); }
footer.site .brand svg { width: 26px; height: 26px; }
footer.site .entity { margin-top: 10px; max-width: 30em; }