/* ===========================
   HEADER
=========================== */

.header {
  background-color: #f6f7f9;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #f6f7f9;
}

.header li a {
  display: inline-block;
  padding: 20px 20px;
  text-decoration: none;
  color: #6A5340;
  font-family: "Akatab", sans-serif; 
  font-weight: 400; 
  font-style: normal;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #aec98ae3; /* hover na aba */
}

/* menu */
.header .menu {
  clear: both;
  max-height: 0;
  vertical-align: middle;
}

/* menu icon hamburguer (mobile) */
.header .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before { top: 5px; }
.header .menu-icon .navicon:after  { top: -5px; }

/* menu btn */
.header .menu-btn { display: none; }

.header .menu-btn:checked ~ .menu { max-height: 100%; }
.header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; }
.header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); }
.header .menu-btn:checked ~ .menu-icon .navicon:after  { transform: rotate(45deg); }
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; }

/* desktop ≥768px */
@media (min-width: 48em) {
  .header li { float: left; }
  .header li a { padding: 20px 30px; }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon { display: none; }
}

.active {
  background:#dfe0e5;
  overflow:hidden;
  border-bottom:2px solid #6C8747;
}

/* === HEADER · hambúrguer fixo à direita (mobile) === */
@media (max-width: 48em) {
  .header{
    position: relative;     /* dá referência ao ícone */
    min-height: 56px;       /* garante altura do header fechado */
  }

  /* coloca o hambúrguer encostado à direita e centrado na altura */
  .header .menu-icon{
    position: absolute !important;
    right: 12px;                   /* distância da borda direita */
    top: 50%;
    transform: translateY(-50%);   /* centra verticalmente */
    float: none !important;        /* neutraliza floats */
    padding: 14px 10px;            /* hit area confortável */
    margin: 0;
  }

  /* barras do ícone (opcional: ligeiro aumento) */
  .header .menu-icon .navicon{
    width: 22px;
    height: 2px;
  }
}



/* ===========================
   FOOTER (fixo, acima do conteúdo)
=========================== */

.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;                 /* acima do conteúdo */
  background-color: #f6f7f9;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  font-family: "Akatab", sans-serif;
  font-weight: 400;
  font-style: normal;
  min-height: 56px;
  padding: 8px 0;
}

/* espaço para o conteúdo não ficar por baixo do footer */
:root { --footer-h: 72px; }      /* ajusta se o footer for maior */
.case-detail { padding-bottom: calc(var(--footer-h) + 24px); }

/* Títulos CONTACT / CONNECT */
.footer .title {
  align-items: center;
  font-size: smaller;
  font-style: italic;
  padding-bottom: 2px;
  font-family: "Akatab", sans-serif;
  font-weight: 400;
}

/* Coluna do email */
.footer .icon_title {
  padding: 5px;
  text-decoration: none;
  text-align: center;
}

/* Link do email */
.footer .mail {
  color: #6a5340;
  font-size: smaller;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer .mail:hover { color: #8cb258; text-decoration: underline; }
.footer .mail:active { color:#75924c; }

/* Coluna das redes */
.footer .social_icon2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

/* Ícone do LinkedIn */
.footer .social_icon2 i {
  font-size: 18px;
  color: #6a5340;
  transition: transform .2s ease, color .2s ease;
}
.footer .social_icon2 i:hover {
  color: #8cb258;
  transform: scale(1.15);
}

/* Cores legadas */
.inst, .face, .linkd { color: #6A5340; }
.inst:hover, .face:hover, .linkd:hover { color: #8cb258; }
.inst:active, .face:active, .linkd:active { color:#75924c; }

/* ===========================
   HOMEPAGE (hero)
=========================== */

.background {
  background-image: url(https://res.cloudinary.com/dexj16nlt/image/upload/v1721676699/final-fotor-202407191262312_wdhizt.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
  width: 100%;
  background-position: center bottom;
  background-attachment: fixed;
}

.home1{
  color: whitesmoke; padding-top: 2%;
  font-size:clamp(2em,2em + 2.5vw,3em); text-align: center; 
  font-family: "Akatab",sans-serif; font-weight: 600; font-style: normal;
}

.home2{
  color:#8cb258; text-shadow: 1px 1px 1px #8cb258;
  font-size:clamp(1.90em,1.90em + 2vw,2.5em); text-align: center;
  font-family: "Akatab",sans-serif; font-weight: 500; font-style: normal;
}

.home3{
  color: whitesmoke; padding-top: 1%; text-align: center;
  line-height: 140%; font-size:clamp(1rem,1vw + 1.2vw,1.3em);
  font-family: "Akatab",sans-serif; font-weight: 400; font-style: normal;
}

.home4{
  color: whitesmoke; text-align: center; line-height: 140%;
  font-size:clamp(1rem,1vw + 1.2vw,1.3em);
  font-family: "Akatab",sans-serif; font-weight: 800; font-style:normal;
  text-decoration:double;
}

@media screen and (max-width: 48em) {
  .text { text-align: center; padding-top: 7%; }
}

/* === HERO · patch único (header-gap + foco por altura + safe zone) === */

/* 0) base */
:root{
  --footer-h: 86px;      /* altura do footer fixo */
  --hero-safe: 10vh;     /* distância dos olhos ao footer em ecrãs normais */
  --hero-overlay: .06;   /* 6% de sombra, muito leve */
}
html, body { margin:0; padding:0; }        /* remove “barra branca” do browser */

/* 1) hero estável e sem parallax */
.background{
  position: relative;
  background-size: cover !important;
  background-attachment: scroll !important;
  background-position: center 14% !important;   /* foco default (laptops) */
  min-height: calc(100svh - var(--footer-h)) !important;
  padding-bottom: var(--hero-safe) !important;

  /* anti gap entre header e imagem (margin collapse do 1.º heading) */
  padding-top: 1px; 
  margin-top: -1px;
  overflow: hidden;
}
.background::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,var(--hero-overlay));
  pointer-events:none; z-index:0;
}
.background .text{ position:relative; z-index:1; }
.background h1, .background .home1{ margin-top:0 !important; } /* reforço */

/* 2) ajuste por ALTURA do ecrã (resolve portáteis tipo Lenovo) */
@media (max-height: 900px) and (min-width: 992px){
  :root{ --hero-safe: 8vh; }
  .background{ background-position: center 12% !important; }
}
@media (max-height: 820px) and (min-width: 992px){
  :root{ --hero-safe: 6vh; }
  .background{ background-position: center 10% !important; }
}
@media (max-height: 760px) and (min-width: 992px){
  :root{ --hero-safe: 4vh; }
  .background{ background-position: center 9% !important; }
}

/* 3) mobile/tablet – nariz ao centro e sem “barra branca” */
@media (max-width: 991.98px){
  .background{
    min-height: calc(100svh - var(--footer-h)) !important;
    background-position: center 44% !important;
    padding-bottom: 10vh !important;
  }
}

/* 4) fallback se o browser não suportar svh */
@supports not (height: 1svh){
  .background{ min-height: calc(100vh - var(--footer-h)) !important; }
}

/* === HERO · RESET FINAL (colar no fim) ============================== */
/* 1) base: neutraliza height fixo e parallax, e ocupa a janela útil */
html, body { margin: 0; padding: 0; }               /* mata barra branca */
:root { --footer-h: 86px; }                         /* 1 valor global */

.background{
  /* limpa as regras antigas */
  height: auto !important;
  background-attachment: scroll !important;

  /* dimensionamento e posição padrão */
  background-size: cover !important;
  background-position: center 44% !important;       /* foco confortável */

  /* ocupa viewport – usando dvh/svh para mobile moderno */
  min-height: calc(100dvh - var(--footer-h)) !important;
  padding-bottom: calc(var(--footer-h) + 12vh) !important;  /* zona segura */

  /* evita gap sob o header por colapso de margens */
  position: relative;
  padding-top: 0.01px; 
  margin-top: -0.01px;
  overflow: hidden;
}
@supports not (height: 1dvh){
  .background{ min-height: calc(100vh - var(--footer-h)) !important; }
}
.background::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.05); pointer-events:none; z-index:0;
}
.background .text{ position:relative; z-index:1; }
.home1{ margin-top: 0 !important; }

/* 2) MOBILE/TABLET – nariz ao centro, sem “fixed” nem gaps */
@media (max-width: 991.98px){
  .background{
    background-position: center 48% !important;
    min-height: calc(100svh - var(--footer-h)) !important;
    padding-bottom: calc(var(--footer-h) + 10vh) !important;
  }
}

/* 3) PORTÁTEIS INTERMÉDIOS (Lenovo, 1366×768 / 1536×864, etc.)
      Sobe o bloco e baixa o foco para os olhos aparecerem SEM tocar no footer */
@media (min-width: 992px) and (max-width: 1700px) and (min-height: 720px) and (max-height: 900px){
  .background{
    height: auto !important;
    background-position: center 50% !important;                /* mostra olhos */
    padding-bottom: calc(var(--footer-h) + 14vh) !important;    /* mais ar */
  }
}

/* 4) Ainda mais baixo (ex.: 1280×720, 1600×900 perto do limite) */
@media (min-width: 992px) and (max-width: 1700px) and (max-height: 820px){
  .background{
    background-position: center 54% !important;                 /* baixa foco */
    padding-bottom: calc(var(--footer-h) + 16vh) !important;
  }
}
@media (min-width: 992px) and (max-width: 1700px) and (max-height: 760px){
  .background{
    background-position: center 58% !important;
    padding-bottom: calc(var(--footer-h) + 18vh) !important;
  }
}

/* HERO — overlay em gradiente (topo mais escuro, base clara) */
:root{
  /* afina aqui sem medo */
  --hero-ov-top: .16;   /* sombra no topo (texto)   */
  --hero-ov-mid:  .08;  /* sombra intermédia        */
  --hero-ov-bot:   0;   /* base/olhos sem sombra    */
}

/* HERO — overlay suave (sem barra) */
:root{
  /* afina se quiseres: ↓ menos = mais claro no topo */
  --ov-top: .16;  /* topo (texto)   */
  --ov-1:   .13;
  --ov-2:   .10;
  --ov-3:   .07;
  --ov-4:   .04;
  --ov-5:   .02;
}

/* === HERO — overlay sem barra e com olhos mais claros === */
:root{
  /* topo mantém contraste para o texto */
  --ov-top: .16;
  --ov-1:   .13;
  --ov-2:   .10;
  /* a partir do meio vai desaparecendo mesmo */
  --ov-3:   .06;
  --ov-4:   .02;
  --ov-5:   0;   /* perto do footer: sem sombra */
}

.background::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* vinhete suave no topo + gradiente vertical com “pena” longa */
  background-image:
    radial-gradient(120% 80% at 50% 8%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%),
    linear-gradient(
      to bottom,
      rgba(0,0,0,var(--ov-top)) 0%,
      rgba(0,0,0,var(--ov-1)) 12%,
      rgba(0,0,0,var(--ov-2)) 26%,
      rgba(0,0,0,var(--ov-3)) 42%,
      rgba(0,0,0,var(--ov-4)) 58%,
      rgba(0,0,0,var(--ov-5)) 74%,
      rgba(0,0,0,0)           90%
    );
  background-repeat:no-repeat;
}

/* leve boost de brilho/saturação (o topo continua escuro pelo overlay) */
.background{ filter: brightness(1.03) saturate(1.04) contrast(1.02); }

/* Portáteis intermédios (ex.: 1366×768 / 1536×864): ainda mais claro no fundo */
@media (min-width: 1150px) and (max-height: 900px){
  :root{ --ov-3:.05; --ov-4:.012; --ov-5:0; }
}

/* opcional: ligeiro “pop” na imagem (quase impercetível) */
@media (min-width: 992px){
  .background{ filter: saturate(1.04) contrast(1.02); }
}

/* opcional: um “pop” super discreto na foto */
@media (min-width: 992px){
  .background{
    filter: saturate(1.04) contrast(1.02); /* 4% sat, 2% contraste */
  }
}

/* === HERO · realce dos olhos (apenas luz, sem mexer no texto) === */
.background{ isolation:isolate; }  /* garante camadas bem separadas */

.background::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:42%;                        /* ↑ aumenta p/ subir a zona iluminada */
  pointer-events:none;
  z-index:0;                         /* fica debaixo do texto */
  background:
    radial-gradient(85% 90% at 50% 100%,
                    rgba(255,255,255,.20) 0%,
                    rgba(255,255,255,0) 60%),
    linear-gradient(to top,
                    rgba(255,255,255,.08) 0%,
                    rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;            /* aclara só a imagem */
}

/* ligeiro aumento da área iluminada em portáteis intermédios */
@media (min-width:1150px) and (max-height:900px){
  .background::after{ height:46%; }
}



/* ===========================
   ABOUT ME
=========================== */

.wrapper {
  column-gap: 0; display:grid;
  margin: auto;
  row-gap: 1%; padding-top: 3%;
  margin-bottom: 10%;
  max-width: 60%;
  height: 100vh;
  object-fit:fill;
  align-items: center;
  text-align: center;
}

@media (max-width:678px) {
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "footer";
  }
}

.about1{
  color: rgba(0, 0, 0, 0.693);
  line-height: 160%;
  font-size:clamp(1rem,1vw + 1.2vw,1.3em);
  font-family: "Akatab",sans-serif; font-weight: 600;
  text-align: center;
}

.about2{
  color: rgba(0, 0, 0, 0.693);
  line-height: 160%;
  font-size:clamp(1rem,1vw + 1.1vw,1.2em);
  font-family: "Akatab",sans-serif; font-weight: 400;
  padding: 0; margin:0;
}

.about3{
  color: rgba(0, 0, 0, 0.693);
  line-height: 160%;
  font-size:clamp(1rem,1vw + 1.1vw,1.2em);
  font-family: "Akatab",sans-serif; font-weight: 400;
  padding-top: 2%;
}

.profile .hobbies{
  width: 80%;
  position: absolute;
  top: 50%; left: 50%;
  height: 100vh;
  transform: translate(-50%, 50%);
}

.boxbox8 { width: 80%; height:50%; }

.look {
  text-align: center; padding-top: 2%;
  font-family: "Akatab",sans-serif; font-weight: 400; 
  font-size:clamp(1rem,1vw + 1.1vw,1.2em); color:#6A5340; padding-bottom: 1%;
}

.boxbox5 {
  text-align: center; padding-top: 1%;
  font-family: "Akatab",sans-serif; font-weight: 400; 
  font-size:clamp(1rem,1vw + 1.1vw,1.2em);
}

.resume {
  text-align: center;
  font-family: "Akatab",sans-serif; font-weight: 400; 
  font-size:clamp(1rem,1vw + 1.1vw,1.2em); color:#fff; font-size: 16px;
  display: inline-block; background-color:#6A5340; 
  border: none; margin-right: 1%; margin-bottom: 3%;
  cursor: pointer; text-decoration: none; padding: 3px 6px;
  text-shadow: none; letter-spacing: 2px;
}
.resume:hover{ background-color: #8cb258; color: #fff; letter-spacing: 4px; }
.resume:active{ background:#75924c; overflow:hidden; }

.letter {
  text-align: center;
  font-family: "Akatab",sans-serif; font-weight: 400; 
  font-size:clamp(1rem,1vw + 1.1vw,1.2em); color:#fff; font-size: 16px;
  display: inline-block; background-color:#6A5340; 
  border: none; cursor: pointer; text-decoration: none; padding: 3px 6px;
  text-shadow: none; letter-spacing: 2px; transition: 0.4s;
}
.letter:hover{ background-color: #8cb258; color: #fff; letter-spacing: 4px; }
.letter:active{ background:#75924c; overflow:hidden; }

.deal{
  text-align: center; padding-bottom: 1%;
  font-family: "Akatab",sans-serif; font-weight: 400;
  font-size:clamp(1rem,1vw + 1.2vw,1.3em); color: rgba(0, 0, 0, 0.693);
}

.this{
  color: #6A5340; font-family: "Akatab",sans-serif; font-weight: 400;
  font-size:clamp(1rem,1vw + 1.2vw,1.3em); margin-bottom: 5%;
  box-shadow: 1px #6A5340;
}
.this:hover{ color: #8cb258; }
.this:active{ color:#75924c; overflow:hidden; }

/* ===========================
   HOTFIX RESPONSIVO: ABOUT ME
=========================== */

/* 1) Footer fixo não tapa conteúdo */
:root { --footer-h: 82px; }            /* se o teu footer for mais alto, aumenta aqui */
html, body { height: 100%; }
body { padding-bottom: var(--footer-h); }

/* 2) Grid About: deixar fluir (antes 100vh partia no mobile) */
.wrapper {
  height: auto !important;
  max-width: min(1100px, 92vw);
  margin-left: auto;
  margin-right: auto;
  text-align: left;                    /* melhor leitura, sem alterar estilos */
}
@media (max-width: 992px) {
  .wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important; /* empilha no mobile */
    row-gap: 18px;
  }
}

/* 3) Imagens About: tirar posicionamento absoluto e forçar redimensionamento fluido
      (o teu CSS tinha .profile .hobbies com position:absolute; sobrescrevemos aqui) */
.profile,
.hobbies {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  position: static !important;
  transform: none !important;
  object-fit: cover;
  border-radius: 14px;
}

/* 4) Espaçamento nos CTAs para não quebrar linhas no mobile */
.box5,
.boxbox5 {
  text-align: left;
  padding-top: 8px;
}
.resume, .letter {
  padding: 8px 14px;
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 12px;
  letter-spacing: 1.2px;
}

/* 5) Menu mobile: abrir vertical e clicável em ecrãs pequenos */
@media (max-width: 48em) {
  .header .menu {
    width: 100%;
    transition: max-height .25s ease;
  }
  .header .menu li {
    width: 100%;
  }
  .header li a {
    display: block;
  }
}

/* 6) Setas/sections: garantir que nada bloqueia cliques */
section {
  position: relative;
  width: 100%;
  height: auto !important;
}
section::after {
  display: none !important;
  pointer-events: none !important;
}

/* === HOTFIX: ABOUT ME mobile spacing + botões centrados === */
@media (max-width: 576px) {
  /* 1) Mais respiro depois do header */
  main { padding-top: 18px; }                 /* espaço global */
  .box1 { margin-top: 10px; }                 /* garante extra logo no 1.º bloco */
  .about1 { margin-bottom: 10px; }            /* pequeno espaço após o título */

  /* 2) Centrar textos auxiliares */
  .look, .deal { text-align: center !important; }

  /* 3) Centrar os botões (caixa dos downloads) */
  .box5, .boxbox5 { 
    text-align: center !important;
  }
  .resume, .letter {
    display: inline-block;
    margin: 0 8px 12px 8px;                  /* espaçamento horizontal e em baixo */
  }

  /* 4) Centrar o botão “Let’s do this” (na box6) */
  .box6 { text-align: center !important; }
  .box6 .letter { 
    display: inline-block;
    margin: 0 auto 12px auto;                /* centra e dá folga por baixo */
  }
}

/* === Ajuste extra: centragem e respiro na call-to-action final === */
.box6 {
  text-align: center !important;          /* centra tudo no desktop e mobile */
  margin-top: 24px;                       /* respiro extra acima da frase */
  margin-bottom: 32px;                    /* respiro depois do botão */
}

.box6 p,
.box6 .deal { 
  text-align: center !important; 
  margin-bottom: 18px;                    /* espaço entre a frase e o botão */
}

.box6 .letter {
  display: inline-block;
  margin: 0 auto;                         /* garante alinhamento central */
  padding: 10px 20px;
  border-radius: 10px;
}

/* === Centrar botões "Resume" e "Recommendation Letter" em desktop === */
.box5, .boxbox5 {
  text-align: center !important;  /* centra o conteúdo horizontalmente */
  margin-top: 10px;
  margin-bottom: 24px;            /* dá um pouco de ar antes da próxima secção */
}

.box5 .resume,
.box5 .letter {
  display: inline-block;
  margin: 0 10px 12px 10px;       /* espaçamento uniforme entre botões */
  vertical-align: middle;
}


/* ===========================
   SECTIONS — (correção de overlay)
=========================== */

/* Remover overlay que bloqueava clique/hover */
section { 
  position: relative;
  width: 100%;
  height: auto;                 /* não força 80% */
}
section::after {
  display: none !important;     /* remove “filme” por cima */
  pointer-events: none !important;
}

/* ===========================
   SETAS (scroll hints)
=========================== */

#arrowdown { background: url(https://www.flaticon.com/free-icon-font/angle-down_10513348) center center / cover no-repeat;}
#arrowup   { background: url(https://www.flaticon.com/free-icon-font/angle-up_10513315?page=1&position=10&term=arrow+up&origin=search&related_id=10513315) center center / cover no-repeat;}

.demo a {
  position: absolute;
  bottom: 20px; left: 50%;
  z-index: 2; display: inline-block;
  transform: translate(-50%, -50%);
  color: #6A5340; transition: opacity .3s;
}
.demo a:hover { opacity: 1; }

#arrowdown a { padding-top: 0; }
#arrowdown a span {
  position: absolute; top: 0; left: 50%;
  width: 16px; height: 16px; margin-left: -12px;
  border-left: 2px solid #6A5340; border-bottom: 2px solid #6A5340;
  transform: rotate(-45deg); box-sizing: border-box;
  animation: arrowdown 1s ease-in-out infinite alternate;
}
@keyframes arrowdown { 0% {top:0px;} 100%{top:20px;} }

#arrowup a { padding-top: 60px; }
#arrowup a span {
  position: absolute; top: 0; left: 50%;
  width: 24px; height: 24px; margin-left: -12px;
  box-sizing: border-box;
  animation: arrowup 1s ease-in-out infinite alternate;
}
@keyframes arrowup { 0% {top:0px;} 100%{top:20px;} }
#arrowup a span::after {
  position: absolute; top: 25%; left: 50%;
  content: ''; width: 16px; height: 16px; margin: -12px 0 0 -8px;
  border-right: 2px solid #6A5340; border-top: 2px solid #6A5340;
  transform: rotate(-45deg); box-sizing: border-box;
}


/* ===========================
   CASE STUDIES
=========================== */

:root{
  /* cores dos pins */
  --poster-a:#1d726d;
  --poster-b:#9c7cc4;
  --poster-c:#cc4d00;

  /* altura do footer fixo (se variar, ajusta aqui) */
  --footer-h: 86px;
}

/* ========== SECÇÃO PRINCIPAL ========== */
.cases{
  /* respiro no topo e fundo + espaço para o footer fixo */
  padding-top: clamp(96px, 9vh, 140px);
  padding-bottom: calc(var(--footer-h) + clamp(48px, 8vh, 120px));
  color:#6a5340;
  position: relative;
  z-index: 1;
}

/* cabeçalho */
.cases__header{
  text-align:center;
  margin: 0 auto clamp(36px, 6vh, 90px);
  max-width: 1000px;
  padding: 0 16px;
}
.cases__title{
  margin:0;
  font-weight:400;
  line-height:1.2;
  font-size: clamp(32px, 4.5vw, 46px);
}

/* ========== GRELHA RESPONSIVA ========== */
/* grid fluida que se adapta sozinha ao viewport */
.cases__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 92vw), 1fr));
  gap: clamp(22px, 4vw, 64px);
  align-items:start;
  justify-items:center;
  max-width: min(1200px, 94vw);
  margin: 0 auto;
  padding: 0 8px;
}

/* ========== POSTER + PIN ========== */
.poster-wrap{
  position: relative;
  width: clamp(260px, 28vw, 360px);
  aspect-ratio: 2 / 3;          /* mantém proporção em todos os ecrãs */
}

/* pin (o “ponto”) – tamanho e posição também fluidos */
.poster-wrap::before{
  content:"";
  position:absolute;
  top: calc(-1 * clamp(12px, 1.6vw, 22px));
  left:50%;
  transform: translateX(-50%);
  width: clamp(20px, 2.4vw, 34px);
  height: clamp(20px, 2.4vw, 34px);
  border-radius:50%;
  box-shadow:
    inset -3px -5px 8px rgba(0,0,0,.28),
    0 8px 16px rgba(0,0,0,.24);
  z-index:3;
}
.poster-wrap.a::before{ background: var(--poster-a); }
.poster-wrap.b::before{ background: var(--poster-b); }
.poster-wrap.c::before{ background: var(--poster-c); }

/* próprio poster */
.poster{
  position:absolute; inset:0;
  border-radius: clamp(14px, 1.4vw, 18px);
  overflow:hidden;
  display:block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
  transform-origin: 50% 6%;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  z-index:1;
}
.poster:hover{
  transform: translateY(-8px) rotate(-0.4deg);
  box-shadow: 0 34px 70px rgba(0,0,0,.28);
}

/* imagens de fundo (mantém os teus caminhos) */
.poster-wrap.a .poster{ background-image: url('img/case-a.png'); }
.poster-wrap.b .poster{ background-image: url('img/case-b.png'); }
.poster-wrap.c .poster{ background-image: url('img/case-c.png'); }

/* canto dobrado */
.corner{
  position:absolute; right:0; bottom:0;
  width: clamp(58px, 10vw, 120px);
  height: clamp(58px, 10vw, 120px);
  pointer-events:none;
  background:
    radial-gradient(160% 160% at 0% 0%, rgba(0,0,0,.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  opacity:.55; filter: blur(.2px);
  transform-origin: 100% 100%;
  transform: rotateX(0deg);
  transition: transform .4s ease, opacity .3s ease;
  z-index:2;
}
.poster:hover .corner{ transform: rotateX(-35deg); opacity:.9; }

/* ========== AJUSTES EXTRA ========== */
/* telemóveis muito estreitos */
@media (max-width: 360px){
  .cases__grid{ grid-template-columns: 1fr; }
  .poster-wrap{ width: 92vw; }
}

/* ecrãs muito largos – mantém escala elegante */
@media (min-width: 1600px){
  .cases__grid{ gap: 72px; }
  .poster-wrap{ width: 360px; } /* não cresce indefinidamente */
}

/* acessibilidade: reduzir motion se o utilizador pedir */
@media (prefers-reduced-motion: reduce){
  .poster, .corner{ transition: none !important; }
  .poster:hover{ transform:none; }
}

/* === Case Studies · compactar topo em ecrãs pequenos === */
@media (max-width: 768px){
  .cases{
    padding-top: 92px;      /* antes: 140px */
    padding-bottom: 96px;   /* mantém um pouco de ar no fim */
  }
  .cases__header{
    margin-bottom: 36px;    /* antes: 100px */
  }
}

@media (max-width: 480px){
  .cases{
    padding-top: 84px;      /* ainda mais justo em telemóveis estreitos */
  }
  .cases__header{
    margin-bottom: 28px;
  }
}

/* === Case Studies · ajustes para ecrãs de altura baixa (ex.: Lenovo) === */

/* base: mais espaço acima do footer fixo */
:root { --footer-h: 86px; }                /* mantém o que já usas no site */
.cases { padding-bottom: calc(var(--footer-h) + 48px); }

/* quando a altura é limitada, encolhe os posters e o respiro de topo */
@media (min-width: 992px) and (max-height: 900px){
  .cases{ padding-top: 104px; }            /* antes tinhas ~140px */
  .cases__grid{ gap: 56px; }
  .poster-wrap{ width: 320px; }            /* 340 -> 320 */
}

@media (min-width: 992px) and (max-height: 820px){
  .cases{ padding-top: 96px; }
  .cases__grid{ gap: 48px; }
  .poster-wrap{ width: 300px; }            /* cabe tudo acima do footer */
}

@media (min-width: 992px) and (max-height: 780px){
  .cases{ padding-top: 92px; }
  .poster-wrap{ width: 284px; }
}

@media (min-width: 992px) and (max-height: 740px){
  .cases{ padding-top: 88px; }
  .poster-wrap{ width: 268px; }
}

/* Mobile: título menos afastado do header (se ainda não tiveres isto) */
@media (max-width: 768px){
  .cases{ padding-top: 92px; padding-bottom: calc(var(--footer-h) + 40px); }
  .cases__header{ margin-bottom: 36px; }
}
@media (max-width: 480px){
  .cases{ padding-top: 84px; }
  .cases__header{ margin-bottom: 28px; }
}

/* (Opcional) tornar a largura do poster mais fluida em geral */
.poster-wrap{
  aspect-ratio: 2 / 3;
  width: clamp(260px, 28vw + 180px, 340px); /* mantém máx. 340px */
}


/* === CASE STUDIES · ajuste para portáteis de altura baixa (Lenovo etc.) === */
:root { --footer-h: 86px; }                         /* já usas isto no site */

@media (min-width: 992px) and (max-height: 900px){
  .cases{ padding-top: 96px; padding-bottom: calc(var(--footer-h) + 40px); }
  .cases__header{ margin-bottom: 36px; }
  .cases__grid{ gap: 44px; }
  .poster-wrap{ width: 280px !important; }          /* 340 → 280 */
  .poster-wrap::before{ top: -18px; width: 26px; height: 26px; }
}

@media (min-width: 992px) and (max-height: 820px){
  .cases{ padding-top: 90px; }
  .poster-wrap{ width: 240px !important; }          /* mais compacto */
}

@media (min-width: 992px) and (max-height: 760px){
  .cases{ padding-top: 86px; }
  .poster-wrap{ width: 220px !important; }
}

@media (min-width: 992px) and (max-height: 720px){
  .cases{ padding-top: 82px; }
  .poster-wrap{ width: 206px !important; }
}

/* === CASE STUDIES · espaçamentos e tamanho dos cartazes === */

/* base: menos espaço do header para o título + mais respiro do título para os cartazes */
.cases{
  padding-top: 72px !important;                              /* antes ~140px */
  padding-bottom: calc(var(--footer-h) + 48px) !important;
}
.cases__header{ margin: 0 auto 72px !important; }            /* + espaço após o título */
.cases__grid{ gap: 56px !important; }                        /* separação entre cartazes */

/* mobile: encurta ainda mais do header para o título, mantém ritmo agradável */
@media (max-width: 575.98px){
  .cases{ padding-top: 56px !important; }
  .cases__header{ margin-bottom: 44px !important; }
}

/* tablets */
@media (min-width: 576px) and (max-width: 991.98px){
  .cases{ padding-top: 64px !important; }
  .cases__header{ margin-bottom: 56px !important; }
}

/* portáteis/desktop — ecrãs de ALTURA baixa (Lenovo etc.)
   aumenta ligeiramente os cartazes e garante que cabem */
@media (min-width: 992px) and (max-height: 900px){
  .cases{ padding-top: 60px !important; }
  .cases__header{ margin-bottom: 64px !important; }
  .poster-wrap{ width: 300px !important; }                   /* 280 → 300 */
}

@media (min-width: 992px) and (max-height: 820px){
  .poster-wrap{ width: 280px !important; }
}

@media (min-width: 992px) and (max-height: 760px){
  .poster-wrap{ width: 260px !important; }
}


/* === CASE STUDIES · encurtar header→título para ecrã intermédio === */

/* laptops/Lenovo (altura baixa) */
@media (min-width: 992px) and (max-height: 900px){
  .cases{ padding-top: 36px !important; }     /* antes mais alto */
  .cases__header{ margin-bottom: 48px !important; }
}

/* ainda mais baixo (ex.: 1280×720, 1366×768 apertado) */
@media (min-width: 992px) and (max-height: 820px){
  .cases{ padding-top: 24px !important; }
  .cases__header{ margin-bottom: 40px !important; }
}


/* === CASE STUDIES · desktop grande (menos branco, posters maiores) === */
@media (min-width: 1400px){
  .cases{
    padding-top: 64px;                 /* menos ar acima */
    padding-bottom: 72px;              /* menos ar abaixo */
  }
  .cases__header{ margin-bottom: 56px; }

  /* a grelha abre mais e o espaçamento escala */
  .cases__grid{
    max-width: min(90vw, 1680px);      /* antes 1200px */
    gap: clamp(48px, 5vw, 96px);
  }

  /* posters crescem de forma fluida */
  .poster-wrap{
    width: clamp(360px, 24vw, 460px);  /* ~400–460px na maioria dos 27" */
    aspect-ratio: 2 / 3;
  }

  /* pin acompanha a escala */
  .poster-wrap::before{
    width: clamp(26px, 2.2vw, 40px);
    height: clamp(26px, 2.2vw, 40px);
    top: calc(-1 * clamp(18px, 1.5vw, 26px));
  }

  /* dobra do canto um pouco maior */
  .corner{
    width: clamp(86px, 6.5vw, 120px);
    height: clamp(86px, 6.5vw, 120px);
  }
}

/* === muito grande mesmo (≥1800px de largura e alto) — dá mais presença === */
@media (min-width: 1800px) and (min-height: 950px){
  .poster-wrap{ width: clamp(420px, 22vw, 520px); }
  .cases__grid{ gap: clamp(64px, 4vw, 120px); }
}


/* === CASE STUDIES · mobile fix (evita corte do cartaz) =================== */

/* phones ≤ 420px */
@media (max-width: 420px){
  .cases{
    padding-top: 36px;            /* menos ar entre header e título */
    padding-bottom: 72px;
  }
  .cases__header{ margin-bottom: 26px; }

  .cases__grid{
    gap: 28px;                    /* espaço entre cartazes */
    padding: 0 12px;              /* um pouco menos de padding lateral */
    overflow: visible;
  }

  /* o cartaz deixa de ter 340px “fixos” e passa a caber sempre */
  .poster-wrap{
    width: min(88vw, 320px);      /* nunca passa a largura útil */
    aspect-ratio: 2 / 3;
  }

  /* pin e dobra acompanham a escala */
  .poster-wrap::before{
    top: -14px;
    width: 22px;
    height: 22px;
  }
  .corner{
    width: 72px;
    height: 72px;
  }
}

/* phones muito estreitos (≤ 360px) */
@media (max-width: 360px){
  .poster-wrap{ width: min(86vw, 300px); }
}

/* por segurança, nunca permitir scroll horizontal por overflow do cartaz */
html, body { overflow-x: hidden; }

/* === CASE STUDIES · sombras mais leves nos cartazes === */
.poster{
  /* antes: 0 18px 38px rgba(0,0,0,.22) */
  box-shadow: 
    0 10px 24px rgba(0,0,0,.10),
    0 2px 8px  rgba(0,0,0,.06) !important;
}

.poster:hover{
  /* antes: 0 34px 70px rgba(0,0,0,.28) */
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    0 6px 14px rgba(0,0,0,.08) !important;
  transform: translateY(-6px) rotate(-0.3deg);
}

/* mobile: ainda mais suave e sem “salto” no hover */
@media (max-width: 540px){
  .poster{
    box-shadow:
      0 8px 20px rgba(0,0,0,.10),
      0 1px 6px rgba(0,0,0,.05) !important;
  }
  .poster:hover{
    transform: none;
    box-shadow:
      0 8px 20px rgba(0,0,0,.10),
      0 1px 6px rgba(0,0,0,.05) !important;
  }
}

/* ===========================
           LIFEASIER 
=========================== */
:root{
  --brand:#1C8A84;              /* teal principal */
  --brand-2:#18605C;            /* teal escuro */
  --chip-bg: rgba(28,138,132,.15);
  --chip-bd: rgba(28,138,132,.25);
}

.case-detail { padding-bottom:100px; position: relative; }
.case-hero{ text-align:center; padding:96px 16px 24px; }
.case-teaser{ max-width:860px; margin:0 auto; color:#272222; line-height:1.6; }
.hero-image{ max-width:1100px; margin:24px auto 0; padding:0 16px; }
.hero-image img{ width:100%; height:auto; border-radius:18px; display:block; }

.case-section{ max-width:1100px; margin:32px auto; padding:0 16px; }
.case-kicker{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#1C8A84; margin-bottom:6px; }
.case-section h2{ margin:0 0 12px; font-size:20px; font-weight:500; color:#272222; }
.case-section p{ color:#272222; margin:0 0 10px; }

/* 3 itens */
.solution-grid{
  max-width:1100px; margin:24px auto; padding:0 16px;
  display:grid; grid-template-columns:repeat(3, minmax(240px,1fr)); gap:22px;
}
@media (max-width:900px){ .solution-grid{ grid-template-columns:1fr; } }
.sol-item{ display:flex; flex-direction:column; gap:14px; }
.img-frame{ position:relative; width:100%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.06); background:#ECF8F7; }
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-card{ background:#FFFFFF; border-radius:14px; padding:18px 18px 14px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.case-card h3{ margin:0 0 8px; font-size:18px; color:#272222; }
.case-bullets{ margin:6px 0 0; padding-left:18px; }
.case-bullets li{ margin:4px 0; }

/* process */
.process-fig{ max-width:1100px; margin:28px auto 60px; padding:0 16px; }
.process-fig img{ width:100%; height:auto; border-radius:16px; display:block; }

/* research */
.research-highlights{ max-width:1100px; margin:12px auto 0; padding:0 16px; }
.highlights-img{ width:100%; height:auto; border-radius:16px; display:block; }
@media (max-width:900px){ .highlights-img{ display:none; } .hl-accordion{ display:block; } }
@media (min-width:901px){ .hl-accordion{ display:none; } }
.hl-accordion details{ background:#FFFFFF; border-radius:12px; padding:14px 16px; margin:10px 0; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.hl-accordion summary{ cursor:pointer; font-weight:600; color:var(--brand-2); list-style:none; }
.hl-accordion summary::-webkit-details-marker{ display:none; }

/* === LIFEASIER CTA (isolado) === */
/* ⚠️ Mantido exatamente como estava (não alterar) */
.la-cta{ text-align:center; margin:56px 0 97px; position:relative; z-index:0; }
.la-cta__inner{
  max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; justify-content:center; align-items:center;
}
.la-cta__btn{
  display:inline-block; border:none; text-decoration:none; cursor:pointer;
  font-family:"Akatab",sans-serif; font-weight:400; font-size:16px; letter-spacing:2px;
  color:#fff; background:#6A5340; padding:10px 18px; border-radius:10px;
  transition: letter-spacing .4s, background-color .2s ease, transform .2s ease;
}
.la-cta__btn:hover{ background:#8cb258; color:#fff; letter-spacing:4px; }
.la-cta__btn:active{ background:#75924c; }

/* ===========================
   Abas (IA / Wireframes) + união visual
=========================== */
.sec-tabs{
  display:flex; gap:8px; flex-wrap:wrap; background:#F9FDFC; padding:8px 10px;
  border-radius:12px 12px 0 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  margin:8px 0 0;
}
.sec-tab{
  appearance:none; border:1px solid var(--chip-bd); cursor:pointer;
  padding:8px 12px; border-radius:999px; background:var(--chip-bg); color:var(--brand-2);
  font-weight:800; font-size:13px; transition:background .15s ease,transform .12s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.sec-tab:hover{ transform:translateY(-1px); }
.sec-tab.is-active{ background:var(--brand); color:#FFFFFF; border-color:var(--brand); }

/* ===========================
   Access & Onboarding – barra contínua
=========================== */
.onb-linewrap{
  background:#F9FDFC; border-radius:0 0 12px 12px; box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  padding:12px 12px 12px;
  margin:0 auto 10px; max-width:1100px;
}
.onb-title{ font-weight:800; font-size:14px; color:#18605C; margin:6px 0 14px 2px; }
.onb-line{ display:flex; align-items:center; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.onb-tab{
  appearance:none; border:1px solid var(--chip-bd); background:var(--chip-bg); color:var(--brand-2);
  padding:8px 12px; border-radius:999px; font-weight:800; cursor:pointer; white-space:nowrap; transition:all .15s ease;
  flex:0 0 auto; font-size:13px;
}
.onb-tab:hover{ transform:translateY(-1px); }
.onb-tab.is-active,.onb-tab:focus-visible{ background:var(--brand); color:#FFFFFF; border-color:var(--brand); outline:none; }
.onb-tab[aria-disabled="true"]{ pointer-events:none; cursor:default; }
.onb-tab__label{ font-size:13px; letter-spacing:.2px; }
.onb-sep{ position:relative; width:24px; height:2px; background:var(--brand); opacity:.3; flex:0 0 auto; }
.onb-sep::after{ content:''; position:absolute; right:-6px; top:-4px; border:6px solid transparent; border-left-color:var(--brand); opacity:.5; }

/* Drawer Authentication */
.onb-drawer{
  margin-top:8px; background:#FFFFFF; border-radius:12px; padding:12px 14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06); border:1px solid #CDE6E4;
}
.onb-drawer__title{ display:none; }
.onb-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.onb-chip{ display:inline-block; padding:6px 10px; border-radius:999px; background:var(--chip-bg); color:var(--brand-2); border:1px solid var(--chip-bd); font-weight:700; font-size:12.5px; }
.onb-chip--ghost{ background:#FFFFFF; border-style:dashed; color:#18605C; }

/* ===========================
   IA Master–Detail
=========================== */
.ia-masterdetail{ max-width:1100px; margin:8px auto 0; display:grid; gap:12px; grid-template-columns:280px 1fr; }
@media (max-width:900px){ .ia-masterdetail{ grid-template-columns:1fr; } }
.ia-chips{ display:flex; flex-direction:column; gap:8px; background:#F9FDFC; padding:10px; border-radius:12px; box-shadow: inset 0 1px 0 rgba(0,0,0,.03); }
@media (max-width:900px){ .ia-chips{ flex-direction:row; overflow-x:auto; gap:8px; scroll-snap-type:x mandatory; } .ia-chips .ia-chip{ flex:0 0 auto; scroll-snap-align:start; } }
.ia-chip{ border:1px solid var(--chip-bd); background:var(--chip-bg); color:var(--brand-2); border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer; transition:all .15s ease; font-size:13px; }
.ia-chip:hover{ transform:translateY(-1px); }
.ia-chip.is-active{ background:var(--brand); color:#FFFFFF; border-color:var(--brand); }
.ia-detail{ background:#FFFFFF; border-radius:12px; padding:14px 16px; box-shadow:0 8px 18px rgba(0,0,0,.06); min-height:160px; }
.ia-detail h3{ margin:2px 0 6px; color:#18605C; font-size:18px; }
.ia-detail ul{ margin:8px 0 0 18px; line-height:1.6; }

/* Pulse */
.pulse{ box-shadow:0 0 0 0 rgba(28,138,132,.4); animation:pulse 1.2s ease-out 1; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(28,138,132,.4)}100%{box-shadow:0 0 0 18px rgba(28,138,132,0)} }

/* ===========================
   Wireframes — Carousel
=========================== */
.wf-carousel{ max-width:1100px; margin:8px auto 0; padding:0 8px; position:relative; }
.wf-viewport{ overflow:hidden; }
.wf-track{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.wf-track::-webkit-scrollbar{ display:none; }
.wf-slide{
  flex:0 0 86%; max-width:86%; scroll-snap-align:center;
  background:#FFFFFF; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.06); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:10px;
}
@media (min-width:700px){ .wf-slide{ flex-basis:48%; max-width:48%; } }
@media (min-width:1024px){ .wf-slide{ flex-basis:32%; max-width:32%; } }
.wf-slide img{
  max-height:420px; width:auto; height:auto; max-width:100%; object-fit:contain; display:block;
}
@media (max-width:768px){ .wf-slide img{ max-height:360px; } }
.wf-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(28,138,132,.25);
  background:rgba(28,138,132,.15); color:#18605C; font-size:22px; line-height:36px;
  text-align:center; cursor:pointer; user-select:none;
}
.wf-prev{ left:0; } .wf-next{ right:0; }
.wf-dots{ display:flex; gap:8px; justify-content:center; padding:8px 0 2px; }
.wf-dot{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(28,138,132,.4);
  background:rgba(28,138,132,.15); cursor:pointer; font-style:normal;
}
.wf-dot[aria-selected="true"]{ background:#1C8A84; border-color:#1C8A84; }

/* setas centradas */
.wf-viewport{ position: relative !important; }
.wf-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: flex-start; justify-content: center;
  padding-top:6px; line-height:1; border-radius: 50%;
  border: 1px solid rgba(28,138,132,.25); background: rgba(28,138,132,.15);
  color: #18605C; cursor: pointer; user-select: none; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.wf-prev{ left: 8px; } .wf-next{ right: 8px; }
.wf-nav:hover{ filter: brightness(1.04); }
@media (max-width: 600px){
  .wf-nav{ width:36px; height:36px; font-size:20px; padding-top:5px; }
}

/* dots */
.wf-dots{ display:flex; gap:10px; justify-content:center; align-items:center; padding:10px 0 4px; }
.wf-dot{
  display:inline-block; width:10px; height:10px; aspect-ratio:1/1; border-radius:50%;
  border:1.5px solid rgba(28,138,132,.45); background:rgba(28,138,132,.15); cursor:pointer;
  font-style:normal !important; font-size:0; line-height:0; padding:0;
}
.wf-dot[aria-selected="true"]{ background:#1C8A84; border-color:#1C8A84; }
.wf-dot:focus-visible{ outline:2px solid rgba(28,138,132,.45); outline-offset:2px; }

/* selo +30 screens */
.screens-badge{
  position:absolute; top:-12px; right:12px; background:#1C8A84; color:#FFFFFF; font-weight:800;
  padding:8px 14px; border-radius:999px; letter-spacing:.3px; box-shadow:0 8px 18px rgba(0,0,0,.10); z-index:3;
}

/* Hi-fi carousel (1 por vista) */
.hf-carousel .wf-track{ gap:0; padding:0 0 16px; }
.hf-carousel .wf-slide{ flex:0 0 100%; max-width:100%; scroll-snap-align:center; padding:0; background:transparent; box-shadow:none; border-radius:0; }
.hf-carousel .wf-slide img{ max-height:70vh; width:auto; height:auto; max-width:100%; object-fit:contain; display:block; border-radius:16px; }
@media (max-width:768px){ .hf-carousel .wf-slide img{ max-height:60vh; } }
.hf-carousel .wf-viewport{ border-radius:16px; overflow:hidden; background:transparent; }
.hf-carousel .wf-prev{ left:12px; } .hf-carousel .wf-next{ right:12px; }
@media (max-width:768px){ .hf-carousel .wf-viewport, .hf-carousel .wf-slide img{ border-radius:12px; } }

/* ===== LIFEASIER · Respiro generoso entre texto e quadro ===== */
.case-section p + .sec-tabs {
  margin-top: 30px; /* antes era 18px — agora tem mais ar */
}

/* mantém harmonia geral entre título, texto e blocos */
.case-section h2 {
  margin-bottom: 14px;
}

.case-section p {
  margin-bottom: 20px; /* parágrafo mais solto */
  line-height: 1.7;
}

/* pequeno espaçamento extra entre as abas e o bloco Access & Onboarding */
.sec-tabs + .onb-linewrap {
  margin-top: 20px;
}

/* ==== Lifeasier Info Bar (final) ==== */
.lf-info-bar {
  background: #F9FDFC;
  border-radius: 20px;
  max-width: 1100px; /* igual à imagem */
  margin: 40px auto 0;
  padding: 40px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-align: center;
  box-shadow: none; /* sombra removida */
}

.lf-info-item {
  flex: 1;
}

.lf-info-item h4 {
  font-size: 12px;
  letter-spacing: 1px;
  color: #1C8A84;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.lf-info-item p {
  font-size: 15px;
  color: #272222;
  margin: 0;
  line-height: 1.6;
}

/* mantém o "My Role" em linhas separadas */
.lf-info-item:last-child p {
  display: block;
  margin: 4px 0;
}

/* layout mobile */
@media (max-width: 768px) {
  .lf-info-bar {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 20px;
  }
}

/* ===== Lifeasier · Info bar — mobile em 2 colunas centradas ===== */
@media (max-width: 768px){
  .lf-info-bar{
    display: grid;
    grid-template-columns: 1fr 1fr;   /* duas colunas */
    column-gap: 18px;
    row-gap: 28px;                    /* ⬆️ mais espaçamento entre as linhas */
    text-align: center;
    justify-items: center;
    align-items: start;
    padding: 28px 16px;               /* ligeiro aumento do padding geral */
  }

  .lf-info-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
  }

  .lf-info-item h4{
    margin-bottom: 8px;               /* ligeiramente mais espaço sob o título */
  }

  .lf-info-item p{
    margin: 0;
    line-height: 1.55;
  }

  /* “My Role” com as linhas separadas */
  .lf-info-item:last-child p{
    display: block;
    margin: 4px 0;
  }
}
/* ===== Lifeasier · ajustes de respiro no topo ===== */
.case-hero{
  padding: 64px 16px 12px;      /* antes: 96px 16px 24px — menos topo e base */
}

.case-teaser{
  margin: 16px auto 32px;       /* + espaço entre o texto e a info bar */
}

/* mobile: um pouco mais compacto */
@media (max-width: 640px){
  .case-hero{  padding: 48px 16px 10px; }
  .case-teaser{ margin: 14px auto 26px; }
}


/* botão desativado */
.wf-nav[disabled],
.wf-nav[aria-disabled="true"]{
  opacity:.35;
  pointer-events:none;
  cursor:default;
  filter:none;
}

/* 1) Hi-fi volta a ficar dentro do quadro */
#hfCarousel{
  max-width: 1100px !important;
  width: auto !important;
  margin: 0 auto !important;
}
#hfCarousel .wf-viewport{
  overflow: hidden !important;   /* nada vaza do quadro */
}

/* 2) Recupera a largura “perdida” do padding do card só para o Hi-fi */
.case-card > .hf-carousel{
  margin-left: -18px;            /* igual ao padding lateral do .case-card */
  margin-right: -18px;
}
@media (max-width: 768px){
  .case-card > .hf-carousel{
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* 3) Dot 4 maior, SEM corte e SEM estourar o quadro */
#hfCarousel #hfTrack .wf-slide:nth-child(4){
  flex: 0 0 100% !important;     /* 1 slide por vista */
  max-width: 100% !important;
  padding: 0 !important;
}
#hfCarousel #hfTrack .wf-slide:nth-child(4) img{
  width: auto !important;                       /* cresce pela ALTURA */
  height: clamp(560px, 84vh, 980px) !important; /* ↑ aumenta visivelmente */
  max-height: 84vh !important;                  /* garante que não corta */
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

.case-hero .case-teaser br{ display:block; margin-top:.4rem; }

/* Esconde/mostra versões */
.process-fig { display:block; }             /* tua imagem do desktop */
.process-mobile { display:none; }           /* mobile escondido por defeito */

@media (max-width: 768px){
  .process-fig { display:none; }            /* esconde desktop */
  .process-mobile { display:grid; }         /* mostra mobile */
}

/* Estilos dos cartões (mobile) */
.process-mobile{
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0.75rem 0 1.5rem;
}

.process-step{
  display:flex;
  align-items:flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(24,96,92,0.06);       /* leve, baseado no --brand-2 */
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}

.process-step__icon{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.process-step__title{
  margin: 0 0 .15rem 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1px;
}

.process-step__desc{
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: #18605C;                           /* subtil mais escuro */
}

/* Pequenos toques */
@media (max-width: 420px){
  .process-step{ padding: .8rem .9rem; }
  .process-step__title{ font-size: .98rem; }
  .process-step__desc{ font-size: .92rem; }
}

@media (prefers-reduced-motion: no-preference){
  .process-step{ transition: transform .2s ease; }
  .process-step:active{ transform: scale(.99); }
}
/* dá margem interna ao bloco mobile */
.process-mobile{
  display:grid;                 /* já tens isto no @media */
  gap: 0.9rem;
  padding: 0 1.5rem;              /* ⬅️ padding nas laterais */
  margin: 0.75rem 0 1.5rem;
}

/* opcional: mantém os cards alinhados quando a tela é muito estreita */
@media (max-width: 420px){
  .process-mobile{ padding: 0 .9rem; }
  .process-step{ padding: .8rem .9rem; }
}

/* Estado base = Desktop/Tablet: só imagem */
.process-fig { display: block !important; }
.process-mobile { display: none !important; }

/* Mobile-only: mostra os cartões e esconde a imagem */
@media (max-width: 767.98px){
  .process-fig { display: none !important; }
  .process-mobile { display: grid !important; }
}

/* Salvaguarda extra no desktop */
@media (min-width: 768px){
  .process-mobile { display: none !important; }
}

/* base = mobile */
.hl-accordion{
  display: grid;
  gap: .7rem;
}
.hl-accordion details{
  background: #ECF8F7;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.hl-accordion summary{
  list-style: none;
  cursor: pointer;
  padding: .9rem 1rem;                 /* mobile confortável */
  font-weight: 600;
  color: #18605C;
  display: flex; align-items: center; gap: .6rem;
}
/* chevron */
.hl-accordion summary::-webkit-details-marker{ display:none; }
.hl-accordion summary::after{
  content: "▾";
  margin-left: auto;
  transition: transform .2s ease;
  opacity: .8;
}
.hl-accordion details[open] summary::after{ transform: rotate(-180deg); }
/* conteúdo */
.hl-accordion details > p{
  padding: 0 1rem 1rem;
  margin: 0;
  color: #18605C;
  line-height: 1.5;
}


/* MOBILE (≤767px): mostra o acordeão e esconde a imagem */
@media (max-width: 767.98px){
  .hl-accordion { display: grid !important; }
  .highlights-img { display: none !important; }
}

/* DESKTOP (≥768px): esconde o acordeão e mostra a imagem */
@media (min-width: 768px){
  .hl-accordion { display: none !important; }
  .highlights-img { display: block !important; }
}
/* DESKTOP — compactar ao máximo o bloco Empathize */
@media (min-width: 768px){

  /* 1) corta padding do section */
  #empathize.case-section{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) reduz margens do kicker, título e parágrafo introdutório */
  #empathize .case-kicker{ margin-bottom: .15rem !important; }
  #empathize h2{ margin: 0 0 .25rem !important; }
  #empathize > p{ margin: 0 0 .25rem !important; }

  /* 3) zera margens do wrapper e “puxa” a imagem para cima/baixo */
  #empathize .research-highlights{ margin: 0 !important; }
  #empathize .highlights-img{
    display: block;
    max-width: 100%;
    height: auto;

    /* compensação do espaço transparente do PNG */
    margin-top: -22px !important;   /* ↑ ajusta entre -12px e -36px */
    margin-bottom: -18px !important;/* ↓ idem se precisares ainda menos espaço */
  }

  /* 4) aproxima a próxima secção (Ideate) */
  #empathize + .case-section{
    margin-top: 0 !important;       /* ou -6px se quiseres colar mais */
  }
}
@media (min-width: 768px){
  .process-fig{ margin-bottom: .5rem !important; }   /* antes deve estar > 2rem */
}

.case-teaser{
  /* largura confortável e responsiva */
  max-width: clamp(48ch, 70%, 68ch);  /* antes estava ~48ch fixo */
  margin: 0 auto 1.75rem;
  text-align: center;
  line-height: 1.6;        /* mais respiro */
  text-wrap: balance;
  padding-inline: 1rem;    /* só para mobile */
}

/* em ecrãs grandes, podes permitir um pouco mais de largura */
@media (min-width: 1200px){
  .case-teaser{ max-width: 72ch; }
}

/* ================================
   ESTADOS — só nesta página/case
==================================*/

/* 1) Pills (tabs + chips) */
.case-detail .sec-tab,
.case-detail .onb-tab,
.case-detail .ia-chip{
  background: var(--chip-bg);
  border: 1px solid var(--chip-bd);
  color: var(--brand-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

/* Hover (apenas onde existe hover) */
@media (hover:hover){
  .case-detail .sec-tab:hover,
  .case-detail .onb-tab:hover,
  .case-detail .ia-chip:hover{
    background: rgba(28,138,132,.22);
    border-color: rgba(28,138,132,.35);
    transform: translateY(-1px);
  }
}

/* Pressed/Active */
.case-detail .sec-tab:active,
.case-detail .onb-tab:active,
.case-detail .ia-chip:active{
  transform: translateY(0);
  background: rgba(28,138,132,.28);
  border-color: rgba(28,138,132,.45);
}

/* Selecionado */
.case-detail .sec-tab.is-active,
.case-detail .onb-tab.is-active,
.case-detail .ia-chip.is-active{
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}

/* Focus visível (acessibilidade) */
.case-detail .sec-tab:focus-visible,
.case-detail .onb-tab:focus-visible,
.case-detail .ia-chip:focus-visible{
  outline: 2px solid rgba(28,138,132,.45);
  outline-offset: 2px;
}

/* Desabilitado */
.case-detail .onb-tab[aria-disabled="true"],
.case-detail .sec-tab[disabled],
.case-detail .ia-chip[disabled]{
  opacity: .45;
  pointer-events: none;
  cursor: default;
}

/* 2) Setas do carrossel (wireframes + hi-fi) */
.case-detail .wf-nav{
  background: rgba(28,138,132,.15);
  border: 1px solid rgba(28,138,132,.25);
  color: #18605C;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, filter .15s ease;
}
@media (hover:hover)){
  .case-detail .wf-nav:hover{
    background: rgba(28,138,132,.22);
    border-color: rgba(28,138,132,.4);
    filter: brightness(1.03);
  }
}
.case-detail .wf-nav:active{
  transform: scale(.97);
  background: rgba(28,138,132,.28);
  border-color: rgba(28,138,132,.5);
}
/* Disabled já existe; reforço a especificidade */
.case-detail .wf-nav[disabled],
.case-detail .wf-nav[aria-disabled="true"]{
  opacity: .35; pointer-events:none; cursor:default; filter:none;
}

/* 3) Dots do carrossel */
@media (hover:hover){
  .case-detail .wf-dot:hover{
    border-color: rgba(28,138,132,.7);
  }
}
.case-detail .wf-dot:active{
  transform: scale(.9);
}
.case-detail .wf-dot[aria-selected="true"]{
  background: #1C8A84;
  border-color: #1C8A84;
}

/* ================================
   CORREÇÃO — setas cortadas (Wireframes)
   (não afeta o Hi-fi)
==================================*/

/* Dá “folga” lateral para as setas e evita clip */
.case-detail #pane-wf .wf-carousel{
  padding-inline: 14px; /* espaço para as bolachas das setas */
}

/* Deixa o conteúdo “transbordar” dentro do viewport só no Wireframes */
.case-detail #pane-wf .wf-viewport{
  overflow: visible;            /* setas deixam de ser cortadas */
  position: relative;           /* ancora as setas corretamente */
}

/* Reposiciona levemente as setas para ficarem 100% visíveis */
.case-detail #pane-wf .wf-prev{ left: 0; }
.case-detail #pane-wf .wf-next{ right: 0; }

/* === impedir o salto no hover (mesma página) === */
.sec-tab:hover,
.onb-tab:hover,
.ia-chip:hover{
  transform: none !important;                 /* sem deslocação */
  box-shadow: 0 0 0 2px rgba(28,138,132,.12) inset; /* feedback suave */
}

/* estado pressionado/active sem deslocar */
.sec-tab:active,
.onb-tab:active,
.ia-chip:active{
  transform: none !important;
  filter: brightness(.98);
  box-shadow: 0 0 0 2px rgba(28,138,132,.18) inset;
}

/* foco via teclado visível */
.sec-tab:focus-visible,
.onb-tab:focus-visible,
.ia-chip:focus-visible{
  outline: 2px solid rgba(28,138,132,.45);
  outline-offset: 2px;
}

/* um pouco mais de respiro para a linha de onboarding */
.onb-linewrap{
  padding-bottom: 22px !important;
  overflow: visible !important;
}

/* mais visíveis por padrão */
.onb-sep{
  opacity: .55;                         /* antes .3 */
  background: var(--brand);
}
.onb-sep::after{
  border-left-color: var(--brand);
}

/* seta destacada (vizinha da etapa ativa) */
.onb-sep.is-hot{
  opacity: .95;
  background: var(--brand-2);
}
.onb-sep.is-hot::after{
  border-left-color: var(--brand-2);
}

/* Fix: tornar as setas (onb-sep) visíveis novamente */
.onb-sep{
  opacity: .9 !important;                 /* antes estava muito baixa */
  background: var(--brand) !important;    /* linha da seta */
}

.onb-sep::after{
  border-left-color: var(--brand) !important; /* triângulo da seta */
  opacity: .95 !important;
}

/* ===============================
   RESEARCH FINDINGS – CSS FINAL LIMPO
   (escopado a [data-rf-root])
   =============================== */

[data-rf-root]{
  --border:#CDE6E4;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.06);
  --mint-50:#ECF8F7;
  --teal-700:#1C8A84;
  --ink-600:#18605C;
  --ink-900:#272222;
}

/* ===== Quadro ===== */
[data-rf-root] .rf-board{
  background:var(--mint-50);
  border:1.5px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}
[data-rf-root] .rf-inner{
  max-width:1100px;
  margin-inline:auto;
  padding:22px 18px;
}
[data-rf-root] .rf-title{
  margin:0 0 12px;
  text-align:center;
  font-weight:800;
  color:#18605C;                               /* cor pedida */
  font-size:clamp(1.05rem, 1.7vw, 1.35rem);
  padding-bottom:.7rem;
}

/* ===== Tabs (pills) ===== */
[data-rf-root] .rf-tabs{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:.6rem .5rem;
  background:#FFFFFF;                             /* barra com contraste */
  border:1px solid var(--border);
  border-radius:18px; padding:.7rem;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
[data-rf-root] .rf-tabs .sec-tab{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; gap:.4rem;
  border-radius:999px;
  background:#CDE6E4;                          /* default */
  border:1.5px solid #24ACA1;
  color:#18605C; font-weight:700; line-height:1; cursor:pointer;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.03);
  transition:transform .06s ease, border-color .15s ease, background-color .15s ease;
}
[data-rf-root] .rf-tabs .sec-tab:hover{
  background:#ECF8F7; border-color:#1C8A84; transform:translateY(-1px);
}
[data-rf-root] .rf-tabs .sec-tab.is-active,
[data-rf-root] .rf-tabs .sec-tab[aria-selected="true"]{
  background:#1C8A84;                           /* ativo = teal sólido */
  border-color:#18605C;
  color:#FFFFFF;
  box-shadow:0 2px 0 rgba(0,0,0,.06) inset, 0 1px 2px rgba(0,0,0,.04);
}
[data-rf-root] .rf-tabs .sec-tab:focus-visible{
  outline:3px solid color-mix(in oklab, #1C8A84 40%, white);
  outline-offset:2px;
}

/* ===== Painéis ===== */
[data-rf-root] .rf-panels{ margin-top:0; }
[data-rf-root] .rf-panel{
  display:none;
  background:#FFFFFF; border:1px solid var(--border);
  border-radius:18px; padding:26px 20px; box-shadow:var(--shadow);
}
[data-rf-root] .rf-panel.is-active{ display:block; animation:rf-fade .22s ease; }
@keyframes rf-fade{ from{opacity:.6;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Header do painel – grupo centrado, texto à esquerda */
[data-rf-root] .rf-head{
  display:flex; align-items:center; gap:.9rem;
  justify-content:center; width:max-content; margin:0 auto 1rem;
  text-align:left;
}
[data-rf-root] .rf-head h3{
  margin:0; color:var(--teal-700);
  font-weight:700;
  font-size:clamp(1.15rem, 2.1vw, 1.4rem);       /* título do painel maior */
}
[data-rf-root] .rf-sub{ margin:.15rem 0 0; color:var(--ink-600); font-size:.98rem; }
[data-rf-root] .rf-icon{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; font-size:1.35rem;
  background:linear-gradient(180deg,#FFFFFF,var(--mint-50));
  border:1px solid var(--border); color:var(--teal-700);
}

/* Conteúdo das colunas */
[data-rf-root] .rf-cols{
  display:grid; gap:22px;
  max-width:860px;                              /* coluna dupla mais compacta */
  margin-inline:auto;
}
[data-rf-root] .rf-coltitle{
  margin:0 0 .45rem;
  color:#18605C;                                /* Problems/Solutions */
  font-weight:600;
  font-size:clamp(.95rem, 1.3vw, 1.05rem);
}
[data-rf-root] .rf-list{
  margin:0; padding-left:1.2rem; display:grid; gap:.6rem;
}
[data-rf-root] .rf-list li{ color:var(--ink-900); line-height:1.55; }

@media (min-width:860px){
  [data-rf-root] .rf-cols{
    grid-template-columns:1fr minmax(6px,0) 1fr; align-items:start;
  }
  [data-rf-root] .rf-cols::before{
    content:""; grid-column:2; width:1px; height:100%;
    background:linear-gradient(180deg, transparent 0,
      rgba(26,127,120,.35) 10%, rgba(26,127,120,.35) 90%, transparent 100%);
  }
  [data-rf-root] .rf-col:nth-child(1){ grid-column:1; }
  [data-rf-root] .rf-col:nth-child(2){ grid-column:3; }
}

/* Acessibilidade (menos motion) */
@media (prefers-reduced-motion:reduce){
  [data-rf-root] .rf-panel.is-active{ animation:none }
  [data-rf-root] .rf-tabs .sec-tab{ transition:none }
}
/* Hover com “anel” exterior (apenas em devices com hover) */
@media (hover:hover){
  [data-rf-root] .rf-tabs .sec-tab{
    transition: transform .06s ease, background-color .15s ease,
                border-color .15s ease, box-shadow .18s ease;
  }

  /* default */
  [data-rf-root] .rf-tabs .sec-tab:hover{
    box-shadow:
      0 0 0 3px rgba(28,138,132,.22),   /* anel exterior */
      inset 0 -1px 0 rgba(0,0,0,.03);   /* leve relevo interno */
    transform: translateY(-1px);
  }

  /* ativo (teal sólido) com anel um pouco mais forte */
  [data-rf-root] .rf-tabs .sec-tab.is-active:hover,
  [data-rf-root] .rf-tabs .sec-tab[aria-selected="true"]:hover{
    box-shadow:
      0 0 0 3px #1C8A84,
      0 2px 0 rgba(0,0,0,.06) inset,
      0 1px 2px rgba(0,0,0,.04);
    transform: translateY(-1px);
  }
}

/* Research Findings — menor + cor #18605C (forçado) */
.case-section[data-rf-root] .rf-board .rf-inner > h2.rf-title,
[data-rf-root].case-detail .rf-board .rf-inner > h2.rf-title,
[data-rf-root] h2.rf-title {
  color: #18605C !important;
  font-size: clamp(0.98rem, 1.45vw, 1.22rem) !important; /* mais pequeno */
  font-weight: 800;          /* mantém impacto */
  line-height: 1.25;
  margin: 0 0 10px !important;
  padding-bottom: .6rem !important;
}

/* ====== Padrão único p/ pills (anel/cores) ====== */
:root{
  --pill-default-bg: #ECF8F7;
  --pill-default-bd: #CDE6E4;
  --pill-default-tx: #18605C;

  --pill-hover-bg: #CDE6E4;
  --pill-hover-bd: #24ACA1;

  --pill-active-bg: #1C8A84;
  --pill-active-bd: #18605C;
  --pill-active-tx: #FFFFFF;

  --pill-ring: 0 0 0 3px rgba(28,138,132,.22);
  --pill-ring-strong: 0 0 0 3px rgba(28,138,132,.28);
}

/* Alvo comum (mantém teu visual atual) */
.case-detail .sec-tab,
.case-detail .onb-tab,
.case-detail .ia-chip,
[data-rf-root] .rf-tabs .sec-tab{
  border-radius: 999px;
  padding: .55rem 1rem;
  background: var(--pill-default-bg);
  border: 1.5px solid var(--pill-default-bd);
  color: var(--pill-default-tx);
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.03);
  transition: transform .06s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover (desktop) — anel consistente */
@media (hover:hover){
  .case-detail .sec-tab:hover,
  .case-detail .onb-tab:hover,
  .case-detail .ia-chip:hover,
  [data-rf-root] .rf-tabs .sec-tab:hover{
    background: var(--pill-hover-bg);
    border-color: var(--pill-hover-bd);
    box-shadow: var(--pill-ring), inset 0 -1px 0 rgba(0,0,0,.03);
    transform: translateY(-1px);
  }
}

/* Ativo/Selecionado */
.case-detail .sec-tab.is-active,
.case-detail .onb-tab.is-active,
.case-detail .ia-chip.is-active,
[data-rf-root] .rf-tabs .sec-tab.is-active,
[data-rf-root] .rf-tabs .sec-tab[aria-selected="true"]{
  background: var(--pill-active-bg);
  border-color: var(--pill-active-bd);
  color: var(--pill-active-tx);
  box-shadow: 0 2px 0 rgba(0,0,0,.06) inset, 0 1px 2px rgba(0,0,0,.04);
}

/* Hover do ativo — anel mais forte */
@media (hover:hover){
  .case-detail .sec-tab.is-active:hover,
  .case-detail .onb-tab.is-active:hover,
  .case-detail .ia-chip.is-active:hover,
  [data-rf-root] .rf-tabs .sec-tab.is-active:hover,
  [data-rf-root] .rf-tabs .sec-tab[aria-selected="true"]:hover{
    box-shadow: var(--pill-ring-strong),
                0 2px 0 rgba(0,0,0,.06) inset, 0 1px 2px rgba(0,0,0,.04);
  }
}

/* Focus visível (teclado) — igual para todos */
.case-detail .sec-tab:focus-visible,
.case-detail .onb-tab:focus-visible,
.case-detail .ia-chip:focus-visible,
[data-rf-root] .rf-tabs .sec-tab:focus-visible{
  outline: 3px solid color-mix(in oklab, #1C8A84 40%, white);
  outline-offset: 2px;
}

/* ===== Access & Onboarding — não apertar os botões ===== */
.onb-linewrap{
  padding: 16px 16px 20px !important;   /* barra mais alta */
  overflow: visible !important;         /* nada fica cortado */
}

.onb-line{
  display: flex;
  align-items: center;
  gap: 10px 14px;                       /* espaço confortável */
  flex-wrap: wrap;                      /* permite 2+ linhas no desktop */
  overflow: visible;                    /* sem clipping */
}

/* garante que nem tabs nem setas encolhem */
.onb-tab,
.onb-sep{ flex: 0 0 auto; }

/* Mobile: volta ao scroll horizontal, sem wrap */
@media (max-width: 900px){
  .onb-line{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}
/* Badge dos ícones no header (mantém o teu estilo) */
[data-rf-root] .rf-icon{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#FFFFFF,var(--mint-50));
  border:1px solid var(--border);
}
[data-rf-root] .rf-icon img{
  width:28px; height:28px; object-fit:contain; display:block;
}

/* Ícones nas tabs (se usares a opção) */
[data-rf-root] .rf-tab-icon{
  width:18px; height:18px; object-fit:contain; display:inline-block;
  margin-right:.45rem; vertical-align:-3px;
}

/* Ajuste responsivo (opcional) */
@media (max-width:480px){
  [data-rf-root] .rf-icon{ width:42px; height:42px; }
  [data-rf-root] .rf-icon img{ width:24px; height:24px; }
  [data-rf-root] .rf-tab-icon{ width:16px; height:16px; vertical-align:-2px; }
}

/* ===== ÍCONES MAIORES (header dos painéis) ===== */
[data-rf-root] .rf-icon{
  width: clamp(40px, 6.8vw, 52px);   /* antes máx 48px → 52px */
  height: clamp(40px, 6.8vw, 52px);
}
[data-rf-root] .rf-icon img{
  width: clamp(24px, 3.8vw, 32px);   /* antes máx 28px → 32px */
  height: clamp(24px, 3.8vw, 32px);
}

/* ligeiro respiro entre ícone e textos */
[data-rf-root] .rf-head{ gap: 1rem; }


/* ===== ÍCONES NAS TABS – MAIORES ===== */
[data-rf-root] .rf-tab-icon{
  width: clamp(16px, 2.6vw, 20px);   /* antes máx 18px → 20px */
  height: clamp(16px, 2.6vw, 20px);
  margin-right: .5rem;
  vertical-align: -2px;
}

/* em telas muito pequenas, evita “apertar” as tabs */
@media (max-width: 720px){
  [data-rf-root] .rf-tabs .sec-tab{
    padding: .55rem .95rem;          /* compensa o ícone maior */
  }
}


/* ===== Carousel controls — desktop-only hover ===== */

/* base (toque/móvel): sem pointer e sem efeitos */
.wf-nav,
.wf-dot {
  cursor: default;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
}

/* estados desativados (comuns) */
.wf-nav[disabled],
.wf-nav[aria-disabled="true"] {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* acessibilidade (teclado em qualquer dispositivo) */
.wf-nav:focus-visible,
.wf-dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.wf-nav:focus-visible { outline-width: 3px; }

/* Dots selecionados (comum) */
.wf-dot[aria-selected="true"] {
  opacity: 1;
  transform: none;
}

/* ===== Desktop / pointer fino — ativa hover/cursor/active ===== */
@media (hover: hover) and (pointer: fine) {
  .wf-nav,
  .wf-dot {
    cursor: pointer;
  }

  .wf-nav:not([disabled]):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    opacity: 1;
  }
  .wf-nav:not([disabled]):not([aria-disabled="true"]):active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }

  .wf-dot {
    opacity: .55;
  }
  .wf-dot:hover {
    opacity: .9;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }
  .wf-dot:active {
    transform: scale(.98);
  }
}


/* ===========================
   KNOW YOU+ (ISOLADO POR .ky)
=========================== */

/* Tokens só para Know You+ */
main.ky{
  --lav:  #BE99E1;
  --peach:#FFBD59;
  --bg:   #ffffff;
  --soft: #FEF0DE;   /* realce dos cards */
  --ink:  #1f2033;
  --muted:#56586b;
  --line: #eae8f2;
  --sand: #6a5340;
  --radius: 14px;
  --shadow: none;
  --max: 1100px;
}

/* Reset local */
.ky *{ box-sizing:border-box; }
.ky img{ max-width:100%; height:auto; display:block; }

/* Fundo */
.ky, .ky .case-hero, .ky .case-cover, .ky .case-section{ background:#fff; }

/* Tipografia base */
.ky h1, .ky h2, .ky h3{ margin:0 0 6px; color:var(--ink); font-family:"Akatab",sans-serif; }
.ky p{ margin:0 0 10px; color:var(--ink); font-family:"Akatab",sans-serif; }

/* HERO */
.ky .case-hero{ text-align:center; padding:72px 0 12px; }
.ky .case-hero .case-teaser{
  color:#3a355a; max-width:820px; margin:0 auto;
  font-size:clamp(1rem, 0.6rem + 1vw, 1.125rem);
}

/* COVER */
.ky .case-cover{ padding:10px 0 28px; }
.ky .cover-fig{ max-width:var(--max); margin:0 auto; padding:0 16px; }
.ky .cover-fig img{
  width:100%; height:auto; border-radius:14px; background:#fff;
  border:1px solid var(--line); box-shadow:none;
}

/* Imagens / placeholders */
.ky .img-block, .ky .img-wide{ max-width:var(--max); margin:18px auto 32px; padding:0 16px; }
.ky .img-box{
  width:100%; aspect-ratio:16/9; display:grid; place-items:center;
  color:#7a7e8f; font-size:14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:none; position:relative;
}
.ky .img-box img{ width:100%; height:auto; display:block; border-radius:var(--radius); }
.ky .img-box[data-hasimg="true"]{ background:#fff; }

/* Process/hero/wide imagem padrão */
.ky .process-fig, .ky .hero-image, .ky .img-wide{
  max-width:var(--max); margin:10px auto 40px; padding:0 16px;
}
.ky .process-fig img, .ky .hero-image img, .ky .img-wide img{
  width:100%; height:auto; border-radius:calc(var(--radius) + 4px);
  background:#fff; border:1px solid var(--line); box-shadow:none;
}

/* Grid de destaques */
.ky .solution-grid{
  max-width:var(--max); margin:24px auto 12px; padding:0 16px;
  display:grid; grid-template-columns:repeat(3, minmax(240px, 1fr)); gap:16px;
}
@media (max-width:900px){ .ky .solution-grid{ grid-template-columns:1fr; } }
.ky .sol-item .img-frame{
  overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:calc(var(--radius) + 2px); box-shadow:none;
  transition: transform .18s ease, border-color .18s ease;
}
.ky .sol-item .img-frame:hover{ transform:translateY(-2px); border-color:#dedbeb; }
.ky .sol-item .img-frame img{ width:100%; height:240px; object-fit:cover; display:block; }

/* resets pequenos para cortar “espaço fantasma” */
html, body { margin: 0; padding: 0; overflow-x: hidden; }

/* ———— KNOW YOU+ (apenas este bloco) ———— */

/* Puxa o CTA para cima do footer e neutraliza paddings/margens locais */
#kyplus-only{
  /* tira espaço interno/externo da secção */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 8px !important;
  margin-bottom: -28px !important;   /* ← puxa visualmente para cima do footer */
}

/* zera qualquer “respiro” do próximo bloco (seja ele qual for) */
#kyplus-only + *{
  margin-top: 0 !important;
  padding-top: 8px !important;       /* só um respiro mínimo */
}

/* mata separadores comuns entre a secção e o footer, se existirem */
#kyplus-only + .spacer,
#kyplus-only + .section-spacer,
#kyplus-only + .divider,
#kyplus-only + .gap,
#kyplus-only + .space{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* se o próximo elemento já for o footer, encurta-o um pouco */
#kyplus-only + footer,
#kyplus-only + .footer,
#kyplus-only + .site-footer{
  margin-top: 0 !important;
  padding-top: 12px !important;
}

/* botão não-pill (mantém tudo igual ao teu, só altero o hover) */
#kyplus-only .kyplus-btn{
  display:inline-flex; align-items:center;
  text-decoration:none; font-family:"Akatab",sans-serif;
  font-weight:400; font-size:16px; letter-spacing:2px;
  color:#fff; background:#6A5340; padding:10px 18px;
  border-radius:10px; border:none; cursor:pointer;
  transition:letter-spacing .4s, background-color .2s ease, transform .2s ease;
}

/* HOVER — único ajuste pedido */
#kyplus-only .kyplus-btn:hover{
  background:#8cb258;
  color:#fff;
  letter-spacing:4px;
}

/* ACTIVE — inalterado */
#kyplus-only .kyplus-btn:active{
  background:#75924c;
  transform:translateY(1px);
}



/* Focus local */
.ky a:focus, .ky button:focus{
  outline:2px solid var(--lav);
  outline-offset:2px;
  box-shadow:none !important;
}

/* ====== Secções centradas e ritmo ====== */
.ky .case-section{
  padding:30px 0 36px;
  text-align:center;
}
.ky .case-kicker{
  display:block; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lav); margin-bottom:10px;
}
.ky .case-section h2{
  margin:6px auto 14px; line-height:1.25; font-weight:650; max-width:900px;
}
.ky .case-section p{
  margin:0 auto 18px; line-height:1.7; max-width:900px; color:var(--ink);
}
.ky h3{ margin:16px 0 8px; line-height:1.3; text-align:center; }

.ky .img-block, .ky .img-wide, .ky .process-fig{ margin:20px auto 48px; }
.ky .solution-grid{ margin:28px auto 24px; gap:18px; }
.ky .cta-wrap{ margin:44px 0 96px; }

/* quando há imagem logo a seguir ao texto */
.ky .case-section > * + .img-block,
.ky .case-section > * + .process-fig,
.ky .case-section > * + .img-wide{ margin-top:18px; }

/* Mobile compacto */
@media (max-width:768px){
  .ky .case-section{ padding:26px 0 30px; }
  .ky .case-section h2{ margin:4px auto 12px; }
  .ky .case-section p{ margin:0 auto 14px; }
  .ky .img-block, .ky .img-wide, .ky .process-fig{ margin:16px auto 38px; }
  .ky .solution-grid{ gap:14px; }
  .ky .cta-wrap{ margin:36px 0 72px; }
}

/* ===== KNOW YOU+ · Project Info — largura igual às imagens ===== */
.ky-project-info{
  max-width: var(--max);
  width: calc(100% - 32px);
  margin: 24px auto 34px;
  padding: 28px 16px;
  background: #FDFCFF;
  border-radius: 16px;
  border: none;
  box-shadow: none;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  column-gap: clamp(72px, 8.5vw, 120px);
  align-items: start;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Cada bloco da barra */
.ky-project-info .info-item{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding-inline: 12px;
}

/* Divisores */
.ky-project-info .info-item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: calc(clamp(72px, 8.5vw, 120px) / -2 + 4px);
  top: 34%; height: 32%; width: 1px;
  background: rgba(40,40,70,.12); pointer-events: none;
}

/* Tipografia da barra */
.ky-project-info .info-label{
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: #A9A0B9; font-weight: 600; margin-bottom: 2px;
}
.ky-project-info .info-value,
.ky-project-info .roles span{
  font-size: 15px; line-height: 1.55; color: #1f2033;
  font-family: "Akatab", sans-serif; font-weight: 500;
}

/* Evita quebra nas 3 primeiras colunas */
.ky-project-info .info-value{ white-space: nowrap; }

/* “My Role” em lista vertical */
.ky-project-info .roles{ display:flex; flex-direction:column; gap:4px; }

/* Papel principal: desktop em linha, mobile quebra controlada */
.ky-project-info .roles .role-line   { display:inline-flex; gap:.35ch; white-space:nowrap; }
.ky-project-info .roles .role-main   { display:inline; }
.ky-project-info .roles .role-suffix { display:inline; }

@media (max-width: 640px){
  .ky-project-info .roles .role-line{
    display:flex; flex-direction:column; align-items:center;
    gap:2px; white-space:normal;
  }
  .ky-project-info .roles .role-main{ display:block; white-space:nowrap; }
  .ky-project-info .roles .role-suffix{ display:block; white-space:normal; margin-top:0; }
}

/* Barra responsiva */
@media (max-width: 900px){
  .ky-project-info{
    max-width: var(--max);
    width: calc(100% - 24px);
    margin: 22px auto;
    padding: 22px 12px;
    grid-template-columns: 1fr 1fr;
    row-gap: 22px; column-gap: 28px;
  }
  .ky-project-info .info-item::after{ display:none; }
}

/* ==== Cabeçalho de secção padrão (kicker + h2 + p) ==== */
.ky-sec{
  max-width: 1100px;
  margin: 30px auto 26px;
  padding: 0 16px;
  text-align: center;
}
.ky-sec .ky-kicker{
  display:block; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#B3A5C9; margin:0 0 10px;
}
.ky-sec h2{
  margin:6px auto 14px; font-weight:650; color:#1f2033; line-height:1.28; max-width:900px;
}
.ky-sec p{
  margin:0 auto 18px; line-height:1.7; color:#1f2033; max-width:900px;
}

/* ==== DESIGN PROCESS (cartão) ==== */
.ky-process-card{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto 40px;
  padding: 16px;
  background:#FDFCFF;
  border-radius: 16px;
  border: 1px solid #eae8f2;
}
.ky-process-card figure{
  margin:0; border-radius: 14px; overflow:hidden;
  border: 1px solid #ece9f5; background:#fff;
}
.ky-process-card img{
  display:block; width:100%; height:auto; border-radius:14px;
}

/* ==== OVERVIEW (texto central + imagem alinhada à barra) ==== */
.ky-overview{
  width: min(1200px, calc(100% - 64px));
  margin: 44px auto 0;
  text-align: center;
}
.ky-overview .case-kicker{
  display:block; font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; color:#A9A0B9; margin-bottom:6px;
}
.ky-overview h2{
  font-size:22px; font-weight:600; color:#1f2033; margin:0 0 10px;
}
.ky-overview p{
  max-width:820px; margin:0 auto 30px; color:#413c47; line-height:1.6;
}
.overview-image{
  max-width: min(1200px, calc(100% - 64px));
  margin:0 auto; border-radius:16px; overflow:hidden;
}
.overview-image img{
  width:100%; height:auto; display:block; border-radius:16px;
}
@media (max-width: 900px){
  .overview-image{ width:min(1000px, calc(100% - 24px)); }
}

/* ===== EMPATHIZE — colunas de accordions ===== */
.ky .ky-accordion-columns{
  max-width: var(--max);
  margin: 18px auto 32px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
@media (max-width: 900px){
  .ky .ky-accordion-columns{ grid-template-columns: 1fr; gap: 16px; }
}

.ky .ky-subtitle{
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #8a7fb0;
  text-transform: uppercase;
  text-align: center;
}

/* ==== AJUSTES SOLICITADOS ==== */
.ky .ky-acc {
  background: #FDFCFF;
  border: 1px solid #eae8f2;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.ky .ky-acc:hover{ border-color:#dcd6f0; }

.ky .ky-acc__summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px; /* +respiro */
  font-weight: 700;
  color: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.ky .ky-acc__summary::-webkit-details-marker{ display:none; }

.ky .ky-acc__summary::after{
  content: "▾";
  font-size: 14px;
  opacity: .65;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.ky .ky-acc[open] .ky-acc__summary::after{ transform: rotate(180deg); }

.ky .ky-acc__content{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
  padding: 0 18px 6px;
}
.ky .ky-acc[open] .ky-acc__content{ grid-template-rows: 1fr; }
.ky .ky-acc__content > *{
  overflow: hidden;
  padding-bottom: 16px; /* +respiro */
  margin: 0;
}

/* listas internas */
.ky .ky-acc__content ul{
  margin: 6px 0 0;
  padding-left: 18px;
  color: #2b2b3a;
  line-height: 1.6;
  font-size: 15.5px;
}
.ky .ky-acc__content li{ margin: 8px 0; }

/* nuvem de palavras */
.ky-wordcloud{
  width: min(1100px, calc(100% - 48px));
  margin: 8px auto 34px;
  padding: 12px;
  text-align: center;
}
.ky-wordcloud img{
  display:block; width:100%; height:auto; border-radius:14px;
}
.ky-wordcloud figcaption{
  font-size:12.5px; color:#6b6480; margin-top:10px;
}

/* + espaço entre o título ("Desk research highlights" / "User interviews – key insights")
   e os cards de accordion */
.ky .ky-subtitle{
  margin: 2px 0 20px; /* antes 10px */
}

/* === Tabs do DEFINE (escopo local) === */
#define .ky-def-tabs{
  max-width: var(--max); margin: 26px auto 0; padding: 8px 12px;
  display:flex; gap:8px; flex-wrap:wrap; background:#F7F6FF;
  border-radius:12px 12px 0 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
#define .ky-def-tab{
  appearance:none; border:1px solid #DDD8F2; cursor:pointer;
  padding:8px 12px; border-radius:999px; background:#F1EDFF; color:#4A3E77;
  font-weight:800; font-size:13px; transition:background .15s, transform .12s, color .15s, border-color .15s;
}
#define .ky-def-tab:hover{ transform:translateY(-1px); }
#define .ky-def-tab.is-active{ background: var(--lav); color:#fff; border-color: var(--lav); }

#define .ky-def-panel{
  max-width: var(--max); margin: 0 auto 28px; padding: 16px;
  background:#fff; border:1px solid #eae8f2; border-radius:0 0 12px 12px; box-shadow:0 8px 18px rgba(0,0,0,.04);
}

/* === Persona: respiro & hierarquia === */
#define .ky-card{ background:#FDFCFF; border:1px solid #eae8f2; border-radius:16px; padding:18px; }
#define .ky-persona__head{ margin-bottom: 14px; }
#define .ky-card__title{ margin:0; font-size:19px; color:#1f2033; }
#define .ky-persona-meta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:10px 16px; font-size:13px; color:#6b6480; }

/* grid 3 colunas com avatar central */
#define .ky-persona-grid{
  display:grid; gap: 22px; align-items:start; grid-template-columns: 1fr 220px 1fr;
  margin: 6px 0 8px;
}
@media (max-width: 900px){
  #define .ky-persona-grid{ grid-template-columns: 1fr; }
}
#define .ky-subttl{ font-size:12px; letter-spacing:.14em; color:#8a7fb0; text-transform:uppercase; margin:10px 0 6px; }
#define .ky-list{ margin:6px 0 0 18px; line-height:1.6; }
#define .ky-avatar{ display:flex; justify-content:center; align-items:flex-start; }
#define .ky-avatar__img{
  width: 180px; height: 180px; border-radius: 50%;
  border: 4px solid #ece9f5; background:#faf7ff center/cover no-repeat;
  box-shadow: 0 8px 22px rgba(31,32,51,.06);
}
@media (max-width: 900px){ #define .ky-avatar__img{ width:160px; height:160px; margin:4px auto 0; } }

/* Biography destacada */
#define .ky-bio{ margin-top: 8px; padding-top: 10px; border-top: 1px solid #efeef7; }
#define .ky-bio p{ margin:8px 0 4px; line-height:1.65; }

/* Personality bars — menores e centradas */
#define .ky-traits-wrap{ margin-top: 8px; }
#define .ky-traits{
  list-style:none; padding:0; margin:10px auto 0;
  display:grid; gap:10px; max-width: 820px; /* centraliza */
}
#define .trait{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px;
}
#define .trait-label{ font-size:14px; color:#332e45; white-space:nowrap; }
#define .trait-track{
  position:relative; height: 12px; /* menor */
  border-radius:999px; background:#e7defa; overflow:hidden;
}
#define .trait-fill{
  position:absolute; inset:0 auto 0 0; width:var(--val,50%);
  background: linear-gradient(90deg, #5E4B85 0%, #8B6CC8 100%);
  border-radius:999px;
}
#define .trait-track::after{
  content:""; position:absolute; right:4px; top:50%; width:8px; height:8px;
  transform: translateY(-50%); border-radius:50%; background:#876BA1; opacity:.8;
}

/* Empathy Map */
#define .ky-card__title + .ky-empathy{ margin-top: 12px; }
#define .ky-empathy{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width: 900px){ #define .ky-empathy{ grid-template-columns:1fr; } }
#define .em-blk{ background:#fff; border:1px solid #ece9f5; border-radius:12px; padding:12px; }
#define .em-blk h4{ margin:0 0 6px; color:#4A3E77; }

/* Alinha colunas à esquerda e dá mais respiro */
#define .ky-persona-grid{
  gap: 26px;
  grid-template-columns: 1fr 240px 1fr; /* avatar um pouco maior */
}
#define .ky-col{ text-align: left; }
#define .ky-list{ margin-left: 18px; }

/* Avatar + meta do Tim (debaixo da bolinha) */
#define .ky-avatar{
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
#define .ky-avatar__img{
  width: 190px; height: 190px; border-radius: 50%;
  border: 4px solid #876BA1; background:#876BA1 center/cover no-repeat;
  box-shadow: 0 8px 22px rgba(31,32,51,.06);
}
#define .ky-meta{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px; font-size: 13px; color: #4c4761;
}
#define .ky-meta li{ white-space: nowrap; }

/* Título separado do resto */
#define .ky-persona__head{ margin-bottom: 14px; }
#define .ky-card__title{ font-size: 20px; margin: 0; }

/* Separadores claros entre blocos */
#define .ky-bio{
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid #eeeaf8;
}
#define .ky-traits-wrap{
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed #e6e0f5; /* separa visualmente de Biography */
}

/* Barras ESTP menores e centradas */
#define .ky-traits{ max-width: 720px; margin: 12px auto 0; gap: 8px; }
#define .trait{ gap: 12px; }
#define .trait-track{ height: 10px; }

/* Responsivo: empilha e mantém alinhamento à esquerda */
@media (max-width: 900px){
  #define .ky-persona-grid{ grid-template-columns: 1fr; }
  #define .ky-avatar__img{ width: 170px; height: 170px; }
  #define .ky-meta{ grid-auto-flow: row; }
}

/* Tabs (chips) */
#define .ky-def-tabs{
  max-width: var(--max); margin: 26px auto 0; padding: 8px 12px;
  display:flex; gap:8px; flex-wrap:wrap; background:#F7F6FF;
  border-radius:12px 12px 0 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
#define .ky-def-tab{
  appearance:none; border:1px solid #DDD8F2; cursor:pointer;
  padding:8px 12px; border-radius:999px; background:#F1EDFF; color:#4A3E77;
  font-weight:800; font-size:13px; transition:background .15s, transform .12s, color .15s, border-color .15s;
}
#define .ky-def-tab:hover{ transform:translateY(-1px); }
#define .ky-def-tab.is-active{ background:var(--lav); color:#fff; border-color:var(--lav); }

/* Painéis sem moldura; o quadro é o .ky-card */
#define .ky-def-panel{ max-width:var(--max); margin:0 auto 26px; padding:0; background:transparent; border:none; }

/* QUADRO / CARD */
#define .ky-card{
  background:#FDFCFF; border:1px solid #eae8f2; border-radius:16px;
  padding: 20px 20px 22px; box-shadow: 0 8px 18px rgba(0,0,0,.04);
}
#define .ky-persona-card, #define .ky-empathy-card{ max-width: var(--max); margin: 0 auto; }

/* Títulos com respiro */
#define .ky-card__head{ text-align:center; }
#define .ky-card__title{ margin: 6px 0 14px; font-size:20px; color:#1f2033; }

/* GRID 3 colunas com avatar ao meio */
#define .ky-persona-grid{
  display:grid; gap:24px; align-items:start; grid-template-columns: 1fr 240px 1fr;
  max-width: 1000px; margin: 0 auto 10px;
}
@media (max-width: 900px){ #define .ky-persona-grid{ grid-template-columns:1fr; gap:18px; } }
#define .ky-col{ text-align:left; }
#define .ky-subttl{ font-size:12px; letter-spacing:.14em; color:#8a7fb0; text-transform:uppercase; margin:8px 0 6px; }
#define .ky-list{ margin:6px 0 0 18px; line-height:1.6; }

/* Avatar + meta sob a bolinha */
#define .ky-avatar{ display:flex; flex-direction:column; align-items:center; gap:12px; }
#define .ky-avatar__img{
  width: 190px; height: 190px; border-radius: 50%;
  border: 4px solid #876BA1; background:#faf7ff center/cover no-repeat;
  box-shadow: 0 8px 22px rgba(31,32,51,.06);
}
#define .ky-meta{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13px; color:#4c4761; }

/* Anel da foto (avatar) em #876BA1 */
#define .ky-avatar__img{
  border-color:#876BA1 !important;
}
/* Separadores entre blocos */
#define .ky-bio{
  margin-top:16px; padding-top:16px; border-top:1px solid #eeeaf8;
  max-width: 980px; margin-left:auto; margin-right:auto; text-align:center;
}
#define .ky-traits-wrap{
  margin-top:18px; padding-top:16px; border-top:1px dashed #e6e0f5;
}

/* Barras ESTP — menores e centradas */
#define .ky-traits{
  list-style:none; padding:0; margin:10px auto 0;
  display:grid; gap:8px; max-width: 720px;
}
#define .trait{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
#define .trait-label{ font-size:13.5px; color:#332e45; white-space:nowrap; }
#define .trait-track{ position:relative; height:10px; border-radius:999px; background:#e7defa; overflow:hidden; }
#define .trait-fill{
  position:absolute; inset:0 auto 0 0; width:var(--val,50%);
  background: linear-gradient(90deg, #876BA1 0%, #8B6CC8 100%); border-radius:999px;
}
#define .trait-track::after{ content:""; position:absolute; right:4px; top:50%; width:8px; height:8px; transform:translateY(-50%); border-radius:50%; background:#876BA1; opacity:.8; }

/* Empathy Map dentro do quadro */
#define .ky-empathy{ display:grid; gap:14px; grid-template-columns:1fr 1fr; max-width: 1000px; margin: 0 auto; }
@media (max-width: 900px){ #define .ky-empathy{ grid-template-columns:1fr; } }
#define .em-blk{ background:#fff; border:1px solid #ece9f5; border-radius:12px; padding:12px; }
#define .em-blk h4{ margin:0 0 6px; color:#4A3E77; }

/* ===== AJUSTES PEDIDOS — DEFINE ===== */

/* 1) Aba ativa mais elegante (#BE99E1) */
#define .ky-def-tab.is-active{
  background:#876BA1; border-color:#876BA1; color:#fff;
}

/* 2) Títulos das colunas centrados + mais respiro; listas um pouco mais soltas */
#define .ky-col .ky-subttl{
  text-align:center; margin-top:6px; margin-bottom:12px;
}
#define .ky-list{ line-height:1.68; }

/* 3) Meta do Tim (debaixo da bolinha): tamanho normal + destaque sutil */
#define .ky-meta{
  font-size:15px; line-height:1.45; color:#2c2452;
  display:grid; gap:6px;
  padding:10px 12px; background:#fff;
  border:1px solid #ece9f5; border-radius:12px;
  box-shadow:0 3px 10px rgba(31,32,51,.04);
}
#define .ky-meta strong{ font-weight:700; }
@media (max-width:900px){
  #define .ky-meta{ font-size:14px; }
}

/* 4) “User Persona” com mais respiro do conteúdo */
#define .ky-persona__head{ margin-bottom:16px; }
#define .ky-card__title{ margin:6px 0 14px; }

/* 5) Personality — ESTP: barras mais finas, centradas e com “ponta” arredondada */
#define .ky-traits{ max-width:660px; margin:12px auto 0; gap:10px; }
#define .trait-track{ height:8px; background:#ede6fb; border-radius:999px; overflow:hidden; }
#define .trait-track::after{ display:none; }         /* remove o ponto fixo do lado direito */
#define .trait-fill{ border-radius:999px; position:absolute; inset:0 auto 0 0; width:var(--val,50%); background:linear-gradient(90deg,#876BA1 0%,#8B6CC8 100%); }
/* knob redondinho no fim da barra preenchida */
#define .trait-fill::after{
  content:""; position:absolute; right:0; top:50%;
  transform:translate(50%,-50%);
  width:10px; height:10px; border-radius:50%;
  background:#c9b3ff; box-shadow:0 0 0 2px rgba(255,255,255,.7);
}

/* 6) Empathy Map: mais espaço entre o título e os blocos */
#define .ky-empathy-card .ky-card__title{ margin-bottom:18px; }
#define .ky-card__title + .ky-empathy{ margin-top:18px; }

/* ====== CONTINUIDADE: barra (tabs) + card ====== */
#define .ky-def-tabs{
  margin-bottom: 0;                          /* encosta */
  border-bottom-left-radius: 0;              /* sem canto na base da barra */
  border-bottom-right-radius: 0;
}
#define .ky-def-panel{ margin-top: 0; }       /* sem “gap” acima do card */
#define .ky-def-panel .ky-card{
  border-top-left-radius: 0;                 /* card continua a barra */
  border-top-right-radius: 0;
}

/* ====== EMPATHY MAP: mais respiro e SEM bullets ====== */
#define .ky-empathy-card .ky-card__title{ margin-bottom: 22px; }
#define .ky-card__title + .ky-empathy{ margin-top: 20px; }

#define .ky-empathy .ky-list{
  list-style: none;                          /* remove • */
  padding-left: 0;
  margin: 0;
  text-align: center;                        /* mantém centrado como no teu layout */
}
#define .ky-empathy .ky-list li{ margin: 8px 0; }

/* (opcional) arredonda só a base dos blocos de empathy para ficar suave */
#define .ky-empathy .em-blk{
  border-top-left-radius: 0;                 /* remove cantos no topo quando quiseres “fundir” com algo acima */
  border-top-right-radius: 0;
}

/* === TABS: mantém o ativo elegante (#BE99E1) já aplicado === */


/* === TITLES (Needs/Goals/Frustrations/Interests)
   alinhados à esquerda e ao texto das listas + mais respiro === */
#define .ky-col .ky-subttl{
  text-align: left;
  padding-left: 18px;         /* alinha com início do texto da lista */
  margin-top: 6px;
  margin-bottom: 12px;
}
/* mais espaço antes do 2º bloco em cada coluna (Goals / Interests) */
#define .ky-col .ky-subttl + .ky-list + .ky-subttl{
  margin-top: 18px;
}


/* === META DO TIM (debaixo da foto) — sem “caixa”, tip maior e elegante === */
#define .ky-meta{
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 15.5px;
  line-height: 1.5;
  color: #2c2452;
  gap: 6px;
  padding: 4px 0 0;
}
#define .ky-meta li{
  display: grid;
  grid-template-columns: auto auto;
  column-gap: .5ch;
  justify-content: center;    /* mantém centrado sob a bolinha */
}
#define .ky-meta strong{ font-weight: 800; color:#3e2f6a; }


/* === PERSONALITY — ESTP: barras mais curtas e finas + “knob” elegante === */
#define .ky-traits{
  max-width: 520px;           /* ↓ encurta largura total */
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  gap: 10px;
}
#define .trait-label{ font-size: 13px; }
#define .trait-track{ height: 8px; }
#define .trait-fill::after{ width: 8px; height: 8px; } /* knob menor */


/* === Persona: pequeno respiro extra entre título e conteúdo === */
#define .ky-persona-card .ky-card__title{ margin-bottom: 16px; }

/* Títulos dos cards (“User Persona” e “Empathy Map”) */
#define .ky-card__title{ color:#876BA1; }

/* Títulos Needs/Goals/Frustrations/Interests centrados e harmonizados com a lista */
#define .ky-col .ky-subttl{
  text-align:center;
  margin-top:6px;
  margin-bottom:12px;           /* respiro do título para os tópicos */
}
#define .ky-list{ margin-top:8px; }           /* leve respiro extra */
#define .ky-persona-card .ky-bio{ margin-top:22px; }  /* mais espaço antes da Biography */

/* Personality — ESTP: barras mais curtas e sem a “bolinha” no fim (só canto arredondado) */
#define .ky-traits{ max-width:520px; width:92%; margin-left:auto; margin-right:auto; }
#define .trait-track{ height:8px; }
#define .trait-fill{ border-radius:999px; }   /* pontas arredondadas */
#define .trait-fill::after{ display:none !important; } /* remove a bolinha */

/* Empathy Map: respiro do título para os quadrados (mantém o ajuste anterior) */
#define .ky-empathy-card .ky-card__title{ margin-bottom:22px; }
#define .ky-card__title + .ky-empathy{ margin-top:20px; }

/* Aba ativa mais elegante (#876BA1) */
#define .ky-def-tab.is-active{
  background:#876BA1;
  border-color:#876BA1;
  color:#fff;
}

/* ===== DEFINE — Palette (escopo local) ===== */
#define{
  /* Lavandas */
  --lav-soft: #CFAFEE;
  --lav:      #BE99E1;
  --lav-deep: #876BA1;

  /* Pêssegos */
  --peach-0:  #FFFBF8;
  --peach-1:  #FEF0DE;
  --peach-2:  #FFD391;
  --peach-3:  #FFBD59;

  /* Base & Neutros */
  --card:     #FDFCFF;
  --line:     #DBD9D8;
  --ink:      #272222;
  --muted:    #928F8F;
}

/* ===== Tabs (User Persona / Empathy Map) ===== */
#define .ky-def-tab.is-active{
  background: var(--lav-deep);
  border-color: var(--lav-deep);
  color:#fff;
}

/* ===== Títulos dos cards ===== */
#define .ky-card__title{
  color: var(--lav-deep);
}

/* ===== USER PERSONA — layout 3 colunas ===== */
/* (Needs+Goals) | Avatar | (Frustrations+Interests) */
#define .ky-persona-grid--3{
  display:grid;
  grid-template-columns: 1fr 240px 1fr;
  gap: 24px 36px;
  align-items:start;
  max-width:1000px;
  margin:0 auto 10px;
}
@media (max-width:900px){
  #define .ky-persona-grid--3{ grid-template-columns:1fr; gap:16px; }
}
#define .ky-stack{ display:grid; gap:20px; }

/* Subtítulos dos tópicos */
#define .ky-topic .ky-subttl{
  text-align:center;
  color: var(--lav);
  letter-spacing:.12em;
  margin:6px 0 12px;
}

/* Listas — sem bullets (look clean) */
#define .ky-topic .ky-list{
  list-style:none; margin:0; padding:0;
}
#define .ky-topic .ky-list li{
  margin:6px 0; color:var(--ink);
}

/* Avatar + meta */
#define .ky-avatar{ display:flex; flex-direction:column; align-items:center; gap:12px; }
#define .ky-avatar__img{
  width:190px; height:190px; border-radius:50%;
  background:#faf7ff center/cover no-repeat;
  border:4px solid var(--lav-soft);
  box-shadow:0 8px 22px rgba(39,34,34,.06);
}
#define .ky-meta{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px; font-size:15.5px;
  color:var(--ink); text-align:left;
}
#define .ky-meta strong{ color:var(--lav-deep); }

/* Separadores (linha entre blocos) */
#define .ky-persona-card hr{
  border:none; height:1px; background:var(--line); opacity:.8;
}

/* Personality — barras elegantes e curtas */
#define .ky-traits{
  max-width:520px; width:92%;
  margin:12px auto 0; gap:10px;
}
#define .trait-track{
  position:relative; height:8px; border-radius:999px; overflow:hidden;
  background:#EEE7F8;                        /* lavanda bem suave */
}
#define .trait-fill{
  position:absolute; inset:0 auto 0 0;
  width:var(--val,50%);
  background:linear-gradient(90deg, var(--lav-deep), var(--lav));
  border-radius:999px;
}

/* ===== EMPATHY MAP — cartões com cantos arredondados ===== */
#define .ky-empathy .em-blk{
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
}

/* ===== Micro-ajustes de tipografia ===== */
#define .ky-persona-card, #define .ky-empathy{ color:var(--ink); }
#define .ky-persona-card .ky-bio{ color:var(--muted); }

/* Empurra a foto + texto ligeiramente para baixo (só desktop) */
@media (min-width: 901px){
  #define .ky-avatar{
    margin-top: clamp(16px, 3vw, 46px); /* ajusta conforme gostares */
  }
}

/* ===== TABS ===== */
/* Inativa: texto mais leve e na cor do corpo (#272222) */
#define .ky-def-tab{
  color:#272222;
  font-weight:600;            /* menos “bold” */
}

/* Ativa: mantém o lavanda escuro */
#define .ky-def-tab.is-active{
  background:#876BA1;
  border-color:#876BA1;
  color:#fff;
  font-weight:700;            /* podes trocar para 600 se quiseres ainda mais leve */
}


/* ===== Biography + Personality — força a cor #876BA1 ===== */
#define .ky-persona-card .ky-divider span,        /* ex: <div class="ky-divider"><span>BIOGRAPHY</span> */
#define .ky-persona-card .ky-kicker,              /* se usares a kicker pequena */
#define .ky-persona-card .case-kicker,            /* kicker herdada de outras secções */
#define .ky-persona-card .ky-traits-title,        /* ex: <div class="ky-traits-title">PERSONALITY — ESTP</div> */
#define .ky-persona-card [class*="label"]{        /* fallback: qq classe que contenha "label" */
  color:#876BA1 !important;
}

/* Empathy Map — cor dos títulos */
#define .ky-empathy .em-blk h3,
#define .ky-empathy [class*="em-title"],
#define .ky-empathy .ky-card__title{
  color:#BE99E1 !important;
}

/* ================================
   PATCH — Cores dos títulos
================================ */

/* BIOGRAPHY + PERSONALITY — força #876BA1 só dentro dessas secções */
.ky-persona-card .ky-bio :is(h1,h2,h3,h4,h5,.ky-subttl,.ky-kicker,.case-kicker,.ky-divider span),
.ky-persona-card .ky-traits-wrap :is(h1,h2,h3,h4,h5,.ky-subttl,.ky-traits-title,.ky-divider span) {
  color: #876BA1 !important;
}

/* EMPATHY MAP — títulos dos cartões em #BE99E1 */
.ky-empathy .em-blk :is(h1,h2,h3,h4,h5,.em-title) {
  color: #BE99E1 !important;
}

/* Tabs inativas: texto mais neutro (opcional, não mexe no ativo) */
.ky-def-tab:not(.is-active) {
  color: #272222 !important;
  font-weight: 600;
}

/* ================================
   PATCH — Mobile: avatar/meta 1.º
================================ */
@media (max-width: 900px){
  /* lineariza o grid e sobe a coluna central (avatar + meta) */
  .ky-persona-grid--3,
  .ky-persona-grid {
    display: flex !important;
    flex-direction: column;
  }
  .ky-persona-grid--3 .ky-avatar,
  .ky-persona-grid .ky-avatar {
    order: -1;
  }
}

/* ===== Persona — ordem e centragem em mobile ===== */

/* Telefones pequenos (≤520px): avatar+meta 1º, depois as colunas; tudo centrado */
@media (max-width: 520px){
  .ky-persona-grid--3{
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "left"
      "right";
    gap: 18px;
    justify-items: center;              /* centra avatar e colunas */
  }

  /* respiro do título para a imagem */
  .ky-persona-card .ky-card__title{ margin-bottom: 18px; }
  .ky-avatar{ margin-top: 10px; }       /* afasta a foto do título */
  .ky-meta{ text-align: center; }

  /* colunas (Needs/Goals/Frustrations/Interests) centradas e com largura agradável */
  .ky-topic{ width: min(420px, 92vw); }
  .ky-topic .ky-subttl{ text-align: center; }
  .ky-topic .ky-list{ text-align: center; padding: 0; margin: 0; }
  .ky-topic .ky-list li{ margin: 8px 0; }
}

/* Phablets (521–900px): foto na 1ª linha e duas colunas por baixo */
@media (min-width: 521px) and (max-width: 900px){
  .ky-persona-grid--3{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "avatar avatar"
      "left   right";
    gap: 20px 22px;
    justify-items: center;
  }
  .ky-topic{ width: min(540px, 100%); }
}
/* ===== Persona — centrar só o bloco da foto+meta no mobile ===== */
@media (max-width: 520px){
  /* garante 1 coluna */
  .ky-persona-grid,
  .ky-persona-grid--3{
    grid-template-columns: 1fr;
  }

  /* centro absoluto do item no grid */
  .ky-persona-grid .ky-avatar,
  .ky-persona-grid--3 .ky-avatar{
    justify-self: center;     /* <- chave */
    align-items: center !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* imagem e meta perfeitamente centradas */
  .ky-avatar__img{
    display: block;
    margin: 12px auto 0;      /* dá mais respiro do título */
  }
  .ky-meta{
    margin: 8px auto 0;
    text-align: center;
  }
}

/* =========================
   PROBLEMS DETECTED – FIX
   ========================= */

:root{
  --pd-ink:#272222;
  --pd-lav-soft:#CFAFEE;   /* Problem */
  --pd-impact:#EEE7F8;     /* Impact  */
  --pd-opp:#FFD391;        /* Opportunity */
  --pd-lav-deep:#876BA1;
}

/* base */
.pd{ max-width:1100px; margin:46px auto 0; padding:0 16px; }
.pd-title{ text-align:center; font-size:20px; font-weight:600; color:var(--pd-ink); margin:0 0 18px; }

/* cabeçalho (desktop) */
.pd-head{
  display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:0; align-items:center;
  margin:10px 0 12px; text-align:center;
}
.pd-col{ font-weight:700; letter-spacing:.02em; color:var(--pd-lav-deep); display:flex; gap:8px; justify-content:center; }

/* IMPORTANTE: a grelha “real” fica em CADA LINHA */
.pd-grid{ display:block; position:relative; }
.pd-row{ display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:0; row-gap:0; margin:0 0 16px; }

.pd-cell{
  padding:18px 22px; line-height:1.35; font-weight:500; color:var(--pd-ink);
  border-radius:9999px; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.pd-cell.is-problem{ background:var(--pd-lav-soft); }
.pd-cell.is-impact { background:var(--pd-impact); }
.pd-cell.is-opp    { background:var(--pd-opp); }

/* “pílula corrida” por linha */
.pd-row .pd-cell:nth-child(1){border-top-right-radius:0;border-bottom-right-radius:0;}
.pd-row .pd-cell:nth-child(2){border-radius:0;}
.pd-row .pd-cell:nth-child(3){border-top-left-radius:0;border-bottom-left-radius:0;}

/* divisórias subtis entre colunas – só desktop */
.pd-grid::before,.pd-grid::after{
  content:""; position:absolute; left:33.333%; top:0; bottom:0; width:1px; background:rgba(0,0,0,.06);
}
.pd-grid::after{ left:66.666%; }

/* NUNCA mostrar labels/ícones dentro das pills */
.pd .pd-cell::before,
.pd .pd-cell::after{ display:none !important; }

/* ---------- MOBILE ---------- */
.pd-mobile-toggle, .pd-mobile-nav{ display:none; }

@media (max-width:900px){

  /* título fora do quadro (pd não tem fundo em mobile) */
  .pd{ background:transparent; border:0; padding:0 16px; }

  /* Tabs + cartão + contador como UM QUADRO visual “em camadas” */
  .pd-mobile-toggle{
    display:flex; gap:6px; justify-content:center; align-items:center;
    margin:0 auto 0; padding:6px;
    max-width:1100px;
    background:#FFFFFF;                 /* FONDO BRANCO (não confunde) */
    border:1px solid #E2DDFB;
    border-radius:16px 16px 0 0;        /* topo do quadro */
  }
  .pd-mobile-toggle button{
    appearance:none; border:0; background:transparent; cursor:pointer;
    padding:8px 14px; border-radius:999px; font-size:14px; line-height:1;
    font-weight:800; color:var(--pd-ink); display:inline-flex; align-items:center; gap:8px;
  }
  .pd-mobile-toggle button.is-active[data-view="problem"]     { background:var(--pd-lav-soft); }
  .pd-mobile-toggle button.is-active[data-view="impact"]      { background:var(--pd-impact);   }
  .pd-mobile-toggle button.is-active[data-view="opportunity"] { background:var(--pd-opp);      }

  .pd-head{ display:none !important; }  /* sem cabeçalho desktop no mobile */

  /* “miolo” do quadro */
  .pd-grid{
    display:block !important;
    max-width:1100px; margin:0 auto;
    background:#FFFFFF;                 /* igual às tabs, fica UM quadro */
    border-left:1px solid #E2DDFB;
    border-right:1px solid #E2DDFB;
    border-top:0; border-bottom:0;
    border-radius:0;
    padding:10px 12px;
    position:relative;
  }

  /* NUNCA mostrar linhas verticais em mobile */
  .pd-grid::before, .pd-grid::after{ display:none !important; }

  .pd-row{ display:none; grid-template-columns:1fr; margin:0; } /* 1 cartão de cada vez */
  .pd-row.is-active{ display:block; }

  .pd-row .pd-cell{
    border-radius:14px; padding:18px 16px; width:100%; max-width:100%;
    box-sizing:border-box; overflow-wrap:anywhere;
  }
  .pd[data-view="problem"]     .pd-row.is-active .is-problem{ display:block; }
  .pd[data-view="impact"]      .pd-row.is-active .is-impact { display:block; }
  .pd[data-view="opportunity"] .pd-row.is-active .is-opp    { display:block; }

  /* contador — base do quadro */
  .pd-mobile-nav{
    display:flex !important; justify-content:center; align-items:center; gap:14px;
    max-width:1100px; margin:0 auto 16px;
    background:#FFFFFF;
    border:1px solid #E2DDFB;
    border-top:0; border-radius:0 0 16px 16px;   /* base do quadro */
    padding:10px 12px;
  }
  .pd-mobile-nav .pd-prev,.pd-mobile-nav .pd-next{
    appearance:none; border:1px solid #DDD8F2; background:#F1EDFF;
    padding:8px 12px; border-radius:12px; font-weight:800; cursor:pointer;
  }
  .pd-mobile-nav .pd-prev[disabled], .pd-mobile-nav .pd-next[disabled]{ opacity:.45; cursor:default; }
  .pd-mobile-nav .pd-step{ font-weight:800; color:#4A3E77; }
}

/* =======================
   PD — PATCH FINAL
   (cola no fim do Style.css)
======================= */

/* cores base (iguais às colunas) */
:root{
  --pd-problem:#CFAFEE;   /* lilás Problem */
  --pd-impact:#EFE7FA;    /* roxo muito claro Impact */
  --pd-opp:#FFD391;       /* pêssego Opportunity */
  --pd-ink:#272222;

  --pd-chip-bg:#F6F3FF;   /* fundo suave do menu (mobile) */
  --pd-frame-bg:#FFFFFF;  /* interior do quadro (mobile) */
  --pd-frame-line:#E7E0FB;
}

/* ---------- DESKTOP (>=901px) ---------- */
@media (min-width:901px){
  /* cabeçalho em 3 colunas, com cores por coluna */
  .pd-head{grid-template-columns:1fr 1fr 1fr; column-gap:0; margin:10px 0 12px;}
  .pd-col--problem{color:#BE99E1;}    /* título + ícone Problem */
  .pd-col--impact {color:#876BA1;}    /* título + ícone Impact  */
  .pd-col--opp    {color:#EE9D21;}    /* título + ícone Opportunity */

  /* pills continuam exatamente como no quadro */
  .pd-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr; column-gap:0; row-gap:16px;
    position:relative;
  }
  .pd-cell.is-problem{background:var(--pd-problem); color:var(--pd-ink);}
  .pd-cell.is-impact {background:var(--pd-impact);  color:var(--pd-ink);}
  .pd-cell.is-opp    {background:var(--pd-opp);     color:var(--pd-ink);}

  /* pílula corrida por linha */
  .pd-grid .pd-cell:nth-child(3n+1){border-top-right-radius:0;border-bottom-right-radius:0;}
  .pd-grid .pd-cell:nth-child(3n+2){border-radius:0;}
  .pd-grid .pd-cell:nth-child(3n)  {border-top-left-radius:0;border-bottom-left-radius:0;}

  /* nunca mostrar números/ícones dentro das pills */
  .pd-row .pd-cell::before, .pd-row .pd-cell::after{display:none !important;}
}

/* ---------- MOBILE (<=900px) ---------- */
@media (max-width:900px){
  /* título fora do quadro com bom respiro */
  .pd-title{ margin: 0 0 12px !important; }

  /* sem linhas verticais no mobile */
  .pd-grid::before, .pd-grid::after{ display:none !important; }

  /* não usar a .pd como “caixa”; criamos um quadro visual empilhando
     menu (topo) + stage (meio) + contador (base) */
  .pd{ padding:0; background:transparent; border:0; }

  /* MENU (chips) – fundo suave para diferenciar do cartão */
  .pd-mobile-toggle{
    display:flex !important;
    justify-content:center; align-items:center; gap:6px;
    background:var(--pd-chip-bg); border:1px solid var(--pd-frame-line);
    border-radius:16px 16px 0 0; padding:6px 8px; margin:0 auto; max-width:720px;
  }
  .pd-mobile-toggle button{
    appearance:none; border:0; background:transparent; cursor:pointer;
    padding:8px 14px; border-radius:999px; font-weight:800; color:var(--pd-ink);
  }
  .pd-mobile-toggle button.is-active[data-view="problem"]     { background:var(--pd-problem); }
  .pd-mobile-toggle button.is-active[data-view="impact"]      { background:var(--pd-impact);  }
  .pd-mobile-toggle button.is-active[data-view="opportunity"] { background:var(--pd-opp);     }

  /* STAGE (onde aparece o retângulo) – parte do mesmo quadro */
  .pd-grid{
    display:block !important;
    background:var(--pd-frame-bg); border:1px solid var(--pd-frame-line);
    border-top:0; border-bottom:0;           /* funde com menu e contador */
    padding:10px; max-width:720px; margin:0 auto;
  }
  .pd-row{ display:none; }
  .pd-row.is-active{ display:block; }
  .pd-row .pd-cell{
    display:none; border-radius:14px; padding:18px 16px;
    width:100%; max-width:100%; box-sizing:border-box; line-height:1.45;
    color:var(--pd-ink);
  }
  /* mostra só o cartão correto e com a cor certa */
  .pd[data-view="problem"]     .pd-row.is-active .is-problem{display:block; background:var(--pd-problem);}
  .pd[data-view="impact"]      .pd-row.is-active .is-impact {display:block; background:var(--pd-impact);}
  .pd[data-view="opportunity"] .pd-row.is-active .is-opp    {display:block; background:var(--pd-opp);}

  /* CONTADOR – base do quadro, por baixo do retângulo */
  .pd-mobile-nav{
    display:flex !important; justify-content:center; align-items:center; gap:14px;
    background:var(--pd-frame-bg); border:1px solid var(--pd-frame-line);
    border-top:0; border-radius:0 0 16px 16px;
    padding:8px 10px; margin:0 auto 4px; max-width:720px;
  }
  .pd-mobile-nav .pd-prev, .pd-mobile-nav .pd-next{
    appearance:none; border:1px solid #DDD8F2; background:#F1EDFF;
    padding:8px 12px; border-radius:12px; font-weight:700; cursor:pointer;
  }
  .pd-mobile-nav .pd-prev[disabled], .pd-mobile-nav .pd-next[disabled]{ opacity:.45; cursor:default; }
  .pd-mobile-nav .pd-step{ font-weight:800; color:#4A3E77; }

  /* remover números/ícones extras dentro das pills */
  .pd-row .pd-cell::before, .pd-row .pd-cell::after{ content:none !important; }
}

/* =======================================================
   PROBLEMS DETECTED — DUAS VERSÕES ISOLADAS (FINAL)
   -> Desktop (>=901px) e Mobile (<=900px) sem interferências
   -> Mobile: cartões com TODOS os cantos iguais
======================================================= */

/* Paleta consistente (já usada) */
:root{
  --pd-problem:#CFAFEE;   /* Problem */
  --pd-impact:#EFE7FA;    /* Impact */
  --pd-opp:#FFD391;       /* Opportunity */
  --pd-ink:#272222;

  --pd-chip-bg:#F6F3FF;   /* fundo suave das tabs no mobile */
  --pd-chip-bd:#E7E0FB;

  --pd-frame-bg:#FFFFFF;  /* “quadro” do mobile (stage + nav) */
  --pd-frame-bd:#E7E0FB;
}

/* ======================= DESKTOP (>=901px) ======================= */
@media (min-width:901px){

  /* título */
  .pd-title{ margin: 0 0 12px !important; }

  /* cabeçalho em 3 colunas, na ordem certa com cores por coluna */
  .pd-head{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr;
    column-gap:0;
    align-items:center;
    text-align:center;
    margin:10px 0 12px;
  }
  .pd-col--problem{ color:#BE99E1; }  /* lilás */
  .pd-col--impact { color:#876BA1; }  /* roxo */
  .pd-col--opp    { color:#EE9D21; }  /* pêssego */

  /* grelha 3 colunas como no quadro (sem herdar estilos do mobile) */
  .pd-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr;
    column-gap:0; row-gap:16px;
    position:relative;
  }
  /* nunca mostrar linhas verticais no desktop */
  .pd-grid::before, .pd-grid::after{ display:none !important; }

  /* pills */
  .pd-grid .pd-cell{
    padding:18px 22px;
    line-height:1.35;
    font-weight:500;
    color:var(--pd-ink);
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    border-radius:9999px;            /* pílula */
  }
  .pd-cell.is-problem{ background:var(--pd-problem) !important; }
  .pd-cell.is-impact { background:var(--pd-impact)  !important; }
  .pd-cell.is-opp    { background:var(--pd-opp)     !important; }

  /* “pílula corrida” por linha (só desktop) */
  .pd-grid .pd-cell:nth-child(3n+1){border-top-right-radius:0;border-bottom-right-radius:0;}
  .pd-grid .pd-cell:nth-child(3n+2){border-radius:0;}
  .pd-grid .pd-cell:nth-child(3n)  {border-top-left-radius:0;border-bottom-left-radius:0;}

  /* sem números/ícones dentro das pills no desktop */
  .pd-row .pd-cell::before,
  .pd-row .pd-cell::after{ display:none !important; content:none !important; }

  /* esconder elementos só-móvel */
  .pd-mobile-toggle, .pd-mobile-nav{ display:none !important; }
}

/* ======================= MOBILE (<=900px) ======================= */
@media (max-width:900px){

  /* título fora do quadro e com respiro */
  .pd-title{ margin: 0 0 12px !important; }

  /* nada de linhas verticais no mobile */
  .pd-grid::before, .pd-grid::after{ display:none !important; }

  /* MENU (tabs) com fundo suave — parte superior do “quadro” */
  .pd-mobile-toggle{
    display:flex !important;
    justify-content:center; align-items:center; gap:6px;
    background:var(--pd-chip-bg);
    border:1px solid var(--pd-chip-bd);
    border-radius:16px 16px 0 0;
    padding:6px 8px; margin:0 auto; max-width:720px;
  }
  .pd-mobile-toggle button{
    appearance:none; border:0; background:transparent; cursor:pointer;
    padding:8px 14px; border-radius:999px; font-weight:800; color:var(--pd-ink);
  }
  .pd-mobile-toggle button.is-active[data-view="problem"]     { background:var(--pd-problem); }
  .pd-mobile-toggle button.is-active[data-view="impact"]      { background:var(--pd-impact);  }
  .pd-mobile-toggle button.is-active[data-view="opportunity"] { background:var(--pd-opp);     }

  /* STAGE (apenas 1 cartão visível) — meio do quadro */
  .pd-grid{
    display:block !important;
    background:var(--pd-frame-bg);
    border:1px solid var(--pd-frame-bd);
    border-top:0; border-bottom:0;
    padding:10px; max-width:720px; margin:0 auto;
  }
  .pd-row{ display:none; margin:0; }
  .pd-row.is-active{ display:block; }

  /* >>> CARTÕES COM TODOS OS CANTOS IGUAIS <<< */
  .pd-row .pd-cell{
    display:none;                       /* só mostra o da tab ativa */
    border-radius:16px !important;      /* cantos iguais */
    padding:18px 16px;
    width:100%; max-width:100%;
    box-sizing:border-box; line-height:1.45;
    color:var(--pd-ink);
  }

  /* mostra apenas o cartão correspondente e com a cor da coluna */
  .pd[data-view="problem"]     .pd-row.is-active .is-problem{ display:block; background:var(--pd-problem) !important; }
  .pd[data-view="impact"]      .pd-row.is-active .is-impact { display:block; background:var(--pd-impact)  !important; }
  .pd[data-view="opportunity"] .pd-row.is-active .is-opp    { display:block; background:var(--pd-opp)     !important; }

  /* sem números/ícones/labels dentro das pills no mobile */
  .pd-row .pd-cell::before,
  .pd-row .pd-cell::after{ display:none !important; content:none !important; }

  /* CONTADOR — base do quadro */
  .pd-mobile-nav{
    display:flex !important;
    justify-content:center; align-items:center; gap:14px;
    background:var(--pd-frame-bg);
    border:1px solid var(--pd-frame-bd);
    border-top:0; border-radius:0 0 16px 16px;
    padding:8px 10px; margin:0 auto 4px; max-width:720px;
  }
  .pd-mobile-nav .pd-prev, .pd-mobile-nav .pd-next{
    appearance:none; border:1px solid #DDD8F2; background:#F1EDFF;
    padding:8px 12px; border-radius:12px; font-weight:700; cursor:pointer;
  }
  .pd-mobile-nav .pd-prev[disabled], .pd-mobile-nav .pd-next[disabled]{ opacity:.45; cursor:default; }
  .pd-mobile-nav .pd-step{ font-weight:800; color:#4A3E77; }
}


/* =======================================================
   PROBLEMS DETECTED — DESKTOP FIX (isola e corrige)
   ======================================================= */
@media (min-width:901px){

  /* Títulos das colunas com a cor da respetiva coluna */
  .pd-col--problem { color:#BE99E1 !important; }   /* lilás */
  .pd-col--impact  { color:#876BA1 !important; }   /* roxo */
  .pd-col--opp     { color:#EE9D21 !important; }   /* pêssego */
  .pd-col .pd-ico  { color:inherit !important; }

  /* Grelha: 3 colunas, sem “vazar” estilos do mobile */
  .pd-head{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr;
    column-gap:0; row-gap:0;
    align-items:center; text-align:center;
    margin:10px 0 12px !important;
  }
  .pd-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr;
    column-gap:0;           /* colunas encostadas */
    row-gap:18px;           /* espaço entre linhas */
    position:relative;
  }

  /* Cada .pd-row “desaparece” e os 3 .pd-cell passam a filhos diretos
     da grelha — isto garante a ordem 1:Problem, 2:Impact, 3:Opportunity
     por linha, sem interferências. */
  .pd-row{ display:contents !important; }

  /* Reset sólido nas pills para evitar heranças do mobile */
  .pd-grid > .pd-cell{
    padding:18px 22px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.04) !important;
    color:#272222 !important;
    border-radius:0 !important;                 /* base: quadrado */
  }
  .pd-grid > .pd-cell.is-problem{ background:#CFAFEE !important; }
  .pd-grid > .pd-cell.is-impact { background:#EFE7FA !important; }
  .pd-grid > .pd-cell.is-opp    { background:#FFD391 !important; }

  /* “Pílula corrida” por linha — só cantos EXTERNOS arredondados */
  .pd-grid > .pd-cell:nth-child(3n+1){
    border-radius:28px 0 0 28px !important;     /* esquerda (Problem) */
  }
  .pd-grid > .pd-cell:nth-child(3n+2){
    border-radius:0 !important;                  /* meio (Impact)      */
  }
  .pd-grid > .pd-cell:nth-child(3n){
    border-radius:0 28px 28px 0 !important;      /* direita (Opp)      */
  }

  /* Nada de números/ícones/labels dentro das pills no desktop */
  .pd-grid > .pd-cell::before,
  .pd-grid > .pd-cell::after,
  .pd-row .pd-cell::before,
  .pd-row .pd-cell::after{
    display:none !important; content:none !important;
  }

  /* Oculta controlos só-móvel em desktop */
  .pd-mobile-toggle, .pd-mobile-nav{ display:none !important; }
}

/* + respiro entre o título e os subtítulos (desktop) */
@media (min-width:901px){
  .pd-title{ margin-bottom: 28px !important; } /* ajusta o valor se quiseres mais/menos */
  .pd-head{  margin-top: 0 !important; }
}

/* MOBILE — pills verdadeiras nos cartões */
@media (max-width: 900px){
  /* cada cartão vira pílula */
  .pd-row .pd-cell{
    border-radius: 9999px !important;
    padding: 20px 18px; /* opcional: ligeiro boost no padding */
  }

  /* a “moldura” interna passa de outline para inset shadow
     (o outline ignora o border-radius e estraga a pílula) */
  .pd .pd-row.is-active .pd-cell{
    outline: none !important;
    box-shadow: inset 0 0 0 12px #F3F0FF; /* ajusta a espessura/cor se quiseres */
  }
}

/* ===== MOBILE: pílulas magrinhas, centradas e com respiro ===== */
@media (max-width: 900px){
  /* sem “caixa” extra e sem linhas verticais */
  .pd-grid{
    background: transparent !important;
    border: none !important;
    padding: 0 12px !important;       /* leve respiro às margens laterais */
    margin-top: 12px !important;       /* espaço entre MENU e pílula */
  }
  .pd-grid::before,
  .pd-grid::after{ display:none !important; content:none !important; }

  /* pílula magrinha e centrada */
  .pd-row .pd-cell{
    border-radius: 9999px !important;  /* pill real */
    padding: 12px 16px !important;     /* mais magrinha */
    width: 100%;
    max-width: 760px;                  /* centra e evita “colada” às bordas em telas largas */
    margin: 0 auto !important;         /* centra */
    box-shadow: none !important;
    outline: none !important;
  }

  /* mais respiro do título para o quadro abaixo */
  .pd-title{ margin-bottom: 18px !important; }

  /* contador com espacinho da pílula */
  .pd-mobile-nav{ margin-top: 12px !important; }
}
/* ===== MOBILE — título fora do quadro ===== */
@media (max-width:900px){
  .pd{
    position: relative;
    /* não usar a borda direta para não engolir o título */
    border: none !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

  /* moldura do QUADRO começa abaixo do título */
  .pd::before{
    content:"";
    position:absolute;
    /* h do título vem da CSS var definida no JS (fallback 42px) */
    top: calc(var(--pd-title-h, 42px) + 10px);
    left: 0; right: 0; bottom: 0;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px #E7E0FB; /* cor da tua borda */
    background: transparent;
    pointer-events: none;
  }

  /* respiro do título ao quadro */
  .pd-title{
    margin: 0 0 10px !important;
    padding: 0 8px;
    text-align: center;
    position: relative;
    z-index: 1; /* fica acima da moldura */
  }

  /* conteúdo dentro do quadro com respiro lateral */
  .pd-mobile-toggle,
  .pd-grid,
  .pd-mobile-nav{
    padding-inline: 12px !important;
  }

  /* pílulas magrinhas e centradas */
  .pd-row .pd-cell{
    border-radius: 9999px !important;
    padding: 12px 16px !important;
    max-width: 760px;
    margin: 0 auto !important;
    box-shadow: none !important;
  }

  /* remove quaisquer linhas verticais no mobile */
  .pd-grid::before,
  .pd-grid::after{ display:none !important; }
}

/* Mais respiro abaixo do título no MOBILE */
@media (max-width:900px){
  /* aumenta o espaço entre o título e o quadro */
  .pd-title{
    margin: 0 0 24px !important;   /* antes estava ~10px */
  }
  /* move a moldura do quadro para começar mais abaixo */
  .pd::before{
    top: calc(var(--pd-title-h, 42px) + 24px) !important; /* +24px de respiro */
  }
}

/* ===========================
   Separador-ícone entre títulos
   (desktop + mobile)
   =========================== */

/* cor e tamanho do ícone */
:root{
  --pd-sep-color: #876BA1;   /* podes trocar se quiseres */
  --pd-sep-size: 16px;
}

/* ---------- MOBILE (<=900px) ---------- */
@media (max-width:900px){
  .pd-mobile-toggle{
    gap: 18px;                 /* cria espaço onde o ícone fica centrado */
    position: relative;
  }
  .pd-mobile-toggle button{
    position: relative;
  }

  /* insere ícone ENTRE os botões (não dentro) */
  .pd-mobile-toggle button + button::before{
    content: "";
    position: absolute;
    left: -9px;                /* metade ~ do gap para cair no centro do intervalo */
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--pd-sep-size);
    height: var(--pd-sep-size);
    pointer-events: none;
    /* chevron-right em SVG, herdando a cor da var */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23876BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* evita “bold” visual em alguns browsers */
  }

  /* permite trocar a cor via variável */
  .pd-mobile-toggle button + button::before{
    /* substitui a cor no data-URI via currentColor “hack” */
  }
}

/* ---------- DESKTOP (>=901px) ---------- */
@media (min-width:901px){
  .pd-head{
    position: relative;
  }

  /* separador entre Problem e Impact */
  .pd-head::before,
  .pd-head::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--pd-sep-size) + 2px);
    height: calc(var(--pd-sep-size) + 2px);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23876BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pd-head::before{ left: 33.333%; }   /* entre Problem e Impact */
  .pd-head::after { left: 66.666%; }   /* entre Impact e Opportunity */
}

/* ------- (Opcional) cores por coluna no desktop -------
   — descomenta se quiseres mudar a cor de cada separador
   para combinar com a coluna seguinte
@media (min-width:901px){
  .pd-head::before{
    background-image:url("data:image/svg+xml,%3Csvg ... stroke='%23876BA1' ... %3E");  // lavanda (Impact)
  }
  .pd-head::after{
    background-image:url("data:image/svg+xml,%3Csvg ... stroke='%23EE9D21' ... %3E");  // pêssego (Opportunity)
  }
}
*/

/* === SEPARADORES (chevrons) CENTRADOS ENTRE TABS — MOBILE === */
:root{
  --pd-sep-size: 16px;   /* tamanho do ícone */
  --pd-sep-gap: 22px;    /* espaço entre tabs (o ícone fica no meio deste gap) */
}

@media (max-width:900px){
  .pd-mobile-toggle{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap: var(--pd-sep-gap);
    position: relative;
  }
  .pd-mobile-toggle button{
    position: relative;               /* âncora para o ::after */
  }

  /* Insere um chevron entre cada par de botões, centrado no “gap” */
  .pd-mobile-toggle button:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-0.5 * var(--pd-sep-gap));   /* coloca no meio do gap */
    transform: translate(50%, -50%);
    width: var(--pd-sep-size);
    height: var(--pd-sep-size);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23876BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

/* (Desktop já estava certo, não mexe) */

/* ==== MOBILE: respiro simétrico + chevrons centrados ==== */
:root{
  --pd-sep-size: 16px;   /* tamanho do chevron */
  --pd-sep-gap: 22px;    /* espaço entre tabs (o chevron fica no meio) */
}

@media (max-width:900px){
  .pd-mobile-toggle{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap: var(--pd-sep-gap);
    position: relative;
    padding: 0;                 /* evita acolchoar só de um lado */
  }

  /* cria “espaçadores” invisíveis nas pontas para o mesmo respiro
     à esquerda (antes de Problem) e à direita (depois de Opportunity) */
  .pd-mobile-toggle::before,
  .pd-mobile-toggle::after{
    content:"";
    display:block;
    width: calc(var(--pd-sep-gap) * 0.5);
    height: 1px;                /* só para existir no fluxo */
  }

  /* ícone chevron entre cada par de botões — fica no centro do gap */
  .pd-mobile-toggle button{
    position: relative;
  }
  .pd-mobile-toggle button:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    right: calc(-0.5 * var(--pd-sep-gap));
    transform: translate(50%, -50%);
    width: var(--pd-sep-size);
    height: var(--pd-sep-size);
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23876BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
}

/* ==== DESKTOP: cabeçalho (Problem / Impact / Opportunity) em negrito ==== */
@media (min-width:901px){
  .pd-head .pd-col{
    font-weight: 800 !important;   /* reforça negrito */
  }
}

/* ===========================
   MOBILE SAFE GUTTER (FIX)
   =========================== */
@media (max-width: 900px){
  :root{ --page-gutter: 16px; } /* ajusta p/ 14–20px se quiseres */

  /* 1) Gutter global no mobile */
  .header .container,
  main.ky,
  .footer .container-fluid{
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  /* 2) Normaliza blocos que usam width:calc(...) para não “colar” na borda */
  .ky .cover-fig,
  .ky .img-block,
  .ky .img-wide,
  .ky .process-fig,
  .ky .solution-grid,
  .ky .ky-accordion-columns,
  .ky .ky-project-info,
  .ky .ky-process-card,
  .ky .ky-wordcloud,
  .ky .ky-sec,
  .ky .ky-overview,
  .ky .ky-def-tabs,
  .ky .ky-def-panel,
  .ky .ky-persona-card,
  .ky .ky-empathy-card{
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  /* 3) Problems Detected — usa o mesmo gutter externo */
  .pd{
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }
  .pd-mobile-toggle,
  .pd-grid,
  .pd-mobile-nav{
    max-width: 100% !important;   /* evita “apertar” por largura fixa */
  }
}
/* ==== FIX GERAL: respiro lateral em mobile (evita “colado” à esquerda) ==== */
@media (max-width: 900px){
  .ky .cover-fig,
  .ky .img-block,
  .ky .img-wide,
  .ky .process-fig,
  .ky .solution-grid,
  .ky .ky-accordion-columns,
  .ky .ky-process-card,
  .ky .ky-wordcloud,
  .ky .ky-sec,
  .ky .ky-overview,
  .ky .ky-project-info,
  .ky .case-section .container-narrow,
  .pd {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==== PROBLEMS DETECTED — limpar moldura e evitar “caixa dentro de caixa” no mobile ==== */
@media (max-width:900px){
  /* tira a moldura desenhada por pseudo-elemento (se existir) */
  .pd::before{ display:none !important; }

  /* o menu, a área da pílula e o contador formam 1 quadro coeso */
  .pd-mobile-toggle{
    border:1px solid #E7E0FB !important;
    border-radius:16px 16px 0 0 !important;
    background:#F6F3FF !important;
    margin:0 auto !important;
    max-width:720px !important;
  }
  .pd-grid{
    border:1px solid #E7E0FB !important;
    border-top:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    margin:0 auto !important;
    max-width:720px !important;
    padding:12px !important;
  }
  .pd-mobile-nav{
    border:1px solid #E7E0FB !important;
    border-top:0 !important;
    border-radius:0 0 16px 16px !important;
    background:#fff !important;
    margin:0 auto 10px !important;
    max-width:720px !important;
  }

  /* pílulas “magrinhas”, centradas e SEM caixa extra envolta */
  .pd-row .pd-cell{
    border-radius:9999px !important;
    padding:12px 16px !important;
    margin:0 auto !important;
    width:100% !important;
    max-width:760px !important;
    box-shadow:none !important;
    outline:none !important;
  }
  /* nunca mostrar linhas verticais no mobile */
  .pd-grid::before, .pd-grid::after{ display:none !important; }
}

/* ==== DEFINE TABS — visual consistente do quadro ==== */
#define .ky-def-tabs{
  border:1px solid #E7E0FB !important;
  border-bottom:0 !important;
  border-radius:16px 16px 0 0 !important;
  background:#F6F3FF !important;
  padding:8px 10px !important;
}
#define .ky-def-panel{
  border:1px solid #E7E0FB !important;
  border-top:0 !important;
  border-radius:0 0 16px 16px !important;
  padding:0 !important;   /* o card interno já tem padding */
}
#define .ky-card{
  border:0 !important;            /* evita “moldura dupla” no interior */
  box-shadow:none !important;
  padding:20px 18px 22px !important;
}


/* ===== IDEATE / IA — versão limpa ===== */

/* cartão exterior */
.ky-ia {
  width: min(1100px, calc(100% - 48px));
  margin: 34px auto 44px;
}
.ky-ia .ia-card{
  position:relative;
  background:#FDFCFF;
  border:1px solid #E2DDFB;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  padding:12px;                     /* moldura do quadro */
  overflow:visible;                  /* deixa a legenda assentar no “rodapé” */
}

/* QUADRO (stage) */
.ky-ia .ia-stage{
  position:relative;
  border:1px solid #E2DDFB;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  /* respiro extra para o badge/título e base */
  padding:112px 24px 60px;          /* ↑ título respira / ↓ não cola à legenda */
}

/* mantém rácio 16:9; ajusta se precisares */
.ky-ia .ia-stage::before{
  content:"";
  display:block;
  padding-top:56.25%;
}

/* “tapete” lilás PRENCHIDO que liga o quadro à legenda */
.ky-ia .ia-stage::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px;
  bottom:-56px;                     /* cola por baixo do quadro */
  height:56px;
  background:#F7F4FF;               /* lilás claro */
  border:1px solid #E2DDFB;
  border-top:none;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  z-index:1;                         /* atrás da legenda */
}

/* CANVAS (pan/zoom) */
.ky-ia .ia-canvas{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  transform-origin:0 0;
  touch-action: pinch-zoom pan-x pan-y;
}
.ky-ia .ia-wires{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* TÍTULO dentro do quadro */
.ky-ia .ia-badge{
  position:absolute;
  left:50%; top:12px;
  transform:translateX(-50%);
  padding:6px 12px;
  background:#fff;
  color:#1f2033;
  border:1px solid #E2DDFB;
  border-radius:9999px;
  font:700 13.5px/1 "Akatab", system-ui, sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  pointer-events:none;
  z-index:3;
}

/* ZOOM (100% sem negrito) */
.ky-ia .ia-zoom{
  position:absolute; top:10px; right:10px;
  display:flex; gap:6px;
  background:#fff; border:1px solid #ece9f5;
  border-radius:12px; padding:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.06); z-index:3;
}
.ky-ia .ia-zoom button{
  appearance:none; border:1px solid #DDD8F2; background:#F1EDFF;
  border-radius:10px; padding:6px 10px; font-weight:500; cursor:pointer;
}

/* HOTSPOTS */
.ky-ia .ia-pin, .ky-ia .ia-pill{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  border-radius:9999px; white-space:nowrap; cursor:pointer;
  font:800 13.5px/1 "Akatab",system-ui,sans-serif;
  box-shadow:0 6px 18px rgba(70,32,125,.12);
  z-index:2;
}
/* lilás */
.ky-ia .ia-pin{ background:#F7F4FF; color:#4A3E77; border:1px solid #E2DDFB; padding:8px 12px; }
.ky-ia .ia-pin:hover{
  box-shadow:0 10px 22px rgba(31,32,51,.12), 0 0 0 3px rgba(135,107,161,.28);
  transform:translate(-50%,-50%) scale(1.03);
}
/* pêssego (nunca roxo) */
.ky-ia .ia-pill{
  background:#FFE5BF; color:#272222; border:1px solid #FFD391; padding:8px 12px;
  transition: box-shadow .12s, transform .12s, border-color .12s;
}
.ky-ia .ia-pill:hover{
  background:#FFE5BF !important; border-color:#FFD391 !important;
  box-shadow:0 10px 22px rgba(31,32,51,.12), 0 0 0 3px rgba(255,211,145,.35);
  transform:translate(-50%,-50%) scale(1.03);
}
.ky-ia .ia-pill:active{
  background:#FFE5BF !important; border-color:#FFD391 !important;
  box-shadow:0 10px 22px rgba(31,32,51,.12), 0 0 0 3px rgba(255,211,145,.50) !important;
  transform:translate(-50%,-50%) scale(1.02);
}
/* estado ativo com contorno visível */
.ky-ia .ia-pin.is-active{
  border-color:#876BA1 !important;
  box-shadow:0 0 0 3px rgba(135,107,161,.45), 0 8px 16px rgba(31,32,51,.10) !important;
}
.ky-ia .ia-pill.is-active{
  border-color:#FFD391 !important;
  box-shadow:0 0 0 3px rgba(255,211,145,.55), 0 8px 16px rgba(31,32,51,.10) !important;
}

/* LEGENDA: “assenta” sobre o tapete lilás */
.ky-ia .ia-panel{
  position:relative !important;
  max-width:min(900px,96%);
  margin:-18px auto 28px !important;   /* sobe para encostar no lilás */
  background:#fff;
  border:1px solid #eae8f2;
  border-radius:12px;
  padding:14px 16px 16px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  z-index:2;                            /* acima do ::after */
}
.ky-ia .ia-panel-title{ margin:4px 26px 8px 0; color:#876BA1; font-weight:800; text-align:center; }
.ky-ia .ia-close{ position:absolute; right:12px; top:8px; border:0; background:transparent; font-size:22px; color:#8a7fb0; cursor:pointer; }

/* ======================= */
/*   IDEATE / IA — BASE    */
/* ======================= */

.ky-ia {
  width: min(1100px, calc(100% - 48px));
  margin: 34px auto 44px;
}
.ky-ia .ia-card{
  position:relative;
  background:#FDFCFF;
  border:1px solid #E2DDFB;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  padding:12px;
  overflow:visible;
}
.ky-ia .ia-stage{
  position:relative;
  border:1px solid #E2DDFB;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  padding:112px 24px 60px;
}
.ky-ia .ia-stage::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 no desktop */
}
.ky-ia .ia-canvas{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  transform-origin:0 0;
  touch-action: pinch-zoom pan-x pan-y;
}
.ky-ia .ia-wires{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ky-ia .ia-badge{
  position:absolute;
  left:50%; top:12px;
  transform:translateX(-50%);
  padding:6px 12px;
  background:#fff;
  color:#1f2033;
  border:1px solid #E2DDFB;
  border-radius:9999px;
  font:700 13.5px/1 "Akatab", system-ui, sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  pointer-events:none;
  z-index:3;
}
.ky-ia .ia-zoom{
  position:absolute; top:10px; right:10px;
  display:flex; gap:6px;
  background:#fff; border:1px solid #ece9f5;
  border-radius:12px; padding:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.06); z-index:3;
}
.ky-ia .ia-zoom button{
  appearance:none; border:1px solid #DDD8F2; background:#F1EDFF;
  border-radius:10px; padding:6px 10px; font-weight:500; cursor:pointer;
}
.ky-ia .ia-pin, .ky-ia .ia-pill{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  border-radius:9999px; white-space:nowrap; cursor:pointer;
  font:800 13.5px/1 "Akatab",system-ui,sans-serif;
  box-shadow:0 6px 18px rgba(70,32,125,.12);
  z-index:2;
}
/* lilás */
.ky-ia .ia-pin{ background:#F7F4FF; color:#4A3E77; border:1px solid #E2DDFB; padding:8px 12px; }
.ky-ia .ia-pin:hover{
  box-shadow:0 10px 22px rgba(31,32,51,.12), 0 0 0 3px rgba(135,107,161,.28);
  transform:translate(-50%,-50%) scale(1.03);
}
/* pêssego */
.ky-ia .ia-pill{
  background:#FFE5BF; color:#272222; border:1px solid #FFD391; padding:8px 12px;
  transition: box-shadow .12s, transform .12s, border-color .12s;
}
.ky-ia .ia-pill:hover{
  background:#FFE5BF !important; border-color:#FFD391 !important;
  box-shadow:0 10px 22px rgba(31,32,51,.12), 0 0 0 3px rgba(255,211,145,.35);
  transform:translate(-50%,-50%) scale(1.03);
}
.ky-ia .ia-pill:active{
  background:#FFE5BF !important; border-color:#FFD391 !important;
  box-shadow:0 10px 22px rgba(31,32,51,.12), 0 0 0 3px rgba(255,211,145,.50) !important;
  transform:translate(-50%,-50%) scale(1.02);
}
/* estados ativos */
.ky-ia .ia-pin.is-active{
  border-color:#876BA1 !important;
  box-shadow:0 0 0 3px rgba(135,107,161,.45), 0 8px 16px rgba(31,32,51,.10) !important;
}
.ky-ia .ia-pill.is-active{
  border-color:#FFD391 !important;
  box-shadow:0 0 0 3px rgba(255,211,145,.55), 0 8px 16px rgba(31,32,51,.10) !important;
}
/* Legenda */
.ky-ia .ia-panel{
  position:relative !important;
  max-width:min(900px,96%);
  margin:12px auto 28px !important;
  background:#fff;
  border:1px solid #eae8f2;
  border-radius:12px;
  padding:14px 16px 16px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  z-index:2;
}
.ky-ia .ia-panel-title{ margin:4px 26px 8px 0; color:#876BA1; font-weight:800; text-align:center; }
.ky-ia .ia-close{ position:absolute; right:12px; top:8px; border:0; background:transparent; font-size:22px; color:#8a7fb0; cursor:pointer; }

/* ===== IDEATE · MOBILE (≤640px) — coluna única, sem curvas do desktop, altura justa ===== */
@media (max-width:640px){
  /* esconder as wires do DESKTOP no mobile */
  .ky-ia .ia-wires{ display:none !important; }

  /* usamos altura mínima calculada por JS (sem ratio 16:9) */
  .ky-ia .ia-stage::before{ display:none !important; }

  .ky-ia{
    --ia-mobile-top-gap: 130px;   /* espaço p/ badge/topo (ajusta 120–160) */
    --ia-mobile-h: 640px;         /* fallback; JS atualiza */
  }
  .ky-ia .ia-stage{
    min-height: var(--ia-mobile-h) !important;
    padding-top: calc(var(--ia-mobile-top-gap) + 12px) !important;
    padding-bottom: 120px !important; /* respiro p/ última linha + legenda */
  }

  /* coluna única (sem alterar estilos das pills/pins) */
  .ky-ia .ia-canvas{
    position:absolute !important;
    inset:0 !important;
    top: var(--ia-mobile-top-gap) !important;
    transform:none !important;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:0;
  }
  .ky-ia .ia-pin, .ky-ia .ia-pill{
    position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; z-index:2;
  }

  /* zoom no fundo, fora do conteúdo */
  .ky-ia .ia-zoom{
    top:auto !important; bottom:12px !important; right:12px !important; left:auto !important;
    z-index:3;
  }
}

/* === IDEATE · MOBILE (≤640px) — menos espaço antes da 1ª pill === */
@media (max-width:640px){
  /* desce menos o canvas relativamente ao título */
  .ky-ia{ --ia-mobile-top-gap: 96px; }  /* antes ~130–156px */

  /* reduz o “acolchoamento” adicional que somamos ao top-gap */
  .ky-ia .ia-stage{
    padding-top: calc(var(--ia-mobile-top-gap) + 4px) !important; /* era +12/+16 */
  }

  /* se quiseres apertar ligeiramente a distância entre as pills, ativa: */
  .ky-ia .ia-canvas{ gap: 10px; } /* opcional (era 12px) */
}

/* === IDEATE · MOBILE (≤640px) — pêssego igual ao desktop === */
@media (max-width:640px){
  .ky-ia .ia-pill{
    background: #FFE5BF !important;   /* igual desktop */
    border-color: #FFD391 !important;  /* igual desktop */
    color: #272222 !important;         /* igual desktop */
    box-shadow: 0 6px 18px rgba(70,32,125,.12) !important; /* igual desktop */
    filter: none !important;           /* evita saturações do browser */
  }
  .ky-ia .ia-pill:hover,
  .ky-ia .ia-pill:active{
    background: #FFE5BF !important;
    border-color: #FFD391 !important;
    box-shadow: 0 6px 18px rgba(31,32,51,.12) !important; /* sem glow extra */
    transform: translate(0,0) !important; /* evita “salto” que pode parecer mais vivo */
  }
}

/* Desktop only: reposiciona o Create Profile para a linha de baixo */
@media (min-width: 641px){
  .ky-ia .ia-pin[data-key="createProfile"]{
    --y: 20% !important; /* antes estava ~12% */
  }
}
/* IDEATE · Desktop (≥641px) — desencontro entre Sign In e Create Profile */
@media (min-width: 641px){
  /* Create Profile vai MAIS para a ESQUERDA e mantém na 2ª linha */
  .ky-ia .ia-pin[data-key="createProfile"]{
    --x: 58% !important;  /* antes ~64% */
    --y: 20% !important;
  }

  /* Sign In vai MAIS para a DIREITA na 1ª linha */
  .ky-ia .ia-pin[data-key="signin"]{
    --x: 82% !important;  /* antes ~78% */
    --y: 12% !important;
  }
}

@media (max-width:640px){
  .ky-ia .ia-stage{
    position:relative !important;       /* cria contexto para o SVG */
    overflow:visible !important;
    z-index:0;
  }
  .ky-ia .ia-canvas{ position:relative; z-index:1; }
  .ky-ia .ia-svg-overlay{
    position:absolute; inset:0;
    z-index:999;                         /* acima dos cards, abaixo de tooltips */
    pointer-events:none;
  }
}

/* IDEATE – remover o tapete lilás no mobile */
@media (max-width: 640px){  /* ajusta o breakpoint se quiseres */
  .ky-ia .ia-stage::after{
    content: none !important;
    display: none !important;
  }
  /* opcional: aproxima um pouco a legenda do quadro */
  .ky-ia .ia-panel{ margin-top: 12px !important; }
}


/* ==== TIGHT GAP antes de .pd ==== */
/* 1) esmaga o margin-bottom do elemento imediatamente anterior */
.ky *:has(+ .pd){
  margin-bottom: 8px !important;   /* ajusta para 6–12 conforme gostares */
  padding-bottom: 0 !important;
}

/* 2) garante que a própria .pd não volta a abrir espaço */
.pd{
  margin-top: 0 !important;
  padding-top: 20px !important;      /* respiro mínimo interno */
}
.pd-title{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* opcional: ainda mais justo no mobile */
@media (max-width:900px){
  .ky *:has(+ .pd){ margin-bottom: 6px !important; }
  .pd{ padding-top: 6px !important; }
}

/* ===== Wireframes (lado a lado, responsivo) ===== */
.ky-wireframes { text-align: center; }
.ky-wireframes .wf-grid{
  max-width: var(--max);
  margin: 10px auto 4px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mais seguro */
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px){
  .ky-wireframes .wf-grid{ grid-template-columns: 1fr; gap: 14px; }
}
.ky-wireframes .wf-item{
  margin: 0;                    /* remove margem padrão de <figure> */
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
.ky-wireframes .wf-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 10px;
}
.ky-wireframes figcaption{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6b6480;
  text-transform: uppercase;
}
/* Grid já ok */
.ky-wireframes .wf-item{ margin:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:10px; }

/* Mesma altura para ambos, responsiva (sem corte) */
.ky-wireframes .wf-media{
  height: clamp(260px, 38vw, 520px);        /* mesma altura nos 2 cards */
  border-radius:10px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.ky-wireframes .wf-media img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit: contain;                      /* sem distorção */
  display:block;
}

/* No mobile empilha e mantém proporção agradável */
@media (max-width:900px){
  .ky-wireframes .wf-media{ height: clamp(220px, 55vw, 380px); }
}


/* =========================
   CARROUSEL MOCKUPS (ajustes rápidos)
   ========================= */
.ky-design{
  --max: 1200px;

  /* altura única do palco (todas as tabs) */
  --stage-h: clamp(420px, 56vw, 760px);

  /* footer (faixa branca) — legenda em cima, dots em baixo */
  --footer-gap-top: 16px;     /* palco → legenda */
  --footer-gap-mid: 55px;     /* legenda → dots (mais respiro) */
  --footer-gap-bottom: 5px;  /* dots → base do footer */

  /* legenda (pílula) */
  --cap-fs: 13px;
  --cap-pad-v: 6px;
  --cap-pad-h: 14px;

  /* título (abaixo do footer) */
  --title-gap: 20px;
}

@media (max-width: 640px){
  .ky-design{
    --stage-h: clamp(320px, 50vh, 460px);
    --footer-gap-top: 14px;
    --footer-gap-mid: 12px;
    --footer-gap-bottom: 10px;
    --title-gap: 24px;
  }
}

/* =========================
   TABS / PAINEL
   ========================= */
.ky-design { text-align: center; }

.ky-design .mk-tabs{
  max-width: var(--max);
  margin: 10px auto 0;
  padding: 8px 10px;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  background:#F7F6FF;
  border:1px solid #E7E0FB;
  border-radius:12px 12px 0 0;
}
.ky-design .mk-tab{
  appearance:none;
  border:1px solid #DDD8F2;
  background:#F1EDFF;
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:700;
}
.ky-design .mk-tab.is-active{
  background:#876BA1; border-color:#876BA1; color:#fff;
}

.ky-design .mkc-panel{
  position: relative;
  max-width: var(--max);
  margin: 0 auto 24px;
  padding: 12px 12px 16px;
  background:#fff;
  border:1px solid #E7E0FB;
  border-top: 0; /* conecta com as tabs */
  border-radius: 0 0 16px 16px;
  box-shadow: 0 10px 24px rgba(31,32,51,.04);
}
.ky-design .mkc-panel[hidden]{ display:none !important; }

.ky-design .mk-cap{
  margin-top: var(--title-gap);
  font: 800 13px/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  color: #6b5a8d;
  text-transform: uppercase;
  text-align: center;
  min-height: 0;
}

/* =========================
   CAROUSEL · ESTRUTURA
   ========================= */
.ky-design .ky-carousel{
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible; /* permite ver footer e sombras */
}

/* Palco: altura única controlada por variável */
.ky-design .ky-carousel .kc-stage{
  position: relative;
  height: var(--stage-h);
  min-height: var(--stage-h);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  overflow: hidden;
}

/* Faixa deslizante */
.ky-design .kc-track{
  display:flex;
  height:100%;
  width:100%;
  transform: translateX(0%);
  transition: transform .35s ease;
  will-change: transform;
  outline: none;
}

/* Slide (figure) = 100% do palco — remover margem default do <figure> */
.ky-design .kc-slide{
  margin: 0;                 /* FIX evita “cortes” por causa do figure */
  flex: 0 0 100%;
  height: 100%;
  display: flex;             /* centragem estável */
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.6vw, 16px);
  background: transparent;
}

/* Imagens SEMPRE contidas, sem cortar */
.ky-design .kc-slide img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin: 0 auto;
}

/* NAV (setas) */
.ky-design .kc-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index: 5;
  width:32px; height:32px;
  border-radius:999px;
  border:1px solid #DDD8F2;
  background:#F1EDFF;
  color:#6b5a8d;
  display:grid; place-items:center;
  cursor:pointer; font-weight:800;
}
.ky-design .kc-prev{ left:10px; }
.ky-design .kc-next{ right:10px; }
.ky-design .kc-nav:disabled{ opacity:.35; cursor:default; }

/* =========================
   FOOTER (fora do palco)
   Legenda ACIMA dos dots com mais respiro
   ========================= */
.ky-design .kc-footer{
  display:flex;
  flex-direction: column;        /* legenda em cima, dots em baixo */
  align-items:center;
  justify-content:center;
  row-gap: var(--footer-gap-mid);
  padding-top: var(--footer-gap-top);
  padding-bottom: var(--footer-gap-bottom);
}

.ky-design .kc-caption{
  padding: var(--cap-pad-v) var(--cap-pad-h);
  font: 700 var(--cap-fs)/1.2 system-ui, sans-serif;
  color:#4A3E77;
  background: rgba(255,255,255,.9);
  border: 1px solid #E7E0FB;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  max-width: min(86vw, 860px);
  text-overflow: ellipsis;
  overflow: hidden;
  transition: opacity .2s ease, transform .2s ease;
}
.ky-design .kc-caption.is-updating{
  opacity: 0;
  transform: translateY(-2px);
}

.ky-design .kc-dots{
  display:flex;
  gap: 12px;                     /* mais elegante/arejado */
  padding:0; margin:0;
}
.ky-design .kc-dot{
  width:8px; height:8px;
  border-radius:999px; border:0;
  background:#D9D1F0;
  cursor:pointer;
  transition: transform .15s, background .15s;
}
.ky-design .kc-dot.is-on{
  background:#7d65a6;
  transform:scale(1.15);
}

/* =========================
   AJUSTES RESPONSIVOS
   ========================= */

/* Painel “limpo” em tablets/telemóveis */
@media (max-width: 900px){
  .ky-design .mkc-panel{ border-top: 0; }
}

@media (max-width: 640px){
  .ky-design .mkc-panel{
    background:#fff;
    border:1px solid #E7E0FB;
    border-top:0;
    border-radius:0 0 16px 16px;
    padding:12px 12px 14px;
    box-shadow:none;
    margin: 0 auto 16px;
  }
  .ky-design .ky-carousel .kc-stage{
    background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.04);
    border-radius:12px;
  }
  /* Mobile: escala confortável */
  .ky-design .ky-carousel--mobile .kc-slide{ padding: 0; }
  .ky-design .ky-carousel--mobile .kc-slide img{
    max-height: 92% !important;
    max-width: 92% !important;
    object-fit: contain !important;
  }
}

/* Desktop largo: mobile NUNCA corta e não fica gigante */
@media (min-width: 1024px){
  .ky-design .ky-carousel--mobile .kc-slide{
    padding: clamp(8px, 2vw, 18px);
  }
  .ky-design .ky-carousel--mobile .kc-slide img{
    max-height: 86% !important;  /* cabe inteiro dentro do palco */
    max-width: 36% !important;   /* telefone proporcional */
    object-fit: contain !important;
  }
}

/* + respiro entre legenda (kc-caption) e dots (kc-dots) */
.ky-design{
  --footer-gap-mid: 25px;  /* antes 14px */
}

@media (max-width: 640px){
  .ky-design{
    --footer-gap-mid: 16px; /* antes 12px */
  }
}


/* ↑ Mobile ligeiramente maior em desktops/laptops */
@media (min-width: 1024px){
  .ky-design .ky-carousel--mobile .kc-slide img{
    max-width: 44% !important;  /* antes 36% */
    max-height: 90% !important; /* antes 86% */
  }
}

/* (opcional) ainda um tico maior em ecrãs muito largos */
@media (min-width: 1440px){
  .ky-design .ky-carousel--mobile .kc-slide img{
    max-width: 48% !important;
    max-height: 92% !important;
  }
}

/* ——— MOBILE TUNING: mais espaço legenda↔dots e título mais perto ——— */
@media (max-width: 640px){
  .ky-design{
    /* ↑ separa legenda dos dots */
    --footer-gap-mid: 20px;     /* era 12px */

    /* ↓ aproxima os dots do título */
    --footer-gap-bottom: 6px;   /* era 10px */
    --title-gap: 20px;          /* era 24px */
  }
}

/* opcional: micro-telas ainda mais próximas (≤420px) */
@media (max-width: 420px){
  .ky-design{
    --footer-gap-mid: 20px;     /* mais respiro legenda↔dots */
    --footer-gap-bottom: 6px;
    --title-gap: 17px;          /* título um tico mais perto */
  }
}


/* ===== GAP ENTRE O CARROUSEL (.ky-design) E O TEXTO ANTERIOR ===== */
/* controla o espaço depois de TODO o componente (tabs + carrosséis + título) */
.ky-design{
  --after-gap: clamp(28px, 4vw, 72px); /* responsivo: ~28–72px */
}

/* se o texto estiver FORA da .ky-design (elemento seguinte) */
.ky-design + *{
  margin-top: var(--after-gap) !important;
}

/* se o texto estiver DENTRO do mesmo container, logo depois do painel */
.ky-design .mkc-panel:last-of-type{
  margin-bottom: calc(var(--after-gap) + 6px); /* soma ao espaço padrão */
}

/* micro-telas: ligeiramente menor para manter coesão */
@media (max-width: 640px){
  .ky-design{
    --after-gap: clamp(22px, 6vw, 40px);
  }
}

/* ==========================================
   RESPIRO NORMAL — DESIGN / TEST / CLOSING
   (cola no fim do CSS para ter prioridade)
========================================== */

/* 1) Normaliza o topo destas secções */
.ky .ky-design,
.ky .ky-test,
.ky .ky-closing{
  padding-top: 55px !important;
  margin-top: 0 !important;
}

/* 2) Quando estas secções vêm logo a seguir a qualquer bloco,
      encurta a margem do anterior (elimina "buraco"). */
.ky *:has(+ .ky-design),
.ky *:has(+ .ky-test),
.ky *:has(+ .ky-closing){
  margin-bottom: 12px !important;      /* respiro normal */
  padding-bottom: 0 !important;
}

/* 3) Raspa margens de topo do primeiro filho interno
      (muito comum abrir gap por causa de h2, tabs, etc.) */
.ky .ky-design > :first-child,
.ky .ky-test   > :first-child,
.ky .ky-closing> :first-child{
  margin-top: 0 !important;
}

/* 4) DESIGN — as tabs tinham margem extra no topo */
.ky .ky-design .mk-tabs{ margin-top: 4px !important; }
.ky .ky-design .mkc-panel{ margin-top: 0 !important; }

/* 5) TEST — exemplos comuns (ajusta se as tuas classes forem outras) */
.ky .ky-test .ky-sec,
.ky .ky-test .case-section{ padding-top: 12px !important; }
.ky .ky-test .img-block,
.ky .ky-test .process-fig,
.ky .ky-test .img-wide{ margin-top: 12px !important; }

/* 6) CLOSING & BEYOND — evita gap antes de CTA/blocos finais */
.ky .ky-closing .case-section{ padding-top: 12px !important; }
.ky .ky-closing .cta-wrap{ margin-top: 18px !important; }

/* 7) Mobile um bocadinho mais compacto */
@media (max-width: 768px){
  .ky *:has(+ .ky-design),
  .ky *:has(+ .ky-test),
  .ky *:has(+ .ky-closing){ margin-bottom: 8px !important; }

  .ky .ky-design,
  .ky .ky-test,
  .ky .ky-closing{ padding-top: 12px !important; }
}

/* === GAP KILLER entre .ky-design → .case-section (#test / #closing) === */

/* 1) trava o vazamento do último filho de .ky-design */
.ky-design{
  display: flow-root !important;                 /* cria BFC */
  padding-bottom: 1px !important;                /* impede colapso */
  border-bottom: 1px solid transparent !important;
}

/* 2) o último painel do carrossel NÃO deixa margem para fora */
.ky-design .mkc-panel:last-of-type{
  margin-bottom: 0 !important;
}

/* 3) se vier logo a seguir uma .case-section (TEST/CLOSING), não há offset extra */
.ky-design + .case-section{
  margin-top: 0 !important;
}

/* 4) força compacto só nestas duas secções */
.case-section#test,
.case-section#closing{
  margin-top: 0 !important;
  padding-top: 16px !important; /* era 30px no default; ajusta se quiseres */
}

/* 5) segurança: se houver um wrapper entre o carrossel e a secção */
.ky-design + *:has(> .case-section){
  margin-top: 0 !important;
}

/* ==== TEST → CLOSING — matar o gap entre .case-section seguidas ==== */

/* 1) quando uma .case-section vem logo a seguir a outra, não há “salto” */
.ky .case-section + .case-section{
  margin-top: 0 !important;
  padding-top: 12px !important;      /* respiro pequeno e consistente */
}

/* 2) a secção anterior (TEST) encurta o “rabo” do último bloco */
.ky .case-section:has(+ .case-section){
  padding-bottom: 12px !important;   /* em vez de deixar a margem “vazar” */
}

/* 3) se o ÚLTIMO filho do TEST for um figure comum, zera a margem extra */
.ky .case-section:has(+ .case-section) 
  :is(.img-block, .img-wide, .process-fig, .cover-fig):last-child{
  margin-bottom: 0 !important;
}

/* 4) segurança específica para o teu caso (TEST → CLOSING) */
#test :is(.img-block, .img-wide, .process-fig):last-child{
  margin-bottom: 0 !important;
}
#closing{
  margin-top: 0 !important;
  padding-top: 12px !important;
}



/* ==== TEST • Usability Findings (namespace .uf) — CLEAN ==== */

/* Container + grid */
.ky #test .uf{ max-width: var(--max); margin: 14px auto 10px; padding: 0 16px; }
.ky #test .uf-grid{
  display: grid;
  justify-content: center;                               /* centra linhas com sobras */
  gap: clamp(12px, 1.6vw, 18px);
}
@media (min-width:1100px){ .ky #test .uf-grid{ grid-template-columns: repeat(3, minmax(300px, 360px)); } }
@media (min-width:768px) and (max-width:1099px){ .ky #test .uf-grid{ grid-template-columns: repeat(2, minmax(300px, 1fr)); } }
@media (max-width:767px){ .ky #test .uf-grid{ grid-template-columns: 1fr; } }

/* Card base (details = card; summary vira header no mobile) */
.ky #test .uf-card{
  background: #fff;
  border: 1px solid #EE9D21;                              /* laranja */
  border-radius: 14px;
  box-shadow: 0 0 0 1px #FFD391 inset, 0 8px 18px rgba(0,0,0,.04);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ky #test .uf-card:hover{ transform: translateY(-1px); border-color: #f0a137; }

/* Content */
.ky #test .uf-body{ padding: 14px 16px 16px; text-align: center; }
.ky #test .uf-body h4{
  margin: 0 0 6px;
  color: #EE9D21;                                         /* título laranja */
  font-weight: 400;                                       /* sem bold pesado */
  font-size: clamp(20px, 1.2rem + .3vw, 24px);
  letter-spacing: .01em;
}
.ky #test .uf-body h4 + p{ margin: 0 auto 10px; }
.ky #test .uf-body h5{
  margin: 10px 0 6px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #928F8F;                                         /* subtítulos TODOS laranja */
  font-weight: 600;
}
.ky #test .uf-body p{ margin: 0 0 10px; color: var(--ink); }
.ky #test .uf-body ul{
  display: inline-block;                                  /* bloco centralizado */
  text-align: left;                                       /* bullets alinhados */
  margin: 8px auto 0; padding-left: 18px;
}
.ky #test .uf-body li{ margin: 6px 0; }
.ky #test .uf-body blockquote{
  max-width: 56ch; margin: 12px auto 0;
  color: #5c5870; font-style: italic;
}

/* Desktop/Tablet: esconde o summary (acordeão só no mobile) */
@media (min-width:741px){
  .ky #test .uf-card > summary{
    position: absolute; width:1px; height:1px; padding:0; margin:-1px; border:0;
    overflow: hidden; clip: rect(0,0,0,0);
  }
}

/* Mobile (≤740px): Acordeão elegante */
@media (max-width:740px){
  .ky #test .uf-card{ border:1.5px solid #EE9D21; border-radius:16px; box-shadow:0 6px 16px rgba(238,157,33,.12); }
  .ky #test .uf-card + .uf-card{ margin-top:10px; }

  .ky #test .uf-card > summary{
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; align-items: center; justify-content: center;
    padding: 12px 16px; margin: 0;
    background: #FFD391;                                  /* fechado */
    color: #272222;
    font: 500 14px/1.2 "Akatab", system-ui, sans-serif;   /* leve e elegante */
    text-align: center; letter-spacing: .02em;
    border-bottom: 0;
  }
  .ky #test .uf-card > summary::-webkit-details-marker{ display:none; }
  .ky #test .uf-card > summary::after{
    content:""; width:14px; height:14px; margin-left:8px;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236a5340' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:100% 100%; background-repeat:no-repeat; opacity:.9; transition: transform .18s ease;
  }
  .ky #test .uf-card[open] > summary{ background:#fff; border-bottom:1px solid #EE9D21; }
  .ky #test .uf-card[open] > summary::after{ transform: rotate(180deg); }

  .ky #test .uf-body{ padding:16px 16px 18px; }
}

/* === TEST · Centrar as filas de cards (2.ª fila ao meio) === */

/* Desktop largo (≥1100px): 3 por linha + centrado */
@media (min-width:1100px){
  .ky #test .uf-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;   /* <- centra as linhas */
    gap: clamp(12px, 1.6vw, 18px) !important;
    width: 100%;
  }
  .ky #test .uf-card{
    flex: 0 0 360px !important;           /* largura fixa de cada card */
    max-width: 360px !important;
  }
}

/* Tablet (768–1099px): 2 por linha, também centrados */
@media (min-width:768px) and (max-width:1099px){
  .ky #test .uf-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(12px, 1.6vw, 18px) !important;
  }
  .ky #test .uf-card{
    flex: 0 0 360px !important;           /* ou 320px, se precisares de mais folga */
    max-width: 360px !important;
  }
}

/* Mobile (≤767px): mantém o acordeão como estava */
@media (max-width:767px){
  .ky #test .uf-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ===== CLOSING — fecho leve e visual ===== */
.ky .closing{ max-width: var(--max); margin:0 auto; padding:24px 16px 36px; text-align:center; }

/* 1) Impact / Outcome — “pills” lado a lado */
.ky .closing .value-pills{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin: 8px auto 14px; max-width: 920px;
}
.ky .closing .value-pills .pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#FDFCFF;
  border:1px solid #E2DDFB;
  border-radius:9999px;
  padding:8px 14px;
  box-shadow:0 6px 16px rgba(31,32,51,.04);
}
.ky .closing .value-pills .lbl{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:#876BA1;
}
.ky .closing .value-pills .txt{ color:var(--ink); }

/* 2) What’s next — cartões pequenos (sem “título grande”) */
.ky .closing .sec-label{
  display:inline-block; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#A9A0B9; font-weight:800;
  margin: 12px auto 10px;
}
.ky .closing .whats-next.tiles{
  list-style:none; padding:0; margin:0 auto 6px;
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap:12px;
  max-width: 1000px;
}
@media (max-width: 1024px){ .ky .closing .whats-next.tiles{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width: 640px){  .ky .closing .whats-next.tiles{ grid-template-columns: 1fr; } }

.ky .closing .whats-next.tiles li{
  background:#fff;
  border:1px solid #eae8f2;
  border-radius:14px;
  padding:12px 14px 12px 38px;
  text-align:left;
  position:relative;
  transition: transform .15s ease, border-color .15s ease;
}
.ky .closing .whats-next.tiles li:hover{ transform:translateY(-2px); border-color:#dcd6f0; }
.ky .closing .whats-next.tiles li::before{
  content:"";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:2px solid #876BA1;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23876BA1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/12px 12px no-repeat;
  opacity:.95;
}
.ky .closing .whats-next.tiles span{ display:block; line-height:1.55; }

/* 3) Quote final — uma ideia forte, bonita e curta */
.ky .closing .closing-quote{ margin: 16px auto 0; }
.ky .closing .closing-quote blockquote{
  margin:0 auto; max-width:820px;
  font-style: italic;
  font-size: clamp(18px, 1rem + .6vw, 20px);
  color:#876BA1;
  line-height:1.7;
}

/* opcional: CTA fantasma (se ativares no HTML) */
.ky .closing .cta-ghost{
  display:inline-block; margin-top:14px;
  padding:10px 16px; border-radius:9999px;
  border:1px solid #E7E0FB; text-decoration:none; font-weight:700;
  color:#4A3E77; background:#fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ky .closing .cta-ghost:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(31,32,51,.06);
  border-color:#876BA1;
}

/* ritmo: curta e com respiro */
.ky .closing .closing-sub{ margin: 4px auto 8px; color:#413c47; }


/* === Whats next — alinhamento de baseline do ícone com a 1ª linha === */
.ky .closing{ --icon-nudge: 2px; } /* fino-ajuste (0–3px); aumenta/diminui se precisares */

.ky .closing .whats-next.tiles li{
  display: grid;
  grid-template-columns: 22px 1fr;  /* ícone | texto */
  align-items: baseline;            /* baseline em vez de start */
  column-gap: 10px;
  padding: 14px 16px;               /* já sem padding-left extra */
}

.ky .closing .whats-next.tiles li::before{
  /* vira elemento “inline” com baseline próprio */
  position: static;
  display: inline-block;
  line-height: 1;                   /* evita altura extra */
  align-self: baseline;             /* encosta na baseline da 1ª linha */
  transform: translateY(var(--icon-nudge)); /* nudge óptico */
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #876BA1;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23876BA1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/12px 12px no-repeat;
  opacity:.95;
}

.ky .closing .whats-next.tiles span{
  grid-column: 2;                   /* texto na 2ª coluna */
  align-self: baseline;             /* baseline igual à do ícone */
  line-height: 1.55;
}

/* ===== Closing — respiro + lavanda ligeiramente mais escura ===== */
.ky .closing{
  /* espaçamento global do bloco */
  padding-top: 38px !important;
  padding-bottom: 48px !important;

  /* tokens locais (podes ajustar fácil) */
  --tile-bg: #F1ECFF;     /* antes #F7F4FF — um passo mais escuro */
  --tile-bd: #D9CFF2;     /* borda um pouco mais marcada */
  --tile-gap: 18px;       /* espaço entre caixas */
}

/* Ritmo entre elementos principais */
.ky .closing .closing-sub{ margin: 10px auto 16px; }
.ky .closing .value-pills{ margin: 14px auto 24px; gap: 12px; }
.ky .closing .sec-label{ margin-top: 28px; margin-bottom: 12px; }

/* Grelha das caixas + respiro interno */
.ky .closing .whats-next.tiles{
  gap: var(--tile-gap);
  margin-bottom: 10px;       /* abre espaço antes da quote */
}
.ky .closing .whats-next.tiles li{
  background: var(--tile-bg);
  border-color: var(--tile-bd);
  box-shadow: 0 6px 18px rgba(135,107,161,.07);
  padding: 16px 18px;        /* + respiro */
  border-radius: 16px;
}

/* Ícone mantém alinhamento de baseline */
.ky .closing .whats-next.tiles li::before{
  border-color: #7E65A8;     /* contorno um tico mais escuro */
}

/* Frase final — mais espaço antes e depois */
.ky .closing .closing-quote{ 
  margin-top: 42px;          /* ↑ respiro antes da conclusão */
  margin-bottom: 6px;
}
.ky .closing .closing-quote blockquote{ max-width: 880px; }

/* ===== Responsivo ===== */
@media (max-width: 900px){
  .ky .closing{
    padding-top: 30px !important;
    padding-bottom: 42px !important;
  }
  .ky .closing .closing-sub{ margin: 8px auto 14px; }
  .ky .closing .value-pills{ margin: 12px auto 20px; gap: 10px; }
  .ky .closing .sec-label{ margin-top: 24px; margin-bottom: 10px; }
  .ky .closing .whats-next.tiles{ --tile-gap: 14px; }
  .ky .closing .whats-next.tiles li{ padding: 14px 16px; }
  .ky .closing .closing-quote{ margin-top: 36px; }
}

/* micro—desktop largo: um tico mais de ar em volta das caixas */
@media (min-width: 1200px){
  .ky .closing .whats-next.tiles{ --tile-gap: 22px; }
  .ky .closing .closing-quote{ margin-top: 48px; }
}

/* ===== CLOSING — mais respiro no topo ===== */
/* sobrescreve o "gap killer" quando vem logo após outra .case-section */
.ky .case-section + #closing{
  padding-top: 42px !important;   /* antes ~12–16px */
}

/* se o #closing não vier logo após .case-section, ainda assim respira */
#closing.case-section{
  padding-top: 42px !important;
}

/* ===== Impact / Outcome — rótulos mais suaves ===== */
.ky .closing .value-pills .pill{
  box-shadow: 0 4px 12px rgba(31,32,51,.05);   /* sombra mais discreta */
  border-color: #D9CFF2;                       /* borda lavanda suave */
}
.ky .closing .value-pills .lbl{
  font-weight: 600;        /* ↓ em vez de 800 */
  letter-spacing: .12em;   /* ligeiro tracking, continua uppercase */
  color: #E7E0FB;          /* lavanda um pouco mais escura mas suave */
}
.ky .closing .value-pills .txt{
  font-weight: 500;        /* texto com presença sem parecer bold */
}

:root{
  --lilas: #7b61a8; /* ajusta se precisa */
}

/* === SUBTÍTULOS — NORMALIZAÇÃO GLOBAL (colar no fim do Style.css) === */

/* 1) Token único para “subtítulo” (podes ajustar a 14/15/16px) */
:root{ --ky-subtitle-size: 14px; }

/* 2) Todas as variantes de subtítulo passam a ter o MESMO tamanho */
.ky .ky-subtitle,
.ky .ky-subttl,
#define .ky-subtitle,
#define .ky-subttl,
.ky .ky-topic .ky-subttl,
.ky .em-blk h4,                 /* títulos dos quadrados no Empathy Map */
.ky .ky-card__head .ky-card__title + * h4 /* fallback caso haja h4 aninhados logo após títulos */{
  font-size: var(--ky-subtitle-size) !important;
  line-height: 1.35 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  margin: 6px 0 12px !important;
  color: #8a7fb0 !important; /* mantém o lavanda suave usado no case */
  text-align: center;        /* muda para left se preferires */
}

/* 3) Se quiseres os do Persona em alinhamento à esquerda: */
#define .ky-persona-card .ky-subttl,
#define .ky-persona-card .ky-topic .ky-subttl{
  text-align: left !important;
}

/* 4) Títulos “card title” continuam maiores que subtítulos */
.ky .ky-card__title{
  font-size: 20px !important;
  line-height: 1.25 !important;
}

/* 5) Mobile (opcional): um tico menor para respirar melhor */
@media (max-width: 640px){
  :root{ --ky-subtitle-size: 13.5px; }
}

/* Títulos principais (todos os H2 do case) */
.case-detail h2,
.case-section h2,
.ky-sec h2 {
  font-size: clamp(22px, 2.4vw, 28px) !important; /* menor */
  line-height: 1.25 !important;
  font-weight: 500 !important;                   /* sem negrito forte */
  letter-spacing: -0.01em;
  margin: 0.6em 0 0.35em;
}

/* Se houver algum H1 perdido, mantém discreto também */
.case-detail h1 {
  font-size: clamp(24px, 2.8vw, 32px) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

/* “Kickers” (Overview, Design Process, Empathize…) pequenos e leves */
.case-kicker,
.ky-kicker {
  display: block;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 0.5rem;
  color:#BE99E1 !important;
  opacity: 1 !important;         /* garante a cor exata */;
}

/* Títulos internos (cartões, subtítulos, etc.) ainda menores */
.ky-subtitle,
.ky-subttl,
.ky-card__title,
.pd-title {
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important; /* médio */
}

/* ============================
   PATCH — Centro & Ritmo Global
   (cola no fim do CSS)
============================ */

/* Tokens de layout */
.ky{
  --page-max: var(--max, 1100px);
  --page-gutter: clamp(16px, 4vw, 28px);       /* respiro lateral responsivo */
  --kicker-gap-y: clamp(28px, 5vw, 48px);      /* espaço vertical entre secções com kicker */
}

/* 1) Centro global dos blocos de 1º nível dentro de main.ky */
main.ky{
  display: flex;
  flex-direction: column;
  align-items: center;                          /* centra qualquer filho */
}

/* 2) Todos os filhos diretos (exceto “full-bleed”) ocupam a mesma largura e ficam centrados */
main.ky > :not(.full-bleed){
  max-width: var(--page-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* 3) Segurança: garanta centragem/medidas nos teus principais content-blocks (sem brigar com o que já tens) */
.ky :where(
  .case-hero,
  .case-cover,
  .img-block,
  .img-wide,
  .process-fig,
  .solution-grid,
  .ky-project-info,
  .ky-process-card,
  .ky-wordcloud,
  .ky-sec,
  .ky-overview,
  .ky-accordion-columns,
  .ky-design,
  .pd,
  .ky-wireframes
){
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* 4) Ritmo igual entre secções que começam com “kicker”
   – aplica a .case-section e .ky-sec quando o 1º filho é kicker */
.ky :is(.case-section, .ky-sec):has(> :is(.case-kicker, .ky-kicker)){
  padding-top: var(--kicker-gap-y);
  padding-bottom: var(--kicker-gap-y);
}

/* 5) Quando uma secção com kicker vem imediatamente a seguir a outra com kicker,
      garante sempre o mesmo gap entre elas (elimina “buracos” ou “saltos”). */
.ky :is(.case-section, .ky-sec):has(> :is(.case-kicker, .ky-kicker))
  + :is(.case-section, .ky-sec):has(> :is(.case-kicker, .ky-kicker)){
  margin-top: 0 !important;
  padding-top: var(--kicker-gap-y);
}

/* 6) Mobile — gutters seguros para a página toda (inclusive fora dos blocos acima) */
@media (max-width: 900px){
  .ky, .ky *{
    /* evita encostar no bordo em componentes que não herdarem padding */
    --page-gutter: clamp(14px, 5vw, 22px);
  }
}

/* ============================
   RITMO ENTRE SETORES (UNIFORME)
   — cola no fim do CSS —
============================ */
/* Ritmo global entre setores */
.ky{
  /* ↓ menor do que antes; ajusta à vontade */
  --section-gap-y: clamp(20px, 4.5vw, 40px);
}

/* 1) todos os setores têm o MESMO respiro em cima e em baixo */
.ky :is(.case-section, .ky-sec){
  padding-top: var(--section-gap-y) !important;
  padding-bottom: var(--section-gap-y) !important;
  margin-top: 0 !important;     /* evita somar margens anteriores */
  margin-bottom: 0 !important;
  display: flow-root;           /* evita “colapso” de margens internas */
}

/* 2) quando um setor vem logo a seguir a outro, mantém gap único (sem “buraco”) */
.ky :is(.case-section, .ky-sec) + :is(.case-section, .ky-sec){
  margin-top: 0 !important;
  /* o espaçamento entre eles é só o padding do de baixo,
     garantindo sempre o mesmo valor visual */
}

/* 3) setores que começam com kicker — garantem o MESMO ritmo também */
.ky :is(.case-section, .ky-sec):has(> :is(.case-kicker, .ky-kicker)){
  padding-top: var(--section-gap-y) !important;
  padding-bottom: var(--section-gap-y) !important;
}

/* 4) se dois setores com kicker estiverem consecutivos, continua igual */
.ky :is(.case-section, .ky-sec):has(> :is(.case-kicker, .ky-kicker))
  + :is(.case-section, .ky-sec):has(> :is(.case-kicker, .ky-kicker)){
  margin-top: 0 !important;
}

/* 5) micro-ajuste: o 1.º elemento dentro do setor nunca “empurra” o topo */
.ky :is(.case-section, .ky-sec) > :first-child{
  margin-top: 0 !important;
}

/* 6) mobile: podes fechar um pouco o gap se quiseres */
@media (max-width: 768px){
  .ky{ --section-gap-y: clamp(28px, 7vw, 44px); }
}

/* ---------- Fallback sem :has() (se precisares) ----------
   Se tiveres algum browser antigo sem :has, adiciona a classe
   .section--with-kicker no HTML dos setores com kicker
   e mantém o mesmo ritmo:
.ky :is(.case-section, .ky-sec).section--with-kicker{
  padding-top: var(--section-gap-y) !important;
  padding-bottom: var(--section-gap-y) !important;
}
.ky :is(.case-section, .ky-sec).section--with-kicker
  + :is(.case-section, .ky-sec).section--with-kicker{
  margin-top: 0 !important;
}
*/

/* ============================
   PATCH FORTE — subtítulos centrados
   (colocar no FIM do CSS)
============================ */

/* 1) Subtítulos globais */
.ky :is(.ky-subtitle, .ky-subttl){
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

/* 2) Subtítulos que foram forçados à esquerda nas colunas */
.ky .ky-col :is(.ky-subttl, .ky-subtitle){
  text-align: center !important;
  padding-left: 0 !important;
}

/* 3) USER PERSONA — subtítulos dos tópicos e listas */
.ky .ky-persona-card :is(.ky-topic .ky-subttl, .ky-topic .ky-subtitle){
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}
.ky .ky-persona-card .ky-topic .ky-list{
  text-align: center !important;
  padding-left: 0 !important;   /* elimina indentação à esquerda */
  margin-left: auto !important;
  margin-right: auto !important;
  list-style: none !important;  /* limpa bullets; remove se quiseres bullets */
}

/* 4) USER PERSONA — garantir centragem das colunas no grid */
.ky :is(.ky-persona-grid, .ky-persona-grid--3){
  justify-items: center !important;   /* centra conteúdo das células */
}
.ky :is(.ky-persona-grid, .ky-persona-grid--3) > .ky-col{
  justify-self: center !important;    /* centra cada coluna */
  text-align: center !important;      /* fallback de texto */
}

/* 5) Empathy Map — títulos dos cartões */
.ky .ky-empathy .em-blk h4{
  text-align: center !important;
}

/* 6) Qualquer regra que tinha alinhado à esquerda (override nuclear) */
.ky :where(.ky-col .ky-subttl, .ky-col .ky-subtitle){
  text-align: center !important;
  padding-left: 0 !important;
}

/* ===== MK BADGE — forçar sólido e posição, mesmo sem .mk-badge ===== */

/* o container das tabs serve de âncora */
.ky-design .mk-tabs{ position: relative !important; }

/* seleciona várias possibilidades de markup */
.ky-design .mk-badg,
.ky-design .mk-badge,
.ky-design .mk-badge--sunset,
.ky-design [data-badge]{
  position: absolute !important;
  top: -14px; right: 14px;
  display: flex !important;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 14px 10px;
  min-width: 92px;
  border-radius: 16px;
  z-index: 9;
  mix-blend-mode: normal !important;
  color: #FDFCFF;          /* fica overidden pelos seletores de texto em baixo */
}

/* FUNDO 100% SÓLIDO (independente do background do elemento) */
.ky-design .mk-badg::before,
.ky-design .mk-badge::before,
.ky-design .mk-badge--sunset::before,
.ky-design [data-badge]::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:#BE99E1;                 /* sunset sólido */
  border: 1px solid #BE99E1;
  box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  z-index: -1;                          /* fica atrás do texto */
}

/* Tipografia — 70+ grande e centrado */
.ky-design .mk-badg strong,
.ky-design .mk-badge strong,
.ky-design .mk-badge--sunset strong,
.ky-design [data-badge] strong{
  font-family: system-ui,-apple-system,"Inter","Akatab",sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 1.1rem + .7vw, 30px);
  line-height: 1;
  letter-spacing: .01em;
  color: #FDFCFF !important;
}

.ky-design .mk-badg em,
.ky-design .mk-badge em,
.ky-design .mk-badge--sunset em,
.ky-design [data-badge] em{
  font-style: normal;
  font-weight: 600;
  font-size: clamp(11px, .7rem + .15vw, 13px);
  line-height: 1.05;
  color: #FDFCFF !important;
  opacity: 1 !important;
}

/* Mobile: ligeiro ajuste de posição */
@media (max-width:900px){
  .ky-design .mk-badg,
  .ky-design .mk-badge,
  .ky-design .mk-badge--sunset,
  .ky-design [data-badge]{ top:-10px; right:10px; padding:10px 12px; }
}

/* ancoragem e camada certa */
.ky-design .mk-tabs{ position:relative !important; z-index:2 !important; }
.ky-design .mkc-panel{ position:relative !important; z-index:1 !important; }

/* neutraliza qualquer vidro/transparência herdada */
.ky-design :is(.mk-badge,.mk-badge.mk-badge--sunset,.mk-badge.mk-badge--lavender){
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  opacity:1 !important;
}

/* desktop/tablet — mantém como está */
.ky-design .mk-badge.mk-badge--lavender{
  background:#BE99E1 !important; border-color:#A884D1 !important; color:#fff !important;
}

/* ===== MOBILE (≤ 640px) =====
   - reduz visualmente via scale (pega tudo)
   - ajusta posição/padding
   - reserva espaço na barra para não colidir com as tabs
*/
@media (max-width:640px){
  .ky-design .mk-tabs{ padding-right: 128px !important; } /* espaço pro selo */
  .ky-design :is(.mk-badge,.mk-badge.mk-badge--sunset,.mk-badge.mk-badge--lavender){
    top:-6px !important; right:8px !important;
    padding:8px 10px 7px !important;
    border-radius:12px !important;
    transform-origin: 100% 0 !important;      /* cantinho superior direito */
    transform: scale(.82) !important;         /* encolhe TUDO de forma consistente */
    box-shadow:0 6px 14px rgba(0,0,0,.10) !important;
    max-width:none !important; min-width:auto !important;
  }
  .ky-design .mk-badge strong{ font-size:20px !important; line-height:1 !important; }
  .ky-design .mk-badge em{ font-size:11px !important; line-height:1.05 !important; }
}

/* ===== MUITO PEQUENO (≤ 360px) =====
   ainda mais compacto e com mais espaço à direita das tabs
*/
@media (max-width:360px){
  .ky-design .mk-tabs{ padding-right: 140px !important; }
  .ky-design :is(.mk-badge,.mk-badge.mk-badge--sunset,.mk-badge.mk-badge--lavender){
    top:-4px !important; right:6px !important;
    transform: scale(.74) !important;
    padding:6px 8px 6px !important; border-radius:10px !important;
  }
  .ky-design .mk-badge strong{ font-size:18px !important; }
  .ky-design .mk-badge em{ font-size:10px !important; }
}

/* ==========================================
   PERSONA — CENTRAR APENAS OS TÍTULOS
   (não mexe em .ky-traits, .trait, .trait-track, etc.)
========================================== */

/* BIOGRAPHY — casos mais comuns: h4/subttl/divider */
.ky .ky-persona-card .ky-bio > :is(h1,h2,h3,h4,h5,h6,.ky-subttl),
#define .ky-persona-card .ky-bio > :is(h1,h2,h3,h4,h5,h6,.ky-subttl){
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* se usares um "divider" com <span> no título do BIO, centra o container e o span */
.ky .ky-persona-card .ky-bio .ky-divider,
#define .ky-persona-card .ky-bio .ky-divider{
  text-align: center !important;
}
.ky .ky-persona-card .ky-bio .ky-divider span,
#define .ky-persona-card .ky-bio .ky-divider span{
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* PERSONALITY — título da secção apenas */
.ky .ky-persona-card .ky-traits-wrap > :is(h1,h2,h3,h4,h5,h6,.ky-traits-title,.ky-subttl),
#define .ky-persona-card .ky-traits-wrap > :is(h1,h2,h3,h4,h5,h6,.ky-traits-title,.ky-subttl){
  text-align: center !important;
  display: inline-block !important;   /* evita ocupar a largura toda */
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
}

/* (segurança) nunca alinhar o bloco das barras via este patch */
.ky .ky-persona-card :is(.ky-traits, .trait, .trait-track, .trait-fill){
  text-align: initial !important; /* não altera layout das barras */
}

/* PATCH — Títulos da barra de info (#BE99E1) */
.ky-project-info .info-label{
  color: #BE99E1 !important;
}

/* === PATCH — Títulos (Needs/Goals/Frustrations/Interests/Biography/Personality) === */
/* Escopo: só dentro da Persona do DEFINE. Colar no FIM do CSS. */
#define .ky-persona-card :is(.ky-topic .ky-subttl,
                            .ky-bio .ky-subttl,
                            .ky-traits-wrap .ky-subttl){
  text-align: center !important;
  color: #BE99E1 !important;
}

/* Fallback caso algum título esteja como <h4> sem .ky-subttl */
#define .ky-persona-card :is(.ky-topic h4,
                            .ky-bio h4,
                            .ky-traits-wrap h4){
  text-align: center !important;
  color: #BE99E1 !important;
}

/* PATCH — Impact & Outcome em #876BA1 */
.ky .closing .value-pills .lbl{
  color: #876BA1 !important;
}

/* ==========================================
   IDEATE → WIREFRAMES — reduzir gap do título
   (desktop e mobile, sem tocar no IA)
========================================== */

/* quando #wireframes vem logo a seguir ao .ky-ia */
.ky-ia + #wireframes.case-section{
  /* puxa o bloco para cima (compensa a margem-bottom do .ky-ia) */
  margin-top: -25px !important;

  /* menos “acolchoamento” antes do <h2> */
  padding-top: 14px !important;
}

/* garante que o <h2> não volta a abrir espaço */
.ky-ia + #wireframes.case-section > h2{
  margin-top: 0 !important;
}

/* Mobile: também reduz, mas um pouco menos agressivo */
@media (max-width: 640px){
  .ky-ia + #wireframes.case-section{
    margin-top: -16px !important;
    padding-top: 10px !important;
  }
}

/* ==========================================
   DEFINE → PROBLEMS DETECTED — reduzir gap do título
   (responsivo; não mexe no conteúdo da .pd)
========================================== */

/* quando a .pd vem logo a seguir ao #define */
#define + .pd{
  /* puxa o bloco para cima e dá só um respiro interno */
  margin-top: -20px !important;
  padding-top: 12px !important;
}

/* garante que o <h2> não reabre espaço */
#define + .pd .pd-title{
  margin-top: 0 !important;
}

/* Tablet (641–900px): um pouco menos agressivo */
@media (min-width:641px) and (max-width:900px){
  #define + .pd{
    margin-top: -18px !important;
    padding-top: 10px !important;
  }
}

/* Mobile (≤640px): reduz também, mas com folga extra */
@media (max-width:640px){
  #define + .pd{
    margin-top: -14px !important;
    padding-top: 8px !important;
  }
  #define + .pd .pd-title{ margin-top: 0 !important; }
}

/* ======================================
   EMPATHIZE — centrar o subtítulo (h2)
   (robusto contra overrides anteriores)
====================================== */
.ky .ky-sec.ky-insights.ksec > h2,
.ky .ky-sec.ky-insights > h2,
.ky-sec.ky-insights > h2{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px;           /* mantém a mesma largura de texto do case */
}

/* (opcional) garante que o parágrafo logo abaixo segue alinhamento */
.ky .ky-sec.ky-insights > p{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px;
}

/* ==========================================
   USER PERSONA — MOBILE CENTER FIX (≤640px)
   centra títulos e cada linha da lista por layout (flex)
========================================== */
@media (max-width:640px){

  /* Blocos dos tópicos ocupam a largura e centram conteúdo */
  .ky .ky-persona-card .ky-stack,
  .ky .ky-persona-card .ky-topic,
  #define .ky-persona-card .ky-stack,
  #define .ky-persona-card .ky-topic{
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Subtítulos centrados */
  .ky .ky-persona-card .ky-topic .ky-subttl,
  #define .ky-persona-card .ky-topic .ky-subttl{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
  }

  /* LISTAS: viram coluna flex e cada <li> centra pelo próprio conteúdo */
  .ky .ky-persona-card .ky-topic .ky-list,
  #define .ky-persona-card .ky-topic .ky-list{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;     /* <- chave */
    gap: 8px !important;
    list-style: none !important;        /* troca por 'disc' + inside se quiseres bullets */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 100% !important;
  }
  .ky .ky-persona-card .ky-topic .ky-list li,
  #define .ky-persona-card .ky-topic .ky-list li{
    display: inline-block !important;   /* mede pela largura do texto */
    width: fit-content !important;      /* centra sem “puxar” para a direita */
    max-width: 92% !important;          /* evita quebrar nas linhas muito longas */
    margin: 0 auto !important;
  }

  /* Título do card e meta centrados (segurança) */
  .ky .ky-persona-card .ky-card__title,
  .ky .ky-persona-card .ky-meta{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ky .ky-persona-card .ky-meta li{ justify-content: center !important; }

  /* Grelha: centra as colunas no mobile */
  .ky :is(.ky-persona-grid, .ky-persona-grid--3){
    justify-items: center !important;
  }
  .ky :is(.ky-persona-grid, .ky-persona-grid--3) > .ky-col{
    justify-self: center !important;
    text-align: center !important;
  }
}

/* ==========================================
   PROBLEMS DETECTED — MOBILE POLISH
   (fecha laterais, +margem bottom, pílula centrada)
========================================== */
@media (max-width:900px){
  /* 0) + espaço depois do componente completo */
  .pd{
    margin-bottom: 26px !important;
  }

  /* 1) As três peças viram UM quadro contínuo */
  .pd-mobile-toggle,
  .pd-grid,
  .pd-mobile-nav{
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid #E7E0FB !important;
    border-right: 1px solid #E7E0FB !important;
  }

  /* topo do quadro */
  .pd-mobile-toggle{
    border-top: 1px solid #E7E0FB !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 10px 12px 14px !important;
  }

  /* miolo do quadro (onde está a pílula) */
  .pd-grid{
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    /* centra verticalmente a pílula entre barra e navegação */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 140px !important;        /* altura confortável do stage */
    padding: 16px 12px 16px !important;   /* padding simétrico (↑↓) */
    margin-bottom: 6px !important;        /* respiro antes dos botões */
  }
  /* a própria pílula fica perfeitamente centrada */
  .pd-row .pd-cell{
    margin: 0 auto !important;
  }

  /* base do quadro (navegação) */
  .pd-mobile-nav{
    border-top: 0 !important;
    border-bottom: 1px solid #E7E0FB !important;
    border-radius: 0 0 16px 16px !important;
    padding: 12px 12px !important;
    gap: 16px !important;
  }

  /* 2) remove qualquer “linha” fantasma ou sobreposição */
  .pd::before,
  .pd-grid::before,
  .pd-grid::after{
    content: none !important;
    display: none !important;
  }
}

/* ==============================
   PD — Título com mais respiro
   ============================== */
.pd-title{
  padding-bottom: 14px !important;   /* desktop/tablet */
}

/* Mobile: um pouco mais ainda */
@media (max-width:900px){
  .pd-title{
    padding-bottom: 18px !important;
  }
}

/* === HOTFIX — limitar roxos ao KNOW YOU+ e devolver verde ao LIFEASIER === */

/* 1) KNOW YOU+ (escopo roxo só dentro de main.ky) */
.ky .case-section .case-kicker { color:#BE99E1 !important; }      /* kicker roxo KY */
.ky .case-section .case-kicker.km { color:#6A3EA1 !important; }    /* kicker “km” roxo KY */

/* 2) LIFEASIER (qualquer main.case-detail que NÃO seja KY) */
main.case-detail:not(.ky) .case-section .case-kicker { color:#1C8A84 !important; }        /* kicker verde */
main.case-detail:not(.ky) .case-section .case-kicker + h2 { color:#272222 !important; }   /* h2 a seguir ao kicker */

/* 3) Corrige um hex inválido que pode baralhar títulos noutros blocos */
main.case-detail .case-section h2 { color:#272222 !important; } /* antes tinhas '272222' sem # */

/* === KY · Secções com kicker (Design Process) sempre centradas === */
.ky .ky-sec{
  text-align:center !important;
}
.ky .ky-sec > h2,
.ky .ky-sec > p{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  max-width:900px;            /* largura confortável do texto */
}
@media (max-width:768px){
  .ky .ky-sec > h2,
  .ky .ky-sec > p{
    max-width: 92vw;          /* garante centragem e respiro em mobile */
  }
}

/* ——— TABELA (aesthetic) ——— */
.ky-process-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:
    radial-gradient(1200px 200px at 50% -120px, rgba(124,58,237,.06), transparent),
    #fff;
  border:1px solid #ececf2;
  border-radius:16px;
  overflow:hidden; /* mantém cantos arredondados */
  box-shadow:0 10px 30px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.6);
  font-size:.95rem;
}

/* ——— Cabeçalhos CENTRADOS + menos padding em cima ——— */
.ky-process-table thead th{
  background:linear-gradient(180deg,#faf7ff,#f7f7fb);
  font-weight:700; letter-spacing:.2px;
  text-align:center;                 /* centrado */
  padding:.55rem 1rem .75rem;        /* menos padding TOP */
  border-bottom:1px solid #eeeaf7;
}

/* ——— Células com menos padding TOP e sem clipping ——— */
.ky-process-table td{
  padding:.70rem 1rem .85rem;        /* top reduzido */
  vertical-align:middle;
  border-bottom:1px solid #f2f2f6;
  overflow:visible;                   /* garante que nada é cortado */
}
.ky-process-table tbody tr:last-child td{ border-bottom:0; }

/* ——— ÍCONES PEQUENOS, SEM “CORTE/CONTORNO” ——— */
.ky-process-table tbody td img,
.ky-process-table .phase-icon{
  width:20px !important;
  height:20px !important;
  max-width:none !important;
  max-height:none !important;
  display:inline-block !important;
  object-fit:contain;
  margin-right:.55rem !important;
  vertical-align:middle;
  /* remove qualquer borda/sombra/recorte herdado */
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  clip-path:none !important;
  opacity:.95;
  filter:none !important; /* sem halo/corte óptico */
}

/* Coluna "Fase": texto + ícone alinhados e sem quebras estranhas */
.ky-process-table td:first-child{ white-space:nowrap; }
.ky-process-table td:first-child .phase{
  display:inline-flex; align-items:center; gap:.55rem; font-weight:600; line-height:1.2;
}

/* ——— Mobile muito pequeno (≤480px): compacto ——— */
@media (max-width:480px){
  .ky-process-table{ font-size:.92rem; border-radius:14px; }
  .ky-process-table td{ padding:.60rem .85rem .75rem; }   /* ainda menos top */
  .ky-process-table tbody td img,
  .ky-process-table .phase-icon{ width:18px !important; height:18px !important; }
}


/* ===== Tabela estética ===== */
.ky-process-table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background: radial-gradient(1200px 200px at 50% -120px, rgba(124,58,237,.06), transparent), #fff;
  border:1px solid #ececf2; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.6);
  font-size:.95rem;
}

/* Cabeçalhos centrados */
.ky-process-table thead th{
  background:linear-gradient(180deg,#faf7ff,#f7f7fb);
  font-weight:700; letter-spacing:.2px; text-align:center;
  padding:.55rem 1rem .75rem;          /* menos padding top */
  border-bottom:1px solid #eeeaf7;
}

/* Células compactas */
.ky-process-table td{
  padding:.70rem .9rem .85rem;         /* top reduzido */
  vertical-align:middle;
  border-bottom:1px solid #f2f2f6;
  overflow:visible;                     /* nunca corta ícones */
}
.ky-process-table tbody tr:last-child td{ border-bottom:0; }

/* Ícones pequenos, sem corte/borda/halo */
.ky-process-table tbody td img,
.ky-process-table .phase-icon{
  width:18px !important; height:18px !important;
  max-width:none !important; max-height:none !important;
  display:inline-block !important; object-fit:contain;
  margin-right:.45rem !important; vertical-align:middle;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent !important; border-radius:0 !important; clip-path:none !important;
}

/* Coluna "Fase": alinhamento bonito */
.ky-process-table td:first-child{ white-space:nowrap; }
.ky-process-table td:first-child .phase{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:600; line-height:1.2;
}

/* Mobile muito pequeno */
@media (max-width:480px){
  .ky-process-table{ font-size:.92rem; border-radius:14px; }
  .ky-process-table td{ padding:.60rem .75rem .70rem; }
}

/* Desktop mantém como está; Mobile reduz o espaço acima da tabela */
@media (max-width: 1024px) {
  /* reduz o gap entre o parágrafo e o card da tabela */
  .ky-sec + .ky-process-card { 
    margin-top: 0px !important;   /* antes devia estar ~24px */
  }

  /* garante que o wrapper da tabela não adiciona espaço extra */
  .ky-process-table-wrap { 
    margin-top: 0 !important;
  }

  /* se o parágrafo tiver uma margem inferior grande, diminui um pouco */
  .ky-sec.ksec p { 
    margin-bottom: 10px !important;
  }
}

/* —— Centralização vertical na tabela —— */
.ky-process-table th,
.ky-process-table td{
  vertical-align: middle !important;   /* centra conteúdo nas células */
}

/* Primeira coluna: ícone + texto alinhados ao centro vertical */
.ky-process-table td:first-child .phase{
  display: inline-flex;
  align-items: center;                  /* centra verticalmente */
  gap: .45rem;
}

/* Garante que o ícone está mesmo no meio */
.ky-process-table .phase-icon{
  vertical-align: middle;
  display: inline-block;
}

/* Listas: remove espaço extra que “puxa” para cima/baixo */
.ky-process-table td ul{
  margin: 0.15rem 0 !important;
  padding-left: 1.1rem;
  line-height: 1.35;
}

/* (Opcional) dá uma altura mínima às linhas para um alinhamento consistente */
.ky-process-table tbody tr > td{
  padding-top: .65rem;   /* já tinhas padding reduzido; mantemos compacto */
  padding-bottom: .75rem;
}




/* ==== DESIGN PROCESS — VISIBILIDADE ÚNICA (override final) ==== */
/* Mobile (≤767px): só TABELA */
.ky-process-figure    { display: none !important; }
.ky-process-table-wrap{ display: block !important; }

/* Tablet/Desktop (≥768px): só IMAGEM */
@media (min-width: 768px){
  .ky-process-figure    { display: block !important; }
  .ky-process-table-wrap{ display: none  !important; }
}

/* ==== DESIGN PROCESS — GARANTIR 2 COLUNAS NA TABELA ==== */
/* (remove efeitos de “tabela em cards” e QUALQUER ocultação da 2ª coluna) */
.ky-process-table,
.ky-process-table thead,
.ky-process-table tbody,
.ky-process-table tr,
.ky-process-table th,
.ky-process-table td{ display: revert !important; }

.ky-process-table tr { display: table-row  !important; }
.ky-process-table th,
.ky-process-table td { display: table-cell !important; vertical-align: top; }

/* Reativa sempre a 2ª coluna (algum bloco anterior estava a escondê-la) */
.ky-process-table thead th:nth-child(2),
.ky-process-table td:nth-child(2){ display: table-cell !important; }


/* ==== DESIGN PROCESS — VISIBILIDADE ÚNICA ==== */
/* Mobile (≤767px): só TABELA */
.ky-process-figure    { display: none !important; }
.ky-process-table-wrap{ display: block !important; }

/* Tablet/Desktop (≥768px): só IMAGEM */
@media (min-width: 768px){
  .ky-process-figure    { display: block !important; }
  .ky-process-table-wrap{ display: none  !important; }
}

/* ==== DESIGN PROCESS — GARANTIR 2 COLUNAS ==== */
.ky-process-table,
.ky-process-table thead,
.ky-process-table tbody,
.ky-process-table tr,
.ky-process-table th,
.ky-process-table td{ display: revert !important; }

.ky-process-table tr { display: table-row  !important; }
.ky-process-table th,
.ky-process-table td { display: table-cell !important; vertical-align: top; }

/* assegura que nenhuma coluna é escondida */
.ky-process-table thead th,
.ky-process-table td{ display: table-cell !important; }

/* EMPATHIZE – texto dos acordeões alinhado à esquerda */
.ky .ky-acc__content { padding: 0 18px 8px; }        /* só respiro */

.ky .ky-acc__content > *{
  text-align: left !important;                        /* anula centragem herdada */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ky .ky-acc__content ul{
  list-style: disc;                                   /* bullets normais */
  padding-left: 1.15rem;                              /* recuo dos pontos */
  margin: 6px 0 10px;
  text-align: left !important;
}

.ky .ky-acc__content li{ margin: 8px 0; }


//* ESTADOS DOS BUTTONS E ALTERACOES CORES *//

/* =========================
   KY · PATCH VISUAL FORTE
   (scope total a main.ky)
   ========================= */

/* ---------- 1) TABS (User Persona / Empathy Map + quaisquer .ky-def-tab) ---------- */
/* container sem “neblina” */
main.ky .mk-tabs,
main.ky #define .ky-def-tabs{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* tab inativa: BRANCA, borda definida, texto legível */
main.ky .mk-tab,
main.ky #define .ky-def-tab{
  appearance:none;
  background:#ffffff !important;
  color:#2c2350 !important;
  border:1.6px solid #DDD8F2 !important;
  border-radius:999px !important;
  padding:10px 14px !important;
  font:800 13.5px/1 "Akatab",system-ui,sans-serif !important;
  box-shadow:0 4px 12px rgba(31,32,51,.06) !important;
  transition:transform .12s, box-shadow .18s, background-color .18s, border-color .18s, color .18s !important;
}

/* hover — visível (APENAS DESKTOP ≥1025px + pointer fino) */
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .mk-tab:hover,
  main.ky #define .ky-def-tab:hover{
    background:#F6F1FF !important;
    border-color:#BE99E1 !important;
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(111,85,168,.22), 0 0 0 3px rgba(190,153,225,.20) !important;
  }
}

/* ativa — pill sólida com alto contraste */
main.ky .mk-tab.is-active,
main.ky #define .ky-def-tab.is-active{
  background:#876BA1 !important;
  border-color:#876BA1 !important;
  color:#ffffff !important;
}

/* focus visível */
main.ky .mk-tab:focus-visible,
main.ky #define .ky-def-tab:focus-visible{
  outline:2px solid #BE99E1 !important;
  outline-offset:2px !important;
}

/* ---------- 2) ZOOM BUTTONS (– 100% +) — hover/ativo claros ---------- */
main.ky .ky-ia .ia-zoom{
  background:#ffffff !important;
  border:1px solid #E2DDFB !important;
  box-shadow:0 8px 18px rgba(0,0,0,.06) !important;
}

main.ky .ky-ia .ia-zoom button{
  background:#F4EEFF !important;
  color:#1f2033 !important;
  border:1.4px solid #DDD8F2 !important;
  border-radius:12px !important;
  font-weight:800 !important;
  transition:transform .12s, box-shadow .18s, background-color .18s, border-color .18s !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .ky-ia .ia-zoom button:hover{
    background:#876BA1 !important;
    color:#fff !important;
    border-color:#876BA1 !important;
    transform:translateY(-1px);
  }
}
main.ky .ky-ia .ia-zoom button:active{
  background:#6F55A8 !important;
  color:#fff !important;
  border-color:#6F55A8 !important;
  transform:translateY(0);
}

/* ---------- 3) EMPATHY MAP — cartões realmente BRANCOS ---------- */
main.ky .ky-empathy .em-blk{
  background:#ffffff !important;
  border:1px solid #eae8f2 !important;
  box-shadow:0 8px 18px rgba(31,32,51,.04) !important;
}

/* ---------- 4) ACCORDIONS — hover e pressed visíveis ---------- */
main.ky .ky-acc{
  background:#ffffff !important;
  border:1.4px solid #eae8f2 !important;
  transition:border-color .15s, box-shadow .15s, background-color .15s !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .ky-acc:hover{
    border-color:#BE99E1 !important;
    box-shadow:0 8px 20px rgba(111,85,168,.10) !important;
  }
}
main.ky .ky-acc[open]{
  border-color:#876BA1 !important;
  box-shadow:0 10px 24px rgba(111,85,168,.16) !important;
  background:#FCFAFF !important;
}
main.ky .ky-acc__summary{
  font-weight:800 !important;
  color:#2c2350 !important;
}

/* ---------- 5) BOTÕES GENÉRICOS (.btn) ---------- */
main.ky .btn{
  background:#ffffff !important;
  color:#1f2033 !important;
  border:1.6px solid #DDD8F2 !important;
  border-radius:12px !important;
  box-shadow:0 8px 20px rgba(31,32,51,.06) !important;
  font-weight:800 !important;
  transition:transform .12s, box-shadow .18s, background-color .18s, border-color .18s, color .18s !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .btn:hover{
    background:#F6F1FF !important;
    border-color:#BE99E1 !important;
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(111,85,168,.24), 0 0 0 3px rgba(190,153,225,.20) !important;
  }
}
main.ky .btn:active{
  background:#EDE5FF !important;
  border-color:#876BA1 !important;
  transform:translateY(0);
}

/* variantes */
main.ky .btn--primary{
  background:#876BA1 !important; border-color:#876BA1 !important; color:#fff !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .btn--primary:hover{
    background:#6F55A8 !important; border-color:#6F55A8 !important;
    box-shadow:0 14px 28px rgba(111,85,168,.34) !important;
  }
}
main.ky .btn--outline{ background:#fff !important; color:#6F55A8 !important; border-color:#BE99E1 !important; }

main.ky .btn--sm{ height:36px !important; padding:0 12px !important; font-size:13.5px !important; }
main.ky .btn--lg{ height:50px !important; padding:0 18px !important; font-size:15.5px !important; }
main.ky .btn .icon{ width:18px; height:18px; transition:transform .18s; }
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .btn--with-caret:hover .icon{ transform:translateX(3px); }
}

/* ---------- 6) FOCUS GLOBAL ---------- */
main.ky :is(.btn,.mk-tab,#define .ky-def-tab,.ky-acc__summary, .ia-zoom button):focus-visible{
  outline:2px solid #BE99E1 !important;
  outline-offset:2px !important;
}

/* ---------- 7) NÃO TOCAR NO TEU CTA ---------- */
/* (sem seletores ao #kyplus-only .kyplus-btn) */

/* ============================
   KY · CAROUSEL — NAV & DOTS
   ============================ */

main.ky .ky-design .kc-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:999px;
  border:1.6px solid #DDD8F2; background:#F1EDFF; color:#6b5a8d;
  display:grid; place-items:center; font-weight:900; cursor:pointer;
  transition: transform .14s ease, box-shadow .18s ease,
             background-color .18s ease, border-color .18s ease, color .18s ease;
}
main.ky .ky-design .kc-nav::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .ky-design .kc-nav:hover{
    background:#876BA1 !important; color:#fff !important; border-color:#876BA1 !important;
    transform:translateY(-50%) translateY(-1px) scale(1.06);
    box-shadow:0 10px 26px rgba(111,85,168,.32), 0 0 0 3px rgba(190,153,225,.22);
  }
}
main.ky .ky-design .kc-nav:active{
  background:#6F55A8 !important; color:#fff !important; border-color:#6F55A8 !important;
  transform:translateY(-50%) scale(0.98);
  box-shadow:0 6px 16px rgba(111,85,168,.26);
}
main.ky .ky-design .kc-nav:disabled{
  opacity:.45; cursor:default; transform:translateY(-50%) !important;
  box-shadow:none !important;
}
main.ky .ky-design .kc-nav:focus-visible{
  outline:2px solid #BE99E1; outline-offset:3px;
}

/* Dots */
main.ky .ky-design .kc-dots{ display:flex; gap:12px; padding:0; margin:0; }
main.ky .ky-design .kc-dot{
  width:8px; height:8px; border-radius:999px; border:0;
  background:#D9D1F0; cursor:pointer;
  transition: transform .14s ease, background-color .18s ease, box-shadow .18s ease;
}
main.ky .ky-design .kc-dot.is-on{
  background:#876BA1 !important;
  box-shadow:0 0 0 3px rgba(135,107,161,.18);
  transform:scale(1.25);
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .ky-design .kc-dot:hover{
    background:#BE99E1;
    transform:scale(1.3);
    box-shadow:0 0 0 4px rgba(190,153,225,.22);
  }
}
main.ky .ky-design .kc-dot:active{
  background:#6F55A8;
  transform:scale(1.15);
}
main.ky .ky-design .kc-dot:focus-visible{
  outline:2px solid #BE99E1; outline-offset:3px; border-radius:999px;
}

/* ================================
   KY · ACCORDION — simples c/ ATIVO lilás claro
   ================================ */

main.ky .ky-acc{
  background:#fff !important;
  border:1px solid #e6e1f3 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
main.ky .ky-acc__summary{
  padding:14px 16px !important;
  font-weight:750 !important;
  color:#26233d !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky .ky-acc:hover{
    border-color:#bfa9e6 !important;
    box-shadow:0 4px 14px rgba(111,85,168,.12) !important;
    background:#fff !important;
  }
}
main.ky .ky-acc[open]{
  background:#F6F1FF !important;
  border-color:#8f78c0 !important;
  box-shadow:0 6px 16px rgba(111,85,168,.10) !important;
}
main.ky .ky-acc[open] .ky-acc__summary{
  background:#F6F1FF !important;
  border-bottom:1px solid #E9E1FF !important;
  color:#2d2550 !important;
}
main.ky .ky-acc__content{ padding:8px 16px 14px !important; }
main.ky .ky-acc__content > *{ text-align:left !important; color:#2c2b3a !important; }
main.ky .ky-acc__content ul{ padding-left:18px !important; }
main.ky .ky-acc__summary:active{ background:#EEE6FF !important; }
main.ky :is(.ky-acc,.ky-acc__summary):focus-visible{
  outline:2px solid #BE99E1 !important; outline-offset:2px !important;
}

/* ============================
   KY · TABS (chips)
   - Default sem preto
   - Hover só desktop
   - Touch SEM hover
   ============================ */

main.ky :is(.ky-def-tab, .mk-tab){
  color:#5E5192 !important;            /* NÃO preto */
  background:#FFFFFF !important;
  border:1.5px solid #D9D1F0 !important;
  border-radius:999px;
  font-weight:800;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
main.ky :is(.ky-def-tab, .mk-tab).is-active{
  background:#876BA1 !important;
  border-color:#876BA1 !important;
  color:#FFFFFF !important;
  box-shadow:0 6px 16px rgba(111,85,168,.22) !important;
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky :is(.ky-def-tab, .mk-tab):hover{
    background:#BE99E1 !important;
    border-color:#BE99E1 !important;
    color:#FFFFFF !important;
    transform: translateY(-1px);
    box-shadow:0 10px 22px rgba(190,153,225,.26);
  }
}
main.ky :is(.ky-def-tab, .mk-tab):active{
  background:#6F55A8 !important;
  border-color:#6F55A8 !important;
  color:#FFFFFF !important;
  transform: translateY(0);
  box-shadow:0 6px 14px rgba(111,85,168,.24);
}
main.ky :is(.ky-def-tab, .mk-tab):focus-visible{
  outline:2px solid #BE99E1;
  outline-offset:3px;
}

/* ===== Neutralização TOTAL de hover < 1025px (mesmo com rato) ===== */
@media (max-width:1024px){
  /* TABS */
  main.ky :is(.ky-def-tab, .mk-tab):hover{
    background:#FFFFFF !important;
    border-color:#D9D1F0 !important;
    color:#5E5192 !important;
    transform:none !important;
    box-shadow:none !important;
  }
  /* ZOOM */
  main.ky .ky-ia .ia-zoom button:hover{
    background:#F4EEFF !important;
    color:#1f2033 !important;
    border-color:#DDD8F2 !important;
    transform:none !important;
    box-shadow:none !important;
  }
  /* BOTÕES */
  main.ky .btn:hover{
    background:#ffffff !important;
    border-color:#DDD8F2 !important;
    transform:none !important;
    box-shadow:0 8px 20px rgba(31,32,51,.06) !important;
  }
  /* ACCORDION */
  main.ky .ky-acc:hover{
    border-color:#e6e1f3 !important;
    box-shadow:none !important;
    background:#fff !important;
  }
  /* CAROUSEL — setas e dots */
  main.ky .ky-design .kc-nav:hover{
    background:#F1EDFF !important; color:#6b5a8d !important; border-color:#DDD8F2 !important;
    transform:translateY(-50%) !important; box-shadow:none !important;
  }
  main.ky .ky-design .kc-dot:hover{
    background:#D9D1F0 !important; transform:none !important; box-shadow:none !important;
  }
}
/* === KY · TABS — hover uniforme (apenas desktop) === */
/* Aplica a: mk-tabs (User Persona/Empathy Map) e define tabs (Desktop/Mobile) */
@media (hover:hover){
  main.ky :is(.mk-tab, .ky-def-tab):hover{
    background:#EDE5FF !important;   /* lilás clarinho no hover */
    border-color:#BE99E1 !important; /* borda/luz consistente */
    color:#2d2550 !important;         /* texto legível, sem preto puro */
    transform:translateY(-1px);
    box-shadow:
      0 10px 22px rgba(111,85,168,.22),
      0 0 0 3px rgba(190,153,225,.22) !important; /* anel igual em ambas */
  }
}


/* --- TABS: HOVER SÓ DESKTOP (pointer fino) --- */
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  main.ky :is(.mk-tab, .ky-def-tab):hover{
    background:#EDE5FF !important;
    border-color:#BE99E1 !important;
    color:#2d2550 !important;
    transform:translateY(-1px);
    box-shadow:
      0 10px 22px rgba(111,85,168,.22),
      0 0 0 3px rgba(190,153,225,.22) !important;
  }
}

/* --- TABS: MATAR HOVER em mobile/tablet e em dispositivos sem hover --- */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  main.ky :is(.mk-tab, .ky-def-tab):hover{
    background:#FFFFFF !important;
    border-color:#D9D1F0 !important;
    color:#5E5192 !important;
    transform:none !important;
    box-shadow:none !important;
  }
}

/* IMPORTANTE: REMOVE estes blocos duplicados (se existirem) */
 /* 1) qualquer .mk-tab:hover ou .ky-def-tab:hover fora de media query */
 /* 2) as versões com html.can-hover ... :hover (não vamos usar JS) */
 /* 3) o teu primeiro @media(hover:hover){ ... :hover } genérico */


/* =========================================================
   KNOW YOU+ — PALETA UNIFICADA (append no fim do teu CSS)
   Foto-guia: lavandas + pêssegos + neutros
   NÃO altera layout nem CTA; apenas cores.
========================================================= */

/* ---------- Tokens da paleta (foto) ---------- */
main.ky{
  /* Lavandas */
  --lav-soft: #CFAFEE;  /* swatch 2  */
  --lav:      #BE99E1;  /* swatch 3  */
  --lav-deep: #876BA1;  /* swatch 4  */

  /* Pêssegos */
  --peach-0:  #FFFBF8;  /* base cremosa        */
  --peach-1:  #FEF0DE;  /* realce/soft card    */
  --peach-2:  #FFD391;  /* pill/destaque leve  */
  --peach-3:  #FFBD59;  /* acento quente       */

  /* Neutros */
  --card:     #FDFCFF;  /* branco “quente”     */
  --bg:       #FFFFFF;  /* fundo puro          */
  --ink:      #272222;  /* texto principal     */
  --muted:    #928F8F;  /* texto secundário    */
  --line:     #DBD9D8;  /* linhas/bordas       */
}

/* ---------- Fundos e cartões ---------- */
.ky, .ky .case-hero, .ky .case-cover, .ky .case-section { background: var(--bg) !important; }
.ky :is(.ky-card,.ky-process-card,.ky-def-panel,.em-blk,.wf-item,.pd-grid,.ia-card,.ia-stage){ 
  background: var(--card) !important; 
  border-color: var(--line) !important;
}

/* ---------- Texto (primário e secundário) ---------- */
.ky :is(p,li,blockquote,small,figcaption){ color: var(--ink) !important; }
.ky :is(.info-label,.ky-meta,.ky-persona-meta,.closing .closing-sub){ color: var(--muted) !important; }

/* ---------- Títulos e kicks ---------- */
.ky :is(h1,h2,h3,.ky-card__title){ color: var(--ink) !important; }
.ky :is(.case-kicker,.ky-kicker,.ky-traits-title){ color: var(--lav) !important; }

/* ---------- Lavanda (UI states, tabs, dots, chevrons, etc.) ---------- */
.ky :is(.mk-tab.is-active,.ky-def-tab.is-active,.kc-dot.is-on,
        .kc-nav:active,.ky-acc[open],.ia-pin.is-active){
  background-color: var(--lav-deep) !important; 
  border-color: var(--lav-deep) !important; 
  color:#fff !important;
}
.ky :is(.mk-tab,.ky-def-tab,.kc-dot){ border-color: var(--line) !important; }
.ky :is(.mk-tab,.ky-def-tab){ color: var(--lav-deep) !important; background:#fff !important; }

/* hover só quando existir :hover (não altera touch) */
@media (hover:hover){
  .ky :is(.mk-tab:hover,.ky-def-tab:hover,.kc-dot:hover){
    background: var(--lav) !important; border-color: var(--lav) !important; color:#fff !important;
  }
}

/* ---------- Accordions / Cards ---------- */
.ky .ky-acc{ background:#fff !important; border-color: var(--line) !important; }
.ky .ky-acc[open]{
  background: color-mix(in srgb, var(--lav-soft) 18%, #fff) !important;
  border-color: var(--lav-deep) !important;
}
.ky .ky-acc__summary{ color: var(--ink) !important; }

/* ---------- Empathy/Persona títulos em lavanda ---------- */
.ky :is(.ky-subtitle,.ky-subttl,.em-blk h4){ color: var(--lav) !important; }

/* ---------- Pêssego (chips/pills de destaque “quentes”) ---------- */
.ky :is(.pd-cell.is-opp,.ia-pill,.uf-card > summary,
        .closing .value-pills .pill){ 
  background: var(--peach-2) !important; 
  border-color: var(--peach-2) !important; 
  color: var(--ink) !important;
}
.ky :is(.ky-process-table thead th,.pd-mobile-toggle){ 
  background: var(--peach-0) !important; 
  border-color: var(--line) !important; 
}

/* ---------- Linhas/bordas/contornos ---------- */
.ky :is(.cover-fig img,.process-fig img,.hero-image img,.img-wide img,
        .img-box,.wf-item,.ky-design .mkc-panel,.ky-project-info,
        .ky-process-table,.closing .whats-next.tiles li){
  border-color: var(--line) !important;
}

/* ---------- UI menores que usavam roxos/acinzentados soltos ---------- */
.ky :is(.info-label,.pd-col--impact,.pd-col--problem,.pd-col--opp){ color: var(--lav) !important; }
.ky :is(.ia-badge,.kc-caption){ border-color: var(--lav) !important; }

/* ---------- Neutros escuros normalizados ---------- */
.ky :is(.kc-nav,.btn,.ia-zoom button){ border-color: var(--line) !important; }
.ky :is(.kc-nav,.btn){ color: var(--lav-deep) !important; background:#F1EDFF !important; }

/* ---------- NÃO TOCAR NO CTA ---------- */
/* Mantém as cores do CTA originais */
#kyplus-only .kyplus-btn,
#kyplus-only .kyplus-btn:hover,
#kyplus-only .kyplus-btn:active { all: revert; }
#kyplus-only .kyplus-btn,
#kyplus-only .kyplus-btn:hover,
#kyplus-only .kyplus-btn:active { 
  /* re-aplica somente o que já está no teu CSS do CTA */
  display:inline-flex; align-items:center; text-decoration:none; 
  font-family:"Akatab",sans-serif; font-weight:400; font-size:16px; letter-spacing:2px;
  color:#fff; background:#6A5340; padding:10px 18px; border-radius:10px; border:none; cursor:pointer;
  transition:letter-spacing .4s, background-color .2s ease, transform .2s ease;
}
#kyplus-only .kyplus-btn:hover{ background:#8cb258; color:#fff; letter-spacing:4px; }
#kyplus-only .kyplus-btn:active{ background:#75924c; transform:translateY(1px); }
/* =========================================================
   KNOW YOU+ — PALETA UNIFICADA (append no fim do teu CSS)
   Foto-guia: lavandas + pêssegos + neutros
   NÃO altera layout nem CTA; apenas cores.
========================================================= */

/* ---------- Tokens da paleta (foto) ---------- */
main.ky{
  /* Lavandas */
  --lav-soft: #CFAFEE;  /* swatch 2  */
  --lav:      #BE99E1;  /* swatch 3  */
  --lav-deep: #876BA1;  /* swatch 4  */

  /* Pêssegos */
  --peach-0:  #FFFBF8;  /* base cremosa        */
  --peach-1:  #FEF0DE;  /* realce/soft card    */
  --peach-2:  #FFD391;  /* pill/destaque leve  */
  --peach-3:  #FFBD59;  /* acento quente       */

  /* Neutros */
  --card:     #FDFCFF;  /* branco “quente”     */
  --bg:       #FFFFFF;  /* fundo puro          */
  --ink:      #272222;  /* texto principal     */
  --muted:    #928F8F;  /* texto secundário    */
  --line:     #DBD9D8;  /* linhas/bordas       */
}

/* ---------- Fundos e cartões ---------- */
.ky, .ky .case-hero, .ky .case-cover, .ky .case-section { background: var(--bg) !important; }
.ky :is(.ky-card,.ky-process-card,.ky-def-panel,.em-blk,.wf-item,.pd-grid,.ia-card,.ia-stage){ 
  background: var(--card) !important; 
  border-color: var(--line) !important;
}

/* ---------- Texto (primário e secundário) ---------- */
.ky :is(p,li,blockquote,small,figcaption){ color: var(--ink) !important; }
.ky :is(.info-label,.ky-meta,.ky-persona-meta,.closing .closing-sub){ color: var(--muted) !important; }

/* ---------- Títulos e kicks ---------- */
.ky :is(h1,h2,h3,.ky-card__title){ color: var(--ink) !important; }
.ky :is(.case-kicker,.ky-kicker,.ky-traits-title){ color: var(--lav) !important; }

/* ---------- Lavanda (UI states, tabs, dots, chevrons, etc.) ---------- */
.ky :is(.mk-tab.is-active,.ky-def-tab.is-active,.kc-dot.is-on,
        .kc-nav:active,.ky-acc[open],.ia-pin.is-active){
  background-color: var(--lav-deep) !important; 
  border-color: var(--lav-deep) !important; 
  color:#fff !important;
}
.ky :is(.mk-tab,.ky-def-tab,.kc-dot){ border-color: var(--line) !important; }
.ky :is(.mk-tab,.ky-def-tab){ color: var(--lav-deep) !important; background:#fff !important; }

/* hover só quando existir :hover (não altera touch) */
@media (hover:hover){
  .ky :is(.mk-tab:hover,.ky-def-tab:hover,.kc-dot:hover){
    background: var(--lav) !important; border-color: var(--lav) !important; color:#fff !important;
  }
}

/* ---------- Accordions / Cards ---------- */
.ky .ky-acc{ background:#fff !important; border-color: var(--line) !important; }
.ky .ky-acc[open]{
  background: color-mix(in srgb, var(--lav-soft) 18%, #fff) !important;
  border-color: var(--lav-deep) !important;
}
.ky .ky-acc__summary{ color: var(--ink) !important; }

/* ---------- Empathy/Persona títulos em lavanda ---------- */
.ky :is(.ky-subtitle,.ky-subttl,.em-blk h4){ color: var(--lav) !important; }

/* ---------- Pêssego (chips/pills de destaque “quentes”) ---------- */
.ky :is(.pd-cell.is-opp,.ia-pill,.uf-card > summary,
        .closing .value-pills .pill){ 
  background: var(--peach-2) !important; 
  border-color: var(--peach-2) !important; 
  color: var(--ink) !important;
}
.ky :is(.ky-process-table thead th,.pd-mobile-toggle){ 
  background: var(--peach-0) !important; 
  border-color: var(--line) !important; 
}

/* ---------- Linhas/bordas/contornos ---------- */
.ky :is(.cover-fig img,.process-fig img,.hero-image img,.img-wide img,
        .img-box,.wf-item,.ky-design .mkc-panel,.ky-project-info,
        .ky-process-table,.closing .whats-next.tiles li){
  border-color: var(--line) !important;
}

/* ---------- UI menores que usavam roxos/acinzentados soltos ---------- */
.ky :is(.info-label,.pd-col--impact,.pd-col--problem,.pd-col--opp){ color: var(--lav) !important; }
.ky :is(.ia-badge,.kc-caption){ border-color: var(--lav) !important; }

/* ---------- Neutros escuros normalizados ---------- */
.ky :is(.kc-nav,.btn,.ia-zoom button){ border-color: var(--line) !important; }
.ky :is(.kc-nav,.btn){ color: var(--lav-deep) !important; background:#F1EDFF !important; }

/* ---------- NÃO TOCAR NO CTA ---------- */
/* Mantém as cores do CTA originais */
#kyplus-only .kyplus-btn,
#kyplus-only .kyplus-btn:hover,
#kyplus-only .kyplus-btn:active { all: revert; }
#kyplus-only .kyplus-btn,
#kyplus-only .kyplus-btn:hover,
#kyplus-only .kyplus-btn:active { 
  /* re-aplica somente o que já está no teu CSS do CTA */
  display:inline-flex; align-items:center; text-decoration:none; 
  font-family:"Akatab",sans-serif; font-weight:400; font-size:16px; letter-spacing:2px;
  color:#fff; background:#6A5340; padding:10px 18px; border-radius:10px; border:none; cursor:pointer;
  transition:letter-spacing .4s, background-color .2s ease, transform .2s ease;
}
#kyplus-only .kyplus-btn:hover{ background:#8cb258; color:#fff; letter-spacing:4px; }
#kyplus-only .kyplus-btn:active{ background:#75924c; transform:translateY(1px); }



/* CLOSING — pills (Impact / Outcome) em lavanda elegante */
.ky .closing .value-pills .pill{
  background: linear-gradient(180deg, #FDFCFF 0%, #F7F4FF 100%) !important; /* branco→lavanda suave */
  border: 1.5px solid #BE99E1 !important;   /* lavanda (var(--lav)) */
}

.ky .closing .value-pills .lbl{
  color: #876BA1 !important;                /* lavanda deep */
  letter-spacing: .14em !important;
  font-weight: 700 !important;
}

.ky .closing .value-pills .txt{
  color: #272222 !important;                 /* ink */
  font-weight: 600 !important;
}

/* PROJECT INFO — títulos em lilás forte (override hard) */
main.ky .ky-project-info .info-item .info-label{
  color:#876BA1 !important;              /* lilás forte */
  -webkit-text-fill-color:#876BA1 !important; /* Safari */
  opacity:1 !important;                  /* cancela cinza por opacidade */
  filter:none !important;                /* garante sem desaturação */
  text-shadow:none !important;
}

/* === PATCH: Bordas lilás no KNOW YOU+ (final do CSS) === */

/* 1) Define o lilás das “linhas/bordas” do tema */
main.ky{
  /* escolhe um dos tons: */
  /* --line: #E0D4FF;    // lilás clarinho */
  /* --line: #CBB6FF;    // lilás um tico mais presente */
  --line: #D9CFF2;        /* intermediário, combina com tua paleta */
}

/* 2) Elementos que tinham hex fixo de borda — força a usar o token */
.ky :is(
  .cover-fig img,
  .img-box,
  .process-fig img,
  .hero-image img,
  .img-wide img,
  .sol-item .img-frame,
  .ky-project-info,
  .ky-process-card,
  #define .ky-def-panel,
  .ky-def-panel,
  .em-blk,
  .wf-item,
  .ky-design .mkc-panel,
  .pd, .pd-grid, .pd-mobile-toggle, .pd-mobile-nav,
  .ky-ia .ia-card,
  .ky-ia .ia-stage,
  .ky-process-table,
  .closing .whats-next.tiles li
){
  border-color: var(--line) !important;
}

/* 3) Alguns controles/UI que também usam bordas neutras */
.ky :is(.kc-nav, .btn, .ia-zoom){
  border-color: var(--line) !important;
}

/* 4) Se quiser alinhar “divisórias finas” ao lilás também (opcional) */
.ky-project-info .info-item:not(:last-child)::after{
  background: color-mix(in srgb, var(--line) 55%, #0000) !important;
}

/* ===== IA — APENAS O QUADRO INTERNO A BRANCO ===== */

/* superfície do diagrama */
.ky-ia .ia-stage,
.ky-ia .ia-stage > .ia-surface,
.ky-ia .ia-canvas {
  background: #fff !important;   /* só dentro branco */
}

/* remove qualquer overlay interno */
.ky-ia .ia-stage::after {
  content: none !important;
  display: none !important;
}

/* GARANTIR que a moldura/fora fica lilás (caso o patch anterior a tenha deixado branca) */
.ky-ia {
  background: #FDFCFF !important;   /* troca pelo teu lilás, se for outro */
}

/* não pintar cartões internos de branco por engano */
.ky-ia .ia-card {
  background: transparent !important;
}


/* ===== Fundo EXTERIOR neste mockup ===== */
html, body {
  background: #FDFCFF;
}

/* wrappers/frames/carrossel onde o slide está inserido */
.ky-mockups,
.ky-mockups .frame,
.ky-carousel,
.preview-outer,
.gallery-frame,
.ky-ia {                      /* se for o mesmo container do diagrama */
  background: #FDFCFF !important;
}

/* ===== Superfície do slide/“canvas” (continua branco) ===== */
.ky-slide,
.ky-device,
.ia-stage,
.ia-stage > .ia-surface,
.ia-canvas {
  background: #FFFFFF !important;
}

/* segurança: não pintar cartões internos por engano */
.ky-ia .ia-card { background: transparent !important; }



/* Corpo do card: sem borda no topo, raio só em baixo */
#define .ky-card,
#define .ky-persona-card,
#define .ky-empathy-card {
  background: #FDFCFF !important;
  border: 0.3px solid #C9B3F5 !important;
  border-top: 0 !important;                 /* topo reto, sem linha duplicada */
  box-shadow: none !important;
  overflow: hidden;
}

/* Alinhar espessura e cor em todo o card */
#define .ky-card,
#define .ky-card__head { border-width: 0.5px !important; border-color: #C9B3F5 !important; }

/* Encostar o conteúdo um bocadinho mais ao header */
#define .ky-card { padding-top: 18px !important; }

/* Divider mais subtil */
#define .ky-persona-card .ky-bio,
#define .ky-persona-card .ky-traits-wrap {
  border-top: 1px solid #E9E0FA !important;
}

/* Mobile: cantos e espaçamento confortáveis */
@media (max-width: 640px) {
  #define .ky-card { border-radius: 0 0 16px 16px !important; padding: 16px !important; }
  #define .ky-card__head { padding: 14px 18px !important; }
}
/* === DEFINE ▸ Empathy Map blocks — fundo branco mesmo === */
#define .ky-empathy-card .em-blk {
  /* força a cor do fundo */
  background-color: #FDFCFF !important;
  background: #FDFCFF !important;          /* cobre shorthand */
  background-image: none !important;        /* remove gradiente */
  border: 1px solid #BE99E1 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* remove overlays/pseudo-elementos que deixam o fundo acinzentado */
#define .ky-empathy-card .em-blk::before,
#define .ky-empathy-card .em-blk::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* títulos */
#define .ky-empathy-card .em-blk h4 {
  color: #BE99E1 !important;
}

/* hover/focus sem alterar o fundo */
#define .ky-empathy-card .em-blk:hover,
#define .ky-empathy-card .em-blk:focus {
  background-color: #FDFCFF !important;
  background: #FDFCFF !important;
  border-color: #BE99E1 !important;
  box-shadow: none !important;
}

/* === DEFINE (KY) — ajustes finais === */

/* 1) Empathy Map: blocos com branco puro e contorno lilás */
#define .ky-empathy-card .em-blk {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;     /* cobre shorthand */
  background-image: none !important;   /* remove gradientes/overlays */
  border: 1px solid #BE99E1 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#define .ky-empathy-card .em-blk::before,
#define .ky-empathy-card .em-blk::after {
  content: none !important;            /* evita “véu” cinzento */
}

/* 2) Títulos dos cartões (User Persona / Empathy Map) em #876BA1 */
#define .ky-persona-card .ky-card__title,
#define .ky-empathy-card .ky-card__title {
  color: #876BA1 !important;
}

/* (Opcional) subtítulos “Says/Thinks/Does/Feels” em lilás */
#define .ky-empathy-card .em-blk h4 {
  color: #BE99E1 !important;
}

/* ===== DEFINE ▸ Problems Detected ===== */
/* Cabeçalhos (desktop): Impact e Opportunity nas cores certas */
#define .pd .pd-head .pd-col--impact {
  background: #7F619C !important;   /* Impact */
  color: #FFFFFF !important;
}
#define .pd .pd-head .pd-col--opp {
  background: #EE9D21 !important;   /* Opportunity */
  color: #FFFFFF !important;
}
#define .pd .pd-head .pd-col--impact .pd-ico,
#define .pd .pd-head .pd-col--opp .pd-ico {
  color: #FFFFFF !important;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  /* A “barra”/faixa de controlos no mobile fica branca */
  #define .pd .pd-mobile-toggle,
  #define .pd .pd-head {
    background: #FDFCFF !important;
    box-shadow: none !important;
  }

  /* Se as labels dos cartões forem renderizadas via ::before */
  #define .pd .pd-cell::before {
    background: #FDFCFF !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  /* Botões do toggle sem fundo pêssego */
  #define .pd .pd-mobile-toggle button {
    background: transparent !important;
    border-color: transparent !important;
  }
}


/* MOBILE — barra atrás de “Problem · Impact · Opportunity” */
@media (max-width: 640px) {
  #problems-detected .pd-mobile-toggle,
  #problems-detected .pd-mobile-nav {
    background: #FDFCFF !important;
    background-image: none !important; /* remove gradientes pêssego */
  }

  /* se a cor vier de pseudo-elementos */
  #problems-detected .pd-mobile-toggle::before,
  #problems-detected .pd-mobile-toggle::after {
    background: #FDFCFF !important;
  }
}

/* MOBILE — tirar totalmente o pêssego da barra da tabela */
@media (max-width: 640px) {

  /* wrapper e a própria tabela */
  .ky-process-table-wrap,
  .ky-process-table.aesthetic {
    background: #FDFCFF !important;
    background-image: none !important;
  }

  /* cabeçalho e células do cabeçalho */
  .ky-process-table.aesthetic thead,
  .ky-process-table.aesthetic thead tr,
  .ky-process-table.aesthetic thead th {
    background: #FDFCFF !important;
    background-image: none !important;
    box-shadow: none !important;          /* mata “faixa” feita com sombra */
  }

  /* pseudo-elementos decorativos usados na “barra” */
  .ky-process-table-wrap::before,
  .ky-process-table-wrap::after,
  .ky-process-table.aesthetic::before,
  .ky-process-table.aesthetic::after,
  .ky-process-table.aesthetic thead::before,
  .ky-process-table.aesthetic thead::after {
    content: none !important;             /* remove qualquer overlay/gradiente */
    background: #FDFCFF !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

/* MOBILE — header FDFCFF, conteúdo branco */
@media (max-width: 640px) {
  /* Header/barra */
  .ky-process-table.aesthetic thead,
  .ky-process-table.aesthetic thead tr,
  .ky-process-table.aesthetic thead th {
    background: #FDFCFF !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Conteúdo (corpo da tabela) branco */
  .ky-process-table.aesthetic tbody,
  .ky-process-table.aesthetic tbody tr,
  .ky-process-table.aesthetic tbody td {
    background: #FFFFFF !important;
    background-image: none !important;
  }

  /* Se algum overlay aplicar cor no corpo, neutraliza */
  .ky-process-table.aesthetic tbody::before,
  .ky-process-table.aesthetic tbody::after {
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}



/* DESKTOP — cores dos títulos da barra .pd-head */
#problems-detected .pd-head .pd-col--impact,
#problems-detected .pd-head .pd-col--impact .pd-ico {
  color: #7F619C !important;
}

#problems-detected .pd-head .pd-col--opp,
#problems-detected .pd-head .pd-col--opp .pd-ico {
  color: #EE9D21 !important;
}

/* Se houver estados (hover/active) que voltam a roxo, fixa também: */
#problems-detected .pd-head .pd-col--impact:hover,
#problems-detected .pd-head .pd-col--impact:focus { color:#7F619C !important; }

#problems-detected .pd-head .pd-col--opp:hover,
#problems-detected .pd-head .pd-col--opp:focus { color:#EE9D21 !important; }

/* MOBILE — cartão contínuo sem corte ao meio */
@media (max-width: 640px) {
  /* Parte de cima do cartão */
  #problems-detected .pd-grid{
    background: #FDFCFF !important;
    border: 1px solid #E8E3F2 !important;
    border-bottom: 0 !important;                 /* junta com a nav */
    border-radius: 18px 18px 0 0 !important;      /* cantos de cima */
    overflow: hidden;
    margin: 0 !important;
  }

  /* Parte de baixo (nav) — fecha a moldura */
  #problems-detected .pd-mobile-nav{
    background: #FDFCFF !important;
    background-image: none !important;
    border: 1px solid #E8E3F2 !important;
    border-top: 0 !important;                     /* liga à grelha */
    border-radius: 0 0 18px 18px !important;      /* cantos de baixo */
    margin: 0 !important;
    padding: 12px 16px;                            /* como preferires */
    display: block;
    width: 100%;
    box-shadow: none !important;
  }

  /* Remove qualquer separador/linha perdida entre as duas partes */
  #problems-detected .pd-grid + .pd-mobile-nav::before,
  #problems-detected .pd-grid + .pd-mobile-nav::after{
    content: none !important;
  }
}
/* MOBILE — topo reto, base arredondada */
@media (max-width: 640px) {
  /* parte de cima do cartão */
  #problems-detected .pd-grid{
    background: #FDFCFF !important;
    border: 1px solid #E8E3F2 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;                 /* topo reto */
    overflow: hidden;
    margin: 0 !important;
  }

  /* parte de baixo do cartão */
  #problems-detected .pd-mobile-nav{
    background: #FDFCFF !important;
    border: 1px solid #E8E3F2 !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;     /* só em baixo arredondado */
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* se algum outro elemento tiver raio no topo, anula */
  #problems-detected,
  #problems-detected .pd,
  #problems-detected .pd-mobile-toggle {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

/* MOBILE — barra com apenas os cantos de cima arredondados */
@media (max-width: 640px) {
  #problems-detected .pd-mobile-toggle{
    background: #FDFCFF !important;
    background-image: none !important;
    border: 1px solid #E8E3F2 !important;
    border-bottom: 0 !important;               /* liga com a grelha */
    border-top-left-radius: 14px !important;   /* só em cima arredondado */
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 0 !important;   /* em baixo reto */
    border-bottom-right-radius: 0 !important;
    overflow: visible !important;              /* evita “curvar” o fundo */
  }

  /* grelha: topo reto para encaixar na barra */
  #problems-detected .pd-grid{
    background: #FDFCFF !important;
    border: 1px solid #E8E3F2 !important;
    border-top: 1px solid #E8E3F2 !important;
    border-radius: 0 !important;               /* topo reto */
    margin: 0 !important;
  }

  /* navegação: só os cantos de baixo arredondados */
  #problems-detected .pd-mobile-nav{
    background: #FDFCFF !important;
    border: 1px solid #E8E3F2 !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
  }

  /* mata quaisquer pseudo-elementos que possam “curvar” a base */
  #problems-detected .pd-mobile-toggle::before,
  #problems-detected .pd-mobile-toggle::after{ content: none !important; }
}

/* ================================
   INTERMÉDIOS (641–1024px) = DESKTOP
   Cola este bloco NO FIM do CSS
================================ */
@media (min-width:641px) and (max-width:1024px){

  /* ——— Layout base & containers ——— */
  .ky .case-section,
  .ky .ky-sec{ text-align:center; }

  /* HERO/IMAGENS mantêm como desktop (já ok) */

  /* ——— Solution grid: 3 colunas como desktop ——— */
  .ky .solution-grid{
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
    gap: 18px !important;
  }

  /* ——— Project Info: 4 colunas como desktop ——— */
  .ky-project-info{
    grid-template-columns: 1fr 1fr 1fr 1.4fr !important;
    row-gap: 0 !important;
    column-gap: clamp(72px, 8.5vw, 120px) !important;
  }
  .ky-project-info .info-item::after{ display:block !important; }

  /* ——— Accordions (Empathize columns): 2 colunas desktop ——— */
  .ky .ky-accordion-columns{
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 24px !important;
  }

  /* ——— DEFINE: Tabs + Painel estilo desktop ——— */
  /* já tinhas visual desktop; só garantimos que NÃO caem para “mobile” */
  #define .ky-def-tabs{
    border: 1px solid #E7E0FB !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background:#F6F3FF !important;
  }
  #define .ky-def-panel{
    border:1px solid #E7E0FB !important;
    border-top:0 !important;
    border-radius:0 0 16px 16px !important;
    padding:0 !important;
  }

  /* ——— Persona: grelha de 3 colunas (Needs|Avatar|Frustrations) ——— */
  .ky .ky-persona-grid,
  .ky .ky-persona-grid--3{
    display:grid !important;
    grid-template-columns: 1fr 240px 1fr !important;
    gap: 24px !important;
    justify-items: stretch !important;
  }
  .ky .ky-avatar{ align-items:center !important; }

  /* ——— Personality bars, Empathy Map mantêm desktop ——— */
  .ky .ky-empathy{ grid-template-columns: 1fr 1fr !important; }

  /* ——— Problems Detected: forçar versão desktop ——— */
  .pd-mobile-toggle,
  .pd-mobile-nav{ display:none !important; }
  .pd-head{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    margin:10px 0 12px !important;
    text-align:center !important;
  }
  .pd-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    column-gap:0 !important;
    row-gap:16px !important;
    position:relative !important;
  }
  /* .pd-row deixa de ser “stage mobile” */
  .pd-row{ display:contents !important; }
  /* pills desktop */
  .pd-grid > .pd-cell{
    padding:18px 22px !important;
    border-radius:0 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.04) !important;
  }
  .pd-grid > .pd-cell:nth-child(3n+1){ border-radius:28px 0 0 28px !important; }
  .pd-grid > .pd-cell:nth-child(3n+2){ border-radius:0 !important; }
  .pd-grid > .pd-cell:nth-child(3n)  { border-radius:0 28px 28px 0 !important; }

  /* ——— IDEATE (IA): voltar ao comportamento desktop ——— */
  .ky-ia .ia-wires{ display:block !important; }
  .ky-ia .ia-stage::before{ display:block !important; }  /* manter 16:9 */
  .ky-ia .ia-canvas{
    position:absolute !important;
    inset:0 !important;
    transform:none !important;
    display:block !important;
  }

  /* ——— Wireframes: duas colunas como desktop “tablet largo” ——— */
  .ky-wireframes .wf-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 18px !important;
  }

  /* ——— DESIGN PROCESS: imagem (desktop), esconder tabela ——— */
  .ky-process-figure    { display:block !important; }
  .ky-process-table-wrap{ display:none  !important; }

  /* ——— Carrossel (Design): manter comportamento desktop ——— */
  .ky-design .mkc-panel{ border-top:0 !important; }
  .ky-design .ky-carousel .kc-stage{
    background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.04);
    border-radius:12px;
    height: var(--stage-h) !important;
  }
  /* slides “mobile mockup” NÃO forçam o scaling de mobile */
  .ky-design .ky-carousel--mobile .kc-slide{ padding: clamp(8px, 2vw, 18px) !important; }
  .ky-design .ky-carousel--mobile .kc-slide img{
    max-height: 86% !important;
    max-width: 36% !important;
    object-fit: contain !important;
  }

  /* ——— TEST (Usability Findings): cards como desktop (sem acordeão) ——— */
  .ky #test .uf-card > summary{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0;
    overflow:hidden; clip: rect(0,0,0,0);
  }
  .ky #test .uf-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap: clamp(12px, 1.6vw, 18px) !important;
  }
  .ky #test .uf-card{
    flex: 0 0 360px !important;
    max-width:360px !important;
  }

  /* ——— Closing: igual ao desktop ——— */
  .ky .closing .whats-next.tiles{
    grid-template-columns: repeat(3, minmax(220px,1fr)) !important;
  }

  /* ——— Botões / tabs / accordions: estados de desktop (hover permitido) ——— */
  /* (nada a mudar aqui se já tens os :hover/active sob (hover:hover)) */

  /* ——— Reforço: esconder quaisquer peças ONLY-mobile no intervalo ——— */
  /* se tiveres classes auxiliares .m-only / .t-only, usa-as: */
  .m-only { display: none !important; }
  .t-only-desktop { display: block !important; }
}

/* IA (MOBILE): remover a linha interior quebrada */
@media (max-width:640px){

  /* Pseudo-elementos decorativos que desenham o traço interno */
  .ky-ia .ia-stage::after,
  .ky-ia .ia-board::before,
  .ky-ia .ia-board::after,
  .ky-ia .ia-frame::before,
  .ky-ia .ia-frame::after,
  .ky-ia .ia-outline,
  .ky-ia .ia-inner-line{
    display: none !important;
    content: none !important;
  }

  /* Caso a linha venha de um inset box-shadow/border */
  .ky-ia .ia-stage,
  .ky-ia .ia-board,
  .ky-ia .ia-frame{
    box-shadow: none !important;          /* remove “risco” interno se for inset */
    border: 0 !important;                 /* ignora borda interna, se existir */
  }

  /* Mantém o ratio do canvas (não mexer no ::before que define 16:9) */
  .ky-ia .ia-stage::before{
    display: block !important;
  }
}

  //* BARRA INFO IGUAL IMAGEM PRINCIPAL * //

.case-detail.ky {
  position: relative;
}

.ky-project-info {
  box-sizing: border-box;
  /* width/height continuam a ser controlados via JS se usares o script */
  background: #FDFCFF;
  color: #0f172a;                 /* antes #fff — corrige contraste */
  border-radius: 12px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* desktop: 4 colunas */
  gap: 24px 32px;                 /* row-gap / column-gap */
  align-content: center;
  transition: width .2s ease, height .2s ease, margin .2s ease;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0 !important;          /* remove quaisquer divisores */
  position: relative;
}

.info-label {
  opacity: 0.7;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roles .role-line {
  display: inline-flex;
  gap: 6px;
}

/* ===== Responsivo ===== */
/* Tablet e mobile: 2 colunas */
@media (max-width: 900px) {
  .ky-project-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mantém 2 colunas mesmo em ecrãs muito pequenos */
@media (max-width: 560px) {
  .ky-project-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ky-project-info .info-item {
    grid-column: auto / span 1 !important;
  }
}

/* Garantir imagem a full width */
.case-cover .cover-fig { margin: 0; }
.case-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mata pseudo-elementos que porventura criavam linhas */
.ky-project-info .info-item::before,
.ky-project-info .info-item::after {
  content: none !important;
}

/* PROBLEMS DETECTED — TABLET = IGUAL AO DESKTOP (3 colunas) */

/* PROBLEMS DETECTED — TABLET = DESKTOP (3 colunas) + PILLS */
@media (min-width: 561px) and (max-width: 1024px) {

  /* Esconde controlos mobile; mostra header desktop */
  .pd .pd-mobile-toggle,
  .pd .pd-mobile-nav { display: none !important; }

  .pd .pd-head{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    margin:10px 0 12px !important;
    text-align:center !important;
    align-items:center;
    font-size:.95rem !important;        /* ligeiramente menor */
  }

  /* Grelha desktop */
  .pd .pd-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    column-gap:16px !important;         /* espaço entre pills */
    row-gap:14px !important;
    position:relative !important;
  }

  /* Cada linha ocupa 3 células */
  .pd .pd-row{ display:contents !important; }

  /* === PILLS (em todas as células) === */
  .pd .pd-cell{
    display:block !important;
    padding:14px 18px !important;
    border-radius:9999px !important;    /* pill real */
    box-shadow:0 4px 12px rgba(0,0,0,.04) !important;
    font-size:.95rem !important;
    line-height:1.35 !important;
    background-clip:padding-box;        /* borda limpa */
  }

  /* Anula qualquer arredondamento selectivo do desktop */
  .pd .pd-grid > .pd-cell:nth-child(3n+1),
  .pd .pd-grid > .pd-cell:nth-child(3n+2),
  .pd .pd-grid > .pd-cell:nth-child(3n){
    border-radius:9999px !important;
  }
}

/* === REMOVER MOLDURA DO DESIGN PROCESS === */
.ky-process-card{
  /* só cria respiro lateral; nada de moldura */
  padding-inline: clamp(16px, 4vw, 40px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ky-process-figure{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
}

.ky-process-figure img{
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ===== Regra geral: corta margens default e evita espaços duplos ===== */
:where(h1,h2,h3,h4,p,figure){ margin:0; }                    /* zera defaults */
:where(section) > :first-child{ margin-top:0 !important; }   /* nada em cima  */
:where(section) > :last-child { margin-bottom:0 !important;} /* nada em baixo */
:where(section) + :where(section){                           /* espaçamento entre secções */
  margin-top: clamp(12px, 2.5vw, 24px);
}

/* Tipografia um pouco mais justa */
p{ line-height:1.45; }

/* ===== 1) DESIGN PROCESS ===== */
.ky-process-card{ padding-block: 8px !important; }           /* menos respiro vertical */
.ky-process-figure{ margin: 8px 0 !important; }              /* menos espaço em volta */

/* Se tiveres um wrapper da secção (ajusta o seletor se for outro id/classe) */
#design-process h2{ margin-bottom: 8px !important; }
#design-process p.lead,
#design-process .section-desc{ margin-bottom: 12px !important; line-height:1.45; }

/* ===== 2) PROBLEMS DETECTED ===== */
.pd .pd-mobile-toggle{ margin: 6px 0 !important; }
.pd .pd-grid{ padding-top: 6px !important; }
.pd .pd-row{ margin: 10px 0 !important; }                    /* menos espaço entre pills */
.pd .pd-cell{ padding: 12px 16px !important; border-radius: 22px !important; }
.pd .pd-mobile-nav{ margin: 6px 0 8px !important; }

/* ===== 3) BARRA DE INFO (ky-project-info) ===== */
.ky-project-info{
  padding: 16px !important;   /* antes 24px */
  gap: 16px !important;       /* antes 24px/32px */
}
.ky-project-info .info-item{ gap: 4px !important; }

/* ===== 4) “anti-escadinha” — elimina margens duplicadas entre irmãos ===== */
:where(.ky-process-card, .pd, .ky-project-info) + :where(.ky-process-card, .pd, .ky-project-info){
  margin-top: clamp(12px, 2vw, 20px);
}

/* === EMPATHY MAP — ALTURAS IGUAIS + CARTÕES UNIFORMES (PATCH CIRÚRGICO) === */
/* 1) Garante que a grelha estica os filhos por igual */
#define .ky-empathy{
  align-items: stretch !important; /* estica as células do grid/flex */
}

/* 2) Cartões com mesma “casca” e altura controlada */
#define .ky-empathy .em-blk{
  background:#FFFFFF !important;
  border:1px solid var(--lav, #BE99E1) !important;
  border-radius:16px !important;
  box-shadow:none !important;

  /* chave para igualar alturas */
  height:100% !important;         /* ocupa toda a célula */
  min-height: var(--em-min, 280px);/* altura mínima comum (desktop) */
  display:flex !important;         /* conteúdo interno consistente */
  flex-direction:column !important;
}

/* 3) Conteúdo interno não “explode” o cartão */
#define .ky-empathy .em-blk > *{
  min-height: 0 !important;  /* permite scroll interno se necessário */
  overflow: hidden;          /* evita vazamentos */
}

/* 4) Responsivo: alturas mínimas por breakpoint (ajusta se quiseres) */
@media (max-width: 640px){
  #define .ky-empathy .em-blk{ min-height: 220px !important; }
}
@media (min-width: 641px) and (max-width: 1024px){
  #define .ky-empathy .em-blk{ min-height: 260px !important; }
}
/* desktop largo mantém o default: 280px (definido acima) */

/* === EMPATHY MAP — alinhamento perfeito (2×2) + alturas iguais === */
#define .ky-empathy{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 18px 24px !important;
  align-items: stretch !important;   /* cada célula com mesma altura */
}

/* Cartões: preencher a célula e não “crescer” por margens internas */
#define .ky-empathy .em-blk{
  height: 100% !important;           /* iguala a altura dos 4 */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  margin: 0 !important;              /* remove variações invisíveis */
}

/* Tipografia interna consistente (evita “dente” em baixo) */
#define .ky-empathy .em-blk > :first-child{ margin-top: 0 !important; }
#define .ky-empathy .em-blk > :last-child{ margin-bottom: 0 !important; }
#define .ky-empathy .em-blk p,
#define .ky-empathy .em-blk ul{ margin: 10px 0 !important; }
#define .ky-empathy .em-blk h4{ margin: 8px 0 12px !important; }

/* Mobile: empilha em 1 coluna, mantendo cartão cheio da célula */
@media (max-width:900px){
  #define .ky-empathy{ grid-template-columns: 1fr !important; }
}


/* =======================
   PROBLEM DETECTED · RESOLUÇÃO
   ======================= */
.pd{
  --pd-gap: 18px;            /* espaço total entre pills (o chevron fica no meio) */
  --pd-gutter: 14px;         /* folga lateral dentro da moldura */
  --pd-line: #E7E0FB;        /* cor da linha do quadro */
}

/* =======================
   PD · MOBILE/TABLET (≤900px)
   ======================= */
@media (max-width: 900px){

  /* 1) BARRA: centralizada, com folga lateral e sem “cortar” o glow */
  .pd .pd-mobile-toggle{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px var(--pd-gutter) !important;
    gap: 0 !important;               /* o espaçamento é dado pelas margens dos botões */
    overflow: visible !important;
    position: relative !important;
    border-bottom: 0 !important;     /* a linha vem do pseudo-elemento abaixo */
    margin-bottom: 0 !important;
  }

  /* 2) LINHA CONTÍNUA: fica exatamente na junção com o quadro */
  .pd .pd-mobile-toggle::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:1px;
    background: var(--pd-line);
    pointer-events:none;
    z-index: 5;
  }

  /* 3) QUADRO: “agarra” a linha da barra (sem intervalo) */
  .pd .pd-grid{
    border-top: 1px solid var(--pd-line) !important;
    margin-top: -1px !important;
  }

  /* 4) PILLS: texto normal (sem negrito), tamanho compacto e margens simétricas */
  .pd .pd-mobile-toggle button{
    font-weight: 400 !important;           /* sem negrito */
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-radius: 9999px !important;
    flex: 0 0 auto !important;
    position: relative;
    z-index: 4;                             /* abaixo do chevron */
    margin-inline: calc(var(--pd-gap) / 2) !important; /* === espaçamento igual nos dois lados === */
  }

  /* 5) CHEVRON: sempre centrado no MEIO do espaço entre as pills */
  .pd .pd-mobile-toggle button + button::before{
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--pd-gap) / 2);     /* meio do “gap” */
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23876BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 6;                               /* acima do glow da ativa */
    opacity: .9;
  }

  /* 6) CONTEÚDO DA TABELA: todo o texto normal (sem negrito) */
  .pd .pd-cell,
  .pd .pd-cell *{
    font-weight: 400 !important;
  }
}

/* =======================
   PD · MOBILE (≤640px) – ajusta um pouco o scale e tamanhos
   ======================= */
@media (max-width: 640px){
  .pd{ --pd-gap: 16px; --pd-gutter: 12px; }   /* ligeiramente mais compacto */

  .pd .pd-mobile-toggle button{
    font-size: 13.5px !important;
    padding: 7px 11px !important;
  }
}

/* === Respiro entre chevron e pills (mobile/tablet) === */
@media (max-width: 900px){
  /* controla o “respiro” extra em volta do chevron */
  .pd{ --pd-breath: 4px; } /* ajusta para 3–6px se quiseres mais/menos espaço */

  /* cada pill ganha uma margem ligeiramente maior e simétrica */
  .pd .pd-mobile-toggle button{
    margin-inline: calc(var(--pd-gap)/2 + var(--pd-breath)/2) !important;
  }

  /* o chevron mantém-se perfeitamente centrado entre as pills */
  .pd .pd-mobile-toggle button + button::before{
    left: calc(-1 * (var(--pd-gap)/2 + var(--pd-breath)/2));
  }

  /* (opcional) se o glow da ativa ainda “beijar” o chevron, contém um pouco */
  .pd .pd-mobile-toggle button.is-active{
    box-shadow: 0 0 0 3px rgba(190,153,225,.26) !important;
  }
}


/* ============== PD · INTERMÉDIO (641–1024px) ============== */
@media (min-width:641px) and (max-width:1024px){

  /* — 0) Garantir APENAS UMA barra — */
  /* Mantém a .pd-mobile-toggle e esconde qualquer outra possível barra */
  .pd .pd-mobile-toggle{ display:flex !important; }
  .pd .pd-tabs,
  .pd .pd-desktop-toggle,
  .pd .pd-menu:not(.pd-mobile-toggle){
    display:none !important;
  }

  /* — 1) Barra com chevron único e respiro igual — */
  .pd .pd-mobile-toggle{
    align-items:center !important;
    gap: clamp(14px, 2vw, 22px) !important;
    padding-inline: clamp(12px, 2.5vw, 20px) !important; /* não toca na moldura */
    position: relative !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    border-bottom: 0 !important; /* a linha vem do grid */
  }
  /* gutters invisíveis nas pontas */
  .pd .pd-mobile-toggle::before,
  .pd .pd-mobile-toggle::after{
    content:"";
    display:block;
    flex: 0 0 clamp(8px, 2vw, 16px);
  }

  .pd .pd-mobile-toggle button{
    font-weight: 600 !important;      /* sem bold pesado */
    font-size: clamp(13px, 1.7vw, 14.5px) !important;
    padding: 8px 14px !important;
    border-radius: 9999px !important;
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }
  /* espaço reservado + chevron único entre pills */
  .pd .pd-mobile-toggle button + button{
    margin-left: clamp(18px, 2.4vw, 24px) !important;
  }
  .pd .pd-mobile-toggle button + button::before{
    content:"";
    position:absolute;
    top:50%;
    left: calc(-1 * clamp(9px, 1.2vw, 12px));
    transform: translate(-50%,-50%);
    width: clamp(12px, 1.6vw, 14px);
    height: clamp(12px, 1.6vw, 14px);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23876BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-repeat:no-repeat;
    pointer-events:none;
    z-index: 3;
  }
  .pd .pd-mobile-toggle button.is-active{
    box-shadow: 0 0 0 3px rgba(190,153,225,.28) !important; /* não beija o chevron */
  }

  /* — 2) Linha do quadro contínua — */
  .pd .pd-grid{
    border-top: 1px solid var(--pd-frame-line, #E7E0FB) !important;
    margin-top: -1px !important; /* une sem intervalo */
  }

  /* — 3) Grid em 3 colunas para não misturar linhas — */
  .pd .pd-grid{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    column-gap: clamp(14px, 2.2vw, 22px) !important;
    row-gap: clamp(14px, 2vw, 20px) !important;
  }

  /* — 4) Texto dos cartões sem negrito — */
  .pd .pd-cell,
  .pd .pd-cell *{
    font-weight: 400 !important;
    line-height: 1.35;
  }

}

/* ============ TABLET (641–1024px) — só barra de ícones + sem moldura ============ */
@media (min-width:641px) and (max-width:1024px){

  /* 1) Esconde a 1ª barra (pills/breadcrumbs) — mantenho seletores redundantes p/ garantir */
  .pd .pd-mobile-toggle,
  .pd .pd-breadcrumb,
  .pd .pd-desktop-toggle,
  .pd .pd-tabs,
  .pd .pd-menu:not(.pd-legend):not(.pd-status-bar){
    display: none !important;
  }

  /* 2) Deixa visível APENAS a barra dos ícones (ajuste o seletor ao teu HTML) */
  .pd .pd-legend,
  .pd .pd-status-bar,
  .pd .pd-legend-row{
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
  }

  /* 3) Remove fundo/bordas/linhas do “quadro/tabela” e da moldura */
  .pd .pd-frame,
  .pd .pd-card,
  .pd .pd-wrapper{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .pd .pd-grid{
    background: transparent !important;
    border: 0 !important;              /* sem linha superior */
    box-shadow: none !important;
    margin-top: 0 !important;
  }

  /* Se houver alguma linha divisória entre barra e grid, elimina */
  .pd .pd-divider,
  .pd .pd-header-line,
  .pd .pd-mobile-toggle::after{
    content: none !important;
    display: none !important;
  }

  /* 4) Grelha consistente em 3 colunas no tablet (não baralha linhas) */
  .pd .pd-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(14px, 2.2vw, 22px) !important;
    row-gap: clamp(14px, 2vw, 20px) !important;
  }

  /* 5) Texto normal (sem negrito) dentro dos cartões */
  .pd .pd-cell,
  .pd .pd-cell *{
    font-weight: 400 !important;
  }
}

/* =========================================================
   1) SEM NEGRITO EM TODA A TABELA (todos os ecrãs)
   ========================================================= */
.pd .pd-grid,
.pd .pd-grid * {
  font-weight: 400 !important; /* texto normal em todas as células/pills */
}

/* =========================================================
   2) DESKTOP — remover só os cantos internos das pills
   (assumindo 3 colunas na grelha)
   ========================================================= */
@media (min-width: 1025px) {

  /* garante grelha de 3 colunas alinhada */
  .pd .pd-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* se quiseres que as pills realmente “encostem”, zera o gap: */
    column-gap: 0 !important;
    row-gap: var(--pd-row-gap, 16px) !important;
  }

  /* raio padrão (para cantos externos) */
  .pd .pd-grid > .pd-cell {
    border-radius: 16px !important;
  }

  /* Coluna 1 (esquerda): tira cantos direitos (internos) */
  .pd .pd-grid > .pd-cell:nth-child(3n + 1) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* Coluna 2 (meio): tira todos os cantos (só internos) */
  .pd .pd-grid > .pd-cell:nth-child(3n + 2) {
    border-radius: 0 !important;
  }

  /* Coluna 3 (direita): tira cantos esquerdos (internos) */
  .pd .pd-grid > .pd-cell:nth-child(3n) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

/* ========== PD · AJUSTES GERAIS ========== */
/* Tira negrito de TODO o conteúdo da tabela (qualquer ecrã) */
.pd .pd-grid,
.pd .pd-grid * ,
.pd .pd-section-tabs,
.pd .pd-section-tabs * ,
.pd .pd-mobile-toggle,
.pd .pd-mobile-toggle * {
  font-weight: 400 !important;
}

/* ========== PD · INTERMÉDIO (entre mobile e tablet) ========== */
/* Mostra **apenas** a barra dos ícones; remove fundo/contorno do quadro */
@media (min-width: 641px) and (max-width: 1024px){

  /* 1) Esconder a barra superior de *pills* (a de texto) */
  .pd .pd-mobile-toggle,
  .pd .pd-breadcrumbs,
  .pd .pd-desktop-toggle {
    display: none !important;
  }

  /* 2) Garantir que a barra de ícones fica visível */
  .pd .pd-section-tabs{
    display: flex !important;
  }

  /* 3) Retirar fundo e contornos do “quadro/tabela” nesta transição */
  .pd,
  .pd .pd-frame,
  .pd .pd-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Remove também qualquer linha de junção entre header e grid */
  .pd .pd-section-tabs::after,
  .pd .pd-mobile-toggle::after,
  .pd .pd-grid::before,
  .pd .pd-grid::after {
    content: none !important;
  }
}


/* ——— SEM NEGRITO EM TODA A TABELA (todas as larguras) ——— */
.pd .pd-grid,
.pd .pd-grid * {
  font-weight: 400 !important;
}

/* ——— FAIXA INTERMÉDIA (já se comporta como TABLET) ——— */
@media (min-width:641px) and (max-width:1200px){

  /* 1) Esconder a PRIMEIRA barra do header (a textual com “Problem • Impact • Opportunity”) */
  .pd .pd-header > *:first-child {
    display: none !important;
  }

  /* 2) Garantir que a barra de ícones fica e sem “cascas” */
  .pd .pd-header > .pd-section-tabs {
    display: flex !important;
    margin: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 3) Remover fundo/contorno/linha do quadro nessa faixa */
  .pd,
  .pd .pd-frame,
  .pd .pd-board,
  .pd .pd-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .pd .pd-frame::before,
  .pd .pd-frame::after,
  .pd .pd-grid::before,
  .pd .pd-grid::after {
    content: none !important;
  }

  /* 4) Ajuste fino de espaçamento superior (evita a “linha solta”) */
  .pd .pd-frame { padding-top: 0 !important; }
  .pd .pd-grid  { margin-top: 0 !important; }
}


/* ===== APAGAR FUNDO/CONTORNO DO QUADRO · 560–640px ===== */
@media (min-width:560px) and (max-width:640px){

  /* 1) a linha que vem do mobile */
  .pd .pd-mobile-toggle::after{ content:none !important; display:none !important; }

  /* 2) a borda do quadro aplicada na grid */
  .pd .pd-grid{
    border: 0 !important;
    border-top: 0 !important;
    border-color: transparent !important;   /* mata qualquer cor residual */
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    margin-top: 0 !important;
  }

  /* 3) wrappers comuns do quadro */
  .pd .pd-frame,
  .pd .pd-board,
  .pd .pd-wrapper,
  .pd .pd-container,
  .pd .pd-card{
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  .pd .pd-frame::before, .pd .pd-frame::after,
  .pd .pd-board::before, .pd .pd-board::after{ content:none !important; }

  /* 4) CASO A GRID SEJA UMA TABELA: limpa fundo/linhas de table/thead/tbody/tr */
  .pd table,
  .pd table thead,
  .pd table tbody,
  .pd table tr{
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* 5) se a borda vier de “border-collapse”, neutraliza */
  .pd table{ border-collapse: separate !important; border-spacing: 0 !important; }

  /* 6) garante que só a barra de ícones fica visível */
  .pd .pd-mobile-toggle,
  .pd .pd-breadcrumb, .pd .pd-breadcrumbs,
  .pd .pd-desktop-toggle, .pd .pd-tabs,
  .pd .pd-menu:not(.pd-section-tabs){ display:none !important; }
  .pd .pd-section-tabs{ display:flex !important; }
}

  /* PILLS IMPACT E OUTCOME MENOS ARREDONDADAS */

/* 1) Garantir que NADA dentro das pills fica a negrito */
.value-pills, 
.value-pills * {
  font-weight: 400 !important;  /* vence qualquer 600/700 vindo do tema */
}

/* 2) Base (desktop): super arredondadas */
.value-pills .pill,
.value-pills .pill::before,
.value-pills .pill::after {
  border-radius: 9999px !important;
  border: 1px solid #cdb9ff;
  background: #fff;
  padding: 16px 22px;
}

/* Labels (sem bold) */
.value-pills .lbl {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  opacity: 0.9;
  margin-bottom: 4px;
}

/* 3) Tablet e abaixo: menos arredondadas */
@media (max-width: 1024px) {
  .value-pills .pill,
  .value-pills .pill::before,
  .value-pills .pill::after {
    border-radius: 18px !important;
  }
}

/* 4) Mobile: ainda menos arredondadas + ajuste de padding */
@media (max-width: 640px) {
  .value-pills .pill,
  .value-pills .pill::before,
  .value-pills .pill::after {
    border-radius: 14px !important;
  }
  .value-pills .pill { 
    padding: 14px 18px;
  }
}

/* estilo base do card */
.ky-avatar{
  display:flex;
  align-items:center;
  gap: 1rem;
  max-width: 720px;        /* opcional: limita a largura do card */
  margin-inline: auto;     /* <-- centraliza o card na linha */
}

.ky-avatar__img{
  width: 160px;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  flex: 0 0 160px;
}

.ky-meta{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* mobile / tablet: empilha e centraliza conteúdo */
@media (max-width: 1024px){
  .ky-avatar{
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .ky-avatar__img{
    margin: 0 auto;        /* garante que a foto não “puxe” para a esquerda */
  }
}
/* avatar SEMPRE quadrado + recorte circular */
.ky-avatar__img{
  --size: 160px;            /* ajuste conforme quiser */
  width: var(--size);
  aspect-ratio: 1 / 1;      /* trava 1:1 mesmo se tentarem esticar */
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex: none;               /* evita alongar no flex */
}

/* mobile/tablet: pode reduzir o tamanho e centralizar */
@media (max-width: 1024px){
  .ky-avatar__img{
    --size: 140px;
    margin: 0 auto;
  }
}





/* ============================
   easyAir (prefixo air-)
   Paleta: #FF6600, #FFA366, #FFFFFF, #B8B6B6, #CCCBCB, #D9D9D9, #272222
============================ */
:root{
  --air-brand:#FF6600;
  --air-brand-2:#FFA366;
  --air-ink:#272222;
  --air-soft:#D9D9D9;
  --air-card:#FFF9F4;      /* tom suave p/ info bar */
  --air-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* ===== Base da página ===== */
.air-case{ padding-bottom:96px; position:relative; }
.air-hero{ text-align:center; padding:64px 16px 12px; }    /* topo reduzido */
.air-teaser{ max-width:980px; margin:18px auto 34px; color:#444; line-height:1.7; }

/* logo simples (se usado) */
.air-logo{
  display:inline-block; padding:14px 26px; border-radius:14px;
  background:var(--air-brand); color:#fff; font-weight:800; font-size:38px;
  letter-spacing:.5px; box-shadow:var(--air-shadow);
}

/* Secções de texto */
.air-section{ max-width:1100px; margin:28px auto; padding:0 16px; }
.air-kicker{
  display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--air-brand); margin-bottom:6px;
}
.air-section h2{ margin:0 0 10px; font-size:28px; font-weight:500; color:var(--air-ink); }
.air-section p{ color:#444; margin:0 0 8px; line-height:1.7; }

/* ===== Imagens RESPONSIVAS ===== */
/* Hero */
.air-hero-figure{ max-width:1100px; margin:0 auto 12px; padding:0 16px; }
.air-hero-figure img{ width:100%; height:auto; display:block; border-radius:18px; }

/* Figura genérica (ex.: Design Process desktop) */
.air-dp-figure{ max-width:1100px; margin:14px auto 26px; padding:0 16px; }
.air-dp-figure img{ width:100%; height:auto; display:block; border-radius:18px; }

/* Placeholders cinza (se ainda precisares em alguma secção) */
.air-img-block{ max-width:1100px; margin:22px auto; padding:0 16px; }
.air-img-block::before{
  content:''; display:block; width:100%; aspect-ratio:16/9; border-radius:18px;
  background:linear-gradient(#efefef,#eeeeee);
  box-shadow:var(--air-shadow), inset 0 0 0 1px rgba(0,0,0,.04);
}
.air-img-block.is-tall::before{ aspect-ratio:3/4; }
.air-img-block.is-ultra::before{ aspect-ratio:21/9; }

/* ===== Info bar (logo + dados) ===== */
.air-info-bar{
  background: #EEEEEE;      /* claro e sem outline */
  border:none !important;
  box-shadow:none;
  border-radius:16px;
  max-width:1100px;
  margin:26px auto 22px;
  padding:26px 18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.air-info-item h4{
  font-size:12px; letter-spacing:.6px; color:var(--air-brand);
  text-transform:uppercase; margin:0 0 10px; font-weight:600;
}
.air-info-item p{ margin:0; color:#222; line-height:1.6; }

/* ===== CTA (igual ao Lifeasier; prefixo air-) ===== */
.air-cta{ text-align:center; margin:56px 0 90px; position:relative; z-index:0; }
.air-cta__inner{
  max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; justify-content:center; align-items:center;
}
.air-cta__btn{
  display:inline-block; border:none; text-decoration:none; cursor:pointer;
  font-family:"Akatab",sans-serif; font-weight:400; font-size:16px; letter-spacing:2px;
  color:#fff; background:#6A5340; padding:10px 18px; border-radius:10px;
  transition: letter-spacing .4s, background-color .2s ease, transform .2s ease;
}
.air-cta__btn:hover{ background:#8cb258; color:#fff; letter-spacing:4px; }
.air-cta__btn:active{ background:#75924c; }

/* =========================
  EASYAIR
  
  DESIGN PROCESS (novo)
   Desktop = imagem ampla
   Mobile  = cartões legíveis
========================= */

/* Quando o figure tiver imagem real, esconder o placeholder */
.air-img-block.has-img::before{ display:none; }

/* Imagem da hero responsiva */
.air-img-block.has-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow: var(--air-shadow);
}


/* Figura desktop/tablet */
.air-media{
  max-width: 1100px;
  margin: 14px auto 26px;
  padding: 0 16px;
}
.air-media__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Lista mobile (por defeito escondida em desktop) */
.air-process-mobile{
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 0 16px;
  display: grid;
  gap: 12px;
}

/* Cartões mobile */
.air-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: #FFF4EC;                    /* pêssego claro */
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.air-step__icon{
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
}
.air-step__title{
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: #222;
}
.air-step__desc{
  margin: 0;
  opacity: .9;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

/* —— Breakpoints —— */
/* Desktop/Tablet: mostra imagem, esconde cartões */
@media (min-width: 900px){
  .air-process-mobile{ display: none; }
}

/* Mobile: esconde imagem, mostra cartões */
@media (max-width: 899px){
  .air-media--desktop{ display: none; }
}

/* Legibilidade mobile um pouco maior */
@media (max-width: 640px){
  .air-step{ padding: 18px 16px; gap: 12px; }
  .air-step__icon{ width: 44px; height: 44px; }
  .air-step__title{ font-size: 17px; }
  .air-step__desc{ font-size: 14.5px; }
}

/* ---- (OPCIONAL) Anula estilos antigos, se ainda existirem no CSS ---- */
.air-dp-figure, .air-steps { display: none !important; }


/* ===== easyAir CTA bottom spacing fix ===== */
.air-cta{
  margin: 56px 0 160px !important;   /* + espaço antes do footer */
}

@media (max-width: 768px){
  .air-cta{
    margin: 44px 0 160px !important; /* extra respiro no mobile */
  }
}

/* garante que o main não corta o espaçamento final */
.air-case{ padding-bottom: 160px; }

/* ===== Research cards — sem imagens ===== */
:root{
  --air-bg: #0f0f10;
  --air-text: #e9e7e4;
  --air-muted: #b9b3ab;
  --air-card: #161617;
  --air-border: #29292b;
  --air-orange: #ff8a3d;
  --air-orange-2: #ff7a00;
  --air-gray: #e6e6e6;
  --air-gray-text: #202124;
  --air-peach: #ffd2b3;
  --air-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.air-research{
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.air-research-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.5vw, 22px);
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(8px, 3vw, 12px);
}

@media (min-width: 720px){
  .air-research-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .air-research-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Cards */
.air-card{
  background: var(--air-card);
  border: 1px solid var(--air-border);
  border-radius: 18px;
  box-shadow: var(--air-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Speech-bubble header (puro CSS) */
.air-bubble{
  position: relative;
  font-weight: 700;
  line-height: 1.25;
  padding: clamp(12px, 2.2vw, 18px) clamp(14px, 2.5vw, 22px);
  border-bottom: 1px solid var(--air-border);
  font-size: clamp(1rem, 2.8vw, 1.1rem);
  color: #1a1a1a;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.air-bubble::after{
  content: "";
  position: absolute;
  left: clamp(18px, 5vw, 28px);
  bottom: -10px;
  width: 18px; height: 18px;
  background: inherit;
  border-right: 1px solid var(--air-border);
  border-bottom: 1px solid var(--air-border);
  transform: rotate(45deg);
}

/* Bubble color variants */
.air-bubble--orange{ background: linear-gradient(0deg, var(--air-orange) 0%, var(--air-orange-2) 100%); }
.air-bubble--gray{ background: var(--air-gray); color: var(--air-gray-text); }
.air-bubble--peach{ background: var(--air-peach); }

.air-card__body{
  padding: clamp(14px, 3vw, 20px) clamp(14px, 3vw, 20px) clamp(16px, 3vw, 22px);
  color: var(--air-text);
}

/* Quotes */
.air-quote{
  margin: 0 0 clamp(12px, 2.5vw, 16px) 0;
}
.air-quote:last-child{ margin-bottom: 0; }

.air-quote blockquote{
  margin: 0;
  font-style: italic;
  line-height: 1.55;
  font-size: clamp(.95rem, 2.5vw, 1.02rem);
  color: var(--air-text);
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--air-border);
  border-radius: 12px;
  padding: clamp(10px, 2.2vw, 14px) clamp(12px, 2.5vw, 16px);
  position: relative;
}
.air-quote blockquote::before{
  content: "“";
  position: absolute;
  top: -8px; left: 10px;
  font-size: 28px; line-height: 1;
  opacity: .25;
}
.air-quote__author{
  font-weight: 700;
  color: var(--air-text);
}
.air-quote figcaption{
  margin-top: 6px;
  font-size: clamp(.82rem, 2vw, .9rem);
  color: var(--air-muted);
}

/* Motion (opcional, suave) */
@media (prefers-reduced-motion: no-preference){
  .air-card{ transition: transform .22s ease, box-shadow .22s ease; }
  .air-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
}

/* Alto contraste para quem usa tema claro global */
@media (prefers-color-scheme: light){
  .air-card{ background: #fff; border-color: #e9e9ea; }
  .air-quote blockquote{ background: #fafafa; border-color: #e9e9ea; color: #1d1f23; }
  .air-quote__author{ color: #1d1f23; }
}

/* ===== overrides  ===== */

/* paleta mais suave */
:root{
  --air-bubble-bg: #ff9a4d;        /* laranja ligeiramente menos forte  */
  --air-bubble-stroke: #ead8cc;    /* linha do balão bem suave          */
}

/* grid centrado e com colunas fluídas */
.air-research-grid{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  /* auto-fit centra naturalmente quando sobram espaços */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  place-content: center;
}

/* todos os balões com a MESMA cor laranja suave */
.air-bubble,
.air-bubble--gray,
.air-bubble--peach{
  background: var(--air-bubble-bg) !important;
  color: #1a1a1a;
  border-bottom: 1px solid var(--air-bubble-stroke) !important;
}

/* triângulo do balão com a mesma borda suave */
.air-bubble::after{
  border-right: 1px solid var(--air-bubble-stroke) !important;
  border-bottom: 1px solid var(--air-bubble-stroke) !important;
}

/* tipografia: negrito mais suave */
.air-bubble{ font-weight: 600; }             /* antes era 700 */
.air-quote__author{ font-weight: 600; }      /* nomes dos autores */
.air-card b, .air-card strong{ font-weight: 600; }

/* opcional: linhas internas dos quotes também mais suaves */
.air-quote blockquote{
  border-color: #eee5de;                     /* tom mais claro */
}

/* ===== Sombras mais suaves no site ===== */

/* Imagens e figuras do case */
.air-img-block,
.air-img-block img,
.air-media,
.air-media__img,
figure img {
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04) !important;
}

/* Caso uses filter: drop-shadow em algum lugar, reduz também */
.air-img-block img,
.air-media__img {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* Bootstrap: reduzir .shadow, .shadow-lg, etc. */
.shadow, .shadow-sm, .shadow-lg, .shadow-none {
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

/* Cartões do projeto (se quiseres que acompanhem a suavização) */
.air-card {
  box-shadow: 0 8px 20px rgba(0,0,0,.10) !important; /* antes era mais forte */
}

/* Opcional: ainda mais leve em mobile */
@media (max-width: 640px){
  .air-img-block,
  .air-img-block img,
  .air-media,
  .air-media__img,
  .shadow, .shadow-lg {
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  }
}

/* Se existirem :hover que aumentam a sombra, neutraliza */
.air-img-block:hover,
.air-img-block img:hover,
.air-media__img:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* === remover caixas/quadros do HERO e DESIGN PROCESS (desktop) === */
.air-img-block,
.air-media {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* tamanhos/margens confortáveis e centrado */
.air-img-block.is-ultra.has-img {        /* HERO */
  max-width: 1200px;                     /* ajusta se quiseres mais/menos largo */
  margin-top: 12px !important;
  margin-bottom: 28px !important;
}

.air-media.air-media--desktop {          /* DESIGN PROCESS (desktop/tablet) */
  max-width: 1100px;
  margin-top: 12px !important;
  margin-bottom: 24px !important;
}

/* imagens “limpas”: sem sombras, sem caixas */
.air-img-block img,
.air-media__img {
  display: block;
  width: 100%;
  height: auto;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;               /* remove drop-shadow */
  border-radius: 18px;                    /* mantém só cantos suaves (muda para 0 se quiseres plano) */
}

/* opcional: se algum estilo global envolver figure img com sombra, neutraliza aqui */
figure img { box-shadow: none !important; filter: none !important; }

/* ===== manter HERO na mesma largura da info bar ===== */

/* 1) define uma largura máxima única para ambos */
:root{
  --air-content-max: 1100px;   /* ajusta aqui se quiseres mais/menos largo */
}

/* 2) aplica a largura e centra */
.air-info-bar,
.air-img-block.is-ultra.has-img{
  max-width: var(--air-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) remove qualquer “stretch” lateral do hero */
.air-img-block.is-ultra.has-img{
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 4) imagem limpa e contida */
.air-img-block.is-ultra.has-img img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 18px;       /* muda para 0 se quiseres cantos retos */
}

/* 5) em ecrãs pequenos, ambos ocupam 100% do content width */
@media (max-width: 768px){
  .air-info-bar,
  .air-img-block.is-ultra.has-img{ max-width: 100% !important; }
}


/* ===================== USER FLOW ===================== */

/* Layout/respiro */
.air-flow{ max-width:1100px; margin:28px auto; padding-inline:clamp(8px,3vw,12px); }
.air-flow__title{ margin:10px 0 12px; padding-top:6px; font-weight:700; }
.flow-card{ background:#fff; border:1px solid #ececef; border-radius:16px; padding:clamp(14px,2.2vw,18px); }

/* ---------- Stepper base (vertical) ---------- */
.stepper{
  /* controla o espaçamento entre pills */
  --step-gap: 34px;

  /* tema default = CURRENT (cinza) */
  --chip-bg:#f7f7f8; --chip-bd:#d7d7d9; --chip-tx:#1d1f23;
  --arrow:#9aa0a6;  /* cor do traço/cabeça */

  display:grid; gap:var(--step-gap);
}
.stepper .step{
  position:relative; list-style:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:48px; padding:12px 16px;
  border-radius:999px; background:var(--chip-bg); border:2px solid var(--chip-bd); color:var(--chip-tx);
  font-weight:600;
  overflow:visible;   /* não corta a seta */
}

/* seta SVG vertical centrada entre cada pill */
.stepper .step::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:100%; margin-top:10px;
  width:14px; height: calc(var(--step-gap) - 10px);
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
}
.stepper .step:last-child::after{ display:none; }

/* ---------- Tema PROPOSED (laranja, texto preto) ---------- */
.stepper.is-accent{
  --chip-bg:#fff7f0; --chip-bd:#ff7f2a; --chip-tx:#1d1f23;
  --arrow:#ff7f2a;
}

/* ---------- Arrows (SVGs percent-encodados) ---------- */
/* Cinza (CURRENT) */
.stepper.is-muted .step::after,
.stepper:not(.is-accent) .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%239aa0a6' stroke-width='3.5'/%3E%3Cpath d='M1,104 L9,104 L5,120 Z' fill='%239aa0a6'/%3E%3C/svg%3E");
}
/* Laranja (PROPOSED) */
.stepper.is-accent .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%23ff7f2a' stroke-width='3.5'/%3E%3Cpath d='M1,104 L9,104 L5,120 Z' fill='%23ff7f2a'/%3E%3C/svg%3E");
}

/* ---------- Responsivo: mantém vertical; podes reduzir gap no mobile se quiser ---------- */
@media (max-width:700px){
  .stepper{ --step-gap: 30px; }
}
/* Linha/ seta MAIS FINA entre as pills (vertical) */

/* Current – cinza */
.stepper.is-muted .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%239aa0a6' stroke-width='2'/%3E%3Cpath d='M2,104 L8,104 L5,118 Z' fill='%239aa0a6'/%3E%3C/svg%3E") !important;
}

/* Proposed – laranja */
.stepper.is-accent .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%23ff7f2a' stroke-width='2'/%3E%3Cpath d='M2,104 L8,104 L5,118 Z' fill='%23ff7f2a'/%3E%3C/svg%3E") !important;
}


/* Título principal mantém destaque */
.air-flow__title{
    text-align: center;
  margin-bottom: 14px;   /* opcional: respiro */
  padding-bottom: 6px;   /* opcional: respiro */
  font-weight: 400;           /* ou 600 se quiseres mais ênfase */
  text-align: center;
}

/* Subtítulos bem leves (Current / Proposed) */
.air-flow__subtitle{
  font-weight: 300 !important;          /* menos “negrito” */
  text-align: center;
  font-synthesis-weight: none;          /* evita bold “simulado” */
  /* Se a tua fonte for variável, isto torna ainda mais leve:
     font-variation-settings: "wght" 300; */
}

/* VIEWPORT com padding lateral para mostrar as vizinhas */
.wf-viewport {
  overflow: hidden;
  padding: 0 10vw;            /* controla quanto “espreita” dos lados */
}

/* Faixa */
.wf-track {
  display: flex;
  gap: 16px;
  padding: 16px 0;            /* sem padding horizontal aqui */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

/* Cada item ocupa parte da largura e alinha ao centro */
.wf-item {
  flex: 0 0 84%;
  scroll-snap-align: center;
}

@media (min-width: 640px)  { .wf-item { flex-basis: 80%; } }  /* tablet */
@media (min-width: 1024px) { .wf-item { flex-basis: 70%; } }  /* desktop */

/* Ajuste dos botões, já que há padding no viewport */
.wf-prev { left: 3vw;  }
.wf-next { right: 3vw; }

/* escopo easyair */
#air-easyair{
  --air-orange:#ff7a00;
  --air-border:#e6e6e6;
  --air-gap:16px;
  --air-radius:14px;
}

/* limpa figure cinza só aqui */
#air-easyair .air-figure{ background:transparent; box-shadow:none; border:0; padding:0; }



/* =========================
   EASYAIR – CAROUSEL (escopo)
   ========================= */
#air-easyair{
  /* Vars do case study */
  --air-orange: #ff7a00;
  --air-border: #e6e6e6;
  --air-gap: 16px;
  --air-radius: 14px;
  /* largura/coluna da secção (ajusta se precisares) */
  --air-max-width: min(1100px, 92%);
}

/* figure alinhada à coluna e sem “bloco cinza” */
#air-easyair .air-figure{
  width: var(--air-max-width);
  margin-inline: auto;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* ===== layout base ===== */
#air-easyair .air-carousel{ position:relative; }

/* viewport é o scroller; sem barra visível */
#air-easyair .air-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 clamp(8px, 2.5vw, 24px);  /* menos respiro lateral p/ caber na coluna */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* esconder scrollbar em todos os browsers */
  -ms-overflow-style: none;     /* IE/Edge antigo */
  scrollbar-width: none;        /* Firefox */
}
#air-easyair .air-viewport::-webkit-scrollbar{ display: none; } /* WebKit */

/* faixa e itens */
#air-easyair .air-track{
  display:flex;
  gap: var(--air-gap);
  padding: 16px 0;
}
#air-easyair .air-item{
  flex: 0 0 92%;
  scroll-snap-align: center;    /* 1 visível (mobile) */
}
@media (min-width:640px){  #air-easyair .air-item{ flex-basis: 48%; } }  /* 2 (tablet) */
@media (min-width:1024px){ #air-easyair .air-item{ flex-basis: 32%; } }  /* 3 (desktop) */

#air-easyair .air-card{
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius);
  background: #fff;
  padding: 10px;
}

/* ===== imagens por completo (sem cortes) ===== */
#air-easyair .air-media{
  height: clamp(240px, 36vw, 520px);
  width: 100%;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#air-easyair .air-media img{
  /* força SEMPRE a caber inteiro, mesmo contra CSS global */
  object-fit: contain !important;
  object-position: center center !important;

  /* evita “zoom” forçado por regras globais */
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;

  -webkit-user-drag: none;
  user-select: none;
}

/* ===== setas ===== */
#air-easyair .air-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 0;
  background: var(--air-orange);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  cursor: pointer;
}
#air-easyair .air-prev{ left: clamp(8px, 1.25vw, 16px); }
#air-easyair .air-next{ right: clamp(8px, 1.25vw, 16px); }
#air-easyair .air-nav svg{ width: 18px; height: 18px; fill: #fff; }

/* ===== dots ===== */
#air-easyair .air-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
#air-easyair .air-dot{
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #ffd9bf;
}
#air-easyair .air-dot.is-active{ background: var(--air-orange); }

/* ===== drag cursor opcional ===== */
#air-easyair .air-viewport.air-grabbing{ cursor: grabbing; }

/* EASYAIR — frame maior para caber tudo sem corte */
#air-easyair .air-media{
  /* +alto que antes: ajusta se quiseres ainda mais */
  height: clamp(320px, 48vw, 680px);
  width: 100%;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#air-easyair .air-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block;
}
#air-easyair .air-nav.is-disabled[disabled]{
  opacity: .45;
  pointer-events: none;  /* garante que não clica */
  box-shadow: none;
}

/* ===== EASYAIR – VALIDATE  ===== */
#air-easyair-validate{
  --air-orange: #ff7a00;             /* laranja do case study */
  --air-orange-200: #ffe0cc;
  --air-teal: #0d6b63;
  --air-bg: #ffffff;
  --air-muted: #6b7280;
  --air-border: #e8e8e8;
  --air-radius: 16px;
  --air-gap: 20px;
  --air-maxw: min(1100px, 92%);
  color: #111;
}

/* Alinhamento com a coluna do site */
#air-easyair-validate .air-section,
#air-easyair-validate .air-feedback,
#air-easyair-validate .air-outcomes{
  width: var(--air-maxw);
  margin-inline: auto;
}

/* ===== Títulos ===== */

/* 1) Prototype Testing & Peer Feedback — igual aos outros subtítulos:
      alinhado à esquerda e sem negrito pesado */
#air-easyair-validate .air-section h2{
  text-align: left;
  font-weight: 400;                 /* sem bold pesado, igual aos subtítulos anteriores */
  letter-spacing: .01em;
  line-height: 1.2;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin: 0 0 clamp(12px, 2vw, 18px);
  color: #111;
}

/* === FIX: títulos dos blocos em Validate iguais ao "User Flow Redesign" === */
#air-easyair-validate .air-feedback__title,
#air-easyair-validate .air-outcomes__title{
  text-align: center !important;
  font-weight: 700 !important;                 /* mesmo peso */
  font-size: clamp(1.25rem, 2.0vw, 1.5rem) !important; /* mesmo scale de h3 */
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
  margin: 0 0 12px !important;
  color: #111 !important;
  padding-bottom: 10px;
}

/* (opcional) garantir que a referência "User Flow Redesign" também fica 700 */
.air-flow__title{ font-weight: 700 !important; }


/* -------- General Feedback -------- */
#air-easyair-validate .air-feedback{
  background: linear-gradient(180deg, #fafafa, #f7f7f7);
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius);
  padding: clamp(16px, 2.5vw, 28px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  margin-top: 6px;
}

#air-easyair-validate .air-feedback__grid{
  display: grid;
  grid-template-columns: 1fr minmax(8px, 1px) 1fr;
  align-items: start;
  gap: clamp(12px, 2vw, 24px);
}

#air-easyair-validate .air-divider{
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #dcdcdc, transparent);
  justify-self: center;
}

#air-easyair-validate .air-panel{
  background: var(--air-bg);
  border: 1px solid var(--air-border);
  border-radius: calc(var(--air-radius) - 6px);
  padding: clamp(12px, 2.2vw, 20px);
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}

/* easyJet & easyAir centrados */
#air-easyair-validate .air-panel__brand{
  text-align: center;
  font-weight: 500;
  margin: 0 0 8px 0;
  letter-spacing: .2px;
}
#air-easyair-validate .air-panel__brand.air-jet{ color: #555; }
#air-easyair-validate .air-panel__brand.air-air{ color: var(--air-orange); }

#air-easyair-validate .air-list{
  margin: 0; padding: 0 0 0 1.1em;
  color: #222;
}
#air-easyair-validate .air-list li{ margin: .45em 0; }

/* Bullets do lado easyAir = discos laranja (igual ao easyJet mas com cor) */
#air-easyair-validate .air-list--positive{
  list-style: disc outside !important;
  padding-left: 1.1em;
}
#air-easyair-validate .air-list--positive li{
  position: static !important;
  padding-left: 0 !important;
}
#air-easyair-validate .air-list--positive li::before{ content: none !important; }
#air-easyair-validate .air-list--positive li::marker{ color: var(--air-orange); }

/* Stack no mobile */
@media (max-width: 780px){
  #air-easyair-validate .air-feedback__grid{ grid-template-columns: 1fr; }
  #air-easyair-validate .air-divider{ display: none; }
}

/* -------- Testing Outcomes -------- */
#air-easyair-validate .air-outcomes{ margin-top: clamp(18px, 3vw, 28px); }

#air-easyair-validate .air-outcomes__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
}
@media (max-width: 980px){
  #air-easyair-validate .air-outcomes__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  #air-easyair-validate .air-outcomes__grid{ grid-template-columns: 1fr; }
}

#air-easyair-validate .air-badge{
  padding: 16px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255,102,0,.30);
  /* gradiente suavizado (mais claro) */
  background: linear-gradient(
    180deg,
    #fff4ee 0%,          /* topo bem clarinho, sem branco puro */
    #ffe6d6 38%,         /* pêssego leve */
    rgba(255,102,0,.16) 100%  /* um toque de laranja no rodapé */
  );
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
  text-align: center;
}


#air-easyair-validate .air-badge__label{
  font-weight: 500; letter-spacing: .02em; color: #222;
}
#air-easyair-validate .air-badge__score{
  font-weight: 800; font-size: 1.25rem; margin: 4px 0 2px;
  color: var(--air-orange);
}
#air-easyair-validate .air-badge__desc{
  margin: 0; color: #333; font-size: .95rem; 
}
/* EasyAir / EasyJet sempre #272222 */
#air-easyair-validate .air-badge__desc strong{ color: #272222 !important; }

/* Forçar o nome para a 2ª linha */
#air-easyair-validate .air-badge__desc strong{
  display: block;               /* quebra de linha garantida */
  margin-top: 4px;              /* respiro opcional */
  font-weight: 700;
  color: #272222 !important;    /* já tinhas esta cor */
  white-space: nowrap;          /* evita partir EasyAir/EasyJet ao meio */
}

/* (Opcional) manter altura alinhada entre cards */
#air-easyair-validate .air-badge__desc{
  min-height: 3.2em;            /* ajuste fino se precisares */
  line-height: 1.35;
}


/* ====== PATCH EASYAIR (overrides mínimos) ====== */

/* 1) Prototype Testing & Peer Feedback -> igual aos teus h2 padrão */
#air-easyair-validate .air-section h2{
  text-align: left;
  font-weight: 500;              /* igual ao Wireframes */
  font-size: 28px;               /* igual ao .air-section h2 */
  margin: 0 0 10px;              /* igual ao .air-section h2 */
  color: var(--air-ink);
}

/* 2) easyJet/easyAir centrados com padding inferior */
#air-easyair-validate .air-panel__brand{
  text-align: center;
  padding-bottom: 6px;           /* pedido */
}

/* 3) “General Feedback” e “Testing Outcomes”
      usam o mesmo “peso/escala” do User Flow Redesign (sem crescer) */
#air-easyair-validate .air-feedback__title,
#air-easyair-validate .air-outcomes__title{
  text-align: center;
  font-weight: 400;              /* como o teu .air-flow__title final */
  font-size: inherit;            /* não aumenta o tamanho */
  margin-bottom: 12px;
 
}

/* 4) Carrossel — mobile SEM cortes (imagem sempre inteira) */
@media (max-width: 640px){
  #air-easyair .air-item{ flex-basis: 92%; }

  /* a caixa adopta proporção alta (tipo telemóvel) e deixa o img conter */
  #air-easyair .air-media{
    height: auto;                /* deixa calcular pela ratio */
    aspect-ratio: 9 / 16;        /* alto/estreito p/ wireframes */
  }
  #air-easyair .air-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* === CAROUSEL MOBILE: imagem SEM corte (override forte) === */
@media (max-width: 640px){
  /* a “moldura” passa a ter ratio alto e deixa a imagem mandar */
  #air-easyair .air-media{
    height: auto !important;
    aspect-ratio: 9 / 16 !important;      /* ajusta para 10/19 ou 3/5 se preferires */
    display: block !important;
  }
  /* a imagem ocupa toda a moldura mas SEM cortar */
  #air-easyair .air-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* mostra por inteiro */
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* opcional: um pouco menos de padding no cartão para caber tudo confortável */
  #air-easyair .air-card{ padding: 8px !important; }
}


/* ===== Before/After responsivo (sem JS) ===== */
.air-ba{
  max-width:1100px; margin:16px auto 40px; padding:0 16px;
  display:grid; gap:22px;
}
.ba-pair{
  background:#fff; border:1px solid #eef1f4; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06); padding:14px;
}
.ba-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ba-head h3{ margin:2px 2px 8px; font-size:16px; font-weight:800; color:#18605C; }

/* grade principal */
.ba-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ba-cols--asym{ grid-template-columns:1.2fr .8fr; }

.ba-col{ background:#fbfffe; border:1px solid #eef1f4; border-radius:12px; padding:10px; }
.ba-before{ background:#f7f9f8; }
.ba-col figcaption{ font-size:12px; text-transform:uppercase; letter-spacing:.25px; font-weight:800; color:#1C8A84; margin:0 0 8px 2px; }
.ba-col img{ width:100%; height:auto; display:block; border-radius:10px; }

/* thumbs (extras) */
.ba-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .ba-thumbs{ grid-template-columns:repeat(2,1fr); } }

/* ===== Toggle para mobile ===== */
.ba-toggle{ position:relative; display:none; align-items:center; gap:0; background:#e9f4f3; border-radius:999px; padding:4px; }
.ba-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.ba-toggle label{
  position:relative; z-index:2; flex:1 1 0; text-align:center;
  font-size:12px; font-weight:800; color:#18605C; padding:6px 10px; cursor:pointer; border-radius:999px;
}
.ba-pill{
  position:absolute; z-index:1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:#1C8A84; border-radius:999px; transition:transform .25s ease;
}
#ba-1-after:checked ~ .ba-pill,
#ba-2-after:checked ~ .ba-pill,
#ba-3-after:checked ~ .ba-pill,
#ba-4-after:checked ~ .ba-pill{ transform:translateX(100%); }

#ba-1-before:checked ~ label[for="ba-1-before"],
#ba-2-before:checked ~ label[for="ba-2-before"],
#ba-3-before:checked ~ label[for="ba-3-before"],
#ba-4-before:checked ~ label[for="ba-4-before"],
#ba-1-after:checked ~ label[for="ba-1-after"],
#ba-2-after:checked ~ label[for="ba-2-after"],
#ba-3-after:checked ~ label[for="ba-3-after"],
#ba-4-after:checked ~ label[for="ba-4-after"]{ color:#fff; }

/* ===== Comportamento responsivo ===== */
/* Desktop: mostra os dois lados; Mobile: usa o toggle */
@media (max-width: 900px){
  .ba-cols{ grid-template-columns:1fr; }
  .ba-toggle{ display:flex; }
  /* por padrão (mobile) mostra o BEFORE quando o respectivo radio “before” está checked;
     quando muda para “after”, escondemos o before e mostramos o after */
  .ba-pair .ba-after{ display:none; }
  /* Pair 1 */
  #ba-1-after:checked ~ .ba-pill{} /* (só para mover a pílula) */
  #ba-1-after:checked ~ label[for="ba-1-after"]{}
  #ba-1-before:checked ~ label[for="ba-1-before"]{}
  /* alternância visual do conteúdo (pair 1) */
  #ba-1-after:checked ~ .ba-pill{} /* já definido acima */
  /* Pair 1 conteúdos */
  .ba-pair:nth-of-type(1) .ba-after{ display:none; }
  .ba-pair:nth-of-type(1) .ba-before{ display:block; }
  /* quando “after” está checked… */
  #ba-1-after:checked ~ .ba-pill{} /* pílula move */
  /* não temos um seletor direto parent->sibling aqui, então usamos container queries simples: */
}

/* truque simples: no mobile escondemos manualmente via classes */
@media (max-width: 900px){
  /* Pair 1 */
  #ba-1-before:checked ~ label[for="ba-1-before"]{}
  #ba-1-after:checked ~ label[for="ba-1-after"]{}
  /* Forçamos com classes auxiliares no HTML: não necessário — usaremos o seletor abaixo */
  .ba-pair:nth-of-type(1) .ba-after{ display:none; }
  #ba-1-after:checked ~ .ba-pill{} /* move */
}
/* Como CSS puro não permite “alcançar” fora do .ba-toggle, usamos a seguinte regra:
   no mobile mostramos apenas 1 coluna (a primeira que estiver na ordem DOM).
   Então no HTML, a ordem é: BEFORE, AFTER. Para mostrar AFTER por defeito, basta
   inverter a ordem no DOM. Se preferires AFTER por defeito, troca a ordem dos figures. */
/* ===== Tabs + Painel único ===== */
.air-tabs{ max-width:1100px; margin:16px auto 40px; padding:0 16px; }
.air-tabs__row{
  display:flex; gap:8px; flex-wrap:wrap; background:#f7f9f8; padding:8px 10px;
  border-radius:12px; box-shadow:inset 0 1px 0 rgba(0,0,0,.03); margin-bottom:10px;
}
.air-tab{
  appearance:none; border:1px solid rgba(28,138,132,.25); cursor:pointer;
  padding:8px 12px; border-radius:999px; background:rgba(28,138,132,.15); color:#18605C;
  font-weight:800; font-size:13px;
}
.air-tab.is-active{ background:#1C8A84; border-color:#1C8A84; color:#fff; }

.ba-pane{
  background:#fff; border:1px solid #eef1f4; border-radius:14px; padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.ba-pane[hidden]{ display:none; }

.ba-pane__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.ba-pane__head h3{ margin:0; font-size:16px; font-weight:800; color:#18605C; }

/* Toggle Before/After */
.ba-toggle{ display:flex; background:#e9f4f3; border-radius:999px; padding:4px; gap:4px; }
.ba-toggle__btn{
  border:0; background:transparent; border-radius:999px; padding:6px 12px;
  font-size:12px; font-weight:200; color:#18605C; cursor:pointer;
}
.ba-toggle__btn.is-active{ background:#1C8A84; color:#fff; }

/* Card único (apenas 1 visível por vez) */
.ba-card{ margin:0; }
.ba-card[hidden]{ display:none !important; }
.ba-cap{ font-size:12px; text-transform:uppercase; letter-spacing:.25px; font-weight:800; color:#1C8A84; margin:0 0 8px 2px; }
.ba-card img{ width:100%; height:auto; display:block; border-radius:10px; }

/* Grid de thumbs no “Before” dos Extras */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .ba-grid{ grid-template-columns:repeat(2,1fr); } }


/* ===== Menu (tabs) – centrado, menu cinza, contraste alto ===== */
.air-tabs__row{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  background:#F2F2F2;                    /* cinza do menu */
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  margin-bottom:12px;
}
.air-tab{
  appearance:none; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  background:#FFFFFF;                     /* botão off branco */
  border:1px solid #CCCBCB;
  color:#272222; font-weight:800; font-size:13px;
}

.air-tab.is-active{
  background:#FF6600;                     /* laranja forte ativo */
  border-color:#FF6600; color:#FFFFFF;
  box-shadow:0 6px 14px rgba(255,102,0,.18);
}

/* ===== Painel com Before & After lado a lado ===== */
.air-tabs{ max-width:1100px; margin:0 auto 34px; padding:0 16px; }
.ba-pane{
  background:#fff; border:1px solid #EEF1F4; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;          /* 2 colunas */
  gap:16px;
}
.ba-pane[hidden]{ display:none; }
.ba-pane__head{
  grid-column:1 / -1; display:flex; justify-content:center; align-items:center;
  text-align:center; margin-bottom:4px;
}
.ba-pane__head h3{ margin:0; color:#272222; font-size:16px; }

/* ===== Quadro com altura fixa ===== */
:root{
  --ba-stage-d: 560px;  /* altura desktop */
  --ba-stage-m: 380px;  /* altura mobile  */
}
@media (max-width:900px){
  :root{ --ba-stage-d: var(--ba-stage-m); }
  .ba-pane{ grid-template-columns:1fr; }  /* empilha no mobile */
}

.ba-card{
  background:#FFFFFF;
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  min-height: var(--ba-stage-d);
  max-height: var(--ba-stage-d);
}
.ba-card--before{ background:#FBFBFB; }

.ba-cap{
  text-align:center; color:#FF6600; font-weight:800;
  text-transform:uppercase; letter-spacing:.25px;
  margin:0 0 8px;
}

/* stage interno para conter a imagem na altura fixa */
.ba-shot{
  position:relative; flex:1 1 auto; min-height:0;  /* permite o contain funcionar */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:10px;
}
.ba-shot img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* grid de thumbs no BEFORE dos Extras */
.ba-grid{
  width:100%; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.ba-grid img{
  width:100%; height:100%; object-fit:contain; border-radius:8px;
}
@media (max-width:640px){ .ba-grid{ grid-template-columns:repeat(2,1fr); } }
/* ===== título do módulo (mesmo look dos teus h2 + padding) ===== */
.ba-super{
  text-align:center;
  padding: 14px 0;              /* padding superior/inferior */
  margin: 6px 0 12px;
  font-size: 20px;              /* igual aos teus h2 de secção */
  font-weight: 800;
  color:#272222;
}

/* ===== Menu (tabs) – centrado, menu cinza, contraste alto ===== */
.air-tabs{ max-width:1100px; margin:0 auto 34px; padding:0 16px; }
.air-tabs__row{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  background:#F2F2F2;                    /* cinza do menu */
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  margin-bottom:12px;
}
.air-tab{
  appearance:none; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  background:#FFFFFF;                     /* botão off branco */
  border:2px solid #FF6600;
  color:#272222; font-weight:600; font-size:13px;
}

.air-tab.is-active{
  background:#FF6600;                     /* laranja ativo */
  border-color:#FF6600; color:#FFFFFF;
  box-shadow:0 6px 14px rgba(255,102,0,.18);
}

/* ===== Painel com Before & After lado a lado ===== */
.ba-pane{
  background:#fff; border:1px solid #EEF1F4; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:14px;

  display:grid;
  grid-template-columns:1fr 1fr;          /* 2 colunas */
  gap:16px;
}
.ba-pane[hidden]{ display:none; }
.ba-pane__head{
  grid-column:1 / -1; display:flex; justify-content:center; align-items:center;
  text-align:center; margin-bottom:4px;
}
.ba-pane__head h3{ margin:0; color:#272222; font-size:16px; font-weight:600; }

/* ===== Quadro com altura fixa ===== */
:root{
  --ba-stage-d: 560px;  /* altura desktop */
  --ba-stage-m: 380px;  /* altura mobile  */
}
@media (max-width:900px){
  :root{ --ba-stage-d: var(--ba-stage-m); }
  .ba-pane{ grid-template-columns:1fr; }  /* empilha no mobile */
}

.ba-card{
  background:#FFFFFF;
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  min-height: var(--ba-stage-d);
  max-height: var(--ba-stage-d);
}
.ba-card--before{ background:#FBFBFB; }

.ba-cap{
  text-align:center; color:#FF6600; font-weight:800;
  text-transform:uppercase; letter-spacing:.25px;
  margin:0 0 8px;
}

/* stage interno para conter a imagem na altura fixa */
.ba-shot{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:10px;
}
.ba-shot img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* grid de thumbs no BEFORE dos Extras */
.ba-grid{
  width:100%; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.ba-grid img{
  width:100%; height:100%; object-fit:contain; border-radius:8px;
}
@media (max-width:640px){ .ba-grid{ grid-template-columns:repeat(2,1fr); } }

/* Remover o acoplamento que estava a escalar os dois títulos */
.air-outcomes__title{            /* mantém Outcomes como quiseres */
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.25;
  margin: 16px 0 18px;
  color: #111;
}

/* Before & After — igual ao Outcomes, mas no escopo certo (fora do validate) */
.air-tabs .ba-super,
.air-ba .ba-super,
#air-easyair .ba-super{
  text-align: center;
  font-weight: 700 !important;                    /* derruba o 800 antigo */
  font-size: clamp(22px, 2.1vw, 23px) !important; /* mesma escala do Outcomes */
  line-height: 1.25;
  margin: 16px 0 18px;
  color: #111;
}

/* Final Outcomes/References usam apenas o estilo padrão dos teus h2 */
#final-outcomes h2,{
  /* não precisa nada: herda de .air-section h2 */
}

/* Se existir alguma regra global que force .ba-super ou .air-outcomes__title,
   neutraliza apenas dentro destes blocos (defensivo, opcional): */
#final-outcomes .ba-super,
#final-outcomes .air-outcomes__title,
{
  all: unset;
  display: block;
  font: inherit;
}


/* 1) Card especial com grelha: deixa crescer à vontade */
.ba-card--grid{
  min-height: auto !important;
  max-height: none !important;
}
.ba-card--grid .ba-shot{
  overflow: visible !important;
  min-height: 0;
  height: auto;
}
.ba-card--grid .ba-grid{
  height: auto;            /* deixa a grelha expandir */
  grid-auto-rows: auto;    /* linhas pela altura do conteúdo */
}

/* 2) Imagens da grelha: largura total, altura automática (sem esticar) */
.ba-card--grid .ba-grid img{
  width: 100%;
  height: auto !important;    /* override ao 100% anterior */
  object-fit: contain;        /* seguro */
  display: block;
}

/* 3) Opcional: no mobile, 2 colunas para garantir legibilidade */
@media (max-width: 640px){
  #pane-extras .ba-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}


/* ===== Tabs ===== */
.air-tab{ padding: 10px 14px; }

.air-tab.is-active,
.air-tab[aria-selected="true"]{
  background: var(--btn-bg-active);
  border-color: var(--btn-bd-active);
  color: var(--btn-tx-active);
  box-shadow: 0 6px 14px rgba(255,102,0,.18);
}


/* Pressed */
.air-tab:active{
  transform: translateY(1px);
  background: var(--btn-bg-pressed);
  border-color: var(--btn-bg-pressed);
  color: var(--ea-white);
}

/* Disabled */
.air-tab[disabled],
.air-tab.is-disabled{
  background: var(--btn-bg-disabled);
  border-color: var(--ea-g2);
  color: var(--btn-tx-disabled);
  cursor: not-allowed;
  box-shadow: none;
}



/* ===== Setas do carrossel ===== */
#air-easyair .air-nav{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ea-orange);
  background: var(--ea-orange);
  color: var(--ea-white);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
#air-easyair .air-nav svg{ fill: currentColor; }


/* Pressed */
#air-easyair .air-nav:active{
  transform: translateY(1px);
  background: #e65c00;
  border-color: #e65c00;
  color: var(--ea-white);
}

/* Disabled */
#air-easyair .air-nav.is-disabled[disabled]{
  background: var(--ea-g3);
  border-color: var(--ea-g2);
  color: var(--btn-tx-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* Ajuste leve em mobile */
@media (max-width: 480px){
  .air-tab{ padding: 9px 12px; }
}


/* =========================================
   HOVER — APENAS DESKTOP (novo, isolado)
   + tokens necessários e ring OFF
   ========================================= */

/* Tokens usados pelas tabs/nav/dots (sem mudar CTA) */
:where(.air-tab, #air-easyair .air-nav, #air-easyair .air-dot){
  /* cores base */
  --btn-bg:#FFFFFF;
  --btn-bd:#CCCBCB;
  --btn-tx:#272222;

  /* estados */
  --btn-bg-active:#FF6600;
  --btn-bd-active:#FF6600;
  --btn-tx-active:#FFFFFF;

  --btn-bg-hover:#FFA366;     /* só usado no desktop */
  --btn-bd-hover:#FFA366;
  --btn-tx-hover:#272222;

  --btn-bg-pressed:#e65c00;
  --btn-bg-disabled:#D9D9D9;
  --btn-tx-disabled:#8a8a8a;

  /* vars usadas nas setas/dots */
  --ea-orange:#FF6600;
  --ea-white:#FFFFFF;
  --ea-g2:#CCCBCB;
}

/* Remove QUALQUER “anel” (outline/box-shadow) nas tabs/nav/dots */
.air-tab,
.air-tab:focus,
.air-tab:focus-visible,
.air-tab:active,
.air-tab:hover,
#air-easyair .air-nav,
#air-easyair .air-nav:focus,
#air-easyair .air-nav:focus-visible,
#air-easyair .air-nav:active,
#air-easyair .air-nav:hover,
#air-easyair .air-dot,
#air-easyair .air-dot:focus,
#air-easyair .air-dot:focus-visible,
#air-easyair .air-dot:active,
#air-easyair .air-dot:hover{
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- HOVER SÓ EM DESKTOP REAL (rato) ---------- */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* Tabs inativas ao pairar */
  .air-tab:not(.is-active):hover{
    background: var(--btn-bg-hover) !important;
    border-color: var(--btn-bd-hover) !important;
    color: var(--btn-tx-hover) !important;
  }

  /* Setas do carrossel ao pairar */
  #air-easyair .air-nav:not([disabled]):hover{
    background: var(--ea-white) !important;
    border: 1px solid var(--ea-orange) !important;
    color: var(--ea-orange) !important;
  }

  /* Dots ao pairar (não ativos) */
  #air-easyair .air-dot:not(.is-active):hover{
    background: var(--btn-bg-hover) !important;
    border: 1px solid var(--btn-bd-hover) !important;
    transform: scale(1.2);
  }
}

/* (GARANTIA) o CTA não é afetado: .air-cta__btn permanece como está */

@media (min-width: 900px){
  .air-media.air-media--desktop{
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - clamp(24px, 4vw, 48px)) !important; /* cria folga nas laterais */
    max-width: calc(var(--air-content-max, 1100px) - clamp(24px, 4vw, 48px)) !important;
  }
}

/* easyAir — nav disabled com leve transparência */
#air-easyair .air-nav.is-disabled[disabled]{
  opacity: 1 !important;                 /* não desbota o ícone */
  /* fallback */
  background: rgba(217,217,217,.85) !important;   /* ~#D9D9D9 a 85% */
  border-color: rgba(207,207,207,.85) !important; /* aro com alpha */
  /* se o browser suportar, usa color-mix (fica mais bonito) */
  background: color-mix(in srgb, #D9D9D9 85%, transparent) !important;
  border-color: color-mix(in srgb, #CFCFCF 85%, transparent) !important;

  color: #8a8a8a !important;             /* seta cinza */
  box-shadow: none !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  background-image: none !important;
}

/* não muda em hover/active */
#air-easyair .air-nav.is-disabled[disabled]:hover,
#air-easyair .air-nav.is-disabled[disabled]:active{
  transform: none !important;
  background: rgba(217,217,217,.85) !important;
  border-color: rgba(207,207,207,.85) !important;
}

/* FLOWS por padrão (mobile) 1 coluna */
.air-flow__cols{
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  align-items: start;
  grid-template-columns: 1fr;      /* <— garante 1 coluna no mobile */
}

/* a partir de desktop/tablet, 2 colunas lado a lado */
@media (min-width: 900px){
  .air-flow__cols{
    grid-template-columns: 1fr 1fr; /* <— volta a pôr lado a lado */
  }
}

/* === USER FLOW — subtítulos alinhados na MESMA linha === */
@media (min-width: 980px){
  .air-flow__cols{
    display:grid;
    grid-template-columns: 1fr 1fr;  /* 2 colunas fixas */
    gap: clamp(16px, 2.5vw, 24px);
    align-items:start;
  }

  /* “achata” as colunas para poder posicionar itens em linhas do grid */
  .air-flow__col{ display: contents; }

  /* Current (1ª coluna) */
  .air-flow__col:nth-of-type(1) .air-flow__subtitle{ grid-column:1; grid-row:1; margin:0 0 12px !important; }
  .air-flow__col:nth-of-type(1) .flow-card{       grid-column:1; grid-row:2; margin:0 !important; }

  /* Proposed (2ª coluna) */
  .air-flow__col:nth-of-type(2) .air-flow__subtitle{ grid-column:2; grid-row:1; margin:0 0 12px !important; }
  .air-flow__col:nth-of-type(2) .flow-card{       grid-column:2; grid-row:2; margin:0 !important; }
}

/* normaliza a “caixa” dos subtítulos (evita colapso de margem) */
.air-flow__subtitle{
  display:flex; align-items:flex-end; justify-content:center;
  min-height:32px; padding:0 !important; margin:0 0 12px !important;
  font-weight:300 !important;
}
.flow-card{ margin:0 !important; }


/* ===== User Flow — centrar a lista <ol> no MOBILE ===== */
@media (max-width: 700px){
  .air-flow .flow-card .stepper{
    list-style: none !important;           /* remove números/bullets */
    padding-left: 0 !important;            /* remove indent padrão do <ol> */
    padding-inline-start: 0 !important;
    margin-left: auto !important;          /* centra o bloco */
    margin-right: auto !important;
    width: fit-content;                     /* encolhe ao conteúdo para centrar */
  }
}




  /* GLOBAL SITE*/

/* ===== FIX GLOBAL — forçar a mesma base em todas as páginas ===== */
html { font-size: 16px !important; }           /* 1rem = 16px */
body { font-size: 1rem !important; line-height: 1.6; }

/* Evitar que wrappers mudem o “base” */
.case-detail, main, .container, .container-fluid {
  font-size: 1rem !important;
}

/* Escala de títulos consistente (fluida) */
:root{
  --fs-h1: clamp(1.75rem, 1.1vw + 1.2rem, 2.25rem);
  --fs-h2: clamp(1.375rem, 0.8vw + 1rem, 1.75rem);
  --fs-h3: clamp(1.125rem, 0.5vw + 0.9rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
}

.case-detail h1{ font-size: var(--fs-h1) !important; line-height: 1.25; }
.case-detail h2{ font-size: var(--fs-h2) !important; line-height: 1.3; }
.case-detail h3{ font-size: var(--fs-h3) !important; line-height: 1.35; }
.case-detail p,
.case-detail li{ font-size: var(--fs-body) !important; }

/* Kicker/legenda */
.case-detail .case-kicker,
.case-detail .rf-sub,
.case-detail .onb-tab__label{
  font-size: var(--fs-small) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ===== INFO BAR — títulos e conteúdos iguais em todos ===== */
.lf-info-bar, .case-meta { font-size: 1rem !important; }

.lf-info-bar .lf-info-item h4,
.case-meta h4{
  font-size: var(--fs-small) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.lf-info-bar .lf-info-item p,
.case-meta p,
.case-card p{
  font-size: var(--fs-body) !important;
}

/* Não deixar componentes redefinirem o base via em */
.case-section,
.case-card,
.wf-carousel,
.rf-board { font-size: 1rem !important; }

/* iOS pode “aumentar” fontes — trava isso */
html { -webkit-text-size-adjust: 100%; }

/* === Texto do teaser (linha por baixo do título) === */
.case-teaser{
  color: #1e2b28 !important;        /* mesma cor do corpo do texto */
  font-weight: 400 !important;       /* igual aos parágrafos */
  opacity: 1 !important;             /* nada de “esbater” texto */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Se algum wrapper estiver a “borrar” o texto, neutraliza */
.case-hero, .case-hero *{
  filter: none !important;
  transform: none !important;
}
.case-hero{ opacity: 1 !important; }
/* Se precisares de um hero mais claro, usa background RGBA no hero,
   NÃO opacity no container: ex. background-color: rgba(255,255,255,.9); */




/* ABOUT — apertar o espaço *antes* das imagens (top) */

/* 1) reduz a margem inferior do bloco de texto inicial */
.me .about .box1{
  margin-bottom: clamp(4px, 0.8vw, 10px);
}

/* 2) tira as margens grandes dos headings dentro do .box1 */
.me .about .box1 h4.about1{
  margin: 0 0 clamp(6px, 1vw, 10px);
}
.me .about .box1 h6.about2{
  margin: 0;                 /* cola mesmo ao próximo bloco */
  line-height: 1.6;
}

/* 3) garante que <p> vazios não criam espaçamento (tens alguns a seguir) */
.me .about .box1 p:empty{ display:none; }

/* 4) encosta mais a área das imagens ao bloco acima */
.me .about .box2{
  margin-top: clamp(4px, 0.6vw, 10px);   /* antes estava ~12–18px */
  margin-bottom: clamp(12px, 1.4vw, 18px);
  padding: 0 !important;
}

/* em ecrã grande podes apertar ainda mais um bocadinho */
@media (min-width: 992px){
  .me .about .box1{ margin-bottom: clamp(2px, .5vw, 8px); }
  .me .about .box2{ margin-top: clamp(2px, .4vw, 8px); }
}


/* ABOUT page – evita cortar a última imagem no mobile */

/* As imagens do mosaico ocupam 100% da largura e deixam a altura fluir */
.me .box7 img {
  display: block;
  width: 100%;
  height: auto;           /* importante para não “esticar/cortar” */
}

/* Por segurança, nada de overflow escondido aqui */
.me .box7 { 
  overflow: visible;
}

/* Dá um respiro antes do footer para ecrãs pequenos */
@media (max-width: 767.98px){
  /* margem depois do bloco das imagens */
  .me .box7{
    margin-bottom: clamp(40px, 8vh, 96px);
  }
  /* se preferires no container todo, usa esta alternativa:
  .me .about{ padding-bottom: clamp(40px, 8vh, 96px); }
  */

  /* iOS safe area (notch) */
  .footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}


/*ACERTO HOMEPAGE: HERO */

/* ==== COLAR A HERO AO HEADER (mobile) ==== */
@media (max-width: 768px){
  /* o header não empurra nada para baixo */
  .header{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    overflow: hidden;                   /* previne colapso interno */
  }

  /* o elemento imediatamente a seguir ao header é o <main> */
  .header + main{
    margin-top: 0 !important;          /* remove qualquer margem do main */
    padding-top: 0 !important;
    border-top: 1px solid transparent;  /* bloqueia margin-collapse do 1.º filho */
  }

  /* a tua secção com a imagem */
  .header + main .background{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-attachment: scroll !important; /* evita seams no iOS */
  }

  /* zera margens do primeiro conteúdo da hero */
  .header + main .background h1,
  .header + main .background h2,
  .header + main .background h3,
  .header + main .background h4,
  .header + main .background h5,
  .header + main .background h6,
  .header + main .background p{
    margin-top: 0 !important;
  }
}