/* ==========================================================================
   Ampa — landing da fase 0. RASCUNHO para aprovação do dono.

   Accessibility is the requirement here, not decoration: the audience is
   45 to 70 years old, mostly on a phone, often with the system font size
   turned up.

   Rules this file follows, and must keep following:
     · never set a pixel font-size on :root/html — that would override the
       size the person chose in the operating system. Everything is in `rem`,
       so 1rem is whatever they picked;
     · body text starts at 1.125rem (18px at default settings) and the base
       is nudged with a relative value only;
     · text/background contrast stays at or above 7:1 (WCAG AAA) for body
       copy in both colour schemes;
     · every tappable thing is at least 48px tall and 48px wide;
     · no web fonts, no external requests of any kind;
     · nothing depends on JavaScript;
     · motion is removed for whoever asked for that.
   ========================================================================== */

/* --- colour tokens ------------------------------------------------------ */
:root {
  --papel:        #fffdf8;
  --papel-alt:    #f4efe4;
  --tinta:        #171512;   /* on --papel: ~17:1 */
  --tinta-suave:  #4a453c;   /* on --papel: ~8.6:1 */
  --verde:        #14503f;   /* on --papel: ~8.7:1 */
  --verde-claro:  #e3efe9;
  --verde-escuro: #0d3b2e;   /* on --papel: ~11:1 */
  --barro:        #8a3410;   /* on --papel: ~7.4:1 */
  --linha:        #ded6c6;
  --foco:         #a8410b;
  --sombra:       0 1px 2px rgba(23, 21, 18, .07), 0 6px 18px rgba(23, 21, 18, .06);
  --raio:         .625rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel:        #14130f;
    --papel-alt:    #1e1c17;
    --tinta:        #f6f2e9;   /* on --papel: ~15:1 */
    --tinta-suave:  #cfc7b8;   /* on --papel: ~10:1 */
    --verde:        #7fd2b4;   /* on --papel: ~9.6:1 */
    --verde-claro:  #1b2f28;
    --verde-escuro: #a9e6cd;
    --barro:        #f2a07a;   /* on --papel: ~9:1 */
    --linha:        #3a362d;
    --foco:         #ffb066;
    --sombra:       none;
  }
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;     /* relative on purpose: respects the system size */
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  line-height: 1.22;
  margin: 0 0 .6em;
  text-wrap: balance;
  /* Last resort only: breaks a word that cannot fit the line on its own, which
     is what happens to "Acompanhamento" at 200% system text size. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: 2rem;    letter-spacing: -.015em; }
h2 { font-size: 1.6rem;  letter-spacing: -.01em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde); text-decoration-thickness: .09em; text-underline-offset: .18em; }
a:hover { color: var(--verde-escuro); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: .25rem;
}

strong { font-weight: 700; }
cite { font-style: normal; color: var(--tinta-suave); font-size: .9em; }

/* --- layout ------------------------------------------------------------- */
.envolvente {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: min(1.25rem, 6vw);
}
.envolvente--estreita { max-width: 40rem; }

.bloco { padding-block: 3rem; }
.bloco--alterna { background: var(--papel-alt); }

.subtitulo-seccao {
  color: var(--tinta-suave);
  max-width: 44rem;
  margin-bottom: 2rem;
}

/* --- skip link ---------------------------------------------------------- */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde);
  color: var(--papel);
  padding: 1rem 1.25rem;
  z-index: 10;
}
.salto:focus { left: 0; }

/* --- pre-launch notice -------------------------------------------------- */
.aviso-lancamento {
  margin: 0;
  padding: .9rem min(1.25rem, 5vw);
  background: var(--verde-claro);
  color: var(--tinta);
  border-bottom: 1px solid var(--linha);
  font-size: 1rem;
  text-align: center;
}

/* --- header ------------------------------------------------------------- */
.cabecalho { padding-block: 1.25rem; border-bottom: 1px solid var(--linha); }
.cabecalho__interior { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.marca {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--verde);
}
.marca__descricao { color: var(--tinta-suave); font-size: 1rem; }

/* --- hero --------------------------------------------------------------- */
.bloco--entrada { padding-block: 3.25rem 3rem; }
.bloco--entrada h1 { max-width: 20ch; }
.chamada { font-size: 1.25rem; max-width: 40rem; color: var(--tinta-suave); }
.chamada strong { color: var(--tinta); }
.nota-entrada { margin-top: 1.25rem; color: var(--tinta-suave); }

.accoes {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}

/* --- buttons: 48px minimum target, always ------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;      /* >= 48px at any system size */
  padding: .75rem min(1.5rem, 6vw);
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-size: 1.125rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.botao--principal { background: var(--verde); color: #fffdf8; }
.botao--principal:hover { background: var(--verde-escuro); color: #fffdf8; }
.botao--secundario {
  background: transparent;
  color: var(--verde);
  border-color: var(--verde);
}
.botao--secundario:hover { background: var(--verde-claro); color: var(--verde-escuro); }
.botao--largo { width: 100%; }

@media (prefers-color-scheme: dark) {
  .botao--principal { background: var(--verde); color: #10201a; }
  .botao--principal:hover { background: var(--verde-escuro); color: #10201a; }
}

/* --- cards -------------------------------------------------------------- */
.cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 46rem) {
  .cartoes--dois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  /* Capped against the viewport: padding is chrome, not content, and 1.5rem is
     48px a side at 200% text — 96px of a 295px body. Unchanged at normal size. */
  padding: min(1.5rem, 7vw);
  box-shadow: var(--sombra);
}
.bloco--alterna .cartao { background: var(--papel); }
.cartao h3, .cartao h4 { margin-bottom: .4em; }
.cartao__valor {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--barro);
  margin-bottom: .35em;
  letter-spacing: -.01em;
}
.cartao__valor span { font-size: 1rem; font-weight: 600; color: var(--tinta-suave); }
.cartao--preco .cartao__valor { color: var(--verde); }
.cartao--largo { margin-top: .5rem; }

.destaque {
  margin-top: 2rem;
  padding: min(1.25rem, 5vw) min(1.5rem, 6vw);
  border-left: .3rem solid var(--verde);
  background: var(--verde-claro);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 1.1875rem;
}
.destaque--i4 { border-left-color: var(--barro); }

.nota {
  margin-top: 2rem;
  color: var(--tinta-suave);
  font-size: 1rem;
  max-width: 44rem;
}

/* --- steps -------------------------------------------------------------- */
.passos {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
  display: grid;
  /* minmax(0,1fr), not 1fr: an `auto`/`1fr` track is floored at the item's
     min-content width, so a long word would widen the track past the container
     and take the whole page sideways with it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
/* The number used to be an absolutely positioned circle behind a fixed 3.5rem
   gutter — 112px of a 295px body at 200% system text size. As a real grid
   column it takes exactly the room it needs and the text keeps the rest, at
   every text size, with no breakpoint to get wrong. */
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: .2rem;
  align-items: start;
}
.passos li::before {
  content: counter(passo);
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde);
  color: #fffdf8;
  font-weight: 800;
  font-size: 1.125rem;
}
@media (prefers-color-scheme: dark) {
  .passos li::before { color: #10201a; }
}
.passos h3 { grid-column: 2; grid-row: 1; margin-bottom: .2em; }
.passos p { grid-column: 2; grid-row: 2; color: var(--tinta-suave); }

/* --- prices ------------------------------------------------------------- */
.preco {
  border-top: 2px solid var(--linha);
  padding-top: 2rem;
  margin-top: 2rem;
}
.preco:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
/* The number is an inline box, NOT a flex item. As a flex container this
   heading carried min-width:auto on its text and pushed the page sideways at
   large system font sizes (measured: 410px of title in a 295px body at 175%). */
.preco__titulo { font-size: 1.375rem; }
.preco__ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  margin-right: .75rem;
  vertical-align: -.2em;
  border-radius: 50%;
  border: 2px solid var(--verde);
  color: var(--verde);
  font-size: 1.0625rem;
  font-weight: 800;
}
.preco__quando { color: var(--tinta-suave); font-size: 1rem; }
.preco__rodape { margin-top: 1rem; color: var(--tinta-suave); font-size: 1rem; }

/* --- hour picker: radios + CSS only, no JavaScript ---------------------- */
.simulador { margin-block: 0; }
.simulador fieldset { border: 0; margin: 0; padding: 0; }
.simulador legend {
  padding: 0;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: .75rem;
}

/* The radios stay in the accessibility tree and keep keyboard focus;
   they are only moved out of sight. Never use display:none here. */
.simulador__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.simulador__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.5rem;
}
.simulador__opcoes label {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  padding: .625rem min(1.125rem, 4.5vw);
  border: 2px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  font-weight: 600;
  cursor: pointer;
}
.simulador__opcoes label:hover { border-color: var(--verde); }

.escaloes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; }
.escalao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .875rem;
  padding: min(1rem, 4vw) min(1.25rem, 5vw);
  border: 2px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
}
.escalao__horas { font-weight: 600; flex: 1 1 12rem; min-width: 0; }
.escalao__valor {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: -.01em;
}
.escalao__nota { flex: 1 1 100%; color: var(--tinta-suave); font-size: .9375rem; }

/* selected state — one rule per tier, spelled out so it stays readable */
#h-ate6:checked   ~ .simulador__opcoes label[for="h-ate6"],
#h-7a15:checked   ~ .simulador__opcoes label[for="h-7a15"],
#h-16a25:checked  ~ .simulador__opcoes label[for="h-16a25"],
#h-26mais:checked ~ .simulador__opcoes label[for="h-26mais"] {
  background: var(--verde);
  border-color: var(--verde);
  color: #fffdf8;
}
@media (prefers-color-scheme: dark) {
  #h-ate6:checked   ~ .simulador__opcoes label[for="h-ate6"],
  #h-7a15:checked   ~ .simulador__opcoes label[for="h-7a15"],
  #h-16a25:checked  ~ .simulador__opcoes label[for="h-16a25"],
  #h-26mais:checked ~ .simulador__opcoes label[for="h-26mais"] { color: #10201a; }
}

#h-ate6:focus-visible   ~ .simulador__opcoes label[for="h-ate6"],
#h-7a15:focus-visible   ~ .simulador__opcoes label[for="h-7a15"],
#h-16a25:focus-visible  ~ .simulador__opcoes label[for="h-16a25"],
#h-26mais:focus-visible ~ .simulador__opcoes label[for="h-26mais"] {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

#h-ate6:checked   ~ .escaloes .escalao--ate6,
#h-7a15:checked   ~ .escaloes .escalao--7a15,
#h-16a25:checked  ~ .escaloes .escalao--16a25,
#h-26mais:checked ~ .escaloes .escalao--26mais {
  border-color: var(--verde);
  background: var(--verde-claro);
}

/* --- numbers ------------------------------------------------------------ */
.numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 46rem) { .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.numeros li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.numeros strong {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--barro);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.numeros span { color: var(--tinta-suave); font-size: 1rem; }
.numeros cite { display: block; margin-top: .25rem; }

/* --- forms -------------------------------------------------------------- */
.bloco--forma { padding-block: 3.25rem; }

.formulario { margin-top: 1.75rem; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; margin-bottom: 1.5rem; }
.campo label { font-weight: 700; }
.campo__ajuda { color: var(--tinta-suave); font-size: 1rem; }

.campo input[type="text"] {
  min-height: 3.25rem;
  padding: .75rem min(.9rem, 3.5vw);
  font-size: 1.125rem;      /* never below 1rem: smaller zooms iOS on focus */
  font-family: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--tinta-suave);
  border-radius: var(--raio);
  width: 100%;
}
.campo input[type="text"]:focus { border-color: var(--verde); }

.campo--caixa {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .875rem;
  min-height: 3.25rem;      /* the label is part of the target: keep it big */
  padding-block: .25rem;
}
.campo--caixa input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  margin: .2rem 0 0;
  accent-color: var(--verde);
  flex: none;
}
.campo--caixa label { font-weight: 400; }

/* --- footer ------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--linha);
  padding-block: 2.5rem;
  color: var(--tinta-suave);
  font-size: 1rem;
}
.rodape__legal { font-size: .9375rem; }

/* --- wider screens ------------------------------------------------------ */
@media (min-width: 46rem) {
  body { font-size: 1.1875rem; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  .bloco { padding-block: 4rem; }
  .chamada { font-size: 1.375rem; }
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- print -------------------------------------------------------------- */
@media print {
  .aviso-lancamento, .accoes, .formulario, .salto { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}

/* O campo que só um robô preenche (POST /contacto descarta o envio). Fora do
   ecrã e da leitura: pessoas e leitores de ecrã nunca o encontram. */
.campo--armadilha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}