/* =====================================================================
   Tema claro da Casa da Guripa (azul e laranja da carta, letra Jost).
   Só altera o aspeto; a estrutura é a mesma da demo.
   ===================================================================== */
:root {
  --suave: rgba(0, 73, 128, .68);
  --linha: rgba(0, 73, 128, .16);
  --perigo: #d64545;
  --titulo: "Jost", system-ui, sans-serif;
  --corpo: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: #efe8df; }
#app { box-shadow: 0 0 60px rgba(0, 40, 80, .18); }

.btn-cheio, .btn-mini, .mais, .selo, .aviso-contem, .alerg.marcado,
.separadores button.ativo, .fichas button[aria-pressed="true"], .fichas button[aria-pressed="true"] small,
.grelha button[aria-pressed="true"], #barra .conta, #barra .conta.ok, .item .mini::after { color: #fff; }
.linguas button[aria-pressed="true"] { background: var(--texto); color: #fff; }

/* início */
#inicio.ativo { gap: 14px; }
#inicio .sub { color: var(--texto); letter-spacing: .18em; font-size: 12px; }
.btn { letter-spacing: .04em; }
.btn-linha { border-color: rgba(0, 73, 128, .35); }

/* vídeo: texto claro por cima da imagem */
#reel { --texto: #fff; --suave: rgba(255, 255, 255, .82); --linha: rgba(255, 255, 255, .28); --rosa: #fff; color: var(--texto); }
#reel .linguas button[aria-pressed="true"] { background: #fff; color: #004980; }
.topo strong { color: #fff; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; }
.info h2 { font-weight: 600; letter-spacing: .06em; font-size: 28px; }
.selo.verde { color: #06303a; }

/* lista */
.cabecalho strong { color: var(--texto); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 16px; }
.seccao h3[class] { color: var(--destaque); font-weight: 600; font-size: 19px; letter-spacing: .16em; }
.seccao h3::after {
  content: ""; display: block; width: 130px; height: 16px; margin-top: 4px;
  background: url("fotos/marca/wave.png") left center / contain no-repeat;
}
.itens { border: 1px solid var(--linha); box-shadow: 0 6px 18px rgba(0, 40, 80, .05); }
.item h4[class] { color: var(--texto); font-weight: 600; font-size: 15px; letter-spacing: .07em; }
.item .alerg { background: rgba(0, 73, 128, .07); }
.item .mini { background: rgba(0, 73, 128, .08); }
.faixa { color: #06303a; }

/* barra, folhas e avisos */
#barra { background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 20px rgba(0, 40, 80, .07); }
#fundo-folha { background: rgba(0, 30, 55, .45); }
#folha { box-shadow: 0 -12px 40px rgba(0, 40, 80, .18); }
#folha h3 { font-weight: 600; letter-spacing: .06em; }
#toast { background: var(--texto); color: #fff; }

/* seletor de língua (bandeiras): claro fora do vídeo, escuro por cima das imagens */
.band-atual { background: rgba(0, 73, 128, .08); border: 1px solid var(--linha); backdrop-filter: none; }
.band-lista { background: #fff; border: 1px solid var(--linha); box-shadow: 0 10px 28px rgba(0, 40, 80, .16); }
.band-lista button { color: var(--texto); }
.band-lista button:hover, .band-lista button:focus-visible { background: rgba(0, 73, 128, .07); }
#reel .band-atual { background: rgba(0, 0, 0, .35); border-color: transparent; backdrop-filter: blur(6px); }
#reel .band-lista { background: rgba(10, 30, 45, .94); border-color: rgba(255, 255, 255, .18); }
#reel .band-lista button:hover, #reel .band-lista button:focus-visible { background: rgba(255, 255, 255, .12); }