/* ============================================================
   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 */
  --ouro: #d9a441;            /* o ouro do cartaz "A Grande Viagem" (6,3:1 sobre o veludo) */
  --ouro-claro: #f3d98c;      /* o brilho do metal: só em gradiente e borda */
  --ouro-fundo: #8a5e1c;      /* o único ouro que escreve sobre creme (5,3:1) */
  --ouro-metal: linear-gradient(160deg, #f3d98c 0%, #d9a441 38%, #b07d26 62%, #f0cf7e 100%);
  --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='%23d9a441' 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 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.5rem; border: 0; border-radius: 4px;
  background: var(--terracota); color: var(--creme); cursor: pointer; text-decoration: none;
  font: 600 1rem / 1.2 var(--fonte-texto); letter-spacing: normal; text-transform: none;
}
.cortina .btn:hover { background: var(--terracota-funda); }

.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; }
}

/* ------------------------------------------------ perguntas frequentes */
.faq-atalhos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; }
.faq a { text-underline-offset: 0.2em; }
.faq a:hover { color: var(--terracota-funda); }
.faq-bloco { scroll-margin-top: 1.25rem; }
.faq details { border-bottom: 1px dotted var(--tinta-suave); }
.faq-bloco h2 + details, .faq-bloco > p + details { margin-top: 0.4rem; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 2.75rem; padding: 0.8rem 0;
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  font-family: var(--fonte-texto); font-size: 1.125rem; font-weight: 500;
  line-height: 1.35; letter-spacing: 0;
}
.faq summary:hover h3 { color: var(--terracota-funda); }
.faq summary::after {
  content: ""; flex: none; width: 0.875rem; height: 0.875rem; color: var(--ouro-fundo);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq details[open] > summary::after { background-size: 100% 2px, 2px 0; }
.faq :focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }
.faq-resposta { padding-bottom: 1rem; }
.faq-resposta > :first-child { margin-top: 0; }
.faq-resposta > :last-child { margin-bottom: 0; }
.faq-resposta p + p { margin-top: 0.7rem; }
.faq-fim { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ------------------------------ checkout: campos seguros do Mercado Pago
   Número, validade e CVV são iframes do Mercado Pago. O contêiner tem a altura,
   a borda, o raio e o foco dos `input` do checkout (motor.css: padding .8rem .9rem,
   borda 1px --cor-linha-ui, raio 3px) para a tela ficar igual. */
.mp-campo {
  box-sizing: border-box;
  width: 100%;
  height: 3.162rem;            /* = a altura de um input do checkout (50,6 px) */
  padding: 0 0.9rem;
  border: 1px solid var(--cor-linha-ui);
  border-radius: 3px;
  background: var(--cor-superficie);
  font-size: var(--t-corpo);
  display: flex;
  align-items: center;
}
.mp-campo > iframe { display: block; width: 100%; height: 100% !important; }
.mp-campo:focus-within { outline: none; border-color: var(--cor-acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-acao) 16%, transparent); }
.campo.erro .mp-campo { border-color: var(--cor-erro); }