/* Self-hosted: no third-party requests (REQUIREMENTS Q-4). One variable file
   covers both weights; latin subset carries every character PT-PT needs. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/nunito-sans-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;
}

/* DESIGN.md §3 — single light theme, one accent. */
:root {
  --bg: #FAF6F1;
  --surface: #FFFFFF;
  --ink: #2B2420;
  --ink-soft: #6B5F55;
  --accent: #9C4A2F;
  --accent-strong: #83402A;
  --accent-soft: #F3E4DA;
  --cta-whatsapp: #128C7E;

  --space: 8px;
  --column: 44rem;
  --radius: 12px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Separated by space, not chrome (DESIGN.md §5). */
section, footer {
  max-width: var(--column);
  margin-inline: auto;
  padding: calc(6 * var(--space)) calc(3 * var(--space));
}

h1, h2, h3 { font-weight: 700; margin: 0 0 calc(2 * var(--space)); text-wrap: balance; }
h1 { font-size: 1.75rem; line-height: 1.25; }
h2 { font-size: 1.375rem; line-height: 1.3; }
h3 { font-size: 1.125rem; line-height: 1.35; margin-top: calc(4 * var(--space)); }

p { margin: 0 0 calc(2 * var(--space)); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

ul, ol { margin: 0 0 calc(2 * var(--space)); padding-left: calc(3 * var(--space)); }
li { margin-bottom: var(--space); }
li:last-child { margin-bottom: 0; }

/* Hero: everything a parent needs on the first screen, nothing else (P-2). */
.eyebrow {
  margin-bottom: var(--space);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lead { color: var(--ink-soft); }
.highlight { font-weight: 700; }

.subjects, .facts, .details { list-style: none; padding-left: 0; }
.subjects li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  justify-content: space-between;
  padding: calc(1.5 * var(--space)) 0;
  border-bottom: 1px solid var(--accent-soft);
}
.subjects span { color: var(--ink-soft); }

/* A text marker, not just colour: no meaning conveyed by colour alone. */
.facts li { padding-left: calc(3 * var(--space)); text-indent: calc(-3 * var(--space)); }
.facts li::before { content: '— '; color: var(--accent); }

.photo {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: calc(3 * var(--space));
  border-radius: 16px;
}

.method { counter-reset: step; list-style: none; padding-left: 0; }
.method li {
  padding-left: calc(4.5 * var(--space));
  margin-bottom: calc(2 * var(--space));
}
.method li::before {
  counter-increment: step;
  content: counter(step) '.';
  display: inline-block;
  width: calc(4.5 * var(--space));
  margin-left: calc(-4.5 * var(--space));
  color: var(--accent);
  font-weight: 700;
}

/* The one tinted block on the page (DESIGN.md §5). */
.pricing {
  max-width: calc(var(--column) - 6 * var(--space));
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: calc(4 * var(--space)) calc(3 * var(--space));
  margin-block: calc(3 * var(--space));
}
.price { font-size: 1.25rem; }
.price strong { color: var(--accent); }

.note { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5; }

address { font-style: normal; }

/* White on --cta-whatsapp is 4.14:1, which meets AA only at WCAG "large"
   size. The 19px/700 label is load-bearing — do not shrink it. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.5 * var(--space));
  width: 100%;
  min-height: 48px;
  padding: calc(1.5 * var(--space)) calc(3 * var(--space));
  /* Transparent, not none: both buttons then share a box model and a height. */
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--cta-whatsapp);
  color: #FFFFFF;
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  cursor: pointer;
}
.cta:hover { background: #0F7568; }
.cta-icon { width: 24px; height: 24px; flex: none; }

.cta-secondary {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: calc(1.5 * var(--space));
  padding: calc(1.5 * var(--space)) calc(3 * var(--space));
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  cursor: pointer;
}
.cta-secondary:hover { color: var(--accent-strong); border-color: var(--accent-strong); }

.cta[disabled], .cta-secondary[disabled] { opacity: 0.6; cursor: default; }

/* Focus is never removed (WCAG 2.2 — 2.4.11/2.4.13). */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cta:focus-visible { outline-color: var(--ink); }

.hero .cta { margin-top: calc(3 * var(--space)); }
.hero .note, .contact .note { margin-top: calc(1.5 * var(--space)); }

.noscript-note {
  margin-top: calc(2 * var(--space));
  padding: calc(2 * var(--space));
  border-left: 4px solid var(--accent);
  background: var(--surface);
  font-size: 0.9375rem;
}

footer {
  padding-top: calc(3 * var(--space));
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  body { font-size: 1.125rem; }        /* 18px */
  h1 { font-size: 2.25rem; line-height: 1.2; }
  h2 { font-size: 1.625rem; }
  section, footer { padding: calc(9 * var(--space)) calc(3 * var(--space)); }
  .note, .facts, footer { font-size: 0.9375rem; }
  .photo { width: 220px; }
  /* width:auto shrinks a button to its own label, sizing the two
     independently. One explicit width keeps them identical. */
  .cta, .cta-secondary { width: 20rem; max-width: 100%; }
  .cta { display: flex; }
  .cta-secondary { margin-top: calc(2 * var(--space)); }
}