/* =========================================================================
   JARDIM ENCANTADO PRESERVADOS — filosofia.css (dono: A6)
   Seção Filosofia / Diferenciais (#diferenciais).
   Mobile-first. Prefixo .filo- em tudo. NÃO redefine globais (.secao/.glass/.btn).
   Só transform/opacity animados (o spotlight usa mask-image, gated por rAF no JS).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SEÇÃO — override local (fluxo em bloco em vez do flex-center global)
   Compound .secao.filo-secao garante precedência sobre .secao sem !important.
   ------------------------------------------------------------------------- */
.secao.filo-secao {
  display: block;
  overflow: hidden;                 /* contém o texto de fundo gigante */
  min-height: 100dvh;
  padding-block: clamp(5rem, 14vh, 10rem);
}

.filo-wrap {
  position: relative;
  z-index: 1;                       /* acima do texto de fundo */
  max-width: 1280px;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   2. TIPOGRAFIA DE FUNDO GIGANTE (decorativa, parallax via JS)
   ------------------------------------------------------------------------- */
.filo-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(2rem, 8vh, 6rem);
  overflow: hidden;
  pointer-events: none;
}
.filo-fundo__texto {
  /* herda .texto-fundo-gigante (outline, baixa opacidade) do base.css */
  margin-left: clamp(-2rem, -2vw, -1rem);
  opacity: .35;
  will-change: transform;
}

/* -------------------------------------------------------------------------
   3. INTRO (título + apoio + mini-grade)
   ------------------------------------------------------------------------- */
.filo-intro { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }

.filo-intro__eyebrow { margin-bottom: 1.25rem; }

.filo-intro__titulo {
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  max-width: 12ch;
  margin-bottom: 1.5rem;
}

.filo-intro__apoio {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: var(--je-white-60);
  max-width: 44ch;
}

/* Mini-grade decorativa discreta */
.filo-grade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2rem;
}
.filo-grade__linha {
  display: block;
  height: 1px;
  background: var(--je-glass-border);
}
.filo-grade__linha:nth-child(1) { width: 56px; }
.filo-grade__linha:nth-child(2) { width: 28px; opacity: .7; }
.filo-grade__linha:nth-child(3) { width: 14px; opacity: .45; }
.filo-grade__ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--je-accent);
  box-shadow: 0 0 12px -1px var(--je-glow);
}

/* -------------------------------------------------------------------------
   4. CARTÕES — base mobile (coluna simples; reveals do sistema global)
   ------------------------------------------------------------------------- */
.filo-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.filo-card {
  position: relative;
  isolation: isolate;               /* mantém o veil dentro do raio */
  overflow: hidden;
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  padding-top: clamp(2.6rem, 4vw, 3.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.2rem);
  transition:
    transform var(--dur-media, .45s) var(--je-ease),
    border-color var(--dur-media, .45s) var(--je-ease),
    box-shadow var(--dur-media, .45s) var(--je-ease);
}

/* Véu escuro (recuo dos cartões cobertos — opacidade animada por JS) */
.filo-card__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(120% 120% at 50% 0%,
    rgba(5, 15, 10, .30) 0%, rgba(5, 15, 10, .58) 100%);
  opacity: 0;
  pointer-events: none;
}

/* Rótulo numérico flutuante */
.filo-card__num {
  position: absolute;
  top: clamp(1rem, 2.4vw, 1.5rem);
  right: clamp(1.2rem, 2.6vw, 1.8rem);
  z-index: 2;
  font-family: var(--je-font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 247, 244, .22);
  transition: color var(--dur-media, .45s) var(--je-ease),
              -webkit-text-stroke-color var(--dur-media, .45s) var(--je-ease);
}

/* Linha de conexão vertical (acende no hover) */
.filo-card__conector {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2rem);
  bottom: clamp(1.4rem, 3vw, 2rem);
  left: 0;
  z-index: 2;
  width: 2px;
  border-radius: 999px;
  background: var(--je-glass-border);
  transform: scaleY(.4);
  transform-origin: top;
  transition: transform var(--dur-media, .45s) var(--je-ease),
              background-color var(--dur-media, .45s) var(--je-ease),
              box-shadow var(--dur-media, .45s) var(--je-ease);
}

.filo-card__corpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.filo-card__eyebrow { color: var(--je-accent); }
.filo-card__titulo {
  font-family: var(--je-font-display);
  font-weight: 380;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -.01em;
  color: var(--je-white);
}
.filo-card__texto {
  font-size: clamp(.95rem, 1.3vw, 1.02rem);
  line-height: 1.55;
  color: var(--je-white-60);
  max-width: 40ch;
}

/* Rodapé: hairline + tag técnica */
.filo-card__rodape {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}
.filo-card__linha {
  flex: 1;
  height: 1px;
  background: var(--je-glass-border);
  transform: scaleX(1);
  transform-origin: left;
  transition: background-color var(--dur-media, .45s) var(--je-ease),
              box-shadow var(--dur-media, .45s) var(--je-ease);
}
.filo-card__tag {
  flex-shrink: 0;
  color: var(--je-white-60);
  transition: color var(--dur-media, .45s) var(--je-ease);
}

/* Hover (desktop / ponteiro fino): glow verde + elevação + conexão acesa */
@media (hover: hover) and (pointer: fine) {
  .filo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(98, 217, 155, .38);
    box-shadow:
      0 0 44px -14px var(--je-glow),
      0 26px 60px -30px rgba(5, 15, 10, .85);
  }
  .filo-card:hover .filo-card__conector {
    transform: scaleY(1);
    background: var(--je-accent);
    box-shadow: 0 0 14px -2px var(--je-glow);
  }
  .filo-card:hover .filo-card__linha {
    background: rgba(98, 217, 155, .55);
    box-shadow: 0 0 14px -3px var(--je-glow);
  }
  .filo-card:hover .filo-card__num {
    -webkit-text-stroke-color: rgba(98, 217, 155, .5);
  }
  .filo-card:hover .filo-card__tag { color: var(--je-accent); }
}

/* -------------------------------------------------------------------------
   5. SPOTLIGHT ANTES / DEPOIS
   ------------------------------------------------------------------------- */
.filo-spot {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: clamp(4rem, 12vh, 8rem) auto 0;
}
.filo-spot__cabecalho { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.filo-spot__eyebrow { margin-bottom: .75rem; }
.filo-spot__descricao {
  font-family: var(--je-font-display);
  font-weight: 340;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--je-white);
  max-width: 22ch;
}

.filo-spot__palco {
  /* Variáveis do spotlight — JS as atualiza AQUI (os filhos herdam) */
  --filo-x: 50%;
  --filo-y: 50%;
  --filo-r: 0px;
  --filo-corte: 14%;   /* posição da cortina antes/depois (alça arrastável) */
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--je-radius);
  overflow: hidden;
  border: 1px solid var(--je-glass-border);
  box-shadow: 0 30px 80px -40px rgba(5, 15, 10, .9);
  cursor: crosshair;
  background: var(--je-green-800);
}
.filo-spot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* "Depois" revelado por máscara circular (vars herdadas do palco) */
.filo-spot__img--depois {
  -webkit-mask-image: radial-gradient(circle var(--filo-r) at var(--filo-x) var(--filo-y),
    #000 0%, #000 58%, rgba(0, 0, 0, .35) 82%, transparent 100%);
          mask-image: radial-gradient(circle var(--filo-r) at var(--filo-x) var(--filo-y),
    #000 0%, #000 58%, rgba(0, 0, 0, .35) 82%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
   Cortina "puxável" antes/depois: cópia do "depois" recortada pela esquerda
   até --filo-corte (clip-path inset — suporte universal, sem composição de
   máscaras). A alça arrasta o corte; a lupa continua agindo fora dela.
   ------------------------------------------------------------------------- */
.filo-spot__cortina {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--filo-corte)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--filo-corte)) 0 0);
  pointer-events: none;
}

.filo-spot__alca {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--filo-corte);
  transform: translateX(-50%);
  z-index: 3;
  width: 44px;                 /* alvo de toque ≥44px */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;         /* arrasto horizontal sem travar a rolagem */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Linha divisória vertical */
.filo-spot__alca::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    rgba(244, 247, 244, 0), rgba(244, 247, 244, .8) 18%,
    rgba(244, 247, 244, .8) 82%, rgba(244, 247, 244, 0));
}
.filo-spot__alca-punho {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--je-white);
  background: rgba(5, 15, 10, .55);
  border: 1px solid var(--je-glass-border);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: 0 0 24px -6px var(--je-glow);
  transition: transform var(--dur-micro, .22s), border-color var(--dur-micro, .22s);
}
.filo-spot__alca:hover .filo-spot__alca-punho,
.filo-spot__alca:focus-visible .filo-spot__alca-punho {
  transform: scale(1.08);
  border-color: var(--je-accent);
}
.filo-spot__alca:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 2px;
}

/* Dica: texto certo para cada tipo de entrada */
.filo-spot__dica--toque { display: none; }
@media (hover: none), (pointer: coarse) {
  .filo-spot__dica--cursor { display: none; }
  .filo-spot__dica--toque { display: inline; }
}
/* Sem lupa (reduced-motion/sem cursor fino): dica de cursor não faz sentido */
.filo-spot--semlupa .filo-spot__dica--cursor { display: none; }
.filo-spot--semlupa .filo-spot__dica--toque { display: inline; }
.filo-spot--semlupa .filo-spot__palco { cursor: default; }

/* Anel sutil que segue o cursor (decorativo, movido por JS via vars) */
.filo-spot__palco::after {
  content: "";
  position: absolute;
  left: var(--filo-x, 50%);
  top: var(--filo-y, 50%);
  width: calc(var(--filo-r, 0px) * 2);
  height: calc(var(--filo-r, 0px) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(98, 217, 155, .35);
  box-shadow: 0 0 30px -6px var(--je-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media, .45s) var(--je-ease);
}
.filo-spot__palco.is-ativo::after { opacity: 1; }

.filo-spot__dica {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: .6em 1.1em;
  border-radius: 999px;
  color: var(--je-white);
  background: rgba(5, 15, 10, .5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--je-glass-border);
  pointer-events: none;
  transition: opacity var(--dur-media, .45s) var(--je-ease);
}
.filo-spot__palco.is-ativo .filo-spot__dica { opacity: 0; }

.filo-spot__legenda {
  position: absolute;
  left: clamp(.8rem, 2vw, 1.2rem);
  bottom: clamp(.8rem, 2vw, 1.2rem);
  z-index: 4;
  padding: .4em .8em;
  border-radius: 999px;
  color: var(--je-white-60);
  background: rgba(5, 15, 10, .45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* Modo cross-fade (mobile / touch / reduced-motion): sem máscara, opacidade */
.filo-spot--fade .filo-spot__img--depois {
  -webkit-mask-image: none;
          mask-image: none;
  opacity: 0;
}
.filo-spot--fade .filo-spot__palco { cursor: default; }
.filo-spot--fade .filo-spot__dica { display: none; }

/* -------------------------------------------------------------------------
   6. DESKTOP ≥1024px — título sticky + EMPILHAMENTO STICKY dos cartões
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .filo-wrap {
    display: grid;
    /* Cartões à ESQUERDA e título à direita: o vídeo mostra a parede de
       paisagismo à direita nesse trecho, e os cartões a cobriam (pedido
       do cliente). A ordem do DOM não muda — só a colocação visual. */
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .filo-intro {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: clamp(8rem, 22vh, 14rem);
    margin-bottom: 0;
    align-self: start;
  }

  .filo-cards {
    grid-column: 1;
    grid-row: 1;
    display: block;                 /* cada cartão controla seu próprio fluxo */
    gap: 0;
    padding-bottom: 20vh;
  }

  /* Empilhamento sticky: cada cartão fixa e o próximo desliza por cima.
     O peek de topo cresce com --i para revelar a borda dos de baixo. */
  .filo-card {
    position: sticky;
    top: calc(clamp(8rem, 22vh, 14rem) + var(--i) * 0.9rem);
    margin-bottom: 42vh;
    min-height: 300px;
    transform-origin: center top;
    will-change: transform;
  }
  .filo-card:last-child { margin-bottom: 0; }
}

/* -------------------------------------------------------------------------
   7. MOVIMENTO REDUZIDO — cartões estáticos, sem véu/parallax/máscara
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .filo-card { position: static; transform: none; will-change: auto; }
  .filo-card__veil { display: none; }
  .filo-fundo__texto { will-change: auto; }
  /* A lupa fica inerte (raio 0); a comparação antes/depois é garantida
     pela cortina, que o JS abre em 50% sob reduced-motion. */
}