/* ===========================
   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; }


/* 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;
}
.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;
  }
}

/* =========================
   KNOWYOU+ — CTA centrado e com respiro
   ========================= */

.case-detail.ky .kyplus-cta{
  /* garante que é um bloco normal e centrado */
  display: flex;
  justify-content: center;
  width: 100%;
  margin: clamp(18px, 3vw, 34px) 0 0;
  padding: clamp(12px, 2vw, 18px) 1.25rem clamp(22px, 3.2vw, 44px);
}

.case-detail.ky .kyplus-cta-inner{
  display: flex;
  justify-content: center;
  width: 100%;
}

.case-detail.ky .kyplus-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* se o teu botão já tem estilo, isto só garante o “tamanho” */
  padding: 0.85rem 2.4rem;
  border-radius: 14px;
  max-width: 100%;
}

/* =========================
   KNOWYOU+ — PROJECT INFO mais pequena e sem “altura gigante”
   ========================= */

.case-detail.ky .ky-project-info{
  /* mata alturas forçadas que estejam a criar o mega espaço branco */
  height: auto !important;
  min-height: 0 !important;

  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2vw, 22px);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  align-items: start;
}

.case-detail.ky .ky-project-info .info-item{
  margin: 0;
}

/* responsivo */
@media (max-width: 991.98px){
  .case-detail.ky .ky-project-info{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px){
  .case-detail.ky .ky-project-info{
    grid-template-columns: 1fr;
  }
}

/* ===== FIX: CTA não ser pisado pela ky-project-info ===== */

/* CTA: acima e com margem por baixo */
.case-detail.ky #kyplus-only{
  position: relative;
  z-index: 5;
  margin-bottom: clamp(18px, 3vw, 34px) !important;
}

/* Seção info: NÃO pode subir nem transformar quando vem depois do CTA */
.case-detail.ky #kyplus-only + .ky-project-info{
  margin-top: 0 !important;
  top: auto !important;
  transform: none !important;
  position: relative;
  z-index: 1;
}


/* =========================================================
   KNOW YOU+ — BULLETPROOF LEFT ALIGN (titles + text)
   Colar NO FIM do CSS
   ========================================================= */

/* 1) Mata qualquer text-align:center herdado nas secções */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing){
  text-align: left !important;
}

/* 2) Tudo o que for tipografia dentro dessas secções fica LEFT
      (e remove a diferença de margem que te está a “desalinhar” os <p>) */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing)
  :is(.case-kicker, .ky-kicker, h1, h2, h3, p){
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) O teu problema principal no screenshot:
      <p> com max-width + margin auto -> fica “metido para dentro”.
      Mantemos max-width, mas alinhado à esquerda (sem auto). */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing) p{
  max-width: 72ch;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4) Espaçamento consistente entre texto (p) e o bloco seguinte */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview) > p,
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview) .container-narrow > p{
  margin-bottom: 36px !important;
}

/* 5) Se estiveres a usar .container-narrow centrado (margin:auto), desliga no KY */
.case-detail.ky .container-narrow{
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* 6) Alguns componentes não devem herdar “max-width do p” nem mexidas:
      (não alinha ao centro, só evita efeitos colaterais) */
.case-detail.ky :is(.ky-process-card, .ky-accordion-columns, .uf-grid, .value-pills, .mk-tabs, .ky-carousel, .pd-grid){
  text-align: initial; /* mantém o layout deles intacto */
}

/* KY — textos a ocupar a largura toda (sem "encolher") */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing) p{
  max-width: none !important;
  width: 100% !important;
}

/* (opcional mas recomendado) mesma “coluna”/largura de conteúdo em todas as secções KY */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing){
  max-width: 1100px;          /* ajusta se o teu site usa outro valor */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* KY — blindar alinhamento à esquerda (kicker, títulos e texto) */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing){
  text-align: left !important;
}

/* garantir que H2/H3/H1 ocupam a largura toda e não ficam centrados */
.case-detail.ky :is(.ksec, .case-section, .ky-sec, .ky-overview, .pd, .closing) > :is(h1,h2,h3){
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
 
}


/* ===== KY: blindar alinhamento à esquerda (ganhar a TUDO) ===== */
body main.case-detail.ky section.ky-sec.ksec,
body main.case-detail.ky section.ky-sec.ksec *{
  text-align: left !important;
}

/* garantir que H2/P não ficam “encolhidos” */
body main.case-detail.ky section.ky-sec.ksec h2,
body main.case-detail.ky section.ky-sec.ksec p{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* espaço para não ficar agarrado ao conteúdo abaixo */
body main.case-detail.ky section.ky-sec.ksec h2{ margin-bottom: 14px !important; }
body main.case-detail.ky section.ky-sec.ksec p { margin-bottom: 28px !important; }

/* =========================================
   KNOW YOU+ — BLOQUEIO TOTAL (sem mexer no HERO/CTA/INFO)
   Cola no FIM do CSS
   ========================================= */

.case-detail.ky{
  --cs-max: 1120px;
  --cs-pad: clamp(20px, 4vw, 48px);
  --cs-gap: clamp(22px, 3vw, 40px);
}



/* 2) Corpo do case (a partir do Overview para baixo): mesmo container e alinhado à ESQ */
.case-detail.ky :is(.ky-overview, .ky-sec, .case-section, .pd, .closing, .ky-wireframes, .ky-design){
  max-width: var(--cs-max);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
  text-align: left !important;
}

/* 3) Mata qualquer “container-narrow” que esteja a encolher texto no corpo */
.case-detail.ky :is(.ky-overview, .ky-sec, .case-section, .pd, .closing, .ky-wireframes, .ky-design)
  :is(.container-narrow){
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

/* 4) Força TODOS os títulos + parágrafos do corpo a ocupar 100% e alinharem à ESQ */
.case-detail.ky :is(.ky-overview, .ky-sec, .case-section, .pd, .closing, .ky-wireframes, .ky-design)
  :is(.case-kicker, .ky-kicker, h1, h2, h3, p){
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important; /* se for grid */
  align-self: stretch !important;   /* se for flex */
}

/* 5) Espaçamento para nada ficar “agarrado” */
.case-detail.ky :is(.ky-overview, .ky-sec, .case-section, .pd, .closing, .ky-wireframes, .ky-design) :is(h1,h2,h3){
  margin: 8px 0 12px !important;
}
.case-detail.ky :is(.ky-overview, .ky-sec, .case-section, .pd, .closing, .ky-wireframes, .ky-design) p{
  margin: 0 0 var(--cs-gap) !important;
}

/* 6) Patch extra para o caso específico do Empathize (se houver regra antiga a ganhar) */
.case-detail.ky .ky-insights{
  text-align: left !important;
}
.case-detail.ky .ky-insights h2{
  text-align: left !important;
  width: 100% !important;
  max-width: none !important;
}

/* KY — TOPO igual aos outros (não sobrepor regras globais) */
.case-detail.ky #kyplus-only{
  display: flex;
  justify-content: center;
  padding: 0;
  margin: clamp(18px, 3vw, 28px) 0 clamp(28px, 4vw, 44px);
}

/* o bloco de info com a mesma “caixa” e margem do padrão */
.case-detail.ky .ky-project-info{
  max-width: 1120px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ===== KNOWYOU+ — spacing igual aos outros ===== */
:root{
  --cs-max: 1120px;
  --cs-pad-x: clamp(16px, 4vw, 56px);
  --cs-gap-cta: clamp(18px, 3vw, 28px);
  --cs-gap-block: clamp(22px, 4vw, 36px);
  --cs-info-bg: rgba(0,0,0,.06);
  --cs-radius: 28px;
}

/* Teaser */
main.case-detail.ky .case-hero{
  padding-top: clamp(64px, 7vw, 96px) !important;
}
main.case-detail.ky .case-teaser{
  max-width: 60ch;
  margin: 0 auto !important;
  padding: 0 var(--cs-pad-x) !important;
  text-align: center;
}

/* CTA */
main.case-detail.ky .kyplus-cta{
  display: flex;
  justify-content: center;
  padding: 0 var(--cs-pad-x) !important;
  margin: var(--cs-gap-cta) auto var(--cs-gap-block) !important;
}
main.case-detail.ky .kyplus-cta-inner{ display:flex; justify-content:center; width:100%; }
main.case-detail.ky .kyplus-btn{ white-space: nowrap; }

/* Info bar */
main.case-detail.ky .ky-project-info{
  max-width: var(--cs-max);
  margin: 0 auto var(--cs-gap-block) !important;
  padding: clamp(16px, 2.2vw, 22px) var(--cs-pad-x) !important;
  background: var(--cs-info-bg) !important;
  border-radius: var(--cs-radius) !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.4vw, 34px) !important;
}
main.case-detail.ky .info-label{
  display:block;
  margin: 0 0 6px 0 !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
}
main.case-detail.ky .info-value{ display:block; }

/* Cover */
main.case-detail.ky .case-cover{
  max-width: var(--cs-max);
  margin: 0 auto !important;
  padding: 0 var(--cs-pad-x) !important;
}
main.case-detail.ky .cover-fig{
  margin: 0 !important;
  border-radius: var(--cs-radius);
  overflow: hidden;
}

/* Responsivo */
@media (max-width: 991.98px){
  main.case-detail.ky .ky-project-info{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 575.98px){
  main.case-detail.ky .ky-project-info{ grid-template-columns: 1fr !important; }
}

main.case-detail.ky .case-teaser{
  margin: 0 auto var(--cs-gap-cta) !important; /* antes era só 0 auto */
}

/* KNOWYOU+ — cor única para todos os kickers */
main.case-detail.ky :is(.case-kicker.km, .ky-kicker.km){
  color: #BE99E1 !important;
}

/* KNOWYOU+ — centrar a frase final */
main.case-detail.ky .closing-quote{
  text-align: center;
  margin-top: 32px; /* ajusta se quiseres mais/menos ar */
}
main.case-detail.ky .closing-quote blockquote{
  margin: 0 auto;
  max-width: 80ch;
}

/* ========= FIX CTA (mobile) quando Google Translate aumenta o texto ========= */
@media (max-width: 768px) {

  /* garante que o CTA respeita margens/padding do ecrã */
  .kyplus-cta,
  .kyplus-cta-inner{
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* o botão nunca passa a largura do contentor */
  #kyplus-only .kyplus-btn{
    display: block;              /* evita inline-flex “esticar” */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;

    /* permite quebrar linha quando o texto cresce */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;

    /* normalmente isto ajuda MUITO com traduções longas */
    letter-spacing: 0.5px;       /* (se quiseres, podes pôr 0) */
    padding: 12px 14px;
  }

  /* o Google Translate mete spans dentro do link — força wrap também */
  #kyplus-only .kyplus-btn *{
    white-space: normal !important;
    max-width: 100%;
  }

  /* se houver flex algures no wrapper, isto impede overflow por min-width */
  .kyplus-cta-inner{
    min-width: 0;
  }
}

/* (Opcional) “rede de segurança” caso algum elemento ainda cause overflow */
html, body{ max-width: 100%; overflow-x: clip; }

/* PERSONA — garantir que o título "Personality — ESTP" fica centrado */
.ky-persona-card .ky-traits-wrap{
  display: flex;
  flex-direction: column;
  align-items: center; /* centra o título */
  width: 100%;
}

.ky-persona-card .ky-traits-wrap > h4.ky-subttl{
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* mantém as barras alinhadas e ocupando a largura toda */
.ky-persona-card .ky-traits{
  width: 100%;
}

body.ky-page{ overflow-x: hidden !important; }
body.ky-page footer.footer{ overflow-x: hidden !important; }

body.ky-page .kyplus-btn{
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}


/* =========================================================
   KY (só esta página) — FIX mobile: sem scroll horizontal
   + footer realmente FIXO no viewport
   ========================================================= */

:root{ --footer-h: 50px; }

/* espaço para o footer fixo (inclui safe-area do iPhone) */
body{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom)) !important;
}

/* corta overflow horizontal (o mais importante) */
html, body{
  width: 100% !important;
  overflow-x: hidden !important;
}

/* KingComposer costuma criar overflow em rows fullwidth (arredondamentos/left calc) */
.kc_row,
.kc_row_inner,
.kc_wrap,
.kc-container,
.kc_row_fullwidth,
.kc_row.kc_row_fullwidth{
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* neutraliza “fullwidth” que empurra para fora */
.kc_row_fullwidth,
.kc_row.kc_row_fullwidth{
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

/* garante que imagens/figuras nunca forçam largura extra */
.kc_row img,
.kc_row figure{
  max-width: 100% !important;
  height: auto !important;
}

/* FIX: se algum wrapper tiver transform/filter, o position:fixed falha no mobile */
body, #page, .site, .site-content, .content-area{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* FOOTER: fixa ao viewport e ocupa 100% */
footer.footer,
footer#colophon,
.site-footer{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  height: calc(var(--footer-h) + env(safe-area-inset-bottom)) !important;
  padding: 0 16px env(safe-area-inset-bottom) 16px !important;
  box-sizing: border-box !important;

  z-index: 99999 !important;
}

/* mata gutters só dentro do footer */
footer.footer .container,
footer.footer .container-fluid,
footer.footer .row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  --bs-gutter-x: 0 !important;
}

/* =========================================================
   PATCH FINAL — Responsive media + kill horizontal scroll
   + footer sempre visível no início (fixo)
   (colar NO FIM do CSS)
========================================================= */

/* 1) Box sizing global (evita elementos “crescerem” para fora) */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Mata scroll horizontal (preferível clip; fallback hidden) */
html { overflow-x: clip; }
@supports not (overflow: clip){
  html { overflow-x: hidden; }
}
body{
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip){
  body{ overflow-x: hidden; }
}

/* 3) Media SEMPRE responsivo (imagens/iframes/vídeo/svg) */
img, video, svg, canvas{
  max-width: 100%;
  height: auto;
}
img{ display:block; }                 /* evita “gap” e overflow por baseline */
figure{ max-width:100%; margin:0; }

/* iFrames (maps/embeds) não podem rebentar a largura */
iframe{
  max-width: 100%;
}

/* 4) KingComposer: fullwidth costuma ser o #1 do overflow horizontal */
.kc_row,
.kc_row_inner,
.kc_wrap,
.kc-container,
.kc_row_fullwidth,
.kc_row.kc_row_fullwidth{
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* neutraliza o “empurrão” lateral do fullwidth */
.kc_row_fullwidth,
.kc_row.kc_row_fullwidth{
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

/* quando algum bloco vem com 100vw inline (muito comum em builders) */
[style*="width: 100vw"],
[style*="width:100vw"],
[style*="100vw"]{
  max-width: 100% !important;
  width: 100% !important;
}

/* 5) Carrosséis/stages: garante que nada “sai” para fora */
.ky-carousel,
.kc-stage,
.kc-track{
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 6) FIX de footer: sempre visível e sem criar overflow */
:root{ --site-footer-h: 56px; } /* ajusta se o teu footer for mais alto */

body{
  padding-bottom: calc(var(--site-footer-h) + env(safe-area-inset-bottom)) !important;
}

footer.footer,
footer#colophon,
.site-footer{
  display: block !important;
  visibility: visible !important;

  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;

  min-height: var(--site-footer-h) !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;

  box-sizing: border-box !important;
  z-index: 999999 !important;
}

/* 7) “Fixed” falha se algum ancestral tiver transform/filter — neutraliza os comuns */
body, #page, .site, .site-content, .content-area, #content, #primary{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 8) Footer containers sem gutters a empurrar para fora */
footer.footer .container,
footer.footer .container-fluid,
footer.footer .row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   KYMORE — FIX FINAL
   1) corta overflow horizontal
   2) media responsiva (imagens/iframes)
   3) fullwidth (100vw) sem empurrar o layout
   4) footer fixo sempre visível (mesmo com wrappers com transform)
   Cola NO FIM do CSS
========================================================= */

/* ---------- 0) Anti-overflow global (melhor que hidden) ---------- */
html, body{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden !important; }
}

/* ---------- 1) Responsivo: toda a media não pode passar a viewport ---------- */
:where(img, svg, video, iframe, canvas){
  max-width: 100% !important;
  height: auto !important;
}
:where(figure, .img-block, .img-wide, .process-fig, .cover-fig){
  max-width: 100% !important;
  overflow: hidden;
}

/* iframes (Figma/YouTube/etc) */
:where(iframe){
  width: 100% !important;
}

/* ---------- 2) KingComposer / “fullwidth rows” (mata o 100vw que cria scroll) ---------- */
:where(.kc_row_fullwidth, .kc_row.kc_row_fullwidth){
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

/* wrappers que às vezes empurram 1–2px */
:where(.kc_row, .kc_row_inner, .kc_wrap, .kc-container, .kc_column, .kc_column_inner){
  max-width: 100% !important;
  overflow-x: clip !important;
}
@supports not (overflow-x: clip){
  :where(.kc_row, .kc_row_inner, .kc_wrap, .kc-container, .kc_column, .kc_column_inner){
    overflow-x: hidden !important;
  }
}

/* ---------- 3) O “culpado nº1” do footer não fixar no mobile:
   QUALQUER transform no ancestral faz o position:fixed falhar (iOS/Safari) ---------- */
:where(body, #page, .site, .site-content, .content-area, main, .kc_row, .kc_wrap){
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* ---------- 4) Footer FIXO e sem 100vw (100vw costuma criar scroll horizontal) ---------- */
:root{ --footer-h: 56px; }

/* dá espaço no fim da página para não tapar conteúdo */
body{
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom)) !important;
}

/* apanha várias estruturas de footer (tema WP varia) */
:where(footer.footer, footer#colophon, .site-footer, #colophon){
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;       /* importante: NÃO usar 100vw */
  max-width: 100% !important;

  height: calc(var(--footer-h) + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;

  z-index: 999999 !important;
  overflow: hidden !important;
}

/* elimina gutters internos que podem criar overflow */
:where(footer.footer, footer#colophon, .site-footer, #colophon)
  :where(.container, .container-fluid, .row){
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  --bs-gutter-x: 0 !important;
}

/* KY — centralizar a 1ª frase (teaser do hero) */
main.case-detail.ky .case-hero .case-teaser,
main.case-detail.ky .case-hero .case-teaser p{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* fallback (caso não exista .case-teaser no teu HTML) */
main.case-detail.ky .case-hero :is(p.lead, p.case-teaser, .lead, .hero-subtitle){
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}