/* =========================================================
   LOYPRESS - PAGINA EM CONSTRUCAO
   Mesma identidade do blog: tokens, tema claro/escuro,
   cabecalho, rodape e botao de WhatsApp.
   ========================================================= */

/* 1. TOKENS (as cores e fontes ficam aqui; o resto do CSS so le estas variaveis) */
:root{
  --laranja:    #FF6A1A;
  --laranja-cl: #D8560B;   /* hover no tema claro */
  --laranja-txt:#E85E10;   /* laranja de texto com contraste seguro */

  --fundo:      #F5F5F0;
  --superficie: #FFFFFF;
  --texto:      #16150F;
  --texto-2:    #6B6B6B;
  --linha:      rgba(0,0,0,.11);
  --sombra:     0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --barra:      rgba(245,245,240,.82);
  --brilho:     rgba(255,106,26,.16);   /* luz laranja de fundo */

  --display: 'Archivo', system-ui, sans-serif;
  --corpo:   'Instrument Sans', system-ui, sans-serif;
  --largura: 1180px;
}
html[data-tema="escuro"]{
  --laranja:    #F47725;
  --laranja-cl: #FF9B4B;
  --laranja-txt:#FF9B4B;

  --fundo:      #0A0C0F;
  --superficie: #14171C;
  --texto:      #F4F4F5;
  --texto-2:    #9AA0A8;
  --linha:      rgba(255,255,255,.11);
  --sombra:     0 20px 44px rgba(0,0,0,.55);
  --barra:      rgba(10,12,15,.78);
  --brilho:     rgba(244,119,37,.20);
}

/* 2. RESET */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100vh;
  min-height:100dvh;          /* altura real da tela no celular */
  display:flex;
  flex-direction:column;      /* topo, miolo e rodape empilhados; o miolo cresce */
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--corpo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--laranja-cl);
  outline-offset:3px;
  border-radius:2px;
}
.wrap{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:24px;
}

/* 3. CABECALHO */
.topo{
  position:sticky;
  top:0;
  z-index:50;
  padding-block:20px;
  background:var(--barra);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.topo .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{ height:42px; width:auto; }
.marca{                       /* texto de reserva caso a imagem do logo nao carregue */
  font-family:var(--display);
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-.03em;
}
.marca span{ color:var(--laranja); }

/* troca do logo conforme o tema */
.logo-escuro{ display:none; }
html[data-tema="escuro"] .logo-claro{  display:none; }
html[data-tema="escuro"] .logo-escuro{ display:block; }

.tema-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  background:transparent;
  border:1px solid var(--linha);
  border-radius:999px;
  color:var(--texto-2);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease;
}
.tema-btn:hover{ color:var(--laranja-txt); border-color:var(--laranja-txt); }
.tema-btn .lua{ display:none; }
html[data-tema="escuro"] .tema-btn .sol{ display:none; }
html[data-tema="escuro"] .tema-btn .lua{ display:block; }

/* 4. MIOLO (centralizado na vertical e na horizontal) */
.miolo{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding-block:56px;
  text-align:center;
}
/* luz laranja suave atras do titulo */
.miolo::before{
  content:"";
  position:absolute;
  left:50%; top:46%;
  width:min(780px, 140vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, var(--brilho), transparent 72%);
  pointer-events:none;
}
.miolo .wrap{ position:relative; z-index:1; max-width:820px; }

.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--texto-2);
  margin-bottom:26px;
}
/* tres pontinhos que pulsam, sinal de "obra em andamento" */
.pontos{ display:inline-flex; gap:5px; }
.pontos i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--laranja);
  animation:pulsa 1.4s ease-in-out infinite;
}
.pontos i:nth-child(2){ animation-delay:.18s; }
.pontos i:nth-child(3){ animation-delay:.36s; }
@keyframes pulsa{
  0%,80%,100%{ opacity:.25; transform:scale(.8); }
  40%{ opacity:1; transform:scale(1); }
}

.titulo{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.2rem, 6vw, 4rem);
  line-height:1.05;
  letter-spacing:-.035em;
}
.titulo em{
  font-style:normal;
  position:relative;
  white-space:nowrap;
  z-index:0;
}
.titulo em::after{            /* o grifo laranja embaixo da palavra destacada */
  content:"";
  position:absolute;
  left:0; right:0; bottom:.06em;
  height:.11em;
  background:var(--laranja);
  z-index:-1;
}
.subtitulo{
  margin:26px auto 0;
  max-width:46ch;
  font-size:clamp(1rem, 2.4vw, 1.12rem);
  color:var(--texto-2);
}

.acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:38px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  font-size:.98rem;
  padding:16px 30px;
  border-radius:999px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-principal{ background:var(--laranja); color:#fff; }
.btn-principal:hover{ background:var(--laranja-cl); transform:translateY(-2px); }
.btn-secundario{ border:1px solid var(--linha); color:var(--texto); }
.btn-secundario:hover{ border-color:var(--texto); transform:translateY(-2px); }

/* 5. RODAPE */
.rodape{
  padding-block:44px 20px;
  border-top:1px solid var(--linha);
}
.rodape .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:22px;
}
.rodape-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
  font-size:.92rem;
  color:var(--texto-2);
}
.rodape-links a:hover{ color:var(--laranja); }
.rodape-social{ display:flex; justify-content:center; gap:10px; }
.rodape-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--linha);
  border-radius:999px;
  color:var(--texto-2);
  transition:color .18s ease, border-color .18s ease;
}
.rodape-social a:hover{ color:var(--laranja); border-color:var(--laranja); }
.rodape-assinatura{ margin-top:6px; font-size:.84rem; color:var(--texto-2); }

/* 6. BOTAO FLUTUANTE DO WHATSAPP */
.whats-flutua{
  position:fixed;
  right:22px; bottom:22px;
  z-index:60;
  width:58px; height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .2s ease;
}
.whats-flutua:hover{ transform:scale(1.07); }

/* 7. AVISO DE COOKIES */
.cookies{
  position:fixed;
  left:22px; bottom:22px;
  z-index:70;
  width:min(440px, calc(100% - 44px));
  padding:20px 22px;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:18px;
  box-shadow:var(--sombra);
  font-size:.9rem;
  color:var(--texto-2);
}
.cookies[hidden]{ display:none; }
.cookies p{ margin-bottom:14px; }
.cookies p a{ color:var(--laranja-txt); text-decoration:underline; text-underline-offset:3px; }
.cookies-botoes{ display:flex; gap:10px; }
.cookies-botoes button{
  flex:1;
  font:inherit;
  font-weight:600;
  font-size:.9rem;
  padding:11px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.cookies-aceitar{ background:var(--laranja); color:#fff; border:1px solid var(--laranja); }
.cookies-aceitar:hover{ background:var(--laranja-cl); border-color:var(--laranja-cl); }
.cookies-recusar{ background:transparent; color:var(--texto); border:1px solid var(--linha); }
.cookies-recusar:hover{ border-color:var(--texto); }

/* 8. CELULAR */
@media (max-width:860px){
  .logo{ height:36px; }
  .whats-flutua{ right:16px; bottom:16px; width:54px; height:54px; }
  /* no celular o aviso sobe um pouco, para nao ficar por cima do botao do WhatsApp */
  .cookies{ left:16px; right:16px; width:auto; bottom:84px; }
}
@media (max-width:480px){
  .acoes{ flex-direction:column; }
  .acoes .btn{ width:100%; max-width:340px; }
}

/* quem pede menos animacao no aparelho nao ve os pontinhos pulsando */
@media (prefers-reduced-motion:reduce){
  .pontos i{ animation:none; opacity:1; }
  .btn, .whats-flutua{ transition:none; }
}