/* =========================================================
   LUANA FERREIRA — AFROTURISMO
   Paleta de matriz africana: terracota, ocre, verde floresta,
   marrom café sobre areia. CSS autoral.
   ========================================================= */

:root{
  /* Cores */
  --areia:        #FBF7F1;
  --areia-2:      #F4EBDF;
  --areia-3:      #EADDCB;
  /* Extraídas do logo oficial (Logo Com texto.svg) */
  --terracota:    #BB3D27;
  --terracota-d:  #9A3020;
  --ocre:         #D48023;
  --ocre-d:       #B86A16;
  --verde:        #4C6222;
  --verde-d:      #2F3D15;
  --cafe:         #311513;
  --cafe-2:       #5A423F;
  --cafe-3:       #8C7370;

  /* Tipografia */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Poppins', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1180px;
  --gut: 24px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
}

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

/* scroll-padding acompanha a altura do header fixo (18px + logo 70px + 18px) */
html{ scroll-behavior:smooth; scroll-padding-top:102px; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  color:var(--cafe-2);
  background:var(--areia);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); color:var(--cafe); margin:0; line-height:1.08; font-weight:600; }
p{ margin:0 0 1.1em; }
em{ font-style:italic; }

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

/* ---------- Elementos tipográficos compartilhados ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracota);
  padding:7px 16px 7px 12px;
  border:1.5px solid rgba(191,66,41,.28);
  border-radius:999px;
  background:rgba(191,66,41,.05);
  margin-bottom:26px;
}
.eyebrow i{ font-size:1.05rem; }
.eyebrow--light{
  color:var(--ocre);
  border-color:rgba(226,149,42,.4);
  background:rgba(226,149,42,.1);
}

.section-head{ max-width:640px; margin-bottom:64px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-title{
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  letter-spacing:-.02em;
}
.section-title em{ color:var(--terracota); }
.section-head--light .section-title{ color:var(--areia); }
.section-head--light .section-title em{ color:var(--ocre); }
.section-sub{
  margin-top:22px; font-size:1.05rem; color:var(--cafe-3);
}
.section-head--light .section-sub{ color:rgba(251,247,241,.72); }

.lead{ font-size:1.16rem; color:var(--cafe-2); }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:.94rem; color:var(--terracota);
  border-bottom:2px solid rgba(191,66,41,.25);
  padding-bottom:3px;
  transition:gap .25s ease, border-color .25s ease;
}
.link-arrow:hover{ gap:16px; border-color:var(--terracota); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.92rem;
  padding:13px 24px;
  border-radius:999px;
  border:1.5px solid transparent;
  /* Sem isso o gradiente é dimensionado pelo padding-box e se repete dentro
     da borda transparente, deixando um fio da cor inicial (clara) na direita
     e embaixo. Com border-box o gradiente cobre a borda e o fio desaparece. */
  background-origin:border-box;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.btn i{ font-size:1.15rem; }
.btn--lg{ padding:16px 32px; font-size:1rem; }
/* Sem contorno no clique de mouse; anel só na navegação por teclado */
.btn{ -webkit-tap-highlight-color:transparent; }
.btn:focus{ outline:none; }
.btn:focus-visible{ outline:2px solid var(--ocre); outline-offset:3px; }

.btn--solid{
  background:var(--terracota); color:#fff;
  box-shadow:0 10px 26px -12px rgba(191,66,41,.75);
}
.btn--solid:hover{ background:var(--terracota-d); transform:translateY(-2px); }

.btn--outline{
  border-color:rgba(46,26,30,.24); color:var(--cafe);
}
.btn--outline:hover{ border-color:var(--verde); color:var(--verde); transform:translateY(-2px); }

.btn--ghost{
  border-color:rgba(46,26,30,.18); color:var(--cafe); background:rgba(255,255,255,.6);
}
.btn--ghost:hover{ background:#fff; border-color:var(--cafe); transform:translateY(-2px); }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.header--scrolled{
  background:rgba(251,247,241,.92);
  backdrop-filter:blur(14px);
  padding:10px 0;
  box-shadow:0 1px 0 rgba(46,26,30,.08);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:60px; width:auto; transition:height .3s ease; }
.header--scrolled .brand img{ height:52px; }

/* ---------- Seletor de idiomas PT / EN ----------
   Mesmo pill das outras páginas do template (carlos-ribeiro): botões sem
   borda e o ativo preenchido em bloco. Aqui o preenchimento é a terracota
   da marca sobre os tons de areia do header. Fica sempre encostado na
   direita: no desktop o `margin-left:auto` do nav joga nav + pill para lá;
   no mobile o nav vira dropdown e o auto passa para o próprio .header__right. */
.header__right{ display:flex; align-items:center; gap:14px; flex:none; }

.lang-switch{
  display:flex; flex:none;
  background:rgba(46,26,30,.045);
  border:1px solid rgba(46,26,30,.13);
  border-radius:999px;
  padding:3px;
}
.lang-switch__btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  color:var(--cafe-3);
  background:transparent; border:none;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer; white-space:nowrap;
  transition:background .22s ease, color .22s ease;
}
.lang-switch__flag{ width:18px; height:13px; border-radius:2px; display:block; flex:none; }
.lang-switch__btn:hover{ color:var(--cafe); }
.lang-switch__btn:focus{ outline:none; }
.lang-switch__btn:focus-visible{ outline:2px solid var(--ocre); outline-offset:2px; }
.lang-switch__btn.is-active{ background:var(--terracota); color:#fff; }

/* CTA principal: último elemento da linha, sempre à direita do pill */
.header__cta{ flex:none; }

/* margin-left:auto absorve a folga: a marca fica na esquerda e o conjunto
   menu + idioma + CTA encosta na direita. */
.header__nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.header__menu{
  display:flex; align-items:center; gap:20px;
  list-style:none; margin:0; padding:0;
}
.header__menu a{
  font-size:.85rem; font-weight:500; color:var(--cafe-2);
  position:relative; padding-bottom:3px;
}
.header__menu a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--ocre); transition:width .25s ease;
}
.header__menu a:hover{ color:var(--cafe); }
.header__menu a:hover::after{ width:100%; }

.header__toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.header__toggle span{
  width:24px; height:2px; background:var(--cafe); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.header__toggle--active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.header__toggle--active span:nth-child(2){ opacity:0; }
.header__toggle--active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:136px 0 56px;
  background:
    radial-gradient(120% 80% at 15% 0%, #fff 0%, rgba(255,255,255,0) 60%),
    var(--areia);
  overflow:hidden;
}
.hero__motif{ position:absolute; pointer-events:none; opacity:.9; }
.hero__motif svg{ width:100%; height:100%; overflow:visible; }
.hero__motif--top{ top:-40px; right:-40px; width:300px; height:300px; }
.hero__motif--bottom{ bottom:-60px; left:-70px; width:260px; height:260px; }

.hero__inner{
  width:100%;
  display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
  position:relative; z-index:2;
}

.hero__title{
  font-size:clamp(2.4rem, 3.7vw, 3.8rem);
  letter-spacing:-.025em;
  line-height:1.05;
  margin-bottom:22px;
}
.hero__title em{
  color:var(--terracota);
  position:relative;
  display:inline-block;
}
.hero__title em::after{
  content:''; position:absolute; left:0; right:0; bottom:.05em; height:.14em;
  background:rgba(226,149,42,.35); border-radius:3px; z-index:-1;
}
.hero__lead{ font-size:1.05rem; color:var(--cafe-2); max-width:48ch; margin-bottom:0; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:34px;
  list-style:none; margin:40px 0 0; padding:26px 0 0;
  border-top:1px solid rgba(46,26,30,.12);
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{
  font-family:var(--serif); font-size:1.75rem; font-weight:600; color:var(--verde); line-height:1;
}
.hero__stats span{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cafe-3); margin-top:7px;
}

.hero__media{ position:relative; display:flex; justify-content:center; }

/* Foto inteira, sem corte — só cantos arredondados */
.hero__photo{
  border-radius:var(--r-lg);
  overflow:hidden;
  line-height:0;
  background:var(--areia-3);
  box-shadow:0 40px 80px -48px rgba(49,21,19,.6);
  border:5px solid rgba(255,255,255,.5);
}
.hero__photo img{
  display:block;
  height:min(72svh, 620px);
  width:auto;
  border-radius:calc(var(--r-lg) - 6px);
}

/* =========================================================
   FAIXA DE VALORES
   ========================================================= */
.strip{ position:relative; overflow:hidden; background:var(--cafe); color:var(--areia); }
/* Adinkrahene nos dois cantos, bem discreto */
/* Escala pequena para caber inteiro na altura da faixa */
.strip__symbol{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  color:var(--ocre); opacity:.16;
  pointer-events:none; z-index:0;
}
.strip__symbol svg{ display:block; width:100%; height:100%; }
.strip__symbol--left{ left:16px; }
.strip__symbol--right{ right:16px; }

.strip__inner{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 34px;
  padding-block:22px;
}
.strip span{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.86rem; font-weight:500; color:rgba(251,247,241,.86);
}
.strip i{ font-size:1.25rem; color:var(--ocre); }

/* =========================================================
   SOBRE
   ========================================================= */
.about{ padding:110px 0; }
/* O título vive dentro da coluna de texto, então a foto redonda
   centraliza contra o bloco inteiro (título + parágrafos). */
.about .section-head{ margin-bottom:34px; max-width:none; }
.about .section-title{ font-size:clamp(1.9rem, 3.1vw, 2.9rem); }
.about__figure--square{ max-width:340px; }

.about__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:72px 56px;
  align-items:center;
}
/* Linha 1: texto à esquerda, retrato circular à direita */
.about__text--first  { grid-column:1 / 8;  grid-row:1; }
.about__figure--square{ grid-column:9 / 13; grid-row:1; margin:0; justify-self:center; }
/* Linha 2: foto horizontal à esquerda, texto à direita */
.about__figure--wide { grid-column:1 / 7;  grid-row:2; margin:0; }
.about__text--second { grid-column:8 / 13; grid-row:2; }

.about__text p:last-child{ margin-bottom:0; }
.about__text .link-arrow{ margin-top:22px; }

.about__figure{ position:relative; }
.about__figure img{
  width:100%; border-radius:var(--r-lg);
  box-shadow:0 30px 60px -40px rgba(46,26,30,.6);
}
.about__figure--square{ width:100%; max-width:380px; }
.about__figure--square img{
  aspect-ratio:1/1; object-fit:cover; object-position:50% 30%;
  border-radius:999px;
}
.about__figure--wide img{ aspect-ratio:4/3; object-fit:cover; }
.about__figure--square::after{
  content:''; position:absolute; inset:-16px;
  border:1.5px dashed rgba(226,149,42,.6);
  border-radius:999px; pointer-events:none;
}

/* ---------- Nota de credencial (ABRAFRO): destaque leve ---------- */
.about__note{
  margin:0 0 1.1em;
  padding-left:18px;
  border-left:2px solid rgba(212,128,35,.55);
}
.about__note strong{ color:var(--cafe); }

/* =========================================================
   A EDUCADORA
   ========================================================= */
.educator{
  position:relative;
  background:var(--verde-d);
  color:rgba(251,247,241,.85);
  padding:110px 0;
  overflow:hidden;
}
.educator__motif{
  position:absolute; top:-50px; left:-60px; width:300px; height:300px;
  opacity:.32; pointer-events:none;
}
.educator__motif svg{ width:100%; height:100%; overflow:visible; }
.educator__inner{ position:relative; z-index:2; }

/* Título + foto lado a lado */
.educator__top{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  margin-bottom:70px;
}
.educator__top .section-head{ margin-bottom:0; max-width:none; }
.educator__hero{ margin:0; }
.educator__hero img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 100px var(--r-lg);
  box-shadow:0 40px 70px -45px rgba(0,0,0,.85);
}

.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-bottom:70px;
}
.pillar{
  position:relative; overflow:hidden;
  background:rgba(251,247,241,.075);
  border-radius:var(--r-lg);
  padding:34px 30px 32px;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.65);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pillar::before{
  content:''; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--ocre);
  transform:scaleY(0); transform-origin:top;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.pillar:hover{
  background:rgba(251,247,241,.11);
  box-shadow:0 30px 56px -26px rgba(0,0,0,.8);
  transform:translateY(-5px);
}
.pillar:hover::before{ transform:scaleY(1); }

.pillar__num{
  position:absolute; top:22px; right:26px;
  font-family:var(--serif); font-style:italic; font-size:2.4rem; font-weight:400;
  color:rgba(251,247,241,.12); line-height:1;
}
.pillar__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(212,128,35,.16);
  border:1px solid rgba(212,128,35,.34);
}
.pillar__icon i{ font-size:1.5rem; color:var(--ocre); }
.pillar h3{
  font-size:1.42rem; color:var(--areia);
  margin:20px 0 12px;
}
.pillar p{ font-size:.94rem; color:rgba(251,247,241,.7); margin:0; }

/* Showroom de fotos (mosaico bento) */
.showroom-head{ margin-bottom:26px; }
.showroom-head__line{
  display:block; width:56px; height:3px; border-radius:3px;
  background:var(--ocre); margin-bottom:18px;
}
.showroom-head h3{
  font-size:1.6rem; color:var(--areia); margin-bottom:8px;
}
.showroom-head p{
  margin:0; font-size:.94rem; color:rgba(251,247,241,.62);
}

.showroom{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,210px);
  gap:14px;
}
.showroom__tile{
  margin:0; overflow:hidden;
  border-radius:var(--r-md);
  background:rgba(251,247,241,.06);
}
.showroom__tile--big{ grid-column:1 / 3; grid-row:1 / 3; }
.showroom__tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.showroom__tile:hover img{ transform:scale(1.06); }

/* =========================================================
   EXPERIÊNCIAS
   ========================================================= */
.experiences{ padding:110px 0; background:var(--areia-2); }

.experiences .section-head{ max-width:840px; }
/* O título carrega os quatro valores, então pede um corpo um pouco menor */
.experiences .section-title{ font-size:clamp(1.95rem, 3.5vw, 2.75rem); }

.exp-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:30px;
}
.exp-card{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:1/1.12;
  background:var(--cafe);
  isolation:isolate;
}
.exp-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.exp-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(20,9,7,.98) 0%,
    rgba(20,9,7,.94) 26%,
    rgba(20,9,7,.72) 48%,
    rgba(20,9,7,.24) 72%,
    rgba(20,9,7,0) 100%);
}
.exp-card:hover img{ transform:scale(1.07); }
/* A foto da Rocinha tem as três à direita do quadro; o corte quadrado do
   cartão cortaria a guia. Desloca a imagem 40px para a esquerda na máscara. */
.exp-card__img--left-40{ object-position:calc(50% - 40px) 50%; }

.exp-card__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:40px 38px 38px;
  color:#fff;
}
.exp-card__tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:#F2B15C;
  margin-bottom:12px;
}
.exp-card__tag::before{
  content:''; width:22px; height:2px; background:#F2B15C; border-radius:2px;
}
.exp-card__body h3{
  font-size:2.1rem; color:#fff; margin-bottom:14px; line-height:1.1;
}
/* Nome de roteiro longo: reduz o corpo para não estourar o cartão */
.exp-card__body h3.exp-card__title--long{
  font-size:1.52rem; line-height:1.2; max-width:22ch;
}
.exp-card__body p{
  font-size:.96rem; line-height:1.6; color:rgba(255,255,255,.85);
  margin:0 0 18px; max-width:44ch;
}
.exp-card__meta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; color:rgba(255,255,255,.68);
}

/* ---------- CTA da experiência do Airbnb ---------- */
.exp-cta{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:60px; padding:48px 56px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(212,128,35,.28) 0%, rgba(212,128,35,0) 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(187,61,39,.32) 0%, rgba(187,61,39,0) 58%),
    var(--cafe);
  display:grid; grid-template-columns:1fr minmax(280px,auto); gap:56px; align-items:center;
}
.exp-cta__motif{
  position:absolute; top:-70px; right:-60px; width:300px; height:300px;
  opacity:.3; pointer-events:none; z-index:-1;
}
.exp-cta__motif svg{ width:100%; height:100%; overflow:visible; }

.exp-cta__label{
  display:inline-block;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ocre);
  margin-bottom:16px;
}
.exp-cta h3{
  font-size:clamp(1.7rem, 2.6vw, 2.4rem);
  color:var(--areia); line-height:1.12; margin-bottom:14px;
  max-width:18ch;
}
.exp-cta h3 em{ color:var(--ocre); }
.exp-cta p{ margin:0; color:rgba(251,247,241,.7); font-size:.96rem; max-width:48ch; }

/* Coluna direita: nota + botão empilhados */
.exp-cta__action{ display:flex; flex-direction:column; align-items:stretch; gap:20px; }

.exp-cta__score{
  display:flex; align-items:center; gap:16px;
  padding-bottom:8px;
}
.exp-cta__score strong{
  font-family:var(--serif); font-size:3rem; font-weight:600; color:#fff; line-height:1;
}
.exp-cta__score-meta{ display:flex; flex-direction:column; gap:5px; }
.exp-cta__stars{ display:flex; gap:3px; color:var(--ocre); font-size:.95rem; }
.exp-cta__score-meta span{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:.78rem; color:rgba(251,247,241,.62);
}
.exp-cta__score-meta img{ height:15px; width:auto; }

/* Dois CTAs: público (Airbnb) e agência (WhatsApp) */
.exp-cta__buttons{ display:flex; flex-direction:column; gap:14px; }

.btn--duo{
  justify-content:flex-start; text-align:left;
  gap:15px; padding:15px 28px 16px 24px;
  border-radius:var(--r-md);
}
.btn--duo i{ font-size:1.55rem; flex:none; }
.btn__stack{ display:flex; flex-direction:column; line-height:1.2; }
.btn__stack small{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  opacity:.7; margin-bottom:3px;
}
.btn__stack strong{ font-size:1.06rem; font-weight:700; letter-spacing:.01em; }

.btn--blue{
  background-image:linear-gradient(135deg, #4C8FBF 0%, #2F6690 55%, #1F4A6B 100%);
  background-origin:border-box;
  color:#fff;
  box-shadow:0 10px 20px -14px rgba(20,9,7,.9);
  font-weight:700;
}
.btn--blue:hover{
  background-image:linear-gradient(135deg, #5A9DCC 0%, #37749F 55%, #235477 100%);
  background-origin:border-box;
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(20,9,7,.95);
}

.btn--xl{ padding:20px 36px; font-size:1.06rem; }
/* Sombra curta e pra baixo: dá profundidade sem espalhar halo pela caixa.
   Usa background-image (longhand) de propósito: o atalho `background`
   resetaria o background-origin herdado de .btn e o fio claro voltaria. */
.btn--glow{
  background-image:linear-gradient(135deg, #E8A33E 0%, var(--ocre) 55%, #C06D18 100%);
  background-origin:border-box;
  color:var(--cafe);
  box-shadow:0 10px 20px -14px rgba(20,9,7,.9);
  font-weight:700; letter-spacing:.01em;
}
.btn--glow i{ font-size:1.3rem; }
.btn--glow:hover{
  background-image:linear-gradient(135deg, #F0B052 0%, #E08D25 55%, #C87716 100%);
  background-origin:border-box;
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(20,9,7,.95);
}

/* =========================================================
   LUANA AGÊNCIA
   ========================================================= */
.agency{ padding:110px 0; }
.agency .section-head{ max-width:720px; margin-bottom:56px; }
.agency .section-sub{ margin-inline:auto; }

/* Cartões de serviço em 2x2 */
.agency__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  margin-bottom:56px;
}
.agency__card{
  position:relative; overflow:hidden;
  background:#fff;
  border-radius:var(--r-lg);
  padding:38px 36px 34px;
  box-shadow:0 20px 44px -32px rgba(49,21,19,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.agency__card::before{
  content:''; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--ocre);
  transform:scaleY(0); transform-origin:top;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.agency__card:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 60px -34px rgba(49,21,19,.6);
}
.agency__card:hover::before{ transform:scaleY(1); }

.agency__num{
  display:block;
  font-family:var(--serif); font-size:1.9rem; font-weight:400; font-style:italic;
  color:var(--ocre); line-height:1; margin-bottom:16px;
}
.agency__card h3{ font-size:1.38rem; margin-bottom:12px; line-height:1.2; }
.agency__card p{ margin:0; color:var(--cafe-3); font-size:.96rem; }

/* Banda de contato executiva */
.agency__cta{
  display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center;
  padding:30px 36px;
  background:var(--areia-2);
  border-radius:var(--r-lg);
}
.agency__figure{
  margin:0; flex:none;
  width:104px; height:104px;
  border-radius:var(--r-md);
  overflow:hidden;
}
.agency__figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; }

.agency__cta-text h3{ font-size:1.44rem; margin-bottom:7px; line-height:1.22; }
.agency__cta-text p{ margin:0; color:var(--cafe-3); font-size:.94rem; }
.agency__btn{ flex:none; white-space:nowrap; }

/* =========================================================
   NOSSO TIME
   ========================================================= */
/* Fica entre "Luana Agência" (areia) e "Avaliações" (areia-2): usa o tom
   mais fechado da areia para a faixa não colar em nenhuma das duas. */
.team{
  position:relative; overflow:hidden;
  padding:110px 0;
  background:var(--areia-3);
}
.team__motif{
  position:absolute; right:-64px; bottom:-70px; width:280px; height:280px;
  opacity:.28; pointer-events:none;
}
.team__motif svg{ width:100%; height:100%; overflow:visible; }

/* Split 50/50: texto à esquerda, foto do time à direita */
.team__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
}
.team__content .section-head{ margin-bottom:30px; max-width:none; }
.team__content .section-title{ font-size:clamp(1.9rem, 3.1vw, 2.9rem); }
.team__text strong{ color:var(--cafe); }
.team__text:last-of-type{ margin-bottom:0; }
.team__btn{ margin-top:32px; }

.team__figure{ margin:0; }
.team__figure img{
  width:100%;
  aspect-ratio:4/3; object-fit:cover; object-position:50% 42%;
  border-radius:var(--r-lg);
  box-shadow:0 30px 60px -40px rgba(46,26,30,.6);
}

/* =========================================================
   AVALIAÇÕES
   ========================================================= */
.reviews{ padding:110px 0 120px; background:var(--areia-2); }

.score-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:26px;
  margin-bottom:56px;
}
.score{
  display:flex; flex-direction:column; align-items:center;
  background:#fff; border-radius:var(--r-lg);
  padding:34px 54px; min-width:270px;
}
.score__logo{ height:26px; width:auto; margin-bottom:10px; }
.score__value{
  font-family:var(--serif); font-size:3.2rem; font-weight:600; color:var(--cafe);
  line-height:1.15;
}
.score__stars{ display:flex; gap:4px; color:var(--ocre); font-size:1.05rem; }
.score__count{ font-size:.84rem; color:var(--cafe-3); margin-top:10px; }

.quotes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
  scrollbar-width:none;
}
.quote__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px;
}
.quote__source{ height:19px; width:auto; opacity:.85; }
.quotes::-webkit-scrollbar{ display:none; }
.quote{
  scroll-snap-align:start;
  margin:0; padding:34px 32px;
  background:#fff;
  border-radius:var(--r-md);
  border-top:4px solid var(--terracota);
  display:flex; flex-direction:column;
}
.quote__stars{ display:flex; gap:3px; color:var(--ocre); font-size:.92rem; }
.quote p{
  font-family:var(--serif); font-size:1.02rem; line-height:1.6; color:var(--cafe);
  flex:1;
}
.quote__foot{
  margin-top:20px; padding-top:18px;
  border-top:1px solid rgba(49,21,19,.1);
}
.quote cite{
  font-style:normal; font-weight:600; font-size:.95rem; color:var(--cafe);
  display:flex; flex-direction:column; gap:4px;
}
.quote__place{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:400; font-size:.8rem; color:var(--cafe-3);
}
.quote__place i{ font-size:.95rem; color:var(--terracota); }

.quote__meta{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
  margin-top:12px;
}
.quote__date{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cafe-3);
}
.quote__translated{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; color:var(--cafe-3);
  background:rgba(49,21,19,.05);
  padding:4px 10px; border-radius:999px;
}
.quote__translated i{ font-size:.9rem; }

.reviews__more{ display:flex; justify-content:center; margin-top:40px; }

.quotes__nav{ display:none; justify-content:center; gap:12px; margin-top:26px; }
.quotes__btn{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(46,26,30,.2);
  background:#fff; color:var(--cafe);
  font-size:1.15rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.quotes__btn:hover{ background:var(--terracota); border-color:var(--terracota); color:#fff; }

/* =========================================================
   LUANA NA MÍDIA
   ========================================================= */
.media{
  position:relative; overflow:hidden; isolation:isolate;
  padding:110px 0;
  color:rgba(251,247,241,.85);
  background:
    radial-gradient(85% 120% at 0% 0%,   rgba(212,128,35,.22) 0%, rgba(212,128,35,0) 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(187,61,39,.26) 0%, rgba(187,61,39,0) 58%),
    var(--cafe);
}
.media__motif{
  position:absolute; top:-64px; left:-72px; width:300px; height:300px;
  opacity:.22; pointer-events:none; z-index:-1;
}
.media__motif svg{ width:100%; height:100%; overflow:visible; }

.media__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.94fr 1.06fr; gap:56px; align-items:center;
}
.media__text .section-head{ margin-bottom:0; max-width:none; }
/* Corpo um pouco menor para "Luana na mídia" caber sempre em uma linha */
.media .section-title{ font-size:clamp(2rem, 3.4vw, 2.9rem); }

.media__notes{
  list-style:none; margin:30px 0 0; padding:0;
  display:flex; flex-direction:column; gap:13px;
}
.media__notes li{
  display:flex; align-items:center; gap:12px;
  font-size:.92rem; color:rgba(251,247,241,.78);
}
.media__notes li i{ font-size:1.3rem; color:var(--ocre); flex:none; }

.link-arrow--light{
  margin-top:30px;
  color:var(--ocre); border-color:rgba(212,128,35,.32);
}
.link-arrow--light:hover{ border-color:var(--ocre); }

/* ---------- Palco de vídeo (fachada + player sob demanda) ---------- */
.media__player{ display:flex; flex-direction:column; gap:18px; }
.media__stage{ position:relative; }

.vid__frame{
  position:relative; display:block;
  width:100%; aspect-ratio:16/9;
  margin:0; padding:0; border:0;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#120A08;
  cursor:pointer;
  box-shadow:0 32px 62px -34px rgba(0,0,0,.95);
}
.vid__frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.vid__frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,9,7,.5) 0%, rgba(20,9,7,0) 58%);
}
.vid__frame:hover img{ transform:scale(1.05); }
.vid__frame:focus-visible{ outline:3px solid var(--ocre); outline-offset:3px; }

.vid__play{
  position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:78px; height:78px; border-radius:50%;
  padding-left:4px;
  background:rgba(212,128,35,.94); color:var(--cafe);
  font-size:2rem;
  box-shadow:0 18px 36px -12px rgba(0,0,0,.85);
  transition:transform .3s ease, background .3s ease;
}
.vid__frame:hover .vid__play{
  transform:translate(-50%,-50%) scale(1.09);
  background:var(--ocre);
}

.vid__badge{
  position:absolute; top:16px; left:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--cafe);
  background:var(--ocre);
  padding:7px 15px; border-radius:999px;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.85);
}
.vid__badge i{ font-size:.9rem; }

/* Faixa de título do vídeo em cartaz */
.media__stage-info{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:14px 24px;
}
.media__stage-title{ min-width:0; }
.media__stage-info h3{ color:var(--areia); font-size:1.3rem; line-height:1.25; }
.vid__meta{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:9px;
  font-size:.78rem; color:rgba(251,247,241,.55);
}
.vid__meta i{ font-size:1.1rem; color:rgba(251,247,241,.72); }
.vid__dot{ width:4px; height:4px; border-radius:50%; background:rgba(251,247,241,.35); }

.vid__external{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-size:.86rem; font-weight:600; color:var(--ocre);
  border-bottom:2px solid rgba(212,128,35,.3);
  padding-bottom:3px;
  transition:gap .25s ease, border-color .25s ease;
}
.vid__external:hover{ gap:14px; border-color:var(--ocre); }

/* Seletor: os dois vídeos lado a lado, o ativo destacado */
.media__picker{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-top:4px; padding-top:20px;
  border-top:1px solid rgba(251,247,241,.12);
}
.pick{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  text-align:left; font-family:var(--sans); color:inherit;
  padding:10px 12px 10px 10px;
  background:rgba(251,247,241,.05);
  border:1px solid rgba(251,247,241,.1);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background .28s ease, border-color .28s ease, transform .28s ease;
}
.pick:hover{ background:rgba(251,247,241,.11); transform:translateY(-2px); }
.pick:focus{ outline:none; }
.pick:focus-visible{ outline:2px solid var(--ocre); outline-offset:3px; }

/* Estado ativo: fundo ocre, contorno e barra lateral — não tem como confundir */
.pick--active{
  background:rgba(212,128,35,.2);
  border-color:var(--ocre);
  transform:none;
}
.pick--active::before{
  content:''; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--ocre);
}
.pick--active:hover{ transform:none; background:rgba(212,128,35,.24); }

.pick__thumb{
  position:relative; flex:none;
  width:92px; height:52px;
  border-radius:8px; overflow:hidden; background:#120A08;
}
.pick__thumb img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55; transition:opacity .28s ease;
}
.pick:hover .pick__thumb img,
.pick--active .pick__thumb img{ opacity:1; }

.pick__mini-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:#fff;
  background:rgba(20,9,7,.45);
  transition:background .28s ease, color .28s ease;
}
.pick--active .pick__mini-play{ background:rgba(212,128,35,.34); color:var(--cafe); }

.pick__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pick__text small{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:rgba(251,247,241,.45);
}
.pick--active .pick__text small{ color:var(--ocre); }
.pick__text strong{
  font-size:.9rem; font-weight:600; color:rgba(251,247,241,.72); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pick--active .pick__text strong{ color:var(--areia); }

/* Linha de estado: "Em exibição" no ativo, "Clique para assistir" nos outros */
.pick__state{
  display:flex; align-items:center; gap:6px;
  font-size:.7rem; color:rgba(251,247,241,.45);
  white-space:nowrap;
}
.pick__state i{ font-size:.95rem; }
.pick__state b{ font-weight:600; }
.pick__on{ display:none; }
.pick--active .pick__state{ color:var(--ocre); }
.pick--active .pick__on{ display:inline; }
.pick--active .pick__off{ display:none; }

/* Player já carregado no lugar da fachada */
.vid__frame--live{ cursor:default; background:#000; }
.vid__frame--live::after{ display:none; }
.vid__frame--live iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =========================================================
   REDES SOCIAIS
   ========================================================= */
.social{ padding:100px 0 110px; }
.social .section-head{ margin-bottom:52px; }

.social__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.social__card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:34px 32px 30px;
  background:#fff;
  border:1px solid rgba(46,26,30,.09);
  border-radius:var(--r-lg);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.social__card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 26px 50px -30px rgba(46,26,30,.55);
}
.social__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  font-size:1.6rem; color:#fff;
  margin-bottom:20px;
}
.social__icon--whats{ background:#25D366; }
.social__icon--insta{ background:linear-gradient(45deg,#F09433,#DC2743 45%,#BC1888); }
.social__icon--mail{ background:var(--verde); }

.social__label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--cafe-3); margin-bottom:7px;
}
.social__card strong{
  font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--cafe);
  line-height:1.3; word-break:break-word;
}
.social__go{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:18px; padding-top:16px;
  width:100%;
  border-top:1px solid rgba(46,26,30,.1);
  font-size:.86rem; font-weight:600; color:var(--terracota);
  transition:gap .25s ease;
}
.social__card:hover .social__go{ gap:12px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding:100px 0 110px; background:var(--areia-2); }
.faq .section-head{ margin-bottom:48px; }

.faq__list{
  max-width:820px; margin-inline:auto;
  display:flex; flex-direction:column; gap:14px;
}

.faq__item{
  background:#fff;
  border:1px solid rgba(46,26,30,.09);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .28s ease, box-shadow .28s ease;
}
.faq__item:hover{ border-color:rgba(212,128,35,.45); }
.faq__item[open]{
  border-color:transparent;
  box-shadow:0 22px 44px -32px rgba(49,21,19,.55);
}

.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 28px;
  font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--cafe);
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  transition:color .25s ease;
}
/* Some o triângulo padrão do <details> nos dois motores */
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:''; }
.faq__q:hover{ color:var(--terracota); }
.faq__q:focus{ outline:none; }
.faq__q:focus-visible{ outline:2px solid var(--ocre); outline-offset:-4px; }

.faq__icon{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(212,128,35,.12);
  color:var(--ocre); font-size:1.05rem;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease, color .3s ease;
}
.faq__item[open] .faq__icon{
  transform:rotate(135deg);
  background:var(--ocre); color:#fff;
}

.faq__a{
  padding:0 28px 26px;
  border-top:1px solid rgba(46,26,30,.08);
  margin-top:-4px; padding-top:20px;
  animation:faq-in .35s ease both;
}
.faq__a p{ margin:0; font-size:.98rem; color:var(--cafe-3); }

@keyframes faq-in{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}

.faq__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px;
  max-width:820px; margin:40px auto 0;
  font-size:.96rem; color:var(--cafe-3); text-align:center;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative; overflow:hidden;
  background:var(--cafe); color:rgba(251,247,241,.72);
  padding:82px 0 0;
}
.footer__motif{
  position:absolute; right:-70px; bottom:-70px; width:280px; height:280px;
  opacity:.22; pointer-events:none;
}
.footer__motif svg{ width:100%; height:100%; overflow:visible; }

.footer__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:48px;
  padding-bottom:56px;
}
.footer__logo{
  height:64px; width:auto; margin-bottom:18px;
  filter:brightness(0) invert(1);
}
.footer__brand p{ font-size:.92rem; margin:0; max-width:34ch; }

.footer__label{
  display:block;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ocre); margin-bottom:18px;
}
.footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__col a{ font-size:.92rem; transition:color .2s ease; }
.footer__col a:hover{ color:var(--areia); }

.footer__exp{ font-size:.92rem; margin:0 0 14px; line-height:1.6; }
.footer__link-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:600; color:var(--ocre);
  transition:gap .25s ease;
}
.footer__link-cta:hover{ gap:13px; }

.footer__bottom{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding-block:22px;
  border-top:1px solid rgba(251,247,241,.12);
}
.footer__bottom p{ margin:0; font-size:.82rem; color:rgba(251,247,241,.5); }
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(251,247,241,.18);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.footer__social a:hover{ background:var(--ocre); border-color:var(--ocre); color:var(--cafe); }

/* =========================================================
   LIGHTBOX DE FOTOS
   ========================================================= */
.is-zoomable{ cursor:zoom-in; }
.is-zoomable:focus-visible{
  outline:3px solid var(--ocre);
  outline-offset:3px;
}

.lightbox{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
  background:rgba(20,9,7,.9);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .26s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox--open{ opacity:1; }

.lightbox__frame{
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-width:100%; max-height:100%;
  transform:scale(.96);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.lightbox--open .lightbox__frame{ transform:scale(1); }

.lightbox__frame img{
  max-width:min(1100px, 100%);
  max-height:calc(100svh - 160px);
  width:auto; height:auto;
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  cursor:default;
}
.lightbox__frame figcaption{
  max-width:62ch; text-align:center;
  font-size:.86rem; line-height:1.5; color:rgba(251,247,241,.66);
}

.lightbox__close{
  position:absolute; top:22px; right:24px; z-index:2;
  width:50px; height:50px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  color:var(--areia);
  background:rgba(251,247,241,.1);
  border:1px solid rgba(251,247,241,.22);
  cursor:pointer;
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.lightbox__close:hover{
  background:var(--ocre); border-color:var(--ocre); color:var(--cafe);
  transform:rotate(90deg);
}
.lightbox__close:focus-visible{ outline:3px solid var(--ocre); outline-offset:3px; }

@media (max-width:640px){
  .lightbox{ padding:70px 16px 32px; }
  .lightbox__close{ top:16px; right:16px; width:44px; height:44px; font-size:1.3rem; }
  .lightbox__frame img{ max-height:calc(100svh - 180px); }
}

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.85rem;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.85);
  transition:transform .25s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }

/* =========================================================
   REVELAÇÃO AO SCROLL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

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

/* =========================================================
   RESPONSIVO
   ========================================================= */
/* Abaixo da largura máxima do container o menu perde folga: aperta gaps,
   corpo e o pill de idioma antes de precisar colapsar no hambúrguer. */
@media (max-width:1180px){
  .header__nav{ gap:18px; }
  .header__menu{ gap:14px; }
  .header__menu a{ font-size:.8rem; }
  .header__right{ gap:12px; }
  .lang-switch__btn{ font-size:.72rem; padding:5px 9px; gap:5px; }
  .lang-switch__flag{ width:16px; height:11px; }
  .header__cta{ padding:11px 18px; font-size:.86rem; }
}

@media (max-width:1080px){
  .hero__inner{ gap:46px; }
  .exp-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .educator__top{ gap:40px; }
  .team__inner{ gap:44px; }
  .exp-cta{ padding:48px 40px; gap:32px; }
  .media__inner{ gap:44px; }
  .agency__cta{ grid-template-columns:auto 1fr; row-gap:22px; }
  .agency__btn{ grid-column:1 / -1; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:42px; }
}

/* O header colapsa antes do resto do layout: mesmo com a logo menor, os sete
   itens do menu + idioma + CTA não cabem em uma linha abaixo de ~1080px. */
@media (max-width:1080px){
  .header__toggle{ display:flex; }
  .header{ background:rgba(251,247,241,.94); backdrop-filter:blur(14px); padding:12px 0; }
  /* Com o nav fora do fluxo, é o bloco da direita que segura a direita */
  .header__right{ margin-left:auto; }
  .header__nav{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--areia);
    border-top:1px solid rgba(46,26,30,.1);
    padding:12px 24px 26px;
    box-shadow:0 20px 40px -28px rgba(46,26,30,.6);
    display:none;
  }
  .header__nav--open{ display:flex; }
  .header__menu{ flex-direction:column; align-items:stretch; gap:0; }
  .header__menu a{
    display:block; padding:14px 0; font-size:1rem;
    border-bottom:1px solid rgba(46,26,30,.08);
  }
  /* Header mais baixo (12px + 60px + 12px) pede menos respiro no topo do hero */
  .hero{ padding-top:120px; }
  html{ scroll-padding-top:92px; }
}

@media (max-width:900px){
  .hero{ min-height:auto; padding:120px 0 70px; }

  /* No mobile a ordem vira: texto > botões > foto > números.
     display:contents dissolve o .hero__content para que a foto
     possa se posicionar entre os botões e as estatísticas. */
  /* align-items:stretch anula o align-items:center do grid do desktop,
     que no flex-column centralizaria tudo na horizontal. */
  .hero__inner{ display:flex; flex-direction:column; gap:0; align-items:stretch; }
  .hero__content{ display:contents; }
  .hero .eyebrow  { order:1; align-self:flex-start; }
  .hero__title    { order:2; }
  .hero__lead     { order:3; }
  .hero__actions  { order:4; }
  .hero__media    { order:5; margin-top:42px; }
  .hero__stats    { order:6; }

  .hero__photo{ max-width:360px; }
  .hero__photo img{ height:auto; width:100%; }
  .hero__motif--top{ width:230px; height:230px; }
  .hero__motif--bottom{ display:none; }

  .about, .educator, .experiences, .agency, .team, .reviews, .media{ padding:80px 0; }
  .about__grid{ grid-template-columns:1fr; gap:44px; }
  .about__text--first,
  .about__text--second,
  .about__figure--square,
  .about__figure--wide{ grid-column:1 / -1; grid-row:auto; }
  /* Evita duas fotos seguidas: a horizontal vai para o fim */
  .about__text--first   { order:1; }
  .about__figure--square{ order:2; max-width:340px; }
  .about__text--second  { order:3; }
  .about__figure--wide  { order:4; }

  .pillars{ grid-template-columns:1fr; gap:20px; }
  .section-head{ margin-bottom:44px; }
  .about .section-head{ margin-bottom:28px; }
  .agency__grid{ grid-template-columns:1fr; gap:18px; }

  /* Foto do time desce para baixo do texto e o grafismo sai do caminho */
  .team__inner{ grid-template-columns:1fr; gap:40px; }
  .team__figure img{ aspect-ratio:16/10; }
  .team__motif{ width:210px; height:210px; right:-56px; bottom:-58px; }

  .educator__top{ grid-template-columns:1fr; gap:34px; margin-bottom:52px; }
  .showroom{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(3,190px);
  }
  .showroom__tile--big{ grid-column:1 / 3; grid-row:1; }

  .exp-cta{ grid-template-columns:1fr; padding:40px 32px; }
  .exp-cta h3{ max-width:none; }
  .exp-cta__action{ align-items:stretch; }
  .exp-cta__motif{ width:200px; height:200px; }

  .media__inner{ grid-template-columns:1fr; gap:46px; }
  .media__motif{ width:210px; height:210px; }

  /* Faixa: textos centralizados, símbolos menores e recuados nos cantos */
  .strip__inner{ justify-content:center; gap:16px 30px; }
  .strip span{ justify-content:center; }
  .strip__symbol{ width:38px; height:38px; }
  .strip__symbol--left{ left:12px; }
  .strip__symbol--right{ right:12px; }

  .social{ padding:80px 0; }
  .social__grid{ grid-template-columns:1fr; gap:18px; }

  .faq{ padding:80px 0; }
  .faq .section-head{ margin-bottom:36px; }

  /* Depoimentos viram carrossel no mobile */
  .quotes{
    grid-template-columns:none;
    grid-auto-flow:column; grid-auto-columns:minmax(84%,1fr);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
  }
  .quotes__nav{ display:flex; }
}

@media (max-width:640px){
  body{ font-size:16px; }

  /* Selo menor para não disputar espaço com o grafismo do canto */
  .hero .eyebrow{
    font-size:.6rem; letter-spacing:.12em;
    padding:5px 12px 5px 9px; gap:6px;
    margin-bottom:20px;
    background:rgba(251,247,241,.94);
  }
  .hero .eyebrow i{ font-size:.9rem; }
  .hero__motif--top{ width:190px; height:190px; top:-64px; right:-58px; }

  /* Números viram lista: valor à esquerda, rótulo à direita */
  .hero__stats{
    display:grid; grid-template-columns:1fr; gap:0;
    margin-top:34px; padding-top:0;
    border-top:0;
  }
  .hero__stats li{
    flex-direction:row; align-items:baseline; justify-content:space-between; gap:18px;
    padding:13px 0;
    border-top:1px solid rgba(49,21,19,.12);
  }
  .hero__stats li:last-child{ border-bottom:1px solid rgba(49,21,19,.12); }
  .hero__stats strong{ font-size:1.6rem; }
  .hero__stats span{ margin-top:0; text-align:right; }
  .exp-grid{ grid-template-columns:1fr; }
  .exp-card{ aspect-ratio:4/5; }
  .exp-card__body{ padding:28px 24px 26px; }
  .exp-card__body h3{ font-size:1.65rem; }
  .exp-card__body p{ font-size:.9rem; }
  .exp-cta{ padding:30px 26px; }
  .agency__card{ padding:30px 26px 28px; }
  .agency__cta{ grid-template-columns:1fr; text-align:center; justify-items:center; padding:28px 24px; }
  .agency__figure{ width:88px; height:88px; }
  .score{ padding:28px 34px; min-width:0; width:100%; }
  .showroom{ grid-template-rows:repeat(3,150px); }
  .exp-cta__score strong{ font-size:2.1rem; }
  .footer__inner{ grid-template-columns:1fr; gap:34px; }
  .footer__logo{ height:54px; }
  .quotes{ grid-auto-columns:minmax(90%,1fr); }
  .btn--lg{ width:100%; }
  .hero__actions{ flex-direction:column; align-items:stretch; }

  .about__note{ padding-left:14px; gap:11px; }

  /* Uma linha por item, cada uma centralizada entre os dois símbolos */
  .strip__inner{ flex-direction:column; align-items:center; gap:13px; padding-block:24px; }
  .strip__symbol{ width:32px; height:32px; }
  .strip__symbol--left{ left:10px; }
  .strip__symbol--right{ right:10px; }

  /* Marca + pill + CTA + hambúrguer precisam caber juntos na mesma linha,
     então o CTA vira só o ícone do WhatsApp. */
  .brand img{ height:52px; }
  .header--scrolled .brand img{ height:46px; }
  .header__right{ gap:10px; }
  .lang-switch{ padding:2px; }
  .lang-switch__btn{ font-size:.66rem; padding:5px 7px; gap:4px; }
  .lang-switch__flag{ width:14px; height:10px; }
  .header__cta{ width:42px; height:42px; padding:0; border-radius:50%; }
  .header__cta i{ font-size:1.3rem; }
  .header__cta-label{ display:none; }

  .faq__q{ padding:20px 20px; font-size:1rem; gap:14px; }
  .faq__icon{ width:30px; height:30px; font-size:.95rem; }
  .faq__a{ padding:18px 20px 22px; }
  .faq__foot{ flex-direction:column; gap:10px; }

  .vid__play{ width:60px; height:60px; font-size:1.5rem; }
  .media__stage-info h3{ font-size:1.14rem; }
  .media__picker{ grid-template-columns:1fr; gap:10px; }
  .pick__thumb{ width:92px; height:52px; }
  .btn--duo{ padding:14px 20px 15px 18px; gap:13px; }
  .btn__stack strong{ font-size:.98rem; }
}

/* Telas muito estreitas: nem o ícone do CTA cabe ao lado da marca e do pill.
   Some do header — o botão flutuante do WhatsApp continua a um toque. */
@media (max-width:400px){
  .header__cta{ display:none; }
  .header__right{ gap:0; }
}