:root{
  --bg:#4000ff;
  --panel:#05011ef8;
  --text:#e9e4ec;
  --muted:#00fffb;/*este color es para los border de los botones */
  --brand:#0067dc;
  --brand-2 :deepskyblue;
  --border:#00fffb;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  color:var(--text);
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: #012805 1px ;
}

/* Fondo global: color + imagen */
html{
  min-height:100%;
  background-color:var(--bg);
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* capa oscura */
    url('../assets/pared-azul.png'); /* tu imagen */
      background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

body{
  min-height:100dvh; /* asegura que el body llene la pantalla */
}

/* Enlaces */
a{
  color:inherit;
  text-decoration:none;
}

/* Layout base */
.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}

.logo{
  font-weight:800;
  font-size:1.25rem;
}

.logo span{ color:var(--brand); }

.nav a{ opacity:.85; margin: 6px; }
.nav a:hover{ opacity:1; }

/* Botón hamburguesa oculto en desktop */
.burger{
  display:none;
  background:none; border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer;
}

/* ===== Mobile ===== */
@media (max-width:900px){
  /* Mostrar el botón */
  .burger{ display:block; }

  /* El nav pasa a ser un panel desplegable */
  .nav{
    position:absolute;
    top:64px;              /* debajo del header */
    left:0;
    width:100%;
    display:block;
    background:var(--panel);
    border-top:1px solid var(--border);
    padding:0;
    z-index: 350;
    
    /* Oculto por defecto con animación controlada por max-height */
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .nav a{
    display:block;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
  }

  /* Estado ABIERTO */
  .nav.is-open{
    max-height:300px; /* ajusta según número de links */
  }
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  padding:38px 0;
}

.hero__text h1{
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  margin:.2rem 0 1rem;
}

.hero__text p{
  color:var(--muted);
  max-width:50ch;
}

.cta{
  display:flex;
  gap:12px;
  margin-top:16px;
}

.btn{
  background:var(--brand);
  border:none;
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

.btn--ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}

.hero__art{
  display:flex;
  justify-content:center;
}

/* Secciones */
.section{
  padding:48px 0;
}

.section h2{
  font-size:1.6rem;
  margin-bottom:10px;
}

.badges{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.badges li{
  background:var(--panel);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
}

/* Grid/cards */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:16px;
}

.card{
  background:var(--panel);
  border:1px dotted var(--border);
  padding:16px;
  border-radius:16px;
}
.card-img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
  object-fit: cover;
}


.card-horizontal {
  display: flex;
  gap: 15px;
  align-items: center;
}

.card-img-side {
  width: 120px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}


.card h3{
  margin:0 0 8px;
}

.link{
  color:var(--brand-2);
  font-weight:700;
}

/* Formulario */
.form{
  display:grid;
  gap:12px;
  max-width:560px;
}

.form input,
.form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#140d18;
  color:var(--text);
}

.form__msg{
  height:20px;
  color:var(--muted);
  margin:0;
}

/* Footer */
.footer{
  padding:32px 0;
  border-top:1px solid var(--border);
  opacity:.8;
}


#avatar {
  width: 220px;
  height: 220px;
  background-color: #020124;
  border-radius: 50%;
box-shadow: 0 0 10px #00f0ff,
            0 0 20px #00f0ff,
            0 0 40px #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


#avatar img {
  width: 170px;
  height: 170px;
  border-radius: 50%;        /* imagen circular */
  object-fit: cover;         /* recorta la imagen sin deformarla */
}

/* Responsive */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; } /* 1 columna en móviles */

  
}

/* Pequeño refinamiento para pantallas medianas */
@media (min-width:901px) and (max-width:1200px){
  .grid{ grid-template-columns:repeat(2, 1fr); } /* 2 columnas en tablet */
}



  /* Bloquear selección */
  html, body, * {
    user-select: none;           /* estándar */
    -webkit-user-select: none;   /* Safari/Chrome */
    -ms-user-select: none;       /* IE/Edge viejo */
    -webkit-touch-callout: none; /* iOS: evita menú al dejar presionado */
  }
  








  
/*estos son los estilos animados cuando carge la webvsite */


/* ===== Título con barrido neón derecha→izquierda ===== */
.neon-title{
  --neon: var(--muted, #00eaff);        /* usa tu --muted si existe */
  --base: var(--text, #e9e4ec);
  --step: 60ms;                          /* retraso entre letras */
  display:inline-block;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--base);
  position: relative;
  will-change: contents;
}

/* Cada letra */
.neon-title span{
  display:inline-block;
  opacity:.25;
  transform: translateY(6px);
  text-shadow:none;
}

/* Cuando está listo, anima cada letra con un delay según su índice invertido */
.neon-title.is-ready span{
  animation: neon-pop .6s ease-out forwards;
  animation-delay: calc(var(--i) * var(--step));
}

/* Espacios mantienen ancho agradable */
.neon-title span.space{ width:.4ch; }

/* Efecto: sube, ilumina en neón, y vuelve al color base */
@keyframes neon-pop{
  0%   { opacity:.2; transform: translateY(6px); text-shadow:none; color: var(--base); }
  60%  { opacity:1;  transform: translateY(0);   color: var(--neon);
         text-shadow: 0 0 6px var(--neon), 0 0 14px var(--neon), 0 0 28px var(--neon); }
  100% { opacity:1;  transform: translateY(0);   color: var(--base); text-shadow:none; }
}

/* Respeta accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .neon-title.is-ready span{ animation:none !important; opacity:1; transform:none; }
}



/* Evitar zoom en iOS al enfocar inputs */
input, select, textarea, button {
  font-size: 16px;         /* clave: 16px o más */
  line-height: 1.2;
}

/* Si usas rem/chica en mobile, fuerza 16px en pantallas pequeñas */
@media (max-width: 768px) {
  .form-control, 
  input, select, textarea, button {
    font-size: 16px !important;
  }
}