/* gamestrategies.io (sitio principal) · mismo sistema de diseño que support/store. Marca: azul #007efe / cielo #36b4fa, pizarra #54595f, Roboto + Poppins. */
@font-face{font-family:Roboto;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/roboto-400.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/roboto-500.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/roboto-600.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/roboto-800.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2")}

:root{
  --blue:#007efe; --blue-2:#1a8fff; --blue-dark:#0064d1; --sky:#36b4fa; --ice:#eaf5ff;
  --navy:#101c2b; --navy-2:#182a3f; --slate:#54595f;
  --bg:#f5f8fc; --line:#e3e9f1; --text:#26313d; --muted:#65707d; --link:#0b6fd6;
  --r-sm:10px; --r:16px; --r-lg:26px;
  --shadow-sm:0 1px 2px rgba(16,28,43,.06),0 2px 8px rgba(16,28,43,.05);
  --shadow:0 10px 30px rgba(16,28,43,.10);
  --shadow-lg:0 22px 50px rgba(16,28,43,.16);
  --font-head:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font:400 16px/1.65 var(--font-body);display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
img{max-width:100%;height:auto}
a{color:var(--link)}
svg{flex:none}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}

/* ================= cabecera ================= */
.site-header{position:relative;z-index:50;color:#fff;background:linear-gradient(180deg,rgba(9,22,37,.68) 0%,rgba(9,22,37,.50) 55%,rgba(9,22,37,.80) 100%),var(--navy) url(/assets/header-bg.jpg) center 35%/cover no-repeat;transition:background-color .35s,box-shadow .35s}
.bar{display:flex;align-items:center;gap:20px;min-height:104px;transition:min-height .3s}

/* home: la cabecera flota transparente sobre el héroe (sin la foto) y se vuelve sólida al hacer scroll —
   igual que Linear/Stripe/Vercel. En el resto de páginas se queda con su foto de siempre. */
.site-header.transparent{position:fixed;left:0;right:0;top:0;background:none;box-shadow:none}
.site-header.transparent.scrolled{background:rgba(10,20,35,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(6,14,26,.25)}
/* con el menú móvil abierto, la cabecera (fija en la home) necesita fondo sólido: si no, se transparenta
   sobre el contenido que hay detrás mientras el desplegable crece más alto que la barra original. */
.site-header.transparent.open{background:#0a1626;max-height:100vh;overflow-y:auto}
.site-header.transparent.scrolled .bar{min-height:80px}
.logo{display:block;flex:none}
.logo img{display:block;width:172px;height:auto}
.nav{display:flex;gap:2px;margin:0 auto;padding:4px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav+.actions{margin-left:0}

/* menú principal: Soluciones / Recursos / Login, cada uno con su panel desplegable */
.menu-drop{position:relative}
.menu-drop summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;font:500 15px/1.2 var(--font-head);color:#fff;transition:background .2s}
.menu-drop summary::-webkit-details-marker{display:none}
.menu-drop summary:hover,.menu-drop[open] summary{background:rgba(255,255,255,.18)}
.menu-drop summary .caret{width:13px;height:13px;opacity:.75;transition:transform .2s}
.menu-drop[open] summary .caret{transform:rotate(180deg)}
.mm-panel{position:absolute;left:0;right:0;top:100%;margin-top:14px;background:#fff;border-radius:22px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(16,28,43,.06);z-index:40;animation:pop .16s ease-out;overflow:hidden}
.mm-panel::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(0,126,254,.06),transparent 60%);transition:opacity .3s}
.mm-panel:hover::before{opacity:1}

.mm-solutions{display:grid;grid-template-columns:1fr 1fr auto;gap:0;padding:28px 8px;left:50%;right:auto;width:min(760px,calc(100vw - 48px));transform:translateX(-50%)}
.mm-col{padding:0 24px;border-right:1px solid var(--line)}
.mm-col:last-child,.mm-col.mm-single{border-right:0}
.mm-head{display:block;margin-bottom:14px;font:700 15px/1.2 var(--font-head);color:var(--navy);text-decoration:none;padding-bottom:10px;border-bottom:2px solid transparent;background-image:linear-gradient(90deg,var(--sky),var(--blue));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s}
.mm-head:hover{background-size:100% 2px}
.mm-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mm-col li a{display:block;padding:8px 10px;margin:0 -10px;border-radius:10px;color:#4a5665;text-decoration:none;font:500 14.5px/1.4 var(--font-head);transition:background .15s,color .15s,transform .15s}
.mm-col li a:hover{background:var(--bg);color:var(--blue-dark);transform:translateX(2px)}
.mm-single{display:flex;align-items:center;justify-content:center;padding:0 8px 0 28px}
.mm-single-link{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border-radius:16px;background:linear-gradient(135deg,var(--ice),#fff);font:700 14.5px var(--font-head);color:var(--blue-dark);white-space:nowrap;border:0}
.mm-single-link svg{width:15px;height:15px;transition:transform .2s}
.mm-single-link:hover svg{transform:translateX(3px)}

.mm-simple{left:auto;right:0;width:260px;padding:10px}
.mm-simple a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;color:var(--navy);text-decoration:none;font:600 14.5px var(--font-head);transition:background .15s,transform .15s}
.mm-simple a:hover{background:var(--bg);transform:translateX(2px)}
.mm-simple a svg{width:15px;height:15px;color:#9fb0c3;flex:none}
.mm-login a{justify-content:flex-start}
.mm-ico{width:19px;height:19px;color:var(--blue);flex:none}

/* selector de idioma */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 14px/1 var(--font-head);letter-spacing:.04em;color:#fff;transition:background .2s,border-color .2s}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.40)}
.lang summary .globe{width:18px;height:18px;opacity:.9}
.lang summary .caret{width:14px;height:14px;opacity:.8;transition:transform .2s}
.lang[open] summary .caret{transform:rotate(180deg)}
.lang ul{position:absolute;right:0;top:calc(100% + 10px);min-width:206px;margin:0;padding:8px;list-style:none;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(16,28,43,.06);z-index:30;transform-origin:top right;animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.lang li a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--navy);text-decoration:none;font:500 15px/1.2 var(--font-head)}
.lang li a:hover{background:var(--bg)}
.lang li a[aria-current]{background:var(--ice);color:var(--blue-dark)}
.lang li img{width:24px;height:17px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px rgba(16,28,43,.12)}
.lang li .name{flex:1}
.lang li .tick{width:16px;height:16px;color:var(--blue)}

.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;border:0;border-radius:999px;padding:12px 24px;font:700 15px/1 var(--font-head);text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px rgba(0,126,254,.35);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,126,254,.45)}
.btn svg{width:16px;height:16px}
.menu-toggle{display:none;margin-left:auto;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font:600 14px var(--font-head);cursor:pointer}
.menu-toggle svg{width:18px;height:18px}
.menu-toggle > span{display:inline-flex;align-items:center;gap:8px}
.menu-toggle .mt-close,.site-header.open .menu-toggle .mt-open{display:none}
.site-header.open .menu-toggle .mt-close{display:inline-flex}

/* ================= portada ================= */
.hero{padding-top:34px;padding-bottom:128px;text-align:center}
.eyebrow{display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px;background:rgba(54,180,250,.18);border:1px solid rgba(54,180,250,.4);color:#bfe6ff;font:600 12px/1 var(--font-head);letter-spacing:.14em;text-transform:uppercase}
.hero h1{margin:0 auto 14px;max-width:820px;font:600 clamp(32px,4.6vw,52px)/1.08 var(--font-head);letter-spacing:-.01em}
.hero .lead{margin:0 auto 32px;max-width:640px;color:#d3deea;font-size:17px}
.hero-search{max-width:680px;margin:0 auto;text-align:left}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.chips a{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font:500 14px/1 var(--font-head);transition:background .2s}
.chips a:hover{background:rgba(255,255,255,.24)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:-84px;position:relative;z-index:2}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border-radius:var(--r-lg);padding:14px 14px 26px;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .pic{border-radius:calc(var(--r-lg) - 6px);overflow:hidden;aspect-ratio:16/9;background:radial-gradient(120% 120% at 50% 0%,#5cc6ff 0%,var(--sky) 45%,#1d9ae8 100%)}
.card .pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .pic img{transform:scale(1.04)}
.card h3{margin:20px 12px 8px;font:600 23px/1.2 var(--font-head);color:var(--navy)}
.card p{margin:0 12px;color:var(--muted);font-size:15px}
.card .more{margin:16px 12px 0;display:inline-flex;align-items:center;gap:6px;color:var(--blue);font:600 14px/1 var(--font-head)}
.card .more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(4px)}

.help{margin:88px auto 0}
.help-card{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:52px 56px;border-radius:32px;background:linear-gradient(135deg,var(--ice) 0%,#fff 70%);border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden}
.help h2{margin:0 0 14px;font:600 clamp(26px,3vw,36px)/1.15 var(--font-head);color:var(--navy)}
.help p{margin:0 0 26px;color:var(--muted);font-size:16px}
.help .art{display:flex;justify-content:center}
.help .art img{display:block;width:100%;max-width:340px;border-radius:26px;box-shadow:var(--shadow)}
.form-wrap{max-width:760px;margin:36px auto 0;padding:0 24px 96px;scroll-margin-top:24px}
.form-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px}

/* ================= buscador (Pagefind) ================= */
#search{--pagefind-ui-scale:1;--pagefind-ui-primary:var(--blue);--pagefind-ui-text:var(--text);--pagefind-ui-background:#fff;--pagefind-ui-border:transparent;--pagefind-ui-border-width:0;--pagefind-ui-border-radius:16px;--pagefind-ui-font:var(--font-body)}
#search .pagefind-ui__search-input{height:62px;padding-left:56px;border-radius:18px;font:500 17px var(--font-body);background-color:#fff;box-shadow:0 14px 40px rgba(6,16,30,.35);border:0;color:var(--navy)}
#search .pagefind-ui__search-input::placeholder{color:#8a94a0;opacity:1;font-weight:400}
#search .pagefind-ui__form::before{left:22px;top:20px;opacity:.6}
#search .pagefind-ui__search-clear{top:13px;right:12px;height:36px;border-radius:12px;background:var(--bg);color:var(--muted);font:500 13px var(--font-head)}
#search .pagefind-ui__drawer{margin-top:14px;padding:12px 22px 20px;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);color:var(--text)}
#search .pagefind-ui__message{font:500 14px var(--font-head);color:var(--muted)}
#search .pagefind-ui__result{border-top:1px solid var(--line);padding:16px 0}
#search .pagefind-ui__result-link{color:var(--navy);font:600 17px var(--font-head)}
#search .pagefind-ui__result-link:hover{color:var(--blue)}
#search .pagefind-ui__result-excerpt{color:var(--muted);font-size:14px}
#search mark{background:#fff0a8;color:inherit;border-radius:3px;padding:0 2px}
#search .pagefind-ui__button{border-radius:999px;color:var(--navy)}

/* ================= categorías ================= */
.page-head{padding-top:20px;padding-bottom:56px;text-align:left}
.page-head .crumbs{margin-bottom:14px}
.page-head h1{margin:0 0 26px;font:600 clamp(30px,4vw,44px)/1.1 var(--font-head)}
.page-head .hero-search{margin:0;max-width:640px}
.crumbs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{opacity:.85}
.site-header .crumbs{color:#b8c8d9}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:48px 0 72px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 26px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe3fb}
.tile .ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:10px;border-radius:14px;background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff}
.tile .ico svg{width:22px;height:22px}
.tile h3{margin:0;font:600 19px/1.25 var(--font-head);color:var(--navy)}
.tile small{color:var(--muted);font-size:13.5px}
.tile .date{color:#8b95a1;font-size:12.5px}
.tile .go{position:absolute;right:22px;top:26px;width:20px;height:20px;color:#9fb0c3;transition:transform .2s,color .2s}
.tile:hover .go{transform:translateX(4px);color:var(--blue)}
.list{list-style:none;margin:48px 0 72px;padding:0;display:grid;gap:12px}
.list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);color:var(--navy);text-decoration:none;font:500 16px/1.4 var(--font-head);transition:transform .15s,box-shadow .2s,border-color .2s}
.list a:hover{transform:translateX(4px);border-color:#cfe3fb;box-shadow:var(--shadow);color:var(--blue-dark)}
.list svg{width:18px;height:18px;color:#9fb0c3}
.grid+.list{margin-top:-24px}

/* ================= artículo ================= */
.compact{padding:0 0 44px}
.doc{display:grid;grid-template-columns:280px minmax(0,1fr) 224px;gap:44px;padding:44px 0 88px}
.side{font-size:14px;align-self:start;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.side details{margin:0}
.side summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;font:600 15px/1.3 var(--font-head);color:var(--navy)}
.side summary:hover{background:var(--bg)}
.side summary::-webkit-details-marker{display:none}
.side summary::after{content:"";width:8px;height:8px;border-right:2px solid #8b95a1;border-bottom:2px solid #8b95a1;transform:rotate(45deg) translate(-2px,-2px);margin-left:10px;transition:transform .2s}
.side details[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.side .sub summary{font-weight:500;font-size:14px;padding:8px 12px 8px 20px;color:#3a4654}
.side ul{list-style:none;margin:2px 0 8px 20px;padding:0 0 0 12px;border-left:2px solid var(--line)}
.side li a{display:block;padding:6px 10px;color:#4a5665;text-decoration:none;border-radius:8px;line-height:1.4}
.side li a:hover{background:var(--bg);color:var(--navy)}
.side li a[aria-current]{background:var(--ice);color:var(--blue-dark);font-weight:500}
.doc article{min-width:0}
.doc article .crumbs{margin-bottom:8px}
.doc article h1{margin:6px 0 26px;font:600 clamp(28px,3.4vw,38px)/1.18 var(--font-head);color:var(--navy);letter-spacing:-.01em}
.doc-body{font-size:16px;line-height:1.8;color:#2f3b48}
.doc-body h2{margin:1.9em 0 .6em;font:600 25px/1.3 var(--font-head);color:var(--navy);padding-top:.3em}
.doc-body h2::before{content:"";display:block;width:36px;height:4px;margin-bottom:12px;border-radius:4px;background:linear-gradient(90deg,var(--sky),var(--blue))}
.doc-body>h2:first-child{margin-top:.2em}
.doc-body h3{margin:1.5em 0 .5em;font:600 20px/1.3 var(--font-head);color:#1d6fc4}
.doc-body h4{margin:1.3em 0 .4em;font:600 17px/1.3 var(--font-head)}
.doc-body p{margin:0 0 1.1em}
.doc-body ul,.doc-body ol{margin:0 0 1.2em;padding-left:1.5em}
.doc-body li{margin:.3em 0}
.doc-body li::marker{color:var(--blue)}
.doc-body a{text-underline-offset:3px}
.doc-body img{display:block;margin:1.4em 0;border-radius:14px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.doc-body figure{margin:1.4em 0}
.doc-body figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.doc-body table{border-collapse:separate;border-spacing:0;width:100%;margin:1.4em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15px}
.doc-body td,.doc-body th{border-bottom:1px solid var(--line);padding:10px 14px;vertical-align:top}
.doc-body tr:last-child td{border-bottom:0}
.doc-body .video{position:relative;aspect-ratio:16/9;margin:1.6em 0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.doc-body .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.doc-body video{max-width:100%;margin:1em 0;border-radius:14px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--navy);font:500 15px/1.35 var(--font-head);transition:border-color .2s,box-shadow .2s}
.pager a:hover{border-color:#cfe3fb;box-shadow:var(--shadow-sm)}
.pager small{color:var(--muted);font:500 12px var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.pager .next{text-align:right;grid-column:2}
.toc{align-self:start;position:sticky;top:16px;font-size:13.5px}
.toc h4{margin:0 0 12px;font:600 12px var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li a{display:block;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;color:#4a5665;text-decoration:none;line-height:1.4}
.toc li.l3 a{padding-left:26px;font-size:13px}
.toc li a:hover{color:var(--blue)}
.toc li a.on{color:var(--blue);border-left-color:var(--blue);font-weight:500}

/* ================= pie ================= */
.site-footer{background:var(--navy);color:#c6d2df;padding:44px 0 32px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.foot img{display:block;width:150px;height:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot a{color:#c6d2df;text-decoration:none;font:500 14px var(--font-head)}
.foot a:hover{color:#fff}
.legal{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8fa1b5}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ================= adaptable ================= */
@media (max-width:1100px){
  .doc{grid-template-columns:250px minmax(0,1fr)}
  .toc{display:none}
  .cards{gap:20px}
  .help-card{padding:40px 36px}
}
@media (max-width:860px){
  .bar{flex-wrap:wrap;min-height:0;padding:16px 0;gap:12px}
  .logo img{width:140px}
  .menu-toggle{display:inline-flex}
  .nav,.actions{display:none}
  .site-header.open .nav{display:flex;flex-direction:column;width:100%;margin:0;border-radius:20px}
  .site-header.open .actions{display:flex;width:100%;justify-content:space-between;margin:0}
  .site-header.open .lang ul{left:0;right:auto;transform-origin:top left}
  /* menú abierto: panel blanco y opaco, opciones grandes y oscuras separadas por líneas (sobre el fondo oscuro de la
     cabecera se leía como algo desactivado) */
  .site-header.open{background:#0a1626;min-height:100vh;min-height:100dvh}
  .site-header.open .nav{padding:6px;background:#fff;border:0;box-shadow:0 22px 44px -20px rgba(0,0,0,.7);-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header.open .menu-toggle{background:#fff;color:var(--ink);border-color:#fff}
  .menu-drop summary{padding:16px 14px;color:var(--navy);font-size:17px;font-weight:650;justify-content:space-between}
  .site-header.open .menu-drop + .menu-drop{border-top:1px solid var(--line)}
  .menu-drop summary svg{width:20px;height:20px;color:var(--navy)}
  .menu-drop summary:hover,.menu-drop[open] summary{background:rgba(16,28,43,.06)}
  .mm-panel,.mm-panel.mm-solutions,.mm-panel.mm-simple{position:static;left:auto;right:auto;top:auto;transform:none;width:auto;margin:4px 0 8px;box-shadow:none;border:1px solid var(--line);animation:none}
  .mm-solutions{grid-template-columns:1fr}
  .mm-col{border-right:0;padding:16px 18px;border-bottom:1px solid var(--line)}
  .mm-col:last-child{border-bottom:0}
  .mm-single{padding:16px 18px;justify-content:flex-start}
  .hero{padding-top:12px;padding-bottom:104px}
  .cards{grid-template-columns:1fr;margin-top:-64px}
  .help-card{grid-template-columns:1fr;padding:32px 24px;gap:24px}
  .help .art img{max-width:260px}
  .grid{grid-template-columns:1fr 1fr}
  .doc{display:flex;flex-direction:column;gap:32px;padding-top:28px}
  .doc article{order:1}
  .side{order:2;position:static;max-height:none;border:1px solid var(--line);border-radius:14px;padding:8px}
  #search .pagefind-ui__search-input{height:56px;font-size:16px}
  .pager{grid-template-columns:1fr}.pager .next{grid-column:auto}
}
@media (max-width:540px){.grid{grid-template-columns:1fr}.wrap{padding-left:18px;padding-right:18px}}

/* ================= home del sitio principal ================= */
/* héroe: degradado oscuro con dos manchas de luz que derivan despacio ("aurora"), inspirado en el fondo
   liso azul del sitio en vivo pero con más profundidad; se apaga con prefers-reduced-motion. */
/* héroe: cabecera flotante encima (ver .site-header.transparent), degradado "aurora" con dos manchas de luz
   que derivan despacio, una retícula sutil y un halo que sigue el cursor — inspirado en las composiciones de
   ui.aceternity.com (Aurora Background + Background Grid + Spotlight), en CSS/JS propios. */
.hero-aurora{position:relative;overflow:hidden;background:linear-gradient(160deg,#070f1e 0%,#0f2c56 42%,#1c58ab 100%);padding-top:172px;padding-bottom:104px}
.hero-aurora::before,.hero-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;animation:auroraDrift 20s ease-in-out infinite alternate;z-index:0}
.hero-aurora::before{width:560px;height:560px;background:radial-gradient(circle,var(--sky),transparent 70%);top:-200px;left:-160px}
.hero-aurora::after{width:480px;height:480px;background:radial-gradient(circle,#8b6cff,transparent 70%);bottom:-240px;right:-130px;animation-delay:-10s}
@keyframes auroraDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,40px) scale(1.18)}}
.hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 85%);pointer-events:none}
.hero-glow{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;background:radial-gradient(480px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 60%);pointer-events:none}
.hero-aurora:hover .hero-glow{opacity:1}
.hero.main{position:relative;z-index:1;padding-top:0;padding-bottom:0;text-align:center;color:#fff}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;padding:8px 18px 8px 14px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#eaf3ff;font:600 13px var(--font-head);letter-spacing:.02em}
.eyebrow-pill svg{width:15px;height:15px;color:#7fe0a8;flex:none}
.hero.main h1{margin:0 auto 20px;max-width:840px;font:600 clamp(32px,4.6vw,50px)/1.15 var(--font-head);letter-spacing:-.015em;text-shadow:0 2px 40px rgba(20,80,200,.35)}
.hero.main .lead{margin:0 auto 34px;max-width:620px;color:#d7e6fb;font-size:17.5px;line-height:1.6}
.btn.light{background:#fff;color:var(--navy);box-shadow:0 10px 26px rgba(6,16,30,.28)}
.btn.light:hover{box-shadow:0 14px 32px rgba(6,16,30,.36)}

/* revelado de entrada del héroe (título, texto, botón), escalonado por --d */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .7s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

.video-frame{position:relative;max-width:940px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#0a1420;flex:none}

.logos{position:relative;z-index:2;margin-top:0;padding:64px 0}
.logos-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px 32px}
.logos-card h2{margin:0 0 24px;text-align:center;font:600 22px/1.2 var(--font-head);color:var(--slate)}

.section{padding:72px 0}
.section.soft{background:var(--bg)}
.section .title{margin:0 0 40px;text-align:center;font:600 clamp(26px,3vw,34px)/1.2 var(--font-head);color:var(--navy)}

/* "Cómo podemos ayudarte": reutiliza la tarjeta premium (halo + revelado) de las páginas directorio */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.help-box{padding:32px 30px}
.help-box h3{position:relative;z-index:1;margin:0 0 12px;font:600 22px/1.3 var(--font-head);color:var(--navy)}
.help-box p{position:relative;z-index:1;margin:0 0 18px;color:var(--muted);font-size:15.5px;line-height:1.7}
.help-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;color:var(--blue);font:600 14px var(--font-head)}
.help-cta svg{width:15px;height:15px;transition:transform .2s}
.help-box:hover .help-cta svg{transform:translateX(3px)}

/* vídeo: texto a un lado, reproductor al otro */
.video-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.video-section h2{margin:0 0 14px;font:600 clamp(24px,2.8vw,32px)/1.2 var(--font-head);color:var(--navy)}
.video-section p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.7}

.features{display:flex;flex-direction:column;gap:64px}
.section.features>.title{margin-bottom:8px}
.section.features>.feature:first-of-type{margin-top:48px}
.feature{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.feature.rev .feature-media{order:2}
.feature-media img{display:block;width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.feature-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:16px;border-radius:13px;background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff;font:700 19px var(--font-head);box-shadow:0 8px 18px rgba(0,126,254,.3)}
.feature-body h3{margin:0 0 16px;font:600 clamp(24px,2.8vw,32px)/1.2 var(--font-head);color:var(--navy)}
.feature-body p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.7}

.award{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 12px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.award img{display:block;width:100%;max-width:110px;height:auto}
.award .yr{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--ice);color:var(--blue-dark);font:600 12px var(--font-head)}
.award .nm{font:500 13px/1.35 var(--font-head);color:#3a4654}
.awards-marq{padding:6px 0 4px}
.awards-marq .award{width:172px;flex:none}

/* testimonios reales de clientes */
.review{flex:none;width:340px;align-self:stretch;display:flex;flex-direction:column;padding:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-top img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg)}
.review-top strong{display:block;font:600 15px var(--font-head);color:var(--navy)}
.review-top span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.review-stars{display:flex;gap:2px;margin-bottom:10px}
.review-stars .star{width:15px;height:15px;color:var(--line)}
.review-stars .star.on{color:#f5a623}
.review p{margin:0;font-size:14.5px;line-height:1.6;color:#3a4654}
.reviews-marq .set{align-items:stretch}

/* ---- carruseles (logos, premios y testimonios) ---- */
.marq-wrap{position:relative}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.marquee .track{display:flex;width:max-content;animation:marq var(--dur,40s) linear infinite;will-change:transform}
.marquee .set{display:flex;flex:none;align-items:center;gap:var(--gap,56px);padding-right:var(--gap,56px)}
.marq-wrap:hover .track,.marq-wrap:focus-within .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.logos-marq .set img{display:block;height:44px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.logos-marq .set img:hover{filter:none;opacity:1}

.btn.lg{padding:15px 30px;font-size:16px}

/* fondo de puntos (sección de reconocimientos, sobre fondo claro) */
.dotted{position:relative}
.dotted::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(16,28,43,.12) 1.5px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 40%,transparent 90%);mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 40%,transparent 90%);pointer-events:none}
.dotted>.wrap{position:relative;z-index:1}

/* CTA final: banda azul a toda anchura con el mismo patrón de puntos, como en el sitio en vivo */
.cta-final{position:relative;text-align:center;background:linear-gradient(135deg,#134a92 0%,var(--blue) 100%);color:#fff;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1.5px,transparent 1.5px);background-size:22px 22px;pointer-events:none}
.cta-final .wrap{position:relative;z-index:1;max-width:760px}
.cta-final h2{margin:0 0 16px;font:600 clamp(26px,3vw,36px)/1.25 var(--font-head)}
.cta-final p{margin:0 0 30px;color:#dce8fb;font-size:16px;line-height:1.7}

@media (prefers-reduced-motion:reduce){.marquee .track{animation:none!important}.hero-aurora::before,.hero-aurora::after{animation:none!important}}
@media (max-width:900px){
  .feature,.feature.rev .feature-media{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .feature.rev .feature-media{order:0}
  .video-section{grid-template-columns:1fr;text-align:center}
  .help-grid{grid-template-columns:1fr}
}
@media (max-width:860px){.logos{padding-top:96px}.hero-video{margin-bottom:-56px}}
@media (max-width:540px){.logos-card{padding:26px 18px}.section{padding:52px 0}}
@media (max-width:420px){.hero.main .btn.lg{white-space:normal;text-align:center;padding:14px 22px}.hero-aurora{padding-top:156px}}

/* ================= páginas principales (extracción genérica) ================= */
.page-body{max-width:820px;margin:0 auto;padding:8px 0 88px}
.page-body figure{margin:1.6em 0}
.page-body h2:first-child{margin-top:0}

/* ================= fichas de catálogo/casos de éxito/informes + sus índices ================= */
.content-hero{padding:44px 0 0;background:linear-gradient(180deg,var(--bg) 0%,#fff 100%)}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;color:var(--blue-dark);font:600 13px var(--font-head);text-decoration:none}
.back-link .back-arrow{width:14px;height:14px;transform:scaleX(-1)}
.back-link:hover{text-decoration:underline}
.type-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:18px;border-radius:15px;background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff;box-shadow:0 8px 20px rgba(0,126,254,.28)}
.type-badge svg{width:23px;height:23px}
.content-hero h1{margin:0 0 18px;max-width:780px;font:600 clamp(26px,3.6vw,38px)/1.22 var(--font-head);color:var(--navy)}
.meta-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.meta-badges .badge{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--slate);font:600 13.5px var(--font-head);box-shadow:var(--shadow-sm)}
.meta-badges .badge svg{width:14px;height:14px;color:var(--blue)}
.cover-figure{margin:0 auto 8px;max-width:940px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.cover-figure img{display:block;width:100%;max-height:440px;object-fit:cover}

/* índices (Informes/Casos de éxito/Catálogo/Podcast/Blog): el título vive dentro del propio <header>, sobre
   la misma foto que la barra de navegación -- igual que en support.gamestrategies.io o store.gamestrategies.io
   -- en vez de una banda de color aparte (se veía como un header cortado en lugar de un héroe con entidad
   propia). Por eso no lleva fondo ni tipografía heredados de ".content-hero": ese es para las fichas de
   detalle, con su propio fondo claro en el cuerpo de la página. */
.hub-hero{text-align:center;padding:40px 0 56px}
.hub-hero .type-badge{background:rgba(255,255,255,.16);box-shadow:none}
.hub-hero h1{margin:0 auto 14px;max-width:780px;font:600 clamp(26px,3.6vw,38px)/1.22 var(--font-head);color:#fff}
.hub-intro{max-width:620px;margin:0 auto;color:var(--muted);font-size:16.5px;line-height:1.7}
.hub-hero .hub-intro{color:rgba(255,255,255,.82)}
@media (max-width:640px){.meta-badges{margin-bottom:28px}.content-hero{padding-top:32px}.hub-hero{padding:24px 0 40px}}

.faq{max-width:100%;margin:1.6em 0;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:600 17px/1.35 var(--font-head);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details[open]{border-color:#cfe3fb}
.faq .ans{padding:0 22px 20px;color:#475464}

.mini-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:1.6em 0}
.mg-item{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.mg-item img{width:100%;height:100%;object-fit:cover}
.mg-item span{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg,rgba(9,22,37,.75),transparent);color:#fff;font:600 14px var(--font-head)}

/* bloques "raw" heredados de widgets personalizados de Elementor: se limpia el estilo inline propio y se deja
   legible con la tipografía del sitio hasta que se rediseñen a mano */
.page-body style{display:none}

/* ================= cuadrículas premium de recursos (informes, casos de éxito, catálogo) ================= */
/* Inspirado en los efectos de ui.aceternity.com (glow/spotlight card, moving border), reconstruido en CSS y
   JS propios (sin React/Framer Motion): site.js escribe --mx/--my con la posición del cursor sobre la
   tarjeta, y aquí se pinta un halo que la sigue; el revelado al hacer scroll añade la clase .in (con un
   pequeño retraso escalonado por tarjeta, --d) cuando entra en el viewport. */
.res-section{padding:48px 0 96px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}

/* cifras destacadas de un caso de éxito (p. ej. "40% de aumento..."), agrupadas en fila en vez de tratarlas
   como subtítulos sueltos -- ver cleanDetailBlocks/statgroup en build.mjs. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin:32px 0}
.stat-card{padding:26px 22px;background:var(--bg);border-radius:var(--r);text-align:center}
.stat-card strong{display:block;margin-bottom:8px;font:700 clamp(32px,4vw,42px)/1 var(--font-head);color:var(--blue)}
.stat-card span{color:var(--muted);font-size:14px;line-height:1.5}

/* botón secundario (p. ej. "Ver tráiler"): mismo tamaño que .btn pero sin el degradado, para no competir
   con la llamada a la acción principal de la página. */
.btn-ghost{background:#fff;color:var(--blue-dark);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:#cfe3fb;box-shadow:0 6px 16px rgba(0,126,254,.12);transform:translateY(-1px)}

/* "Sigue explorando": 3 fichas más del mismo tipo al final de una ficha de detalle. */
.related-section h2{margin:0 0 24px;font:600 clamp(22px,2.6vw,28px)/1.2 var(--font-head);color:var(--navy)}

/* selector (chips de competencia/sector) y orden: viven dentro del héroe, sobre la misma foto que la barra
   de navegación (ver .hub-hero más arriba) -- por eso van centrados y en "cristal" claro sobre fondo oscuro,
   no como tarjeta blanca. Ya no hay buscador de texto en ninguna página: todo se filtra por categoría. Todo
   se resuelve en el cliente, sin recargar la página (ver site.js). */
.filter-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;margin:28px auto 0;max-width:820px}
.filter-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;font:600 13px var(--font-head);cursor:pointer;transition:background .2s,border-color .2s}
.chip:hover{background:rgba(255,255,255,.22)}
.chip.is-active{background:#fff;border-color:#fff;color:var(--navy)}
.filter-sort-wrap{display:flex;align-items:center;gap:8px;font:600 13px var(--font-head);color:rgba(255,255,255,.85);white-space:nowrap}
.filter-sort-wrap select{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font:600 13px var(--font-head);cursor:pointer}
.filter-count{margin:0 2px 18px;color:var(--muted);font-size:13.5px}
.filter-empty{padding:56px 24px;text-align:center;color:var(--muted);font-size:15px}

.res-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  opacity:0;transform:translateY(26px);
  transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.16,1,.3,1) var(--d,0ms),box-shadow .3s,border-color .3s,translate .3s;
}
.res-card.in{opacity:1;transform:none}
.res-card:hover{translate:0 -6px;box-shadow:var(--shadow-lg);border-color:#cfe3fb}
.res-card[hidden]{display:none}
/* halo de foco que sigue el cursor, contenido dentro de la propia tarjeta */
.res-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(0,126,254,.12),transparent 65%)}
.res-card:hover::after{opacity:1}
.res-card-img{position:relative;z-index:1;aspect-ratio:16/10;background:linear-gradient(135deg,var(--ice),#eef4fb);overflow:hidden}
.res-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.res-card:hover .res-card-img img{transform:scale(1.06)}
.dur-badge{position:absolute;right:10px;bottom:10px;z-index:2;padding:3px 9px;border-radius:8px;background:rgba(10,20,35,.78);color:#fff;font:700 12px var(--font-head);letter-spacing:.02em}
.res-card h3{position:relative;z-index:1;margin:16px 18px 20px;font:600 17px/1.35 var(--font-head);color:var(--navy)}

/* categorías del hub de Recursos: tarjetas oscuras tipo "bento" con icono y borde animado al pasar el ratón */
.res-card-cat{justify-content:center;align-items:center;gap:14px;min-height:176px;background:linear-gradient(155deg,#0d1826 0%,var(--navy) 45%,#123457 100%);border-color:transparent}
.res-card-cat::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(120,190,255,.30),transparent 65%)}
.res-card-cat .cat-ico{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#8fd0ff;transition:transform .3s,background .3s}
.res-card-cat:hover .cat-ico{transform:scale(1.08) rotate(-4deg);background:rgba(255,255,255,.16)}
.res-card-cat .cat-ico svg{width:24px;height:24px}
.res-card-cat h3{position:relative;z-index:1;margin:0;text-align:center;font-size:19px;color:#fff}
/* borde animado (equivalente propio del "Moving Border" de Aceternity): un degradado que recorre el
   perímetro, recortado a un anillo de 1.5px con la técnica mask+xor — sin dependencias, solo CSS */
.res-card-cat::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,var(--sky) 40%,#fff 50%,var(--blue) 60%,transparent 80%);
  background-size:250% 250%;background-position:0% 0%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;
}
.res-card-cat:hover::before{opacity:1;animation:borderFlow 2.6s linear infinite}
@keyframes borderFlow{to{background-position:250% 250%}}

@media (prefers-reduced-motion:reduce){.res-card{opacity:1;transform:none;transition:none}.res-card-cat:hover::before{animation:none}}
@media (max-width:540px){.res-grid{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.res-grid{grid-template-columns:1fr}}

/* ================= artículo de blog ================= */
.tag-pill{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff;font:600 12.5px/1 var(--font-head);letter-spacing:.03em;text-decoration:none;box-shadow:0 8px 18px rgba(0,126,254,.28);transition:transform .15s}
.tag-pill:hover{transform:translateY(-1px)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:0}
.article-meta .badge svg{color:#9fb0c3}
.lede{max-width:760px;margin:0 auto 1.6em;font:400 19px/1.6 var(--font-body);color:#465262}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:48px;align-items:start;padding:40px 0 0}
.article-grid .doc-body{max-width:760px}
.article-grid.no-toc{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}
@media (max-width:1100px){.article-grid{grid-template-columns:minmax(0,1fr)}.article-grid .toc{display:none}}

.article-foot{max-width:760px;margin:56px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;border-top:1px solid var(--line)}
.share{display:flex;align-items:center;gap:10px}
.share span{font:600 13px var(--font-head);color:var(--muted)}
.share a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bg);color:var(--slate);transition:background .2s,color .2s,transform .2s}
.share a:hover{background:var(--ice);color:var(--blue-dark);transform:translateY(-2px)}
.share a svg{width:17px;height:17px}

.article-cta{max-width:760px;margin:40px auto 0;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 38px;border-radius:var(--r-lg);background:linear-gradient(135deg,#134a92 0%,var(--blue) 100%);color:#fff;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.article-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);background-size:20px 20px;pointer-events:none}
.article-cta>div{position:relative;z-index:1}
.article-cta h3{margin:0 0 6px;font:600 20px/1.3 var(--font-head)}
.article-cta p{margin:0;color:#dce8fb;font-size:14.5px;max-width:420px}
.article-cta .btn{position:relative;z-index:1;flex:none}

.blog-card-body{padding:0 18px 20px}
.blog-card-body h3{margin:14px 0 8px;font-size:18px}
.blog-card-date{position:relative;z-index:1;display:block;margin-top:16px;padding:0 18px;font:600 12px var(--font-head);letter-spacing:.04em;text-transform:uppercase;color:var(--blue-dark)}
.blog-card-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

.related{max-width:1000px;margin:72px auto 0}
.related h2{margin:0 0 28px;text-align:center;font:600 clamp(22px,2.6vw,28px)/1.2 var(--font-head);color:var(--navy)}
.related .res-grid{grid-template-columns:repeat(3,1fr)}
.related .res-card.in{opacity:1;transform:none}
@media (max-width:700px){.article-cta{flex-direction:column;text-align:center;padding:28px 26px}.article-cta p{max-width:none}.related .res-grid{grid-template-columns:1fr}.article-foot{flex-direction:column;align-items:flex-start;gap:16px}}

/* ================= paginación del índice del blog ================= */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:56px 0 8px}
.blog-pagination .step{display:inline-flex;align-items:center;gap:6px;padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;font:600 14px var(--font-head);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .15s}
.blog-pagination .step:hover{border-color:#cfe3fb;box-shadow:var(--shadow);transform:translateY(-1px)}
.blog-pagination .step svg{width:15px;height:15px}
.blog-pagination .step.prev svg{transform:scaleX(-1)}
.blog-pagination .step.is-disabled{visibility:hidden}
.blog-pagination .count{font:600 13px var(--font-head);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
@media (max-width:480px){.blog-pagination{gap:10px}.blog-pagination .step span{display:none}}

/* ===================================================================================================
   Sistema de diseño "Jugar en serio" (el de la home), para todo el sitio. Se sirve concatenado DESPUÉS de
   style.css (mismo archivo, ver build.mjs), así que aquí se redefinen tokens y se reescriben los
   componentes comunes sin tocar la hoja base.
   - Una sola familia, Archivo (variable: anchura 62–125 %, peso 100–900): ancha y pesada en titulares,
     normal para leer.
   - Tinta #0B1B30 para las superficies oscuras (héroes, cifras, cierre), papel #F3F6FA para alternar
     secciones claras y oro de trofeo #FFB547 solo como acento (logros, barras de récord, insignias).
   - Botones en el azul accesible de la marca (#0064D1: 5,6:1 con blanco; #007EFE no llega a AA) con
     "suelo" de recreativa que se hunde al pulsar.
   Plantillas: .lp-* (páginas de solución), .dt-* (fichas de juego/caso/informe), .hub-hero (índices).
   =================================================================================================== */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-var.woff2) format("woff2")}
:root{
  --font-head:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#0B1B30; --ink-2:#13263F; --paper:#F3F6FA; --gold:#FFB547; --rule:#D9E1EB; --mist:#A9B8CC; --fog:#C3D0E0;
  --action:#0064D1; --action-hover:#0073F0; --action-floor:#003F86;
  --navy:#0B1B30; --navy-2:#13263F; --bg:#F3F6FA; --line:#D9E1EB; --text:#1B2A3D; --muted:#566A82; --link:#0064D1;
}
body{font-family:var(--font-body)}

/* ---------- botones ---------- */
.btn{gap:8px;background:var(--action);color:#fff;border-radius:999px;padding:13px 24px;font:680 15.5px/1.1 var(--font-body);box-shadow:0 4px 0 var(--action-floor);transition:background-color .2s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--action-hover);transform:none;box-shadow:0 4px 0 var(--action-floor)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--action-floor)}
.btn-lg{min-height:54px;padding:0 28px;font-size:16.5px;justify-content:center}
.btn-quiet{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.36)}
.btn-quiet:hover{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.btn-quiet:active{transform:none;box-shadow:inset 0 0 0 1.5px #fff}
.btn-ghost{background:#fff;color:var(--action);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn-ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--action)}
.site-header .header-cta{box-shadow:0 3px 0 var(--action-floor)}
/* la llamada del final de un artículo va sobre fondo azul: ahí el botón es blanco para no fundirse */
.article-cta .btn{background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(6,16,30,.3)}

/* ---------- cabecera con héroe (soluciones, fichas, índices) ----------
   Misma superficie que la home: tinta con un halo azul; la foto de siempre queda de fondo, muy apagada. */
.site-header:has(.lp-hero),.site-header:has(.dt-hero),.site-header:has(.hub-hero){
  background:radial-gradient(55% 80% at 88% 18%,rgba(0,126,254,.32),rgba(0,126,254,0) 70%),linear-gradient(180deg,rgba(11,27,48,.88) 0%,rgba(11,27,48,.94) 100%),var(--ink) var(--hero-img,url(/assets/header-bg.jpg)) center 35%/cover no-repeat;
}

/* ---------- héroe de página de solución ---------- */
.lp-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,4.5vw,64px);align-items:center;padding-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(64px,7vw,104px);color:#fff}
.lp-hero-solo{grid-template-columns:minmax(0,1fr);max-width:980px}
.lp-hero h1{margin:0;font:840 clamp(34px,4.4vw,60px)/1 var(--font-head);font-stretch:118%;letter-spacing:-.03em;text-wrap:balance}
.lp-hero-doc{padding-bottom:56px}
.lp-hero-doc h1{font-size:clamp(32px,3.8vw,48px)}
.lp-lead{max-width:34em;margin:24px 0 0;color:var(--fog);font-size:clamp(17px,1.35vw,19.5px);line-height:1.55;text-wrap:pretty}
.lp-btns{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.lp-hero .lp-btns{margin-top:34px}
.lp-hero-media{margin:0}
.lp-hero-media img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:20px;box-shadow:0 40px 80px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.lp-hero-media .video-frame{max-width:none;border-radius:20px;box-shadow:0 40px 80px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}

/* ---------- secciones de página de solución ---------- */
.lp{background:#fff}
.lp-sec{padding:clamp(64px,7.5vw,104px) 0;content-visibility:auto;contain-intrinsic-size:auto 800px}
.lp-alt{background:var(--paper)}
.lp-head{max-width:880px;margin-bottom:clamp(32px,4vw,48px)}
.lp-head h2{margin:0;font:800 clamp(30px,3.7vw,48px)/1.04 var(--font-head);font-stretch:116%;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.lp-head h2 *{font:inherit}
.lp-intro{margin-top:18px;max-width:46em;color:var(--muted);font-size:18px;line-height:1.6}
.lp-intro p{margin:0 0 .8em}
.lp-prose{max-width:820px}
.lp-prose > :first-child{margin-top:0}
/* grupos imagen + H3 + texto: filas alternas */
.lp-rows{display:grid;gap:clamp(56px,6vw,88px)}
.lp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px);align-items:center}
.lp-row-rev .lp-row-media{order:2}
.lp-row-media{margin:0}
.lp-row-media img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 30px 60px -40px rgba(11,27,48,.55)}
.lp-row-body h3{margin:0 0 14px;font:780 clamp(23px,2.3vw,30px)/1.15 var(--font-head);font-stretch:112%;letter-spacing:-.015em;color:var(--ink)}
.lp-row-body,.lp-row-body p{color:var(--muted);font-size:17px;line-height:1.65}
.lp-row-body p{margin:0 0 .8em}
.lp-row-body ul{padding-left:1.2em;color:var(--muted)}
/* grupos sin imagen: tarjetas */
.lp-cards{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.lp-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-cards li{padding:26px 26px 24px;border-radius:18px;background:var(--paper)}
.lp-alt .lp-cards li{background:#fff}
.lp-cards img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 18px;border-radius:12px}
.lp-cards h3{margin:0 0 8px;font:760 20px/1.25 var(--font-head);font-stretch:110%;color:var(--ink)}
.lp-cards p{margin:0 0 .6em;color:var(--muted);font-size:15.5px;line-height:1.55}
/* cifras: el mismo "récord" de la home (tinta, número ancho y barra dorada) */
.lp-stats,.dt .stat-row{list-style:none;margin:32px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.lp-stats li,.dt .stat-card{padding:26px 26px 28px;border-radius:18px;background:var(--ink);color:#fff;text-align:left}
.lp-stats b,.dt .stat-card strong{display:block;margin:0;font:820 clamp(44px,4.6vw,60px)/.95 var(--font-head);font-stretch:125%;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums lining-nums}
.lp-stats b::after,.dt .stat-card strong::after{content:"";display:block;width:36px;height:5px;margin:16px 0 14px;border-radius:5px;background:var(--gold)}
.lp-stats span,.dt .stat-card span{display:block;color:var(--fog);font-size:15.5px;line-height:1.45}
/* galería "Más allá de…": tarjetas que llevan a cada solución */
.lp-gallery{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.lp-gallery li > *{display:block;border-radius:18px;overflow:clip;background:#fff;box-shadow:0 0 0 1px var(--rule);text-decoration:none;color:var(--ink)}
.lp-gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lp-gallery span{display:block;padding:14px 18px 16px;font:760 17px/1.25 var(--font-head);font-stretch:110%}
.lp-gallery a:hover img{transform:scale(1.04)}
.lp-gallery a:hover span{text-decoration:underline;text-underline-offset:4px}
/* banda de logos de clientes (sustituye al titular suelto "5.000+ clientes en 20 años") */
.lp-logos{padding:44px 0 52px;background:#fff;border-bottom:1px solid var(--rule)}
.lp-logos h2{margin:0 auto 28px;font:680 clamp(19px,1.7vw,22px)/1.3 var(--font-head);font-stretch:108%;text-align:center;color:var(--muted)}

/* ---------- cintas en bucle (logos y premios; home y páginas de solución) ---------- */
.hv2-mqs{display:grid;gap:26px}
.hv2-mq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hv2-mq ul{flex:none;display:flex;align-items:center;gap:64px;margin:0;padding:0 64px 0 0;list-style:none;animation:hv2-mq 90s linear infinite}
.hv2-mq-b ul{animation-direction:reverse;animation-duration:100s}
.hv2-mq:hover ul{animation-play-state:paused}
.hv2-mq img{display:block;max-width:none;height:auto;opacity:.85}
@keyframes hv2-mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .hv2-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .hv2-mq ul{animation:none}
  .hv2-mq ul[aria-hidden]{display:none}
}
@media (max-width:640px){.hv2-mq:not(.hv2-mq-aw) ul{gap:44px;padding-right:44px}}

/* ---------- cierre: el de la home, en todas las páginas de solución y fichas ---------- */
.lp-final{padding:clamp(64px,7.5vw,104px) 0;background:var(--ink);color:#fff}
.lp-final .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 72px;align-items:center}
.lp-final h2{margin:0;font:840 clamp(40px,5.4vw,72px)/.98 var(--font-head);font-stretch:125%;letter-spacing:-.03em}
.lp-final p{margin:0 0 28px;color:var(--fog);font-size:17px;line-height:1.6}

/* ---------- texto largo (cuerpo de fichas, textos legales, prosa de secciones) ---------- */
.doc-body{color:#2A3A4E}
.doc-body h2{font:780 clamp(24px,2.4vw,30px)/1.2 var(--font-head);font-stretch:112%;letter-spacing:-.015em;color:var(--ink)}
.doc-body h2::before{width:36px;height:5px;background:var(--gold)}
.doc-body h3{font:740 20px/1.3 var(--font-head);font-stretch:108%;color:var(--ink)}
.doc-body li::marker{color:var(--action)}
.faq summary{font:720 17.5px/1.35 var(--font-head);color:var(--ink)}
.faq summary::after{border-color:var(--action)}
.faq details{border-color:var(--rule);box-shadow:none}
.faq details[open]{box-shadow:inset 4px 0 0 var(--gold);border-color:var(--rule)}
.video-frame{border-radius:20px}
/* el reproductor (Vimeo/YouTube) ocupa todo su marco 16:9; sin esto se quedaba en los 300×150 por defecto */
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- ficha de detalle (videojuego, caso de éxito, informe) ---------- */
.dt-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(56px,6vw,88px);color:#fff}
.dt-hero-solo{grid-template-columns:minmax(0,1fr);max-width:900px}
.dt-hero h1{margin:0 0 22px;font:820 clamp(30px,3.8vw,52px)/1.02 var(--font-head);font-stretch:116%;letter-spacing:-.028em;text-wrap:balance}
.dt-hero .back-link{margin-bottom:20px;color:var(--fog)}
.dt-hero .back-link:hover{color:#fff}
.dt-hero .meta-badges{margin:0}
.dt-hero .meta-badges .badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;box-shadow:none}
.dt-hero .meta-badges .badge svg{color:var(--gold)}
/* la portada, como una carta de juego: marco blanco y un poco girada */
.dt-cover{margin:0;justify-self:center;width:100%;max-width:520px;padding:8px;border-radius:22px;background:#fff;transform:rotate(2.5deg);box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.dt-cover img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:15px}
.dt .page-body{padding-top:56px}
.dt .res-section{padding-top:24px}
.dt .related-section h2{font:800 clamp(26px,2.8vw,34px)/1.1 var(--font-head);font-stretch:116%;color:var(--ink)}

/* ---------- índices (catálogo, casos de éxito, informes, podcast, blog) ---------- */
.hub-hero h1{font:840 clamp(34px,4.4vw,58px)/1 var(--font-head);font-stretch:120%;letter-spacing:-.03em;text-wrap:balance}
.hub-hero .type-badge{background:var(--gold);color:var(--ink);border-radius:14px;transform:rotate(-4deg)}
.hub-hero .hub-intro{color:var(--fog);font-size:18px}
.chip{font:650 13.5px var(--font-body)}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.filter-sort-wrap,.filter-sort-wrap select{font-family:var(--font-body)}
.res-card{border-radius:18px;border-color:var(--rule)}
.res-card h3{font:720 17px/1.3 var(--font-head);font-stretch:106%;color:var(--ink)}
.filter-count{color:var(--muted)}

/* ---------- pie ---------- */
.site-footer{background:var(--ink);color:var(--fog);padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr));gap:40px 28px}
.foot-brand p{margin:18px 0 22px;max-width:18em;color:var(--fog);font:640 18px/1.35 var(--font-head);font-stretch:108%}
.foot-badges{display:flex;align-items:center;gap:22px}
.foot-badges img{display:block;height:auto}
.foot-badges a{display:block;border-radius:4px;transition:transform .2s}
.foot-badges a:hover{transform:translateY(-2px)}
.foot-badges a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.foot-col h2{margin:0 0 14px;font:700 13.5px/1.2 var(--font-head);color:#fff}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a,.foot-legal a{color:var(--fog);text-decoration:none;font:500 14.5px/1.35 var(--font-body)}
.foot-col a:hover,.foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.foot-legal p{margin:0 auto 0 0;color:#8fa1b5;font-size:13.5px}
.foot-legal a{font-size:13.5px}

/* ---------- adaptable ---------- */
@media (max-width:1060px){
  .lp-hero,.dt-hero{grid-template-columns:minmax(0,1fr)}
  .lp-hero-media,.dt-cover{max-width:640px}
  .lp-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .lp-row{grid-template-columns:minmax(0,1fr)}
  .lp-row-rev .lp-row-media{order:0}
  .lp-final .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .lp-cols-2,.lp-cols-3{grid-template-columns:minmax(0,1fr)}
  .lp-hero .lp-btns .btn{flex:1 1 100%}
  .dt-cover{transform:rotate(1.5deg)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- secciones propias de Elementor en las páginas de AI Role Play y webinar ----------
   Llegan como HTML (<section class="gs-...">) sin la hoja de estilos del WordPress. Se pintan aquí con el
   mismo lenguaje que el resto: resultados = récords en tinta, "cómo funciona" = pasos numerados (sí es una
   secuencia), beneficios = barras doradas + tarjetas con icono, cierre = banda de tinta como .lp-final. */
.lp > section[class^="gs-"]{padding:clamp(64px,7.5vw,104px) 0}
.lp [class$="__wrap"],.lp .gs-cta-wave__inner,.lp .gs-live-benefits__inner{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.lp [class^="gs-"] h2{margin:0;font:800 clamp(30px,3.7vw,48px)/1.04 var(--font-head);font-stretch:116%;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.lp [class^="gs-"] p{text-wrap:pretty}
.gs-results-pipeline{background:#fff}
.gs-results-pipeline__top{margin-bottom:40px}
.gs-results-pipeline__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.gs-result-card{padding:26px 26px 28px;border-radius:18px;background:var(--ink);color:#fff}
.gs-result-card__number{font:820 clamp(44px,4.6vw,60px)/.95 var(--font-head);font-stretch:125%;letter-spacing:-.035em}
.gs-result-card__number::after{content:"";display:block;width:36px;height:5px;margin:16px 0 14px;border-radius:5px;background:var(--gold)}
.gs-result-card p{margin:0;color:var(--fog);font-size:15.5px;line-height:1.45}
.gs-how-centered{background:var(--paper)}
.gs-how-centered__top{max-width:760px;margin:0 auto 44px;text-align:center}
.gs-how-centered__top p{margin:16px auto 26px;color:var(--muted);font-size:18px;line-height:1.6}
.gs-demo-btn,.gs-cta-wave__button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--action);color:#fff;font:680 16px/1 var(--font-body);text-decoration:none;box-shadow:0 4px 0 var(--action-floor)}
.gs-demo-btn:hover,.gs-cta-wave__button:hover{background:var(--action-hover)}
.gs-how-centered__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.gs-how-centered__card{padding:28px;border-radius:18px;background:#fff}
.gs-how-centered__number{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:14px;background:var(--gold);color:var(--ink);font:840 20px/1 var(--font-head);font-stretch:120%;transform:rotate(-4deg)}
.gs-how-centered__card h3,.gs-mini-benefit h3,.gs-live-benefits h3{margin:0 0 8px;font:760 20px/1.25 var(--font-head);font-stretch:110%;color:var(--ink)}
.gs-how-centered__card p,.gs-mini-benefit p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.gs-benefits-split{background:#fff}
.gs-benefits-split__wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.gs-benefits-split__intro{position:sticky;top:32px}
.gs-benefits-split__intro > p{margin:18px 0 28px;color:var(--muted);font-size:18px;line-height:1.6}
.gs-benefits-split__stats{display:grid;gap:18px;max-width:420px}
.gs-stat__label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-weight:650;color:var(--ink)}
.gs-stat__label strong{font:820 22px/1 var(--font-head);font-stretch:120%}
.gs-stat__bar{height:10px;border-radius:10px;background:var(--paper);overflow:hidden}
.gs-stat__bar span{display:block;height:100%;border-radius:inherit;background:var(--gold)}
.gs-benefits-split__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gs-mini-benefit{padding:26px;border-radius:18px;background:var(--paper)}
.gs-mini-benefit__icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px;background:#E3EEFB;color:var(--action)}
.gs-mini-benefit__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp > .gs-cta-wave{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.gs-cta-wave__aurora,.gs-cta-wave__waves{display:none}
.gs-cta-wave__inner{max-width:880px}
.lp .gs-cta-wave h2{color:#fff;font-size:clamp(34px,4.4vw,56px);font-stretch:122%}
.gs-cta-wave p{margin:18px 0 30px;color:var(--fog);font-size:18px;line-height:1.6;max-width:40em}
.gs-live-benefits{background:var(--paper)}
.gs-live-benefits__head{max-width:760px;margin-bottom:40px}
.gs-live-benefits__head p{margin-top:16px;color:var(--muted);font-size:18px}
.lp .lp-prose img{max-height:640px;width:auto}
@media (max-width:860px){
  .gs-benefits-split__wrap{grid-template-columns:minmax(0,1fr)}
  .gs-benefits-split__intro{position:static}
}
@media (max-width:540px){.gs-benefits-split__grid{grid-template-columns:minmax(0,1fr)}}
.lp .gs-benefits-split h2{font-size:clamp(28px,3vw,40px)}
.dt-hero .lp-btns{margin-top:30px}

/* ---------- bloques recuperados de Elementor: cajas con icono, testimonios, cifras ---------- */
.lp-wide{margin:28px 0}
.lp-wide:first-child{margin-top:0}
.lp-boxes{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.lp-boxes li{position:relative;padding:28px 26px 26px;border-radius:18px;background:var(--paper)}
.lp-alt .lp-boxes li{background:#fff}
.lp-boxes li::before{content:"";display:block;width:36px;height:5px;margin-bottom:18px;border-radius:5px;background:var(--gold)}
.lp-boxes h3{margin:0 0 8px;font:760 20px/1.25 var(--font-head);font-stretch:110%;color:var(--ink)}
.lp-boxes p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.lp-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.lp-quotes figure{display:flex;flex-direction:column;justify-content:space-between;gap:20px;margin:0;padding:28px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.lp-alt .lp-quotes figure{box-shadow:none}
.lp-quotes blockquote{margin:0}
.lp-quotes blockquote p{margin:0;font:560 18px/1.45 var(--font-body);color:var(--ink)}
.lp-quotes blockquote p::before{content:"“"}
.lp-quotes blockquote p::after{content:"”"}
.lp-quotes figcaption{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.35}
.lp-quotes figcaption img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.lp-quotes figcaption strong{display:block;color:var(--ink)}
.lp-quotes figcaption span{color:var(--muted)}
.lp-claims b{font-size:clamp(40px,4vw,54px)}
/* PNG en el héroe = casi siempre una maqueta con fondo transparente: sin marco ni sombra de foto */
.lp-hero-media img[src$=".png"]{object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
/* cierre con el texto propio de la página (suele ser una pregunta larga): titular más contenido */
.lp-final-own h2{font-size:clamp(30px,3.4vw,46px);font-stretch:116%;line-height:1.04}
/* cabecera de sección con su imagen al lado */
.lp-head-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;max-width:none}
.lp-head-split .lp-intro .lp-btns{margin-top:20px}
.lp-intro .lp-btns{margin-top:18px}
@media (max-width:860px){.lp-head-split{grid-template-columns:minmax(0,1fr)}}
.lp-sec .wrap > .lp-rows:not(:nth-child(2)),.lp-sec .wrap > .lp-cards:not(:nth-child(2)){margin-top:56px}
.lp-sec-center .lp-prose{margin:0 auto}.lp-sec-center .video-frame{max-width:940px;margin:0 auto}
@media (max-width:640px){.lp-hero h1,.dt-hero h1{font-size:31px;font-stretch:110%;line-height:1.04}}

/* ---------- calculadoras Kepler ---------- */
.lp-calc{padding-top:clamp(40px,5vw,64px)}
.lp-calc iframe{display:block;width:100%;max-width:1000px;height:760px;margin:0 auto;border:0;background:transparent}
/* selector de sector en la página de Kepler */
.kc-chooser h2{margin:0;font:800 clamp(30px,3.7vw,48px)/1.04 var(--font-head);font-stretch:116%;letter-spacing:-.025em;color:var(--ink)}
.kc-chooser .lp-intro{margin:14px 0 28px}
.kc-choices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kc-choices a{display:block;height:100%;padding:26px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule);text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s}
.kc-choices a:hover{box-shadow:0 0 0 2px var(--action);transform:translateY(-3px)}
.kc-choices svg{display:block;width:48px;height:48px;padding:11px;margin-bottom:16px;border-radius:14px;background:var(--gold);color:var(--ink)}
.kc-choices strong{display:block;font:780 21px/1.2 var(--font-head);font-stretch:112%}
.kc-choices span{display:block;margin-top:6px;color:var(--muted);font-size:15.5px;line-height:1.5}
/* secciones de las calculadoras (evidencia, metodología, preguntas) */
.lp > .kc-sec{padding:clamp(64px,7.5vw,104px) 0}
.kc-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.kc-label{margin-bottom:12px;color:var(--action);font:700 14px/1.3 var(--font-head)}
.kc-sec h2{margin:0;max-width:22em;font:800 clamp(28px,3.4vw,44px)/1.05 var(--font-head);font-stretch:116%;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.kc-intro{max-width:46em;margin:16px 0 36px;color:var(--muted);font-size:18px;line-height:1.6}
.kc-ev{background:var(--ink)}
.kc-ev .kc-label{color:var(--gold)}
.kc-ev h2,.kc-ev h3{color:#fff}
.kc-ev .kc-intro{color:var(--fog)}
.kc-ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kc-ev-card{padding:26px;border-radius:18px;background:var(--ink-2)}
.kc-ev-cifra{font:820 clamp(40px,4vw,54px)/.95 var(--font-head);font-stretch:125%;letter-spacing:-.03em;color:#fff}
.kc-ev-cifra::after{content:"";display:block;width:36px;height:5px;margin:16px 0 14px;border-radius:5px;background:var(--gold)}
.kc-ev-card h3{margin:0 0 8px;font:740 18px/1.3 var(--font-head);font-stretch:108%}
.kc-ev-card p{margin:0;color:var(--fog);font-size:15.5px;line-height:1.55}
.kc-ev-fuente{margin-top:14px;color:var(--mist);font-size:13px;line-height:1.4}
.kc-guia{background:#fff}
.kc-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kc-paso{padding:26px;border-radius:18px;background:var(--paper)}
.kc-paso-n{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:14px;background:var(--gold);color:var(--ink);font:840 18px/1 var(--font-head);transform:rotate(-4deg)}
.kc-paso h3{margin:0 0 8px;font:740 18px/1.3 var(--font-head);color:var(--ink)}
.kc-paso p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.kc-faq{background:var(--paper)}
.kc-faq-lista{display:grid;gap:12px;max-width:880px}
.kc-faq details{background:#fff;border:1px solid var(--rule);border-radius:16px}
.kc-faq details[open]{box-shadow:inset 4px 0 0 var(--gold)}
.kc-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font:720 17.5px/1.35 var(--font-head);color:var(--ink)}
.kc-faq summary::-webkit-details-marker{display:none}
.kc-faq details p{margin:0;padding:0 22px 20px;color:var(--muted);line-height:1.6}
@media (max-width:860px){.kc-choices{grid-template-columns:minmax(0,1fr)}}

/* ---------- índice de Recursos: lo último de cada tipo, con enlace a su índice completo ---------- */
.rs-sec{padding:clamp(56px,6.5vw,88px) 0;background:#fff}
.rs-alt{background:var(--paper)}
.rs-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-bottom:32px}
.rs-head h2{margin:0;font:820 clamp(28px,3.4vw,42px)/1.05 var(--font-head);font-stretch:118%;letter-spacing:-.025em;color:var(--ink)}
.rs-head h2 span{display:inline-grid;place-items:center;min-width:44px;height:36px;margin-left:8px;padding:0 10px;border-radius:12px;background:var(--gold);color:var(--ink);font-size:18px;font-stretch:112%;letter-spacing:0;vertical-align:middle;transform:rotate(-4deg)}
.rs-head p{margin:10px 0 0;max-width:40em;color:var(--muted);font-size:17px;line-height:1.55}
.rs-alt .res-card{background:#fff}
.rs-sec .res-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.rs-sec .blog-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1060px){.rs-sec .res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rs-sec .res-grid{grid-template-columns:minmax(0,1fr)}}
/* último enlace del menú Recursos: el índice con todo */
.mm-simple .mm-all{margin-top:4px;padding-top:12px;border-top:1px solid var(--rule);font-weight:720}
/* la barra (menús desplegables e idioma) por encima de todo el héroe: el .nav con backdrop-filter forma su
   propia capa y cualquier elemento girado del héroe (insignia del índice, programa del podcast…) se pintaba
   encima del panel abierto */
.site-header .bar{position:relative;z-index:10}

/* ---------- artículo del blog: mismo lenguaje que soluciones, fichas y podcast ----------
   Héroe en la cabecera (tinta con la foto apagada, como todo el sitio) con la categoría en oro, titular en
   Archivo, entradilla y portada como tarjeta de juego; cuerpo en columna de lectura con índice y llamada a la
   demo en el lateral; anterior/siguiente, relacionados sobre papel y el cierre de siempre. */
.art-hero h1{font-size:clamp(32px,3.5vw,50px);line-height:1.04;font-stretch:114%}
.art-hero .lp-lead{font-size:clamp(17px,1.3vw,19px)}
.art-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--fog);font:650 14px/1 var(--font-body);text-decoration:none}
.art-back:hover{color:#fff}
.art-back .back-arrow{width:16px;height:16px;transform:scaleX(-1)}
.art-cat{display:table;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:var(--gold);color:var(--ink);font:760 14px/1 var(--font-body);transform:rotate(-1.5deg)}
.art-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0;color:var(--fog);font-size:15px;font-weight:600}
.art-facts li{display:flex;align-items:center;gap:8px}
.art-facts svg{width:18px;height:18px;color:var(--gold)}
.art-cover{max-width:500px}
.art-hero.lp-hero-solo{max-width:980px}
/* cuerpo */
.art{background:#fff}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(40px,5vw,72px);align-items:start;padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(40px,5vw,64px)}
.art-grid .doc-body.art-body{max-width:740px}
.art-body{color:#2A3A4E}
.art-body > :first-child{margin-top:0}
.art-body p,.art-body li{font-size:17.5px;line-height:1.75}
.art-body h2{margin:1.9em 0 .6em;font-size:clamp(25px,2.4vw,32px);line-height:1.15;scroll-margin-top:24px}
.art-body h3{margin:1.6em 0 .5em;font-size:21px;line-height:1.25;scroll-margin-top:24px}
.art-body h4{margin:1.4em 0 .4em;font:760 18px/1.3 var(--font-head);color:var(--ink)}
.art-body a{color:var(--action);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.art-body a:hover{text-decoration-thickness:2.5px}
.art-body img{display:block;max-width:100%;height:auto;margin:1.8em auto;border-radius:16px}
.art-body figure{margin:1.8em 0}
.art-body figure img{margin:0 auto}
.art-body figcaption{margin-top:10px;color:var(--muted);font-size:14.5px;text-align:center}
.art-body blockquote{margin:1.8em 0;padding:4px 0 4px 26px;border-left:5px solid var(--gold);color:var(--ink);font:600 clamp(19px,1.6vw,22px)/1.5 var(--font-head);font-stretch:104%}
.art-body blockquote p{margin:0 0 .5em;font:inherit;line-height:inherit}
.art-body blockquote cite{display:block;margin-top:8px;color:var(--muted);font:600 14.5px var(--font-body)}
.art-body iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;margin:1.8em 0;border:0;border-radius:16px}
.art-body table{display:block;width:100%;max-width:100%;overflow-x:auto;margin:1.8em 0;border-collapse:collapse;font-size:15.5px}
.art-body th,.art-body td{padding:10px 14px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.art-body th{background:var(--paper);color:var(--ink);font-weight:720}
.art-body hr{height:1px;margin:2.4em 0;border:0;background:var(--rule)}
.art-body ul,.art-body ol{padding-left:1.3em}
.art-body li{margin:.3em 0}
/* índice: en el lateral (escritorio) o desplegable al principio del texto (móvil) */
.art-side{position:sticky;top:24px;display:grid;gap:18px}
.art-toc{position:static;padding:22px 20px 18px;border-radius:20px;background:var(--paper);font-size:14.5px}
.art-toc h2{margin:0 0 10px;padding:0 8px;font:800 17px/1.2 var(--font-head);font-stretch:112%;letter-spacing:0;text-transform:none;color:var(--ink)}
.art-toc ol{list-style:none;max-height:min(52vh,460px);margin:0;padding:0;border:0;overflow:auto;scrollbar-width:thin}
.art-toc li a,.art-toc-m li a{display:block;margin:0;padding:7px 8px;border:0;border-radius:10px;color:#3C4C60;line-height:1.35;text-decoration:none;transition:background-color .2s,color .2s}
.art-toc li.l3 a,.art-toc-m li.l3 a{padding-left:22px;font-size:13.5px}
.art-toc li a:hover{background:#fff;color:var(--ink)}
.art-toc li a.on{background:#fff;color:var(--ink);font-weight:650;box-shadow:inset 3px 0 0 var(--gold)}
.art-side-cta{padding:24px;border-radius:20px;background:var(--ink);color:#fff}
.art-side-cta p{margin:0 0 16px;font:780 19px/1.25 var(--font-head);font-stretch:110%}
.art-toc-m{display:none;margin:0 0 28px;border-radius:16px;background:var(--paper)}
.art-toc-m summary{cursor:pointer;list-style:none;padding:14px 18px;font:760 16px var(--font-head);color:var(--ink)}
.art-toc-m summary::-webkit-details-marker{display:none}
.art-toc-m summary::after{content:"+";float:right;color:var(--action);font-weight:800}
.art-toc-m[open] summary::after{content:"–"}
.art-toc-m ol{list-style:none;margin:0;padding:0 10px 12px}
/* compartir, anterior/siguiente y relacionados */
.art-share{display:flex;align-items:center;gap:10px;margin-top:44px;padding-top:24px;border-top:1px solid var(--rule)}
.art-share span{margin-right:4px;color:var(--muted);font:650 14.5px var(--font-body)}
.art-share a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background-color .2s,color .2s}
.art-share a:hover{background:var(--ink);color:#fff}
.art-share svg{width:17px;height:17px}
.art-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-bottom:clamp(48px,5vw,72px)}
.art-pager a{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);font:720 17px/1.35 var(--font-head);text-decoration:none;transition:box-shadow .2s,transform .2s}
.art-pager a:hover{box-shadow:0 0 0 2px var(--action);transform:translateY(-3px)}
.art-pager small{display:flex;align-items:center;gap:6px;color:var(--action);font:700 14px var(--font-body);letter-spacing:0;text-transform:none}
.art-pager small svg{width:15px;height:15px}
.art-pager .prev small svg{transform:scaleX(-1)}
.art-pager .next{grid-column:2;text-align:right}
.art-pager .next small{justify-content:flex-end}
.art-more{padding:clamp(56px,6vw,88px) 0;background:var(--paper)}
.art-more h2{margin:0 0 28px;font:820 clamp(26px,3vw,38px)/1.08 var(--font-head);font-stretch:116%;letter-spacing:-.02em;color:var(--ink)}
.art-more .res-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-more .res-card{background:#fff}
/* tarjetas de blog (índice y relacionados) */
.blog-card-date{margin-top:16px;color:var(--action);font:700 13px/1 var(--font-body);letter-spacing:0;text-transform:none}
.blog-card-body h3{font:760 18px/1.3 var(--font-head);font-stretch:108%;color:var(--ink)}
@media (max-width:1100px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .art-side{display:none}
  .art-toc-m{display:block}
}
@media (max-width:760px){.art-more .res-grid,.art-pager{grid-template-columns:minmax(0,1fr)}.art-pager .next{grid-column:auto}}
@media (max-width:640px){.art-hero h1{font-size:30px}}
/* barra de progreso de lectura: fija arriba; site.js escribe --p (0–100 %) según lo recorrido del cuerpo del
   artículo (no de la página entera) */
.read-progress{position:fixed;top:0;left:0;z-index:60;width:100%;height:3px;pointer-events:none}
.read-progress::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--gold)}
/* casos de éxito: la cifra estrella de cada caso sobre su foto (índice y "más casos") */
.kpi-badge{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;align-items:baseline;gap:8px;width:max-content;max-width:calc(100% - 24px);padding:8px 12px;border-radius:12px;background:rgba(11,27,48,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font:600 13px/1.25 var(--font-body)}
.kpi-badge b{flex:none;color:var(--gold);font:840 21px/1 var(--font-head);font-stretch:118%;letter-spacing:-.01em}

/* ---------- banner de cookies (site.js) ---------- */
.ck{position:fixed;z-index:1000;left:20px;bottom:20px;max-width:520px;padding:20px 22px;border-radius:20px;background:var(--ink);color:#fff;box-shadow:0 24px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.ck p{margin:0;color:var(--fog);font-size:14.5px;line-height:1.5}
.ck a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ck-btns{display:flex;gap:10px;margin-top:16px}
.ck-btns button{flex:1;min-height:44px;padding:8px 14px;border:0;border-radius:999px;font:700 15px/1.15 var(--font-body);cursor:pointer}
.ck-ok{background:var(--action);color:#fff;box-shadow:0 3px 0 var(--action-floor)}
.ck-no{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.ck-btns button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:560px){.ck{left:10px;right:10px;bottom:10px;max-width:none}}
.foot-cookies{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.85}
.foot-cookies:hover{opacity:1}