/* ==========================================================================
   Pedro Lucas Digital, folha de estilo única.

   ⚠️ NÃO é o mesmo visual do site da X1 Strategy Digital, e isso é de propósito.
   Os dois CNPJs são do mesmo dono, e a Meta cruza conteúdo e layout ao procurar
   "common ownership". Site clonado entrega a ligação de graça. Aqui a linguagem
   é outra: fundo claro, título com serifa, acento terracota, seções em régua
   numerada. Se for editar, mantenha essa distância.
   Sem dependência externa: nenhuma fonte, script ou imagem de outro servidor.
   ========================================================================== */

:root{
  --tinta:       #1c1a17;
  --tinta-media: #524c44;
  --tinta-fraca: #6f675d;   /* 4.85 no pior fundo (papel-2). #857d72 dava 3.54 e reprovava */
  --papel:       #fbf9f5;
  --papel-2:     #f3efe7;
  --papel-3:     #ffffff;
  --linha:       #e2dbcf;
  --marca:       #a8481f;
  --marca-forte: #8a3a17;
  --marca-clara: #f0e2d8;
  --escuro:      #241f1a;

  --limite:      1080px;
  --raio:        6px;
  --sombra:      0 1px 2px rgba(28,26,23,.05), 0 10px 30px rgba(28,26,23,.06);

  --serifa: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--marca); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--marca-forte); }

h1,h2,h3{ font-family:var(--serifa); font-weight:700; line-height:1.22; margin:0 0 .5em; }
h1{ font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); letter-spacing:-.015em; }
h2{ font-size:clamp(1.65rem, 1.25rem + 1.5vw, 2.3rem); letter-spacing:-.01em; }
h3{ font-size:1.25rem; }
p{ margin:0 0 1.15em; }

/* PISO DE 14px EM TODO TEXTO. Rotulo em caps pede pra ser pequeno, e e assim
   que a pagina acaba com trechos de 11px que ninguem le no celular. */

.limite{ width:100%; max-width:var(--limite); margin-inline:auto; padding-inline:24px; }

.oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--marca); color:#fff; padding:12px 18px;
}
.pular:focus{ left:0; }

:focus-visible{ outline:3px solid var(--marca); outline-offset:3px; }

/* ---------------------------------------------------------------- marca -- */

.marca{ display:inline-flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit; }
.marca:hover{ color:inherit; }

.marca-nome{
  font-family:var(--serifa); font-size:1.3rem; font-weight:700;
  letter-spacing:-.015em; color:var(--tinta);
}
.marca-traco{
  display:inline-block; width:26px; height:3px; background:var(--marca);
  transform:translateY(-.35em);
}

/* ----------------------------------------------------------------- topo -- */

.topo{
  background:var(--papel);
  border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:50;
}

.faixa{
  width:100%; max-width:var(--limite); margin-inline:auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.menu{ display:flex; align-items:center; gap:30px; }
.menu a{
  font-size:.9375rem; color:var(--tinta-media); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.menu a:hover{ color:var(--marca); border-bottom-color:var(--marca); }

.menu-botao{
  display:none; width:42px; height:42px; padding:10px;
  background:none; border:1px solid var(--linha); border-radius:var(--raio); cursor:pointer;
}
.menu-botao span{
  display:block; height:2px; background:var(--tinta);
  transition:transform .22s ease, opacity .18s ease;
}
.menu-botao span + span{ margin-top:5px; }
.menu-botao[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-botao[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- abertura -- */

.abertura{ padding-block:clamp(52px, 7vw, 92px); border-bottom:1px solid var(--linha); }

.rotulo{
  margin:0 0 20px;
  font-family:var(--sans); font-size:.875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--marca);
}

.abertura h1{ max-width:17ch; margin-bottom:.5em; }
.abertura .linha-fina{
  font-size:1.15rem; color:var(--tinta-media); max-width:58ch; margin-bottom:2.2rem;
}

.acoes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.botao{
  display:inline-block; padding:15px 30px; border-radius:var(--raio);
  font-size:1rem; font-weight:600; text-decoration:none;
  border:1.5px solid var(--marca);
}
.botao-cheio{ background:var(--marca); color:#fff; }
.botao-cheio:hover{ background:var(--marca-forte); border-color:var(--marca-forte); color:#fff; }
.botao-vazio{ background:transparent; color:var(--marca); }
.botao-vazio:hover{ background:var(--marca-clara); color:var(--marca-forte); }

/* ------------------------------------------------------------ identidade -- */

.identidade{ background:var(--papel-2); border-bottom:1px solid var(--linha); }

.identidade-grade{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px;
  padding-block:34px;
}
.identidade-grade div{ display:flex; flex-direction:column; gap:5px; }
.identidade-grade dt,
.identidade-grade .rot{
  font-size:.875rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--tinta-fraca);
}
.identidade-grade .val{
  font-family:var(--serifa); font-size:1.1rem; font-weight:700; color:var(--tinta);
}

/* --------------------------------------------------------------- secoes -- */

.secao{ padding-block:clamp(52px, 6.5vw, 88px); border-bottom:1px solid var(--linha); }
.secao-clara{ background:var(--papel-3); }

.abre-secao{ max-width:60ch; margin-bottom:2.8rem; }
.abre-secao p{ color:var(--tinta-media); font-size:1.05rem; margin-bottom:0; }

/* régua numerada, a estrutura visual desta marca */

.regua{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.regua li{
  display:grid; grid-template-columns:76px 1fr; gap:26px;
  padding:30px 0; border-top:1px solid var(--linha);
}
.regua li:last-child{ border-bottom:1px solid var(--linha); }
.regua .num{
  font-family:var(--serifa); font-size:1.9rem; font-weight:700;
  color:var(--marca); line-height:1;
}
.regua h3{ margin-bottom:.4em; }
.regua p{ margin:0; color:var(--tinta-media); font-size:.9875rem; }

/* -------------------------------------------------------------- historia -- */

.historia-grade{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px;
  align-items:start;
}
.historia-grade p{ color:var(--tinta-media); }

.nota{
  background:var(--papel-2); border-left:3px solid var(--marca);
  padding:26px 28px;
}
.nota h3{ font-size:1.1rem; margin-bottom:.6em; }
.nota ul{ margin:0; padding-left:20px; }
.nota li{ margin-bottom:.6em; color:var(--tinta-media); font-size:.9375rem; }
.nota li:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------- tabela -- */

.tabela-envolve{ overflow-x:auto; border:1px solid var(--linha); background:var(--papel-3); }
.tabela{ width:100%; border-collapse:collapse; font-size:.96rem; }
.tabela th, .tabela td{ padding:16px 22px; text-align:left; vertical-align:top; }
.tabela th{
  width:33%; min-width:190px; font-weight:600; color:var(--tinta-fraca);
  font-size:.875rem; letter-spacing:.05em; text-transform:uppercase;
  border-right:1px solid var(--linha);
}
.tabela td{ color:var(--tinta); }
.tabela tr + tr th, .tabela tr + tr td{ border-top:1px solid var(--linha); }

/* -------------------------------------------------------------- contato -- */

.contato{ background:var(--escuro); color:var(--papel); border-bottom:0; }
.contato h2{ color:var(--papel); }
.contato .rotulo{ color:#d99a72; }
.contato .abre-secao p{ color:#c2b8ac; }

.canais{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:#3a332b; }
.canal{ background:var(--escuro); padding:30px 32px; }
.canal .rot{
  display:block; margin-bottom:10px; font-size:.875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#d99a72;
}
.canal .val{ font-family:var(--serifa); font-size:1.2rem; line-height:1.55; color:var(--papel); }
.canal a{ color:var(--papel); text-decoration:none; border-bottom:1px solid #6b5f52; }
.canal a:hover{ color:#fff; border-bottom-color:#d99a72; }

/* ---------------------------------------------------------------- rodape -- */

.rodape{ background:var(--escuro); color:#a89c8e; padding-top:52px; border-top:1px solid #3a332b; }
.rodape .marca-nome{ color:var(--papel); }
.rodape-grade{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px;
  padding-bottom:36px;
}
.rodape-legal{ margin:.9rem 0 0; font-size:.9375rem; line-height:1.85; }
.rodape-links{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 24px; align-content:start; }
.rodape-links a{ color:#c2b8ac; font-size:.9375rem; text-decoration:none; }
.rodape-links a:hover{ color:#fff; text-decoration:underline; }
.rodape-base{
  display:flex; flex-wrap:wrap; gap:8px 32px; justify-content:space-between;
  border-top:1px solid #3a332b; padding-block:22px 30px;
}
.rodape-base p{ margin:0; font-size:.875rem; color:#948a7f; }  /* 4.82 sobre --escuro; #8a7f72 dava 4.17 */

/* ---------------------------------------------------------- pagina legal -- */

.legal{ padding-block:clamp(46px, 6vw, 74px); }
.legal-limite{ max-width:76ch; }
.legal h1{ font-size:clamp(1.9rem, 1.3rem + 2vw, 2.7rem); margin-bottom:.3em; }
.legal .atualizado{ color:var(--tinta-fraca); font-size:.9375rem; margin-bottom:2.4rem; }
.legal h2{ font-size:1.4rem; margin-top:2.5em; }
.legal h3{ font-size:1.08rem; margin-top:1.9em; }
.legal p, .legal li{ color:var(--tinta-media); }
.legal ul, .legal ol{ padding-left:22px; margin:0 0 1.2em; }
.legal li{ margin-bottom:.55em; }
.legal .destaque{
  background:var(--papel-2); border-left:3px solid var(--marca);
  padding:22px 26px; margin:0 0 2.2rem;
}
.legal .destaque p:last-child{ margin-bottom:0; }
.voltar{ display:inline-block; margin-bottom:26px; font-size:.9375rem; }

/* ------------------------------------------------------------ responsivo -- */

@media (max-width:960px){
  .identidade-grade{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 28px; }
  .historia-grade{ grid-template-columns:1fr; gap:36px; }
  .canais{ grid-template-columns:1fr; }
  .rodape-grade{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width:720px){
  body{ font-size:16px; }

  .menu-botao{ display:block; }
  .menu{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel); border-bottom:1px solid var(--linha);
    padding:6px 24px 16px; box-shadow:var(--sombra);
  }
  .menu.aberto{ display:flex; }
  .menu a{ padding:14px 0; border-bottom:1px solid var(--linha); font-size:1rem; }
  .menu a:last-child{ border-bottom:0; }
  .menu a:hover{ border-bottom-color:var(--linha); }

  .acoes .botao{ flex:1 1 auto; text-align:center; }
  .regua li{ grid-template-columns:52px 1fr; gap:18px; padding:26px 0; }
  .regua .num{ font-size:1.6rem; }
  .tabela th{ width:42%; min-width:150px; padding:14px 16px; }
  .tabela td{ padding:14px 16px; }
  .rodape-links{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}