:root {
  /* Colores de marca (brand board, no modificar) */
  --color-carbon: #2B2E33;
  --color-piedra: #7A7E82;
  --color-tostado: #B5A179;
  --color-crema: #F2EDE4;

  /* Roles: usar estos en los componentes, nunca los HEX directos */
  --bg: var(--color-crema);
  --bg-inverso: var(--color-carbon);
  --texto: var(--color-carbon);
  --texto-inverso: var(--color-crema);
  --texto-suave: color-mix(in srgb, var(--color-carbon) 78%, var(--color-crema));
  --texto-inverso-suave: color-mix(in srgb, var(--color-crema) 82%, var(--color-carbon));
  --acento: var(--color-tostado);
  --bg-papel: color-mix(in srgb, var(--color-crema) 55%, white);
  --bg-campo: color-mix(in srgb, var(--color-crema) 30%, white);
  --linea: color-mix(in srgb, var(--color-piedra) 40%, transparent);
  --foco: var(--color-carbon);

  /* Tipografía */
  --font-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --font-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica (razón 1.25, fluida entre 360px y 1280px) */
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-lg: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-precio: clamp(2.75rem, 2rem + 3vw, 4.25rem);

  --lh-texto: 1.6;
  --lh-titulo: 1.12;
  --medida: 68ch;           /* largo máximo de línea del texto */

  /* Espacios (base 8px) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;

  --contenedor: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radio-sm: 4px;
  --radio-md: 10px;
  --alto-cabecera: 4.25rem;

  /* Animación */
  --ease-salida: cubic-bezier(.2, .8, .2, 1);
  --ease-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --dur-corta: 200ms;
  --dur-media: 600ms;
  --dur-larga: 1200ms;

  /* Rosetas del pelaje del gato andino, en tostado (fondo de secciones oscuras) */
  --manchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cdefs%3E%3Cg id='r' fill='%23B5A179'%3E%3Cellipse cx='12' cy='4.6' rx='3.4' ry='2.1'/%3E%3Cellipse cx='19' cy='9.8' rx='3.1' ry='2' transform='rotate(72 19 9.8)'/%3E%3Cellipse cx='16.4' cy='18.2' rx='3.3' ry='2' transform='rotate(144 16.4 18.2)'/%3E%3Cellipse cx='7.6' cy='18.2' rx='2.9' ry='1.9' transform='rotate(216 7.6 18.2)'/%3E%3Cellipse cx='5' cy='9.8' rx='3.2' ry='2' transform='rotate(288 5 9.8)'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23r' transform='translate(18 26) scale(1.7)'/%3E%3Cuse href='%23r' transform='translate(140 8) scale(1.1) rotate(20 12 12)'/%3E%3Cuse href='%23r' transform='translate(176 120) scale(2) rotate(-15 12 12)'/%3E%3Cuse href='%23r' transform='translate(64 150) scale(1.35) rotate(40 12 12)'/%3E%3Cuse href='%23r' transform='translate(8 214) scale(0.9)'/%3E%3Cuse href='%23r' transform='translate(118 216) scale(1.2) rotate(-35 12 12)'/%3E%3C/svg%3E");
}
