/* Design tokens extraídos de https://www.remcambrils.com el 2026-10-03 */
/* Generado por la skill design-system-web. Revisa los nombres antes de usarlos en producción. */
/* Logotipos (rutas relativas a este archivo): logos/logo-1.png (principal) */

:root {
  /* Marca */
  --logo: url("logos/logo-1.png");

  /* Colores */
  --color-fondo: #ffffff; /* Fondo general y texto sobre rojo */
  --color-fondo-tarjeta: #9090900d; /* Fondo translúcido de tarjetas de noticias */
  --color-texto: #555f66; /* Texto de párrafos y navegación */
  --color-primario: #cd1719; /* Cabecera, pie, enlaces y títulos de tarjetas */
  --color-gris-medio: #666666; /* Fondos de elementos del slider (puntos activos, controles) */
  --color-gris-claro: #bbbbbb; /* Puntos inactivos del slider y detalles */
  --color-borde: #90909040; /* Bordes de tarjetas y separadores */
  --color-boton-oscuro: #192024; /* Botones secundarios como 'Llegir més' */
  --color-blanco-15: #ffffff26; /* Fondos y bordes translúcidos sobre rojo */
  --color-texto-titulos: #666f77; /* Titulares h2 y h3 */
  --color-texto-oscuro: #353535; /* Texto con más contraste */
  --color-blanco-75: #ffffffbf; /* Texto secundario sobre rojo (h4 del pie) */
  --color-gris-banda: #444444; /* Banda de avisos bajo el slider ('Ja som 330 socis!') */
  --color-blanco-35: #ffffff59; /* Bordes sutiles sobre fondos de color */
  --color-fondo-suave: #f2f2f2; /* Texto claro sobre fondos oscuros */
  --color-texto-50: #555f6680; /* Bordes semitransparentes en gris pizarra */

  /* Tipografía */
  --font-titulos: Intro, sans-serif;
  --font-texto: Intro, sans-serif;
  --text-h1: 16px;
  --leading-h1: 48px;
  --text-h2: 32px;
  --leading-h2: 48px;
  --text-h3: 20px;
  --leading-h3: 30px;
  --text-h4: 10.88px;
  --leading-h4: 10.88px;
  --text-body: 14.4px;
  --leading-body: 17.28px;

  /* Espaciado */
  --space-1: 2px;
  --space-2: 7px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 25px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;

  /* Radios */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-1: rgb(0, 0, 0) 1px 1px 5px 0px;
  --shadow-2: rgba(0, 0, 0, 0.25) 0px 0px 1.6px 0px;
  --transition: 0.2s, 0.2s ease-in-out, ease-in-out;
}

/* Breakpoints detectados: 736px */

/* ---- Estilos base ---- */

body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: 16px;
  line-height: 28px;
  color: #66555b;
  background: var(--color-fondo);
}

h1 {
  font-family: var(--font-titulos);
  font-size: 16px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-fondo);
}

h2 {
  font-family: var(--font-titulos);
  font-size: 32px;
  font-weight: 300;
  line-height: 48px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-texto-titulos);
}

h3 {
  font-family: var(--font-titulos);
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-texto-titulos);
}

h4 {
  font-family: var(--font-titulos);
  font-size: 10.88px;
  font-weight: 300;
  line-height: 10.88px;
  letter-spacing: 2.176px;
  text-transform: uppercase;
  color: var(--color-blanco-75);
}

p {
  font-family: var(--font-texto);
  font-size: 14.4px;
  font-weight: 300;
  line-height: 17.28px;
  color: var(--color-texto);
}

a {
  color: var(--color-fondo);
  text-decoration: none;
}

.card {
  background: var(--color-fondo-tarjeta);
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
}