/* === Variables Globales === */
:root {
  --bg:#0a1114;
  --bg-card:#141b1f;
  --border:rgba(255,255,255,0.10);
  --font:'Inter',system-ui,sans-serif;
  --grad-accent:linear-gradient(110deg,#2563eb,#06b6d4 45%,#10b981 85%);
  --grad-badge:linear-gradient(90deg,#2563eb,#06b6d4,#10b981);
  --dock-bottom:max(20px, env(safe-area-inset-bottom, 20px));
  --sticky-top:110px;
}

/* Base y layout */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);
  background:radial-gradient(circle at 30% 20%, #0f1d23 0%, #061012 60%);
  color:#fff;-webkit-font-smoothing:antialiased;
  min-height:100dvh;overflow-x:hidden;
}
::selection{background:#2563eb55;color:#ffffff;}

.starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;}

.main{max-width:1280px;margin:0 auto;padding:120px 32px 170px;}
.page-header{margin-bottom:56px;}
.subhead{margin:12px 0 0;font:.95rem/1.6 var(--font);opacity:.75;max-width:720px;}

/* Títulos y gradiente */
.gradient-title{
  background:var(--grad-accent);background-size:180% 180%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 14s linear infinite;margin:0;line-height:1.1;
}
.big{font-size:clamp(2.4rem,5vw,3.5rem);}
@keyframes gradShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* Cards */
.card{
  background:var(--bg-card)/82%;backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--border);border-radius:40px;
  padding:48px clamp(1.8rem,3vw,3rem);position:relative;overflow:hidden;
  box-shadow:0 4px 28px -12px rgba(0,0,0,.65);
  transition:border-color .35s,transform .4s,background .35s;
}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), transparent 65%),
             radial-gradient(circle at 75% 70%, rgba(255,255,255,0.05), transparent 70%);
  opacity:0;transition:opacity .55s;mix-blend-mode:overlay;
}
.card:hover{border-color:rgba(255,255,255,0.20);transform:translateY(-4px);}
.card:hover::before{opacity:1;}
@media (max-width:780px){.card{padding:40px 28px;border-radius:34px;}}

/* Hero */
.hero{display:flex;justify-content:center;}
.hero-card{text-align:center;max-width:880px;}
.lead{font-size:1.15rem;line-height:1.55;font-weight:500;}
.hero-actions{margin-top:34px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}

/* Botones */
.btn{
  --btn-bg:#1b262b;appearance:none;border:none;cursor:pointer;
  font:500 .92rem/1 var(--font);padding:14px 24px;border-radius:18px;
  color:#fff;background:var(--btn-bg);border:1px solid rgba(255,255,255,0.16);
  position:relative;overflow:hidden;text-decoration:none;
  transition:background .35s,border-color .35s,transform .25s;
}

.btn:hover{background:#223137;}
.btn-accent{background:var(--grad-accent);background-size:160% 160%;animation:gradShift 12s linear infinite;border:1px solid transparent;}
.btn-accent:hover{filter:brightness(1.06);}
.btn-outline{background:#162125;}
.btn-outline:hover{background:#1d2b30;}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;font:600 14px/1 var(--font);background:#2c3b41;color:#fff;}
.badge-grad{background:var(--grad-badge);background-size:200% 200%;animation:gradShift 10s ease-in-out infinite;}
.badge-blue{background:#2563eb;}
.badge-cyan{background:#06b6d4;}
.badge-emerald{background:#10b981;}
.badge-orange{background:#e79314;}
.badge-outline{
  background:#1e292e;border:1px solid rgba(255,255,255,0.16);padding:6px 11px;
  font:500 11px/1 var(--font);border-radius:10px;letter-spacing:.35px;color:#d3dade;
  transition:background .35s,border-color .35s,color .35s;
}
.badge-outline:hover{background:#253338;color:#fff;border-color:rgba(255,255,255,0.24);}

/* Proyectos */
.projects-grid{display:grid;gap:50px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:50px;}
.project-card{padding:28px 28px 36px;border-radius:36px;}
.project-media{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;margin-bottom:18px;}
.project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .85s;}
.project-card:hover .project-media img{transform:scale(1.06);}
.chip{position:absolute;top:10px;left:10px;background:#00000070;backdrop-filter:blur(6px);padding:4px 9px;border-radius:10px;font:600 11px/1 var(--font);border:1px solid rgba(255,255,255,0.2);}
.project-title{font:600 1.05rem/1.25 var(--font);margin:0 0 6px;}
.project-desc{font:400 .85rem/1.55 var(--font);opacity:.8;margin:0 0 14px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.project-link{display:inline-block;margin-top:18px;font:500 .85rem/1 var(--font);color:#8bc5ff;text-decoration:none;}
.project-link:hover{text-decoration:underline;}

/* Sobre mí grid + sticky */
.about-grid{display:grid;gap:50px;grid-template-columns:420px 1fr;align-items:start;}
@media (max-width:1150px){.about-grid{grid-template-columns:1fr;}}
.about-left{
  display:flex;flex-direction:column;gap:22px;padding:30px 28px 34px;border-radius:34px;
  position:sticky;top:var(--sticky-top);align-self:start;transition:box-shadow .4s,transform .4s;
}
.about-left.is-pinned{box-shadow:0 6px 24px -8px rgba(0,0,0,.55);}
.avatar-shell{display:flex;justify-content:center;}
.avatar-fallback{
  width:180px;height:180px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#2563eb33,#06b6d433,#10b98133);
  font:700 44px/1 var(--font);border-radius:32px;
  box-shadow:0 6px 22px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.06);color:#e6edf1;
}
.about-name{margin:12px 0 0;font:600 1.35rem/1.2 var(--font);}
.about-role{margin:4px 0 12px;font:400 .85rem/1.5 var(--font);opacity:.75;}
.about-tags{display:flex;flex-wrap:wrap;gap:6px;}
@media (max-width:1150px){.about-left{position:static;top:auto;}.avatar-fallback{width:200px;height:200px;font-size:50px;border-radius:40px;}}
.about-right{display:flex;flex-direction:column;gap:34px;padding-bottom:40px;}
.panel-title{margin:0 0 14px;font:600 1rem/1.3 var(--font);}
.panel-text{font:.85rem/1.55 var(--font);opacity:.8;margin:0 0 14px;}
.list{margin:0 0 14px;padding-left:18px;font:.85rem/1.5 var(--font);opacity:.82;}
.edu-note{margin:0;font:.7rem/1.4 var(--font);opacity:.5;}
.tech-tags{display:flex;flex-wrap:wrap;gap:8px;}

.contact-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.status{display:flex;gap:6px;align-items:center;font:600 .65rem/1 var(--font);color:#10b981;}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.dot-green{background:#10b981;}
.contact-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.contact-item{
  display:flex;justify-content:space-between;align-items:center;background:#1a2429;
  border:1px solid rgba(255,255,255,0.14);padding:12px 16px;border-radius:14px;
  color:#d0d9dd;font:500 .8rem/1 var(--font);text-decoration:none;
  transition:background .35s,border-color .35s,color .35s;position:relative;z-index:1;
}
.contact-item:hover{background:#212d33;color:#fff;border-color:rgba(255,255,255,0.25);}

/* Dispositivos */
.devices-list{display:flex;flex-direction:column;gap:0;margin:10px 0 14px;}
.device{display:flex;flex-direction:column;gap:4px;}
.device-btn{
  --grad-blue:linear-gradient(120deg,#1d4ed8,#2563eb 60%,#1e40af);
  --grad-cyan:linear-gradient(120deg,#0891b2,#06b6d4 60%,#0e7490);
  --grad-teal:linear-gradient(120deg,#0f766e,#0d9488 60%,#115e59);
  --grad-emerald:linear-gradient(120deg,#059669,#10b981 60%,#047857);
  --grad-amber:linear-gradient(120deg,#b45309,#f59e0b 60%,#92400e);
  background:#1e292e;border:1px solid rgba(255,255,255,0.14);color:#d5dce0;
  font:500 .8rem/1 var(--font);padding:12px 16px;border-radius:14px;text-align:left;
  display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;
  transition:background .35s,border-color .35s,color .35s,box-shadow .45s;outline:none;
}
.device-btn .indicator{width:10px;height:10px;border-radius:50%;background:#374348;box-shadow:0 0 0 1px #293337 inset;transition:background .4s,box-shadow .4s;}
.device-btn:hover{background:#243339;color:#fff;}
.device-btn.active{color:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,0.18),0 6px 18px -8px rgba(0,0,0,.6);}
.device-btn[data-color="blue"].active{background:var(--grad-blue);}
.device-btn[data-color="cyan"].active{background:var(--grad-cyan);}
.device-btn[data-color="teal"].active{background:var(--grad-teal);}
.device-btn[data-color="emerald"].active{background:var(--grad-emerald);}
.device-btn[data-color="amber"].active{background:var(--grad-amber);}
.device-btn.active .indicator{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,0.35);}
.device-spec-pop{
  display:none;position:relative;margin-left:4px;margin-top:0;background:#1c262a;border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:10px 14px 10px 18px;font:400 .7rem/1.5 var(--font);color:#cfd6da;
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .35s,transform .35s;max-width:420px;
}
.device-spec-pop ul{list-style:disc;margin:0;padding-left:18px;}
.device-btn.active + .device-spec-pop{display:block;opacity:1;transform:translateY(0);pointer-events:auto;margin-top:2px;}
.devices-hint{font:400 .65rem/1.4 var(--font);opacity:.45;margin:8px 4px 0;}

/* Contacto */
.contact-grid{display:grid;gap:48px;grid-template-columns:1fr 1fr;}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr;}}

/* Formulario */
.form{display:flex;flex-direction:column;gap:18px;}
.form-field{display:flex;flex-direction:column;gap:7px;font:600 .65rem/1 var(--font);letter-spacing:.7px;text-transform:uppercase;color:#ffffff80;}
.form-field input,.form-field textarea{
  background:#1b2529;border:1px solid rgba(255,255,255,0.14);border-radius:14px;
  padding:10px 13px;font:500 .82rem/1.4 var(--font);color:#fff;resize:none;outline:none;transition:border-color .3s,background .3s;
}
.form-field input:focus,.form-field textarea:focus{border-color:#2563eb;background:#202d32;}

.quick-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.quick-link{
  display:block;background:#1a2429;border:1px solid rgba(255,255,255,0.14);
  padding:12px 16px;border-radius:14px;color:#d0d9dd;font:500 .82rem/1.3 var(--font);text-decoration:none;
  transition:background .35s,border-color .35s,color .35s;
}
.quick-link:hover{background:#202d33;color:#fff;border-color:rgba(255,255,255,0.25);}

/* Video */
.video-embed{padding:0;aspect-ratio:16/9;overflow:hidden;}
.video-embed iframe{width:100%;height:100%;border:0;display:block;}

/* Dock */
.dock{
  position:fixed;bottom:var(--dock-bottom);left:42%;transform:translateX(-50%);
  display:flex;gap:14px;padding:14px 22px;background:#141b1fe6;
  border:1px solid var(--border);border-radius:26px;
  backdrop-filter:blur(14px) saturate(160%);z-index:50;
  box-shadow:0 6px 26px -10px rgba(0,0,0,.55);
  animation: floatAnimation 3s ease-in-out infinite;
}
@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.dock-item{
  
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:#1b2529;border:1px solid rgba(255,255,255,0.08);
  text-decoration:none;color:#d2dce0;transition:background .35s,border-color .35s,box-shadow .4s,color .35s;
}

.dock-item:hover{background:#223037;border-color:rgba(255,255,255,0.18);color:#fff;  animation: floatAnimation 3s ease-in-out infinite;
}
@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
.dock-item.active{
  background:var(--grad-accent);background-size:160% 160%;animation:dockGradient 12s linear infinite;
  border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,0.18),
  0 6px 20px -8px rgba(0,0,0,.65),0 0 24px -6px rgba(38,99,235,.3);color:#fff;
}
@keyframes dockGradient{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.icon{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;display:block;vector-effect:non-scaling-stroke;}
.dock-item[aria-label="YouTube"] .icon path:last-of-type{fill:currentColor;stroke:none;}
.icon-github path{fill:currentColor;stroke:none;}

@media (max-width:780px){
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn{width:100%;text-align:center;}
  .about-grid{gap:40px;}
  .contact-grid{gap:40px;}
}

/* Ajuste sticky en pantallas algo menores */
@media (max-width:1400px){:root{--sticky-top:96px;}}
body {
  min-height: 100vh;
  margin: 0;
  color: #ffffff;
  overflow-x: hidden;
}

.stars,
.stars:before,
.stars:after {
  position: fixed;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
  box-shadow:
    1200px 400px #ff0000, 300px 200px #ff0000, 800px 600px #ff0000,
    50px 1000px #ff0000, 1450px 300px #ff0000, 700px 1200px #ff0000,
    1600px 900px #ff0000, 400px 50px #ff0000, 1100px 750px #ff0000,
    950px 1400px #ff0000, 1300px 1100px #ff0000, 600px 1300px #ff0000,
    200px 700px #ff0000, 1500px 500px #ff0000, 1700px 300px #ff0000,
    1800px 1000px #ff0000, 300px 1400px #ff0000, 100px 400px #ff0000,
    900px 200px #ff0000, 500px 900px #ff0000;
  animation: drift 140s linear infinite;
  z-index: -3;
  opacity: 0.8;
}

.stars:before,
.stars:after {
  content: "";
  position: fixed;
  top: 0; left: 0;
}

.stars:before {
  width: 3px; height: 3px;
  box-shadow:
    400px 300px #ff0000, 1400px 800px #ff0000, 1000px 1200px #ff0000,
    600px 200px #ff0000, 200px 1100px #ff0000, 1700px 700px #ff0000,
    900px 500px #ff0000, 1300px 400px #ff0000, 1600px 1200px #ff0000,
    300px 500px #ff0000, 1500px 1000px #ff0000, 800px 1300px #ff0000;
  animation: drift 180s linear infinite;
  opacity: 0.6;
  z-index: -2;
}

.stars:after {
  width: 1px; height: 1px;
  box-shadow:
    200px 200px #fbff00, 600px 900px #fbff00, 1000px 300px #fbff00,
    1800px 600px #fbff00, 1500px 200px #fbff00, 900px 1000px #fbff00,
    500px 1500px #fbff00, 300px 800px #fbff00, 1200px 1300px #fbff00,
    1600px 400px #fbff00, 700px 600px #fbff00;
  animation: drift 200s linear infinite;
  opacity: 0.4;
  z-index: -1;
}

@keyframes drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(2000px); }
}

@keyframes twinkle {
  0%,100% { opacity: 0.8; }
  50% { opacity: 0.3; }
}

.stars,
.stars:before,
.stars:after {
  animation-name: drift, twinkle;
  animation-duration: 160s, 4s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
/* === Nueva estética inicio (Neon Aurora) === */
/* Paleta y ajustes extra sin romper variables existentes */
:root {
  --aurora-1:#6366f1;
  --aurora-2:#8b5cf6;
  --aurora-3:#ec4899;
  --aurora-4:#f59e0b;
  --glass-bg:rgba(20,27,31,0.55);
  --glass-border:rgba(255,255,255,0.08);
  --hero-max:960px;
  --noise-opacity:0.06;
  --ease-out: cubic-bezier(.16,.8,.24,1);
}

/* Fondo general refinado (solo inicio) */
body[data-page="inicio"]{
  background:
    radial-gradient(circle at 20% 25%, #111a21 0%, #081316 55%, #050d0f 100%),
    linear-gradient(115deg,#111a21,#0b1215 60%,#111a21);
  position:relative;
}

/* Capa sutil de ruido */
body[data-page="inicio"]::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,var(--noise-opacity)) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(255,255,255,var(--noise-opacity)) 0 1px,transparent 1px 2px);
  mix-blend-mode:overlay;opacity:.25;z-index:-1;
}

/* HERO nuevo */
.hero-aurora{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100dvh - 220px);
  padding-top:40px;
}

.hero-visuals{
  position:absolute;inset:0;overflow:hidden;
}

.orb{
  position:absolute;
  width:540px;height:540px;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.55),rgba(255,255,255,0) 65%);
  filter:blur(120px) saturate(180%);
  opacity:.18;
  animation:orbFloat 26s var(--ease-out) infinite;
  mix-blend-mode:overlay;
}
.orb-1{top:-120px;left:-160px;animation-delay:0s;}
.orb-2{bottom:-160px;right:-120px;background:radial-gradient(circle at 40% 40%,rgba(236,72,153,.55),rgba(255,255,255,0) 70%);animation-duration:32s;animation-delay:4s;}
.orb-3{top:40%;left:55%;width:400px;height:400px;background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.65),rgba(255,255,255,0) 75%);animation-duration:38s;animation-delay:8s;}

@keyframes orbFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  33%{transform:translate3d(80px,-60px,0) scale(1.15);}
  66%{transform:translate3d(-60px,50px,0) scale(.95);}
}

/* Rejilla decorativa */
.grid-overlay{
  position:absolute;inset:0;opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:120px 120px;
  mask:linear-gradient(to bottom,transparent,rgba(0,0,0,.7) 25%,rgba(0,0,0,.8) 75%,transparent);
}

/* Hero Card mejorada */
.hero-card.hero-elevated{
  max-width:var(--hero-max);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(28px) saturate(180%);
  position:relative;
  overflow:hidden;
  padding:60px clamp(1.8rem,4vw,4rem) 70px;
  animation:cardEnter .9s var(--ease-out);
}

@keyframes cardEnter{
  0%{opacity:0;transform:translateY(22px) scale(.97);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* Borde degradado animado */
.hero-card.hero-elevated::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:40px;
  background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2),var(--aurora-3),var(--aurora-4));
  background-size:260% 260%;
  animation:gradFlow 18s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
@keyframes gradFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Elementos de texto */
.kicker{
  font:600 .8rem/1 var(--font);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin:0 0 22px;
  color:#ffffff80;
}
.hero-title{
  margin:0 0 18px;
  line-height:1;
  letter-spacing:-1px;
}
.subtitle{
  margin:0 0 22px;
  font:500 1rem/1.4 var(--font);
  color:#d1d9dd;
  opacity:.85;
}
.pitch{
  font:400 1rem/1.6 var(--font);
  margin:0;
  max-width:680px;
  color:#c4ccd0;
}

/* Efecto typing (solo decorativo) */
.typing{
  position:relative;
  width:max-content;
  white-space:nowrap;
  overflow:hidden;
  --typing-chars: 42;
  animation: typing 4s steps(var(--typing-chars)) 1s 1 both,
             blink 750ms steps(1) infinite;
  border-right:2px solid #ffffffc0;
}
@keyframes typing{
  from{width:0;}
  to{width:100%;}
}
@keyframes blink{
  0%,100%{border-color:transparent;}
  50%{border-color:#ffffffc0;}
}

/* Shine en el nombre */
.shine{
  background:linear-gradient(120deg,#ff0000 0%,#ff0000 20%,#ff0000 30%,#ff0000 40%,#ff0000 60%,#ff0000 70%,#ff0000 85%) no-repeat;
  -webkit-background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation:shine 4s cubic-bezier(.25,.8,.25,1) infinite;
  position:relative;
}
.shine::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.65) 40%,rgba(255,255,255,0) 60%);
  background-size:200% 100%;
  mix-blend-mode:overlay;
  animation:shine 4s cubic-bezier(.25,.8,.25,1) infinite;
  pointer-events:none;
}
@keyframes shine{
  0%{background-position:200% 50%;}
  100%{background-position:-100% 50%;}
}

/* Lista de tags extra */
.hero-tags{
  list-style:none;
  margin:50px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-tags li{
  font:600 .65rem/1 var(--font);
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:7px 12px 6px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:22px;
  background:rgba(255,255,255,0.04);
  color:#cfd6db;
  backdrop-filter:blur(4px);
  position:relative;
  overflow:hidden;
  transition:border-color .35s,background .35s,color .35s;
}
.hero-tags li::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2),var(--aurora-3),var(--aurora-4));
  background-size:180% 180%;opacity:0;
  transition:opacity .5s;
  mix-blend-mode:overlay;
}
.hero-tags li:hover{color:#fff;border-color:rgba(255,255,255,.3);}
.hero-tags li:hover::before{opacity:.7;animation:gradFlow 10s linear infinite;}

/* Botones mejorados (sin tocar los existentes; agrego variantes) */
.btn-glow{
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15),0 8px 26px -10px rgba(0,0,0,.6),0 0 24px -6px rgba(107,114,255,.55);
  transition:box-shadow .45s,transform .4s;
}
.btn-glow:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,0.25),0 12px 34px -12px rgba(0,0,0,.7),0 0 34px -4px rgba(139,92,246,.75);
  transform:translateY(-3px);
}
.btn-outline-alt{
  background:#182126;
  border:1px solid rgba(255,255,255,0.12);
}
.btn-outline-alt:hover{
  background:#1f2b31;
  border-color:rgba(255,255,255,0.24);
  color:#fff;
}

/* Responsivo */
@media (max-width:880px){
  .hero-card.hero-elevated{padding:50px 36px 56px;}
  .pitch{font-size:.95rem;}
  .hero-tags{margin:40px 0 0;}
  .typing{--typing-chars: 38;}
}
@media (max-width:560px){
  .typing{animation:none;border:none;width:100%;white-space:normal;}
  .hero-aurora{min-height:unset;padding-top:10px;}
  .hero-card.hero-elevated{padding:44px 28px 54px;}
}

/* === Fin nueva estética === */
/* === Ajuste: nombre sin animación shine === */

/* Opción A (solo quitar animación, usar gradient existente). Elimina la clase shine si queda en HTML */
.shine, .shine::after { animation:none !important; background:none !important; color:#fff !important; -webkit-background-clip:initial; }

/* Opción B (si quitaste el span shine): nada más que esto para un glow suave */
.hero-title{
  text-shadow:0 0 12px rgba(140,120,255,.25),0 0 34px rgba(110,90,255,.18);
}

/* Si aplicas la opción B y ya no usas .shine, puedes borrar completamente:
   .shine, .shine::after y @keyframes shine del bloque anterior */
   /* Centro los tags en el hero */
.hero-tags{
  justify-content:center;
  text-align:center;
}
/* === Ajuste: nombre sin animación shine === */

/* Opción A (solo quitar animación, usar gradient existente). Elimina la clase shine si queda en HTML */
.shine, .shine::after { animation:none !important; background:none !important; color:#fff !important; -webkit-background-clip:initial; }

/* Opción B (si quitaste el span shine): nada más que esto para un glow suave */
.hero-title{
  text-shadow:0 0 12px rgba(140,120,255,.25),0 0 34px rgba(110,90,255,.18);
}

/* Si aplicas la opción B y ya no usas .shine, puedes borrar completamente:
   .shine, .shine::after y @keyframes shine del bloque anterior */
   /* High contrast mode */
   /* Ajustes de contraste generales hero */
body[data-page="inicio"] .grid-overlay{
  opacity:.18; /* menos líneas */
}
body[data-page="inicio"] .hero-title,
body[data-page="inicio"] .pitch,
body[data-page="inicio"] .subtitle{
  text-shadow:0 2px 4px rgba(0,0,0,.65);
}
body.high-contrast .hero-visuals{filter:brightness(0.55) saturate(.85) blur(1px);}
body.high-contrast .hero-card.hero-elevated{background:rgba(15,20,24,.88);}
body.high-contrast .hero-tags li{background:#0d1418;border-color:rgba(255,255,255,.25);}
/* Mejora rápida de contraste sobre la nebulosa */
body[data-page="inicio"] .hero-visuals::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.75) 85%),
    linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.65));
  pointer-events:none;
  mix-blend-mode:normal;
  z-index:2;
}
/* Elevar la tarjeta encima de la capa */
.hero-card.hero-elevated{position:relative;z-index:3;}
/* Más opacidad de fondo tarjeta para texto nítido */
.hero-card.hero-elevated{
  background:rgba(20,27,31,.78);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
}
/* Tags: asegurar contraste del texto */
.hero-tags li{
  background:rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.18);
  color:#e4ebef;
}
/* Quitar overlay rectangular negro */
body[data-page="inicio"] .hero-visuals::after{
  display:none !important;
}
/* Eliminar overlay rectangular y usar halo global */
body[data-page="inicio"] .hero-visuals::after{
  content:none !important;
}
body[data-page="inicio"]::before{
  /* Reemplazamos la viñeta dura por un halo suave vertical */
  background:
    radial-gradient(circle at 50% 45%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0.55) 115%),
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  mix-blend-mode:normal;
  opacity:.9;
}
/* Quitar overlay grande */
body[data-page="inicio"] .hero-visuals::after{display:none !important;}

/* Añadir un aura suave detrás de la tarjeta únicamente */
.hero-card.hero-elevated{
  background:rgba(20,27,31,0.78);
  position:relative;
}

.hero-card.hero-elevated::after{
  content:"";
  position:absolute;
  inset:-60px;
  border-radius:50px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 70%);
  filter:blur(40px);
  z-index:-1;
  pointer-events:none;
}

/* Reforzar nitidez de texto */
.hero-card.hero-elevated .pitch,
.hero-card.hero-elevated .subtitle,
.hero-card.hero-elevated .hero-title{
  text-shadow:0 2px 4px rgba(0,0,0,.55);
}
/* Sin rectángulo, pero bajamos saturación global detrás usando pseudo separado */
body[data-page="inicio"] .hero-visuals::after{
  display:none !important;
}

body[data-page="inicio"]::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  backdrop-filter:saturate(70%) brightness(0.9);
  mix-blend-mode:normal;
  z-index:-2;
}
/* === Modal Discord BarcelonaRP === */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px) saturate(140%);
}
.modal-dialog{
  position:relative;
  width:100%;
  max-width:560px;
  background:rgba(16,22,26,0.85);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:34px;
  padding:44px 42px 46px;
  box-shadow:0 20px 60px -25px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);
  animation:modalIn .5s cubic-bezier(.16,.8,.24,1);
  color:#d7e0e4;
}
@keyframes modalIn{
  0%{transform:translateY(18px) scale(.97);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}
.modal-close{
  position:absolute;
  top:14px;right:16px;
  background:#1c272c;
  border:1px solid rgba(255,255,255,.15);
  width:40px;height:40px;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s,border-color .3s;
}
.modal-close:hover{
  background:#253338;
  border-color:rgba(255,255,255,.25);
}
.modal-title{
  margin:0 0 14px;
  font:600 1.35rem/1.2 var(--font);
  color:#fff;
  letter-spacing:.5px;
}
.modal-text{
  font:.9rem/1.55 var(--font);
  margin:0 0 22px;
  color:#c3ccd1;
}
.discord-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.discord-actions .btn{
  flex:1 1 auto;
  min-width:160px;
  text-align:center;
}
.copy-status{
  font:600 .7rem/1.4 var(--font);
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:4px 0 0;
  color:#10b981;
  min-height:1em;
}
.mini-hint{
  font:400 .65rem/1.4 var(--font);
  opacity:.55;
  margin:12px 0 0;
}
.discord-fallback{
  border:1px dashed rgba(255,255,255,0.18);
  background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  padding:18px 20px;
  border-radius:18px;
  font:500 .7rem/1.4 var(--font);
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#9aa5aa;
  margin:0 0 24px;
}
/* Scroll lock helper (opcional, si quieres ocultar scroll al abrir) */
html.modal-open{
  overflow:hidden;
}
@media (max-width:620px){
  .modal-dialog{
    padding:40px 30px 44px;
    border-radius:28px;
  }
  .modal-title{
    font-size:1.15rem;
  }
}
/* Estilo extra para el iframe Discord */
.discord-embed{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:22px;
  overflow:hidden;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(6px) saturate(150%);
  margin:0 0 26px;
}
.discord-embed iframe{
  display:block;
  border:0;
  width:100%;
  height:400px;
}
.btn.btn-quiet{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#cfd8dc;
  border-radius:999px;
  padding:10px 18px;
  font:500 .8rem/1 var(--font);
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  transition:.3s;
}
.btn.btn-quiet:hover{
  background:rgba(255,255,255,0.12);
  color:#fff;
}
.discord-embed-fallback{
  padding:18px 20px;
  font:.75rem/1.4 var(--font);
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:18px;
  color:#b2bcc0;
}
/* === Mobile Fix Pack (centrado del dock + tamaños y paddings) === */

/* 1) Centrar el dock SIEMPRE y animarlo sin romper el centrado */
.dock{
  left:50% !important;
  /* Quitamos la animación anterior y usamos otra que mantiene translateX(-50%) */
  animation: floatDock 6s ease-in-out infinite !important;
}
@keyframes floatDock{
  0%   { transform: translate(-50%, 0);   }
  50%  { transform: translate(-50%, -8px);}
  100% { transform: translate(-50%, 0);   }
}
/* Evitar animación en items que sobreescribe transform y descuadra en pantallas chicas */
.dock-item:hover{
  animation: none !important;
}

/* 2) Ajustes de tamaño del dock en móviles estrechos (evita desbordes en 320–360px) */
@media (max-width: 360px){
  .dock{ gap:10px !important; padding:10px 14px !important; }
  .dock-item{ width:40px !important; height:40px !important; }
  .icon{ width:20px !important; height:20px !important; }
}

/* 3) Paddings del contenedor principal más contenidos en móvil */
@media (max-width: 560px){
  .main{ padding: 90px 16px 130px !important; }
  .hero-card.hero-elevated{ padding: 36px 20px 44px !important; border-radius: 28px !important; }
  .projects-grid{ gap: 32px !important; }
}

/* 4) Altura mínima de la sección hero para evitar “pantalla cortada”/scroll extraño */
@media (max-width: 560px){
  .hero-aurora{ min-height: auto !important; padding-top: 12px !important; }
}

/* 5) Evitar que el dock se superponga al contenido clicable en móvil */
@media (max-width: 560px){
  .hero-tags{ margin-bottom: 10px !important; }
  .main{ padding-bottom: calc(120px + env(safe-area-inset-bottom, 20px)) !important; }
}

/* 6) Pequeño ajuste de tipografías para móviles muy pequeños */
@media (max-width: 360px){
  .project-title{ font-size: .98rem !important; }
  .project-desc{ font-size: .82rem !important; }
  .btn{ padding: 12px 18px !important; }
}