/* =========================================================
   Humanizacional · Identidad 1.1
   Base de marca para todas las páginas: colores, tipografía,
   espacios, bordes y movimiento. Cambiar un valor aquí lo
   cambia en todo el sitio.
   ========================================================= */

/* ---------- Tipografías (alojadas en el propio sitio) ----------
   Títulos: Unbounded · Textos: Hanken Grotesk
   Archivos esperados en assets/fonts/ (ver docs/IDENTIDAD-1.1.md) */
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-400-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Paleta del manual ---------- */
  --hz-noche: #020C21;          /* texto principal y fondos oscuros */
  --hz-teal: #019794;           /* identidad y llamados */
  --hz-teal-luminoso: #04A2A0;  /* degradados y énfasis */
  --hz-teal-profundo: #024F4D;  /* fondos y contraste */
  --hz-calido: #FBFDFA;         /* fondo preferente */

  /* ---------- Derivados para la web ---------- */
  --hz-blanco: #FFFFFF;
  --hz-menta: #E3F4F2;          /* fondos suaves de acento */
  --hz-linea: #DCE5E2;          /* bordes y divisores */
  --hz-texto-suave: #4A5568;    /* textos secundarios sobre claro */
  --hz-teal-claro: #7FE3DD;     /* acentos sobre azul noche */
  --hz-texto-inverso: #DDE6EC;  /* textos secundarios sobre oscuro */

  /* ---------- Estados (resultados del autodiagnóstico) ---------- */
  --hz-atencion: #C2410C;       /* opciones 1-2 */
  --hz-fortalecer: #B7791F;     /* opción 3 */
  --hz-base: #019794;           /* opciones 4-5 */
  --hz-sin-dato: #3B5BA9;       /* «No sé» */

  /* ---------- Tipografía ---------- */
  --hz-font-display: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --hz-font-body: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --hz-display-weight: 700;
  --hz-display-tracking: -0.02em;

  /* Escala: crece con la pantalla, con mínimo para celular */
  --hz-text-xs: 0.78rem;
  --hz-text-sm: 0.9rem;
  --hz-text-md: 1rem;
  --hz-text-lg: 1.15rem;
  --hz-h4: clamp(1.1rem, 1.6vw, 1.3rem);
  --hz-h3: clamp(1.35rem, 2.6vw, 1.9rem);
  --hz-h2: clamp(1.8rem, 4.2vw, 2.9rem);
  --hz-h1: clamp(2.2rem, 6.2vw, 4.2rem);
  --hz-hero-number: clamp(4.5rem, 13vw, 8.5rem);
  --hz-leading-display: 1.04;
  --hz-leading-body: 1.6;
  --hz-eyebrow-tracking: 0.14em;

  /* ---------- Espacios ---------- */
  --hz-space-1: 4px;
  --hz-space-2: 8px;
  --hz-space-3: 12px;
  --hz-space-4: 16px;
  --hz-space-5: 24px;
  --hz-space-6: 32px;
  --hz-space-7: 48px;
  --hz-space-8: 72px;
  --hz-space-9: 112px;
  --hz-content: 1120px;         /* ancho máximo del contenido */
  --hz-measure: 62ch;           /* ancho cómodo de lectura */

  /* ---------- Formas ---------- */
  --hz-radius-sm: 10px;
  --hz-radius-md: 18px;
  --hz-radius-lg: 28px;
  --hz-radius-pill: 999px;      /* botones: redondos como las cabezas del isologo */
  --hz-shadow-soft: 0 1px 2px rgba(2, 12, 33, .06), 0 8px 24px rgba(2, 12, 33, .06);
  --hz-shadow-lift: 0 2px 6px rgba(2, 12, 33, .08), 0 18px 48px rgba(2, 79, 77, .14);

  /* ---------- Movimiento (el mismo ritmo del logo animado) ---------- */
  --hz-ease-out: cubic-bezier(.2, .8, .2, 1);
  --hz-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --hz-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --hz-dur-fast: 180ms;
  --hz-dur-base: 320ms;
  --hz-dur-slow: 600ms;
}

/* ---------- Bases ---------- */
.hz {
  font-family: var(--hz-font-body);
  color: var(--hz-noche);
  background: var(--hz-calido);
  line-height: var(--hz-leading-body);
  -webkit-font-smoothing: antialiased;
}
.hz-display, .hz h1, .hz h2, .hz h3 {
  font-family: var(--hz-font-display);
  font-weight: var(--hz-display-weight);
  letter-spacing: var(--hz-display-tracking);
  line-height: var(--hz-leading-display);
  text-wrap: balance;
}
.hz-eyebrow {
  font-family: var(--hz-font-body);
  font-weight: 700;
  font-size: var(--hz-text-xs);
  letter-spacing: var(--hz-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--hz-teal-profundo);
}
.hz-btn {
  display: inline-flex; align-items: center; gap: var(--hz-space-2);
  border-radius: var(--hz-radius-pill);
  padding: 13px 22px;
  font-family: var(--hz-font-display); font-weight: 500; font-size: var(--hz-text-sm);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--hz-dur-fast) var(--hz-ease-out), background-color var(--hz-dur-base) var(--hz-ease-out), color var(--hz-dur-base) var(--hz-ease-out);
}
.hz-btn:hover { transform: translateY(-1px); }
.hz-btn:focus-visible { outline: 3px solid var(--hz-teal-luminoso); outline-offset: 3px; }
.hz-btn--primary { background: var(--hz-noche); color: var(--hz-blanco); }
.hz-btn--primary:hover { background: var(--hz-teal-profundo); }
.hz-btn--ghost { border-color: var(--hz-noche); color: var(--hz-noche); background: transparent; }
.hz-btn--teal { background: var(--hz-teal); color: var(--hz-blanco); }


/* ---------- Encabezado y pie comunes (identidad 1.1) ---------- */
.hz-header { position: sticky; top: 0; z-index: 30; background: rgba(251, 253, 250, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hz-linea); }
.hz-header-inner { max-width: 64rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--hz-space-4); padding: 12px max(16px, env(safe-area-inset-left, 0px)); }
.hz-header-logo { display: inline-flex; align-items: center; }
.hz-header-logo img { height: 34px; width: auto; display: block; }
.hz-header-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hz-font-body); font-size: var(--hz-text-sm); font-weight: 500; color: var(--hz-texto-suave); text-decoration: none; padding: 6px 2px; }
.hz-header-back:hover, .hz-header-back:focus-visible { color: var(--hz-noche); }
.hz-footer { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 22px 16px; border-top: 1px solid var(--hz-linea); background: var(--hz-blanco); font-family: var(--hz-font-body); font-size: var(--hz-text-xs); color: var(--hz-texto-suave); text-align: center; }
.hz-footer p { margin: 0; }
.hz-footer a { color: var(--hz-teal-profundo); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 420px) { .hz-header-logo img { height: 28px; } .hz-header-back span { display: none; } }

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