/* Web pública · estilos portados del prototipo v4 (prototipo/prototipo-v4.dc.html) */
body{margin:0;background:#000008}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
.totop{transition:transform .3s ease,background-color .3s ease}
.totop:hover{transform:translateY(-4px);background:#2563EB}
.totop{transition:transform .3s ease,background-color .3s ease,opacity .45s ease,translate .55s cubic-bezier(.2,.8,.2,1),visibility .45s}
.totop.off{opacity:0;visibility:hidden;translate:0 120px}

a:focus-visible,button:focus-visible{outline:2px solid #4D7CFF;outline-offset:4px}
.bri{font-family:'Bricolage Grotesque',sans-serif}
.navlogo{position:absolute;top:16px;left:max(24px, calc((100% - 1352px) / 2));min-height:46px;display:flex;align-items:center;pointer-events:auto;font-weight:800;font-size:15px;letter-spacing:.16em;line-height:1;color:#FFFFFF;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,8,.85);transition:color .25s ease}
.navlogo:hover{color:#4D7CFF}
.navlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:15px;font-weight:600;height:fit-content;text-shadow:0 1px 12px rgba(0,0,8,.85);pointer-events:auto}
.navlinks a{padding:10px 18px;border-radius:0;border:1px solid transparent}
.navlinks .navcta{background:#2563EB}
.mainnav{justify-content:center}
.navburger{display:none}
/* móvil: logotipo a la izquierda, hamburguesa a la derecha y menú desplegable con efecto cristal */
@media (max-width:860px){
.mainnav{justify-content:flex-end;padding-right:24px!important;padding-left:24px!important}
.navlogo{left:24px}
.navburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 12px;pointer-events:auto;cursor:pointer;background:rgba(0,0,8,.45);border:1px solid #3A3A55;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .25s ease,background-color .25s ease}
.navburger:hover,.navburger[aria-expanded="true"]{border-color:#2563EB}
.navburger span{display:block;height:2px;background:#FFFFFF;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navlinks{display:none;position:absolute;top:70px;left:24px;right:24px;flex-direction:column;gap:0;padding:8px;font-size:24px;text-shadow:none;background:rgba(0,0,8,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #23233A;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.mainnav.abierto .navlinks{display:flex;animation:ovIn .4s cubic-bezier(.2,.8,.2,1) both}
.navlinks a{padding:16px 14px;border:0;border-bottom:1px solid #1C1C2E}
.navlinks .navcta{margin-top:8px;border-bottom:0;font-family:'Inter Tight',system-ui,sans-serif;font-size:18px;text-align:center}
}
.cnt::after{content:attr(data-n)}


/* blog */
.bcard{display:flex;flex-direction:column;gap:18px;padding:28px;border:1px solid #23233A;background:#000008;color:#FFFFFF;text-align:left;cursor:pointer;font:inherit;transition:border-color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),background-color .3s ease}
.bcard:hover{border-color:#2563EB;transform:translateY(-4px);background:#06061A}
.bcard:hover .barr{transform:translateX(6px)}
.barr{transition:transform .3s ease}
.bprose p{margin:0 0 20px;font-size:18px;line-height:1.75;color:#C9CDD8}
.bprose h2{margin:48px 0 16px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.02em;color:#FFFFFF}

/* footer */
.flink{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #23233A;color:#FFFFFF;font-weight:500;font-size:15px;line-height:1.4;letter-spacing:0;transition:color .25s ease,padding-left .3s cubic-bezier(.2,.8,.2,1)}
.flink .bri{font-family:inherit}
.flink .farr{width:16px;height:16px}
.flink:hover{color:#4D7CFF;padding-left:10px}
.farr{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.flink:hover .farr{transform:translate(4px,-4px)}
.lnk{transition:color .2s ease}.lnk:hover{color:#4D7CFF}
.nwpanel{animation:ovIn .55s cubic-bezier(.2,.8,.2,1) both}
/* páginas legales */
.lgpage{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both}
.lgl{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #1C1C2E;font-size:14px;color:#C9CDD8;transition:color .2s ease,padding-left .2s ease}
.lgl:hover{color:#FFFFFF;padding-left:6px}
.lgrow{display:grid;gap:4px 20px;padding:14px 0;border-bottom:1px solid #23233A;font-size:15px;line-height:1.5}
.lgtab{min-height:44px;padding:0 16px;font:600 14px 'Inter Tight',system-ui,sans-serif;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.lgtab:hover{border-color:#4D7CFF!important}
.lgbig{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid #23233A;font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;transition:color .2s ease,padding-left .25s ease;background:transparent;border-left:0;border-right:0;border-top:0;color:#FFFFFF;width:100%;text-align:left;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif}
.lgbig:hover{color:#4D7CFF;padding-left:10px}
@media (max-width:900px){.lgidx{display:none!important}}
@media (max-width:640px){.lgrow{grid-template-columns:1fr!important}}

/* aviso de cookies: la galleta que se come */
.ck{animation:ckIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes ckIn{from{opacity:0;transform:translateY(40px) rotate(-2deg)}to{opacity:1;transform:none}}
.ck.eaten{animation:ckOut .5s cubic-bezier(.5,0,.75,0) 1.5s forwards}
.ck.declined{animation:ckOut .45s cubic-bezier(.5,0,.75,0) .9s forwards}
@keyframes ckOut{to{opacity:0;transform:translateY(40px)}}
.ckc{animation:ckWob 4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes ckWob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.bite{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.eaten .bite{animation:bite .2s cubic-bezier(.3,1.6,.5,1) forwards}
.eaten .b2{animation-delay:.35s}.eaten .b3{animation-delay:.7s}
@keyframes bite{to{transform:scale(1)}}
.crumb{opacity:0}
.eaten .crumb{animation:crumbA .9s cubic-bezier(.4,0,1,1) forwards}
.eaten .c2{animation-name:crumbB;animation-delay:.35s}.eaten .c3{animation-delay:.7s}.eaten .c4{animation-name:crumbB;animation-delay:.1s}
@keyframes crumbA{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(10px,46px)}}
@keyframes crumbB{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-6px,52px)}}
.declined .ckc{animation:ckShy .6s ease forwards}
@keyframes ckShy{to{transform:scale(.82) rotate(-20deg);opacity:.55}}
.ckbtn{min-height:44px;padding:0 16px;font:600 14px 'Inter Tight',system-ui,sans-serif;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.ckbtn.pri{background:#2563EB;color:#FFFFFF;border:1px solid #2563EB}
.ckbtn.pri:hover{background:#1E40AF;border-color:#1E40AF}
.ckbtn.sec{background:#000008;color:#FFFFFF;border:1px solid #3A3A55}
.ckbtn.sec:hover{border-color:#FFFFFF}
.ckbtn.txt{background:transparent;border:0;padding:0 4px;color:#9AA3B8;text-decoration:underline;font-weight:500}
.ckbtn.txt:hover{color:#FFFFFF}
.sw{position:relative;flex:0 0 auto;width:52px;height:28px;border:1px solid #3A3A55;background:#000008;cursor:pointer;padding:0;transition:background-color .2s ease,border-color .2s ease}
.sw>span{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#9AA3B8;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s ease}
.sw[aria-checked="true"]{background:#2563EB;border-color:#2563EB}
.sw[aria-checked="true"]>span{transform:translateX(24px);background:#FFFFFF}
.sw:disabled{cursor:not-allowed;opacity:.6}
.rvstar{animation:rvspin 22s linear infinite;transform-origin:50% 50%}
@keyframes rvspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.rvstar{animation:none}}
.nomo .ckc,.nomo .ck{animation:none}
@media (prefers-reduced-motion: reduce){.ckc{animation:none}.ck{animation-duration:.01s}}

/* entrada al cargar */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
.fu{animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* nombre que cambia de estilo tipográfico */
.nm{display:grid;align-items:end;white-space:nowrap}
.nm>span{grid-area:1/1;opacity:0;padding-right:.1em;animation:nm 15s cubic-bezier(.4,0,.2,1) infinite}
@keyframes nm{0%{opacity:0;filter:blur(16px);transform:translateY(.14em)}4%,17%{opacity:1;filter:blur(0);transform:none}21%,100%{opacity:0;filter:blur(16px);transform:translateY(-.1em)}}
.mono{font-family:'Space Mono',monospace}
.lt{display:inline-block;line-height:1;letter-spacing:.02em}
.lt>span{display:inline-block;line-height:1}
/* el punto cambia de tipografía sin mover la caja: ancho fijo y sin altura de línea propia */
.nmw:last-child .lt:last-child{display:inline-flex;justify-content:center;width:.3em;line-height:0}
.nmw:last-child .lt:last-child>span{line-height:0}
@keyframes upA{from{opacity:0;transform:translateY(.5em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes upB{from{opacity:0;transform:translateY(.5em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes downA{from{opacity:0;transform:translateY(-.5em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes downB{from{opacity:0;transform:translateY(-.5em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes flipA{from{opacity:0;transform:perspective(600px) rotateX(-90deg)}to{opacity:1;transform:none}}
@keyframes flipB{from{opacity:0;transform:perspective(600px) rotateX(-90deg)}to{opacity:1;transform:none}}
@keyframes spinYA{0%{opacity:0;transform:perspective(600px) rotateY(-180deg)}45%{opacity:1}100%{opacity:1;transform:perspective(600px) rotateY(0deg)}}
@keyframes spinYB{0%{opacity:0;transform:perspective(600px) rotateY(-180deg)}45%{opacity:1}100%{opacity:1;transform:perspective(600px) rotateY(0deg)}}
@keyframes popA{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes popB{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes skewA{from{opacity:0;transform:translateX(.3em) skewX(-24deg)}to{opacity:1;transform:none}}
@keyframes skewB{from{opacity:0;transform:translateX(.3em) skewX(-24deg)}to{opacity:1;transform:none}}
@keyframes blurA{from{opacity:0;filter:blur(18px);transform:scale(1.15)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes blurB{from{opacity:0;filter:blur(18px);transform:scale(1.15)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes spinA{from{opacity:0;transform:rotate(-90deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes spinB{from{opacity:0;transform:rotate(-90deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes lt{0%{opacity:0;transform:scale(.86)}1.2%{opacity:1;transform:scale(1.04)}3%,16.2%{opacity:1;transform:none}16.7%,100%{opacity:0;transform:none}}

/* tarjeta web: recorrido al pasar el cursor */
.card .scr{opacity:0;object-position:50% 0;transition:opacity .45s ease,object-position 9s linear}
.card:hover .scr{opacity:1;object-position:50% 100%}

/* haz de luz azul */
.rp{position:absolute;inset:0;pointer-events:none;will-change:transform}
[data-m]>.rp{inset:160px}
.ray{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;animation:sway 14s ease-in-out infinite alternate}
@keyframes sway{0%{transform:rotate(-28deg) translate(0,0) scaleX(1)}50%{transform:rotate(-24deg) translate(4%,-3%) scaleX(1.12)}100%{transform:rotate(-31deg) translate(-3%,4%) scaleX(.95)}}
.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;animation:pulse 9s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.45;transform:scale(1)}to{opacity:.8;transform:scale(1.15)}}

/* cinta de clientes */
.mq{display:flex;width:max-content;animation:mq 40s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* cursor */
.caret{display:inline-block;width:.06em;height:.82em;margin-left:.06em;background:#4D7CFF;vertical-align:-.04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* tarjetas */
@property --gx{syntax:'<number>';inherits:true;initial-value:0}
@property --gy{syntax:'<number>';inherits:true;initial-value:0}
@property --mx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:true;initial-value:100%}
@property --ga{syntax:'<number>';inherits:true;initial-value:0}
.card .thumb{transition:box-shadow .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),--gx .8s cubic-bezier(.2,.8,.2,1),--gy .8s cubic-bezier(.2,.8,.2,1),--mx .6s cubic-bezier(.2,.8,.2,1),--my .6s cubic-bezier(.2,.8,.2,1),--ga .5s ease}
.card .thumb::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--ga);background:radial-gradient(420px circle at var(--mx) var(--my),rgba(37,99,235,.28),rgba(37,99,235,0) 62%);mix-blend-mode:screen}
.card .thumb::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;padding:1.5px;opacity:var(--ga);background:radial-gradient(240px circle at var(--mx) var(--my),#A9C0FF,rgba(37,99,235,.7) 38%,rgba(37,99,235,0) 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card .cimg{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.card:hover .cimg{transform:scale(1.06)}
.card:hover .thumb{transform:translateY(-6px);box-shadow:0 0 0 1px #2563EB,calc(var(--gx) * 36px) calc(var(--gy) * 36px + 22px) 80px -24px rgba(37,99,235,.95)}
.pill{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.pill:hover{background:#FFFFFF;color:#000008;border-color:#FFFFFF}
.kb{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-3%,-2%)}}

/* scroll (navegadores compatibles) */
@supports (animation-timeline: view()){
  .blurin{animation:blurin linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
  .stick{animation:stick linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .fromL{animation:fromL linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .fromR{animation:fromR linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .type{animation:type steps(22,end) both;animation-timeline:view();animation-range:entry 30% cover 45%}
  .tw{view-timeline-name:--tw}
  .tc{animation:tcIn steps(1,jump-end) both;animation-timeline:--tw}
  .grow{animation:growS linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .bar{animation:barX linear both;animation-timeline:scroll()}
  .line{animation:barX linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  .lt{animation:track linear both;animation-timeline:scroll();animation-range:0px 700px}
  .navfade{animation:navfade linear both;animation-timeline:scroll();animation-range:0px 140px}
}
@keyframes navfade{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes track{from{letter-spacing:.02em}to{letter-spacing:.09em}}
@keyframes blurin{from{filter:blur(14px);opacity:.12;transform:translateY(30px)}to{filter:blur(0);opacity:1;transform:none}}
@keyframes rv{from{opacity:0;transform:translateY(64px) scale(.96)}to{opacity:1;transform:none}}
@keyframes stick{from{transform:rotate(-26deg) scale(.7);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}}
@keyframes fromL{from{transform:translateX(-22%);opacity:0}to{transform:none;opacity:1}}
@keyframes fromR{from{transform:translateX(22%);opacity:0}to{transform:none;opacity:1}}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tcIn{from{opacity:0}to{opacity:1}}
@keyframes growS{from{transform:scale(.9);border-radius:80px}to{transform:none;border-radius:32px}}
@keyframes barX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.nomo *,.nomo *::before,.nomo *::after{animation:none!important;transition:none!important}
.nomo .nm>span:first-child,.nomo .lt>span:first-child{opacity:1}
/* popup de proyecto */
.ov{animation:ovFade .35s ease both}
.ovpanel{animation:ovIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes ovFade{from{opacity:0}to{opacity:1}}
@keyframes ovIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ovbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;background:#000008;color:#FFFFFF;border:1px solid #3A3A55;font:600 14px 'Inter Tight',system-ui,sans-serif;cursor:pointer;transition:background-color .25s ease,border-color .25s ease}
.ovbtn:hover{background:#2563EB;border-color:#2563EB}
.ovbtn.sq{width:44px;padding:0}
.fl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#C9CDD8}
.fi{width:100%;min-height:46px;padding:12px 14px;background:#0E0E18;color:#FFFFFF;border:1px solid #2A2A44;border-radius:0;font:400 15px 'Inter Tight',system-ui,sans-serif;outline:none;transition:border-color .2s ease}
.fi:focus{border-color:#2563EB}
.fi::placeholder{color:#6E7590}
textarea.fi{resize:vertical;min-height:110px}
.ovcta{display:none}
.chip{min-height:40px;padding:8px 14px;cursor:pointer;font:600 13px 'Inter Tight',system-ui,sans-serif;transition:background-color .2s ease,border-color .2s ease}
.cardlink{cursor:pointer}
.gbtn{display:block;width:100%;padding:0;border:0;background:#111120;cursor:zoom-in;overflow:hidden}
.gbtn img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gbtn:hover img{transform:scale(1.03)}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#3A3A55 transparent}
.strip>*{flex:0 0 clamp(200px,26vw,260px);scroll-snap-align:start}
.lb{animation:ovFade .25s ease both}
@media (max-width: 900px){.ovcta{display:flex}.ovaside{position:static!important;max-width:none!important}}
@media (max-width: 640px){.ovgal{grid-template-columns:1fr!important}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.nm>span:first-child,.lt>span:first-child{opacity:1}}

/* accesibilidad: saltar al contenido */
.skip{position:fixed;left:16px;top:-90px;z-index:200;padding:14px 20px;background:#2563EB;color:#FFFFFF;font-weight:600;font-size:15px;transition:top .2s ease}
.skip:focus{top:16px}
summary:focus-visible{outline:2px solid #4D7CFF;outline-offset:4px}
/* llamada a la acción del encabezado */
.hcta{min-height:52px;padding:0 22px;font-size:16px}
.hcta.ghost{background:rgba(0,0,8,.45);border-color:#FFFFFF}
.hcta.ghost:hover{background:#FFFFFF;color:#000008;border-color:#FFFFFF}
/* preguntas frecuentes */
.faqi{border-bottom:1px solid #23233A}
.faqi summary{list-style:none;display:grid;grid-template-columns:40px 1fr 24px;align-items:center;gap:12px;padding:24px 0;cursor:pointer;transition:color .2s ease}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary:hover{color:#4D7CFF}
.faqi h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.3;letter-spacing:-.01em}
.faqx{position:relative;width:18px;height:18px}
.faqx::before,.faqx::after{content:'';position:absolute;left:0;top:8px;width:18px;height:2px;background:#2563EB;transition:transform .3s ease}
.faqx::after{transform:rotate(90deg)}
.faqi[open] .faqx::after{transform:rotate(0deg)}
.faqa{padding:0 36px 28px 52px;max-width:780px}
.faqa p{margin:0;font-size:17px;line-height:1.7;color:#C9CDD8}
.faqa a,.inl{color:#FFFFFF;text-decoration:underline;text-decoration-color:#2563EB;text-underline-offset:4px;transition:color .2s ease}
.faqa a:hover,.inl:hover{color:#4D7CFF}
@media (max-width:640px){.faqa{padding:0 0 24px 52px}}
/* móvil y pantallas táctiles */
.tch{display:none}
@media (hover:none){.card .scr{opacity:1;animation:webscr 16s ease-in-out infinite alternate}.hov{display:none}.tch{display:inline}}
@keyframes webscr{0%,8%{object-position:50% 0}92%,100%{object-position:50% 100%}}
@media (max-width:760px),(hover:none){.ray,.glow{animation:none}}
@media (max-width:760px){@keyframes blurin{from{opacity:.12;transform:translateY(30px)}to{opacity:1;transform:none}}}

/* ---- añadido al portar a PHP ---- */
html{background:#000008}
.raiz{font-family:'Inter Tight',system-ui,sans-serif;color:#FFFFFF;background:#000008;width:100%;min-height:100vh;font-size:17px;line-height:1.6;overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
body.bloqueo{overflow:hidden}
/* página propia de un proyecto: la barra superior hace de cabecera */
.pagina .fbarra{background:rgba(0,0,8,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #1C1C2E;margin-bottom:56px}
.fbarra .navlogo{position:static;min-height:44px;margin-right:auto;pointer-events:auto}
.ov .fbarra .navlogo{display:none}
.capa-cargando{position:fixed;inset:0;z-index:99;cursor:progress}
/* la barra es transparente en la capa: que no tape los clics de lo que pasa por debajo */
.fbarra{pointer-events:none}
.fbarra a,.fbarra button,.fbarra span{pointer-events:auto}
/* móvil y táctil: las palabras del encabezado se ven fijas, sin el rascado */
.reveal.reveal-fijo{-webkit-mask-image:none!important;mask-image:none!important;justify-content:flex-start!important}

/* pie: el punto final lleva al minijuego oculto */
.huevo{color:#2563EB;font-weight:800;padding:4px 2px;transition:color .2s ease}
.huevo:hover{color:#FFFFFF}

/* menú: acceso secreto al minijuego (la V girada con su estela, disparando puntos) */
.navjuego{position:absolute;top:16px;right:max(24px, calc((100% - 1352px) / 2));width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:rgba(0,0,8,.45);border:1px solid #2563EB;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:visible;transition:background-color .25s ease}
.navjuego[hidden]{display:none}
.navjuego:hover{background:#2563EB}
.navjuego::after{content:"";position:absolute;inset:-1px;border:1px solid #4D7CFF;pointer-events:none;animation:nj-onda 2.4s ease-out infinite}
.navjuego .nj-bala{animation:nj-disparo 1.2s linear infinite;opacity:0}
.navjuego .nj-bala:nth-child(2){animation-delay:.4s}
.navjuego .nj-bala:nth-child(3){animation-delay:.8s}
.navjuego .nj-estela{animation:nj-motor .45s ease-in-out infinite alternate;transform-origin:16px 23px}
.navjuego.aparece{animation:nj-aparece 1.1s cubic-bezier(.2,.8,.2,1) both}
.navjuego.aparece::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#4D7CFF;box-shadow:0 0 0 0 rgba(77,124,255,.7);animation:nj-estallido 1.1s ease-out both;pointer-events:none}
@keyframes nj-disparo{0%{transform:translateX(-6px);opacity:0}15%{opacity:1}100%{transform:translateX(18px);opacity:0}}
@keyframes nj-motor{from{transform:translateX(0) scaleX(1)}to{transform:translateX(-2px) scaleX(1.25)}}
@keyframes nj-onda{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}
@keyframes nj-aparece{0%{transform:translateX(120px) scale(.2);opacity:0}55%{transform:translateX(-10px) scale(1.25);opacity:1}75%{transform:translateX(4px) scale(.95)}100%{transform:none}}
@keyframes nj-estallido{0%{box-shadow:0 0 0 0 rgba(77,124,255,.8)}100%{box-shadow:0 0 0 70px rgba(77,124,255,0)}}
/* en móvil el acceso al juego está siempre a la vista, junto a la hamburguesa */
@media (max-width:860px){.navjuego{top:16px;right:80px}}
@media (prefers-reduced-motion:reduce){.navjuego::after,.navjuego .nj-bala,.navjuego .nj-estela,.navjuego.aparece,.navjuego.aparece::before{animation:none}.navjuego .nj-bala:first-child{opacity:1}}