/* ==========================================================================
   components.css — Peças reutilizáveis: botões, cards, accordion, carrossel,
   stepper, badges (REC / viewfinder), galeria, WhatsApp sticky.
   Comportamento validado em design-system-preview.html.
   ========================================================================== */

/* --- Botões — design system, seção 5 ----------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-block;
  width: 100%;                 /* mobile: largura total */
  text-align: center;
  font-family: var(--font-base);
  font-size: 15px;
  border-radius: var(--radius-btn);
  padding: 15px 30px;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent-yellow);
  color: var(--accent-yellow-ink);
  font-weight: var(--fw-semibold);
  border: none;
  /* flex pra acomodar o ícone do WhatsApp à esquerda do texto (injetado por whatsapp.js) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  transition: transform var(--dur-btn) var(--ease),
              box-shadow var(--dur-btn) var(--ease);
}
.btn-primary .wpp-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 208, 42, 0.18);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border);
  transition: border-color var(--dur-btn) var(--ease),
              background var(--dur-btn) var(--ease);
}
.btn-secondary:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.02);
}

.cta-group { display: flex; flex-direction: column; gap: var(--space-16); }

/* ≥ 720px — botões voltam a ficar lado a lado */
@media (min-width: 720px) {
  .btn-primary,
  .btn-secondary { width: auto; }
  .cta-group { flex-direction: row; flex-wrap: wrap; gap: var(--space-16); }
}

/* --- Card de serviço — poster 3:4 com imagem de fundo e texto no rodapé - */
/* A imagem (ou gradiente-placeholder) é o fundo do card; um scrim escurece a
   base pra o texto ficar legível; o conteúdo fica ancorado embaixo. */
.card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;            /* texto ancorado no rodapé */
  transition: transform var(--dur-card) var(--ease),
              border-color var(--dur-btn) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
}
/* Scrim: degradê escuro na base pra garantir contraste do texto sobre a imagem */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(10, 10, 12, 0.88) 0%,
              rgba(10, 10, 12, 0.55) 30%,
              rgba(10, 10, 12, 0) 62%);
  z-index: 1;
}
.card-content {
  position: relative;
  z-index: 2;
  padding: var(--space-24);
  padding-bottom: var(--space-28);   /* padding-bottom elegante */
}
.card h3 {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}
.card p {
  font-size: var(--fs-card);
  color: rgba(242, 240, 234, 0.85);  /* off-white translúcido, legível sobre imagem */
  margin: 0;
}
/* Desktop (cards lado a lado): reserva a altura da descrição mais alta (~3 linhas)
   pra os títulos ficarem alinhados entre os cards. No mobile (empilhado) não é
   necessário — os cards não se comparam lado a lado. */
@media (min-width: 720px) {
  .card p { min-height: 4.5em; }
}

/* --- Stepper ----------------------------------------------------------- */
.step {
  background: var(--section-navy); /* mesmo azul do box de diferenciais */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  position: relative;
  transition: border-color var(--dur-btn) var(--ease),
              transform var(--dur-card) var(--ease);
}
.step:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.step-number {
  font-size: 33px; font-weight: var(--fw-bold); color: var(--accent-yellow);
  margin-bottom: var(--space-12); letter-spacing: 0.05em; line-height: 1.1;
}
.step h4 { font-size: 15px; font-weight: var(--fw-semibold); margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--text-secondary); }

/* --- Accordion (FAQ) --------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 4px; text-align: left;
  font-family: var(--font-base); font-size: 15px; font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.accordion-trigger .plus {
  font-size: 20px; color: var(--accent-yellow); flex-shrink: 0; margin-left: var(--space-16);
  transition: transform var(--dur-accordion) var(--ease);
}
.accordion-item.open .accordion-trigger .plus { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-accordion) var(--ease);
}
/* Nesta etapa estática, o primeiro item nasce aberto só via CSS.
   Quando accordion.js entrar, ele controla max-height por scrollHeight. */
.accordion-item.open .accordion-panel { max-height: 400px; }
.accordion-panel-inner { padding: 0 4px 20px; font-size: 14px; color: var(--text-secondary); }

/* --- Carrossel de depoimentos ------------------------------------------ */
.carousel { position: relative; }
.carousel-track-wrap { overflow: hidden; border-radius: var(--radius-card); }
.carousel-track {
  display: flex;
  transition: transform var(--dur-carousel) var(--ease);
}
.testimonial-slide {
  min-width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 24px 20px;
}
.testimonial-slide p.quote { font-size: 15px; line-height: 1.6; margin-bottom: var(--space-20); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-12); }
.avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--text-primary); flex-shrink: 0;
}
.testimonial-author .name { font-size: 14px; font-weight: var(--fw-semibold); }
.testimonial-author .role { font-size: 12px; color: var(--text-secondary); }
.carousel-controls { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border-hover);
  border: none; cursor: pointer; padding: 0;
}
.carousel-dot.active { background: var(--accent-yellow); }

@media (min-width: 720px) {
  .testimonial-slide { padding: 32px; }
}

/* --- Detalhe audiovisual: cantos de viewfinder (.vf-frame) -------------- */
/* Classe utilitária reutilizável — design system, seção 7 */
.vf-frame { position: relative; }
.vf-corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(242, 240, 234, 0.4);
  z-index: 3;
  pointer-events: none;
}
.vf-corner.tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; }
.vf-corner.tr { top: 12px; right: 12px; border-top: 1.5px solid; border-right: 1.5px solid; }
.vf-corner.bl { bottom: 12px; left: 12px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.vf-corner.br { bottom: 12px; right: 12px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

@media (min-width: 480px) {
  .vf-corner { width: 18px; height: 18px; }
  .vf-corner.tl { top: 16px; left: 16px; }
  .vf-corner.tr { top: 16px; right: 16px; }
  .vf-corner.bl { bottom: 16px; left: 16px; }
  .vf-corner.br { bottom: 16px; right: 16px; }
}

/* --- Detalhe audiovisual: badge REC pulsante --------------------------- */
.rec-badge {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 3;
  display: flex; align-items: center; gap: 7px;
  background: rgba(18, 18, 20, 0.55);
  border: 1px solid rgba(242, 240, 234, 0.15);
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-red);
  animation: recPulse 2.2s infinite;
}
@keyframes recPulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 59, 59, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(225, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 59, 59, 0); }
}
.rec-label {
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.1em;
  color: var(--text-primary); text-transform: uppercase;
}

@media (min-width: 480px) {
  .rec-badge { bottom: 20px; right: 20px; padding: 6px 12px 6px 10px; }
}

/* --- Galeria (grid de fotos com cantos de viewfinder) ------------------ */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
.gallery-tile {
  position: relative;
  aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--surface);
}
/* A foto fica numa camada própria (::before) pra escalar no hover com transform
   (só opacity/transform, por performance — design system seção 6). O overflow:hidden
   do tile recorta o zoom; os cantos de viewfinder (z-index 3) ficam por cima, fixos. */
.gallery-tile::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s var(--ease);
}
.gallery-tile:hover::before { transform: scale(1.08); }
.gallery-tile.t1::before { background-image: url('../assets/img/fotos-fqdstudios-01.webp'); }
.gallery-tile.t2::before { background-image: url('../assets/img/fotos-fqdstudios-02.webp'); }
.gallery-tile.t3::before { background-image: url('../assets/img/fotos-fqdstudios-03.webp'); }
@media (prefers-reduced-motion: reduce) {
  .gallery-tile::before { transition: none; }
  .gallery-tile:hover::before { transform: none; }
}

@media (min-width: 480px) {
  .gallery { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* --- Caixa de nota / aviso --------------------------------------------- */
.note {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}

/* --- WhatsApp sticky — só no mobile/tablet estreito (PRD, seção 5) ------ */
/* Barra fixa inferior enquanto o header está em modo hambúrguer (< 720px) e
   esconde o CTA. No desktop (≥ 720px) o CTA já vive fixo no header, então a
   barra some pra não duplicar. */
.wpp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px var(--pad-inline-mobile);
  background: rgba(18, 18, 20, 0.92);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wpp-sticky .btn-primary { width: 100%; }

@media (min-width: 720px) {
  .wpp-sticky { display: none; }
}

/* --- prefers-reduced-motion: neutraliza movimento dos componentes ------ */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .step:hover,
  .btn-primary:hover { transform: none; }
  .rec-dot { animation: none; }
  .carousel-track,
  .accordion-panel,
  .accordion-trigger .plus { transition: none; }
}