/* Estilos propios del portal (la marca viene de dist/css/magdalena.css) */
body { margin: 0; }
.pt-header { position: sticky; top: 0; z-index: 50; background: var(--mg-glass-bg); -webkit-backdrop-filter: var(--mg-glass-blur); backdrop-filter: var(--mg-glass-blur); border-bottom: 1px solid var(--mg-border); }
.pt-header__in { display: flex; align-items: center; gap: 1.5rem; max-width: 1280px; margin: 0 auto; padding: .6rem 1.25rem; }
.pt-brand img { height: 44px; width: auto; display: block; }
.pt-nav { display: flex; gap: .15rem; flex-wrap: wrap; margin-left: auto; }
.pt-nav a { color: var(--mg-gray-600); text-decoration: none; font-weight: 600; font-size: .85rem; padding: .45rem .8rem; border-radius: var(--mg-radius-md); }
.pt-nav a:hover { background: var(--mg-gray-100); color: var(--mg-gray-900); }
.pt-nav a[aria-current="page"] { background: var(--mg-primary-50); color: var(--mg-primary-700); }
.pt-burger { display: none; margin-left: auto; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--mg-primary); }
@media (max-width: 900px) {
  .pt-burger { display: block; }
  .pt-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; padding: .75rem 1rem 1rem; box-shadow: var(--mg-shadow-lg); }
  .pt-nav.open { display: flex; }
}
.pt-main { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.pt-section { margin-top: 3.5rem; scroll-margin-top: 90px; }
.pt-section:first-child { margin-top: 0; }
.pt-section > h2 { display: flex; align-items: baseline; gap: .6rem; font-size: 1.75rem; margin-bottom: .25rem; }
.pt-section > h2 .n { color: var(--mg-primary-300); font-weight: 700; }
.pt-lead { color: var(--mg-gray); max-width: 72ch; font-size: 1.0625rem; margin: 0 0 1.5rem; }
.pt-hero { position: relative; color: #fff; overflow: hidden; background: radial-gradient(900px 460px at 90% -10%, rgba(0,183,217,.30), transparent 62%), radial-gradient(760px 460px at 5% 120%, rgba(0,113,187,.40), transparent 60%), var(--mg-gradient-night); }
.pt-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mg-gradient-stripe); }
.pt-hero__in { max-width: 1280px; margin: 0 auto; padding: 4rem 1.25rem 5rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.pt-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.6rem); margin: 0 0 1rem; }
.pt-hero p { font-size: 1.1rem; max-width: 56ch; margin: 0 0 1.5rem; opacity: .8; }
.pt-hero__logo { background: rgba(255,255,255,.96); border-radius: var(--mg-radius-xl); padding: 2rem; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; place-items: center; }
.pt-hero__logo img { width: min(100%, 360px); height: auto; }
.pt-pagehead { color: #fff; position: relative; background: radial-gradient(800px 300px at 92% -20%, rgba(0,183,217,.26), transparent 62%), var(--mg-gradient-night); }
.pt-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mg-gradient-stripe); }
.pt-pagehead__in { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
.pt-pagehead h1 { color: #fff; margin: 0 0 .4rem; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.pt-pagehead p { margin: 0; max-width: 70ch; opacity: .78; font-size: 1.02rem; }
@media (max-width: 800px) { .pt-hero__in { grid-template-columns: 1fr; padding: 2.5rem 1.25rem 3.5rem; } }
.pt-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pt-grid--lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
/* tarjetas de color */
.sw { border-radius: var(--mg-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--mg-border); box-shadow: var(--mg-shadow-sm); }
.sw__color { height: 130px; display: flex; align-items: flex-end; padding: .8rem 1rem; font-weight: 800; font-size: 1.1rem; cursor: pointer; border: 0; width: 100%; text-align: left; font-family: inherit; }
.sw__body { padding: .9rem 1rem 1.1rem; font-size: .8125rem; color: var(--mg-gray); display: grid; gap: .25rem; }
.sw__body b { color: var(--mg-ink); }
.sw__body code { font-family: var(--mg-font-mono); font-size: .78rem; background: var(--mg-surface); padding: .1rem .35rem; border-radius: 4px; color: var(--mg-ink); }
.sw__tag { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mg-primary); }
.scale { display: grid; grid-template-columns: 90px repeat(11, 1fr); gap: 3px; margin-bottom: 4px; align-items: stretch; }
.scale > span:first-child { font-weight: 800; font-size: .8rem; align-self: center; }
.scale button { border: 0; padding: .9rem 0; font-size: .62rem; font-weight: 700; cursor: pointer; border-radius: 4px; font-family: var(--mg-font-mono); }
.scale--head > span { font-size: .65rem; text-align: center; color: var(--mg-gray); font-weight: 700; }
@media (max-width: 800px) { .scale { grid-template-columns: 60px repeat(11, 1fr); } .scale button { font-size: 0; padding: 1.1rem 0; } }
.grad { border-radius: var(--mg-radius-lg); overflow: hidden; border: 1px solid var(--mg-border); background: #fff; box-shadow: var(--mg-shadow-sm); }
.grad__bar { height: 120px; display: flex; align-items: flex-end; padding: .8rem 1rem; font-weight: 800; }
.grad__body { padding: .8rem 1rem 1rem; font-size: .8125rem; color: var(--mg-gray); display: grid; gap: .45rem; }
.grad__body code { font-family: var(--mg-font-mono); font-size: .75rem; background: var(--mg-surface); padding: .15rem .4rem; border-radius: 4px; color: var(--mg-ink); word-break: break-all; }
/* código */
.code { position: relative; background: #0F1B26; color: #dbeafe; border-radius: var(--mg-radius-md); margin: .5rem 0 1.1rem; overflow: hidden; }
.code__bar { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem .35rem 1rem; background: #172a3a; font: 700 .72rem var(--mg-font-mono); color: var(--mg-sky); }
.code pre { margin: 0; padding: 1rem; overflow-x: auto; font: 500 .8125rem/1.55 var(--mg-font-mono); tab-size: 2; }
.code button, .copy { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 6px; padding: .3rem .65rem; font: 700 .72rem var(--mg-font-sans); cursor: pointer; }
.code button:hover, .copy:hover { background: var(--mg-cyan); color: var(--mg-ink); }
.copy { background: var(--mg-primary-50); color: var(--mg-primary-700); }
.copy.ok, .code button.ok { background: var(--mg-green); color: var(--mg-ink); }
code.inline { font-family: var(--mg-font-mono); background: var(--mg-surface); padding: .1rem .4rem; border-radius: 4px; font-size: .85em; }
/* logos */
.lg { background: #fff; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); overflow: hidden; box-shadow: var(--mg-shadow-sm); display: flex; flex-direction: column; }
.lg__view { height: 190px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.25rem; background: repeating-conic-gradient(#f2f2f2 0% 25%, #fff 0% 50%) 50% / 18px 18px; }
.lg__view--dark { background: #1D1D1B; } .lg__view--gray { background: #606060; } .lg__view--blue { background: var(--mg-gradient-sky); }
.lg__view img { max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; }
.lg__body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .55rem; flex: 1; align-content: start; }
.lg__body h3 { font-size: 1rem; margin: 0; } .lg__body p { margin: 0; color: var(--mg-gray); font-size: .8125rem; }
.lg__dl { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.lg__dl a, .lg__dl button { text-decoration: none; font: 600 .75rem var(--mg-font-sans); padding: .4rem .75rem; border-radius: var(--mg-radius-md); background: var(--mg-primary); color: #fff; border: 1px solid transparent; cursor: pointer; }
.lg__dl a:hover { background: var(--mg-primary-600); color: #fff; }
.lg__dl a.alt, .lg__dl button.alt { background: var(--mg-primary-50); color: var(--mg-primary-700); border: 1px solid var(--mg-primary-200); }
/* demos */
.demo { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); background: #fff; overflow: hidden; margin-bottom: 1.25rem; }
.demo__view { padding: 1.5rem; background: var(--mg-surface); }
.demo__view--white { background: #fff; }
.demo details { border-top: 1px solid var(--mg-border); }
.demo summary { cursor: pointer; padding: .6rem 1rem; font-weight: 800; font-size: .8rem; color: var(--mg-primary); }
.demo .code { margin: 0; border-radius: 0; }
.dont { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.dont > div { border-radius: var(--mg-radius-md); padding: 1rem; font-size: .85rem; border: 1px solid var(--mg-border); background: #fff; }
.dont .ok { border-left: 6px solid var(--mg-green); } .dont .no { border-left: 6px solid var(--mg-red); }
/* integración */
.int { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.int > div { min-width: 0; }
.int__nav { position: sticky; top: 90px; display: grid; gap: .15rem; max-height: calc(100vh - 110px); overflow: auto; align-content: start; }
.int__nav h4 { margin: 1rem 0 .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mg-primary); }
.int__nav a { text-decoration: none; color: var(--mg-gray); font-weight: 700; font-size: .875rem; padding: .45rem .75rem; border-radius: var(--mg-radius-sm); }
.int__nav a:hover, .int__nav a.on { background: var(--mg-primary-50); color: var(--mg-primary); }
.int__guide { background: #fff; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); padding: 1.5rem 1.75rem; margin-bottom: 1.75rem; scroll-margin-top: 90px; position: relative; overflow: hidden; }
.int__guide::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mg-primary); }
.int__guide h3 { font-size: 1.5rem; margin-top: .5rem; }
.int__guide h5 { margin: 1.25rem 0 .2rem; font-size: .95rem; color: var(--mg-primary-700); font-weight: 800; }
.baseurl { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: 1rem 1.25rem; background: var(--mg-primary-50); border: 1px solid var(--mg-primary-100); border-radius: var(--mg-radius-md); margin-bottom: 1.5rem; }
.baseurl input { flex: 1; min-width: 240px; }
@media (max-width: 900px) { .int { grid-template-columns: 1fr; } .int__nav { position: static; max-height: none; grid-auto-flow: column; overflow-x: auto; } .int__nav h4 { display: none; } .int__nav a { white-space: nowrap; } }
.urls { width: 100%; border-collapse: collapse; font-size: .875rem; background: #fff; border: 1px solid var(--mg-border); }
.urls th { text-align: left; background: var(--mg-gray-50); color: var(--mg-gray-600); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1rem; }
.urls td { padding: .65rem 1rem; border-top: 1px solid var(--mg-border); vertical-align: middle; }
.urls code { font-family: var(--mg-font-mono); font-size: .78rem; word-break: break-all; }
.tablewrap { overflow-x: auto; border-radius: var(--mg-radius-md); }
.gallery { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.gallery figure { margin: 0; background: #fff; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); overflow: hidden; box-shadow: var(--mg-shadow-sm); }
.gallery img { width: 100%; display: block; background: #fff; }
.gallery figcaption { padding: .8rem 1.1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.pt-footer { background: var(--mg-navy-950); color: rgba(255,255,255,.7); padding: 2.5rem 1.25rem 2rem; position: relative; margin-top: 3rem; }
.pt-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mg-gradient-stripe); }
.pt-footer__in { max-width: 1280px; margin: 0 auto; display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.pt-footer img { height: 46px; } .pt-footer a { color: var(--mg-sky); }
.cards-k { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.k { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); padding: 1.4rem; box-shadow: var(--mg-shadow-sm); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.k:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-lg); color: inherit; }
.k::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mg-primary); opacity: 0; transition: opacity .2s; } .k:hover::before { opacity: 1; }
.k h3 { margin: .9rem 0 .3rem; font-size: 1.05rem; } .k p { margin: 0; color: var(--mg-gray); font-size: .9rem; } .k .ic { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--mg-radius-md); background: var(--mg-primary-50); color: var(--mg-primary); } .k .ic svg { width: 1.3rem; height: 1.3rem; }
.toast-ok {  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--mg-ink); color: #fff; padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .85rem; opacity: 0; transition: .25s; z-index: 99; pointer-events: none; }
.toast-ok.show { opacity: 1; transform: translateX(-50%); }

.pt-credit { max-width: 1280px; margin: 1.5rem auto 0; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; font-size: .68rem; letter-spacing: .08em; color: rgba(255,255,255,.38); }