/* ====================================================================== */
/* FONTS */
/* ====================================================================== */
@font-face{
font-family:"PT Sans";
src:url("/fonts/PT_Sans/PTSans-Regular.woff2") format("woff2"),
url("/fonts/PT_Sans/PTSans-Regular.woff") format("woff");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"PT Sans";
src:url("/fonts/PT_Sans/PTSans-Bold.woff2") format("woff2"),
url("/fonts/PT_Sans/PTSans-Bold.woff") format("woff");
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:"PT Sans";
src:url("/fonts/PT_Sans/PTSans-Italic.woff2") format("woff2"),
url("/fonts/PT_Sans/PTSans-Italic.woff") format("woff");
font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
font-family:"Poppins";
src:url("/fonts/poppins/poppins-regular-webfont.woff2") format("woff2"),
url("/fonts/poppins/poppins-regular-webfont.woff") format("woff");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Poppins";
src:url("/fonts/poppins/poppins-bold-webfont.woff2") format("woff2"),
url("/fonts/poppins/poppins-bold-webfont.woff") format("woff");
font-weight:700; font-style:normal; font-display:swap;
}

/* ====================================================================== */
/* RESET & BASE */
/* ====================================================================== */
:root{
--bg:#fff; --fg:#111; --muted:#6b7280; --card:#fff; --accent:#111; --divider:#ededed;
--brand:#111; --brand-2:#0ea5e9; --brand-3:#10b981;
--danger:#ef4444; --warning:#f59e0b;
}
*{ box-sizing:border-box; }
html,body{ height:auto; min-height:100%; }
html{ font-size:15px; }
body{
margin:0; background:var(--bg); color:var(--fg);
font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-size:1rem; line-height:1.6;
text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* Helpers */
.wrap{ max-width:1320px; margin:0 auto; padding:0 16px; }

/* Mantém o “respiro” que tinhas no topo do conteúdo */
main.wrap{ padding-top:64px; }

.muted{ color:#9ca3af; }

/* Botões base */
.btn{
display:inline-flex; align-items:center; gap:8px;
border:1px solid #e5e7eb; background:#fff; color:#111;
padding:8px 12px; border-radius:10px; text-decoration:none; cursor:pointer;
font-weight:700; font-size:.9rem; transition:all .15s ease;
}
.btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--dark{ background:#111; color:#fff; border-color:#111; }
.btn--pill{ border-radius:9999px; }
.btn--ghost{ background:transparent; }
.btn--sm{ padding:6px 10px; font-size:.84rem; }

/* ====================================================================== */
/* HEADER */
/* ====================================================================== */
.site-header{
position:sticky; top:0; z-index:999;
background:#fff; border-bottom:1px solid var(--divider);
transition:box-shadow .2s ease, border-color .2s ease;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  gap:16px;
  position:relative; /* <- para o menu mobile ficar ancorado ao header */
}
.header-left{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:8px; /* puxa o logo e o menu ligeiramente para a direita */
}

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}

/* logo ~20% mais pequeno */
.logo{
  height:96px;
  max-height:96px;
  display:block;
  transition:height .22s ease, max-height .22s ease;
}

/* Botão hamburger / navegação mobile */
.nav-toggle{
  display:none; /* só aparece em mobile */
  align-items:center;
  justify-content:center;
  width:36px;
  height:30px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:0;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}

.nav-toggle-box{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
}

.nav-toggle-bar{
  width:18px;
  height:2px;
  border-radius:999px;
  background:#111;
}

/* NAV mobile (dropdown) */
@media (max-width:860px){
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:10px 16px 12px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    transform-origin:top right;
    transform:scaleY(.8);
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
    z-index:980;
  }

  /* Quando aberto (classe posta pelo JS: .site-header.nav-open) */
  .site-header.nav-open .nav{
    opacity:1;
    transform:scaleY(1);
    pointer-events:auto;
  }

  .nav-toggle{
    display:inline-flex;
  }
}

/* Estado “ativo” do botão quando o menu está aberto */
.site-header.nav-open .nav-toggle{
  background:#111;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.site-header.nav-open .nav-toggle-bar{
  background:#fff;
}

.site-header.is-shrunk .logo{ height:60px; max-height:60px; }
body.modal-open .site-header{ opacity:.5; pointer-events:none; z-index:999; }

.nav{ display:flex; align-items:center; gap:16px; }
.nav a{
font-family:"Poppins","PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans", sans-serif;
color:#111; text-decoration:none; text-transform:uppercase;
font-weight:600; letter-spacing:.045em; font-size:.66rem; line-height:1; padding:2px 0;
}
.nav a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }

/* ====================================================================== */
/* NAV DROPDOWN — "DESCOBRIR" (PortugalQuiz + Marcas de Memória)           */
/* Inserir a seguir a: .nav a[aria-current="page"] { ... }                */
/* ====================================================================== */

.nav .nav-dd{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* Botão do dropdown deve parecer um link da navbar */
.nav .nav-dd-btn{
  appearance:none;
  background:transparent;
  border:0;
  padding:2px 0;             /* igual ao .nav a */
  margin:0;

  font-family:"Poppins","PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:#111;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.045em;
  font-size:.66rem;
  line-height:1;

  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.nav .nav-dd-btn:hover{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}

/* “ativo” quando estás numa das páginas do Descobrir */
.nav .nav-dd-btn[aria-current="page"]{
  text-decoration:underline;
  text-underline-offset:7px;
  text-decoration-thickness:2px;
}

/* caret */
.nav .nav-dd-btn::after{
  content:"▾";
  font-size:12px;
  opacity:.85;
  transform:translateY(1px);
}

/* Menu dropdown */
.nav .nav-dd-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;

  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:8px;

  box-shadow:0 12px 30px rgba(0,0,0,.12);
  display:none;
  z-index:1001;
}

/* Links dentro do dropdown */
.nav .nav-dd-menu a{
  display:block;
  padding:9px 10px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
}

.nav .nav-dd-menu a:hover{
  background:#f3f4f6;
  text-decoration:none;
}

/* Abre com hover (desktop) e com foco (teclado) */
.nav .nav-dd:hover .nav-dd-menu,
.nav .nav-dd:focus-within .nav-dd-menu{
  display:block;
}

/* Mobile: o teu .nav já vira coluna; aqui evitamos absolute/flutuante */
@media (max-width:860px){
  .nav .nav-dd{ width:100%; }
  .nav .nav-dd-menu{
    position:static;
    display:block;
    min-width:0;
    box-shadow:none;
    border:0;
    padding:0;
    margin-top:6px;
  }
  .nav .nav-dd-menu a{
    padding:10px 0;
    border-radius:0;
  }
  .nav .nav-dd-btn::after{ content:""; }
}

.search-btn,
.brand-share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:52px;
  height:26px;
  border-radius:999px;
  border:0;
  background:#111;
  color:#fff;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),
             0 4px 10px rgba(0,0,0,.35);
  transition:background .15s ease,
             transform .1s ease,
             box-shadow .15s ease;
}

.search-btn:hover,
.brand-share-btn:hover{
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}

.search-btn:active,
.brand-share-btn:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}

.search-btn .search-icon,
.brand-share-btn .share-icon{
  display:inline-flex;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.5));
}

.search-btn .search-icon svg,
.brand-share-btn .share-icon svg{
  width:14px;
  height:14px;
  display:block;
}

.search-form{ display:none; position:relative; }
.search-form.show{ display:block; }
.search-form input{
border:1px solid #e5e7eb; border-radius:999px; padding:.45rem .75rem; min-width:260px; outline:none;
}

/* --- AUTOSUGGEST DROPDOWN + CHIPS --- */
.sug-box{
position:absolute; top:calc(100% + 6px); right:0; left:auto;
width:min(540px, 90vw);
background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 18px 36px rgba(0,0,0,.08);
display:none; padding:8px; z-index:1000;
}
.search-form.show .sug-box{ display:block; }
.sug-list{ list-style:none; margin:0 0 6px; padding:0; max-height:340px; overflow:auto; }
.sug-list li{
display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.sug-list li:hover, .sug-list li[aria-selected="true"]{ background:#f5f7fb; }
.sug-list a{ text-decoration:none; color:#111; display:flex; gap:8px; align-items:center; width:100%; }
.sug-list .sug-type{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; }
.sug-list .sug-name{ font-weight:700; }
.sug-list mark{ background:transparent; color:#0ea5e9; font-weight:800; }

.sug-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:6px 4px 2px; border-top:1px solid #f0f2f5; }
.chip{
display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
background:#f3f4f6; color:#374151; font-weight:700; font-size:.72rem; text-decoration:none;
}
.chip:hover{ background:#e5e7eb; }

/* ====================================================================== */
/* BREADCRUMBS (OCULTO) */
/* ====================================================================== */
.breadcrumbs, nav[aria-label="breadcrumb"], .breadcrumb,
.header-breadcrumbs, .trail{ display:none !important; }

/* ====================================================================== */
/* FILTRO "TODAS" */
/* ====================================================================== */
.filterbar{
  padding:12px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.btn-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:9px 18px;
  border:1px solid #111;

  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  font-family:"Poppins","PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans", sans-serif;

  cursor:pointer;
  box-shadow:0 7px 18px rgba(0,0,0,.16);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}
.btn-all:hover{
  background:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  transform:translateY(-1px);
}
.btn-all:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* ====================================================================== */
/* GRID */
/* ====================================================================== */
.grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; align-items:stretch; }
.grid-6{ grid-template-columns: repeat(6, 1fr) !important; gap:16px !important; }
.grid-4{ grid-template-columns: repeat(4, 1fr) !important; gap:16px !important; }
.grid-3{ grid-template-columns:repeat(3,1fr)!important; gap:16px!important; }
/* Grelha específica da home: 6 → 4 → 3 → 2 colunas */
.brands-grid{
  grid-template-columns:repeat(6,1fr) !important;
}

/* desktop intermédio */
@media (max-width:1200px){
  .brands-grid{
    grid-template-columns:repeat(4,1fr) !important;
  }
}

/* “equipamentos móveis” (tablets / telemóveis em pé): 3 colunas */
@media (max-width:860px){
  .brands-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

/* telefones muito estreitos: 2 colunas para não ficar microscópico */
@media (max-width:480px){
  .brands-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media (max-width:1200px){ .grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:860px){ .grid{ grid-template-columns: repeat(3, 1fr); } .grid-3{grid-template-columns:1fr!important;} }
@media (max-width:600px){ .grid{ grid-template-columns: repeat(2, 1fr); } }

/* ====================================================================== */
/* BLOG (LISTAGEM + DETALHE) */
/* ====================================================================== */

/* Cabeçalho da página de blog */
.page-header.blog-header{
margin:12px 0 18px;
}
.page-header.blog-header h1{
margin:0 0 6px;
font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
font-weight:700;
font-size:1.25rem;
text-transform:uppercase;
letter-spacing:.03em;
}
.page-header.blog-header p{
margin:0;
color:#6b7280;
font-size:.9rem;
}

/* Listagem */
.blog-list{
margin:8px 0 24px;
}

.blog-card{
height:100%;
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:0 10px 28px rgba(0,0,0,.03);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.blog-card:hover{
transform:translateY(-3px);
box-shadow:0 16px 40px rgba(0,0,0,.08);
border-color:#dde2ea;
}
.blog-thumb{
position:relative;
background:#f3f4f6;
aspect-ratio:16/9;
overflow:hidden;
}
@supports not (aspect-ratio:1){
  .blog-thumb{ width:100%; }
  .blog-thumb::before{ content:""; display:block; padding-top:56.25%; }
}
.blog-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .18s ease;
}
.blog-card:hover .blog-thumb img{
transform:scale(1.04);
}
.blog-body{
padding:10px 12px 12px;
display:flex;
flex-direction:column;
gap:6px;
}
.blog-meta{
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.08em;
color:#9ca3af;
}
.blog-title{
margin:0;
font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
font-weight:700;
font-size:.96rem;
line-height:1.35;
}
.blog-title a{
text-decoration:none;
}
.blog-title a:hover{
text-decoration:underline;
}
.blog-excerpt{
margin:4px 0 0;
font-size:.86rem;
color:#4b5563;
line-height:1.5;
}

/* Single artigo */
.blog-article{
max-width:820px;
margin:8px auto 32px;
}
.blog-article-header{
margin:8px 0 18px;
}
.blog-article-header h1{
margin:4px 0 8px;
font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
font-weight:700;
font-size:1.5rem;
letter-spacing:.02em;
text-transform:uppercase;
}
.blog-article-date{
margin:0;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.08em;
color:#9ca3af;
}
.blog-article-excerpt{
margin:0;
color:#4b5563;
font-size:.94rem;
}

/* Override para a imagem do post do blog: cantos todos arredondados */
.blog-hero{
  margin:14px auto 18px;
  max-width:75%;
  border-radius:16px !important;
  overflow:hidden;
  background:#f3f4f6;
}

.blog-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:16px !important;
}

/* Em ecrãs pequenos continua a 100% */
@media (max-width:860px){
  .blog-hero{ max-width:100%; }
}

/* Corpo do artigo */
.blog-article-body{
font-size:.98rem;
line-height:1.72;
color:#374151;
}
.blog-article-body p{
margin:0 0 12px;
}
.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4{
margin:20px 0 8px;
font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
font-weight:700;
}
.blog-article-body ul,
.blog-article-body ol{
margin:0 0 12px 20px;
}

/* Paginação */
.pagination{
  margin:18px 0 6px;
  text-align:center;
}
.pagination ul{
  list-style:none;
  margin:0;
  padding:0;
  display:inline-flex;
  gap:6px;
  align-items:center;
}

.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:32px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  font-size:.82rem;
  text-decoration:none;
}

.pagination li.current span{
background:#111;
color:#fff;
border-color:#111;
font-weight:700;
}
.pagination a:hover{
background:#f3f4f6;
}
.pagination .dots span,
.pagination .dots{
border:none;
min-width:auto;
padding:0 4px;
}
.pagination .page-prev a,
.pagination .page-next a{
padding:0 10px;
}

/* ====================================================================== */
/* CARTÕES DE MARCA */
/* ====================================================================== */
.brand-card{ height:100%; background:#fff; border:0; border-radius:0; padding:0; }
.brand-link{ color:#111; text-decoration:none; display:block; }
.brand-link:hover{ text-decoration:none; }

.brand-thumb{
position:relative; overflow:hidden; background:#f3f4f6; border-radius:0;
aspect-ratio:300/330;
}
@supports not (aspect-ratio: 1) {
.brand-thumb{ width:100%; }
.brand-thumb::before{ content:""; display:block; padding-top:110%; }
}
.brand-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform .18s ease; }
.brand-thumb:hover .brand-img{ transform:scale(1.012); }

/* FIX favoritos: o link ocupa a camada 1; o botão (abaixo) fica na 2 */
.brand-thumb .brand-link{ position:absolute; inset:0; z-index:1; }

.brand-thumb .brand-link::after{
content:"VER"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
padding:.45rem .9rem; border-radius:999px; font-family:"Poppins","PT Sans",sans-serif;
font-weight:800; font-size:.72rem; letter-spacing:.04em;
background:#111; color:#fff; opacity:0; transition:opacity .15s ease;
}
.brand-thumb:hover .brand-link::after{ opacity:1; }

/* ===== Botão de favoritos (overlay) — agora só aparece no hover ======= */
.fav-mini{
position:absolute; right:8px; top:8px; z-index:2;
width:34px; height:34px; border-radius:999px;
border:1px solid #e5e7eb; background:#fff; color:#111; cursor:pointer;
display:grid; place-items:center; line-height:1; font-size:16px;
transition:box-shadow .15s ease, transform .15s ease, color .15s ease, background .15s ease, opacity .15s ease;
opacity:0; pointer-events:none;
}
.brand-thumb:hover .fav-mini{ opacity:1; pointer-events:auto; }
.fav-mini:hover{ box-shadow:0 10px 24px rgba(0,0,0,.12); transform:translateY(-1px); }
.fav-mini.is-on{ background:#111; color:#fff; border-color:#111; }

.card-body{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.brand-name{
margin:0; font-family:"PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans",sans-serif;
font-weight:700; font-size:.72rem; letter-spacing:.02em; line-height:1.22; text-transform:uppercase;
overflow:hidden; text-overflow:ellipsis; max-height:2.44rem;
}
/* Tags / actividades */
.tags{ margin-top:6px; color:#6b7280; font-size:.72rem; line-height:1.4; display:block; white-space:normal; overflow:hidden; text-overflow:ellipsis; }
.tags::before{ content:""; display:block; height:0; border-top:1px solid #e9e9e9; margin:6px 0 6px; }
.tag{ margin-right:9px; display:inline-block; white-space:nowrap; color:inherit; text-decoration:none; }
.tag:hover{ color:#111; text-decoration:underline; }

/* ====================================================================== */
/* MODAL DE DESTAQUES */
/* ====================================================================== */
.hl-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.hl-modal.show{ display:block; }
.hl-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); }
.hl-dialog{
position:fixed; left:50%; top:6vh; transform:translateX(-50%);
background:#fff; width:min(1200px,96vw); max-height:88vh; overflow:auto;
border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); padding:22px 22px 16px;
}
.hl-close{
position:sticky; top:0; float:right; width:36px; height:36px; border-radius:999px;
border:0; background:#111; color:#fff; cursor:pointer; display:grid; place-items:center; margin:-8px -8px 10px 0;
}
.hl-title{
  margin:2px 0 18px;
  font-size:1.35rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

.hl-rows{ display:block; }
.hl-col{ margin-bottom:24px; }

.hl-col header h4{
  margin:0 0 10px;
  font-size:.95rem;
  line-height:1.25;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

.hl-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.hl-grid .brand-card{ contain:content; }
.hl-grid .brand-thumb{ aspect-ratio:1/1; background:#f3f4f6; }
@supports not (aspect-ratio: 1) { .hl-grid .brand-thumb::before{ content:""; display:block; padding-top:100%; } }
.hl-grid .brand-name{
font-family:"PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-size:.70rem; letter-spacing:.02em; line-height:1.22; overflow:hidden; text-overflow:ellipsis; max-height:2.44rem;
}
.hl-grid .brand-thumb .brand-link::after{ font-size:.68rem; }
.hl-grid .brand-thumb:hover .brand-img{ transform:none; }
@media (max-width:1200px){ .hl-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:860px){ .hl-grid{ grid-template-columns:repeat(2,1fr); } }
body.modal-open{ overflow:hidden; }

.hl-actions{
  margin-top:18px;
  text-align:right;
}

.hl-enter{
  display:inline-block;
  background:#2d2d2d;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:10px 20px;
  font-weight:800;
  letter-spacing:.08em;
  font-size:.70rem;
  text-transform:uppercase;
  border:0;
  cursor:pointer;
  font-family:"Poppins","PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  transition:background .2s ease;
}

.hl-enter:hover{
  background:#111;
}

/* ====================================================================== */
/* RODAPÉ */
/* ====================================================================== */
.site-footer{ margin-top:36px; background:#fff; border-top:1px solid var(--divider); color:#6b7280; }
.site-footer .wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px 0; font-size:.78rem; line-height:1.4; }
.footer-copy{ line-height:1.35; }

/* === SOCIAL ICONS (normalizados: mesma “família”, mesma proporção) ===== */
.social{
  display:inline-flex;
  gap:12px;
  align-items:center;
}

/* Remove o ícone "Site" (globo) só no rodapé (sem mexer no Page.h) */
.site-footer .social a[aria-label="Site"]{ display:none !important; }

/* Botão circular consistente */
.site-footer .social a{
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  text-decoration:none;

  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#6b7280;
  opacity:1;

  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.site-footer .social a:hover{
  background:#fff;
  border-color:#d7dde6;
  color:#111;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.site-footer .social a:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* SVG base: mesmo tamanho em todos */
.site-footer .social a svg{
  width:18px;
  height:18px;
  display:block;
}

/* Micro-ajustes (compensam o “desenho” ocupar menos área no viewBox) */
.site-footer .social a[aria-label="LinkedIn"] svg{ transform:scale(1.12); transform-origin:center; }
.site-footer .social a[aria-label="X"] svg{ transform:scale(1.16); transform-origin:center; }

/* Ajustes discretos (seguro para consistência) */
.site-footer .social a[aria-label="YouTube"] svg{ transform:scale(1.08); transform-origin:center; }
.site-footer .social a[aria-label="Pinterest"] svg{ transform:scale(1.06); transform-origin:center; }
.site-footer .social a[aria-label="Facebook"] svg{ transform:scale(1.02); transform-origin:center; }

/* Newsletter bloco no rodapé */
.newsletter{
border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-top:6px; background:#f9fafb; width:100%;
}
.newsletter h4{ margin:0 0 6px; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; color:#374151; }
.nl-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.nl-row input[type="email"]{
border:1px solid #d1d5db; border-radius:10px; padding:9px 10px; min-width:240px; outline:none; background:#fff;
}
.nl-row .btn-site{ padding:9px 16px; }

/* --- Newsletter mini no rodapé (#nl-mini) --- */
#nl-mini{
display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px;
}
#nl-mini label{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.72rem; color:#374151; }
#nl-mini input[type="email"]{
border:1px solid #d1d5db; border-radius:10px; padding:9px 10px; min-width:220px; outline:none; background:#fff;
}
#nl-mini .btn-primary{
display:inline-flex; align-items:center; gap:8px; border:1px solid #111; background:#111; color:#fff; padding:9px 14px; border-radius:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; cursor:pointer;
}

/* ====================================================================== */
/* PÁGINA DA MARCA - LAYOUT PRINCIPAL */
/* ====================================================================== */
.brand-title{
font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-weight:700; font-size:1.15rem; margin:0 0 16px; letter-spacing:.02em; text-transform:uppercase; color:#111;
}
.brand-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap:32px; align-items:start; margin-top:8px; margin-bottom:24px; }
.brand-main{ min-width:0; }
.brand-aside{ position:relative; }

/* Sidebar */
.brand-aside .aside-label{
font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-size:.8rem; font-weight:700; margin:0 0 8px; text-transform:uppercase; 
letter-spacing:.14em; color:#111;
}
.brand-sidebar-name{
font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-weight:700; font-size:.8rem; margin:0; letter-spacing:.14em; text-transform:uppercase; color:#374151; line-height:1.3;
}
.brand-aside .brand-aside-block{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #e5e7eb; }
.brand-aside .brand-aside-block:last-child{ border-bottom:0; padding-bottom:0; }

.brand-desc{ margin:0; font-size:.72rem; line-height:1.68; color:#374151; font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.btn-site{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#2d2d2d;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:9px 18px;
  border:1px solid #2d2d2d;

  font-weight:800;
  letter-spacing:.08em;
  font-size:.72rem;
  text-transform:uppercase;
  font-family:"Poppins","PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  cursor:pointer;
  box-shadow:0 7px 18px rgba(0,0,0,.16);
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}
.btn-site:hover{
  background:#111;
  border-color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  transform:translateY(-1px);
}
.btn-site:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* sociais da marca */
.brand-socials{ display:flex; gap:14px; align-items:center; margin-top:0; }

/* normalização de ícones também na página da marca (mesma família) */
.brand-socials .ico{
  color:#9ca3af;
  text-decoration:none;

  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;

  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;

  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.brand-socials .ico:hover{
  color:#111;
  background:#fff;
  border-color:#d7dde6;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.brand-socials .ico:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.brand-socials .ico.disabled{
  color:#c9cfd6;
  pointer-events:none;
  cursor:default;
  background:#f3f4f6;
  border-color:#e5e7eb;
  box-shadow:none;
}

/* SVG base e micro-ajustes */
.brand-socials .ico svg{ width:18px; height:18px; display:block; }
.brand-socials .ico--linkedin svg{ transform:scale(1.12); transform-origin:center; }
.brand-socials .ico--x svg{ transform:scale(1.16); transform-origin:center; }
.brand-socials .ico--youtube svg{ transform:scale(1.08); transform-origin:center; }
.brand-socials .ico--pinterest svg{ transform:scale(1.06); transform-origin:center; }

/* ====================================================================== */
/* CARROSSEL */
/* ====================================================================== */
.carousel{ position:relative; overflow:hidden; margin:0 0 56px; border-radius:0; background:#f8f8f8; }
.brand-main .carousel{ width:80%; margin-left:auto; margin-right:auto; }
.carousel *{ box-sizing:border-box; }
.carousel .c-track{ display:flex; gap:0; transition:transform .4s ease; will-change:transform; }
.carousel .c-slide{ flex:0 0 100%; min-width:100%; margin:0; aspect-ratio:16/9; background:#f8f8f8; }
.carousel .c-slide figure{ margin:0; width:100%; height:100%; }
.carousel .c-slide img{ display:block; width:100%; height:100%; object-fit:contain; background:transparent; border-radius:0; }
.carousel .c-prev, .carousel .c-next{
position:absolute; top:50%; transform:translateY(-50%);
width:38px; height:38px; line-height:36px; font-size:22px;
border-radius:999px; border:2px solid rgba(255,255,255,.95);
background:rgba(255,255,255,.9); color:#111; box-shadow:0 10px 24px rgba(0,0,0,.25);
cursor:pointer; text-align:center; font-weight:bold; transition:all .2s ease;
}
.carousel .c-prev{ left:14px; }
.carousel .c-next{ right:14px; }
.carousel .c-prev:hover, .carousel .c-next:hover{ background:#fff; border-color:#fff; transform:translateY(-50%) scale(1.08); }
.carousel .c-dots{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.carousel .c-dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer; transition:all .2s ease; border:2px solid transparent; }
.carousel .c-dots .dot.active{ background:#fff; border-color:rgba(0,0,0,.2); transform:scale(1.2); }
@supports not (aspect-ratio: 1) {
.carousel .c-slide { position: relative; }
.carousel .c-slide::before { content:""; display:block; padding-top:56.25%; }
.carousel .c-slide > figure { position:absolute; inset:0; margin:0; }
}

/* ====================================================================== */
/* GOOGLE ADS PLACEHOLDER */
/* ====================================================================== */
.google-ads-placeholder{ margin:0 0 32px; }

/* ====================================================================== */
/* MARCAS RELACIONADAS */
/* ====================================================================== */
.related-title{
font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-weight:700; font-size:1.05rem; margin:0 0 16px; letter-spacing:.02em; text-transform:uppercase;
}
.related-grid .brand-card{ contain:content; }
.related-grid .brand-thumb{ aspect-ratio:1/1; background:#f3f4f6; }
@supports not (aspect-ratio: 1) { .related-grid .brand-thumb::before{ content:""; display:block; padding-top:100%; } }
.related-grid .brand-name{
font-family:"PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-size:.70rem; letter-spacing:.02em; line-height:1.22; overflow:hidden; text-overflow:ellipsis; max-height:2.44rem;
}
.related-grid .brand-thumb .brand-link::after{ font-size:.68rem; }
.related-grid .brand-thumb:hover .brand-img{ transform:none; }
.related-bottom{ margin:48px 0 8px; }

/* ====================================================================== */
/* AGE GATE */
/* ====================================================================== */
.age-gate{ position:fixed; inset:0; z-index:1001; display:none; }
.age-gate.show{ display:block; }
.age-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); }
.age-panel{
position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
background:#fff; width:min(480px, 92vw); border-radius:12px; padding:28px 24px 24px;
box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.age-panel h3{ margin:0 0 20px; font-weight:700; letter-spacing:.01em; font-size:1.15rem; text-align:center; line-height:1.4; font-family:"PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.age-actions{ display:flex; gap:12px; justify-content:center; }
.age-btn{ border:0; padding:11px 28px; border-radius:999px; font-weight:800; letter-spacing:.06em; font-size:.78rem; cursor:pointer; font-family:"Poppins","PT Sans",sans-serif; text-transform:uppercase; transition:all .2s ease; min-width:100px; text-align:center; }
.age-btn.yes{ background:#2d2d2d; color:#fff; }
.age-btn.yes:hover{ background:#111; }
.age-btn.no{ background:#e5e7eb; color:#111; text-decoration:none; display:inline-block; }
.age-btn.no:hover{ background:#d1d5db; }

/* ====================================================================== */
/* RESPONSIVO */
/* ====================================================================== */
@media (max-width:1200px){
.nav a{ font-size:.64rem; }
.brand-name{ font-size:.70rem; }
.logo{ height:88px; max-height:88px; }
}
@media (max-width:860px){
.nav a{ font-size:.62rem; }
.logo{ height:48px; max-height:48px; }
.brand-layout{ grid-template-columns:1fr; gap:24px; margin-bottom:24px; }
.brand-aside{ order:-1; }
.brand-main{ order:1; }
.grid-4{ grid-template-columns:repeat(2,1fr) !important; }
.brand-main .carousel{ width:100%; }
.related-bottom{ margin:40px 0 6px; }
}
@media (max-width:600px){
.brand-title{ font-size:1.1rem; }
.carousel .c-slide{ aspect-ratio:4/3; }
}

/* === ESPAÇAMENTOS EXTRA NO DETALHE DA MARCA =========================== */
.brand-title{ margin-top:24px; margin-bottom:32px; }

/* ====== Planos: Paid vs Free (website + sociais) ===================== */
.btn-site.disabled{ background:#e5e7eb; color:#9ca3af; cursor:default; pointer-events:none;  border:0; box-shadow:none; }
.brand-socials .ico svg{ width:18px; height:18px; }

/* ====================================================================== */
/* PLANOS DE SUBSCRIÇÃO */
/* ====================================================================== */
.plans-page .prose p{color:#6b7280;margin:0 0 12px;}
.plans-intro{ display:grid; grid-template-columns:1fr 1fr; gap:36px; margin:8px 0 24px; }
@media(max-width:900px){ .plans-intro{grid-template-columns:1fr;} }
.section-title{
font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;margin:24px 0 10px;
}
.plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:12px; }
@media(max-width:1100px){ .plans-grid{grid-template-columns:1fr;} }
.plan-card{
border:1px solid #e5e7eb;border-radius:16px;background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.04);
transition:transform .15s ease, box-shadow .15s ease; overflow:hidden;
}
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.08); }
.plan-head{ padding:14px 16px;border-bottom:1px solid #f0f0f0; display:flex;align-items:center;justify-content:space-between; }
.plan-title{ margin:0; font-size:1.2rem; font-weight:800; letter-spacing:.01em; }
.plan-badge{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:6px 10px; background:#10b981; color:#fff; }
.plan-badge--dark{ background:#111; } .plan-badge--blue{ background:#0ea5e9; }
.plan-price{ display:flex; align-items:baseline; gap:6px; font-weight:900; font-size:2.6rem; }
.plan-price small{ font-size:.9rem; font-weight:700; color:#9ca3af; }
.plan-features{ padding:0 16px 16px; margin:0; list-style:none; }
.plan-features li{ position:relative; padding-left:26px; margin:8px 0; color:#374151; }
.plan-features li::before{ content:'✓'; position:absolute; left:0; top:0; line-height:1.3; font-weight:900; }
.plan-features .no{ color:#9ca3af; text-decoration:line-through; }
.plan-cta{ padding:0 16px 18px; }
.plan-note{ font-size:.9rem; color:#6b7280; margin-top:10px; }
.plan-card.pro .plan-head{ background:#111; color:#fff; border-bottom:0; }
.plan-card.prestigio .plan-head{ background:#0ea5e9; color:#fff; border-bottom:0; }

/* ====================================================================== */
/* PAGE HERO + CALLOUTS + STEPS */
/* ====================================================================== */
.page-hero{ margin:8px 0 20px; background:#f7f7f8; border:1px solid #ededed; border-radius:16px; padding:18px 18px 12px; }
.page-hero h1{ margin:0 0 6px; font-size:1.35rem; text-transform:uppercase; letter-spacing:.03em; }
.page-hero p{ margin:0; color:#6b7280; }

.callout{ background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; color:#374151; margin:14px 0; }
.callout a{ font-weight:700; text-decoration:underline; }

.cards-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 6px; }
.cards-steps .step{
background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
box-shadow:0 8px 22px rgba(0,0,0,.04); transition:transform .12s ease, box-shadow .12s ease;
}
.cards-steps .step:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.cards-steps .step h3{ margin:0 0 6px; font-size:1.02rem; text-transform:uppercase; }
.cards-steps .step p{ margin:0 0 10px; color:#6b7280; }
.cards-steps .step .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cards-steps .step .btn-site{ padding:8px 14px; }

/* ====================================================================== */
/* FORMS */
/* ====================================================================== */
.form{ margin:8px 0 4px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form .field{ display:flex; flex-direction:column; gap:6px; }
.form .field.full{ grid-column:1 / -1; }
.form label{ font-weight:700; font-size:.86rem; letter-spacing:.02em; text-transform:uppercase; color:#374151; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form textarea,
.form select{
border:2px solid #e5e7eb; border-radius:12px; padding:11px 12px; font-size:.98rem; outline:none; background:#fff;
transition:border-color .15s ease, box-shadow .15s ease;
}
.form textarea{ min-height:140px; resize:vertical; }
.form input:focus, .form textarea:focus, .form select:focus{
border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.form .help{ font-size:.82rem; color:#9ca3af; }
.form .actions{ grid-column:1 / -1; display:flex; gap:10px; align-items:center; margin-top:4px; }
.form .btn-site{ padding:11px 20px; }

/* Radio cards (relação com a marca) - CORRIGIDO */
.radio-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.radio-card{
position:relative; border:2px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff; cursor:pointer; user-select:none;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.radio-card input{ display:none; }
.radio-card .title{ font-weight:800; letter-spacing:.02em; }
.radio-card .desc{ color:#6b7280; font-size:.9rem; margin-top:2px; }
.radio-card:hover{ border-color:#111; box-shadow:0 8px 22px rgba(0,0,0,.06); }

/* Estado selecionado - usando apenas :has() para melhor compatibilidade */
.radio-card:has(input[type="radio"]:checked){
  border-color:#111;
  background:#f8f9fb;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.radio-card:has(input[type="radio"]:checked)::after{
  content:"✓";
  position:absolute;
  right:10px;
  top:10px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:.8rem;
}

/* ====================================================================== */
/* PLANOS (ajuste para CTAs cruzadas) */
/* ====================================================================== */
.plans-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0; }

/* ====================================================================== */
/* PARTILHAR / COPIAR (página marca) */
/* ====================================================================== */
.share-actions{
display:flex; gap:8px; align-items:center; justify-content:flex-end;
margin:0 0 10px;
}
.share-actions .btn{
border-color:#2d2d2d; background:#2d2d2d; color:#fff;
border-radius:9999px; padding:10px 20px;
text-transform:uppercase; letter-spacing:.08em; font-weight:800;
font-family:"Poppins","PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.share-actions .btn:hover{ background:#111; border-color:#111; }
.share-actions .btn--ghost{
background:transparent; color:#111; border-color:#e5e7eb;
border-radius:9999px; padding:10px 16px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.share-actions .btn--sm{ padding:8px 12px; }

/* Toast genérico */
.toast{
position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:#111; color:#fff;
border-radius:10px; padding:10px 14px; font-weight:700; box-shadow:0 16px 40px rgba(0,0,0,.25); opacity:0; pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* == SHARE MODAL (dialog#shareModal) =================================== */
.share-modal{
width:min(560px, 96vw);
border:0; border-radius:16px; padding:16px; background:#fff;
box-shadow:0 24px 72px rgba(0,0,0,.35);
}
.share-modal::backdrop{
background:rgba(0,0,0,.45);
-webkit-backdrop-filter:saturate(110%) blur(1px);
backdrop-filter:saturate(110%) blur(1px);
}
.share-modal .sm-head{
display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px;
}
.share-modal .sm-head h3{
margin:0; font-weight:800; letter-spacing:.02em; font-size:1rem; text-transform:uppercase;
}
.share-modal .sm-close{
width:34px; height:34px; border-radius:999px; border:0; background:#111; color:#fff; cursor:pointer;
display:grid; place-items:center;
}
.share-modal .sm-body{ display:grid; gap:12px; }
.share-modal .share-link{
display:flex; gap:8px; align-items:center;
}
.share-modal .share-link input{
flex:1 1 auto; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-size:.95rem; background:#f9fafb;
}
.share-modal .share-link .btn{ white-space:nowrap; }
.share-modal .share-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
@media (max-width:520px){
.share-modal .share-grid{ grid-template-columns:repeat(2,1fr); }
}
.share-modal .share-grid .btn{
justify-content:center; text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; padding:10px 12px;
}
.share-modal .share-grid .btn svg{ width:18px; height:18px; }

/* ====================================================================== */
/* NEWSLETTER (strip opcional) */
/* ====================================================================== */
.nl-strip{
position:fixed; right:16px; bottom:16px; z-index:998;
background:#111; color:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 18px 46px rgba(0,0,0,.28);
display:flex; gap:10px; align-items:center;
}
.nl-strip .nl-close{
background:transparent; border:0; color:#fff; font-weight:900; cursor:pointer; font-size:18px; width:28px; height:28px; border-radius:8px;
}
.nl-strip input[type="email"]{
border:0; border-radius:10px; padding:9px 10px; min-width:240px; outline:none; background:#fff; color:#111;
}
.nl-strip .btn--dark{ background:#0ea5e9; border-color:#0ea5e9; }
@media (max-width:600px){
.nl-strip{ left:16px; right:16px; flex-direction:column; align-items:stretch; }
.nl-strip input[type="email"]{ width:100%; min-width:0; }
}

/* ====================================================================== */
/* ACESSIBILIDADE / FOCUS */
/* ====================================================================== */
:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }
/* Skip to content */
.skip-link{
position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
position:fixed; left:16px; top:10px; z-index:1001; width:auto; height:auto;
background:#111; color:#fff; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:800; letter-spacing:.04em;
}

/* ===== Ajustes pedidos (relacionadas + espaçamentos) =================== */
.brand-main .carousel { margin-bottom: 32px; }
.google-ads-placeholder { margin: 28px 0 24px; }

/* Marcas Relacionadas: ~30% mais pequenas */
.related-bottom { margin-top: 28px; }
.related-grid {
grid-template-columns: repeat(5, 1fr) !important;
gap: 14px !important;
}
@media (max-width: 1200px) { .related-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 860px) { .related-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.related-grid .brand-thumb { aspect-ratio: 1 / 1; background:#f3f4f6; }
.related-grid .brand-name { font-size: .66rem; line-height: 1.2; max-height: 2.2rem; }
.related-grid .tags { font-size: .66rem; }

/* Alinhar título com o carrossel */
.brand-title{ width:90%; margin-left:auto; margin-right:auto; }
@media (max-width:860px){ .brand-title{ width:100%; } }

/* ====================================================================== */
/* FAVORITOS (btn + popover) */
/* ====================================================================== */
.fav-btn{
position:relative; display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
font-size:16px; line-height:1;
}
.fav-btn:hover{ box-shadow:0 8px 22px rgba(0,0,0,.08); }
.badge{
position:absolute; right:-6px; top:-6px; background:#111; color:#fff; border-radius:999px;
min-width:18px; height:18px; padding:0 5px; display:inline-grid; place-items:center; font-size:.68rem; font-weight:800;
}
.fav-popover{
position:absolute; right:0; top:calc(100% + 8px); width:min(320px, 92vw);
background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 18px 36px rgba(0,0,0,.1);
display:none; z-index:1000; overflow:hidden;
}
.fav-popover.show{ display:block; }
.fav-popover .fav-head{
padding:10px 12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:#f9fafb; border-bottom:1px solid #f0f0f0; font-size:.74rem;
}
.fav-popover .fav-list{ list-style:none; margin:0; padding:8px; max-height:260px; overflow:auto; }
.fav-popover .fav-list li{ padding:6px 6px; border-radius:8px; }
.fav-popover .fav-list li a{ text-decoration:none; }
.fav-popover .fav-list li:hover{ background:#f7f7f9; }
.fav-popover .fav-foot{ padding:8px; border-top:1px solid #f0f0f0; }
.fav-popover .btn{ width:100%; justify-content:center; }

/* ===== Página /favoritos — versão polida ============================== */
#fav-page{
padding:8px 0 20px;
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:12px;
}
@media (min-width:1201px){
#fav-page{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:860px){
#fav-page{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
#fav-page{ grid-template-columns:1fr; }
}

/* Estado vazio */
#fav-page [role="status"]{
grid-column:1 / -1;
background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px;
padding:16px; text-align:center; color:#6b7280;
}

/* Card compacto por item */
#fav-page .fav-item{
display:flex; align-items:center; justify-content:space-between; gap:10px;
background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px;
box-shadow:0 8px 22px rgba(0,0,0,.04);
transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#fav-page .fav-item:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(0,0,0,.08);
border-color:#e1e5ea;
}

/* Nome da marca */
#fav-page .fav-link{
font-weight:800; letter-spacing:.02em; text-transform:uppercase;
text-decoration:none; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto;
}
#fav-page .fav-link:hover{ text-decoration:underline; }

/* Botão remover */
#fav-page .btn.btn-sm{
padding:6px 10px; font-size:.84rem;
border-color:#111; background:#111; color:#fff; border-radius:999px;
}
#fav-page .btn.btn-sm:hover{
filter:brightness(1.05);
box-shadow:0 8px 22px rgba(0,0,0,.08);
}

/* Ícone decorativo antes do nome */
#fav-page .fav-link::before{
content:"★"; display:inline-block; margin-right:8px; opacity:.7; font-size:.86rem;
}

/* Versão em grelha se usar UL/LI .fav-list */
#fav-page .fav-list{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
#fav-page .fav-list li{
background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px;
}
#fav-page .fav-list li a{ text-decoration:none; font-weight:700; }
#fav-page .fav-list li a:hover{ text-decoration:underline; }
@media (max-width:1100px){ #fav-page .fav-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ #fav-page .fav-list{ grid-template-columns:1fr; } }

/* Botão Partilhar na sidebar (pill igual ao da pesquisa) */
.brand-share-block{
  text-align:right; /* opcional: alinha o pill à direita na sidebar */
}

/* ====================================================================== */
/* COOKIE BANNER */
/* ====================================================================== */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:16px;
  z-index:1002;
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}
.cookie-banner.show{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.cookie-banner .cookie-inner{
  max-width:1320px;
  margin:0 auto;
  padding:10px 16px;
  border-radius:14px;
  background:#111;
  color:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 18px 46px rgba(0,0,0,.35);
  font-size:.86rem;
}
.cookie-banner p{
  margin:0;
  line-height:1.5;
}
.cookie-banner .cookie-link{
  color:#e5e7eb;
  text-decoration:underline;
}
.cookie-banner .btn-cookie-accept{
  border:0;
  border-radius:999px;
  padding:9px 18px;
  background:#f9fafb;
  color:#111;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.72rem;
  cursor:pointer;
  white-space:nowrap;
  font-family:"Poppins","PT Sans",system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue", Arial, "Noto Sans",sans-serif;
}
.cookie-banner .btn-cookie-accept:hover{
  filter:brightness(0.95);
}
@media (max-width:700px){
  .cookie-banner .cookie-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .cookie-banner .btn-cookie-accept{
    align-self:flex-end;
  }
}

/* ====================================================================== */
/* PORTUGALQUIZ */
/* ====================================================================== */

/* Hero da página do quiz (reutiliza .page-hero, aqui só afinamos um pouco) */
.portugalquiz-page .page-hero{
  margin-top:10px;
  margin-bottom:18px;
}
.portugalquiz-page .page-hero h1{
  font-size:1.35rem;
}
.portugalquiz-page .page-hero p{
  font-size:.9rem;
  color:#6b7280;
}

/* Botão começar a jogar */
#pq-start{
  margin-top:10px;
}

/* Root do quiz */
#pq-root{
  margin:4px 0 32px;
  max-width:820px;
}

/* Caixa principal da pergunta */
.quiz-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px 16px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,.04);
}

.quiz-meta{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
  margin-bottom:6px;
}

.quiz-question{
  margin:0 0 12px;
  font-size:1.05rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* Media: imagem ou descrição */
.quiz-media{
  margin:0 0 12px;
}

.quiz-figure{
  margin:0;
  background:#f3f4f6;
  border-radius:12px;
  padding:10px;
  text-align:center;
}
.quiz-figure img{
  max-height:260px;
  margin:0 auto 6px;
  object-fit:contain;
}
.quiz-figure figcaption{
  margin:0;
  font-size:.8rem;
  color:#6b7280;
}

.quiz-desc{
  margin:0;
  padding:10px 12px;
  background:#f9fafb;
  border-radius:12px;
  font-size:.9rem;
  color:#374151;
}

/* Opções */
.quiz-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 8px;
}
@media (max-width:700px){
  .quiz-options{
    grid-template-columns:1fr;
  }
}

.quiz-option{
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:8px;
  text-align:left;
  font-size:.9rem;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    transform .1s ease;
}
.quiz-option:hover{
  border-color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

.quiz-option-label{
  font-weight:800;
  font-size:.84rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6b7280;
}
.quiz-option-name{
  font-weight:700;
}

/* Estados pós-resposta */
.quiz-option.is-correct{
  border-color:#10b981;
  background:#ecfdf5;
}
.quiz-option.is-wrong{
  border-color:#fecaca;
  background:#fef2f2;
}

/* Feedback + score */
.quiz-feedback{
  margin-top:6px;
  font-size:.9rem;
}
.quiz-feedback p{
  margin:0 0 4px;
}
.quiz-feedback p.ok{
  color:#16a34a;
  font-weight:700;
}
.quiz-feedback p.error{
  color:#dc2626;
  font-weight:700;
}
.quiz-feedback a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.quiz-score{
  font-size:.82rem;
  color:#6b7280;
}

/* Ações: Ver marca + Próxima pergunta */
.quiz-actions{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.quiz-actions .quiz-view-brand{
  padding:8px 14px;
}
.quiz-actions .quiz-next{
  padding:8px 18px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.78rem;
}
.quiz-actions .quiz-next[disabled]{
  opacity:.45;
  cursor:default;
  box-shadow:none;
  transform:none;
}

/* Loading / sem perguntas */
.quiz-loading{
  padding:16px;
  border-radius:12px;
  background:#f9fafb;
  border:1px dashed #e5e7eb;
  font-size:.9rem;
  color:#6b7280;
}

/* Pequeno ajuste: root centrado em mobile */
@media (max-width:860px){
  #pq-root{
    max-width:100%;
  }
}
/* ====================================================================== */
/* SOCIAL ICONS – NORMALIZAÇÃO DE PROPORÇÃO (FOOTER) */
/* ====================================================================== */

/* Se estiveres a usar o estilo “círculo” no footer */
.site-footer .social{
  display:inline-flex;
  gap:12px;
  align-items:center;
}

/* Círculo */
.site-footer .social a{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#6b7280;

  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease;
}

.site-footer .social a:hover{
  background:#fff;
  color:#111;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* O SVG fica sempre “do mesmo tamanho” */
.site-footer .social a svg{
  width:18px !important;
  height:18px !important;
  display:block;
}

/* Afinar visualmente os que costumam “parecer maiores”
   (por causa do desenho dentro do viewBox) */

/* LinkedIn: tende a parecer maior (o “in” ocupa mais área útil) */
.site-footer .social a[aria-label="LinkedIn"] svg{
  transform:scale(.84);
  transform-origin:center;
}

/* X: às vezes também parece um toque maior dependendo do SVG */
.site-footer .social a[aria-label="X"] svg{
  transform:scale(.92);
  transform-origin:center;
}

/* Pinterest: opcional (se te parecer ligeiramente maior) */
.site-footer .social a[aria-label="Pinterest"] svg{
  transform:scale(.95);
  transform-origin:center;
}
/* ====================================================================== */
/* BRAND SOCIALS – polish final + wrap + proporções por rede */
/* (colar no fim do app.css) */
/* ====================================================================== */

.brand-socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  max-width:100%;
}

.brand-socials .ico{
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;

  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#6b7280;

  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.04);

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .12s ease,
    box-shadow .15s ease;
}

.brand-socials .ico:hover{
  background:#fff;
  border-color:#d7dde6;
  color:#111;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.brand-socials .ico:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.brand-socials .ico.disabled{
  opacity:.55;
  pointer-events:none;
  cursor:default;
  transform:none;
  box-shadow:none;
}

/* SVG base */
.brand-socials .ico svg{
  width:18px;
  height:18px;
  display:block;
}

/* Micro-ajustes por ícone */
.brand-socials .ico--linkedin svg{ transform:scale(1.08); transform-origin:center; }
.brand-socials .ico--twitter  svg{ transform:scale(1.12); transform-origin:center; } /* X */
.brand-socials .ico--youtube  svg{ transform:scale(1.06); transform-origin:center; }
.brand-socials .ico--tiktok   svg{ transform:scale(1.06); transform-origin:center; }

/* Threads (@) — garantir que fica “óptico” e centrado */
.brand-socials .ico--threads svg{
  width:20px;
  height:20px;
}
.brand-socials .ico--threads text{
  dominant-baseline:middle; /* ajuda em alguns browsers */
}