@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');


/* =====================================================
   ESTRELA GUIA TAROT — STYLE.CSS
===================================================== */


/* =====================================================
   VARIÁVEIS
===================================================== */

:root {
  --marfim: #f7f1e7;
  --marfim-2: #efe4d2;
  --cafe: #4b2b18;
  --cafe-2: #2c170d;
  --dourado: #b9842f;
  --dourado-claro: #e1bd76;
  --texto: #35271f;
  --branco: #fffdf9;
  --borda: rgba(75, 43, 24, .18);
  --sombra: 0 22px 60px rgba(54, 31, 17, .14);
}


/* =====================================================
   RESET
===================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--texto);
  background: var(--marfim);
  line-height: 1.7;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select {
  font: inherit;
}


/* =====================================================
   TÍTULOS
===================================================== */

h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cafe);
  line-height: 1.08;
}

h1 {
  font-size: clamp(3.8rem, 9vw, 6.5rem);
}

h2 {
  font-size: clamp(2.8rem, 6vw, 4.3rem);
  margin: 8px 0 22px;
}

h3 {
  font-size: 1.8rem;
}

.selo,
.rotulo {
  display: block;
  width: 100%;
  margin-bottom: 10px;

  text-transform: uppercase;
  text-align: center;

  letter-spacing: .12em;
  line-height: 1.4;

  font-size: 1.25rem;
  font-weight: 800;

  color: var(--dourado);
}


/* =====================================================
   TOPO
===================================================== */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;

  min-height: 80px;
  padding: 10px 5%;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;

  background: rgba(247, 241, 231, .92);
  border-bottom: 1px solid var(--borda);

  backdrop-filter: blur(14px);
}

.marca {
  justify-self: start;
}

.marca img {
  width: 64px;
  height: 64px;
  object-fit: contain;

  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

.topo nav {
  display: flex;
  justify-content: center;
  gap: 24px;

  font-size: .9rem;
  font-weight: 600;
}

.topo nav a:hover {
  color: var(--dourado);
}


/* =====================================================
   CONTROLES DO TOPO
===================================================== */

.controles-topo {
  justify-self: end;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#botao-musica,
#botao-tema {
  width: 135px;
  min-width: 135px;
  height: 42px;

  margin: 0;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--dourado);
  border-radius: 10px;

  background: transparent;
  color: var(--cafe);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  transition: .3s;
}

#botao-musica:hover,
#botao-tema:hover {
  background: var(--dourado);
  color: var(--cafe-2);
}


/* =====================================================
   HERO
===================================================== */

.hero {
  min-height: 88vh;

  display: grid;
  place-items: center;

  padding: 90px 20px;

  text-align: center;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 215, 120, .30),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #fffdf8,
      #f8f1e5,
      #efe2ca
    );
}

.hero-conteudo {
  max-width: 850px;
}

.logo-principal {
  width: min(520px, 95vw);
  margin: 22px auto;

  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

.hero p {
  max-width: 700px;
  margin: 0 auto 30px;

  font-size: 1.08rem;
}

.acoes {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}


/* =====================================================
   BOTÕES
===================================================== */

.botao {
  min-height: 50px;
  padding: 13px 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid transparent;
  border-radius: 999px;

  font-weight: 700;

  cursor: pointer;
  transition: .3s;
}

.botao-dourado {
  background:
    linear-gradient(
      135deg,
      #caa24d,
      #f2d17a
    );

  color: #2c170d;

  box-shadow:
    0 18px 35px rgba(202, 162, 77, .35);
}

.botao-dourado:hover {
  transform: translateY(-3px);

  box-shadow:
    0 22px 45px rgba(202, 162, 77, .45);
}

.botao-claro {
  background: var(--branco);
  border-color: var(--borda);
  color: var(--cafe);
}


/* =====================================================
   SEÇÕES
===================================================== */

.secao {
  padding: 95px 20px;
}

.conteudo {
  width: min(1120px, 100%);
  margin: auto;
}

.secao .conteudo {
  text-align: center;
}

.estreito {
  max-width: 780px;
  text-align: center;
}

.estreito p {
  font-size: 1.05rem;
}

.secao .conteudo > .rotulo,
.secao .conteudo > h2 {
  text-align: center;
}

.secao-escura {
  background: var(--cafe-2);
  color: #f7ead8;
}

.secao-escura h2,
.secao-escura h3 {
  color: #fff5e8;
}

.claro {
  color: var(--dourado-claro);
}

.secao-clara {
  background: var(--branco);
}

.aviso {
  background:
    linear-gradient(
      135deg,
      #f2e3c8,
      #fffaf2
    );
}

.pagamentos {
  background: #efe3cf;
}


/* =====================================================
   BARALHO CIGANO
===================================================== */

.grade-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;

  text-align: center;
}

.grade-2 > div {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.grade-2 p {
  margin-bottom: 18px;
}


/* =====================================================
   CARDS
===================================================== */

.cards {
  margin-top: 42px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card {
  position: relative;

  padding: 35px;

  border: 1px solid var(--borda);
  border-radius: 30px;

  background: var(--branco);

  box-shadow: var(--sombra);
}

.card p {
  margin: 12px 0 22px;
}

.preco {
  display: block;

  margin-bottom: 10px;

  color: var(--dourado);

  font-weight: 800;
}

.modalidades {
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}


/* =====================================================
   SERVIÇOS
===================================================== */

.categoria-servico {
  margin-top: 55px;
  text-align: center;
}

.cabecalho-categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 30px;

  text-align: center;
}

.icone-categoria {
  width: 58px;
  height: 58px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto;

  border: 1px solid var(--dourado);
  border-radius: 50%;

  color: var(--dourado);

  font-size: 1.7rem;
}

.cabecalho-categoria > div {
  width: 100%;
  text-align: center;
}

.cabecalho-categoria h3 {
  margin-bottom: 8px;

  font-size: 2.4rem;
  text-align: center;
}

.cabecalho-categoria p {
  max-width: 700px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


/* =====================================================
   ESPAÇO DE CONVERSA
===================================================== */

.conversa {
  margin-top: 85px;
  padding-top: 55px;

  border-top: 1px solid var(--borda);
}

.frase-conversa {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-style: italic;

  color: var(--cafe);
}

.descricao-conversa {
  max-width: 780px;

  margin: 0 auto 30px;

  font-size: 1.05rem;
  text-align: center;
}

.cards-conversa {
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;

  grid-template-columns: repeat(2, 1fr);
}

.aviso-conversa {
  max-width: 760px;

  margin: 35px auto 0;

  padding: 24px 26px;

  border-left: 4px solid var(--dourado);
  border-radius: 0 18px 18px 0;

  background: var(--marfim-2);

  text-align: left;
}

.aviso-conversa strong {
  display: block;

  margin-bottom: 8px;

  color: var(--cafe);

  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.aviso-conversa p {
  margin-top: 8px;

  font-size: .94rem;
}


/* =====================================================
   AGENDAMENTO
===================================================== */

.agendamento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 55px;

  text-align: center;
}

.agendamento > div:first-child {
  max-width: 800px;

  margin-left: auto;
  margin-right: auto;
}


/* =====================================================
   FORMULÁRIO
===================================================== */

#formulario {
  width: min(700px, 100%);

  margin-left: auto;
  margin-right: auto;

  padding: 30px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  border-radius: 24px;

  background: #fffaf3;
  color: var(--texto);

  text-align: left;
}


/* TODOS OS LABELS PRINCIPAIS */

#formulario > label {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 8px;

  box-sizing: border-box;

  font-weight: 600;
}


/* INPUTS E SELECTS */

#formulario input,
#formulario select {
  display: block;

  width: 100%;
  min-width: 0;
  min-height: 48px;

  padding: 12px 14px;

  box-sizing: border-box;

  border: 1px solid var(--borda);
  border-radius: 12px;

  background: white;
  color: var(--texto);
}


/* =====================================================
   DATA + HORÁRIO
===================================================== */

#formulario .linha {
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;

  box-sizing: border-box;
}

#formulario .linha > label {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 8px;

  box-sizing: border-box;

  font-weight: 600;
}


/* =====================================================
   CAMPO DA DATA
===================================================== */

.campo-data {
  position: relative;

  width: 100%;
  min-width: 0;
}


/*
   A mensagem fica DENTRO da caixa da data.
*/

#mensagem-data {
  position: absolute;

  left: 14px;
  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

  max-width: calc(100% - 55px);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: #777;

  font-size: 14px;
  font-weight: 400;

  pointer-events: none;
}


/*
   O texto nativo da data começa transparente.
   O calendário continua funcionando normalmente.
*/

.campo-data input[type="date"] {
  position: relative;

  width: 100%;

  color: transparent;
}


/*
   Quando o campo recebe foco, mostra a data.
*/

.campo-data input[type="date"]:focus {
  color: var(--texto);
}


/*
   Quando existe uma data selecionada,
   o JavaScript pode esconder a mensagem.
*/

.campo-data.tem-data #mensagem-data {
  display: none;
}

.campo-data.tem-data input[type="date"] {
  color: var(--texto);
}


/* ÍCONE NATIVO DO CALENDÁRIO */

.campo-data input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;

  opacity: .75;
}


/* =====================================================
   BOTÃO DO FORMULÁRIO
===================================================== */

#formulario .enviar {
  width: 100%;
  max-width: none;

  display: block;

  box-sizing: border-box;

  border: none;
}


/* =====================================================
   INSTAGRAM
===================================================== */

.instagram {
  min-height: 420px;

  padding-top: 90px;
  padding-bottom: 90px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.instagram .conteudo {
  width: 100%;

  text-align: center;
}

.instagram h2 {
  margin: 14px auto 24px;
}

.instagram p {
  margin-bottom: 22px;
}


/* =====================================================
   BOTÃO FIXO
===================================================== */

.agendar-fixo {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 30;

  padding: 14px 20px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--dourado),
      var(--dourado-claro)
    );

  color: var(--cafe-2);

  font-weight: 800;

  box-shadow:
    0 12px 32px rgba(44, 23, 13, .25);
}


/* =====================================================
   RODAPÉ
===================================================== */

footer {
  min-height: 200px;

  padding: 55px 20px;

  text-align: center;

  background: #efe4d2;
  color: var(--cafe);
}

footer small {
  display: block;

  max-width: 760px;

  margin: 14px auto 0;

  opacity: .72;
}


/* =====================================================
   MODO NOTURNO
===================================================== */

body.modo-noturno {
  --marfim: #17100c;
  --marfim-2: #251810;
  --cafe: #f1d7a4;
  --cafe-2: #100a07;
  --texto: #f2e7d7;
  --branco: #21150f;
  --borda: rgba(225, 189, 118, .22);
  --sombra: 0 22px 60px rgba(0, 0, 0, .35);

  background: #17100c;
  color: #f2e7d7;
}

body.modo-noturno .topo {
  background: rgba(23, 16, 12, .94);

  border-bottom-color:
    rgba(225, 189, 118, .18);
}

body.modo-noturno .topo nav a {
  color: #f2e7d7;
}

body.modo-noturno #botao-musica,
body.modo-noturno #botao-tema {
  color: #f1d7a4;
  border-color: #b9842f;
}

body.modo-noturno .hero {
  background:
    radial-gradient(
      circle at top,
      rgba(185, 132, 47, .18),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #17100c,
      #21150f,
      #100a07
    );
}

body.modo-noturno h1,
body.modo-noturno h2,
body.modo-noturno h3 {
  color: #f1d7a4;
}

body.modo-noturno .secao-clara,
body.modo-noturno .card,
body.modo-noturno #formulario {
  background: #21150f;
  color: #f2e7d7;
}

body.modo-noturno .aviso,
body.modo-noturno .pagamentos {
  background: #1b110c;
}

body.modo-noturno .aviso-conversa {
  background: #291b12;
}

body.modo-noturno input,
body.modo-noturno select {
  background: #160e0a;
  color: #f2e7d7;
  border-color: rgba(225, 189, 118, .25);
}

body.modo-noturno .campo-data input[type="date"] {
  color: transparent;
}

body.modo-noturno .campo-data input[type="date"]:focus,
body.modo-noturno .campo-data.tem-data input[type="date"] {
  color: #f2e7d7;
}

body.modo-noturno #mensagem-data {
  color: #bcae9c;
}

body.modo-noturno .botao-claro {
  background: #21150f;
  color: #f1d7a4;
  border-color: #b9842f;
}

body.modo-noturno .frase-conversa {
  color: #e1bd76;
}

body.modo-noturno .instagram {
  background: #8f6527;
  color: #fff5e8;
}

body.modo-noturno .instagram h2 {
  color: #fff5e8;
}

body.modo-noturno .instagram .rotulo {
  color: #f5d995;
}

body.modo-noturno .instagram .botao-claro {
  background: #fff5e8;
  color: #4b2b18;
  border-color: #fff5e8;
}

body.modo-noturno footer {
  background: #100a07;
  color: #f2e7d7;
}


/* =====================================================
   TRANSIÇÕES
===================================================== */

.revelar {
  opacity: 0;

  transform: translateY(70px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.revelar.ativo {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

  .topo {
    grid-template-columns: 70px 1fr;

    gap: 10px;

    padding: 10px 5%;
  }

  .topo nav {
    display: none;
  }

  .marca img {
    width: 58px;
    height: 58px;
  }

  .controles-topo {
    justify-self: end;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

  .topo {
    grid-template-columns: 54px 1fr;

    padding: 8px 12px;
  }

  .marca img {
    width: 52px;
    height: 52px;
  }

  .controles-topo {
    width: 100%;

    justify-content: flex-end;

    gap: 7px;
  }

  .controles-topo #botao-musica,
  .controles-topo #botao-tema {
    width: auto;
    min-width: 105px;
    height: 40px;

    padding: 0 9px;

    font-size: 11px;
  }


  .selo,
  .rotulo {
    font-size: 1.05rem;
    letter-spacing: .09em;
  }

  .secao {
    padding: 70px 16px;
  }

  .secao h2 {
    font-size: 2.65rem;
  }


  .cards,
  .modalidades,
  .cards-conversa {
    grid-template-columns: 1fr;
  }


  .cabecalho-categoria h3 {
    font-size: 2.35rem;
  }


  .acoes {
    flex-direction: column;
  }

  .botao {
    width: 100%;
  }


  /* FORMULÁRIO */

  #formulario {
    padding: 22px 18px;
  }


  /*
     Data e Horário continuam lado a lado.
  */

  #formulario .linha {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 10px;
  }

  #formulario input,
  #formulario select {
    padding-left: 11px;
    padding-right: 11px;

    font-size: 14px;
  }

  #mensagem-data {
    left: 11px;

    max-width: calc(100% - 42px);

    font-size: 12px;
  }


  .agendar-fixo {
    left: 16px;
    right: 16px;

    text-align: center;
  }

}


/* =====================================================
   ACESSIBILIDADE
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .revelar {
    opacity: 1;

    transform: none;

    transition: none;
  }

}