/* =========== ô n d e e  ·  ôn.de =========== */

:root{
  --branco:#FFFBF3;
  --tinta:#2A2622;
  --tinta-fraca:#7A716A;

  --rosa:#F48591;
  --coral:#FA8D85;
  --pessego:#FEA283;
  --mel:#FFB872;
  --sabia:#8DA599;
  --lilas:#8D96C1;
  --uva:#C18EA9;

  --barra-altura:76px;
  --respiro:26px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* o atributo hidden precisa vencer o display das classes */
[hidden]{ display:none !important; }

html,body{
  min-height:100dvh;
  background:var(--branco);
  overflow-x:hidden;
}

body{
  font-family:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* nunca negrito, em lugar nenhum */
b,strong,h1,h2,h3,h4,h5,h6{ font-weight:400; }

button,input,select{
  font-family:inherit;
  font-weight:400;
  color:inherit;
  border:none;
  background:none;
  font-size:inherit;
}
button{ cursor:pointer; }

/* ================= esqueleto ================= */

.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top);
}

.topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px var(--respiro) 10px;
  flex:0 0 auto;
}

.marca .o{
  font-weight:400;
  font-size:19px;
  color:var(--coral);
  letter-spacing:0;
}

.marca{
  font-size:15px;
  letter-spacing:.30em;
  text-transform:lowercase;
  color:var(--tinta-fraca);
}

.som{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-fraca);
  padding:9px 15px;
  border-radius:999px;
  background:#F3EDE2;
  transition:background .3s ease,color .3s ease;
}
.som[data-mudo="1"]{ background:#EBE4D8; color:#A79C92; }

.miolo{
  flex:1 1 auto;
  padding:0 var(--respiro);
  /* a barra de baixo nunca tampa o conteudo */
  padding-bottom:calc(var(--barra-altura) + env(safe-area-inset-bottom) + 34px);
}

.vista{ display:none; }
.vista.ativa{ display:block; animation:sobe .55s cubic-bezier(.2,.7,.3,1) both; }

/* ================= barra de baixo ================= */

.barra{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  background:rgba(255,251,243,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid #EFE7DA;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:40;
}

.aba{
  flex:1;
  height:var(--barra-altura);
  font-size:11px;
  letter-spacing:.20em;
  color:#B4A99E;
  transition:color .3s ease,transform .3s ease;
  position:relative;
}
.aba:active{ transform:scale(.94); }
.aba.ativa{ color:var(--tinta); }
.aba.ativa::after{
  content:'';
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:20px;
  width:20px; height:2px;
  background:var(--coral);
  border-radius:2px;
  animation:cresce .4s ease both;
}

/* ================= tela inicial ================= */

.bloco-inicio{
  padding-top:8vh;
  text-align:center;
}

.chamada{
  font-size:19px;
  line-height:1.65;
  color:var(--tinta-fraca);
  letter-spacing:.02em;
}

.chamada-peq{
  font-size:14.5px;
  line-height:1.75;
  color:var(--tinta-fraca);
  margin:16px 0 30px;
}

/* ---- a pergunta que da nome ao app ---- */

.pergunta{
  font-size:clamp(40px,13vw,62px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--tinta);
  animation:sobe .7s cubic-bezier(.2,.7,.3,1) both;
}
.pergunta .e{ color:var(--coral); }

/* ---- o botao E a logo: o chapeu cai em cima da bolinha ---- */

.botao-gigante{
  position:relative;
  width:min(58vw,214px);
  aspect-ratio:1;
  margin:104px auto 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 26px 50px -18px rgba(250,141,133,.8);
  transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s ease;
}
.botao-gigante:active{
  transform:scale(.92);
  box-shadow:0 12px 26px -16px rgba(250,141,133,.85);
}
.botao-o{ display:none; }

/* o circunflexo, desenhado, caindo como alfinete no mapa */
.chapeu{
  position:absolute;
  top:-32%;
  left:50%;
  width:50%;
  height:19%;
  transform:translateX(-50%);
  background:var(--coral);
  clip-path:polygon(50% 0, 100% 82%, 100% 100%, 50% 26%, 0 100%, 0 82%);
  animation:cai 1.1s cubic-bezier(.2,1.5,.4,1) both;
  animation-delay:.35s;
}

.pulso{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--coral);
  animation:pulsa 3s ease-out infinite;
}
.pulso-2{ animation-delay:1.5s; }

.acao-dica{
  font-size:11px;
  letter-spacing:.30em;
  color:var(--coral);
  margin-bottom:26px;
  animation:sobe .7s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:.5s;
}

.rodape-chamada{
  font-size:13.5px;
  line-height:1.7;
  color:#B4A99E;
  letter-spacing:.03em;
}

/* ================= carregando ================= */

.bloco-carregando{ padding-top:16vh; text-align:center; }

.radar{
  width:120px; height:120px;
  margin:0 auto 38px;
  position:relative;
}
.radar i{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--pessego);
  animation:pulsa 2.1s ease-out infinite;
}
.radar i:nth-child(2){ animation-delay:.7s; }
.radar i:nth-child(3){ animation-delay:1.4s; }

/* ================= resultado ================= */

.bloco-resultado{ padding-top:16px; }

.etiqueta{
  font-size:11px;
  letter-spacing:.26em;
  color:#B4A99E;
  margin-bottom:22px;
}

.palavras{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:30px;
}

.palavra{
  font-size:clamp(34px,10.5vw,54px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--tinta);
  word-break:break-word;
  animation:sobe .6s cubic-bezier(.2,.7,.3,1) both;
}
.palavra[data-i="0"]{ animation-delay:.05s; }
.palavra[data-i="1"]{ animation-delay:.14s; }
.palavra[data-i="2"]{ animation-delay:.23s; }

.aviso-chave{
  font-size:13.5px;
  line-height:1.7;
  color:var(--tinta-fraca);
  background:#F6F0E4;
  border-radius:18px;
  padding:18px 20px;
  margin-bottom:28px;
}

.linha-dados{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:34px;
}

.dado{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:16px;
  border-bottom:1px solid #EFE7DA;
}
.dado:last-child{ border-bottom:none; }

.dado-rotulo{
  font-size:10.5px;
  letter-spacing:.20em;
  color:#B4A99E;
}
.dado-valor{
  font-size:18px;
  letter-spacing:.02em;
  color:var(--tinta);
  word-break:break-all;
}

/* ================= acoes ================= */

.acoes{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.acao{
  width:100%;
  padding:20px 22px;
  border-radius:999px;
  background:#F3EDE2;
  color:var(--tinta);
  font-size:13px;
  letter-spacing:.18em;
  transition:transform .24s cubic-bezier(.3,1.4,.5,1),background .3s ease;
}
.acao:active{ transform:scale(.965); }

.acao-forte{
  background:var(--sabia);
  color:var(--branco);
  box-shadow:0 14px 30px -16px rgba(141,165,153,.9);
}
.acao-leve{
  background:transparent;
  color:#B4A99E;
  border:1px solid #EFE7DA;
}

/* ================= casa / cartao ================= */

#vista-casa,#vista-ajustes{ padding-top:16px; }

.cartao{
  background:#FFFFFF;
  border:1px solid #EFE7DA;
  border-radius:26px;
  padding:30px 26px;
  margin-bottom:30px;
  box-shadow:0 20px 44px -30px rgba(42,38,34,.34);
}

.cartao-titulo{
  font-size:12px;
  letter-spacing:.20em;
  line-height:1.9;
  color:var(--tinta-fraca);
  margin-bottom:20px;
}

.cartao-palavras{
  font-size:clamp(25px,7.6vw,36px);
  line-height:1.28;
  color:var(--tinta);
  margin-bottom:12px;
  word-break:break-word;
}

.cartao-codigo{
  font-size:14px;
  letter-spacing:.05em;
  color:var(--tinta-fraca);
  margin-bottom:24px;
  min-height:1px;
}

.cartao-contato{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:20px;
  border-top:1px solid #F0E9DD;
}
.cartao-rotulo{
  font-size:10.5px;
  letter-spacing:.20em;
  color:#B4A99E;
}
.cartao-input{
  width:100%;
  padding:13px 0;
  font-size:17px;
  border-bottom:1px solid #F0E9DD;
  border-radius:0;
}
.cartao-input::placeholder{ color:#CDC3B8; }

.cartao-pe{
  margin-top:22px;
  font-size:11.5px;
  letter-spacing:.06em;
  line-height:1.7;
  color:#B4A99E;
}

/* ================= ajustes ================= */

.campo{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:8px;
}
.campo-rotulo{
  font-size:10.5px;
  letter-spacing:.20em;
  color:#B4A99E;
}
.campo-input{
  width:100%;
  padding:17px 20px;
  font-size:16px;
  background:#F3EDE2;
  border-radius:16px;
  letter-spacing:.02em;
}
.campo-input::placeholder{ color:#C3B8AC; }

.alternador{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid #EFE7DA;
  font-size:12px;
  letter-spacing:.10em;
  line-height:1.6;
  color:var(--tinta-fraca);
}
.alternador input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:46px; height:27px;
  border-radius:999px;
  background:#E5DCCE;
  position:relative;
  transition:background .3s ease;
}
.alternador input::after{
  content:'';
  position:absolute;
  top:3px; left:3px;
  width:21px; height:21px;
  border-radius:50%;
  background:var(--branco);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.alternador input:checked{ background:var(--sabia); }
.alternador input:checked::after{ transform:translateX(19px); }

.creditos{ margin-top:26px; color:#B4A99E; font-size:12.5px; }

/* ================= aviso flutuante ================= */

.aviso{
  position:fixed;
  left:50%;
  bottom:calc(var(--barra-altura) + env(safe-area-inset-bottom) + 20px);
  transform:translate(-50%,20px);
  background:var(--tinta);
  color:var(--branco);
  font-size:12.5px;
  letter-spacing:.10em;
  padding:14px 22px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  z-index:60;
  max-width:86vw;
  text-align:center;
}
.aviso.mostra{ opacity:1; transform:translate(-50%,0); }

/* ================= animacoes ================= */

@keyframes sobe{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pulsa{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.6); opacity:0; }
}
@keyframes cai{
  0%{ transform:translateX(-50%) translateY(-140px); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:translateX(-50%) translateY(0); opacity:1; }
}
@keyframes cresce{
  from{ width:0; opacity:0; }
  to{ width:20px; opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ================= impressao do cartao ================= */

@media print{
  .topo,.barra,.acoes,.aviso,#vista-agora,#vista-ajustes{ display:none !important; }
  .miolo{ padding:0; }
  .chamada-peq,.etiqueta{ display:none; }
  body,html{ background:#FFFFFF; }
  .cartao{
    box-shadow:none;
    border:1px solid #999;
    width:85mm;
    margin:12mm auto;
    page-break-inside:avoid;
  }
  .cartao-input{ border-bottom:1px solid #CCC; }
}

/* ================= telas maiores ================= */

@media (min-width:720px){
  .miolo{ max-width:560px; margin:0 auto; width:100%; }
  .topo{ max-width:560px; margin:0 auto; width:100%; }
}