/* André Almeida Web Studio · V14.19
   Superfícies de vidro grafite aplicadas aos cards informativos.
   Camada isolada: não altera a dinâmica do Hero, os cases e seus indicadores. */
:root {
  --aa-glass-gray: rgba(34, 36, 42, .62);
  --aa-glass-gray-deep: rgba(20, 22, 28, .72);
  --aa-glass-line: rgba(236, 242, 250, .16);
  --aa-glass-shadow: 0 22px 56px rgba(0, 0, 0, .34), inset 0 1px 1px rgba(255, 255, 255, .16);
  --aa-glass-hover: 0 28px 67px rgba(0, 0, 0, .39), 0 0 25px rgba(65, 196, 255, .10), inset 0 1px 1px rgba(255, 255, 255, .2);
}

/* Vidro fosco: centro cinza neutro com transparência e leve reflexo superior. */
.formats-section .format-card,
.process-section .process-step-card,
.reviews-section .review-card,
.about-section .about-facts > article,
.aa-portfolio-grid .aa-grid-card__inner,
.formats-section .service-context,
.process-section .process-onboarding,
.client-logo {
  background: linear-gradient(143deg,
    rgba(65, 67, 74, .42) 0%,
    var(--aa-glass-gray) 36%,
    var(--aa-glass-gray-deep) 100%);
  border: 1px solid var(--aa-glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow: var(--aa-glass-shadow);
}

/* O cartão de destaque também deve ser grafite, não um painel azul sólido. */
.formats-section .format-card.accent {
  background: linear-gradient(143deg,
    rgba(67, 70, 77, .49),rgba(31, 33, 39, .69) 68%,rgba(20, 22, 28, .79));
  border-color: rgba(190, 226, 245, .23);
  box-shadow: var(--aa-glass-shadow);
}
.formats-section .format-card.accent::before {opacity:0;transform:translateY(22%) scale(.96)}
.formats-section .format-card.accent:hover::before,
.formats-section .format-card.accent:focus-within::before {opacity:.055;transform:none}
.formats-section .format-card.accent h3,
.formats-section .format-card.accent p {color:#f0f4f8}
.formats-section .format-card.accent p {color:#bec8d3}

/* Portfólio: a captura do site mantém suas cores originais; corpo segue em cinza. */
.aa-portfolio-grid .aa-grid-card__inner {background-color:transparent}
.aa-portfolio-grid .aa-grid-card__body {background:rgba(28, 30, 35, .14)}
.aa-portfolio-grid .aa-grid-card__category,
.aa-portfolio-grid .aa-grid-card__tags span {
  background:rgba(229, 237, 248, .065);
  border-color:rgba(231, 239, 249, .16);
  color:#d8e1eb;
}

/* Logotipos: não alterar a identidade gráfica dos próprios clientes. */
.client-logo {box-shadow:0 11px 35px rgba(0, 0, 0, .25),inset 0 1px 1px rgba(255,255,255,.12)}

/* Textos legíveis sobre as novas superfícies sem saturação azul no preenchimento. */
.formats-section .format-card h3,
.process-section .process-step-card h3,
.reviews-section .review-card h3,
.about-section .about-facts strong,
.aa-portfolio-grid .aa-grid-card__body h4 {color:#f6f8fa}
.formats-section .format-card p,
.process-section .process-step-card p,
.aa-portfolio-grid .aa-grid-card__body p {color:#bec8d3}
.reviews-section .review-card blockquote {color:#e0e6ed}
.reviews-section .review-card header p,
.reviews-section .review-card .review-excerpt {color:#abb9c6}

/* Hover mantém a iluminação azul, mas o card continua cinza grafite. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .formats-section .format-card:is(:hover,:focus-within),
  .process-section .process-step-card:is(:hover,:focus-within),
  .reviews-section .review-card:is(:hover,:focus-within),
  .about-section .about-facts > article:hover,
  .aa-portfolio-grid .aa-grid-card__inner:is(:hover,:focus-visible),
  .client-logo:hover {
    border-color:rgba(127, 214, 255, .39);
    box-shadow:var(--aa-glass-hover);
  }
}
@media (hover:none) {
  .formats-section .format-card,
  .process-section .process-step-card,
  .reviews-section .review-card,
  .about-section .about-facts > article,
  .aa-portfolio-grid .aa-grid-card__inner {box-shadow:var(--aa-glass-shadow)}
}
@media (max-width:760px) {
  .formats-section .format-card,
  .process-section .process-step-card,
  .reviews-section .review-card,
  .about-section .about-facts > article,
  .aa-portfolio-grid .aa-grid-card__inner {
    -webkit-backdrop-filter: blur(12px) saturate(110%);
    backdrop-filter:blur(12px) saturate(110%);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .formats-section .format-card,
  .process-section .process-step-card,
  .reviews-section .review-card,
  .about-section .about-facts > article,
  .aa-portfolio-grid .aa-grid-card__inner,
  .formats-section .service-context,
  .process-section .process-onboarding,
  .client-logo {background:linear-gradient(145deg,#2c2e34,#181b22)}
}