/* Barra común de las plantillas de ejemplo */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.demo-bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding:9px 16px;background:#05070d;color:#c9d2e4;font:500 13px/1.3 system-ui,sans-serif;text-align:center}
.demo-bar a{color:#22d3ee;font-weight:700;text-decoration:none}
.demo-bar .demo-bar__b{color:#fff;background:linear-gradient(100deg,#22d3ee,#8b5cf6);padding:6px 14px;border-radius:999px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Footer común de las plantillas (cada una pone sus colores con --pd-*) */
footer.pie-demo{padding:64px 0 0;text-align:left;background:var(--pd-bg);color:var(--pd-m);font-size:.93rem;line-height:1.6}
.pie-demo a{color:inherit;text-decoration:none;transition:color .2s}
.pie-demo a:hover{color:var(--pd-a)}
.pie-demo__w{width:min(1120px,100% - 32px);margin:auto}
.pie-demo__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.pie-demo__marca{font-size:1.5rem;font-weight:700;color:var(--pd-t);margin:0 0 10px;font-family:var(--pd-f,inherit)}
.pie-demo__marca+p{max-width:34ch;margin:0 0 18px}
.pie-demo h4{margin:4px 0 14px;color:var(--pd-t);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.pie-demo ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie-demo__redes{display:flex;gap:10px}
.pie-demo__redes a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--pd-l);color:var(--pd-t)}
.pie-demo__redes a:hover{border-color:var(--pd-a);color:var(--pd-a)}
.pie-demo__redes svg{width:17px;height:17px;fill:currentColor}
.pie-demo__pagos{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pie-demo__pagos span{font-size:.72rem;font-weight:700;padding:4px 8px;border-radius:6px;border:1px solid var(--pd-l);color:var(--pd-t)}
.pie-demo__nota{margin:14px 0 0;font-size:.8rem}
.pie-demo__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:48px;padding:22px 0 26px;border-top:1px solid var(--pd-l);font-size:.84rem}
.pie-demo__base nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie-demo__firma{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;font-size:.78rem;margin:8px 0 0}
.pie-demo__firma>span{opacity:.7}
.pie-demo__firma a{font-weight:700;color:var(--pd-t)}
@media(max-width:860px){.pie-demo__cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie-demo__cols{grid-template-columns:1fr;gap:28px}.pie-demo__base{flex-direction:column}}

/* Firma animada Sitio Conectado */
.sc-firma,.sc-firma *{text-transform:none!important;letter-spacing:normal!important;box-sizing:border-box}
.sc-firma{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border-radius:999px;border:1px solid rgba(139,92,246,.35);background:rgba(127,127,127,.06);color:inherit;font:500 13px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none!important;transition:transform .25s,box-shadow .25s,border-color .25s;vertical-align:middle}
.sc-firma:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.7);box-shadow:0 8px 24px -10px rgba(34,211,238,.6)}
.sc-firma__logo{flex:none;display:block;border-radius:8px;transition:transform .5s}
.sc-firma:hover .sc-firma__logo{transform:rotate(-8deg) scale(1.08)}
.sc-firma__lin{stroke-dasharray:60;animation:scfTrazo 3s ease-in-out infinite alternate}
.sc-firma__n{transform-box:fill-box;transform-origin:center;animation:scfLate 2.4s ease-in-out infinite}
.sc-firma__n2{animation-delay:.4s}.sc-firma__n3{animation-delay:.8s}
.sc-firma__txt{white-space:nowrap;letter-spacing:.01em}
.sc-firma__pre{font-size:11px;opacity:.7;margin-right:2px}
.sc-firma__dom{opacity:.75;font-weight:600}
.sc-firma__txt b{font-weight:800;font-size:inherit;background:linear-gradient(100deg,#22d3ee,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes scfTrazo{from{stroke-dashoffset:60;opacity:.45}to{stroke-dashoffset:0;opacity:1}}
@keyframes scfLate{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.sc-firma__lin,.sc-firma__n{animation:none}}

@media (max-width:420px){.sc-firma{max-width:100%}.sc-firma__txt{white-space:normal;line-height:1.3}}