/* ═══════════════════════════════════════════════════════════════════════
   DE LA LASTRA — a folha da marca.

   Esta é a FONTE ÚNICA da identidade: o livro de marca (/marca) lê estes
   mesmos tokens, então guide e sistema são o mesmo organismo. Trocar um
   valor aqui repinta a casa inteira, e nenhum componente passa a mentir.

   O conceito, com o porquê de cada cor: ../marca/conceito.md
   A estratégia que o gerou:            ../marca/estrategia.md

   Três camadas (principios/design-system.md):
     TIER 1  primitivos — valores crus. Componente NUNCA lê.
     TIER 2  semântico  — o papel de cada cor. É o que o componente lê.
     TIER 3  componente — mora no CSS do componente, referencia o tier 2.

   A REGRA CONDICIONAL DA CASA, medida e não opinada:
     bordeaux sobre pedra dá 1,0:1 de contraste. Então bordeaux SÓ sobre
     claro. Sobre a pedra, a ação é papel (--on-escuro) e o filete é aço.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   AS FACES — servidas DAQUI, nunca do CDN do Google.

   Até 2026-08-25 esta folha carregava Archivo e Literata do CDN de fontes
   do Google, e cada visitante da landing e das lojas entregava o IP a um
   terceiro. A decisão da casa já existia (principios/marca.md): a
   chamada saiu do painel e da landing da Micelize porque era "um vazamento
   de IP de usuário logado que ninguém tinha notado". Aqui ela nunca tinha
   sido auditada. O gabarito são `rafaela-de-la-lastra/landing/fontes`,
   `pampfit/landing/fontes` e `academiakolizeu/landing/fontes`.

   As FAMÍLIAS não mudaram: são as do livro de marca. Mudou de onde vêm.

   Os dois arquivos são VARIÁVEIS e trazem só o subconjunto latino (o mesmo
   unicode-range que o Google servia), o que cobre todos os acentos do
   português. A procedência e como atualizar estão em `fontes/README.md`.

   Os eixos importam e não são enfeite:
     Archivo   wdth — o display usa 104 e 118 (--wdth-media / --wdth-larga).
                      Trocar por uma face estática achata a marca.
     Literata  opsz — o navegador aplica sozinho pelo tamanho do texto.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;   /* eixo variável: um arquivo, todos os pesos */
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fontes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fontes/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ─── TIER 1 — PRIMITIVOS ─────────────────────────────────────────── */

  /* PEDRA — a ardósia. "Lastra" é a laje de pedra: o nome da casa virou cor. */
  --pedra-950: #081B1D;
  --pedra-900: #0D2A2C;
  --pedra-800: #123D40;   /* a base */
  --pedra-700: #174E50;
  --pedra-600: #1E6362;
  --pedra-500: #2A7C77;
  --pedra-300: #8FB3AE;
  --pedra-200: #B9D0CB;
  --pedra-100: #DCE8E5;

  /* BORDEAUX — a Ibéria de 1966. Calor que uma pedra sozinha não tem. */
  --bordeaux-900: #3F1219;
  --bordeaux-800: #511822;
  --bordeaux-700: #641F2A;   /* a base */
  --bordeaux-600: #7E2A36;
  --bordeaux-500: #9B3A45;
  --bordeaux-100: #EEDADB;

  /* PAPEL — um branco QUENTE, não um bege. É a forma mais fiel da regra "só
     claridade, nunca acento": quanto mais perto do branco, menos o papel
     disputa com a pedra e com o bordeaux, e mais a casa lê como premium.
     A manteiga (o butter cream original) desce para um papel só: marcar a
     escolha. Cor não se acrescenta — se especializa. */
  --creme-50:  #FDFCFA;
  --creme-100: #FAF8F4;
  --creme-200: #F7F5F1;   /* a base — o papel */
  --creme-300: #EDE9E2;   /* rebaixado: campo, linha, superfície de baixo */
  --creme-400: #F1E5CE;   /* manteiga — SÓ marcação de escolha */

  /* AÇO — o neutro da casa, puxado para o verde-azul da pedra.
     Nunca cinza puro: é a lâmina, não um cinza de sistema. */
  --aco-50:  #F2F4F3;
  --aco-75:  #EDEFEE;   /* a faixa alternada, agora que o papel é quase branco */
  --aco-100: #E3E7E6;
  --aco-200: #C6CCCA;
  --aco-300: #A3ACAA;
  --aco-500: #5A6462;
  --aco-700: #39413F;

  /* FUNCIONAIS — a única exceção à regra de não acrescentar cor. */
  --ok-600:    #2F6B4F;
  --alerta-600:#8A6212;
  --erro-600:  #A32B2B;

  /* tipografia — Archivo (Omnibus-Type) de placa no display,
     Literata de leitura no texto. A inversão do par da categoria. */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Literata', Georgia, 'Times New Roman', serif;
  --wdth-larga: 'wdth' 118;   /* o eixo de largura do display */
  --wdth-media: 'wdth' 104;

  /* ritmo — malha de 4/8 */
  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2.25rem; --s6: 3.5rem; --s7: 5.5rem;
  --larg: 1140px;

  /* o monograma como máscara, para quadros vazios (sem foto) usarem a MESMA
     geometria do arquivo, em vez de redesenhar o L em cada lugar */
  --marca-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='14,36 38,12 38,60 14,60'/><polygon points='14,64 86,64 62,88 14,88'/></svg>");

  /* forma — a pedra não é arredondada; o único evento de canto é o chanfro */
  --raio: 0;
  --chanfro: 28px;

  /* motion — uma coisa só: o que entra desliza no eixo de 45° */
  --rapido: 180ms; --calmo: 600ms;
  --curva: cubic-bezier(.4, 0, .2, 1);


  /* ─── TIER 2 — SEMÂNTICO (a única camada que componente lê) ───────── */

  /* superfícies */
  --paper: var(--creme-200);    /* o papel da casa */
  --paper-2: var(--creme-300);  /* superfície rebaixada: campo, linha */
  --card: var(--creme-50);
  --white: #FFFFFF;
  --band: var(--aco-75);        /* a faixa clara alternada */
  --line: var(--aco-200);       /* o filete de aço */

  /* tinta */
  --ink: var(--pedra-900);
  --ink-2: var(--aco-500);      /* secundário — 4,9:1 sobre o papel */

  /* principal: a pedra (superfície escura, seleção, filete forte) */
  --brand-950: var(--pedra-950);
  --brand-900: var(--pedra-900);
  --brand-700: var(--pedra-800);
  --brand-500: var(--pedra-600);
  --brand-200: var(--pedra-200);

  /* ação: o bordeaux — SÓ SOBRE CLARO */
  --accent-700: var(--bordeaux-800);
  --accent-600: var(--bordeaux-700);
  --accent-500: var(--bordeaux-600);

  /* sobre a pedra: o que substitui o bordeaux quando o fundo é escuro */
  --on-escuro: var(--creme-200);    /* 9,5:1 */
  --on-escuro-2: var(--aco-200);    /* 7,3:1 — secundário */
}

/* Tema escuro: remapeia só o tier 2 (a pedra vira o chão, o papel vira
   tinta). A ação inverte para papel, porque bordeaux sobre pedra é
   proibido pela regra da casa. */
:root[data-theme="dark"] {
  --paper: var(--pedra-950);
  --paper-2: var(--pedra-900);
  --card: var(--pedra-900);
  --band: var(--pedra-900);
  --line: var(--aco-700);
  --ink: var(--creme-200);
  --ink-2: var(--aco-300);
  --accent-700: var(--creme-300);
  --accent-600: var(--creme-200);
  --accent-500: var(--creme-100);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* [hidden] precisa vencer o display do componente: a sacola e o resumo
   declaram flex e apareciam vazios mesmo escondidos. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-600); }
:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 3px; }

/* ─── A ASSINATURA — o NOME ───────────────────────────────────────────
   Marca de pessoa assina com o nome, não com um desenho: é o que fazem
   Vidal Sassoon, Llongueras e Toni&Guy, e é o que a nossa também faz.
   Composta em CSS, não em arquivo: a fonte já está na página, então a
   assinatura herda a cor do contexto sem virar um PNG por fundo.

   O monograma (o L de ../marca/simbolo.svg) NÃO entra aqui. Ele existe
   para onde o nome não cabe: favicon, avatar, tampa de frasco, bordado,
   selo de certificado. Ver .monograma, abaixo. */

.marca { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.marca-texto { display: flex; flex-direction: column; justify-content: center; }
.marca-nome {
  font-family: var(--display); font-variation-settings: var(--wdth-larga);
  font-weight: 600; font-size: clamp(.92rem, 2.2vw, 1.18rem); line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.marca-frente {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 500; font-size: .56rem; line-height: 1;
  letter-spacing: .32em; text-transform: uppercase;
  margin-top: .7em; opacity: .72;
}

/* No celular o nome nao pode empurrar a acao para fora da tela: ele encolhe e
   fecha o tracking. Era daqui que vinham 3px de rolagem horizontal. */
@media (max-width: 560px) {
  .marca-nome { font-size: .8rem; letter-spacing: .05em; }
  .marca-frente { font-size: .5rem; letter-spacing: .22em; margin-top: .5em; }
}

/* O MONOGRAMA — o L, só onde o nome não cabe. Nunca ao lado do nome:
   competir com a própria assinatura é o erro que ele existe para evitar. */
.monograma { display: block; width: 1.6em; height: 1.6em; flex: none; }
.monograma svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ─── O CHANFRO (o único evento de canto) ─────────────────────────────
   Uma peça por tela, no máximo duas. Se tudo é chanfrado, nada é. */
.chanfro {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chanfro)),
                     calc(100% - var(--chanfro)) 100%, 0 100%);
}

/* ─── ETIQUETA TÉCNICA — a voz da casa em miúdo ──────────────────────── */
.etiqueta {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2);
}

/* Número é argumento, não detalhe de layout: os minutos, o ano e os
   preços saem tabulares, no display. */
.numero {
  font-family: var(--display); font-variation-settings: var(--wdth-larga);
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* O que entra desliza no eixo de 45°, uma vez, 180ms. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra-45 var(--calmo) var(--curva) both; }
  @keyframes entra-45 {
    from { opacity: 0; transform: translate(-10px, 10px); }
    to   { opacity: 1; transform: none; }
  }
}