* {margin: 0; padding: 0; box-sizing: border-box; }
html{scroll-behavior: smooth;}
body {font-family: 'Segoe UI', sans-serif;  background: #f5f6fa; color: #333; line-height: 1.6;}
section .socials2 a {color: black; margin: 0 0.5rem; font-size: 1rem; text-decoration: none; transition: color 0.3s;}
section .socials2 a:hover {color: #ffd60a; text-decoration: none;}
pre {background: #1e1e2f; color: #f5f5f5; padding: 1rem; border-radius: 10px; overflow-x: auto; font-size: 0.9rem;}
footer {text-align: center; padding: 2rem; background: #0d1b2a;  color: white;}
footer .socials a {color: white; margin: 0 0.5rem; font-size: 1.2rem;}
footer .socials a:hover {color: #ffd60a;}
h2{font-size: 1.9rem;}
h3{font-size: 1.3rem;}
.categorias {text-align: center; padding: 3rem 2rem;}
.logo img {width: 35px; vertical-align: middle;}
.logo.left-align {text-align: left !important;   display: flex; font-size: 12px; align-items: center; gap: 8px;}
.qr-colabora {max-width: 120px; height: auto; margin: 15px auto; display: block;}
.qr-dona2 {text-align: left !important; width: 24px; height: auto; font-size: 0.7rem; display: block;}
.qr-dona {max-width: 27px;  height: auto; margin: 15px auto; display: block;}
.hero {text-align: center; padding: 3rem 2rem; background: white;}
.hero h1 {color: #003566; font-size: 2rem;}
.hero p {margin: 1rem 0;}
.hero-ia {text-align: center; padding: 2.5rem 1.5rem; background: white; border-bottom: 3px solid #ff6ec7;}
.hero-ia h1 {color: #9b2fff; margin-bottom: 0.5rem;}
.hero-ia p {color: #555; font-style: italic;}
.logo-link {text-decoration: none; color: inherit;}
.logo-link:visited,.logo-link:hover,.logo-link:active {  color: inherit;}
.ia-section {background: white; margin: 2rem auto; padding: 1.5rem; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: 90%; max-width: 900px;}
.ia-section h2 {color: #333; margin-bottom: 0.5rem;}
.ia-section p {margin-bottom: 1rem; color: #555;}
.btn-primary {background: #e63946;  color: #fff;  padding: 0.7rem 1.5rem;  border-radius: 30px;  text-decoration: none;  font-weight: bold;  transition: 0.3s;}
.btn-primary:hover {background: #d62828;}
.btn-primary2 {display: inline-block;  padding: 0.6rem 1.2rem; margin-top: 1rem; border-radius: 25px; background: linear-gradient(90deg, #007bff, #00c9a7); color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; transition: opacity 0.3s ease, transform 0.2s ease;}
.btn-primary2:hover {opacity: 0.9; transform: scale(1.03);}
.cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem;}
.card {background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center;}
.card i {font-size: 2.5rem; color: #6c63ff; margin-bottom: 1rem;}
.cards-small {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem;}
.card-small {background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center;}
.card-small i {font-size: 1.8rem; color: #ff6ec7; margin-bottom: 0.5rem;}
.credit {margin-top: 0.5rem; font-size: 0.9rem;}
.otras-categorias {padding: 2rem;}
.btn-grad {display: inline-block; padding: 0.6rem 1.2rem; margin-top: 1rem; border-radius: 25px; background: linear-gradient(90deg, #6c63ff, #ff6ec7); color: #fff; font-weight: bold; text-decoration: none; transition: opacity 0.3s ease, transform 0.2s ease;}
.btn-grad:hover {opacity: 0.9; transform: scale(1.03);}
.sticky-top{position: sticky;top: 0;z-index: 1020;}
.scroll-up {width: 45px; height: 45px; line-height: 45px; background-color: #00BFA6; color: #FFFFFF; text-align: center; position: fixed; bottom: 30px; right: 30px; border-radius: 50%; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease;}
.scroll-up:hover {background-color: #009E8A; transform: scale(1.1);}
.blog-section {text-align: center; padding: 3rem 2rem; background: #f5f6fa;}
.blog-section h1 {font-size: 2rem; color: #1c1c1c; margin-bottom: 0.5rem;}
.blog-section p {font-size: 1rem; color: #555; margin-bottom: 2rem;}
.blog-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto;}
.blog-card {background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 1.5rem; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.blog-card img {width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem;}
.blog-card h2 {font-size: 1.3rem; color: #333; margin-bottom: 0.8rem;}
.blog-card p {font-size: 0.95rem; color: #555; margin-bottom: 1.2rem; line-height: 1.5;}
.blog-card:hover {transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);}
.blog-btn {display: block; width: 100%; text-align: center; padding: 1rem; border-radius: 8px; background: linear-gradient(90deg, #4a90e2, #9b4dff); color: #fff; font-weight: bold; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.blog-btn:hover {background: linear-gradient(90deg, #6c63ff, #ff6ec7); transform: scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,0.25);}
.navbar {background: #0d1b2a;box-shadow: 0 2px 8px rgba(0,0,0,0.5);}
.navbar-brand {font-weight: bold; font-size: 1.2rem; color: #fff !important;}
.navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
.navbar-nav .nav-link {position: relative; color: #fff !important; font-size: 1rem; transition: color 0.3s ease;}
.navbar-nav .nav-link::after {content: ""; position: absolute; left: 0; bottom: -3px; width: 0%; height: 3px; background: linear-gradient(90deg, #ffd700, #ffcc00, #ffb400); transition: width 0.3s ease-in-out; border-radius: 2px;}
.navbar-nav .nav-link:hover {color: #ffd700 !important;}
.navbar-nav .nav-link:hover::after {width: 100%;}
.navbar-nav .nav-link:active {color: #ffcc00 !important; background: rgba(255, 215, 0, 0.1); border-radius: 6px;}
.navbar-nav .nav-link.active {color: #ffd700 !important;}
.text-gold {background: linear-gradient(90deg, #B8860B, #FFD700, #8B7500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;}
.back-button {display: inline-block; padding: 8px 16px; background-color: #f1f3f5; color: #333; font-size: 1rem; font-weight: 500; text-decoration: none; border-radius: 12px; transition: all 0.3s ease;}
.back-button:hover {background-color: #e0e0e0; color: #000;}
.video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.video-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.article-footer {margin-top: 2rem; font-size: 0.9rem; color: #666; border-top: 1px solid #ddd; padding-top: 1rem;}
#enlaces-legales a {color: white; text-decoration: none; transition: color 0.3s;}
#enlaces-legales a:hover {color: #00ffff;}
#enlaces-legales a:visited {color: white;}
#enlaces-legales a:active {color: #00ffff;}

/* === THEME MODERNO ESTILO CHATGPT PARA HIGHLIGHT.JS === */
.hljs {
  background: #0d1117;   /* negro suave */
  color: #c9d1d9;        /* texto base gris claro */
  padding: 1em;
  border-radius: 8px;
  font-family: "Fira Code", monospace;
  font-size: 15px;
  line-height: 1.5em;
  overflow-x: auto;
}

/* Comentarios */
.hljs-comment,
.hljs-quote {
  color: #8b949e;
  font-style: italic;
}

/* Palabras clave (if, for, while, return...) */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {
  color: #ff7b72;  /* rojo oscuro */
  font-weight: bold;
}

/* Strings */
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute {
  color: #3fb950;  /* verde oscuro */
}

/* Números, booleanos, constantes */
.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: #d29922;  /* dorado/amarillo */
  font-weight: bold;
}

/* Funciones y clases */
.hljs-function .hljs-title,
.hljs-built_in,
.hljs-class .hljs-title {
  color: #79c0ff;  /* azul claro */
}

/* Variables, templates */
.hljs-variable,
.hljs-template-variable,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #ffa657; /* naranja suave */
}

/* Errores */
.hljs-error {
  background-color: #8b0000;
  color: #fff;
  font-weight: bold;
}