/* =====================================================================
   Socorro Eletro — identidade "placa de identificação"

   O leitor chega com o aparelho quebrado na frente, telefone numa mão,
   possivelmente numa área de serviço mal iluminada. A página tem um
   trabalho só: levar do sintoma à próxima ação com confiança.

   O artefato mais reconhecível desse mundo é a plaqueta de identificação
   atrás do aparelho — grade de fios finos, rótulos minúsculos em caixa
   alta, números em monoespaçada. É daí que vem tudo aqui.

   Cor com significado, não enfeite: a norma brasileira de instalação
   pinta o fio terra de verde, o neutro de azul e a fase de vermelho.
   Verde = você resolve. Azul = informação. Vermelho = pare, chame alguém.
   ===================================================================== */

:root{
  /* superfícies: esmalte de eletrodoméstico sob luz fria */
  --aco:      #edf0f2;
  --placa:    #fafbfc;
  --placa-2:  #f1f4f6;
  --linha:    #c4ccd2;
  --linha-2:  #dde3e7;

  /* tinta */
  --grafite:  #15181b;
  --tinta:    #2b3339;
  --tinta-3:  #5d686f;

  /* código de cores dos fios */
  --terra:    #0e7a4d;
  --neutro:   #17608f;
  --fase:     #b5322a;
  /* #a8730a dava 3,96:1 na superfície da placa — abaixo do mínimo de 4,5.
     Este dá 5,23 e continua lendo como âmbar de atenção, não marrom. */
  --ambar:    #8f6100;

  --display: 'Archivo', system-ui, sans-serif;
  --texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dado: 'IBM Plex Mono', ui-monospace, monospace;

  /* 68ch dava 86 caracteres por linha na fonte do sistema — largo demais.
     A faixa confortável é 60 a 75; 60ch cai em ~72. */
  --medida: 60ch;
  --raio: 3px;
}

/* ---------- base ---------- */
body{
  background: var(--aco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,.site-title,.entry-title,.widget-title{
  font-family: var(--display);
  color: var(--grafite);
  letter-spacing: -0.015em;
  line-height: 1.18;
  font-weight: 700;
}
a{ color: var(--neutro); text-underline-offset: 2px; }
a:hover{ color: var(--grafite); }
:focus-visible{ outline: 3px solid var(--neutro); outline-offset: 2px; }

/* ---------- cabeçalho ---------- */
.site-header{
  background: var(--grafite);
  border-bottom: 1px solid #000;
}
.site-header .inside-header{ padding-top: 22px; padding-bottom: 22px; }
.main-title, .site-title{ margin: 0; }
.main-title a, .site-title a{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-decoration: none;
}
.main-title a:hover, .site-title a:hover{ color: #cfe0ec; }
/* marca de continuidade com a placa: um traço de fio terra sob o nome */
.main-title a{
  border-bottom: 3px solid var(--terra);
  padding-bottom: 2px;
}
.site-description{
  font-family: var(--dado);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8c979e;
}
.main-navigation{ background: #0d1013; }
.main-navigation .main-nav ul li a{
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfd6da;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*=current] > a{
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--neutro);
}

/* Botão do menu no celular.
   O tema pinta esse botão com a cor padrão dele (#222) e o ícone com fill preto.
   Sobre o cabeçalho grafite isso dá contraste de 1,3:1 — o botão fica invisível e
   ninguém acha como abrir o menu. Regra explícita, porque herdar aqui não funciona. */
.menu-toggle,
.mobile-menu-control-wrapper .menu-toggle{
  color: #ffffff;
  background: transparent;
}
.menu-toggle:hover,
.menu-toggle:focus-visible{ color: #cfe0ec; }
.menu-toggle .gp-icon,
.menu-toggle svg{ fill: currentColor; }
/* o rótulo textual "Menu", quando o tema o exibe */
.menu-toggle .mobile-menu{
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* =====================================================================
   ASSINATURA — placa de diagnóstico
   ===================================================================== */
.sel-placa{
  margin: 0 0 2.2rem;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(21,24,27,.06);
  overflow: hidden;
}
.sel-placa__topo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .5rem .95rem;
  background: linear-gradient(180deg,#f7f9fa,#e9edf0);
  border-bottom: 1px solid var(--linha);
  font-family: var(--dado);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.sel-placa__ref{ color: var(--grafite); }

/* a grade de fios finos da plaqueta */
.sel-placa__grade{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  /* fundo igual ao da placa: se sobrar célula vazia, ela vira superfície,
     não um buraco cinza */
  background: var(--placa);
}
.sel-placa__campo{ box-shadow: 0 0 0 1px var(--linha-2); }
.sel-placa__campo{
  background: var(--placa);
  padding: .8rem .95rem .85rem;
  min-width: 0;
}
.sel-placa__campo--largo{ grid-column: 1 / -1; }
.sel-placa__rotulo{
  display: block;
  font-family: var(--dado);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .22rem;
}
.sel-placa__valor{
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--grafite);
  line-height: 1.3;
}
.sel-placa__campo--largo .sel-placa__valor{ font-size: 1.14rem; }

.sel-placa__pastilha{
  display: inline-block;
  width: .58em; height: .58em;
  border-radius: 50%;
  margin-right: .45em;
  vertical-align: baseline;
  background: currentColor;
}
.sel-placa__valor--terra{ color: var(--terra); }
.sel-placa__valor--ambar{ color: var(--ambar); }
.sel-placa__valor--fase{ color: var(--fase); }

.sel-placa__nota{
  margin: 0;
  padding: .55rem .95rem .6rem;
  border-top: 1px solid var(--linha-2);
  background: var(--placa-2);
  font-size: .78rem;
  color: var(--tinta-3);
}

/* =====================================================================
   Artigo
   ===================================================================== */
.single .entry-title, .page .entry-title{
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.7rem);
  font-weight: 800;
  margin-bottom: .7rem;
}
.single .entry-content, .page .entry-content{ max-width: var(--medida); }
.entry-content > p, .entry-content > ul, .entry-content > ol,
.entry-content > table, .entry-content > blockquote{ margin-bottom: 1.15rem; }

.entry-content h2{
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.6rem);
  margin: 2.4rem 0 .85rem;
  padding-top: .85rem;
  border-top: 2px solid var(--grafite);
}
.entry-content h3{
  font-size: 1.08rem;
  margin: 1.7rem 0 .5rem;
  color: var(--tinta);
}
.entry-content ol{ counter-reset: passo; list-style: none; padding-left: 0; }
.entry-content ol > li{
  counter-increment: passo;
  position: relative;
  padding-left: 2.9rem;
  margin-bottom: .9rem;
}
.entry-content ol > li::before{
  content: counter(passo,decimal-leading-zero);
  position: absolute;
  left: 0; top: .05em;
  font-family: var(--dado);
  font-size: .78rem;
  font-weight: 600;
  color: var(--neutro);
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: .1rem .38rem;
}
.entry-content ul{ padding-left: 1.15rem; }
.entry-content ul li{ margin-bottom: .45rem; }

/* aviso de segurança: o único vermelho do corpo do texto.
   A classe vem do plugin — CSS não consegue casar por conteúdo de texto. */
.entry-content .sel-aviso{
  position: relative;
  background: #fdf4f3;
  border: 1px solid #e8c4c0;
  border-left: 3px solid var(--fase);
  border-radius: var(--raio);
  padding: .85rem 1rem .85rem 1rem;
  color: #6d211c;
}
.entry-content .sel-aviso strong{
  font-family: var(--dado);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fase);
  display: block;
  margin-bottom: .2rem;
}

.entry-content table{
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--placa);
  border: 1px solid var(--linha);
}
.entry-content th{
  font-family: var(--dado);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--tinta-3);
  background: var(--placa-2);
  border-bottom: 1px solid var(--linha);
  padding: .55rem .7rem;
}
.entry-content td{
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--linha-2);
}
.entry-content td:last-child{ font-family: var(--dado); white-space: nowrap; }
.entry-content tr:last-child td{ border-bottom: 0; }

/* "Leia também" no fim do artigo */
.entry-content h2:last-of-type + ul{
  background: var(--placa);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--neutro);
  border-radius: var(--raio);
  padding: .9rem 1rem .9rem 2.1rem;
}

/* =====================================================================
   Listagens
   ===================================================================== */
.blog .site-main, .archive .site-main{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px,1fr));
  gap: 1.35rem;
}
.blog .site-main > article, .archive .site-main > article{
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog .site-main > article:hover, .archive .site-main > article:hover{
  box-shadow: 0 6px 18px rgba(21,24,27,.10);
  transform: translateY(-2px);
}
.blog .post-image img, .archive .post-image img{
  display: block; width: 100%; height: 190px; object-fit: cover;
}
.blog .entry-header, .archive .entry-header{ padding: .9rem 1rem .2rem; }
.blog .entry-title, .archive .entry-title{ font-size: 1.06rem; font-weight: 700; }
.blog .entry-summary, .archive .entry-summary{ padding: 0 1rem 1rem; font-size: .93rem; color: var(--tinta-3); }
.blog .entry-meta, .archive .entry-meta,
.blog .entry-header .entry-meta{ display: none; }

/* etiqueta de categoria com cara de código de peça */
.entry-categories, .cat-links{
  font-family: var(--dado);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =====================================================================
   Rodapé e barra lateral
   ===================================================================== */
.site-footer{ background: var(--grafite); color: #a7b1b7; }
.site-footer a{ color: #dfe5e9; }
/* o tema pinta a faixa de crédito de branco por cima do rodapé */
.site-info{
  background: var(--grafite);
  color: #8c979e;
  border-top: 1px solid #262c31;
}
.sel-rodape__marca{
  font-family: var(--dado);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cfd6da;
}
.sel-rodape__aviso{
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: #8c979e;
}
.site-footer .footer-widgets, .site-footer .inside-footer-widgets{ background: var(--grafite); }
.widget-title{
  font-family: var(--dado);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* =====================================================================
   Respeito ao leitor
   ===================================================================== */
@media (max-width: 768px){
  body{ font-size: 1.0625rem; }
  .sel-placa__grade{ grid-template-columns: 1fr; }
  .entry-content ol > li{ padding-left: 2.6rem; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .blog .site-main > article:hover, .archive .site-main > article:hover{ transform: none; }
}
@media print{
  .site-header, .main-navigation, .site-footer, .sidebar{ display: none; }
  .sel-placa{ border: 1px solid #000; }
}

/* =====================================================================
   Correções de estrutura do tema
   ===================================================================== */

/* O GeneratePress entrega a imagem destacada ANTES do título. Quem chega
   da busca precisa ler a manchete primeiro e decidir se é o problema dele.
   Reordenar aqui evita mexer nos arquivos do tema. */
.single .inside-article{
  display: flex;
  flex-direction: column;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.6rem 1.6rem 1.2rem;
}
.single .inside-article > .entry-header{ order: 1; }
.single .inside-article > .featured-image{ order: 2; margin: 0 0 1.5rem; }
.single .inside-article > .entry-content{ order: 3; }
.single .inside-article > .entry-meta{ order: 4; }

.single .featured-image img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

/* a categoria vira etiqueta acima do título, com cara de código de peça */
.single .entry-header{ margin-bottom: 1.2rem; }

@media (max-width: 768px){
  .single .inside-article{ padding: 1.1rem 1.05rem 1rem; }
}

/* =====================================================================
   Crédito do artigo — autoria e data à vista, que é o que o Google
   espera de conteúdo que dá orientação técnica. O GeneratePress imprime
   duas datas (publicação e atualização); só uma interessa ao leitor.
   ===================================================================== */
.entry-meta{
  font-family: var(--dado);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--tinta-3);
}
.entry-meta time.updated:not(.published){ display: none; }
.single .entry-header .entry-meta{
  padding-top: .55rem;
  border-top: 1px solid var(--linha-2);
}
.entry-meta a{ color: var(--tinta-3); text-decoration: underline; }
.entry-meta a:hover{ color: var(--grafite); }
.single .entry-meta .byline::before{ content: '·'; margin: 0 .45em; }

/* =====================================================================
   Figura de seção — foto que ilustra o trecho, não o tema
   ===================================================================== */
.entry-content .sel-figura{
  margin: 1.6rem 0;
}
.entry-content .sel-figura img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
/* links contextuais: visíveis sem gritar no meio da leitura */
.entry-content p a, .entry-content li a{
  color: var(--neutro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.entry-content p a:hover, .entry-content li a:hover{
  color: var(--grafite);
  text-decoration-color: var(--terra);
}

/* =====================================================================
   Coluna lateral — existia vazia, ocupando 360px de tela
   ===================================================================== */
.sel-lateral{ display: grid; gap: 1.1rem; }
.sel-lateral__bloco{
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: .9rem 1rem 1rem;
}
.sel-lateral__titulo{
  display: block;
  font-family: var(--dado);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .6rem;
}
.sel-lateral .search-form{ display: flex; gap: .4rem; }
.sel-lateral .search-field{
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: .55rem .6rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
}
.sel-lateral .search-submit{
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .55rem .8rem;
  min-height: 44px;
  border: 0;
  border-radius: var(--raio);
  background: var(--grafite);
  color: #fff;
  cursor: pointer;
}
.sel-lateral .search-submit:hover{ background: var(--neutro); }
.sel-lateral__cats ul, .sel-lateral__cats{ list-style: none; margin: 0; padding: 0; }
.sel-lateral__cats li{ border-top: 1px solid var(--linha-2); }
.sel-lateral__cats li:first-child{ border-top: 0; }
/* a contagem vem como texto solto depois do link; sem flex ela cai de linha */
.sel-lateral__cats li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 44px;
  font-family: var(--dado);
  font-size: .8rem;
  color: var(--tinta-3);
}
.sel-lateral__cats a{
  flex: 1 1 auto;
  padding: .55rem 0;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tinta);
  text-decoration: none;
}
.sel-lateral__cats a:hover{ color: var(--neutro); }

/* =====================================================================
   Índice do artigo
   ===================================================================== */
.sel-indice ol{
  counter-reset: sec;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sel-indice li{ counter-increment: sec; }
.sel-indice li a{
  display: block;
  padding: .42rem 0 .42rem 2.1rem;
  position: relative;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--tinta);
  text-decoration: none;
  border-top: 1px solid var(--linha-2);
}
.sel-indice li:first-child a{ border-top: 0; }
.sel-indice li a::before{
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  left: 0; top: .5rem;
  font-family: var(--dado);
  font-size: .7rem;
  color: var(--neutro);
}
.sel-indice li a:hover{ color: var(--neutro); }

/* fixo na coluna lateral, acompanha a rolagem */
.sel-indice--fixo{ position: sticky; top: 1.2rem; }
.sel-indice--movel{ display: none; }

/* recolhido no topo do artigo, em tela estreita */
.entry-content .sel-indice--movel{
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  margin: 0 0 1.6rem;
  padding: 0;
}
.sel-indice--movel summary{
  cursor: pointer;
  padding: .8rem 1rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--grafite);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.sel-indice--movel summary span{
  font-family: var(--dado);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.sel-indice--movel[open] summary{ border-bottom: 1px solid var(--linha-2); }
.sel-indice--movel ol{ padding: .3rem 1rem .8rem; }

/* rolagem suave até a seção, respeitando quem pediu menos movimento */
html{ scroll-behavior: smooth; }
.entry-content h2{ scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* =====================================================================
   Tela larga: a página usava 1200px de 1920, com 360px sobrando de cada lado
   ===================================================================== */
@media (min-width: 1500px){
  .site-content .grid-container, .site-content{ max-width: 1440px; }
  .inside-header.grid-container, .site-info .grid-container{ max-width: 1440px; }
}

/* =====================================================================
   Tela estreita
   ===================================================================== */
@media (max-width: 1024px){
  #right-sidebar{ display: none; }        /* o índice já vai recolhido no topo */
  .sel-indice--movel{ display: block; }
}
@media (max-width: 768px){
  /* tabela larga rola dentro da própria caixa, sem empurrar a página */
  .entry-content table{ display: block; overflow-x: auto; white-space: nowrap; }
  .entry-content td:last-child{ white-space: nowrap; }
  .entry-content h2{ font-size: 1.32rem; }
  .single .entry-title{ line-height: 1.15; }
  /* alvo de toque do dedo: 44px é o mínimo */
  .main-navigation .main-nav ul li a,
  .menu-toggle,
  .entry-meta a{ min-height: 44px; display: flex; align-items: center; }
  .sel-placa__campo{ padding: .75rem .9rem; }
}
@media (max-width: 420px){
  .single .inside-article{ padding: .9rem .85rem 1rem; }
  .sel-placa__topo{ font-size: .62rem; }
}

/* =====================================================================
   Convite para instalar — faixa baixa, nunca cobre o conteúdo
   ===================================================================== */
.sel-instalar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  background: var(--grafite);
  color: #dfe5e9;
  border-top: 3px solid var(--terra);
  transform: translateY(110%);
  transition: transform .28s ease;
}
.sel-instalar--visivel{ transform: translateY(0); }
.sel-instalar__texto{ min-width: 0; }
.sel-instalar__texto strong{
  display: block;
  font-family: var(--display);
  font-size: .98rem;
  color: #fff;
  line-height: 1.25;
}
.sel-instalar__texto span{
  display: block;
  font-size: .82rem;
  color: #96a1a8;
  line-height: 1.35;
}
.sel-instalar__acoes{ display: flex; gap: .5rem; flex: 0 0 auto; }
.sel-instalar button{
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  min-height: 44px;
  padding: 0 .95rem;
  border-radius: var(--raio);
  cursor: pointer;
  border: 1px solid transparent;
}
.sel-instalar__sim{ background: var(--terra); color: #fff; }
.sel-instalar__sim:hover{ background: #0b6741; }
.sel-instalar__nao{ background: transparent; color: #96a1a8; border-color: #3a4249; }
.sel-instalar__nao:hover{ color: #fff; border-color: #626d75; }
.sel-instalar :focus-visible{ outline: 3px solid #7fb2d6; outline-offset: 2px; }

@media (max-width: 480px){
  .sel-instalar{ flex-direction: column; align-items: stretch; gap: .6rem; padding: .75rem .9rem .9rem; }
  .sel-instalar__acoes{ justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce){
  .sel-instalar{ transition: none; }
}

/* o selo flutuante de cookies mora no mesmo canto da faixa de instalação */
.sel-com-barra .cky-btn-revisit-wrapper,
.sel-com-barra #cookie-law-info-again{
  bottom: 96px !important;
  transition: bottom .28s ease;
}
@media (min-width: 481px){
  .sel-com-barra .cky-btn-revisit-wrapper,
  .sel-com-barra #cookie-law-info-again{ bottom: 78px !important; }
}

/* =====================================================================
   Espaço de anúncio — altura reservada ANTES de o anúncio chegar

   Bloco que aparece sem reserva empurra o conteúdo para baixo. Isso é CLS,
   e CLS derruba o ranqueamento que traz o tráfego que gera a receita — a
   monetização sabotando a si mesma. As alturas abaixo correspondem aos
   formatos fixos usados nos blocos, por isso `data-full-width-responsive`
   está desligado: formato que se estica sozinho não tem altura previsível.
   ===================================================================== */
.sel-ad{
  display: block;
  margin: 1.8rem 0;
  padding: .35rem 0 0;
  border-top: 1px solid var(--linha-2);
  border-bottom: 1px solid var(--linha-2);
  text-align: center;
  /* a reserva: 280 do bloco + 20 do rótulo */
  min-height: 300px;
  contain: layout;
}
.sel-ad__rotulo{
  display: block;
  font-family: var(--dado);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .3rem;
}
.sel-ad .adsbygoogle{ min-height: 280px; }

/* lateral: cabe abaixo do índice sem dominar a coluna */
.sel-ad--lateral{
  margin: 0;
  padding: .6rem .6rem .7rem;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  min-height: 272px;
}
.sel-ad--lateral .adsbygoogle{ min-height: 250px; }

.sel-ad--fim{ margin-bottom: .5rem; }

@media (max-width: 480px){
  /* 336x280 não cabe em 375px de tela; o formato que entra é 300x250 */
  .sel-ad{ min-height: 270px; }
  .sel-ad .adsbygoogle{ min-height: 250px; }
}
@media print{ .sel-ad{ display: none; } }