* ============================
   easyAir (prefixo air-)
   Paleta: #FF6600, #FFA366, #FFFFFF, #B8B6B6, #CCCBCB, #D9D9D9, #272222
============================ */
:root{
  --air-brand:#FF6600;
  --air-brand-2:#FFA366;
  --air-ink:#272222;
  --air-soft:#D9D9D9;
  --air-card:#FFF9F4;      /* tom suave p/ info bar */
  --air-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* ===== Base da página ===== */
.air-case{ padding-bottom:96px; position:relative; }
.air-hero{ text-align:center; padding:64px 16px 12px; }    /* topo reduzido */
.air-teaser{ max-width:980px; margin:18px auto 34px; color:#444; line-height:1.7; }

/* logo simples (se usado) */
.air-logo{
  display:inline-block; padding:14px 26px; border-radius:14px;
  background:var(--air-brand); color:#fff; font-weight:800; font-size:38px;
  letter-spacing:.5px; box-shadow:var(--air-shadow);
}

/* Secções de texto */
.air-section{ max-width:1100px; margin:28px auto; padding:0 16px; }
.air-kicker{
  display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--air-brand); margin-bottom:6px;
}
.air-section h2{ margin:0 0 10px; font-size:28px; font-weight:500; color:var(--air-ink); }
.air-section p{ color:#444; margin:0 0 8px; line-height:1.7; }

/* ===== Imagens RESPONSIVAS ===== */
/* Hero */
.air-hero-figure{ max-width:1100px; margin:0 auto 12px; padding:0 16px; }
.air-hero-figure img{ width:100%; height:auto; display:block; border-radius:18px; }

/* Figura genérica (ex.: Design Process desktop) */
.air-dp-figure{ max-width:1100px; margin:14px auto 26px; padding:0 16px; }
.air-dp-figure img{ width:100%; height:auto; display:block; border-radius:18px; }

/* Placeholders cinza (se ainda precisares em alguma secção) */
.air-img-block{ max-width:1100px; margin:22px auto; padding:0 16px; }
.air-img-block::before{
  content:''; display:block; width:100%; aspect-ratio:16/9; border-radius:18px;
  background:linear-gradient(#efefef,#eeeeee);
  box-shadow:var(--air-shadow), inset 0 0 0 1px rgba(0,0,0,.04);
}
.air-img-block.is-tall::before{ aspect-ratio:3/4; }
.air-img-block.is-ultra::before{ aspect-ratio:21/9; }

/* ===== Info bar (logo + dados) ===== */
.air-info-bar{
  background: #EEEEEE;      /* claro e sem outline */
  border:none !important;
  box-shadow:none;
  border-radius:16px;
  max-width:1100px;
  margin:26px auto 22px;
  padding:26px 18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.air-info-item h4{
  font-size:12px; letter-spacing:.6px; color:var(--air-brand);
  text-transform:uppercase; margin:0 0 10px; font-weight:600;
}
.air-info-item p{ margin:0; color:#222; line-height:1.6; }

/* ===== CTA (igual ao Lifeasier; prefixo air-) ===== */
.air-cta{ text-align:center; margin:56px 0 90px; position:relative; z-index:0; }
.air-cta__inner{
  max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; justify-content:center; align-items:center;
}
.air-cta__btn{
  display:inline-block; border:none; text-decoration:none; cursor:pointer;
  font-family:"Akatab",sans-serif; font-weight:400; font-size:16px; letter-spacing:2px;
  color:#fff; background:#6A5340; padding:10px 18px; border-radius:10px;
  transition: letter-spacing .4s, background-color .2s ease, transform .2s ease;
}
.air-cta__btn:hover{ background:#8cb258; color:#fff; letter-spacing:4px; }
.air-cta__btn:active{ background:#75924c; }

/* =========================
  EASYAIR
  
  DESIGN PROCESS (novo)
   Desktop = imagem ampla
   Mobile  = cartões legíveis
========================= */

/* Quando o figure tiver imagem real, esconder o placeholder */
.air-img-block.has-img::before{ display:none; }

/* Imagem da hero responsiva */
.air-img-block.has-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow: var(--air-shadow);
}


/* Figura desktop/tablet */
.air-media{
  max-width: 1100px;
  margin: 14px auto 26px;
  padding: 0 16px;
}
.air-media__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Lista mobile (por defeito escondida em desktop) */
.air-process-mobile{
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 0 16px;
  display: grid;
  gap: 12px;
}

/* Cartões mobile */
.air-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: #FFF4EC;                    /* pêssego claro */
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.air-step__icon{
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
}
.air-step__title{
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: #222;
}
.air-step__desc{
  margin: 0;
  opacity: .9;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

/* —— Breakpoints —— */
/* Desktop/Tablet: mostra imagem, esconde cartões */
@media (min-width: 900px){
  .air-process-mobile{ display: none; }
}

/* Mobile: esconde imagem, mostra cartões */
@media (max-width: 899px){
  .air-media--desktop{ display: none; }
}

/* Legibilidade mobile um pouco maior */
@media (max-width: 640px){
  .air-step{ padding: 18px 16px; gap: 12px; }
  .air-step__icon{ width: 44px; height: 44px; }
  .air-step__title{ font-size: 17px; }
  .air-step__desc{ font-size: 14.5px; }
}

/* ---- (OPCIONAL) Anula estilos antigos, se ainda existirem no CSS ---- */
.air-dp-figure, .air-steps { display: none !important; }


/* ===== easyAir CTA bottom spacing fix ===== */
.air-cta{
  margin: 56px 0 160px !important;   /* + espaço antes do footer */
}

@media (max-width: 768px){
  .air-cta{
    margin: 44px 0 160px !important; /* extra respiro no mobile */
  }
}

/* garante que o main não corta o espaçamento final */
.air-case{ padding-bottom: 160px; }

/* ===== Research cards — sem imagens ===== */
:root{
  --air-bg: #0f0f10;
  --air-text: #e9e7e4;
  --air-muted: #b9b3ab;
  --air-card: #161617;
  --air-border: #29292b;
  --air-orange: #ff8a3d;
  --air-orange-2: #ff7a00;
  --air-gray: #e6e6e6;
  --air-gray-text: #202124;
  --air-peach: #ffd2b3;
  --air-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.air-research{
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.air-research-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.5vw, 22px);
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(8px, 3vw, 12px);
}

@media (min-width: 720px){
  .air-research-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .air-research-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Cards */
.air-card{
  background: var(--air-card);
  border: 1px solid var(--air-border);
  border-radius: 18px;
  box-shadow: var(--air-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Speech-bubble header (puro CSS) */
.air-bubble{
  position: relative;
  font-weight: 700;
  line-height: 1.25;
  padding: clamp(12px, 2.2vw, 18px) clamp(14px, 2.5vw, 22px);
  border-bottom: 1px solid var(--air-border);
  font-size: clamp(1rem, 2.8vw, 1.1rem);
  color: #1a1a1a;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.air-bubble::after{
  content: "";
  position: absolute;
  left: clamp(18px, 5vw, 28px);
  bottom: -10px;
  width: 18px; height: 18px;
  background: inherit;
  border-right: 1px solid var(--air-border);
  border-bottom: 1px solid var(--air-border);
  transform: rotate(45deg);
}

/* Bubble color variants */
.air-bubble--orange{ background: linear-gradient(0deg, var(--air-orange) 0%, var(--air-orange-2) 100%); }
.air-bubble--gray{ background: var(--air-gray); color: var(--air-gray-text); }
.air-bubble--peach{ background: var(--air-peach); }

.air-card__body{
  padding: clamp(14px, 3vw, 20px) clamp(14px, 3vw, 20px) clamp(16px, 3vw, 22px);
  color: var(--air-text);
}

/* Quotes */
.air-quote{
  margin: 0 0 clamp(12px, 2.5vw, 16px) 0;
}
.air-quote:last-child{ margin-bottom: 0; }

.air-quote blockquote{
  margin: 0;
  font-style: italic;
  line-height: 1.55;
  font-size: clamp(.95rem, 2.5vw, 1.02rem);
  color: var(--air-text);
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--air-border);
  border-radius: 12px;
  padding: clamp(10px, 2.2vw, 14px) clamp(12px, 2.5vw, 16px);
  position: relative;
}
.air-quote blockquote::before{
  content: "“";
  position: absolute;
  top: -8px; left: 10px;
  font-size: 28px; line-height: 1;
  opacity: .25;
}
.air-quote__author{
  font-weight: 700;
  color: var(--air-text);
}
.air-quote figcaption{
  margin-top: 6px;
  font-size: clamp(.82rem, 2vw, .9rem);
  color: var(--air-muted);
}

/* Motion (opcional, suave) */
@media (prefers-reduced-motion: no-preference){
  .air-card{ transition: transform .22s ease, box-shadow .22s ease; }
  .air-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
}

/* Alto contraste para quem usa tema claro global */
@media (prefers-color-scheme: light){
  .air-card{ background: #fff; border-color: #e9e9ea; }
  .air-quote blockquote{ background: #fafafa; border-color: #e9e9ea; color: #1d1f23; }
  .air-quote__author{ color: #1d1f23; }
}

/* ===== overrides  ===== */

/* paleta mais suave */
:root{
  --air-bubble-bg: #ff9a4d;        /* laranja ligeiramente menos forte  */
  --air-bubble-stroke: #ead8cc;    /* linha do balão bem suave          */
}

/* grid centrado e com colunas fluídas */
.air-research-grid{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  /* auto-fit centra naturalmente quando sobram espaços */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  place-content: center;
}

/* todos os balões com a MESMA cor laranja suave */
.air-bubble,
.air-bubble--gray,
.air-bubble--peach{
  background: var(--air-bubble-bg) !important;
  color: #1a1a1a;
  border-bottom: 1px solid var(--air-bubble-stroke) !important;
}

/* triângulo do balão com a mesma borda suave */
.air-bubble::after{
  border-right: 1px solid var(--air-bubble-stroke) !important;
  border-bottom: 1px solid var(--air-bubble-stroke) !important;
}

/* tipografia: negrito mais suave */
.air-bubble{ font-weight: 600; }             /* antes era 700 */
.air-quote__author{ font-weight: 600; }      /* nomes dos autores */
.air-card b, .air-card strong{ font-weight: 600; }

/* opcional: linhas internas dos quotes também mais suaves */
.air-quote blockquote{
  border-color: #eee5de;                     /* tom mais claro */
}

/* ===== Sombras mais suaves no site ===== */

/* Imagens e figuras do case */
.air-img-block,
.air-img-block img,
.air-media,
.air-media__img,
figure img {
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04) !important;
}

/* Caso uses filter: drop-shadow em algum lugar, reduz também */
.air-img-block img,
.air-media__img {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* Bootstrap: reduzir .shadow, .shadow-lg, etc. */
.shadow, .shadow-sm, .shadow-lg, .shadow-none {
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

/* Cartões do projeto (se quiseres que acompanhem a suavização) */
.air-card {
  box-shadow: 0 8px 20px rgba(0,0,0,.10) !important; /* antes era mais forte */
}

/* Opcional: ainda mais leve em mobile */
@media (max-width: 640px){
  .air-img-block,
  .air-img-block img,
  .air-media,
  .air-media__img,
  .shadow, .shadow-lg {
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  }
}

/* Se existirem :hover que aumentam a sombra, neutraliza */
.air-img-block:hover,
.air-img-block img:hover,
.air-media__img:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* === remover caixas/quadros do HERO e DESIGN PROCESS (desktop) === */
.air-img-block,
.air-media {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* tamanhos/margens confortáveis e centrado */
.air-img-block.is-ultra.has-img {        /* HERO */
  max-width: 1200px;                     /* ajusta se quiseres mais/menos largo */
  margin-top: 12px !important;
  margin-bottom: 28px !important;
}

.air-media.air-media--desktop {          /* DESIGN PROCESS (desktop/tablet) */
  max-width: 1100px;
  margin-top: 12px !important;
  margin-bottom: 24px !important;
}

/* imagens “limpas”: sem sombras, sem caixas */
.air-img-block img,
.air-media__img {
  display: block;
  width: 100%;
  height: auto;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;               /* remove drop-shadow */
  border-radius: 18px;                    /* mantém só cantos suaves (muda para 0 se quiseres plano) */
}

/* opcional: se algum estilo global envolver figure img com sombra, neutraliza aqui */
figure img { box-shadow: none !important; filter: none !important; }

/* ===== manter HERO na mesma largura da info bar ===== */

/* 1) define uma largura máxima única para ambos */
:root{
  --air-content-max: 1100px;   /* ajusta aqui se quiseres mais/menos largo */
}

/* 2) aplica a largura e centra */
.air-info-bar,
.air-img-block.is-ultra.has-img{
  max-width: var(--air-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) remove qualquer “stretch” lateral do hero */
.air-img-block.is-ultra.has-img{
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 4) imagem limpa e contida */
.air-img-block.is-ultra.has-img img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 18px;       /* muda para 0 se quiseres cantos retos */
}

/* 5) em ecrãs pequenos, ambos ocupam 100% do content width */
@media (max-width: 768px){
  .air-info-bar,
  .air-img-block.is-ultra.has-img{ max-width: 100% !important; }
}


/* ===================== USER FLOW ===================== */

/* Layout/respiro */
.air-flow{ max-width:1100px; margin:28px auto; padding-inline:clamp(8px,3vw,12px); }
.air-flow__title{ margin:10px 0 12px; padding-top:6px; font-weight:700; }
.flow-card{ background:#fff; border:1px solid #ececef; border-radius:16px; padding:clamp(14px,2.2vw,18px); }

/* ---------- Stepper base (vertical) ---------- */
.stepper{
  /* controla o espaçamento entre pills */
  --step-gap: 34px;

  /* tema default = CURRENT (cinza) */
  --chip-bg:#f7f7f8; --chip-bd:#d7d7d9; --chip-tx:#1d1f23;
  --arrow:#9aa0a6;  /* cor do traço/cabeça */

  display:grid; gap:var(--step-gap);
}
.stepper .step{
  position:relative; list-style:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:48px; padding:12px 16px;
  border-radius:999px; background:var(--chip-bg); border:2px solid var(--chip-bd); color:var(--chip-tx);
  font-weight:600;
  overflow:visible;   /* não corta a seta */
}

/* seta SVG vertical centrada entre cada pill */
.stepper .step::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:100%; margin-top:10px;
  width:14px; height: calc(var(--step-gap) - 10px);
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
}
.stepper .step:last-child::after{ display:none; }

/* ---------- Tema PROPOSED (laranja, texto preto) ---------- */
.stepper.is-accent{
  --chip-bg:#fff7f0; --chip-bd:#ff7f2a; --chip-tx:#1d1f23;
  --arrow:#ff7f2a;
}

/* ---------- Arrows (SVGs percent-encodados) ---------- */
/* Cinza (CURRENT) */
.stepper.is-muted .step::after,
.stepper:not(.is-accent) .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%239aa0a6' stroke-width='3.5'/%3E%3Cpath d='M1,104 L9,104 L5,120 Z' fill='%239aa0a6'/%3E%3C/svg%3E");
}
/* Laranja (PROPOSED) */
.stepper.is-accent .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%23ff7f2a' stroke-width='3.5'/%3E%3Cpath d='M1,104 L9,104 L5,120 Z' fill='%23ff7f2a'/%3E%3C/svg%3E");
}

/* ---------- Responsivo: mantém vertical; podes reduzir gap no mobile se quiser ---------- */
@media (max-width:700px){
  .stepper{ --step-gap: 30px; }
}
/* Linha/ seta MAIS FINA entre as pills (vertical) */

/* Current – cinza */
.stepper.is-muted .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%239aa0a6' stroke-width='2'/%3E%3Cpath d='M2,104 L8,104 L5,118 Z' fill='%239aa0a6'/%3E%3C/svg%3E") !important;
}

/* Proposed – laranja */
.stepper.is-accent .step::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cline x1='5' y1='0' x2='5' y2='104' stroke='%23ff7f2a' stroke-width='2'/%3E%3Cpath d='M2,104 L8,104 L5,118 Z' fill='%23ff7f2a'/%3E%3C/svg%3E") !important;
}


/* Título principal mantém destaque */
.air-flow__title{
    text-align: center;
  margin-bottom: 14px;   /* opcional: respiro */
  padding-bottom: 6px;   /* opcional: respiro */
  font-weight: 400;           /* ou 600 se quiseres mais ênfase */
  text-align: center;
}

/* Subtítulos bem leves (Current / Proposed) */
.air-flow__subtitle{
  font-weight: 300 !important;          /* menos “negrito” */
  text-align: center;
  font-synthesis-weight: none;          /* evita bold “simulado” */
  /* Se a tua fonte for variável, isto torna ainda mais leve:
     font-variation-settings: "wght" 300; */
}

/* VIEWPORT com padding lateral para mostrar as vizinhas */
.wf-viewport {
  overflow: hidden;
  padding: 0 10vw;            /* controla quanto “espreita” dos lados */
}

/* Faixa */
.wf-track {
  display: flex;
  gap: 16px;
  padding: 16px 0;            /* sem padding horizontal aqui */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

/* Cada item ocupa parte da largura e alinha ao centro */
.wf-item {
  flex: 0 0 84%;
  scroll-snap-align: center;
}

@media (min-width: 640px)  { .wf-item { flex-basis: 80%; } }  /* tablet */
@media (min-width: 1024px) { .wf-item { flex-basis: 70%; } }  /* desktop */

/* Ajuste dos botões, já que há padding no viewport */
.wf-prev { left: 3vw;  }
.wf-next { right: 3vw; }

/* escopo easyair */
#air-easyair{
  --air-orange:#ff7a00;
  --air-border:#e6e6e6;
  --air-gap:16px;
  --air-radius:14px;
}

/* limpa figure cinza só aqui */
#air-easyair .air-figure{ background:transparent; box-shadow:none; border:0; padding:0; }



/* =========================
   EASYAIR – CAROUSEL (escopo)
   ========================= */
#air-easyair{
  /* Vars do case study */
  --air-orange: #ff7a00;
  --air-border: #e6e6e6;
  --air-gap: 16px;
  --air-radius: 14px;
  /* largura/coluna da secção (ajusta se precisares) */
  --air-max-width: min(1100px, 92%);
}

/* figure alinhada à coluna e sem “bloco cinza” */
#air-easyair .air-figure{
  width: var(--air-max-width);
  margin-inline: auto;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* ===== layout base ===== */
#air-easyair .air-carousel{ position:relative; }

/* viewport é o scroller; sem barra visível */
#air-easyair .air-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 clamp(8px, 2.5vw, 24px);  /* menos respiro lateral p/ caber na coluna */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* esconder scrollbar em todos os browsers */
  -ms-overflow-style: none;     /* IE/Edge antigo */
  scrollbar-width: none;        /* Firefox */
}
#air-easyair .air-viewport::-webkit-scrollbar{ display: none; } /* WebKit */

/* faixa e itens */
#air-easyair .air-track{
  display:flex;
  gap: var(--air-gap);
  padding: 16px 0;
}
#air-easyair .air-item{
  flex: 0 0 92%;
  scroll-snap-align: center;    /* 1 visível (mobile) */
}
@media (min-width:640px){  #air-easyair .air-item{ flex-basis: 48%; } }  /* 2 (tablet) */
@media (min-width:1024px){ #air-easyair .air-item{ flex-basis: 32%; } }  /* 3 (desktop) */

#air-easyair .air-card{
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius);
  background: #fff;
  padding: 10px;
}

/* ===== imagens por completo (sem cortes) ===== */
#air-easyair .air-media{
  height: clamp(240px, 36vw, 520px);
  width: 100%;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#air-easyair .air-media img{
  /* força SEMPRE a caber inteiro, mesmo contra CSS global */
  object-fit: contain !important;
  object-position: center center !important;

  /* evita “zoom” forçado por regras globais */
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;

  -webkit-user-drag: none;
  user-select: none;
}

/* ===== setas ===== */
#air-easyair .air-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 0;
  background: var(--air-orange);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  cursor: pointer;
}
#air-easyair .air-prev{ left: clamp(8px, 1.25vw, 16px); }
#air-easyair .air-next{ right: clamp(8px, 1.25vw, 16px); }
#air-easyair .air-nav svg{ width: 18px; height: 18px; fill: #fff; }

/* ===== dots ===== */
#air-easyair .air-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
#air-easyair .air-dot{
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #ffd9bf;
}
#air-easyair .air-dot.is-active{ background: var(--air-orange); }

/* ===== drag cursor opcional ===== */
#air-easyair .air-viewport.air-grabbing{ cursor: grabbing; }

/* EASYAIR — frame maior para caber tudo sem corte */
#air-easyair .air-media{
  /* +alto que antes: ajusta se quiseres ainda mais */
  height: clamp(320px, 48vw, 680px);
  width: 100%;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#air-easyair .air-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block;
}
#air-easyair .air-nav.is-disabled[disabled]{
  opacity: .45;
  pointer-events: none;  /* garante que não clica */
  box-shadow: none;
}

/* ===== EASYAIR – VALIDATE  ===== */
#air-easyair-validate{
  --air-orange: #ff7a00;             /* laranja do case study */
  --air-orange-200: #ffe0cc;
  --air-teal: #0d6b63;
  --air-bg: #ffffff;
  --air-muted: #6b7280;
  --air-border: #e8e8e8;
  --air-radius: 16px;
  --air-gap: 20px;
  --air-maxw: min(1100px, 92%);
  color: #111;
}

/* Alinhamento com a coluna do site */
#air-easyair-validate .air-section,
#air-easyair-validate .air-feedback,
#air-easyair-validate .air-outcomes{
  width: var(--air-maxw);
  margin-inline: auto;
}

/* ===== Títulos ===== */

/* 1) Prototype Testing & Peer Feedback — igual aos outros subtítulos:
      alinhado à esquerda e sem negrito pesado */
#air-easyair-validate .air-section h2{
  text-align: left;
  font-weight: 400;                 /* sem bold pesado, igual aos subtítulos anteriores */
  letter-spacing: .01em;
  line-height: 1.2;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin: 0 0 clamp(12px, 2vw, 18px);
  color: #111;
}

/* === FIX: títulos dos blocos em Validate iguais ao "User Flow Redesign" === */
#air-easyair-validate .air-feedback__title,
#air-easyair-validate .air-outcomes__title{
  text-align: center !important;
  font-weight: 700 !important;                 /* mesmo peso */
  font-size: clamp(1.25rem, 2.0vw, 1.5rem) !important; /* mesmo scale de h3 */
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
  margin: 0 0 12px !important;
  color: #111 !important;
  padding-bottom: 10px;
}

/* (opcional) garantir que a referência "User Flow Redesign" também fica 700 */
.air-flow__title{ font-weight: 700 !important; }


/* -------- General Feedback -------- */
#air-easyair-validate .air-feedback{
  background: linear-gradient(180deg, #fafafa, #f7f7f7);
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius);
  padding: clamp(16px, 2.5vw, 28px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  margin-top: 6px;
}

#air-easyair-validate .air-feedback__grid{
  display: grid;
  grid-template-columns: 1fr minmax(8px, 1px) 1fr;
  align-items: start;
  gap: clamp(12px, 2vw, 24px);
}

#air-easyair-validate .air-divider{
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #dcdcdc, transparent);
  justify-self: center;
}

#air-easyair-validate .air-panel{
  background: var(--air-bg);
  border: 1px solid var(--air-border);
  border-radius: calc(var(--air-radius) - 6px);
  padding: clamp(12px, 2.2vw, 20px);
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}

/* easyJet & easyAir centrados */
#air-easyair-validate .air-panel__brand{
  text-align: center;
  font-weight: 500;
  margin: 0 0 8px 0;
  letter-spacing: .2px;
}
#air-easyair-validate .air-panel__brand.air-jet{ color: #555; }
#air-easyair-validate .air-panel__brand.air-air{ color: var(--air-orange); }

#air-easyair-validate .air-list{
  margin: 0; padding: 0 0 0 1.1em;
  color: #222;
}
#air-easyair-validate .air-list li{ margin: .45em 0; }

/* Bullets do lado easyAir = discos laranja (igual ao easyJet mas com cor) */
#air-easyair-validate .air-list--positive{
  list-style: disc outside !important;
  padding-left: 1.1em;
}
#air-easyair-validate .air-list--positive li{
  position: static !important;
  padding-left: 0 !important;
}
#air-easyair-validate .air-list--positive li::before{ content: none !important; }
#air-easyair-validate .air-list--positive li::marker{ color: var(--air-orange); }

/* Stack no mobile */
@media (max-width: 780px){
  #air-easyair-validate .air-feedback__grid{ grid-template-columns: 1fr; }
  #air-easyair-validate .air-divider{ display: none; }
}

/* -------- Testing Outcomes -------- */
#air-easyair-validate .air-outcomes{ margin-top: clamp(18px, 3vw, 28px); }

#air-easyair-validate .air-outcomes__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
}
@media (max-width: 980px){
  #air-easyair-validate .air-outcomes__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  #air-easyair-validate .air-outcomes__grid{ grid-template-columns: 1fr; }
}

#air-easyair-validate .air-badge{
  padding: 16px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255,102,0,.30);
  /* gradiente suavizado (mais claro) */
  background: linear-gradient(
    180deg,
    #fff4ee 0%,          /* topo bem clarinho, sem branco puro */
    #ffe6d6 38%,         /* pêssego leve */
    rgba(255,102,0,.16) 100%  /* um toque de laranja no rodapé */
  );
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
  text-align: center;
}


#air-easyair-validate .air-badge__label{
  font-weight: 500; letter-spacing: .02em; color: #222;
}
#air-easyair-validate .air-badge__score{
  font-weight: 800; font-size: 1.25rem; margin: 4px 0 2px;
  color: var(--air-orange);
}
#air-easyair-validate .air-badge__desc{
  margin: 0; color: #333; font-size: .95rem; 
}
/* EasyAir / EasyJet sempre #272222 */
#air-easyair-validate .air-badge__desc strong{ color: #272222 !important; }

/* Forçar o nome para a 2ª linha */
#air-easyair-validate .air-badge__desc strong{
  display: block;               /* quebra de linha garantida */
  margin-top: 4px;              /* respiro opcional */
  font-weight: 700;
  color: #272222 !important;    /* já tinhas esta cor */
  white-space: nowrap;          /* evita partir EasyAir/EasyJet ao meio */
}

/* (Opcional) manter altura alinhada entre cards */
#air-easyair-validate .air-badge__desc{
  min-height: 3.2em;            /* ajuste fino se precisares */
  line-height: 1.35;
}


/* ====== PATCH EASYAIR (overrides mínimos) ====== */

/* 1) Prototype Testing & Peer Feedback -> igual aos teus h2 padrão */
#air-easyair-validate .air-section h2{
  text-align: left;
  font-weight: 500;              /* igual ao Wireframes */
  font-size: 28px;               /* igual ao .air-section h2 */
  margin: 0 0 10px;              /* igual ao .air-section h2 */
  color: var(--air-ink);
}

/* 2) easyJet/easyAir centrados com padding inferior */
#air-easyair-validate .air-panel__brand{
  text-align: center;
  padding-bottom: 6px;           /* pedido */
}

/* 3) “General Feedback” e “Testing Outcomes”
      usam o mesmo “peso/escala” do User Flow Redesign (sem crescer) */
#air-easyair-validate .air-feedback__title,
#air-easyair-validate .air-outcomes__title{
  text-align: center;
  font-weight: 400;              /* como o teu .air-flow__title final */
  font-size: inherit;            /* não aumenta o tamanho */
  margin-bottom: 12px;
 
}

/* 4) Carrossel — mobile SEM cortes (imagem sempre inteira) */
@media (max-width: 640px){
  #air-easyair .air-item{ flex-basis: 92%; }

  /* a caixa adopta proporção alta (tipo telemóvel) e deixa o img conter */
  #air-easyair .air-media{
    height: auto;                /* deixa calcular pela ratio */
    aspect-ratio: 9 / 16;        /* alto/estreito p/ wireframes */
  }
  #air-easyair .air-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* === CAROUSEL MOBILE: imagem SEM corte (override forte) === */
@media (max-width: 640px){
  /* a “moldura” passa a ter ratio alto e deixa a imagem mandar */
  #air-easyair .air-media{
    height: auto !important;
    aspect-ratio: 9 / 16 !important;      /* ajusta para 10/19 ou 3/5 se preferires */
    display: block !important;
  }
  /* a imagem ocupa toda a moldura mas SEM cortar */
  #air-easyair .air-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* mostra por inteiro */
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* opcional: um pouco menos de padding no cartão para caber tudo confortável */
  #air-easyair .air-card{ padding: 8px !important; }
}


/* ===== Before/After responsivo (sem JS) ===== */
.air-ba{
  max-width:1100px; margin:16px auto 40px; padding:0 16px;
  display:grid; gap:22px;
}
.ba-pair{
  background:#fff; border:1px solid #eef1f4; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06); padding:14px;
}
.ba-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ba-head h3{ margin:2px 2px 8px; font-size:16px; font-weight:800; color:#18605C; }

/* grade principal */
.ba-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ba-cols--asym{ grid-template-columns:1.2fr .8fr; }

.ba-col{ background:#fbfffe; border:1px solid #eef1f4; border-radius:12px; padding:10px; }
.ba-before{ background:#f7f9f8; }
.ba-col figcaption{ font-size:12px; text-transform:uppercase; letter-spacing:.25px; font-weight:800; color:#1C8A84; margin:0 0 8px 2px; }
.ba-col img{ width:100%; height:auto; display:block; border-radius:10px; }

/* thumbs (extras) */
.ba-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .ba-thumbs{ grid-template-columns:repeat(2,1fr); } }

/* ===== Toggle para mobile ===== */
.ba-toggle{ position:relative; display:none; align-items:center; gap:0; background:#e9f4f3; border-radius:999px; padding:4px; }
.ba-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.ba-toggle label{
  position:relative; z-index:2; flex:1 1 0; text-align:center;
  font-size:12px; font-weight:800; color:#18605C; padding:6px 10px; cursor:pointer; border-radius:999px;
}
.ba-pill{
  position:absolute; z-index:1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:#1C8A84; border-radius:999px; transition:transform .25s ease;
}
#ba-1-after:checked ~ .ba-pill,
#ba-2-after:checked ~ .ba-pill,
#ba-3-after:checked ~ .ba-pill,
#ba-4-after:checked ~ .ba-pill{ transform:translateX(100%); }

#ba-1-before:checked ~ label[for="ba-1-before"],
#ba-2-before:checked ~ label[for="ba-2-before"],
#ba-3-before:checked ~ label[for="ba-3-before"],
#ba-4-before:checked ~ label[for="ba-4-before"],
#ba-1-after:checked ~ label[for="ba-1-after"],
#ba-2-after:checked ~ label[for="ba-2-after"],
#ba-3-after:checked ~ label[for="ba-3-after"],
#ba-4-after:checked ~ label[for="ba-4-after"]{ color:#fff; }

/* ===== Comportamento responsivo ===== */
/* Desktop: mostra os dois lados; Mobile: usa o toggle */
@media (max-width: 900px){
  .ba-cols{ grid-template-columns:1fr; }
  .ba-toggle{ display:flex; }
  /* por padrão (mobile) mostra o BEFORE quando o respectivo radio “before” está checked;
     quando muda para “after”, escondemos o before e mostramos o after */
  .ba-pair .ba-after{ display:none; }
  /* Pair 1 */
  #ba-1-after:checked ~ .ba-pill{} /* (só para mover a pílula) */
  #ba-1-after:checked ~ label[for="ba-1-after"]{}
  #ba-1-before:checked ~ label[for="ba-1-before"]{}
  /* alternância visual do conteúdo (pair 1) */
  #ba-1-after:checked ~ .ba-pill{} /* já definido acima */
  /* Pair 1 conteúdos */
  .ba-pair:nth-of-type(1) .ba-after{ display:none; }
  .ba-pair:nth-of-type(1) .ba-before{ display:block; }
  /* quando “after” está checked… */
  #ba-1-after:checked ~ .ba-pill{} /* pílula move */
  /* não temos um seletor direto parent->sibling aqui, então usamos container queries simples: */
}

/* truque simples: no mobile escondemos manualmente via classes */
@media (max-width: 900px){
  /* Pair 1 */
  #ba-1-before:checked ~ label[for="ba-1-before"]{}
  #ba-1-after:checked ~ label[for="ba-1-after"]{}
  /* Forçamos com classes auxiliares no HTML: não necessário — usaremos o seletor abaixo */
  .ba-pair:nth-of-type(1) .ba-after{ display:none; }
  #ba-1-after:checked ~ .ba-pill{} /* move */
}
/* Como CSS puro não permite “alcançar” fora do .ba-toggle, usamos a seguinte regra:
   no mobile mostramos apenas 1 coluna (a primeira que estiver na ordem DOM).
   Então no HTML, a ordem é: BEFORE, AFTER. Para mostrar AFTER por defeito, basta
   inverter a ordem no DOM. Se preferires AFTER por defeito, troca a ordem dos figures. */
/* ===== Tabs + Painel único ===== */
.air-tabs{ max-width:1100px; margin:16px auto 40px; padding:0 16px; }
.air-tabs__row{
  display:flex; gap:8px; flex-wrap:wrap; background:#f7f9f8; padding:8px 10px;
  border-radius:12px; box-shadow:inset 0 1px 0 rgba(0,0,0,.03); margin-bottom:10px;
}
.air-tab{
  appearance:none; border:1px solid rgba(28,138,132,.25); cursor:pointer;
  padding:8px 12px; border-radius:999px; background:rgba(28,138,132,.15); color:#18605C;
  font-weight:800; font-size:13px;
}
.air-tab.is-active{ background:#1C8A84; border-color:#1C8A84; color:#fff; }

.ba-pane{
  background:#fff; border:1px solid #eef1f4; border-radius:14px; padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.ba-pane[hidden]{ display:none; }

.ba-pane__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.ba-pane__head h3{ margin:0; font-size:16px; font-weight:800; color:#18605C; }

/* Toggle Before/After */
.ba-toggle{ display:flex; background:#e9f4f3; border-radius:999px; padding:4px; gap:4px; }
.ba-toggle__btn{
  border:0; background:transparent; border-radius:999px; padding:6px 12px;
  font-size:12px; font-weight:200; color:#18605C; cursor:pointer;
}
.ba-toggle__btn.is-active{ background:#1C8A84; color:#fff; }

/* Card único (apenas 1 visível por vez) */
.ba-card{ margin:0; }
.ba-card[hidden]{ display:none !important; }
.ba-cap{ font-size:12px; text-transform:uppercase; letter-spacing:.25px; font-weight:800; color:#1C8A84; margin:0 0 8px 2px; }
.ba-card img{ width:100%; height:auto; display:block; border-radius:10px; }

/* Grid de thumbs no “Before” dos Extras */
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .ba-grid{ grid-template-columns:repeat(2,1fr); } }


/* ===== Menu (tabs) – centrado, menu cinza, contraste alto ===== */
.air-tabs__row{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  background:#F2F2F2;                    /* cinza do menu */
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  margin-bottom:12px;
}
.air-tab{
  appearance:none; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  background:#FFFFFF;                     /* botão off branco */
  border:1px solid #CCCBCB;
  color:#272222; font-weight:800; font-size:13px;
}

.air-tab.is-active{
  background:#FF6600;                     /* laranja forte ativo */
  border-color:#FF6600; color:#FFFFFF;
  box-shadow:0 6px 14px rgba(255,102,0,.18);
}

/* ===== Painel com Before & After lado a lado ===== */
.air-tabs{ max-width:1100px; margin:0 auto 34px; padding:0 16px; }
.ba-pane{
  background:#fff; border:1px solid #EEF1F4; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;          /* 2 colunas */
  gap:16px;
}
.ba-pane[hidden]{ display:none; }
.ba-pane__head{
  grid-column:1 / -1; display:flex; justify-content:center; align-items:center;
  text-align:center; margin-bottom:4px;
}
.ba-pane__head h3{ margin:0; color:#272222; font-size:16px; }

/* ===== Quadro com altura fixa ===== */
:root{
  --ba-stage-d: 560px;  /* altura desktop */
  --ba-stage-m: 380px;  /* altura mobile  */
}
@media (max-width:900px){
  :root{ --ba-stage-d: var(--ba-stage-m); }
  .ba-pane{ grid-template-columns:1fr; }  /* empilha no mobile */
}

.ba-card{
  background:#FFFFFF;
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  min-height: var(--ba-stage-d);
  max-height: var(--ba-stage-d);
}
.ba-card--before{ background:#FBFBFB; }

.ba-cap{
  text-align:center; color:#FF6600; font-weight:800;
  text-transform:uppercase; letter-spacing:.25px;
  margin:0 0 8px;
}

/* stage interno para conter a imagem na altura fixa */
.ba-shot{
  position:relative; flex:1 1 auto; min-height:0;  /* permite o contain funcionar */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:10px;
}
.ba-shot img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* grid de thumbs no BEFORE dos Extras */
.ba-grid{
  width:100%; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.ba-grid img{
  width:100%; height:100%; object-fit:contain; border-radius:8px;
}
@media (max-width:640px){ .ba-grid{ grid-template-columns:repeat(2,1fr); } }
/* ===== título do módulo (mesmo look dos teus h2 + padding) ===== */
.ba-super{
  text-align:center;
  padding: 14px 0;              /* padding superior/inferior */
  margin: 6px 0 12px;
  font-size: 20px;              /* igual aos teus h2 de secção */
  font-weight: 800;
  color:#272222;
}

/* ===== Menu (tabs) – centrado, menu cinza, contraste alto ===== */
.air-tabs{ max-width:1100px; margin:0 auto 34px; padding:0 16px; }
.air-tabs__row{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  background:#F2F2F2;                    /* cinza do menu */
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  margin-bottom:12px;
}
.air-tab{
  appearance:none; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  background:#FFFFFF;                     /* botão off branco */
  border:2px solid #FF6600;
  color:#272222; font-weight:600; font-size:13px;
}

.air-tab.is-active{
  background:#FF6600;                     /* laranja ativo */
  border-color:#FF6600; color:#FFFFFF;
  box-shadow:0 6px 14px rgba(255,102,0,.18);
}

/* ===== Painel com Before & After lado a lado ===== */
.ba-pane{
  background:#fff; border:1px solid #EEF1F4; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:14px;

  display:grid;
  grid-template-columns:1fr 1fr;          /* 2 colunas */
  gap:16px;
}
.ba-pane[hidden]{ display:none; }
.ba-pane__head{
  grid-column:1 / -1; display:flex; justify-content:center; align-items:center;
  text-align:center; margin-bottom:4px;
}
.ba-pane__head h3{ margin:0; color:#272222; font-size:16px; font-weight:600; }

/* ===== Quadro com altura fixa ===== */
:root{
  --ba-stage-d: 560px;  /* altura desktop */
  --ba-stage-m: 380px;  /* altura mobile  */
}
@media (max-width:900px){
  :root{ --ba-stage-d: var(--ba-stage-m); }
  .ba-pane{ grid-template-columns:1fr; }  /* empilha no mobile */
}

.ba-card{
  background:#FFFFFF;
  border:1px solid #D9D9D9;
  border-radius:12px;
  padding:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  min-height: var(--ba-stage-d);
  max-height: var(--ba-stage-d);
}
.ba-card--before{ background:#FBFBFB; }

.ba-cap{
  text-align:center; color:#FF6600; font-weight:800;
  text-transform:uppercase; letter-spacing:.25px;
  margin:0 0 8px;
}

/* stage interno para conter a imagem na altura fixa */
.ba-shot{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:10px;
}
.ba-shot img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* grid de thumbs no BEFORE dos Extras */
.ba-grid{
  width:100%; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.ba-grid img{
  width:100%; height:100%; object-fit:contain; border-radius:8px;
}
@media (max-width:640px){ .ba-grid{ grid-template-columns:repeat(2,1fr); } }

/* Remover o acoplamento que estava a escalar os dois títulos */
.air-outcomes__title{            /* mantém Outcomes como quiseres */
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.25;
  margin: 16px 0 18px;
  color: #111;
}

/* Before & After — igual ao Outcomes, mas no escopo certo (fora do validate) */
.air-tabs .ba-super,
.air-ba .ba-super,
#air-easyair .ba-super{
  text-align: center;
  font-weight: 700 !important;                    /* derruba o 800 antigo */
  font-size: clamp(22px, 2.1vw, 23px) !important; /* mesma escala do Outcomes */
  line-height: 1.25;
  margin: 16px 0 18px;
  color: #111;
}

/* Final Outcomes/References usam apenas o estilo padrão dos teus h2 */
#final-outcomes h2,{
  /* não precisa nada: herda de .air-section h2 */
}

/* Se existir alguma regra global que force .ba-super ou .air-outcomes__title,
   neutraliza apenas dentro destes blocos (defensivo, opcional): */
#final-outcomes .ba-super,
#final-outcomes .air-outcomes__title,
{
  all: unset;
  display: block;
  font: inherit;
}


/* 1) Card especial com grelha: deixa crescer à vontade */
.ba-card--grid{
  min-height: auto !important;
  max-height: none !important;
}
.ba-card--grid .ba-shot{
  overflow: visible !important;
  min-height: 0;
  height: auto;
}
.ba-card--grid .ba-grid{
  height: auto;            /* deixa a grelha expandir */
  grid-auto-rows: auto;    /* linhas pela altura do conteúdo */
}

/* 2) Imagens da grelha: largura total, altura automática (sem esticar) */
.ba-card--grid .ba-grid img{
  width: 100%;
  height: auto !important;    /* override ao 100% anterior */
  object-fit: contain;        /* seguro */
  display: block;
}

/* 3) Opcional: no mobile, 2 colunas para garantir legibilidade */
@media (max-width: 640px){
  #pane-extras .ba-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}


/* ===== Tabs ===== */
.air-tab{ padding: 10px 14px; }

.air-tab.is-active,
.air-tab[aria-selected="true"]{
  background: var(--btn-bg-active);
  border-color: var(--btn-bd-active);
  color: var(--btn-tx-active);
  box-shadow: 0 6px 14px rgba(255,102,0,.18);
}


/* Pressed */
.air-tab:active{
  transform: translateY(1px);
  background: var(--btn-bg-pressed);
  border-color: var(--btn-bg-pressed);
  color: var(--ea-white);
}

/* Disabled */
.air-tab[disabled],
.air-tab.is-disabled{
  background: var(--btn-bg-disabled);
  border-color: var(--ea-g2);
  color: var(--btn-tx-disabled);
  cursor: not-allowed;
  box-shadow: none;
}



/* ===== Setas do carrossel ===== */
#air-easyair .air-nav{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ea-orange);
  background: var(--ea-orange);
  color: var(--ea-white);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
#air-easyair .air-nav svg{ fill: currentColor; }


/* Pressed */
#air-easyair .air-nav:active{
  transform: translateY(1px);
  background: #e65c00;
  border-color: #e65c00;
  color: var(--ea-white);
}

/* Disabled */
#air-easyair .air-nav.is-disabled[disabled]{
  background: var(--ea-g3);
  border-color: var(--ea-g2);
  color: var(--btn-tx-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* Ajuste leve em mobile */
@media (max-width: 480px){
  .air-tab{ padding: 9px 12px; }
}


/* =========================================
   HOVER — APENAS DESKTOP (novo, isolado)
   + tokens necessários e ring OFF
   ========================================= */

/* Tokens usados pelas tabs/nav/dots (sem mudar CTA) */
:where(.air-tab, #air-easyair .air-nav, #air-easyair .air-dot){
  /* cores base */
  --btn-bg:#FFFFFF;
  --btn-bd:#CCCBCB;
  --btn-tx:#272222;

  /* estados */
  --btn-bg-active:#FF6600;
  --btn-bd-active:#FF6600;
  --btn-tx-active:#FFFFFF;

  --btn-bg-hover:#FFA366;     /* só usado no desktop */
  --btn-bd-hover:#FFA366;
  --btn-tx-hover:#272222;

  --btn-bg-pressed:#e65c00;
  --btn-bg-disabled:#D9D9D9;
  --btn-tx-disabled:#8a8a8a;

  /* vars usadas nas setas/dots */
  --ea-orange:#FF6600;
  --ea-white:#FFFFFF;
  --ea-g2:#CCCBCB;
}

/* Remove QUALQUER “anel” (outline/box-shadow) nas tabs/nav/dots */
.air-tab,
.air-tab:focus,
.air-tab:focus-visible,
.air-tab:active,
.air-tab:hover,
#air-easyair .air-nav,
#air-easyair .air-nav:focus,
#air-easyair .air-nav:focus-visible,
#air-easyair .air-nav:active,
#air-easyair .air-nav:hover,
#air-easyair .air-dot,
#air-easyair .air-dot:focus,
#air-easyair .air-dot:focus-visible,
#air-easyair .air-dot:active,
#air-easyair .air-dot:hover{
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- HOVER SÓ EM DESKTOP REAL (rato) ---------- */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* Tabs inativas ao pairar */
  .air-tab:not(.is-active):hover{
    background: var(--btn-bg-hover) !important;
    border-color: var(--btn-bd-hover) !important;
    color: var(--btn-tx-hover) !important;
  }

  /* Setas do carrossel ao pairar */
  #air-easyair .air-nav:not([disabled]):hover{
    background: var(--ea-white) !important;
    border: 1px solid var(--ea-orange) !important;
    color: var(--ea-orange) !important;
  }

  /* Dots ao pairar (não ativos) */
  #air-easyair .air-dot:not(.is-active):hover{
    background: var(--btn-bg-hover) !important;
    border: 1px solid var(--btn-bd-hover) !important;
    transform: scale(1.2);
  }
}

/* (GARANTIA) o CTA não é afetado: .air-cta__btn permanece como está */

@media (min-width: 900px){
  .air-media.air-media--desktop{
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - clamp(24px, 4vw, 48px)) !important; /* cria folga nas laterais */
    max-width: calc(var(--air-content-max, 1100px) - clamp(24px, 4vw, 48px)) !important;
  }
}

/* easyAir — nav disabled com leve transparência */
#air-easyair .air-nav.is-disabled[disabled]{
  opacity: 1 !important;                 /* não desbota o ícone */
  /* fallback */
  background: rgba(217,217,217,.85) !important;   /* ~#D9D9D9 a 85% */
  border-color: rgba(207,207,207,.85) !important; /* aro com alpha */
  /* se o browser suportar, usa color-mix (fica mais bonito) */
  background: color-mix(in srgb, #D9D9D9 85%, transparent) !important;
  border-color: color-mix(in srgb, #CFCFCF 85%, transparent) !important;

  color: #8a8a8a !important;             /* seta cinza */
  box-shadow: none !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  background-image: none !important;
}

/* não muda em hover/active */
#air-easyair .air-nav.is-disabled[disabled]:hover,
#air-easyair .air-nav.is-disabled[disabled]:active{
  transform: none !important;
  background: rgba(217,217,217,.85) !important;
  border-color: rgba(207,207,207,.85) !important;
}

/* FLOWS por padrão (mobile) 1 coluna */
.air-flow__cols{
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  align-items: start;
  grid-template-columns: 1fr;      /* <— garante 1 coluna no mobile */
}

/* a partir de desktop/tablet, 2 colunas lado a lado */
@media (min-width: 900px){
  .air-flow__cols{
    grid-template-columns: 1fr 1fr; /* <— volta a pôr lado a lado */
  }
}

/* === USER FLOW — subtítulos alinhados na MESMA linha === */
@media (min-width: 980px){
  .air-flow__cols{
    display:grid;
    grid-template-columns: 1fr 1fr;  /* 2 colunas fixas */
    gap: clamp(16px, 2.5vw, 24px);
    align-items:start;
  }

  /* “achata” as colunas para poder posicionar itens em linhas do grid */
  .air-flow__col{ display: contents; }

  /* Current (1ª coluna) */
  .air-flow__col:nth-of-type(1) .air-flow__subtitle{ grid-column:1; grid-row:1; margin:0 0 12px !important; }
  .air-flow__col:nth-of-type(1) .flow-card{       grid-column:1; grid-row:2; margin:0 !important; }

  /* Proposed (2ª coluna) */
  .air-flow__col:nth-of-type(2) .air-flow__subtitle{ grid-column:2; grid-row:1; margin:0 0 12px !important; }
  .air-flow__col:nth-of-type(2) .flow-card{       grid-column:2; grid-row:2; margin:0 !important; }
}

/* normaliza a “caixa” dos subtítulos (evita colapso de margem) */
.air-flow__subtitle{
  display:flex; align-items:flex-end; justify-content:center;
  min-height:32px; padding:0 !important; margin:0 0 12px !important;
  font-weight:300 !important;
}
.flow-card{ margin:0 !important; }


/* ===== User Flow — centrar a lista <ol> no MOBILE ===== */
@media (max-width: 700px){
  .air-flow .flow-card .stepper{
    list-style: none !important;           /* remove números/bullets */
    padding-left: 0 !important;            /* remove indent padrão do <ol> */
    padding-inline-start: 0 !important;
    margin-left: auto !important;          /* centra o bloco */
    margin-right: auto !important;
    width: fit-content;                     /* encolhe ao conteúdo para centrar */
  }
}




  /* GLOBAL SITE*/

/* ===== FIX GLOBAL — forçar a mesma base em todas as páginas ===== */
html { font-size: 16px !important; }           /* 1rem = 16px */
body { font-size: 1rem !important; line-height: 1.6; }

/* Evitar que wrappers mudem o “base” */
.case-detail, main, .container, .container-fluid {
  font-size: 1rem !important;
}

/* Escala de títulos consistente (fluida) */
:root{
  --fs-h1: clamp(1.75rem, 1.1vw + 1.2rem, 2.25rem);
  --fs-h2: clamp(1.375rem, 0.8vw + 1rem, 1.75rem);
  --fs-h3: clamp(1.125rem, 0.5vw + 0.9rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
}

.case-detail h1{ font-size: var(--fs-h1) !important; line-height: 1.25; }
.case-detail h2{ font-size: var(--fs-h2) !important; line-height: 1.3; }
.case-detail h3{ font-size: var(--fs-h3) !important; line-height: 1.35; }
.case-detail p,
.case-detail li{ font-size: var(--fs-body) !important; }

/* Kicker/legenda */
.case-detail .case-kicker,
.case-detail .rf-sub,
.case-detail .onb-tab__label{
  font-size: var(--fs-small) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ===== INFO BAR — títulos e conteúdos iguais em todos ===== */
.lf-info-bar, .case-meta { font-size: 1rem !important; }

.lf-info-bar .lf-info-item h4,
.case-meta h4{
  font-size: var(--fs-small) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.lf-info-bar .lf-info-item p,
.case-meta p,
.case-card p{
  font-size: var(--fs-body) !important;
}

/* Não deixar componentes redefinirem o base via em */
.case-section,
.case-card,
.wf-carousel,
.rf-board { font-size: 1rem !important; }

/* iOS pode “aumentar” fontes — trava isso */
html { -webkit-text-size-adjust: 100%; }

/* === Texto do teaser (linha por baixo do título) === */
.case-teaser{
  color: #1e2b28 !important;        /* mesma cor do corpo do texto */
  font-weight: 400 !important;       /* igual aos parágrafos */
  opacity: 1 !important;             /* nada de “esbater” texto */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Se algum wrapper estiver a “borrar” o texto, neutraliza */
.case-hero, .case-hero *{
  filter: none !important;
  transform: none !important;
}
.case-hero{ opacity: 1 !important; }
/* Se precisares de um hero mais claro, usa background RGBA no hero,
   NÃO opacity no container: ex. background-color: rgba(255,255,255,.9); */


  /* ===== EASYAIR — spacing igual aos outros (teaser > CTA > info > cover) ===== */
: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 */
.air-hero{
  padding-top: clamp(64px, 7vw, 96px) !important;
}
.air-hero .air-teaser{
  max-width: 70ch;
  margin: 0 auto !important;
  padding: 0 var(--cs-pad-x) !important;
  text-align: center;
  color: #6A5340;
}

/* CTA (se tiveres o botão na página) */
.air-cta{
  display: flex;
  justify-content: center;
  padding: 0 var(--cs-pad-x) !important;
  margin: var(--cs-gap-cta) auto var(--cs-gap-block) !important;
}
.air-cta__inner{ display:flex; justify-content:center; width:100%; }
.air-cta__btn{ white-space: nowrap; }

/* Info bar */
.air-info-bar{
  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;
}
.air-info-item h4{
  margin: 0 0 6px 0 !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
}
.air-info-item p{ margin: 0 !important; line-height: 1.6; }

/* Cover */
.air-img-block{
  max-width: var(--cs-max);
  margin: 0 auto !important;
  border-radius: var(--cs-radius) !important;
  overflow: hidden;
}

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

/* ===== EASYAIR — pequenos títulos a laranja (#ff7a00) ===== */
:root{
  --air-orange: #ff7a00;
}

/* Kickers ao longo do texto (Overview / Design Process / etc.) */
.air-kicker{
  color: var(--air-orange) !important;
}

/* Títulos pequenos do info bar (Tools / Timeline / Devices / Role) */
.air-info-item h4{
  color: var(--air-orange) !important;
}


/* ===== FIX CTA overflow (mobile + Google Translate) ===== */
.air-cta,
.air-cta__inner{
  max-width: 100%;
}

.air-cta__inner{
  min-width: 0;                 /* importante p/ flex não estourar */
}

.air-cta__btn{
  box-sizing: border-box;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Mobile: permitir quebra e evitar overflow */
@media (max-width: 768px){
  .air-cta__btn{
    white-space: normal !important;     /* derruba o nowrap */
    overflow-wrap: anywhere;           /* quebra palavras longas */
    word-break: break-word;
    width: 100%;                       /* ocupa a coluna toda */
    max-width: 520px;                  /* opcional: não fica gigante em tablets */
    letter-spacing: 1px;               /* opcional: ajuda a caber */
  }
}