/* =====================================================================
   Agenter - correcoes das paginas comerciais                     v1.0
   Arquivo em vez de painel: nao depende de sessao de admin, e cacheavel
   e nao engorda o HTML de toda pagina.
   Ligado em layout/partials/seo.blade.php.
   ===================================================================== */

/* a variavel --head-h nao existe na folha publicada pelo painel, entao o
   calc() era descartado e o conteudo subia para tras do cabecalho */
/* A folha do painel usa var(--head-h) sem definir a variavel. Um var()
   nao resolvido invalida a declaracao inteira no momento do calculo, e
   como aquela regra vem depois desta, ela anulava o padding. Definindo
   a variavel, o calc() do painel passa a resolver em 144px.
   O !important abaixo e a garantia para o caso de a folha do painel ser
   limpa no futuro. */
:root { --head-h: 72px; }
html.ag-skin .ag-sol { padding-top: 150px !important; }
@media (max-width: 991px) {
  html.ag-skin .ag-sol { padding-top: 118px !important; }
}

/* cartao do indice: o item inteiro e o link */
html.ag-skin .ag-sol-link {
  position: relative;
  display: block;
  text-decoration: none;
  padding-bottom: 60px !important;
}
html.ag-skin .ag-sol-link h3 { color: #141414; }
html.ag-skin .ag-sol-link p { color: #4A4541; }
html.ag-skin .ag-sol-seta {
  position: absolute;
  left: 26px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #F4F1EE;
  color: #141414;
  font-size: 15px;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
html.ag-skin .ag-sol-link:hover .ag-sol-seta {
  background: #BFE74F;
  color: #141414;
  transform: translateX(3px);
}
html.ag-skin .ag-sol-link:focus-visible { outline: 2px solid #5B7A12; outline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Espaco de imagem das paginas comerciais                             */
/* O lugar da imagem existe antes do arquivo chegar: proporcao fixa,   */
/* marcador com a medida sugerida e nenhum salto de layout na troca.   */
/* ------------------------------------------------------------------ */
html.ag-skin .ag-sol-media { margin-block: clamp(28px, 4vw, 48px); }
html.ag-skin .ag-sol-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 28px;
}
html.ag-skin .ag-sol-media .ag-slot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: #EAE5DE;
  border-radius: 28px;
}
html.ag-skin .ag-sol-media .ag-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(20,20,20,.035) 25%, transparent 25%, transparent 50%, rgba(20,20,20,.035) 50%, rgba(20,20,20,.035) 75%, transparent 75%, transparent);
  background-size: 14px 14px;
}
html.ag-skin .ag-sol-media .ag-slot::after {
  content: attr(data-label) ' \2022\00a0' attr(data-size);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(20,20,20,.45);
}

/* ------------------------------------------------------------------ */
/* Escala do titulo nas paginas comerciais                             */
/* O tema impoe um tamanho proprio ao h1 que, em 390px, dava seis      */
/* linhas e enchia a primeira tela. Aqui ele acompanha a largura.      */
/* ------------------------------------------------------------------ */
html.ag-skin .ag-sol-hero h1 {
  font-size: clamp(30px, 7.2vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
html.ag-skin .ag-sol-sub { font-size: clamp(16px, 4.2vw, 19px) !important; }
html.ag-skin .ag-sol-sec > h2,
html.ag-skin .ag-sol-cta h2 { font-size: clamp(24px, 6vw, 42px) !important; line-height: 1.12 !important; }

/* alvo de toque confortavel nos botoes da pagina em tela pequena */
@media (max-width: 560px) {
  html.ag-skin .ag-sol-ctas { width: 100%; }
  html.ag-skin .ag-sol-ctas .ag-btn,
  html.ag-skin .ag-sol-ctas .ag-btn-alt { flex: 1 1 100%; min-height: 48px; }
  html.ag-skin .ag-sol-faq summary { min-height: 52px; }
}

/* seta sem sobrepor */
html.ag-skin .ag-sol-link p { margin-bottom: 0; }
html.ag-skin .ag-sol-seta { bottom: 20px !important; left: 26px !important; }

/* ------------------------------------------------------------------ */
/* Respiro lateral                                                     */
/* Os templates usam .wrap, que existia no projeto de origem mas nao   */
/* neste skin. Sem isto o conteudo encosta na borda da tela.           */
/* ------------------------------------------------------------------ */
html.ag-skin .ag-sol .wrap,
html.ag-skin .ag-sol .ag-sol-media,
html.ag-skin .ag-sol .ag-sol-crumbs {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  html.ag-skin .ag-sol .wrap,
  html.ag-skin .ag-sol .ag-sol-media,
  html.ag-skin .ag-sol .ag-sol-crumbs { padding-inline: 32px; }
}
/* os blocos escuros ja tem recheio proprio: nao somar duas vezes */
html.ag-skin .ag-sol .ag-sol-cta { margin-inline: 0; }