/* Redesign layer — CSS puro, carregado depois de assets/css/styles.css (Tailwind congelado).
   Nao editar styles.css. Tudo daqui pra frente sobrescreve por especificidade/ordem. */

:root {
  /* Cores — mesma paleta do site (assets/css/styles.css), repetida aqui como
     fonte unica pro redesign em vez de depender das custom properties do Tailwind congelado. */
  --rd-bg-main: #0B0D10;
  --rd-bg-alt: #101317;
  --rd-bg-hero: #0D0F13;

  --rd-surface-glass: rgba(255, 255, 255, 0.06);
  --rd-surface-strong: rgba(255, 255, 255, 0.10);

  --rd-text-main: #FFFFFF;
  --rd-text-muted: #D8D0EA;
  --rd-text-soft: #AFA4C7;

  --rd-purple: #7C3AED;
  --rd-purple-deep: #4C1D95;
  --rd-violet: #6D28D9;
  --rd-magenta: #C026D3;
  --rd-orange: #F97316;
  --rd-orange-light: #FDBA74;
  --rd-whatsapp-green: #25D366;

  --rd-border-orange: rgba(249, 115, 22, 0.28);
  --rd-glow-purple: rgba(124, 58, 237, 0.38);

  /* Tipografia (Fase 2) — Sora nos titulos, Inter no corpo, mesmo par de fontes do blog.
     Fallback pro system font stack anterior caso o Google Fonts nao carregue. */
  --rd-font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --rd-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Espacamento — escala em rem, alinhada a escala Tailwind ja usada no HTML (gap-2 a gap-12 etc). */
  --rd-space-3xs: 0.25rem;
  --rd-space-2xs: 0.5rem;
  --rd-space-xs: 0.75rem;
  --rd-space-sm: 1rem;
  --rd-space-md: 1.5rem;
  --rd-space-lg: 2rem;
  --rd-space-xl: 3rem;
  --rd-space-2xl: 4rem;
  --rd-space-3xl: 7rem;

  /* Duracoes/easing de animacao — sutil e rapido, conforme o principio de direcao do briefing. */
  --rd-duration-fast: 200ms;
  --rd-duration-base: 400ms;
  --rd-duration-slow: 600ms;
  --rd-stagger-step: 80ms;
  --rd-stagger-step-text: 40ms;
  --rd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Reveal on scroll (Fase 1) — distancia padrao do translateY inicial. */
  --rd-reveal-distance: 30px;
}

/* prefers-reduced-motion — global, nao escopado a nenhum atributo/componente.
   Nao mexe no bloco equivalente ja existente em assets/css/styles.css (cobre o CSS antigo);
   este aqui cobre especificamente o que as fases seguintes (Lenis/GSAP/tilt) forem adicionando.
   Nao existe regra estatica de opacity:0 em nenhum lugar deste arquivo — o estado inicial das
   animacoes de reveal (Fase 1) e aplicado 100% via JS (assets/js/redesign.js), e so depois de
   confirmar (a) que o usuario nao pediu reduced-motion e (b) que o GSAP carregou de fato. Por
   isso este bloco nao precisa (e nao deve) forcar opacity/transform em elementos especificos:
   se o JS nao rodar por qualquer motivo, o conteudo ja esta visivel por padrao. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lenis — CSS de suporte recomendado pela biblioteca (nao gera nenhuma mudanca visual por si so;
   so entra em jogo se assets/js/redesign.js conseguir inicializar o Lenis com sucesso). */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

html.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

html.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Tipografia (Fase 2) — aplica os tokens de fonte sem editar assets/css/styles.css.
   Mesma especificidade que as regras equivalentes do Tailwind congelado (body{...}),
   mas como este arquivo carrega depois, vence por ordem de origem. .font-display nao
   tem font-family proprio no CSS congelado (so herda de body), entao esta regra e
   estritamente aditiva. */
body {
  font-family: var(--rd-font-body);
}

.font-display {
  font-family: var(--rd-font-display);
}

/* Headlines de secao (h2.font-display) — clamp fluido em vez dos breakpoints fixos do
   Tailwind (text-4xl/md:text-5xl/md:text-6xl). Especificidade (0,1,2) > .text-4xl/
   .md\:text-6xl (0,1,0), vence independente da ordem de origem. Nao mexe em h1 (hero,
   ja tem escala propria em styles.css e fica fora do sistema de reveal por ser conteudo
   de LCP).
   Valor calibrado medindo ao vivo (#metodo, viewport 1280px): a primeira versao deste
   clamp (max 5rem/80px) fazia o h2 quebrar em 5 linhas dentro da coluna de ~589px,
   deixando a coluna de texto (850px) bem mais alta que o card FVO ao lado (629px). Com
   o teto em 3.25rem/52px o h2 quebra em 3 linhas e a coluna fica em ~638px, alinhada
   ao card. */
section h2.font-display {
  font-size: clamp(2.25rem, 2.25rem + 0.94vw, 3.25rem);
}

.rd-split-word {
  will-change: transform, opacity;
}

/* Fase 3 - bento grid assimetrico de #servicos: 1 card destaque (2 colunas x 2 linhas),
   2 medios, 3 menores. Cada card e imagem real + icone sobreposto, com zoom leve e
   overlay de gradiente no hover/focus, mais tilt 3D via VanillaTilt (assets/js/redesign.js,
   so desktop/mouse - ver setupTilt). Substitui .service-card (que so tinha icone + texto +
   SVG decorativo via ::before em styles.css); as novas classes nao usam .service-card de
   proposito, entao aquele ::before antigo simplesmente nao se aplica mais aqui. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "feature feature medium1"
    "feature feature medium2"
    "small1 small2 small3";
  gap: 1.5rem;
}

.bento-feature { grid-area: feature; }
.bento-medium-a { grid-area: medium1; }
.bento-medium-b { grid-area: medium2; }
.bento-small-a { grid-area: small1; }
.bento-small-b { grid-area: small2; }
.bento-small-c { grid-area: small3; }

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 1.6rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 220px;
  isolation: isolate;
  will-change: transform;
}

.bento-feature {
  min-height: 320px;
}

.bento-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--rd-duration-base) var(--rd-ease-out);
}

.bento-card:hover .bento-media img,
.bento-card:focus-within .bento-media img {
  transform: scale(1.05);
}

.bento-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 16, 0.15) 0%, rgba(11, 13, 16, 0.6) 55%, rgba(11, 13, 16, 0.94) 100%);
  transition: background var(--rd-duration-base) ease;
}

.bento-card:hover .bento-media::after,
.bento-card:focus-within .bento-media::after {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.3) 0%, rgba(11, 13, 16, 0.6) 55%, rgba(11, 13, 16, 0.94) 100%);
}

.bento-icon {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: 1.25rem 0 0 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  background: rgba(11, 13, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-orange);
}

.bento-icon i,
.bento-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.bento-body {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  margin-top: auto;
}

.bento-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.bento-feature .bento-body h3 {
  font-size: 1.5rem;
}

.bento-body p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "feature"
      "medium1"
      "medium2"
      "small1"
      "small2"
      "small3";
  }

  .bento-card {
    min-height: 240px;
  }
}

/* Revisao de cores (pedido do Allan): botoes de acao viram laranja solido em vez do
   fluxo-gradient roxo-magenta-laranja - exceto os botoes de WhatsApp (verde), que ficam
   como estao. Classe nova porque bg-[#F97316] solido (sem opacidade) nao existe no
   Tailwind congelado (so o que ja estava em uso no HTML foi compilado). !important
   necessario pra vencer .hero-btn-secondary, que tambem usa !important em styles.css. */
.btn-orange {
  background: linear-gradient(135deg, #FDBA74 0%, #F97316 55%, #EA580C 100%) !important;
  color: #050505 !important;
}

.btn-orange:hover {
  background: #FB923C !important;
}