:root{ --brand:#2e7d32; --bg:#f7f7fb; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:#1a1a1a; }

.app{ min-height:100dvh; display:flex; flex-direction:column; }

/* HEADER corrigido */
.header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--brand);
  color:#fff;
  padding:calc(14px + env(safe-area-inset-top)) 12px 14px 12px; /* safe-area iOS/Android */
  display:flex;
  align-items:center;
  gap:10px;
}
.header .logo{ width:28px; height:28px; border-radius:8px; object-fit:cover; background:#fff; }
.header .back{ background:#fff; color:var(--brand); padding:6px 10px; border-radius:10px; text-decoration:none; font-weight:700; }
.header h1{ font-size:16px; margin:0; }

.carousel{ position:relative; overflow:hidden; height:180px; background:#000; }
.carousel .slides{ display:flex; width:100%; height:100%; transition:transform .4s ease; }
.carousel img{ width:100%; height:180px; object-fit:cover; }
.carousel .dotwrap{ position:absolute; bottom:10px; width:100%; text-align:center; }
.carousel .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#fff8; margin:0 4px; }

.grid{ padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card{ background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden; position:relative; }
.card img{ width:100%; height:120px; object-fit:cover; display:block; }
.card .label{ padding:10px 12px; font-weight:600; font-size:14px; }
.card.locked::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.card .badge{ position:absolute; left:12px; top:12px; background:#111c; color:#fff; font-size:12px; padding:6px 8px; border-radius:8px; }

/* TABBAR corrigida */
.tabbar{ background:#fff; border-top:1px solid #eee; display:flex; justify-content:space-around; }
.tabbar.fixed{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:1px solid #eee;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom)); /* safe-area inferior */
}
.tabbar a{ text-decoration:none; color:#333; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tabbar .icon{ width:22px; height:22px; border-radius:6px; background:#eee; }

/* Espaço extra para não cobrir conteúdo */
.content-pad-bottom{ padding-bottom:90px; }

.frame{ border:0; width:100%; height:calc(100dvh - 140px); }

.btn{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; }
.login{ padding:24px; display:grid; gap:14px; }
input[type=email]{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ddd; font-size:16px; }
.notice{ background:#fff3cd; color:#664d03; border:1px solid #ffecb5; padding:10px 12px; border-radius:12px; margin:12px; }
/* Correções forçadas para iOS notch + tabbar */
.header {
  padding-top: calc(14px + env(safe-area-inset-top)) !important;
}

.tabbar.fixed {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border-top: 1px solid #eee !important;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
}

.content-pad-bottom {
  padding-bottom: 120px !important; /* garantir espaço extra */
}
/* Fallbacks permanentes para iOS */
.header{
  padding-top: calc(14px + constant(safe-area-inset-top));
  padding-top: calc(14px + env(safe-area-inset-top));
}
.tabbar.fixed{
  padding: 8px 0 calc(8px + constant(safe-area-inset-bottom));
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.content-pad-bottom{ padding-bottom: 120px; }
/* === GRID PARA 4 CARDS NA TELA === */
.grid{
  padding:10px;
  display:grid;
  grid-template-columns:1fr 1fr; /* 2 colunas */
  gap:10px;                      /* espaçamento menor pra caber 2 linhas */
}

/* === CARD QUADRADO + TÍTULO CENTRAL === */
.card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.card .thumb{
  width:100%;
  aspect-ratio: 1 / 1;   /* QUADRADO */
  overflow:hidden;
  border-bottom:1px solid #f0f0f0;
}
.card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;       /* preenche sem distorcer */
}

.card .label{
  width:100%;
  text-align:center;      /* centraliza o texto */
  font-weight:600;
  font-size:14px;
  padding:10px 8px;
}

/* badge de bloqueio mantém igual */
.card.locked::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.card .badge{ position:absolute; left:12px; top:12px; background:#111c; color:#fff; font-size:12px; padding:6px 8px; border-radius:8px; }

/* === TABBAR COM ÍCONES === */
.tabbar{ background:#fff; border-top:1px solid #eee; display:flex; justify-content:space-around; }
.tabbar.fixed{
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  background:#fff;
}
.tabbar a{
  text-decoration:none; color:#333;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:12px; min-width:64px;
}
.tabbar a svg{ width:22px; height:22px; display:block; }
.tabbar a.active svg, .tabbar a.active{ color:var(--brand); }
.tabbar a.active svg path, .tabbar a.active svg circle, .tabbar a.active svg rect { stroke: var(--brand); fill: var(--brand); }

/* espaço para não cobrir o conteúdo pela tabbar */
.content-pad-bottom{ padding-bottom: 96px; }
/* ===== CARDS QUADRADOS ===== */
.card { background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden; position:relative; display:flex; flex-direction:column; }
.card .thumb{ width:100%; aspect-ratio:1/1; overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mata qualquer regra antiga que force altura fixa em img */
.card img{ height:auto !important; }

/* Título centralizado */
.card .label{ padding:10px 8px; text-align:center; font-weight:600; font-size:14px; }

/* ===== GRID 2x2 (4 cards por tela, dependendo do banner) ===== */
.grid{ padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ===== TABBAR (tamanho uniforme dos ícones) ===== */
.tabbar{ background:#fff; border-top:1px solid #eee; display:flex; justify-content:space-around; }
.tabbar.fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  background:#fff;
}
.tabbar a{ text-decoration:none; color:#333; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; min-width:64px; }
.tabbar a svg{ width:24px; height:24px; display:block; }   /* <- tamanho padronizado */
.tabbar a.active{ color:var(--brand); }
.tabbar a.active svg path, .tabbar a.active svg circle, .tabbar a.active svg rect { stroke:var(--brand); fill:var(--brand); }

/* Espaço para a tabbar */
.content-pad-bottom{ padding-bottom:100px !important; }
/* ===== Banner sem cortes (contain) ===== */
.carousel.contain{
  height:auto;                 /* libera a altura conforme a imagem */
  background:#000;             /* fundo para “letterbox” elegante */
  overflow:hidden;
}
.carousel.contain .slides{
  display:block;               /* cada slide empilha verticalmente sem forçar altura */
}
.carousel.contain .slides a{ display:block; }
.carousel.contain img{
  width:100%;
  height:auto;                 /* mantém proporção */
  object-fit:contain;          /* NUNCA corta a imagem */
}

/* (opcional) se quiser limitar a altura máxima no celular */
@media (max-width: 480px){
  .carousel.contain img{ max-height: 240px; }
}
/* Banner menor (altura ~150px) e sem cortes */
.carousel.small{ height:150px; background:#000; overflow:hidden; position:relative; }
.carousel.small .slides{ display:flex; width:100%; height:100%; }
.carousel.small .slide{ flex: 0 0 100%; height:100%; display:block; }
.carousel.small img{
  width:100%; height:100%;
  object-fit:contain;   /* mostra a imagem inteira, sem cortar */
}
.carousel.small .dotwrap{ position:absolute; bottom:6px; left:0; right:0; text-align:center; }
.carousel.small .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#fff9; margin:0 3px; }
/* ===== Viewer PDF (altura correta + scroll suave no iOS) ===== */
.pdf-container{
  height: calc(100svh - 160px);           /* espaço p/ header + tabbar */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #f5f5f7;
  padding: 12px 8px 24px;
}

/* Canvas de cada página renderizada pelo PDF.js */
.pdf-page{
  display:block;
  margin: 0 auto 12px;
  background:#fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  border-radius: 6px;
}

/* Fallback <object>/<iframe> fora do iOS */
.pdfobj{
  border:0;
  width:100%;
  height: calc(100svh - 160px);
}
/* ===== Ajustes do viewer PDF ===== */
.pdf-container{
  /* altura sem cobrir header + tabbar (ajuste fino se precisar) */
  height: calc(100dvh - 160px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #f5f5f7;
  padding: 12px 8px 24px;
  scroll-behavior: smooth;
}
.pdf-page{
  display:block;
  margin: 0 auto 12px;
  background:#fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  border-radius: 6px;
}

/* Fallback nativo fora do iOS */
.pdfobj{
  border:0;
  width:100%;
  height: calc(100dvh - 160px);
}

/* ===== Botão Voltar FLUTUANTE (sempre visível) ===== */
.pdf-fab-back{
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 10px;
  z-index: 10000;
  background: #fff;
  color: var(--brand);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  text-decoration: none;
  font-weight: 700;
}
/* ===== Artigo (módulo de texto) ===== */
.article{ padding:16px 14px; }
.greet{ font-size:14px; opacity:.8; margin-bottom:6px; }
.article-title{ font-size:20px; margin:0 0 10px; line-height:1.25; }
.article-body{ max-width:800px; line-height:1.7; font-size:16px; }
.article-body p{
  margin:0 0 12px;
  background:#fff;
  padding:10px 12px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.article{ padding:16px 14px; }
.greet{ font-size:14px; opacity:.8; margin-bottom:6px; }
.article-title{ font-size:20px; margin:0 0 10px; line-height:1.25; }
.article-body{ max-width:800px; line-height:1.7; font-size:16px; }
.article-body p{ margin:0 0 12px; background:#fff; padding:10px 12px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.04); }

.pdf-container{ height:calc(100dvh - 160px); overflow:auto; -webkit-overflow-scrolling:touch; background:#f5f5f7; padding:12px 8px 24px; }
.pdf-page{ display:block; margin:0 auto 12px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.08); border-radius:6px; }
.pdfobj{ border:0; width:100%; height:calc(100dvh - 160px); }
.pdf-fab-back{ position:fixed; top:calc(10px + env(safe-area-inset-top)); left:10px; z-index:10000; background:#fff; color:var(--brand); border-radius:999px; padding:10px 14px; box-shadow:0 6px 18px rgba(0,0,0,.15); text-decoration:none; font-weight:700; }
.card.locked .thumb img{ filter:grayscale(100%) brightness(.7); }
.card.locked{ position:relative; }
.card.locked .badge-lock{
  position:absolute; right:8px; bottom:46px;
  display:flex; align-items:center; gap:6px;
  background:rgba(17,17,17,.55); color:#fff; padding:6px 10px;
  border-radius:10px; font-size:12px; backdrop-filter:saturate(120%) blur(2px);
}
.card.locked .badge-lock svg{ width:16px; height:16px; fill:#fff; }
/* ====== GRID 2×2 ESTÁVEL ====== */
.grid{
  padding:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;   /* 2 colunas */
  gap:12px;
}

/* cada card é um bloco (âncora inline quebrou a grid) */
.grid > a.card{ display:flex; }  /* força a ancora a virar bloco */
a.card{
  text-decoration:none; color:inherit;
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
  width:100%;                    /* não deixa “crescer” além da coluna */
  display:flex; flex-direction:column;
}

/* ====== THUMB QUADRADA ====== */
.card .thumb{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;           /* mantém quadrado */
  overflow:hidden;
}
.card .thumb img{
  width:100%;
  height:100%;
  object-fit: cover;              /* preenche sem distorcer */
  display:block;                  /* remove “linha fantasma” */
}

/* ====== TÍTULO ====== */
.card .label{
  padding:10px 8px;
  text-align:center;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  min-height:40px;                /* espaço fixo pro título */
}

/* ====== ESTADO BLOQUEADO (PB + badge) ====== */
.card.locked .thumb img{ filter:grayscale(100%) brightness(.7); }

.card .badge-lock{
  position:absolute;
  left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  background:rgba(17,17,17,.65); color:#fff;
  padding:6px 10px; border-radius:12px; font-size:12px;
  backdrop-filter:saturate(120%) blur(2px);
  pointer-events:none; max-width:92%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  z-index:2;
}
.card .badge-lock svg{ width:16px; height:16px; fill:#fff; }

/* ====== “ANTI-BUG” (mata regras antigas) ====== */
.card img{ height:auto !important; }                 /* impede alturas fixas antigas */
.card .thumb img{ height:100% !important; }          /* mas dentro da thumb é 100% */
.grid .card, .grid > a.card{ width:100% !important; }/* impede larguras estranhas */