/* ============================================================
   Planeje sua Visita - page-owned styles
   Scoped to page main and page-owned component roots.
   ============================================================ */

.planeje-hero {
  padding-block: var(--space-8);
}

.planeje-hero__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.planeje-hero__kicker {
  color: var(--color-terracotta);
  margin-block-end: 0;
}

.planeje-hero__titulo {
  margin-block-end: 0;
  max-width: 620px;
}

.planeje-hero__lead {
  max-width: 620px;
  margin-block-end: 0;
}

.planeje-hero__contato {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 620px;
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-hairline-dark);
}

.planeje-hero__contato-linha {
  margin-block-end: 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-muted-stone-dark);
}

.planeje-hero__contato-linha a {
  color: var(--color-porcelain);
}

.planeje-hero__contato-linha a:hover {
  color: var(--color-terracotta);
}

.planeje-hero__contato-rotulo {
  display: inline-block;
  min-width: 90px;
  color: var(--color-terracotta);
  font-weight: 600;
}

.planeje-hero__cta {
  margin-block-start: var(--space-2);
}

/* Localização e Como Chegar */
.planeje-localizacao {
  padding-block: var(--space-8);
}

.planeje-localizacao__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.planeje-localizacao__texto {
  min-width: 0;
}

.planeje-localizacao__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-localizacao__texto h2 {
  margin-block-end: var(--space-4);
}

.planeje-localizacao__texto p {
  max-width: 60ch;
  margin-block-end: var(--space-4);
}

.planeje-localizacao__lista {
  list-style: none;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 60ch;
}

.planeje-localizacao__lista li {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
  position: relative;
}

.planeje-localizacao__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-olive);
}

.planeje-localizacao__mapa {
  min-width: 0;
}

.planeje-localizacao__mapa-moldura {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-slate);
}

.planeje-localizacao__mapa-moldura iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Horários de Funcionamento */
.planeje-horarios {
  padding-block: var(--space-8);
}

.planeje-horarios__inner {
  max-width: 600px;
  margin-inline: auto;
}

.planeje-horarios__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-horarios__inner h2 {
  margin-block-end: var(--space-4);
}

.planeje-horarios__descricao {
  margin-block-end: var(--space-5);
  max-width: 60ch;
}

.planeje-horarios__lista {
  margin-block-end: 0;
  border-block-start: 1px solid var(--color-hairline-dark);
}

.planeje-horarios__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-hairline-dark);
}

.planeje-horarios__item dt {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-terracotta);
  font-weight: 600;
  min-width: 0;
}

.planeje-horarios__item dd {
  margin-inline-start: 0;
  font-variant-numeric: tabular-nums;
  text-align: end;
  min-width: 0;
}

/* Reserva e Contato */
.planeje-reserva {
  padding-block: var(--space-8);
}

.planeje-reserva__inner {
  max-width: 680px;
}

.planeje-reserva__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-reserva__inner h2 {
  margin-block-end: var(--space-4);
}

.planeje-reserva__inner p {
  max-width: 65ch;
  margin-block-end: var(--space-4);
}

.planeje-reserva__contatos {
  list-style: none;
  margin-block-end: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 65ch;
}

.planeje-reserva__contatos li {
  margin-block-end: 0;
}

.planeje-reserva__contatos a {
  color: var(--color-terracotta);
}

.planeje-reserva__contatos a:hover {
  color: var(--color-ink);
}

/* Formulário de Reserva */
.planeje-formulario {
  padding-block: var(--space-8);
}

.planeje-formulario__painel {
  max-width: 680px;
  margin-inline: auto;
  background-color: var(--color-slate);
  padding: var(--space-6);
  border: 1px solid var(--color-hairline-dark);
}

.planeje-formulario__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-formulario__painel h2 {
  margin-block-end: var(--space-4);
}

.planeje-formulario__descricao {
  margin-block-end: var(--space-5);
  max-width: 60ch;
}

.planeje-formulario__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.planeje-formulario__campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.planeje-formulario__campos .form-field {
  margin-block-end: 0;
}

.planeje-formulario__aviso {
  margin-block-end: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-hairline-dark);
  color: var(--color-muted-stone-dark);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  letter-spacing: var(--text-micro-letter-spacing);
  text-transform: uppercase;
}

.planeje-formulario__botao {
  align-self: flex-start;
}

.planeje-formulario__status {
  margin-block-start: var(--space-3);
  color: var(--color-olive);
  font-weight: 500;
}

/* Acessibilidade e Conforto */
.planeje-acessibilidade {
  padding-block: var(--space-8);
}

.planeje-acessibilidade__inner {
  max-width: 680px;
}

.planeje-acessibilidade__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-acessibilidade__inner h2 {
  margin-block-end: var(--space-4);
}

.planeje-acessibilidade__inner p {
  max-width: 65ch;
  margin-block-end: var(--space-4);
}

.planeje-acessibilidade__lista {
  list-style: none;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 65ch;
}

.planeje-acessibilidade__lista li {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
  position: relative;
}

.planeje-acessibilidade__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-olive);
}

/* Dicas Locais */
.planeje-dicas {
  padding-block: var(--space-8);
}

.planeje-dicas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.planeje-dicas__texto {
  min-width: 0;
}

.planeje-dicas__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-dicas__texto h2 {
  margin-block-end: var(--space-4);
}

.planeje-dicas__texto p {
  max-width: 60ch;
  margin-block-end: var(--space-4);
}

.planeje-dicas__lista {
  list-style: none;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 60ch;
}

.planeje-dicas__lista li {
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
  position: relative;
}

.planeje-dicas__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-olive);
}

.planeje-dicas__figura {
  margin-block-end: 0;
  min-width: 0;
}

.planeje-dicas__figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.planeje-dicas__figura figcaption {
  color: var(--color-muted-stone-dark);
  border-block-start-color: var(--color-hairline-dark);
}

/* Perguntas Rápidas */
.planeje-faq {
  padding-block: var(--space-8);
}

.planeje-faq__inner {
  max-width: 680px;
}

.planeje-faq__kicker {
  color: var(--color-terracotta);
  margin-block-end: var(--space-3);
}

.planeje-faq__inner h2 {
  margin-block-end: var(--space-5);
}

.planeje-faq__lista {
  border-block-start: 1px solid var(--color-hairline-light);
}

.planeje-faq__item {
  border-block-end: 1px solid var(--color-hairline-light);
}

.planeje-faq__pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 48px;
  padding-block: var(--space-3);
  text-align: start;
  font-weight: 600;
  color: var(--color-ink);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.planeje-faq__pergunta:hover {
  color: var(--color-terracotta);
}

.planeje-faq__pergunta:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.planeje-faq__icone {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
}

.planeje-faq__icone::before,
.planeje-faq__icone::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--transition-color);
}

.planeje-faq__icone::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

.planeje-faq__icone::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

.planeje-faq__item[data-aberto="true"] .planeje-faq__icone::after {
  transform: scaleY(0);
}

.planeje-faq__resposta {
  padding-block-end: var(--space-4);
}

.planeje-faq__resposta p {
  max-width: 65ch;
  margin-block-end: 0;
}

/* Chamada Final */
.planeje-final {
  padding-block: var(--space-8);
}

.planeje-final__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.planeje-final__kicker {
  color: var(--color-terracotta);
  margin-block-end: 0;
}

.planeje-final__inner h2 {
  margin-block-end: 0;
  max-width: 620px;
}

.planeje-final__inner p {
  max-width: 60ch;
  margin-block-end: 0;
}

.planeje-final__contatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 620px;
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-hairline-dark);
}

.planeje-final__contatos p {
  margin-block-end: 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
}

.planeje-final__contatos a {
  color: var(--color-porcelain);
}

.planeje-final__contatos a:hover {
  color: var(--color-terracotta);
}

.planeje-final__cta {
  margin-block-start: var(--space-2);
}

/* ============================================================
   Tablet and desktop
   ============================================================ */
@media (min-width: 768px) {
  .planeje-hero,
  .planeje-localizacao,
  .planeje-horarios,
  .planeje-reserva,
  .planeje-formulario,
  .planeje-acessibilidade,
  .planeje-dicas,
  .planeje-faq,
  .planeje-final {
    padding-block: var(--space-9);
  }

  .planeje-localizacao__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }

  .planeje-localizacao__mapa-moldura {
    aspect-ratio: auto;
    height: 400px;
  }

  .planeje-formulario__painel {
    padding: var(--space-7);
  }

  .planeje-formulario__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .planeje-formulario__campos .form-field--mensagem {
    grid-column: 1 / -1;
  }

  .planeje-dicas__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .planeje-hero,
  .planeje-localizacao,
  .planeje-horarios,
  .planeje-reserva,
  .planeje-formulario,
  .planeje-acessibilidade,
  .planeje-dicas,
  .planeje-faq,
  .planeje-final {
    padding-block: var(--space-10);
  }

  .planeje-localizacao__grid {
    gap: var(--space-9);
  }

  .planeje-dicas__grid {
    gap: var(--space-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .planeje-faq__icone::before,
  .planeje-faq__icone::after {
    transition: none;
  }
}