/* ══════════════════════════════════════════════════════════════════════
   03 · COMPONENTES — vidro, carrossel, estudo de luz e painel de automação
   DOCS/01_sistema-visual.md §8 e §9.1
   ══════════════════════════════════════════════════════════════════════ */

/* ── Vidro (§8.5) — translucidez de verdade, nunca opacidade reduzida.
   Só entra em CONTROLE: onde a luz atravessa e o conteúdo continua
   visível por trás. Não há bandeja de vidro atrás de foto. ────────── */
.vidro{
  background: var(--lf-vidro);
  border: 1px solid var(--lf-vidro-borda);
  -webkit-backdrop-filter: var(--lf-vidro-desfoque);
          backdrop-filter: var(--lf-vidro-desfoque);
  box-shadow: var(--lf-sombra), var(--lf-vidro-brilho);
  border-radius: var(--lf-raio-g);
}

/* .vidro é pele, e traz o raio 34px do painel junto. Quem é pílula precisa
   dizer de novo, depois dela — o link de salto estava saindo com 34px de raio
   numa caixa de 47px de altura (REVISÃO design 15/08/2026, §11.1). */
.pular{ border-radius: var(--lf-raio-pilula); }

/* ══════════════════════════════════════════════════════════════════
   CARROSSEL (§8)
   ══════════════════════════════════════════════════════════════════ */

.carrossel{
  --gap: var(--lf-esp-4);
  --item: 82vw;                 /* 375px: 1 item + espiada de ~11vw do próximo */
  --lf-dur-legenda: 320ms;      /* troca da legenda do item ativo (§8.4) */
  --lf-dur-estudo: 18s;         /* corrida da luz no estudo ativo (§8.8) */
  position: relative;
  margin-top: calc(var(--lf-respiro-bloco) * 2);
}
@media (min-width: 768px){
  .carrossel{ --gap: var(--lf-esp-5); --item: calc((100% - var(--lf-esp-5)) / 2); }
}
@media (min-width: 1280px){
  .carrossel{ --gap: var(--lf-esp-6); --item: min(calc((100% - 2 * var(--lf-esp-6)) / 3), 560px); }
}
@media (min-width: 1920px){
  .carrossel{ --gap: 40px; --item: min(calc((100% - 2 * 40px) / 3), 560px); }
}
@media (min-width: 2100px){
  .carrossel{ --gap: var(--lf-esp-7); --item: min(calc((100% - 2 * var(--lf-esp-7)) / 3), 560px); }
}

.carrossel__palco{ position: relative; }

.carrossel__trilho{
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;   /* sem isto, arrastar além do fim dispara o "voltar" */
  scrollbar-width: none;            /* o controle é próprio (§8.6) */
  padding-inline: var(--lf-margem); /* o primeiro item alinha com o texto */
  scroll-padding-inline: var(--lf-margem);
  padding-block: var(--lf-esp-2);   /* folga para a sombra do item ativo não ser cortada */
  will-change: scroll-position;
}
.carrossel__trilho::-webkit-scrollbar{ display: none; }

/* A partir de 768px não há espiada do próximo (§8.2): a janela de rolagem
   termina na margem direita, e não na borda da tela. No celular o padding
   continua dos dois lados — lá a espiada é o que avisa que tem mais. */
@media (min-width: 768px){
  .carrossel__trilho{
    /* REVISÃO design 15/08/2026 — o recuo era calculado contra 1800px, e o
       primeiro quadro caía 14px à esquerda do título em 1440 e 225px em 1920.
       O §8.3 pede que ele alinhe COM O TEXTO: quem manda é --lf-recuo, a borda
       real da coluna. O trilho continua terminando na margem e, em tela larga,
       fica naturalmente concêntrico com a coluna (§11.6). */
    /* CORREÇÃO design 15/08/2026 — aqui havia uma variante "compensada" pela
       margem, escrita na hipótese de que a porcentagem resolveria contra a
       caixa do trilho já encolhida pela margem direita. Não resolve: % de
       padding resolve contra o BLOCO CONTÊINER (.carrossel__palco, de largura
       cheia), e a compensação virava erro de margem/2 — 57,6px a 1920px.
       É o token direto, e só ele. Conferido em 375/768/1280/1440/1920/2560. */
    padding-inline-start:        var(--lf-recuo);
    scroll-padding-inline-start: var(--lf-recuo);
    padding-inline-end: 0;
    margin-inline-end: var(--lf-margem);
  }
}

.carrossel__item{
  flex: 0 0 var(--item);
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--lf-raio-xg);
  /* REVISÃO design 15/08/2026 — .55 foi calibrado para FOTOGRAFIA (clara) e
     apaga o estudo de luz (escuro): os vizinhos viravam buracos sem silhueta.
     .64 + um fio de 1px devolvem o primeiro nível de leitura sem competir com
     o ativo — a distinção continua sendo luz e nitidez, nunca escala (§8.4). */
  opacity: .64;
  filter: saturate(.72);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  transition: opacity var(--lf-dur-carrossel) var(--lf-ease),
              filter var(--lf-dur-carrossel) var(--lf-ease),
              box-shadow var(--lf-dur-carrossel) var(--lf-ease);
}
/* Item ativo: a distinção vem de luz e nitidez, nunca de escala —
   escalonar mexe na caixa e cria tremor durante a rolagem (§8.4) */
.carrossel__item.ativo{
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), var(--lf-sombra-alta), var(--lf-vidro-brilho);
}

/* Trilho com um item só: quadro centralizado, sem controle nenhum (§8.9) */
.carrossel--unico .carrossel__trilho{ justify-content: center; }

/* ── Estudo de luz — fundo permanente do item (§8.8) ─────────────── */
.estudo{
  aspect-ratio: 3 / 2;
  border-radius: var(--lf-raio-xg);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(72% 86% at calc(28% + var(--i) * 4.4%) 26%,
                    rgba(0,61,165,.34) 0%, transparent 72%),
    radial-gradient(46% 54% at calc(74% - var(--i) * 3.1%) 62%,
                    rgba(255,201,138,.20) 0%, transparent 74%),
    linear-gradient(calc(160deg - var(--i) * 7deg), var(--lf-noite-2) 0%, var(--lf-noite) 68%);
}
.estudo__desenho{ position:absolute; inset:0; width:100%; height:100%; }

/* A linha contínua: parada por padrão, só o quadro ativo acende o trecho */
.estudo__luz{ stroke-dashoffset: 0; }
.carrossel__item.ativo .estudo__luz{
  animation: estudo-corre var(--lf-dur-estudo) linear infinite;
}
@keyframes estudo-corre{ to{ stroke-dashoffset: -100 } }

/* Pílula de vidro de 22px — vidro leve: aqui não cabe a sombra do painel */
.estudo__etiqueta{
  position: absolute;
  left: var(--lf-esp-4); bottom: var(--lf-esp-4);
  display: inline-flex; align-items: center;
  height: 22px; padding-inline: var(--lf-esp-3);
  border-radius: var(--lf-raio-pilula);
  background: var(--lf-vidro);
  border: 1px solid var(--lf-vidro-borda);
  -webkit-backdrop-filter: var(--lf-vidro-desfoque);
          backdrop-filter: var(--lf-vidro-desfoque);
  box-shadow: var(--lf-vidro-brilho);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lf-ui);
}

/* A foto real entra por cima do estudo, em dissolução — sem shimmer, sem spinner */
.carrossel__foto{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--lf-raio-xg);
  opacity: 0;
  transition: opacity 640ms var(--lf-ease-entra);
}
.carrossel__foto.carregada{ opacity: 1; }

/* ── Setas (§8.5) ────────────────────────────────────────────────── */
.carrossel__seta{
  position: absolute; top: 50%;
  z-index: var(--lf-z-controle);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  border-radius: var(--lf-raio-pilula);
  color: var(--lf-texto);
  cursor: pointer;
  transition: background-color var(--lf-dur-rapida) var(--lf-ease),
              opacity var(--lf-dur-rapida) var(--lf-ease);
}
.carrossel__seta:hover{ background-color: var(--lf-vidro-alto); }
.carrossel__seta[disabled]{ opacity: .32; pointer-events: none; }
.carrossel__seta--ant{ left: var(--lf-esp-4); }
.carrossel__seta--prox{ right: var(--lf-esp-4); }

/* Abaixo de 768px não existem: no celular o gesto é arrastar */
@media (max-width: 767px){
  .carrossel__seta{ display: none; }
}
/* Fora do quadro só a partir de 1440px: em 1280 o recuo é 77px contra um botão
   de 56px, e a seta ficaria colada no quadro — pior que sobreposta.
   (REVISÃO design 15/08/2026 — o §8.5 dizia 1280; com o número na mão, 1440.) */
@media (min-width: 1440px){
  .carrossel__seta--ant{ left: max(var(--lf-esp-4), calc((var(--lf-recuo) - 56px) / 2)); }
  .carrossel__seta--prox{ right: max(var(--lf-esp-4), calc((var(--lf-margem) - 56px) / 2)); }
}

/* ── Legenda, contador e trilho de progresso ─────────────────────── */
.carrossel__rodape{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lf-esp-5);
  /* mesma borda esquerda do título e do 1º quadro; a direita termina na margem,
     onde termina o último quadro (REVISÃO design 15/08/2026) */
  padding-inline: var(--lf-recuo) var(--lf-margem);
  margin-top: var(--lf-respiro-bloco);
}

.carrossel__legenda{
  opacity: 1;
  transform: none;
  transition: opacity var(--lf-dur-legenda) var(--lf-ease),
              transform var(--lf-dur-legenda) var(--lf-ease);
}
.carrossel__legenda.trocando{ opacity: 0; transform: translateY(6px); }
.carrossel__ambiente{
  display: block;
  font-size: var(--lf-tipo-corpo);
  color: var(--lf-texto-2);
}
.carrossel__nota{
  display: block;
  max-width: 46ch;
  font-size: var(--lf-tipo-legenda);
  line-height: 1.5;
  color: var(--lf-texto-3);
}

.carrossel__medidores{
  display: flex; align-items: center; gap: var(--lf-esp-5);
}
.carrossel__contador{
  display: inline-flex; align-items: center;
  padding: var(--lf-esp-2) var(--lf-esp-4);
  border-radius: var(--lf-raio-pilula);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--lf-ui);
}
/* Trilho, não bolinhas: dez pontos iguais seriam grade regular (§8.6).
   É a linha contínua virada controle — uma luz que corre por um trilho. */
.carrossel__progresso{
  width: clamp(96px, 12vw, 168px);
  height: 2px;
  border-radius: var(--lf-raio-pilula);
  background: var(--lf-linha);
  overflow: hidden;
}
/* REVISÃO design 15/08/2026 — a largura era 10% fixo: com 6 itens em vez de 10
   (o §8.10 permite publicar parcialmente) o segmento parava em 60% do trilho.
   Passa a vir de --total, que o JS escreve. O halo é o que faz o segmento ler
   como LUZ correndo por um trilho, e não como um hífen (§8.6). */
.carrossel__progresso span{
  display: block;
  width: calc(100% / var(--total, 10)); height: 100%;
  border-radius: var(--lf-raio-pilula);
  background: linear-gradient(90deg, var(--lf-luz), var(--lf-luz-forte));
  box-shadow: 0 0 10px 1px rgba(255,201,138,.55);
  transform: translateX(calc(var(--ativo, 0) * 100%));
  transition: transform var(--lf-dur-carrossel) var(--lf-ease);
}

/* ══════════════════════════════════════════════════════════════════
   PAINEL DE AUTOMAÇÃO (§9.1)
   A Tela 02 virada objeto: um interruptor abstrato, aceso por dentro.
   Nada dentro além da linha de luz — nenhum ícone, nenhum botão falso.
   ══════════════════════════════════════════════════════════════════ */

.painel{
  --lf-dur-respiro: 7.4s;      /* ritmo de respiração calma, não de piscada */
  position: relative;
  z-index: var(--lf-z-painel);
  width: min(78vw, 560px);
  aspect-ratio: 5 / 3;
  margin-top: var(--lf-respiro-bloco);
  display: grid; place-items: center;
  overflow: hidden;
}
/* REVISÃO design 15/08/2026 — sem esta camada o painel era uma caixa vazia com
   um risco no meio: a luz existia, mas não ATRAVESSAVA material nenhum. O
   espalhamento sob a superfície é o Achado 03 da Linha de Design (a luz entra,
   se espalha dentro e sai difusa) e é o que separa pétala de vidro fosco. */
.painel::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(46% 34% at 50% 50%,
              rgba(255,201,138,.16) 0%,
              rgba(255,201,138,.06) 46%,
              transparent 72%);
  animation: lf-brilho-respira var(--lf-dur-respiro) var(--lf-ease-luz) infinite;
  pointer-events:none;
}
@keyframes lf-brilho-respira{
  0%,100%{ opacity:.70 }
  50%    { opacity:1 }
}
.painel__linha{
  position: relative;
  width: 38%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--lf-luz-forte), transparent);
  filter: blur(.4px);
  box-shadow: 0 0 40px 8px rgba(255,201,138,.34);
  animation: lf-linha-respira var(--lf-dur-respiro) var(--lf-ease-luz) infinite;
}
@keyframes lf-linha-respira{
  0%,100%{ opacity:.62; width:34% }
  50%    { opacity:1;   width:38% }
}

/* ══════════════════════════════════════════════════════════════════
   RECURSOS — três itens, ícone acima do texto (§9, 21/08/2026)
   Grade de três colunas iguais: o olho compara três coisas do mesmo
   peso, então nenhuma pode ser maior que a outra. O que varia é só o
   comprimento da frase, e por isso a medida é travada em ch — sem
   isso a coluna do meio (a mais longa) puxaria a linha de base das
   vizinhas e a fileira perderia o prumo.
   ══════════════════════════════════════════════════════════════════ */
.recursos{
  list-style:none; margin:0; padding:0;
  width:100%;
  margin-top: clamp(44px, 6vh, 88px);
  max-width: 860px;      /* a 1240px a fileira esparramava e os três itens
                            deixavam de ler como um conjunto */
  margin-inline: auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.recurso{
  display:flex; flex-direction:column; align-items:center;
  gap: var(--lf-esp-4);
  text-align:center;
}
.recurso__icone{
  display:grid; place-items:center;
  flex-shrink:0;      /* no empilhamento do celular o ícone é irmão flex do
                         texto e sem isto encolhia de 58 para 34px */
  width:  clamp(58px, 6.2vw, 76px);
  height: clamp(58px, 6.2vw, 76px);
  border-radius: 50%;
  color: var(--lf-branco);
  /* Um halo de vidro fino: dá ao ícone o mesmo assentamento que o
     painel de vidro dava à seção, sem virar caixa. */
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.recurso__icone svg{ width:72%; height:72%; display:block; }
.recurso__texto{
  margin:0;
  max-width: 22ch;
  font-family: var(--lf-fonte-texto);
  font-size: var(--lf-tipo-corpo);
  font-weight: 600;
  line-height: 1.5;
  color: var(--lf-texto-2);
  text-wrap: balance;
}

/* Abaixo de 720px a fileira vira coluna: três frases lado a lado em
   240px cada quebram em cinco linhas e a leitura desmonta. */
@media (max-width: 719px){
  .recursos{
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vh, 40px);
    max-width: 30ch;
    margin-inline: auto;
  }
  .recurso{ flex-direction:row; text-align:left; gap: var(--lf-esp-5); }
  .recurso__texto{ max-width:none; }
}