/* ============================================================
   Viva La Massa — cara (kit do núcleo, 00. Núcleo/site/COMO-USAR.md)
   30/09/2026 · a casa à noite: veludo azul petróleo, a luz das
   luminárias de ripas terracota, texto creme.
   1. fontes · 2. identidade da casa · 3. tokens base do núcleo
   4. topo (bambinela) e rodapé, iguais na home e nas páginas de
   moldura (cara/moldura.html).
   O terracota dos botões é um tom mais fundo que o #D35400 pra passar
   o contraste AA com texto creme (4,7:1).
   ============================================================ */

/* ---------------------------------------------------- 1. fontes */
@font-face {
  font-family: "Young Serif";
  src: url("/assets/fontes/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fontes/jost-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Italianno";
  src: url("/assets/fontes/italianno-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------- 2. identidade da casa */
  --veludo: #00303e;          /* azul petróleo do manual: a cor principal */
  --palco: #00222c;           /* o mesmo petróleo no escuro do palco */
  --lampada: #f0a060;         /* o âmbar das luminárias (6,4:1 sobre o veludo) */
  --terracota: #c04a00;       /* botões (creme sobre ele: 4,7:1) */
  --terracota-funda: #a33f00;
  --terracota-marca: #d35400; /* o do manual, só em detalhe sem texto */
  --creme: #fff8dc;
  --creme-suave: rgba(255, 248, 220, 0.8);
  --creme-linha: rgba(255, 248, 220, 0.2);
  --tinta: #00303e;           /* texto sobre creme */
  --tinta-suave: #35545c;     /* 7,7:1 sobre creme */

  /* ------------------------------ 3. tokens base do núcleo
     O conteúdo das páginas de moldura (reservar, minha reserva, políticas)
     e a gaveta de reserva ficam em creme, com texto petróleo: é o tema
     claro pra que os componentes do kit foram desenhados. Topo e rodapé
     são o veludo da casa (seção 4). */
  --cor-fundo: var(--creme);
  --cor-fundo-2: #f6ecc9;
  --cor-superficie: #fffdf4;
  --cor-texto: var(--tinta);
  --cor-texto-2: var(--tinta-suave);
  --cor-acao: var(--terracota);
  --cor-acao-forte: var(--terracota-funda);
  --cor-sobre-acao: var(--creme);
  --cor-destaque: var(--terracota-marca);
  --cor-destaque-texto: var(--terracota-funda);
  --cor-destaque-claro: var(--lampada);
  --cor-sobre-foto: var(--creme);
  --cor-linha: rgba(0, 48, 62, 0.14);
  --cor-linha-ui: #6f8a90;    /* borda de campo: 3,5:1 sobre o creme */
  --cor-escuro: var(--palco);
  --fonte-titulo: "Young Serif", Georgia, "Times New Roman", serif;
  --fonte-texto: "Jost", "Helvetica Neue", Arial, sans-serif;
  --fonte-script: "Italianno", "Snell Roundhand", cursive;
  --raio: 8px;
  --env: 72rem;
}

/* ------------------------------ 4. topo (bambinela) e rodapé */
.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  padding: 0.6rem 1rem; background: var(--creme); color: var(--tinta);
}
.pular:focus { top: 1rem; }

/* A bambinela: faixa de veludo com a borda recortada em festão e um
   cordão âmbar acompanhando cada gomo (as cortinas dos renders). */
.cortina {
  position: relative;
  z-index: 30;
  background: linear-gradient(#002a36, var(--veludo));
  color: var(--creme);
}
.cortina::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'%3E%3Cpath d='M0 0H44V1C44 10 34 18 22 18S0 10 0 1Z' fill='%2300303e'/%3E%3Cpath d='M1.5 2.5C2.5 10 11 15.5 22 15.5S41.5 10 42.5 2.5' fill='none' stroke='%23f0a060' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x 50% 0 / 44px 18px;
  pointer-events: none;
}
.cortina-i {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: min(100% - 2.5rem, var(--env));
  margin-inline: auto;
  padding-block: 0.9rem 0.6rem;
}
.cortina-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-family: var(--fonte-texto); font-size: 1rem; }
.cortina-nav a { color: var(--creme-suave); text-decoration: none; }
.cortina-nav a:hover { color: var(--creme); text-decoration: underline; text-underline-offset: 0.3em; }
.cortina-marca { display: block; }
/* o manual pede o logo com no mínimo 120 px de largura no digital */
.cortina-marca img { display: block; width: 150px; height: auto; }
.cortina .btn-topo { justify-self: end; }
/* o botão do topo igual ao da home nas páginas de moldura (o .btn do kit é em caixa alta) */
.cortina .btn {
  min-height: 3rem; padding: 0.7rem 1.5rem; border-radius: 4px;
  font: 600 1rem / 1.2 var(--fonte-texto); letter-spacing: normal; text-transform: none;
}

.casa-rodape {
  padding-block: 3.5rem 2rem;
  background: var(--palco);
  color: var(--creme-suave);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.6;
}
.casa-rodape p { margin: 0; }
.casa-rodape a { color: inherit; }
.casa-rodape-i {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
  width: min(100% - 2.5rem, var(--env));
  margin-inline: auto;
}
.casa-rodape-marca img { display: block; width: 124px; height: auto; }
.casa-rodape-marca p { margin-top: 1rem; }
.casa-rodape-links { display: grid; gap: 0.55rem; align-content: start; }
.casa-rodape-links a { text-decoration: none; }
.casa-rodape-links a:hover { color: var(--creme); text-decoration: underline; text-underline-offset: 0.3em; }
.casa-rodape-fim {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(100% - 2.5rem, var(--env));
  margin: 2.5rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid var(--creme-linha);
  font-size: 0.875rem;
}
.casa-rodape .assinatura-dm {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: rgba(255, 248, 220, 0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.casa-rodape .assinatura-dm img { width: 80px; height: auto; opacity: 0.7; transition: opacity 0.15s; }
.casa-rodape .assinatura-dm:hover, .casa-rodape .assinatura-dm:focus-visible { color: var(--creme); }
.casa-rodape .assinatura-dm:hover img, .casa-rodape .assinatura-dm:focus-visible img { opacity: 1; }
.cortina :focus-visible, .casa-rodape :focus-visible { outline: 3px solid var(--lampada); outline-offset: 3px; }

@media (max-width: 860px) {
  .casa-rodape-i { grid-template-columns: 1fr 1fr; }
  .casa-rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cortina-nav { display: none; }
  .cortina-i { grid-template-columns: auto 1fr; }
  .cortina-marca img { width: 124px; }
}