/* O header fixo do site depende de um script de scroll que esta página
   não carrega; sem fundo, o conteúdo aparecia atrás do texto do topo. */
body[data-page="relato-unificado"] .nav {
  background: rgba(253, 243, 232, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(44, 51, 38, .08);
}

.relato-unificado {
  padding: 2.5rem 0 5rem;
  background:
    radial-gradient(circle at 10% 6%, rgba(217, 115, 66, .10), transparent 30rem),
    radial-gradient(circle at 90% 20%, rgba(66, 86, 58, .08), transparent 28rem),
    var(--surface-cream, #fdf3e8);
  min-height: 100vh;
}

.relato-unificado__hero {
  max-width: 780px;
  margin: 0 auto 2rem;
  text-align: center;
}

.relato-unificado__kicker {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--brand-terracotta-dark, #c76336);
  font-size: .78rem;
}

.relato-unificado__hero h1 {
  font-family: var(--font-heading, "Cormorant Garamond", serif);
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: .98;
  margin: .6rem 0 1rem;
  color: var(--brand-ink, #2c3326);
}

.relato-unificado__hero p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: rgba(44, 51, 38, .78);
}

.relato-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface-paper, #fffaf2);
  border: 1px solid var(--line-soft, rgba(44, 51, 38, .13));
  border-radius: var(--radius-panel, 34px);
  box-shadow: var(--shadow-paper, 0 18px 45px rgba(44, 51, 38, .08));
  overflow: hidden;
}

.relato-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(217, 115, 66, .2);
  border-radius: calc(var(--radius-panel, 34px) - 9px);
  pointer-events: none;
}

.relato-card__topo {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 4vw, 2.6rem) clamp(1.75rem, 4vw, 2.6rem) 1.4rem;
  text-align: center;
}

.relato-card__eyebrow {
  margin: 0 0 .4rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-terracotta-dark, #c76336);
}

.relato-card__topo h2 {
  margin: 0 0 .6rem;
  font-family: var(--font-heading, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--brand-ink, #2c3326);
}

.relato-card__explicacao {
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.7;
  color: rgba(44, 51, 38, .78);
}

.relato-card__corpo {
  position: relative;
  z-index: 1;
  padding: 0 clamp(1.5rem, 4vw, 2.4rem) 2rem;
}

.relato-modo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.relato-modo button {
  border: 1px solid var(--line-soft, rgba(44, 51, 38, .14));
  background: #fff;
  border-radius: 18px;
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.relato-modo button:hover {
  transform: translateY(-2px);
}

.relato-modo button.is-active {
  border-color: var(--brand-terracotta, #d97342);
  background: var(--brand-blush, #fdeee0);
}

.relato-modo strong,
.relato-modo span {
  display: block;
}

.relato-modo span {
  font-size: .86rem;
  color: rgba(44, 51, 38, .68);
  margin-top: .25rem;
}

.relato-secao {
  border: 0;
  padding: 0;
  margin: 0 0 1.85rem;
}

.relato-secao legend {
  padding: 0 0 .85rem;
  font-family: var(--font-heading, "Cormorant Garamond", serif);
  font-size: 1.35rem;
  color: var(--brand-forest, #42563a);
}

.relato-secao__nota {
  margin: -.5rem 0 .85rem;
  font-size: .84rem;
  color: rgba(44, 51, 38, .65);
}

.relato-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.relato-field {
  display: grid;
  gap: .4rem;
  font-weight: 700;
  color: var(--brand-ink, #2c3326);
}

.relato-field--full {
  grid-column: 1 / -1;
}

.relato-field input,
.relato-field select,
.relato-field textarea {
  width: 100%;
  border: 1px solid var(--line-soft, rgba(44, 51, 38, .2));
  border-radius: 14px;
  padding: .85rem 1rem;
  font: inherit;
  background: #fff;
  color: var(--brand-ink, #2c3326);
}

.relato-field input:focus,
.relato-field select:focus,
.relato-field textarea:focus {
  outline: 2px solid rgba(217, 115, 66, .35);
  outline-offset: 1px;
}

.relato-efeitos {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.relato-efeito {
  border: 1px solid var(--line-soft, rgba(44, 51, 38, .18));
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  padding: .55rem .9rem;
  cursor: pointer;
  color: var(--brand-ink, #2c3326);
  font-weight: 600;
}

.relato-efeito.is-active {
  background: var(--brand-terracotta, #d97342);
  border-color: var(--brand-terracotta, #d97342);
  color: #fff;
}

.relato-foto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.relato-foto__botao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.2rem;
  border: 1px dashed rgba(217, 115, 66, .45);
  border-radius: 999px;
  background: rgba(217, 115, 66, .07);
  color: var(--brand-terracotta-dark, #c76336);
  font-weight: 700;
  cursor: pointer;
}

.relato-foto__botao:hover {
  background: rgba(217, 115, 66, .14);
}

.relato-foto__preview {
  position: relative;
  width: 84px;
  height: 84px;
}

.relato-foto__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line-soft, rgba(44, 51, 38, .16));
}

.relato-foto__remover {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--brand-ink, #2c3326);
  color: #fff;
  font-size: 0;
  cursor: pointer;
}

.relato-foto__remover::before {
  content: "×";
  font-size: 1rem;
  line-height: 1;
}

.relato-foto__msg {
  margin: 0;
  font-size: .84rem;
  color: var(--brand-forest, #42563a);
}

.relato-foto__msg.is-error {
  color: var(--brand-terracotta-deep, #9b4d2b);
}

.relato-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.relato-msg {
  min-height: 1.4rem;
  font-size: .92rem;
  color: rgba(44, 51, 38, .78);
}

.relato-msg.is-error {
  color: var(--brand-terracotta-deep, #9b4d2b);
}

.relato-msg.is-success {
  color: var(--brand-forest, #42563a);
}

.relato-contexto {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .6rem 0 1.4rem;
}

.relato-chip {
  background: rgba(217, 115, 66, .1);
  border-radius: 999px;
  padding: .4rem .75rem;
  font-weight: 700;
  color: var(--brand-terracotta-dark, #c76336);
}

.relato-sucesso {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  text-align: center;
}

.relato-sucesso h2 {
  font-family: var(--font-heading, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--brand-ink, #2c3326);
  margin: 0 0 .75rem;
}

.relato-sucesso p {
  line-height: 1.65;
  color: rgba(44, 51, 38, .82);
}

.relato-sucesso__aviso-foto {
  color: var(--brand-terracotta-deep, #9b4d2b);
  font-weight: 600;
}

.relato-sucesso code {
  background: rgba(44, 51, 38, .07);
  padding: .2rem .5rem;
  border-radius: 8px;
}

.relato-sucesso__nota {
  font-size: .86rem;
  color: rgba(44, 51, 38, .65);
}

.relato-sucesso .relato-acoes {
  justify-content: center;
}

@media (max-width: 760px) {
  .relato-unificado {
    padding-top: 1.2rem;
  }

  .relato-card {
    border-radius: 22px;
  }

  .relato-card__topo,
  .relato-card__corpo {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .relato-modo {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -1.2rem;
    padding: 0 1.2rem .3rem;
  }

  .relato-modo button {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .relato-grid {
    grid-template-columns: 1fr;
  }

  .relato-field--full {
    grid-column: auto;
  }

  .relato-acoes {
    align-items: stretch;
    flex-direction: column;
  }

  .relato-acoes .btn {
    width: 100%;
  }
}