/* ============================================================
   RECREIO BAR — base compartilhada pelas três páginas
   Fontes, paleta, faixas de cor, tipografia, wordmark, botões,
   formulários e rodapé. O que é específico de uma página fica
   embutido nela.
   ============================================================ */

/* Fontes auto-hospedadas: nenhuma chamada a terceiros no carregamento. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/archivo-9baef6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fontes/archivo-b8d3d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Chango';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/chango-c21351.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chango';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/chango-0d0aa5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --areia:#EDE8E0;
  --areia2:#DCD3C6;
  --henna:#7F3A30;
  --tinta:#2B2B2A;
  --madrugada:#171514;
  --salvia:#899F85;
  --creme:#E6E1D8;

  --display:"Chango","Lilita One",Georgia,serif;
  --texto:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
  --bloco:clamp(72px,11vw,150px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--salvia);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- faixas ---------- */
.faixa{background:var(--bg);color:var(--fg);padding-block:var(--bloco);position:relative}
.f-tarde   {--bg:var(--areia);    --fg:var(--tinta);  --sub:#5C564E; --rule:#2B2B2A26; --marca:var(--henna)}
.f-entardecer{--bg:var(--areia2); --fg:var(--tinta);  --sub:#57514A; --rule:#2B2B2A26; --marca:var(--henna)}
/* Sobre a henna a sálvia cai para 2,9:1. Usa-se uma sálvia clara (4,6:1). */
.f-henna   {--bg:var(--henna);    --fg:var(--creme);  --sub:#E6E1D8D6;--rule:#E6E1D833; --marca:#B4C7AF}
.f-noite   {--bg:var(--tinta);    --fg:var(--creme);  --sub:#E6E1D8AB;--rule:#E6E1D826; --marca:var(--salvia)}
.f-madrugada{--bg:var(--madrugada);--fg:var(--creme); --sub:#E6E1D8A3;--rule:#E6E1D81F; --marca:var(--salvia)}


/* ---------- tipografia ---------- */
.capitulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,1.16rem + 1.4vw,2.35rem);
  line-height:1;
  color:var(--marca);
  margin:0 0 .62em;
  letter-spacing:-.005em;
  text-wrap:nowrap;
}
.manifesto{
  font-weight:300;
  font-size:clamp(1.5rem,1.05rem + 2.1vw,2.75rem);
  line-height:1.24;
  letter-spacing:-.018em;
  margin:0 0 .85em;
  max-width:19ch;
}
.corpo{max-width:52ch;color:var(--sub);margin:0 0 1.1em}
.corpo:last-child{margin-bottom:0}

/* ---------- barra fixa ---------- */
.barra{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);
  background:transparent;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
}
.barra.pousada{background:#171514F2;backdrop-filter:blur(9px);box-shadow:0 1px 0 #E6E1D81F;padding-block:10px}

/* Wordmark: o PNG do cliente vira máscara, pintada na cor da faixa */
.marca{
  display:block;background-color:currentColor;
  aspect-ratio:1200/345;
  -webkit-mask:url(logo.png) center/contain no-repeat;
  mask:url(logo.png) center/contain no-repeat;
}
.barra .marca{height:26px;color:var(--creme);transition:height .35s ease}
.barra.pousada .marca{height:22px}

.pilula{
  font-family:var(--display);font-size:.94rem;letter-spacing:.01em;
  background:var(--henna);color:var(--creme);
  text-decoration:none;border-radius:999px;
  padding:.62em 1.35em;white-space:nowrap;
  border:1px solid #00000014;
  transition:background .2s ease,transform .2s ease;
}
.pilula:hover{background:#94443A}
.pilula:active{transform:translateY(1px)}


/* ---------- formulários ---------- */
.form{display:grid;gap:14px;margin-top:clamp(28px,4vw,44px);max-width:640px}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .largo{grid-column:1/-1}}
.campo{display:grid;gap:6px}
.campo label{font-size:.8rem;letter-spacing:.06em;color:var(--sub)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:1rem;color:var(--creme);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.6em 0;border-radius:0;
}
.campo input::placeholder,.campo textarea::placeholder{color:#E6E1D855}
.campo textarea{resize:vertical;min-height:3.4em;line-height:1.5}
.campo input[type=date]{color-scheme:dark}   /* ícone do calendário legível no escuro */
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--salvia)}
.campo select option{background:var(--madrugada);color:var(--creme)}
/* Seta própria: o select nativo traz um recuo interno que desalinha do input. */
.campo select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:1.8em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23E6E1D8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .15em center/12px 8px;
}
.enviar{
  font-family:var(--display);font-size:1rem;cursor:pointer;
  background:var(--salvia);color:var(--madrugada);border:0;border-radius:999px;
  padding:.8em 1.8em;justify-self:start;margin-top:6px;
  transition:background .2s ease,transform .2s ease;
}
.enviar:hover{background:#9AB096}
.enviar:active{transform:translateY(1px)}
.recado{font-size:.82rem;color:var(--sub);margin:.2em 0 0;grid-column:1/-1;min-height:1.4em}
.recado[data-erro]{color:#E9A99C}


/* Caixa de autorização e aviso de modo de teste, usados em mais de uma página */
.consenti{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  margin-top:8px;grid-column:1/-1;
}
.consenti input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:2px 0 0;flex:none;
  border:1px solid #E6E1D866;border-radius:4px;background:transparent;cursor:pointer;
}
.consenti input:checked{background:var(--salvia);border-color:var(--salvia)}
.consenti input:checked::after{
  content:"";display:block;width:6px;height:11px;margin:2px auto 0;
  border:solid var(--madrugada);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.consenti label{font-size:.92rem;line-height:1.5;color:var(--sub);cursor:pointer}
.consenti a{color:var(--salvia)}
.consenti a[data-sem-destino]{color:var(--sub);text-decoration:line-through;cursor:not-allowed}

.teste{
  border:1px dashed #E9A99C80;color:#E9A99C;
  padding:14px 16px;margin-bottom:28px;font-size:.85rem;line-height:1.5;
}

/* Campo-isca: gente não vê nem preenche, robô preenche. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- rodapé ---------- */
.rodape{background:var(--madrugada);color:#E6E1D88C;padding:clamp(40px,6vw,64px) 0;font-size:.87rem}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.rodape .marca{height:30px;color:#E6E1D8CC}
.rodape a{color:#E6E1D8C7;text-decoration:none;border-bottom:1px solid #E6E1D840;padding-bottom:1px}
.rodape a:hover{color:var(--creme)}
.rodape nav{display:flex;gap:24px;flex-wrap:wrap}

.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--gutter);top:10px;z-index:100;background:var(--creme);color:var(--tinta);padding:10px 16px}