:root{
--bg:#0b0f14;
--fg:#e9eef5;
--muted:#9fb2c7;
--accent:#4ea8ff;
--accent-ink:#081421;
--card:#121823;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font:16px/1.5 system-ui, sans-serif;
color:var(--fg);
background: url("img/fondodark.png") no-repeat center center fixed;
background-size: cover;
display:flex; align-items:center; justify-content:center; padding:28px;
}
.wrap {
  width: min(820px, 100%);
  margin: 120px auto 40px; /* 👈 Aumentamos el margen superior a 120px para que el logo respire */
  text-align: center;
  padding: 40px 32px; /* 👈 Un poquito más de padding interno para que el texto no toque los bordes */
  background: rgba(18, 24, 35, 0.85); /* 👈 Le subí un pelín la opacidad (0.85) para que el texto se lea mejor sobre el fondo */
  position: relative;
  z-index: 1;
}

.logo {
  width: 300px; 
  height: auto; 
  display: block;
  position: absolute;
  top: 30px; /* 👈 Lo bajamos un poquito más del borde del navegador */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: brightness(1.3);
}

.tag{color:var(--muted); margin-bottom:1.1rem}

p.lead{margin:.2rem auto 1.4rem; color:var(--fg); max-width:56ch}
.cta{
display:inline-block; margin-top: 1.8rem;padding:.9rem 1.15rem; border-radius:4
	px;
background:linear-gradient(180deg, #74c3ff, var(--accent)); color:var(--accent-ink);
text-decoration:none; font-weight:700; transition:transform .06s ease, filter .2s ease;

  margin-bottom: 2rem; /* aire extra debajo del botón */
	box-shadow: 0 4px 12px rgba(0,0,0,0.4),
              0 0 8px rgba(116,195,255,0.6); /* glow celeste */}

.cta:hover{transform:translateY(-1px); filter:brightness(1.05)}
.grid{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top: 2rem; margin-bottom: 1rem; }
.chip{
  padding: .55rem .7rem;
  border-radius: 0px;
  background: #1a2533;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.95;
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
}
a.chip{
  text-decoration: none;
}
a.chip:hover{
  text-decoration: none;
}
a.chip:visited{
  text-decoration: none;
}
a.chip{
  border-bottom: none !important;
}

.grid a.chip,
.grid a.chip:visited,
.grid a.chip:hover,
.grid a.chip:active{
  text-decoration: none !important;
  border-bottom: none !important;
}

footer{margin-top:40px; color:var(--muted); font-size:.90rem}
.links{margin:.6rem 0 0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.links a{color:var(--fg); opacity:.9}
.links a:hover{opacity:1}

@media (max-width: 768px) {
  .wrap {
    width: 95%;
    padding: 20px 15px;
    margin: 100px auto 0 auto; /* centrado automático */
    text-align: center;
  }

  .wrap h1 {
    font-size: 1.0rem; /* más chico en celu */
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .wrap p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .logo {
    width: 200px;  /* logo más chico */
    top: 20px; 
    bottom: 20px;    /* baja un poquito */
  }

  .chip {
    font-size: 0.9rem;
    padding: 10px 14px;
    margin: 4px auto;  /* centrado horizontal */
    width: 90%;        /* antes 100%, así respira un poco */
    text-align: center;
  }

  .btn {
    display: block;
    width: 90%;        /* más lindo que 100%, centrado */
    font-size: 1rem;
    padding: 12px;
    margin: 8px auto;  /* centrado horizontal */
  }

  .links {
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    text-align: center; /* asegura que quede bien centrado */
  }
}