/* ==========================================================================
   LAVRE — base compartilhada por todas as páginas
   Cores, sombras, fonte e as peças usadas em mais de uma página
   (cartão, ícone, círculo com ícone e o botão principal).
   Cada página soma o seu próprio arquivo: styles.css (página inicial)
   ou pedido.css (pedir coleta e obrigado).
   ========================================================================== */

/* 1. Variáveis ------------------------------------------------------------ */
:root {
  --bg: #F3F5F9;
  --surface: #F9FAFC;
  --ink: #0E1E46;
  --muted: #5D6782;
  --faint: #8A93A8;
  --blue: #0B55E3;
  --blue-soft: #E7EEFD;
  --teal: #1BC3AC;
  --teal-ink: #0D7A69;
  --teal-soft: #DDF6F1;
  --red: #E0294D;
  --red-soft: #FDE8EC;
  --line: #D3DAE7;
  --rail: #DCE2EC;
  --gray: #C9D1DF;
  --field-border: #E3E8F1;

  --grad-blue: linear-gradient(180deg, #1F66EE 0%, #0B55E3 100%);
  --grad-teal: linear-gradient(180deg, #26CDB7 0%, #18BCA5 100%);

  --shadow-card: 0 6px 18px rgba(22,44,96,0.05), 0 1px 3px rgba(22,44,96,0.04), inset 0 1px 0 #fff;
  --shadow-neu: 2px 3px 8px rgba(22,44,96,0.07), -2px -2px 6px rgba(255,255,255,0.9), inset 0 1px 0 #fff;
  --shadow-blue: 0 4px 10px rgba(11,82,224,0.16), inset 0 1px 0 rgba(255,255,255,0.25);
  --shadow-teal: 0 4px 10px rgba(20,177,155,0.16), inset 0 1px 0 rgba(255,255,255,0.3);
  --shadow-cta: 0 6px 14px rgba(11,82,224,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* 2. Base ----------------------------------------------------------------- */

/* Fonte Plus Jakarta Sans, servida pelo próprio site (pesos 400 a 800) */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/plus-jakarta-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; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html, body { margin: 0; padding: 0; background: var(--bg); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: #0841B5; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
h1, h3 { margin: 0; }
h3 { font-weight: 700; }
[hidden] { display: none !important; }
.sprite { display: none; }

.t-blue { color: var(--blue); }
.t-teal { color: var(--teal); }
.t-teal-ink { color: var(--teal-ink); }
.t-ink { color: var(--ink); }

/* 3. Peças compartilhadas ---------------------------------------------------- */

/* Superfície clara com borda e sombra suave */
.card { background: var(--surface); border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow-card); }

/* Ícone do sprite. O tamanho vem da variável --i do contexto. */
.icon { display: block; flex: none; width: var(--i, 1em); height: var(--i, 1em); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Círculo com ícone. --d é o diâmetro, --i o tamanho do ícone. */
.orb { --d: 44px; --i: 22px; flex: none; width: var(--d); height: var(--d); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.orb--blue { background: var(--grad-blue); box-shadow: var(--shadow-blue); color: #fff; }
.orb--teal { background: var(--grad-teal); box-shadow: var(--shadow-teal); color: #fff; }
.orb--neu { background: #F7F8FB; box-shadow: var(--shadow-neu); color: var(--blue); }
.orb--neu.t-teal { color: var(--teal); }
.orb--red { background: var(--red-soft); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(224,41,77,0.08); color: var(--red); }
.orb--red .icon { stroke-width: 2.2; }

/* Botão principal "Pedir coleta" */
.cta { --d: 50px; --i: 25px; display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 24px 8px 8px; min-height: 66px; border: none; border-radius: 999px; cursor: pointer; background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-cta); }
.cta, .cta:hover { color: #fff; text-decoration: none; }
.cta:hover { filter: brightness(1.07); }
.cta__icon { flex: none; width: var(--d); height: var(--d); border-radius: 50%; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.cta__label { flex: 1; font-size: 19px; font-weight: 700; text-align: center; }
.cta__arrow { --i: 22px; }

/* Linha pequena com o escudo ("Seus dados estão seguros") */
.assurance { --i: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); }
.assurance .icon { color: var(--teal); }