@charset "UTF-8";

:root {
  --blue: #0d6efd;
  --blue-navy: #000080;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #d63384;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #198754;
  --teal: #1abc9c;
  --cyan: #0dcaf0;
  --black: #000;
  --white: #fff;

  --gray: #6c757d;
  --gray-dark: #0c161f;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  --primary: var(--blue-navy);
  --secondary: var(--gray-dark);
  --success: var(--green);
  --info: var(--cyan);
  --warning: var(--yellow);
  --danger: var(--red);
  --light: var(--gray-100);
  --dark: var(--gray-900);

  --rgb-primary: 111, 66, 193;
  --rgb-secondary: 44, 62, 80;
  --rgb-success: 25, 135, 84;
  --rgb-info: 13, 202, 240;
  --rgb-warning: 255, 193, 7;
  --rgb-danger: 220, 53, 69;
  --rgb-light: 248, 249, 250;
  --rgb-dark: 33, 37, 41;
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;

  --font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;

  --gradient: linear-gradient(180deg, rgba(var(--rgb-white), 0.15), rgba(var(--rgb-white), 0));

  --body-color: var(--dark);
  --body-color-rgb: var(--rgb-dark);
  --body-font-family: var(--font-sans-serif);
  --body-font-size: 1rem;
  --body-font-weight: var(--font-weight-400);
  --body-line-height: 1.5;
  --body-background: var(--white);
  --body-background-rgb: var(--rgb-white);

  --border-width: 0.125rem;
  --border-style: solid;
  --border-color: var(--gray-300);
  --border-color-translucent: rgba(var(--rgb-black), 0.175);
  --border-radius: 0.5rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 2rem;
  --border-radius-pill: 50rem;

  --link-color: var(--black);
  --link-hover-color: var(--primary);
  --link-disabled-color: var(--gray);

  --code-color: var(--pink);
  --highlight-bg: #fff3cd;
  --opacity: 1;

  --gutter-x: 1.5rem;
  --gutter-y: 0;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;

}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
  height: 100%;
  scroll-padding-top: calc(4.5rem - 1px);
}

body {
  font-display: swap;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  background-color: var(--body-background);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img,
picture,
source,
video {
  max-width: 100%;
  height: auto;
}

/* ===== TIPOGRAFÍA ESENCIAL ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-700);
  line-height: 1.2;
}

/*
h1 {  font-size: calc(1.375rem + 1.5vw); }
h2 {  font-size: calc(1.325rem + 0.9vw); }
h3 {  font-size: calc(1.3rem + 0.6vw); }
h4 {  font-size: calc(1.275rem + 0.3vw); }
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
}
  */