/* ==========================================================================
   LinkBio — design tokens
   Extraídos dos wireframes do canvas (Main, Agendamento-*, Config-*, Admin).
   Marcados com [PROPOSTA] os valores que os wireframes não definem e que
   estou sugerindo — revisar antes de construir os blocos.
   ========================================================================== */

:root {
  /* ---- Marca do cliente (sobrescritos em runtime pelo `tema` do config.json) ---- */
  --cor-primaria: #2563EB;
  --cor-primaria-suave: #DBEAFE;
  --cor-texto-botao: #FFFFFF;

  /* ---- Neutros (fixos, iguais para todo cliente) ---- */
  --cor-fundo: #F5F5F4;          /* fundo da página */
  --cor-superficie: #FFFFFF;     /* cards, campos */
  --cor-superficie-2: #E7E5E4;   /* placeholders de mídia, skeleton */
  --cor-escura: #1C1917;         /* card da nota Google */
  --cor-texto: #292524;
  --cor-texto-2: #78716C;        /* texto secundário */
  --cor-texto-3: #A8A29E;        /* legendas, ícones inativos */
  --cor-texto-sobre-escura: #D6D3D1;
  --cor-borda: #D6D3D1;
  --cor-borda-suave: #E7E5E4;

  /* ---- Semânticas ---- */
  --cor-sucesso: #16A34A;   --cor-sucesso-fundo: #DCFCE7;
  --cor-alerta:  #D97706;   --cor-alerta-fundo:  #FFFBEB;
  --cor-erro:    #DC2626;   --cor-erro-fundo:    #FEF2F2;
  --cor-destaque: #EA580C;  /* laranja: ofertas, selos */
  --cor-pix: #0F766E;       /* ícone do Pix (decorativo) */
  --cor-pix-suave: #CCFBF1;
  --cor-texto-claro: #FFFFFF; /* texto sobre fundo de mídia com overlay escuro */
  --cor-estrela: #F59E0B;   /* nota Google */

  /* ---- Cores oficiais das redes (botões com cores_da_marca) ---- */
  --marca-whatsapp: #25D366;
  --marca-whatsapp-texto: #052E16;
  --marca-instagram: #FF0069;
  --marca-instagram-texto: #FFFFFF;
  --marca-facebook: #0866FF;
  --marca-facebook-texto: #FFFFFF;

  /* Logo "G" oficial do Google (4 cores) */
  --google-azul: #4285F4;
  --google-verde: #34A853;
  --google-amarelo: #FBBC05;
  --google-vermelho: #EA4335;

  /* ---- Tipografia ---- */
  --fonte-titulo: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-corpo: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --texto-xs: 10px;    /* rótulos em caixa-alta (ex.: NOTA GOOGLE) */
  --texto-sm: 11px;    /* legendas, apoio */
  --texto-base: 13px;  /* corpo, botões secundários */
  --texto-md: 14px;    /* títulos de card */
  --texto-lg: 16px;    /* botão principal */
  --texto-xl: 22px;    /* nome do negócio */
  --texto-nota: 30px;  /* nota Google */
  --texto-nome-grande: 44px; /* nome do negócio no cabeçalho (estilo "nome") */

  --peso-normal: 400;
  --peso-medio: 600;
  --peso-forte: 700;

  /* ---- Espaçamento (escala dos wireframes) ---- */
  --esp-1: 4px;  --esp-2: 6px;  --esp-3: 8px;   --esp-4: 10px;
  --esp-5: 12px; --esp-6: 14px; --esp-7: 16px;  --esp-8: 20px;
  --esp-9: 28px; --esp-10: 36px; --esp-11: 56px;

  --esmaecer-altura: 20%;       /* quanto da base do cabeçalho com fundo some suavemente na página */
  --vidro-claro: rgba(255, 255, 255, 0.18);   /* botão translúcido sobre fundo escuro */
  --vidro-escuro: rgba(28, 25, 23, 0.08);     /* botão translúcido sobre fundo claro */
  --grade-gap: 14px;            /* espaço entre cartões das grades */
  --pagina-pad-x: 20px;
  --pagina-pad-topo: 36px;
  --pagina-pad-base: 56px;
  --bloco-gap: 36px;            /* espaço entre blocos */
  --largura-pagina: 480px;      /* [PROPOSTA] wireframe é 390px; em telas maiores centraliza */

  /* ---- Raios ---- */
  --raio-sm: 6px;   /* miniatura de item */
  --raio-md: 8px;   /* botões pequenos, campos */
  --raio-lg: 10px;  /* botões secundários, itens de catálogo */
  --raio-xl: 12px;  /* botão principal */
  --raio-2xl: 14px; /* cards */
  --raio-3xl: 16px; /* vídeo hero */
  --raio-total: 999px;

  /* ---- Sombras ---- */
  /* Os wireframes não usam sombra (cards só com borda). [PROPOSTA]: só para modal. */
  --sombra-modal: 0 10px 30px rgba(28, 25, 23, 0.18);

  /* ---- Interação [PROPOSTA] ---- */
  --alvo-toque-min: 44px;
  --foco-anel: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 35%, transparent);
  --transicao: 150ms ease;
}

/* Se o config não trouxer `cor_primaria_suave`, o template aplica esta derivação
   (via JS: root.style.setProperty) ou usa este fallback: */
:root {
  --cor-primaria-suave-auto: color-mix(in srgb, var(--cor-primaria) 14%, white);
}

/* ==========================================================================
   Padrões de componente (referência para os blocos da Fase 2)

   Botão primário  : padding 16px; raio-xl; fundo cor-primaria; texto cor-texto-botao;
                     --texto-lg / peso-medio; largura 100%.
   Botão secundário: padding 12px; raio-lg; borda 1px cor-borda; fundo transparente;
                     --texto-base. Variante "ação": borda e texto cor-primaria,
                     fundo cor-primaria-suave, padding 10px 14px, raio-md, --texto-sm.
   Card            : fundo cor-superficie; borda 1px cor-borda; raio-2xl;
                     padding 14-16px; gap interno 12px.
   Card escuro     : fundo cor-escura; raio-2xl; padding 16px 18px (nota Google).
   Ícone em quadro : 40x40, raio-lg, fundo cor-primaria-suave, traço cor-primaria.
   Mídia (vazia)   : fundo cor-superficie-2, raio-3xl.
   Título de seção : fonte-titulo, --texto-lg/peso-forte (15px nos wireframes).
   Campo           : borda 1px cor-borda; raio-md; padding 9px 10px; --texto-base.
   Estado de foco  : box-shadow var(--foco-anel) — wireframes não mostram foco.
   ========================================================================== */

/* Telas maiores: mais respiro no topo (variável, para o cabeçalho com fundo acompanhar) */
@media (min-width: 768px){
  :root{
    --pagina-pad-topo: var(--esp-11);
  }
}

/* ==========================================================================
   01 — BASE
   Reset, fonte local, página e cabeçalho. É também o CSS crítico: o build
   injeta 00-tokens + 01-base inline no <head> (acima da dobra).
   ========================================================================== */

@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--cor-fundo);
  color:var(--cor-texto);
  font-family:var(--fonte-corpo);
  font-size:var(--texto-base);
  line-height:1.45;
}

img,
video,
svg{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  color:inherit;
  cursor:pointer;
}

h1,
h2,
p{
  margin:0;
}

:focus-visible{
  outline:none;
  box-shadow:var(--foco-anel);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---- Página ---- */
.pagina{
  max-width:var(--largura-pagina);
  margin:0 auto;
  padding:var(--pagina-pad-topo) var(--pagina-pad-x) var(--pagina-pad-base);
  display:flex;
  flex-direction:column;
  gap:var(--bloco-gap);
}

/* Modo escuro: só o contêiner (coluna) tem cor; o fundo da tela segue neutro e os cards seguem claros */
.pagina--escura{
  background:var(--cor-container);
  min-height:100vh;
}

.pagina--escura > .cabecalho:not(.cabecalho--fundo) .cabecalho__nome,
.pagina--escura > .cabecalho:not(.cabecalho--fundo) .cabecalho__sub,
.pagina--escura > .bloco:not(.card) > .titulo-secao{
  color:var(--cor-texto-claro);
}

/* ---- Cabeçalho do negócio ---- */
.cabecalho{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--esp-3);
  text-align:center;
}

.cabecalho__logo{
  width:88px;
  height:88px;
  border-radius:var(--raio-total);
  object-fit:cover;
  background:var(--cor-superficie);
}

.cabecalho__inicial{
  width:88px;
  height:88px;
  border-radius:var(--raio-total);
  background:var(--cor-primaria-suave);
  color:var(--cor-primaria);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--fonte-titulo);
  font-size:var(--texto-nota);
  font-weight:var(--peso-forte);
}

.cabecalho__nome{
  font-family:var(--fonte-titulo);
  font-size:var(--texto-xl);
  font-weight:var(--peso-forte);
  line-height:1.2;
}

.cabecalho__sub{
  font-size:var(--texto-base);
  color:var(--cor-texto-2);
}

/* ---- Cabeçalho com imagem/vídeo de fundo + overlay ----
   A mídia é 4:3 (1080×810) e cobre a área toda (object-fit:cover);
   --fundo-foco escolhe qual parte fica visível, --overlay-cor vem do tema. */
.cabecalho--fundo{
  position:relative;
  isolation:isolate;
  justify-content:center;
  aspect-ratio:4 / 3;
  margin:calc(-1 * var(--pagina-pad-topo)) calc(-1 * var(--pagina-pad-x)) 0;
  padding:var(--pagina-pad-topo) var(--pagina-pad-x);
  overflow:hidden;
  border-radius:0 0 var(--raio-3xl) var(--raio-3xl);
}

.cabecalho__fundo{
  position:absolute;
  inset:0;
  z-index:-1;
}

.cabecalho__midia{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--fundo-foco, 50% 50%);
}

.cabecalho__overlay{
  position:absolute;
  inset:0;
  background:var(--overlay-cor);
}

.cabecalho--texto-claro{
  color:var(--cor-texto-claro);
}

.cabecalho--texto-claro .cabecalho__sub{
  color:var(--cor-texto-claro);
}

.cabecalho--texto-escuro .cabecalho__sub{
  color:var(--cor-texto);
}

.cabecalho--fundo .cabecalho__logo,
.cabecalho--fundo .cabecalho__inicial{
  border:3px solid var(--cor-superficie);
}

/* Base da mídia some suavemente na página (sem corte seco). Só a mídia e o overlay
   esmaecem; logo, nome e botões continuam inteiros. */
.cabecalho--esmaecer{
  border-radius:0;
}

.cabecalho--esmaecer .cabecalho__fundo{
  -webkit-mask-image:linear-gradient(to bottom, var(--cor-texto) calc(100% - var(--esmaecer-altura)), transparent);
  mask-image:linear-gradient(to bottom, var(--cor-texto) calc(100% - var(--esmaecer-altura)), transparent);
}

/* Estilo "nome": o nome do negócio no lugar do logo, em fonte grande */
.cabecalho--nome .cabecalho__nome{
  font-size:var(--texto-nome-grande);
  line-height:1.05;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

/* Botão de compartilhar (todo cabeçalho; a agência pode desligar por cliente) */
.cabecalho__compartilhar{
  position:absolute;
  top:var(--esp-7);
  left:0;
  z-index:1;
  width:var(--alvo-toque-min);
  height:var(--alvo-toque-min);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:var(--raio-total);
  background:var(--vidro-escuro);
  color:var(--cor-texto);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.cabecalho--fundo .cabecalho__compartilhar{
  left:var(--pagina-pad-x);
}

.pagina--escura .cabecalho__compartilhar,
.cabecalho--texto-claro .cabecalho__compartilhar{
  background:var(--vidro-claro);
  color:var(--cor-texto-claro);
}

.cabecalho__compartilhar:hover{
  filter:brightness(0.9);
}

/* Aviso rápido ("Link copiado!") */
.aviso{
  position:fixed;
  left:50%;
  bottom:var(--esp-9);
  z-index:20;
  padding:var(--esp-4) var(--esp-7);
  border-radius:var(--raio-total);
  background:var(--cor-escura);
  color:var(--cor-texto-claro);
  font-size:var(--texto-base);
  transform:translateX(-50%);
}

/* ==========================================================================
   02 — BLOCOS
   Um bloco por seção. Mobile first: a base é sempre a versão empilhada;
   qualquer layout de várias colunas fica dentro de @media (min-width).
   ========================================================================== */

.bloco[hidden]{
  display:none;
}

/* ---- Componentes compartilhados ---- */
.card{
  width:100%;
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-2xl);
  padding:var(--esp-6) var(--esp-7);
}

.card__linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--esp-5);
}

.card__titulo{
  font-size:var(--texto-md);
  font-weight:var(--peso-medio);
}

.card__apoio{
  margin-top:2px;
  font-size:var(--texto-sm);
  color:var(--cor-texto-2);
  overflow-wrap:anywhere;
}

.btn-primario{
  width:100%;
  min-height:var(--alvo-toque-min);
  padding:var(--esp-7);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:var(--raio-xl);
  background:var(--cor-primaria);
  color:var(--cor-texto-botao);
  font-size:var(--texto-lg);
  font-weight:var(--peso-medio);
  text-align:center;
  transition:filter var(--transicao);
}

.btn-primario:hover{
  filter:brightness(0.94);
}

.btn-secundario{
  min-height:var(--alvo-toque-min);
  padding:var(--esp-5);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--esp-3);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-lg);
  background:var(--cor-superficie);
  font-size:var(--texto-base);
  text-align:center;
}

/* Botões com as cores oficiais das redes */
.btn-marca{
  border-color:transparent;
  font-weight:var(--peso-medio);
}

.btn-marca--whatsapp{
  background:var(--marca-whatsapp);
  color:var(--marca-whatsapp-texto);
}

.btn-marca--instagram{
  background:var(--marca-instagram);
  color:var(--marca-instagram-texto);
}

.btn-marca--facebook{
  background:var(--marca-facebook);
  color:var(--marca-facebook-texto);
}

.btn-marca:hover{
  filter:brightness(0.94);
}

.btn-acao{
  min-height:var(--alvo-toque-min);
  padding:var(--esp-4) var(--esp-6);
  flex-shrink:0;
  border:1px solid var(--cor-primaria);
  border-radius:var(--raio-md);
  background:var(--cor-primaria-suave);
  color:var(--cor-primaria);
  font-size:var(--texto-sm);
  font-weight:var(--peso-medio);
}

.icone{
  width:18px;
  height:18px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Logos oficiais das marcas: preenchidos, sem contorno */
.icone--marca{
  fill:currentColor;
  stroke:none;
}

.titulo-secao{
  margin-bottom:var(--esp-4);
  font-family:var(--fonte-titulo);
  font-size:15px;
  font-weight:var(--peso-forte);
}

/* ---- nota_google ---- */
.nota{
  border:none;
  background:var(--cor-escura);
  border-radius:var(--raio-2xl);
  padding:var(--esp-7) 18px;
  min-height:74px;
}

.nota__rotulo{
  font-size:var(--texto-xs);
  font-weight:var(--peso-forte);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cor-texto-2);
}

.nota__qtd{
  margin-top:var(--esp-1);
  font-size:var(--texto-base);
  color:var(--cor-texto-sobre-escura);
}

.nota__valor{
  display:flex;
  align-items:center;
  gap:var(--esp-1);
  font-family:var(--fonte-titulo);
  font-size:var(--texto-nota);
  font-weight:var(--peso-forte);
  color:var(--cor-estrela);
}

.nota__valor svg{
  width:18px;
  height:18px;
  fill:var(--cor-estrela);
}

/* ---- hero_video ---- */
.hero{
  position:relative;
  width:100%;
  aspect-ratio:7 / 4;
  overflow:hidden;
  border-radius:var(--raio-3xl);
  background:var(--cor-superficie-2);
}

.hero__midia{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__tocar{
  position:absolute;
  inset:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
}

.hero__tocar svg{
  width:48px;
  height:48px;
  padding:var(--esp-5);
  border-radius:var(--raio-total);
  background:rgba(28, 25, 23, 0.55);
  fill:#FFFFFF;
}

.hero--tocando .hero__tocar{
  opacity:0;
}

/* ---- botoes ----
   Também intrínseco (auto-fit + minmax): 2 lado a lado em 390px, como no wireframe. */
.botoes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--esp-5);
}

/* ---- contador_agendamentos ---- */
.contador{
  display:flex;
  align-items:center;
  gap:var(--esp-5);
}

.contador__icone{
  width:40px;
  height:40px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--raio-lg);
  background:var(--cor-primaria-suave);
  stroke:var(--cor-primaria);
}

.contador__icone svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:inherit;
  stroke-width:2;
}

.contador strong{
  color:var(--cor-primaria);
  font-weight:var(--peso-forte);
}

/* ---- video_card ---- */
.video-card{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--esp-5);
  text-align:left;
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-2xl);
  background:var(--cor-superficie);
  padding:var(--esp-7);
}

.video-card__capa{
  position:relative;
  width:56px;
  height:56px;
  flex-shrink:0;
  overflow:hidden;
  border-radius:var(--raio-lg);
  background:var(--cor-borda);
}

.video-card__capa img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.video-card__capa svg{
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  fill:var(--cor-texto-2);
}

.video-dialogo{
  width:min(92vw, 420px);
  padding:0;
  border:none;
  border-radius:var(--raio-2xl);
  background:var(--cor-escura);
  box-shadow:var(--sombra-modal);
}

.video-dialogo::backdrop{
  background:rgba(28, 25, 23, 0.7);
}

.video-dialogo video{
  width:100%;
  max-height:80vh;
}

.video-dialogo__fechar{
  position:absolute;
  top:var(--esp-3);
  right:var(--esp-3);
  width:var(--alvo-toque-min);
  height:var(--alvo-toque-min);
  border:none;
  border-radius:var(--raio-total);
  background:rgba(28, 25, 23, 0.6);
  color:#FFFFFF;
  font-size:var(--texto-lg);
}

/* ---- catalogo ----
   Exceção consciente à regra "1fr na base": auto-fill + minmax é intrínseco
   (não é um número fixo de colunas), então empilha sozinho em tela estreita. */
.catalogo__grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:var(--grade-gap);
}

.catalogo__todos{
  margin-top:var(--grade-gap);
}

/* Cartões de grade: imagem de ponta a ponta (sem moldura branca), cantos de cima
   arredondados pelo próprio cartão; o texto e o botão ficam com margem lateral. */
.catalogo__item{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0 0 var(--esp-5);
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-2xl);
}

a.catalogo__item{
  color:inherit;
}

.catalogo__item img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  margin-bottom:var(--esp-4);
}

.catalogo__item > :not(img){
  margin-left:var(--esp-5);
  margin-right:var(--esp-5);
}

.catalogo__nome{
  margin-bottom:var(--esp-3);
  font-size:var(--texto-base);
  font-weight:var(--peso-medio);
}

.catalogo__preco{
  font-size:var(--texto-sm);
  color:var(--cor-texto-2);
}

/* Botão visual dentro de cartões clicáveis (o cartão inteiro é o link) */
.btn-cta{
  min-height:32px;
  margin-top:auto;
  padding:var(--esp-2) var(--esp-3);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--raio-md);
  background:var(--cor-primaria);
  color:var(--cor-texto-botao);
  font-size:var(--texto-sm);
  font-weight:var(--peso-medio);
  text-align:center;
}


.catalogo__preco{
  margin-bottom:var(--esp-3);
}

/* ---- atualizacoes_google (postagens do Google Meu Negócio, 3 colunas) ----
   Mesma exceção consciente do catálogo, mas com auto-fit: no desktop sobra espaço para uma 4ª coluna vazia; o auto-fit a recolhe e as 3 postagens ocupam a linha toda. */
.postagens__grade{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:var(--esp-5);
}

.postagem{
  display:flex;
  flex-direction:column;
  gap:var(--esp-2);
  overflow:hidden;
  padding:0 0 var(--esp-3);
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-2xl);
  color:inherit;
}

.postagem img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.postagem > :not(img){
  margin-left:var(--esp-3);
  margin-right:var(--esp-3);
}

.postagem__texto{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  font-size:var(--texto-sm);
  line-height:1.35;
}

.postagem__data{
  font-size:var(--texto-xs);
  color:var(--cor-texto-3);
}

.postagem .btn-cta{
  margin-top:auto;
}

/* ---- oferta ---- */
.oferta{
  border:2px solid var(--cor-destaque);
  display:flex;
  flex-direction:column;
  gap:var(--esp-5);
}

.oferta__selo{
  align-self:flex-start;
  padding:var(--esp-1) var(--esp-4);
  border-radius:var(--raio-total);
  background:var(--cor-destaque);
  color:#FFFFFF;
  font-size:var(--texto-xs);
  font-weight:var(--peso-forte);
  letter-spacing:1px;
  text-transform:uppercase;
}

.oferta__foto{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:var(--raio-lg);
}

.oferta__nome{
  font-family:var(--fonte-titulo);
  font-size:var(--texto-lg);
  font-weight:var(--peso-forte);
}

.oferta__precos{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--esp-3);
}

.oferta__de{
  font-size:var(--texto-base);
  color:var(--cor-texto-2);
  text-decoration:line-through;
}

.oferta__por{
  font-family:var(--fonte-titulo);
  font-size:var(--texto-xl);
  font-weight:var(--peso-forte);
  color:var(--cor-destaque);
}

.oferta__desconto{
  font-size:var(--texto-base);
  font-weight:var(--peso-forte);
  color:var(--cor-sucesso);
}

.oferta__validade{
  font-size:var(--texto-sm);
  color:var(--cor-texto-2);
}

/* ---- cards com ícone (pix, wifi) ---- */
.card__icone{
  width:40px;
  height:40px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--raio-lg);
}

.card__icone--pix{
  background:var(--cor-pix-suave);
  color:var(--cor-pix);
}

.card__icone--google{
  background:transparent;
}

.card__icone--google .icone{
  width:34px;
  height:34px;
  stroke:none;
}

.google-g__azul{
  fill:var(--google-azul);
}

.google-g__verde{
  fill:var(--google-verde);
}

.google-g__amarelo{
  fill:var(--google-amarelo);
}

.google-g__vermelho{
  fill:var(--google-vermelho);
}

.card__icone--wifi{
  background:var(--cor-primaria-suave);
  color:var(--cor-primaria);
}

.icone--grande{
  width:22px;
  height:22px;
}

.card__texto{
  flex:1;
  min-width:0;
}

/* ---- QR Code recolhido (pix, wifi) ---- */
.qr{
  margin-top:var(--esp-5);
  border-top:1px solid var(--cor-borda-suave);
  padding-top:var(--esp-4);
}

.qr summary{
  min-height:var(--alvo-toque-min);
  display:flex;
  align-items:center;
  font-size:var(--texto-sm);
  font-weight:var(--peso-medio);
  color:var(--cor-primaria);
  cursor:pointer;
}

.qr__img{
  width:180px;
  max-width:100%;
  margin:var(--esp-3) auto 0;
  padding:var(--esp-3);
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda-suave);
  border-radius:var(--raio-lg);
}

.qr__img svg{
  display:block;
  width:100%;
  height:auto;
}

/* ---- wifi: senha escondida por padrão ---- */
.wifi__senha{
  margin-top:var(--esp-5);
  display:flex;
  flex-direction:column;
  gap:var(--esp-3);
}

.wifi__linha{
  display:flex;
  align-items:baseline;
  gap:var(--esp-5);
}

.wifi__acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--esp-3) var(--esp-5);
}

.wifi__rotulo{
  font-size:var(--texto-sm);
  color:var(--cor-texto-2);
}

.wifi__valor{
  min-width:0;
  font-size:var(--texto-md);
  font-weight:var(--peso-medio);
  overflow-wrap:anywhere;
}

.btn-texto{
  min-height:var(--alvo-toque-min);
  padding:0 var(--esp-3);
  border:none;
  background:none;
  font-size:var(--texto-sm);
  font-weight:var(--peso-medio);
  color:var(--cor-primaria);
}

/* ---- endereco ---- */
.endereco{
  display:flex;
  flex-direction:column;
  gap:var(--esp-3);
}

.endereco__mapa{
  position:relative;
  border-radius:var(--raio-lg);
  overflow:hidden;
  background:var(--cor-superficie-2);
}

.endereco__mapa img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2 / 1;
  object-fit:cover;
}

.endereco__credito{
  position:absolute;
  right:0;
  bottom:0;
  padding:2px var(--esp-2);
  background:rgba(255,255,255,0.8);
  font-size:9px;
  color:var(--cor-texto-2);
}

.endereco__texto{
  font-style:normal;
  font-size:var(--texto-base);
  font-weight:var(--peso-medio);
}

.endereco__botoes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--esp-3);
}

/* ---- Skeleton dos blocos de dados vivos (enquanto a API responde) ---- */
.bloco[data-estado="carregando"]{
  opacity:0.55;
}

@media (prefers-reduced-motion: no-preference){
  .bloco{
    transition:opacity var(--transicao);
  }
}

/* ---- horarios ---- */
.horarios{
  display:flex;
  flex-direction:column;
  gap:var(--esp-4);
}

.horarios__status{
  font-size:var(--texto-base);
  font-weight:var(--peso-medio);
}

.horarios__status[data-aberto="sim"]{
  color:var(--cor-sucesso);
}

.horarios__status[data-aberto="nao"]{
  color:var(--cor-erro);
}

.horarios__lista{
  display:flex;
  flex-direction:column;
  gap:var(--esp-3);
}

.horarios__linha{
  display:flex;
  justify-content:space-between;
  gap:var(--esp-5);
  font-size:var(--texto-base);
}

.horarios__linha dt{
  flex-shrink:0;
  color:var(--cor-texto-2);
  white-space:nowrap;
}

.horarios__linha dd{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-weight:var(--peso-medio);
}

.horarios__faixa{
  white-space:nowrap;
}

/* ---- avaliar_google ---- */
.avaliar{
  display:flex;
  flex-direction:column;
  gap:var(--esp-5);
}

.avaliar__estrelas{
  display:flex;
  gap:var(--esp-2);
}

.avaliar__estrelas svg{
  width:22px;
  height:22px;
  fill:var(--cor-estrela);
  stroke:none;
}

/* ---- blog_posts (2 postagens, 2 colunas) ---- */
.blog__grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:var(--grade-gap);
}

.blog__item{
  display:flex;
  flex-direction:column;
  gap:var(--esp-3);
  overflow:hidden;
  padding:0 0 var(--esp-5);
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-2xl);
  color:inherit;
}

.blog__item img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.blog__item > :not(img){
  margin-left:var(--esp-5);
  margin-right:var(--esp-5);
}

.blog__titulo{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  font-size:var(--texto-base);
  font-weight:var(--peso-medio);
  line-height:1.3;
}

.blog__data{
  font-size:var(--texto-xs);
  color:var(--cor-texto-3);
}