/* =====================================================================
   BIBLIOTECA DIGITAL UNIFECAF - Folha de estilos principal
   ---------------------------------------------------------------------
   Índice
   1. Fontes (Zalando Sans e Roboto, as mesmas do site oficial)
   2. Variáveis (tokens do Design System UniFECAF)
   3. Reset e estilos base
   4. Utilitários (container, acessibilidade)
   5. Componentes reutilizáveis (botões, cartões, títulos de seção, listas)
   6. Cabeçalho e menu
   7. Hero (banner principal com vídeo)
   8. Sobre a nossa biblioteca
   9. Banner intermediário (citação)
   10. Nossos livros (filtro, cards e "Saiba mais")
   11. As unidades
   12. Contatos
   13. Rodapé
   14. Animações (@keyframes, revelar ao rolar, menu ativo pela rolagem)
   15. Responsividade (tablet a partir de 560px, desktop a partir de 872px)
   16. Movimento reduzido (acessibilidade)
   ===================================================================== */


/* =====================================================================
   1. FONTES
   Arquivos .woff2 hospedados no próprio projeto (pasta assets/fonts)
   ===================================================================== */
@font-face {
    font-family: "Zalando Sans";
    src: url("../assets/fonts/zalando-sans-300.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Zalando Sans";
    src: url("../assets/fonts/zalando-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Zalando Sans";
    src: url("../assets/fonts/zalando-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Zalando Sans";
    src: url("../assets/fonts/zalando-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Zalando Sans";
    src: url("../assets/fonts/zalando-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* Roboto é uma fonte variável: um único arquivo cobre os pesos de 300 a 900 */
@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/roboto-variable.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}


/* =====================================================================
   2. VARIÁVEIS - TOKENS DO DESIGN SYSTEM UNIFECAF
   Nomes e valores extraídos do CSS do site oficial (unifecaf.com.br)
   ===================================================================== */
:root {
    /* Azuis institucionais */
    --azul-charcoal: #000B1A;      /* --blue-charcoal: textos e fundos mais escuros */
    --azul-institucional: #002156; /* "Institutional blue": menu e títulos */
    --azul-secundario: #1A3666;    /* --secondary-blue */
    --azul-istanbul: #254AB9;      /* --unifecaf-blue: azul da marca */
    --azul-skies: #0E77CC;         /* --blue-skies */

    /* Verdes institucionais */
    --verde-young: #95DE68;        /* --young-green: botões de ação */
    --verde-young-hover: #80C95D;  /* hover do botão verde */
    --verde-claro: #33DB90;        /* --lighter-green */
    --verde-suave: #E8F8DE;        /* fundo suave em hover */

    /* Neutros e apoio */
    --carrara: #F0EEE9;            /* --neutrals-carrara: superfície clara */
    --branco: #FFFFFF;
    --cinza-borda: #E2E2E2;
    --roxo-borda: #351B65;         /* borda dos cards do site */

    /* Degradê institucional (Design System: "Institutional gradient") */
    --degrade-institucional: linear-gradient(to top, #002156 0%, #95DE68 169.03%);

    /* Tipografia */
    --fonte-titulo: "Zalando Sans", "Roboto", system-ui, sans-serif;
    --fonte-texto: "Roboto", system-ui, sans-serif;

    /* Espaçamentos e formas */
    --espaco-lateral: 1rem;        /* 16px de margem no celular */
    --largura-maxima: 1200px;
    --raio-pequeno: 0.375rem;      /* rounded-md do DS */
    --raio-cartao: 1rem;           /* rounded-2xl dos cards do DS */
    --raio-pilula: 9999px;         /* rounded-full do DS */

    /* Sombra deslocada, assinatura dos cards do site oficial */
    --sombra-cartao: -3px 3px 0 var(--azul-istanbul);

    /* Altura do cabeçalho fixo (usada para compensar a rolagem até as âncoras) */
    --altura-cabecalho: 4.5rem;

    /* Curva de animação suave usada em todo o site */
    --curva-suave: cubic-bezier(0.25, 1, 0.5, 1);
}


/* =====================================================================
   3. RESET E ESTILOS BASE
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;                         /* rolagem suave ao clicar no menu */
    scroll-padding-top: var(--altura-cabecalho);     /* a seção não fica escondida atrás do menu fixo */
}

body {
    font-family: var(--fonte-texto);
    font-size: 1rem;              /* 16px - "Regular M" do DS */
    line-height: 1.5;             /* 24px */
    color: var(--azul-charcoal);
    background-color: var(--azul-charcoal);
    -webkit-font-smoothing: antialiased;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* Foco visível para navegação por teclado (acessibilidade) */
:focus-visible {
    outline: 3px solid var(--verde-young);
    outline-offset: 3px;
    border-radius: var(--raio-pequeno);
}


/* =====================================================================
   4. UTILITÁRIOS
   ===================================================================== */
.container {
    width: 100%;
    max-width: var(--largura-maxima);
    margin-inline: auto;
    padding-inline: var(--espaco-lateral);
}

/* Link "Pular para o conteúdo": escondido até receber foco pelo teclado */
.pular-conteudo {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--azul-charcoal);
    background-color: var(--verde-young);
    border-radius: var(--raio-pequeno);
    transition: top 0.2s ease;
}

.pular-conteudo:focus {
    top: 1rem;
}

/* Esconde um elemento da tela, mas mantém para leitores de tela */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================================
   5. COMPONENTES REUTILIZÁVEIS
   ===================================================================== */

/* ---------- Botões ---------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;                 /* área de toque confortável no celular */
    padding: 0.75rem 1.75rem;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--raio-pequeno);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--curva-suave), box-shadow 0.3s ease;
}

/* Botão principal: verde do DS ("Fazer matrícula") com um brilho que atravessa o botão */
.botao--primario {
    position: relative;
    overflow: hidden;
    color: var(--azul-charcoal);
    background-color: var(--verde-young);
    box-shadow: 0 0 0 0 rgba(149, 222, 104, 0.5);
}

.botao--primario::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: brilho-botao 4s ease-in-out infinite;
}

.botao--primario:hover {
    background-color: var(--verde-young-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -8px rgba(149, 222, 104, 0.7);
}

.botao__seta {
    display: inline-block;
    transition: transform 0.3s var(--curva-suave);
}

.botao--primario:hover .botao__seta {
    transform: translateX(4px);
}

/* Botão de contorno: estilo "Bold M" do DS (borda branca, hover com fundo branco) */
.botao--contorno {
    color: var(--branco);
    border: 1px solid var(--branco);
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.botao--contorno:hover {
    color: var(--azul-charcoal);
    background-color: var(--branco);
}

/* ---------- Texto com degradê nas cores da marca ---------- */
.texto-destaque {
    background: linear-gradient(90deg, var(--verde-young) 0%, var(--verde-claro) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Cartão de número (inspirado nos cards de curso do DS) ---------- */
.cartao-numero {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 0.75rem 0.875rem;
    background-color: var(--carrara);
    border: 1px solid var(--roxo-borda);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
    transition: transform 0.3s var(--curva-suave), box-shadow 0.3s var(--curva-suave);
}

.cartao-numero:hover {
    transform: translate(3px, -3px);
    box-shadow: -6px 6px 0 var(--azul-istanbul);
}

.cartao-numero__valor {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--azul-istanbul);
}

.cartao-numero__rotulo {
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.3;
    color: var(--azul-charcoal);
}

/* ---------- Cabeçalho de seção (sobretítulo + título) ---------- */
.cabecalho-secao {
    max-width: 48rem;
    margin: 0 auto 3rem;
    text-align: center;
}

/* Sobretítulo em caixa alta e espaçado, como no protótipo ("S O B R E  A  N O S S A...") */
.cabecalho-secao__sobretitulo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fonte-titulo);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;        /* no desktop aumenta para 0.3em */
    text-transform: uppercase;
    color: var(--verde-young);
}

/* Pequenas linhas dos dois lados do sobretítulo */
.cabecalho-secao__sobretitulo::before,
.cabecalho-secao__sobretitulo::after {
    content: "";
    width: 1.5rem;
    height: 1px;
    background-color: currentColor;
}

/* Heading 1 do DS: 24px no celular e 36px no desktop, peso 600 */
.cabecalho-secao__titulo {
    margin-top: 0.75rem;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
}

/* Variação para seções de fundo claro (carrara): cores do DS para fundo claro */
.cabecalho-secao--claro .cabecalho-secao__sobretitulo {
    color: var(--azul-istanbul);
}

.cabecalho-secao--claro .cabecalho-secao__titulo {
    color: var(--azul-institucional);
}

/* Variação alinhada à esquerda (sem a linha da esquerda) */
.cabecalho-secao--esquerda {
    margin-inline: 0;
    margin-bottom: 1.5rem;
    text-align: left;
}

.cabecalho-secao--esquerda .cabecalho-secao__sobretitulo::before {
    display: none;
}

/* Texto de apoio abaixo do título ("text-base / text-xl font-light" no DS) */
.cabecalho-secao__texto {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
}

/* ---------- Ponto verde "pulsando" ---------- */
.ponto-pulso {
    position: relative;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--verde-young);
    border-radius: 50%;
}

.ponto-pulso::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--verde-young);
    border-radius: 50%;
    animation: pulso 2s ease-out infinite;
}

/* ---------- Ícones SVG (traço no estilo Lucide, a biblioteca de ícones do site oficial) ---------- */
.icone {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Lista com ícone de "check" (os ícones de check do site são verdes) ---------- */
.lista-check {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1rem;
}

.lista-check li {
    position: relative;
    padding-left: 2rem;
}

.lista-check li::before {
    content: "\2713";              /* caractere ✓ */
    position: absolute;
    top: 0.15rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--verde-young);
    background-color: rgba(149, 222, 104, 0.15);
    border-radius: 50%;
}


/* =====================================================================
   6. CABEÇALHO E MENU
   ===================================================================== */
.cabecalho {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--altura-cabecalho);
}

/* Efeito de vidro (glass) do Design System.
   Fica num pseudo-elemento porque um backdrop-filter direto no cabeçalho
   "prenderia" o menu lateral (position: fixed) dentro dele. */
.cabecalho::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 11, 26, 0.35);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.cabecalho__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cabecalho__logo img {
    width: auto;
    height: 1.75rem;
}

.cabecalho__marca {
    padding-left: 0.75rem;
    font-family: var(--fonte-titulo);
    font-size: 0.875rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--branco);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------- Botão hambúrguer (celular) ---------- */
.menu-abrir {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
    border-radius: var(--raio-pequeno);
    transition: background-color 0.3s ease;
}

.menu-abrir:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-abrir span {
    display: block;
    height: 2px;
    background-color: var(--branco);
    border-radius: 2px;
}

.menu-abrir span:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

/* ---------- Menu lateral (celular) ----------
   Fica escondido à direita. Quando o endereço termina em "#menu",
   a pseudo-classe :target faz ele deslizar para dentro da tela.
   Ao clicar em um link, o alvo muda e o menu fecha sozinho. */
.menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80%, 20rem);
    height: 100vh;
    height: 100dvh;
    padding: 5rem 1.5rem 2rem;
    background-color: rgba(0, 11, 26, 0.96);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s var(--curva-suave), visibility 0.4s, box-shadow 0.4s;
}

.menu:target {
    transform: translateX(0);
    visibility: visible;
    /* Sombra gigante que escurece o resto da página, como um fundo de modal */
    box-shadow: 0 0 0 100vmax rgba(0, 11, 26, 0.6);
}

.menu__fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 2rem;
    line-height: 1;
    color: var(--branco);
    border-radius: var(--raio-pequeno);
}

.menu__fechar:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu__lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu__link {
    position: relative;
    display: block;
    padding: 0.75rem 1rem;
    font-family: var(--fonte-titulo);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--branco);
    border-radius: var(--raio-pilula);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu__link:hover {
    background-color: rgba(149, 222, 104, 0.2);   /* hover:bg-young-green/20 do DS */
}

/* Item ativo: botão "Active / selected" do DS */
.menu__link--ativo {
    color: var(--azul-charcoal);
    background-color: var(--verde-young);
}

.menu__link--ativo:hover {
    background-color: var(--verde-young-hover);
}


/* =====================================================================
   7. HERO - BANNER PRINCIPAL COM VÍDEO
   ===================================================================== */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;            /* altura real da tela no celular (descontando barras do navegador) */
    padding-top: calc(var(--altura-cabecalho) + 2.5rem);
    padding-bottom: 6rem;
    overflow: hidden;
    isolation: isolate;            /* cria uma camada própria para o z-index dos filhos */
    color: var(--branco);
    /* Imagem de reserva caso o vídeo não carregue */
    background: var(--azul-charcoal) url("../assets/imagens/hero-poster.jpg") center / cover no-repeat;
}

/* Vídeo ocupando todo o fundo, sem distorcer (object-fit: cover) */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Camadas de cor: escurecem o vídeo e criam a transição para a próxima seção */
.hero__sobreposicao {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(0, 11, 26, 0.55) 0%, rgba(0, 11, 26, 0) 25%),
        linear-gradient(to top, var(--azul-charcoal) 0%, rgba(0, 11, 26, 0) 35%),
        linear-gradient(to right, rgba(0, 11, 26, 0.92) 0%, rgba(0, 33, 86, 0.75) 100%);
}

.hero__conteudo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Selo de vidro com um ponto verde "pulsando" */
.hero__selo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 1rem;
    font-family: var(--fonte-titulo);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--raio-pilula);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.hero__titulo {
    max-width: 16ch;
    font-family: var(--fonte-titulo);
    font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero__texto {
    max-width: 36rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}

.hero__acoes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.hero__numeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: 36rem;
    margin-top: 0.5rem;
}

/* Indicador de rolagem: um "mouse" com a rodinha animada */
.hero__rolar {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    transform: translateX(-50%);
    transition: color 0.3s ease;
}

.hero__rolar:hover {
    color: var(--verde-young);
}

.hero__rolar-mouse {
    position: relative;
    width: 1.5rem;
    height: 2.25rem;
    border: 2px solid currentColor;
    border-radius: 1rem;
}

.hero__rolar-mouse::after {
    content: "";
    position: absolute;
    top: 0.4rem;
    left: 50%;
    width: 4px;
    height: 0.5rem;
    background-color: var(--verde-young);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: rodinha-mouse 1.8s ease-in-out infinite;
}

/* No celular o texto do indicador fica escondido para não competir com os cartões */
.hero__rolar-texto {
    display: none;
}


/* =====================================================================
   8. SOBRE A NOSSA BIBLIOTECA
   Protótipo: fundo escuro, 3 colunas (texto | imagem | texto) e galeria de 4 imagens
   ===================================================================== */
.sobre {
    position: relative;
    padding-block: 5rem;
    overflow: hidden;
    color: var(--carrara);
    /* Continua a cor do fim do hero e termina no azul institucional */
    background: linear-gradient(to bottom, var(--azul-charcoal) 0%, var(--azul-institucional) 100%);
}

.sobre .container {
    position: relative;
    z-index: 1;
}

/* Luzes desfocadas (efeito "glow" inspirado no DS Auragen), nas cores da marca */
.sobre__luz {
    position: absolute;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.3;
    pointer-events: none;
    animation: flutuar-luz 14s ease-in-out infinite alternate;
}

.sobre__luz--verde {
    top: 10%;
    right: -10rem;
    background-color: var(--verde-young);
}

.sobre__luz--azul {
    bottom: 5%;
    left: -12rem;
    background-color: var(--azul-istanbul);
    opacity: 0.5;
    animation-delay: -7s;
}

.sobre__grade {
    display: grid;
    gap: 2rem;
}

/* Colunas de texto como painéis de vidro com borda fina */
.sobre__coluna {
    padding: 1.75rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--raio-cartao);
    transition: border-color 0.4s ease, background-color 0.4s ease;
}

.sobre__coluna:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(149, 222, 104, 0.45);
}

.sobre__coluna p,
.sobre__coluna li {
    font-weight: 300;
    line-height: 1.75;
    color: rgba(240, 238, 233, 0.85);
}

.sobre__coluna p + p {
    margin-top: 1rem;
}

/* Heading 3 do DS: 24px / 32px */
.sobre__subtitulo {
    margin-bottom: 1rem;
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.33;
    color: var(--branco);
}

/* Barrinha verde acima do subtítulo */
.sobre__subtitulo::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: 0.875rem;
    background-color: var(--verde-young);
    border-radius: 2px;
}

/* ---------- Mascote no centro ---------- */
.sobre__mascote {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 18rem;
    margin-inline: auto;
    padding: 1rem 0;
}

/* Brilho azul atrás do mascote */
.sobre__mascote::before {
    content: "";
    position: absolute;
    top: 42%;
    left: 50%;
    width: 90%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(37, 74, 185, 0.55) 0%, rgba(0, 33, 86, 0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Anel com degradê azul e verde que gira devagar.
   A "mask" recorta o miolo do círculo, deixando só a borda. */
.sobre__anel {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 95%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--verde-young) 15%,
        transparent 32%,
        var(--azul-istanbul) 60%,
        transparent 78%
    );
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: girar-anel 12s linear infinite;
}

.sobre__mascote img {
    position: relative;
    width: 82%;
    height: auto;
    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.45));
    animation: flutuar 6s ease-in-out infinite;
}

/* ---------- Galeria de 4 imagens ---------- */
.galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 2 colunas no celular */
    gap: 0.75rem;
    margin-top: 3.5rem;
}

.galeria figure {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--raio-cartao);
    transition: transform 0.4s var(--curva-suave), box-shadow 0.4s var(--curva-suave), border-color 0.4s ease;
}

.galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* preenche o espaço sem distorcer a imagem */
    transition: transform 0.7s var(--curva-suave);
}

/* Legenda sobre um degradê escuro, sempre visível (inclusive no celular, onde não existe hover) */
.galeria figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 2.5rem 0.875rem 0.75rem;
    font-family: var(--fonte-titulo);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--branco);
    background: linear-gradient(to top, rgba(0, 11, 26, 0.92) 0%, rgba(0, 11, 26, 0) 100%);
}

.galeria__numero {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--verde-young);
}

/* Hover: a imagem aproxima e o card ganha a sombra deslocada azul do DS */
.galeria figure:hover {
    border-color: var(--verde-young);
    transform: translate(3px, -3px);
    box-shadow: -6px 6px 0 var(--azul-istanbul);
}

.galeria figure:hover img {
    transform: scale(1.08);
}


/* =====================================================================
   9. BANNER INTERMEDIÁRIO
   Protótipo: imagem larga entre "Sobre" e "Nossos livros"
   ===================================================================== */
.banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(20rem, 45vw, 30rem);
    padding-block: 5rem;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    color: var(--branco);
    background-color: var(--azul-institucional);
}

/* A imagem é maior que o banner para permitir o efeito de profundidade (parallax) */
.banner__imagem {
    position: absolute;
    top: -10%;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* Começa no azul do fim da seção "Sobre" e escurece para destacar a citação */
.banner__sobreposicao {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, var(--azul-institucional) 0%, rgba(0, 33, 86, 0.85) 15%, rgba(0, 33, 86, 0.7) 45%, rgba(0, 11, 26, 0.8) 100%);
}

.banner__citacao blockquote p {
    max-width: 24ch;
    margin-inline: auto;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
    font-weight: 500;
    line-height: 1.25;
    text-wrap: balance;
}

.banner__citacao figcaption {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.banner__citacao figcaption::before {
    content: "\2014  ";            /* travessão antes do nome do autor */
}


/* =====================================================================
   10. NOSSOS LIVROS
   Protótipo: 6 cards (NOME, imagem, texto e botão "Saiba mais") em 3 colunas
   ===================================================================== */
.livros {
    padding-block: 5rem;
    color: var(--azul-charcoal);
    background-color: var(--carrara);      /* superfície principal do DS */
}

/* ---------- Filtro (botões de pílula do DS) ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
    border: 0;
}

/* O botão de rádio real fica invisível; o <label> é o que aparece como botão */
.filtros__opcao {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Botão "Default" do DS: pílula com borda azul Istanbul */
.filtros__botao {
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--azul-charcoal);
    border: 1px solid var(--azul-istanbul);
    border-radius: var(--raio-pilula);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filtros__botao:hover {
    background-color: rgba(149, 222, 104, 0.2);    /* hover:bg-young-green/20 do DS */
}

/* Botão "Active / selected" do DS */
.filtros__opcao:checked + .filtros__botao {
    background-color: var(--verde-young);
}

.filtros__opcao:focus-visible + .filtros__botao {
    outline: 3px solid var(--azul-istanbul);
    outline-offset: 3px;
}

/* Filtragem só com CSS: quando um filtro está marcado, esconde os livros das outras áreas */
.livros:has(#filtro-negocios:checked) .livro:not(.livro--negocios),
.livros:has(#filtro-tecnologia:checked) .livro:not(.livro--tecnologia),
.livros:has(#filtro-saude:checked) .livro:not(.livro--saude),
.livros:has(#filtro-direito:checked) .livro:not(.livro--direito) {
    display: none;
}

/* ---------- Grade de cards ---------- */
.livros__grade {
    display: grid;
    grid-template-columns: 1fr;       /* 1 coluna no celular */
    gap: 1.5rem;
}

/* Card no estilo dos cards de curso do DS: borda roxa, cantos de 16px e sombra azul deslocada */
.livro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background-color: var(--branco);
    border: 1px solid var(--roxo-borda);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-cartao);
    transition: transform 0.4s var(--curva-suave), box-shadow 0.4s var(--curva-suave);
    animation: surgir 0.5s var(--curva-suave);    /* também roda quando o filtro mostra o card */
}

.livro:hover {
    transform: translate(3px, -3px);
    box-shadow: -6px 6px 0 var(--azul-istanbul);
}

/* "NOME" do protótipo */
.livro__nome {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6em;                /* reserva espaço para 2 linhas e alinha os cards */
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    color: var(--azul-charcoal);
}

/* Área da capa com efeito de livro em 3D */
.livro__capa {
    display: grid;
    place-items: center;
    padding: 1.75rem 1rem;
    perspective: 1200px;              /* profundidade para o rotateY */
    background: linear-gradient(160deg, var(--verde-suave) 0%, var(--carrara) 100%);
    border-radius: 0.75rem;
}

.livro__capa img {
    width: 55%;
    max-width: 11rem;
    border-radius: 2px 6px 6px 2px;
    /* Linhas brancas e cinzas à direita simulam as páginas; a última sombra dá profundidade */
    box-shadow:
        1px 0 0 #FFFFFF,
        2px 0 0 #D9D9D9,
        3px 0 0 #FFFFFF,
        4px 0 0 #D9D9D9,
        5px 0 0 #FFFFFF,
        16px 18px 28px -10px rgba(0, 11, 26, 0.55);
    transform: rotateY(-22deg) rotateX(4deg);
    transition: transform 0.6s var(--curva-suave);
}

.livro:hover .livro__capa img {
    transform: rotateY(0deg) translateY(-6px) scale(1.04);
}

/* Etiquetas do DS (fundo #E2E2E2, cantos arredondados, texto pequeno) */
.livro__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.livro__tags li {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--azul-charcoal);
    background-color: var(--cinza-borda);
    border-radius: var(--raio-pequeno);
}

.livro__resumo {
    flex-grow: 1;                     /* empurra o botão para a base do card */
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
}

/* ---------- "Saiba mais" com <details>: abre e fecha sem JavaScript ---------- */
.botao-saiba {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    font-weight: 600;
    color: var(--azul-charcoal);
    background-color: var(--verde-young);
    border-radius: 0.25rem;
    list-style: none;                 /* remove a setinha padrão do <summary> */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.botao-saiba::-webkit-details-marker {
    display: none;
}

.botao-saiba:hover {
    background-color: var(--verde-young-hover);
}

/* Sinal de "+" que gira e vira "x" quando o card está aberto */
.botao-saiba::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s var(--curva-suave);
}

.livro__detalhes[open] .botao-saiba::after {
    transform: rotate(45deg);
}

/* Troca o texto do botão: "Saiba mais" / "Fechar" */
.botao-saiba__fechar,
.livro__detalhes[open] .botao-saiba__abrir {
    display: none;
}

.livro__detalhes[open] .botao-saiba__fechar {
    display: inline;
}

/* Ficha do livro (lista de definição) */
.livro__info {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    font-size: 0.875rem;
    border-top: 1px solid rgba(197, 202, 233, 0.6);    /* borda do accordion do DS */
    animation: subir-aparecer 0.4s var(--curva-suave);
}

.livro__info div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.livro__info dt {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    color: var(--azul-istanbul);
}

.livro__info dd {
    font-weight: 300;
    text-align: right;
}


/* =====================================================================
   11. AS UNIDADES
   Protótipo: fundo preto, 3 linhas com imagem à esquerda e texto à direita
   ===================================================================== */
.unidades {
    position: relative;
    padding-block: 5rem;
    color: var(--carrara);
    background-color: var(--azul-charcoal);
    /* Quadriculado sutil que lembra o "mundo digital" do vídeo */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 3rem 3rem;
}

.unidades__lista {
    display: grid;
    gap: 3.5rem;
}

.unidade {
    display: grid;
    align-items: center;
    gap: 1.75rem;
}

.unidade__imagem {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--raio-cartao);
    box-shadow: -8px 8px 0 var(--azul-istanbul);
    transition: box-shadow 0.4s var(--curva-suave), transform 0.4s var(--curva-suave);
}

.unidade__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--curva-suave);
}

.unidade:hover .unidade__imagem {
    transform: translate(4px, -4px);
    box-shadow: -12px 12px 0 var(--verde-young);
}

.unidade:hover .unidade__imagem img {
    transform: scale(1.06);
}

.unidade__conteudo {
    position: relative;
}

/* Número grande só com contorno, decorativo */
.unidade__numero {
    position: absolute;
    top: -1.75rem;
    right: 0;
    font-family: var(--fonte-titulo);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(149, 222, 104, 0.45);
    pointer-events: none;
    user-select: none;
}

/* "Unidade 1" com letras espaçadas, como no protótipo */
.unidade__titulo {
    position: relative;
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: 0.08em;
    color: var(--branco);
}

.unidade__titulo span {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--verde-young);
}

.unidade__texto {
    max-width: 34rem;
    margin-block: 1rem 1.5rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(240, 238, 233, 0.85);
}

.unidade__info {
    display: grid;
    gap: 0.75rem;
}

.unidade__info li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
}

.unidade__info .icone {
    color: var(--verde-young);
}


/* =====================================================================
   12. CONTATOS
   Protótipo: fundo claro, textos à esquerda e imagem à direita
   ===================================================================== */
.contatos {
    padding-block: 5rem;
    color: var(--azul-charcoal);
    background-color: var(--carrara);
}

.contatos__grade {
    display: grid;
    align-items: center;
    gap: 3rem;
}

.contatos__texto > p {
    max-width: 36rem;
    font-weight: 300;
    line-height: 1.75;
}

.contatos__texto > p + p {
    margin-top: 1rem;
}

/* <address> tem itálico por padrão; aqui ele vira uma lista de cartões */
.contatos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin-top: 2rem;
    font-style: normal;
}

.contato {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background-color: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: 0.75rem;
    transition: transform 0.3s var(--curva-suave), border-color 0.3s ease, box-shadow 0.3s ease;
}

a.contato:hover {
    border-color: var(--azul-istanbul);
    transform: translate(3px, -3px);
    box-shadow: var(--sombra-cartao);
}

.contato .icone {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    color: var(--verde-young);
    background-color: var(--azul-institucional);
    border-radius: 50%;
}

.contato span {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 300;
    overflow-wrap: anywhere;          /* o e-mail quebra em vez de vazar no celular */
}

.contato strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--azul-institucional);
}

.contatos__imagem {
    position: relative;
}

.contatos__imagem img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--roxo-borda);
    border-radius: var(--raio-cartao);
    box-shadow: -8px 8px 0 var(--azul-istanbul);
}

/* Selo de vidro flutuando sobre a foto */
.contatos__selo {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    font-family: var(--fonte-titulo);
    font-size: 0.875rem;
    color: var(--branco);
    background-color: rgba(0, 11, 26, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--raio-pilula);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: flutuar 5s ease-in-out infinite;
}


/* =====================================================================
   13. RODAPÉ
   Protótipo: barra preta no fim da página
   ===================================================================== */
.rodape {
    padding-top: 3rem;
    color: rgba(240, 238, 233, 0.75);
    background-color: var(--azul-charcoal);
    border-top: 1px solid rgba(149, 222, 104, 0.25);
}

.rodape__interno {
    display: grid;
    gap: 2rem;
    padding-bottom: 2rem;
}

.rodape__marca img {
    width: auto;
    height: 1.75rem;
}

.rodape__marca p {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 300;
}

.rodape__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-family: var(--fonte-titulo);
}

.rodape__menu a {
    color: var(--branco);
    transition: color 0.3s ease;
}

.rodape__menu a:hover {
    color: var(--verde-young);
}

/* Botão circular de voltar ao topo */
.rodape__topo {
    display: grid;
    place-items: center;
    justify-self: start;
    width: 3rem;
    height: 3rem;
    color: var(--branco);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--curva-suave);
}

.rodape__topo:hover {
    color: var(--azul-charcoal);
    background-color: var(--verde-young);
    transform: translateY(-3px);
}

.rodape__creditos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 300;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* =====================================================================
   14. ANIMAÇÕES
   ===================================================================== */

/* Entrada dos elementos: sobem e aparecem (fade in up), um depois do outro */
.animar-entrada {
    opacity: 0;
    animation: subir-aparecer 0.8s var(--curva-suave) forwards;
}

.atraso-1 { animation-delay: 0.1s; }
.atraso-2 { animation-delay: 0.25s; }
.atraso-3 { animation-delay: 0.4s; }
.atraso-4 { animation-delay: 0.55s; }
.atraso-5 { animation-delay: 0.7s; }

@keyframes subir-aparecer {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ponto verde do selo: onda que cresce e desaparece */
@keyframes pulso {
    from {
        transform: scale(1);
        opacity: 0.8;
    }
    to {
        transform: scale(3);
        opacity: 0;
    }
}

/* Faixa de luz atravessando o botão principal */
@keyframes brilho-botao {
    0%, 60% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

/* Rodinha do mouse descendo */
@keyframes rodinha-mouse {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 0.75rem);
    }
}

/* Mascote flutuando suavemente */
@keyframes flutuar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Anel girando em volta do mascote */
@keyframes girar-anel {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Card de livro surgindo (ao carregar e ao trocar o filtro) */
@keyframes surgir {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Luzes de fundo se movendo devagar */
@keyframes flutuar-luz {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(-4rem, 3rem) scale(1.15);
    }
}

/* ---------- Revelar ao rolar ----------
   Os elementos com a classe "revelar" aparecem quando entram na tela.
   Usa animation-timeline: view() (animação ligada à rolagem, sem JavaScript).
   Só é aplicado se o navegador suportar E se a pessoa não pediu menos movimento;
   caso contrário, o conteúdo aparece normalmente. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .revelar {
            animation: revelar linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        /* Os itens da galeria aparecem um depois do outro */
        .galeria__item:nth-child(2) { animation-range: entry 10% entry 80%; }
        .galeria__item:nth-child(3) { animation-range: entry 20% entry 90%; }
        .galeria__item:nth-child(4) { animation-range: entry 30% entry 100%; }

        /* Parallax do banner: a imagem anda mais devagar que a página */
        .banner__imagem {
            animation: parallax linear both;
            animation-timeline: view();
        }

        @keyframes parallax {
            from {
                transform: translateY(-6%);
            }
            to {
                transform: translateY(6%);
            }
        }

        @keyframes revelar {
            from {
                opacity: 0;
                transform: translateY(48px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
    }
}

/* ---------- Menu ativo pela rolagem ----------
   Cada seção cria uma "linha do tempo de visualização" (view-timeline) com um nome.
   O timeline-scope no body permite que os links do menu usem essas linhas do tempo.
   O link fica verde enquanto a sua seção passa pelo meio da tela.
   Sem suporte, o navegador mantém "Biblioteca" destacado, como no protótipo. */
@supports (timeline-scope: --teste) {
    body {
        timeline-scope: --secao-inicio, --secao-biblioteca, --secao-livros, --secao-unidades, --secao-contatos;
    }

    .hero {
        view-timeline-name: --secao-inicio;
    }

    .sobre {
        view-timeline-name: --secao-biblioteca;
    }

    .livros {
        view-timeline-name: --secao-livros;
    }

    .unidades {
        view-timeline-name: --secao-unidades;
    }

    .contatos {
        view-timeline-name: --secao-contatos;
    }

    /* Remove o destaque fixo: agora quem decide é a rolagem */
    .menu__link--ativo {
        color: var(--branco);
        background-color: transparent;
    }

    .menu__link--ativo:hover {
        background-color: rgba(149, 222, 104, 0.2);
    }

    /* "Biblioteca" fica ativo no hero (como no protótipo) e na seção Sobre */
    .menu__link--biblioteca {
        animation: link-ativo linear none, link-ativo linear none;
        animation-timeline: --secao-inicio, --secao-biblioteca;
        animation-range: cover 50vh cover calc(100% - 50vh);
    }

    .menu__link--livros {
        animation: link-ativo linear none;
        animation-timeline: --secao-livros;
        animation-range: cover 50vh cover calc(100% - 50vh);
    }

    .menu__link--unidades {
        animation: link-ativo linear none;
        animation-timeline: --secao-unidades;
        animation-range: cover 50vh cover calc(100% - 50vh);
    }

    .menu__link--contatos {
        animation: link-ativo linear none;
        animation-timeline: --secao-contatos;
        animation-range: cover 50vh cover calc(100% - 50vh);
    }

    @keyframes link-ativo {
        from,
        to {
            color: var(--azul-charcoal);
            background-color: var(--verde-young);
        }
    }
}

/* Cabeçalho fica mais sólido conforme a página rola.
   Animação ligada à rolagem (scroll-driven), sem JavaScript.
   Navegadores sem suporte simplesmente mantêm o cabeçalho de vidro. */
@supports (animation-timeline: scroll()) {
    .cabecalho::before {
        animation: cabecalho-solido linear both;
        animation-timeline: scroll();
        animation-range: 0 300px;
    }

    @keyframes cabecalho-solido {
        to {
            background-color: rgba(0, 11, 26, 0.9);
            border-bottom-color: rgba(149, 222, 104, 0.25);
        }
    }
}


/* =====================================================================
   15. RESPONSIVIDADE
   Abordagem "mobile first": o CSS acima é para o celular.
   872px é o mesmo ponto de quebra usado pelo site oficial (sm-tablet-min).
   ===================================================================== */

/* ---------- Celular grande / tablet ---------- */
@media (min-width: 560px) {
    :root {
        --espaco-lateral: 1.5rem;
    }

    .hero__acoes {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
    }

    .cartao-numero {
        padding: 1rem 1rem 1.125rem;
    }

    .cartao-numero__valor {
        font-size: 1.875rem;     /* text-3xl do DS */
    }

    .cartao-numero__rotulo {
        font-size: 0.875rem;
    }

    /* Livros: 2 colunas no tablet */
    .livros__grade {
        grid-template-columns: repeat(2, 1fr);
    }

    .rodape__creditos {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 2rem;
    }
}

/* ---------- Desktop ---------- */
@media (min-width: 872px) {
    :root {
        --espaco-lateral: 2rem;
        --altura-cabecalho: 5rem;
    }

    .cabecalho__logo img {
        height: 2rem;
    }

    /* Some o hambúrguer e o menu volta a ser uma linha horizontal */
    .menu-abrir,
    .menu__fechar {
        display: none;
    }

    .menu {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: none;
        border: 0;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .menu:target {
        box-shadow: none;
    }

    .menu__lista {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

    .menu__link {
        padding: 0.5rem 1.25rem;
        font-size: 1rem;
    }

    /* Sublinhado verde que cresce no hover (inspirado no DS Auragen) */
    .menu__link::after {
        content: "";
        position: absolute;
        left: 1.25rem;
        right: 1.25rem;
        bottom: 0.3rem;
        height: 2px;
        background-color: var(--verde-young);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s var(--curva-suave);
    }

    .menu__link:not(.menu__link--ativo):hover {
        background-color: transparent;
    }

    .menu__link:hover::after {
        transform: scaleX(1);
    }

    /* Com o menu ativo pela rolagem, o hover de todos os links fica igual */
    @supports (timeline-scope: --teste) {
        .menu__link--ativo:hover {
            background-color: transparent;
        }
    }

    .hero {
        padding-bottom: 8rem;
    }

    /* Sobre: as três colunas do protótipo lado a lado */
    .sobre {
        padding-block: 7rem;
    }

    .cabecalho-secao {
        margin-bottom: 4rem;
    }

    .cabecalho-secao__sobretitulo {
        font-size: 0.8125rem;
        letter-spacing: 0.3em;
    }

    .sobre__grade {
        grid-template-columns: 1fr minmax(15rem, 20rem) 1fr;
        align-items: center;
        gap: 2.5rem;
    }

    .sobre__mascote {
        max-width: none;
    }

    /* Galeria com as 4 imagens em uma linha */
    .galeria {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        margin-top: 4.5rem;
    }

    .galeria figcaption {
        padding: 3rem 1rem 0.875rem;
        font-size: 0.9375rem;
    }

    .galeria__numero {
        font-size: 0.75rem;
    }

    /* Seções com mais respiro no desktop */
    .livros,
    .unidades,
    .contatos {
        padding-block: 7rem;
    }

    .cabecalho-secao__texto {
        font-size: 1.25rem;
    }

    .cabecalho-secao--esquerda {
        margin-bottom: 1.5rem;
    }

    /* Livros: as 3 colunas do protótipo */
    .livros__grade {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* Unidades: imagem à esquerda e texto à direita, como no protótipo */
    .unidades__lista {
        gap: 5rem;
    }

    .unidade {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 4rem;
    }

    .unidade__numero {
        font-size: 7rem;
        top: -3rem;
    }

    .unidade__titulo {
        font-size: 1.875rem;
    }

    /* Contatos: texto à esquerda e imagem à direita */
    .contatos__grade {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 4rem;
    }

    .contatos__selo {
        left: -1.5rem;
        bottom: 2rem;
    }

    /* Rodapé em uma linha */
    .rodape__interno {
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 3rem;
    }

    /* No desktop o degradê lateral deixa o vídeo aparecer mais do lado direito */
    .hero__sobreposicao {
        background:
            linear-gradient(to bottom, rgba(0, 11, 26, 0.5) 0%, rgba(0, 11, 26, 0) 20%),
            linear-gradient(to top, var(--azul-charcoal) 0%, rgba(0, 11, 26, 0) 30%),
            linear-gradient(to right, rgba(0, 11, 26, 0.92) 0%, rgba(0, 33, 86, 0.7) 40%, rgba(0, 33, 86, 0.05) 75%);
    }

    .hero__conteudo {
        gap: 1.75rem;
    }

    .hero__texto {
        font-size: 1.125rem;      /* "Regular L" do DS: 18px / 28px */
    }

    .hero__rolar-texto {
        display: block;
    }
}


/* =====================================================================
   16. MOVIMENTO REDUZIDO (ACESSIBILIDADE)
   Para quem ativou "reduzir movimento" no sistema operacional:
   o vídeo é escondido (fica a imagem estática) e as animações são desligadas.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero__video {
        display: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animar-entrada {
        opacity: 1;
    }
}