@layer components {
  /* =========================================================
     Tipografia de seção
     ========================================================= */
  .rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--azul-profundo);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  /* Marcador no formato do símbolo da marca */
  .rotulo::before,
  .hero__rotulo::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background: var(--azul-easy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 20Q8 6 20 12L90 46Q98 50 90 54L20 88Q8 94 8 80Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 20Q8 6 20 12L90 46Q98 50 90 54L20 88Q8 94 8 80Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .titulo-secao {
    font-size: var(--t-h2);
  }

  .lead {
    font-size: var(--t-lead);
    line-height: 1.6;
  }

  .cabeca-secao {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  }

  .cabeca-secao--centro {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .cabeca-secao--claro .titulo-secao {
    color: #fff;
  }

  .cabeca-secao--claro .rotulo {
    color: var(--azul-easy);
  }

  .cabeca-secao--claro .lead {
    color: var(--texto-claro);
  }

  @media (min-width: 64em) {
    .cabeca-secao--lado {
      grid-template-columns: 1fr 1fr;
      align-items: end;
      gap: 4rem;
      max-width: none;
    }

    .cabeca-secao--lado > div {
      display: grid;
      gap: 1rem;
      justify-items: start;
    }
  }

  /* =========================================================
     Botões e links de ação
     ========================================================= */
  .acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
  }

  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--raio-pilula);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duracao), color var(--duracao), border-color var(--duracao),
      transform var(--duracao) var(--ease), box-shadow var(--duracao);
  }

  .botao:hover {
    transform: translateY(-2px);
  }

  .botao--grande {
    min-height: 3.5rem;
    padding: 0.9rem 1.875rem;
    font-size: 1rem;
  }

  .botao--bloco {
    width: 100%;
  }

  .botao--primario {
    background: var(--azul-profundo);
    color: #fff;
    box-shadow: 0 12px 24px -14px rgb(23 102 143 / 0.9);
  }

  .botao--primario:hover {
    background: var(--azul-profundo-escuro);
    color: #fff;
  }

  /* Azul da marca com texto marinho (7,1:1) */
  .botao--marca {
    background: var(--azul-easy);
    color: var(--marinho-900);
    box-shadow: 0 14px 30px -14px rgb(73 178 224 / 0.9);
  }

  .botao--marca:hover {
    background: var(--azul-easy-claro);
    color: var(--marinho-900);
  }

  .botao--contorno {
    border-color: var(--azul-profundo);
    color: var(--azul-profundo);
  }

  .botao--contorno:hover {
    background: var(--azul-profundo);
    color: #fff;
  }

  .botao--contorno-claro {
    border-color: rgb(255 255 255 / 0.55);
    background: rgb(255 255 255 / 0.06);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .botao--contorno-claro:hover {
    border-color: #fff;
    background: #fff;
    color: var(--marinho-900);
  }

  .botao-icone {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--linha);
    border-radius: 50%;
    background: #fff;
    color: var(--tinta);
    cursor: pointer;
    transition: background-color var(--duracao), color var(--duracao), border-color var(--duracao);
  }

  .botao-icone:hover {
    border-color: var(--azul-profundo);
    color: var(--azul-profundo);
  }

  .botao-icone--claro {
    border-color: rgb(255 255 255 / 0.4);
    background: rgb(255 255 255 / 0.06);
    color: #fff;
  }

  .botao-icone--claro:hover {
    border-color: #fff;
    background: #fff;
    color: var(--marinho-900);
  }

  .link-seta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--azul-profundo);
    font-weight: 700;
    cursor: pointer;
  }

  .link-seta .icone {
    transition: transform var(--duracao) var(--ease);
  }

  .link-seta:hover {
    color: var(--azul-profundo-escuro);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .link-seta:hover .icone {
    transform: translateX(4px);
  }

  /* =========================================================
     Listas
     ========================================================= */
  .lista-check {
    display: grid;
    gap: 0.75rem;
  }

  .lista-check li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--tinta);
    font-weight: 500;
  }

  .lista-check .icone {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.3rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: var(--azul-easy-50);
    color: var(--azul-profundo);
    stroke-width: 2.5;
  }

  /* =========================================================
     Abas (Missão, Visão, Valores, Trajetória)
     ========================================================= */
  .abas__lista {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--linha);
  }

  .abas__aba {
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--texto);
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    transition: color var(--duracao), border-color var(--duracao);
  }

  .abas__aba:hover {
    color: var(--tinta);
  }

  .abas__aba[aria-selected="true"] {
    border-bottom-color: var(--azul-profundo);
    color: var(--tinta);
  }

  @media (max-width: 29.99em) {
    .abas__aba {
      padding-inline: 0.7rem;
    }
  }

  .abas__painel {
    padding-top: 1.25rem;
    color: var(--tinta);
    font-size: var(--t-lead);
  }

  .abas__painel:focus-visible {
    outline-offset: 6px;
  }

  .valores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  .valores li {
    padding: 0.5rem 1rem;
    border-radius: var(--raio-pilula);
    background: var(--azul-easy-50);
    color: var(--azul-profundo-escuro);
    font-size: var(--t-sm);
    font-weight: 700;
  }

  .trajetoria {
    display: grid;
    gap: 0.875rem;
    font-size: var(--t-base);
  }

  .trajetoria li {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
  }

  .trajetoria strong {
    color: var(--azul-profundo);
    font-family: var(--fonte-titulo);
    font-size: 1.375rem;
    font-weight: 600;
  }

  /* =========================================================
     Ficha (atributos de uma área) e janela de detalhes
     ========================================================= */
  .ficha > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--linha);
  }

  .ficha dt {
    color: var(--tinta);
    font-size: var(--t-sm);
    font-weight: 700;
  }

  .ficha dd {
    font-size: var(--t-sm);
  }

  @media (max-width: 29.99em) {
    .ficha > div {
      grid-template-columns: 1fr;
      gap: 0.125rem;
    }
  }

  .dialogo {
    width: min(42rem, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--raio-g);
    background: #fff;
    color: var(--texto);
    box-shadow: var(--sombra-3);
    overflow: auto;
  }

  .dialogo::backdrop {
    background: rgb(4 19 31 / 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .dialogo__cabeca {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem;
    background: linear-gradient(135deg, var(--marinho-800), var(--marinho-700));
    color: #fff;
  }

  .dialogo__cabeca h3 {
    color: #fff;
    font-size: var(--t-h3);
  }

  .dialogo__sub {
    color: var(--azul-easy-claro);
    font-size: var(--t-sm);
    font-weight: 500;
  }

  .dialogo__icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    background: var(--azul-easy);
    color: var(--marinho-900);
  }

  .dialogo__fechar {
    margin-left: auto;
    flex-shrink: 0;
    border-color: rgb(255 255 255 / 0.4);
    background: transparent;
    color: #fff;
  }

  .dialogo__fechar:hover {
    background: #fff;
    color: var(--marinho-900);
  }

  .dialogo .ficha {
    padding: 0.5rem 1.75rem 0;
  }

  .dialogo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem 1.75rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .dialogo[open] {
      animation: dialogo-entra 0.35s var(--ease);
    }

    @keyframes dialogo-entra {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
      }
    }
  }

  /* Crédito de imagem ilustrativa */
  .credito-foto {
    position: absolute;
    right: var(--margem);
    bottom: 1rem;
    z-index: 3;
    padding: 0.25rem 0.75rem;
    border-radius: var(--raio-pilula);
    background: rgb(4 19 31 / 0.55);
    color: rgb(255 255 255 / 0.85);
    font-size: var(--t-xs);
  }

  /* =========================================================
     Faixa de contato e cabeçalho
     ========================================================= */
  .faixa-topo {
    position: relative;
    z-index: 61;
    height: var(--altura-faixa);
    background: var(--marinho-950);
    color: var(--texto-claro);
    font-size: var(--t-xs);
  }

  .faixa-topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .faixa-topo__lista {
    display: flex;
    gap: 1.75rem;
  }

  .faixa-topo__lista li,
  .faixa-topo__social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .faixa-topo .icone {
    width: 1rem;
    height: 1rem;
    color: var(--azul-easy);
  }

  .faixa-topo a {
    color: #fff;
    text-underline-offset: 0.2em;
  }

  .faixa-topo__lista a,
  .faixa-topo__social {
    padding-block: 0.125rem; /* alvo de pelo menos 24 px (WCAG 2.5.8) */
  }

  .faixa-topo__lista a {
    display: inline-block;
  }

  .faixa-topo__social {
    text-decoration: none;
  }

  .faixa-topo__social:hover {
    color: var(--azul-easy);
    text-decoration: underline;
  }

  @media (max-width: 63.99em) {
    .faixa-topo {
      display: none;
    }
  }

  .cabecalho {
    position: fixed;
    top: var(--altura-faixa);
    right: 0;
    left: 0;
    z-index: 60;
    transition: top 0.3s var(--ease), background-color 0.3s, box-shadow 0.3s;
  }

  .cabecalho[data-rolado="true"],
  .cabecalho[data-menu="aberto"] {
    top: 0;
    background: #fff;
    box-shadow: 0 1px 0 var(--linha), 0 10px 30px -18px rgb(7 31 48 / 0.35);
  }

  .cabecalho__interno {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--altura-cabecalho);
  }

  .cabecalho__marca {
    display: grid;
    flex-shrink: 0;
    margin-right: auto;
  }

  .cabecalho__logo {
    grid-area: 1 / 1;
    width: auto;
    height: 2.25rem;
    transition: opacity 0.3s;
  }

  /* WCAG 1.4.10: logo + botão Menu cabem em 320 px. */
  @media (max-width: 22.5em) {
    .cabecalho__logo {
      height: 1.75rem;
    }
  }

  .cabecalho__logo--cor,
  .cabecalho[data-rolado="true"] .cabecalho__logo--claro,
  .cabecalho[data-menu="aberto"] .cabecalho__logo--claro {
    opacity: 0;
  }

  .cabecalho[data-rolado="true"] .cabecalho__logo--cor,
  .cabecalho[data-menu="aberto"] .cabecalho__logo--cor {
    opacity: 1;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 0;
    background: none;
    color: var(--tinta);
    font-size: var(--t-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }

  .nav__link:hover {
    color: var(--azul-profundo);
  }

  .nav__sub-botao .icone {
    transition: transform var(--duracao);
  }

  .nav__sub-botao[aria-expanded="true"] .icone {
    transform: rotate(180deg);
  }

  .nav__sub a {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: var(--raio-p);
    color: var(--texto);
    text-decoration: none;
    transition: background-color var(--duracao);
  }

  .nav__sub a:hover {
    background: var(--fundo-claro);
    color: var(--texto);
  }

  .nav__sub strong {
    display: block;
    color: var(--tinta);
    font-size: var(--t-sm);
  }

  .nav__sub small {
    display: block;
    font-size: var(--t-xs);
  }

  .nav__sub-icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--azul-easy-50);
    color: var(--azul-profundo);
  }

  .cabecalho__menu {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.45);
    border-radius: var(--raio-pilula);
    background: rgb(255 255 255 / 0.06);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
  }

  .cabecalho[data-rolado="true"] .cabecalho__menu,
  .cabecalho[data-menu="aberto"] .cabecalho__menu {
    border-color: var(--linha);
    background: #fff;
    color: var(--tinta);
  }

  .cabecalho__menu-icone {
    position: relative;
    width: 1.125rem;
    height: 0.875rem;
  }

  .cabecalho__menu-icone i,
  .cabecalho__menu-icone::before,
  .cabecalho__menu-icone::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
    transition: transform var(--duracao), opacity var(--duracao);
  }

  .cabecalho__menu-icone::before {
    top: 0;
  }

  .cabecalho__menu-icone i {
    top: calc(50% - 1px);
  }

  .cabecalho__menu-icone::after {
    bottom: 0;
  }

  [data-menu="aberto"] .cabecalho__menu-icone i {
    opacity: 0;
  }

  [data-menu="aberto"] .cabecalho__menu-icone::before {
    transform: translateY(6px) rotate(45deg);
  }

  [data-menu="aberto"] .cabecalho__menu-icone::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ---------- Navegação larga ---------- */
  @media (min-width: 75em) {
    .cabecalho__menu,
    .nav__extra {
      display: none;
    }

    .nav__lista {
      display: flex;
      align-items: center;
    }

    .cabecalho[data-rolado="false"] .nav__link {
      color: #fff;
    }

    .cabecalho[data-rolado="false"] .nav__link:hover {
      color: var(--azul-easy-claro);
    }

    .nav__link::after {
      position: absolute;
      right: 0.875rem;
      bottom: 0.4rem;
      left: 0.875rem;
      height: 2px;
      border-radius: 2px;
      background: var(--azul-easy);
      content: "";
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--duracao) var(--ease);
    }

    .nav__link:hover::after,
    .nav__sub-botao[aria-expanded="true"]::after {
      transform: scaleX(1);
    }

    .nav__sub-botao::after {
      right: 2rem;
    }

    .nav__item-sub {
      position: relative;
    }

    .nav__sub {
      position: absolute;
      top: calc(100% + 0.75rem);
      left: 50%;
      width: 20rem;
      padding: 0.5rem;
      border-radius: var(--raio);
      background: #fff;
      box-shadow: var(--sombra-3);
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 8px);
      transition: opacity var(--duracao), transform var(--duracao) var(--ease), visibility 0s linear var(--duracao);
    }

    /* Ponte invisível para o mouse não perder o submenu no intervalo. */
    .nav__sub::before {
      position: absolute;
      top: -0.75rem;
      right: 0;
      left: 0;
      height: 0.75rem;
      content: "";
    }

    .nav__sub-botao[aria-expanded="true"] + .nav__sub {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
      transition: opacity var(--duracao), transform var(--duracao) var(--ease), visibility 0s;
    }
  }

  /* ---------- Gaveta (telas menores) ---------- */
  @media (max-width: 74.99em) {
    .nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      width: min(24rem, 88vw);
      padding: calc(var(--altura-cabecalho) + 1rem) 1.75rem 2rem;
      background: #fff;
      box-shadow: var(--sombra-3);
      overflow-y: auto;
      visibility: hidden;
      transform: translateX(100%);
      transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
    }

    .cabecalho[data-menu="aberto"] .nav {
      visibility: visible;
      transform: none;
      transition: transform 0.4s var(--ease), visibility 0s;
    }

    .nav__lista > li {
      border-bottom: 1px solid var(--linha);
    }

    .nav__link {
      justify-content: space-between;
      width: 100%;
      min-height: 3.5rem;
      padding-inline: 0;
      font-size: 1.0625rem;
    }

    .nav__sub {
      display: none;
      padding-bottom: 0.75rem;
    }

    .nav__sub-botao[aria-expanded="true"] + .nav__sub {
      display: grid;
      gap: 0.25rem;
    }

    .nav__extra {
      display: grid;
      gap: 0.75rem;
      font-size: var(--t-sm);
    }

    .nav__extra a:not(.botao) {
      font-weight: 700;
    }

    .cabecalho__cta {
      display: none;
    }
  }

  @media (min-width: 40em) and (max-width: 74.99em) {
    .cabecalho__cta {
      display: inline-flex;
    }
  }

  .veu {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgb(4 19 31 / 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .menu-aberto {
    overflow: hidden;
  }

  /* =========================================================
     WhatsApp flutuante e voltar ao topo
     ========================================================= */
  .whats {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.875rem;
    transition: opacity 0.35s, transform 0.35s var(--ease), visibility 0s;
  }

  /* Aparece depois do banner, que já tem o próprio botão de WhatsApp. */
  .js .whats:not(.is-visivel) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.35s, transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }

  .whats__botao {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--whats);
    color: #fff;
    box-shadow: 0 14px 30px -10px rgb(18 140 126 / 0.75);
    cursor: pointer;
    transition: transform var(--duracao) var(--ease);
  }

  .whats__botao:hover {
    transform: scale(1.06);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Pulso curto (menos de 5 s) para chamar atenção uma vez. */
    .whats__botao::before {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      content: "";
      animation: whats-pulso 2.2s var(--ease) 1.5s 2;
    }

    @keyframes whats-pulso {
      from {
        box-shadow: 0 0 0 0 rgb(18 140 126 / 0.55);
      }

      to {
        box-shadow: 0 0 0 18px rgb(18 140 126 / 0);
      }
    }
  }

  .whats__painel {
    width: min(21rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border-radius: var(--raio-g);
    background: #fff;
    box-shadow: var(--sombra-3);
  }

  .whats__titulo {
    margin-bottom: 0.5rem;
    color: var(--tinta);
    font-family: var(--fonte-titulo);
    font-size: 1.125rem;
    font-weight: 600;
  }

  .whats__opcao {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    border-radius: var(--raio-p);
    color: var(--texto);
    text-decoration: none;
    transition: background-color var(--duracao);
  }

  .whats__opcao:hover {
    background: var(--fundo-claro);
    color: var(--texto);
  }

  .whats__opcao strong {
    display: block;
    color: var(--tinta);
  }

  .whats__opcao small {
    display: block;
    font-size: var(--t-xs);
    line-height: 1.4;
  }

  .whats__opcao-icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #E3F4F1;
    color: var(--whats);
  }

  @media (prefers-reduced-motion: no-preference) {
    .whats__painel:not([hidden]) {
      animation: dialogo-entra 0.3s var(--ease);
    }
  }

  .voltar-topo {
    position: fixed;
    right: calc(clamp(1rem, 2vw, 1.75rem) + 0.5rem);
    bottom: calc(clamp(1rem, 2vw, 1.75rem) + 4.75rem);
    z-index: 54;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #fff;
    color: var(--tinta);
    box-shadow: var(--sombra-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .voltar-topo.is-visivel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0s;
  }

  .voltar-topo:hover {
    color: var(--azul-profundo);
  }

}