/* ==========================================================================
   RANERI — Base
   --------------------------------------------------------------------------
   Reset moderno, tipografia base, utilitários e componentes compartilhados
   (container, botões, eyebrow). Mobile-first: ajustes por breakpoint ficam
   em responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonte local futura (desativada)
   Para adotar uma fonte própria: copiar os arquivos .woff2 para
   assets/fonts/ e descomentar. Os tokens --font-sans / --font-display já
   priorizam os nomes abaixo.
   --------------------------------------------------------------------------
@font-face {
    font-family: "RANERI Sans";
    src: url("../fonts/raneri-sans-variable.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + var(--space-sm));
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* :where() zera a especificidade: componentes definem padding livremente */
:where(ul[class], ol[class]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

::selection {
    background-color: var(--color-selection);
    color: var(--color-white);
}

/* Elemento com tema próprio (tokens em tokens.css): fundo e texto do tema */
[data-theme] {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Tema claro: grade isométrica de 30° quase invisível (o ângulo do símbolo) */
[data-theme="light"] {
    color-scheme: light;
    background-image: url("../img/texturas/grade-isometrica-clara.svg");
    background-size: 55.4256px 32px;
}

/* --------------------------------------------------------------------------
   Foco visível (teclado)
   -------------------------------------------------------------------------- */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(var(--container-max) + (2 * var(--container-pad)));
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: var(--space-2xs);
    left: var(--space-2xs);
    z-index: var(--z-skip-link);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Componente compartilhado: botão
   Variantes: .btn--primary · .btn--outline · .btn--text
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-white);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: var(--btn-height);
    padding: 0.75rem 1.5rem;
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-sm);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--dur-base) var(--ease-standard),
        border-color var(--dur-base) var(--ease-standard),
        color var(--dur-base) var(--ease-standard);
}

.btn__icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__icon {
    transform: translateX(3px);
}

.btn--primary {
    --btn-bg: var(--color-primary);
    --btn-border: var(--color-primary);
}

.btn--primary:hover {
    --btn-bg: var(--color-primary-hover);
    --btn-border: var(--color-primary-hover);
}

.btn--primary:active {
    --btn-bg: var(--color-primary-active);
    --btn-border: var(--color-primary-active);
}

.btn--outline {
    --btn-border: rgba(255, 255, 255, 0.42);
}

.btn--outline:hover {
    --btn-bg: rgba(255, 255, 255, 0.08);
    --btn-border: var(--color-white);
}

.btn--text {
    padding-inline: 0;
    border-width: 0;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45em;
}

.btn--text:hover {
    text-decoration-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Componente compartilhado: link com seta (seguir para uma página ou seção)
   Hierarquia dos CTAs: .btn--primary (ação principal da página) →
   .btn--outline (alternativa) → .link-arrow (aprofundar: "Conheça todas as
   soluções →"). Fio fino sob o texto; no hover o fio vermelho percorre a
   largura e a seta avança. .link-arrow--down: seta para baixo (âncora).
   -------------------------------------------------------------------------- */
.link-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.625rem;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.link-arrow::before,
.link-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--border-width);
    background-color: var(--color-line-strong);
}

.link-arrow::after {
    height: var(--border-accent);
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur-slow) var(--ease-out-expo);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.link-arrow__icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--color-accent);
    transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover .link-arrow__icon {
    transform: translateX(3px);
}

.link-arrow--down .link-arrow__icon {
    rotate: 90deg;
}

.link-arrow--down:hover .link-arrow__icon {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Componente compartilhado: nó RANERI (losango bicolor)
   O losango central do símbolo, em proporção isométrica (30°): metade
   vermelha e metade na cor do texto do tema (clara no escuro, preta no
   claro). Marca barramentos e listas. Estudo P1 em docs/IDENTIDADE.md.
   -------------------------------------------------------------------------- */
.node {
    --node-w: 0.875rem;

    display: inline-block;
    flex: none;
    width: var(--node-w);
    height: calc(var(--node-w) * 0.5774);
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-text) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* --------------------------------------------------------------------------
   Componente compartilhado: ícone técnico (assets/icons/tecnicos/)
   Grade 32 × 32, traço 1,5 em currentColor e um único nó vermelho
   (.icon__node, o losango do símbolo) marcando o ponto de interesse.
   -------------------------------------------------------------------------- */
.icon {
    display: block;
    flex: none;
    width: 2rem;
    height: 2rem;
}

.icon__node {
    fill: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Componente compartilhado: eyebrow (prefixo editorial)
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.eyebrow--accent::before {
    content: "";
    flex: none;
    width: 2rem;
    height: var(--border-accent);
    background-color: var(--color-accent);
}

/* Numeração editorial de seção: "01 ━━ SOLUÇÕES"
   O índice (mono, cinza) vem antes do fio vermelho; o número é decorativo
   (aria-hidden no HTML). Modificador próprio: o eyebrow do hero não muda. */
.eyebrow--indexed {
    gap: 0.75rem;
}

.eyebrow--indexed::before {
    width: 1.5rem;
    transform-origin: left center;
}

.eyebrow__index {
    order: -1;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   Revelação ao rolar ([data-reveal] + assets/js/reveal.js)
   Só oculta quando o script ativa .has-reveal no <html>: sem JavaScript
   ou com movimento reduzido, tudo aparece normalmente.
   data-reveal="group": o contêiner fica parado; os filhos animam (home.css).
   -------------------------------------------------------------------------- */
.has-reveal [data-reveal]:not([data-reveal="group"]) {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
        opacity 700ms var(--ease-out),
        transform 900ms var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Índice e fio do eyebrow surgem logo depois do bloco */
.has-reveal .eyebrow__index {
    transition:
        opacity 600ms var(--ease-out) 300ms,
        transform 800ms var(--ease-out-expo) 300ms;
}

.has-reveal .eyebrow--indexed::before {
    transition: transform 800ms var(--ease-out-expo) 150ms;
}

.has-reveal [data-reveal]:not(.is-revealed) .eyebrow__index {
    opacity: 0;
    transform: translateX(-0.5rem);
}

.has-reveal [data-reveal]:not(.is-revealed) .eyebrow--indexed::before,
.has-reveal .eyebrow--indexed[data-reveal]:not(.is-revealed)::before {
    transform: scaleX(0);
}

@media print {
    .has-reveal [data-reveal],
    .has-reveal [data-reveal] * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}