/* ============================================
   TOKENS GLOBALES — Solana SRL
   ============================================ */

:root {
  /* --- Color --- */
  --c-teal:       #137A81;   /* acento / marca */
  --c-teal-deep:  #0C3A43;   /* fondos oscuros, footer */
  --c-ink:        #1A1A1A;   /* texto principal */
  --c-ink-soft:   #757575;   /* texto secundario, metadatos */
  --c-line:       #E0E0E0;   /* bordes, separadores */
  --c-bg:         #FFFFFF;
  --c-bg-alt:     #F7F8F8;   /* derivado, secciones alternas */

  /* Estados derivados */
  --c-teal-hover: #0F636A;
  --c-teal-tint:  #E7F1F2;   /* fondo suave de acento */
  --c-sand:       #EFD9A6;   /* acento calido sobre fondos teal */
  --c-footer:     #101413;   /* casi negro, solo para el pie */

  /* --- Tipografia --- */
  --f-base: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Escala fluida. El valor max coincide con Framer en desktop. */
  --fs-h1:   clamp(2.5rem,  1.4rem  + 4.7vw, 4.875rem);  /* -> 78px */
  --fs-h2:   clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);    /* -> 40px */
  --fs-h4:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);   /* -> 24px */
  --fs-h3:   clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* -> 20px */
  --fs-body: clamp(1rem,    0.95rem + 0.22vw, 1.125rem); /* -> 18px */
  --fs-nav:  1rem;                                        /* 16px fijo */
  --fs-small: 0.875rem;

  --lh-tight: 1.06;   /* h1 */
  --lh-head:  1.2;    /* h2-h4 */
  --lh-body:  1.6;

  /* --- Espaciado --- escala de 4px */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-section: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* --- Layout --- */
  --wrap:      1280px;
  --wrap-text: 68ch;
  --gutter:    clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --header-h:  80px;
  --radius:      4px;   /* botones, elementos pequenos */
  --radius-card: 8px;   /* tarjetas */

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  280ms;
}

/* --- Tipografia auto-alojada ---
   Colocar los .woff2 en assets/fonts/.
   Variable font: un solo archivo cubre 400-700. */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Reset minimo --- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: var(--wrap-text); }

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

.section { padding-block: var(--sp-section); }
.section--alt  { background: var(--c-bg-alt); }
.section--dark { background: var(--c-teal-deep); color: #fff; }

.link-accent {
  color: var(--c-teal);
  transition: color var(--dur) var(--ease);
}
.link-accent:hover { color: var(--c-teal-hover); }

/* --- Accesibilidad --- */
:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 999;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-teal-deep);
  color: #fff;
}
.skip-link:focus { top: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}