/*
 * Kit base de Pegaso: colores, tipografía, radios, sombras y botones.
 * Sale del «Sistema visual» de Figma (Pegaso web, nodo 8:26 «Fundamentos»).
 * Las secciones usan estas variables y clases en vez de repetir valores.
 */

:root {
  /* Azules (700 es el azul de marca) */
  --pegaso-blue-50: #eaf1f9;
  --pegaso-blue-100: #d8e5f3;
  --pegaso-blue-200: #b9cfe9;
  --pegaso-blue-300: #8fb0da;
  --pegaso-blue-400: #6590c7;
  --pegaso-blue-500: #4472ac;
  --pegaso-blue-600: #335c8f;
  --pegaso-blue-700: #284a73;
  --pegaso-blue-800: #1e3a5d;
  --pegaso-blue-900: #152b46;
  --pegaso-blue-950: #0c1a2d;

  /* Superficies y acento */
  --pegaso-bg-page: #f3f7fc;
  --pegaso-surface-white: #ffffff;
  --pegaso-accent-celeste: #74c7ff;
  --pegaso-accent-celeste-soft: #ddf1ff;
  --pegaso-state-success: #1fa971;

  /* Texto y bordes */
  --pegaso-text-primary: #0c1a2d;
  --pegaso-text-secondary: #5b6c84;
  --pegaso-text-tertiary: #8c9aae;
  --pegaso-text-on-dark: #ffffff;
  --pegaso-border-default: #dfe7f1;
  --pegaso-border-strong: #c5d3e4;

  /* Radios */
  --pegaso-radio-pildora: 999px;
  --pegaso-radio-xl: 28px;
  --pegaso-radio-l: 20px;
  --pegaso-radio-m: 14px;

  /* Sombras */
  --pegaso-sombra-soft: 0 6px 20px 0 rgba(12, 26, 45, 0.06);
  --pegaso-sombra-float: 0 14px 36px 0 rgba(12, 26, 45, 0.12);

  /* Tipografía: Plus Jakarta Sans, con fuentes del sistema si no está instalada */
  --pegaso-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pegaso-tipo-display-xl: 600 68px/1.02 var(--pegaso-fuente);
  --pegaso-tipo-display-l: 600 52px/1.05 var(--pegaso-fuente);
  --pegaso-tipo-display-m: 600 38px/1.08 var(--pegaso-fuente);
  --pegaso-tipo-h1: 600 40px/1.1 var(--pegaso-fuente);
  --pegaso-tipo-h2: 600 28px/1.15 var(--pegaso-fuente);
  --pegaso-tipo-h3: 600 20px/1.25 var(--pegaso-fuente);
  --pegaso-tipo-body-l: 400 17px/1.55 var(--pegaso-fuente);
  --pegaso-tipo-body-m: 400 15px/1.5 var(--pegaso-fuente);
  --pegaso-tipo-body-s: 400 13px/1.45 var(--pegaso-fuente);
  --pegaso-tipo-label-l: 600 15px/1.2 var(--pegaso-fuente);
  --pegaso-tipo-label-m: 600 13px/1.2 var(--pegaso-fuente);
  --pegaso-tipo-label-s: 500 12px/1.2 var(--pegaso-fuente);
  --pegaso-tipo-price-l: 700 30px/1.1 var(--pegaso-fuente);
  --pegaso-tipo-caption: 600 11px/1.3 var(--pegaso-fuente);
}

/* Escala tipográfica */
.texto-display-xl { font: var(--pegaso-tipo-display-xl); letter-spacing: -0.035em; }
.texto-display-l { font: var(--pegaso-tipo-display-l); letter-spacing: -0.03em; }
.texto-display-m { font: var(--pegaso-tipo-display-m); letter-spacing: -0.025em; }
.texto-h1 { font: var(--pegaso-tipo-h1); letter-spacing: -0.02em; }
.texto-h2 { font: var(--pegaso-tipo-h2); letter-spacing: -0.015em; }
.texto-h3 { font: var(--pegaso-tipo-h3); letter-spacing: -0.01em; }
.texto-body-l { font: var(--pegaso-tipo-body-l); }
.texto-body-m { font: var(--pegaso-tipo-body-m); }
.texto-body-s { font: var(--pegaso-tipo-body-s); }
.texto-label-l { font: var(--pegaso-tipo-label-l); }
.texto-label-m { font: var(--pegaso-tipo-label-m); }
.texto-label-s { font: var(--pegaso-tipo-label-s); }
.texto-price-l { font: var(--pegaso-tipo-price-l); letter-spacing: -0.02em; }
.texto-caption { font: var(--pegaso-tipo-caption); letter-spacing: 0.08em; text-transform: uppercase; }

/*
 * Botones. Sirven en <a> y en <button>:
 *   <a class="boton boton--primary">Agregar al carrito</a>
 * Con ícono adelante: <span class="boton__icono">…</span> antes del texto.
 * Con círculo al final (como «Ver productos» y «Explorar»): sumar .boton--con-circulo
 * y poner el ícono dentro de <span class="boton__circulo">…</span> después del texto.
 */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0;
  padding: 15px 25px;
  border: 1px solid transparent;
  border-radius: var(--pegaso-radio-pildora);
  font: var(--pegaso-tipo-label-l);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.boton:focus-visible {
  outline: 2px solid var(--pegaso-blue-500);
  outline-offset: 2px;
}
.boton__icono {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.boton--con-circulo {
  gap: 14px;
  padding: 5px 5px 5px 23px;
}
.boton__circulo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--pegaso-radio-pildora);
  background: var(--pegaso-surface-white);
}

.boton--primary {
  background: var(--pegaso-blue-700);
  color: var(--pegaso-text-on-dark);
}
.boton--soft {
  background: var(--pegaso-blue-50);
  color: var(--pegaso-text-primary);
}
.boton--dark {
  background: var(--pegaso-blue-950);
  color: var(--pegaso-text-on-dark);
}
.boton--dark .boton__circulo {
  background: var(--pegaso-accent-celeste);
}
.boton--outline,
.boton--accent {
  padding: 10px 17px;
  font: var(--pegaso-tipo-label-m);
  color: var(--pegaso-text-primary);
}
.boton--outline {
  background: transparent;
  border-color: var(--pegaso-border-strong);
}
.boton--accent {
  background: var(--pegaso-accent-celeste);
}