/* RW Cenografia — refinamento visual 2026
   Camada de override não destrutiva: harmoniza superfícies, responsividade e microinterações. */
:root {
  --rw-ink: #171717;
  --rw-ink-soft: #292929;
  --rw-charcoal: #3b3a37;
  --rw-paper: #f3f0ea;
  --rw-paper-soft: #e9e5de;
  --rw-surface: #f8f6f2;
  --rw-line: rgba(23,23,23,.12);
  --rw-muted: #716e68;
  --rw-shadow: 0 24px 70px rgba(18,18,18,.10);
  --rw-ease: cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }
body { background: var(--rw-paper); color: var(--rw-ink); }
body, button, input, textarea, select { -webkit-font-smoothing: antialiased; }

/* Evita o aspecto branco chapado mantendo leitura clean. */
.bg-white, .modal-container, .testimonial-card, .content-card { background-color: var(--rw-surface) !important; }
.bg-gray-light { background-color: var(--rw-paper-soft) !important; }
#about, #portfolio, #orcamento, .testimonials-section { background-color: var(--rw-paper) !important; }
#services { background-color: var(--rw-surface) !important; }

/* Botões: preto suave -> grafite, sem cores saturadas. */
.btn-primary, .hero-cta, .about-cta, .btn-next, .btn-submit, .btn-outline,
button[type="submit"]:not(.testimonial-dot):not(.modal-close) {
  transition: transform .32s var(--rw-ease), background-color .32s ease,
              color .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}
.btn-primary, .hero-cta, .btn-next, .btn-submit {
  background: var(--rw-ink) !important;
  color: #f7f5f0 !important;
  border-color: var(--rw-ink) !important;
}
.btn-primary:hover, .hero-cta:hover, .btn-next:hover, .btn-submit:hover {
  background: var(--rw-charcoal) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}
.btn-outline:hover, .about-cta:hover {
  background: var(--rw-ink-soft) !important;
  color: var(--rw-surface) !important;
  border-color: var(--rw-ink-soft) !important;
}
button:active, .btn-primary:active, .hero-cta:active { transform: translateY(0) scale(.985); }

/* Galeria: a imagem desaparece e a próxima emerge do fundo. */
[id^="mainImage-"] {
  will-change: opacity, transform, filter;
  transform: translateZ(0) scale(1);
  opacity: 1;
  filter: blur(0);
  transition: opacity .30s ease, transform .52s var(--rw-ease), filter .42s ease !important;
}
[id^="mainImage-"].rw-gallery-leave {
  opacity: 0;
  transform: perspective(900px) translateZ(-90px) scale(.94);
  filter: blur(8px);
}
[id^="mainImage-"].rw-gallery-enter {
  opacity: 0;
  transform: perspective(900px) translateZ(-120px) scale(.91);
  filter: blur(10px);
}
.gallery-thumb {
  border: 1px solid transparent;
  opacity: .72;
  transition: opacity .3s ease, transform .36s var(--rw-ease), border-color .3s ease !important;
}
.gallery-thumb:hover, .gallery-thumb.is-active {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(23,23,23,.45);
}

/* Cards e modais com profundidade discreta. */
.service-card, .portfolio-item, .mvv-card, .testimonial-card, .modal-container {
  border-color: var(--rw-line) !important;
}
.service-card, .portfolio-item, .mvv-card {
  transition: transform .45s var(--rw-ease), box-shadow .45s var(--rw-ease), border-color .3s ease !important;
}
.service-card:hover, .mvv-card:hover { transform: translateY(-5px); box-shadow: var(--rw-shadow); }
.modal-overlay { background: rgba(15,15,15,.76) !important; backdrop-filter: blur(12px); }
.modal-container { box-shadow: 0 35px 90px rgba(0,0,0,.28) !important; }

/* Novos blocos opcionais controlados pelo administrador. */
.rw-optional-section { padding: clamp(4rem, 7vw, 7rem) 0; background: var(--rw-surface); }
.rw-optional-section.alt { background: var(--rw-paper-soft); }
.rw-optional-inner { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }
.rw-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--rw-muted); margin-bottom: .8rem; }
.rw-section-title { font-family: var(--font-display, Georgia, serif); font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -.025em; }
.rw-process-grid, .rw-number-grid, .rw-faq-grid { display: grid; gap: 1px; background: var(--rw-line); border: 1px solid var(--rw-line); margin-top: 3rem; }
.rw-process-grid { grid-template-columns: repeat(4, 1fr); }
.rw-number-grid { grid-template-columns: repeat(4, 1fr); }
.rw-faq-grid { grid-template-columns: repeat(2, 1fr); }
.rw-process-card, .rw-number-card, .rw-faq-card { background: var(--rw-surface); padding: clamp(1.4rem, 3vw, 2.4rem); }
.rw-process-card small { font-family: var(--font-mono, monospace); color: var(--rw-muted); letter-spacing: .12em; }
.rw-process-card h3, .rw-faq-card h3 { margin: 1.2rem 0 .7rem; font-size: 1.05rem; font-weight: 600; }
.rw-process-card p, .rw-faq-card p { color: var(--rw-muted); line-height: 1.75; font-size: .93rem; }
.rw-number-card strong { display: block; font-family: var(--font-display, Georgia, serif); font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 400; line-height: .95; }
.rw-number-card span { display: block; margin-top: .9rem; color: var(--rw-muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* Responsividade real: tipografia, gutters, cards e modais. */
img, video { max-width: 100%; }
.hero-title { font-size: clamp(2.7rem, 8vw, 7.5rem) !important; }
.hero-subtitle { max-width: 46rem; }
.modal-container { width: min(1180px, calc(100vw - 2rem)) !important; }

@media (max-width: 1024px) {
  .rw-process-grid, .rw-number-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  section { scroll-margin-top: 72px; }
  .hero-content { width: min(100%, calc(100% - 2rem)); padding-left: 0 !important; padding-right: 0 !important; }
  .services-inner, .portfolio-inner, .testimonials-inner, .orcamento-inner, .about-inner { width: min(100%, calc(100% - 2rem)) !important; }
  .services-header { align-items: flex-start !important; }
  .section-description { text-align: left !important; max-width: 100% !important; }
  .rw-optional-inner { width: min(100%, calc(100% - 2rem)); }
  .rw-faq-grid { grid-template-columns: 1fr; }
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal-container { width: 100% !important; max-height: 94dvh !important; border-radius: 22px 22px 0 0 !important; }
  .modal-container [id^="mainImage-"] { height: min(42vh, 360px) !important; }
  .modal-container .p-8 { padding: 1.25rem !important; }
  .gallery-thumb { min-height: 62px; }
}
@media (max-width: 560px) {
  .portfolio-grid, .rw-process-grid, .rw-number-grid { grid-template-columns: 1fr !important; }
  .hero-title { font-size: clamp(2.5rem, 15vw, 4.7rem) !important; }
  .section-title, .about-title { font-size: clamp(2rem, 11vw, 3.2rem) !important; }
  .btn-primary, .btn-outline, .hero-cta { min-height: 46px; }
  .modal-container .grid-cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}