﻿@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,800;1,400&display=swap");

/* ===== Base / Tokens (Bootstrap-safe) ===== */
:root{
    --orange:#FF8000;
    --navy:#29235C;
    --bg:#E8EDFF;
    --muted:#475569;
    --text:#29235C;
    --al-btn-shimmer-duration:2.10s;
    --mg-btn-swap-duration:0.9s;
  }
  .academia-page{
    background:var(--bg);
    color:var(--text);
    font-family:'Roboto',system-ui,-apple-system,sans-serif;
  }
  .academia-page header{border-bottom:0;}

  /* ===== Seção: Impacto (al-impacto) ===== */
  .al-impacto{
    position:relative;
    overflow:hidden;
    padding:90px 0 80px;
    background-color:var(--bg);
  }
  .al-impacto__bg{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:min(100%, 1920px);
    translate:-50% 0;
    background-image:url('../img/academia/bg-secao-impacto.webp');
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto 100%;
    pointer-events:none;
    z-index:0;
  }
  .al-impacto > .container{
    position:relative;
    z-index:1;
  }
  .al-impacto::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(232,237,255,1) 16.8%, rgba(255,255,255,0) 83.2%);
    pointer-events:none;
    z-index:1;
  }
  .al-impacto > .container > *{position:relative;z-index:1;}

  /* Variante opcional com fade lateral na imagem de fundo.
     Rollback simples: remover a classe .al-impacto--edge-fade do HTML. */
  .al-impacto--edge-fade{
    isolation:isolate;
  }

  .al-impacto--edge-fade .al-impacto__bg{
    -webkit-mask-image: linear-gradient(
      to left,
      transparent 0%,
      rgba(0, 0, 0, .32) 2%,
      rgba(0, 0, 0, .72) 5%,
      rgba(0, 0, 0, .94) 8%,
      rgba(0, 0, 0, 1) 11%,
      rgba(0, 0, 0, 1) 100%
    );
    mask-image: linear-gradient(
      to left,
      transparent 0%,
      rgba(0, 0, 0, .32) 2%,
      rgba(0, 0, 0, .72) 5%,
      rgba(0, 0, 0, .94) 8%,
      rgba(0, 0, 0, 1) 11%,
      rgba(0, 0, 0, 1) 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  @media (max-width: 1349.98px){
    .al-impacto::before{
      background:linear-gradient(90deg, rgba(232,237,255,.97) 12%, rgba(241,244,255,.9) 45%, rgba(255,255,255,.45) 100%);
    }
    .al-impacto:not(.al-impacto--edge-fade)::before{
      background:rgba(255,255,255,.38);
    }
  }
  .al-impacto__grid{
    width:80%;
    max-width:none;
    margin-left:0;
    margin-right:auto;
    padding-right:0;
  }
  @media (max-width: 991.98px){
    .al-impacto__grid{width:100%;}
  }
  .al-impacto__title{
    color:var(--navy);
    font-weight:700;
    font-size:clamp(1.75rem,2.6vw,2.25rem);
    line-height:1.1;
    letter-spacing:-.3px;
  }
  .al-impacto__lead{
    max-width:930px;
    margin:22px auto 0;
    font-size:1.125rem;
    line-height:1.35;
    color:var(--navy);
    font-weight:400;
  }
  .al-impacto__lead .al-impacto__lead-strong{color:var(--orange);font-weight:400;}
  .al-impacto__divider{
    width:96px;height:4px;border-radius:0;
    background:var(--orange);
    margin:30px auto 0;
  }
  .al-impacto__grid{
    margin-top:54px;
    position:relative;
  }
  .al-impacto__grid::before{
    content:"";
    position:absolute;
    top:10px;bottom:10px;left:50%;
    width:3px;background:var(--navy);
    transform:translateX(-1.5px);
    border-radius:2px;
  }
  @media (max-width: 767.98px){
    .al-impacto__grid::before{display:none;}
  }
  .al-impacto__stat{
    display:flex;
    align-items:flex-start;
    gap:24px;
    padding:26px 10px 56px;
  }
  .al-impacto__grid .row > .col-12:nth-child(odd) .al-impacto__stat{padding-right:34px;}
  .al-impacto__grid .row > .col-12:nth-child(even) .al-impacto__stat{padding-left:34px;}
  @media (max-width: 767.98px){
    .al-impacto__grid .row > .col-12:nth-child(odd) .al-impacto__stat,
    .al-impacto__grid .row > .col-12:nth-child(even) .al-impacto__stat{padding-left:10px;padding-right:10px;}
  }
  .al-impacto__stat .al-donut{flex:0 0 auto;}
  .al-impacto__stat-body{padding-top:8px;}
  .al-impacto__stat-body p{
    margin:0 0 18px;
    font-size:1rem;
    line-height:1.4;
    color:var(--navy);
    font-weight:400;
  }
  .al-impacto__stat-body p b{color:var(--orange);font-weight:800;}
  .al-impacto__stat-body .al-impacto__source{
    font-size:.75rem;
    color:var(--navy);
    font-style:italic;
    margin:0;
    font-weight:400;
  }
  .al-impacto__stat-body .al-impacto__source i{font-style:italic;color:var(--orange);}

  /* Donut */
  .al-donut{
    --size:106px;
    --thickness:16px;
    width:var(--size);height:var(--size);
    position:relative;
    display:grid;place-items:center;
  }
  .al-donut svg{
    width:100%;height:100%;
    transform:rotate(-90deg);
    overflow:visible;
    shape-rendering:geometricPrecision;
  }
  .al-donut .al-donut__track{fill:none;stroke:var(--navy);stroke-width:var(--thickness);}
  .al-donut .al-donut__fill{
    fill:none;
    stroke:var(--orange);
    stroke-width:var(--thickness);
    stroke-linecap:round;
    transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .al-donut .al-donut__label{
    position:absolute;inset:0;
    display:grid;place-items:center;
    font-weight:800;
    color:var(--orange);
    font-size:1.8rem;
    letter-spacing:-.8px;
    line-height:1;
  }

  /* CTA */
  .al-impacto__cta{
    margin-top:70px;
    text-align:center;
  }
  .al-impacto__cta h3{
    color:var(--navy);
    font-weight:800;
    font-size:clamp(1.35rem,2vw,2rem);
    max-width:870px;
    margin:0 auto 32px;
    line-height:1.1;
    letter-spacing:-.5px;
  }
  /* ===== Hero Banner ===== */
  .al-hero{
    position:relative;
    overflow:hidden;
    min-height:480px;
    display:flex;
    align-items:center;
    border-left:15px solid var(--orange);
  }
  .al-hero__bg{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center right;
    display:block;
  }
  .al-hero__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(41,35,92,1) 0%,rgba(41,35,92,.82) 52%,rgba(26,43,72,.66) 100%);
  }
  /* Ultrawide: a foto para de crescer em 2560px e fica centrada — acima disso o
     `cover` só a esticava. A seção ganha o navy do overlay para preencher as
     sobras laterais e a máscara dissolve as emendas (a da esquerda o overlay já
     cobre sozinho, por ser opaco ali). */
  @media (min-width: 2560px){
    .al-hero{
      background-color:#29235c;
    }
    .al-hero__bg{
      max-width:2560px;
      margin-inline:auto;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
    }
  }
  .al-hero__inner{
    position:relative;
    z-index:1;
    padding:80px 0;
  }
  .al-hero__title{
    font-size:clamp(2.5rem,5vw,4rem);
    line-height:1.05;
    font-weight:400;
    margin:0 0 24px;
  }
  .al-hero__title strong{
    color:#fff;
    font-weight:700;
    display:block;
  }
  .al-hero__title span{
    color:var(--orange);
    font-weight:300;
    display:block;
    font-size:.7em;
  }
  .al-hero__desc{
    color:#CBD5E1;
    font-size:1.125rem;
    line-height:1.55;
    margin:0 0 36px;
    max-width:520px;
  }
  .al-hero__actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .al-hero__actions--mobile{display:none;}
  .al-hero__btn--primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--orange);
    color:#fff;
    font-weight:700;
    font-size:1rem;
    letter-spacing:.5px;
    padding:16px 28px;
    border-radius:8px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    box-shadow:0 10px 15px -3px rgba(0,0,0,.15);
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .al-hero__btn--primary:hover{
    background:#e87400;
    transform:translateY(-1px);
    box-shadow:0 14px 22px -4px rgba(255,128,0,.4);
    color:#fff;
  }
  .al-hero__btn--primary svg{width:16px;height:16px;flex-shrink:0;}
  .al-hero__btn--secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-weight:700;
    font-size:1rem;
    padding:16px 32px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.3);
    text-decoration:none;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:background .15s ease;
  }
  .al-hero__btn--secondary:hover{
    background:rgba(255,255,255,.18);
    color:#fff;
  }
  .al-hero__card{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.3);
    border-radius:8px;
    backdrop-filter:blur(6px);
    padding:28px 32px;
    color:#fff;
  }
  .al-hero__card-title{
    font-weight:700;
    font-size:1.25rem;
    line-height:1.35;
    margin:0 0 20px;
    color:#fff;
  }
  .al-hero__card-list{
    list-style:disc;
    padding-left:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .al-hero__card-list li{
    font-size:.9375rem;
    line-height:1.5;
    color:#fff;
  }
  .al-hero__card-list li b{font-weight:700;}
  .al-hero__card-list li em{font-style:italic;}
  @media (max-width:991.98px){
    .al-hero__inner{padding:64px 0;}
    .al-hero__card{margin-top:40px;}
    .al-hero__actions--desktop{display:none;}
    .al-hero__actions--mobile{
      display:flex;
      justify-content:center;
      margin-top:24px;
    }
  }
  @media (max-width:767.98px){
    .al-hero{min-height:auto;}
    .al-hero__inner{padding:56px 0;}
    .al-hero__title{font-size:clamp(2rem,7vw,3rem);}
    .al-hero__desc{font-size:1rem;}
    .al-hero__actions--mobile{
      flex-direction:column;
      align-items:center;
      gap:12px;
    }
    .al-hero__actions--mobile .al-hero__btn--primary,
    .al-hero__actions--mobile .al-hero__btn--secondary{
      width:min(100%, 360px);
      justify-content:center;
      text-align:center;
    }
  }

  /* ===== Seção "Modalidades" ===== */
  .al-modalidades{
    background:#fff;
    padding:80px 0 72px;
  }
  .al-modalidades__header{
    text-align:center;
    margin-bottom:56px;
  }
  .al-modalidades__title{
    color:var(--navy);
    font-weight:700;
    font-size:clamp(1.75rem,2.6vw,2.25rem);
    line-height:1.15;
    margin:0 0 24px;
    letter-spacing:-.3px;
  }
  .al-modalidades__divider{
    width:96px;height:4px;
    background:var(--orange);
    margin:0 auto;
  }
  .al-modalidade-card{
    background:#fff;
    border-radius:12px;
    border:1px solid #E2E8F0;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    padding:32px;
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .al-modalidade-card__icon{
    width:32px;height:32px;
    margin-bottom:20px;
    flex-shrink:0;
  }
  .al-modalidade-card__title{
    color:#1A2B48;
    font-weight:700;
    font-size:1.25rem;
    line-height:1.4;
    margin:0 0 16px;
  }
  .al-modalidade-card__text{
    color:var(--muted);
    font-size:1rem;
    line-height:1.5;
    margin:0 0 auto;
    padding-bottom:28px;
  }
  .al-modalidade-card__text b{
    font-weight:700;
    font-style:italic;
  }
  .al-modalidade-card__btn{
    display:block;
    width:100%;
    background:var(--orange);
    color:#fff;
    font-weight:700;
    font-size:.8125rem;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.5px;
    text-align:center;
    padding:14px 16px;
    border-radius:8px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .al-modalidade-card__btn:hover{
    background:#e87400;
    box-shadow:0 10px 15px -3px rgba(255,128,0,.3);
    transform:translateY(-1px);
    color:#fff;
  }
  @media (max-width:991.98px){
    .al-modalidades{padding:60px 0 56px;}
  }
  @media (max-width:767.98px){
    .al-modalidades__header{margin-bottom:40px;}
  }
  @media (max-width:575.98px){
    .al-modalidade-card{padding:24px;}
  }

  /* ===== Seção "Programas de Especialização" ===== */
  .al-especializacao{
    background:#E8EDFF;
    padding:80px 0 72px;
  }
  .al-especializacao__header{
    text-align:center;
    margin-bottom:56px;
  }
  .al-especializacao__title{
    color:#29235C;
    font-weight:700;
    font-size:clamp(1.75rem,2.6vw,2.25rem);
    line-height:1.15;
    margin:0 0 16px;
    letter-spacing:-.3px;
  }
  .al-especializacao__subtitle{
    color:#475569;
    font-weight:700;
    font-size:1.125rem;
    line-height:1.4;
    margin:0 0 12px;
  }
  .al-especializacao__desc{
    color:#475569;
    font-weight:400;
    font-size:1rem;
    line-height:1.5;
    margin:0 auto 24px;
    max-width:560px;
  }
  .al-especializacao__divider{
    width:96px;height:4px;
    background:var(--orange);
    margin:0 auto;
  }


  /* ===== Cards no formato padrão (cal-card) — lista vertical data-driven =====
     Contrato portado da Agenda/Eventos (.cal-card / .cal-tag / .cal-btn),
     escopado a .al-especializacao. Os tokens abaixo ficam contidos na seção. */
  .al-especializacao{
    --color-navy-deep:#29235C;
    --color-accent:#FF8000;
    --color-accent-dark:#E67300;
    --color-white:#ffffff;
    --color-text-muted:#475569;
    --color-border-soft:#dddddd;
    --tag-local-bg:rgba(26,43,72,.9);
    --tag-tipo-bg:rgba(22,145,148,.2);
    --tag-tipo-text:#169194;
    --tag-novo-bg:rgba(203,108,230,.2);
    --tag-novo-text:#cb6ce6;
    --tag-setor-bg:rgba(255,128,1,.2);
    --tag-setor-text:#ff8001;
    --font-weight-regular:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;
    --font-weight-extrabold:800;
  }

  /* A lista cresce verticalmente conforme entram novas edições.
     Largura ajustada ao conteúdo do card (foto + corpo de texto), evitando
     o branco excessivo à direita quando o card é mais largo que o conteúdo. */
  .al-especializacao__list{
    max-width:800px;
    margin:0 auto;
  }

  .al-especializacao .cal-card{
    display:flex;
    align-items:center;
    gap:28px;
    background-color:var(--color-white);
    border:1px solid #ececec;
    border-left:4px solid var(--color-accent);
    border-radius:10px;
    min-height:171px;
    padding:23px 24px 23px 18px;
  }
  .al-especializacao .cal-card + .cal-card{
    margin-top:12px;
  }

  /* Foto com selo de data sobreposto */
  .al-especializacao .cal-card__media{
    position:relative;
    flex-shrink:0;
    margin-left:30px;
  }
  .al-especializacao .cal-card__photo-frame{
    flex-shrink:0;
    width:195px;
    height:107px;
    overflow:hidden;
    border:1px solid var(--color-accent);
    border-radius:8px;
    display:block;
  }
  .al-especializacao .cal-card__photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform-origin:center;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .al-especializacao .cal-card:hover .cal-card__photo{
    transform:scale(1.06);
  }
  @media (prefers-reduced-motion: reduce){
    .al-especializacao .cal-card__photo{transition:none;}
    .al-especializacao .cal-card:hover .cal-card__photo{transform:none;}
  }

  /* Selo de data */
  .al-especializacao .cal-card__date{
    position:absolute;
    left:-30px;
    top:50%;
    transform:translateY(-50%);
    min-width:60px;
    background-color:#f4f4f4;
    border-radius:8px;
    padding:11px 8px;
    box-shadow:-1px 4px 2px rgba(0,0,0,.25);
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .al-especializacao .cal-card__date-day{
    font-size:1.5rem;
    font-weight:var(--font-weight-bold);
    color:var(--color-navy-deep);
    line-height:1;
  }
  .al-especializacao .cal-card__date-month{
    font-size:.7rem;
    font-weight:var(--font-weight-semibold);
    color:var(--color-text-muted);
    text-transform:uppercase;
    line-height:1.6;
  }
  .al-especializacao .cal-card__date-year{
    font-size:.625rem;
    font-weight:var(--font-weight-medium, 500);
    color:var(--color-text-muted);
    line-height:1.2;
    letter-spacing:.04em;
    opacity:.8;
  }

  /* Corpo do card */
  .al-especializacao .cal-card__body{
    flex-grow:1;
    min-width:0;
  }
  .al-especializacao .cal-card__tags{
    gap:11px;
    align-items:center;
  }
  .al-especializacao .cal-tag{
    display:inline-flex;
    align-items:center;
    border-radius:4px;
    padding:2px 8px;
    font-size:.6875rem;
    font-weight:var(--font-weight-bold);
    line-height:15px;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .al-especializacao .cal-tag--local{
    background-color:var(--tag-local-bg);
    color:var(--color-white);
    font-size:.625rem;
    letter-spacing:1px;
    padding:2px 12px;
    backdrop-filter:blur(2px);
  }
  .al-especializacao .cal-tag--tipo{
    background-color:var(--tag-tipo-bg);
    color:var(--tag-tipo-text);
    padding-left:16px;
    padding-right:16px;
  }
  .al-especializacao .cal-tag--novo{
    background-color:var(--tag-novo-bg);
    color:var(--tag-novo-text);
    padding-left:16px;
    padding-right:16px;
  }
  .al-especializacao .cal-tag--setor{
    background-color:var(--tag-setor-bg);
    color:var(--tag-setor-text);
    font-size:.625rem;
  }
  .al-especializacao .cal-tag--esgotado{
    background-color:rgba(220,53,69,.12);
    color:#b02a37;
    padding-left:16px;
    padding-right:16px;
  }
  .al-especializacao .cal-card__title{
    font-size:1rem;
    font-weight:var(--font-weight-extrabold);
    color:var(--color-navy-deep);
    line-height:20px;
    margin-top:10px;
    margin-bottom:0;
  }
  .al-especializacao .cal-card__desc{
    font-size:.875rem;
    color:var(--color-text-muted);
    line-height:20px;
    max-width:540px;
    margin-top:4px;
    margin-bottom:0;
  }

  /* Meta (período + carga horária) — específico da Academia */
  .al-especializacao .cal-card__meta{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:10px;
  }
  .al-especializacao .cal-card__meta-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.8125rem;
    font-weight:var(--font-weight-bold);
    color:var(--color-accent);
    line-height:1.4;
  }
  .al-especializacao .cal-card__meta-item svg{
    flex-shrink:0;
    color:#64748B;
  }

  /* Ações do card */
  .al-especializacao .cal-card__actions{
    gap:11px;
    margin-top:14px;
  }
  .al-especializacao .cal-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:28px;
    border-radius:4px;
    padding:0 16px;
    font-size:.8rem;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .2s, border-color .2s, transform .2s ease, box-shadow .2s ease;
  }
  .al-especializacao .cal-btn:hover,
  .al-especializacao .cal-btn:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(41,35,92,.18);
  }
  @media (prefers-reduced-motion: reduce){
    .al-especializacao .cal-btn{transition:background-color .2s, border-color .2s;}
    .al-especializacao .cal-btn:hover,
    .al-especializacao .cal-btn:focus-visible{transform:none;box-shadow:none;}
  }
  .al-especializacao .cal-btn--primary{
    background-color:var(--color-accent);
    color:var(--color-white);
    font-weight:var(--font-weight-semibold);
  }
  .al-especializacao .cal-btn--primary:hover{
    background-color:var(--color-accent-dark);
    color:var(--color-white);
  }
  .al-especializacao .cal-btn--outline{
    border:1px solid var(--color-text-muted);
    color:var(--color-text-muted);
    font-weight:var(--font-weight-medium);
  }
  .al-especializacao .cal-btn--outline:hover{
    border-color:var(--color-navy-deep);
    color:var(--color-navy-deep);
  }

  /* Responsivo */
  @media (max-width:768px){
    .al-especializacao .cal-card{
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
      padding:20px;
    }
    .al-especializacao .cal-card__media{
      margin-left:0;
      width:100%;
    }
    .al-especializacao .cal-card__photo-frame{
      width:100%;
      height:160px;
    }
    .al-especializacao .cal-card__date{
      left:-8px;
      top:14px;
      transform:none;
    }
  }
  /* Toque (celular e tablet): alvo de ≥ 40px e tags/selo legíveis (≥ 12px) */
  @media (max-width:991.98px){
    .al-especializacao .cal-btn{
      height:auto;
      min-height:40px;
      padding:0 18px;
      font-size:.875rem;
    }
    .al-especializacao .cal-tag,
    .al-especializacao .cal-tag--local,
    .al-especializacao .cal-tag--setor{
      font-size:.75rem;
      line-height:16px;
    }
    .al-especializacao .cal-card__date-month{font-size:.75rem;}
  }
  @media (max-width:359.98px){
    .al-especializacao .cal-card__actions{
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }
  }
  @media (max-width:767.98px){
    .al-especializacao{padding:60px 0 56px;}
    .al-especializacao__header{margin-bottom:40px;}
  }

  /* ===== Vitrine das próximas turmas =====
     Grade de 3 colunas (2 no tablet) com cards verticais; no celular, faixa deslizável com scroll-snap
     (sem auto-play) e uma ponta do próximo card à mostra. Atalhos e botão levam à Agenda filtrada. */
  .al-vitrine__atalhos{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:-24px auto 28px;
  }
  .al-vitrine__atalhos-label{
    font-size:.875rem;
    font-weight:600;
    color:#475569;
    margin-right:4px;
  }
  .al-vitrine__atalho{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 16px;
    border:1px solid rgba(41,35,92,.25);
    border-radius:999px;
    background:#fff;
    color:#29235C;
    font-size:.875rem;
    font-weight:600;
    text-decoration:none;
    transition:border-color .2s, background-color .2s, color .2s;
  }
  .al-vitrine__atalho:hover,
  .al-vitrine__atalho:focus-visible{
    border-color:var(--orange, #FF8000);
    color:#29235C;
    background:#fff7ef;
  }
  .al-vitrine__atalho:focus-visible{outline:2px solid var(--orange, #FF8000);outline-offset:2px;}

  .al-especializacao .al-vitrine{
    max-width:none;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
  }
  .al-especializacao .al-vitrine:focus-visible{outline:2px solid var(--color-accent);outline-offset:6px;border-radius:12px;}
  .al-especializacao .al-vitrine .cal-card{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    min-height:0;
    padding:16px 16px 20px;
    border-left-width:1px;
    border-top:4px solid var(--color-accent);
  }
  .al-especializacao .al-vitrine .cal-card + .cal-card{margin-top:0;}
  .al-especializacao .al-vitrine .cal-card__media{margin-left:0;width:100%;}
  .al-especializacao .al-vitrine .cal-card__photo-frame{width:100%;height:auto;aspect-ratio:195/107;}
  .al-especializacao .al-vitrine .cal-card__date{left:10px;top:10px;transform:none;min-width:54px;padding:8px 6px;}
  .al-especializacao .al-vitrine .cal-card__body{display:flex;flex-direction:column;flex-grow:1;}
  .al-especializacao .al-vitrine .cal-card__tags{gap:6px;}
  .al-especializacao .al-vitrine .cal-card__desc{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .al-especializacao .al-vitrine .cal-card__meta{flex-wrap:wrap;gap:6px 18px;}
  .al-especializacao .al-vitrine .cal-card__actions{margin-top:auto;padding-top:16px;}
  .al-especializacao .al-vitrine .cal-btn{width:100%;}

  .al-vitrine__rodape{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:36px;
  }
  .al-vitrine__dica{display:none;margin:0;font-size:.8125rem;color:#475569;}
  .al-vitrine__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 28px;
    border-radius:8px;
    background:#29235C;
    color:#fff;
    font-weight:700;
    font-size:1rem;
    text-decoration:none;
    transition:background-color .2s;
  }
  .al-vitrine__cta:hover,
  .al-vitrine__cta:focus-visible{background:#1c174a;color:#fff;}
  .al-vitrine__cta:focus-visible{outline:2px solid var(--orange, #FF8000);outline-offset:3px;}

  @media (max-width:991.98px){
    .al-especializacao .al-vitrine{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  }
  @media (max-width:767.98px){
    .al-vitrine__atalhos{
      flex-wrap:nowrap;
      justify-content:flex-start;
      overflow-x:auto;
      margin:-16px -12px 20px;
      padding:2px 12px 6px;
      scrollbar-width:none;
    }
    .al-vitrine__atalhos::-webkit-scrollbar{display:none;}
    .al-vitrine__atalho,
    .al-vitrine__atalhos-label{flex-shrink:0;white-space:nowrap;}
    .al-vitrine__atalho{min-height:40px;}
    /* Faixa deslizável: sai das margens do container para o card vizinho aparecer na borda. */
    .al-especializacao .al-vitrine{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:12px;
      overscroll-behavior-x:contain;
      margin:0 -12px;
      padding:4px 12px 12px;
      scrollbar-width:none;
    }
    .al-especializacao .al-vitrine::-webkit-scrollbar{display:none;}
    .al-especializacao .al-vitrine .cal-card{flex:0 0 84%;scroll-snap-align:start;}
    .al-vitrine__dica{display:block;}
    .al-vitrine__rodape{margin-top:20px;}
    .al-vitrine__cta{width:100%;}
  }

  /* ============================================================ */
  /* SECTION — O QUE VOCÊ APRENDE NO TREINAMENTO LEAN             */
  /* ============================================================ */
  .treinamento {
    position: relative;
    overflow: hidden;
    background-color: #fff;
  }

  /* Frame centralizado (largura do frame do Figma) — a mídia se ancora a ele,
     então em telas largas a foto fica à esquerda do CONTEÚDO, não da página */
  .treinamento__frame {
    position: relative;
    max-width: 1440px;
    min-height: 592px;
    margin: 0 auto;
    padding-top: 70px;
  }
  
  
  /* ------------------------------------------------------------ */
  /* Mídia decorativa (foto recortada da profissional)            */
  /* Figma: foto 439×520 @ left 7 / top 72                        */
  /* ------------------------------------------------------------ */
  .treinamento__media {
    position: absolute;
    left: 0;
    top: 0;
    width: 446px;
    height: 592px;
    pointer-events: none;
  }
  
  /* Caixa que recorta a foto (mesmo crop do Figma) */
  .treinamento__woman-wrap {
    position: absolute;
    left: 7px;
    top: 72px;
    width: 439px;
    height: 520px;
    overflow: hidden;
  }
  
  .treinamento__woman {
    position: absolute;
    left: -18.45%;
    top: 0;
    width: 118.45%;
    height: 100%;
  }
  
  
  /* ------------------------------------------------------------ */
  /* Cabeçalho                                                    */
  /* ------------------------------------------------------------ */
  .treinamento__title {
    font-size: clamp(1.875rem, 2.5vw, 2.375rem);
    font-weight: 800; /* var(--fw-extrabold) */
    line-height: 1.15;
    color: #1a2b48; /* var(--color-navy) */
    margin: 0 auto;
  }
  
  .treinamento__divider {
    width: 96px;
    height: 4px;
    background-color: var(--orange); /* var(--color-accent) */
    margin-top: 34px;             /* Figma: divider @144 − (título 70+40) */
  }
  
  
  /* ------------------------------------------------------------ */
  /* Colunas numeradas                                            */
  /* Figma: 3 colunas de 237px, gap 48px → row 855px centralizada */
  /* ------------------------------------------------------------ */
  .treinamento__features {
    --bs-gutter-x: 48px;
    max-width: 855px;
    margin: 53px auto 0;          /* Figma: números @201 − divider @148 */
    padding-bottom: 70px;
  }
  
  .treinamento .feature {
    position: relative;
    padding-top: 54px;            /* título 54px abaixo do topo do número */
  }
  
  /* Número fantasma: 128px, 16px à esquerda do título */
  .treinamento .feature__num {
    position: absolute;
    top: 0;
    left: -16px;
    font-size: 128px;
    font-weight: 900; /* var(--fw-black) */
    line-height: 1;
    color: #ebeef3; /* var(--color-ghost) */
    z-index: 0;
    user-select: none;
  }
  
  .treinamento .feature__title {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;            /* 24px */
    font-weight: 700; /* var(--fw-bold) */
    line-height: 2rem;            /* 32px */
    color: #181c20; /* var(--color-heading) */
    min-height: 64px;             /* reserva 2 linhas p/ alinhar descrições */
    margin-bottom: 24px;
  }
  
  .treinamento .feature__desc {
    position: relative;
    z-index: 1;
    font-size: 1rem;             /* 16px */
    font-weight: 400; /* var(--fw-regular) */
    line-height: 1.625rem;       /* 26px */
    color: #475569; /* var(--color-body) */
    margin-bottom: 0;
  }
  
  .treinamento .feature__desc strong {
    font-weight: 700; /* var(--fw-bold) */
    color: #181c20;
  }
  
  /* ------------------------------------------------------------ */
  /* Responsivo                                                   */
  /* ------------------------------------------------------------ */
  /* xl (1200–1399): reduz a mídia para não invadir o conteúdo */
  @media (min-width: 1200px) and (max-width: 1399.98px) {
  .treinamento__features {
      margin: 53px 0 0 auto;
  }
  }
  
  /* < xl: mídia oculta (via d-none d-xl-block no HTML) */
  @media (max-width: 1199.98px) {
    .treinamento {
      min-height: 0;
      padding-top: 56px;
    }
    .treinamento__title {
      white-space: normal;
    }
    .treinamento__features {
      padding-bottom: 56px;
    }
  }
  
  @media (max-width: 767.98px) {
    .treinamento .feature__title {
      min-height: 0;
    }
    .treinamento .feature {
      margin-bottom: 16px;
    }
  }

  .al-hero__btn--primary:not(.mg-btn) svg{transition:transform .2s ease}
  .al-hero__btn--primary:not(.mg-btn):hover svg{transform:translateX(3px)}

  /* Anti-FOUC global para mg-btn-auto: enquanto o JS nao fez upgrade (.mg-btn ausente),
     esconder conteudo visivel cru (texto cor transparente + filhos diretos opacity:0).
     Evita piscar em telas do Academia (Index, Agenda, PPFL, InCompany, etc). */
  .mg-btn-auto:not(.mg-btn){color:transparent !important}
  .mg-btn-auto:not(.mg-btn)>svg,
  .mg-btn-auto:not(.mg-btn)>img,
  .mg-btn-auto:not(.mg-btn)>span:not(.mg-btn__inner):not(.mg-btn__swap):not(.mg-btn__swap-text):not(.mg-btn__icon-wrap):not(.mg-btn__icon){opacity:0!important;visibility:hidden!important}

  .al-hero__bg{transform:translate3d(var(--hero-parallax-x,0px),var(--hero-parallax-y,0px),0) scale(1.02);transition:transform .15s ease-out;will-change:transform}

  @keyframes btnPulseGlow{0%{box-shadow:0 10px 15px -3px rgba(0,0,0,.15)}50%{box-shadow:0 18px 30px -6px rgba(255,128,0,.45)}100%{box-shadow:0 10px 15px -3px rgba(0,0,0,.15)}}
  @keyframes btnShimmer{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(360%) skewX(-18deg)}}

  .al-btn-shimmer{position:relative;overflow:hidden}
  .al-btn-shimmer::after{content:"";position:absolute;top:-60%;left:-60%;width:45%;height:220%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
  body.is-loaded .al-btn-shimmer::after{animation:btnShimmer var(--al-btn-shimmer-duration,1.05s) ease .25s 1}
  .al-btn-shimmer:hover::after{animation:btnShimmer var(--al-btn-shimmer-duration,1.05s) ease 0s 1}

  .al-pulse-on-load{animation:btnPulseGlow 1.6s ease-in-out 2}

  .al-hero [data-hero-anim]{opacity:0;filter:blur(8px);transform:translate3d(var(--hero-x,0px),var(--hero-y,16px),0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:var(--hero-delay,0ms);will-change:transform,opacity,filter}
  body.is-loaded .al-hero [data-hero-anim]{opacity:1;filter:blur(0);transform:none}

  .mg-btn{position:relative}
  .mg-btn__inner{display:inline-flex;align-items:center;gap:10px}
  .mg-btn__swap{position:relative;display:inline-grid;overflow:hidden}
  .mg-btn__swap-text{grid-area:1/1;transition:transform var(--mg-btn-swap-duration,.42s) cubic-bezier(.2,.7,.2,1)}
  .mg-btn__swap-text.is-absolute{position:absolute;inset:0;transform:translate3d(0,130%,0)}
  .mg-btn:hover .mg-btn__swap-text.is-absolute,
  .mg-btn:focus-visible .mg-btn__swap-text.is-absolute{transform:translate3d(0,0,0)}
  .mg-btn:hover .mg-btn__swap-text.is-relative,
  .mg-btn:focus-visible .mg-btn__swap-text.is-relative{transform:translate3d(0,-130%,0)}
  .mg-btn__icon{grid-area:1/1;display:grid;place-items:center;transition:transform var(--mg-btn-swap-duration,.42s) cubic-bezier(.2,.7,.2,1)}
  .mg-btn__icon.is-absolute{position:absolute;inset:0;transform:translate3d(0,130%,0)}
  .mg-btn:hover .mg-btn__icon.is-absolute,
  .mg-btn:focus-visible .mg-btn__icon.is-absolute{transform:translate3d(0,0,0)}
  .mg-btn:hover .mg-btn__icon.is-relative,
  .mg-btn:focus-visible .mg-btn__icon.is-relative{transform:translate3d(0,-130%,0)}
  .mg-btn__icon-wrap{width:var(--mg-icon-size,16px);height:var(--mg-icon-size,16px)}
  .mg-btn__icon svg{width:100%;height:100%;display:block}

  @media (prefers-reduced-motion: reduce){
    .al-hero__bg{transition:none;transform:none!important}
    .al-btn-shimmer::after{display:none}
    .al-pulse-on-load{animation:none}
    .al-hero [data-hero-anim]{transition:none;transform:none;opacity:1;filter:none}
  }
