/* ==========================================================
   Estilos exclusivos da landing page de lançamento (Casa Palmier)
   Não afeta nenhuma página do site principal.
========================================================== */

/* seções adjacentes com cores de fundo próximas (bg-stone/bg-paper) deixam uma
   linha fina visível na costura por causa de arredondamento de sub-pixel do
   navegador; a seção seguinte sobrepõe 1px pra cobrir essa costura */
.lp-tour-section { margin-top: -1px; position: relative; z-index: 1; }

/* botão do WhatsApp da landing page: mesmo tamanho do botão "voltar ao topo" */
.wa-float { width: 42px; height: 42px; right: 20px; }
.wa-float svg { width: 23px; height: 23px; }

/* botão flutuante "voltar ao topo", só no mobile (página é longa e a rolagem cansa) */
.lp-scroll-top {
  display: none;
  position: fixed;
  bottom: 82px;
  right: 20px;
  z-index: 90;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--seal);
  color: var(--paper);
  border: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.lp-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 760px) {
  .lp-scroll-top { display: flex; }
}

/* header minimalista: sem nav, só a marca centralizada */
.lp-header .wrap { justify-content: center; }
.lp-header .nav-toggle { display: none; }

/* grupo de dois CTAs lado a lado */
.lp-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}

/* plantas baixas giradas 90°, formato em pé (legenda fica fora do quadro girado)
   o quadro usa a proporção exata da imagem já girada, então a imagem preenche
   100% do quadro sem sobra e sem cortar nada (cqw/cqh referenciam o próprio
   quadro, permitindo inverter largura/altura antes de girar) */
.lp-rotate-frame {
  aspect-ratio: 765 / 1813;
  overflow: hidden;
  container-type: size;
  position: relative;
}
.lp-rotate-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* título ocupa toda a largura útil no desktop (JS de balanceamento só limpa inline style, não sobrescreve classe) */
.lp-architect .section-head h2.lp-architect-title { max-width: none; }
.lp-architect .section-head { margin-bottom: 0; }

/* seção da arquiteta: texto em cima, vídeo embaixo, tudo à esquerda */
.lp-architect-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
.lp-architect-video .floorplan-card { background: rgba(28,26,23,.05); color: var(--ink); border-color: var(--line); }
.lp-pull-quote {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.32;
  color: var(--ink);
  margin: 26px 0 0;
}
.lp-credential {
  font-size: 15.5px;
  line-height: 1.7;
  opacity: 0.75;
  color: var(--ink);
}

/* FAQ em acordeão */
.lp-faq-item {
  padding: 24px 0;
  border-top: 1px dashed var(--line);
}
.lp-faq-item:first-child { border-top: none; }
.lp-faq-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.lp-faq-item h3 { font-size: 17px; margin: 0; }
.lp-faq-item p { font-size: 14.5px; opacity: 0.72; margin-top: 14px; text-wrap: wrap; }
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.lp-faq-item .num-row { display: flex; align-items: center; gap: 14px; margin: 0; }
.lp-faq-item .num-badge {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--seal); color: var(--paper);
  font-size: 12px; font-weight: 700;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.lp-faq-item[open] summary::after { content: "+"; transform: rotate(45deg); }

/* divisores do bloco "como uma casa nasce" precisam de contraste em fundo claro */
.lp-sello-section .process-divider { background: var(--line); }
.lp-sello-section .process-row .num-badge { background: var(--seal); color: var(--paper); }
.lp-quality-section .process-divider { background: var(--line); }
.lp-quality-section .process-row .num-badge { background: var(--seal); color: var(--paper); }
@media (max-width: 760px) {
  .lp-sello-section .process-list { border-bottom-color: var(--line); }
  .lp-sello-section .process-row { border-top-color: var(--line); }
  .lp-quality-section .process-list { border-bottom-color: var(--line); }
  .lp-quality-section .process-row { border-top-color: var(--line); }
}

/* eyebrow, título e texto da seção de localização, alinhados à esquerda no desktop */
@media (min-width: 761px) {
  .lp-location-title { text-align: left; }
  .lp-location-title .eyebrow { justify-content: flex-start; }
  .lp-location-title p { margin-left: 0; margin-right: 0; }
}

/* legendas dos carrosséis sempre centralizadas */
.moment-carousel .moment-track figcaption { text-align: center; margin-left: auto; margin-right: auto; }

/* carrosséis com setas em texto (abaixo da imagem) + miniaturas reais como navegação,
   no formato do site de referência (sofiacampobelo.com.br) */
.lp-thumb-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "track track track"
    "prev  gap   next"
    "thumbs thumbs thumbs";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}
.lp-thumb-carousel .moment-track { grid-area: track; }
.lp-thumb-carousel .carousel-btn.prev { grid-area: prev; justify-self: start; }
.lp-thumb-carousel .carousel-btn.next { grid-area: next; justify-self: end; }
.lp-thumb-carousel .carousel-dots { grid-area: thumbs; }

.lp-thumb-carousel .carousel-btn {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.lp-thumb-carousel .carousel-btn:hover {
  background: none;
  border: none;
  color: var(--seal);
  opacity: 1;
}

.lp-thumb-carousel .carousel-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
}
.lp-thumb-carousel .carousel-dots button {
  all: unset;
  flex-shrink: 0;
  width: 72px;
  height: 48px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.lp-thumb-carousel .carousel-dots button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-thumb-carousel .carousel-dots button:hover { opacity: 0.75; }
.lp-thumb-carousel .carousel-dots button.is-active { opacity: 1; }
@media (max-width: 760px) {
  .lp-thumb-carousel .carousel-dots button { width: 56px; height: 38px; }
}

/* miniaturas do carrossel de plantas: as imagens de origem são rotacionadas
   90deg para exibição vertical (mesma técnica do .lp-rotate-frame principal),
   então as miniaturas também precisam de caixa vertical + a mesma rotação */
.lp-floorplan-carousel .carousel-dots button {
  width: 30px;
  height: 72px;
  container-type: size;
  position: relative;
}
.lp-floorplan-carousel .carousel-dots button img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
}
@media (max-width: 760px) {
  .lp-floorplan-carousel .carousel-dots button { width: 24px; height: 56px; }
}

/* carrossel "onde fica": no mobile mantém a caixa compacta padrão do site;
   no desktop ocupa a largura toda e mostra a imagem inteira, sem cortar nada */
.lp-location-carousel { max-width: 640px; margin: 0 auto; }
@media (min-width: 761px) {
  .lp-location-carousel { max-width: none; margin: 0; }
  /* altura fixa (em vez de auto) evita que uma foto isolada com proporção mais alta
     "estique" a altura de todo o carrossel; object-fit:contain ainda mostra a
     imagem inteira, sem cortar nada, apenas com faixas vazias quando necessário */
  .lp-location-carousel .moment-track img { aspect-ratio: auto; height: 600px; object-fit: contain; background: rgba(28,26,23,.04); }
}

/* fachadas: mostrar do céu ao piso, cortando as laterais se preciso */
.lp-piece-carousel .moment-track img { aspect-ratio: 4 / 3; object-position: center; }
@media (min-width: 761px) {
  .lp-piece-carousel .moment-track img { height: 600px; object-position: center 30%; }
  .lp-quality-carousel .floorplan-card { width: 100%; height: 600px; aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .lp-quality-carousel .floorplan-card { width: 100%; height: 350px; aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .lp-piece-carousel .moment-track img { height: 350px; object-position: top; }
  .lp-location-carousel .moment-track img { aspect-ratio: auto; height: 350px; }
}

/* seção "O processo": sem linha divisória antes do primeiro item nem depois do último */
.process-list > .process-divider:first-child,
.process-list > .process-divider:last-child { display: none; }

/* plantas humanizadas: carrossel sem caixa/borda, só a imagem e a legenda centralizada */
.lp-floorplan-carousel figcaption { text-align: center; }

/* no mobile, a imagem principal dos carrosséis, as plantas humanizadas e o tour 360°
   ocupam toda a largura da seção (sangram até a borda da tela); setas e miniaturas
   dos carrosséis continuam dentro da faixa de texto padrão, sem sangrar */
@media (max-width: 760px) {
  .lp-thumb-carousel .moment-track {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .tour-360-wrap {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .tour-360-wrap .tour-360-frame { border-radius: 0; }

  /* o tour em si já preenche visualmente a seção; sem conteúdo abaixo dele, o
     padding-bottom padrão da seção sobra como espaço em branco */
  .lp-tour-section { padding-bottom: 0; }
}

.lp-hero { padding-bottom: 80px; }

/* headline da hero ocupa a faixa útil da seção no desktop */
h1.lp-hero-h1 { max-width: 16ch; margin-top: 20px; font-weight: 400; }
@media (min-width: 761px) {
  h1.lp-hero-h1 { max-width: none; }
}

/* imagem de fundo da hero: no mobile mostra do topo, no desktop sobe mais pra
   revelar a mesa da área externa; overlay mais leve que o padrão do site */
.lp-hero .page-hero-media { background-position: center top; }
.lp-hero .page-hero-media::after { background: linear-gradient(180deg, rgba(28,26,23,0.4), rgba(28,26,23,0.3)); }
@media (min-width: 761px) {
  .lp-hero .page-hero-media { background-position: center 62%; }
}

@media (max-width: 760px) {
  .lp-hero { min-height: 100svh; min-height: 100dvh; display: flex; align-items: flex-end; padding-bottom: 105px; overflow: visible; }
  .lp-hero .page-hero-media {
    top: calc(-1 * env(safe-area-inset-top, 0px));
    height: calc(100% + env(safe-area-inset-top, 0px));
  }
  .lp-hero .page-hero-content { padding-left: 10px; padding-right: 10px; }
  /* tamanho ajustado para caber em exatas 3 linhas na versão mobile */
  h1.lp-hero-h1 { max-width: none; font-size: 33px; }
  .lp-architect-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-architect-content { text-align: center; }
  .lp-cta-group { flex-direction: column; align-items: center; }
  .spec-columns { gap: 11.79px; }
  .lp-cta-group .btn { text-align: center; width: 300px; }
  .lp-faq-title { text-align: center; }
  .process-list { border-bottom: none; }
  .process-list > .process-divider:first-child + .process-row { border-top: none; }
  .process-list > .process-row:has(+ .process-divider:last-child) { padding-bottom: 0; }
  .lp-quality-text { text-align: center; }
  .diff-card { padding-top: 25px; padding-bottom: 25px; }
}