/* BRAND A BRAND — reset, base y sistema de variables */

/* Tipografías servidas desde el propio dominio: sin ellas la visita haría una
   petición a Google y su IP saldría fuera, que es lo que obliga a pedir consentimiento. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../assets/fonts/dm-sans.woff2') format('woff2');
}

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

:root {
  /* Superficies */
  --paper: #f2f1ee;
  --paper-alt: #eae8e4;
  --white: #ffffff;

  /* Texto */
  --ink: #2e2c29;
  --ink-soft: #6b6763;
  --ink-faint: #9c9791;

  /* Acento: gris frío. Se separa del negro cálido por temperatura, no por color */
  --steel: #545c63;
  --steel-mid: #8f969d;
  --steel-soft: #b4bac1;
  --mist: #d7dade;
  --haze: #dedbd6;

  /* Líneas y veladuras */
  --line: rgba(46, 44, 41, 0.12);
  --line-strong: rgba(46, 44, 41, 0.28);
  --veil-03: rgba(46, 44, 41, 0.03);
  --veil-06: rgba(46, 44, 41, 0.06);

  /* Sombras suaves, nunca duras */
  --shadow-sm: 0 2px 8px rgba(46, 44, 41, 0.05);
  --shadow-md: 0 16px 40px rgba(46, 44, 41, 0.09);
  --shadow-lg: 0 28px 70px rgba(46, 44, 41, 0.14);

  /* Tipografía */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-logo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Ritmo y forma */
  --radius: 4px;
  --radius-pill: 100px;
  --container: 1360px;
  --nav-h: 84px;
  --section-y: clamp(84px, 11vw, 180px);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --speed: 0.42s;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
}

h3, h4 {
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

p { margin: 0; }

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

dl, dd, dt, figure, blockquote { margin: 0; }

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

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

button,
input,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

textarea {
  resize: vertical;
  font-family: var(--font-body);
}

::selection {
  background: var(--steel-soft);
  color: var(--ink);
}

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

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