/* Común a todas las demos: barra de aviso, cierre y utilidades. Cada demo tiene su propio CSS. */
@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: #fff; color: #111; padding: .6rem 1rem; border-radius: 8px; }
.saltar:focus { top: 1rem; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- barra de demo (identidad de Diego, no del negocio ficticio) ---- */
.demo-barra { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; padding: .5rem clamp(12px, 3vw, 28px);
  background: #12163a; color: #f2f3fa; font-family: "Bricolage", system-ui, sans-serif; font-size: .88rem; line-height: 1.3; border-bottom: 2px solid transparent;
  border-image: linear-gradient(100deg, #5be7f5, #8b6cff 55%, #ff7bc2) 1; }
.demo-barra a { color: #f2f3fa; text-decoration: none; }
.demo-barra a:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-barra :focus-visible { outline: 3px solid #5be7f5; outline-offset: 2px; border-radius: 4px; }
.db-volver { font-weight: 650; white-space: nowrap; }
.db-sello { margin: 0; padding: .2rem .7rem; border-radius: 999px; background: #ffe7a3; color: #3d3000; font-weight: 700; white-space: nowrap; }
.db-otras { display: flex; gap: .3rem; margin-left: auto; }
.db-otras a { padding: .2rem .7rem; border-radius: 999px; color: #b8bddb; }
.db-otras a[aria-current] { background: rgba(242, 243, 250, .12); color: #f2f3fa; }
.db-siguiente { font-weight: 650; white-space: nowrap; }
@media (max-width: 900px) { .db-otras { display: none; } .db-siguiente { margin-left: auto; } }
@media (max-width: 560px) { .demo-barra { font-size: .8rem; gap: .4rem .8rem; } .db-siguiente { display: none; } .db-sello { margin-left: auto; } }

/* ---- cierre común ---- */
.demo-cierre { background: #12163a; color: #f2f3fa; font-family: "Bricolage", system-ui, sans-serif; padding: clamp(3rem, 7vw, 5rem) clamp(16px, 4vw, 40px); }
.dc-in { max-width: 1100px; margin: 0 auto; }
.dc-sello { display: inline-block; margin: 0 0 1.2rem; padding: .25rem .8rem; border-radius: 999px; background: #ffe7a3; color: #3d3000; font-weight: 700; font-size: .85rem; }
.dc-titular { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 720; font-stretch: 80%; line-height: 1.1; max-width: 26em; margin: 0 0 1.8rem; text-wrap: balance; }
.dc-acciones { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; align-items: center; }
.dc-btn { display: inline-flex; min-height: 50px; align-items: center; padding: .8rem 1.4rem; border-radius: 999px; background: linear-gradient(100deg, #5be7f5, #8b6cff 55%, #ff7bc2); color: #0d1030; font-weight: 700; text-decoration: none; }
.dc-link { color: #f2f3fa; font-weight: 600; }
.dc-otras { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(242, 243, 250, .14); }
.dc-otras a { color: #f2f3fa; text-decoration: none; padding: .5rem 1rem; border: 1px solid rgba(242, 243, 250, .2); border-radius: 999px; }
.dc-otras a span { color: #b8bddb; }
.dc-otras a:hover { border-color: #f2f3fa; }
.demo-cierre :focus-visible { outline: 3px solid #5be7f5; outline-offset: 3px; border-radius: 6px; }

/* etiqueta de contenido ficticio dentro de las demos */
.ficticio { display: inline-block; font-size: .78rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: #ffe7a3; color: #3d3000; vertical-align: middle; font-family: "Bricolage", system-ui, sans-serif; letter-spacing: 0; text-transform: none; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
[hidden] { display: none !important; }
.c-persona .ficticio { justify-self: start; }