/* The Dancenter Guatemala — web stylesheet for docs.dancentergt.com
   Tokens copied from the design system (references/tokens.css). Web-specific
   rules are grouped under "WEB EXTENSION" and are the only additions. */

/* ═══ FACES ═══ */
@font-face{font-family:'Hartwell';src:url(/assets/fonts/Hartwell-Regular.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hartwell';src:url(/assets/fonts/Hartwell-Semibold.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --brand-turquesa:#5ED3D0;

  --ink-strong:#000000;
  --ink:#111111;
  --ink-soft:#3E3C39;
  --ink-muted:#8A8781;
  --ink-faint:#B8B5B0;
  --ink-invert:#FFFFFF;

  --bg-page:#FFFFFF;
  --bg-black:#000000;
  --bg-subtle:#FAF9F7;

  --rule-hair:#EFEDEA;
  --rule:#E2DFDA;
  --rule-ink:#111111;

  --font-text:'Hartwell',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --fw-regular:400; --fw-semibold:600;

  --fs-d-title:50px; --fs-d-h2:17px; --fs-d-lead:17px;
  --fs-d-body:16px; --fs-d-note:14px; --fs-d-label:12px;

  --lh-tight:1.15; --lh-body:1.5; --lh-prose:1.6;
  --ls-eyebrow:.26em; --ls-caps-sm:.14em; --ls-display:.01em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px;

  --pad-doc-x:56px; --pad-doc-y:48px;
  --gap-section-d:56px;
  --measure-doc:68ch;
  --doc-width:820px;

  --bw-hair:1px; --bw-accent:5px;
  --radius-0:0;
  --dash-w-sm:48px;

  /* ── WEB EXTENSION ── fluid title + reduced gutter for narrow viewports.
     WhatsApp is the primary delivery channel, so the phone is the design target
     and the desktop values are the ceiling, not the base. */
  --fs-web-title:clamp(24px,6.2vw,38px);
  --pad-web-x:clamp(20px,6vw,var(--pad-doc-x));
  --pad-web-y:clamp(32px,8vw,var(--pad-doc-y));
  --gap-web-section:clamp(36px,9vw,var(--gap-section-d));
  --tap-min:44px; /* minimum touch target */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg-page);
  color:var(--ink);
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:var(--fs-d-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

.sheet{
  max-width:var(--doc-width);
  margin:0 auto;
  padding:var(--pad-web-y) var(--pad-web-x) calc(var(--pad-web-y) * 2);
  display:flex;
  flex-direction:column;
  gap:var(--gap-web-section);
}

/* ═══ HEADER ═══ */
.masthead{display:flex;flex-direction:column;gap:var(--sp-6)}
.masthead img{height:72px;width:auto;display:block;align-self:flex-start}
.dash{width:var(--dash-w-sm);height:var(--bw-accent);background:var(--brand-turquesa)}

.eyebrow{
  margin:0;
  font-size:var(--fs-d-label);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--ink-muted);
}

h1{
  margin:0;
  font-family:var(--font-text);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-web-title);
  line-height:var(--lh-tight);
  letter-spacing:0;
  color:var(--ink-strong);
  text-wrap:balance;
}

.lead{
  margin:0;
  max-width:var(--measure-doc);
  font-size:var(--fs-d-lead);
  line-height:var(--lh-prose);
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ═══ SECTIONS ═══ */
.section{display:flex;flex-direction:column;gap:var(--sp-6)}
.section-intro{display:flex;flex-direction:column;gap:var(--sp-1)}
.section-note{margin:0;font-size:var(--fs-d-note);color:var(--ink-muted)}

.section-head{
  margin:0;
  font-size:var(--fs-d-label);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps-sm);
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* ═══ STEPS ═══ */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-10)}
.step{display:flex;flex-direction:column;gap:var(--sp-3)}
.step h2{
  margin:0;
  font-size:var(--fs-d-h2);
  font-weight:var(--fw-semibold);
  color:var(--ink);
}
.step p{margin:0;max-width:var(--measure-doc);color:var(--ink-soft);line-height:var(--lh-prose);text-wrap:pretty}
.step .note{font-size:var(--fs-d-note);color:var(--ink-muted)}

/* ═══ BUTTONS ═══ WEB EXTENSION — no precedent in the source system.
   DECIDED 2026-08-18: filled "sólido / contorno". Solid black primary,
   outlined secondary, square per --radius-0, Hartwell Semibold uppercase
   label. The "regla de acento" alternative was considered and rejected.
   The turquesa :focus-visible outline below is decided too — sparing,
   structural color is deliberate, not an oversight. Not provisional. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;
  min-height:var(--tap-min);
  padding:var(--sp-3) var(--sp-6);
  border-radius:var(--radius-0);
  font-family:var(--font-text);
  font-size:var(--fs-d-note);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps-sm);
  text-transform:uppercase;
  text-decoration:none;
  border:var(--bw-hair) solid var(--rule-ink);
}
.btn-primary{background:var(--bg-black);color:var(--ink-invert)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn-secondary{background:transparent;color:var(--ink)}
.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--bg-subtle)}
.btn:focus-visible{outline:2px solid var(--brand-turquesa);outline-offset:3px}
a:focus-visible{outline:2px solid var(--brand-turquesa);outline-offset:3px}

/* ═══ DOCUMENT LIST ═══ */
.docs{list-style:none;margin:0;padding:0;border-top:var(--bw-hair) solid var(--rule-ink)}
.docs li{border-bottom:var(--bw-hair) solid var(--rule-hair)}
.docs li:last-child{border-bottom:none}
.docs a{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);
  min-height:var(--tap-min);
  padding:var(--sp-4) 0;
  color:var(--ink);text-decoration:none;
}
/* ── WEB EXTENSION ── side-by-side only when the row genuinely fits; on a phone
   the label stacks under the name instead of stranding itself right-aligned. */
@media (min-width:600px){
  .docs a{flex-direction:row;align-items:baseline;gap:var(--sp-4)}
  .docs .kind{margin-left:auto}
}
.docs .name{font-size:var(--fs-d-h2);font-weight:var(--fw-semibold)}
.docs .kind{
  font-size:var(--fs-d-label);
  letter-spacing:var(--ls-caps-sm);
  text-transform:uppercase;
  color:var(--ink-faint);
}
.docs a:hover .name,.docs a:focus-visible .name{color:var(--ink-muted)}

/* ═══ FOOTER ═══ */
.foot{
  padding-top:var(--sp-6);
  border-top:var(--bw-hair) solid var(--rule);
  font-size:var(--fs-d-note);
  color:var(--ink-muted);
}
.foot a{color:var(--ink-soft)}

/* ═══ CENTERED (404) ═══ */
.center{min-height:70vh;justify-content:center}