/* ===================================
   Sem Tabu — página do encontro (larissanunes.com.br/sem-tabu/)
   Identidade própria do evento: fundo rosado claro, títulos em framboesa suave e uma rosa
   delicada, no estilo pedido pela Larissa; Fraunces nos títulos e DM Sans no corpo.
   Usa o header, o rodapé e o FAQ do style.css; o resto vive aqui, sob body.st
   =================================== */

.st {
  --st-ameixa: #9C3155;
  --st-malva: #B4506F;
  --st-malva-escura: #8A2C4C;
  --st-rosa: #E7B3BE;
  --st-rosa-claro: #F6E1E3;
  --st-salvia: #4F6E47;
  --st-linho: #FBF1F0;
  --st-linho-claro: #FDF8F7;
  --st-tinta: #4A3840;
  --st-serif: 'Fraunces', Georgia, serif;
  background: var(--st-linho-claro);
  color: var(--st-tinta);
}
.st .header { background: rgba(253, 248, 247, 0.92); }
.st ::selection { background: var(--st-rosa-claro); }
.st main a { color: var(--st-malva-escura); }

/* Botões */
.st .st-btn {
  background: var(--st-ameixa); color: #fff; font-family: var(--font-body); font-weight: 700;
  border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(78, 38, 57, 0.7);
}
.st .st-btn:hover { color: #fff; background: var(--st-malva-escura); transform: translateY(-2px); }
.st .st-btn--claro { background: var(--st-linho); color: var(--st-ameixa); }
.st .st-btn--claro:hover { background: #fff; color: var(--st-ameixa); }

/* Tipografia do evento */
.st-sobre {
  font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
  color: var(--st-malva); margin-bottom: 1rem;
}
.st-titulo {
  font-family: var(--st-serif); font-weight: 300; color: var(--st-ameixa);
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 2rem;
}
.st-titulo em, .st-grande em { font-style: italic; color: var(--st-malva); }
.st-junto { white-space: nowrap; }
.st-lema {
  font-family: var(--st-serif); font-style: italic; font-weight: 300; color: var(--st-ameixa);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.3; max-width: 26ch;
}
.st-centro { text-align: center; margin-left: auto; margin-right: auto; }
.st-estreito { max-width: 820px; }
.st-nota { font-size: 0.95rem; color: var(--st-salvia); font-weight: 500; margin-top: 1.5rem; }

/* Marca */
.st-marca { font-family: var(--st-serif); font-weight: 400; color: var(--st-ameixa); line-height: 0.9; margin: 0.4rem 0 1.6rem; font-variation-settings: 'opsz' 144; letter-spacing: 0.02em; }
.st-marca__sem { display: block; font-size: clamp(4.2rem, 10vw, 7rem); }
.st-marca__tabu { display: block; font-size: clamp(4.2rem, 10vw, 7rem); }

/* Topo */
.st-hero { position: relative; min-height: min(92vh, 860px); padding: calc(var(--header-h) + 3.5rem) 0 4rem; display: flex; align-items: center; overflow: hidden; background: var(--st-linho); }
.st-hero__arte { position: absolute; inset: 0; }
.st-hero__arte img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.st-hero__inner { position: relative; width: 100%; }
.st-hero__texto { margin: 1.4rem 0 1.8rem; max-width: 40ch; font-size: 1.08rem; }
.st-fatos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2rem; }
.st-fatos li {
  display: flex; flex-direction: column; padding: 0.8rem 1.3rem; border-radius: 18px; line-height: 1.35;
  background: rgba(253, 248, 247, 0.88); box-shadow: inset 0 0 0 1.5px var(--st-rosa);
}
.st-fatos strong { font-family: var(--st-serif); font-weight: 400; font-size: 1.2rem; color: var(--st-ameixa); }
.st-fatos span { font-size: 0.92rem; color: var(--st-malva-escura); }

/* Seções */
.st-secao { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.st-secao--clara { background: var(--st-linho); }
.st-pergunta p { font-size: 1.12rem; }
.st-pergunta .st-grande { font-size: clamp(2rem, 4.8vw, 3.2rem); }
.st-grande {
  font-family: var(--st-serif); font-weight: 300; color: var(--st-ameixa);
  font-size: clamp(2rem, 4.8vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 1.8rem; max-width: 20ch;
}
.st-destaque {
  margin-top: 2rem; padding: 1.3rem 1.5rem; border-left: 3px solid var(--st-rosa);
  font-family: var(--st-serif); font-style: italic; font-size: 1.25rem !important; color: var(--st-ameixa); background: var(--st-linho);
  border-radius: 0 14px 14px 0;
}

/* Programa */
.st-programa { list-style: none; border-top: 1.5px solid rgba(201, 139, 139, 0.55); }
.st-programa li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding: 1.8rem 0; border-bottom: 1.5px solid rgba(201, 139, 139, 0.55); }
.st-programa__num { font-family: var(--st-serif); font-style: italic; font-weight: 300; font-size: 3rem; line-height: 0.9; color: var(--st-rosa); }
.st-programa h3 { font-family: var(--st-serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--st-ameixa); line-height: 1.2; }
.st-programa__quem { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-malva); font-weight: 500; margin: 0.45rem 0 0.6rem; }

/* Quem conduz */
.st-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: clamp(2rem, 6vw, 5rem); }
.st-pessoa { text-align: center; }
.st-arco { border-radius: 999px 999px 20px 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--st-rosa-claro); box-shadow: 0 24px 50px -30px rgba(78, 38, 57, 0.55); }
.st-arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.st-pessoa figcaption { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
.st-pessoa__nome { font-family: var(--st-serif); font-size: 1.8rem; color: var(--st-ameixa); line-height: 1.1; }
.st-pessoa__papel { min-height: 3em; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--st-malva); font-weight: 500; line-height: 1.5; }
.st-pessoa__texto { max-width: 32ch; margin: 0.3rem auto 0; }

/* Formulário */
.st-secao--ameixa { background: var(--st-ameixa); color: var(--st-linho); }
.st-secao--ameixa .st-sobre { color: var(--st-rosa-claro); }
.st-secao--ameixa .st-titulo { color: #fff; }
.st-secao--ameixa .st-nota { color: var(--st-rosa-claro); }
.st .st-secao--ameixa a { color: #fff; }
.st-form-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.st-form { background: var(--st-linho-claro); color: var(--st-tinta); border-radius: 26px; padding: clamp(1.4rem, 4vw, 2.4rem); display: grid; gap: 1.1rem; }
.st .st-form a { color: var(--st-malva-escura); }
.st-campo { display: grid; gap: 0.35rem; border: 0; }
.st-campo label, .st-campo legend { font-weight: 700; font-size: 0.95rem; color: var(--st-ameixa); }
.st-campo label span, .st-campo legend span { font-weight: 400; color: var(--st-malva); }
.st-campo small { font-size: 0.85rem; color: var(--st-malva-escura); line-height: 1.45; }
.st-form input[type="text"], .st-form input[type="tel"], .st-form input[type="email"], .st-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--st-tinta); background: #fff;
  border: 1.5px solid #DCC6C1; border-radius: 12px; padding: 0.75rem 0.9rem;
}
.st-form textarea { resize: vertical; min-height: 5.5rem; }
.st-form input:focus, .st-form textarea:focus { outline: 3px solid var(--st-rosa); outline-offset: 1px; border-color: var(--st-malva); }
.st-form [aria-invalid="true"] { border-color: #A3324C; }
.st-opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.st-opcoes legend { margin-bottom: 0.5rem; width: 100%; }
.st-opcoes label {
  display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; font-size: 0.93rem; color: var(--st-tinta);
  background: #fff; border: 1.5px solid #DCC6C1; border-radius: 999px; padding: 0.4rem 0.85rem; cursor: pointer;
}
.st-opcoes label:has(input:checked) { background: var(--st-rosa-claro); border-color: var(--st-malva); }
.st-opcoes input, .st-aceite input { accent-color: var(--st-malva); width: 1.05rem; height: 1.05rem; }
.st-aceite { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; align-items: start; }
.st-aceite input { margin-top: 0.2rem; }
.st-form .st-btn--claro { background: var(--st-ameixa); color: #fff; justify-self: start; }
.st-form .st-btn--claro:hover { background: var(--st-malva-escura); color: #fff; }
.st-form .st-btn[disabled] { opacity: 0.6; cursor: wait; }
.st-form__aviso { font-weight: 500; min-height: 1.5em; display: grid; gap: 1.2rem; justify-items: start; }
.st .st-form a.st-btn { color: #fff; }
.st-form__aviso--erro { color: #A3324C; }
.st-form__aviso--ok { color: var(--st-salvia); }
.st-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-form--enviado .st-campo, .st-form--enviado .st-aceite, .st-form--enviado button { display: none; }

/* FAQ e fechamento */
.st .faq__item { background: var(--st-linho-claro); box-shadow: inset 0 0 0 1.5px #EED3D7; }
.st .faq__item[open] { box-shadow: inset 0 0 0 1.5px var(--st-rosa); }
.st .faq__question { color: var(--st-ameixa); }
.st-fim { padding: clamp(4rem, 9vw, 6rem) 0; background: var(--st-rosa-claro); }
.st-fim .st-lema { margin: 0 auto 2rem; max-width: 30ch; }

/* Aviso de cookies em faixa baixa no celular, para não cobrir o botão da lista */
@media (max-width: 720px) {
  .st .cookies {
    left: 0.5rem; right: 0.5rem; bottom: 0.5rem; max-width: none;
    flex-wrap: nowrap; gap: 0.6rem; padding: 0.55rem 0.6rem 0.55rem 0.9rem; border-radius: 14px;
  }
  .st .cookies p { flex: 1 1 auto; font-size: 0.78rem; line-height: 1.35; }
  .st .cookies__botoes { gap: 0.4rem; flex-shrink: 0; }
  .st .cookies .btn { padding: 0.45rem 0.7rem; font-size: 0.8rem; box-shadow: none; }
  .st .cookies .btn--contorno { box-shadow: inset 0 0 0 1.5px var(--lilas-borda); }
}

@media (max-width: 860px) {
  .st-form-grade { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .st-hero { min-height: auto; flex-direction: column; align-items: stretch; padding-bottom: 0; background: linear-gradient(180deg, #FBEDEE 0%, #F8E4E6 100%); }
  .st-hero__inner { order: 1; }
  .st-hero__arte { order: 2; position: relative; inset: auto; height: 92vw; margin-top: 1rem; }
  .st-hero__arte img { object-position: 30% 82%; }
  .st-duas { grid-template-columns: minmax(0, 320px); }
  .st-hero .st-btn { width: 100%; }
  .st-form .st-btn--claro { width: 100%; }
}