/* ==========================================================================
   BANNER LOJA — folha de estilo autônoma
   --------------------------------------------------------------------------
   O markup de banner.php vem do painel, que roda em Tailwind. Esta página
   não usa Tailwind — e carregar o CDN aqui traria o preflight junto, que
   zeraria o site.css inteiro. Então as classes que o banner usa estão
   reproduzidas abaixo, com os mesmos valores do Tailwind v3, todas presas
   ao #banner-loja. Nada aqui vaza para o resto da página.

   Se banner.php ganhar uma classe nova, ela precisa de uma regra aqui.
   ========================================================================== */

/* ---------- reset local (equivalente ao preflight, só dentro do banner) --- */

/* O banner é irmão do .cartao dentro do .pagina, não filho dele.
   width/max-width/margin são os mesmos de .cartao (site.css) — é isso que
   faz os dois terminarem na mesma largura em qualquer tela. Se o
   max-width do .cartao mudar lá, tem que mudar aqui junto. */
#banner-loja {
  width: 100%;
  max-width: 980px;
  margin: 24px auto 0;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
}
#banner-loja,
#banner-loja *,
#banner-loja *::before,
#banner-loja *::after { box-sizing: border-box; border: 0 solid #e2e8f0; }

#banner-loja * { margin: 0; padding: 0; }
#banner-loja a { color: inherit; text-decoration: none; }
#banner-loja img { display: block; max-width: 100%; }
#banner-loja h3 { font-size: inherit; font-weight: inherit; line-height: inherit; }

/* ---------- display / posição -------------------------------------------- */

#banner-loja .block        { display: block; }
#banner-loja .inline-flex  { display: inline-flex; }
#banner-loja .flex         { display: flex; }
#banner-loja .hidden       { display: none; }
#banner-loja .relative     { position: relative; }
#banner-loja .absolute     { position: absolute; }
#banner-loja .left-0       { left: 0; }
#banner-loja .top-0        { top: 0; }
#banner-loja .bottom-0     { bottom: 0; }
#banner-loja .z-10         { z-index: 10; }
#banner-loja .overflow-hidden { overflow: hidden; }

/* ---------- flexbox ------------------------------------------------------- */

#banner-loja .flex-col        { flex-direction: column; }
#banner-loja .flex-wrap       { flex-wrap: wrap; }
#banner-loja .items-center    { align-items: center; }
#banner-loja .items-stretch   { align-items: stretch; }
#banner-loja .justify-center  { justify-content: center; }
#banner-loja .self-start      { align-self: flex-start; }
#banner-loja .flex-1          { flex: 1 1 0%; }
#banner-loja .shrink-0        { flex-shrink: 0; }
#banner-loja .gap-2           { gap: 0.5rem; }
#banner-loja .gap-3\.5        { gap: 0.875rem; }
#banner-loja .gap-4           { gap: 1rem; }

/* ---------- dimensões ----------------------------------------------------- */

#banner-loja .w-full        { width: 100%; }
#banner-loja .h-full        { height: 100%; }
#banner-loja .h-40          { height: 10rem; }
#banner-loja .h-11          { height: 2.75rem; }
#banner-loja .w-11          { width: 2.75rem; }
#banner-loja .w-16          { width: 4rem; }
#banner-loja .w-\[5px\]     { width: 5px; }
#banner-loja .w-\[210px\]   { width: 210px; }
#banner-loja .w-\[220px\]   { width: 220px; }
#banner-loja .h-\[3px\]     { height: 3px; }
#banner-loja .max-w-\[24ch\] { max-width: 24ch; }
#banner-loja .max-w-\[26ch\] { max-width: 26ch; }
#banner-loja .max-w-\[34ch\] { max-width: 34ch; }
#banner-loja .max-w-\[42ch\] { max-width: 42ch; }

/* ---------- espaçamento --------------------------------------------------- */

#banner-loja .p-6     { padding: 1.5rem; }
#banner-loja .pl-7    { padding-left: 1.75rem; }
#banner-loja .px-3    { padding-left: 0.75rem; padding-right: 0.75rem; }
#banner-loja .px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
#banner-loja .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
#banner-loja .py-3    { padding-top: 0.75rem; padding-bottom: 0.75rem; }
#banner-loja .mt-0\.5 { margin-top: 0.125rem; }
#banner-loja .mt-1    { margin-top: 0.25rem; }

/* ---------- cores --------------------------------------------------------- */

#banner-loja .bg-white       { background-color: #ffffff; }
#banner-loja .bg-slate-100   { background-color: #f1f5f9; }
#banner-loja .bg-slate-900   { background-color: #0f172a; }
#banner-loja .bg-orange-50   { background-color: #fff7ed; }
#banner-loja .bg-orange-500  { background-color: #f97316; }

#banner-loja .text-white      { color: #ffffff; }
#banner-loja .text-slate-50   { color: #f8fafc; }
#banner-loja .text-slate-400  { color: #94a3b8; }
#banner-loja .text-slate-500  { color: #64748b; }
#banner-loja .text-slate-800  { color: #1e293b; }
#banner-loja .text-orange-400 { color: #fb923c; }
#banner-loja .text-orange-700 { color: #c2410c; }

/* ---------- bordas -------------------------------------------------------- */

#banner-loja .border           { border-width: 1px; }
#banner-loja .border-2         { border-width: 2px; }
#banner-loja .border-t         { border-top-width: 1px; }
#banner-loja .border-t-4       { border-top-width: 4px; }
#banner-loja .border-dashed    { border-style: dashed; }
#banner-loja .border-slate-200 { border-color: #e2e8f0; }
#banner-loja .border-slate-300 { border-color: #cbd5e1; }
#banner-loja .border-orange-200 { border-color: #fed7aa; }
#banner-loja .border-t-orange-500 { border-top-color: #f97316; }

#banner-loja .rounded-sm   { border-radius: 0.125rem; }
#banner-loja .rounded-md   { border-radius: 0.375rem; }
#banner-loja .rounded-lg   { border-radius: 0.5rem; }
#banner-loja .rounded-xl   { border-radius: 0.75rem; }
#banner-loja .rounded-2xl  { border-radius: 1rem; }
#banner-loja .rounded-full { border-radius: 9999px; }

/* ---------- tipografia ---------------------------------------------------- */

#banner-loja .text-sm       { font-size: 0.875rem; line-height: 1.25rem; }
#banner-loja .text-lg       { font-size: 1.125rem; line-height: 1.75rem; }
#banner-loja .text-\[10px\] { font-size: 10px; }
#banner-loja .text-\[11px\] { font-size: 11px; }
#banner-loja .text-\[15px\] { font-size: 15px; }
#banner-loja .text-\[20px\] { font-size: 20px; }
#banner-loja .text-\[21px\] { font-size: 21px; }
#banner-loja .text-\[23px\] { font-size: 23px; }
#banner-loja .text-\[25px\] { font-size: 25px; }
#banner-loja .text-\[26px\] { font-size: 26px; }
#banner-loja .text-\[30px\] { font-size: 30px; }

#banner-loja .font-semibold  { font-weight: 600; }
#banner-loja .font-bold      { font-weight: 700; }
#banner-loja .font-extrabold { font-weight: 800; }
#banner-loja .font-black     { font-weight: 900; }

#banner-loja .uppercase      { text-transform: uppercase; }
#banner-loja .text-center    { text-align: center; }
#banner-loja .no-underline   { text-decoration-line: none; }

#banner-loja .leading-tight     { line-height: 1.25; }
#banner-loja .leading-snug      { line-height: 1.375; }
#banner-loja .leading-relaxed   { line-height: 1.625; }
#banner-loja .leading-\[1\.15\] { line-height: 1.15; }
#banner-loja .leading-\[1\.2\]  { line-height: 1.2; }
#banner-loja .leading-\[1\.22\] { line-height: 1.22; }
#banner-loja .leading-\[1\.24\] { line-height: 1.24; }

#banner-loja .tracking-wider       { letter-spacing: 0.05em; }
#banner-loja .tracking-\[0\.14em\] { letter-spacing: 0.14em; }
#banner-loja .tracking-\[0\.16em\] { letter-spacing: 0.16em; }

/* ---------- imagem -------------------------------------------------------- */

#banner-loja .object-cover { object-fit: cover; }

/* Recorte diagonal da figura no modelo 02. Selecionado pelo trecho do nome
   da classe: o seletor com parênteses e vírgulas escapados seria ilegível. */
#banner-loja [class*="clip-path:polygon"] {
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- sombras ------------------------------------------------------- */

#banner-loja .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
#banner-loja .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
#banner-loja .shadow-lg.shadow-orange-500\/30 {
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3), 0 4px 6px -4px rgba(249, 115, 22, 0.3);
}

/* ---------- transições ---------------------------------------------------- */

#banner-loja .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#banner-loja .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#banner-loja .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#banner-loja .duration-300 { transition-duration: 300ms; }
#banner-loja .duration-500 { transition-duration: 500ms; }

/* ---------- hover do cartão inteiro --------------------------------------- */

#banner-loja .hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
#banner-loja .hover\:shadow-xl.hover\:shadow-slate-900\/10:hover {
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
}

/* ---------- group-hover --------------------------------------------------- */

#banner-loja .group:hover .group-hover\:bg-orange-400 { background-color: #fb923c; }
#banner-loja .group:hover .group-hover\:bg-orange-600 { background-color: #ea580c; }
#banner-loja .group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
#banner-loja .group:hover .group-hover\:scale-\[1\.04\] { transform: scale(1.04); }

/* ---------- breakpoint sm (640px) — vem depois das regras base ------------ */

@media (min-width: 640px) {
  #banner-loja .sm\:block           { display: block; }
  #banner-loja .sm\:flex-row        { flex-direction: row; }
  #banner-loja .sm\:min-h-\[270px\] { min-height: 270px; }

  #banner-loja .sm\:h-auto          { height: auto; }
  #banner-loja .sm\:w-\[34\%\]      { width: 34%; }
  #banner-loja .sm\:w-\[35\%\]      { width: 35%; }
  #banner-loja .sm\:w-\[38\%\]      { width: 38%; }
  #banner-loja .sm\:max-w-\[260px\] { max-width: 260px; }
  #banner-loja .sm\:max-w-\[265px\] { max-width: 265px; }
  #banner-loja .sm\:max-w-\[300px\] { max-width: 300px; }

  #banner-loja .sm\:p-7             { padding: 1.75rem; }
  #banner-loja .sm\:p-8             { padding: 2rem; }
  #banner-loja .sm\:pl-9            { padding-left: 2.25rem; }

  #banner-loja .sm\:border-t-0      { border-top-width: 0; }
  #banner-loja .sm\:border-l        { border-left-width: 1px; }

  #banner-loja .sm\:text-\[23px\]   { font-size: 23px; }
  #banner-loja .sm\:text-\[25px\]   { font-size: 25px; }
  #banner-loja .sm\:text-\[26px\]   { font-size: 26px; }
  #banner-loja .sm\:text-\[30px\]   { font-size: 30px; }
}

/* ---------- telas largas (1200px+): banner na lateral direita ------------- */

/* Abaixo de 1200px nada muda: o banner segue embaixo do cartão, na mesma
   largura dele. Daqui para cima o .pagina vira duas colunas — cartão à
   esquerda, banner numa coluna de 300px à direita — e o banner fica preso
   no alto da tela enquanto a lista rola, até o fim do cartão.

   O overflow-x do .pagina (site.css) passa de hidden para clip: hidden faz
   do .pagina um contêiner de rolagem e o sticky deixaria de funcionar.

   Dentro da coluna o banner assume o layout empilhado que ele já tem no
   celular (figura em cima, texto embaixo): as regras abaixo desfazem as
   do breakpoint sm, que o deixariam em linha e apertado em 300px. */
@media (min-width: 1200px) {
  .pagina {
    display: grid;
    grid-template-columns: minmax(0, 980px) 300px;
    justify-content: center;
    align-items: start;
    column-gap: 28px;
    overflow-x: clip;
  }
  .pagina > .cartao { margin: 0; }

  #banner-loja { margin: 0; max-width: none; }

  #banner-loja .sm\:flex-row        { flex-direction: column; }
  #banner-loja .sm\:min-h-\[270px\] { min-height: 0; }
  #banner-loja .sm\:block           { display: none; }   /* figura dos modelos 2 e 3, como no celular */

  /* Figura: faixa de 11rem recortada a partir do topo, que é onde a arte
     tem o título. Em tela alta ela aparece inteira (regra mais abaixo). */
  #banner-loja .sm\:h-auto          { height: 11rem; }
  #banner-loja .sm\:h-auto img      { object-position: top; }
  #banner-loja .sm\:w-\[34\%\],
  #banner-loja .sm\:w-\[35\%\],
  #banner-loja .sm\:w-\[38\%\]      { width: 100%; }
  #banner-loja .sm\:max-w-\[260px\],
  #banner-loja .sm\:max-w-\[265px\],
  #banner-loja .sm\:max-w-\[300px\] { max-width: none; }

  #banner-loja .sm\:p-7,
  #banner-loja .sm\:p-8             { padding: 1.5rem; }
  #banner-loja .sm\:pl-9            { padding-left: 1.75rem; }

  #banner-loja .sm\:border-t-0      { border-top-width: 1px; }
  #banner-loja .sm\:border-l        { border-left-width: 0; }

  #banner-loja .sm\:text-\[23px\]   { font-size: 20px; }
  #banner-loja .sm\:text-\[25px\]   { font-size: 21px; }
  #banner-loja .sm\:text-\[26px\]   { font-size: 21px; }
  #banner-loja .sm\:text-\[30px\]   { font-size: 26px; }
}

/* Só prende na rolagem se a tela tiver altura para o banner inteiro: em
   janela baixa ele ficaria cortado embaixo, então fica parado no topo da
   coluna. 88px = barra do menu (64px, fixa) + respiro. */
@media (min-width: 1200px) and (min-height: 700px) {
  #banner-loja { position: sticky; top: 88px; }
}

/* Com altura de sobra a arte aparece inteira: ela é desenhada em 300x270,
   a mesma largura da coluna. */
@media (min-width: 1200px) and (min-height: 820px) {
  #banner-loja .sm\:h-auto { height: auto; aspect-ratio: 300 / 270; }
}