/* ============================================================
   Demos de Core Vibe — base compartida
   Barra "Demo de Core Vibe", avisos de acciones simuladas, menú móvil y aparición.
   Cada demo define su propio diseño en /demos/<rubro>/styles.css.
   ============================================================ */

@font-face {
  font-family: "CV Sans";
  src: url("/assets/fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.nav-open { overflow: hidden; }
body { margin: 0; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: #d4ff3f;
  color: #0e0e11;
  font: 600 14px "CV Sans", system-ui, sans-serif;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Barra "Demo de Core Vibe" ---------- */
.cv-bar {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px clamp(12px, 3vw, 28px);
  background: #0e0e11;
  color: #f3f0e8;
  font: 500 13px/1.35 "CV Sans", system-ui, sans-serif;
}
.cv-bar__mark { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.cv-bar__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #d4ff3f; box-shadow: 0 0 0 3px rgba(212, 255, 63, 0.18); }
.cv-bar__mark strong { font-weight: 600; }
.cv-bar__long { color: #a4a4ae; }
.cv-bar__links { display: flex; flex-shrink: 0; gap: 8px; }
.cv-bar a {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #f3f0e8;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s;
}
.cv-bar a:hover { border-color: #f3f0e8; }
.cv-bar a.cv-bar__cta { border-color: #d4ff3f; background: #d4ff3f; color: #0e0e11; font-weight: 600; }
.cv-bar a.cv-bar__cta:hover { background: #e3ff7a; }
.cv-bar a:focus-visible { outline: 2px solid #d4ff3f; outline-offset: 2px; }
@media (max-width: 760px) {
  .cv-bar__long { display: none; }
}
@media (max-width: 440px) {
  .cv-bar__back { display: none; }
}

/* ---------- Aviso para acciones simuladas ---------- */
.cv-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 150;
  width: max-content;
  max-width: min(92vw, 480px);
  padding: 14px 18px;
  border-radius: 14px;
  background: #0e0e11;
  color: #f3f0e8;
  font: 500 14px/1.5 "CV Sans", system-ui, sans-serif;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s;
}
.cv-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.cv-toast b { color: #d4ff3f; font-weight: 600; }

/* ---------- Aparición al hacer scroll (solo con JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].is-in,
.reveal-all [data-reveal] { opacity: 1; transform: none; }

@media print {
  .cv-bar, .cv-toast { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}