:root{color-scheme:dark;--bg:#08111f;--bg2:#0b1728;--panel:#101f33;--panel2:#13243a;--line:rgba(148,178,218,.15);--text:#f3f7ff;--muted:#9aabc3;--blue:#4c9dff;--cyan:#54e4f5;--green:#6be3b0;--purple:#b5a0ff;--radius:20px;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.skip-link{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px;z-index:999}.skip-link:focus{left:8px}.section-wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}.announcement{min-height:36px;display:flex;align-items:center;justify-content:center;gap:10px;background:#0e2034;border-bottom:1px solid var(--line);font-size:.78rem;color:#c7d6e9;padding:6px 16px}.announcement a{color:var(--cyan);margin-left:8px}.pulse-dot,.console-live b,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #6be3b080}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px max(24px,calc((100% - var(--max))/2));background:#08111feF;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand-mark{font-weight:900;letter-spacing:-.09em;font-size:1.6rem;color:white}.brand-mark span{color:var(--blue)}.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy strong{font-size:.79rem;letter-spacing:.12em}.brand-copy small{font-size:.58rem;letter-spacing:.13em;color:var(--muted);margin-top:5px}.main-nav{display:flex;align-items:center;gap:28px;font-size:.88rem;color:#bac8da}.main-nav>a:not(.nav-cta):hover,.footer a:hover{color:var(--cyan)}.nav-cta{padding:9px 15px;border:1px solid #4c9dff75;border-radius:10px;color:#fff;background:#4c9dff16}.nav-cta span{margin-left:8px}.menu-toggle{display:none;background:transparent;color:white;border:1px solid var(--line);border-radius:9px;padding:7px 11px}.hero{min-height:640px;padding-top:90px;padding-bottom:90px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;position:relative;isolation:isolate}.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.32;background-image:linear-gradient(#24446730 1px,transparent 1px),linear-gradient(90deg,#24446730 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to right,black,transparent 95%)}.hero:before{content:"";position:absolute;z-index:-1;width:450px;height:450px;right:4%;top:12%;border-radius:50%;background:#1679ff16;filter:blur(70px)}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--cyan);margin-bottom:18px}.hero .eyebrow{display:flex;align-items:center;gap:10px}.hero h1,.section-heading h2,.project-copy h2,.about-inner h2,.final-cta h2{font-size:clamp(2.5rem,5.1vw,4.4rem);line-height:1.08;letter-spacing:-.055em;margin:0;font-weight:780}.gradient-text{background:linear-gradient(100deg,#62aaff 8%,#62e6ef 95%);color:transparent;background-clip:text;-webkit-background-clip:text}.hero-lead{max-width:570px;color:var(--muted);font-size:1.08rem;margin:24px 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:13px 18px;border-radius:11px;font-size:.9rem;font-weight:750;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:linear-gradient(110deg,#3988f5,#27b7dc);color:#03111e;box-shadow:0 10px 30px #178ce526}.button-primary:hover{background:linear-gradient(110deg,#64a7ff,#69e5ee)}.button-secondary{border:1px solid var(--line);background:#ffffff05;color:#e8f1ff}.hero-proof{display:flex;gap:30px;margin-top:42px;flex-wrap:wrap}.hero-proof div{display:flex;flex-direction:column}.hero-proof strong{font-size:1.3rem;letter-spacing:-.04em}.hero-proof span{font-size:.75rem;color:var(--muted)}.console-card{background:#0c1929eF;border:1px solid #4b8bce3b;border-radius:18px;overflow:hidden;box-shadow:0 30px 100px #0007;transform:perspective(1200px) rotateY(-3deg)}.console-top{height:49px;display:flex;align-items:center;gap:15px;padding:0 18px;background:#14253a;border-bottom:1px solid var(--line);font: .73rem ui-monospace,monospace;color:#9db1ca}.window-dots{display:flex;gap:5px}.window-dots i{width:8px;height:8px;border-radius:50%;background:#ff6961}.window-dots i:nth-child(2){background:#ffc45d}.window-dots i:nth-child(3){background:#52d69a}.console-live{margin-left:auto;color:var(--green);font-size:.65rem}.console-live b{margin-right:6px}.console-body{padding:30px}.console-label{font-size:.65rem;letter-spacing:.16em;color:#6c91b8;font-weight:800}.console-body h2{font-size:1.7rem;margin:5px 0}.console-body>p{font-size:.86rem;color:var(--muted);margin:0 0 22px}.mini-apps{display:grid;gap:10px}.mini-app{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#ffffff04;border-radius:12px;padding:13px}.app-symbol{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;font-size:1.1rem}.symbol-blue{background:#4c9dff1c;color:#70b5ff}.symbol-purple{background:#b5a0ff1c;color:var(--purple)}.symbol-green{background:#6be3b01c;color:var(--green)}.mini-app>span:nth-child(2){display:flex;flex-direction:column;line-height:1.4}.mini-app b{font-size:.85rem}.mini-app small{font-size:.72rem;color:var(--muted);margin-top:3px}.mini-arrow{margin-left:auto;color:#7f9ab9}.console-foot{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.62rem;color:#829bb8}.console-foot .status-dot{margin-right:6px}.trust-strip{border-block:1px solid var(--line);background:#0b1728}.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;font-size:.76rem;letter-spacing:.1em;color:#d7e3f2}.trust-inner>span{font-size:.64rem;color:#7188a6;letter-spacing:.14em}.trust-inner i{height:4px;width:4px;border-radius:50%;background:#4c9dff}.section-block{padding-top:92px;padding-bottom:96px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}.section-heading h2,.project-copy h2,.about-inner h2,.final-cta h2{font-size:clamp(2rem,4vw,3.1rem)}.section-heading p{max-width:680px;color:var(--muted);margin:15px 0 0}.catalog-count{white-space:nowrap;border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:.76rem;color:var(--muted)}.catalog-count strong{color:#fff}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}.search-box{display:flex;align-items:center;gap:10px;min-width:min(100%,330px);padding:0 13px;border:1px solid var(--line);background:#ffffff04;border-radius:10px;color:#91a9c6}.search-box>span{font-size:1.5rem}.search-box input{width:100%;background:transparent;border:0;outline:none;color:white;padding:12px 0;font-size:.82rem}.search-box input::placeholder{color:#71839d}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter-chip{border:1px solid var(--line);background:transparent;color:#aebed2;border-radius:9px;padding:8px 12px;font-size:.76rem;cursor:pointer}.filter-chip:hover,.filter-chip.active{background:#3988f51b;border-color:#4c9dff75;color:#8fc4ff}.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.app-card{min-height:300px;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);background:linear-gradient(145deg,#122239,#0d192a);border-radius:16px;transition:transform .2s,border-color .2s,box-shadow .2s}.app-card:hover{transform:translateY(-4px);border-color:#4c9dff70;box-shadow:0 18px 40px #0002}.app-card[hidden]{display:none}.app-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:8px}.app-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;font-size:1.3rem}.icon-blue{background:#4c9dff1c;color:#75b9ff}.icon-purple{background:#b5a0ff1c;color:#c1b1ff}.icon-orange{background:#ffb66d1b;color:#ffbd7e}.icon-green{background:#6be3b01b;color:#6be3b0}.icon-pink{background:#ff83c51b;color:#ff9bd1}.icon-cyan{background:#54e4f51b;color:#54e4f5}.status{font-size:.62rem;border-radius:100px;padding:5px 8px;border:1px solid transparent;white-space:nowrap}.status-live{color:#77e6b2;background:#6be3b012;border-color:#6be3b02a}.status-plan{color:#c0b1ff;background:#b5a0ff12;border-color:#b5a0ff2b}.status-service{color:#ffc080;background:#ffb66d12;border-color:#ffb66d2b}.app-meta{font-size:.62rem;letter-spacing:.12em;color:#6e91b8;font-weight:800}.app-card h3{font-size:1.14rem;letter-spacing:-.025em;margin:7px 0 8px}.app-card p{font-size:.81rem;color:var(--muted);margin:0 0 17px;line-height:1.6}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;margin-bottom:18px}.tag-row span,.about-tags span{font-size:.65rem;padding:4px 8px;border-radius:6px;background:#ffffff07;border:1px solid var(--line);color:#9cb0c9}.app-link{display:flex;justify-content:space-between;align-items:center;padding-top:13px;border-top:1px solid var(--line);color:#82baff;font-size:.78rem;font-weight:750}.app-link:hover{color:var(--cyan)}.small-note{font-size:.72rem;color:#71839d;margin:20px 0 0}.empty-state{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}.empty-state strong,.empty-state span{display:block}.empty-state strong{color:white;margin-bottom:5px}.services-band{background:#0b1728;border-block:1px solid var(--line)}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.service-card{position:relative;padding:25px 22px;border:1px solid var(--line);background:#101f33;border-radius:15px;overflow:hidden}.service-number{position:absolute;right:17px;top:12px;color:#4d6482;font-size:.72rem}.service-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#4c9dff17;color:#79b9ff;font-size:1.4rem}.service-card h3{font-size:1rem;margin:20px 0 7px}.service-card p{color:var(--muted);font-size:.8rem;min-height:76px;margin:0 0 18px}.service-card a{font-size:.75rem;font-weight:750;color:#82baff}.project-panel{display:grid;grid-template-columns:1fr .9fr;gap:60px;padding:42px;border:1px solid #4c9dff35;border-radius:22px;background:radial-gradient(ellipse at 10% 0%,#15396370,transparent 60%),#0c1929}.project-copy p,.about-inner p{max-width:570px;color:var(--muted);margin:18px 0 25px}.roadmap{display:grid;gap:10px}.roadmap-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#08111f91;border-radius:12px;padding:14px}.roadmap-item>span{width:34px;height:34px;display:grid;place-items:center;background:#ffffff08;border-radius:9px;color:#89baff;font-size:.72rem}.roadmap-item div{display:flex;flex-direction:column;line-height:1.4}.roadmap-item b{font-size:.82rem}.roadmap-item small{font-size:.69rem;color:var(--muted);margin-top:4px}.roadmap-item em{font-style:normal;margin-left:auto;font-size:.63rem;color:#8ea5c1}.roadmap-item.done>span{background:#6be3b01b;color:var(--green)}.roadmap-item.done em{color:var(--green)}.about-section{background:#0b1728;border-block:1px solid var(--line)}.about-inner{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:55px;padding-top:82px;padding-bottom:82px}.about-emblem{height:170px;width:170px;display:grid;place-content:center;border:1px solid #4c9dff45;border-radius:38px;background:linear-gradient(145deg,#183456,#0b1728);font-size:3rem;font-weight:900;letter-spacing:-.1em;position:relative}.about-emblem span{color:var(--blue)}.about-emblem i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--cyan);right:20px;top:20px;box-shadow:0 0 20px var(--cyan)}.about-inner p{margin-bottom:18px}.about-tags{display:flex;gap:8px;flex-wrap:wrap}.final-cta{text-align:center;padding-top:88px;padding-bottom:92px}.final-cta p{color:var(--muted);margin:15px 0 24px}.final-cta .eyebrow{margin-bottom:13px}.footer{border-top:1px solid var(--line);background:#060d17}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:28px}.footer-main>p{color:var(--muted);font-size:.76rem;margin:0}.footer-links{display:flex;gap:18px;font-size:.78rem;color:#a9bad0}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;padding-bottom:18px;color:#71839d;font-size:.7rem}.footer-bottom a{color:#a9bad0}
@media(max-width:1050px){.hero{gap:32px}.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main-nav{gap:17px}.console-body{padding:23px}}
@media(max-width:760px){.section-wrap{width:min(var(--max),calc(100% - 32px))}.topbar{padding:12px 16px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:14px 16px 18px;background:#08111ff7;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}.main-nav.open{display:flex}.main-nav>a{padding:10px}.nav-cta{text-align:center;margin-top:5px}.hero{grid-template-columns:1fr;padding-top:64px;padding-bottom:60px;gap:36px;min-height:unset}.hero h1{font-size:clamp(2.55rem,10vw,4rem)}.hero-lead{font-size:.98rem}.hero-proof{gap:23px;margin-top:32px}.console-card{transform:none}.console-body{padding:20px}.trust-inner{justify-content:center;flex-wrap:wrap;padding:20px 0;gap:12px}.trust-inner>span{width:100%;text-align:center}.section-block{padding-top:65px;padding-bottom:68px}.section-heading{align-items:start;flex-direction:column;margin-bottom:24px}.section-heading h2,.project-copy h2,.about-inner h2,.final-cta h2{font-size:clamp(2rem,8vw,2.8rem)}.catalog-toolbar{align-items:stretch}.search-box{width:100%}.filters{width:100%}.filter-chip{flex:1}.app-grid{gap:11px}.app-card{padding:16px;min-height:315px}.app-card-top{align-items:start;flex-direction:column;margin-bottom:17px}.app-card h3{font-size:1rem}.status{font-size:.58rem}.service-grid{gap:11px}.service-card{padding:18px 15px}.service-card p{min-height:112px}.project-panel{grid-template-columns:1fr;padding:25px 19px;gap:30px}.roadmap-item{gap:9px;padding:11px}.roadmap-item em{font-size:.57rem}.about-inner{grid-template-columns:1fr;gap:25px;padding-top:62px;padding-bottom:62px}.about-emblem{width:100px;height:100px;border-radius:25px;font-size:2rem}.footer-main{align-items:flex-start;flex-direction:column}.footer-bottom{gap:12px;flex-wrap:wrap}}
@media(max-width:430px){.announcement{font-size:.68rem;gap:6px}.announcement a{margin-left:2px}.brand-copy strong{font-size:.69rem}.brand-copy small{font-size:.52rem}.hero-actions .button{width:100%}.hero-proof{justify-content:space-between;gap:8px}.hero-proof strong{font-size:1.15rem}.hero-proof span{font-size:.66rem}.app-grid{grid-template-columns:1fr}.app-card{min-height:unset}.app-card-top{flex-direction:row;align-items:center}.app-card p{min-height:unset}.service-grid{grid-template-columns:1fr}.service-card p{min-height:unset}.console-foot{font-size:.55rem}.console-body h2{font-size:1.45rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Identidad visual por proyecto: reemplaza el SVG de assets/icons/ por el logo oficial */
.app-icon.app-logo{overflow:hidden;padding:5px;background:#0a1524;border:1px solid var(--line);flex-shrink:0}
.app-icon.app-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}



/* Identidad visual 3CB: pixel art + neón */
.about-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 180px;
}

.logo-pixel-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 180px;
    height: 180px;
    padding: 12px;
    background:
        linear-gradient(135deg, rgba(0, 195, 235, .13), transparent 55%),
        #050b14;
    border: 2px solid #00c5e9;
    border-radius: 18px 5px 18px 5px;
    box-shadow:
        0 0 14px rgba(0, 195, 235, .25),
        inset 0 0 22px rgba(0, 195, 235, .08);
    image-rendering: pixelated;
    animation: logo-float 4s ease-in-out infinite;
}

.logo-mascot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(0, 195, 235, .22));
}

/* Esquinas geométricas */
.pixel-corner {
    position: absolute;
    width: 13px;
    height: 13px;
    border-color: #e72cff;
    border-style: solid;
}

.pixel-top-left {
    top: -5px;
    left: -5px;
    border-width: 3px 0 0 3px;
}

.pixel-bottom-right {
    right: -5px;
    bottom: -5px;
    border-width: 0 3px 3px 0;
}

.logo-caption {
    font-family: monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #00c5e9;
    text-shadow: 0 0 10px rgba(0, 195, 235, .3);
}

.logo-caption span {
    color: #e72cff;
}

@keyframes logo-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@media (max-width: 600px) {
    .about-logo {
        min-width: 0;
    }

    .logo-pixel-frame {
        width: 135px;
        height: 135px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-pixel-frame {
        animation: none;
    }
}


/* =========================================================
   IDENTIDAD CORPORATIVA 3CB + MODOS DE APARIENCIA
   Paleta: negro, cian, azul eléctrico y magenta/morado.
   ========================================================= */
:root {
  color-scheme: dark;
  --bg: #050505;
  --bg2: #09090d;
  --panel: #101018;
  --panel2: #171321;
  --line: rgba(0, 190, 220, .20);
  --text: #f5f7fb;
  --muted: #a7a9b8;
  --blue: #075dff;
  --cyan: #00b7d5;
  --green: #00b7d5;
  --purple: #a52be0;
  --brand-magenta: #e72cff;
  --brand-electric: #075dff;
  --radius: 18px;
}
html { color-scheme: dark; }
body { background: var(--bg); color: var(--text); }
.announcement { background: #0b0b10; }
.topbar { background: rgba(5,5,5,.94); }
.brand-mark span { color: var(--cyan); }
.nav-cta { border-color: rgba(0,183,213,.55); background: rgba(0,183,213,.10); }
.nav-cta:hover { border-color: var(--brand-magenta); }
.pulse-dot,.console-live b,.status-dot { background: var(--cyan); box-shadow: 0 0 12px rgba(0,183,213,.55); }
.eyebrow,.announcement a { color: var(--cyan); }
.gradient-text { background-image: linear-gradient(100deg,var(--brand-magenta),var(--cyan)); }
.button-primary { background: linear-gradient(110deg,var(--brand-electric),var(--cyan)); color: #fff; box-shadow: 0 10px 30px rgba(0,183,213,.16); }
.button-primary:hover { background: linear-gradient(110deg,#347cff,#36d7e9); }
.button-secondary { border-color: var(--line); }
.trust-strip,.services-band,.about-section { background: #09090d; }
.app-card { background: linear-gradient(145deg,#15131d,#0b0b10); }
.app-card:hover { border-color: rgba(231,44,255,.55); }
.filter-chip:hover,.filter-chip.active { background: rgba(0,183,213,.12); border-color: rgba(0,183,213,.65); color: #65eaff; }
.app-link,.service-card a { color: #43d9ed; }
.app-link:hover { color: var(--brand-magenta); }
.project-panel { border-color: rgba(0,183,213,.30); background: radial-gradient(ellipse at 10% 0%,rgba(7,93,255,.20),transparent 60%),#0b0b10; }
.about-emblem { border-color: rgba(0,183,213,.55); }
.logo-pixel-frame { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,183,213,.25), inset 0 0 22px rgba(0,183,213,.08); }
.pixel-corner { border-color: var(--brand-magenta); }
.logo-caption { color: var(--cyan); }
.logo-caption span { color: var(--brand-magenta); }
.footer { background: #030303; }

/* Controles de apariencia */
.theme-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  flex-shrink: 0;
}
.theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
  transition: background .2s,border-color .2s,color .2s;
}
.theme-button:hover { color: var(--text); border-color: var(--line); }
.theme-button[aria-pressed="true"] {
  color: var(--text);
  background: rgba(0,183,213,.15);
  border-color: rgba(0,183,213,.45);
}
.theme-button:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 3px; }

/* Tema claro: superficies limpias, conservando los acentos 3CB */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg2: #eaf0f7;
  --panel: #ffffff;
  --panel2: #edf3fa;
  --line: rgba(16,45,75,.16);
  --text: #142033;
  --muted: #536277;
  --blue: #075dff;
  --cyan: #008da8;
  --green: #008da8;
  --purple: #8620bd;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .announcement,
html[data-theme="light"] .trust-strip,
html[data-theme="light"] .services-band,
html[data-theme="light"] .about-section { background: #eaf0f7; }
html[data-theme="light"] .topbar { background: rgba(244,247,251,.94); }
html[data-theme="light"] .brand-mark { color: #142033; }
html[data-theme="light"] .main-nav { color: #34445b; }
html[data-theme="light"] .nav-cta { color: #142033; }
html[data-theme="light"] .button-secondary { color: #142033; background: #fff; }
html[data-theme="light"] .console-card,
html[data-theme="light"] .project-panel { background: #fff; }
html[data-theme="light"] .console-top { background: #e8eff7; color: #40536d; }
html[data-theme="light"] .console-label { color: #526d8e; }
html[data-theme="light"] .mini-app,
html[data-theme="light"] .roadmap-item { background: #f4f7fb; }
html[data-theme="light"] .trust-inner { color: #26364c; }
html[data-theme="light"] .app-card,
html[data-theme="light"] .service-card { background: #fff; box-shadow: 0 8px 25px rgba(20,40,70,.05); }
html[data-theme="light"] .app-card h3,
html[data-theme="light"] .service-card h3,
html[data-theme="light"] .console-body h2,
html[data-theme="light"] .roadmap-item b { color: #142033; }
html[data-theme="light"] .app-link,
html[data-theme="light"] .service-card a { color: #006d91; }
html[data-theme="light"] .search-box,
html[data-theme="light"] .filter-chip { background: #fff; color: #34445b; }
html[data-theme="light"] .search-box input { color: #142033; }
html[data-theme="light"] .search-box input::placeholder { color: #68778b; }
html[data-theme="light"] .tag-row span,
html[data-theme="light"] .about-tags span { background: #f1f5fa; color: #45566d; }
html[data-theme="light"] .footer { background: #e4ebf4; }
html[data-theme="light"] .footer-main .brand-mark { color: #142033; }
html[data-theme="light"] .menu-toggle { color: #142033; }
html[data-theme="light"] .main-nav.open { background: #f4f7fb; }
html[data-theme="light"] .logo-pixel-frame { background: #fff; }

/* Cuidado visual: tonos cálidos, menos azul y superficies suaves.
   No sustituye descansos ni ajustes de brillo del dispositivo. */
html[data-theme="eye"] {
  color-scheme: light;
  --bg: #f3ecdc;
  --bg2: #eee4d1;
  --panel: #fff8e9;
  --panel2: #f5ecd9;
  --line: rgba(91,68,39,.20);
  --text: #30291f;
  --muted: #675b4b;
  --blue: #8a5b35;
  --cyan: #8a6338;
  --green: #8a6338;
  --purple: #8c4d8c;
}
html[data-theme="eye"] body { background: var(--bg); color: var(--text); }
html[data-theme="eye"] .announcement,
html[data-theme="eye"] .trust-strip,
html[data-theme="eye"] .services-band,
html[data-theme="eye"] .about-section { background: #e9dfcc; }
html[data-theme="eye"] .topbar { background: rgba(243,236,220,.96); }
html[data-theme="eye"] .brand-mark { color: #30291f; }
html[data-theme="eye"] .main-nav { color: #514535; }
html[data-theme="eye"] .nav-cta { color: #30291f; border-color: #a17b51; background: #a17b5118; }
html[data-theme="eye"] .eyebrow,
html[data-theme="eye"] .announcement a { color: #81572f; }
html[data-theme="eye"] .gradient-text { background-image: linear-gradient(100deg,#99539a,#8a6338); }
html[data-theme="eye"] .button-primary { background: linear-gradient(110deg,#87559a,#a77943); color: #fff; }
html[data-theme="eye"] .button-secondary { color: #30291f; background: #fff8e9; }
html[data-theme="eye"] .console-card,
html[data-theme="eye"] .project-panel { background: #fff8e9; }
html[data-theme="eye"] .console-top { background: #e8ddc8; color: #514535; }
html[data-theme="eye"] .console-label { color: #765b3c; }
html[data-theme="eye"] .mini-app,
html[data-theme="eye"] .roadmap-item { background: #f7efdf; }
html[data-theme="eye"] .trust-inner { color: #514535; }
html[data-theme="eye"] .app-card,
html[data-theme="eye"] .service-card { background: #fff8e9; box-shadow: 0 8px 25px rgba(75,55,30,.05); }
html[data-theme="eye"] .app-card h3,
html[data-theme="eye"] .service-card h3,
html[data-theme="eye"] .console-body h2,
html[data-theme="eye"] .roadmap-item b { color: #30291f; }
html[data-theme="eye"] .app-link,
html[data-theme="eye"] .service-card a { color: #76502e; }
html[data-theme="eye"] .search-box,
html[data-theme="eye"] .filter-chip { background: #fff8e9; color: #514535; }
html[data-theme="eye"] .search-box input { color: #30291f; }
html[data-theme="eye"] .search-box input::placeholder { color: #766b5a; }
html[data-theme="eye"] .tag-row span,
html[data-theme="eye"] .about-tags span { background: #f4ead7; color: #5f503d; }
html[data-theme="eye"] .footer { background: #e6dbc7; }
html[data-theme="eye"] .footer-main .brand-mark { color: #30291f; }
html[data-theme="eye"] .menu-toggle { color: #30291f; }
html[data-theme="eye"] .main-nav.open { background: #f3ecdc; }
html[data-theme="eye"] .logo-pixel-frame { background: #fff8e9; }
html[data-theme="eye"] .theme-button[aria-pressed="true"] { background: #e3d2b6; border-color: #a17b51; color: #30291f; }

/* En pantallas estrechas, los tres modos siguen disponibles sin romper el menú */
@media (max-width: 1050px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .theme-controls { margin-left: auto; }
}
@media (max-width: 760px) {
  .topbar { display: flex; }
  .theme-controls { order: 2; margin-left: auto; }
  .menu-toggle { order: 3; }
  .main-nav { order: 4; }
  .theme-button { padding: 6px 7px; font-size: .68rem; }
}
@media (max-width: 430px) {
  .theme-controls { width: 100%; order: 4; justify-content: center; }
  .menu-toggle { order: 3; }
  .main-nav { order: 5; }
  .theme-button { flex: 1; }
}


/* =========================================================
   NAVEGACIÓN 3CB — menú editorial + accesos destacados
   ========================================================= */
.topbar {
  gap: 18px;
  min-height: 82px;
}
.main-nav {
  gap: 15px;
  color: var(--text);
}
.nav-main-links {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.nav-main-links > a {
  position: relative;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
  transition: color .2s, background .2s, transform .2s;
}
.nav-main-links > a:hover {
  color: var(--text);
  background: rgba(0,183,213,.10);
  transform: translateY(-1px);
}
.nav-featured {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 7px 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px 4px 11px 4px;
  color: #fff;
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.nav-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .95;
  transition: opacity .22s ease;
}
.nav-feature::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 55px;
  height: 140%;
  top: -20%;
  left: -75px;
  transform: rotate(22deg);
  background: rgba(255,255,255,.22);
  transition: left .45s ease;
}
.nav-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 24px rgba(0,0,0,.22);
}
.nav-feature:hover::after { left: 120%; }
.nav-arena {
  border-color: rgba(0,183,213,.55);
  box-shadow: inset 0 0 18px rgba(0,183,213,.08);
}
.nav-arena::before {
  background: linear-gradient(130deg, #063b4b, #071a29 72%);
}
.nav-arena:hover { border-color: #00c5e9; box-shadow: 0 8px 25px rgba(0,183,213,.18); }
.nav-courses {
  border-color: rgba(231,44,255,.48);
  box-shadow: inset 0 0 18px rgba(231,44,255,.08);
}
.nav-courses::before {
  background: linear-gradient(130deg, #40104e, #1b1029 72%);
}
.nav-courses:hover { border-color: #e72cff; box-shadow: 0 8px 25px rgba(231,44,255,.18); }
.nav-feature-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  color: #54e4f5;
  font-size: 1.1rem;
}
.nav-courses .nav-feature-icon { color: #f18bff; }
.nav-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  white-space: nowrap;
}
.nav-feature-copy strong {
  font-size: .67rem;
  letter-spacing: .075em;
  font-weight: 850;
}
.nav-feature-copy small {
  color: rgba(255,255,255,.67);
  font-size: .57rem;
  letter-spacing: .01em;
}
.nav-feature-arrow {
  align-self: flex-start;
  margin-left: 2px;
  color: rgba(255,255,255,.65);
  font-size: .78rem;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border: 1px solid rgba(0,183,213,.55);
  border-radius: 10px;
  color: var(--text);
  background: linear-gradient(120deg, rgba(0,183,213,.16), rgba(231,44,255,.10));
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,183,213,.15); }
.nav-cta-icon { color: var(--brand-magenta, #e72cff); }
.menu-toggle {
  cursor: pointer;
  font-size: 1.15rem;
  min-width: 42px;
  min-height: 42px;
  transition: border-color .2s, background .2s, transform .2s;
}
.menu-toggle:hover { border-color: var(--cyan); background: rgba(0,183,213,.10); transform: scale(1.04); }

html[data-theme="light"] .nav-main-links,
html[data-theme="eye"] .nav-main-links {
  background: rgba(20,35,55,.035);
}
html[data-theme="light"] .nav-main-links > a:hover,
html[data-theme="eye"] .nav-main-links > a:hover {
  background: rgba(0,110,145,.09);
}
html[data-theme="light"] .nav-feature,
html[data-theme="eye"] .nav-feature { color: #fff; }
html[data-theme="light"] .nav-cta,
html[data-theme="eye"] .nav-cta {
  background: linear-gradient(120deg, rgba(0,183,213,.12), rgba(231,44,255,.08));
}

@media (max-width: 1250px) {
  .topbar { gap: 12px; }
  .main-nav { gap: 9px; }
  .nav-main-links { gap: 1px; }
  .nav-main-links > a { padding-inline: 8px; }
  .nav-feature { padding-inline: 8px; gap: 6px; }
  .nav-feature-copy small { display: none; }
}
@media (max-width: 1050px) {
  .topbar { flex-wrap: wrap; }
  .main-nav {
    width: 100%;
    justify-content: space-between;
    order: 5;
  }
  .theme-controls { margin-left: auto; }
}
@media (max-width: 760px) {
  .topbar { display: flex; flex-wrap: wrap; }
  .menu-toggle { order: 3; }
  .theme-controls { order: 2; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    width: 100%;
    padding: 17px 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 35px rgba(0,0,0,.28);
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
  }
  .main-nav.open { display: flex; }
  .nav-main-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 6px;
  }
  .nav-main-links > a { padding: 12px; text-align: center; }
  .nav-featured { display: grid; grid-template-columns: 1fr 1fr; }
  .nav-feature { min-height: 58px; padding: 9px; }
  .nav-feature-copy small { display: block; font-size: .55rem; }
  .nav-feature-copy strong { font-size: .63rem; }
  .nav-cta { justify-content: center; min-height: 44px; }
}
@media (max-width: 430px) {
  .theme-controls { width: 100%; order: 4; justify-content: center; }
  .menu-toggle { order: 3; }
  .main-nav { order: 5; }
  .nav-featured { grid-template-columns: 1fr; }
  .nav-feature { min-height: 54px; }
  .nav-feature-copy small { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-feature, .nav-feature::after, .nav-main-links > a, .nav-cta, .menu-toggle {
    transition: none !important;
  }
}


/* =========================================================
   RESPONSIVE REFINADO 3CB — desktop, laptop, tablet y móvil
   Prioriza evitar desbordamientos y mantener jerarquía visual.
   ========================================================= */
:root {
  --page-gutter: clamp(16px, 4.2vw, 64px);
}
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
.section-wrap {
  width: min(var(--max), calc(100% - (var(--page-gutter) * 2)));
}

/* Laptops y escritorio mediano: encabezado en dos niveles para que
   la marca y los controles no compitan con todos los enlaces. */
@media (min-width: 1051px) and (max-width: 1450px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px var(--page-gutter);
  }
  .brand { order: 1; }
  .theme-controls {
    order: 2;
    margin-left: auto;
  }
  .main-nav {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .nav-main-links { flex: 0 0 auto; }
  .nav-featured { flex: 0 1 auto; }
  .nav-feature { min-width: 0; }
  .nav-feature-copy small { display: block; }
  .nav-cta { flex: 0 0 auto; }
  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    gap: clamp(28px, 4vw, 54px);
  }
  .hero h1 { font-size: clamp(2.8rem, 4.3vw, 4rem); }
}

/* Tablets y pantallas compactas: navegación tipo panel desplegable. */
@media (max-width: 1050px) {
  .topbar {
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px var(--page-gutter);
  }
  .brand { order: 1; }
  .menu-toggle {
    display: inline-grid;
    place-items: center;
    order: 3;
    margin-left: 0;
  }
  .theme-controls {
    order: 2;
    margin-left: auto;
    max-width: calc(100% - 230px);
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    order: 4;
    padding: 18px var(--page-gutter) 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 38px rgba(0,0,0,.20);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .main-nav.open { display: flex; }
  .nav-main-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  .nav-main-links > a { text-align: center; }
  .nav-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-feature { min-width: 0; }
  .nav-cta { justify-content: center; min-height: 46px; }
  .hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 28px;
    padding-top: clamp(54px, 8vw, 82px);
    padding-bottom: clamp(54px, 8vw, 82px);
  }
  .hero h1 { font-size: clamp(2.55rem, 5.4vw, 3.7rem); }
  .console-body { padding: 22px; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Móviles: cabecera compacta, controles en una fila propia,
   navegación fácil de tocar y contenido a una columna. */
@media (max-width: 760px) {
  :root { --page-gutter: 18px; }
  html { scroll-padding-top: 118px; }
  .announcement {
    min-height: 34px;
    flex-wrap: wrap;
    text-align: center;
    line-height: 1.35;
    padding: 7px 12px;
    font-size: .68rem;
  }
  .announcement a { margin-left: 4px; }
  .topbar {
    padding: 11px var(--page-gutter);
    gap: 10px;
  }
  .brand { gap: 8px; }
  .brand-mark { font-size: 1.45rem; }
  .brand-copy strong { font-size: .68rem; }
  .brand-copy small { font-size: .5rem; letter-spacing: .09em; }
  .menu-toggle {
    order: 2;
    margin-left: auto;
    min-width: 42px;
    min-height: 42px;
  }
  .theme-controls {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    justify-content: center;
    gap: 5px;
  }
  .theme-button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 7px 5px;
    font-size: .68rem;
  }
  .main-nav {
    order: 4;
    top: 100%;
    padding: 14px var(--page-gutter) 18px;
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
  }
  .nav-main-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-main-links > a { padding: 12px 8px; font-size: .8rem; }
  .nav-featured { grid-template-columns: 1fr; gap: 8px; }
  .nav-feature { min-height: 58px; padding: 10px 12px; }
  .nav-feature-copy small { display: block; font-size: .62rem; }
  .nav-feature-copy strong { font-size: .7rem; }
  .nav-cta { width: 100%; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding-top: 54px;
    padding-bottom: 52px;
  }
  .hero-grid { background-size: 32px 32px; }
  .hero h1 {
    max-width: 15ch;
    font-size: clamp(2.35rem, 9.2vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -.06em;
    overflow-wrap: break-word;
  }
  .hero-lead { font-size: .98rem; margin: 19px 0 24px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-proof { justify-content: space-between; gap: 12px; margin-top: 28px; }
  .console-card { width: 100%; transform: none; }
  .console-body { padding: clamp(17px, 5vw, 24px); }
  .trust-inner { justify-content: center; flex-wrap: wrap; padding: 19px 0; gap: 10px 13px; }
  .trust-inner > span { width: 100%; text-align: center; }
  .section-block { padding-top: 58px; padding-bottom: 62px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .section-heading h2, .project-copy h2, .about-inner h2, .final-cta h2 {
    font-size: clamp(2rem, 7.5vw, 2.8rem);
  }
  .catalog-toolbar { align-items: stretch; }
  .search-box { width: 100%; min-width: 0; }
  .filters { width: 100%; }
  .filter-chip { flex: 1 1 auto; }
  .app-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-card { min-width: 0; padding: 16px; }
  .app-card-top { flex-direction: row; align-items: center; }
  .project-panel { grid-template-columns: minmax(0, 1fr); padding: 25px 19px; gap: 28px; }
  .about-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; padding-bottom: 56px; }
  .footer-main { align-items: flex-start; flex-direction: column; }
}

/* Teléfonos pequeños: una sola columna para evitar tarjetas estrechas. */
@media (max-width: 480px) {
  :root { --page-gutter: 16px; }
  .brand-copy small { font-size: .47rem; }
  .theme-button { font-size: .62rem; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero-proof { gap: 8px; }
  .hero-proof strong { font-size: 1.1rem; }
  .hero-proof span { font-size: .63rem; }
  .console-top { gap: 9px; padding-inline: 12px; }
  .console-body h2 { font-size: 1.4rem; }
  .console-foot { flex-wrap: wrap; font-size: .56rem; }
  .app-grid, .service-grid { grid-template-columns: minmax(0, 1fr); }
  .app-card { min-height: 0; padding: 19px; }
  .app-card p, .service-card p { min-height: 0; }
  .app-card-top { flex-direction: row; }
  .catalog-count { align-self: flex-start; }
  .trust-inner { font-size: .68rem; }
  .roadmap-item { min-width: 0; }
  .roadmap-item small { overflow-wrap: anywhere; }
  .footer-bottom { gap: 10px; flex-wrap: wrap; }
}

/* Pantallas muy anchas: evita que el contenido se estire demasiado. */
@media (min-width: 1600px) {
  :root { --max: 1280px; }
  .hero { min-height: 700px; }
}

/* Accesibilidad: objetivos táctiles y foco visibles. */
@media (hover: none) {
  .button:hover, .nav-feature:hover, .app-card:hover { transform: none; }
}