/* acertio.com — estilos base. El diseño de cada bloque va en línea en el HTML. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #F4F5F2; color: #0F1411; }
img, svg { max-width: 100%; }
[id] { scroll-margin-top: 24px; }

a { color: #0F1411; }
a:hover { color: #15803D; }
.page-legal a { color: #15803D; }
.page-legal a:hover { color: #0F1411; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #4CC26A;
  outline-offset: 2px;
}
button:disabled { opacity: .6; cursor: progress; }
input:focus, textarea:focus { border-color: #15803D !important; }

/* Formulario: campo trampa invisible y mensaje de estado */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 15px; font-weight: 500; min-height: 1.4em; }
.form-status.is-ok { color: #15803D; }
.form-status.is-error { color: #B42318; }