/* ============================================================
   Interlaken® · Web pública · Base CSS
   Reset moderno + tipografía base + layout helpers + a11y.
   Producido en Sprint 2.B del rediseño · 25 abril 2026.

   Carga DESPUÉS de tokens.css y ANTES de cualquier CSS
   de componente o de página.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1 · Reset moderno
   Inspirado en Andy Bell's modern reset (CSS-Tricks, 2020) +
   Josh Comeau's custom CSS reset (joshwcomeau.com, 2021).
   Mínimo lo necesario, sin agresividad.
   ──────────────────────────────────────────────────────────── */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--ilk-font-sans);
  font-weight: var(--ilk-fw-regular);
  font-size: var(--ilk-fs-base);
  line-height: var(--ilk-lh-normal);
  color: var(--ilk-fg-1);
  background: var(--ilk-bg-1);
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* Norma editorial · sin división silábica automática
   · `hyphens: none` desactiva el guionado del navegador (que con lang="es" partía
     palabras como "transfor-mación" entre líneas — fatal para peso editorial).
   · `overflow-wrap: normal` deja que la palabra completa pase al siguiente renglón
     en lugar de romperse. Ningún término de marca o palabra larga del español
     se parte sin autorización explícita.
   · Para casos excepcionales (URLs largas, hashes, identificadores) usar la clase
     utilitaria `.ilk-text-break-anywhere`.
   Lección: 26 abril 2026 · Álvaro identificó el quiebre de "transformación" en
   el hero del Home como problema sistémico de legibilidad. */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Títulos · text-wrap balance reparte las líneas equilibradamente.
   Soporte: Chrome 114+ · Safari 17.5+ · Firefox 121+. En navegadores sin soporte,
   degrada al wrap por defecto sin romper nada. */
h1, h2, h3, .ilk-display, .ilk-h1, .ilk-h2, .ilk-h3 {
  text-wrap: balance;
}

/* Párrafos · text-wrap pretty evita "huérfanos" (palabras sueltas en última línea)
   y optimiza la lectura. Mismo soporte; degrada graciosamente. */
p, .ilk-lead {
  text-wrap: pretty;
}

/* Escape · permitir ruptura solo donde el contenido lo exige (URLs, tokens). */
.ilk-text-break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ────────────────────────────────────────────────────────────
   2 · Tipografía base
   ──────────────────────────────────────────────────────────── */

.ilk-display {
  font-family: var(--ilk-font-sans);
  font-weight: var(--ilk-fw-bold);
  font-size: var(--ilk-fs-fluid-display);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
  color: var(--ilk-fg-1);
}

.ilk-h1 {
  font-weight: var(--ilk-fw-bold);
  font-size: var(--ilk-fs-fluid-h1);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
}

.ilk-h2 {
  font-weight: var(--ilk-fw-bold);
  font-size: var(--ilk-fs-fluid-h2);
  line-height: var(--ilk-lh-snug);
  letter-spacing: var(--ilk-tracking-snug);
}

.ilk-h3 {
  font-weight: var(--ilk-fw-semibold);
  font-size: var(--ilk-fs-fluid-h3);
  line-height: var(--ilk-lh-snug);
}

.ilk-h4 {
  font-weight: var(--ilk-fw-semibold);
  font-size: var(--ilk-fs-lg);
  line-height: var(--ilk-lh-snug);
}

.ilk-eyebrow {
  font-weight: var(--ilk-fw-semibold);
  font-size: var(--ilk-fs-sm);
  letter-spacing: var(--ilk-tracking-wide);
  color: var(--ilk-orange);
  /* Sin text-transform: uppercase. Interlaken® rechaza mayúsculas sostenidas — */
  /* el énfasis viene de peso, color y letter-spacing, no de gritar. */
}

.ilk-lead {
  font-weight: var(--ilk-fw-light);
  font-size: var(--ilk-fs-fluid-lead);
  line-height: var(--ilk-lh-relaxed);
  color: var(--ilk-fg-2);
}

.ilk-p {
  font-weight: var(--ilk-fw-regular);
  font-size: var(--ilk-fs-base);
  line-height: var(--ilk-lh-normal);
  color: var(--ilk-fg-1);
}

.ilk-small {
  font-size: var(--ilk-fs-sm);
  color: var(--ilk-fg-2);
}

.ilk-caption {
  font-size: var(--ilk-fs-xs);
  color: var(--ilk-fg-3);
  letter-spacing: var(--ilk-tracking-normal);
  font-weight: var(--ilk-fw-semibold);
  /* Sin text-transform: uppercase. Ver regla §3.5 en assets/css/README.md */
}

.ilk-mono {
  font-family: var(--ilk-font-mono);
  font-size: var(--ilk-fs-sm);
}

/* ────────────────────────────────────────────────────────────
   3 · Links
   ──────────────────────────────────────────────────────────── */

.ilk-link {
  color: var(--ilk-orange);
  text-decoration: none;
  font-weight: var(--ilk-fw-semibold);
  transition: color var(--ilk-transition);
}
.ilk-link:hover {
  color: var(--ilk-orange-deep);
}

.ilk-link-underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ────────────────────────────────────────────────────────────
   4 · Layout helpers
   ──────────────────────────────────────────────────────────── */

.ilk-container {
  width: 100%;
  max-width: var(--ilk-container-base);
  margin-inline: auto;
  padding-inline: var(--ilk-space-5);
}
.ilk-container-narrow { max-width: var(--ilk-container-narrow); }
.ilk-container-wide   { max-width: var(--ilk-container-wide); }

@media (min-width: 768px) {
  .ilk-container { padding-inline: var(--ilk-space-8); }
}

.ilk-section {
  padding-block: var(--ilk-space-12);
}
@media (min-width: 768px) {
  .ilk-section { padding-block: var(--ilk-space-20); }
}

.ilk-stack > * + * { margin-top: var(--ilk-space-4); }
.ilk-stack-sm > * + * { margin-top: var(--ilk-space-2); }
.ilk-stack-lg > * + * { margin-top: var(--ilk-space-8); }

.ilk-flex      { display: flex; }
.ilk-flex-col  { display: flex; flex-direction: column; }
.ilk-grid      { display: grid; }
.ilk-hidden    { display: none; }

@media (max-width: 767px) {
  .ilk-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .ilk-hide-desktop { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   5 · Accesibilidad
   ──────────────────────────────────────────────────────────── */

/* Skip-to-content link — visible solo al recibir foco con teclado */
.ilk-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--ilk-z-skip-link);
  padding: var(--ilk-space-3) var(--ilk-space-5);
  background: var(--ilk-bg-black);
  color: var(--ilk-fg-inverse);
  font-weight: var(--ilk-fw-semibold);
  text-decoration: none;
  transition: top var(--ilk-transition);
}
.ilk-skip-link:focus {
  top: 0;
}

/* Solo para screen readers — visualmente oculto pero accesible */
.ilk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible global con outline naranja */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--ilk-focus-outline);
  outline-offset: 2px;
}

/* Eliminar outline solo cuando el focus es por click (no por teclado) */
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ────────────────────────────────────────────────────────────
   6 · Botones base
   Componentes específicos extienden estas clases en sus archivos.
   ──────────────────────────────────────────────────────────── */

.ilk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ilk-space-2);
  min-height: 44px;  /* WCAG 2.5.5 touch target */
  padding: var(--ilk-space-3) var(--ilk-space-5);
  font-family: var(--ilk-font-sans);
  font-weight: var(--ilk-fw-semibold);
  font-size: var(--ilk-fs-base);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--ilk-radius-sm);
  transition: background var(--ilk-transition), color var(--ilk-transition), border-color var(--ilk-transition);
  cursor: pointer;
}

.ilk-btn-primary {
  background: var(--ilk-orange);
  color: var(--ilk-fg-inverse);
}
.ilk-btn-primary:hover {
  background: var(--ilk-orange-deep);
}

.ilk-btn-secondary {
  background: transparent;
  color: var(--ilk-fg-1);
  border: 1px solid var(--ilk-border-strong);
}
.ilk-btn-secondary:hover {
  border-color: var(--ilk-orange);
  color: var(--ilk-orange);
}

.ilk-btn-ghost {
  background: transparent;
  color: var(--ilk-orange);
}
.ilk-btn-ghost:hover {
  background: var(--ilk-orange-tint);
}

.ilk-btn[disabled],
.ilk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   7 · Selección de texto
   ──────────────────────────────────────────────────────────── */

::selection {
  background: var(--ilk-orange);
  color: var(--ilk-fg-inverse);
}

/* ────────────────────────────────────────────────────────────
   8 · Scrollbar (sutil, no agresivo)
   ──────────────────────────────────────────────────────────── */

@media (pointer: fine) {
  /* Solo en dispositivos con mouse/trackpad, no en touch */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--ilk-bg-2);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--ilk-gray-mid);
    border-radius: var(--ilk-radius-sm);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--ilk-border-strong);
  }
}

/* ────────────────────────────────────────────────────────────
   9 · Print (sutil, asume contexto Interlaken®)
   Para que el sitio sea imprimible si alguien lo necesita.
   ──────────────────────────────────────────────────────────── */

@media print {
  body {
    background: var(--ilk-white);
    color: var(--ilk-black);
  }
  .ilk-no-print { display: none !important; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--ilk-gray-text);
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }
}