/* ================================================================
   IIAS — Sistema de diseño
   ================================================================ */

:root {
  /* Colors */
  --navy-900: #061a30;
  --navy-800: #0a2540;
  --navy-700: #143055;
  --navy-600: #1f4274;
  --navy-500: #2b5a96;
  --navy-100: #e7edf5;
  --navy-50:  #f3f6fa;

  --orange-600: #d8591a;
  --orange-500: #f26722;
  --orange-400: #ff8848;
  --orange-100: #fde6d8;
  --orange-50:  #fef5ee;

  --warm-white: #faf8f4;
  --warm-50:    #f5f2eb;
  --warm-100:   #ebe6db;
  --warm-200:   #d9d2c2;

  --ink-900: #0c1320;
  --ink-700: #2a3445;
  --ink-500: #5b6678;
  --ink-400: #8590a0;
  --ink-300: #b7bfcc;

  --border: #e3e0d6;
  --border-strong: #c8c3b4;

  /* Type */
  --f-display: "Bricolage Grotesque", "Times New Roman", serif;
  --f-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,37,64,.04), 0 1px 3px rgba(10,37,64,.06);
  --shadow-md: 0 4px 12px rgba(10,37,64,.06), 0 10px 28px rgba(10,37,64,.06);
  --shadow-lg: 0 18px 60px rgba(10,37,64,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--f-sans);
  background: var(--warm-white);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

img, svg { display: block; max-width: 100%; }

/* ---- Layout container ---- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* ---- Display type ---- */
.display {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-500);
  font-weight: 500;
}
.eyebrow-ink {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  border: none;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--orange-500);
  color: white;
}
.btn-primary:hover { background: var(--orange-600); }
.btn-dark {
  background: var(--navy-800);
  color: white;
}
.btn-dark:hover { background: var(--navy-700); }
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  padding: 14px 18px;
}
.btn-ghost:hover { background: var(--warm-50); }
.btn-outline {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { background: var(--warm-50); }
.btn-arrow::after {
  content: "→";
  font-family: var(--f-sans);
  font-weight: 500;
  transition: transform .2s ease;
}
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---- Section ---- */
section { position: relative; }
.section-pad { padding: 120px 0; }
.section-pad-sm { padding: 80px 0; }
@media (max-width: 720px) {
  .section-pad { padding: 80px 0; }
  .section-pad-sm { padding: 56px 0; }
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}

/* ---- Decorations ---- */
.hair { height: 1px; background: var(--border); width: 100%; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); display: inline-block; }

/* Section index label */
.section-index {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.section-index .num {
  font-weight: 500;
  color: var(--orange-500);
}
.section-index .bar {
  flex: 0 0 32px;
  height: 1px;
  background: var(--border-strong);
}

/* Subtle striped placeholder */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--warm-50),
      var(--warm-50) 10px,
      var(--warm-100) 10px,
      var(--warm-100) 20px
    );
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Pill / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--warm-white);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700);
}
.pill .dot { width: 6px; height: 6px; }

/* Card */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}

/* Focus states */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
}

/* ================================================================
   MOTION — sistema de movimiento (entradas, scroll reveal, hover)
   ================================================================ */

/* Curva de animación única para todo el sitio */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --motion-dur: .72s;
}

/* Card: elevación suave al pasar el mouse */
.card {
  transition:
    transform .28s var(--ease-out),
    box-shadow .28s ease,
    border-color .28s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: cada sección entra suavemente al aparecer en pantalla */
  main > section.reveal-sec {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--motion-dur) var(--ease-out),
      transform var(--motion-dur) var(--ease-out);
    will-change: opacity, transform;
  }
  main > section.reveal-sec.is-in {
    opacity: 1;
    transform: none;
  }

  /* Entrada del hero escalonada al cargar la página */
  [data-hero] {
    opacity: 0;
    transform: translateY(22px);
  }
  body.hero-ready [data-hero] {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--motion-dur) var(--ease-out),
      transform var(--motion-dur) var(--ease-out);
    transition-delay: var(--hero-delay, 0s);
  }
}

/* Respaldo: pase lo que pase, el contenido del hero queda visible.
   Se aplica después de que terminan las entradas (o de inmediato si
   el navegador no animó, p. ej. pestaña en segundo plano). */
body.motion-settled [data-hero] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* utility */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.text-mute { color: var(--ink-500); }
.text-orange { color: var(--orange-500); }
.text-navy { color: var(--navy-800); }