@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
   
   
   * { margin:0; padding:0; box-sizing:border-box; }
    html, body { height:100%; }
    /* evita overflow horizontal global */
html, body { overflow-x: hidden; }

    /* Remova o flex do body para não “centrar” a página inteira */
    body { display:block; font-family: 'Montserrat'; }

    #logo { display:flex; align-items:center; justify-content:center; padding:16px; }
    #logo img { max-width:200px; height:auto; }

    /* Hero em tela cheia */
    #initial-scale{
      min-height:100vh;
      display:flex; align-items:center; justify-content:center;
      background:url('https://i.ibb.co/Z680m6Nf/scandinavian-interior-mockup-wall-decal-background-1.png') no-repeat center center;
      /* Evite fixed (buga em mobile) */
      background-size:cover;  /* use contain se quiser ver 100% da imagem sem cortes */
      padding:24px;
    }

    .imago{
      background:#fff; padding:70px; border-radius:8px; text-align:center;
      display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;
    }
    .imago p:first-of-type{ color:#000; font-family:'Poppins'; letter-spacing:-.03em; line-height:1; font-size:clamp(1.3rem,4vw,2.7rem); font-weight: 400;}
    .imago h1{ color:#f00; font-family:'Montserrat'; font-weight:500; line-height:.9; font-size:clamp(6rem,10vw,9.5rem); }
    .imago p:last-of-type{ color:#333; font-weight:500; font-size:clamp(1rem,2.5vw,1.6rem); margin-bottom:10px; }
    .imago button{ padding:20px 48px; background:#f00; color:#fff; border:0; font-family:'Montserrat'; font-weight:800; cursor:pointer; }
    .imago button a{ color:#fff; text-decoration:none; }

 @media (max-width: 853px) {
  #initial-scale {
    background: url('https://i.ibb.co/N6k4xQ59/mobile1.png') no-repeat center center;
    background-size: cover; /* ou contain se quiser a imagem inteira */
    padding: 0;
    min-height: 60vh;
  }
  #logo img { max-width:100px; height:auto; }

  .imago{
      background:#fff; padding-left: 10px;  padding-right: 10px; padding-bottom:30px; padding-top:30px; border-radius:8px; text-align:center;
      width: 100%;
      border-radius:0;
    }
}


 @media (max-width: 395px) {
  .imago h1{ font-size:clamp(3rem,10vw,9.5rem); }
}

/* ===== Carrossel ===== */
:root{
  --carousel-max-w: 980px;     /* largura máxima da imagem */
  --carousel-radius: 14px;     /* raio dos cantos da imagem */
  --carousel-pad: 28px;        /* respiro da faixa cinza */
  --arrow-size: 42px;          /* tamanho do botão seta */
}

.carousel-wrap{
  width: 100%;
  background:#d9d9d9;          
  padding: var(--carousel-pad) 0;
  margin-top: 50px;
}

.carousel{
  position: relative;
  margin: 0 auto;
  max-width: calc(var(--carousel-max-w) + 120px); /* espaço p/ setas */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.carousel .viewport{
  overflow: hidden;
  width: 100%;
  background:#d9d9d9; 
  max-width: var(--carousel-max-w);
  border-radius: var(--carousel-radius);
}

.carousel .track{
  list-style: none;
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}

.carousel .slide{
  min-width: 100%;
  user-select: none;
}

.carousel img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--carousel-radius);
}

/* Setas */
.carousel .nav{
  position: relative;
  z-index: 2;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border: 0;
  border-radius: 999px;
  background: var(--arrow-bg);
  cursor: pointer;
  color: #FFF;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  transition: background .2s ease, transform .1s ease;
}

.carousel .nav:hover{ background: var(--arrow-bg-hover); }
.carousel .nav:active{ transform: scale(.96); }
.carousel .prev{ order: 0; }
.carousel .next{ order: 2; }

/* Mobile */
@media (max-width: 640px){
  :root{
    --carousel-max-w: 92vw; /* ocupa quase a tela */
    --carousel-pad: 18px;
    --arrow-size: 38px;
  }
}

/* cursor e lightbox */
.carousel .slide img{ cursor: zoom-in; }

.car-lightbox{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.9);
  z-index: 99999;
}
.car-lightbox[hidden]{ display:none; }
.carlb-media{ max-width: 94vw; max-height: 92vh; display:block; }

.carlb-close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border:0; border-radius:50%;
  background: rgba(255,255,255,.18); color:#fff; font-size:22px; cursor:pointer;
}
.carlb-close:hover{ background: rgba(255,255,255,.28); }

.texto-imago {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 50px 20px; /* espaçamento da seção */
  position: relative; /* necessário p/ posicionar a linha */
  z-index: 9999;
}

.texto-imago::before {
  content: "";
  position: absolute;
  top: 50%;                 /* centraliza verticalmente */
  left: 0;
  width: 100%;
  height: 2px;              /* espessura da linha */
  background: #333333;         /* cor da linha fina */
  z-index: 0;               /* atrás do bloco */
}

.texto-imago::after {
  content: "";
  position: absolute;
  top: 50%;                 /* centraliza verticalmente */
  right: 0;                  /* encosta na borda direita do container */
  transform: translateY(-50%) translateX(-50%); /* centraliza verticalmente e desloca metade do próprio width */
  width: 170px;               /* comprimento do trecho mais espesso */
  height: 5px;               /* espessura mais grossa */
  background: #FF0000;           /* cor do trecho final */
  z-index: 0;
}

.texto-imago .conteudo {
  background: #333333;        /* cor de fundo escuro */
  color: #ffffff;             /* texto branco */
  max-width: 800px;           /* largura máxima */
  padding: 50px 60px;         /* espaçamento interno */
  font-family: 'montserrat';
  font-weight: 300;
  font-size: clamp(0.75rem, 2vw, 1.3rem); /* mínimo 16px, cresce até ~21px */
  line-height: 1.6;
  z-index: 1; /* garante que o bloco fique sobre a linha */
}

.texto-imago strong {
  font-weight: 700;
}


/* ===== Faixa ASSINATURA ===== */
.assinatura-wrap {
  position: relative;
  background: transparent;
  margin-top: -36px;                   /* sobreposição com a sessão acima */
  padding: clamp(28px, 5vw, 56px) 0;   /* mantém respiro vertical */
}

/* bloco cinza no wrapper full-width */
.assinatura-wrap::before {
  content:"";
  position:absolute;
  top: -80px;                          /* sobe para invadir um pouco a sessão de cima */
  right: 0;                             /* encosta no lado direito da tela */
  left: clamp(280px, 35vw, 460px);      /* aumenta valor para reduzir a largura do cinza */
  height: clamp(200px, 40vw, 250px);    /* altura responsiva */
  background:#C2C2C2;                   /* cor de fundo cinza */
  z-index: 0;
  pointer-events: none;
}

.assinatura {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end; /* alinha título e linha vermelha na parte de baixo */
  gap: clamp(16px, 4vw, 48px);
  position: relative;
  z-index: 1; /* garante que conteúdo fique acima do cinza */
}

/* título + sublinhado */
.assinatura .title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end; /* força a linha vermelha a ficar embaixo */
}

.assinatura .title h2 {
  font-family: 'Montserrat';
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(1.8rem, 6vw, 4rem);
  color: #3E3D3D;
  line-height: 1.1;
  margin: 0;
}

.assinatura .title .rule {
  display: block;
  width: clamp(5vw, 19vw, 40vw);
  height: 4px;
  background: #e3312d;
  margin-top: 6px; /* pequeno respiro abaixo do texto */
}

/* prêmios à direita */
.assinatura .badges {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 42px);
  padding: 0;
  margin: 0;
  margin-right: 50px;
}

.assinatura .badges li img {
  display: block;
  height: clamp(46px, 9vw, 92px);
  width: auto;
  filter: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* sombra leve */
}

/* ===== Mobile (até 700px) ===== */
@media (max-width: 700px){

  .texto-imago .conteudo {
    padding: 25px 25px;
  }

  /* layout em 1 coluna e centralizado */
  .assinatura{
    grid-template-columns: 1fr;
    justify-items: flex-start;
    gap: clamp(14px, 4vw, 24px);
    margin-top: 20px;
    margin-bottom: 15px;
  }

  /* título central + linha vermelha embaixo */
  .assinatura .title{
    align-items: flex-start;
    text-align: start;
  }
  .assinatura .title h2{
    font-size: clamp(1.5rem, 9vw, 3rem);
    margin: 0;
  }
  .assinatura .title .rule{
    width: min(280px, 75vw); /* comprimento do traço no mobile */
    height: 3px;
    margin-top: 10px;
  }

  /* faixa cinza rasa por trás dos selos */
  .assinatura-wrap{ padding: clamp(20px, 6vw, 34px) 0; }
  .assinatura-wrap::before{
    left: 0;                /* ocupa toda a largura */
    right: 0;
    height: 36px;           /* altura da faixa */
    top: auto;
    bottom: clamp(40px, 12vw, 64px); /* posiciona atrás dos selos */
    background: #C2C2C2;
  }

  /* selos centralizados e por cima da faixa */
  .assinatura .badges{
    width: 100%;
    justify-content: flex-end;
    gap: clamp(10px, 5vw, 18px);
    flex-wrap: wrap;
    align-items: center;
    text-align: end;
  }

  .assinatura .badges li img{
    height: clamp(42px, 14vw, 62px);
  }
}

/* ===== Seção naE ===== */
.sobre-nae{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 56px) 20px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;        /* esquerda maior que direita */
  gap: clamp(18px, 4vw, 48px);
  align-items: start;
  font-family: 'Montserrat', system-ui, sans-serif;
  color:#000;
}

/* textos esquerda */
.sobre-nae .col-esq p{
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  margin: 0 0 14px 0;
    color:#000;
}

/* topo direita */
.sobre-nae .col-dir .nota{
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.55;
  margin: 0 0 16px 0;
  color:#000;
}

/* card escuro */
.sobre-nae .card-escuro{
  background:#3a3a3a;
  color:#fff;
  padding: clamp(16px, 3.2vw, 24px);
  max-width: 420px;            /* mantém o bloco compacto como no layout */
}
.sobre-nae .card-escuro .card-title{
  margin: 0 0 4px 0;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
}
.sobre-nae .card-escuro .card-text{
  margin: 0;
  font-weight: 300;
  color:#e9e9e9;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.5;
}

/* responsivo: empilha no mobile */
@media (max-width: 820px){
  .sobre-nae{
    grid-template-columns: 1fr;
  }
  .sobre-nae .card-escuro{ max-width: 100%; }
}

/* Botão centralizado */
.botao-centro{
  display: flex;
  justify-content: center;
}

.btn-estudio{
  display: inline-block;
  background: #FF0000;
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.65rem, 1.2vw, 0.95rem);
  padding: 20px 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== Bastidores ===== */
.bastidores{
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: clamp(24px,6vw,64px) auto;
  padding: 0 20px 0 clamp(150px, 15vw, 210px); /* empurra o título para depois do quadrado */
  display: flex;
  align-items: center;                         /* centraliza verticalmente */
  gap: clamp(16px, 4vw, 40px);
  font-family: 'Montserrat', system-ui, sans-serif;
  min-height: clamp(150px, 20vw, 240px);      /* = altura do .decor */
  text-align: left;
}

/* quadrado cinza colado na borda esquerda do viewport */
.bastidores .decor{
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);                     /* ancora na borda esquerda */
  width: clamp(250px, 30vw, 420px);
  height: clamp(150px, 20vw, 240px);
  background: #3a3a3a;
  z-index: 0;
  pointer-events: none;
}

/* bloco do título (texto + linha) centralizado no eixo vertical */
.bastidores .title{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;                    /* centro vertical do conjunto */
  align-items: flex-start;
}

.bastidores .title h2{
  margin: 0;
  font-weight: 600;
  letter-spacing: .02em;
  color: #FF0000;
  font-size: clamp(1.5rem, 6vw, 4.3rem);
  text-transform: uppercase;
  line-height: 1;
}

.bastidores .title .rule{
  width: clamp(100px, 18vw, 220px);
  height: 2px;
  background: #3E3D3D;
  margin-top: clamp(8px,1.5vw,14px);
}

/* ===== Bastidores – MOBILE ===== */
@media (max-width: 560px){
  .bastidores{
    --sq: 92px;                               /* tamanho do quadrado */
    max-width: 100%;
    padding: 0 16px 0 calc(var(--sq) + 14px); /* empurra o título após o quadrado */
    min-height: var(--sq);                    /* altura = quadrado */
    align-items: center;
    gap: 12px;
  }

  .bastidores .decor{
    left: 0;                  /* cola na borda esquerda */
    width: var(--sq);
    height: var(--sq);
    background: #c9c9c9;      /* cinza mais claro, como no mock */
  }

  .bastidores h2{
    font-size: clamp(1.1rem, 8.2vw, 1.8rem);
    line-height: 1.05;
  }

  .bastidores h2::after{
    width: 60%;               /* sublinhado mais curto */
    height: 3px;
    margin-top: 8px;
    margin-left: 0;           /* alinha à esquerda do texto */
    margin-right: 0;
  }
}

/* ===== CTA Ímago ===== */
.cta-imago{
  font-family: 'Montserrat';
  margin: clamp(24px,6vw,56px) 0;
}

/* faixa escura */
.cta-head{
  background:#3a3a3a;
  color:#fff;
  text-align:center;
  padding: clamp(14px,3.5vw,26px) 12px;
}
.cta-head h2{
  margin:0;
  font-weight:200;
  letter-spacing:.02em;
  font-size: clamp(1.1rem, 3.6vw, 2.2rem);
}

/* container dos botões */
.cta-actions{
  max-width: 1100px;
  margin: clamp(18px,4vw,28px) auto;
  padding: 0 20px;
  display:flex;
  gap: 0;            /* botões colados como no mock */
}

/* botões */
.btn-cta{
  margin-top: 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 24px 32px;
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing:.04em;
  font-weight:600;
  font-size: clamp(.8rem, 1.8vw, .95rem);
  line-height:1;
}

.btn-red{  background:#ff0000; color:#fff; border-radius: 2px 0 0 2px;}
.btn-dark{ background:#3a3a3a; color:#fff; border-radius: 0 2px 2px 0;}

.btn-cta:hover{ filter: brightness(1.05); }

/* linha fina com trecho vermelho à direita */
.cta-divider{
  position: relative;
  height: 2px;
  margin: clamp(24px,5vw,36px) auto 0;
  max-width: 100%;
  background:#d6d6d6;
}
.cta-divider::after{
  content:"";
  position:absolute;
  right: 4%;
  top: 0;
  height: 2px;
  width: 22%;
  background:#ff2d2d;
}

@media (max-width: 560px){
  .cta-actions {
    flex-direction: column;
    align-items: center; /* centraliza os botões */
    font-weight: 700;
    font-family: 'montserrat';
  }

  .btn-cta {
    width: 80%;           /* largura proporcional menor */
    max-width: 300px;     /* limite máximo */
    padding: 14px 20px;   /* menos padding para altura mais proporcional */
    text-align: center;
  }

  .btn-red {
    border-radius: 2px 2px 0 0;
    margin-top: 5px;
  }

  .btn-dark {
    border-radius: 0 0 2px 2px;
    background-color: #C2C2C2;
    color: #000000;
    margin-top: 10px;
  }
}

/* ===== Section: OS PISOS ===== */
.sec-pisos{
  max-width: 1100px;
  margin: clamp(24px,6vw,60px) auto;
  padding: 0 20px;
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* Cabeçalho com linhas finas atrás */
.sec-pisos__head{
  position: relative;
  display: flex;
  margin-bottom: clamp(14px,3vw,22px);
}

.sec-pisos__head h2{
  padding: 12px 32px;
  background: #3E3D3D;                /* tarja escura */
  color: #fff;
  font-weight: 400;
  letter-spacing: .03em;
  font-size: clamp(1.6rem, 3.3vw, 1.7rem);
}

/* ===== carrossel (sem setas) ===== */
.pisos-viewport{ overflow:hidden; width:100%; border-radius:6px; }
.pisos-track{ list-style:none; display:flex; will-change:transform; transition:transform .45s ease; }
.pisos-slide{ position:relative; min-width:100%; user-select:none; }
.pisos-slide img{ display:block; width:100%; height:auto; border-radius:6px;}

/* etiqueta */
.pisos-label{
  position:absolute; left: 30%; bottom:clamp(12px,2.8vw,22px); transform:translateX(-50%);
  background:#cfcfcf; color:#333; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  padding:12px 28px; box-shadow:0 8px 18px rgba(0,0,0,.18);
  font-size: clamp(0.75srem, 3vw, 0.75rem);
  font-family: 'Montserrat';
}

/* ===== Mobile (empilha e centraliza) ===== */
@media (min-width: 820px){
  .pisos-label {
    font-size: 2em;
  }

}

/* dots */
.pisos-dots{ display:none; justify-content:center; gap:8px; margin-top:12px; }
.pisos-dots button{
  width:8px; height:8px; border-radius:999px; border:0; background:#cfcfcf; cursor:pointer;
}
.pisos-dots button[aria-selected="true"]{ background:#333; }


.pisos-viewport{
  overflow: hidden;
  width: 100vw;       /* ocupa a largura toda da viewport */
  margin-left: calc(50% - 50vw); /* truque p/ alinhar à esquerda */
  border-radius: 0;   /* remove cantos arredondados */
}

.pisos-slide img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* cursor de “zoom” */
.pisos-slide img{ cursor: zoom-in; }

/* Lightbox */
.img-lightbox{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.9);
  z-index: 99999;
}
.img-lightbox[hidden]{ display: none; }
.imglb-media{ max-width: 94vw; max-height: 92vh; display:block; }
.imglb-close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border:0; border-radius:50%;
  background: rgba(255,255,255,.18); color:#fff; font-size:22px; cursor:pointer;
}
.imglb-close:hover{ background: rgba(255,255,255,.28); }

/* ===== Finalização ===== */

/* linhas superior e inferior (com trechos vermelhos) */
.finalizacao::before,
.finalizacao::after{
  content:"";
  display:block;
  height:1px;
  background: var(--line);
  position: relative;
}

.finalizacao::before{
  /* trecho vermelho no topo, à direita */
  box-shadow: calc(100% - 160px) 0 0 0 var(--accent);   /* ajusta 160px conforme deseja */
}

.finalizacao::after{
  /* trecho vermelho na base, à esquerda */
  box-shadow: 160px 0 0 0 var(--accent);
}

/* card branco */
.final-card{
  background:#fff;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--card-pad);
}

/* grid desktop */
.final-grid{
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: clamp(16px, 5vw, 48px);
  margin-bottom: 15px;
}

/* logo */
.brand-logo{
  display:block;
  width: clamp(150px, 22vw, 240px);
  height:auto;
}

/* endereço */
.addr{
  margin: 0;
  font-style: normal;
  color:#8d8d8d;
  font-weight: 500;
  line-height: 1.6;
  font-size: clamp(0.65rem, 1.8vw, 1.25rem);
}

/* ===== Mobile (empilha e centraliza) ===== */
@media (max-width: 680px){
  .final-grid{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .brand-logo{
    margin-inline: auto;
    width: clamp(140px, 22vw, 200px);
  }
  .pisos-slide img{
    width: 150%;
}

}


/* ===== Carrossel Reels 9:16 ===== */
.reels-car{ max-width:1100px; margin:24px auto; padding:0 16px; }
.reels-viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.reels-viewport::-webkit-scrollbar{ height:0; } /* sem barra visível */

.reels-track{ display:flex; gap:16px; padding:4px 2px; }

.reels-item{
  flex:0 0 auto;
  width:clamp(200px, 28vw, 320px);  /* não é 100vw/vh */
  aspect-ratio:9/16;                /* Reels */
  scroll-snap-align:center;
}

marker {
  display: none;
}

.reel-btn{
  all:unset; display:block; width:100%; height:100%;
  border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.reel-thumb{
  width:100%; height:100%; display:block;
  object-fit:cover; background:#000;
}

/* ===== Lightbox (9:16, sem ocupar 100% do viewport) ===== */
.reel-lightbox{
  display:none; position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.9); place-items:center; overflow:hidden;
}
.reel-lightbox.is-open{ display:grid; }

.rlb-player{
  aspect-ratio:9/16;
  height:min(92dvh, 840px);  /* limita a altura máxima */
  max-width:94vw;           /* nunca chega a 100vw */
  width:auto;
  background:#000; border-radius:16px; object-fit:cover;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

.rlb-close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff; font-size:22px; cursor:pointer;
}
.rlb-close:hover{ background:rgba(255,255,255,.28); }

/* Reels: zera marcadores e recuos do UL/LI */
.reels-track{
  list-style: none;
  margin: 0;
  padding: 0;
}
.reels-item{
  list-style: none;
}