/* =========================================================
   IMERSÃO MÉTODO ENCAIXE PERFEITO · ALINE OLIVEIRA
   Identidade: Playfair Display + Montserrat · off-white,
   marfim, champagne gold. Premium, editorial, com respiro.
   ========================================================= */

:root{
  /* Cores da identidade */
  --offwhite:#FAF8F4;
  --ivory:#F6F1E6;
  --ivory-deep:#F2E7D8;      /* mesmo fundo do arquivo de logo */
  --white:#FFFFFF;
  --gold:#D4AF37;
  --gold-hover:#C29D2D;
  --gold-light:#EBCB87;
  --ink:#161616;
  --grey:#8A847A;
  --line:#DED7CC;

  /* Tipografia */
  --serif:'Playfair Display','Times New Roman',serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Layout */
  --container:1240px;
  --pad:48px;
  --header-h:84px;
  --sec-y:clamp(72px,10vw,150px);

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,li,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  background:var(--offwhite);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{padding-block:var(--sec-y);position:relative}
.section--ivory{background:var(--ivory)}
.section--tight{padding-block:clamp(64px,8vw,120px)}

.nowrap{white-space:nowrap}

/* Quebra de linha que só existe no mobile. Fica oculta por padrão,
   e o espaço antes dela mantém o texto correto no desktop. */
.br-mobile{display:none}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--white);
  padding:12px 20px;border-radius:0 0 10px 0;
  font-size:14px;letter-spacing:.04em;
}
.skip-link:focus{left:0}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------- Tipografia base ---------------- */

.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.14;
  letter-spacing:-.008em;
  color:var(--ink);
}
.display--sm{font-size:clamp(25px,2.6vw,36px);line-height:1.18}
.display em,.hero__title em{font-style:normal;color:var(--gold)}

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}

.lead{font-size:clamp(18px,1.5vw,20px);color:#3a3430;line-height:1.7}
.micro{font-size:14px;color:var(--grey);letter-spacing:.01em}

.section__head{max-width:960px;margin-bottom:clamp(48px,6vw,88px)}
.section__head--narrow{max-width:760px}
.section__head p:not(.eyebrow){color:#4a423c;margin-top:24px}
.section__sub{
  font-family:var(--serif);
  font-size:clamp(20px,2.1vw,27px);
  line-height:1.32;
  color:var(--ink)!important;
}

/* ---------------- Botões ---------------- */

.btn{
  --btn-bg:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-height:48px;
  padding:17px 30px;
  background:var(--btn-bg);
  color:var(--white);
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  line-height:1;
  transition:background 220ms ease,transform 220ms ease;
}
.btn:hover{background:var(--gold-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__arrow{transition:transform 220ms ease;font-weight:400}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--sm{padding:12px 22px;min-height:44px;font-size:12px;letter-spacing:.08em}
.btn--lg{padding:20px 38px;font-size:15px}

/* ---------------- Header ---------------- */

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,244,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color 300ms ease,background 300ms ease;
}
.header.is-scrolled{border-bottom-color:rgba(222,215,204,.7)}

.header__inner{
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}

.brand{text-decoration:none;display:block;line-height:0;flex:none}
.brand__logo{
  display:block;
  height:52px;
  width:auto;
  transition:opacity 240ms ease;
}
.brand:hover .brand__logo{opacity:.78}
.brand--footer .brand__logo{height:46px}

.nav{display:flex;align-items:center;gap:38px}
.nav__list{display:flex;align-items:center;gap:32px}
.nav__list a{
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  position:relative;
  padding-block:6px;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  height:1px;background:var(--gold);
  transition:right 260ms var(--ease);
}
.nav__list a:hover::after{right:0}

.burger{
  display:none;
  width:48px;height:48px;
  background:none;border:0;padding:0;
  cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
}
.burger span{
  display:block;width:24px;height:1px;background:var(--ink);
  transition:transform 260ms var(--ease),opacity 200ms ease;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(22,22,22,.28);
  backdrop-filter:blur(2px);
}

/* ---------------- Media / placeholders ---------------- */

.media{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(120% 90% at 25% 15%,#FBF6EF 0%,#F3E9DC 45%,#EADDCB 100%);
  isolation:isolate;
}
.media::after{                        /* linhas de encaixe da identidade */
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(180% 130% at 8% 118%,transparent 47%,rgba(212,175,55,.20) 47.4%,transparent 48.2%),
    radial-gradient(180% 130% at 8% 124%,transparent 47%,rgba(212,175,55,.14) 47.4%,transparent 48.2%),
    radial-gradient(180% 130% at 8% 130%,transparent 47%,rgba(212,175,55,.10) 47.4%,transparent 48.2%);
  pointer-events:none;
  z-index:0;
}
.media__img{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.media--hero{aspect-ratio:3/4;border-radius:24px 24px 120px 24px}
.media--macro{aspect-ratio:1/1;border-radius:24px 120px 24px 24px}
.media--tall{aspect-ratio:3/4}
.media--square{aspect-ratio:1/1}
.media--wide{aspect-ratio:14/9}
.media--kit{aspect-ratio:5/6;border-radius:24px 24px 24px 110px}
.media--portrait{aspect-ratio:3/4;border-radius:24px 24px 110px 24px}
.media__img--retrato{object-position:26% center}

/* Legenda discreta abaixo de uma imagem */
.media__nota{
  margin-top:12px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
  opacity:.8;
}

/* Slot ainda sem foto real: rótulo discreto da direção de arte */
.media.is-empty .media__img{display:none}
.media.is-empty::before{
  content:attr(data-slot);
  position:absolute;z-index:2;
  left:0;right:0;bottom:26px;
  text-align:center;
  font-size:10px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(138,132,122,.85);
}

/* ---------------- Arcos douradas (elemento proprietário) ---------------- */

.arc{color:var(--gold);width:100%;height:auto;display:block}
.arc path{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1400ms var(--ease) 200ms;
}
.reveal.is-visible .arc path,
.arc.is-visible path{stroke-dashoffset:0}

/* ---------------- Hero ---------------- */

.hero{
  position:relative;
  padding-top:clamp(56px,7vw,84px);
  padding-bottom:clamp(72px,9vw,120px);
  overflow:hidden;
}
.hero__ornament{
  position:absolute;
  inset:auto -10% -8% -10%;
  width:120%;height:80%;
  color:var(--gold-light);
  pointer-events:none;
  opacity:.7;
}
.hero__inner{
  display:grid;
  grid-template-columns:55fr 45fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
  min-height:calc(100vh - var(--header-h) - 90px);
  position:relative;z-index:1;
}
.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,3.9vw,58px);
  line-height:1.08;
  letter-spacing:-.012em;
  margin-bottom:30px;
  max-width:16ch;
}
.hero__sub{
  font-size:clamp(17px,1.4vw,19px);
  line-height:1.72;
  color:#4a423c;
  max-width:52ch;
}
.hero__actions{
  margin-top:44px;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.hero__media{position:relative}
.hero__arc{
  position:absolute;
  left:-6%;bottom:-34px;
  width:62%;
  opacity:.85;
}

/* ---------------- Quebra de crença ---------------- */

.belief{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,88px);
  align-items:center;
}
.belief__text p+p{margin-top:26px}
.belief__text p:not(.lead){color:#4a423c}
.belief__media{position:relative}
.belief__line{
  position:absolute;right:-4%;bottom:-30px;width:56%;opacity:.9;
}

/* ---------------- Lista "talvez você se reconheça" ---------------- */

.recognize{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.recognize__item{
  display:flex;gap:24px;
  padding:38px 40px 38px 0;
  border-bottom:1px solid var(--line);
}
.recognize__item:nth-child(odd){border-right:1px solid var(--line);padding-right:48px}
.recognize__item:nth-child(even){padding-left:48px}
.recognize__num{
  font-family:var(--serif);
  font-size:20px;
  color:var(--gold);
  line-height:1.4;
  flex:none;
}
.recognize__item p{font-size:17px;line-height:1.65;color:#3a3430}

.pullquote{
  margin-top:clamp(56px,6vw,88px);
  text-align:center;
}
.pullquote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.3;
  color:var(--gold);
  max-width:30ch;   /* cabe em duas linhas */
  margin-inline:auto;
}
.pullquote--left{text-align:left;margin-top:44px}
.pullquote--left p{margin-inline:0;font-size:clamp(19px,1.9vw,25px);max-width:26ch}

/* ---------------- Pilares ---------------- */

/* A curva de encaixe atravessa a seção ao fundo, sem competir com o texto */
.metodo{position:relative;overflow:hidden}
.metodo__encaixe{
  position:absolute;
  left:-6%;bottom:6%;
  width:112%;height:56%;
  color:var(--gold);
  opacity:.14;
  pointer-events:none;
}
.metodo .container{position:relative;z-index:1}

.pillars{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.pillar{display:grid;grid-template-rows:auto auto auto 1fr}
.pillar__num{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,3vw,48px);
  line-height:1;
  color:var(--gold);
  opacity:.72;
  padding-right:28px;
  margin-bottom:26px;
}
.pillar__rule{
  position:relative;
  display:block;height:1px;
  background:rgba(212,175,55,.45);
}
.pillar__rule::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:6px;height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--gold);
}
.pillar__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  letter-spacing:.01em;
  color:var(--ink);
  padding-right:28px;
  margin-top:26px;
}
.pillar__desc{
  font-size:13px;
  color:#B18C38;
  padding-right:28px;
  margin-top:10px;
  letter-spacing:.02em;
}

/* ---------------- Cards de conteúdo ---------------- */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  transition:border-color 300ms ease,transform 400ms var(--ease);
}
.card:hover{border-color:var(--gold-light);transform:translateY(-3px)}
.card__num{
  display:block;
  font-family:var(--serif);
  font-size:15px;
  color:var(--gold);
  letter-spacing:.06em;
  margin-bottom:18px;
}
.card__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:24px;
  line-height:1.2;
  margin-bottom:14px;
}
.card p{font-size:16px;line-height:1.68;color:#4a423c}

/* ---------------- Editorial ---------------- */

.editorial{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:clamp(20px,2.4vw,34px);
  align-items:stretch;
}
.editorial__main{height:100%}
.editorial__side{display:grid;gap:clamp(20px,2.4vw,34px)}

.wordline{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 30px;
  margin-top:clamp(44px,5vw,64px);
}
.wordline li{
  font-size:11px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--grey);
  position:relative;
}
.wordline li+li::before{
  content:"·";
  position:absolute;left:-17px;
  color:var(--gold);
}
.editorial__phrase{
  font-family:var(--serif);
  font-size:clamp(19px,1.9vw,26px);
  line-height:1.4;
  text-align:center;
  max-width:34ch;
  margin:clamp(32px,4vw,48px) auto 0;
  color:var(--ink);
}

/* ---------------- Experiência presencial ---------------- */

.bigwords{
  font-family:var(--serif);
  font-size:clamp(24px,2.7vw,38px);
  line-height:1.24;
  max-width:26ch;
  color:var(--ink);
}
.bigwords span{display:inline}
.bigwords em{font-style:normal;color:var(--gold);display:block;margin-top:.35em}

.flow{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 0;
  margin-top:clamp(56px,6vw,84px);
  padding-top:34px;
  border-top:1px solid var(--line);
}
.flow li{
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;align-items:center;
}
.flow li+li::before{
  content:"→";
  color:var(--gold);
  margin-inline:14px;
  font-weight:400;
  letter-spacing:0;
}

.points{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,44px);
  margin-top:clamp(56px,6vw,80px);
}
.point{border-top:1px solid var(--gold-light);padding-top:24px}
.point h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  margin-bottom:12px;
}
.point p{font-size:16px;line-height:1.65;color:#4a423c}

/* ---------------- O que faz parte ---------------- */

.experience{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,90px);
  align-items:center;
}
.experience__text .lead{margin-top:22px}
.itemlist{margin-top:38px;border-top:1px solid var(--line)}
.itemlist li{
  position:relative;
  padding:20px 0 20px 30px;
  border-bottom:1px solid var(--line);
  font-size:17px;
  color:#3a3430;
}
.itemlist li::before{
  content:"";
  position:absolute;left:0;top:31px;
  width:12px;height:1px;
  background:var(--gold);
}

/* ---------------- Para quem é / não é ---------------- */

.audience{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,90px);
}
.audience__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,2.6vw,36px);
  padding-bottom:24px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.audience__title--alt{color:var(--grey)}
.checklist li{
  position:relative;
  padding:17px 0 17px 34px;
  font-size:17px;
  line-height:1.6;
  border-bottom:1px solid rgba(222,215,204,.6);
}
.checklist--yes li::before{
  content:"";
  position:absolute;left:2px;top:24px;
  width:11px;height:6px;
  border-left:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.checklist--no li{color:var(--grey)}
.checklist--no li::before{
  content:"";
  position:absolute;left:0;top:29px;
  width:13px;height:1px;
  background:var(--ink);
  opacity:.5;
}
.audience__cta{margin-top:clamp(48px,5vw,72px);text-align:center}

/* ---------------- Aline ---------------- */

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,90px);
  align-items:center;
}
.about__media{position:relative}
.about__arc{position:absolute;right:-5%;bottom:-32px;width:58%;opacity:.9}
.about__text p:not(.eyebrow):not(.lead){margin-top:22px;color:#4a423c;font-size:17px}
.about__text .lead{margin-top:24px}

/* ---------------- Galeria ---------------- */

/* Quatro verticais em composição escalonada: a coluna da direita
   desce um degrau, criando o ritmo editorial sem precisar de foto deitada. */
.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,32px);
  align-items:start;
}
.gallery .media{transition:transform 600ms var(--ease)}
.gallery .media:hover{transform:scale(1.025)}
.gallery__b,.gallery__d{margin-top:clamp(28px,5vw,64px)}

/* ---------------- Depoimentos ---------------- */

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
}
.testimonial p{font-size:17px;line-height:1.68;color:#3a3430}
.testimonial figcaption{
  margin-top:20px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------------- Cabo Frio ---------------- */

.place{text-align:center;max-width:780px;margin-inline:auto}
.place__title{
  font-family:var(--serif);
  font-weight:400;
  line-height:1;
}
.place__title span{
  display:block;
  font-size:clamp(38px,5.4vw,74px);
  letter-spacing:-.018em;
}
.place__title em{
  display:block;
  font-style:normal;
  margin-top:18px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
}
.place__arc{max-width:420px;margin:30px auto 0;opacity:.8}
.place__text{margin-top:30px;color:#4a423c;font-size:17px}

/* Três apoios em colunas separadas por filetes finos — sem cards */
.place__pontos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,40px);
  margin-top:clamp(44px,5vw,64px);
  text-align:left;
}
.place__pontos li{padding-left:clamp(24px,3vw,40px);border-left:1px solid var(--line)}
.place__pontos li:first-child{padding-left:0;border-left:0}
.place__pontos h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:19px;
  color:var(--ink);
  margin-bottom:10px;
}
.place__pontos p{font-size:15px;line-height:1.6;color:#4a423c}

/* ---------------- CTA ---------------- */

.cta__inner{text-align:center;max-width:820px}
.cta__inner .lead{margin:26px auto 0;max-width:52ch;color:#4a423c}
.cta__reforco{
  margin:18px auto 0;
  max-width:54ch;
  font-size:17px;
  line-height:1.7;
  color:#4a423c;
}
.cta__inner .btn{margin-top:42px}
.cta__inner .micro{margin-top:20px}
.cta__nota{
  margin-top:14px;
  font-size:13px;
  line-height:1.5;
  color:var(--grey);
  opacity:.85;
}

.final{background:var(--ivory-deep)}
.final__inner{text-align:center;max-width:820px}
.final__logo{
  width:clamp(150px,16vw,205px);
  height:auto;
  margin:0 auto 10px;
}
.final__inner .display{font-size:clamp(26px,2.8vw,38px);line-height:1.2}
.final__convite{
  margin:clamp(30px,3.5vw,42px) auto 0;
  max-width:46ch;
  font-size:16px;
  line-height:1.65;
  color:#4a423c;
}
.final__inner .btn{margin-top:40px}
.final__inner .micro{margin-top:20px;color:#7a6f60}

/* ---------------- Formulário de aplicação ---------------- */

/* O formulário do CRM já desenha o próprio cartão (borda, cantos
   arredondados, padding e fundo). Este container só posiciona —
   qualquer moldura aqui viraria cartão dentro de cartão. */
.form__card{
  margin:clamp(36px,4.5vw,56px) auto 0;
  max-width:720px;
  text-align:left;
  /* O espaço de carregamento fica AQUI, no container, e não no iframe.
     Reservar altura no próprio iframe viraria piso permanente: o
     formulário mede com documentElement.scrollHeight, que nunca é
     menor que a altura do iframe. */
  min-height:300px;
}
.form__card.is-ready{min-height:0}
.form__noscript{
  font-size:16px;line-height:1.6;color:#4a423c;
  background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:24px;
}
.form__noscript a{color:var(--gold)}

/* ---------------- FAQ ---------------- */

.faq{max-width:860px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;
  padding:26px 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(19px,1.8vw,24px);
  line-height:1.3;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:color 240ms ease;
}
.faq__trigger:hover{color:var(--gold)}
.faq__icon{
  position:relative;flex:none;
  width:16px;height:16px;
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:0;top:50%;
  width:16px;height:1px;background:var(--gold);
  transition:transform 300ms var(--ease);
}
.faq__icon::after{transform:rotate(90deg)}
.faq__trigger[aria-expanded="true"] .faq__icon::after{transform:rotate(0)}

.faq__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 380ms var(--ease);
}
.faq__inner{overflow:hidden;visibility:hidden}
.faq__panel.is-open{grid-template-rows:1fr}
.faq__panel.is-open .faq__inner{visibility:visible}
.faq__inner p{
  padding-bottom:28px;
  padding-right:40px;
  font-size:17px;
  line-height:1.72;
  color:#4a423c;
  max-width:64ch;
}

/* ---------------- Footer ---------------- */

.footer{
  background:var(--offwhite);
  border-top:1px solid var(--line);
  padding-block:56px;
}
.footer__inner{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:18px;
}
.footer__social{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 6px;
  color:var(--grey);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.06em;
  transition:color 240ms ease;
}
.footer__social svg{width:19px;height:19px;flex:none;transition:color 240ms ease}
.footer__social:hover{color:var(--gold)}

.footer__meta{font-size:13px;color:var(--grey);letter-spacing:.04em}
.footer__copy{font-size:12px;color:var(--grey);letter-spacing:.04em}

/* ---------------- Reveal ---------------- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-visible{opacity:1;transform:none}
.reveal .media__img,.media.reveal .media__img{transition:transform 900ms var(--ease)}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:1080px){
  :root{--pad:32px;--sec-y:clamp(72px,9vw,96px)}
  .nav__list{gap:24px}
  .nav{gap:26px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .points{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .header__inner{gap:16px}
  .brand__logo{height:46px}
  .burger{display:flex}

  .nav{
    position:fixed;z-index:95;
    top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--offwhite);
    border-bottom:1px solid var(--line);
    padding:12px 32px 32px;
    transform:translateY(-12px);
    opacity:0;visibility:hidden;
    transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 260ms;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list a{
    display:block;
    padding:18px 0;
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .nav__list a::after{display:none}
  .nav__cta{margin-top:24px;justify-content:center}

  /* Hero: texto primeiro, imagem depois */
  .hero__inner{
    grid-template-columns:1fr;
    min-height:0;
    gap:48px;
  }
  .hero__title{max-width:none}
  .hero__actions{align-items:stretch}
  .hero__actions .btn{justify-content:center;width:100%}
  .hero__actions .micro{text-align:center}
  .hero__arc{width:52%;bottom:-26px}

  .belief,.experience,.about,.audience{grid-template-columns:1fr}
  .editorial{grid-template-columns:1fr}
  .editorial__side{grid-template-columns:1fr 1fr}

  /* Pilares: timeline vertical */
  .pillars{grid-template-columns:1fr;gap:0}
  .pillar{
    grid-template-rows:none;
    grid-template-columns:56px 1fr;
    column-gap:0;
    position:relative;
    padding:0 0 48px 0;                       /* respiro entre as etapas */
  }
  .pillar__num{
    grid-column:1;grid-row:1/3;
    font-size:40px;padding-right:0;margin-bottom:0;
    width:56px;
  }
  .pillar__rule{
    position:absolute;
    left:69px;top:12px;bottom:0;
    width:1px;height:auto;
  }
  .pillar__rule::before{left:-2.5px;top:0}
  .pillar__name{grid-column:2;margin-top:0;padding-right:0;padding-left:26px}
  .pillar__desc{grid-column:2;padding-right:0;padding-left:26px}
  .pillar:last-child .pillar__rule{bottom:auto;height:28px}

  /* Fluxo: timeline vertical */
  .flow{flex-direction:column;align-items:flex-start;gap:0}
  .flow li{padding:13px 0 13px 26px;position:relative}
  .flow li::after{
    content:"";position:absolute;left:3px;top:0;bottom:0;
    width:1px;background:var(--gold-light);
  }
  .flow li:first-child::after{top:50%}
  .flow li:last-child::after{bottom:50%}
  .flow li+li::before{
    content:"";
    position:absolute;left:0;top:50%;
    width:7px;height:7px;margin:-3.5px 0 0;
    border-radius:50%;
    background:var(--gold);
  }
  .flow li:first-child{padding-left:26px}
  .flow li:first-child::before{
    content:"";position:absolute;left:0;top:50%;
    width:7px;height:7px;margin:-3.5px 0 0;
    border-radius:50%;background:var(--gold);
  }

  .about__arc,.belief__line{width:48%}
}

@media (max-width:640px){
  :root{--pad:20px;--sec-y:76px;--header-h:76px}
  body{font-size:17px}

  .section__head{margin-bottom:44px}
  .brand__logo{height:38px}
  .brand--footer .brand__logo{height:42px}
  .recognize{grid-template-columns:1fr}
  .recognize__item,
  .recognize__item:nth-child(odd),
  .recognize__item:nth-child(even){
    padding:28px 0;
    border-right:0;
    padding-left:0;
    padding-right:0;
  }

  .cards{grid-template-columns:1fr;gap:16px}
  .card{padding:28px}
  .points{grid-template-columns:1fr;gap:28px}
  .testimonials{grid-template-columns:1fr}

  .editorial__side{grid-template-columns:1fr}
  .media--hero{border-radius:20px 20px 90px 20px}
  .media--macro{border-radius:20px 90px 20px 20px}

  .gallery{grid-template-columns:1fr}
  .gallery__b,.gallery__d{margin-top:0}

  .cta__inner .btn,.final__inner .btn,.audience__cta .btn{
    width:100%;justify-content:center;text-align:center;
  }
  .btn{padding:16px 24px;font-size:13px}

  .footer__inner{gap:14px}

  .wordline{justify-content:flex-start;gap:12px 26px}
  .editorial__phrase,.place__text{text-align:left;margin-inline:0}
  .editorial__phrase{max-width:none}
  .pullquote p{max-width:none}
}

/* =========================================================
   HERO — MOBILE
   Bloco isolado: nada aqui alcança tablet ou desktop.
   ========================================================= */

@media (max-width:767px){

  .hero{
    padding-top:44px;
    padding-bottom:64px;
  }

  /* respiro entre os blocos do hero */
  .hero__inner{gap:52px}                    /* microtexto -> imagem */

  /* IMERSÃO PRESENCIAL · CABO FRIO/RJ — sempre em uma linha */
  .hero .eyebrow{
    font-size:clamp(10px,2.8vw,13px);
    letter-spacing:.12em;
    line-height:1.2;
    white-space:nowrap;
    margin-bottom:44px;                     /* eyebrow -> headline */
  }

  /* Composição fixa em quatro linhas. O corpo precisa caber a linha
     mais longa ("O acabamento que faz", 20 caracteres) sem requebrar. */
  .br-mobile{display:inline}

  .hero__title{
    font-size:clamp(28px,9vw,44px);
    line-height:1.06;
    letter-spacing:-.025em;
    margin-bottom:52px;                     /* headline -> descrição */
  }

  /* "antes do gel." nunca se separa */
  .hero__title em{white-space:nowrap}

  .hero__sub{
    font-size:clamp(17px,4.6vw,20px);
    line-height:1.65;
  }

  .hero__actions{
    margin-top:44px;                        /* descrição -> CTA */
    gap:24px;                               /* CTA -> microtexto */
  }

  .hero__actions .btn{
    width:100%;
    min-height:56px;
    justify-content:center;
    text-align:center;
    padding-inline:24px;                    /* a seta não encosta na lateral */
  }

  .hero__actions .micro{
    font-size:15px;
    line-height:1.4;
  }

  .hero__media,
  .hero__media .media{width:100%;max-width:100%}
}

/* =========================================================
   CTA ANTES DO FAQ — MOBILE
   Bloco isolado: nada aqui alcança tablet ou desktop.
   ========================================================= */

@media (max-width:767px){

  /* "Cabo Frio" nunca se divide */
  .cta__inner .nobreak{white-space:nowrap}

  /* medida curta evita palavra órfã no fim dos parágrafos */
  .cta__inner .lead,
  .cta__reforco{
    font-size:16px;
    line-height:1.7;
    max-width:320px;
    margin-inline:auto;
  }
  .cta__inner .lead{margin-top:28px}          /* título -> texto */
  .cta__reforco{margin-top:16px}

  .cta__inner .btn{margin-top:32px}           /* texto -> botão */
  .cta__inner .micro{margin-top:20px}         /* botão -> microcopy */
  .cta__nota{max-width:300px;margin-inline:auto}

  /* Cabo Frio: os três apoios empilham, filete passa a ser horizontal */
  .place__pontos{grid-template-columns:1fr;gap:0}
  .place__pontos li{
    padding:24px 0 0;
    border-left:0;
    border-top:1px solid var(--line);
    margin-top:24px;
  }
  .place__pontos li:first-child{border-top:0;margin-top:0;padding-top:0}
}

/* =========================================================
   SEÇÃO FINAL (aplicação) — MOBILE
   Bloco isolado: nada aqui alcança tablet ou desktop.
   ========================================================= */

@media (max-width:767px){

  .final__logo{margin-bottom:28px}            /* logo -> eyebrow */

  /* MÉTODO ENCAIXE PERFEITO · ALINE OLIVEIRA — sempre em uma linha.
     São 40 caracteres: exige corpo menor que o da eyebrow do hero. */
  .final .eyebrow{
    font-size:clamp(9px,2.6vw,13px);
    letter-spacing:.12em;
    line-height:1.2;
    white-space:nowrap;
    margin-bottom:28px;                       /* eyebrow -> título */
  }

  /* 9vw mantém ~21 caracteres por linha em qualquer largura, o que
     produz a composição "Técnica se constrói / nos detalhes." em
     todos os aparelhos. Um piso de 34px quebraria isso abaixo de 378px. */
  .final__inner .display{
    font-size:clamp(28px,9vw,42px);
    line-height:1.08;
    letter-spacing:-.02em;
  }

  /* o <br> serve ao desktop; no mobile quem separa é o próprio bloco */
  .final__inner .display br{display:none}

  .final__inner .display em{
    display:block;
    margin-top:10px;
  }

  .final__inner .micro{
    margin-top:24px;                          /* título -> localização */
    font-size:16px;
    line-height:1.4;
    color:var(--grey);
  }

  .final__convite{
    margin-top:28px;                          /* localização -> convite */
    max-width:320px;
    font-size:16px;
  }

  .final__inner .form__card{
    margin-top:32px;                          /* convite -> card */
  }
}

/* Telas muito estreitas: aperta só o suficiente para as eyebrows
   caberem em uma linha sem gerar rolagem horizontal. */
@media (max-width:360px){
  .hero .eyebrow{font-size:9.5px;letter-spacing:.1em}
  .final .eyebrow{font-size:8.5px;letter-spacing:.1em}
}

/* ---------------- Movimento reduzido ---------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
  .arc path{stroke-dashoffset:0}
  .gallery .media:hover{transform:none}
}