/* ============================================================ CARTEL "ESTO ES UNA DEMO" — obligatorio en toda demo de cierre. Pedido del user (2026-08-06): arriba de la demo, un cartel que aclare que no es el producto final y que el 100% es personalizable. HTML (primer hijo del , antes del nav):

Esto es una demo. El 100 % es personalizable — colores, fotos, textos y secciones se adaptan a tu local.

Quiero la mía

Y en el CSS de la página: el nav sticky arranca DEBAJO del cartel (top: var(--cartel-alto)) y el hero descuenta su altura del 100svh. ============================================================ */ :root { --cartel-alto: 44px; } @media (max-width: 560px) { :root { --cartel-alto: 62px; } } .cartel-demo { position: sticky; /* viaja con el scroll sin tapar contenido (no fixed: fixed pisa el hero y obliga a padding fantasma) */ top: 0; z-index: 90; /* debajo de modales (100+), encima del nav (80) */ min-height: var(--cartel-alto); display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 1.4vw, 1.1rem); padding: .45rem clamp(.9rem, 3vw, 1.6rem); /* Hereda la paleta de la demo: el cartel es parte del diseño, no un aviso de browser. Definí estas dos vars con los tokens del cliente. */ background: var(--cartel-fondo, #14110F); color: var(--cartel-texto, #F6EDE0); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10); font-size: clamp(.72rem, 1.55vw, .82rem); line-height: 1.35; letter-spacing: .012em; text-wrap: balance; } .cartel-demo__punto { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--acento, #E8A24A); box-shadow: 0 0 0 0 var(--acento, #E8A24A); animation: cartel-late 2.4s ease-out infinite; } @keyframes cartel-late { 0% { box-shadow: 0 0 0 0 rgba(232, 162, 74, .55); } 70% { box-shadow: 0 0 0 9px rgba(232, 162, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 162, 74, 0); } } .cartel-demo__txt { margin: 0; max-width: 74ch; } .cartel-demo__txt strong { font-weight: 700; } .cartel-demo__cta { flex: 0 0 auto; padding: .38em 1em; border-radius: 999px; background: var(--acento, #E8A24A); color: var(--cartel-fondo, #14110F); font-weight: 650; text-decoration: none; white-space: nowrap; transition: transform .18s cubic-bezier(.2, .7, .2, 1), filter .18s; } .cartel-demo__cta:hover { transform: translateY(-1px); filter: brightness(1.08); } @media (max-width: 560px) { .cartel-demo { flex-wrap: wrap; justify-content: flex-start; row-gap: .35rem; } .cartel-demo__txt { flex: 1 1 100%; order: 2; } .cartel-demo__cta { order: 3; } } /* El nav de la página arranca debajo del cartel. Si tu nav es sticky: .nav { position: sticky; top: var(--cartel-alto); z-index: 80; } Y el hero: min-height: calc(100svh - var(--cartel-alto)); Recordá: overflow-x en html/body va CLIP, nunca hidden, o el sticky muere. */