/* ==========================================================================
   HIBERUS · DESIGN SYSTEM FOUNDATION
   Sistema completo: tokens, sombras, z-index, componentes core, accesibilidad,
   patrones IA, formularios y responsive.
   Importar con: <link rel="stylesheet" href="hiberus-foundation.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@300;400;500;600;700&display=swap');

:root {
  /* 🎨 Sistema cromático */
  --bg: #ffffff;
  --bg-2: #f5f6fa;
  --bg-3: #eef2fa;

  --ink: #19255A;
  --ink-2: #4a5288;
  --ink-3: #5d6494;

  --rule: #19255a14;
  --rule-2: #19255a24;

  --accent: #0945F7;
  --accent-2: #00CDE2;
  --danger: #dc2626;

  /* 🔤 Fuentes */
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  /* 🌫️ Elevación y sombras (tintadas con --ink) */
  --shadow-1: 0 4px 12px rgba(25, 37, 90, 0.08);
  --shadow-2: 0 8px 24px rgba(25, 37, 90, 0.12), 0 1px 3px rgba(25, 37, 90, 0.05);
  --shadow-3: 0 24px 48px rgba(25, 37, 90, 0.15), 0 0 0 1px var(--rule);

  /* 🥞 Z-Index scale */
  --z-base: 10;
  --z-float: 30;
  --z-nav: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/* ==========================================================================
   RESET & TYPOGRAPHY BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;       /* base innegociable */
  line-height: 1.55;
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 500;       /* display weights: 500-600, nunca 700 */
  letter-spacing: -0.02em;
  margin: 0;
}

/* Escala densa "SaaS/consultora profesional 2026" (consolidada 2026-07-07).
   Antes: editorial grande (h1 96 / h2 72 / h3 36 / lede 20). Ahora: densa. */
h1 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 2.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: clamp(19px, 1.4vw, 22px); line-height: 1.3;  letter-spacing: -0.01em; }
h4 { font-size: 20px; line-height: 1.25; }
h5 { font-size: 17px; line-height: 1.3; }
h6 { font-size: 16px; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; }

p { margin: 0 0 16px; max-width: 65ch; }

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 65ch;
}

.mono {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.acc { color: var(--accent); }

/* ==========================================================================
   📏 LAYOUT MAESTRO — .wrap + .sect
   Toda <section> ocupa 100% (para fondos a sangre) y envuelve su contenido
   en un <div class="wrap"> que centra a 1440px con padding lateral fluido.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
}

.sect {
  width: 100%;
  padding: clamp(64px, 7vw, 96px) 0;
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   ♿ ACCESIBILIDAD (WCAG 2.2 AA)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ==========================================================================
   🎨 BRAND MARK
   Cuadrado redondeado con gradiente brand y la "H" blanca.
   ========================================================================== */

.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.brand.lg .mark { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }

/* ==========================================================================
   🔘 BOTONES
   .btn      — secundario outlined
   .primary  — azul brand sólido
   .lg       — variante grande (56px alto, font 16)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;          /* touch target AAA */
  padding: 12px 16px;        /* única excepción documentada al "no 12px" */
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}
.btn:hover { background: var(--bg-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.primary:hover { background: #083bd1; box-shadow: var(--shadow-1); border-color: #083bd1; }

.btn.lg { min-height: 56px; padding: 16px 24px; font-size: 16px; border-radius: 10px; }

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

/* ==========================================================================
   🏷️ BADGES, DOTS, CHIPS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-2);
  background: transparent;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  flex-shrink: 0;
}

.chip-tech {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ==========================================================================
   🗄️ INPUTS Y FORMULARIOS
   ========================================================================== */

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 16px;          /* 16px evita zoom automático en iOS */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  transition: all 200ms ease-in-out;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input:invalid:not(:placeholder-shown) { border-color: var(--danger); }
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.6;
  background: var(--bg-2);
  cursor: not-allowed;
}
::placeholder { color: var(--ink-3); opacity: 0.7; }

/* ==========================================================================
   🌌 BLOQUES DE MARCA (contraste)
   .cta-final, .final  — bloque azul sólido (#0945F7) con texto blanco
   .sect-voices, .quote-sec — bloque navy sólido (#19255A) con texto blanco
   ========================================================================== */

.cta-final, .final { background: var(--accent); color: #fff; border-top: none; }
.cta-final h1, .cta-final h2, .final h1, .final h2 { color: #fff; }
.cta-final h1 .acc, .cta-final h2 .acc,
.final h1 .acc, .final h2 .acc { color: var(--accent-2); }
.cta-final p, .final p { color: #cfdcff; }
.cta-final .badge, .final .badge { border-color: #ffffff40; color: #cfdcff; background: #ffffff10; }
.cta-final .btn, .final .btn { border-color: #ffffff40; color: #fff; background: transparent; }
.cta-final .btn:hover, .final .btn:hover { background: #ffffff14; border-color: #fff; }
.cta-final .btn.primary, .final .btn.primary { background: #fff; color: var(--accent); border-color: #fff; }
.cta-final .btn.primary:hover, .final .btn.primary:hover { background: var(--accent-2); color: var(--accent); border-color: var(--accent-2); }

.sect-voices, .quote-sec { background: var(--ink); color: #fff; border-top: none; }
.sect-voices h1, .sect-voices h2, .quote-sec h1, .quote-sec h2 { color: #fff; }
.sect-voices .acc, .quote-sec .acc { color: var(--accent-2); }
.sect-voices p, .quote-sec p, .sect-voices blockquote, .quote-sec blockquote { color: #fff; }

/* ==========================================================================
   🤖 PATRONES UI: IA Y TECNOLOGÍA
   ========================================================================== */

pre, code, .code { font-family: var(--mono); font-size: 14px; }
pre {
  background: var(--bg-3);
  color: var(--ink);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  line-height: 1.5;
}
code {
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
pre code { background: transparent; padding: 0; border: none; }

/* ==========================================================================
   ⏳ LOADING STATES (skeleton + shimmer)
   ========================================================================== */

.skeleton {
  background: var(--bg-3);
  border-radius: 4px;
  animation: hiberus-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes hiberus-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.ai-shimmer {
  background: linear-gradient(90deg, var(--bg-3) 0%, color-mix(in oklab, var(--accent) 8%, var(--bg-3)) 50%, var(--bg-3) 100%);
  background-size: 200% 100%;
  animation: hiberus-shimmer 2.4s ease-in-out infinite;
}
@keyframes hiberus-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   📱 RESPONSIVE — mobile-first retrofit completo (<768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Nav */
  nav.top .nav-mid { display: none !important; }
  nav.top .nav-cta .btn:not(.primary) { display: none !important; }

  /* Layout */
  .sect { padding: 64px 0; }

  /* Grids → 1 columna */
  .grid, .grid-2, .grid-3, .grid-4,
  .steps, .cards, .ccards { grid-template-columns: 1fr !important; }

  /* Sticky CTA full-width en móvil */
  .sticky-cta {
    flex-wrap: wrap;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    width: auto;
    justify-content: space-between;
  }

  /* Forms */
  .form { padding: 24px !important; }

  /* Footer */
  .legal { flex-direction: column; gap: 16px; align-items: flex-start; }
}