/* ============================================================
   ADRIANA ZAGO - Landing Page
   Fontes: CLIMORA (títulos) · Plus Jakarta Sans (texto)
   ============================================================ */
@font-face{
  font-family:"CLIMORA";
  src:url("assets/climora-regular.woff2") format("woff2");
  font-weight:1 1000;   /* face única cobre qualquer peso pedido (títulos usam 500) */
  font-style:normal;
  font-display:swap;
}
:root{
  --vinho:#82211a;
  --verde:#0d4040;
  --areia:#dbcfbd;
  --creme:#ece4d9;
  --marrom:#b28c6b;
  --texto:#262525;
  --btn-claro:#f0eae0;
  --serif:"CLIMORA", Georgia, "Times New Roman", serif;
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--texto);
  background:var(--creme);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;font-weight:500;}
p{margin:0 0 1.1em;}
strong{font-weight:700;}
.only-mob{display:none;}  /* quebra de linha só no mobile/tablet */

/* ---------- Títulos serifados ---------- */
.section-title,
.hero__title{
  font-family:var(--serif);
  color:var(--vinho);
  font-weight:500;
  line-height:1.08;
  letter-spacing:.01em;
}

/* ---------- Botões ---------- */
.btn{
  --bg:var(--verde); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:600;font-size:1.05rem;
  padding:.85em 2.2em;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;line-height:1.2;text-align:center;white-space:nowrap;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.btn--verde{--bg:var(--verde);--fg:var(--btn-claro);}
.btn--areia{--bg:var(--areia);--fg:var(--vinho);}
.btn--marrom{--bg:var(--marrom);--fg:var(--creme);}
.btn--vinho{--bg:var(--vinho);--fg:#fff;}

/* ---------- Faixa de marca (logo repetido) ---------- */
.brand-strip{
  height:52px;
  background-color:var(--marrom);
  background-image:url("assets/logo-vinho.webp");
  background-repeat:repeat-x;
  background-size:236px auto;   /* largura de 1 logo (loop fecha exato nesse valor) */
  background-position:0 center;
  opacity:.92;
  animation: brand-scroll 6s linear infinite;  /* VELOCIDADE: maior = mais devagar */
}
@keyframes brand-scroll{
  to{ background-position-x:-236px; }  /* desloca exatamente 1 logo = loop sem "pulo" */
}
/* respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce){
  .brand-strip{ animation:none; }
}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative;display:flex;align-items:center;
  background:var(--creme);
  min-height:994px;overflow:hidden;
}
/* foto ocupa todo o fundo */
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:right 25%;}
/* degradê creme sobre o lado do texto */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--creme) 0%,
    var(--creme) 30%,
    rgba(236,228,217,.94) 42%,
    rgba(236,228,217,.55) 54%,
    rgba(236,228,217,0) 66%);
}
.hero__content{position:relative;z-index:2;padding:0 58px 58px 384px;max-width:900px;margin-right:auto; transform: translateY(-65px);}
.hero__logo{width:240px;margin-bottom:-2rem; margin-left: -2rem;}
.hero__title{font-size:3.5rem;margin-bottom:1.1rem;white-space:nowrap;}
.hero__lead{
  font-family:var(--sans);font-size:1.75rem;
  color:var(--texto);font-weight:500;margin-bottom:1.6rem;line-height:1.35;
}
.hero__body{
  border-left:2px solid var(--verde);
  padding-left:1.2rem;max-width:720px;
  font-size:1.18rem;color:var(--texto);margin-bottom:2rem;
}

/* ============================================================
   02 · VÍDEO
   ============================================================ */
.video{
  background:var(--verde) url("assets/bg-02.webp") center/cover no-repeat;
  padding:5vw 6vw 4vw;
  display:flex;flex-direction:column;align-items:center;gap:2.4rem;
}
.video__frame{
  width:min(1000px,86vw);aspect-ratio:16/9;
  border:1.5px solid var(--areia);border-radius:26px;
  display:flex;align-items:center;justify-content:center;
}
.video__hint{color:var(--areia);opacity:.45;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;}

/* ============================================================
   03 · FORMAÇÃO
   ============================================================ */
.formacao{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--areia) 0%,var(--areia) 45%,var(--marrom) 100%);
  display:grid;grid-template-columns:1fr 1.1fr;gap:58px;align-items:center;
  padding:115px 115px;
}
/* marca-d'água "A" gigante */
.formacao::before{
  content:"";position:absolute;left:-6%;top:50%;transform:translateY(-50%);
  width:60%;height:120%;
  background:url("assets/simbolo-verde.webp") left center/contain no-repeat;
  opacity:.10;pointer-events:none;
}
.formacao__media{position:relative;z-index:1; transform: translate(120px, -20px);}
.formacao__media img{
  width:100%;max-width:580px;aspect-ratio:5/6;object-fit:cover;
  border-radius:200px 0px 200px 0px;margin-inline:auto;
  box-shadow:0 24px 60px rgba(38,37,37,.18);
}
.formacao__content{position:relative;z-index:1;max-width:620px; transform: scale(1.2); transform-origin: left center;}
.formacao .section-title{font-size:3.1rem;margin-bottom:1.1rem;}
.formacao__lead{font-size:1.12rem;max-width:480px;margin-bottom:1.6rem;}
.pills{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.7rem;max-width:560px;}
.pills li{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--vinho);color:var(--areia);
  padding:.5em 1em;border-radius:8px;font-size:.98rem;font-weight:500;
}
.pills li img{width:32px;height:32px;flex:none;margin-top:-4px;margin-bottom:-4px;}
.formacao__close{font-size:1.1rem;margin:0;}
.formacao__mob{display:none;}  /* container da foto - só aparece no mobile/tablet */
/* botão volta ao tamanho padrão (desconta o scale 1.2 do bloco) */
.formacao__content .btn{transform:scale(.833);transform-origin:left center;}
.formacao__content .btn:hover{transform:scale(.833) translateY(-2px);}

/* ============================================================
   04 · SERVIÇOS
   ============================================================ */
.servicos{
  background:var(--vinho) url("assets/bg-vinho.webp") center/cover no-repeat;
  color:var(--areia);
  padding:115px 58px 134px;text-align:center;
}
.servicos__title{
  font-family:var(--serif);color:var(--areia);font-weight:500;
  font-size:3rem;line-height:1.12;margin-bottom:4rem;
}
.servicos__grid{
  max-width:1340px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(360px,1fr) auto minmax(360px,1fr);gap:8rem;align-items:center;
}
.svc{display:flex;flex-direction:column;gap:3.5rem;}
.svc__card{display:flex;flex-direction:column;}
.svc--right{text-align:left;}
.svc--left{text-align:right;align-items:flex-end;}
.svc__card h3{font-family:var(--serif);font-size:2.5rem;font-weight:500;color:var(--areia);margin-bottom:.5rem;line-height:1.1;}
.svc__sub{font-weight:700;font-size:1rem;letter-spacing:.03em;color:var(--areia);margin-bottom:.5rem;}
.svc__desc{font-size:1rem;color:var(--areia);opacity:.9;margin-bottom:1rem;max-width:520px;}
.svc--left .svc__desc{margin-left:auto;}
.svc__card .btn{align-self:center;}
.svc--left .svc__card .btn{align-self:flex-end;}
.svc--right .svc__card .btn{align-self:flex-start;}
/* ícone ao lado do título - só aparece no mobile/tablet (no desktop usa o hub) */
.svc__ic{display:none;width:38px;height:38px;flex:none;background-color:var(--areia);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;}

/* hub central */
.hub{
  position:relative;width:260px;height:260px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;
  flex:none;justify-self:center;
  transform: scale(1.9);
}
.hub__cell{border-radius:16px;display:flex;align-items:center;justify-content:center;}
.hub__cell--verde{background:var(--verde);}
.hub__cell--areia{background:var(--marrom);}
.ic{width:46px;height:46px;mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}
.ic--areia{background-color:var(--areia);}
.ic--verde{background-color:var(--verde);}
.hub__logo{
  position:absolute;inset:0;margin:auto;width:104px;height:104px;
  background:var(--creme);border:6px solid var(--verde);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.hub__logo img{width:58px;}

/* ============================================================
   04B · POR DENTRO DE CADA TRABALHO (Mentoria) — DESKTOP
   ============================================================ */
.mentoria{
  position:relative;overflow:hidden;
  background:var(--creme);                 /* COR DE FUNDO da seção */
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;  /* foto | texto */
}
/* marca-d'água "A" atrás do texto (edite só os 4 valores abaixo) */
.mentoria::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;

  --marca-x: 800px;      /* POSIÇÃO horizontal: + = direita, - = esquerda */
  --marca-y: 0px;      /* POSIÇÃO vertical:   + = baixo,   - = cima */
  --marca-tam: 140%;    /* TAMANHO: maior = maior (pode usar px, ex.: 500px) */
  --marca-op: .15;     /* OPACIDADE: 0 (invisível) a 1 (cheia) */

  background-image:url("assets/simbolo-bege.webp");
  background-repeat:no-repeat;
  background-size:var(--marca-tam);
  background-position: calc(100% + var(--marca-x)) calc(50% + var(--marca-y));
  opacity:var(--marca-op);
}
/* foto à esquerda: altura travada pela altura do texto (não estica a seção) */
.mentoria__media{position:relative;z-index:1;overflow:hidden;}
.mentoria__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;

  /* ---- RECORTE da foto ---- */
  object-position:center 95%;   /* 2º valor: menor% = mostra mais o topo/janela | maior% = mais a base */

  /* ---- MOVER a imagem inteira (o degradê vai junto) ---- */
  --empurrar-x: 150px;            /* + = direita, - = esquerda (ex.: 80px) */
  --empurrar-y: 0px;            /* + = baixo, - = cima */
  transform: translate(var(--empurrar-x), var(--empurrar-y));

  /* ---- DEGRADÊ oval ao redor da Adri (edite só os 5 valores abaixo) ---- */
  --foco-x: 40%;         /* posição do foco na HORIZONTAL (0 = esquerda, 100 = direita) */
  --foco-y: 55%;         /* posição do foco na VERTICAL (0 = topo, 100 = base) */
  --oval-largura: 35%;   /* LARGURA do oval (menor = mais estreito) */
  --oval-altura: 85%;   /* ALTURA do oval (maior = mais alto) */
  --parte-nitida: 55%;   /* até onde a foto fica CHEIA antes de desbotar (maior = desbota mais tarde) */

  /* (não precisa mexer nestas duas — elas só montam o degradê com os valores acima) */
  -webkit-mask-image:radial-gradient(var(--oval-largura) var(--oval-altura) at var(--foco-x) var(--foco-y), #000 var(--parte-nitida), transparent 100%);
          mask-image:radial-gradient(var(--oval-largura) var(--oval-altura) at var(--foco-x) var(--foco-y), #000 var(--parte-nitida), transparent 100%);
}
/* bloco de texto à direita */
.mentoria__content{
  position:relative;z-index:1;padding:90px 96px 90px 72px;max-width:820px;

  /* ---- MOVER o bloco de texto inteiro ---- */
  --texto-x: -100px;   /* + = direita, - = esquerda */
  --texto-y: 0px;   /* + = baixo, - = cima */
  transform: translate(var(--texto-x), var(--texto-y));
}
.mentoria__eyebrow{font-family:var(--sans);font-size:1.5rem;color:var(--texto);font-weight:500;margin:0 0 .4rem;}
.mentoria .section-title{font-size:3.1rem;margin-bottom:1.2rem;}
.mentoria__badge{display:inline-block;background:var(--verde);color:var(--btn-claro);
  font-family:var(--sans);font-weight:600;font-size:1.05rem;padding:.55em 1.3em;border-radius:999px;margin-bottom:1.7rem;}
.mentoria__lead{font-size:1.12rem;max-width:600px;margin-bottom:1.8rem;}
.mentoria__pilares-title{font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.03em;
  color:var(--vinho);text-transform:uppercase;margin:0 0 1rem;}
.mentoria__pilares{list-style:none;margin:0 0 1.6rem;padding:0;max-width:600px;}
.mentoria__pilar{padding:.85rem 0;margin:0;font-size:1.05rem;line-height:1.4;}
.mentoria__pilar + .mentoria__pilar{border-top:1.5px solid var(--verde);}  /* linha verde entre os pilares */
.mentoria__pilar strong{color:var(--texto);font-weight:700;}
.mentoria__nota{font-style:italic;font-size:1.05rem;max-width:560px;margin:0 0 1.9rem;}

/* ============================================================
   04C · SOLUÇÕES (Consultoria · Análise · Endurance) — DESKTOP
   ============================================================ */
.solucoes{
  background:var(--vinho) url("assets/bg-vinho.webp") center/cover no-repeat;
  color:var(--areia);
  padding:115px 115px 130px;
  display:flex;flex-direction:column;gap:64px;
}
/* linhas alternadas: texto + foto */
.solucoes__row{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  max-width:1340px;margin-inline:auto;width:100%;
}
.solucoes__row--reverse .solucoes__text{order:2;}   /* bloco 2: foto à esquerda, texto à direita */
.solucoes__row--reverse .solucoes__img{order:1;}
.solucoes__title{
  font-family:var(--serif);color:var(--areia);font-weight:500;
  font-size:2.7rem;line-height:1.1;margin-bottom:1.1rem;
}
.solucoes__text p{font-size:1.05rem;color:var(--areia);margin-bottom:1.1rem;max-width:560px;}
.solucoes__text p strong{color:#fff;font-weight:700;}
.solucoes__text .btn{margin-top:.4rem;}
/* fotos dos blocos com cantos arredondados */
.solucoes__img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.22);
}
/* recorte individual de cada foto (maior % = SOBE a imagem) */
.solucoes__row:not(.solucoes__row--reverse) .solucoes__img img{object-position:center 50%;}  /* Consultoria */
.solucoes__row--reverse .solucoes__img img{object-position:center 68%;}                       /* Análise (sobe um pouco) */
/* linha divisória entre os blocos 1 e 2 */
.solucoes__divider{
  border:0;height:1px;background:var(--marrom);opacity:.6;
  max-width:1340px;width:100%;margin:0 auto;
}

/* --- Card Endurance Scale (fundo creme) --- */
.endurance{
  --foto-altura:640px;   /* ALTURA da foto (mostra mais da imagem quando maior; ~1050px = foto inteira) */
  max-width:1340px;margin:16px auto 0;width:100%;
  background:var(--creme);color:var(--texto);
  border-radius:28px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.endurance__text{padding:56px 56px 56px 60px;align-self:center;}
.endurance__badge{
  display:inline-block;border:1.5px solid var(--verde);color:var(--verde);
  font-family:var(--sans);font-weight:600;font-size:.9rem;
  padding:.35em 1.1em;border-radius:999px;margin-bottom:1rem;
}
.endurance__title{font-family:var(--serif);color:var(--vinho);font-weight:500;font-size:2.7rem;line-height:1.05;margin-bottom:.9rem;}
.endurance__sub{font-weight:700;font-size:1.12rem;color:var(--texto);margin-bottom:1.2rem;line-height:1.3;}
.endurance__text p{font-size:1.02rem;color:var(--texto);margin-bottom:1.1rem;max-width:560px;}
.endurance__duo{list-style:none;margin:0 0 1.1rem;padding:0;}
.endurance__duo li{
  border-left:3px solid var(--vinho);padding:.15rem 0 .15rem .8rem;margin-bottom:.5rem;
  font-size:1.02rem;line-height:1.35;
}
.endurance__duo strong{color:var(--vinho);font-weight:700;}
.endurance__img{
  position:relative;
  min-height:var(--foto-altura, 100%);   /* ALTURA da foto: maior = aparece MAIS da imagem (ex.: 700px, 850px; ~1050px = foto inteira). Card acompanha */
}
.endurance__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 25%;         /* SOBE/DESCE a foto: maior % = SOBE mais (0%/top = desce tudo, mostra o topo) */
  border-radius:22px 0 0 22px;        /* arredonda SÓ os cantos internos (esquerda); os de fora seguem o card */
}

/* ============================================================
   05 · CLAREZA
   ============================================================ */
.clareza{
  position:relative;overflow:hidden;background:var(--creme);
  display:grid;grid-template-columns:1.15fr 1fr;gap:58px;align-items:stretch;
  /* ===== CONTROLES DO DEGRADÊ (mexa só aqui) ===== */
  --blend-inicio: 50%;  /* PONTO 1: até onde a textura fica 100% (cheia) */
  --blend-meio:   70%;  /* PONTO 2 (meio): cria a curva suave. Opacidade nesse ponto = --blend-meio-op */
  --blend-meio-op: 0;  /* opacidade no meio (0 a 1). Menor = some mais rápido no comeco, cauda mais leve */
  --blend-fim:    50%;  /* PONTO 3 (final): até onde some de vez. Mais longe = final MAIS suave */
  /* ===== OPACIDADES ===== */
  --textura-op: 0.2;      /* opacidade GERAL da textura (imagem da esquerda). 0 a 1 */
  --bege-cor:  #dbcfbd; /* cor bege atrás da textura */
  --bege-op:   1;      /* opacidade da cor bege. 0 a 1 */
}
/* FOTO = camada de baixo, cobre a seção toda */
.clareza__media{position:absolute;inset:0;z-index:0;}
.clareza__media img{
  position:absolute;
  height:170%;   /* TAMANHO: mexe aqui (100% = altura da faixa; 80% menor; 130% maior) */
  width:auto;    /* mantém a proporção - sem cortar e sem esticar */
  right:0;       /* POSIÇÃO horizontal: 0 = colada na direita. Ex.: 5% empurra p/ dentro */
  bottom:150;      /* POSIÇÃO vertical: 0 = alinhada embaixo. Ex.: bottom:10% sobe (sempre com % ou px!) */
}
/* COR BEGE - entre a foto e a textura, com o mesmo degradê */
.clareza::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bege-cor);
  opacity:var(--bege-op);
  -webkit-mask-image:linear-gradient(90deg,#000 var(--blend-inicio),rgba(0,0,0,var(--blend-meio-op)) var(--blend-meio),transparent var(--blend-fim));
          mask-image:linear-gradient(90deg,#000 var(--blend-inicio),rgba(0,0,0,var(--blend-meio-op)) var(--blend-meio),transparent var(--blend-fim));
}
/* TEXTURA por cima da foto, esmaecendo por OPACIDADE da esquerda p/ a direita */
.clareza::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("assets/bg-textura.webp") center/cover no-repeat;
  opacity:var(--textura-op);
  -webkit-mask-image:linear-gradient(90deg,#000 var(--blend-inicio),rgba(0,0,0,var(--blend-meio-op)) var(--blend-meio),transparent var(--blend-fim));
          mask-image:linear-gradient(90deg,#000 var(--blend-inicio),rgba(0,0,0,var(--blend-meio-op)) var(--blend-meio),transparent var(--blend-fim));
}
.clareza__content{position:relative;z-index:3;padding:96px 58px 96px 115px;max-width:1000px;transform:translateX(115px);}
.clareza .section-title{font-size:3.4rem;margin-bottom:1.4rem;max-width:800px;}
.clareza__content p{max-width:800px;font-size:1.30rem;}
.clareza__pilares{font-family:var(--serif);color:var(--vinho);font-size:2rem;font-weight:500;margin:2rem 0 1.6rem;}

/* timeline */
.timeline{max-width:8000px;}
.timeline__track{position:relative;height:2px;background:var(--marrom);margin:0 0 .2rem;}
.timeline__track .dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--verde);transform:translate(-50%,-50%);}
.timeline__nums{position:relative;height:1.4rem;color:var(--verde);font-size:.85rem;}
.timeline__nums span{position:absolute;transform:translateX(-50%);}
.timeline__nums span:nth-child(1){left:16.66%;}
.timeline__nums span:nth-child(2){left:50%;}
.timeline__nums span:nth-child(3){left:83.33%;}
.timeline__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.6rem;}
.tl-card{background:var(--verde);color:var(--areia);border-radius:12px;padding:1rem 1.1rem;font-size:.95rem;text-align:center;}
.tl-card strong{color:#fff;}

/* ============================================================
   06 · HISTÓRIAS REAIS
   ============================================================ */
.historias{
  background:var(--vinho);color:var(--areia);
  padding:115px 115px 134px;text-align:center;
}
.historias__title{font-family:var(--serif);color:var(--areia);font-weight:500;font-size:3.4rem;margin-bottom:3rem;}
.historias__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.depo{margin:0;background:rgba(219,207,189,.08);border:1px solid rgba(219,207,189,.28);border-radius:16px;padding:2rem 1.6rem;text-align:left;}
.depo blockquote{margin:0 0 1.4rem;font-size:1.05rem;line-height:1.5;font-style:italic;}
.depo figcaption{font-weight:700;display:flex;flex-direction:column;font-size:.95rem;}
.depo figcaption span{font-weight:400;opacity:.75;font-size:.85rem;}

/* ============================================================
   07 · CONTATO
   ============================================================ */
.contato{
  position:relative;overflow:hidden;background:var(--creme);
  display:flex;justify-content:flex-end;align-items:stretch;
  /* ===== CONTROLES DO BURACO RADIAL (onde a Adri aparece) ===== */
  --rad-x: 15%;    /* POSIÇÃO horizontal do buraco */
  --rad-y: 55%;    /* POSIÇÃO vertical do buraco */
  --rad-w: 43%;    /* FORMA: largura do buraco (raio) */
  --rad-h: 75%;    /* FORMA: altura do buraco (raio) */
  --rad-core: 60%; /* miolo 100% aberto */
  --rad-meio:    85%; /* PONTO 2: segura a força até aqui antes de fechar na borda */
  --rad-meio-op: 1; /* opacidade nesse ponto - MENOR = Adri mais forte antes do miolo */
  /* ===== OPACIDADES DAS CAMADAS DE CIMA ===== */
  --textura2-op: .3;      /* opacidade da textura */
  --bege2-cor: #dbcfbd;  /* cor bege */
  --bege2-op: 1;        /* opacidade do bege */
}
/* FOTO ADRI = camada de baixo (cobre a seção) */
.contato__media{position:absolute;inset:0;z-index:0;min-height:0;}
.contato__media img{
  position:absolute;
  height:175%;    /* TAMANHO da foto (menor = %, maior = %). Mantém proporção */
  width:auto;    /* NÃO MEXA - trava a proporção (sem cortar/esticar) */
  left:0;        /* POSIÇÃO horizontal: 0 = colada na esquerda. Ex.: 5% p/ dentro */
  bottom:-20%;      /* POSIÇÃO vertical: 0 = embaixo. Ex.: 10% sobe (sempre com % ou px!) */
}
/* BEGE - camada do meio, com buraco radial */
.contato::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bege2-cor);opacity:var(--bege2-op);
  -webkit-mask-image:radial-gradient(ellipse var(--rad-w) var(--rad-h) at var(--rad-x) var(--rad-y),transparent var(--rad-core),rgba(0,0,0,var(--rad-meio-op)) var(--rad-meio),#000 100%);
          mask-image:radial-gradient(ellipse var(--rad-w) var(--rad-h) at var(--rad-x) var(--rad-y),transparent var(--rad-core),rgba(0,0,0,var(--rad-meio-op)) var(--rad-meio),#000 100%);
}
/* TEXTURA - camada de cima, com o mesmo buraco radial */
.contato::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("assets/bg-textura.webp") center/cover no-repeat;opacity:var(--textura2-op);
  -webkit-mask-image:radial-gradient(ellipse var(--rad-w) var(--rad-h) at var(--rad-x) var(--rad-y),transparent var(--rad-core),rgba(0,0,0,var(--rad-meio-op)) var(--rad-meio),#000 100%);
          mask-image:radial-gradient(ellipse var(--rad-w) var(--rad-h) at var(--rad-x) var(--rad-y),transparent var(--rad-core),rgba(0,0,0,var(--rad-meio-op)) var(--rad-meio),#000 100%);
}
.contato__content{position:relative;z-index:3;padding:96px 77px 96px 77px;max-width:640px;transform:translateX(-288px);}
.contato .section-title{font-size:3.1rem;margin-bottom:1.6rem;width:780px;}
.btn--wpp{background:var(--verde);color:var(--btn-claro);margin-bottom:2rem;}
.btn--wpp img{width:20px;height:20px;}
.btn--wpp strong{font-weight:700;}

.form{display:flex;flex-direction:column;gap:1.1rem;max-width:700px;}
.form label{display:flex;flex-direction:column;gap:.4rem;font-size:.95rem;color:var(--texto);font-weight:500;}
.form input,.form textarea{
  font-family:var(--sans);font-size:1rem;color:var(--texto);
  background:rgba(240,234,224,.75);border:1px solid rgba(178,140,107,.4);border-radius:10px;
  padding:.85em 1em;resize:vertical;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--verde);outline-offset:1px;}
.form .btn{align-self:flex-start;margin-top:.4rem;}

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{
  background:var(--verde);color:var(--areia);
  padding:1.7rem 115px;
  display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap;
}
.footer__social{display:flex;align-items:center;gap:1.2rem;}
.footer__social p{font-family:var(--serif);font-size:1.4rem;margin:0;color:var(--areia);line-height:1.15;white-space:nowrap;}
.footer__icons{display:flex;gap:.8rem;}
.footer__icons img{width:46px;height:46px;}
.footer__logo{height:45px;width:auto;}  /* TAMANHO da logo (recortada, sem espaço em branco) */

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* ===== TABLET + CELULAR (≤1199px): empilha e reseta os ajustes de desktop =====
   (Mac/notebook ≥1200px usam o desktop reduzido por zoom - ver script no HTML.
    Refinamentos só de tablet ficam no bloco "SÓ TABLET" mais abaixo.) */
@media (max-width:1199px){
  /* trava anti-rolagem lateral: nada faz a tela arrastar pro lado */
  html,body{overflow-x:hidden;}

  /* ---- HERO ---- */
  .hero{flex-direction:column;min-height:0;}
  .hero::before{display:none;}
  .hero__media{position:relative;order:1;width:100%;height:70vw;min-height:340px;}
  /* degradê suave no fim da foto, dissolvendo no creme */
  .hero__media::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;
    background:linear-gradient(to bottom,rgba(236,228,217,0),var(--creme));pointer-events:none;z-index:2;}
  .hero__content{position:static;order:2;padding:10vw 7vw 8vw;max-width:none;transform:none;}
  /* logo SOBRE a foto, no topo, mesma direção (esquerda) */
  .hero__logo{position:absolute;top:-4vw;left:0vw;z-index:3;width:200px;margin:0;}
  .hero__title{white-space:normal;}

  /* ---- FORMAÇÃO ---- */
  .formacao{grid-template-columns:1fr;gap:0;padding:12vw 7vw;}
  .formacao::before{display:none;}
  .formacao__media{display:none;}  /* no mobile a foto vai inline, entre o texto e as pills */
  .formacao__content{order:1;max-width:none;transform:none;}
  /* foto entre o parágrafo e as pills, com a marca-d'água "A" atrás */
  .formacao__mob{display:block;position:relative;}
  .formacao__mob::before{content:"";position:absolute;z-index:-1;left:15%;top:50%;transform:translate(-50%,-50%);
    width:150%;height:180%;background:url("assets/simbolo-verde.webp") center/contain no-repeat;
    opacity:.08;pointer-events:none;}
  .formacao__img-mobile{display:block;position:relative;z-index:1;width:72%;max-width:340px;margin:1.6rem auto 2.2rem;
    border-radius:110px 0 110px 0;aspect-ratio:5/6;object-fit:cover;object-position:center;}
  .formacao__content .btn{transform:none;}
  .formacao__content .btn:hover{transform:translateY(-2px);}

  /* ---- SERVIÇOS (cards em blocos, lados alternados como no desktop) ---- */
  .servicos{padding:16vw 5vw 18vw;}
  .servicos__title{text-align:left;}
  .only-desk{display:none;}   /* no mobile some a quebra do desktop */
  .only-mob{display:inline;}  /* e aparece a quebra do mobile (só "no caminho?" na última linha) */
  .servicos__grid{grid-template-columns:1fr;gap:1.4rem;max-width:560px;}
  .svc{gap:1.4rem;}
  .hub{display:none;}  /* remove o hub central (e o "A") no mobile/tablet */
  /* libera as quebras de linha no mobile (vence os style="nowrap" inline do desktop) */
  .btn,.svc__card h3,.svc__sub{white-space:normal !important;}
  /* o bloco/card */
  .svc__card{background:rgba(0,0,0,.18);border:1px solid rgba(219,207,189,.16);
    border-radius:18px;padding:1.6rem 1.5rem;gap:.45rem;}
  .svc__head{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:.4rem;align-self:center;}
  .svc__head h3{text-align:center;}
  .svc__ic{display:block;width:38px;height:38px;}
  .svc__sub{margin-bottom:.3rem;}
  .svc__desc{max-width:none;margin-bottom:1.1rem;}
  .svc__sub,.svc__desc{width:100%;margin-inline:0;}  /* ocupam a largura toda → texto sempre à esquerda */
  .svc--left .svc__sub,.svc--left .svc__desc,
  .svc--right .svc__sub,.svc--right .svc__desc{width:100%;margin-left:0;margin-right:0;}  /* vence o margin-left:auto do desktop */
  .svc__card{width:100%;flex-grow:1;}  /* card preenche a linha → todos iguais (Consultoria não encolhe) */
  .svc--left .svc__card .btn,.svc--right .svc__card .btn{align-self:center;}  /* botão sempre centralizado */
  .servicos .btn{font-size:.8rem;padding:.85em 1.6em;}  /* fonte + padding menores p/ caber em 1 linha */
  /* tudo à esquerda; só o título (com ícone) fica centralizado */
  .svc__card{text-align:left;align-items:flex-start;}

  /* ---- MENTORIA (Por dentro de cada trabalho): foto em cima, texto embaixo ---- */
  .mentoria{grid-template-columns:1fr;}
  .mentoria__media{position:relative;height:120vw;min-height:380px;overflow:hidden;}   /* ALTURA da foto no mobile */
  .mentoria__media img{
    height:100%;
    object-position:center 20%;                 /* RECORTE: o que aparece (maior% = sobe) */
    transform:translate(85px, -75px) scale(1.9);   /* translate(X,Y): X = LADO (+direita/-esquerda) · Y = descer(+)/subir(-) · scale = ZOOM */
    -webkit-mask-image:none;mask-image:none;    /* degradê agora é a camada abaixo (não escala junto com o zoom) */
  }
  /* degradê SÓ embaixo, como camada por cima (independente do zoom da foto) */
  .mentoria__media::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;
    height:45%;                                 /* ALTURA do degradê (maior = mais suave/longo) */
    background:linear-gradient(to bottom, transparent, var(--creme) 88%);  /* vira creme sólido antes do fim → sem fresta da foto embaixo */
    pointer-events:none;z-index:2;
  }
  .mentoria__content{padding:2vw 7vw 12vw;max-width:none;transform:none;}  /* padding-top menor = SOBE o texto (zera o --texto-x do desktop) */
  .mentoria__eyebrow{font-size:1.15rem;}
  .mentoria__badge{font-size:.95rem;}
  .mentoria__lead,.mentoria__pilar,.mentoria__nota{font-size:1rem;}

  /* ---- SOLUÇÕES (Consultoria · Análise · Endurance): tudo empilhado ---- */
  .solucoes{padding:16vw 6vw 18vw;gap:11vw;}
  .solucoes__row{grid-template-columns:1fr;gap:1.6rem;}
  /* no mobile a foto vem sempre ANTES do texto (nos dois blocos) */
  .solucoes__row .solucoes__img{order:1;}
  .solucoes__row .solucoes__text{order:2;}
  .solucoes__title{font-size:1.9rem;}
  .solucoes__text p{font-size:1rem;max-width:none;}
  .solucoes__img img{aspect-ratio:4/3;border-radius:16px;}
  /* card Endurance empilhado: foto em cima, texto embaixo */
  .endurance{grid-template-columns:1fr;border-radius:20px;margin-top:2vw;}
  .endurance__img{order:1;height:80vw;min-height:320px;}
  .endurance__img img{position:absolute;}
  .endurance__text{order:2;padding:9vw 7vw 10vw;}
  .endurance__title{font-size:1.9rem;}
  .endurance__sub{font-size:1.02rem;}
  .endurance__text p,.endurance__duo li{font-size:.98rem;}

  /* ---- CLAREZA ---- */
  /* fundo = bege #dbcfbd (100%) com a textura por cima a 20% - mesmo tom do desktop */
  .clareza{grid-template-columns:1fr;
    background:linear-gradient(rgba(219,207,189,.8),rgba(219,207,189,.8)),url("assets/bg-textura.webp") center/cover no-repeat;}
  .clareza::before,.clareza::after{display:none;}
  .clareza__content{padding:0 7vw 8vw;margin-top:-10vw;order:2;max-width:none;transform:none;}
  .clareza__content p{font-size:.98rem;}   /* FONTE dos parágrafos da Clareza (mobile) */
  .clareza .section-title{width:auto;max-width:none;}
  .clareza__media{position:relative;order:1;height:80vw;min-height:380px;}
  /* a própria foto some (máscara) no fim, revelando o fundo texturizado atrás - sem linha */
  .clareza__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;
    -webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);}
  .timeline__cards{grid-template-columns:1fr;}
  .timeline__track,.timeline__nums{display:none;}

  /* ---- HISTÓRIAS ---- */
  .historias{padding:14vw 6vw;}
  .historias__grid{grid-template-columns:1fr;}

  /* ---- CONTATO (mesmo esquema da Clareza: bege+textura + máscara na foto) ---- */
  .contato{display:flex;flex-direction:column;
    background:linear-gradient(rgba(219,207,189,.8),rgba(219,207,189,.8)),url("assets/bg-textura.webp") center/cover no-repeat;}
  .contato::before,.contato::after{display:none;}
  .contato__media{position:relative;order:1;height:70vw;min-height:340px;}
  /* a foto some (máscara) no fim, revelando o fundo texturizado atrás - sem linha */
  .contato__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center 50%;         /* POSIÇÃO da foto (ex.: center 20%) */
    transform:scale(1.5) translateX(5%);             /* ZOOM da foto (1 = normal, 1.2 = maior, .9 = menor) */
    -webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);}
  .contato__content{order:2;padding:0 7vw 12vw;margin-top:70px;max-width:none;transform:none;}
  .contato .section-title{width:auto;max-width:none;}
  .form{max-width:none;}

  /* ---- FOOTER ---- */
  .footer{flex-direction:column;text-align:center;gap:1.4rem;padding:9vw 7vw 20vw;}
  /* "Me acompanhe" em cima e as redes embaixo (sempre em coluna) */
  .footer__social{flex-direction:column;align-items:center;justify-content:center;gap:1rem;}
  .footer__logo{height:auto;width:min(200px,45vw);transform:none;margin-top:5vw;}
}

/* ===== TABLET + CELULAR: tamanhos de fonte (mesmo breakpoint do empilhado) ===== */
@media (max-width:1199px){
  .hero__title{font-size:2.1rem;}
  .hero__lead{font-size:1.2rem;}
  .hero__body{font-size:1.05rem;}
  .formacao .section-title,
  .clareza .section-title,
  .contato .section-title{font-size:1.8rem;}
  .clareza .section-title,.clareza__pilares{font-size:1.80rem;}  /* FONTE do título da Clareza + "Os 3 pilares" (mobile) - mexa aqui */
  .servicos__title,.historias__title{font-size:1.9rem;}
  .svc__card h3{font-size:1.5rem;}
  .svc__sub{font-size:.82rem;}
  .svc__desc{font-size:.9rem;}
  .pills li{font-size:.9rem;}
  .btn{font-size:1rem;}
  .brand-strip{height:40px;}
  .footer__social p{font-size:1.2rem;}
}

/* ===== SÓ TABLET (768–1199px): ajustes exclusivos do iPad/tablet =====
   Não afeta celular (<768) nem Mac/desktop (≥1200). Colocar aqui os refinamentos. */
@media (min-width:768px) and (max-width:1199px){

  /* ---- HERO: logo (só tablet) ---- */
  .hero__logo{
    width:300px;   /* TAMANHO da logo no tablet */
    top:4vw;       /* POSIÇÃO vertical (cima/baixo) */
    left:5vw;      /* POSIÇÃO horizontal (esquerda/direita) */
  }
  /* ---- HERO: subir o bloco de texto (só tablet) ---- */
  .hero__content{
    padding-top:0;
    margin-top:0vw;   /* SOBE o texto (mais negativo = sobe mais) */
  }

  /* título da Formação quebra sozinho no tablet (esconde os <br> do desktop/mobile) */
  .formacao .section-title br{display:none;}
  .formacao__lead{max-width:none;}   /* lead usa a largura toda no tablet (não quebra cedo) */

  /* ---- FORMAÇÃO: foto à esquerda, pills à direita (só tablet) ---- */
  .formacao__mob{float:left;width:46%;margin:0 4% 1.2rem 0;}   /* foto flutua à esquerda */
  .formacao__img-mobile{width:100%;max-width:none;margin:0;}   /* foto preenche a coluna */
  .pills{max-width:none;}          /* pills usam o espaço à direita da foto */
  .formacao__close{clear:none;}    /* frase final continua na direita, abaixo das pills e ao lado da foto */

  /* ---- SERVIÇOS: título centralizado (só tablet) ---- */
  .servicos__title{text-align:center;}

  /* ---- CLAREZA: 3 pilares lado a lado (só tablet) ---- */
  .timeline__cards{grid-template-columns:repeat(3,1fr);}

  /* ---- CONTATO: título quebra sozinho, sem <br> manual (só tablet) ---- */
  .contato .section-title br{display:none;}

  /* ---- CONTATO: POSIÇÃO da foto (só tablet) ---- */
  .contato__media img{
    object-position:center 50%;              /* RECORTE: 1º valor = horizontal (0%=esq, 100%=dir), 2º = vertical (0%=cima, 100%=baixo) */
    transform:scale(1.5) translate(-10%,0%);   /* MOVER: translate(X,Y) - X+ direita/X- esquerda, Y+ baixo/Y- cima; scale = zoom */
  }

  /* ---- MENTORIA (Por dentro de cada trabalho): ajustes só do tablet ---- */
  .mentoria__media{height:100vw;}      /* ALTURA da foto no tablet */
  /* título: mantém o <br> → "Mentoria Individual" / "de Liderança e Gestão" na mesma linha */
  .mentoria__content{padding-top:0;margin-top:-30vw;}   /* SOBE o texto (mais negativo = sobe mais, fecha o vão) */
  /* foto: zoom/posição/degradê SÓ do tablet (não usa os do mobile) */
  .mentoria__media img{
    object-position:center 20%;                 /* RECORTE (maior% = sobe) */
    transform:translate(0px, -280px) scale(1.2);   /* translate(X,Y) + scale = ZOOM (tablet) */
  }
  .mentoria__media::after{
    height:65%;                                                          /* tamanho do degradê */
    background:linear-gradient(to bottom, transparent, var(--creme) 50%); /* creme sólido já na metade = MAIS FORTE, encobre o fim da foto */
  }

  /* ---- SOLUÇÕES: mantém 2 colunas alternadas no tablet (como no desktop) ---- */
  .solucoes{padding:12vw 6vw 14vw;gap:6vw;}
  .solucoes__row{grid-template-columns:1fr 1fr;gap:3vw;}
  .solucoes__row--reverse .solucoes__text{order:2;}   /* volta: foto esq, texto dir */
  .solucoes__row--reverse .solucoes__img{order:1;}
  .solucoes__title{font-size:2.1rem;}
  .solucoes__text p{font-size:.98rem;}
  /* Endurance no tablet: foto EM CIMA (largura toda), texto embaixo — não fica comprida */
  .endurance{grid-template-columns:1fr;border-radius:24px;}
  .endurance__img{order:1;height:52vw;min-height:0;}   /* ALTURA da foto no tablet (menor = mais baixa) */
  .endurance__img img{position:absolute;border-radius:0;}
  .endurance__text{order:2;padding:6vw 7vw 8vw;}
  .endurance__title{font-size:2.1rem;}

}