/* Estilo de marca común (cabecera, pie, catálogo, barra de demo). Se carga después de style.css. */
:root{--m-ink:#120a2e;--m-muted:#6b6489;--m-violet:#7c3aed;--m-pink:#d6338a;
  --m-grad:linear-gradient(100deg,#3b5bdb,#7c3aed 40%,#d6338a 70%,#ff6b6b)}
.m-display{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.m-serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:0}
.m-grad-text{background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:999px;font:600 .92rem Inter,system-ui,sans-serif;background:var(--m-grad);color:#fff!important;box-shadow:0 10px 30px -10px rgba(214,51,138,.6);transition:transform .2s}
.m-btn:hover{transform:translateY(-2px)}

/* Cabecera */
.m-top{position:sticky;top:0;z-index:80;background:rgba(18,10,46,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.m-top .m-in{width:min(1180px,92vw);margin:auto;height:88px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.m-top .m-logo img{height:66px;width:auto;display:block}
.m-top nav{display:flex;gap:1.8rem;font:500 .95rem Inter,system-ui,sans-serif;color:#e9e4ff}
.m-top nav a:hover{color:#fff}

/* Banda de título oscura */
.m-hero{position:relative;overflow:hidden;background:var(--m-ink);color:#fff;padding:70px 0 80px;isolation:isolate}
.m-hero::before,.m-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-1}
.m-hero::before{width:480px;height:480px;background:#7c3aed;top:-200px;left:-120px}
.m-hero::after{width:420px;height:420px;background:#d6338a;bottom:-240px;right:5%}
.m-hero .m-in{width:min(1180px,92vw);margin:auto}
.m-hero .m-eyebrow{font:600 .78rem Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f9a8d4}
.m-hero h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;font-size:clamp(2.6rem,6vw,4.8rem);margin:1rem 0 1.2rem}
.m-hero p{color:#cfc8f3;font:400 1.1rem/1.6 Inter,sans-serif;max-width:36rem}

/* Catálogo */
.catalogue{padding-top:40px}
.catalogue .category-tabs{position:sticky;top:88px;z-index:20;background:rgba(251,249,255,.92);backdrop-filter:blur(10px);margin:0;padding:16px 0}
.catalogue .category-tabs a{border:1.5px solid #e4def7;background:#fff;border-radius:999px;padding:.6rem 1.1rem;font:600 .9rem Inter,sans-serif;color:var(--m-ink);transition:.2s}
.catalogue .category-tabs a:hover{background:var(--m-ink);border-color:var(--m-ink);color:#fff}
.all-demos-category{scroll-margin-top:170px}
.catalogue-top{border-top:0;padding:46px 0 24px}
.catalogue-top h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1}
.catalogue-top p{font-size:.95rem;color:var(--m-muted);margin-top:.5rem}
.catalogue-top>span{font:600 .75rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--m-violet)}
.template-grid{gap:26px}
.template-preview{border-radius:22px;border:1px solid #ece7fb;background:#f3effe;transition:transform .35s,box-shadow .35s,background .25s}
.template-preview:hover{background:#ebe3ff;transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(18,10,46,.4)}
.template-preview>.invite-design{border-radius:12px;overflow:hidden}
.template-info h4{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.template-info>span{font:600 .8rem Inter,sans-serif;color:var(--m-violet)}
.template-actions>a{border-bottom:0;font:600 .85rem Inter,sans-serif}
.template-actions>a.choose{background:var(--m-grad);color:#fff;border-radius:999px;padding:0 1rem;min-height:38px}
.template-actions>a.choose:hover{color:#fff;opacity:.9}

/* Barra de la demo */
.demo-toolbar{background:var(--m-ink)!important;color:#fff!important;border-bottom:0!important;height:66px!important}
.demo-toolbar>a{color:#e9e4ff}
.demo-toolbar .m-demo-logo{display:flex;align-items:center}
.demo-toolbar .m-demo-logo img{height:44px;width:auto}
.demo-toolbar>a:last-child{background:var(--m-grad)!important;color:#fff!important;font-weight:600}

/* Pie y WhatsApp */
.m-foot{background:#0b0620;color:#9d94c9;padding:50px 0;font:400 .9rem Inter,sans-serif;margin-top:90px}
.m-foot .m-in{width:min(1180px,92vw);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.m-foot img{height:54px;width:auto}
.m-foot nav{display:flex;gap:1.6rem}
.m-foot a:hover{color:#fff}
.m-wa{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.7)}
.m-wa svg{width:30px;height:30px;fill:#fff}

@media (max-width:860px){
  .m-top nav{display:none}
  .m-top .m-in{height:74px}.m-top .m-logo img{height:52px}
  .catalogue .category-tabs{top:74px;flex-wrap:nowrap;overflow-x:auto}
  .catalogue .category-tabs a{white-space:nowrap}
  .demo-toolbar>span{display:none}
  .demo-toolbar .m-demo-logo img{height:36px}
}
@media (max-width:520px){.m-top .m-btn span{display:none}}