/* ============================================================
   SailingDevs · Núcleo del sistema de diseño
   Tokens, reset, tipografía y superficies
   ============================================================ */

:root {
  /* --- Neutros --- */
  --ink: #05070f;
  --ink-soft: #141a29;
  --gray-700: #343c53;
  --gray-500: #545d77;
  --gray-400: #656d85;   /* 5.1:1 sobre blanco y 4.9:1 sobre --paper */
  --gray-300: #aeb6c8;   /* solo trazos y bordes, nunca texto */
  --gray-200: #dfe4ee;
  --gray-100: #eff2f8;
  --paper: #f7f9fc;
  --white: #ffffff;

  /* --- Azul eléctrico (marca) --- */
  --blue-700: #0032a8;
  --blue-600: #0a4fff;
  --blue-500: #2f7bff;
  --blue-400: #5c9bff;
  --blue-200: #b9d2ff;
  --blue-50: #eaf1ff;

  /* --- Acento de apoyo --- */
  --cyan: #00a8cc;

  /* --- Vidrio líquido: solo para superficies que flotan sobre otra cosa --- */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .8);
  --glass-blur: saturate(170%) blur(20px);

  /* --- Elevación: neutra y con desplazamiento, nunca halos de color --- */
  --shadow-1: 0 1px 2px rgba(14, 16, 22, .07);
  --shadow-2: 0 8px 20px -10px rgba(14, 16, 22, .24), 0 2px 4px rgba(14, 16, 22, .05);
  --shadow-3: 0 22px 44px -24px rgba(14, 16, 22, .32), 0 4px 10px rgba(14, 16, 22, .07);

  /* --- Radios --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* --- Ritmo --- */
  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1180px;
  --section-y: clamp(84px, 11vw, 148px);

  /* --- Curvas --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--gray-300) transparent;
}

body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--gray-500);
  background: var(--white);
  caret-color: var(--blue-600);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--blue-600); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; border: 3px solid var(--white); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: "Sora", "Manrope", sans-serif;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.7rem, 6.2vw, 4.7rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 1rem + .7vw, 1.5rem); letter-spacing: -.025em; line-height: 1.25; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--gray-500);
  line-height: 1.58;
  max-width: 66ch;
}

/* Énfasis: color de marca. Sin degradados sobre el texto. */
.accent { color: var(--blue-600); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

.section__head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 76px); }
.section__head .lead { margin-top: 20px; }

/* ---------- Vidrio líquido (superficies que flotan sobre otra cosa) ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* reflejo especular del borde, como el cristal de iOS */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 45%, rgba(10, 79, 255, .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Superficie sólida (contenido que no flota) ---------- */
.panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
}

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.btn:active { transform: translateY(0) scale(.99); }

.btn--primary { --btn-bg: var(--blue-600); box-shadow: var(--shadow-2); }
.btn--primary:hover { --btn-bg: #0a45e0; }

.btn--ghost {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  border: 1px solid var(--gray-200);
}
.btn--ghost:hover { border-color: var(--blue-200); background: var(--blue-50); }

.btn svg { flex: none; }

/* ---------- Etiquetas de tecnología ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------- Entrada en escena ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}