/* ==========================================================================
   MAIARA KLEIN ZIMMERMANN — Página de Serviços
   Depende de css/styles.css (tokens, nav, footer, .btn, .container, .index).
   ========================================================================== */

:root{
  --divider:#DCD2BC;      /* linha quente (areia champagne) */
  --accordion-text:#6a6053;  /* descrição revelada, marrom quente */
}

/* subtítulos / itens de menu desta página */
.subhead{
  font-family:var(--sans);
  font-size:12px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--ink-soft);
}

/* ==========================================================================
   HERO — Serviços
   ========================================================================== */
.svc-hero{
  position:relative;
  min-height:78svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.svc-hero__media{ position:absolute; inset:-12% 0; will-change:transform; }
.svc-hero__media img{ filter:saturate(.85) brightness(1.04) blur(2px); }  /* soft focus, igual às outras páginas */
.svc-hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,15,.42) 0%, rgba(20,16,15,.28) 45%, rgba(20,16,15,.5) 100%);
}
.svc-hero__content{ position:relative; color:#fff; padding-block:11rem 6rem; }
.svc-hero__eyebrow{
  display:block;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  margin-bottom:1.8rem;
}
.svc-hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1.2;
  max-width:20ch;
  margin-inline:auto;
  text-shadow:0 1px 20px rgba(20,16,15,.4);
}

/* ==========================================================================
   GRID DE CATEGORIAS
   ========================================================================== */
.categories{ padding-block:clamp(4rem,8vw,7rem); }
.categories__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.6rem);
}
.category{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--cream-deep);
  border-radius:var(--radius);
}
.category img{
  transition:transform .7s var(--ease);
  filter:saturate(.85) brightness(1.06);
}
.category__veil{
  position:absolute; inset:0;
  background:rgba(250,247,245,.28);
  transition:background var(--speed) var(--ease);
}
.category__label{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:1.5rem;
  text-align:center;
  color:#fff;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 16px rgba(20,16,15,.55);
  /* scrim suave atrás do texto (background pinta abaixo do conteúdo):
     garante leitura sobre imagens claras sem tirar o filtro esbranquiçado */
  background:radial-gradient(ellipse 72% 42% at center,
             rgba(20,16,15,.34) 0%, rgba(20,16,15,0) 70%);
}

/* ==========================================================================
   TABELA DE PREÇOS COM ACORDEÃO
   ========================================================================== */
.pricing{ padding-block:clamp(5rem,10vw,9rem); }

/* âncoras vindas da home não podem ficar sob o menu fixo */
.pricing__col,
.detail{ scroll-margin-top:7rem; }

.pricing__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
.pricing__col-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.6rem,2.4vw,2rem);
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--divider);
  margin-bottom:.5rem;
}

/* --- acordeão (compartilhado com seções editoriais) --- */
.accordion__item{ border-bottom:.5px solid var(--divider); }

.accordion__head{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1.5rem;
  align-items:center;
  gap:1rem;
  padding:1.3rem 0;
  background:none; border:0;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
  font-family:var(--sans);
}
.accordion__name{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.3;
}
.accordion__price{
  font-size:12px; letter-spacing:.08em;
  color:var(--ink-soft);
  white-space:nowrap;
}

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

/* painel: slide-down suave via grid-template-rows (0fr -> 1fr),
   reflui sozinho e nunca "salta" como max-height fixo */
.accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease-out;
}
.accordion__item.is-open .accordion__panel{ grid-template-rows:1fr; }
.accordion__panel-inner{ overflow:hidden; }
.accordion__panel p{
  font-size:13px;
  line-height:1.7;
  color:var(--accordion-text);
  padding-bottom:1.4rem;
  max-width:44ch;
}

.pricing__cta{ margin-top:2.2rem; }

/* ==========================================================================
   SEÇÕES EDITORIAIS DE DETALHE (Remoção, Lifting, Laminação)
   Reaproveita .editorial* da styles.css e adiciona o acordeão embutido.
   ========================================================================== */
.detail{ padding-block:clamp(3.5rem,7vw,6rem); }
.detail__text .subhead{ display:block; margin-bottom:1.4rem; }
.detail__text h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.8rem);
  line-height:1.15;
  margin-bottom:1.6rem;
  max-width:16ch;
}
.detail__text > p{
  color:var(--ink-soft);
  max-width:46ch;
  margin-bottom:2rem;
}
.detail__media{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--cream-deep);
  border-radius:var(--radius);
}
.detail__media img{ transition:transform 1.2s var(--ease); }

/* acordeão embutido no bloco editorial fica mais estreito */
.detail .accordion{ max-width:34rem; border-top:.5px solid var(--divider); }

/* ==========================================================================
   AVISO LEGAL (faixa blush antes do footer)
   ========================================================================== */
.legal{
  background:var(--blush);
  text-align:center;
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.legal p{
  max-width:70ch;
  margin-inline:auto;
  color:#6b5b33;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:2;
}

/* ==========================================================================
   HOVER — só ponteiro fino (evita estado preso no toque)
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .category:hover img{ transform:scale(1.1); }
  .category:hover .category__veil{ background:rgba(250,247,245,.1); }
  .detail__media:hover img{ transform:scale(1.05); }
  .accordion__head:hover .accordion__name{ color:var(--ink); }
}
@media (hover:none){
  .accordion__head{ -webkit-tap-highlight-color:transparent; min-height:44px; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:900px){
  .pricing__cols{ grid-template-columns:1fr; gap:3.5rem; }
  .pricing__col{ max-width:34rem; }
}

@media (max-width:820px){
  .categories__grid{ grid-template-columns:1fr; gap:1px; }
  .category{ aspect-ratio:16/10; }
  .category__label{ font-size:14px; }

  .svc-hero__content{ padding-block:9rem 5rem; }
}

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