/* ==========================================================================
   MAIARA KLEIN ZIMMERMANN — Página FAQ & Políticas
   Depende de css/styles.css (tokens, nav, footer, .btn, .container, .insta).
   Acordeão auto-contido (mesmas classes usadas em servicos.css, páginas separadas).
   ========================================================================== */

:root{
  --divider:#DCD2BC;             /* linha quente, quase imperceptível */
  --faq-answer:#6a6053;          /* resposta: cinza/marrom médio quente */
  --gold-ink:#8a6f2e;            /* destaque do título ao abrir */
}

.about-img{ filter:saturate(.9) sepia(.05) brightness(1.02); }

/* ==========================================================================
   HERO
   ========================================================================== */
.faq-hero{
  position:relative;
  min-height:64svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.faq-hero__media{ position:absolute; inset:-10% 0; will-change:transform; }
.faq-hero__media img{ filter:saturate(.85) brightness(1.02) blur(2px); }  /* soft focus */
.faq-hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(40,34,26,.42) 0%, rgba(40,34,26,.34) 50%, rgba(40,34,26,.5) 100%);
}
.faq-hero__content{ position:relative; padding-block:10rem 6rem; color:#fff; }
.faq-hero__eyebrow{
  display:block;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  margin-bottom:1.6rem;
}
.faq-hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:1.14;
  color:#fdfbf7;
  max-width:18ch;
  margin-inline:auto;
  text-shadow:0 1px 18px rgba(40,34,26,.4);
}

/* ==========================================================================
   ACORDEÃO (compartilhado por todas as seções desta página)
   ========================================================================== */
.accordion__item{
  border-top:.5px solid var(--divider);
}
.accordion__item:last-child{ border-bottom:.5px solid var(--divider); }

.accordion__head{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1.4rem;
  align-items:center;
  gap:1.2rem;
  padding:1.4rem 0;
  background:none; border:0;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
  font-family:var(--sans);
}
.accordion__name{
  font-size:14px;
  font-weight:300;
  line-height:1.4;
  letter-spacing:.01em;
  transition:color .4s ease, font-weight .4s ease;
}

/* ícone "+" que gira 45° virando "×" */
.accordion__icon{
  position:relative;
  width:15px; height:15px;
  justify-self:end;
  transition:transform .4s ease;
}
.accordion__icon::before,
.accordion__icon::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:13px; height:1px;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:background .4s ease;
}
.accordion__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon{ transform:rotate(45deg); }

/* destaque ao abrir: título ganha cor de acento + leve peso */
.accordion__item.is-open .accordion__name{ color:var(--gold-ink); font-weight:500; }
.accordion__item.is-open .accordion__icon::before,
.accordion__item.is-open .accordion__icon::after{ background:var(--gold-ink); }

/* painel: slide suave via grid-template-rows (0.4s) */
.accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s ease;
}
.accordion__item.is-open .accordion__panel{ grid-template-rows:1fr; }
.accordion__panel-inner{ overflow:hidden; }
.accordion__panel p,
.accordion__panel li{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.8;
  color:var(--faq-answer);
}
/* padding interno para o texto não encostar nas linhas */
.accordion__panel > .accordion__panel-inner > *:first-child{ padding-top:.3rem; }
.accordion__panel p,
.accordion__panel ol,
.accordion__panel ul{ padding-bottom:1.5rem; max-width:52ch; }
.accordion__panel ol,
.accordion__panel ul{ padding-left:1.2rem; }
.accordion__panel li + li{ margin-top:.6rem; }

/* ==========================================================================
   POLÍTICA AFTER CARE — coluna dupla assimétrica
   ========================================================================== */
.aftercare{ padding-block:clamp(6.25rem,12vw,10rem); scroll-margin-top:6rem; }
.aftercare__grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.aftercare__head{ margin-bottom:2.4rem; }
.aftercare__head .index{ display:block; margin-bottom:1.2rem; }
.aftercare__head h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.8rem);
  line-height:1.14;
  max-width:18ch;
}
.aftercare__media{
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--cream-deep);
  /* corte orgânico: arco suave no topo */
  border-radius:46% 46% 10px 10px / 26% 26% 10px 10px;
}

/* ==========================================================================
   CATEGORIAS (Extensão, Lifting, Laminação) — alterna fundo
   ========================================================================== */
.faq-cat{ padding-block:clamp(6.25rem,12vw,10rem); scroll-margin-top:6rem; }
.faq-cat--alt{ background:#F6F1E8; }   /* creme quase imperceptível */

.faq-cat__title{
  text-align:center;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.faq-cat__title .index{ display:block; margin-bottom:1.2rem; }
.faq-cat__title h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
}
.faq-cat__grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.faq-cat--alt .faq-cat__grid{ grid-template-columns:7fr 5fr; }  /* imagem alterna de lado */
.faq-cat__media{
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--cream-deep);
  border-radius:var(--radius);
}
.faq-cat--alt .faq-cat__media{ order:2; }  /* imagem à direita nas alternadas */

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.faq-cta{
  padding-block:clamp(6.25rem,12vw,10rem);
  text-align:center;
}
.faq-cta .index{ margin-bottom:1.6rem; }
.faq-cta h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:2.6rem;
}

/* ==========================================================================
   HOVER
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .accordion__head:hover .accordion__name{ color:var(--gold-ink); }
  .faq-cat__media:hover img,
  .aftercare__media:hover img{ transform:scale(1.04); }
}
.faq-cat__media img,
.aftercare__media img{ transition:transform 1.2s var(--ease); }
@media (hover:none){
  .accordion__head{ -webkit-tap-highlight-color:transparent; min-height:44px; }
}

/* ==========================================================================
   RESPONSIVO — imagens laterais vão para cima dos acordeões
   ========================================================================== */
@media (max-width:820px){
  .aftercare__grid,
  .faq-cat__grid,
  .faq-cat--alt .faq-cat__grid{ grid-template-columns:1fr; }

  .aftercare__media,
  .faq-cat__media,
  .faq-cat--alt .faq-cat__media{ order:-1; }   /* imagem antes das perguntas */

  .aftercare__media,
  .faq-cat__media{ aspect-ratio:16/11; max-height:60svh; }

  .faq-hero__content{ padding-block:8.5rem 5rem; }
}

@media (prefers-reduced-motion:reduce){
  .accordion__panel,
  .accordion__icon,
  .accordion__name,
  .faq-cat__media img,
  .aftercare__media img{ transition:none; }
  [data-parallax]{ transform:none !important; }
}

/* ==========================================================================
   BLOG — convite (primeira seção da página)
   ========================================================================== */
.blog-invite{
  padding-block:clamp(5rem,10vw,8rem);
  background:#F6F1E8;
  scroll-margin-top:6rem;
}
.blog-invite__grid{
  display:grid;
  grid-template-columns:6fr 5fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.blog-invite__text .index{ display:block; margin-bottom:1.2rem; }
.blog-invite__text h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.8rem);
  line-height:1.14;
  max-width:16ch;
  margin-bottom:1.4rem;
}
.blog-invite__text p{ max-width:46ch; line-height:1.75; margin-bottom:2.2rem; }
.blog-invite__list li{ border-top:.5px solid var(--divider); }
.blog-invite__list li:last-child{ border-bottom:.5px solid var(--divider); }
.blog-invite__list a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 0;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--ink);
  transition:color .4s ease;
}
.blog-invite__list .arrow{ transition:transform var(--speed) var(--ease); }
@media (hover:hover) and (pointer:fine){
  .blog-invite__list a:hover{ color:var(--gold-ink); }
  .blog-invite__list a:hover .arrow{ transform:translateX(6px); }
}
@media (max-width:820px){
  .blog-invite__grid{ grid-template-columns:1fr; }
}