/* Estilos base */
:root {
  --bg: #0d1117;
  --surface: #161b22;
  --text: #e6edf3;
  --muted: #9da7b3;
  --primary: #7c3aed;
  --primary-600: #6d28d9;
  --outline: #30363d;
}

/* Logo de Shopueblos */
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 50px;
  margin-right: 10px;
}
/* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
*{box-sizing:border-box} /* línea de estilo CSS */
body{ /* inicio de reglas CSS para el selector: body */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; /* declaración de propiedad CSS 'font-family' */
  background:var(--bg); /* declaración de propiedad CSS 'background' */
  color:var(--text); /* declaración de propiedad CSS 'color' */
  line-height:1.6; /* declaración de propiedad CSS 'line-height' */
} /* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
img{max-width:100%;display:block} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.container{ /* inicio de reglas CSS para el selector: .container */
  width:min(1100px, 92%); /* declaración de propiedad CSS 'width' */
  margin-inline:auto; /* declaración de propiedad CSS 'margin-inline' */
} /* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
.header{ /* inicio de reglas CSS para el selector: .header */
  position:sticky;top:0;z-index:50; /* declaración de propiedad CSS 'position' */
  backdrop-filter:saturate(180%) blur(10px); /* declaración de propiedad CSS 'backdrop-filter' */
  background:rgba(13,17,23,0.7); /* declaración de propiedad CSS 'background' */
  border-bottom:1px solid var(--outline); /* declaración de propiedad CSS 'border-bottom' */
} /* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
.nav{ /* inicio de reglas CSS para el selector: .nav */
  display:flex;align-items:center;justify-content:space-between; /* declaración de propiedad CSS 'display' */
  padding:0.75rem 0; /* declaración de propiedad CSS 'padding' */
  position: relative;
  align-items: center;
  justify-content: space-between;
} /* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
.logo{font-weight:700;text-decoration:none;color:var(--text);font-size:1.1rem} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.btn-menu{background:none;border:1px solid var(--outline);color:var(--text);padding:.4rem .6rem;border-radius:.5rem;display:none} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.menu{display:flex;gap:1rem; list-style:none; padding:0;margin:0} /* línea de estilo CSS */
.menu a{color:var(--text);text-decoration:none;padding:.5rem .75rem;border-radius:.5rem} /* línea de estilo CSS */
.menu a:hover{background:var(--surface);} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.hero{ /* inicio de reglas CSS para el selector: .hero */
  display:grid;gap:2rem;align-items:center; /* declaración de propiedad CSS 'display' */
  grid-template-columns: 1.2fr 1fr; /* declaración de propiedad CSS 'grid-template-columns' */
  min-height:70vh; /* declaración de propiedad CSS 'min-height' */
  padding:4rem 0 2rem; /* declaración de propiedad CSS 'padding' */
} /* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
.hero__text h1{font-size:clamp(2rem, 4vw, 3rem);margin:.2rem 0 1rem} /* línea de estilo CSS */
.hero__text h1 span{color:var(--primary)} /* línea de estilo CSS */
.cta{display:flex;gap:.75rem;flex-wrap:wrap} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--outline);padding:.6rem .9rem;border-radius:.6rem;text-decoration:none;color:var(--text)} /* línea de estilo CSS */
.btn.primary{background:var(--primary);border-color:transparent} /* línea de estilo CSS */
.btn.primary:hover{background:var(--primary-600)} /* línea de estilo CSS */
.btn.outline:hover{background:var(--surface)} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.about,.projects,.contact{padding:3rem 0} /* línea de estilo CSS */
.about h2,.projects h2,.contact h2{font-size:1.8rem;margin-bottom:1rem} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.about__stats{display:flex;gap:1rem;flex-wrap:wrap;padding:0;margin:1rem 0 0;list-style:none} /* línea de estilo CSS */
.about__stats li{border:1px solid var(--outline);padding:.6rem .8rem;border-radius:.6rem;background:var(--surface)} /* línea de estilo CSS */
.about__stats i{margin-right:.4rem;color:var(--primary)} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.grid{ /* inicio de reglas CSS para el selector: .grid */
  display:grid;gap:1rem; /* declaración de propiedad CSS 'display' */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* declaración de propiedad CSS 'grid-template-columns' */
} /* fin de bloque de reglas CSS */
/* línea en blanco para legibilidad */
.card{ /* inicio de reglas CSS para el selector: .card */
  background:var(--surface); /* declaración de propiedad CSS 'background' */
  border:1px solid var(--outline); /* declaración de propiedad CSS 'border' */
  border-radius:1rem; /* declaración de propiedad CSS 'border-radius' */
  padding:1rem; /* declaración de propiedad CSS 'padding' */
} /* fin de bloque de reglas CSS */
.card h3{margin:.2rem 0 0.4rem} /* línea de estilo CSS */
.card .link{color:var(--primary);text-decoration:none} /* línea de estilo CSS */
.card .link:hover{text-decoration:underline} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.form{display:grid;gap:1rem;max-width:680px} /* línea de estilo CSS */
.field{display:grid;gap:.3rem} /* línea de estilo CSS */
input,textarea{ /* inicio de reglas CSS para el selector: input,textarea */
  background:var(--surface);border:1px solid var(--outline);color:var(--text); /* declaración de propiedad CSS 'background' */
  padding:.6rem .7rem;border-radius:.6rem;outline:none; /* declaración de propiedad CSS 'padding' */
} /* fin de bloque de reglas CSS */
input:focus,textarea:focus{border-color:var(--primary)} /* línea de estilo CSS */
.error{color:#ffb4b4;font-size:.85rem;height:1rem} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
.footer{ /* inicio de reglas CSS para el selector: .footer */
  border-top:1px solid var(--outline); /* declaración de propiedad CSS 'border-top' */
  padding:1.2rem 0;margin-top:2rem;background:rgba(22,27,34,.8) /* línea de estilo CSS */
} /* fin de bloque de reglas CSS */
.footer__content{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} /* línea de estilo CSS */
.social{display:flex;gap:.75rem} /* línea de estilo CSS */
.social a{color:var(--muted)} /* línea de estilo CSS */
.social a:hover{color:var(--text)} /* línea de estilo CSS */
/* línea en blanco para legibilidad */
/* ─ Estilos generales ─ */
/* ─ Estilos base ─ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.btn-menu {
  display: none;
}

/* ─ Escritorio: menú horizontal ─ */
@media (min-width: 821px) {
  .nav.container {
    width: 100%;
    margin: 0;
    padding-left: 1rem;     /* logo más pegado a la izquierda */
    padding-right: 2rem;
  }

  .btn-menu {
    display: none;
  }

  .menu {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;              /* enlaces más juntos */
    margin-left: auto;      /* empuja el menú a la derecha */
    margin-right: 1rem;
    background: none;
    border: none;
    padding: 0;
    height: auto;
    width: auto;
  }

  .menu.open {
    left: auto;
    opacity: 1;
    transform: none;
  }

  /* Oculta el logo dentro del menú lateral en escritorio */
  .menu-logo {
    display: none;
  }
}

@media (max-width: 820px) {
  .btn-menu {
    display: inline-flex;
    font-size: 24px;
    z-index: 1100;
  }

  .menu {
    position: fixed;
    top: 0;
    right: -100%;           /* Oculto fuera del lado derecho */
    left: auto;             /* Asegura que no interfiera */
    height: 100vh;
    width: 250px;
    background: var(--surface);
    border-left: 1px solid var(--outline); /* cambia de border-right a border-left */
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: right 0.3s ease;
    z-index: 1000;
  }

  .menu.open {
    right: 0;               /* Desliza hacia dentro desde la derecha */
  }

  .menu-logo {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--outline);
    padding-bottom: 1rem;
  }

  .menu-logo .logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text);
    text-decoration: none;
  }

  .menu-logo img {
    height: 40px;
    margin-right: 10px;
  }
}