/* ==========================================================================
   Graci Cleaning Services — páginas internas (serviços, sobre, contato, orçamento, galeria,
   vídeos, blog, avaliações, páginas legais). Carrega depois de graci.css e usa as mesmas variáveis
   (--g-pink, --g-deep, --g-cta, --g-blush, --g-house...). Guia: docs/IDENTIDADE-VISUAL.md
   Este arquivo também carrega na home: tudo aqui fica preso a ".page-hero" (topo de toda página
   interna) e a ".page-hero ~ ..." (o que vem depois dele), ou a ".error-page" (404, sem topo).
   ========================================================================== */

/* ==========================================================================
   1. TOPO DA PÁGINA — rosa claro, título em carvão, foto na silhueta da casa
   ========================================================================== */
.page-hero:not(.page-hero--artwork) {
  --gi-photo-w: clamp(280px, 38vw, 500px);
  --gi-edge: max(24px, calc((100% - var(--container)) / 2 + 24px));
  background:
    radial-gradient(circle at 82% 18%, rgba(254, 139, 178, .30), transparent 46%),
    linear-gradient(180deg, var(--g-blush-soft) 0%, var(--g-blush) 100%);
  color: var(--g-ink);
  border-bottom: 0;
  padding: 64px 0 72px;
}
.page-hero:not(.page-hero--artwork) .page-hero-bg {
  background: none;
  filter: none;
  isolation: isolate;
}
.page-hero:not(.page-hero--artwork) .page-hero-bg::before,
.page-hero:not(.page-hero--artwork) .page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--g-house-soft);
}
.page-hero:not(.page-hero--artwork) .page-hero-bg::before {
  z-index: -1;
  background: var(--g-pink);
  opacity: .45;
  transform: translate(18px, 16px);
}
.page-hero:not(.page-hero--artwork) .page-hero-bg::after {
  background: var(--page-hero-image, none) center / cover no-repeat, var(--g-blush);
}
.page-hero:not(.page-hero--artwork)::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  top: 44px;
  right: calc(var(--gi-edge) + var(--gi-photo-w) - 16px);
  background: var(--g-sparkle) center / contain no-repeat;
  pointer-events: none;
}
.page-hero:not(.page-hero--artwork) h1 {
  color: var(--g-ink);
  text-shadow: none;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.page-hero:not(.page-hero--artwork) p,
.page-hero:not(.page-hero--artwork) .page-hero-sub {
  color: var(--g-muted);
  opacity: 1;
}
.page-hero .page-hero-accent {
  width: 72px;
  height: 16px;
  border-radius: 0;
  box-shadow: none;
  background:
    var(--g-sparkle) 0 50% / 16px no-repeat,
    var(--g-sparkle) 22px 50% / 11px no-repeat,
    var(--g-sparkle) 39px 50% / 8px no-repeat;
}
/* Rótulo do topo: pílula branca (na Mega Clean era translúcida sobre a foto escura) */
.page-hero .section-kicker--on-dark {
  background: #fff;
  border: 1px solid var(--g-line);
  color: var(--g-cta);
  box-shadow: var(--g-shadow-sm);
}
.page-hero .section-kicker-ico { width: 30px; height: 30px; background: var(--g-cta); }
.page-hero .section-kicker-ico svg { width: 16px; height: 16px; }

/* Variante "Sobre": selo e botões sobre o rosa */
.page-hero--about .page-hero-meta {
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-pill);
  padding: 9px 16px;
  box-shadow: var(--g-shadow-sm);
}
.page-hero--about .page-hero-meta p { color: var(--g-ink); }
.page-hero--about .page-hero-meta strong { color: var(--g-deep); }
.page-hero .page-hero-actions .btn-outline {
  background: #fff;
  color: var(--g-ink);
  border-color: var(--g-ink);
  backdrop-filter: none;
}
.page-hero .page-hero-actions .btn-outline:hover { background: var(--g-ink); color: #fff; border-color: var(--g-ink); }
.page-hero--article .page-hero-inner { max-width: var(--container); }

@media (min-width: 768px) {
  .page-hero:not(.page-hero--artwork) {
    display: flex;
    align-items: center;
    min-height: 400px;
  }
  .page-hero:not(.page-hero--artwork) .page-hero-bg {
    inset: 32px var(--gi-edge) 44px auto;
    width: var(--gi-photo-w);
  }
  .page-hero:not(.page-hero--artwork) .page-hero-inner {
    width: 100%;
    padding-right: calc(var(--gi-photo-w) + 80px);
  }
  .page-hero--about:not(.page-hero--artwork) { min-height: 480px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .page-hero:not(.page-hero--artwork) { --gi-photo-w: clamp(260px, 36vw, 360px); }
  .page-hero:not(.page-hero--artwork) .page-hero-inner { padding-right: calc(var(--gi-photo-w) + 64px); }
}
/* Celular: texto primeiro, foto embaixo com o telhado da casa */
@media (max-width: 767px) {
  .page-hero:not(.page-hero--artwork) {
    display: flex;
    flex-direction: column;
    padding: 36px 0 40px;
  }
  .page-hero:not(.page-hero--artwork) .page-hero-bg {
    position: relative;
    inset: auto;
    order: 1;
    width: calc(100% - 62px);
    margin: 28px 0 0 24px;
    aspect-ratio: 16 / 9.5;
  }
  .page-hero:not(.page-hero--artwork) .page-hero-bg::before { transform: translate(14px, 12px); }
  .page-hero:not(.page-hero--artwork)::after { display: none; }
  .page-hero:not(.page-hero--artwork) h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .page-hero .page-hero-accent { margin-top: 16px; }
  .page-hero--about .page-hero-meta { border-radius: 18px; }
  .page-hero .page-hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 639px) {
  .page-hero:not(.page-hero--artwork) .page-hero-bg { width: calc(100% - 46px); margin-left: 16px; }
}

/* ==========================================================================
   2. TÍTULOS DE SEÇÃO — rótulo em pílula com brilho (sem o traço da Mega Clean)
   ========================================================================== */
.page-hero ~ * .section-kicker:not(.section-kicker--on-dark),
.error-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 14px 7px 12px;
  border: 0;
  border-radius: var(--g-pill);
  background: var(--g-blush);
  color: var(--g-cta-hover);
  font-family: var(--font-display);
  letter-spacing: .08em;
}
.page-hero ~ * .section-kicker:not(.section-kicker--on-dark)::before,
.error-page .eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 0;
  background: var(--g-sparkle) center / contain no-repeat;
}
.page-hero ~ * .section-kicker:not(.section-kicker--on-dark) .section-kicker-label { font-size: 13px; letter-spacing: .08em; }
.page-hero ~ .section-light .section-kicker:not(.section-kicker--on-dark),
.page-hero ~ .location-section .section-kicker:not(.section-kicker--on-dark) { background: #fff; }
.page-hero ~ * .section-header h2,
.page-hero ~ * .why-head h2 { color: var(--g-ink); }
/* Régua sob os títulos: três brilhos em vez da barra */
.page-hero ~ * hr.rule {
  width: 72px;
  height: 16px;
  margin: 18px 0 0;
  border: 0;
  border-radius: 0;
  background:
    var(--g-sparkle) 0 50% / 16px no-repeat,
    var(--g-sparkle) 22px 50% / 11px no-repeat,
    var(--g-sparkle) 39px 50% / 8px no-repeat;
  opacity: 1;
}

/* ==========================================================================
   3. SEÇÕES — alternam branco e rosa claro; espaçamento único
   ========================================================================== */
.page-hero ~ .section,
.page-hero ~ .page-content,
.page-hero ~ .mc-section,
.page-hero ~ .gallery-section {
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
}
/* A primeira seção depois do topo rosa é sempre branca */
.page-hero + .section,
.page-hero + .page-content,
.page-hero ~ .contact-page { background: #fff; }
.page-hero ~ .section-light,
.page-hero ~ .location-section,
.page-hero ~ .quote-page + .section,
.page-hero ~ .service-detail-page + #faq { background: var(--g-blush-soft); }
.page-hero + .section-light { background: #fff; }
.page-hero ~ #faq + #related-services,
.page-hero ~ .quote-page + .section + .gallery-section { background: #fff; }
.page-hero ~ .location-section::before,
.page-hero ~ .location-section::after { display: none; }
/* A última seção desce por baixo da onda do rodapé (que fica 56 px acima dele), sem faixa branca no meio */
.page-hero ~ section:last-of-type {
  margin-bottom: -56px;
  padding-bottom: calc(clamp(56px, 7vw, 88px) + 56px);
}

/* ==========================================================================
   4. FAIXA DE DESTAQUE (a única em rosa profundo) — chamada para orçamento
   ========================================================================== */
.page-hero ~ .quote-cta {
  background:
    var(--g-sparkle-white) 6% 16% / 22px no-repeat,
    var(--g-sparkle-white) 9% 26% / 12px no-repeat,
    linear-gradient(135deg, #C43D6B 0%, #A93059 100%);
  color: #fff;
  padding: clamp(56px, 7vw, 80px) 0;
}
.page-hero ~ .quote-cta:last-of-type { padding-bottom: calc(clamp(56px, 7vw, 80px) + 56px); }
.page-hero ~ .quote-cta .quote-cta-bg { display: none; }
.page-hero ~ .quote-cta .quote-cta-inner { min-height: 0; align-items: center; gap: 40px 56px; }
.page-hero ~ .quote-cta .quote-cta-copy { padding-bottom: 0; }
.page-hero ~ .quote-cta h2 { color: #fff; }
.page-hero ~ .quote-cta .quote-cta-text { color: rgba(255, 255, 255, .92); }
.page-hero ~ .quote-cta .section-kicker--on-dark {
  background: #fff;
  border: 0;
  color: var(--g-cta);
}
.page-hero ~ .quote-cta .section-kicker-ico { width: 30px; height: 30px; background: var(--g-cta); color: #fff; }
.page-hero ~ .quote-cta .section-kicker-ico svg { width: 16px; height: 16px; }
.page-hero ~ .quote-cta .quote-cta-points li { color: #fff; }
.page-hero ~ .quote-cta .quote-cta-point-ico { background: rgba(255, 255, 255, .18); color: #fff; border-radius: 50%; }
.page-hero ~ .quote-cta .btn-primary { background: #fff; color: var(--g-cta); box-shadow: 0 10px 24px rgba(86, 18, 42, .25); }
.page-hero ~ .quote-cta .btn-primary:hover { background: var(--g-blush); color: var(--g-cta-hover); }
.page-hero ~ .quote-cta .btn-outline { background: transparent; color: #fff; border-color: #fff; backdrop-filter: none; }
.page-hero ~ .quote-cta .btn-outline:hover { background: #fff; color: var(--g-cta); border-color: #fff; }
.page-hero ~ .quote-cta .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Foto da faixa: casa com sombra rosa clara */
.page-hero ~ .quote-cta .quote-cta-media--photo {
  min-height: 0;
  padding: 0 18px 16px 0;
  isolation: isolate;
}
.page-hero ~ .quote-cta .quote-cta-media--photo::before {
  content: "";
  position: absolute;
  inset: 0 18px 16px 0;
  z-index: -1;
  background: var(--g-pink);
  opacity: .55;
  clip-path: var(--g-house-soft);
  transform: translate(18px, 16px);
}
.page-hero ~ .quote-cta .quote-cta-photo {
  min-height: 0;
  aspect-ratio: 4 / 3.6;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--g-house-soft);
}
.page-hero ~ .quote-cta .quote-cta-photo img { min-height: 0; height: 100%; aspect-ratio: auto; max-height: none; object-position: 50% 20%; }
.page-hero ~ .quote-cta .quote-cta-photo-fade,
.page-hero ~ .quote-cta .quote-cta-photo-shine { display: none; }
.page-hero ~ .quote-cta .quote-cta-photo-badge {
  background: #fff;
  color: var(--g-ink);
  border: 0;
  backdrop-filter: none;
  box-shadow: var(--g-shadow-sm);
  text-transform: none;
  letter-spacing: .01em;
  font-size: 13px;
}
.page-hero ~ .quote-cta .quote-cta-photo-badge svg { color: var(--g-deep); }
@media (max-width: 699px) {
  .page-hero ~ .quote-cta .quote-cta-media--photo { padding: 0 14px 12px 0; }
  .page-hero ~ .quote-cta .quote-cta-media--photo::before { inset: 0 14px 12px 0; transform: translate(14px, 12px); }
  .page-hero ~ .quote-cta .quote-cta-photo { aspect-ratio: 4 / 3.3; }
}

/* ==========================================================================
   5. CARTÕES — 24 px, borda rosada, sombra rosada
   ========================================================================== */
.page-hero ~ * :is(.service-card, .blog-card, .video-card, .why-card, .step, .review-card,
  .form-card, .mc-info-card, .mc-channel, .location-card, .service-cta-card, .service-process-card,
  .about-mvv-card, .about-values, .legal-toc, .legal-section, .empty-page-state, .presentation-card),
.error-page .empty-page-state {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * :is(.service-card, .blog-card, .video-card, .why-card, .mc-channel):hover { box-shadow: var(--g-shadow); }
.page-hero ~ * :is(.why-card, .step, .service-process-card) { background: #fff; }
.page-hero ~ .section-light :is(.why-card, .step, .service-process-card) { background: #fff; }

/* Ícones em quadradinho rosa claro (no lugar dos quadrados escuros) */
.page-hero ~ * :is(.service-card-badge) {
  background: #fff;
  color: var(--g-deep);
  border: 1px solid var(--g-line);
  border-radius: 14px;
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * :is(.why-card-ico, .why-trigger-ico, .about-mvv-ico, .about-value-ico, .mc-channel-ico,
  .location-pin, .location-meta-ico, .empty-page-ico, .mc-form-ico, .contact-channel-ico),
.error-page .empty-page-ico {
  background: var(--g-blush);
  color: var(--g-deep);
  border-radius: 14px;
}
.page-hero ~ * .learn-more,
.page-hero ~ * .mc-blog-more { color: var(--g-cta); text-transform: none; letter-spacing: .01em; font-family: var(--font-display); }

/* Números (passos, processo, perguntas) em círculo */
.page-hero ~ * :is(.step-num, .service-process-num) {
  background: var(--g-cta);
  color: #fff;
  border-radius: 50%;
}
.page-hero ~ * .step:nth-child(2) .step-num,
.page-hero ~ * .service-process-card:nth-child(2) .service-process-num { background: var(--g-deep); }
.page-hero ~ * .step:nth-child(3) .step-num,
.page-hero ~ * .service-process-card:nth-child(3) .service-process-num { background: var(--g-pink); color: var(--g-ink); }

/* Listas com o brilho como marcador */
.page-hero ~ * :is(.rich-text, .prose, .legal-prose, .blog-article-body) ul:not([class]) {
  list-style: none;
  padding-left: 0;
}
.page-hero ~ * :is(.rich-text, .prose, .legal-prose, .blog-article-body) ul:not([class]) > li {
  position: relative;
  padding-left: 28px;
}
.page-hero ~ * :is(.rich-text, .prose, .legal-prose, .blog-article-body) ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 14px;
  height: 14px;
  background: var(--g-sparkle) center / contain no-repeat;
}
.page-hero ~ * :is(.rich-text, .prose, .legal-prose, .blog-article-body) ul:not([class]) > li::marker { content: ""; }
.page-hero ~ * :is(.rich-text, .blog-article-body) a:not(.btn) { color: var(--g-cta); text-decoration-color: rgba(196, 61, 107, .45); text-underline-offset: 3px; }
.page-hero ~ * :is(.rich-text, .blog-article-body) blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border: 0;
  border-radius: var(--g-radius-sm);
  background: var(--g-blush-soft);
  color: var(--g-ink);
}

/* Botões de contorno em carvão; foco visível */
.page-hero ~ * .btn:focus-visible,
.error-page .btn:focus-visible { outline: 3px solid var(--g-pink); outline-offset: 3px; }

/* ==========================================================================
   6. FORMULÁRIOS (orçamento, contato, comentários, privacidade)
   ========================================================================== */
.page-hero ~ * .site-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], input[type="url"], select, textarea) {
  min-height: 48px;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background-color: #fff;
  color: var(--g-ink);
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-hero ~ * .site-form textarea { border-radius: 18px; min-height: 128px; }
.page-hero ~ * .site-form :is(input, select, textarea):hover { border-color: #EBB8CA; }
.page-hero ~ * .site-form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--g-deep);
  box-shadow: 0 0 0 4px rgba(254, 139, 178, .28);
}
.page-hero ~ * .site-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.page-hero ~ * .site-form label,
.page-hero ~ * .form-label { color: var(--g-ink); }
.page-hero ~ * .mc-field-ico { color: var(--g-deep); }
.page-hero ~ * .form-card { background: #fff; }
.page-hero ~ * .contact-form-head h2,
.page-hero ~ * .quote-step-title { color: var(--g-ink); font-family: var(--font-display); }
.page-hero ~ * .alert { border-radius: var(--g-radius-sm); }
.page-hero ~ * .file-field input[type="file"] {
  width: 100%;
  min-height: 52px;
  padding: 10px;
  border: 1.5px dashed #EBB8CA;
  border-radius: 18px;
  background: var(--g-blush-soft);
  font-size: 15px;
}

/* Orçamento: progresso em pílulas, escolha de serviços em cartões */
.page-hero ~ * .mc-form-progress li { border-radius: var(--g-pill); background: var(--g-blush-soft); color: var(--g-muted); }
.page-hero ~ * .mc-form-progress li.is-current { background: var(--g-blush); color: var(--g-cta-hover); }
.page-hero ~ * .mc-form-progress li.is-current span { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }
.page-hero ~ * .mc-form-progress li.is-done span { background: var(--g-pink); border-color: var(--g-pink); color: var(--g-ink); }
.page-hero ~ * .service-pick label {
  border: 1px solid var(--g-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-hero ~ * .service-pick label:hover { border-color: #EBB8CA; box-shadow: var(--g-shadow-sm); }
.page-hero ~ * .service-pick label:has(input:checked) { border-color: var(--g-cta); box-shadow: 0 0 0 3px rgba(254, 139, 178, .35); }
.page-hero ~ * .service-pick label:focus-within { outline: 3px solid var(--g-pink); outline-offset: 2px; }
.page-hero ~ * .service-pick-any-art { background: var(--g-blush); color: var(--g-deep); }
.page-hero ~ * .quote-trust-row span,
.page-hero ~ * .service-tag {
  border: 1px solid var(--g-line);
  border-radius: var(--g-pill);
  background: var(--g-blush-soft);
  color: var(--g-cta);
}
.page-hero ~ * .service-tag { text-transform: none; letter-spacing: .01em; font-size: 13px; padding: 7px 14px; }

/* ==========================================================================
   7. PÁGINA DE SERVIÇO
   ========================================================================== */
.page-hero ~ * .mc-svc-fill {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  background:
    var(--g-sparkle) calc(100% - 28px) 26px / 28px no-repeat,
    var(--g-sparkle) calc(100% - 64px) 54px / 14px no-repeat,
    linear-gradient(160deg, var(--g-blush) 0%, var(--g-blush-soft) 100%);
  box-shadow: var(--g-shadow-sm);
  color: var(--g-ink);
}
.page-hero ~ * .mc-svc-fill::before,
.page-hero ~ * .mc-svc-fill::after { display: none; }
.page-hero ~ * .mc-svc-fill h3 { color: var(--g-ink); }
.page-hero ~ * .mc-svc-fill p { color: var(--g-muted); }
.page-hero ~ * .mc-svc-fill-ico { background: #fff; color: var(--g-deep); border-radius: 14px; box-shadow: var(--g-shadow-sm); }

.page-hero ~ * .service-process h2,
.page-hero ~ * .service-includes h2 { color: var(--g-ink); }
.page-hero ~ * .service-includes-list li {
  position: relative;
  border: 1px solid var(--g-line);
  border-radius: 18px;
  background: #fff;
  padding-left: 46px;
}
.page-hero ~ * .service-includes-list li svg { display: none; }
.page-hero ~ * .service-includes-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--g-sparkle) center / contain no-repeat;
}
/* A foto da coluna lateral é a mesma do topo: não repete */
.page-hero ~ * .service-detail-media { display: none; }
@media (min-width: 900px) {
  .page-hero ~ * .service-detail-aside .service-cta-card { position: sticky; top: 110px; }
}
.page-hero ~ * .service-cta-card { background: var(--g-blush-soft); }
.page-hero ~ * .service-cta-card h2 { color: var(--g-ink); }
.page-hero ~ * .contact-channel { border-radius: var(--g-radius-sm); border-color: var(--g-line); }

/* ==========================================================================
   8. PERGUNTAS FREQUENTES
   ========================================================================== */
.page-hero ~ * .mc-faq-item {
  border: 1px solid var(--g-line);
  border-radius: 20px;
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * .mc-faq-item[open] { border-color: rgba(196, 61, 107, .35); box-shadow: var(--g-shadow); }
.page-hero ~ * .mc-faq-item summary { color: var(--g-ink); min-height: 56px; }
.page-hero ~ * .mc-faq-item summary::before { border-radius: 50%; background: var(--g-blush); color: var(--g-cta-hover); }
.page-hero ~ * .mc-faq-item[open] summary::before { background: var(--g-cta); color: #fff; }
.page-hero ~ * .mc-faq-item summary::after { background: var(--g-blush); color: var(--g-cta); }
.page-hero ~ * .mc-faq-item[open] summary::after { background: var(--g-cta); color: #fff; }
.page-hero ~ * .mc-faq-item summary:focus-visible { outline: 3px solid var(--g-pink); border-radius: 20px; }
.page-hero ~ * .mc-faq-help {
  background:
    var(--g-sparkle) calc(100% - 22px) 22px / 22px no-repeat,
    #fff;
  color: var(--g-ink);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
}
.page-hero ~ * .mc-faq-help::before,
.page-hero ~ * .mc-faq-help::after { display: none; }
.page-hero ~ * .mc-faq-help-head strong { color: var(--g-ink); }
.page-hero ~ * .mc-faq-help-head span { color: var(--g-muted); }
.page-hero ~ * .mc-faq-help-ico { background: var(--g-blush); color: var(--g-deep); }
.page-hero ~ * .mc-faq-phone { color: var(--g-ink); }
.page-hero ~ * .mc-faq-phone .icon { color: var(--g-deep); }

/* ==========================================================================
   9. SOBRE
   ========================================================================== */
.page-hero ~ * .about-media--story {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  background: none;
  isolation: isolate;
  margin: 0 18px 16px 0;
}
.page-hero ~ * .about-media--story::after {
  inset: 0;
  height: auto;
  z-index: -1;
  border-radius: 0;
  background: var(--g-pink);
  opacity: .45;
  clip-path: var(--g-house);
  transform: translate(18px, 16px);
}
.page-hero ~ * .about-media--story picture,
.page-hero ~ * .about-media--story img { display: block; width: 100%; height: 100%; border-radius: 0; }
.page-hero ~ * .about-media--story img { object-fit: cover; clip-path: var(--g-house); }
.page-hero ~ * .about-prose p:has(strong) {
  border-left: 0;
  border-radius: var(--g-radius-sm);
  background: var(--g-blush-soft);
  border: 1px solid var(--g-line);
  padding: 14px 18px 14px 44px;
  position: relative;
}
.page-hero ~ * .about-prose p:has(strong)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 15px;
  height: 15px;
  background: var(--g-sparkle) center / contain no-repeat;
}
.page-hero ~ * .about-prose p strong { color: var(--g-cta); }
.page-hero ~ * .about-facts .icon { color: var(--g-deep); }
.page-hero ~ * .about-mvv-kicker { color: var(--g-cta); }
.page-hero ~ * .about-values-grid li { border-radius: 18px; border-color: var(--g-line); background: var(--g-blush-soft); }
.page-hero ~ * .why-triggers {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  background: var(--g-blush-soft);
}
.page-hero ~ * .why-trigger { border-radius: 18px; border: 1px solid var(--g-line); box-shadow: none; }
.page-hero ~ * .why-trigger strong { letter-spacing: .02em; }

/* ==========================================================================
   10. CONTATO
   ========================================================================== */
.page-hero ~ * .mc-channel.is-featured {
  border: 2px solid var(--g-pink);
  background: linear-gradient(180deg, #fff 0%, var(--g-blush) 140%);
}
.page-hero ~ * .mc-channel.is-featured .mc-channel-ico { background: var(--g-cta); color: #fff; }
.page-hero ~ * .mc-channel-badge { background: var(--g-cta); color: #fff; border-radius: var(--g-pill); }
.page-hero ~ * .mc-channel strong { color: var(--g-ink); font-family: var(--font-display); }
.page-hero ~ * .mc-channel:focus-visible { outline: 3px solid var(--g-pink); }
.page-hero ~ * .mc-info-list .icon { color: var(--g-deep); }
.page-hero ~ * .mc-info-card h3 { color: var(--g-ink); }
/* Cartão "Need a price?": o destaque em rosa profundo desta página (aqui não há a faixa de orçamento) */
.page-hero ~ * .mc-quote-card {
  border-radius: var(--g-radius);
  background:
    var(--g-sparkle-white) calc(100% - 24px) 24px / 24px no-repeat,
    var(--g-sparkle-white) calc(100% - 56px) 50px / 12px no-repeat,
    linear-gradient(135deg, #C43D6B 0%, #A93059 100%);
  box-shadow: var(--g-shadow);
}
.page-hero ~ * .mc-quote-card::before,
.page-hero ~ * .mc-quote-card::after { display: none; }
.page-hero ~ * .mc-quote-card p { color: rgba(255, 255, 255, .92); }
.page-hero ~ * .mc-quote-card-ico { background: rgba(255, 255, 255, .18); color: #fff; border-radius: 14px; }
.page-hero ~ * .mc-quote-card .btn-primary { background: #fff; color: var(--g-cta); box-shadow: none; }
.page-hero ~ * .mc-quote-card .btn-primary:hover { background: var(--g-blush); color: var(--g-cta-hover); }
/* Área de atendimento */
.page-hero ~ * .location-card { background: #fff; }
.page-hero ~ * .location-card-kicker { color: var(--g-cta); }
.page-hero ~ * .location-map {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  overflow: hidden;
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * .location-map-empty { background: var(--g-blush); color: var(--g-muted); }
.page-hero ~ * .location-map-badge { background: #fff; color: var(--g-cta); border-top: 1px solid var(--g-line); }
.page-hero ~ * .location-chips li { border-radius: var(--g-pill); background: var(--g-blush); color: var(--g-cta-hover); }

/* ==========================================================================
   11. GALERIA, VÍDEOS, BLOG, AVALIAÇÕES
   ========================================================================== */
.page-hero ~ * .gallery-item {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * .gallery-thumb { border-radius: 0; }
.page-hero ~ * .gallery-zoom-hint { background: #fff; color: var(--g-deep); border-radius: 50%; }
.page-hero ~ * .gallery-item figcaption strong { color: var(--g-ink); }
.page-hero ~ .gallery-section .gallery-grid--home :is(.gallery-item, .gallery-thumb) { border-radius: var(--g-radius); }
.page-hero ~ * .ba-card { border-radius: var(--g-radius); border: 1px solid var(--g-line); overflow: hidden; box-shadow: var(--g-shadow-sm); }

.page-hero ~ * .video-card { background: #fff; overflow: hidden; }
.page-hero ~ * .video-card-body h3 { color: var(--g-ink); font-family: var(--font-display); }
.page-hero ~ * :is(.video-card-btn, .mc-video-play) { background: var(--g-cta); color: #fff; box-shadow: 0 10px 24px rgba(196, 61, 107, .35); }

.page-hero ~ * .mc-blog-chip {
  background: #fff;
  color: var(--g-cta);
  border: 0;
  border-radius: var(--g-pill);
  backdrop-filter: none;
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * .mc-blog-chip .icon { color: var(--g-deep); }
.page-hero ~ * .mc-blog-meta .icon { color: var(--g-deep); }
.page-hero ~ * .blog-card h3,
.page-hero ~ * .blog-card h2 { color: var(--g-ink); }
/* Chamada do blog: cartão rosa claro (na Mega Clean era escuro) */
.page-hero ~ * .blog-cta,
.page-hero ~ * .blog-cta-inner {
  border-radius: var(--g-radius);
}
.page-hero ~ * .blog-cta-inner {
  background:
    var(--g-sparkle) calc(100% - 28px) 26px / 26px no-repeat,
    var(--g-sparkle) calc(100% - 62px) 54px / 13px no-repeat,
    linear-gradient(160deg, var(--g-blush) 0%, var(--g-blush-soft) 100%);
  color: var(--g-ink);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-sm);
}
.page-hero ~ * .blog-cta { background: none; box-shadow: none; }
.page-hero ~ * .blog-cta::before,
.page-hero ~ * .blog-cta::after,
.page-hero ~ * .blog-cta-inner::before,
.page-hero ~ * .blog-cta-inner::after { display: none; }
.page-hero ~ * .blog-cta-kicker { color: var(--g-cta-hover); }
.page-hero ~ * .blog-cta-title { color: var(--g-ink); }
.page-hero ~ * .blog-cta-text { color: var(--g-muted); }
.page-hero ~ * .blog-cta .btn-outline-dark { color: var(--g-ink); border-color: var(--g-ink); background: #fff; }
.page-hero ~ * .blog-cta .btn-outline-dark:hover { background: var(--g-ink); color: #fff; }

/* A capa do artigo já aparece no topo, na casa: não repete no começo do texto */
.page-hero ~ * .blog-article-img { display: none; }
.page-hero ~ * .blog-breadcrumbs a { color: var(--g-cta); }
.page-hero ~ * .blog-comment { border-radius: 20px; border-color: var(--g-line); }

.page-hero ~ * .review-stars { color: var(--g-pink); }

/* Paginação em pílulas */
.page-hero ~ * .site-pager-btn { border-radius: var(--g-pill); border-color: var(--g-line); color: var(--g-ink); }
.page-hero ~ * a.site-pager-btn:hover,
.page-hero ~ * a.site-pager-btn:focus-visible { background: var(--g-blush); color: var(--g-cta); border-color: var(--g-pink); }
.page-hero ~ * .site-pager-btn.is-active { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }

/* ==========================================================================
   12. PÁGINAS LEGAIS E APRESENTAÇÃO
   ========================================================================== */
.page-hero ~ * .legal-toc { background: #fff; }
.page-hero ~ * .legal-toc-label { color: var(--g-cta); }
.page-hero ~ * .legal-toc a:hover,
.page-hero ~ * .legal-toc a:focus-visible { color: var(--g-cta); }
.page-hero ~ * .legal-section h2 { color: var(--g-ink); }
.page-hero ~ * .legal-disclaimer,
.page-hero ~ * .legal-section aside,
.page-hero ~ * .legal-prose .legal-summary {
  border-radius: var(--g-radius-sm);
  border-color: var(--g-line);
  background: var(--g-blush-soft);
}
.page-hero ~ * .presentation-pdf,
.page-hero ~ * .presentation-cover-link { border-radius: 18px; overflow: hidden; }

/* ==========================================================================
   13. PÁGINA 404
   ========================================================================== */
.error-page {
  margin-bottom: -56px;
  padding-bottom: calc(72px + 56px);
  background:
    radial-gradient(circle at 80% 12%, rgba(254, 139, 178, .28), transparent 44%),
    linear-gradient(180deg, var(--g-blush-soft) 0%, var(--g-blush) 100%);
}
.error-page .empty-page-state {
  position: relative;
  background:
    var(--g-sparkle) calc(100% - 34px) 30px / 30px no-repeat,
    var(--g-sparkle) calc(100% - 74px) 62px / 14px no-repeat,
    var(--g-sparkle) 34px calc(100% - 34px) / 18px no-repeat,
    #fff;
  box-shadow: var(--g-shadow);
}
.error-page .eyebrow { margin-inline: auto; }
.error-page .error-title { color: var(--g-ink); }

/* ==========================================================================
   14. CELULAR — nada encostando nas bordas, toques confortáveis
   ========================================================================== */
@media (max-width: 767px) {
  .page-hero ~ * .form-card,
  .page-hero ~ * .mc-info-card,
  .page-hero ~ * .mc-quote-card,
  .page-hero ~ * .service-cta-card,
  .page-hero ~ * .location-card { padding: 22px 18px; }
  .page-hero ~ * .site-form .btn,
  .page-hero ~ * .mc-form-foot .btn { width: 100%; justify-content: center; }
  .page-hero ~ * .about-media--story { margin: 0 14px 12px 0; }
  .page-hero ~ * .about-media--story::after { transform: translate(14px, 12px); clip-path: var(--g-house-soft); }
  .page-hero ~ * .about-media--story img { clip-path: var(--g-house-soft); }
  .page-hero ~ * .blog-cta-inner { padding: 24px 18px; }
  .page-hero ~ * .blog-cta-actions .btn { width: 100%; justify-content: center; }
  .page-hero ~ * .mc-faq-help .mc-actions .btn { width: 100%; }
  .page-hero ~ * .btn { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero ~ * .site-form :is(input, select, textarea),
  .page-hero ~ * .service-pick label { transition: none; }
}