/* =====================================================
   TUFOS-LIKE THEME — drop-in stylesheet
   (cores, sombras, grids e botões replicando o look)
   Cole este arquivo no lugar do seu CSS atual.
===================================================== */
/* bloco inteiro */
.catmenu{
  border:1px solid #d8d8d8;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
/* container principal */
.categorias {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
  width: 240px;
  font-family: "Montserrat", Arial, sans-serif;
}

.categorias h3 {
  font-size: 16px;
  font-weight: 800;
  color: #444;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

/* lista de botões */
.categorias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* botão */
.categorias li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, #ff7a00, #ff5500);
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(255, 100, 0, 0.2);
  transition: all 0.25s ease;
}

/* ícone decorativo opcional (seta) */
.categorias li a::after {
  content: "›";
  font-weight: bold;
  font-size: 14px;
  opacity: 0.6;
}
/* ===== MENU BONITO (override) ===== */
.catmenu{width:260px; background:#fff; border:1px solid #e6e6e6; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden}
.catmenu-bar{background:#ff7a00;color:#fff;font-weight:900;letter-spacing:.3px;padding:12px 14px;border-bottom:3px solid #d86a00;display:flex;align-items:center;gap:10px}
.catmenu-cats{list-style:none;margin:0;padding:14px;display:grid;gap:10px;background:#fff;border:0}

/* botão “pílula” */
.catmenu-cats a{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:12px;font-weight:800;text-decoration:none;
  color:#fff;background:linear-gradient(90deg,#ff7a00,#ff5900);
  box-shadow:0 2px 6px rgba(255,100,0,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.catmenu-cats a::after{content:"›";opacity:.7;font-weight:900}

/* hover */
.catmenu-cats a:hover{transform:translateX(3px);box-shadow:0 4px 12px rgba(255,122,0,.28);filter:saturate(1.05)}

/* ativo e desabilitado */
.catmenu-cats li.is-active a{background:#f3f4f6;color:#333;box-shadow:inset 0 0 0 2px #ff7a00}
.catmenu-cats li.disabled a{background:#f1f1f1;color:#bbb;box-shadow:none;cursor:not-allowed}

/* opcional: cores por categoria (se quiser variar) */
.catmenu-cats .amadoras   a{ background:linear-gradient(90deg,#ff5a9a,#ff256f) }
.catmenu-cats .animadas   a{ background:linear-gradient(90deg,#00c2ff,#008bff) }
.catmenu-cats .cartoons   a{ background:linear-gradient(90deg,#8f67ff,#6a35c9) }
.catmenu-cats .parodias   a{ background:linear-gradient(90deg,#ffb100,#ff7a00) }
.catmenu-cats .quadrinhos a{ background:linear-gradient(90deg,#1bd870,#14b45a) }
.catmenu-cats .tematicas  a{ background:linear-gradient(90deg,#00a9ff,#006bff) }
.catmenu-cats .variadas   a{ background:linear-gradient(90deg,#ff7a00,#ff3c00) }

/* hover */
.categorias li a:hover {
  transform: translateX(4px);
  background: linear-gradient(90deg, #ff8f26, #ff6a00);
  box-shadow: 0 4px 10px rgba(255, 122, 0, 0.25);
}

/* item desativado */
.categorias li.disabled a {
  background: #f3f3f3;
  color: #bbb;
  cursor: not-allowed;
  box-shadow: none;
}

/* faixa laranja do topo */
.catmenu-bar{
  background:#ff7a00;
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  padding:10px 14px;
  border-bottom:4px solid #d86a00;
  display:flex;
  align-items:center;
  gap:10px;
}
.catmenu-bar .icon-hamb{
  width:32px; height:32px;
  display:grid; place-items:center;
  background:#fff; color:#ff7a00;
  border-radius:6px; font-weight:900;
  box-shadow:0 1px 0 #fff,0 2px 0 rgba(0,0,0,.08);
}

/* grade principal */
.catmenu-grid{
  display:grid;
  grid-template-columns: 240px 1fr;
  min-height: 360px;
}

/* coluna de categorias */
.catmenu-cats{
  list-style:none;
  margin:0; padding:10px 0;
  background:#fafafa;
  border-right:1px solid #e7e7e7;
}
.catmenu-cats li{
  position:relative;
}
.catmenu-cats a{
  display:block;
  padding:11px 16px;
  font-weight:900;
  color:#222;
  text-decoration:none;
  border-top:1px solid #f0f0f0;
  border-bottom:1px solid #f0f0f0;
}
.catmenu-cats li:hover a{ background:#f5f5f5; }

/* “pílula” selecionada + seta para a direita */
.catmenu-cats li.is-active a{
  background:#eaeaea;
  border-color:#dcdcdc;
}
.catmenu-cats li.is-active::after{
  /* seta cinza clara apontando para a direita */
  content:"";
  position:absolute;
  right:-18px; top:50%;
  transform:translateY(-50%);
  border-style:solid;
  border-width:18px 0 18px 18px;
  border-color:transparent transparent transparent #eaeaea;
}
.catmenu-cats li.is-active::before{
  /* linha rosa do print (se quiser trocar, mude a cor) */
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:6px; background:#e33aa5;
}
/* ---------- HAMBÚRGUER BONITO ---------- */
.mh-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:#fff; border:1px solid #e7e7e7;
  box-shadow:0 1px 0 #fff, 0 2px 10px rgba(0,0,0,.08);
  cursor:pointer; transition:.2s;
}
.mh-btn:hover{ transform:translateY(-1px) }
.mh-line{
  width:18px; height:2px; background:#333; border-radius:2px;
  display:block; transition:transform .25s, opacity .2s;
}
.mh-line + .mh-line{ margin-top:4px }

/* estado aberto: vira “X” */
.mh-btn[aria-expanded="true"] .mh-line:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.mh-btn[aria-expanded="true"] .mh-line:nth-child(2){ opacity:0 }
.mh-btn[aria-expanded="true"] .mh-line:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ---------- DROPDOWN ---------- */

.mh-drop{
  position:absolute; left:0; right:0;
  border-top:1px solid #d8a473;
  box-shadow:0 20px 40px rgba(226, 3, 3, 0.15);
  z-index:999; overflow:hidden;
  width: 500px;
  left: 200px;
  opacity:0; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease;
}
.mh-drop.is-open{ opacity:1; transform:translateY(0);background-color: rgb(247, 244, 241) ;border-radius: 16px;border: 2px solid #ff7a00;}

/* conteúdo */
.mh-nav{
  display:flex; flex-wrap:wrap; gap:10px 18px;
  padding:14px 16px 8px;
}
.mh-nav a{
  font-weight:900; color:#444; padding:8px 12px;
  border:1px solid #ececec; border-radius:10px; background:#fff;
}
.mh-nav a:hover{ background:#f8f8f8 }
.mh-nav .mh-cta{
  background:var(--brand,#ff7a00); color:#fff; border-color:var(--brand,#ff7a00);
}
.mh-nav .mh-cta:hover{ filter:brightness(.95) }

.mh-sep{
  font-size:.9rem; font-weight:800; color:#999;
  padding:4px 16px 0;
  text-transform:uppercase;
}

.mh-cats{
  display:grid; width: 50px;;
  gap:10px; padding:10px 16px 16px;
}
.mh-cat{
  display:block; padding:10px 12px; border-radius:10px;
  background:#f0832b; border:1px dashed #e6e6e6; color:#f1eded; font-weight:800;
}
.mh-cat:hover{ background:#fff7f0; border-style:solid; border-color:#ffd1a6 }
.tf-strip-inner{
  position: relative;
  z-index: 0;
}

.tf-strip-inner::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;                  /* ocupa toda a largura da viewport */
  transform:translateX(-50%);   /* centraliza */
  background:#f7931e;
  z-index:-1;                   /* fica atrás do conteúdo */
  border-radius:0;              /* garante sem cantos cortados */
}
/* Hero aceita overlay acima da imagem */
.tf-hero-lg{ position:relative; display:block; }
.tf-hero-lg .tf-frame{ position:relative; }

/* Overlay (texto + botão) */
.banner-overlay{
  position:absolute; left:380px; bottom:90px;
  max-width:min(560px, 90%);
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45);
  z-index:2;
}

/* Fundo escuro em degradê para dar contraste sem matar a arte */
.banner-overlay::before{
  content:""; position:absolute; inset:-16px -18px -18px -18px; border-radius:14px;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index:-1;
  left: 900px;
}

.bo-title{ margin:0 0 6px; font-size:40px; line-height:1.05; font-weight:800;color: white; }
.bo-sub{ margin:0 0 12px; font-size:18px; line-height:1.35;color: white; }

.bo-thumbs{ display:flex; gap:12px; margin:0 0 14px;color: white; }
.bo-thumbs img{
  width:128px; height:76px; object-fit:cover;
  border-radius:6px; box-shadow:0 6px 16px rgba(0,0,0,.3);
  border:2px solid rgba(255,255,255,.15);
}









/* Botão laranja com gradiente + “play” */
.bo-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:10px;
  font-weight:900; letter-spacing:.3px; text-transform:uppercase;
  background:linear-gradient(#ffa138, #ff7f00);
  color:#fff; border:1px solid rgba(0,0,0,.1);
  box-shadow:0 10px 24px rgba(255,127,0,.35), inset 0 2px 0 rgba(255,255,255,.25);
}
.bo-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,127,0,.42), inset 0 2px 0 rgba(255,255,255,.3); }
.bo-cta:active{ transform:translateY(0); }

.bo-cta-ic{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #ffc97a, #ff8a0a);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.25);
}




/* Modal base */
.md-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:1000;
}
.md{
  position:fixed; inset:auto; top:4.5%; left:50%;
  width:min(860px, 92vw); max-height:88vh; transform:translateX(-50%);
  background:#fff; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  z-index:1001; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #e5e7eb;
}
.md[hidden], .md-overlay[hidden]{ display:none !important; }

.md-title{
  margin:0; padding:14px 18px; text-align:center;
  color:#ff6a00; font-size:24px; font-weight:900; text-transform:uppercase;
  border-bottom:1px solid #eee; background:#fff;
}
.md-body{
  padding:16px; overflow:auto; line-height:1.5; color:#333;
}
.md-body h3{ margin:18px 0 6px; font-size:16px; color:#111; }
.md-body p{ margin:6px 0 10px; }
.md-body a{ color:#ff6a00; font-weight:700; text-decoration:underline; }

.md-foot{
  padding:10px 14px; text-align:center; color:#555; background:#fafafa;
  border-top:1px solid #eee; font-size:13px;
}

/* Botão fechar (X) */
.md-close{
  position:absolute; top:8px; right:10px; width:34px; height:34px;
  border-radius:50%; border:0; cursor:pointer; background:#f2f2f2; color:#444;
  font-size:22px; line-height:1; display:grid; place-items:center;
}
.md-close:hover{ background:#e9e9e9; }

/* Evita scroll do body quando o modal está aberto */
body.md-open{ overflow:hidden; }



.md-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:1000}
.md{position:fixed;left:50%;top:5%;transform:translateX(-50%);width:min(860px,92vw);max-height:88vh;
    background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);z-index:1001;display:flex;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb}
.md[hidden],.md-overlay[hidden]{display:none!important}
.md-title{margin:0;padding:14px 18px;text-align:center;color:#ff6a00;font-size:24px;font-weight:900;text-transform:uppercase;border-bottom:1px solid #eee}
.md-body{padding:16px;overflow:auto;line-height:1.5;color:#333}
.md-body h3{margin:18px 0 6px;font-size:16px;color:#111}
.md-body p{margin:6px 0 10px}
.md-body a{color:#ff6a00;font-weight:700;text-decoration:underline}
.md-foot{padding:10px 14px;text-align:center;color:#555;background:#fafafa;border-top:1px solid #eee;font-size:13px}
.md-close{position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:#f2f2f2;color:#444;font-size:22px;display:grid;place-items:center}
.md-close:hover{background:#e9e9e9}
body.md-open{overflow:hidden}


.categoria-page { padding: 20px 0; }
.categoria-titulo { color: #0066ff; margin-bottom: 10px; font-weight: 900; }
.categoria-descricao { margin-bottom: 20px; line-height: 1.5; color: #333; }
.categoria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.categoria-card { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); text-align: center; }
.categoria-card img { width: 100%; height: 160px; object-fit: cover; display:block; }
.categoria-card h3 { font-size: 16px; padding: 10px; background:#0066ff; color:#fff; text-transform: uppercase; }


/* ====== CONTAINER GLOBAL ====== */
.container,
.categoria-page {
  max-width: 1180px;         /* segura o conteúdo */
  margin: 0 auto;
  padding: 0 16px;
}

/* ====== HEADER ENXUTO ====== */
.tf-header { padding: 10px 0; }
.tf-nav-inner { display:flex; align-items:center; gap:24px; }
.tf-logo img { height: 72px; width: auto; display:block; } /* logo não estoura */

/* ====== TÍTULO + DESCRIÇÃO DA CATEGORIA ====== */
.categoria-titulo {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  margin: 12px 0 8px;
  color: #0b63ff;
  font-weight: 800;
}
.categoria-descricao {
  color:#444;
  margin-bottom: 18px;
}

/* ====== GRID DA CATEGORIA ====== */
.categoria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 240–1fr */
  gap: 18px;
}

/* ====== CARD ====== */
.categoria-card {
  background:#fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  
}

/* Thumb com proporção fixa (16:9). Isso evita estourar. */
.categoria-card img {
  width: 100%;
  aspect-ratio: 16 / 9;        /* trava a proporção */
  object-fit: cover;           /* corta sem distorcer */
  display: block;
}

/* Título/rodapé do card */
.categoria-card h3 {
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: #0b63ff;
}

/* ====== RODAPÉ FIXO QUE NÃO ATRAPALHA ====== */
.site-footer .footer-nav {
  max-width: 1180px;
  margin: 16px auto 24px;
  padding: 0 16px;
  text-align: center;
}
/* ===== Footer decente e layout em coluna ===== */
html, body {
  height: 100%;
}

body {
  min-height: 100dvh;          /* cobre viewport inclusive no mobile moderno */
  display: flex;
  flex-direction: column;      /* header / main / footer em coluna */
}

main, .categoria-page {
  flex: 1 0 auto;              /* empurra o footer para baixo */
}

/* Espaço entre grid e footer para não “colar” */
.categoria-page {
  padding-bottom: 32px;
}

/* Grid dos cards com respiro */
.categoria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .categoria-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .categoria-grid { grid-template-columns: repeat(4, 1fr); } /* 4 x 2 = 8 cards bonitinho */
}

/* Footer “grudado” no fundo, centralizado e com divisores */
.site-footer {
  flex-shrink: 0;
  background: #f16304;         /* ajuste à sua paleta */
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
}

.site-footer .footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;                    /* sem pipes no HTML, usamos gap e pseudo-elemento */
  font-weight: 700;
}

.site-footer .footer-nav a {
  color: #fff;
  text-decoration: none;
  line-height: 1;               /* evita aquele pipe desalinhado */
  position: relative;
  padding: 0 8px;
  opacity: .95;
}

.site-footer .footer-nav a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* insere o divisor apenas depois do primeiro link */
.site-footer .footer-nav a + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(252, 123, 3, 0.25);
  margin-right: 12px;
  transform: translateY(1px);
}

/* ====== RESPONSIVO FINO ====== */
@media (max-width: 768px) {
  .tf-logo img { height: 56px; }
  .categoria-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (min-width: 1024px){
  .categoria-grid{
    grid-template-columns: repeat(4, 1fr); /* 4x2 = 8 cards */
  }
}



/* Responsivo */
@media (max-width: 768px){
  .bo-title{ font-size:28px; }
  .bo-sub{ font-size:16px; }
  .bo-thumbs img{ width:110px; height:64px; }
  .banner-overlay{ left:12px; right:12px; bottom:12px; max-width:unset; }
  .banner-overlay::before{ inset:-12px; background:rgba(0,0,0,.5); }
}

/* ---------- BACKDROP ---------- */
.mh-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:998; opacity:0; transition:opacity .18s;
}
.mh-backdrop.is-open{ opacity:1 }

/* responsivo: em mobile o drop “cola” sob o header */
@media (max-width:900px){
  .mh-drop{ position:fixed; top:calc(64px + 44px); /* sua nav + strip */ }
}

/* cores das categorias (texto) */
.catmenu-cats .amadoras   a{ color:#dd2c7a; }
.catmenu-cats .animadas   a{ color:#00a8ff; }
.catmenu-cats .cartoons   a{ color:#6a35c9; }
.catmenu-cats .games      a{ color:#8b0a50; }
.catmenu-cats .parodias   a{ color:#f39c12; }
.catmenu-cats .polemicas  a{ color:#e53935; }
.catmenu-cats .quadrinhos a{ color:#2aa92d; }
.catmenu-cats .tematicas  a{ color:#1679d3; }
.catmenu-cats .variadas   a{ color:#8e44ad; }

/* painel da direita (lista dos itens) */

/* Logo sem fundo e mais comprida */
/* .logo-img{
  display:block;
  width: 280px;  
  height: auto;   
  object-fit: contain;
} */
/* ——— PARA DE GRUDAR NO TOPO ——— */
.tf-header{
  position: relative;   /* em vez de sticky */
  top: auto;
  z-index: 10;
}

/* ——— MENU DE ATRAÇÕES: fechado por padrão ——— */
.catmenu-grid{
  display: none;        /* fica escondido até clicar */
}
.catmenu-grid.is-open{
  display: grid;        /* mostra só quando abrir */
}

/* visual sem exagero, sem ocupar metade da tela */
.catmenu-bar{
  background:#ff7a00;
  color:#fff;
  font-weight:900;
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-bottom:3px solid #c9c9c9;
  cursor:pointer;
}
.icon-hamb{font-size:20px; line-height:1;}

/* (garanta que o CSS do catmenu anterior está no /css/site.css) */

.catmenu-list a:hover{ text-decoration:underline; }

/* responsivo */
@media (max-width: 820px){
  .catmenu-grid{ grid-template-columns:1fr; }
  .catmenu-cats{ border-right:0; border-bottom:1px solid #e7e7e7; display:flex; overflow:auto; }
  .catmenu-cats li{ min-width:180px; }
  .catmenu-cats li.is-active::after{ display:none; } /* em mobile a seta atrapalha */
}

/* TOKENS */
:root{
  --bg:#efefef;
  --paper:#ffffff;
  --ink:#222;
  --muted:#6b6b6b;
  --line:#d8d8d8;
  --brand:#ff7a00;
  --brand-dark:#e46f00;
  --accent:#6a35c9;
  --success:#2aa92d;
  --radius:8px;
}
.tf-logo img.logo-img {
  height: 90px;
  width: 69;
  display: block;
}

/* RESET / BASE */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font:18px/1.45 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial}
a{color:gray;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.container{max-width:1240px;margin:0 auto;padding:0 14px}

/* BOTÕES LARANJA */
.btn,
.tf-btn,
.tf-btn-orn,
.tf-btn-ghost-orn{
  display:inline-block;
  text-align:center;
  font-weight:900;
  border-radius:10px;
  padding:10px 14px;
  border:1px solid #cfcfcf;
  box-shadow:0 2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.tf-btn-orn{color:#fff;border-color:#da6e00;background:linear-gradient(#ff9a32,#ff7a00)}
.tf-btn-orn:hover{background:linear-gradient(#ff8d12,#ff6d00)}
.tf-btn-ghost-orn{color:#ff7a00;background:linear-gradient(#ffffff,#f2f2f2)}

/* HEADER (duas faixas) */
.tf-header{position:sticky;top:0;z-index:50}
.tf-nav{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.tf-nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* deixa o nav permitir que o logo ultrapasse a faixa */
.tf-nav { 
  overflow: visible; 
}

/* a faixa laranja fica atrás do logo, mas visível */
.tf-strip { 
  position: relative; 
  z-index: 5; 
}

/* o logo fica por cima da faixa */
.tf-logo {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: transparent !important;
  z-index: 6;
  /* opcional: dá uma folga em cima se precisar alinhar verticalmente */
  padding-top: 6px;
}

/* a imagem do logo em si */
.tf-logo img.logo-img{
  /* LARGURA grande (comprimento), sem “caixa” branca */
  

  display: block;
  background: transparent !important;

  /* pendura um pouco sobre a faixa laranja */
  margin-bottom: -28px;

  /* sombra pra dar recorte igual Tufos */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
/* tente isso só se o PNG tiver halo branco */
.tf-logo img.logo-img { mix-blend-mode: multiply; width: 156px;}

/* quando a tela for menor, reduz um pouco para não quebrar o menu */




.tf-tabs{display:flex;gap:16px;flex:1;justify-content:center}
.tf-tab{padding:10px 12px;border:1px solid transparent;border-radius:8px;font-weight:800}
.tf-tab:hover{background:#f6f6f6;border-color:var(--line)}
.tf-ctas{display:flex;gap:10px}
.tf-btn{border:1px solid var(--line)}
.tf-btn-ghost{background:#fff}
.tf-btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.tf-btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

.tf-strip{
  background:var(--brand);color:#fff;border-bottom:3px solid #c9c9c9;
}
.tf-strip-inner{height:44px;display:flex;align-items:center;gap:12px;background-color: #ff9c2e;}
.tf-home{
  border:none;background:#fff;color:#333;width:32px;height:32px;border-radius:6px;cursor:pointer;
  box-shadow:0 1px 0 #fff,0 2px 0 rgba(0,0,0,.08);
}
strong.tf-strip-title {
    color: white;
}
.button.mh-btn{
  color: gray;
}
.tf-strip-title{flex:1;text-align:center;font-weight:900;letter-spacing:.3px}
.tf-strip-spacer{width:32px}

/* SCREAMER (faixa com textura e título laranja) */
.tf-screamer{
  background:
    radial-gradient(#d9d9d9 1px, transparent 1px) 0 0/10px 10px,
    #efefef;
  border:1px solid #d8d8d8;border-radius:8px;
  padding:14px 0;margin:16px 0 18px;
  box-shadow:0 2px 0 #fff, 0 6px 16px rgba(0,0,0,.06) inset;
}
.tf-screamer-title{
  margin:0;padding:6px 8px;text-transform:uppercase;font-weight:900;
  font-size:clamp(26px,3.8vw,36px);letter-spacing:.6px;color:#ff7a00;
  text-shadow:0 2px 0 #ffffff,0 3px 0 rgba(0,0,0,.06),0 8px 18px rgba(0,0,0,.10);
}

/* HERO (banner + 3 thumbs) */
.tf-hero{padding:16px 0}
.tf-hero-grid{
  display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:stretch;
}
.tf-frame{
  position:relative;background:#ddd;border:1px solid #cfcfcf;border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 1px #fff,0 1px 0 rgba(255,255,255,.8),0 6px 16px rgba(0,0,0,.08);
}
.tf-hero-lg,.tf-hero-lg .tf-frame{height:100%}
.tf-hero-lg .tf-frame{aspect-ratio:auto}
.tf-hero-side{display:grid;grid-template-rows:repeat(3,1fr);gap:10px}
.tf-hero-sm .tf-frame{height:100%;aspect-ratio:16/9;box-shadow:0 2px 6px rgba(0,0,0,.10)}
.tf-ribbon{
  position:absolute;left:0;right:0;bottom:0;background:#ff7a00;color:#fff;
  padding:6px 10px;font-weight:900;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* STRIP DE CATEGORIAS */
.attractions-strip{
  margin-top:10px;background:#f1f1f1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.scroller{display:flex;gap:8px;overflow-x:auto;padding:10px 0}
.scroller::-webkit-scrollbar{height:8px}
.scroller::-webkit-scrollbar-thumb{background:#ddd;border-radius:8px}
.chip{
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;
  font-weight:800;color:#333;white-space:nowrap;
}

/* CARDS DE “ATUALIZAÇÕES”/LISTAS */
.cards{padding:18px 0}
.section-title{margin:0 0 12px;font-size:18px;font-weight:900;color:#333}
.grid{display:grid;gap:12px}
.grid--tight{grid-template-columns:repeat(6,1fr)}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.8),0 6px 16px rgba(0,0,0,.06);
}
.card-thumb{aspect-ratio:4/3;background:#eee}
.card-body{display:flex;align-items:center;justify-content:space-between;padding:8px 10px}
.card h3{margin:0;font-size:13px;font-weight:900;color:#333}
.badge{background:var(--brand);color:#fff;border-radius:8px;padding:3px 8px;font-size:11px;font-weight:900}

/* ATRAÇÕES CLÁSSICO (4 colunas) */
.tf-attractions-classic{padding:10px 0 24px}
.tf-at-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:24px;row-gap:32px;
}
.tf-at-card{
  background:#fff;border:1px solid #d9d9d9;border-radius:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 3px 8px rgba(0,0,0,.06);
  padding:12px;display:flex;flex-direction:column;gap:10px;
}
.tf-at-logo{height:54px;display:grid;place-items:center}
.tf-at-logo img{width:auto;height:100%;object-fit:contain}
.tf-at-logo-fallback{
  width:54px;height:54px;border-radius:8px;display:grid;place-items:center;
  font-weight:900;color:#fff;background:#9c9c9c;
}
.tf-at-banner{position:relative;border:1px solid #cfcfcf;border-radius:6px;overflow:hidden;background:#eee}
.tf-at-banner img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tf-at-strip-top{position:absolute;left:0;right:0;top:0;height:6px;background:#18a51b}
.tf-at-titlebar{
  background:linear-gradient(#efefef,#e6e6e6);
  border:1px solid #d6d6d6;border-radius:6px;padding:8px 10px;
  box-shadow:inset 0 1px 0 #fff;
}
.tf-at-titlebar h3{
  margin:0;text-align:center;font-weight:900;font-size:15px;color:var(--accent);
  text-shadow:0 1px 0 #fff;
}
.tf-at-desc{margin:0;color:#4a4a4a;font-size:14px;line-height:1.35}
.tf-at-meta{text-align:center;color:#6b6b6b;font-size:13px;font-weight:700}
.tf-at-ctas{display:flex;gap:12px;justify-content:space-between}

/* CARROSSEL (usa .tf-at-carousel + .tf-at-track) */
.tf-at-carousel{position:relative;display:flex;align-items:center;gap:12px}
.tf-at-carousel .tf-at-track{
  display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:6px 2px 14px;flex:1 1 auto;scrollbar-width:none;
}
.tf-at-carousel .tf-at-track::-webkit-scrollbar{display:none}
.tf-at-carousel .tf-at-track .tf-at-card{
  flex:0 0 calc(25% - 18px);scroll-snap-align:start;transition:transform .18s ease;
}
.tf-at-carousel .tf-at-track .tf-at-card:hover{transform:translateY(-3px)}
.at-btn{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:2px solid var(--brand);background:#fff;color:var(--brand);
  font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.12);
  display:grid;place-items:center;transition:.2s;
}
.at-btn:hover{background:var(--brand);color:#fff}

/* “MAIS ATRAÇÕES” (headline + grid 4 colunas) */
.tf-more-4{margin:10px 0 24px}
.tf-secbar{
  display:flex;align-items:center;gap:10px;margin:4px 0 8px;font-weight:900;color:#333;
  font-size:clamp(18px,1.8vw,26px);
}
.tf-secbar-ic{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;
  background:var(--brand);color:#fff;font-size:18px;line-height:1;
  box-shadow:0 1px 0 #fff,0 2px 0 rgba(0,0,0,.08);
}
.tf-secbar-line{
  height:4px;background:var(--brand);border-radius:2px;margin:0 0 14px 38px;
  width:min(92%,980px);box-shadow:0 1px 0 #fff inset,0 1px 0 rgba(0,0,0,.06);
}
.tf-more4-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:24px;row-gap:32px;
}
.tf-more4-card{
  background:#fff;border:1px solid #d1d1d1;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 3px 8px rgba(0,0,0,.06);
  padding:12px;display:flex;flex-direction:column;gap:10px;
}
.tf-more4-logo{height:56px;display:grid;place-items:center}
.tf-more4-logo img{width:auto;height:100%;object-fit:contain}
.tf-more4-banner{position:relative;border:1px solid #cfcfcf;border-radius:6px;overflow:hidden;background:#eee}
.tf-more4-banner img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tf-topline{position:absolute;left:0;right:0;top:0;height:6px;background:#18a51b}
.tf-more4-titlebar{
  background:linear-gradient(#efefef,#e6e6e6);border:1px solid #d6d6d6;border-radius:6px;padding:8px 10px;
  box-shadow:inset 0 1px 0 #fff;
}
.tf-more4-titlebar h3{margin:0;text-align:center;font-weight:900;font-size:15px;color:var(--success);text-shadow:0 1px 0 #fff}
.tf-more4-desc{margin:0;color:#333;font-size:14px;line-height:1.35}
.tf-more4-meta{text-align:center;color:#6b6b6b;font-size:13px;font-weight:700}
.tf-more4-ctas{display:flex;gap:12px;justify-content:space-between;margin-top:auto}

.site-footer{
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  color:#333;
}

.footer-highlight{
  background:#ff7a00;
  padding:20px 0;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:1.4rem;
  border-top:4px solid #c9c9c9;
  border-bottom:4px solid #c9c9c9;
  box-shadow:0 -2px 8px rgba(0,0,0,.2) inset;
}

.footer-icons{
  background:#fff;
  padding:24px 0;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
}

.footer-icons-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:20px;
  text-align:center;
}

.footer-icon img{
  width:40px;
  height:40px;
  margin:0 auto 6px;
}

.footer-icon p{
  font-weight:700;
  font-size:0.9rem;
  color:#222;
}

.footer-bottom{
  background:#ff7a00;
  color:#fff;
  padding:12px 0 6px;
}

.footer-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  padding:10px 0;
}

.footer-nav a{
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
}

.footer-nav a:hover{
  text-decoration:underline;
}

.footer-credits{
  border-top:1px solid rgba(255,255,255,.4);
  text-align:center;
  font-size:0.85rem;
  padding:8px 0;
  color:#f1f1f1;
}

.footer-credits a{
  color:#fff;
  text-decoration:underline;
}
/* ================================
   CTA BANNER (antes do footer)
==================================*/
.cta-banner{
  background:linear-gradient(to right, #ff7a00, #ff9c2e);
  padding:40px 0;
  color:#fff;
  border-top:4px solid #c9c9c9;
  border-bottom:4px solid #c9c9c9;
}

.cta-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}

.cta-text{
  flex:1 1 420px;
}

.cta-text h2{
  font-size:4rem;
  font-weight:900;
  margin-bottom:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

.cta-text p{
  font-size:1.09rem;
  margin-bottom:20px;
  color:#fff;
}

.cta-btn{
  display:inline-block;
  background:#fff;
  color:#ff7a00;
  font-weight:900;
  padding:14px 28px;
  border-radius:8px;
  letter-spacing:.3px;
  box-shadow:0 3px 0 rgba(0,0,0,.15);
  transition:.25s;
}

.cta-btn:hover{
  background:#f5f5f5;
  transform:translateY(-2px);
}

.cta-image{
  flex:1 1 380px;
  text-align:right;
}

.cta-image img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}










/* Responsivo */
@media(max-width:800px){
  .cta-banner-inner{flex-direction:column;text-align:center}
  .cta-image{text-align:center}
  .cta-text h2{font-size:1.6rem}
}

/* RESPONSIVO */
@media (max-width:1200px){
  .grid--tight{grid-template-columns:repeat(5,1fr)}
  .tf-at-grid{grid-template-columns:repeat(3,1fr)}
  .tf-more4-grid{grid-template-columns:repeat(3,1fr)}
  .tf-at-carousel .tf-at-track .tf-at-card{flex-basis:calc(33.333% - 16px)}
}
@media (max-width:1024px){
  .tf-hero-grid{grid-template-columns:1fr}
  .grid--tight{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .tf-at-grid{grid-template-columns:repeat(2,1fr)}
  .tf-more4-grid{grid-template-columns:repeat(2,1fr)}
  .tf-at-carousel .tf-at-track .tf-at-card{flex-basis:calc(50% - 14px)}
}
@media (max-width:720px){
  .grid--tight{grid-template-columns:repeat(3,1fr)}
  .tf-tabs{display:none}
}
@media (max-width:560px){
  .grid--tight{grid-template-columns:repeat(2,1fr)}
  .tf-at-grid{grid-template-columns:1fr}
  .tf-more4-grid{grid-template-columns:1fr}
  .tf-at-carousel .tf-at-track .tf-at-card{flex-basis:90%}
}