/*Theme Name: PodusTheme URI: https://portaluniversodosaber.com.br/Author: Gabriel Bassotto QuintilianoAuthor URI: gabriel_bassotto@live.comDescription: Tema base minimalista, preparado para Gutenberg (blocos).Version: 1.0.2Requires at least: 6.3Tested up to: 6.6Requires PHP: 7.4Text Domain: podusLicense: GNU General Public License v2 or laterLicense URI: https://www.gnu.org/licenses/gpl-2.0.html*//* =========================================================   TOKENS / VARS (podem ser sobrescritas via Customizer)   ========================================================= */:root{  --us-primary:#0E5BD6;  --us-primary-dark:#0B3EA8;  --us-secondary:#F5A524;  --us-secondary-light:#FFC94B;  --us-neutral:#111827;  --us-white:#fff;  --us-bg:#F3F4F6;  --us-border:#ECEDEC;  --us-radius:12px;  --us-shadow:0 18px 40px -12px rgba(2,6,23,.25);  --us-font-size-body:16px;  --us-font-size-button:16px;  --us-font-size-h0:clamp(28px,3.2vw,40px);  --us-font-size-icon:24px;  --us-font-sans:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;  --us-font-icons:'Material Symbols Rounded';   --mesh-tile-x: 33px;       /* largura do tile */  --mesh-tile-y: 15px;       /* altura do tile */  --mesh-opacity: .35;       /* opacidade das linhas */  /* Caminhos padrão (ajuste o path conforme seu tema) */  --mesh-url-amarelo: url("/wp-content/themes/podus/assets/img/padroes/padrao-amarelo.svg");  --mesh-url-azul:    url("/wp-content/themes/podus/assets/img/padroes/padrao-azul.svg");}/* ================================ *//* Mapeamento da paleta Gutenberg   *//* ================================ */.has-azul-primario-color{ color:var(--us-primary) !important; }.has-azul-primario-background-color{ background-color:var(--us-primary) !important; }.has-azul-primario-border-color{ border-color:var(--us-primary) !important; }.has-azul-secundario-color{ color:var(--us-primary-dark, var(--us-primary)) !important; }.has-azul-secundario-background-color{ background-color:var(--us-primary-dark, var(--us-primary)) !important; }.has-azul-secundario-border-color{ border-color:var(--us-primary-dark, var(--us-primary)) !important; }.has-amarelo-primario-color{ color:var(--us-secondary) !important; }.has-amarelo-primario-background-color{ background-color:var(--us-secondary) !important; }.has-amarelo-primario-border-color{ border-color:var(--us-secondary) !important; }.has-amarelo-secundario-color{ color:var(--us-secondary-light, var(--us-secondary)) !important; }.has-amarelo-secundario-background-color{ background-color:var(--us-secondary-light, var(--us-secondary)) !important; }.has-amarelo-secundario-border-color{ border-color:var(--us-secondary-light, var(--us-secondary)) !important; }.has-borda-color{ color:var(--us-border, #ECEDEC) !important; }.has-borda-background-color{ background-color:var(--us-border, #ECEDEC) !important; }.has-borda-border-color{ border-color:var(--us-border, #ECEDEC) !important; }.has-texto-primario-color{ color:var(--us-neutral) !important; }.has-texto-primario-background-color{ background-color:var(--us-neutral) !important; }.has-texto-primario-border-color{ border-color:var(--us-neutral) !important; }.has-texto-branco-color{ color:var(--us-white) !important; }.has-texto-branco-background-color{ background-color:var(--us-white) !important; }.has-texto-branco-border-color{ border-color:var(--us-white) !important; }.has-fundo-sistema-color{ color:var(--us-bg) !important; }.has-fundo-sistema-background-color{ background-color:var(--us-bg) !important; }.has-fundo-sistema-border-color{ border-color:var(--us-bg) !important; }/* =================   BASE / TIPOGRAFIA   ================= */html{ scroll-behavior:smooth; }html, body{  font-family:var(--us-font-sans);  font-size:var(--us-font-size-body);  color:var(--us-neutral);}body{ background:var(--us-bg); }/* .container{ max-width:1180px; margin-inline:auto; padding-inline:16px; } *//* Utilitários de tipografia */.us-h1--primary{ color:var(--us-primary); }.us-content--centered{ text-align:center; }.us-content--centered > *{ margin-left:auto; margin-right:auto; }/* =========================================================   HEADER / MENU (mantido como está no layout)   ========================================================= *//* Barra do header (borda + sombra) */.us-header,#site-header{  position:relative;  background:var(--us-white,#FFF);  height:60px;  border-bottom:1px solid var(--us-border,#ECEDEC);  box-shadow:0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);  z-index:50;  isolation:isolate;  padding:12px 48px;  row-gap:12px;}/* Linha do menu: hambúrguer | logo | CTAs */.us-header__inner{  display:grid;  grid-template-columns:40px 1fr max-content;  align-items:center;}/* Itens posicionados no grid */.us-menu-toggle{ grid-column:1; justify-self:start; }.us-logo       { grid-column:2; justify-self:center; display:inline-flex; align-items:center; }.us-ctas       { grid-column:3; display:flex; align-items:center; gap:10px; }/* Logo (40px desktop / 32px mobile) */.us-logo img,.us-logo .custom-logo{  display:block;  height:40px;  width:auto;  object-fit:contain;}/* Botão hambúrguer + ícone (Material Symbols) */.us-icon-btn{  border:0;  display:inline-flex; align-items:center; justify-content:center;  width:40px; height:40px;  background:#fff;  color:var(--us-primary);  cursor:pointer;}.us-icon-btn:hover{ color:var(--us-secondary); }.us-icon-btn:focus-visible{  outline:3px solid color-mix(in oklab, var(--us-primary), white 60%);  outline-offset:2px;}/* Material Symbols */.material-symbols-rounded{  font-family:var(--us-font-icons);  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;  font-size:var(--us-font-size-icon); line-height:1; display:inline-block;}/* Se ainda for SVG, herda a cor do botão */.us-icon-btn svg path,.us-icon-btn svg rect{ fill:currentColor; }/* CTAs da barra */.us-btn{  display:inline-flex; align-items:center; justify-content:center;  min-width:96px; height:38px; padding:0 14px;  border-radius:8px; font-weight:700; text-decoration:none;  font-size:var(--us-font-size-button);  border:1px solid transparent; white-space:nowrap;  box-shadow:0 6px 14px -6px rgba(2,6,23,.18);  transition:transform .06s ease, filter .2s ease;}.us-btn:active{ transform:translateY(1px); }.us-btn--primary{ background:var(--us-primary-dark); color:var(--us-white,#fff); }.us-btn--primary:hover{ filter:brightness(1.03); }.us-btn--secondary{ background:var(--us-secondary-dark); color:#111; }.us-btn--secondary:hover{ filter:saturate(1.05); }/* CTAs visíveis só no desktop na barra */.us-ctas--desktop{ display:none; }@media (min-width:901px){.us-ctas--desktop{ display:flex; } .pagina-solo{	margin-top: 60px;	width: 100vw ;	padding: 24px 96px !important; /* TB LR */}}/* ==========================   PAINEL (OFFCANVAS) DO MENU   ========================== *//* Visibilidade: controlado por [hidden] + .is-open */.us-menu[hidden]{ display:none !important; }.us-menu{  position:absolute;  inset-inline:0;  top:60px;                 /* abaixo da barra */  display:grid;  place-items:start start;  /* DESKTOP: abre à ESQUERDA (abaixo do hambúrguer) */  pointer-events:none;}.us-menu__card{  pointer-events:auto;  width:min(360px, calc(100% - 32px));  background:var(--us-white,#fff);  border:1px solid var(--us-border,#ECEDEC);  border-radius:var(--us-radius);  box-shadow:var(--us-shadow);  padding:12px;}/* Lista vinda do WP */.us-menu__list{ list-style:none; margin:0; padding:6px; }.us-menu__list>li{ margin:10px 0; }.us-menu__list>li>a{  display:block; padding:10px 12px;  border-radius:10px; text-decoration:none;  color:var(--us-neutral,#111827); font-weight:700;}.us-menu__list>li>a:hover{  background:color-mix(in oklab, var(--us-primary), white 92%);  color:var(--us-primary);}/* Estado ativo + foco */.us-menu__list > li.current-menu-item > a,.us-menu__list > li.current_page_item > a{  background:color-mix(in oklab, var(--us-primary), white 92%);  color:var(--us-primary);}.us-menu__list a:focus-visible,.us-btn:focus-visible{  outline:3px solid color-mix(in oklab, var(--us-primary), white 60%);  outline-offset:2px;  border-radius:10px;}/* CTAs dentro do painel (apenas mobile) */.us-ctas--mobile{  display:none;  margin-top:8px;  gap:10px;}.us-ctas--mobile .us-btn{ width:max-content; padding-inline:18px; }/* Overlay quando o painel está aberto */.us-menu.is-open::before{  content:"";  position:fixed; inset:0;}/* =================   RESPONSIVO   ================= */@media (max-width:1024px){  /* metade da linha/sombra + padding menor na barra */  .us-header, #site-header{    border-bottom-color:rgba(236,237,236,.50);    box-shadow:0 1px 2px 0 rgba(0,0,0,.15), 0 1px 3px 1px rgba(0,0,0,.075);    padding:12px 24px !important;  }  .us-logo img,  .us-logo .custom-logo{ height:32px; }}/* Breakpoint do painel alinhado ao JS (900px) */@media (max-width:900px){  .us-menu{ place-items:start center; }  /* MOBILE: centraliza o cartão */  .us-ctas--mobile{ display:grid; }      /* mostra os botões no mobile */}@media (min-width:901px){  .us-ctas--mobile{ display:none; }      /* esconde no desktop */}/* =========================   FOOTER – Grid e estilos   ========================= */.site-footer{  background: var(--Amarelo-Primario, #FFA500);}.site-footer .rodape-grid{  display: grid;  min-height: 179px;  padding: 24px 96px;  row-gap: 10px;  column-gap: 10px;  flex-shrink: 0;  align-self: stretch;  grid-template-rows: repeat(1, minmax(0, 1fr));  grid-template-columns: repeat(2, minmax(0, 1fr));}.rodape-info{  display: flex;  flex-direction: column;  justify-content: center;  gap: 8px;}.rodape-info .site-title{  font-weight: 700;  color: #1065B5;  text-decoration: none;}.footer-menu{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }.footer-menu a{ color: #111; text-decoration: none; }.footer-menu a:hover, .footer-menu a:focus{ text-decoration: underline; }.rodape-logo{  display: flex;  align-items: center;  justify-content: flex-end;}.rodape-logo img,.rodape-logo svg{ max-height: 115px; width: auto; }/* Mobile */@media (min-width: 901px){  .area-conteudo{	   width: 100vw ;    padding: 24px 96px !important; /* TB LR */  }}@media (max-width: 900px){		.site-footer .rodape-grid{		height: auto;		padding: 12px 24px;		grid-template-columns: 1fr;		grid-template-rows: auto auto;		row-gap: 12px;		align-items: center;	}	.rodape-logo{ 		justify-content: center; 	}	  	.area-conteudo{		align-items: center;		width: 100vw ;		padding: 12px 48px !important;; /* TB LR */	}	.cards-estilo{		margin-bottom: 12px;	}		.us-hero__social{		display: flex;		gap: 12px;		justify-content: center;			}.pagina-solo{	width: 100vw ;	padding: 12px 48px !important; /* TB LR */}}/* Path: wp-content/themes/SEU_TEMA/style.css Resumo: utilitário de padding para blog, mobile-first.*/.blog-shell{padding:12px 48px;}@media (min-width:768px){.blog-shell{padding:24px 96px;}}/* Opcional: limite de largura comum em blogs */.blog-shell .entry{max-width:800px;margin:0 auto;}/* Evitar surpresas: zera margem do primeiro/último elemento no conteúdo */.entry__content > :first-child{margin-top:0;}.entry__content > :last-child{margin-bottom:0;}/* Base para seções com padrão via ::before (permite controlar a opacidade) *//* =======================================================   A) MESH SIMPLES (1 cor + padrão)  → .mesh-bg   ======================================================= */.mesh-bg{  position: relative;  isolation: isolate;           /* blending limpo com pseudo */  background-clip: padding-box; /* não vaza em borda arredondada */}/* camada do padrão (fica atrás do conteúdo) */.mesh-bg::before{  content:"";  position:absolute; inset:0;  z-index:-1;  pointer-events:none;  background-repeat: repeat;  background-position: 0 0;   /* âncora fixa pra casar tiles */  background-size: var(--mesh-tile-x) var(--mesh-tile-y);  opacity: var(--mesh-opacity);}/* Variações de cor + arquivo do padrão */.bg-mesh--amarelo{  --mesh-fill: var(--us-secondary);  background-color: var(--mesh-fill);}.bg-mesh--amarelo::before{  background-image: var(--mesh-url-amarelo);}.bg-mesh--azul{  --mesh-fill: var(--us-primary-dark);  background-color: var(--mesh-fill);}.bg-mesh--azul::before{  background-image: var(--mesh-url-azul);}/* Utilitários de ajuste rápido (se você usar meshes “neutros”) */.mesh-soft   { --mesh-opacity: .20; }.mesh-medium { --mesh-opacity: .35; } /* default */.mesh-strong { --mesh-opacity: .55; }/* Densidade — se usar outros SVGs “neutros”.    Para os SVGs 33x15 do projeto, mantenha o default. */.mesh-tight  { --mesh-tile-x: 24px; --mesh-tile-y: 11px; }.mesh-loose  { --mesh-tile-x: 40px; --mesh-tile-y: 18px; }/* Bordas/raio opcionais */.mesh-rounded { border-radius: 16px; overflow:hidden; }.mesh-border  { border:1px solid color-mix(in oklab, black 8%, transparent); }/* Dark mode (suave no azul) */@media (prefers-color-scheme: dark){  .bg-mesh--azul{ background-color: color-mix(in oklab, var(--us-primary-dark) 78%, #000); }}/* =======================================================   B) DUOTONE COM ALINHAMENTO PERFEITO (33x15)   - Um mesh em cima + outro embaixo, ambos ancorados em 0 0   - Corte (split) sempre múltiplo da altura do tile (15px)   - Cores e URLs por variáveis (defaults: amarelo/azul)   ======================================================= */.mesh-duo{  /* Parâmetros */  --tile-x: var(--mesh-tile-x);   /* 33px por padrão */  --tile-y: var(--mesh-tile-y);   /* 15px por padrão */  --rows-top: 20;                 /* número de linhas de 15px no topo */  --split: calc(var(--rows-top) * var(--tile-y));  --op: var(--mesh-opacity);  /* Cores e arquivos (defaults Podus) */  --top-color: var(--us-secondary);  --bot-color: var(--us-primary-dark);  --top-url: var(--mesh-url-amarelo);  --bot-url: var(--mesh-url-azul);  position:relative;  isolation:isolate;  color:#fff; /* ajuste conforme contraste do seu conteúdo */}/* Faixa do topo (até o split) */.mesh-duo::before{  content:"";  position:absolute; inset:0 0 calc(100% - var(--split)) 0;  z-index:-1;  background-color: var(--top-color);  background-image: var(--top-url);  background-repeat: repeat;  background-position: 0 0; /* MESMA âncora nos dois lados */  background-size: var(--tile-x) var(--tile-y);}/* Faixa de baixo (do split até o fim) */.mesh-duo::after{  content:"";  position:absolute; inset: var(--split) 0 0 0;  z-index:-1;  background-color: var(--bot-color);  background-image: var(--bot-url);  background-repeat: repeat;  background-position: 0 0; /* MESMA âncora nos dois lados */  background-size: var(--tile-x) var(--tile-y);}/* Opcional: “tingir” as linhas para aumentar contraste sem alterar o SVG.   Útil se o SVG for translúcido/neutro. */.mesh-duo .mesh-tint{  position:relative;}.mesh-duo .mesh-tint::before{  content:"";  position:absolute; inset:0;  pointer-events:none;  opacity: var(--op);  mix-blend-mode: multiply;  background:    linear-gradient(to bottom,      color-mix(in oklab, var(--top-color) 60%, black) 0 var(--split),      color-mix(in oklab, var(--bot-color) 60%, black) var(--split) 100%);}/* ===== Helpers específicos pra esse projeto ===== *//* Força o tile exato exportado (33x15) caso algo reescreva */.mesh-33x15{  --mesh-tile-x: 33px; --mesh-tile-y: 15px;  --tile-x: 33px;      --tile-y: 15px;}/*Conteudo Post*/.main-post{padding: 24px 96px;    }.main-post h1, h2, h3{    color: var(--us-primary-dark);    }/* Garante o ratio e a altura do embed do Vimeo no Gutenberg */.wp-has-aspect-ratio .wp-block-embed__wrapper { position: relative !important; }.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {  content: "" !important;           /* alguns temas zeram o ::before */  display: block !important;  padding-top: 56.25% !important;   /* 16:9 */}.wp-has-aspect-ratio .wp-block-embed__wrapper iframe,.wp-has-aspect-ratio iframe {  position: absolute !important;  inset: 0 !important;  width: 100% !important;  height: 100% !important;          /* evita height:auto que colapsa */  max-width: 100% !important;}/* Evita colapso por <p> embrulhando o bloco */p > .wp-block-embed { display: block; margin: 0; }/* Se seu tema usa display:flex no container do bloco, não deixe encolher */.wp-block-embed { min-width: 0; min-height: 0; }/* 1) Força o embed do Vimeo a ter altura via aspect-ratio (sem ::before) */figure.wp-block-embed.wp-embed-aspect-16-9.wp-has-aspect-ratio,figure.wp-block-embed.wp-embed-aspect-16-9.wp-has-aspect-ratio > .wp-block-embed__wrapper{  display:block !important;  position:relative !important;  max-width:100% !important;  height:auto !important;  aspect-ratio:16/9 !important;   /* 👈 chave da correção */  padding:0 !important;           /* mata hacks antigos */  overflow:hidden !important;}/* 2) Iframe ocupa o container inteiro, sem posição absoluta (evita colapso) */figure.wp-block-embed.wp-embed-aspect-16-9.wp-has-aspect-ratio iframe{  position:static !important;  width:100% !important;  height:100% !important;  max-width:100% !important;  display:block !important;  margin:0 !important;  inset:auto !important;}/* 3) Se o tema enfiar o bloco dentro de <p>, não deixa colapsar */p > figure.wp-block-embed{ display:block !important; margin:0 !important; }/* 4) Alguns temas usam display:flex na coluna; não deixe encolher */figure.wp-block-embed{ min-width:0 !important; min-height:0 !important; }/*Slider*/.ss-inline { --r: 16px; --gap: 10px; --dot: 12px; max-width:min(100vh,100vw); margin-inline:auto; }  .ss-inline .target { position:absolute; width:0; height:0; overflow:hidden; scroll-margin-top:0px; } /* por quê: evitar pulo com header fixo */  .ss-inline .viewport { position:relative; overflow:hidden;  }  .ss-inline .track {    display:grid; grid-auto-flow:column; grid-auto-columns:100%;    height:100%; width:100%; transition: transform .45s ease; will-change:transform;  }  .ss-inline .slide { display:grid; place-items:center; padding:0px; }  .ss-inline .dots { display:flex; justify-content:center; gap:var(--gap); margin-top:0px; }  .ss-inline .dots a { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;   margin: 0px !important;}  .ss-inline .dot { width:var(--dot); height:var(--dot); border-radius:999px; border:1px solid currentColor; opacity:.55; transition: transform .2s ease, opacity .2s ease; }  .ss-inline .dots a:hover .dot, .ss-inline .dots a:focus-visible .dot { background:var(--primary-dark);transform:scale(1.18); opacity:.9; outline:none; var(--us-primary-dark, var(--us-primary)) !important; }  /* Posições do track conforme o alvo */  /* Sem hash → fica no slide 1 (transform: none) */  #s1:target ~ .ss-inline .track { transform: translateX(0%); }  #s2:target ~ .ss-inline .track { transform: translateX(-100%); }   /* Dot ativo quando há hash */  #s1:target ~ .ss-inline .dots a[href="#s1"] .dot { opacity:1; transform:scale(1.18); }  #s2:target ~ .ss-inline .dots a[href="#s2"] .dot,  /* Opcional: marcar dot 1 quando NÃO há hash (browsers com :has) */  @supports selector(:has(*)) {    .ss-inline-wrapper:not(:has(.target:target)) .dots a[href="#s1"] .dot { opacity:1; transform:scale(1.18); }  }  /* Demo (troque por imagens/conteúdo real) */  .ss-inline .media { width:100%; height:100%; display:grid; place-items:center; font-size:clamp(22px,3vw,36px); font-weight:600; }  .ss-inline .s1 .media { background: linear-gradient(120deg, #0ea5e9, #22c55e); }  .ss-inline .s2 .media { background: linear-gradient(120deg, #f59e0b, #ef4444); }  @media (prefers-reduced-motion: reduce) {    .ss-inline .track { transition:none; }    .ss-inline .dots a:hover .dot { transform:none; }  }    .dots a  {             }    @media (max-width: 900px) {		.ss-inline {			--r: 16px;			--gap: 10px;			--dot: 12px;			width: 100%;			max-width: 900px !important; 			margin-inline: auto;		}		.ss-inline .viewport {			position: relative;			overflow: hidden;			max-width: 400px;		}  }/* ====== FIM ====== */