/* ==========================================================================
   5 CONTINENTES — folha de estilo única do site
   Proposta inicial (esboço). Tokens no :root — ajuste tudo por aqui.
   Sem dependências externas: as fontes são as do sistema, então o site
   abre por duplo clique, funciona offline e carrega rápido no celular.

   Paleta tirada da marca Cinco Continentes Editora (globo azul + continentes
   verdes, lettering preto) e da família de marcas (Central do Skate,
   Central da Raquete, ABC do Skate).
   ========================================================================== */

:root{
  /* Cor --------------------------------------------------------------- */
  --azul:        #0B5FA5;   /* primária — azul do globo */
  --azul-2:      #1E88C7;   /* azul claro — brilho do globo */
  --azul-3:      #083D6B;   /* azul profundo — sombra do globo */
  --verde:       #8DC63F;   /* acento — continentes */
  --verde-2:     #6BA32A;
  --tinta:       #111C27;   /* texto principal */
  --tinta-2:     #52637A;   /* texto secundário */
  --papel:       #FFFFFF;
  --papel-2:     #F3F6F9;
  --linha:       #DFE6EE;
  --noite:       #0A1622;   /* header / rodapé */
  --noite-2:     #12233400;

  /* Tipografia -------------------------------------------------------- */
  --f-titulo: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-texto:  system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-editorial: Georgia,"Times New Roman",Times,serif;

  /* Medidas ----------------------------------------------------------- */
  --largura: 1140px;
  --raio: 10px;
  --raio-p: 6px;
  --topo: 64px;
  --sombra: 0 1px 2px rgba(17,28,39,.06),0 8px 24px rgba(17,28,39,.06);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topo) + 12px); }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 17px/1.62 var(--f-texto);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }

.envolve{ width:min(100% - 2.2rem,var(--largura)); margin-inline:auto; }
.estreito{ width:min(100% - 2.2rem,760px); margin-inline:auto; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--verde); color:var(--tinta); padding:.7rem 1rem; font-weight:700;
}
.pular:focus{ left:.6rem; top:.6rem; }

/* ------------------------------------------------------------------ TOPO */
.topo{
  position:sticky; top:0; z-index:50;
  background:var(--noite); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topo__linha{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:var(--topo);
}
.topo__logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.topo__logo img{ width:148px; }
.topo__nome{ display:none; }

.topo__abre{
  display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff;
  border-radius:var(--raio-p); padding:.55rem .8rem; font:600 15px/1 var(--f-texto);
  cursor:pointer;
}
.topo__abre span{ display:block; width:16px; }
.topo__abre i{ display:block; height:2px; background:#fff; margin:3px 0; border-radius:2px; }

.topo__painel{
  display:none; padding:.4rem 0 1rem; border-top:1px solid rgba(255,255,255,.1);
}
.topo__painel[data-aberto="sim"]{ display:block; }

.topo__nav ul{ display:flex; flex-direction:column; }
.topo__nav a{
  display:block; padding:.85rem .2rem; text-decoration:none; color:#E7EEF5;
  border-bottom:1px solid rgba(255,255,255,.07); font-weight:600;
}
.topo__nav a:hover,.topo__nav a:focus{ color:var(--verde); }
.topo__nav a[aria-current="page"]{ color:var(--verde); }
.topo__nav .destaque{ color:var(--verde); }

.topo__nav .destaque{
  color:var(--verde); border:1px solid rgba(141,198,63,.55); border-radius:99px;
  padding:.42rem .85rem !important; font-weight:700;
}
.topo__nav .destaque:hover{ background:rgba(141,198,63,.14); }
.topo__nav .destaque[aria-current="page"]{ background:var(--verde); color:#12240A; border-color:var(--verde); }

@media (min-width:900px){
  .topo__abre{ display:none; }
  .topo{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:0 1.2rem; }
  .topo__linha{ width:auto; margin:0; min-height:72px; }
  .topo__logo img{ width:172px; }
  .topo__painel{ display:block !important; width:auto; margin:0; border:0; padding:0; }
  .topo__nav ul{ flex-direction:row; align-items:center; gap:1.4rem; }
  .topo__nav a{ border:0; padding:.4rem 0; font-size:15.5px; }
}

/* ------------------------------------------------------------------ BASE */
.secao{ padding:3.2rem 0; }
.secao--papel2{ background:var(--papel-2); border-block:1px solid var(--linha); }
.secao--noite{ background:var(--noite); color:#EAF1F7; }
.secao--noite h2,.secao--noite h3{ color:#fff; }

@media (min-width:760px){ .secao{ padding:4.6rem 0; } }

.olho{
  display:inline-block; font:700 12.5px/1 var(--f-titulo);
  letter-spacing:.14em; text-transform:uppercase; color:var(--azul);
  margin-bottom:.7rem;
}
.secao--noite .olho{ color:var(--verde); }

.titulo{ font:800 clamp(1.5rem,1.2rem + 1.4vw,2.1rem)/1.15 var(--f-titulo); letter-spacing:-.02em; }
.sub{ color:var(--tinta-2); max-width:62ch; margin-top:.6rem; font-size:16.5px; }
.secao--noite .sub{ color:#A9BDD0; }

.cabeca{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; }

/* ------------------------------------------------------------------ BOTÕES */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.3rem; border-radius:var(--raio-p); text-decoration:none;
  font:700 16px/1.1 var(--f-titulo); border:1px solid transparent; cursor:pointer;
}
.btn--primario{ background:var(--azul); color:#fff; }
.btn--primario:hover{ background:var(--azul-3); }
.btn--verde{ background:var(--verde); color:#12240A; }
.btn--verde:hover{ background:var(--verde-2); }
.btn--claro{ background:#fff; color:var(--tinta); border-color:var(--linha); }
.btn--claro:hover{ border-color:var(--azul); color:var(--azul); }
.btn--vazado{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn--vazado:hover{ background:rgba(255,255,255,.1); }
.btn--bloco{ width:100%; }
@media (min-width:560px){ .btn--bloco{ width:auto; } }

.ligacao{ font-weight:700; color:var(--azul); text-decoration:none; border-bottom:2px solid var(--verde); }
.ligacao:hover{ color:var(--azul-3); }

/* ------------------------------------------------------------------ HERO */
.hero{
  background:
    radial-gradient(1100px 460px at 82% -12%,rgba(30,136,199,.45),transparent 62%),
    radial-gradient(760px 420px at 4% 108%,rgba(141,198,63,.28),transparent 60%),
    var(--noite);
  color:#fff; padding:3rem 0 2.4rem;
}
.hero h1{
  font:800 clamp(1.75rem,1.35rem + 2vw,2.7rem)/1.1 var(--f-titulo);
  letter-spacing:-.025em; max-width:24ch;
}
.hero p{ color:#B7C9DA; margin-top:1rem; max-width:56ch; font-size:17.5px; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
@media (min-width:760px){ .hero{ padding:4.6rem 0 3.6rem; } }

.faixa-marcas{
  border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; align-items:center;
}
.faixa-marcas a{ background:#fff; border-radius:8px; padding:.7rem .8rem; display:grid; place-items:center; }
.faixa-marcas img{ width:100%; max-width:142px; max-height:54px; object-fit:contain; }
@media (min-width:760px){ .faixa-marcas{ grid-template-columns:repeat(4,1fr); } }

/* ------------------------------------------------------------------ CARDS */
.grade{ display:grid; gap:1.1rem; }
@media (min-width:640px){ .grade--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:700px){ .grade--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grade--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .grade--4{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; display:flex; flex-direction:column;
}
.card:hover{ box-shadow:var(--sombra); }
.card__midia{ background:#fff; border-bottom:1px solid var(--linha); aspect-ratio:16/10; display:grid; place-items:center; padding:1rem; }
.card__midia img{ max-height:74px; width:auto; }
.card__letra{ font:800 2.1rem/1 var(--f-titulo); letter-spacing:-.03em; color:var(--azul); text-align:center; }
.card__letra small{ display:block; font:700 11.5px/1.3 var(--f-titulo); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); margin-top:.4rem; }
.card__foto{ aspect-ratio:16/10; object-fit:cover; width:100%; height:100%; padding:0; }
.card__corpo{ padding:1.05rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.card__titulo{ font:800 1.12rem/1.25 var(--f-titulo); letter-spacing:-.01em; }
.card__texto{ color:var(--tinta-2); font-size:15.5px; margin-top:.45rem; flex:1; }
.card__link{ margin-top:1rem; font-weight:700; font-size:15px; color:var(--azul); text-decoration:none; }
.card__link::after{ content:" →"; }
.card__link:hover{ color:var(--azul-3); }

.selo{
  display:inline-block; font:700 11.5px/1 var(--f-titulo); letter-spacing:.1em;
  text-transform:uppercase; padding:.35rem .55rem; border-radius:4px;
  background:var(--papel-2); color:var(--tinta-2); border:1px solid var(--linha);
}
.selo--verde{ background:var(--verde); color:#12240A; border-color:transparent; }
.selo--azul{ background:#E4F0FA; color:var(--azul-3); border-color:#C7E0F3; }

/* --------------------------------------------------------- VENDABONUS HOME */
.vb{
  background:
    radial-gradient(720px 380px at 88% 0%,rgba(141,198,63,.22),transparent 60%),
    var(--noite); color:#EAF1F7; border-radius:var(--raio);
  padding:1.6rem 1.4rem;
}
@media (min-width:760px){ .vb{ padding:2.6rem 2.4rem; } }
.vb__palavra{ font:800 1.5rem/1 var(--f-titulo); letter-spacing:-.02em; color:#fff; }
.vb__palavra b{ color:var(--verde); }
.permuta-respostas{ display:grid; gap:.9rem; margin:1.4rem 0; }
@media (min-width:700px){ .permuta-respostas{ grid-template-columns:repeat(2,1fr); } }
.vb__resposta{ border-left:2px solid var(--verde); padding-left:.85rem; }
.vb__resposta dt{ font:700 15px/1.2 var(--f-titulo); color:#fff; }
.vb__resposta dd{ margin:.2rem 0 0; font-size:15.5px; color:#B7C9DA; }

/* ---------------------------------------------------------------- NEGÓCIOS */
.negocio{ display:grid; gap:1.2rem; padding:1.8rem 0; border-top:1px solid var(--linha); }
.negocio:first-of-type{ border-top:0; }
@media (min-width:760px){ .negocio{ grid-template-columns:230px 1fr; gap:2.2rem; } }
.negocio__marca{
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  padding:1rem; display:grid; place-items:center; min-height:126px; text-align:center;
  align-self:start;
}
.negocio__marca img{ max-height:72px; width:auto; }
.negocio h2{ font:800 clamp(1.2rem,1.05rem + .6vw,1.5rem)/1.2 var(--f-titulo); letter-spacing:-.015em; }
.negocio__lista{ margin-top:.8rem; display:grid; gap:.32rem; font-size:15.5px; color:var(--tinta-2); }
.negocio__lista li::before{ content:"— "; color:var(--verde-2); font-weight:700; }
.negocio__links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }

/* ------------------------------------------------------------------ PAINÉIS */
.painel{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:1.15rem 1.2rem; }
.painel h3{ font:800 1.05rem/1.25 var(--f-titulo); }
.painel p{ color:var(--tinta-2); font-size:15.5px; margin-top:.4rem; }
.painel ul{ margin-top:.7rem; display:grid; gap:.3rem; font-size:15px; color:var(--tinta-2); }
.painel ul li::before{ content:"· "; color:var(--azul); font-weight:700; }

.formulario{ display:grid; gap:.9rem; }
@media (min-width:640px){ .formulario{ grid-template-columns:1fr 1fr; } .formulario .largo{ grid-column:1/-1; } }
.campo label{ display:block; font:700 13.5px/1.2 var(--f-titulo); color:var(--tinta); margin-bottom:.35rem; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:.7rem .8rem; border:1px solid var(--linha); border-radius:var(--raio-p);
  font:400 16px/1.4 var(--f-texto); color:var(--tinta); background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:2px solid var(--azul-2); outline-offset:1px; }

/* ------------------------------------------------------------------ PASSOS */
.passos{ counter-reset:p; display:grid; gap:1rem; }
@media (min-width:700px){ .passos{ grid-template-columns:repeat(2,1fr); } }
.passo{ position:relative; padding:.2rem 0 .2rem 2.9rem; }
.passo::before{
  counter-increment:p; content:counter(p);
  position:absolute; left:0; top:0; width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--azul); color:#fff; display:grid; place-items:center;
  font:800 15px/1 var(--f-titulo);
}
.passo h3{ font:800 1.02rem/1.25 var(--f-titulo); }
.passo p{ color:var(--tinta-2); font-size:15.5px; margin-top:.25rem; }

/* ------------------------------------------------------------------ REDAÇÃO */
.editorial{ font-family:var(--f-editorial); }
.mastro{
  border-bottom:3px double var(--tinta); padding-bottom:1rem; margin-bottom:1.6rem;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem;
}
.mastro__nome{ font:800 clamp(1.6rem,1.2rem + 2vw,2.4rem)/1 var(--f-titulo); letter-spacing:-.02em; }
.mastro__data{ font-size:14px; color:var(--tinta-2); font-family:var(--f-texto); }

.manchete{ display:grid; gap:1.4rem; }
@media (min-width:860px){ .manchete{ grid-template-columns:1.6fr 1fr; } }
.materia__editoria{ font:700 12px/1 var(--f-titulo); letter-spacing:.13em; text-transform:uppercase; color:var(--azul); }
.materia__titulo{ font:800 clamp(1.35rem,1.1rem + 1.2vw,1.95rem)/1.18 var(--f-editorial); margin-top:.4rem; }
.materia__linha{ color:var(--tinta-2); margin-top:.5rem; font-size:16px; }
.materia__credito{ font:400 13px/1.4 var(--f-texto); color:var(--tinta-2); margin-top:.7rem; }
.materia__credito b{ color:var(--tinta); }
.materia__foto{ background:var(--papel-2); border:1px solid var(--linha); aspect-ratio:16/9; display:grid; place-items:center; color:#6E8298; font:600 13.5px/1 var(--f-texto); }
.avatar{ width:88px; height:88px; border-radius:50%; background:var(--papel-2); border:1px solid var(--linha); }

.lista-destaques{ display:grid; gap:1rem; align-content:start; }
.destaque-item{ border-top:1px solid var(--linha); padding-top:.85rem; }
.destaque-item:first-child{ border-top:0; padding-top:0; }
.destaque-item h3{ font:700 1.08rem/1.25 var(--f-editorial); }
.destaque-item p{ font-size:14.5px; color:var(--tinta-2); margin-top:.25rem; font-family:var(--f-texto); }

.editorias{ display:flex; flex-wrap:wrap; gap:.5rem; }
.editorias a{
  text-decoration:none; font:700 14px/1 var(--f-titulo); padding:.55rem .8rem;
  border:1px solid var(--linha); border-radius:99px; color:var(--tinta);
}
.editorias a:hover{ border-color:var(--azul); color:var(--azul); }

.mesa{ background:var(--papel-2); border-left:4px solid var(--verde); padding:1.1rem 1.2rem; }
.mesa h3{ font:800 1.05rem/1.2 var(--f-editorial); }
.mesa p{ font-size:15.5px; color:var(--tinta-2); margin-top:.4rem; }

.materias-lista li{ border-top:1px solid var(--linha); padding:.8rem 0; }
.materias-lista li:first-child{ border-top:0; }
.materias-lista a{ text-decoration:none; display:block; }
.materias-lista strong{ font:700 1.02rem/1.3 var(--f-editorial); display:block; }
.materias-lista span{ font-size:13.5px; color:var(--tinta-2); }

.mais-lidas{ counter-reset:m; }
.mais-lidas li{ counter-increment:m; display:flex; gap:.7rem; padding:.6rem 0; border-top:1px solid var(--linha); font:700 15.5px/1.3 var(--f-editorial); }
.mais-lidas li:first-child{ border-top:0; }
.mais-lidas li::before{ content:counter(m); font:800 15px/1 var(--f-titulo); color:var(--verde-2); min-width:1.2rem; }

.busca{ display:flex; gap:.5rem; }
.busca input{
  flex:1; padding:.75rem .9rem; border:1px solid var(--linha); border-radius:var(--raio-p);
  font:400 16px/1 var(--f-texto); color:var(--tinta); background:#fff;
}
.busca input:focus{ outline:2px solid var(--azul-2); outline-offset:1px; }

.aviso-demo{
  background:#FFF7E4; border:1px solid #F0DCA8; color:#6B5320;
  border-radius:var(--raio-p); padding:.65rem .85rem; font-size:13.5px; line-height:1.5;
}

/* ------------------------------------------------------------------ MANUAL */
.amostras{ display:grid; gap:.8rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .amostras{ grid-template-columns:repeat(4,1fr); } }
.amostra{ border:1px solid var(--linha); border-radius:var(--raio-p); overflow:hidden; }
.amostra__cor{ height:74px; }
.amostra__txt{ padding:.6rem .7rem; font:600 13px/1.4 var(--f-texto); }
.amostra__txt code{ display:block; color:var(--tinta-2); font-size:12.5px; }

.tabela{ width:100%; border-collapse:collapse; font-size:15.5px; }
.tabela th,.tabela td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--linha); vertical-align:top; }
.tabela th{ font:700 13px/1.3 var(--f-titulo); text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-2); }

.nota{ border-left:3px solid var(--azul); padding:.2rem 0 .2rem .9rem; color:var(--tinta-2); font-size:15.5px; }
.nota b{ color:var(--tinta); }

/* ------------------------------------------------------------------ RODAPÉ */
.rodape{ background:var(--noite); color:#9FB4C8; padding:2.6rem 0 1.6rem; font-size:15.5px; }
.rodape a{ color:#DCE7F1; text-decoration:none; }
.rodape a:hover{ color:var(--verde); }
.rodape__grade{ display:grid; gap:1.8rem; }
@media (min-width:700px){ .rodape__grade{ grid-template-columns:1.4fr 1fr 1fr; } }
.rodape img{ width:170px; margin-bottom:.9rem; }
.rodape h4{ color:#fff; font:700 13px/1 var(--f-titulo); letter-spacing:.12em; text-transform:uppercase; margin-bottom:.8rem; }
.rodape li{ padding:.22rem 0; }
.rodape__base{
  border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.1rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:space-between; font-size:13.5px;
}

/* ------------------------------------------------------------------ WHATS */
.zap{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--verde); color:#12240A; text-decoration:none;
  font:700 15px/1 var(--f-titulo); padding:.8rem 1rem; border-radius:99px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.zap:hover{ background:var(--verde-2); }
.zap svg{ width:20px; height:20px; flex:none; fill:currentColor; }
@media (max-width:559px){
  .zap{ padding:.85rem; border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,.28); }
  .zap__txt{ display:none; }
}

/* ------------------------------------------------------------------ FAIXA */
.faixa-cta{
  background:linear-gradient(100deg,var(--azul-3),var(--azul) 60%,var(--azul-2));
  color:#fff; border-radius:var(--raio); padding:1.5rem 1.4rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}
.faixa-cta h2{ font:800 1.35rem/1.2 var(--f-titulo); }
.faixa-cta p{ color:#D6E7F5; margin-top:.35rem; font-size:15.5px; }

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

@media (max-width:600px){
  .rodape{ padding-bottom:4.6rem; }
}