/* MuralhaLRS — o site do projeto. As cores são as da página do Wi-Fi do
   próprio firmware (o verde-musgo da marca sobre grafite). Sem nada de fora:
   as fontes estão em /fontes (licença OFL, fontes/OFL.txt). */

@font-face {
  font-family: "Poppins";
  src: url("fontes/poppins-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fontes/Lora-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --grafite: #101317;      /* o fundo */
  --pedra: #1a1e24;        /* os blocos da muralha, o cartão */
  --pedra-alta: #22272e;   /* a face de cima das ameias */
  --junta: #2b313a;        /* as juntas entre as pedras, as linhas */
  --texto: #e9eae6;
  --suave: #a4aab1;
  --musgo: #7b9b3d;        /* o verde da marca */
  --musgo-claro: #a6c65e;  /* o verde sobre o grafite (texto, foco) */
  --fonte-titulo: "Poppins", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Lora", Georgia, "Times New Roman", serif;
  --medida: 38rem;         /* ~65 caracteres por linha */
  --margem: clamp(1rem, 4vw, 3rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--grafite); }

body {
  margin: 0;
  background: var(--grafite);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--musgo-claro); text-underline-offset: 0.18em; }
a:hover { color: var(--texto); }
:focus-visible { outline: 2px solid var(--musgo-claro); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

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

.faixa {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-left: var(--margem);
  padding-right: var(--margem);
}

/* ---------------------------------------------------------------- topo */
.abertura { padding-top: clamp(2rem, 6vw, 4rem); }

.marca { display: inline-block; line-height: 0; }
.marca img { width: clamp(11rem, 30vw, 15rem); height: auto; }

.chamada {
  padding-top: clamp(3rem, 10vw, 7rem);
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
}

.chamada h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  max-width: 14ch;
}

.chamada .resumo {
  margin-top: 1.6rem;
  max-width: var(--medida);
  font-size: clamp(1.15rem, 1.6vw, 1.32rem);
  color: var(--suave);
}

/* ------------------------------------------------------- por que existe */
.texto { max-width: var(--medida); }
.texto h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }

.porque { padding-bottom: clamp(3.5rem, 9vw, 6rem); }

/* ---------------------------------------------------------- a muralha
   As três defesas são as ameias; a cortina embaixo atravessa a página.
   As juntas das pedras são linhas de 1px (o fundo em faixas). */
.muralha { margin-bottom: clamp(4rem, 10vw, 7rem); }

.muralha h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.ameias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3.5vw, 2.75rem);   /* as seteiras entre as ameias */
  align-items: stretch;
}

.ameia {
  position: relative;
  background:
    linear-gradient(var(--pedra-alta), var(--pedra-alta)) top / 100% 0.5rem no-repeat,
    var(--pedra);
  padding: 2.75rem clamp(1.1rem, 2.4vw, 1.75rem) 2.25rem;
}

/* a seteira: a fenda verde no alto de cada ameia, como a antena da torre da logo */
.ameia::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: clamp(1.1rem, 2.4vw, 1.75rem);
  width: 4px;
  height: 1.1rem;
  background: var(--musgo);
  border-radius: 2px;
}

.ameia h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  margin-bottom: 0.7rem;
}

.ameia p { color: var(--suave); font-size: 1.05rem; line-height: 1.65; }

.cortina {
  /* a alvenaria: fiadas com as juntas desencontradas (img/pedras.svg) */
  height: clamp(4.5rem, 9vw, 7rem);
  background: url("img/pedras.svg") 0 -1px / 176px 56px repeat, var(--pedra);   /* -1px: sem junta colada às ameias */
}

/* ------------------------------------------------------ como trabalha */
.metodo { padding-bottom: clamp(3.5rem, 9vw, 6rem); }

.principios { margin: 1.75rem 0 0; padding: 0; }

.principios div {
  border-left: 3px solid var(--musgo);
  padding: 0.1rem 0 0.1rem 1.25rem;
  margin-bottom: 1.6rem;
}

.principios dt {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.12rem;
  margin-bottom: 0.25rem;
}

.principios dd { margin: 0; color: var(--suave); }

.publico { padding-bottom: clamp(4rem, 10vw, 7rem); }

/* ------------------------------------------------------------ contato */
.contato { padding-bottom: clamp(4rem, 10vw, 6.5rem); }

.cartao {
  max-width: 34rem;
  background: var(--pedra);
  border: 1px solid var(--junta);
  border-top: 4px solid var(--musgo);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  align-items: start;
}

.cartao img { width: 3rem; height: 3rem; image-rendering: auto; }

.cartao h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 0.15rem 0 0.6rem; }

.cartao p { color: var(--suave); }

.cartao .acoes { grid-column: 1 / -1; margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

.botao {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  color: #0f130b;
  background: var(--musgo);
  padding: 0.85rem 1.3rem;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.botao:hover { background: var(--musgo-claro); color: #0f130b; }

.cartao .endereco { font-size: 1rem; color: var(--suave); overflow-wrap: anywhere; }

/* --------------------------------------------------------------- rodapé */
.rodape {
  border-top: 1px solid var(--junta);
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  font-size: 0.95rem;
  color: var(--suave);
}
.rodape p { max-width: var(--medida); }

/* --------------------------------------------------------------- celular */
@media (max-width: 760px) {
  .ameias { grid-template-columns: 1fr; row-gap: 0; }
  /* empilhadas, as ameias viram pedras de uma torre: a junta entre elas */
  .ameia + .ameia { box-shadow: inset 0 1px 0 var(--junta); }
  .ameia { padding-top: 2.6rem; }
  .cartao { grid-template-columns: 1fr; }
  .cartao img { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

@media print {
  body, html { background: #fff; color: #000; }
  .ameia, .cortina, .cartao { background: #fff; border-color: #999; }
  .ameia p, .cartao p, .principios dd, .chamada .resumo { color: #222; }
}