/* ══ RESET ══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:'JetBrains Mono',monospace}

/* ══ VARIABLES ══ */
:root{
  --cyan:#05c8d8;
  --cyan-dark:#047090;
  --cyan-mid:#0590aa;
  --green:#3dba8c;
  --orange:#e8702a;
  --bg-dark:#060a0e;
  --bg-panel:#071f2e;
  --bg-deep:#040f18;
  --bg-mid:#053040;
}

/* ══ FONDO ══ */
body{background:var(--bg-dark);transition:background 1.2s ease}
body.rendered{background:linear-gradient(135deg,#05c8d8 0%,#07a8c0 30%,#0590aa 60%,#047090 100%)}
body.rendered.on-m2,body.rendered.on-m3,body.rendered.on-m4,
body.rendered.on-m5,body.rendered.on-m6,body.rendered.on-m7{background:var(--bg-dark)}
body.kill-overlay{background:var(--bg-dark)!important;transition:none!important}
body.kill-overlay::after{transition:none!important;background:transparent!important}
body.kill-overlay .bg-slide{opacity:0!important;transition:none!important}

/* ══ BG SLIDES ══ */
.bg-slide{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:0;transition:opacity 2.4s ease}
.bg-slide.active{opacity:0}
body.rendered:not(.on-m2):not(.on-m3):not(.on-m4):not(.on-m5):not(.on-m6):not(.on-m7) .bg-slide.active{opacity:1}
body.on-m2 .bg-slide,body.on-m3 .bg-slide,body.on-m4 .bg-slide,
body.on-m5 .bg-slide,body.on-m6 .bg-slide,body.on-m7 .bg-slide{opacity:0!important;transition:opacity 0.4s ease!important}
.bg-slide-1{background-image:url('../images/fondo1.jpg')}
.bg-slide-2{background-image:url('../images/fondo2.jpg')}
.bg-slide-3{background-image:url('../images/fondo3.jpg')}

/* ══ OVERLAY TEAL — solo M1 ══ */
body::after{content:'';position:fixed;inset:0;z-index:-1;background:transparent;transition:background 1.2s ease;pointer-events:none}
body.rendered:not(.on-m2):not(.on-m3):not(.on-m4):not(.on-m5):not(.on-m6):not(.on-m7)::after{
  background:linear-gradient(135deg,rgba(5,200,216,0.75) 0%,rgba(7,168,192,0.75) 30%,rgba(5,144,170,0.75) 60%,rgba(4,112,144,0.75) 100%);
}

/* ══ KEYFRAMES GLOBALES ══ */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ldot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:0.6}}
@keyframes typingPulse{0%,100%{opacity:0.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes browserFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}