/* =========================================================
   I'CLUB — Iguatemi Bosque · v2
   Reprodução do layout SCI-0007-25_LANDPAGE_1440x4080px.pdf.

   Todas as medidas abaixo estão em PIXELS DO PDF (tela de 1440)
   e são multiplicadas por --u, que vale 1px a 1440 e encolhe
   proporcionalmente abaixo disso. Acima de 1440 a tela fica fixa.
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/playfairdisplay-var-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/playfairdisplay-var-latin-ext.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';src:url('../assets/fonts/figtree-var-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';src:url('../assets/fonts/figtree-var-latin-ext.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  /* --u vale 1px a 1440 e encolhe proporcionalmente abaixo disso.
     A medida vem da largura REAL do container (cqw), não da viewport:
     em iframes/painéis o 100vw pode reportar a viewport de layout e não
     o espaço visível, o que faria a página transbordar na horizontal. */
  --u:min(1px, calc(100vw / 1440));

  --tinta:#69512A;          /* títulos, itens e rótulos */
  --tinta-nav:#111111;
  --linha:#927F65;          /* conectores da tabela */
  --prata:#909090;
  --ouro:#D59F21;
  --diamante:#3A4654;
  --gold-busca:#FCC40F;
  --papel:#FFFFFF;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  /* a serifa do layout é ~27% mais estreita que a Playfair Display;
     compensamos condensando no eixo X e subindo o peso para manter a cor do traço */
  --cond:.725;
  --sans:'Figtree','Helvetica Neue',Arial,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);line-height:1.3;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;container-type:inline-size;
}
.pagina{--u:min(1px, calc(100vw / 1440));overflow-x:clip}
@supports (container-type:inline-size){
  .pagina{--u:min(1px, calc(100cqw / 1440))}
}
/* as faixas de imagem sangram na largura total; o conteúdo fica travado
   na tela de 1440 do layout, centralizado */
.tela{max-width:calc(1440 * var(--u));margin-inline:auto}
/* container mais estreito — mesma largura da faixa de categorias (1216) */
.tela--curta{max-width:calc(1216 * var(--u))}
img{display:block;max-width:100%;height:auto}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse}
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-200%);background:#241C11;color:#fff;padding:.7rem 1.1rem;border-radius:6px;font-size:14px;font-weight:600;transition:transform .2s}
.skip:focus{transform:none}
:where(a,button):focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* ===================== CABEÇALHO (h 77) ===================== */
.topo{background:var(--papel)}
.topo__area{
  display:flex;align-items:center;
  height:calc(77 * var(--u));
  padding-inline:calc(176 * var(--u)) calc(176 * var(--u));
}
.topo__logo{margin-right:auto}
.topo__logo img{width:calc(163 * var(--u))}
.menu{display:flex;align-items:center;gap:calc(15 * var(--u))}
.menu ul{display:flex;align-items:center;gap:calc(14.6 * var(--u))}
.menu a{
  font-size:calc(14 * var(--u));font-weight:400;color:var(--tinta-nav);
  white-space:nowrap;transition:color .2s;
}
.menu a:hover{color:var(--tinta)}
.busca{
  display:grid;place-items:center;flex:none;
  width:calc(35 * var(--u));height:calc(35 * var(--u));
  border-radius:50%;background:var(--gold-busca);color:#fff;
  transition:filter .2s;
}
.busca svg{width:calc(16 * var(--u));height:calc(16 * var(--u));stroke-width:2.2}
.busca:hover{filter:brightness(1.08)}
.topo__btn{display:none}

/* ===================== HERO (h 620) ===================== */
.hero img{
  width:100%;height:calc(620 * var(--u));
  object-fit:cover;object-position:50% 50%;
}

/* ===================== BOAS-VINDAS ===================== */
.abre{text-align:center}
.abre__titulo{
  font-family:var(--serif);font-weight:600;font-size:calc(66 * var(--u));
  line-height:calc(70 * var(--u));color:var(--tinta);
  padding-top:calc(128 * var(--u));
}
/* o scaleX é só visual: a linha ainda é medida pela largura cheia, por isso o
   nowrap — sem ele o título quebra dentro do container de 1216 */
.abre__titulo span,.cat__titulo span,.ben__titulo span,.passos__titulo span{
  display:inline-block;transform:scaleX(var(--cond));white-space:nowrap;
}
/* O título de abertura é largo: dentro dos 1216 ele caberia condensado, mas a
   linha é medida ANTES do scaleX. Os span viram bloco com a largura compensada
   (100% / --cond) e voltam ao centro pela margem negativa; assim uma linha
   inteira cabe e o eixo continua o mesmo das outras seções. */
.abre__titulo span{
  display:block;
  width:calc(100% / var(--cond));
  margin-left:calc((100% - 100% / var(--cond)) / 2);
}
.abre__titulo br{display:none}
.abre__sub{
  font-size:calc(35.6 * var(--u));line-height:calc(58 * var(--u));font-weight:400;
  color:var(--tinta);padding-top:calc(31 * var(--u));
}
.lojas{
  display:flex;justify-content:center;align-items:center;
  gap:calc(57 * var(--u));padding-top:calc(58 * var(--u));
}
.loja img{width:calc(293 * var(--u));height:auto}
.loja{transition:transform .2s}
.loja:hover{transform:translateY(-2px)}

/* ===================== COMO FUNCIONA ===================== */
.passos{
  display:grid;grid-template-columns:calc(553 * var(--u)) 1fr;
  column-gap:calc(55 * var(--u));
  padding:calc(144 * var(--u)) 0 0;
}
.passos__foto{margin:0}
.passos__foto img{
  width:calc(553 * var(--u));height:calc(500 * var(--u));object-fit:cover;
  border-radius:calc(126 * var(--u)) 0 calc(126 * var(--u)) 0;
}
.passos__titulo{
  font-family:var(--serif);font-weight:600;font-size:calc(63 * var(--u));line-height:1;
  color:var(--tinta);margin-top:calc(-13 * var(--u));
}
.passos__titulo span{transform-origin:left}
.lista{padding-top:calc(26 * var(--u))}
.lista__item h3{font:inherit}
.lista__btn{
  display:flex;align-items:center;gap:calc(9 * var(--u));
  width:100%;text-align:left;padding:calc(15.5 * var(--u)) 0;
  /* reduzido a pedido (PDF: 41) — a entrelinha de 45 é mantida
     para o passo entre itens continuar igual ao layout */
  font-size:calc(28 * var(--u));font-weight:600;line-height:calc(45 * var(--u));
  color:var(--tinta);
}
.lista__ico{
  width:calc(18 * var(--u));height:calc(11 * var(--u));flex:none;
  stroke-width:2.1;transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.lista__btn[aria-expanded="true"] .lista__ico{transform:rotate(180deg)}
.lista__painel{display:grid;grid-template-rows:1fr}
.js .lista__painel{grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
.js .lista__painel.aberto{grid-template-rows:1fr}
.lista__txt{overflow:hidden;min-height:0}
.lista__txt p{
  padding:calc(14 * var(--u)) 0 calc(10 * var(--u));
  padding-top: 0;
  /* reduzido a pedido (PDF: 27,5 / 33) */
  font-size:calc(18 * var(--u));line-height:calc(28 * var(--u));
  font-weight:300;color:var(--tinta);
}

/* ===================== CATEGORIAS ===================== */
.cat{text-align:center}
.cat__titulo{
  font-family:var(--serif);font-weight:600;font-size:calc(69 * var(--u));line-height:1;
  color:var(--tinta);padding-top:calc(123 * var(--u));
}
.cat__faixa{padding-top:calc(58 * var(--u))}
.cat__faixa img{width:calc(1216 * var(--u));height:calc(481 * var(--u));margin-inline:auto}

/* ===================== BENEFÍCIOS ===================== */
.ben{text-align:center}
.ben__titulo{
  font-family:var(--serif);font-weight:600;font-size:calc(51 * var(--u));line-height:1;
  color:var(--tinta);padding-top:calc(47 * var(--u));
}
.grade{
  width:calc(1216 * var(--u));margin:calc(59 * var(--u)) 0 0;
  table-layout:fixed;text-align:left;
}
.grade thead th{padding:0 0 calc(38 * var(--u))}
.grade tbody th,.grade tbody td{padding:0;height:calc(49 * var(--u))}

/* colunas: 644 | 250 | 243 | 145  (soma 1282) */
.grade th:nth-child(1),.grade td:nth-child(1){width:calc(578 * var(--u))}
.grade th:nth-child(2),.grade td:nth-child(2){width:calc(250 * var(--u))}
.grade th:nth-child(3),.grade td:nth-child(3){width:calc(243 * var(--u))}
.grade th:nth-child(4),.grade td:nth-child(4){width:calc(145 * var(--u))}

.selo,.pip{
  display:inline-grid;place-items:center;
  height:calc(31 * var(--u));border-radius:calc(16 * var(--u));
  box-shadow:0 0 0 calc(5 * var(--u)) var(--papel);
}
.selo{
  width:calc(145 * var(--u));
  font-size:calc(15 * var(--u));font-weight:500;letter-spacing:calc(2.6 * var(--u));
  text-transform:uppercase;color:#fff;text-indent:calc(2.6 * var(--u));
}
.selo--p{background:var(--prata)}
.selo--o{background:var(--ouro)}
.selo--d{background:var(--diamante)}
.pip{width:calc(145 * var(--u))}
.pip--p{background:var(--prata)}
.pip--o{background:var(--ouro)}
.pip--d{background:var(--diamante)}

/* rótulo alinhado à direita, terminando em x=496 */
.grade tbody th{
  position:relative;text-align:right;vertical-align:middle;
  padding:0 calc(148 * var(--u)) calc(16 * var(--u)) 0;
  font-size:calc(20.5 * var(--u));font-weight:400;color:var(--tinta);
  white-space:nowrap;
}
/* conector contínuo de x=450 até x=1216; as pílulas cobrem os trechos ocupados */
.grade tbody tr{position:relative}
.grade tbody th::after{
  content:'';position:absolute;top:calc(24 * var(--u));
  left:calc(450 * var(--u));width:calc(766 * var(--u));height:calc(1 * var(--u));
  background:var(--linha);
}
.grade tbody td{position:relative;z-index:1}

/* nota de regulamento — acompanha a largura da grade */
.ben__nota{
  width:calc(1216 * var(--u));margin:calc(46 * var(--u)) 0 0;
  font-size:calc(15 * var(--u));line-height:calc(24 * var(--u));
  color:var(--tinta);text-align:left;
}
.ben__link{
  color:var(--tinta);text-decoration:underline;
  text-underline-offset:calc(3 * var(--u));
  text-decoration-thickness:calc(1 * var(--u));
  transition:color .25s ease,text-decoration-color .25s ease;
}
.ben__link:hover,.ben__link:focus-visible{color:var(--ouro)}

/* ===================== APP (h 587) ===================== */
.app{position:relative;margin-top:calc(100 * var(--u))}
.app img{
  width:100%;height:calc(587 * var(--u));
  object-fit:cover;object-position:50% 50%;
}
/* áreas clicáveis sobre os botões de loja desenhados na arte (2000x587).
   A arte é centralizada e recortada pelo object-fit:cover, e a escala vertical
   é sempre --u; por isso a posição vem do centro da faixa, em unidades do layout. */
.app__area{
  position:absolute;top:76.75%;translate:-50% -50%;
  width:calc(154 * var(--u));height:calc(50 * var(--u));
  border-radius:calc(10 * var(--u));
}
.app__area--ios{left:calc(50% - 475.5 * var(--u))}
.app__area--android{left:calc(50% - 294.5 * var(--u))}
.app__area:hover{box-shadow:0 0 0 2px rgba(255,255,255,.6)}

/* ===================== MOBILE ===================== */
@media (max-width:767px){
  :root,.pagina{--u:calc(100vw / 390)}
  @supports (container-type:inline-size){
    .pagina{--u:calc(100cqw / 390)}
  }

  .topo__area{height:calc(64 * var(--u));padding-inline:calc(20 * var(--u))}
  .topo__logo img{width:calc(132 * var(--u))}
  .topo__btn{
    display:inline-flex;align-items:center;gap:calc(8 * var(--u));color:var(--tinta-nav);
    font-size:calc(11 * var(--u));font-weight:700;letter-spacing:calc(1.4 * var(--u));text-transform:uppercase;
  }
  .topo__btn-barras{display:grid;gap:calc(4 * var(--u));width:calc(18 * var(--u))}
  .topo__btn-barras i{display:block;height:calc(1.5 * var(--u));background:currentColor;border-radius:2px;transition:transform .3s,opacity .2s}
  .topo__btn[aria-expanded="true"] i:first-child{transform:translateY(calc(5.5 * var(--u))) rotate(45deg)}
  .topo__btn[aria-expanded="true"] i:nth-child(2){opacity:0}
  .topo__btn[aria-expanded="true"] i:last-child{transform:translateY(calc(-5.5 * var(--u))) rotate(-45deg)}

  .topo{position:relative}
  .menu{
    position:absolute;top:100%;left:0;right:0;z-index:50;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papel);box-shadow:0 8px 14px rgba(0,0,0,.09);
    padding-inline:calc(20 * var(--u));
  }
  .js .menu{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .35s,visibility .35s}
  .js .menu.aberto{max-height:calc(520 * var(--u));visibility:visible}
  .menu ul{flex-direction:column;align-items:stretch;gap:0}
  .menu a{display:block;padding:calc(14 * var(--u)) 0;border-bottom:1px solid #E7E0D4;font-size:calc(15 * var(--u))}
  .busca{width:calc(38 * var(--u));height:calc(38 * var(--u));margin:calc(16 * var(--u)) 0}
  .busca svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}


  .hero img,.app img{height:auto;object-fit:contain}

  /* duas linhas fixas: "Bem-vindos ao Programa de Benefícios" / "do Iguatemi Bosque."
     o nowrap é necessário porque o scaleX é visual — sem ele o texto quebra
     pela largura cheia, antes de ser condensado */
  .abre__titulo{font-size:calc(23 * var(--u));line-height:calc(29 * var(--u));padding:calc(52 * var(--u)) calc(20 * var(--u)) 0}
  .abre__sub{font-size:calc(19 * var(--u));line-height:calc(26 * var(--u));padding:calc(20 * var(--u)) calc(20 * var(--u)) 0}
  .lojas{gap:calc(16 * var(--u));padding-top:calc(26 * var(--u))}
  .loja img{width:calc(140 * var(--u))}

  .passos{
    grid-template-columns:1fr;row-gap:calc(34 * var(--u));
    padding:calc(62 * var(--u)) calc(20 * var(--u)) 0;
  }
  .passos__foto img{width:100%;height:calc(300 * var(--u));border-radius:calc(64 * var(--u)) 0 calc(64 * var(--u)) 0}
  .passos__titulo{font-size:calc(32 * var(--u));padding-top:0}
  .lista{padding-top:calc(18 * var(--u))}
  .lista__btn{font-size:calc(20 * var(--u));gap:calc(10 * var(--u));padding:calc(13 * var(--u)) 0}
  .lista__ico{width:calc(16 * var(--u));height:calc(16 * var(--u))}
  .lista__txt p{font-size:calc(15 * var(--u));line-height:calc(22 * var(--u));padding:calc(2 * var(--u)) 0 calc(12 * var(--u)) calc(26 * var(--u))}

  .cat__titulo{font-size:calc(32 * var(--u));padding-top:calc(58 * var(--u))}
  .cat__faixa{padding-top:calc(24 * var(--u))}
  .cat__faixa img{width:100%;height:auto;object-fit:contain}

  .ben__titulo{font-size:calc(32 * var(--u));padding-top:calc(58 * var(--u))}
  .grade{width:calc(350 * var(--u));margin:calc(26 * var(--u)) auto 0;table-layout:fixed}
  .grade th:nth-child(1),.grade td:nth-child(1){width:calc(158 * var(--u))}
  .grade th:nth-child(2),.grade td:nth-child(2),
  .grade th:nth-child(3),.grade td:nth-child(3),
  .grade th:nth-child(4),.grade td:nth-child(4){width:calc(64 * var(--u))}
  .grade thead th{padding-bottom:calc(14 * var(--u))}
  .grade tbody th,.grade tbody td{height:calc(42 * var(--u))}
  .grade tbody th{
    text-align:left;padding-right:calc(8 * var(--u));white-space:normal;
    font-size:calc(12 * var(--u));line-height:1.3;
  }
  .grade tbody th::after{display:none}
  .selo,.pip{width:calc(58 * var(--u));height:calc(20 * var(--u));border-radius:calc(10 * var(--u));box-shadow:none}
  .selo{font-size:calc(7.5 * var(--u));letter-spacing:calc(.6 * var(--u));text-indent:calc(.6 * var(--u))}
  .grade tbody td{text-align:center}
  .ben__nota{
    width:calc(350 * var(--u));margin:calc(24 * var(--u)) auto 0;
    font-size:calc(12 * var(--u));line-height:calc(19 * var(--u));
  }

  .app__area{top:73.5%;height:9%;translate:none;width:auto}
  .app__area--ios{left:10.3%;width:19%}
  .app__area--android{left:29.1%;width:21.5%}
  .app__area{min-height:44px}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}