/* === VARIÁVEIS GLOBAIS === */
:root {
  /* cores */
  --fta-black:        #111111;
  --fta-white:        #FFFFFF;
  --fta-green:        #00844B;
  --fta-green-hover:  #006C3A;
  --fta-grey-light:   #E5E5E5;
  --fta-grey-medium:  #B5B5B5;
  --fta-grey-dark:    #333333;

  /* tipografia */
  --fta-text-primary:   var(--fta-black);
  --fta-text-secondary: var(--fta-grey-dark);
  --fta-text-light:     var(--fta-white);
  --fta-font-heading:   'Anton', 'Bebas Neue', Arial, sans-serif;
  --fta-font-body:      'Inter', 'Roboto', Helvetica, sans-serif;
  --fta-font-size-base: 16px;
  --fta-line-height:    1.6;

  /* espaçamentos */
  --fta-spacing-xs: 0.5rem;
  --fta-spacing-sm: 1rem;
  --fta-spacing-md: 2rem;
  --fta-spacing-lg: 3rem;
  --fta-spacing-xl: 4rem;

  /* bordas, sombras e transições */
  --fta-radius-sm:     4px;
  --fta-radius-md:     8px;
  --fta-radius-lg:     16px;
  --fta-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.1);
  --fta-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.15);
  --fta-transition-fast: 0.2s ease-in-out;

  /* altura do header (mobile) */
  --site-header-h: 3.5rem;
}

/* desktop: header mais alto */
@media (min-width: 768px) {
  :root {
    --site-header-h: 5rem;
  }
}

/* === RESET & BASE === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;       /* impede scroll horizontal */
  scrollbar-gutter: stable; /* reserva espaço da scrollbar */
  width: 100%;
}

body {
  min-height: 100vh;
  width: 100%;
  padding-top: var(--site-header-h); /* empurra conteúdo abaixo do header */
  font-size: var(--fta-font-size-base);
  font-family: var(--fta-font-body);
  color: var(--fta-text-primary);
  background: var(--fta-white);
  overflow-x: hidden;
}

/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--site-header-h);
  background-color: var(--fta-black);
  box-shadow: var(--fta-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--fta-spacing-md);
}

/* === CONTAINER INTERNO === */
.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* === LOGO === */
.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo img {
  height: calc(var(--site-header-h) * 0.7);
  object-fit: contain;
  display: block;
}

/* === MENU === */
.menu-list {
  list-style: none;
  display: flex;
  gap: var(--fta-spacing-lg);
  align-items: center;

  /* NOVO: empurra os botões para a direita */
  margin-left: auto;
}

.menu-list li a {
  font-family: var(--fta-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fta-white);
  padding: 0.5rem 1rem;
  border-radius: var(--fta-radius-sm);
  transition: background var(--fta-transition-fast);
  text-decoration: none;
  display: inline-block;
}

.menu-list li a:hover,
.menu-list li a:focus {
  background-color: var(--fta-green);
}

/* === BOTÃO CTA === */
.menu-list li.cta-menu a {
  background-color: var(--fta-green);
  color: var(--fta-white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  border-radius: var(--fta-radius-md);
  transition: all var(--fta-transition-fast);
}

.menu-list li.cta-menu a:hover {
  background-color: var(--fta-green-hover);
  color: var(--fta-white);
}

/* === MOBILE === */
.menu-toggle {
  background: none;
  border: none;
  color: var(--fta-white);
  font-size: 2rem;
  cursor: pointer;
  display: none;
}

@media (max-width: 767px) {
  .navbar-content {
    justify-content: space-between; /* Garante espaçamento entre logo e toggle */
  }

  .logo {
    flex-grow: 1;
    justify-content: flex-start;
  }

  .menu-toggle {
    display: block;
    margin-left: auto; /* Coloca o botão no canto direito */
  }

  .menu-list {
    display: none;
    position: absolute;
    top: var(--site-header-h);
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: var(--fta-spacing-md);
    background: var(--fta-black);
    padding: var(--fta-spacing-md);
    box-shadow: var(--fta-shadow-md);
    margin-left: 0; /* Remove margem lateral para centralizar no mobile */
  }

  .menu-list.active {
    display: flex;
  }

  .menu-list li {
    text-align: center;
  }

  .menu-list li.cta-menu {
    margin-top: var(--fta-spacing-sm);
  }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  color: var(--fta-text-light);
  background: var(--fta-black);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding-top: var(--site-header-h); /* Espaço para header fixo */
}

/* ----- Vídeo & Overlay ----- */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0.55);
  z-index: 1;
}

/* ----- Conteúdo Principal ----- */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--fta-spacing-lg) var(--fta-spacing-sm) 0 var(--fta-spacing-sm);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ----- Badge, Título, Descrição, CTA ----- */
.hero__badge {
  display: inline-block;
  margin-bottom: var(--fta-spacing-sm);
  padding: var(--fta-spacing-xs) var(--fta-spacing-sm);
  background: rgba(255,255,255,0.10);
  border-radius: var(--fta-radius-md);
  font-family: var(--fta-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.hero__title {
  font-family: var(--fta-font-heading);
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 var(--fta-spacing-xs);
}
.hero__highlight {
  color: var(--fta-green);
  display: block;
  font-size: 1.4em;
  margin: var(--fta-spacing-xs) 0 0 0;
  line-height: 1.1;
}
.hero__description {
  font-family: var(--fta-font-body);
  font-size: 1.08rem;
  font-weight: 400;
  margin: var(--fta-spacing-md) 0 var(--fta-spacing-md);
}
.hero__cta {
  margin-top: var(--fta-spacing-sm);
  background: var(--fta-green);
  color: var(--fta-white);
  padding: var(--fta-spacing-xs) var(--fta-spacing-lg);
  border-radius: var(--fta-radius-md);
  font-family: var(--fta-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--fta-transition-fast), box-shadow var(--fta-transition-fast);
  box-shadow: var(--fta-shadow-sm);
}
.hero__cta:focus-visible,
.hero__cta:hover {
  background: var(--fta-green-hover);
  outline: 2px solid var(--fta-white);
  outline-offset: 2px;
}
.hero__cta:active {
  box-shadow: var(--fta-shadow-md);
  transform: scale(0.97);
}
.hero__note {
  display: block;
  margin-top: var(--fta-spacing-xs);
  font-size: 0.83rem;
  color: var(--fta-grey-light);
  font-family: var(--fta-font-body);
  opacity: 0.9;
}

/* ----- Barra Inferior: Indicadores + Selo ----- */
.hero__bottom-bar {
  width: 100%;
  max-width: 48rem;
  margin: var(--fta-spacing-lg) auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--fta-spacing-sm);
}

/* ----- Indicadores de Confiança ----- */
.hero__trust-bar {
  background: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(8px);
  border-radius: var(--fta-radius-md);
  padding: var(--fta-spacing-xs) var(--fta-spacing-sm);
  margin: 2rem auto 1rem;
  max-width: 320px;
  font-size: 0.875rem;
  box-shadow: var(--fta-shadow-sm);
  text-align: left;
}

.hero__trust-bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-xs);
}

.hero__trust-bar-item {
  font-size: 0.875rem;
  color: var(--fta-grey-light);
  font-family: var(--fta-font-body);
  line-height: 1.4;
  font-weight: 400;
}

.hero__trust-bar-item strong {
  font-size: 1.1em;
  color: var(--fta-green);
  margin-right: 0.25em;
  font-family: var(--fta-font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* =================== SELO DE RECONHECIMENTO =================== */
.hero__seal {
  background: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(8px);
  border-radius: var(--fta-radius-md);
  padding: var(--fta-spacing-xs) var(--fta-spacing-sm);
  margin: 1rem auto 0;
  display: flex;
  align-items: center;
  gap: var(--fta-spacing-xs);
  max-width: 280px;
  box-shadow: var(--fta-shadow-sm);
  text-align: left;
}

.hero__seal img {
  width: 1.8rem;
  height: auto;
  flex-shrink: 0;
  border-radius: var(--fta-radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.hero__seal-text {
  font-size: 0.875rem;
  color: var(--fta-grey-light);
  font-family: var(--fta-font-body);
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
}

/* =================== RESPONSIVO (Mobile) =================== */
@media (max-width: 900px) {
  .hero__trust-bar,
  .hero__seal {
    padding: 0.8rem 0.6rem;
    font-size: 0.85rem;
    max-width: 100%;
  }
  .hero__seal img {
    width: 1.6rem;
  }
}

/* =================== ANIMAÇÃO ENTRADA =================== */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero--animate .hero__badge        { animation: fadeUp 0.5s 0.10s both; }
.hero--animate .hero__title        { animation: fadeUp 0.5s 0.22s both; }
.hero--animate .hero__highlight    { animation: fadeUp 0.5s 0.32s both; }
.hero--animate .hero__description  { animation: fadeUp 0.5s 0.40s both; }
.hero--animate .hero__cta          { animation: fadeUp 0.5s 0.55s both; }
.hero--animate .hero__note         { animation: fadeUp 0.5s 0.65s both; }
.hero--animate .hero__bottom-bar   { animation: fadeUp 0.5s 0.80s both; }

@media (prefers-reduced-motion: reduce) {
  .hero--animate .hero__badge,
  .hero--animate .hero__title,
  .hero--animate .hero__highlight,
  .hero--animate .hero__description,
  .hero--animate .hero__cta,
  .hero--animate .hero__note,
  .hero--animate .hero__bottom-bar {
    animation: none !important;
  }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • ABOUT SECTION                                 */
/*  BEM, token-driven, mobile-first                                       */
/* ====================================================================== */
.about {
  background: var(--fta-white);
  color: var(--fta-text-secondary);
  padding: var(--fta-spacing-lg) var(--fta-spacing-md);
  position: relative;
}

/* ---------- Accent line / icon --------------------------------------- */
.about__accent {
  position: absolute;
  top: var(--fta-spacing-sm);
  left: var(--fta-spacing-md);
  width: 3rem;
  height: 0.25rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-sm);
}

/* ---------- Typography & lead ---------------------------------------- */
.about__title {
  font-family: var(--fta-font-heading);
  font-size: 1.75rem;
  margin-bottom: var(--fta-spacing-sm);
  color: var(--fta-black);
  line-height: 1.2;
}

.about__lead {
  font-family: var(--fta-font-body);
  font-size: 1rem;
  margin-bottom: var(--fta-spacing-md);
  max-width: 42rem;
  margin-left: var(--fta-spacing-md); /* Adiciona um recuo à esquerda */
}

@media (max-width: 600px) {
  .about__lead {
    margin-left: var(--fta-spacing-sm); /* Menos recuo em mobile */
  }
}

/* ===============================================================
   BLOCO · MISSÃO · VISÃO · VALORES (Grid Responsivo Profissional)
   =============================================================== */

/* ----- Grid wrapper ----------------------------------------- */
.about__block-grid {
  counter-reset: about-count;
  display: grid;
  gap: var(--fta-spacing-lg);
  margin-block-end: var(--fta-spacing-xl);
  grid-template-columns: 1fr;
}
@media (min-width: var(--bp-md)) {
  .about__block-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: var(--bp-lg)) {
  .about__block-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----- Bloco individual ------------------------------------- */
.about__block {
  /* ——— Layout & conteúdo ——— */
  counter-increment: about-count;
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-sm);
  padding: calc(var(--fta-spacing-md) * 1.25);

  /* ——— Visual base ——— */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 4px solid var(--accent, var(--fta-green));   /* linha verde fixa */
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);

  /* ——— Transições suaves ——— */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-top-color 0.3s ease;
  will-change: transform, box-shadow;
}

.about__block:hover,
.about__block:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  border-top-color: color-mix(in srgb, var(--fta-green) 80%, white);
}

/* ----- Header com número + título + ícone ------------------- */
.about__block-header {
  display: flex;
  align-items: center;
  gap: var(--fta-spacing-xs);
  margin-bottom: var(--fta-spacing-xs);
}

/* ----- Número automático (01, 02, 03) ------------------------ */
.about__block-num::before {
  content: counter(about-count, decimal-leading-zero);
}
.about__block-num {
  font-family: var(--fta-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fta-green);
}

/* ----- Título com ícone SVG --------------------------------- */
.about__block-title {
  display: flex;
  align-items: center;
  gap: var(--fta-spacing-2xs);
  font-family: var(--fta-font-heading);
  font-size: 1.25rem;
  color: var(--fta-green);
  margin: 0;
}
.about__icon-title {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* ----- Corpo de texto ou lista ------------------------------ */
.about__block-text,
.about__values-list {
  font-size: 0.9375rem;
  line-height: var(--fta-line-height);
}

.about__values-list {
  list-style: disc inside;
  padding-left: 0;
  margin: 0;
}

/* ---------- Pillars icons (versão refinada) -------------------------- */
.about__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fta-spacing-sm);
  margin-block-end: var(--fta-spacing-lg);
  padding: 0;
  list-style: none;
}

/* Cartão individual */
.about__pillars-item {
  /* layout  */
  flex: 1 1 8rem;

  /* visual */
  background: rgba(255, 255, 255, 0.03);       /* harmoniza com os cartões acima  */
  border-top: 4px solid var(--fta-green);      /* mesma cor-acento                */
  border-radius: var(--fta-radius-md);
  padding: var(--fta-spacing-md) var(--fta-spacing-sm);
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);   /* sombra mais leve                */
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about__pillars-item:hover,
.about__pillars-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20);
  border-color: color-mix(in srgb, var(--fta-green) 80%, transparent);
}

/* Ícone */
.about__icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--fta-green);
  margin-block-end: var(--fta-spacing-xs);
  transition: fill .3s ease;
}

.about__pillars-item:hover .about__icon,
.about__pillars-item:focus-visible .about__icon {
  fill: color-mix(in srgb, var(--fta-green) 80%, white);
}

/* Rótulo */
.about__pillars-label {
  display: block;
  font-family: var(--fta-font-body, sans-serif); /* usa a tua var de fonte corpo */
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fta-black);                       /* preto real */
  letter-spacing: 0.3px;
}

/* ---------- Quote ---------------------------------------------------- */
.about__quote {
  position: relative;                            /* permite pseudo-elementos     */
  margin-block-end: var(--fta-spacing-md);       /* mantém o espaçamento atual   */
  padding: var(--fta-spacing-md) var(--fta-spacing-md) var(--fta-spacing-md)
           calc(var(--fta-spacing-md) + 4px);    /* 4 px = largura da borda      */

  /* estilo original mejorado */
  border-left: 4px solid var(--fta-green);
  background: rgba(255, 255, 255, 0.04);         /* subtil sobre fundo escuro    */
  border-radius: var(--fta-radius-md);           /* segue tokens globais         */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);     /* leve profundidade            */

  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fta-black);
}

/* Aspas decorativas (não interferem no fluxo) */
.about__quote::before,
.about__quote::after {
  content: "“";
  position: absolute;
  font-family: var(--fta-font-heading);
  font-size: 4rem;
  line-height: 0;
  font-weight: 700;
  color: color-mix(in srgb, var(--fta-green) 50%, transparent);
  opacity: 0.15;
  pointer-events: none;
}
.about__quote::after  { content: "”"; }
.about__quote::before { top: -.25rem;  left: .5rem;  transform: translateY(-30%); }
.about__quote::after  { bottom: -.25rem; right: .75rem; transform: translateY(30%); }

/* Assinatura / autor */
.about__quote cite {
  display: block;
  margin-top: var(--fta-spacing-sm);             /* ligeiramente maior que antes */
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--fta-green);
}

/* Linha de destaque sob a citação */
.about__quote cite::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--fta-green), transparent);
}

.about__quote-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.12em solid var(--fta-green);
  animation:
    typing 3.5s steps(50, end) 0.5s forwards,
    blink 0.75s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0 }
  to   { width: 100% }
}

@keyframes blink {
  from { border-color: transparent }
  to   { border-color: var(--fta-green) }
}

@media (max-width: 600px) {
  .about__quote-text {
    font-size: 0.875rem; /* ou o que for mais legível */
    white-space: normal;
    animation: none; /* opcional, remove o efeito typing */
    border-right: none; /* opcional */
  }
}

/* ---------- CTA ------------------------------------------------------ */
.about__cta-wrapper {
  display: flex;
  justify-content: center;
  margin-block-start: var(--fta-spacing-md);
}

/* Botão principal */
.about__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fta-spacing-xs);

  background-color: var(--fta-green);
  color: var(--fta-white);
  padding: 0.5rem 1.5rem;
  border-radius: var(--fta-radius-md);

  font-family: var(--fta-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow: var(--fta-shadow-sm);
  transition:
    background-color var(--fta-transition-fast),
    transform var(--fta-transition-fast),
    box-shadow var(--fta-transition-fast);
}

/* Hover & Focus */
.about__cta:hover,
.about__cta:focus-visible {
  background-color: var(--fta-green-hover);
  transform: translateY(-2px);
  box-shadow: var(--fta-shadow-md);
  outline: none;
}

/* Ícone (arrow) */
.about__cta-icon {
  width: 1rem;
  height: 1rem;
  fill: var(--fta-white);
  transition: transform var(--fta-transition-fast);
}

/* Movimento leve do ícone à interação */
.about__cta:hover .about__cta-icon,
.about__cta:focus-visible .about__cta-icon {
  transform: translateX(4px);
}

/* Respeita utilizadores com motion reduzido */
@media (prefers-reduced-motion: reduce) {
  .about__cta,
  .about__cta-icon {
    transition: none;
  }
}

/* Responsividade */
@media (min-width: var(--bp-md)) {
  .about__cta {
    font-size: 1rem;
    padding: 0.625rem 2rem;
  }

  .about__cta-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ---------- Media queries ------------------------------------------- */
@media (min-width: 48em) { /* --bp-md */
  .about__title { font-size: 2.25rem; }
  .about__block-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fta-spacing-lg);
  }
  .about__pillars {
    gap: var(--fta-spacing-md);
  }
}

@media (min-width: 64em) { /* --bp-lg */
  .about {
    padding: var(--fta-spacing-xl) var(--fta-spacing-lg);
  }
  .about__title { font-size: 2.75rem; }
}

/* ---------- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .about__cta { transition: none; }
}

.about__image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2.5rem 0 1.5rem 0;
  position: relative;
  z-index: 1;
}

.about__image {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1.75rem;
  box-shadow:
    0 8px 32px rgba(24, 97, 57, 0.16),   /* verde suave, paleta FTA */
    0 2px 8px rgba(0,0,0,0.08);
  transition: 
    transform 0.33s cubic-bezier(.5,1.4,.5,1),
    box-shadow 0.33s cubic-bezier(.5,1.4,.5,1),
    filter 0.4s cubic-bezier(.5,1.4,.5,1);
  filter: brightness(1) contrast(1.09) saturate(1.05);
  will-change: transform, filter;
  background: linear-gradient(135deg, #eafaf1 0%, #f5f6fa 100%);
  overflow: hidden;
}

.about__image:hover,
.about__image:focus {
  transform: scale(1.038) rotate(-1deg);
  box-shadow:
    0 16px 48px rgba(20, 185, 120, 0.18),  /* destaca ao hover */
    0 4px 12px rgba(0,0,0,0.12);
  filter: brightness(1.03) contrast(1.14) saturate(1.14);
  outline: none;
}

@media (max-width: 900px) {
  .about__image-wrapper {
    margin: 1.1rem 0 1rem 0;
  }
  .about__image {
    max-width: 96vw;
    aspect-ratio: 4/3;
    border-radius: 1rem;
  }
}

/* microanimação de entrada (só precisa disto no JS/HTML) */
.about__image {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  animation: aboutImgFadeIn 1.1s cubic-bezier(.4,1.4,.6,1) 0.12s forwards;
}

@keyframes aboutImgFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • PILLARS SECTION                               */
/*  BEM, token-driven, responsive, accessible                             */
/* ====================================================================== */
.pillars__inner {
  position: static;
  padding-top: calc(var(--fta-spacing-sm) + .75rem);
}

.pillars {
  background: var(--fta-white);
  color: var(--fta-text-secondary);
  padding: var(--fta-spacing-lg) var(--fta-spacing-md);
  position: relative;
}

/* ---------- Accent line ------------------------------------------------ */
.pillars__accent {
  position: absolute;
  top: var(--fta-spacing-sm);
  left: var(--fta-spacing-md);
  transform: translateY(-50%);
  width: 3rem;
  height: .25rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-sm);
}

/* ---------- Title & intro --------------------------------------------- */
.pillars__title {
  font-family: var(--fta-font-heading);
  font-size: 1.75rem;
  margin-bottom: var(--fta-spacing-sm);
  color: var(--fta-black);
  line-height: 1.2;
}

.pillars__intro {
  max-width: 42rem;
  font-size: 1rem;
  margin-bottom: var(--fta-spacing-md);
}

/* ---------- Grid container -------------------------------------------- */
.pillars__grid {
  display: grid;
  gap: var(--fta-spacing-md);
  padding: 0;
  list-style: none;
  margin-bottom: var(--fta-spacing-lg);
}

/* ---------- Card ------------------------------------------------------ */
.pillars__card {
  background: var(--fta-grey-light);
  padding: var(--fta-spacing-md);
  border-radius: var(--fta-radius-lg);
  box-shadow: var(--fta-shadow-sm);
  text-align: center;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: fadeUpCard 0.9s cubic-bezier(.41,1.4,.59,1) forwards;
  transition: transform var(--fta-transition-fast),
              box-shadow var(--fta-transition-fast);
}

.pillars__card:nth-child(2) { animation-delay: 0.12s; }
.pillars__card:nth-child(3) { animation-delay: 0.24s; }
.pillars__card:nth-child(4) { animation-delay: 0.36s; }

@keyframes fadeUpCard {
  to { opacity: 1; transform: none; }
}

.pillars__card:focus-within {
  outline: 2px solid var(--fta-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .pillars__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fta-shadow-md);
  }
}

/* ---------- Icon ------------------------------------------------------ */
.pillars__icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 0.7rem;
  color: #202221;
  stroke: currentColor;
  transition: color 0.25s, stroke 0.25s;
}
.pillars__card:hover .pillars__icon {
  color: #14b978;
  stroke: #14b978;
}

/* ---------- Heading & text ------------------------------------------- */
.pillars__heading {
  font-family: var(--fta-font-heading);
  font-size: 1.25rem;
  margin-bottom: var(--fta-spacing-xs);
  color: var(--fta-green);
}

.pillars__text {
  font-size: 0.9375rem;
  line-height: var(--fta-line-height);
}

/* ---------- CTA ------------------------------------------------------- */
.pillars__cta {
  text-align: center;
}

.pillars__cta .btn--secondary {
  background: var(--fta-green);
  color: var(--fta-white);
  padding: var(--fta-spacing-xs) var(--fta-spacing-md);
  border-radius: var(--fta-radius-md);
  font-family: var(--fta-font-heading);
  transition: background var(--fta-transition-fast);
}

.pillars__cta .btn--secondary:hover,
.pillars__cta .btn--secondary:focus-visible {
  background: var(--fta-green-hover);
  outline: 2px solid var(--fta-green-hover);
  outline-offset: 2px;
}

/* ---------- Breakpoints ---------------------------------------------- */
@media (min-width: 48em) { /* --bp-md */
  .pillars__title { font-size: 2.25rem; }
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) { /* --bp-lg */
  .pillars {
    padding: var(--fta-spacing-xl) var(--fta-spacing-lg);
  }
  .pillars__title { font-size: 2.75rem; }
  .pillars__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pillars__card { transition: none; }
  .pillars__cta .btn--secondary { transition: none; }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • PÚBLICO ALVO                                  */
/*  BEM, token-driven, responsive, accessible                             */
/* ====================================================================== */
.fta-audience {
  background: linear-gradient(110deg, rgba(0,132,75,0.04) 0%, rgba(0,132,75,0.01) 100%);
  border-radius: var(--fta-radius-lg);
  max-width: 1200px;
  margin: var(--fta-spacing-xl) auto;
  padding: var(--fta-spacing-lg) var(--fta-spacing-md);
  box-shadow: 0 4px 32px rgba(0,132,75,0.07), var(--fta-shadow-md);
  position: relative;
  width: 100%;
}

.fta-audience__header {
  max-width: 730px;
  margin: 0 auto var(--fta-spacing-lg) auto;
  text-align: center;
}

.fta-audience__accent {
  display: block;
  margin: 0 auto var(--fta-spacing-xs) auto;
  width: 3rem;
  height: 0.23rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-md);
  opacity: 0.85;
}

.fta-audience__supertitle {
  display: block;
  font-family: var(--fta-font-body);
  color: var(--fta-green);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.15em;
}

.fta-audience__title {
  font-family: var(--fta-font-heading);
  font-size: 2.15rem;
  letter-spacing: -0.03em;
  color: var(--fta-black);
  margin: 0 0 var(--fta-spacing-xs) 0;
  line-height: 1.13;
}

.fta-audience__intro {
  font-family: var(--fta-font-body);
  color: var(--fta-text-secondary);
  font-size: 1.13rem;
  line-height: 1.55;
  margin: 0;
}

/* ----------- Card Grid ---------------------- */
.fta-audience__cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fta-spacing-lg);
  max-width: 100%;
  margin: var(--fta-spacing-lg) auto 0 auto;
}

@media (min-width: 700px) {
  .fta-audience__cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fta-spacing-lg);
    max-width: 840px;
  }
}

@media (min-width: 1024px) {
  .fta-audience__cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fta-spacing-lg);
    max-width: 100%;
  }
}

/* ----------- Card ---------------------- */
.fta-audience__card {
  background: rgba(255,255,255,0.96);
  border-radius: var(--fta-radius-lg);
  box-shadow: 0 2px 18px rgba(0,132,75,0.09), var(--fta-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--fta-spacing-md) var(--fta-spacing-xs) var(--fta-spacing-md) var(--fta-spacing-xs);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--fta-transition-fast),
    transform var(--fta-transition-fast),
    border var(--fta-transition-fast);
  cursor: pointer;
  min-height: 200px;
  max-width: 100%;
  margin: 0 auto;
}

.fta-audience__card:focus-visible {
  outline: 2px solid var(--fta-green-hover);
  outline-offset: 3px;
}

.fta-audience__card:hover,
.fta-audience__card:focus-visible {
  box-shadow: 0 8px 32px rgba(0,132,75,0.17), 0 2px 12px rgba(0,0,0,0.13);
  transform: translateY(-5px) scale(1.018);
}

/* ---------- Icon Wrapper & Icon ---------------------- */
.fta-audience__iconwrap {
  background: linear-gradient(140deg, rgba(0,132,75,0.15) 0%, rgba(0,132,75,0.10) 100%);
  border-radius: 50%;
  width: 3.3rem;
  height: 3.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--fta-spacing-sm);
  box-shadow: 0 2px 8px rgba(0,132,75,0.08);
}

.fta-audience__icon {
  width: 2.05rem;
  height: 2.05rem;
  fill: var(--fta-green);
  transition: fill var(--fta-transition-fast), transform var(--fta-transition-fast);
}

.fta-audience__card:hover .fta-audience__icon,
.fta-audience__card:focus-visible .fta-audience__icon {
  fill: var(--fta-green-hover);
  transform: scale(1.11) rotate(-3deg);
}

/* ---------- Card Content ---------------------- */
.fta-audience__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fta-spacing-xs);
  text-align: center;
  flex: 1 1 auto;
}
.fta-audience__card-title {
  font-family: var(--fta-font-heading);
  font-size: 1.08rem;
  color: var(--fta-black);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--fta-spacing-xs);
}
.fta-audience__card-desc {
  font-size: 0.97rem;
  color: var(--fta-grey-dark);
  font-family: var(--fta-font-body);
  line-height: 1.48;
  margin-bottom: 0;
  font-weight: 500;
}

/* ---------- Card Accent (Bottom bar) ---------------------- */
.fta-audience__card-accent {
  position: absolute;
  bottom: 0.7rem; left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fta-green), var(--fta-grey-light));
  opacity: 0.14;
  transition: opacity var(--fta-transition-fast), width var(--fta-transition-fast);
  z-index: 1;
}
.fta-audience__card:hover .fta-audience__card-accent,
.fta-audience__card:focus-visible .fta-audience__card-accent {
  opacity: 0.32;
  width: 54px;
}

/* ---------- Footer (CTA) ---------------------- */
.fta-audience__footer {
  margin-top: var(--fta-spacing-lg);
  text-align: center;
}
.fta-audience__cta {
  font-size: 1.09rem;
  color: var(--fta-black);
  font-family: var(--fta-font-body);
}
.fta-audience__cta-link {
  display: inline-block;
  color: var(--fta-green);
  font-weight: 900;
  text-decoration: none;
  position: relative;
  transition: color var(--fta-transition-fast);
  padding-bottom: 0.05em;
  border-bottom: 2.5px solid var(--fta-green);
  border-radius: 0 0 2px 2px;
  margin: 0 0.13em;
}
.fta-audience__cta-link:hover,
.fta-audience__cta-link:focus-visible {
  color: var(--fta-green-hover);
  border-bottom: 2.5px solid var(--fta-green-hover);
  outline: none;
}
.cta-link {
  color: var(--fta-green);
  font-weight: 700;
  text-decoration: underline dotted;
  transition: color var(--fta-transition-fast);
}
.cta-link:hover,
.cta-link:focus-visible {
  color: var(--fta-green-hover);
  outline: none;
}

@media (max-width: 600px) {
  .fta-audience__cta {
    font-size: 0.95rem; /* ou até 0.875rem se quiseres mais compacto */
    line-height: 1.4;
  }
  }
/* ---------- Microanimações de entrada ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fta-audience__card {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    animation: audienceCardIn 0.77s cubic-bezier(.4,1.6,.6,1) forwards;
  }
  .fta-audience__card:nth-child(1) { animation-delay: 0.07s; }
  .fta-audience__card:nth-child(2) { animation-delay: 0.15s; }
  .fta-audience__card:nth-child(3) { animation-delay: 0.23s; }
  .fta-audience__card:nth-child(4) { animation-delay: 0.31s; }
}
@keyframes audienceCardIn {
  to { opacity: 1; transform: none; }
}

/* ---------- Responsividade ---------------------- */
@media (max-width: 900px) {
  .fta-audience {
    padding: var(--fta-spacing-md) var(--fta-spacing-xs);
    border-radius: var(--fta-radius-md);
    max-width: 99vw;
  }
  .fta-audience__title { font-size: 1.22rem; }
  .fta-audience__cards-grid { gap: var(--fta-spacing-md);}
  .fta-audience__card { padding: var(--fta-spacing-md) var(--fta-spacing-xs); min-height: 160px;}
}

@media (max-width: 700px) {
  .fta-audience__cards-grid {
    grid-template-columns: 1fr;
    max-width: 96vw;
  }
}

@media (max-width: 550px) {
  .fta-audience__title { font-size: 1rem; }
  .fta-audience__cards-grid { gap: var(--fta-spacing-sm);}
  .fta-audience__card { padding: var(--fta-spacing-md) var(--fta-spacing-xs); }
}

/* ---------- Foco Acessível ---------------------- */
.fta-audience__card:focus-visible {
  outline: 2px solid var(--fta-green-hover);
  outline-offset: 2.5px;
}
.fta-audience__cta-link:focus-visible,
.cta-link:focus-visible {
  outline: 2px solid var(--fta-green-hover);
  outline-offset: 2.5px;
}

@media (max-width: 480px) {
  .fta-audience__intro {
    padding: var(--fta-spacing-md) var(--fta-spacing-lg);
    text-align: center;
  }

  .fta-audience__intro h2 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fta-green);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .fta-audience__intro h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fta-text-primary);
    margin-bottom: var(--fta-spacing-sm);
  }

  .fta-audience__intro p {
    font-size: 0.9rem; /* ↓ leve ajuste */
    line-height: 1.6;  /* ↑ melhora fluidez visual */
    max-width: 55ch;
    margin-inline: auto;
    color: var(--fta-text-secondary);
  }
}

@media (max-width: 480px) {
  .card {
    padding: var(--fta-spacing-md) var(--fta-spacing-lg);
    border-radius: var(--fta-radius-md);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  .card__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.75rem;
  }

  .card__title {
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    color: var(--fta-text-primary);
    margin-bottom: 0.5rem;
  }

  .card__desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--fta-text-secondary);
    max-width: 60ch;
    margin: 0 auto;
  }

  .card__divider {
    display: none; /* ou opacity: 0.1 para suavizar, se preferires */
  }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • PLANS SECTION                                 */
/*  BEM, token-driven, responsive, accessible                             */
/* ====================================================================== */
.plans__header {
  position: relative;
  text-align: left;
  margin-bottom: var(--fta-spacing-md);
  padding-inline: var(--fta-spacing-md);
}

.plans__title {
  position: relative;                 /* referência para o ::before        */
  font-family: var(--fta-font-heading);
  font-size: clamp(2rem,4vw + 1rem,2.5rem);
  line-height: 1.2;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-xs);
}

.plans__subtitle {
  max-width: 60ch;
  margin-inline: 0;
  margin-top: var(--fta-spacing-xs);
  color: var(--fta-grey-dark);
  font-size: 1rem;
  text-align: left;
}


/* ---------- SECTION WRAPPER ---------- */
.plans {
  background: var(--fta-grey-light);
  padding-block: var(--fta-spacing-lg);
  font-family: var(--fta-font-body);
  color: var(--fta-text-secondary);
  position: relative;
}

/* ---------- HEADER ---------- */
.plans__header {
  position: relative;
  text-align: left;
  padding-inline: var(--fta-spacing-md);
  margin-bottom: var(--fta-spacing-md);
  padding-top: var(--fta-spacing-sm);
}

.plans__accent {
  position: absolute;
  top: 1rem;                              /* cola ao topo do header */
  left: var(--fta-spacing-md);         /* mesmo recuo horizontal dos títulos */
  width: 3rem;
  height: .25rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-sm);
  /* não é preciso translateY agora */
  transform: none;
  z-index: 1;                          /* garante que fica acima do fundo */
}

.plans__title {
  font-family: var(--fta-font-heading);
  font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
  line-height: 1.2;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-xs);
}

.plans__subtitle {
  max-width: 60ch;
  margin-top: var(--fta-spacing-xs);
  font-size: 1rem;
  color: var(--fta-grey-dark);
}

/* ─── SECTION WRAPPER ───────────────────────────────────────────────────── */
.plans {
  background: var(--fta-grey-light);
  padding-block: var(--fta-spacing-xl);    /* mais folga vertical */
  padding-inline: var(--fta-spacing-lg);   /* mais folga lateral */
  font-family: var(--fta-font-body);
  color: var(--fta-text-secondary);
  position: relative;
}

/* ─── GRID (3 cards com destaque no 1º) ──────────────────────────────────── */
.plans__grid {
  display: grid;
  gap: calc(var(--fta-spacing-lg) * 1.5);
  margin-top: var(--fta-spacing-lg);
  padding-inline: var(--fta-spacing-lg);
  perspective: 1200px;

  /* três colunas iguais */
  grid-template-columns: repeat(3, 1fr);
  /* remove o 1fr que forçava alturas iguais */
  grid-auto-rows: auto;
}

@media (max-width: 63.99rem) {
  .plans__grid {
    /* Tablet: duas colunas iguais */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 47.99rem) {
  .plans__grid {
    /* Mobile: coluna única */
    grid-template-columns: 1fr;
  }
}

/* ─── CARD ──────────────────────────────────────────────────────────────── */
.plans__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-sm);               /* gap interno reduzido */

  /* padding vertical e horizontal reduzidíssimos */
  padding-block: var(--fta-spacing-md);
  padding-inline: var(--fta-spacing-sm);

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-radius: var(--fta-radius-lg);      /* leve redução de radius p/ consistência */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6),
    0 4px 8px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.08);

  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
  will-change: transform;
  overflow: hidden;
  opacity: 0;
  animation: fadeInUp .8s forwards;

  height: auto;                             /* garante altura natural */
  min-height: 0;                            /* remove restrição de “stretch” */
}

.plans__icon {
  /* Tamanho uniforme */
  width: 2.5rem;
  height: 2.5rem;

  /* Cor da marca */
  color: var(--fta-green);

  /* Como o <symbol> está em currentColor, isto pinta o SVG */
  fill: currentColor;

  /* Centraliza no eixo horizontal do cartão */
  align-self: center;

  /* Espaçamento entre o ícone e o título */
  margin: var(--fta-spacing-sm) auto;

  /* Garante que o layout mantém a hierarquia */
  display: block;
}

.plans__card {
  background-image: linear-gradient(
    135deg,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.8) 100%
  );
}

/* barra lateral animada */
.plans__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: .5rem;
  height: 100%;
  background: linear-gradient(180deg, var(--fta-green), var(--fta-green-hover));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s ease-out;
  border-top-left-radius: var(--fta-radius-xl);
  border-bottom-left-radius: var(--fta-radius-xl);
}

/* staggered fade-in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}
.plans__card:nth-child(1) { animation-delay: .2s; }
.plans__card:nth-child(2) { animation-delay: .3s; }
.plans__card:nth-child(3) { animation-delay: .4s; }

/* ao entrar em vista, desenrola a barra */
.plans__card.in-view::before {
  transform: scaleY(1);
}

/* hover 3D e profundidade */
@media (hover:hover) {
  .plans__card:hover {
    transform: translateY(-1.5rem) rotateX(8deg) rotateY(-5deg);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.6),
      0 8px 16px rgba(0,0,0,0.08),
      0 16px 32px rgba(0,0,0,0.12);
  }
}

/* Só para o modal de Físico + Nutrição */
.pricing--nutrition .pricing__item {
  display: grid;
  /* 1ª coluna: largura exata do preço; 
     2ª coluna: pelo menos 8rem antes de quebrar */
  grid-template-columns: max-content minmax(8rem, 1fr);
  column-gap: var(--fta-spacing-md);
  align-items: start;
}

/* Ajusta detalhe para múltiplas linhas */
.pricing--nutrition .pricing__detail {
  grid-column: 2;
  line-height: 1.4;
}

/* Espaçamento compacto só no modal de Nutrição */
.pricing--nutrition .pricing__group {
  margin-bottom: .75rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--fta-grey-light);
}
.pricing--nutrition .pricing__group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Itens da lista com gap espreitadíssimo */
.pricing--nutrition .pricing__list {
  display: grid;
  gap: .25rem;
}

.pricing--nutrition .pricing__item {
  padding-block: var(--fta-spacing-xxs, 2px);
}

.badge--highlight {
  background: var(--fta-green);
  color: white;
  font-size: .75rem;
  padding: 0 var(--fta-spacing-xs);
  border-radius: var(--fta-radius-sm);
  margin-left: var(--fta-spacing-xs);
  vertical-align: middle;
}

.pricing__group:last-child {
  border-bottom: none;
  margin-block-end: 0;
}

.plans__addons {
  font-size: .875rem;
  color: var(--fta-text-secondary);
  padding: var(--fta-spacing-xs);
  background: rgba(0,132,75,0.05);
  border-radius: var(--fta-radius-sm);
  margin-top: var(--fta-spacing-sm);
  grid-column: 1 / -1; /* em duas colunas, ocupa tudo */
}

.pricing {
  display: grid;
  gap: var(--fta-spacing-xs);
}

.pricing__group {
  margin-bottom: var(--fta-spacing-sm);
}

.pricing__heading {
  font-size: 1.125rem;
  margin-bottom: var(--fta-spacing-xs);
  color: var(--fta-text-primary);
}

.pricing__item {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--fta-spacing-md);
  align-items: start; /* alinha o topo do detalhe com o topo do preço */
}

/* preço na 1ª coluna */
.pricing__price {
  grid-column: 1;
  color: var(--fta-green);
  font-weight: 700;
}

/* detalhe na 2ª coluna */
.pricing__detail {
  grid-column: 2;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--fta-text-secondary);
}

.pricing__item .pricing__desc + .pricing__desc {
  margin-left: var(--fta-spacing-md);
}

.pricing__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.pricing__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fta-spacing-xs) 0;
  border-bottom: 1px solid var(--fta-grey-light);
}
.pricing__item:last-child {
  border-bottom: none;
}

.pricing__desc {
  color: var(--fta-text-secondary);
}
.pricing__price {
  font-weight: 700;
  color: var(--fta-green);
}

/* Destaque para o plano mais popular de cada grupo */
.pricing__item--highlight {
  background: rgba(0,132,75,0.08);       /* verde muito suave */
  border-radius: var(--fta-radius-sm);
  padding: var(--fta-spacing-xs) var(--fta-spacing-sm);
}
.pricing__item--highlight .pricing__price {
  color: var(--fta-green-hover);
}

/* ─── Tipografia interna ───────────────────────────────────────────────── */
.plans__card-title {
  position: relative;
  font-family: var(--fta-font-heading);
  font-size: 1.75rem;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-sm);
  letter-spacing: 0.5px;
  margin-left: var(--fta-spacing-xs);
}
.plans__card-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 2.5rem;
  height: 0.25rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-sm);
}

.plans__subtitle,
.plans__card-desc {
  margin-left: var(--fta-spacing-xs);
}

.plans__card-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fta-grey-dark);
  min-height: 4rem;
}

.plans__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fta-green);
  margin-top: var(--fta-spacing-md);
  position: relative;
}
.plans__price::after {
  content: "por atleta";
  display: block;
  font-size: .75rem;
  color: var(--fta-grey-medium);
  margin-top: .25rem;
}

/* ─── Botão ───────────────────────────────────────────────────────────── */
.plans__card .btn {
  width: 100%;
  margin-top: auto;
  padding: var(--fta-spacing-sm) 0;
  border-radius: var(--fta-radius-md);
  border: none;
  background: linear-gradient(145deg, rgba(0,132,75,1) 0%, rgba(0,108,58,1) 100%);
  color: var(--fta-white);
  font-weight: 600;
  letter-spacing: .5px;
  position: relative;
  overflow: hidden;
  transition: background .3s ease, transform .3s ease;
}
.plans__card .btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: rgba(255,255,255,.28);
  transform: skewX(-25deg);
  transition: left .6s ease;
}
.plans__card .btn::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .4s ease, height .4s ease, opacity .6s ease;
  opacity: 0;
}

.plans__card .btn:active::after {
  top: 50%; left: 50%;
  width: 200%; height: 400%;
  opacity: 1;
  transition: 0s;
}

/* 5. Barra de capacidade mais discreta */
.plans__capacity {
  height: 0.125rem;               /* mais fino */
}
.plans__capacity-fill {
  transition: width .8s ease;     /* suaviza a animação */
}

/* 6. Ajuste final de espaçamento */
.plans__card {
  gap: var(--fta-spacing-xs);     /* espaçamento interno ainda menor */
  padding-block: var(--fta-spacing-sm);
  padding-inline: var(--fta-spacing-md);
}

.plans__card .btn:hover::before { left: 130%; }
.plans__card .btn:hover        { transform: translateY(-2px); background: var(--fta-green-hover); }
.plans__card .btn:active       { transform: translateY(0); }

/* ─── 1. Toggle Mensal/Anual ─────────────────────────────────────────────── */
/* HTML: <div class="plans__toggle"><button data-period="monthly">Mensal</button><button data-period="annual">Anual</button></div> */
.plans__toggle {
  display: flex;
  justify-content: flex-end;
  gap: var(--fta-spacing-sm);
  margin-bottom: var(--fta-spacing-md);
}
.plans__toggle button {
  background: transparent;
  border: 2px solid var(--fta-green);
  color: var(--fta-green);
  padding: var(--fta-spacing-xs) var(--fta-spacing-sm);
  border-radius: var(--fta-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.plans__toggle button[data-period="annual"] {
  opacity: .6;
}
.plans__toggle button.active {
  background: var(--fta-green);
  color: var(--fta-white);
  opacity: 1;
}

/* ─── 2. Badge “Recomendado” no Featured ───────────────────────────────── */
/* HTML: <div class="plans__card featured" data-badge="Mais Escolhido">… */
.plans__card.featured::after {
  content: attr(data-badge);
  position: absolute;
  top: var(--fta-spacing-sm);
  right: var(--fta-spacing-sm);
  background: var(--fta-green);
  color: var(--fta-white);
  padding: var(--fta-spacing-xs) var(--fta-spacing-sm);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--fta-radius-sm);
  text-transform: uppercase;
  z-index: 2;
}

/* ─── 3. Tags de Características Rápidas ───────────────────────────────── */
/* HTML (dentro de cada card): 
   <div class="plans__features">
     <span class="plans__feature">1–1 Coaching</span>
     <span class="plans__feature">Grupo 3–4</span>
   </div>
*/
.plans__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fta-spacing-xs);
  margin-top: var(--fta-spacing-sm);
}
.plans__feature {
  background: var(--fta-green-hover);
  color: var(--fta-white);
  font-size: 0.75rem;
  padding: 0 var(--fta-spacing-xs);
  border-radius: var(--fta-radius-sm);
  line-height: 1.5;
}

/* ─── 4. Indicador de Lotação ────────────────────────────────────────────── */
/* HTML (dentro do card, antes do botão):
   <div class="plans__capacity">
     <div class="plans__capacity-fill" style="--fta-capacity-percent:62;"></div>
   </div>
*/
.plans__capacity {
  background: var(--fta-grey-light);
  height: 0.25rem;
  border-radius: var(--fta-radius-sm);
  overflow: hidden;
  margin-top: var(--fta-spacing-md);
}
.plans__capacity-fill {
  width: calc(var(--fta-capacity-percent) * 1%);
  height: 100%;
  background: var(--fta-green);
  transition: width .6s ease;
}

/* ─── 5. Forma Decorativa de Fundo ──────────────────────────────────────── */
.plans::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  width: 400px;
  height: 400px;
  background: var(--fta-green);
  opacity: 0.05;
  transform: translateX(-50%) rotate(45deg);
  z-index: 0;
}
.plans__card {
  z-index: 1; /* garante que o card fica acima da forma */
}

/* ─── 6. Carrossel em Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .plans__grid {
    display: grid !important; /* força grid no mobile */
    grid-template-columns: 1fr;
    gap: var(--fta-spacing-lg); /* espaçamento entre cards */
    overflow: visible !important; /* remove scroll lateral */
  }

  .plans__card {
    min-width: unset !important;
    width: 100%;
    margin: 0 auto;
    scroll-snap-align: unset;
  }
}

/* ---------- CTA GLOBAL ---------- */
.plans__cta {
  margin-top: var(--fta-spacing-xl);
  text-align: center;
}
.plans__note {
  margin-top: var(--fta-spacing-xs);
  color: var(--fta-grey-medium);
  font-size: .75rem;
}

/* ---------- ANIMAÇÃO ENTRADA ---------- */
@keyframes plans-card-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .plans__card,
  .plans__card .btn,
  .plans__card::before { transition: none; animation: none; }
}

/* ================= OVERLAY BLOQUEADOR ================= */
.plans__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: var(--fta-spacing-md);
}

/* ================= MODAL ================= */
.plans__modal {
  position: relative;
  width: 100%;
  max-width: 26rem;             /* mobile: compacto */
  max-height: 70vh;             /* mobile: scroll mínimo */
  background: var(--fta-white);
  border-radius: var(--fta-radius-lg);
  box-shadow: var(--fta-shadow-lg);
  padding: var(--fta-spacing-md);
  overflow-y: auto;
  animation: modal-pop .4s ease-out forwards;
}

@media (min-width: 48em) {
  .plans__modal {
    max-width: 32rem;           /* tablet+: mais espaço */
    max-height: 75vh;
  }
}

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* ---------- HEADER ---------- */
.plans__modal h3 {
  font-family: var(--fta-font-heading);
  font-size: 1.5rem;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-xs);
  line-height: 1.2;
}

/* ---------- LISTAGEM ---------- */
.plans__modal ul {
  list-style: none;
  margin: var(--fta-spacing-xs) 0 var(--fta-spacing-md);
  padding: 0;
  display: grid;
  gap: var(--fta-spacing-xs);
  grid-template-columns: 1fr;   /* mobile: 1 coluna */
}

@media (min-width: 48em) {
  .plans__modal ul {
    grid-template-columns: repeat(2, 1fr);  /* tablet+: 2 colunas */
    column-gap: var(--fta-spacing-md);
  }
}

.plans__modal li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  padding-block: var(--fta-spacing-xxs,2px);
  border-bottom: 1px solid var(--fta-grey-light);
}

.plans__modal li:last-child {
  border-bottom: none;
}

.plans__modal li strong {
  color: var(--fta-green);
}

/* para o caso de linhas extra (ex: “Add-ons”) */
.plans__modal .plans__addons {
  grid-column: 1 / -1;          /* ocupa todas as colunas */
  font-size: .85rem;
  margin-top: var(--fta-spacing-xs);
  color: var(--fta-text-secondary);
}

/* ---------- BOTÃO FECHAR ---------- */
.plans__modal-close {
  position: absolute;
  top: var(--fta-spacing-xs);
  right: var(--fta-spacing-xs);
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: var(--fta-grey-medium);
  cursor: pointer;
  transition: color .2s, transform .2s;
}

.plans__modal-close:hover,
.plans__modal-close:focus-visible {
  color: var(--fta-green);
  transform: rotate(90deg);
}

/* ---------- CTA DENTRO DO MODAL ---------- */
.plans__modal .btn {
  display: block;
  width: 100%;
  max-width: 14rem;
  margin: var(--fta-spacing-sm) auto 0;
  padding-block: var(--fta-spacing-xs);
}

/* ---------- SCROLLBAR CUSTOM ---------- */
.plans__modal::-webkit-scrollbar {
  width: 4px;
}
.plans__modal::-webkit-scrollbar-thumb {
  background: var(--fta-green);
  border-radius: 9999px;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .plans__overlay,
  .plans__modal,
  .plans__modal-close {
    animation: none;
    transition: none;
  }
}

.btn, .btn--primary {
  all: unset;
  display: inline-block;
  background: linear-gradient(145deg, #00844B 0%, #006C3A 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
  /* ... outros estilos que definires para btn */
}
.btn--primary { /* se precisares de cor diferente */
  background: linear-gradient(145deg, #00844B 0%, #006C3A 100%);
}

@media (max-width: 480px) {
  .plans__grid {
    padding-inline: var(--fta-spacing-md); /* menor que LG, para ganhar largura */
    gap: var(--fta-spacing-md); /* mais confortável entre os cards */
  }

  .plans__card {
    padding-inline: var(--fta-spacing-lg); /* mais espaço interno */
    padding-block: var(--fta-spacing-md);
    border-radius: var(--fta-radius-xl);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.6),
      0 6px 12px rgba(0,0,0,0.06),
      0 12px 24px rgba(0,0,0,0.1);
  }

  .plans__card-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .plans__card-desc {
    font-size: 0.95rem;
    text-align: center;
    min-height: auto;
  }

  .plans__features {
    justify-content: center;
  }

  .plans__price {
    font-size: 1.25rem;
    text-align: center;
  }

  .plans__price::after {
    text-align: center;
    font-size: 0.7rem;
  }

  .plans__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .plans__card .btn {
    font-size: 1rem;
    padding-block: 0.75rem;
  }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • TEAM SECTION                                  */
/*  BEM, token-driven, responsive, accessible                             */
/* ====================================================================== */
/* ---------- BASE TEAM SECTION ------------------------------------- */
.team {
  background: var(--fta-white);
  color: var(--fta-text-secondary);
  padding: var(--fta-spacing-lg) var(--fta-spacing-md);
  position: relative;
  font-family: var(--fta-font-body);
}

/* ---------- Accent line ------------------------------------------------ */
.team__accent {
  position: absolute;
  top: var(--fta-spacing-sm);
  left: var(--fta-spacing-md);
  width: 3rem;
  height: 0.25rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-sm);
}

/* ---------- Heading & intro ------------------------------------------- */
.team__title {
  position: relative;
  font-family: var(--fta-font-heading);
  font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
  line-height: 1.2;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-xs);
}
.team__intro {
  max-width: 42rem;
  font-size: 1rem;
  margin-bottom: var(--fta-spacing-md);
  margin-left: var(--fta-spacing-md);
}

/* ---------- Swiper Wrapper (carrossel equipa) -------------------------- */
.team-swiper {
  width: 100%;
  padding-bottom: 2rem;
}
.team-swiper .swiper-wrapper {
  align-items: stretch !important;  /* Força slides do mesmo tamanho */
}
.team-swiper .swiper-slide {
  display: flex !important;
  align-items: stretch !important;
  height: auto !important;
}

/* ---------- Cards ----------------------------------------------------- */
.team__card {
  position: relative;
  background: var(--fta-white);
  border-radius: var(--fta-radius-lg);
  box-shadow: var(--fta-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 320px;
  width: 100%;
  transition: transform var(--fta-transition-fast), box-shadow var(--fta-transition-fast);
  perspective: 800px;
  
  /* Correções fundamentais */
  opacity: 1 !important;              /* Garante visibilidade */
  animation: none !important;         /* Remove animação falha */

  height: 100%;
  min-height: 480px;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(1rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.team__card:nth-child(1) { animation-delay: .1s; }
.team__card:nth-child(2) { animation-delay: .2s; }
.team__card:nth-child(3) { animation-delay: .3s; }
.team__card:nth-child(4) { animation-delay: .4s; }

.team__card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--fta-green), var(--fta-green-hover));
  border-radius: calc(var(--fta-radius-lg) + 2px);
  filter: blur(8px);
  opacity: 0;
  transition: opacity var(--fta-transition-fast);
  z-index: -1;
}
.team__card:hover,
.team__card:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--fta-shadow-md);
}
.team__card:hover::before,
.team__card:focus-within::before {
  opacity: 1;
}

/* ---------- Photo & Hover Animations ---------------------------------- */
.team__photo-frame {
  width: 100%;
  aspect-ratio: 1/1;
  background: #ededed;
  display: block;
}
.team__photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform var(--fta-transition-slow), filter var(--fta-transition-fast);
  position: relative;
  z-index: 0;
  display: block;
}
.team__card:hover .team__photo,
.team__card:focus-within .team__photo {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.team__photo::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%) translateY(-100%) rotate(25deg);
  pointer-events: none;
  opacity: 0;
  transition: none;
}
.team__card:hover .team__photo::after,
.team__card:focus-within .team__photo::after {
  animation: photoGlare 1s ease-in-out forwards;
}
@keyframes photoGlare {
  from {
    opacity: 0;
    transform: translateX(-100%) translateY(-100%) rotate(25deg);
  }
  to {
    opacity: 1;
    transform: translateX(100%) translateY(100%) rotate(25deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .team__photo,
  .team__photo::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Info content, text, pills etc ------------------------------ */
.team__info {
  padding: var(--fta-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-sm);
  flex: 1 1 auto;    /* Preenche o espaço do card */
}
.team__name {
  font-family: var(--fta-font-heading);
  font-size: 1.25rem;
  color: var(--fta-text-primary);
  text-align: center;
  margin: 0;
}
.team__role {
  font-size: .9375rem;
  color: var(--fta-text-secondary);
  margin: 0;
}
.team__bio {
  font-size: .875rem;
  line-height: var(--fta-line-height);
  flex-grow: 1;
  margin: 0;
}
.team__credentials {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fta-spacing-xs);
  padding: 0; margin: 0;
}
.team__credentials li {
  background: var(--fta-green);
  color: var(--fta-white);
  font-size: .75rem;
  padding: .25rem var(--fta-spacing-xs);
  border-radius: var(--fta-radius-sm);
}

/* ---------- Call to action btn ----------------------------------------- */
.team__cta {
  text-align: center;
  margin-top: var(--fta-spacing-xl);
}
.team__cta .btn {
  position: relative;
  overflow: hidden;
  background: var(--fta-green);
  color: var(--fta-white);
  padding: var(--fta-spacing-sm) var(--fta-spacing-md);
  border-radius: var(--fta-radius-md);
  font-family: var(--fta-font-heading);
  transition: background var(--fta-transition-fast);
}
.team__cta .btn:hover,
.team__cta .btn:focus { background: var(--fta-green-hover); }
.team__cta .btn:focus-visible {
  outline: 2px solid var(--fta-green-hover);
  outline-offset: 2px;
}
.team__cta .btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.3);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s ease, height .5s ease, opacity .6s ease;
  opacity: 0;
}
.team__cta .btn:active::after {
  width: 200%; height: 400%; opacity: 1;
  transition: 0s;
}

/* ---------- Swiper Navigation (setas) --------------------------------- */
.swiper-button-next,
.swiper-button-prev {
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fta-white, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: background 0.18s, transform 0.18s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--fta-green);
  transform: scale(1.1);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
}

/* ---------- Global focus & reduced motion ------------------------------ */
:focus {
  outline: 2px solid var(--fta-green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .team__card,
  .team__photo,
  .team__cta .btn::after,
  .team__title,
  .team__accent {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- RESPONSIVO Swiper: (Swiper JS gere o n.º de slides) ------- */
@media (max-width: 900px) {
  .team__card {
    min-height: 400px;
  }
}
@media (max-width: 600px) {
  .team__card {
    max-width: 94vw;
    min-height: 340px;
  }
}

.team-swiper,
.team-swiper .swiper-wrapper,
.team-swiper .swiper-slide,
.team-swiper .swiper,
.swiper,
.swiper-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

body,
html {
  background: var(--fta-white) !important;
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • ACADEMY MEDIA                                 */
/*  BEM, token-driven, responsive, accessible                             */
/* ====================================================================== */
.academy-featured-media {
  background:
    radial-gradient(ellipse 60% 80% at 90% 20%, rgba(0,132,75,0.08) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(110deg,
      var(--fta-grey-dark) 60%,
      rgba(0,132,75,0.13) 80%,
      var(--fta-white) 100%);
  color: var(--fta-text-light);
  padding: var(--fta-spacing-xl) 0 var(--fta-spacing-lg) 0;
  overflow: hidden;
  position: relative;
}

.academy-featured__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--fta-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-lg);
}

/* ================= HEADLINE =================== */
.academy-featured__header {
  margin-bottom: var(--fta-spacing-md);
  text-align: left;
  position: relative;
}

.academy-featured__accent {
  display: inline-block;
  width: 3.5rem; height: 0.25rem;
  background: linear-gradient(90deg, var(--fta-green) 0%, var(--fta-green-hover) 100%);
  border-radius: var(--fta-radius-md);
  margin-bottom: 1rem;
  animation: accentGrow 1.2s cubic-bezier(.6,.2,.1,1.2) both;
}
@keyframes accentGrow {
  from { width: 0; opacity: 0; }
  to { width: 3.5rem; opacity: 1; }
}
.academy-featured__title {
  font-family: var(--fta-font-heading);
  font-size: clamp(2.2rem, 3vw + 1.3rem, 3rem);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--fta-white);
  margin: 0 0 .5rem 0;
  line-height: 1.1;
}
.academy-featured__supertitle {
  font-size: 1.1rem;
  color: var(--fta-green);
  letter-spacing: 0.07em;
  font-family: var(--fta-font-heading);
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.academy-featured__subtitle {
  font-size: 1.13rem;
  color: var(--fta-grey-medium);
  margin: 0 0 0.8rem 0;
  font-family: var(--fta-font-body);
}
.academy-featured__highlight {
  color: var(--fta-green);
  font-weight: 500;
}

/* ========== MEDIA GALLERY LAYOUT (FLEX) ========== */
.academy-featured__media-gallery {
  display: flex;
  gap: var(--fta-spacing-lg);
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ================= VÍDEO HERO À ESQUERDA ================== */
.academy-featured__video {
  flex: 1 1 450px;
  max-width: 560px;
  min-width: 300px;
  border-radius: var(--fta-radius-lg);
  box-shadow: var(--fta-shadow-lg);
  background: var(--fta-grey-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.academy-featured__video video {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--fta-grey-dark);
  border-radius: var(--fta-radius-lg);
}

/* Etiqueta para vídeos */
.academy-featured__label {
  position: absolute;
  bottom: 1rem; left: 1rem;
  background: color-mix(in srgb, var(--fta-green-hover) 87%, var(--fta-black) 13%);
  color: var(--fta-white);
  padding: .3rem 1.1rem;
  border-radius: var(--fta-radius-lg);
  font-size: .95rem;
  font-family: var(--fta-font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 10px 0 var(--fta-green-hover);
  z-index: 4;
  pointer-events: none;
  opacity: 0.95;
  animation: fadeInUp .8s .6s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(2rem);}
  to   { opacity: 1; transform: none;}
}

@media (max-width: 600px) {
  .academy-featured__video {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--fta-radius-md);
    box-shadow: var(--fta-shadow-md);
    align-items: flex-end;
    justify-content: center;
  }

  .academy-featured__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fta-radius-md);
  }
}

.academy-featured__sound-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.35);
  color: var(--fta-white);
  border: none;
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.3s ease, transform 0.3s ease;
}

.academy-featured__sound-btn:hover,
.academy-featured__sound-btn:focus {
  background: var(--fta-green-hover);
  outline: none;
  transform: scale(1.05);
}

.academy-featured__sound-btn svg {
  fill: currentColor;
  width: 1.4rem;
  height: 1.4rem;
}

/* Estado ativo (quando som está ligado) - se usares toggle com classe .active */
.academy-featured__sound-btn.active {
  background: var(--fta-green);
  color: var(--fta-white);
}

@media (max-width: 600px) {
  .academy-featured__sound-btn {
    width: 2.2rem;
    height: 2.2rem;
    bottom: 0.75rem;
    right: 0.75rem;
  }

  .academy-featured__sound-btn svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* =============== SWIPER CAROUSEL À DIREITA =============== */
.academy-media-swiper {
  flex: 1 1 360px;
  width: 480px;
  min-width: 260px;
  max-width: 520px;
  aspect-ratio: 16/9;
  background: var(--fta-grey-dark);
  border-radius: var(--fta-radius-lg);
  box-shadow: var(--fta-shadow-md);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper {
  width: 100%;
  height: 100%;
  border-radius: var(--fta-radius-lg);
  background: var(--fta-grey-dark);
}
.swiper-wrapper {
  align-items: center;
}
.swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--fta-grey-dark);
  border-radius: var(--fta-radius-lg);
  transition: box-shadow 0.3s, filter 0.2s;
  position: relative;
  overflow: hidden;
}
.swiper-slide img,
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fta-radius-lg);
  cursor: pointer;
  box-shadow: none;
  background: var(--fta-grey-dark);
  transition: filter 0.2s, box-shadow 0.2s;
}
.swiper-slide img:hover,
.swiper-slide video:hover {
  filter: brightness(1.13) saturate(1.12);
  box-shadow: 0 0 16px 2px var(--fta-green);
}

/* Swiper Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
  background: var(--fta-white);
  color: var(--fta-green);
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  box-shadow: var(--fta-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  transition: background var(--fta-transition-fast), color var(--fta-transition-fast), box-shadow var(--fta-transition-fast);
  z-index: 10;
}
.swiper-button-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:focus,
.swiper-button-prev:focus {
  background: var(--fta-green);
  color: var(--fta-white);
}
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none !important; /* Usa SVG personalizado, não texto */
}
/* Swiper Pagination Bullets */
.swiper-pagination {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  z-index: 6;
}
.swiper-pagination-bullet {
  background: var(--fta-green);
  opacity: 0.36;
  width: 11px; height: 11px;
  margin: 0 4px;
  border-radius: 50%;
  transition: opacity .2s, background .2s;
  border: 2px solid var(--fta-white);
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--fta-green-hover);
  border-color: var(--fta-green);
}

@media (max-width: 600px) {
  .academy-featured-media {
    padding: var(--fta-spacing-md) 0 var(--fta-spacing-md);
  }

  .academy-featured__container {
    padding: 0 var(--fta-spacing-sm);
    gap: var(--fta-spacing-md);
  }

  .academy-featured__title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .academy-featured__subtitle {
    font-size: 1rem;
  }

  .academy-featured__media-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--fta-spacing-md);
    align-items: center;
  }

  .academy-featured__video,
  .academy-media-swiper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--fta-radius-md);
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 2.2rem;
    height: 2.2rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .swiper-pagination {
    bottom: 10px;
  }

  .academy-featured__label {
    font-size: 0.85rem;
    padding: 0.25rem 0.9rem;
    bottom: 0.75rem;
    left: 0.75rem;
  }

  .academy-featured__fullscreen-btn {
    width: 2.2rem;
    height: 2.2rem;
    top: 0.75rem;
    right: 0.75rem;
  }
}

@media (max-width: 768px) {
  .academy-featured__media-gallery {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--fta-spacing-md);
    width: 100%;
  }

  .academy-featured__video,
  .academy-media-swiper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 16/9;
    border-radius: var(--fta-radius-md);
    box-shadow: var(--fta-shadow-sm);
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide img,
  .swiper-slide video {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .academy-featured__label {
    font-size: 0.85rem;
    padding: 0.25rem 0.9rem;
    bottom: 0.75rem;
    left: 0.75rem;
  }

  .academy-featured__fullscreen-btn {
    width: 2.2rem;
    height: 2.2rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 2rem;
    height: 2rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .swiper-pagination {
    bottom: 10px;
  }
}


/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • RESULTS SECTION                                  */
/*  BEM, token-driven, responsive, accessible                             */
/* ====================================================================== */
.results-partners {
  padding: var(--fta-spacing-lg) 0;
  background: var(--fta-grey-light);
  position: relative;
}

.results__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--fta-spacing-md) 0;
  position: relative;
}

/* ---- ACCENT, TITLE, INTRO alinhados à esquerda como .team__section ---- */
.results__accent {
  position: absolute;
  top: var(--fta-spacing-sm);
  left: var(--fta-spacing-md);
  width: 3rem;
  height: 0.25rem;
  background: var(--fta-green);
  border-radius: var(--fta-radius-sm);
}
.results__title {
  position: relative;
  font-family: var(--fta-font-heading);
  font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
  line-height: 1.2;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-xs);
  margin-left: var(--fta-spacing-md);
  text-align: left;
  z-index: 1;
}
.results__intro {
  max-width: 44rem;
  font-size: 1.08rem;
  margin-bottom: var(--fta-spacing-lg);
  margin-left: calc(var(--fta-spacing-md) + 2px);
  color: var(--fta-text-secondary);
  text-align: left;
  z-index: 1;
}

/* -- GRID centralizado com flex e gap premium -- */
.results__grid {
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-md);
  align-items: center;       /* <-- centraliza os cards */
  justify-content: center;
  list-style: none;
  margin: 0 0 var(--fta-spacing-md) 0;
  padding: 0;
}
@media (min-width: var(--bp-md)) {
  .results__grid {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: var(--fta-spacing-lg);
  }
}

/* -- CARD -- */
.results__card {
  background: var(--fta-white);
  border: 1.5px solid var(--fta-grey-medium);
  border-radius: var(--fta-radius-lg);
  box-shadow: var(--fta-shadow-sm);
  text-align: center;
  padding: var(--fta-spacing-md) var(--fta-spacing-sm);
  transition: box-shadow var(--fta-transition-fast), transform var(--fta-transition-fast), border var(--fta-transition-fast);
  outline: none;
  min-width: 180px;
  max-width: 260px;
  width: 100%;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
}
.results__card:focus-visible {
  box-shadow: 0 0 0 3px var(--fta-green);
  border-color: var(--fta-green);
}
.results__card:hover {
  box-shadow: var(--fta-shadow-md);
  transform: translateY(-2px) scale(1.03);
  border-color: var(--fta-green);
}

/* -- NUMBER -- */
.results__stat {
  font-family: var(--fta-font-heading);
  font-size: 2.4rem;
  color: var(--fta-green);
  margin: 0 0 var(--fta-spacing-xs) 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.results__desc {
  font-size: 1rem;
  color: var(--fta-text-secondary);
  margin: 0;
}

/* -- PARTNERS GRID: centralizados, tamanhos fixos, premium -- */
.partners__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fta-spacing-md);
  align-items: center;
  justify-content: center;
  margin: var(--fta-spacing-md) 0 var(--fta-spacing-lg) 0;
}
.partner__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fta-white);
  border: 1.5px solid var(--fta-grey-medium);
  border-radius: var(--fta-radius-md);
  box-shadow: var(--fta-shadow-sm);
  padding: var(--fta-spacing-xs) var(--fta-spacing-md);
  min-width: 120px;
  min-height: 56px;
  max-width: 144px;
  max-height: 60px;
  aspect-ratio: 2.4 / 1;
  transition: box-shadow var(--fta-transition-fast), border var(--fta-transition-fast), transform var(--fta-transition-fast);
  outline: none;
}
.partner__logo-link:focus-visible {
  box-shadow: 0 0 0 3px var(--fta-green);
  border-color: var(--fta-green);
  z-index: 2;
}
.partner__logo-link:hover,
.partner__logo-link:active {
  box-shadow: var(--fta-shadow-md);
  border-color: var(--fta-green);
  transform: translateY(-1px) scale(1.025);
}
.partner__logo {
  max-width: 100px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.18) brightness(1.03) contrast(1.12);
  transition: filter var(--fta-transition-fast);
}
@media (min-width: var(--bp-md)) {
  .partner__logo-link {
    min-width: 144px;
    min-height: 64px;
    max-width: 170px;
    max-height: 64px;
    padding: var(--fta-spacing-sm) var(--fta-spacing-lg);
  }
  .partner__logo {
    max-width: 128px;
    max-height: 40px;
  }
}

/* -- QUOTE -- */
.results__quote {
  margin: var(--fta-spacing-lg) 0 0 0;
  padding: var(--fta-spacing-md) var(--fta-spacing-md) var(--fta-spacing-sm) var(--fta-spacing-lg);
  background: rgba(0,132,75,0.07);
  border-left: 3px solid var(--fta-green);
  border-radius: var(--fta-radius-lg);
  color: var(--fta-text-secondary);
  font-size: 1.08rem;
  font-style: italic;
  position: relative;
  max-width: 50rem;
  margin-left: 0;
}
.results__quote cite {
  display: block;
  margin-top: var(--fta-spacing-xs);
  font-size: 0.98em;
  color: var(--fta-green);
  font-style: normal;
}

/* ====== MEDIA QUERIES ===== */
@media (min-width: var(--bp-lg)) {
  .results-partners {
    padding: var(--fta-spacing-xl) var(--fta-spacing-lg);
  }
  .results__inner {
    max-width: 1200px;
  }
  .results__accent {
    left: var(--fta-spacing-xl);
  }
  .results__title,
  .results__intro {
    margin-left: var(--fta-spacing-xl);
  }
  .partners__grid {
    gap: var(--fta-spacing-lg);
  }
  .results__quote {
    font-size: 1.15rem;
    padding-left: var(--fta-spacing-xl);
  }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • PARCEIROS SECTION                             */
/*  BEM, token-driven, responsivo, premium, acessível                     */
/* ====================================================================== */
.fta-partners {
  position: relative;
  padding: var(--fta-spacing-xl) var(--fta-spacing-md);
  background: linear-gradient(135deg, var(--fta-white) 0%, rgba(0, 0, 0, 0.015) 100%);
  color: var(--fta-text-primary);
  overflow: hidden;
}

.fta-partners::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0, 132, 75, 0.03), transparent 70%);
  z-index: 0;
  animation: float-bg 20s linear infinite;
}

@keyframes float-bg {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-10%, 10%); }
  100% { transform: translate(0, 0); }
}

.fta-partners__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-lg);
}

/* Accent Line */
.fta-partners__accent {
  display: inline-block;
  width: 4rem;
  height: 5px;
  background: linear-gradient(90deg, var(--fta-green), var(--fta-green-hover));
  border-radius: var(--fta-radius-sm);
  margin-bottom: var(--fta-spacing-sm);
}

/* Title */
.fta-partners__title {
  font-family: var(--fta-font-heading);
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--fta-spacing-sm);
  position: relative;
  isolation: isolate;
}

.fta-partners__title::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 3rem;
  height: 3px;
  background-color: var(--fta-green);
  border-radius: var(--fta-radius-sm);
}

/* Intro Text */
.fta-partners__intro {
  font-family: var(--fta-font-body);
  font-size: 1.05rem;
  line-height: var(--fta-line-height);
  color: var(--fta-text-secondary);
  max-width: 60ch;
}

/* Grid Layout */
.fta-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fta-spacing-md);
  align-items: center;
  justify-items: center;
}

@media (min-width: 768px) {
  .fta-partners__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fta-spacing-lg);
  }
}

.fta-partners__card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--fta-radius-lg);
  padding: var(--fta-spacing-sm);
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--fta-shadow-sm);
  transition: transform var(--fta-transition-fast), box-shadow var(--fta-transition-fast), background var(--fta-transition-fast);
  outline: none;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.fta-partners__card a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.fta-partners__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 132, 75, 0.08), transparent);
  opacity: 0;
  transition: opacity var(--fta-transition-fast);
  z-index: 0;
}

.fta-partners__card:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 132, 75, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .fta-partners__card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--fta-shadow-md);
    background: rgba(255, 255, 255, 0.85);
  }

  .fta-partners__card:hover::before {
    opacity: 1;
  }
}

/* Logo */
.fta-partners__logo {
  max-width: 80%;
  max-height: 80%;
  height: auto;
  filter: grayscale(100%) brightness(0.9) contrast(1);
  transition: filter var(--fta-transition-fast), transform var(--fta-transition-fast);
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .fta-partners__card:hover .fta-partners__logo {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
  }
}

/* ====================================================================== */
/*  FOOT TRAINING ACADEMY • TESTIMONIALS SECTION                          */
/*  BEM, token-driven, responsivo, premium, acessível                     */
/* ====================================================================== */
.testimonials {
  padding: var(--fta-spacing-xl) var(--fta-spacing-md);
  background: linear-gradient(180deg, var(--fta-white) 0%, rgba(0, 0, 0, 0.015) 100%);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.testimonials::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0, 132, 75, 0.035), transparent 70%);
  animation: testimonials-float 25s linear infinite;
  z-index: 0;
}

@keyframes testimonials-float {
  0% { transform: translate(0, 0); }
  50% { transform: translate(8%, 6%); }
  100% { transform: translate(0, 0); }
}

.testimonials__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fta-spacing-lg);
}

/* Accent */
.testimonials__accent {
  display: inline-block;
  width: 4rem;
  height: 4px;
  background: linear-gradient(90deg, var(--fta-green), var(--fta-green-hover));
  border-radius: var(--fta-radius-sm);
  margin-bottom: var(--fta-spacing-sm);
}

/* Title */
.testimonials__title {
  font-family: var(--fta-font-heading);
  font-size: 2.25rem;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--fta-spacing-sm);
}

/* Intro */
.testimonials__intro {
  font-family: var(--fta-font-body);
  font-size: 1.05rem;
  line-height: var(--fta-line-height);
  color: var(--fta-text-secondary);
  max-width: 60ch;
}

/* Carousel Base */
.testimonials__carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track-container {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: var(--fta-spacing-md);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  padding-bottom: var(--fta-spacing-sm);
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  transition: transform var(--fta-transition-fast);
}

@media (min-width: 768px) {
  .carousel__slide {
    flex: 0 0 48%;
  }
}

@media (min-width: 1024px) {
  .carousel__slide {
    flex: 0 0 31.5%;
  }
}

/* Testimonial Card */
.testimonial {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--fta-radius-lg);
  padding: var(--fta-spacing-md);
  box-shadow: var(--fta-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--fta-transition-fast), box-shadow var(--fta-transition-fast);
  position: relative;
  min-height: 280px;
}

.testimonial:focus-within,
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--fta-shadow-md);
}

/* Testimonial Text */
.testimonial__text {
  font-family: var(--fta-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fta-text-primary);
  margin-bottom: var(--fta-spacing-sm);
  quotes: "“" "”";
  position: relative;
}

.testimonial__text::before {
  content: open-quote;
  font-size: 2rem;
  color: var(--fta-green);
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
}

/* Stars */
.testimonial__stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: var(--fta-spacing-sm);
}

.star {
  transition: transform var(--fta-transition-fast);
}

.testimonial:hover .star {
  transform: scale(1.1);
}

/* Footer */
.testimonial__footer {
  margin-top: auto;
  font-family: var(--fta-font-body);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.95rem;
  color: var(--fta-text-secondary);
}

.testimonial__name {
  font-weight: 600;
  color: var(--fta-text-primary);
}

.testimonial__role {
  font-size: 0.85rem;
}

/* Carousel Buttons */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.05);
  color: var(--fta-text-primary);
  border: none;
  font-size: 2rem;
  padding: var(--fta-spacing-xs);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background var(--fta-transition-fast);
}

.carousel__btn:hover,
.carousel__btn:focus-visible {
  background: var(--fta-green-hover);
  color: var(--fta-white);
  outline: none;
}

.carousel__btn--prev {
  left: var(--fta-spacing-sm);
}

.carousel__btn--next {
  right: var(--fta-spacing-sm);
}

@media (max-width: 768px) {
  .carousel__btn {
    display: none;
  }
}

/* ==========================================
   FTA – Secção CTA Final
   ========================================== */

.cta-final {
  position: relative;
  overflow: hidden;
  padding: var(--fta-spacing-xl) var(--fta-spacing-md);
  background: linear-gradient(135deg, var(--fta-green), var(--fta-green-hover));
  color: var(--fta-text-light);
  text-align: center;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 12px 24px -4px rgba(0, 0, 0, 0.25);
  border-radius: var(--fta-radius-xl);
}

.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 70%),
              radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.03), transparent 80%);
  z-index: 0;
  pointer-events: none;
}

.cta-final__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fta-spacing-md);
  animation: fade-slide-in 0.8s ease-out both;
}

/* Elemento decorativo */
.cta-final__accent {
  display: inline-block;
  width: 3rem;
  height: 4px;
  background-color: var(--fta-white);
  border-radius: var(--fta-radius-sm);
  margin-bottom: var(--fta-spacing-sm);
  opacity: 0.9;
  transform: scaleX(0);
  animation: grow-accent 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

/* Título */
.cta-final__title {
  font-family: var(--fta-font-heading);
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: var(--fta-spacing-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

  background: linear-gradient(to right, var(--fta-white), rgba(255, 255, 255, 0.6));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  color: var(--fta-white); /* fallback para Firefox */
  display: inline-block;
}

@media (min-width: 768px) {
  .cta-final__title {
    font-size: 2.75rem;
  }
}

/* Subtexto */
.cta-final__text {
  font-family: var(--fta-font-body);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 52ch;
  line-height: var(--fta-line-height);
  opacity: 0.95;
}

/* Botão */
.cta-final__btn {
  font-family: var(--fta-font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: var(--fta-spacing-sm) var(--fta-spacing-lg);
  background: rgba(255, 255, 255, 0.95);
  color: var(--fta-green);
  border-radius: var(--fta-radius-md);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4px);
}

.cta-final__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-final__btn:hover {
    background: var(--fta-green-hover);
    color: var(--fta-white);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  }

  .cta-final__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
  }

  .cta-final__btn:hover::after {
    opacity: 1;
  }
}

/* Animações */
@keyframes fade-slide-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes grow-accent {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ===================== FOOTER ===================== */
.footer {
  background: linear-gradient(135deg, var(--fta-black), rgba(0, 0, 0, 0.85));
  color: var(--fta-text-light);
  font-family: var(--fta-font-body);
  padding: var(--fta-spacing-xl) var(--fta-spacing-md);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px); /* efeito vidro fosco */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}

/* Elemento decorativo flutuante */
.footer::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 300%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0, 132, 75, 0.2), transparent 70%);
  animation: footerPulse 8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
}

/* Container */
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fta-spacing-lg);
  text-align: center;
}

/* Copyright & Créditos */
.footer__legal {
  font-size: 0.875rem;
  line-height: var(--fta-line-height);
  color: rgba(255, 255, 255, 0.7);
}

.footer__copy,
.footer__by {
  margin: 0;
}

.footer__link {
  color: var(--fta-link);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--fta-transition-fast), text-shadow var(--fta-transition-fast);
}

.footer__link:hover,
.footer__link:focus {
  color: var(--fta-link-hover);
  text-shadow: 0 0 4px rgba(0, 132, 75, 0.6);
  outline: none;
}

.footer__link:focus-visible {
  outline: 2px solid var(--fta-link-hover);
  outline-offset: 4px;
}

/* Navegação principal */
.footer__nav {
  order: -1;
}

.footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fta-spacing-md);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer__item {
  margin: 0;
}

/* Social media links */
.footer__social {
  display: flex;
  gap: var(--fta-spacing-sm);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(2px);
  transition: transform var(--fta-transition-fast), box-shadow var(--fta-transition-fast), background-color var(--fta-transition-fast);
}

.footer__social-link:hover,
.footer__social-link:focus {
  transform: translateY(-4px) scale(1.05);
  background-color: rgba(0, 132, 75, 0.2);
  box-shadow: 0 6px 16px rgba(0, 132, 75, 0.3);
  outline: none;
}

.footer__social-link:focus-visible {
  outline: 2px solid var(--fta-link-hover);
  outline-offset: 4px;
}

.footer__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--fta-white);
}

/* Microanimação flutuante (fundo) */
@keyframes footerPulse {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.05) translateY(10px);
  }
}

/* Acessibilidade para movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .footer__link,
  .footer__social-link {
    transition: none !important;
  }

  .footer::before {
    animation: none;
  }
}

/* ========== BREAKPOINTS ========== */
@media (min-width: var(--bp-md)) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }

  .footer__nav {
    order: 0;
  }

  .footer__legal {
    max-width: 33%;
  }

  .footer__list {
    justify-content: flex-start;
  }

  .footer__social {
    justify-content: flex-end;
  }
}

@media (min-width: var(--bp-lg)) {
  .footer {
    padding: var(--fta-spacing-xl) var(--fta-spacing-lg);
  }

  .footer__icon {
    width: 2rem;
    height: 2rem;
  }
}

.footer__icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-block;
  color: var(--fta-white); /* ou outro token como --fta-grey-light se preferires */
  transition: color 0.3s ease;
}

.footer__social-link:hover .footer__icon {
  color: var(--fta-green); /* ou a cor de hover que quiseres */
}