/* ---------- Reset y variables ---------- */
:root{
  --bg-color: #0f1724;
  --panel: #0b1220;
  --muted: #9aa4b2;
  --main: #00efff;
  --accent: #7c3aed;
  --card: rgba(255,255,255,0.02);
  --glass: rgba(255,255,255,0.03);
  --radius: 18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%} /* 1rem = 10px */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* Ajusta según la altura real de tu header */
}
body{
  font-family: "Poppins", sans-serif;
  background: linear-gradient(180deg,#07121a 0%, #041623 100%), radial-gradient(800px 300px at 10% 10%, rgba(124,58,237,0.04), transparent 8%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}



/* ---------- Header / navbar ---------- */
header{
  position:fixed; left:0; top:0; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:2.2rem 6%;
  z-index:120;
  transition: background-color .35s ease, backdrop-filter .35s ease, border-bottom .35s ease;
}
header.sticky{
  background: rgba(11,18,32,0.55);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.logo{display:flex; align-items:center; gap:12px}
.logo img{width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow: 0 8px 30px rgba(2,6,23,0.6)}
.logo .txt{font-weight:700; font-size:1.6rem}
nav.navbar{display:flex; gap:3.6rem; align-items:center}
nav.navbar a{font-size:1.6rem; color:var(--muted); margin-right: 1.8rem;}
nav.navbar a.active, nav.navbar a:hover{color:var(--main)}

#menu-icon{display:none; font-size:3.6rem; color:var(--muted); cursor:pointer}

/* ---------- Home / hero ---------- */
section.home{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12rem 6rem 6rem;
  gap:4rem;
}
.home-content{max-width:56rem}
.home-content h3{font-size:3.2rem; color:var(--muted); margin-bottom:0.6rem}
.home-content h1{font-size:5.2rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:0.8px}
.home-content h1 .highlight{color:var(--main)}
.home-content h4{font-size:1.6rem;color:var(--muted);margin-bottom:1rem}
.home-content p{font-size:1.6rem; color:#cfeaf0; max-width:62rem}
.home-actions{margin-top:2.2rem;display:flex;gap:1.2rem;align-items:center}
.btn{display:inline-block;padding:1rem 2.6rem;border-radius:4rem;background:linear-gradient(90deg,var(--main),var(--accent));color:#041226;font-weight:700;font-size:1.6rem;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.socials{display:flex;gap:1rem;align-items:center;margin-left:1rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;border:1px solid rgba(255,255,255,0.04);font-size:1.8rem;color:var(--main)}

.home-img {
  width: 48rem; /* Ajusta según tu diseño general */
  max-width: 100%;
  aspect-ratio: 1536/1024;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.home-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1536/1024;
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(2,6,23,0.6);
  object-fit: cover;
  transform: translateY(0);
  animation: float 7s ease-in-out infinite;
  max-width: 100%;
  max-height: 100%;
}
.home-img::after{content:""; position:absolute; inset: -2rem; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(0,239,255,0.06), transparent 20%); filter: blur(36px); z-index:-1}
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-70px); } /* Más distancia */
  100% { transform: translateY(0); }
}

/* ---------- Sections (cards like example) ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 6%}
section.card-section{padding:8rem 0 8rem 0}
.card-row{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem}
@media (max-width:900px){ .card-row{grid-template-columns:1fr} .home{flex-direction:column-reverse;padding:10rem 4rem 6rem}}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;
  padding:2.2rem;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}
.card h3{font-size:1.9rem;margin-bottom:1rem}
.card p{color:#dbeef6;line-height:1.6;font-size:1.55rem}

/* Más espacio entre los títulos de sección y el contenido */
section.card-section > h2,
section.card-section > .card,
section.card-section > .services-grid,
section.card-section > .portfolio-grid {
  margin-top: 2.8rem;
}

/* Services/Portfolio style (tarjetas grandes) */
.services-grid,.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));gap:2.4rem}
.service-box, .portfolio-card{
  background: linear-gradient(145deg, rgba(44,52,69,0.35), rgba(34,40,54,0.25));
  border-radius:16px;padding:2.4rem;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.03);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-box:hover, .portfolio-card:hover{transform:translateY(-8px); border-color: rgba(0,239,255,0.15); box-shadow: 0 20px 40px rgba(2,6,23,0.6)}

.service-box i, .portfolio-card i{font-size:4.6rem;color:var(--main);margin-bottom:1.2rem}
.service-box h4, .portfolio-card h4{font-size:1.9rem;margin-bottom:0.6rem}
.service-box p, .portfolio-card p{font-size:1.45rem;color:#bcdfe6}

/* ---------- Footer ---------- */
footer.footer{padding:4rem 6%; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-top:1px solid rgba(255,255,255,0.02)}
footer .footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:2rem}
footer p{color:var(--muted);font-size:1.4rem}

/* ---------- Scroll to top ---------- */
.to-top{position:fixed;right:2.2rem;bottom:2.2rem;width:4.6rem;height:4.6rem;border-radius:10px;background:linear-gradient(90deg,var(--main),var(--accent));display:flex;align-items:center;justify-content:center;color:#041226;box-shadow:0 12px 30px rgba(2,6,23,0.6);cursor:pointer;z-index:130}
.to-top i {
  font-size: 3.2rem; /* Puedes ajustar el tamaño aquí */
}

/* ---------- Cursor glow effect */
#cursor-glow {
  position: fixed;
  left: 0; top: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  /* Solo glow, sin forma sólida ni área visible */
  box-shadow: 0 0 80px 40px rgba(0,239,255,0.18), 0 0 160px 80px rgba(0,239,255,0.10);
  border-radius: 0;
  transform: translate(-50%, -50%);
  z-index: 1000;
  transition: opacity 0.25s;
  opacity: 0.7;
  will-change: transform;
}
@media (max-width: 768px) {
  #cursor-glow { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  nav.navbar{display:none; position:absolute; left:0; top:100%; width:100%; background:var(--panel); flex-direction:column; padding:2rem}
  nav.navbar.active{display:flex}
  #menu-icon{display:block}
  .home-img{width:76vw}
  .home-content h1{font-size:4.2rem}
}

/* Respect prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* ---------- Enlaces (hipervínculos) ---------- */
/* Efecto visual para TODOS los enlaces */
a {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--main);
  font-weight: 500;
  text-decoration: none; /* Quita el subrayado base */
  position: relative;
  transition: color 0.2s;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Subrayado animado para todos los enlaces */
a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--main), var(--accent));
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(.77,0,.18,1);
  transform-origin: left;
  opacity: 0.8;
  pointer-events: none;
}

a:hover::after,
a:focus::after {
  transform: scaleX(1);
}

/* Mantén el color principal al pasar el mouse */
a:hover,
a:focus {
  color: var(--main);
  outline: none;
  text-shadow: none;
}

/* Efecto underline animado para todos los enlaces excepto los de la navbar */
a:not(.btn):not(.to-top):not(.logo)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--main), var(--accent));
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(.77,0,.18,1);
  transform-origin: left;
  opacity: 0.7;
  pointer-events: none;
}

a:not(.btn):not(.to-top):not(.logo):hover::after,
a:not(.btn):not(.to-top):not(.logo):focus::after {
  transform: scaleX(1);
}

/* Navbar links efecto de fondo animado */
nav.navbar a {
  position: relative;
  overflow: hidden;
  padding: 0.2em 0.5em;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

nav.navbar a.active,
nav.navbar a:hover,
nav.navbar a:focus {
  background: linear-gradient(90deg, var(--main) 60%, var(--accent) 100%);
  color: #041226;
  box-shadow: 0 2px 16px 0 rgba(0,239,255,0.08);
  outline: none;
}

/* ---------- Más espacio entre secciones principales ---------- */
section.card-section {
  padding: 8rem 0 8rem 0;
}

/* ---------- Mucho más espacio extra entre Proyectos y Contacto ---------- */
#portfolio {
  margin-bottom: 5rem;
}

/* Enlace destacado para botones y acciones en tarjetas */
.link-action {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--main);
  font-weight: 500;
  text-decoration: underline;
  transition: color 0.2s, text-shadow 0.2s;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.link-action:hover,
.link-action:focus {
  color: var(--accent);
  text-shadow: 0 2px 16px rgba(0,239,255,0.15);
  outline: none;
}