/* ==========================================================================
   Sistema de design — torredeiluminacao.net
   Base: "white museum gallery at noon" (referência Apple España / Refero)
   Adaptação: a cor cromática única de ação é o vermelho do equipamento,
   não o azul da Apple — copiar o azul brigaria com a fotografia do produto.
   ========================================================================== */

:root{
  /* Superfícies */
  --canvas:#f5f5f7;
  --card:#ffffff;
  --control:#e2e2e5;
  --divider:#d6d6d6;

  /* Texto */
  --obsidian:#1d1d1f;
  --charcoal:#333336;
  --slate:#474747;
  --iron:#707070;
  --void:#000000;

  /* Ação — cor cromática única do sistema (vermelho Revlo, contraste 4.80:1) */
  --action:#e60012;
  --action-hover:#cc0015;
  --link:#cc0015;

  /* Tipografia */
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Helvetica Neue",system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",system-ui,sans-serif;

  --t-caption:12px;   --lh-caption:1.33; --tr-caption:-0.036px;
  --t-body-sm:14px;   --lh-body-sm:1.43; --tr-body-sm:-0.14px;
  --t-body:17px;      --lh-body:1.47;    --tr-body:-0.272px;
  --t-sub:21px;       --lh-sub:1.33;     --tr-sub:0.231px;
  --t-h-sm:28px;      --lh-h-sm:1.14;    --tr-h-sm:-0.252px;
  --t-h:39px;         --lh-h:1.07;       --tr-h:-0.351px;
  --t-h-lg:64px;      --lh-h-lg:1.06;    --tr-h-lg:-0.96px;
  --t-display:96px;   --lh-display:1.04; --tr-display:-1.824px;

  /* Raios — os únicos permitidos no sistema */
  --r-link:10px; --r-card:28px; --r-32:32px; --r-btn-lg:36px; --r-pill:980px;

  /* Layout */
  --page:1440px; --col:980px; --pad-card:28px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--obsidian);
  font-family:var(--text); font-size:var(--t-body); line-height:var(--lh-body);
  letter-spacing:var(--tr-body); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}

/* Elevação vem de contraste de superfície e fio de 1px. Nunca sombra. */

/* ---------- Estrutura ---------- */
.col{max-width:var(--col); margin-inline:auto; padding-inline:22px}
.banda{padding:80px 0 120px}
.banda--branca{background:var(--card)}
.banda--canvas{background:var(--canvas)}
.banda--curta{padding:64px 0 72px}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0}
.display{font-size:clamp(40px,7.4vw,var(--t-display)); line-height:var(--lh-display); letter-spacing:var(--tr-display)}
.h-lg{font-size:clamp(32px,5.2vw,var(--t-h-lg)); line-height:var(--lh-h-lg); letter-spacing:var(--tr-h-lg)}
.h{font-size:clamp(27px,3.4vw,var(--t-h)); line-height:var(--lh-h); letter-spacing:var(--tr-h)}
.h-sm{font-size:var(--t-h-sm); line-height:var(--lh-h-sm); letter-spacing:var(--tr-h-sm)}
.sub{font-family:var(--display); font-weight:600; font-size:var(--t-sub); line-height:var(--lh-sub); letter-spacing:var(--tr-sub)}
p{margin:0 0 20px; max-width:62ch}
.body-sm{font-size:var(--t-body-sm); line-height:var(--lh-body-sm); letter-spacing:var(--tr-body-sm)}
.caption{font-size:var(--t-caption); line-height:var(--lh-caption); letter-spacing:var(--tr-caption); color:var(--slate)}
.kicker{font-size:var(--t-caption); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--obsidian); margin:0 0 18px}
/* A palavra tingida: o tint vive na palavra, não num destaque de fundo. */
.tint{color:var(--action)}
.numeral{font-family:var(--text); font-size:44px; line-height:1; letter-spacing:-0.022em; font-weight:400}

a{color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

/* ---------- Botões: duas pílulas, só isso ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--text); font-size:var(--t-body); font-weight:600; letter-spacing:-0.022em;
  padding:11px 20px; border-radius:var(--r-pill); border:0; cursor:pointer;
  text-decoration:none; transition:background-color .2s ease;
}
.btn--primario{background:var(--action); color:#fff}
.btn--primario:hover{background:var(--action-hover); text-decoration:none}
.btn--neutro{background:var(--control); color:var(--charcoal)}
.btn--neutro:hover{background:var(--divider); text-decoration:none}

/* Pílula de disclosure: fio de 1px, sem preenchimento */
.pill{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 16px; border:1px solid var(--divider); border-radius:var(--r-pill);
  background:transparent; font-family:var(--text); font-size:var(--t-body-sm);
  color:var(--obsidian); cursor:pointer;
}
.pill__mais{font-size:17px; line-height:1; color:var(--obsidian)}

/* ---------- Navegação ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--divider)}
.nav__in{max-width:var(--page); margin-inline:auto; padding:0 22px; height:52px; display:flex; align-items:center; gap:28px}
.nav__logo{display:flex; align-items:center; text-decoration:none}
.nav__logo img{height:20px; width:auto}
.nav__links{display:flex; gap:26px; margin-left:auto; align-items:center; flex-wrap:wrap}
.nav a.nav__l{font-size:var(--t-caption); color:var(--obsidian); text-decoration:none; letter-spacing:-0.01em}
.nav a.nav__l:hover{color:var(--slate)}
.nav__cta{background:var(--action); color:#fff; border-radius:var(--r-pill); padding:6px 14px; font-size:var(--t-caption); font-weight:600; text-decoration:none}
.nav__cta:hover{background:var(--action-hover); text-decoration:none}

.nav__secoes{display:none}

/* Faixa utilitária acima da nav */
.utility{background:var(--canvas); text-align:center; padding:9px 22px; font-size:var(--t-caption); color:var(--obsidian)}

/* ---------- Hero ---------- */
.hero{background:var(--card); padding:56px 0 80px; text-align:left}
.hero__foto{margin:0 auto 36px; width:auto; max-height:min(46vh,420px); max-width:100%}
.hero__acao{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px}
.hero__preco{font-size:var(--t-body-sm); color:var(--obsidian)}


/* ---------- Capa de página: foto ao lado do texto ----------
   A foto de origem é quadrada e o assunto (a torre) é vertical.
   Cortar em faixa larga decapita o mastro, então não se corta:
   a imagem entra inteira, em 1:1, e a composição resolve pelo lado. */
.col--largo{max-width:1200px; margin-inline:auto; padding-inline:22px}
.capa{background:var(--card); padding:52px 0 64px}
.capa__grade{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center}
/* nesta banda o display cede um pouco para caber em 2 linhas ao lado da foto */
.capa .h-lg{font-size:clamp(32px,4.2vw,52px); line-height:1.07; letter-spacing:-0.02em}
.capa__grade>*{min-width:0}   /* sem isto, texto longo estoura a fração da coluna */
.capa__foto{margin:0}
.capa__card{border-radius:var(--r-card); overflow:hidden; background:var(--obsidian); aspect-ratio:1/1}
.capa__card img{width:100%; height:100%; object-fit:cover; display:block}
.capa__rodape{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:12px; flex-wrap:wrap}
.capa__legenda{font-size:var(--t-caption); color:var(--slate); margin:0; max-width:34ch}
.capa__selo{font-size:var(--t-caption); font-weight:600; color:var(--obsidian); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}

@media (max-width:900px){
  .capa{padding:28px 0 48px}
  .capa__grade{grid-template-columns:1fr; gap:32px}
  .capa__foto{order:-1}                 /* a foto abre a página no mobile */
  .capa__card{max-width:520px; margin-inline:auto}
}

/* ---------- Cards ---------- */
.card{background:var(--card); border-radius:var(--r-card); padding:var(--pad-card); overflow:hidden}
.card--foto{padding:0}
.card--foto img{border-radius:var(--r-card) var(--r-card) 0 0; width:100%}
.card__corpo{padding:var(--pad-card)}
.grade{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grade--2{display:grid; gap:20px; grid-template-columns:1fr 1fr}

/* Banda alternada texto/imagem */
.split{display:grid; gap:40px; grid-template-columns:1fr 1fr; align-items:center}
.split--inverso .split__txt{order:2}

/* Lista de especificação com fio */
.specs{list-style:none; margin:0; padding:0; border-top:1px solid var(--divider)}
.specs li{display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--divider); font-size:var(--t-body-sm)}
.specs dt,.specs .rot{color:var(--slate)}
.specs .val{font-weight:600; color:var(--obsidian); text-align:right}

/* Lista de cidades */
.cidades{columns:4; column-gap:24px; list-style:none; padding:0; margin:0}
.cidades li{break-inside:avoid; padding:5px 0; font-size:var(--t-body-sm)}
.uf-titulo{font-family:var(--display); font-weight:600; font-size:var(--t-body-sm); color:var(--slate); margin:22px 0 6px; text-transform:uppercase; letter-spacing:.06em}

/* Rodapé */
.rodape{background:var(--canvas); border-top:1px solid var(--divider); padding:40px 0; font-size:var(--t-caption); color:var(--slate)}
.rodape a{color:var(--slate)}

/* Dado não confirmado — visível no rascunho, barrado no build */
.pendente{background:#fff3f3; border-bottom:1px dashed var(--action); color:var(--action)}

@media (max-width:820px){
  .split,.grade--2{grid-template-columns:1fr}
  .split--inverso .split__txt{order:0}
  .cidades{columns:2}
  .banda{padding:56px 0 72px}
  /* A barra guarda logo + ação; as seções viram uma faixa que rola na horizontal.
     Sem menu em JS: todo link continua alcançável. */
  .nav__in{height:48px; gap:12px}
  .nav__links{margin-left:auto; gap:0; flex-wrap:nowrap}
  .nav__links .nav__l{display:none}
  .nav__secoes{
    display:flex; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; background:var(--card); border-bottom:1px solid var(--divider);
    padding:9px 22px;
  }
  .nav__secoes::-webkit-scrollbar{display:none}
  .nav__secoes a{white-space:nowrap; font-size:var(--t-body-sm); color:var(--obsidian); text-decoration:none}
  .hero{padding:36px 0 60px}
}
@media (max-width:480px){ .cidades{columns:1} }

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ==========================================================================
   Palco do hero — a foto troca conforme a rolagem
   Sem biblioteca. O JS só escreve o progresso (0→1) numa custom property;
   quem anima é o CSS, com opacity e transform (propriedades de compositor).
   ========================================================================== */
@property --p{syntax:'<number>'; inherits:true; initial-value:0}

.palco{background:var(--card)}
.palco__trilho{height:260vh}   /* ~52vh por quadro: troca perceptível sem sequestrar a rolagem */
.palco__fixo{position:sticky; top:52px; height:calc(100vh - 52px); display:flex; align-items:center}
.palco__grade{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; width:100%}
.palco__grade>*{min-width:0}
/* no palco o display cede: precisa caber ao lado da foto sem virar 4 linhas */
.palco .display{font-size:clamp(30px,4.4vw,56px); line-height:1.06; letter-spacing:-0.022em}

.palco__quadros{position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:1/1; background:var(--card)}
.palco__quadro{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s ease}
.palco__quadro img{width:100%; height:100%; object-fit:cover; display:block}
.palco__quadro--produto{background:var(--card)}
.palco__quadro--produto img{object-fit:contain; padding:24px}
.palco__quadro.ativo{opacity:1}

/* barra de progresso: um fio, no espírito do sistema */
.palco__barra{height:1px; background:var(--divider); margin-top:18px; position:relative}
.palco__barra span{position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 100%); background:var(--obsidian)}
.palco__rodape{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:12px; flex-wrap:wrap}
.palco__legenda{font-size:var(--t-caption); color:var(--slate); margin:0; max-width:34ch}
.palco__selo{font-size:var(--t-caption); font-weight:600; color:var(--obsidian); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}

@media (max-width:900px){
  .palco__trilho{height:230vh}
  .palco__fixo{top:96px; height:calc(100vh - 96px); align-items:flex-start; padding-top:16px}
  .palco__grade{grid-template-columns:1fr; gap:24px}
  .palco__foto{order:-1}
  .palco .display{font-size:clamp(30px,7.4vw,42px)}
}

/* Sem rolagem-cinema para quem pediu menos movimento: vira um hero comum. */
@media (prefers-reduced-motion:reduce){
  .palco__trilho{height:auto}
  .palco__fixo{position:static; height:auto; padding:56px 0}
  .palco__quadros{aspect-ratio:1/1}
  .palco__quadro{position:absolute; opacity:0}
  .palco__quadro:first-child{opacity:1}
  .palco__barra{display:none}
}