/* ALMARE Maison — tokens de design (cole no início do seu CSS) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  /* Cores */
  --almare-onix:      #141414; /* textos, fundos escuros, logo */
  --almare-marfim:    #F5F0E8; /* fundo principal */
  --almare-pedra:     #E7DED1; /* fundos de seção, cards */
  --almare-areia:     #D9CBB6; /* bordas, divisores */
  --almare-taupe:     #8C7B6B; /* textos secundários */
  --almare-champanhe: #B8975A; /* destaque: linhas, botões, detalhes (use pouco) */
  --almare-bordo:     #4A1F24; /* acento raro: etiquetas "Série numerada", hover */
  --almare-branco:    #FFFFFF;

  /* Tipografia */
  --fonte-titulo: 'Cormorant Garamond', 'Times New Roman', serif;
  --fonte-texto:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --t-display: clamp(3rem, 6vw, 5.5rem); /* hero */
  --t-h1: clamp(2.4rem, 4vw, 3.5rem);
  --t-h2: clamp(1.8rem, 3vw, 2.5rem);
  --t-h3: 1.4rem;
  --t-corpo: 1.0625rem;  /* 17px */
  --t-pequeno: 0.8125rem;/* 13px, rótulos em CAIXA ALTA */

  --entreletra-rotulo: 0.28em; /* para textos em caixa alta */
  --entrelinha: 1.7;

  /* Espaçamento (respiro é parte do luxo) */
  --esp-1: 0.5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2.5rem;
  --esp-5: 4rem;   --esp-6: 6rem; --esp-7: 9rem;
  --largura-max: 1280px;

  /* Formas */
  --raio: 0;               /* cantos retos; o arco é reservado ao monograma e às fotos de destaque */
  --raio-arco: 999px 999px 0 0;
  --borda-fina: 1px solid var(--almare-areia);
  --transicao: 400ms cubic-bezier(.2,.7,.2,1);
}

/* Base sugerida */
body { background: var(--almare-marfim); color: var(--almare-onix);
       font-family: var(--fonte-texto); font-weight: 300; font-size: var(--t-corpo); line-height: var(--entrelinha); }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.1; letter-spacing: 0.01em; }
.rotulo { font-size: var(--t-pequeno); text-transform: uppercase; letter-spacing: var(--entreletra-rotulo); color: var(--almare-taupe); }

/* Botões */
.btn { display: inline-block; padding: 1rem 2.4rem; font-family: var(--fonte-texto); font-size: var(--t-pequeno);
       text-transform: uppercase; letter-spacing: var(--entreletra-rotulo); border: 1px solid var(--almare-onix);
       background: var(--almare-onix); color: var(--almare-marfim); transition: var(--transicao); }
.btn:hover { background: transparent; color: var(--almare-onix); }
.btn--claro { background: transparent; color: var(--almare-onix); }
.btn--claro:hover { background: var(--almare-onix); color: var(--almare-marfim); }
.linha-dourada { width: 64px; height: 1px; background: var(--almare-champanhe); border: 0; }
.foto-arco { border-radius: var(--raio-arco); overflow: hidden; }