/* ALDEAX — sistema de diseño
 *
 * Extraído del bundle del builder (`Aldeax (1).html`) midiendo los valores
 * computados en el navegador, no copiando el bundle: ese export es un SPA
 * acoplado a su runtime y no se puede desacoplar limpio.
 *
 * El ADN: amarillo saturado como fondo de bloque completo, negro puro para
 * estructura, bordes gruesos y sombras duras. No es un panel de administración
 * suave; es editorial y con carácter.
 */

:root {
  /* ── superficies ───────────────────────────────────────────────────────── */
  --amarillo: #ffd028;        /* bloque protagonista: hero, acentos de marca */
  --papel: #f5f1e6;           /* fondo general */
  --papel-claro: #fffdf6;     /* tarjetas sobre el papel */
  --tinta: #14120e;           /* barra lateral, texto principal */
  --tinta-suave: #2c2a22;
  --negro: #000;              /* bordes: negro puro, no gris */

  /* ── acentos ───────────────────────────────────────────────────────────── */
  --naranja: #ff5a1f;         /* la palabra destacada del título */
  --naranja-hondo: #e24e12;
  --azul: #2a3bef;            /* acción principal: buscar, subir */
  --azul-claro: #dce0ff;

  /* ── texto ─────────────────────────────────────────────────────────────── */
  --gris: #8e8778;            /* etiquetas y texto secundario */
  --gris-claro: #a79e8b;
  --linea: #cfc8b6;

  /* ── estado ────────────────────────────────────────────────────────────── */
  --ok: #1f7a4d;
  --error: #c62f13;
  --aviso: #b8860b;

  /* ── tipografía ────────────────────────────────────────────────────────────
   * Bricolage Grotesque y Space Mono están en Google Fonts.
   * General Sans es de Fontshare (gratuita, requiere su propio enlace).
   * Los sustitutos del sistema evitan el salto de fuente si alguna no carga. */
  --display: "Bricolage Grotesque", "Archivo Black", Impact, sans-serif;
  --ui: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida: el título del hero es enorme en escritorio y sigue
   * funcionando a 320px sin desbordar. */
  --t-hero: clamp(2.75rem, 1.2rem + 6.4vw, 5.5rem);
  --t-titulo: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  --t-seccion: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --t-base: 1rem;
  --t-chico: 0.875rem;
  --t-micro: 0.75rem;

  /* ── espacio (escala de 4) ─────────────────────────────────────────────── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  /* ── forma ─────────────────────────────────────────────────────────────── */
  --radio: 10px;
  --radio-chico: 6px;
  --borde: 2px solid var(--negro);
  --borde-grueso: 3px solid var(--negro);

  /* Sombra dura, sin difuminado: es lo que le da el carácter al diseño.
   * Un box-shadow suave lo convertiría en cualquier otra plataforma. */
  --sombra: 4px 4px 0 var(--negro);
  --sombra-alta: 6px 6px 0 var(--negro);

  /* ── movimiento ────────────────────────────────────────────────────────── */
  --rapido: 120ms;
  --medio: 220ms;
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;   /* títulos enormes no rompen el layout a 320px */
  min-width: 0;
  text-wrap: balance;
}

/* La etiqueta en mono y mayúsculas es la firma del sistema. */
.etiqueta {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ── botones: 8 estados ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-family: var(--ui); font-size: var(--t-base); font-weight: 600;
  padding: 13px 22px;
  border: var(--borde); border-radius: var(--radio);
  background: var(--papel-claro); color: var(--tinta);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--sombra);
  transition: transform var(--rapido) var(--salida), box-shadow var(--rapido) var(--salida),
              background var(--rapido) var(--salida);
}
/* El botón se "hunde" hacia su sombra: el gesto propio de este lenguaje visual. */
.btn:hover, .btn.es-hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--negro); }
.btn:active, .btn.es-activo { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--negro); }
.btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.btn[disabled], .btn.es-inhabilitado { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sombra); }
.btn[data-estado="cargando"] { cursor: progress; }
.btn[data-estado="cargando"]::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar 700ms linear infinite;
}
.btn[data-estado="error"] { background: var(--error); color: #fff; }
.btn[data-estado="ok"] { background: var(--ok); color: #fff; }

.btn--azul { background: var(--azul); color: #fff; }
.btn--amarillo { background: var(--amarillo); color: var(--tinta); }
.btn--tinta { background: var(--tinta); color: var(--papel); }
.btn--bloque { width: 100%; }

@keyframes girar { to { transform: rotate(360deg); } }

/* ── tarjeta ──────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel-claro);
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e-5);
}

/* ── bloque amarillo del hero ─────────────────────────────────────────────── */
.bloque-hero { background: var(--amarillo); border-bottom: var(--borde-grueso); padding: var(--e-8) var(--e-5); }
.bloque-hero h1 { font-size: var(--t-hero); }
.bloque-hero .destacado { color: var(--naranja); }

/* ── campos ───────────────────────────────────────────────────────────────── */
.campo {
  width: 100%; padding: 15px 18px;
  font-family: var(--ui); font-size: var(--t-base);
  background: var(--papel-claro); color: var(--tinta);
  border: var(--borde); border-radius: var(--radio);
}
.campo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.campo[aria-invalid="true"] { border-color: var(--error); background: #fdeeea; }

/* ── navegación inferior en móvil ─────────────────────────────────────────── */
.nav-movil {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--papel-claro); border-top: var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-movil a { display: grid; place-items: center; gap: 2px; padding: 10px 4px;
  font-size: var(--t-micro); color: var(--tinta); text-decoration: none; }
.nav-movil .mas {
  background: var(--azul); color: #fff; border-radius: var(--radio);
  margin: 6px; font-size: 1.4rem; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .btn:active { transform: none; }
}