/* Generated by build.mjs — do not edit by hand */
/* ============================================================
   KILO — Athlete Design System
   colors_and_type.css
   ============================================================ */

:root {
  /* ========================================================
     PRIMITIVE COLORS — ten-step scales
     ======================================================== */

  /* Blue (primary brand / light cyan scale) */
  --blue-01: #E8F6FC;
  --blue-02: #C5E9F8;
  --blue-03: #9CDAF4;
  --blue-04: #72CBF0;
  --blue-05: #48BDFC;   /* accent-tertiary */
  --blue-06: #15B8FF;   /* logo accent cyan */
  --blue-07: #0AA3E5;
  --blue-08: #038DCD;   /* cta-primary-bg-hover */
  --blue-09: #0379B1;
  --blue-10: #005595;

  /* Dark Blue — signature primary */
  --dark-blue-01: #ECF1F9;
  --dark-blue-02: #D0DAEB;
  --dark-blue-03: #B4C2DC;
  --dark-blue-04: #8FA3C7;
  --dark-blue-05: #5070A6;
  --dark-blue-06: #2A5090;
  --dark-blue-07: #0F3B7A;
  --dark-blue-08: #082B6D;   /* primary button bg, headings, icons */
  --dark-blue-09: #05204F;
  --dark-blue-10: #03153A;

  /* Vivid Blue (accent / gradient anchor) */
  --vivid-blue-01: #EAE9FC;
  --vivid-blue-02: #CFCCF8;
  --vivid-blue-03: #B0ACF2;
  --vivid-blue-04: #8F8AE9;
  --vivid-blue-05: #6E67E0;
  --vivid-blue-06: #4E44DB;   /* accent-primary */
  --vivid-blue-07: #3E33C2;
  --vivid-blue-08: #2F26A6;
  --vivid-blue-09: #211B83;
  --vivid-blue-10: #15106B;

  /* Vivid Cyan (accent / gradient terminus) */
  --vivid-cyan-01: #EAFBF8;
  --vivid-cyan-02: #C9F5EE;
  --vivid-cyan-03: #A2EDE0;
  --vivid-cyan-04: #6EDCCA;
  --vivid-cyan-05: #43D0BA;
  --vivid-cyan-06: #20CFB0;
  --vivid-cyan-07: #15AC93;   /* accent-secondary */
  --vivid-cyan-08: #0E8C78;
  --vivid-cyan-09: #086B5C;
  --vivid-cyan-10: #054A40;

  /* Grey — neutral scale */
  --grey-01: #FFFFFF;
  --grey-02: #F7F8FA;
  --grey-03: #EDF1F5;
  --grey-04: #D0D2D5;
  --grey-05: #959596;
  --grey-06: #707073;
  --grey-07: #59595C;
  --grey-08: #464647;
  --grey-09: #2B2B2C;
  --grey-10: #111112;

  /* Red / Orange / Yellow / Green (semantic primitives) */
  --red-01: #FAEBEB;
  --red-04: #F38B8B;
  --red-06: #EA4E4E;
  --red-07: #D80027;
  --red-09: #A2001D;

  --orange-01: #FDF2E5;
  --orange-06: #DF8936;
  --orange-08: #B26A1F;

  --yellow-01: #FFF8E0;
  --yellow-05: #FFDA44;
  --yellow-08: #C49B00;

  --green-01: #EEF6F0;
  --green-06: #6DA544;
  --green-07: #3CB553;
  --green-09: #496E2D;

  /* ========================================================
     SEMANTIC TOKENS
     ======================================================== */

  /* Text */
  --text-primary:    var(--grey-10);
  --text-secondary:  var(--grey-07);
  --text-tertiary:   var(--grey-05);
  --text-quaternary: var(--dark-blue-08);
  --text-error:      var(--red-06);
  --text-success:    var(--green-07);
  --text-warning:    var(--orange-06);
  --text-disabled:   var(--grey-04);
  --text-inverse:    var(--grey-01);

  /* Backgrounds */
  --bg-page:       var(--grey-02);
  --bg-surface:    var(--grey-01);
  --bg-subtle:     var(--grey-03);
  --bg-muted:      var(--grey-04);
  --bg-inverse:    var(--dark-blue-08);

  /* Borders */
  --border-primary:   var(--grey-04);
  --border-secondary: var(--grey-05);
  --border-tertiary:  var(--grey-04);
  --border-success:   var(--green-07);
  --border-error:     var(--red-06);
  --border-warning:   var(--orange-06);
  --border-disabled:  var(--grey-04);
  --border-focus:     var(--dark-blue-08);

  /* CTA — Primary */
  --cta-primary-bg:          var(--dark-blue-08);
  --cta-primary-bg-hover:    var(--blue-08);
  --cta-primary-text:        var(--grey-01);
  --cta-primary-border:      transparent;
  --cta-primary-border-focus:var(--dark-blue-08);

  /* CTA — Secondary */
  --cta-secondary-bg:        var(--grey-01);
  --cta-secondary-bg-hover:  var(--blue-01);
  --cta-secondary-text:      var(--dark-blue-08);
  --cta-secondary-border:    var(--dark-blue-08);

  /* Accent */
  --accent-primary:   var(--vivid-blue-06);
  --accent-secondary: var(--vivid-cyan-07);
  --accent-tertiary:  var(--blue-05);

  /* Brand signature gradients */
  --gradient-primary:     linear-gradient(180deg, #4E44DB 0%, #20CFB0 92%);
  --gradient-tertiary:    linear-gradient(180deg, #082B6D 0%, #038DCD 97%);
  --gradient-quaternary:  linear-gradient(180deg, #082B6D 0%, #48BDFC 100%);
  --gradient-fifth:       linear-gradient(180deg, #0E8C78 0%, #20CFB0 100%);
  --gradient-sixth:       linear-gradient(180deg, #20CFB0 0%, #A2EDE0 100%);
  --gradient-seventh:     linear-gradient(180deg, #A2EDE0 0%, #EAFBF8 100%);

  /* ========================================================
     TYPOGRAPHY
     ======================================================== */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --h1-size: 46px; --h1-weight: 700; --h1-line: 100%;
  --h2-size: 36px; --h2-weight: 700; --h2-line: 40px;
  --h3-size: 24px; --h3-weight: 700; --h3-line: 100%;
  --h4-size: 20px; --h4-weight: 700; --h4-line: 100%;
  --h5-size: 18px; --h5-weight: 600; --h5-line: 120%;
  --h6-size: 16px; --h6-weight: 600; --h6-line: 120%;

  --subhead-lg-size: 20px; --subhead-lg-weight: 500;
  --subhead-md-size: 18px; --subhead-md-weight: 500;
  --subhead-sm-size: 14px; --subhead-sm-weight: 500;

  --body-lg-size:   18px; --body-lg-line: 150%;
  --body-base-size: 16px; --body-base-line: 150%;
  --body-sm-size:   14px; --body-sm-line: 150%;
  --body-xs-size:   12px; --body-xs-line: 150%;

  --btn-label-size: 16px;

  /* ========================================================
     SHADOWS
     ======================================================== */
  --shadow-2xs: 0 1px 0 0 rgba(0,0,0,0.05);
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.10);
  --shadow-focus-error: 0 0 0 3px rgba(234,78,78,0.20);
  --shadow-focus:       0 0 0 3px rgba(8,43,109,0.20);

  /* ========================================================
     RADII
     ======================================================== */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-5xl: 56px;
  --radius-full: 9999px;

  /* ========================================================
     SPACING
     ======================================================== */
  --sp-px:   1px;
  --sp-0-5:  2px;
  --sp-1:    4px;
  --sp-1-5:  6px;
  --sp-2:    8px;
  --sp-2-5:  10px;
  --sp-3:    12px;
  --sp-3-5:  14px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-14:   56px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-family: var(--font-sans); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line); letter-spacing: -0.02em; color: var(--text-primary); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line); letter-spacing: -0.0208em; color: var(--text-primary); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-line); color: var(--text-primary); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line); color: var(--text-primary); margin: 0; }
h5, .h5 { font-family: var(--font-sans); font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-line); color: var(--text-primary); margin: 0; }
h6, .h6 { font-family: var(--font-sans); font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: var(--h6-line); color: var(--text-primary); margin: 0; }

p, .body { font-size: var(--body-base-size); line-height: var(--body-base-line); color: var(--text-primary); margin: 0; }
.body-sm  { font-size: var(--body-sm-size);  line-height: var(--body-sm-line); }
.body-xs  { font-size: var(--body-xs-size);  line-height: var(--body-xs-line); }
.subhead  { font-size: var(--subhead-md-size); font-weight: 500; color: var(--text-secondary); }
.caption  { font-size: var(--body-xs-size); color: var(--text-tertiary); }

code, kbd, pre { font-family: var(--font-mono); font-size: 14px; }

a {
  color: var(--dark-blue-08);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--blue-08); text-decoration: underline; }

::selection { background: var(--blue-02); color: var(--text-primary); }

*, *::before, *::after { box-sizing: border-box; }


    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--grey-02); overflow-x: hidden; }
    a { color: var(--dark-blue-08); }
    a:hover { color: var(--blue-08); }
    @keyframes floatY { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
    @keyframes floatY2 { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
    @keyframes glowDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.08); } }
    @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
    @keyframes navIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    details > summary { list-style: none; cursor: pointer; }
    details > summary::-webkit-details-marker { display: none; }
    details[open] [data-chev] { transform: rotate(45deg); }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
  
/* hover states (from design style-hover attributes) */
.hv0:hover { color: var(--dark-blue-08) !important; background-size: 100% 2px !important; }
.hv1:hover { background: var(--cta-primary-bg-hover) !important; transform: translateY(-1px) !important; color: var(--cta-primary-text) !important; }
.hv2:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 40px color-mix(in srgb, var(--blue-06) 38%, transparent) !important; background: var(--blue-01) !important; color: var(--dark-blue-08) !important; }
.hv3:hover { background: color-mix(in srgb, var(--grey-01) 8%, transparent) !important; border-color: color-mix(in srgb, var(--grey-01) 45%, transparent) !important; color: var(--grey-01) !important; }
.hv4:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important; }
.hv5:hover { transform: translateY(-2px) !important; background: var(--blue-01) !important; color: var(--dark-blue-08) !important; }
.hv6:hover { color: var(--blue-08) !important; }
.hv7:hover { box-shadow: var(--shadow-lg) !important; }
.hv8:hover { transform: translateY(-5px) !important; border-color: color-mix(in srgb, var(--grey-01) 24%, transparent) !important; }
.hv9:hover { background: color-mix(in srgb, var(--grey-01) 9%, transparent) !important; border-color: color-mix(in srgb, var(--grey-01) 50%, transparent) !important; color: var(--grey-01) !important; }
.hv10:hover { transform: translateY(-6px) !important; }
.hv11:hover { background: color-mix(in srgb, var(--grey-01) 9%, transparent) !important; color: var(--grey-01) !important; }
.hv12:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 60px color-mix(in srgb, var(--blue-06) 45%, transparent) !important; background: var(--blue-01) !important; color: var(--dark-blue-08) !important; }
.hv13:hover { color: var(--grey-01) !important; transform: translateX(6px) !important; }
.hv14:hover { background: var(--grey-01) !important; color: var(--dark-blue-09) !important; transform: translateY(-3px) !important; }
.hv15:hover { transform: scale(1.08) !important; box-shadow: 0 14px 38px color-mix(in srgb, var(--green-09) 55%, transparent) !important; color: var(--grey-01) !important; }

/* ── Mobile navigation ── */
.menu-btn { display: none; margin-left: 4px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--grey-03); background: var(--grey-01); color: var(--dark-blue-08); align-items: center; justify-content: center; cursor: pointer; }
.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 10px 16px 18px; background: color-mix(in srgb, var(--grey-01) 96%, transparent); border-top: 1px solid var(--grey-03); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 8px; font-size: 15px; font-weight: 600; color: var(--grey-09); text-decoration: none; border-bottom: 1px solid var(--grey-03); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu-cta { color: var(--dark-blue-08) !important; font-weight: 700 !important; }

/* ── Responsive overrides (the design ships desktop-first inline styles) ── */
.g-hero > * { min-width: 0; }
@media (max-width: 1120px) {
  .g-hero { grid-template-columns: 1fr !important; gap: 56px !important; }
  #inicio h1 { font-size: clamp(36px, 6.4vw, 52px) !important; }
}
@media (max-width: 920px) {
  .nav-links { display: none !important; }
  .menu-btn { display: inline-flex; }
  .g-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .g-4 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 44px !important; }
  .proc-line { display: none !important; }
  .g-planes { grid-template-columns: 1fr !important; max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
  .g-foot { grid-template-columns: 1fr !important; gap: 40px !important; }
  .comp-wrap { overflow-x: auto !important; }
  .g-comp { min-width: 720px; }
}
@media (max-width: 760px) {
  section[data-screen-label] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  #contacto { padding-bottom: 0 !important; }
  #inicio { padding: 116px 20px 68px !important; }
  #inicio h1 { font-size: clamp(32px, 8.6vw, 42px) !important; }
  section h2 { font-size: clamp(28px, 7.2vw, 38px) !important; }
  #contacto h2 { font-size: clamp(30px, 8vw, 40px) !important; }
  .g-2, .g-3, .g-stats, .g-4 { grid-template-columns: 1fr !important; }
  .g-stats > div { border-right: none !important; border-bottom: 1px solid var(--grey-03); padding-bottom: 18px; }
  .g-stats > div:last-child { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 620px) {
  .m-side { display: none !important; }
  .m-grid { grid-template-columns: 1fr !important; }
  .m-grid > div:last-child { display: none !important; }
}
@media (max-width: 520px) {
  .nav-cta { display: none !important; }
}