/* Fale com a Ju (contato.html): the welcome, three channels (WhatsApp first and highlighted), help topics beside the
   message form, and the questions that open one by one. Same tokens as the rest of the shop (theme.css). */
.contact-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(34px, 6vw, 76px) 0 clamp(48px, 7vw, 96px); }
.contact-hero { max-width: 680px; margin: 0 auto; text-align: center; }
.contact-hero h1 { font-size: clamp(34px, 4.4vw, 54px); }
.contact-lead { max-width: 56ch; margin: 18px auto 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
/* The service hours under the title (from api/_lib/legal.js, like the rest of the contact channels). */
.contact-when { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 18px auto 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 14px; }
.contact-when svg { flex: none; width: 18px; height: 18px; color: var(--rose); }
.contact-when strong { color: var(--ink); font-weight: 650; }

.contact-channels { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-top: clamp(30px, 5vw, 52px); }
.contact-channel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 40px #65364908; }
.contact-channel h2 { margin: 10px 0 0; font-family: 'Playfair Display', Georgia, serif; font-size: 23px; font-weight: 500; }
.contact-channel p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.contact-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #fbeaf0; color: var(--rose); }
.contact-icon svg { width: 24px; height: 24px; }
.contact-channel.is-whatsapp { background: linear-gradient(150deg, #fffcfb 0%, #eaf7ef 100%); border-color: #bfe3cf; }
.is-whatsapp .contact-icon { background: #d9f1e2; color: #1d7a46; }
.contact-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 13px 20px; border-radius: 999px; background: #1d7a46; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px #1d7a4626; transition: background .2s, transform .2s; }
.contact-cta:hover { background: #17643a; }
.contact-cta:active { transform: scale(.98); }
.contact-channel .contact-cta, .contact-channel .contact-link, .contact-channel .contact-soon { margin-top: auto; }
.contact-channel > p:not(.contact-soon) { margin-bottom: 12px; }
.contact-link { padding-top: 14px; color: var(--rose); font-size: 15px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.contact-channel .contact-soon { padding-top: 12px; color: #1d6b40; font-size: 13px; }

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; margin-top: 20px; align-items: start; }
.contact-help, .contact-form-card { padding: 30px 28px; border: 1px solid var(--line); border-radius: 22px; }
.contact-help { background: linear-gradient(160deg, #fffcfb 0%, #fdeef2 100%); }
.contact-form-card { background: var(--panel); box-shadow: 0 18px 55px #65364908; }
.contact-help h2, .contact-form h2, .contact-sent h2 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 500; }
.contact-help-intro { margin: 10px 0 18px; color: var(--muted); font-size: 14px; }
.contact-topics { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-topics li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fffcfbd9; border: 1px solid var(--line); border-radius: 14px; font-size: 14.5px; font-weight: 550; }
.contact-topics li span:first-child { font-size: 20px; line-height: 1; }
.contact-hours { display: grid; gap: 4px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed #b64c6833; font-size: 14px; color: var(--muted); }
.contact-hours strong { color: var(--ink); font-weight: 650; }

.contact-form { display: grid; gap: 14px; }
.contact-form h2 { margin-bottom: 4px; }
.contact-field { display: grid; gap: 6px; }
.contact-field > span { font-size: 13px; font-weight: 600; color: #5f525a; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; padding: 13px 14px; border: 1px solid #6536493d; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; }
.contact-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b64c68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center; cursor: pointer; }
.contact-field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; border-color: transparent; }
.contact-field [aria-invalid=true] { border-color: #c2414f; background: #fff8f8; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-error { margin: 0; padding: 11px 14px; border-radius: 12px; background: #fbe6ea; color: #8e3c50; font-size: 14px; line-height: 1.5; }
.contact-submit { min-height: 52px; margin-top: 2px; font-size: 15px; }
.contact-privacy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.contact-privacy a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.contact-sent { display: grid; justify-items: center; gap: 8px; padding: 36px 10px; text-align: center; }
.contact-sent:focus { outline: none; }
.contact-sent-icon { font-size: 42px; line-height: 1; }
.contact-sent p { margin: 0; color: var(--muted); }
.contact-again { margin-top: 12px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 650; }
.contact-again:hover { background: #f6efef; }

.contact-faq { max-width: 820px; margin: clamp(52px, 7vw, 88px) auto 0; }
.contact-faq .eyebrow, .contact-faq h2, .contact-faq-intro { text-align: center; }
.contact-faq h2 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; }
.contact-faq-intro { margin: 12px 0 26px; color: var(--muted); }
.faq-list { display: grid; gap: 12px; }
/* The answer slides open and closed where the browser can animate to the natural height (::details-content with
   interpolate-size); elsewhere it simply opens. No script, so nothing is ever left half open. */
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; transition: border-color .2s, box-shadow .2s; interpolate-size: allow-keywords; }
.faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .3s ease, opacity .3s ease, content-visibility .3s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.faq-item[open] { border-color: #b64c6840; box-shadow: 0 12px 34px #6536490d; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 16px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; border-radius: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--rose); border-bottom: 2px solid var(--rose); transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-item summary:hover { color: var(--rose); }
.faq-item summary:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.faq-answer { padding: 0 22px 20px; color: #5f525a; font-size: 15px; line-height: 1.7; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin: 0; }
.faq-answer a { color: var(--rose); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .contact-channels, .contact-grid { grid-template-columns: 1fr; }
  .contact-channel .contact-cta { align-self: stretch; justify-content: center; }
}
@media (max-width: 600px) {
  .contact-main { padding-top: 30px; }
  .contact-lead { font-size: 15px; }
  .contact-channel, .contact-help, .contact-form-card { padding: 22px 20px; border-radius: 20px; }
  .faq-item summary { padding: 18px; font-size: 15px; }
  .faq-answer { padding: 0 18px 18px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .contact-cta, .faq-item, .faq-item::details-content, .faq-item summary::after { transition: none; } }