/* ==========================================================================
   Página "Painel de LED" — reaproveita tokens/fontes/componentes de styles.css
   (site principal). Este arquivo só cobre os componentes específicos desta
   página (hero, benefícios, painéis, planos, objetivos, edição admin).
   ========================================================================== */

.led-hero{ padding:56px var(--gutter) 8px; max-width:900px; }
.led-hero__title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1;
  text-transform:uppercase;
  color:var(--color-blue);
  margin-top:18px;
}
.led-hero__title .is-orange{ color:var(--color-orange); }
.led-hero__text{
  font-family:var(--font-heading);
  font-size:1.05rem;
  line-height:1.6;
  color:var(--color-blue);
  opacity:.85;
  margin-top:16px;
  max-width:62ch;
}
.led-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.led-number{
  display:inline-block;
  font-family:var(--font-display); font-style:italic; font-weight:900;
  font-size:1.6rem; line-height:1; letter-spacing:-.02em;
}

.led-benefits{ padding:40px var(--gutter); }
.led-benefits__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.led-benefit{
  position:relative; overflow:hidden;
  background:#fff; border:1.5px solid #EDEFF3; border-radius:var(--radius-md); padding:24px 22px 22px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  box-shadow:0 8px 20px rgba(41,87,164,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.led-benefit::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
}
.led-benefit:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(41,87,164,.12); }
.led-benefit--orange::before, .led-goal--orange::before{ background:var(--color-orange); }
.led-benefit--blue::before, .led-goal--blue::before{ background:var(--color-blue); }
.led-benefit--cyan::before, .led-goal--cyan::before{ background:var(--color-cyan); }
.led-benefit--orange .led-number{ color:var(--color-orange); }
.led-benefit--blue .led-number{ color:var(--color-blue); }
.led-benefit--cyan .led-number{ color:var(--color-cyan); }
.led-benefit strong{ font-family:var(--font-heading); font-weight:700; color:var(--color-blue); font-size:.95rem; margin-top:8px; }
.led-benefit span{ font-family:var(--font-heading); color:var(--color-blue); opacity:.7; font-size:.85rem; line-height:1.5; }

.led-section-head{ text-align:center; max-width:640px; margin-inline:auto; }
.led-section-head h2{
  font-family:var(--font-display); font-style:italic; font-weight:900;
  font-size:clamp(1.8rem, 3.2vw, 2.4rem); color:var(--color-blue); text-transform:uppercase;
  margin-top:16px; line-height:1.05;
}

.led-panels{ padding:48px var(--gutter); }
.led-panels__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:36px; }
.led-panel-card{
  background:#fff; border:1.5px solid #EDEFF3; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 10px 26px rgba(41,87,164,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.led-panel-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(41,87,164,.14); }
.led-panel-card__photo{
  position:relative; aspect-ratio:16/10; background:#EEF3FB; overflow:hidden;
}
.led-panel-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.led-panel-card:hover .led-panel-card__photo img{ transform:scale(1.05); }
.led-panel-card__photo--empty{ display:flex; align-items:center; justify-content:center; }
.led-panel-card__label{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--color-cyan); color:#fff;
  font-family:var(--font-heading); font-weight:900; font-size:.85rem;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.led-panel-card__body{ padding:22px 26px 26px; }
.led-panel-card h3{
  font-family:var(--font-heading); font-weight:700; color:var(--color-blue);
  font-size:1.15rem;
}
.led-panel-card__specs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.led-spec-tag{
  display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--radius-pill);
  background:var(--color-blue); color:#fff;
  font-family:var(--font-heading); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.02em;
}
.led-spec-tag--alt{ background:var(--color-cyan); }
.led-panel-card__address{ font-family:var(--font-heading); color:var(--color-blue); opacity:.75; font-size:.88rem; margin-top:14px; line-height:1.5; }
.led-panel-card a.led-panel-card__maps{
  margin-top:16px; height:38px; min-width:0; padding:0 6px 0 16px; font-size:.75rem;
}

.led-details{
  list-style:none; margin:36px 0 0; padding:26px 28px; border-radius:var(--radius-md);
  background: var(--color-blue) url('../images/panel-comunicacao-visual-bg.svg') center/cover no-repeat;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 24px;
}
.led-details li{ font-family:var(--font-heading); font-weight:700; color:#fff; font-size:.9rem; display:flex; gap:10px; }
.led-details li::before{ content:'✓'; color:var(--color-cyan); font-weight:900; flex-shrink:0; }

.led-video{ padding:48px var(--gutter); }
.led-video__head{ text-align:center; max-width:640px; margin-inline:auto; }
.led-video__head h2{
  font-family:var(--font-display); font-style:italic; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem, 3.2vw, 2.4rem); color:var(--color-blue); margin-top:14px; line-height:1.05;
}
.led-video__head p{ font-family:var(--font-heading); color:var(--color-blue); opacity:.8; font-size:.95rem; margin-top:12px; }
.led-video__head p strong{ color:var(--color-orange); opacity:1; }
.led-video__panel{
  position:relative; margin-top:32px; max-width:720px; margin-inline:auto;
  background:var(--color-blue); border-radius:var(--radius-xl); aspect-ratio:16/9; overflow:hidden;
}
.led-video__player{ width:100%; height:100%; object-fit:contain; display:block; background:var(--color-blue); }

.led-plans{ padding:48px var(--gutter); }
.led-invest-rate{
  font-family:var(--font-heading); font-weight:700; color:var(--color-orange); font-size:1.1rem; margin-top:10px;
}

.led-simulator{
  max-width:640px; margin:32px auto 0; padding:28px 30px;
  background:#fff; border:1.5px solid #EDEFF3; border-radius:var(--radius-md);
  box-shadow:0 10px 26px rgba(41,87,164,.06);
}
.led-simulator__head{ text-align:center; }
.led-simulator__head strong{
  display:block; font-family:var(--font-heading); font-weight:700; color:var(--color-blue); font-size:1rem;
}
.led-simulator__head span{
  display:block; font-family:var(--font-heading); color:var(--color-blue); opacity:.65; font-size:.82rem; margin-top:4px;
}
.led-simulator__range{
  width:100%; margin:22px 0 6px; appearance:none; height:6px; border-radius:999px;
  background:#E7EDF7; outline:none; cursor:pointer;
}
.led-simulator__range::-webkit-slider-thumb{
  appearance:none; width:20px; height:20px; border-radius:50%; background:var(--color-orange);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(243,116,53,.4); cursor:pointer;
}
.led-simulator__range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--color-orange);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(243,116,53,.4); cursor:pointer;
}
.led-simulator__result{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;
}
.led-simulator__stat{
  display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--radius-sm); background:#F7F9FC;
}
.led-simulator__stat span{ font-family:var(--font-heading); font-weight:700; color:var(--color-blue); opacity:.6; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; }
.led-simulator__stat strong{ font-family:var(--font-heading); font-weight:900; color:var(--color-blue); font-size:1.3rem; }
.led-simulator__stat--total{ background:#FFF3EC; }
.led-simulator__stat--total strong{ color:var(--color-orange); }
.led-simulator__stat--total small{ font-family:var(--font-heading); color:var(--color-orange); opacity:.7; font-size:.68rem; }
.led-plans__scope{
  font-family:var(--font-heading); font-weight:700; color:var(--color-blue); opacity:.6;
  font-size:.82rem; margin-top:12px; line-height:1.5;
}
.led-plans__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:36px; align-items:start; }

.led-plan-column{
  position:relative;
  background:#fff; border:1.5px solid #EDEFF3; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 10px 26px rgba(41,87,164,.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.led-plan-column::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; }
.led-plan-column--cyan::before{ background:var(--color-cyan); }
.led-plan-column--blue::before{ background:var(--color-blue); }
.led-plan-column--combo::before{ background:var(--color-orange); }
.led-plan-column:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(41,87,164,.14); }
.led-plan-column--combo{
  border-color:rgba(243,116,53,.35);
  box-shadow:0 16px 36px rgba(243,116,53,.18);
}
.led-plan-column--combo:hover{ box-shadow:0 24px 46px rgba(243,116,53,.26); }

.led-plan-column__ribbon-wrap{
  position:absolute; top:0; right:0; width:92px; height:92px; overflow:hidden; z-index:2; pointer-events:none;
}
.led-plan-column__ribbon{
  position:absolute; top:18px; right:-26px; width:120px;
  background:var(--color-orange); color:#fff;
  font-family:var(--font-heading); font-weight:700; font-size:.6rem; text-transform:uppercase; letter-spacing:.03em;
  padding:5px 0; text-align:center; white-space:nowrap;
  transform:rotate(45deg);
  box-shadow:0 4px 10px rgba(243,116,53,.35);
}

.led-plan-column__head{ text-align:center; padding:26px 20px 18px; }
.led-plan-column__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; margin-bottom:12px;
  background:var(--color-cyan); color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.led-plan-column--blue .led-plan-column__icon{ background:var(--color-blue); }
.led-plan-column--combo .led-plan-column__icon{ background:var(--color-orange); }
.led-plan-column__head strong{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:900;
  color:var(--color-blue); font-size:1.15rem; text-transform:uppercase; letter-spacing:-.01em;
}
.led-plan-column__sub{
  display:block; font-family:var(--font-heading); font-weight:700; color:var(--color-blue); opacity:.5;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; margin-top:4px;
}

.led-plan-column__body{ padding:0 20px 24px; border-top:1px solid #F0F2F6; }
.led-plan{ padding:16px 2px; border-bottom:1px solid #F0F2F6; border-radius:var(--radius-sm); transition:background .2s ease; }
.led-plan:last-of-type{ border-bottom:0; }
.led-plan--best{ background:#FFF6F0; padding:14px 12px; margin:6px -12px; border-bottom-color:transparent; }
.led-plan__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.led-plan__contract{
  font-family:var(--font-heading); font-weight:700; color:var(--color-blue); opacity:.55;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.03em;
}
.led-plan__tag{
  display:inline-flex; align-items:center; height:20px; padding:0 9px; border-radius:var(--radius-pill);
  background:var(--color-orange); color:#fff;
  font-family:var(--font-heading); font-weight:700; font-size:.6rem; text-transform:uppercase; letter-spacing:.03em;
}
.led-plan__name{ font-family:var(--font-heading); font-weight:700; color:var(--color-blue); font-size:.85rem; margin-top:6px; }
.led-plan__price{ font-family:var(--font-display); font-style:italic; font-weight:900; color:var(--color-orange); font-size:1.55rem; margin-top:8px; }
.led-plan-column--combo .led-plan__price{ color:var(--color-blue); }
.led-plan__price span{ font-family:var(--font-heading); font-style:normal; font-weight:700; font-size:.7rem; color:var(--color-blue); opacity:.6; }
.led-plan__views{ font-family:var(--font-heading); color:var(--color-blue); opacity:.7; font-size:.8rem; margin-top:4px; }

.led-plan-column__checks{ list-style:none; margin:18px 0 0; padding:16px 4px 0; border-top:1px dashed #E4E8F2; display:flex; flex-direction:column; gap:8px; }
.led-plan-column__checks li{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-weight:700; color:var(--color-blue); opacity:.75; font-size:.76rem;
}
.led-plan-column__checks svg{ flex-shrink:0; color:var(--color-cyan); }
.led-plan-column--combo .led-plan-column__checks svg{ color:var(--color-orange); }

.led-plan-column__cta{ width:100%; margin-top:18px; justify-content:center !important; background:var(--color-blue); }

.led-loading{ text-align:center; font-family:var(--font-heading); color:var(--color-blue); opacity:.6; grid-column:1/-1; }

.led-goals{ padding:48px var(--gutter); }
.led-goals__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:36px; }
.led-goal{
  position:relative; overflow:hidden;
  background:#fff; border:1.5px solid #EDEFF3; border-radius:var(--radius-md); padding:24px 22px 22px;
  display:flex; flex-direction:column; align-items:flex-start;
  box-shadow:0 8px 20px rgba(41,87,164,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.led-goal::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.led-goal:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(41,87,164,.12); }
.led-goal--orange .led-number{ color:var(--color-orange); }
.led-goal--blue .led-number{ color:var(--color-blue); }
.led-goal--cyan .led-number{ color:var(--color-cyan); }
.led-goal strong{ display:block; font-family:var(--font-heading); font-weight:900; color:var(--color-blue); text-transform:uppercase; font-size:.95rem; margin-top:12px; }
.led-goal span{ display:block; font-family:var(--font-heading); color:var(--color-blue); opacity:.7; font-size:.88rem; line-height:1.55; margin-top:8px; }

.led-cta{ padding:16px var(--gutter) 56px; }
.led-cta__panel{
  background: var(--color-blue) url('../images/panel-comunicacao-visual-bg.svg') center/cover no-repeat;
  border-radius:var(--radius-xl); padding:56px var(--gutter); text-align:center;
}
.led-cta__title{
  font-family:var(--font-display); font-style:italic; font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem, 4vw, 3rem); color:#fff;
}
.led-cta__title .is-orange{ color:var(--color-orange); }
.led-cta__panel p{ font-family:var(--font-heading); color:rgba(255,255,255,.9); font-size:1rem; margin-top:12px; }
.led-cta__panel .btn-pill{ margin-top:24px; background:#25D366; }

.led-edit-fab{
  position:fixed; bottom:88px; right:20px; z-index:60;
  height:44px; padding:0 18px; border-radius:var(--radius-pill); border:0; cursor:pointer;
  background:var(--color-blue); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:.8rem;
  box-shadow:0 10px 24px rgba(22,35,61,.3);
}
.led-edit-dialog{
  border:0; padding:0; border-radius:var(--radius-lg); width:min(640px, calc(100% - 28px));
  box-shadow:0 30px 100px rgba(0,0,0,.3);
}
.led-edit-dialog::backdrop{ background:rgba(16,26,46,.72); backdrop-filter:blur(4px); }
.led-login-dialog{ width:min(420px, calc(100% - 28px)); }
.led-edit-panel{ padding:36px; position:relative; }
.dialog-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:0; background:#F1F3F8; color:var(--color-blue); font-size:1.2rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.dialog-close:hover{ background:#E4E8F2; }
.led-edit-panel h2{
  font-family:var(--font-display); font-style:italic; font-weight:900; text-transform:uppercase;
  color:var(--color-blue); font-size:1.4rem; margin-top:14px;
}
.led-edit-hint{ font-family:var(--font-heading); color:var(--color-blue); opacity:.7; font-size:.85rem; margin-top:8px; }
.led-edit-textarea{
  width:100%; height:320px; margin-top:16px; padding:14px; border:1.5px solid #D8DEE9; border-radius:var(--radius-sm);
  font-family:'Courier New', monospace; font-size:.8rem; color:var(--color-blue); resize:vertical;
}
.led-edit-error{ display:none; color:#D0392F; font-size:.8rem; font-weight:700; margin-top:10px; }
.led-edit-error.is-visible{ display:block; }
.led-edit-actions{ margin-top:16px; }

@media (max-width:960px){
  .led-benefits__grid{ grid-template-columns:1fr; }
  .led-panels__grid{ grid-template-columns:1fr; }
  .led-details{ grid-template-columns:1fr; }
  .led-plans__grid{ grid-template-columns:1fr; }
  .led-goals__grid{ grid-template-columns:1fr; }
  .led-video__card{ flex-direction:column; align-items:flex-start; }
}