:root {
    /* === BASE (mapa desde tu paleta) ===
       primary (#1E2A34)  → azul petróleo
       secondary (#2F2F2F)→ gris piedra oscuro
       text (#4A4A4A)     → gris medio texto
       accent (#CBBBA0)   → nude
       tertiary (#9C9C9C) → gris claro
       background (#FFFFFF)
       alternate (#F8F7F4)→ marfil cálido
       border (#DAD7D3)   → borde arena suave
    */
  
    /* === COLORS BASE === */
    --color-text: #634460;             /* Gris piedra (texto principal) */
    --color-text-inverted: #f4f4e4;     /* Blanco para fondos oscuros */
    --color-text-soft: #b79cb6;         /* Gris claro (secundario) */
    --color-text-medium: #9b7898;       /* Gris medio (neutro) */
    --color-text-strong: #8e6b89;       /* Azul petróleo (titulares/énfasis) */
    --color-text-dark: #000000;       /* Azul petróleo (titulares/énfasis) */

  
    --color-bg: #f9f9f4;                /* Fondo base */
    --color-bg-soft: #f2f2f0;           /* Alterno cálido (secciones suaves) */
    --color-bg-medium: #ab9daa;         /* Lienzo neutro/bordes amplios */
    --color-bg-strong: #8e6b89;         /* Hero/Footer (petróleo) */
    --color-bg-dark: #634460;           /* Oscuro extra (gris piedra) */
  
    /* === ACCENT (nude como acento principal) === */
    --color-accent: #634460;            /* Nude protagonista */
    --color-accent-alt: #f4f4e4;        /* Nude desaturado (hover/suave) */
    --color-accent-deep: #1E2A34;       /* Contraste profundo (petróleo) */
  
    /* === ACCENTS “fríos / soporte” (opcional, ya que tu look es cálido) === */
    --color-accent-cool: #1E2A34;       /* Usamos petróleo como cool */
    --color-accent-indigo: #2F2F2F;     /* Gris piedra como indigo neutro */
    --color-accent-muted: #9C9C9C;      /* Gris atenuado para etiquetas */
  
    /* === ESTADOS === */
    --color-focus: #CBBBA0;             /* Focus accesible y coherente con el acento */
    --color-error: #D9534F;             /* Mantengo estándar legible */
    --color-success: #74B49B;           /* Verde salvia suave (combina bien) */
  
    /* === BORDES === */
    --color-border: #DAD7D3;            /* Borde por defecto */

  

  /* === TIPOGRAFIA I ESTIL === */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --border-radius: .75rem;
  --transition: .3s ease-in-out;

  /* === SEMÀNTICA === */
  --bg: var(--color-bg);
  --surface: #FFFFFF;
  --text: var(--color-text);
  --muted: #6B6B6B;
  --primary: var(--color-accent);
  --on-primary: #FFFFFF;
  --success: var(--color-success);
  --warning: #F4B942;
  --error: var(--color-error);


  /* Spacing scale */
  --space-0:0;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;

  /* Radius scale */
  --radius-sm:.375rem; --radius-md:.75rem; --radius-lg:1rem; --radius-2xl:1.5rem;

  /* Elevations */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 2px 8px rgba(0,0,0,.07);
  --shadow-md:0 8px 24px rgba(0,0,0,.12);
  --shadow-lg:0 16px 40px rgba(0,0,0,.16);

  /* Motion */
  --dur-fast:120ms; --dur-med:220ms; --dur-slow:360ms;
  --ease-standard:cubic-bezier(.2,.0,.2,1);

  /* Breakpoints */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  /* Containers */
  --container-sm:640px; --container-md:880px; --container-lg:1440px;

  /* Z-index roles */
  --z-base:1; --z-sticky:100; --z-dropdown:400; --z-modal:900; --z-toast:1000;

  /* Icon sizes */
  --icon-sm:1rem; --icon-md:1.25rem; --icon-lg:1.5rem;
}

html{ scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: clip;           /* o hidden si prefereixes */
  overscroll-behavior-x: none;/* evita el “arrastro i em mou tot el site” */
  touch-action: pan-y;        /* la pàgina només accepta scroll vertical */
}


body{
  color:var(--text);
  background-color:var(--bg);
  font-family:'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  margin:0; padding:0;
}

a{ color:var(--primary); text-decoration:underline; transition:color .2s ease; }
a:hover{ color:var(--color-accent-alt); }

strong{ font-weight:500; }