/* =========================================================
   Select Sleep Premium — landing page
   Paleta: preto · branco · dourado (usado com parcimônia)
   ========================================================= */

:root{
  --ink:        #0a0a0a;
  --ink-2:      #121212;
  --ink-3:      #1c1c1c;
  --line:       rgba(255,255,255,.10);
  --line-dark:  rgba(10,10,10,.10);

  --white:      #ffffff;
  --bone:       #f7f5f2;
  --bone-2:     #efece6;
  /* brilho dourado das seções claras (ver body::before) */
  --brilho:     radial-gradient(90% 70% at 85% 20%, rgba(198,161,91,.16), transparent 60%);

  --gold:       #c6a15b;
  --gold-soft:  #e0c58c;
  --gold-deep:  #9c7c3e;

  --txt-dark:   #14140f;
  --txt-mute-d: #5d5b55;
  --txt-light:  #f4f2ee;
  --txt-mute-l: rgba(244,242,238,.62);

  --wa:         #25d366;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;

  --shell: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --r: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bone);
  color:var(--txt-dark);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
}

/* Brilho preso à tela, atrás de todas as seções claras (que têm fundo
   transparente): acompanha a rolagem sem emenda entre uma seção e outra.
   position:fixed em vez de background-attachment:fixed, que o iPhone ignora. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:var(--brilho);
  pointer-events:none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--gold); color:var(--ink); }

/* ---------- layout ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block: clamp(72px, 10vw, 128px); }
.section--dark{
  background:var(--ink);
  color:var(--txt-light);
}
.section--dark h2,
.section--dark h3{ color:var(--white); }

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h2{ font-size:clamp(1.9rem, 4vw, 3rem); }
h3{ font-size:1.25rem; letter-spacing:0; }
h4{ font-size:.95rem; font-family:var(--sans); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

p{ margin:0 0 1.1em; }

.eyebrow{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:26px; height:1px;
  background:var(--gold);
  vertical-align:middle;
  margin-right:12px;
  opacity:.8;
}

em{ font-style:italic; }

.sec-head{ max-width:660px; margin-bottom:clamp(40px,6vw,68px); }
.sec-head__lead{ color:var(--txt-mute-d); font-size:1.05rem; }
.section--dark .sec-head__lead{ color:var(--txt-mute-l); }

/* ---------- botões ---------- */
.btn{
  --bg:transparent; --fg:currentColor; --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px;
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--fg);
  border-radius:var(--r);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn .ico{ width:18px; height:18px; flex:none; }
.btn--lg{ padding:17px 34px; }
.btn--block{ width:100%; }

.btn--gold{ --bg:var(--gold); --fg:var(--ink); --bd:var(--gold); }
.btn--gold:hover{ --bg:var(--gold-soft); --bd:var(--gold-soft); transform:translateY(-2px); }

.btn--ghost{ --bg:transparent; --fg:var(--white); --bd:rgba(255,255,255,.35); }
.btn--ghost:hover{ --bg:rgba(255,255,255,.08); --bd:rgba(255,255,255,.7); transform:translateY(-2px); }

.link{
  display:inline-block;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-deep);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.section--dark .link,
.brands__note .link{ color:var(--gold); }
.link:hover{ border-color:currentColor; }

/* ---------- header ---------- */
.header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* O fundo e o desfoque ficam nesta camada, não no .header: backdrop-filter no
   próprio header prenderia o menu (position:fixed) dentro da altura da barra. */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:transparent;
  transition:background .4s var(--ease);
}
.header.is-stuck::before{
  background:rgba(10,10,10,.88);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.header.is-stuck{ border-bottom-color:var(--line); }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  min-height:78px;
}
.header.is-stuck .header__inner{ min-height:66px; }

.brand{ display:flex; align-items:center; color:var(--white); }
.brand__logo{
  width:auto;
  height:clamp(26px, 3.4vw, 34px);
  filter:brightness(1.22);
  transition:height .4s var(--ease), opacity .3s var(--ease);
}
.brand:hover .brand__logo{ opacity:.85; }
.header.is-stuck .brand__logo{ height:clamp(24px, 3vw, 30px); }
.brand--footer .brand__logo{ height:38px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav > a{
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  position:relative; padding-block:6px;
  transition:color .3s var(--ease);
}
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav > a:not(.btn):hover{ color:var(--white); }
.nav > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ padding:11px 22px; }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:22px; height:1.5px; background:var(--white);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  background:var(--ink);
  color:var(--txt-light);
  overflow:hidden;
  padding-block:130px 90px;
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.72; filter:grayscale(.15) contrast(1.03);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(198,161,91,.16), transparent 58%),
    radial-gradient(80% 70% at 6% 88%, rgba(198,161,91,.08), transparent 60%),
    /* escurece o suficiente para o texto branco ficar legível sobre a foto */
    linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.9) 100%),
    linear-gradient(90deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.15) 62%, transparent 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hero__inner{ position:relative; z-index:2; max-width:920px; }

.hero__title{
  font-size:clamp(2.6rem, 6.4vw, 5rem);
  line-height:1.05;
  color:var(--white);
  margin-bottom:.35em;
}
.hero__title em{
  font-style:italic;
  color:var(--gold);
}
.hero__lead{
  max-width:58ch;
  font-size:clamp(1rem, 1.5vw, 1.12rem);
  color:var(--txt-mute-l);
  font-weight:300;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.hero__scroll{
  position:absolute; left:50%; bottom:30px; z-index:3;
  transform:translateX(-50%);
  width:1px; height:56px;
  background:linear-gradient(var(--gold), transparent);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:var(--gold);
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ---------- faixa de marcas ---------- */
.strip{
  border-block:1px solid var(--line-dark);
  padding-block:clamp(34px,4.5vw,52px);
}
.strip__label{
  margin:0 0 clamp(18px,2.4vw,28px);
  text-align:center;
  font-size:1.1rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-mute-d);
}

.logos{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:clamp(14px,1.6vw,20px);
  /* tamanho de todos os logos juntos: diminui nas telas menores (ver abaixo) */
  --escala:.92;
}
.logos__item{ display:flex; }
.logos__item img{
  width:calc(var(--w,120px) * var(--escala)); height:auto; max-height:56px;
  object-fit:contain;
  opacity:.72;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
/* King Koil e Simmons, as marcas principais, ficam um pouco maiores */
.logos__item--destaque img{ width:calc(var(--w,120px) * var(--escala) * 1.12); }
/* telas médias: tudo encolhe junto para os logos seguirem numa linha só.
   Ao acrescentar uma marca, confira se a faixa ainda cabe em uma linha
   em cada uma destas larguras. */
@media (max-width: 1240px){ .logos{ --escala:.8; } }
@media (max-width: 1100px){ .logos{ --escala:.7; } }
@media (max-width: 960px){  .logos{ --escala:.6; } }
/* tablet e celular: duas linhas de quatro. Cada logo encolhe para caber
   na sua coluna, então nunca sobra um sozinho na linha de baixo */
@media (max-width: 820px){
  .logos{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
    justify-items:center; gap:22px 14px; --escala:.8;
  }
  .logos__item, .logos__link{ max-width:100%; }
  .logos__item img{ max-width:100%; }
}
/* o nome da marca fica só para leitores de tela e para o script achar a marca */
.logos__item span{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* marca clicável: o botão envolve o logo inteiro */
.logos__link{
  display:flex; align-items:center;
  padding:4px; background:none; border:0; cursor:pointer;
}
.logos__link:hover img{ opacity:1; transform:translateY(-2px); }
.logos__link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.logos__cta{ display:none; }

/* ---------- sobre ---------- */
.about{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(40px,6vw,86px);
  align-items:center;
}
.about__media{ position:relative; }
.frame{
  margin:0;
  position:relative;
  aspect-ratio:4/5;
  background:
    linear-gradient(145deg, #1d1d1d 0%, #0e0e0e 100%);
  border:1px solid var(--line-dark);
  overflow:hidden;
}
.frame::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(198,161,91,.16), transparent 70%);
}
.frame::after{
  content:""; position:absolute; inset:14px; z-index:2;
  border:1px solid rgba(198,161,91,.22);
  pointer-events:none;
}
/* fotos e vídeos empilhados: só o .is-atual aparece, os outros esmaecem */
.frame img,
.frame video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.2);
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s var(--ease), transform 6s var(--ease);
}
.frame img.is-atual,
.frame video.is-atual{ opacity:1; transform:none; }
.about__text p{ color:var(--txt-mute-d); font-weight:300; }
.about__text strong{ color:var(--txt-dark); font-weight:500; }
.about__text em{ color:var(--gold-deep); font-style:italic; }

.checks{ margin:0 0 34px; display:grid; gap:12px; }
.checks li{
  position:relative; padding-left:30px;
  font-size:.93rem; color:var(--txt-mute-d); font-weight:300;
}
.checks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:14px; height:7px;
  border-left:1.5px solid var(--gold-deep);
  border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(-45deg);
}

.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:20px;
  padding-top:30px;
  border-top:1px solid var(--line-dark);
}
.stat strong{
  display:block;
  font-family:var(--serif); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:500;
  color:var(--gold-deep); line-height:1;
}
.stat--txt{ letter-spacing:.04em; }
.stat span{
  display:block; margin-top:8px;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-mute-d);
}

/* ---------- produtos ---------- */
/* ---------- cards expansíveis ---------- */
.cards{
  --gap: clamp(12px, 1.6vw, 20px);
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
  /* sem align-items: os cards de uma mesma linha ficam com altura igual */
}

.card{
  /* três por linha (seis cards = duas fileiras completas); o card aberto ocupa a
     linha inteira e os outros se reorganizam. O -0.5px evita que arredondamento
     de subpixel jogue o terceiro card pra baixo. */
  flex:1 1 calc((100% - 2 * var(--gap)) / 3 - 0.5px);
  min-width:0;
  background:var(--white);
  border:1px solid var(--line-dark);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), flex-basis .5s var(--ease);
}
.card:hover{ border-color:rgba(198,161,91,.55); }

/* Com um card aberto, os cinco restantes se estreitam e cabem numa fileira só.
   Em telas menores eles continuam em três por linha, senão ficariam espremidos. */
@media (min-width: 1081px){
  .cards:has(.card.is-open) .card:not(.is-open){
    flex-basis:calc((100% - 4 * var(--gap)) / 5 - 0.5px);
  }
}

.card.is-open{
  flex-basis:100%;
  order:-1;
  border-color:rgba(198,161,91,.6);
  box-shadow:0 30px 70px -40px rgba(10,10,10,.55);
}

/* --- cabeçalho clicável --- */
.card__head{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
  padding:26px 16px 22px;
  background:none; border:0;
  text-align:center;
  cursor:pointer;
  transition:background .35s var(--ease);
}
.card__head:hover{ background:rgba(198,161,91,.06); }
.card__head:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; }

.card__ico{
  display:grid; place-items:center;
  width:54px; height:54px; flex:none;
  border:1px solid rgba(198,161,91,.45);
  border-radius:50%;
  color:var(--gold-deep);
  transition:transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.card__ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.card__head:hover .card__ico{ transform:scale(1.06); border-color:var(--gold); }

.card__title{
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:1.2;
  color:var(--txt-dark);
  flex:1;
}

/* o "+" que vira "×" */
.card__toggle{
  position:relative;
  width:16px; height:16px; flex:none;
  opacity:.5;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.card__toggle::before,
.card__toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--gold-deep);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.card__toggle::before{ width:14px; height:1.5px; }
.card__toggle::after{ width:1.5px; height:14px; }
.card__head:hover .card__toggle{ opacity:1; }

/* --- estado aberto: cabeçalho vira barra horizontal --- */
.card.is-open .card__head{
  flex-direction:row;
  text-align:left;
  gap:18px;
  padding:22px clamp(18px,2.4vw,32px);
  border-bottom:1px solid var(--line-dark);
}
.card.is-open .card__ico{
  background:var(--ink); border-color:var(--ink); color:var(--gold);
}
.card.is-open .card__title{ font-size:2rem; }
/* o "+" gira 45° e vira "×" */
.card.is-open .card__toggle{ opacity:1; transform:rotate(45deg); }

/* --- painel que abre --- */
.card__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.card.is-open .card__panel{ grid-template-rows:1fr; }
.card__panel > .card__panel-in{ overflow:hidden; }

.card__panel-in > *{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s var(--ease) .15s, transform .4s var(--ease) .15s;
}
.card.is-open .card__panel-in > *{ opacity:1; transform:none; }

.card__lead{
  margin:0;
  padding:24px clamp(18px,2.4vw,32px) 0;
  font-size:1.02rem;
  color:var(--txt-mute-d);
  max-width:70ch;
}
.card__cta{
  display:inline-block;
  margin:0 clamp(18px,2.4vw,32px) 28px;
}

/* ---------- carrossel ---------- */
.carousel{ padding:22px clamp(18px,2.4vw,32px); }

.carousel__palco{ overflow:hidden; }
.carousel__trilho{
  display:flex;
  transition:transform .55s var(--ease);
}
.carousel__slide{
  flex:0 0 100%;
  min-width:0;
  opacity:.25;
  transition:opacity .45s var(--ease);
}
.carousel__slide.is-atual{ opacity:1; }

/* Desktop: foto à esquerda, texto à direita */
@media (min-width: 861px){
  .carousel__slide{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:clamp(24px,3.2vw,48px);
    align-items:start;
  }
  .carousel .carousel__info{ padding-top:6px; }
}

.carousel__foto{
  margin:0;
  position:relative;
  /* proporção das fotos dos fabricantes; object-fit:contain
     mostra a imagem inteira — as fichas técnicas têm texto */
  aspect-ratio:10/7;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(198,161,91,.14), transparent 70%),
    linear-gradient(145deg,#191919,#0b0b0b);
  overflow:hidden;
}
.carousel__foto::after{
  content:"foto em breve";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(198,161,91,.45);
}
/* com foto: fundo branco, igual ao das imagens */
.carousel__foto:has(img),
.carousel__foto:has(video){
  background:var(--white);
  border:1px solid var(--line-dark);
}
.carousel__zoom{
  position:absolute; inset:0; z-index:1;
  display:block;
  background:var(--white);
  cursor:zoom-in;
}
.carousel__zoom img{
  width:100%; height:100%; object-fit:contain;
}
/* foto de ambiente marcada com preencher:true — ocupa o quadro todo */
.carousel__zoom img.is-preencher,
.carousel__thumb img.is-preencher{ object-fit:cover; }
.carousel__zoom::after{
  content:"ampliar";
  position:absolute; right:10px; bottom:10px;
  padding:5px 10px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); background:rgba(10,10,10,.78);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.carousel__zoom:hover::after,
.carousel__zoom:focus-visible::after{ opacity:1; }
.carousel__zoom:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }

/* vídeo do produto: inteiro no quadro (vídeos de celular são verticais),
   com as sobras escuras para não parecer foto cortada */
.carousel__video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  background:#0b0b0b;
}

/* miniaturas: Foto → Foto 2 → Produto → Especificações */
.carousel__thumbs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:10px;
}
.carousel__thumb{
  width:72px; aspect-ratio:10/7;
  padding:0;
  background:var(--white);
  border:1px solid var(--line-dark);
  cursor:pointer;
  opacity:.55;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.carousel__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.carousel__thumb--video{ position:relative; background:#0b0b0b; }
.carousel__thumb--video video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.carousel__thumb--video::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform:translate(-35%,-50%);
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--white);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.carousel__thumb:hover{ opacity:1; }
.carousel__thumb.is-atual{ opacity:1; border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.carousel__thumb:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.carousel__info .carousel__medidas{
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--gold-deep);
  border-top:1px solid var(--line-dark);
  padding-top:.9em;
}

.carousel__info{ padding-top:20px; }
.carousel__info h4{
  font-family:var(--serif);
  font-size:1.35rem; font-weight:500;
  letter-spacing:0; text-transform:none;
  color:var(--txt-dark);
  margin-bottom:.35em;
}
.carousel__info p{
  font-size:.93rem;
  color:var(--txt-mute-d);
  max-width:64ch;
  margin-bottom:.9em;
}

.carousel__nav{
  display:flex; align-items:center; gap:10px;
  margin-top:22px;
}
.carousel__seta{
  display:grid; place-items:center;
  width:50px; height:50px; flex:none;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:50%;
  color:var(--gold);
  box-shadow:0 6px 18px -6px rgba(10,10,10,.45);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.carousel__seta svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.carousel__seta:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:scale(1.06); }
.carousel__seta:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.carousel__pontos{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; flex:1 1 0; min-width:0; }
.carousel__ponto{
  width:26px; height:4px;
  padding:0;
  background:rgba(10,10,10,.22);
  border:0; border-radius:99px;
  cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.carousel__ponto.is-atual{ background:var(--gold); width:44px; }
.carousel__ponto:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.carousel--unico .carousel__slide{ opacity:1; }
.carousel--unico .carousel__info{ padding-top:24px; }
/* com um produto só, o CTA do card já cobre — evita dois links iguais */
.carousel--unico .carousel__info .link{ display:none; }
/* foto de ambiente (sem ficha técnica): ocupa a largura toda do card,
   preenche o quadro sem faixas brancas e o texto vai embaixo */
.carousel--largo .carousel__slide{ display:block; }
.carousel--largo .carousel__foto{ aspect-ratio:16/9; }
.carousel--largo .carousel__zoom img{ object-fit:cover; }
.carousel--largo .carousel__info p,
.card:has(.carousel--largo) .card__lead{ max-width:none; }

.carousel__vazio{
  margin:0; padding:20px 0;
  font-size:.92rem; color:var(--txt-mute-d);
}

/* ---------- passos ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.step{
  background:var(--bone);
  padding:36px 30px 40px;
  position:relative;
  transition:background .4s var(--ease);
}
.step:hover{ background:var(--white); }
.step__n{
  display:block;
  font-family:var(--serif);
  font-size:2.2rem;
  color:var(--gold);
  line-height:1;
  margin-bottom:18px;
}
.step h3{ font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:.02em; }
.step p{ margin:0; font-size:.9rem; color:var(--txt-mute-d); }

.quote{
  margin:clamp(48px,7vw,80px) auto 0;
  max-width:760px;
  text-align:center;
  padding:0 var(--pad);
}
.quote p{
  font-family:var(--serif);
  font-size:clamp(1.35rem,3vw,1.95rem);
  line-height:1.4;
  font-style:italic;
  color:var(--txt-dark);
}
.quote cite{
  font-style:normal;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}

/* ---------- cta / formulário ---------- */
.cta{
  color:var(--txt-dark);
  position:relative;
  /* sem overflow:hidden — o painel do dropdown não pode ser cortado */
}
.cta__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(40px,6vw,80px);
  align-items:start;
}
.cta__text p{ color:var(--txt-mute-d); font-weight:300; max-width:46ch; }

.contact-list{ display:grid; gap:20px; margin-top:36px; }
.contact-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-list__ico{
  display:grid; place-items:center;
  width:40px; height:40px; flex:none;
  border:1px solid rgba(156,124,62,.4);
  border-radius:50%;
  color:var(--gold-deep);
}
.contact-list__ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.contact-list strong{
  display:block;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500; margin-bottom:3px;
}
.contact-list span{ font-size:.94rem; color:var(--txt-mute-d); font-weight:300; }
.contact-list a span{ transition:color .3s var(--ease); border-bottom:1px solid transparent; padding-bottom:1px; }
.contact-list a:hover span{ color:var(--gold-deep); border-bottom-color:rgba(156,124,62,.5); }

.form{
  background:var(--white);
  border:1px solid var(--line-dark);
  padding:clamp(26px,3.4vw,40px);
  display:grid;
  gap:18px;
}
.field{ display:grid; gap:8px; }
.field--row{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:18px; }
.field--row > div{ display:grid; gap:8px; }

.form label{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-mute-d); font-weight:500;
}
.form input,
.form textarea,
.form select{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid rgba(10,10,10,.18);
  border-radius:0;
  padding:11px 0;
  color:var(--txt-dark);
  font-size:.95rem;
  transition:border-color .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.form textarea{ resize:vertical; min-height:70px; }
.form input::placeholder,
.form textarea::placeholder{ color:rgba(10,10,10,.32); }
.form input:focus,
.form textarea:focus,
.form select:focus{ outline:none; border-bottom-color:var(--gold); }
.form input.is-invalid{ border-bottom-color:#e06767; }

.select{ position:relative; }
.select::after{
  content:""; position:absolute; right:4px; top:50%;
  width:7px; height:7px;
  border-right:1.4px solid var(--gold-deep);
  border-bottom:1.4px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
  pointer-events:none;
  z-index:2;
}
/* Fallback sem JS: o select nativo continua usável */
.form select option{ background:var(--white); color:var(--txt-dark); }

/* ---------- dropdown customizado ---------- */
.select.is-open::after{ transform:translateY(-20%) rotate(-135deg); }

.dd__native{ display:none; }

.dd__btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:transparent;
  border:0; border-bottom:1px solid rgba(10,10,10,.18);
  border-radius:0;
  padding:11px 22px 11px 0;
  color:var(--txt-dark);
  font-size:.95rem;
  text-align:left;
  cursor:pointer;
  transition:border-color .3s var(--ease);
}
.dd__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd__btn:hover{ border-bottom-color:rgba(10,10,10,.4); }
.dd__btn:focus-visible,
.select.is-open .dd__btn{ outline:none; border-bottom-color:var(--gold); }

.dd__list{
  position:absolute;
  z-index:20;
  top:calc(100% + 8px); left:0; right:0;
  max-height:252px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px;
  margin:0;
  background:var(--white);
  border:1px solid rgba(156,124,62,.35);
  border-radius:var(--r);
  box-shadow:0 26px 60px -18px rgba(10,10,10,.35);
  transform-origin:top center;
  animation:ddIn .22s var(--ease);
}
@keyframes ddIn{
  from{ opacity:0; transform:translateY(-6px) scale(.985); }
  to{ opacity:1; transform:none; }
}

.dd__opt{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  font-size:.92rem;
  color:var(--txt-mute-d);
  cursor:pointer;
  border-radius:var(--r);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.dd__opt:hover,
.dd__opt.is-active{
  background:rgba(198,161,91,.16);
  color:var(--txt-dark);
}
.dd__opt[aria-selected="true"]{ color:var(--gold-deep); }
.dd__opt[aria-selected="true"]::after{
  content:""; flex:none;
  width:13px; height:7px;
  border-left:1.5px solid var(--gold-deep);
  border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(-45deg) translate(1px,-2px);
}

/* barra de rolagem discreta dentro do painel */
.dd__list::-webkit-scrollbar{ width:8px; }
.dd__list::-webkit-scrollbar-track{ background:transparent; }
.dd__list::-webkit-scrollbar-thumb{
  background:rgba(198,161,91,.3);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
.dd__list{ scrollbar-width:thin; scrollbar-color:rgba(198,161,91,.35) transparent; }

.form .btn{ margin-top:6px; }
.form__note{
  margin:0;
  font-size:.74rem; color:rgba(10,10,10,.45); text-align:center;
}

/* ---------- footer ---------- */
.footer{
  background:#050505;
  color:var(--txt-mute-l);
  border-top:1px solid var(--line);
  padding-top:clamp(52px,6vw,78px);
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr));
  gap:clamp(32px,5vw,64px);
  padding-bottom:48px;
}
.footer__brand p{ font-size:.9rem; font-weight:300; max-width:40ch; margin-top:20px; }
.brand--footer{ color:var(--white); }

.social{ display:flex; gap:12px; margin-top:24px; }
.social a{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  color:rgba(244,242,238,.65);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.social a svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.social a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-3px); }

.footer__col{ display:grid; align-content:start; gap:10px; }
.footer__col h4{ color:var(--white); margin-bottom:8px; }
.footer__col a,
.footer__col span{ font-size:.9rem; font-weight:300; }
.footer__col a{ transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--gold); }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:space-between; align-items:center;
  padding-block:22px;
  border-top:1px solid var(--line);
  font-size:.76rem;
  color:rgba(244,242,238,.35);
}
.footer__bottom p{ margin:0; }

/* ---------- fab whatsapp ---------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; align-items:center; gap:10px;
  padding:13px 18px;
  background:var(--wa);
  color:#06331a;
  border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.6);
  transform:translateY(24px); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), opacity .45s var(--ease), background .3s var(--ease);
}
.fab.is-on{ transform:translateY(0); opacity:1; pointer-events:auto; }
.fab:hover{ background:#1fbd5a; }
.fab svg{ width:22px; height:22px; flex:none; }

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsivo ---------- */
/* Cards: 3 por linha no desktop e no tablet, 2 no celular.
   O card aberto sempre ocupa a linha inteira. */
@media (max-width: 640px){
  .card{ flex-basis:calc((100% - var(--gap)) / 2 - 0.5px); }
  .card.is-open .card__title{ font-size:1.6rem; }
  .carousel__nav{ gap:12px; }
  .carousel__ponto{ width:18px; }
  .carousel__ponto.is-atual{ width:30px; }
  .carousel__thumb{ width:60px; }
}

@media (max-width: 980px){
  /* numa coluna só, os blocos ficam centrados em vez de encostados à esquerda */
  .hero{ text-align:center; }
  /* texto centralizado passa por cima das áreas claras da foto: escurece um pouco mais */
  .hero__bg img{ opacity:.55; }
  .hero__inner{ margin-inline:auto; }
  .hero__lead{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .hero__actions .btn{ flex:1 1 260px; max-width:340px; }

  .about{ grid-template-columns:1fr; }
  /* width:100% é necessário: só com margin auto o bloco deixa de esticar e
     encolhe até o conteúdo (as fotos do quadro são posicionadas de forma absoluta) */
  .about__media{ width:100%; max-width:440px; margin-inline:auto; }

  .cta__text{ text-align:center; }
  .cta__text p{ margin-inline:auto; }
  .contact-list{ max-width:340px; margin-inline:auto; text-align:left; }
  .cta__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width: 860px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(86vw, 340px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:8px;
    padding:80px 34px;
    background:rgba(8,8,8,.97);
    backdrop-filter:blur(16px);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  .nav.is-open{ transform:none; }
  .nav > a{ font-size:.95rem; padding-block:12px; letter-spacing:.08em; }
  .nav__cta{ margin-top:18px; width:100%; }
  /* menu alto demais para a tela rola sozinho em vez de sumir nas bordas */
  .nav{ overflow-y:auto; }
  .header::before{ background:rgba(10,10,10,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  body.no-scroll{ overflow:hidden; }
}

@media (max-width: 560px){
  .hero{ min-height:92svh; }
  .hero__actions .btn{ width:100%; }
  .stats{ grid-template-columns:1fr; gap:22px; }
  .footer__grid{ grid-template-columns:1fr; }
  .fab span{ display:none; }
  .fab{ padding:15px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}