/* ================================
   base.css (DEFINITIVO)
   - Variables + Reset + Helpers globales
   - NO poner acá estilos de header/hero/footer
================================= */

:root{
  /* ─────────────────────────────
     Colores de marca
  ───────────────────────────── */
  --almatti-nero: #212322;          /* PANTONE 419 C */
  --almatti-paper: #EFEFEF;         /* PANTONE 663 C */
  --almatti-grey: #D0D0CE;          /* COOL GRAY 2 C */

  /* Colores por fragancia (brandbook) */
  --almatti-leone:    #D0D0CE;      /* LEONE - gris suave */
  --almatti-libero:   #D0DEBB;      /* LIBERO - verde pálido */
  --almatti-luce:     #EF95CF;      /* LUCE - rosa */
  --almatti-amoretta: #FFC27B;      /* AMORETTA - durazno */
  --almatti-nero-accent: #212322;   /* NERO - negro protagonista */

  /* ─────────────────────────────
     Tipografías
  ───────────────────────────── */
  --font-body: "Overpass", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-heading: "Halant", ui-serif, Georgia, "Times New Roman", serif;

  /* ─────────────────────────────
     Texto / UI
  ───────────────────────────── */
  --text-main-dark: #212322;
  --text-main-light: #ffffff;
  --text-muted: rgba(255,255,255,.65);

  --radius-xl: 22px;
  --shadow-soft: 0 18px 40px rgba(0,0,0,.18);

  /* Header (solo altura para offsets globales) */
  --header-height: 76px; /* mobile base */
}

/* ─────────────────────────────
   RESET / BASE
───────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--almatti-nero);
  color: var(--text-main-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

ul, ol{ margin: 0; padding: 0; }
li{ list-style: none; }

/* ─────────────────────────────
   LAYOUT HELPERS
───────────────────────────── */
.container{
  width: min(1280px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Bloqueo de scroll (nav y search) */
body.nav-open,
body.search-open{ overflow: hidden; }

/* MAIN OFFSET (header fijo) */
main{ padding-top: var(--header-height); }

/* Para que al ir a #secciones no queden tapadas por el header */
section[id],
main > section,
.hero{
  scroll-margin-top: calc(var(--header-height) + 12px);
}