/* =====================================================================
   SOLUÇÕES — "a diferença está na luz". Fotos reais de cada ambiente
   nas 3 temperaturas de cor. O painel de controle é tratado como
   objeto físico: placa de alumínio escovado com interruptor de
   gangorra e amostras de difusor acrílico iluminadas por trás.
   Usado só em solucoes.html.
   ===================================================================== */

.luz-demo{
  padding: var(--s-1) 0 var(--secao);
  background: var(--aluminio);
  color: var(--tinta);
}

.luz-demo-head{
  max-width: 680px;
  margin-bottom: var(--s-4);
}
.luz-demo-head .kicker{ margin-bottom: var(--s-1); }
.luz-demo-head h2{
  font-size: var(--fs-h2);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin-bottom: var(--s-2);
}
.luz-demo-head p{
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta);
  max-width: 52ch;
  margin: 0;
}

.luz-demo-body{
  display: grid;
  gap: var(--s-4);
  align-items: start;
}

.pframe-col{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

/* abas de ambiente — controle segmentado */
.ambiente-tabs{
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  background: var(--aluminio-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 2px rgba(20,35,32,.14), inset 0 -1px 0 rgba(255,255,255,.6);
}
.ambiente-tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), box-shadow var(--t-medio) var(--ease);
}
.ambiente-tab:hover{ color: var(--tinta); }
.ambiente-tab.is-active{
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(20,35,32,.16), 0 4px 12px -4px rgba(20,35,32,.24);
}

/* o quadro fica escuro de propósito, feito uma TV na parede */
.pframe{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--verde-3);
  box-shadow: 0 0 0 1px rgba(20,35,32,.22), var(--sombra-3);
}

.pimg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .7s ease;
}
.pimg-off{ z-index: 1; }
.pimg-on{ z-index: 2; }
/* qual foto aparece (ambiente + cor + ligado/desligado) é decidido no JS */
.pimg.is-shown{ opacity: 1; }

/* =====================================================================
   PAINEL DE CONTROLE — placa de alumínio escovado
   ===================================================================== */
.luz-controls{
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.14) 2px 3px, rgba(20,35,32,.01) 3px 4px),
    linear-gradient(170deg, #FCFBF8 0%, #F0EEE8 55%, #E6E3DA 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--linha), var(--sombra-2);
}

.luz-control-group .label{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta);
  margin-bottom: var(--s-2);
}

/* ---------- interruptor de gangorra ---------- */
.luz-switch-row{
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.luz-switch{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 20px;
  -webkit-tap-highlight-color: transparent;
}
.luz-switch:focus-visible{ outline: 2px solid var(--verde); outline-offset: 4px; }

.luz-switch-plate{
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 112px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 1px, rgba(255,255,255,.2) 1px 2px, rgba(20,35,32,.025) 2px 3px),
    linear-gradient(165deg, #F7F8F9 0%, #DDE1E5 50%, #C9CED4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(20,35,32,.10),
    0 0 0 1px rgba(20,35,32,.14),
    0 2px 3px rgba(20,35,32,.14),
    0 16px 30px -12px rgba(20,35,32,.45);
}

/* LED indicador — o pingo aceso do "i" do logo */
.luz-switch-plate::before{
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #9AA2AA;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.85);
  transition: background .25s ease, box-shadow .35s ease;
}
.luz-switch.is-on .luz-switch-plate::before{
  background: var(--luz-nucleo);
  box-shadow: 0 0 0 1px rgba(246,176,79,.9), 0 0 8px 2px rgba(246,176,79,.95), 0 0 20px 5px rgba(246,176,79,.5);
}

/* a tecla: desligada, a metade de baixo afunda; ligada, a de cima */
.luz-switch-knob{
  width: 44px;
  height: 70px;
  margin-top: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F4F5 44%, #D3D8DD 56%, #E3E7EA 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 3px rgba(20,35,32,.10),
    0 0 0 1px rgba(20,35,32,.16),
    0 6px 8px -4px rgba(20,35,32,.35);
  transform: perspective(240px) rotateX(-14deg);
  transition: transform .16s cubic-bezier(.3,.7,.2,1.3), background .16s ease, box-shadow .16s ease;
}
.luz-switch.is-on .luz-switch-knob{
  background: linear-gradient(180deg, #D3D8DD 0%, #E3E7EA 44%, #F2F4F5 56%, #FFFFFF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 2px 3px rgba(20,35,32,.10),
    0 0 0 1px rgba(20,35,32,.16),
    0 -2px 6px -3px rgba(20,35,32,.25);
  transform: perspective(240px) rotateX(14deg);
}
.luz-switch:active .luz-switch-knob{ filter: brightness(.97); }

.luz-switch-state{
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta-2);
  transition: color var(--t-rapido) var(--ease);
}
.luz-switch-state.is-on{ color: var(--tinta); }

/* ---------- amostras de difusor acrílico ---------- */
.swatches{ display: grid; gap: 6px; }

.swatch-item{
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 14px 8px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), box-shadow var(--t-medio) var(--ease);
}
.swatch-item:hover{ background: rgba(255,255,255,.65); }
.swatch-item.is-active{
  background: var(--papel);
  border-color: var(--linha);
  box-shadow: var(--sombra-2);
}

.swatch-dot{
  position: relative;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--amostra);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 -6px 12px rgba(20,35,32,.08),
    0 0 0 1px rgba(20,35,32,.12),
    0 2px 4px rgba(20,35,32,.12);
  transition: box-shadow var(--t-medio) var(--ease);
}
/* a fita acesa por trás do acrílico */
.swatch-dot::after{
  content: "";
  position: absolute;
  left: 7px; right: 7px;
  top: 50%;
  height: 10px;
  margin-top: -5px;
  border-radius: 6px;
  background: var(--amostra-luz);
  filter: blur(5px);
  opacity: .45;
  transition: opacity var(--t-medio) var(--ease);
}
/* o fosco do acrílico, com reflexo no canto */
.swatch-dot::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.2) 42%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 45%);
}
.swatch-item.is-active .swatch-dot{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 0 0 1px rgba(20,35,32,.12),
    0 0 20px 2px var(--amostra-brilho),
    0 2px 4px rgba(20,35,32,.12);
}
.swatch-item.is-active .swatch-dot::after{ opacity: 1; }

.swatch-quente{ --amostra: #F7D5A3; --amostra-luz: #FFAE3D; --amostra-brilho: rgba(255,170,60,.6); }
.swatch-neutro{ --amostra: #F3ECE0; --amostra-luz: #FFE1B0; --amostra-brilho: rgba(255,215,160,.6); }
.swatch-fria{ --amostra: #DEEAF5; --amostra-luz: #B7DAFF; --amostra-brilho: rgba(140,195,255,.6); }

.swatch-text{ display: flex; flex-direction: column; gap: 2px; }
.swatch-name{ font-size: 15px; font-weight: 600; line-height: 1.2; }
.swatch-k{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) and (max-width: 979px){
  .luz-controls{
    grid-template-columns: auto 1fr;
    gap: var(--s-6);
    padding: var(--s-4);
  }
}

@media (min-width: 980px){
  .luz-demo-body{
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--s-5);
  }
  .luz-controls{
    margin-top: 60px;
    padding: var(--s-4);
  }
}