/* =========================
   Reset y Base
========================= */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Consolas', monospace;
  scroll-behavior: smooth;
}

body {
  background:#212121;
  color:#e5e5e5;
  line-height:1.6;
  overflow-x:hidden;
  text-align:center;
}

/* =========================
   Navbar
========================= */
header {
  position:sticky;
  top:0;
  background:#212121;
  z-index:100;
  border-bottom:1px solid #00ff99;
}

.navbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
}

.nav-links {
  list-style:none;
  display:flex;
  gap:1rem;
}

.nav-links li a {
  color:#00ff99;
  text-decoration:none;
  position:relative;
  transition:0.3s;
}

.nav-links li a::after {
  content:'';
  position:absolute;
  width:0%;
  height:2px;
  background:#00ff99;
  bottom:-4px;
  left:0;
  transition:0.3s;
}

.nav-links li a:hover::after {
  width:100%;
}

.nav-links li a:hover {
  color:#00ffaa;
}

/* =========================
   Sections
========================= */
.section {
  padding:80px 20px;
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* =========================
   Barra filtros + buscador
========================= */
.filters-search-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.lab-filters {
  display: flex;
  gap: 10px;
}

.lab-filters button {
  background: transparent;
  color: #00ff99;
  border: 2px solid #00ff99;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lab-filters button:hover {
  background: #00ff99;
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 0 10px #00ff99;
}

.lab-filters button.active {
  background: #00ffaa;
  color: #111;
  border-color: #00ffaa;
  box-shadow: 0 0 12px #00ffaa;
}

.filters-search-container #search {
  padding: 8px 12px;
  width: 250px;
  background:#111;
  color:#00ff99;
  border:2px solid #00ff99;
  border-radius:6px;
  text-align:center;
  transition: all 0.3s;
}

.filters-search-container #search:focus {
  border-color:#00ffaa;
  box-shadow:0 0 8px #00ffaa;
  outline:none;
}

/* =========================
   Writeups y Sidebar
========================= */
.labs-container {
  display:flex;
  gap:30px;
  max-width:1400px;
  margin:auto;
  align-items:flex-start;
}

.labs-sidebar {
  width:260px;
  border-right:1px solid #00ff99;
  padding-right:20px;
  overflow-y:auto;
  max-height:80vh;
}

.lab-item {
  padding:10px;
  margin-bottom:10px;
  border:1px solid #00ff99;
  border-radius:6px;
  cursor:pointer;
  transition:0.3s;
}

.lab-item:hover {
  background:#00ff99;
  color:#111;
}


/* =========================
   Imágenes dentro del writeup
========================= */
.writeup-container img {
  max-width: 100%;   
  height: auto;      
  display: block;
  margin: 10px auto; 
  border-radius: 8px; 
  box-shadow: 0 0 10px rgba(0,255,153,0.5); 
}

/* =========================
   Tags
========================= */
.tags span {
  font-size:12px;
  border:1px solid #00ff99;
  padding:2px 6px;
  margin-right:5px;
  border-radius:4px;
}

/* =========================
   Buscador general
========================= */
#search {
  margin-bottom:0;
}

/* =========================
   Cards Labs/HTB
========================= */
.lab-cards {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  align-items:center;
}

.lab-card {
  display:block;
  background:#111;
  padding:20px;
  border-radius:10px;
  width:280px;
  min-width:220px;
  border:1px solid #00ff99;
  box-shadow:0 0 10px #00ff99;
  text-decoration:none;
  color:#00ff99;
  transition:transform 0.3s, box-shadow 0.3s;
  text-align:center;
}

.lab-card:hover {
  transform:translateY(-5px) rotateX(2deg);
  box-shadow:0 0 20px #00ff99;
}

/* =========================
   Form contacto
========================= */
form {
  display:flex;
  flex-direction:column;
  align-items:center;
}

form input,
form textarea,
form button {
  background:#111;
  color:#00ff99;
  border:1px solid #00ff99;
  border-radius:5px;
  padding:10px;
  margin-bottom:10px;
  width:80%;
  max-width:400px;
  transition:0.3s;
  text-align:center;
}

form input:focus,
form textarea:focus {
  border-color:#00ffaa;
  box-shadow:0 0 5px #00ffaa;
  outline:none;
}

form button:hover {
  background:#00ff99;
  color:#111;
  cursor:pointer;
}

/* =========================
   Dashboard Stats
========================= */
.stats-dashboard {
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:30px;
}

.stat-card {
  background:#111;
  border:1px solid #00ff99;
  border-radius:10px;
  padding:30px;
  width:200px;
  box-shadow:0 0 10px #00ff99;
  transition:0.3s;
  text-align:center;
}

.stat-card:hover {
  transform:translateY(-5px);
  box-shadow:0 0 20px #00ff99;
}

.stat-card h3 {
  font-size:40px;
}

.view-writeups {
  margin-top:40px;
  display:inline-block;
  padding:12px 20px;
  border:1px solid #00ff99;
  border-radius:6px;
  color:#00ff99;
  text-decoration:none;
  transition:0.3s;
}

.view-writeups:hover {
  background:#00ff99;
  color:#111;
}

#carousel-container {
    perspective: 1000px;
    width: 450px;
    height: 300px;
    margin: 0 auto;
}

#carousel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: white;
    background-color: #3498db;
    border-radius: 5px;
    cursor: grab;
    user-select: none;
}

.item-1{
    background-image: url("/img/EJPT.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.item-2{
    background-image: url("/img/PythonOfensivo.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.item-3{
    background-image: url("/img/IntroduccionAlHacking.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.item-4{
    background-image: url("/img/CibersecurityEssentials.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.item-5{
    background-image: url("/img/CertificadoLinux.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.item-6{
    background-image: url("/img/IntroduccionAlHacking.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Contenedor Markdown */
.writeup-container {
  display: none;
  margin-top: 0;
  padding: 30px;
  border: 1px solid #00ff99;
  border-radius: 10px;
  background: #111;
  text-align: left;
  max-width: 900px;
  width: 100%;
  min-height: 400px;
  overflow-y: auto;
  font-family: 'Consolas', monospace;
}

/* Encabezados */
.writeup-container h1 {
  font-size: 2em;
  margin-bottom: 10px;
  border-bottom: 1px solid #00ff99;
  padding-bottom: 5px;
}
.writeup-container h2 {
  font-size: 1.7em;
  margin-bottom: 8px;
  border-bottom: 1px dashed #00ff99;
  padding-bottom: 4px;
}
.writeup-container h3 {
  font-size: 1.4em;
  margin-bottom: 6px;
}

/* Párrafos y texto */
.writeup-container p {
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Listas */
.writeup-container ul, .writeup-container ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

/* Código inline */
.writeup-container code {
  background: #222;
  color: #00ffaa;
  padding: 2px 4px;
  border-radius: 4px;
}

/* Bloques de código */
.writeup-container pre {
  background: #111;
  border: 1px solid #00ff99;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 15px;
}

/* Enlaces */
.writeup-container a {
  color: #00ffaa;
  text-decoration: underline;
}
.writeup-container a:hover {
  color: #00ff99;
}

#particles-js{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1; /* clave */
}

#inicio{
    position:relative;
    overflow:hidden;
}

/* Contenedor principal */
.content-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Títulos centrados */
.content-container h1,
.content-container h2,
.content-container h3 {
  text-align: center;
  margin-bottom: 20px;
}

/* Párrafos centrados */
.content-container p {
  text-align: center;
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Galerías web, lab y Udemy: usar grid para simetría */
.web-gallery,
.lab-gallery,
.udemy-container a {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-items: center; /* centra cada imagen en su celda */
  gap: 25px;
  margin-top: 20px;
}

/* Todas las imágenes del index con tamaño fijo y uniforme */
.web-gallery img,
.lab-gallery img,
.content-container img,
.udemy-container a img {
  width: 260px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s;
  display: block;
}

.web-gallery img:hover,
.lab-gallery img:hover,
.content-container img:hover,
.udemy-container a img:hover {
  transform: scale(1.05);
}
.btn-udemy, .btn-web {
  background: #111;       /* fondo oscuro como el resto */
  color: #00ff99;         /* verde principal */
  border: 2px solid #00ff99;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  
  display: inline-block;  /* se ajusta al contenido */
  width: auto;            /* asegura que no ocupe todo el ancho */
  text-align: center;     /* centra el texto dentro del botón */
  
  transition: all 0.3s ease;
  white-space: nowrap;    /* evita que el texto se rompa en varias líneas */
}

.btn-udemy:hover, .btn-web:hover {
  background: #00ffaa;    /* verde neón hover */
  color: #111;             /* texto oscuro */
  transform: translateY(-2px);
  box-shadow: 0 0 10px #00ffaa;
}
.proyectos-page h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.subtitle {
  text-align: center;
  color: #aaa;
  margin-bottom: 40px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.project-card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
  color: #fff;
  transition: 0.3s;
  box-shadow: 0 0 10px rgba(0,255,200,0.1);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0,255,200,0.3);
}

.project-card h3 {
  margin-bottom: 10px;
}

.project-card p {
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.project-card a {
  color: #00ffcc;
  text-decoration: none;
  font-weight: bold;
}

pre {
  background: #000;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin-bottom: 10px;
  font-size: 0.8rem;
}