/* ==========================================================
   🌙 ESTILOS BASE Y CONFIGURACIÓN GENERAL
   ========================================================== */

/* 🔹 Reinicio general de márgenes, rellenos y box model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🔹 Comportamiento suave al hacer scroll */
html {
  scroll-behavior: smooth;
}

/* 🔹 Estilo general del cuerpo (modo oscuro) */
body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  background-color: #272727; /* Fondo oscuro */
  color: #f5f5f5; /* Texto claro */
  transition: background-color 0.3s, color 0.3s;
}

/* 🔹 Imágenes con esquinas redondeadas */
img {
  max-width: 100%;
  border-radius: 12px;
}

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

/* 🔹 Listas sin viñetas */
ul {
  list-style: none;
}

/* ==========================================================
   🔷 CONTENEDORES Y SECCIONES GENERALES
   ========================================================== */

.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

.section {
  padding: 4rem 0;
  text-align: center;
}

.section.alt {
  background-color: #1f1f1f;
}

/* ==========================================================
   🚀 BARRA DE NAVEGACIÓN COMPLETA - CORREGIDA
   ========================================================== */

.topbar {
  background: #1f1f1f;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  width: 100%;
  /* Eliminar cualquier espacio izquierdo */
  padding-left: 0;
  margin-left: 0;
}

.topbar .nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  gap: 1rem;
  /* Eliminar cualquier espacio izquierdo */
  padding-left: 0;
  margin-left: 0;
}

/* 🔹 FIX ESPECÍFICO PARA EL LOGO - SIN ESPACIO IZQUIERDO */
.topbar .container {
  width: 100%;
  max-width: 100%;
  padding: 0 20px; /* Solo padding lateral */
}

/* ------------------ LOGO + TEXTO ------------------ */

.logo-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Eliminar cualquier espacio izquierdo */
  padding-left: 0;
  margin-left: 0;
}

.logo-brand img {
  height: 90px;
  width: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00cc66;
  box-shadow: 0 0 10px rgba(0, 204, 102, 0.4);
  transition: 0.3s ease;
}

.logo-brand img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 255, 153, 0.6);
}

/* TEXTO "MI PORTAFOLIO" */
.logo-brand span {
  font-size: 1.50rem;
  font-weight: 800;
  color: #00cc66;
  text-shadow: 0 0 10px rgba(0, 204, 102, 0.5);
  letter-spacing: 1px;
}

/* ------------------ MENÚ CENTRAL ------------------ */

.topbar .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.topbar .menu a {
  color: #f5f5f5;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  transition: 0.3s ease;
  position: relative;
  white-space: nowrap;
}

.topbar .menu a:hover {
  color: #00cc66;
  background: rgba(0, 204, 102, 0.15);
}

.topbar .menu a.active {
  color: #00cc66;
  background: rgba(0, 204, 102, 0.2);
  box-shadow: 0 2px 8px rgba(0, 204, 102, 0.2);
}

.topbar .menu a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #00cc66;
  transform: translateX(-50%);
  transition: width 0.3s;
  border-radius: 2px;
}

.topbar .menu a:hover::after {
  width: 80%;
}

/* ==========================================================
   🔷 CONTROLES DERECHA (MODIFICADOS - MÁS JUNTOS)
   ========================================================== */

.topbar .nav-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Reducido para que estén más juntos */
}

/* 📦 BUSCADOR DE PROYECTOS */
.search-container {
  position: relative;
  margin-left: 0; /* Eliminado margen izquierdo */
}

#search-input {
  padding: 8px 35px 8px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  width: 180px;
  transition: 0.3s;
}

#search-input:focus {
  border-color: #00cc66;
  box-shadow: 0 0 0 2px rgba(0, 204, 102, 0.2);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 0.9rem;
}

/* 🎛️ GRUPO DE CONTROLES (MODO + IDIOMA) */
.control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Espacio mínimo entre botones */
  background: rgba(255, 255, 255, 0.08); /* Mismo fondo que buscador */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px; /* Igual que el buscador */
  padding: 0.2rem 0.5rem;
}

/* Botones individuales */
#mode-toggle,
#lang-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: none;
  background: transparent;
  color: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

#mode-toggle:hover,
#lang-toggle:hover {
  color: #00cc66;
  background: rgba(0, 204, 102, 0.15);
}

/* Selector de idioma */
#lang-label {
  font-weight: 600;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  padding: 0.3rem 0.8rem;
  border-radius: 10px;
  color: #f5f5f5;
  min-width: 50px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
}

#lang-label:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #00cc66;
}

/* ==========================================================
   🔷 M1 PORTFOLIO - TÍTULO PRINCIPAL
   ========================================================== */

.portfolio-header {
  text-align: center;
  padding: 6rem 0 4rem 0;
  background: linear-gradient(135deg, #272727 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}

.portfolio-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 50%, rgba(0, 204, 102, 0.1) 0%, transparent 70%);
  z-index: 1;
}

.portfolio-header h1 {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
  color: #00cc66;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 30px rgba(0, 204, 102, 0.7),
               0 0 60px rgba(0, 204, 102, 0.5),
               0 0 90px rgba(0, 204, 102, 0.3);
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% {
    text-shadow: 0 0 30px rgba(0, 204, 102, 0.7),
                 0 0 60px rgba(0, 204, 102, 0.5),
                 0 0 90px rgba(0, 204, 102, 0.3);
  }
  100% {
    text-shadow: 0 0 40px rgba(0, 204, 102, 0.8),
                 0 0 80px rgba(0, 204, 102, 0.6),
                 0 0 120px rgba(0, 204, 102, 0.4);
  }
}

.portfolio-header h2 {
  font-size: 2.5rem;
  font-weight: 300;
  position: relative;
  z-index: 2;
  color: #f5f5f5;
  letter-spacing: 8px;
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.portfolio-header .divider {
  width: 200px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00cc66, transparent);
  margin: 2rem auto;
  position: relative;
  z-index: 2;
  border-radius: 2px;
}

.portfolio-header .divider::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 8px;
  background: rgba(0, 204, 102, 0.2);
  border-radius: 4px;
  filter: blur(4px);
}

/* ==========================================================
   📋 MENÚ DE PORTAFOLIO
   ========================================================== */

.portfolio-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 900px;
  margin: 2rem auto 0;
  position: relative;
  z-index: 2;
}

.portfolio-menu .menu-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 204, 102, 0.3);
  border-radius: 25px;
  padding: 0.8rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #f5f5f5;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.portfolio-menu .menu-item:hover {
  background: rgba(0, 204, 102, 0.15);
  border-color: #00cc66;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 204, 102, 0.3);
  color: #00cc66;
}

/* ==========================================================
   🧭 MENÚ PRINCIPAL / NAVBAR
   ========================================================== */

.navbar {
  width: 100%;
  background: #1b1b1b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.5rem 0;
}

.navbar ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.navbar ul li {
  flex: 1;
  text-align: center;
}

.navbar ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55px;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f5f5f5;
  text-decoration: none;
  transition: 0.3s ease;
  white-space: nowrap;
}

.navbar ul li a:hover {
  color: #00ff88;
  text-shadow: 0 0 6px rgba(0,255,120,0.7);
}

/* Línea decorativa */
.navbar-bottom-line {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ==========================================================
   🔹 CORRECCIÓN FINAL PARA ESPACIO DEL LOGO
   ========================================================== */

/* Eliminar cualquier espacio residual */
body > .topbar,
body > .topbar > *,
body > .topbar > * > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Contenedor específico para el logo alineado a la izquierda */
.logo-brand {
  margin-right: auto;
  justify-content: flex-start;
}

/* ==========================================================
   📱 RESPONSIVE – TABLETS (768px o menos)
   ========================================================== */

@media (max-width: 768px) {
  /* Reorganiza nav principal */
  .topbar .nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  
  /* Oculta menú grande en móvil */
  .topbar .menu {
    display: none;
  }
  
  /* Ajustes para controles en tablet */
  .control-group {
    padding: 0.15rem 0.4rem;
  }
  
  #mode-toggle,
  #lang-toggle {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
  
  #lang-label {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    min-width: 45px;
  }
  
  /* Buscador más pequeño */
  .search-container {
    margin-left: 0;
  }
  
  #search-input {
    width: 140px;
    font-size: 0.8rem;
    padding: 7px 30px 7px 10px;
  }
  
  /* Ajusta tamaño del título grande */
  .portfolio-header h1 {
    font-size: 2.5rem;
  }
  
  /* Subtítulo ajustado */
  .portfolio-header h2 {
    font-size: 1.5rem;
    letter-spacing: 4px;
  }
  
  /* Menú de categorías más compacto */
  .portfolio-menu {
    gap: 0.5rem;
  }
  
  /* Ítems más pequeños */
  .portfolio-menu .menu-item {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
  }
  
  /* Corrección específica para móvil */
  .topbar .container {
    padding: 0 15px;
  }
}

/* ==========================================================
   📱 RESPONSIVE – MÓVIL PEQUEÑO (480px o menos)
   ========================================================== */

@media (max-width: 480px) {
  /* Oculta texto "MI PORTAFOLIO" para ahorrar espacio */
  .logo-brand span {
    display: none;
  }
  
  /* Controles más compactos */
  .topbar .nav-controls {
    gap: 0.6rem;
  }
  
  .control-group {
    gap: 0.3rem;
    padding: 0.1rem 0.3rem;
  }
  
  #mode-toggle,
  #lang-toggle {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
  
  #lang-label {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    min-width: 40px;
  }
  
  /* Buscador más pequeño */
  #search-input {
    width: 120px;
    font-size: 0.75rem;
    padding: 6px 28px 6px 10px;
  }
  
  /* Corrección específica para móvil pequeño */
  .topbar .container {
    padding: 0 10px;
  }
}



/* ============================================================
   BARRA DE BÚSQUEDA MODERNA
============================================================ */

/* Contenedor */
.search-container {
  position: relative;
  margin-left: 20px;
}

/* Input estilizado */
#search-input {
  padding: 10px 40px 10px 15px; /* Espacio interno */
  width: 150px;
  border-radius: 25px;
  border: 2px solid #4b4b4b;
  background: #1c1c1c;
  color: #ffffff;
  outline: none;
  font-size: 14px;
  transition: 0.3s ease;
}

/* Hover */
#search-input:hover {
  border-color: #00d084;
  background: #222;
}

/* Focus (cuando se escribe) */
#search-input:focus {
  border-color: #00ffae;
  box-shadow: 0 0 6px #00ffae70;
}

/* Icono lupa */
.search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%); /* Centrado PERFECTO */
  font-size: 16px;
  color: #b5b5b5;
  pointer-events: none;
  transition: 0.3s;
}

/* Cambia cuando se hace focus */
#search-input:focus + .search-icon {
  color: #00ffae;
}

/* Resaltado de palabra buscada */
.highlight {
  background: yellow;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
}



  









/* ================================
SECCIÓN HERO
================================ */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  text-align: center;
  padding-top: 150px; /* Ahora sí correcto */
}

/* GRID CENTRADO */
.hero-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================================
TEXTO
================================ */

.hero-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-text span {
  color: #00cc66;
}

.hero-text .lead {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.lead {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.lead h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #f5f5f5;
}

/* ================================
FOTO REDONDA
================================ */

.hero-photo img,
.about-img img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: auto;
  border: 3px solid #00cc66;
  box-shadow: 
    0 0 20px rgba(0, 204, 102, 0.7),
    0 0 40px rgba(0, 204, 102, 0.5);
}

/* ================================
BOTONES
================================ */

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  background: #00cc66;
  color: #fff;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}

.btn:hover {
  background: #00a352;
  transform: translateY(-2px);
}

.btn.ghost {
  background: transparent;
  border: 2px solid #00cc66;
  color: #00cc66;
}

.btn.ghost:hover {
  background: #00cc66;
  color: #fff;
}









/* ================================
SOBRE MÍ (About Section)
================================ */
#sobre-mi {
  /* 🎨 MODO OSCURO: Fondo sección */
  background: #272727;
  padding: 4rem 0;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

#sobre-mi h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  /* 🟢 VERDE: Título sección */
  color: #00cc66;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

#sobre-mi h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  /* 🟢 VERDE: Línea decorativa título */
  background: #00cc66;
  border-radius: 2px;
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
}

.about-text h3 {
  /* ⚪ BLANCO: Subtítulo about */
  color: #ffffff;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: bold;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  /* ⚪ BLANCO: Texto párrafos */
  color: #f5f5f5;
}

.about-text .btn.ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  /* 🟢 VERDE: Borde botón ghost */
  border: 2px solid #00cc66;
  border-radius: 25px;
  background: transparent;
  /* 🟢 VERDE: Texto botón ghost */
  color: #00cc66;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.about-text .btn.ghost:hover {
  /* 🟢 VERDE: Fondo hover botón ghost */
  background: #00cc66;
  /* ⚪ BLANCO: Texto hover botón ghost */
  color: #fff;
}

.about-img {
  display: flex;
  justify-content: center;
}

/* ========================
   HABILIDADES - Estilo
======================== */
#habilidades {
  padding: 4rem 0;
  /* 🎨 MODO OSCURO: Fondo sección */
  background: #272727;
  /* ⚪ BLANCO: Texto sección */
  color: #f5f5f5;
  text-align: center;
  /* 🟢 VERDE: Bordes superior e inferior */
  border-top: 1px solid #00cc66;
  border-bottom: 1px solid #00cc66;
}

/* Título principal */
#habilidades h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  /* 🟢 VERDE: Título sección */
  color: #00cc66;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

#habilidades h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  /* 🟢 VERDE: Línea decorativa título */
  background: #00cc66;
  border-radius: 2px;
}

/* Subtítulos (Blandas, Duras, Lenguajes, etc.) */
.habilidad-titulo {
  font-size: 1.8rem;
  /* 🟢 VERDE: Subtítulos habilidades */
  color: #00cc66;
  margin: 3rem 0 1.5rem;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

/* Contenedor de tarjetas */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Tarjetas individuales */
.skill-card {
  /* 🎨 GRIS: Fondo tarjeta habilidad */
  background: rgba(51, 51, 51, 0.9);
  border-radius: 15px;
  padding: 1.5rem;
  /* 🟢 VERDE: Sombra tarjeta */
  box-shadow: 0 8px 25px rgba(0, 204, 102, 0.3);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 🟢 VERDE: Borde tarjeta */
  border: 1px solid #00cc66;
}

.skill-card:hover {
  transform: translateY(-8px);
  /* 🟢 VERDE: Sombra hover tarjeta */
  box-shadow: 0 12px 30px rgba(0, 204, 102, 0.5);
}

/* Título dentro de la tarjeta (en VERDE) */
.skill-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  /* 🟢 VERDE: Título tarjeta habilidad */
  color: #00cc66;
}

/* Texto descriptivo (en BLANCO) */
.skill-card p {
  font-size: 1rem;
  line-height: 1.4;
  /* ⚪ BLANCO: Texto tarjeta habilidad */
  color: #ffffff;
  font-weight: 400;
}

/* Iconos */
.skill-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

/* Colores personalizados de cada lenguaje */
.skill-icon.html {
  /* 🔴 NARANJA: Icono HTML */
  color: #e34c26;
}

.skill-icon.csharp {
  /* 🟣 MORADO: Icono C# */
  color: #68217a;
}

.skill-icon.css {
  /* 🔵 AZUL: Icono CSS */
  color: #2965f1;
}

.skill-icon.python {
  /* 🔵 AZUL: Icono Python */
  color: #3776ab;
}

/* ================================
   LENGUAJES DE PROGRAMACIÓN - Estilo Simple
================================ */
#lenguajes {
  padding: 4rem 0;
  /* 🎨 MODO OSCURO: Fondo sección */
  background: #272727;
  text-align: center;
  /* 🟢 VERDE: Bordes superior e inferior */
  border-top: 1px solid #00cc66;
  border-bottom: 1px solid #00cc66;
}

#lenguajes h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  /* 🟢 VERDE: Título sección */
  color: #00cc66;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

#lenguajes h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  /* 🟢 VERDE: Línea decorativa título */
  background: #00cc66;
  border-radius: 2px;
}

.lenguajes-simple {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.lenguaje-linea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 800px;
}

.lenguaje-nombre {
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  /* 🟢 VERDE: Texto lenguajes */
  color: #00cc66;
  /* 🟢 VERDE: Borde lenguajes */
  border: 2px solid #00cc66;
  border-radius: 8px;
  background: transparent;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

/* Colores específicos para cada lenguaje */
.lenguaje-nombre[data-lenguaje="python"]:hover {
  background: #3776AB;
  border-color: #3776AB;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(55, 118, 171, 0.4);
}

.lenguaje-nombre[data-lenguaje="javascript"]:hover {
  background: #F7DF1E;
  border-color: #F7DF1E;
  color: #000000;
  box-shadow: 0 5px 15px rgba(247, 223, 30, 0.4);
}

.lenguaje-nombre[data-lenguaje="java"]:hover {
  background: #007396;
  border-color: #007396;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(0, 115, 150, 0.4);
}

.lenguaje-nombre[data-lenguaje="csharp"]:hover {
  background: #239120;
  border-color: #239120;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(35, 145, 32, 0.4);
}

.lenguaje-nombre[data-lenguaje="php"]:hover {
  background: #777BB4;
  border-color: #777BB4;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(119, 123, 180, 0.4);
}

.lenguaje-nombre[data-lenguaje="html"]:hover {
  background: #E34F26;
  border-color: #E34F26;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(227, 79, 38, 0.4);
}

.lenguaje-nombre[data-lenguaje="css"]:hover {
  background: #1572B6;
  border-color: #1572B6;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(21, 114, 182, 0.4);
}

.lenguaje-nombre[data-lenguaje="typescript"]:hover {
  background: #3178C6;
  border-color: #3178C6;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(49, 120, 198, 0.4);
}

.lenguaje-nombre[data-lenguaje="go"]:hover {
  background: #00ADD8;
  border-color: #00ADD8;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(0, 173, 216, 0.4);
}

.lenguaje-nombre[data-lenguaje="rust"]:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.lenguaje-nombre[data-lenguaje="swift"]:hover {
  background: #FA7343;
  border-color: #FA7343;
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(250, 115, 67, 0.4);
}

.lenguaje-nombre:hover {
  transform: translateY(-3px);
}


/* ============================== 
   PROYECTOS - Grid de Cards 
============================== */
#proyectos {
    /* 🎨 MODO OSCURO: Fondo sección */
    background: #272727;
    padding: 4rem 0;
}

#proyectos h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    /* 🟢 VERDE: Título sección */
    color: #00cc66;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    width: 100%;
    display: block;
}

#proyectos h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    /* 🟢 VERDE: Línea decorativa título */
    background: #00cc66;
    border-radius: 2px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Grid de tarjetas */
.grid.cards {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Tarjetas individuales */
.card {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    /* 🎨 GRIS: Fondo tarjeta proyecto */
    background: #333333;
    /* 🟢 VERDE: Borde tarjeta proyecto */
    border: 1px solid #00cc66;
    border-radius: 15px;
    overflow: hidden;
    /* 🟢 VERDE: Sombra tarjeta proyecto */
    box-shadow: 0 8px 20px rgba(0, 204, 102, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    /* 🟢 VERDE: Sombra hover tarjeta proyecto */
    box-shadow: 0 12px 25px rgba(0, 204, 102, 0.4);
}

/* Contenedor de imagen - CAMBIOS PARA MOSTRAR IMAGEN COMPLETA */
.card .imgBx {
    position: relative;
    width: 100%;
    height: 220px;
    /* 🎨 GRIS: Fondo imagen proyecto */
    background: #3a3a3a;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 10px; /* Espacio alrededor de la imagen */
    cursor: pointer;
}

.card .imgBx img {
    width: auto; /* Cambié a auto para mantener proporciones */
    height: auto; /* Cambié a auto para mantener proporciones */
    max-width: 90%; /* Limita el ancho máximo */
    max-height: 90%; /* Limita la altura máxima */
    object-fit: contain; /* Muestra la imagen completa sin recortar */
    transition: transform 0.5s ease;
}

.card:hover .imgBx img {
    transform: scale(1.05);
}

/* Contenido de la tarjeta */
.card .content {
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}

.card .content h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    /* 🟢 VERDE: Título tarjeta proyecto */
    color: #00cc66;
    text-align: center;
    width: 100%;
    display: block;
}

.card .content p {
    font-size: 0.95rem;
    /* ⚪ BLANCO: Texto tarjeta proyecto */
    color: #f5f5f5;
    margin-bottom: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* Contenedor de botones */
.btn-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* Botón GitHub */
.btn-github {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    /* 🟢 VERDE: Texto botón GitHub */
    color: #00cc66;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    /* 🟢 VERDE: Borde botón GitHub */
    border: 2px solid #00cc66;
    border-radius: 5px;
    /* 🟢 VERDE: Efecto glow botón GitHub */
    box-shadow: 0 0 10px rgba(0, 204, 102, 0.5),
                0 0 20px rgba(0, 204, 102, 0.3),
                0 0 30px rgba(0, 204, 102, 0.2);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.btn-github:hover {
    /* ⚪ BLANCO: Texto hover botón GitHub */
    color: #ffffff;
    /* 🟢 VERDE: Fondo hover botón GitHub */
    background-color: #00cc66;
    /* 🟢 VERDE: Glow hover botón GitHub */
    box-shadow: 0 0 15px rgba(0, 204, 102, 0.7),
                0 0 30px rgba(0, 204, 102, 0.5),
                0 0 45px rgba(0, 204, 102, 0.3);
    transform: translateY(-3px);
}

.btn-github:active {
    transform: translateY(1px);
    /* 🟢 VERDE OSCURO: Fondo active botón GitHub */
    background-color: #00a352;
    /* 🟢 VERDE: Glow active botón GitHub */
    box-shadow: 0 0 5px rgba(0, 204, 102, 0.7),
                0 0 15px rgba(0, 204, 102, 0.5),
                0 0 25px rgba(0, 204, 102, 0.3);
}

.btn-github i {
    font-size: 16px;
}

/* Botón Ver Más */
.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    /* 🟢 VERDE: Texto botón Ver Más */
    color: #00cc66;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    /* 🟢 VERDE: Borde botón Ver Más */
    border: 2px solid #00cc66;
    border-radius: 5px;
    /* 🟢 VERDE: Efecto glow botón Ver Más */
    box-shadow: 0 0 10px rgba(0, 204, 102, 0.5),
                0 0 20px rgba(0, 204, 102, 0.3),
                0 0 30px rgba(0, 204, 102, 0.2);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.btn-more:hover {
    /* ⚪ BLANCO: Texto hover botón Ver Más */
    color: #ffffff;
    /* 🟢 VERDE: Fondo hover botón Ver Más */
    background-color: #00cc66;
    /* 🟢 VERDE: Glow hover botón Ver Más */
    box-shadow: 0 0 15px rgba(0, 204, 102, 0.7),
                0 0 30px rgba(0, 204, 102, 0.5),
                0 0 45px rgba(0, 204, 102, 0.3);
    transform: translateY(-3px);
}

.btn-more:active {
    transform: translateY(1px);
    /* 🟢 VERDE OSCURO: Fondo active botón Ver Más */
    background-color: #00a352;
    /* 🟢 VERDE: Glow active botón Ver Más */
    box-shadow: 0 0 5px rgba(0, 204, 102, 0.7),
                0 0 15px rgba(0, 204, 102, 0.5),
                0 0 25px rgba(0, 204, 102, 0.3);
}

.btn-more i {
    font-size: 16px;
}

/* Modo oscuro - Verde sólido (igual que GitHub) */
.btn-more {
    background-color: transparent;
    color: #00cc66;
    border-color: #00cc66;
}

.btn-more:hover {
    background-color: #00cc66;
    border-color: #00cc66;
    transform: translateY(-3px);
}

/* Modo claro - Con efecto verde al hover */
.light-mode .btn-more {
    background-color: transparent;
    color: #00cc66;
    border-color: #00cc66;
}

.light-mode .btn-more:hover {
    background-color: #e8faf0; /* Verde muy claro */
    color: #008040; /* Verde más oscuro */
    border-color: #00cc66; /* Verde */
    transform: translateY(-3px);
}



/* Lenguajes de programación */
.lenguajes {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.lenguaje-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}

.lenguaje-item span {
    margin-top: 5px;
    font-size: 0.8rem;
    color: #f5f5f5;
}

/* ================================
   MODAL ULTRA COMPACTO (PROYECTOS)
   ================================ */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  position: relative;
  background: #2a2a2a;
  margin: 0.5% auto;
  padding: 0;
  width: 98%;
  max-width: 1200px;
  max-height: 99vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 255, 136, 0.1);
  border: 2px solid #00ff88;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ================================
   HEADER ULTRA COMPACTO
   ================================ */

.modal-header {
  background: #1a1a1a;
  padding: 1rem 2rem;
  position: relative;
  border-bottom: 2px solid #00ff88;
}

.modal-header h2,
.modal-header h3 {
  color: #00ff88;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

.close-modal {
  position: absolute;
  top: 0.8rem;
  right: 1.2rem;
  background: transparent;
  border: 2px solid #00ff88;
  color: #00ff88;
  font-size: 1.5rem;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-modal:hover {
  background: #00ff88;
  color: #1a1a1a;
}

/* ================================
   BODY ULTRA COMPACTO
   ================================ */

.modal-body {
  padding: 1.5rem 2rem;
  overflow-y: auto;
  max-height: calc(99vh - 80px);
  background: #2a2a2a;
}

.modal-body::-webkit-scrollbar {
  width: 4px;
}

.modal-body::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #00ff88;
}

/* ================================
   LAYOUT VERTICAL - IMAGEN ARRIBA, TEXTO ABAJO
   ================================ */

.modal-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ================================
   GALERÍA ULTRA COMPACTA (BOTONES VERDES)
   ================================ */

.modal-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.modal-gallery {
  position: relative;
  width: 100%;
  height: 450px;
  perspective: 1500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-gallery img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 400px;
  max-height: 420px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  left: 50%;
  top: 50%;
  transform-origin: center;
  background: rgba(255, 255, 255, 0.05);
}

.modal-gallery img.active {
  transform: translate(-50%, -50%) translateZ(0px) rotateY(0deg) scale(1.05);
  border-color: #00ff88;
  box-shadow: 0 15px 40px rgba(0, 255, 136, 0.4), 0 0 20px rgba(0, 255, 136, 0.3);
  z-index: 10;
  max-width: 420px;
  max-height: 450px;
}

.modal-gallery img.prev {
  transform: translate(-50%, -50%) translateZ(-150px) translateX(-220px) rotateY(35deg) scale(0.8);
  opacity: 0.7;
  z-index: 5;
  max-width: 320px;
  max-height: 380px;
}

.modal-gallery img.next {
  transform: translate(-50%, -50%) translateZ(-150px) translateX(220px) rotateY(-35deg) scale(0.8);
  opacity: 0.7;
  z-index: 5;
  max-width: 320px;
  max-height: 380px;
}

.modal-gallery img.hidden {
  transform: translate(-50%, -50%) translateZ(-300px) scale(0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Sin movimiento en hover pero manteniendo clickeable */
.gallery-container img {
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.gallery-container img:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.modal-gallery img:hover {
  border-color: rgba(0, 255, 136, 0.5);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ================================
   SECCIONES DEL MODAL (PROBLEMA, SOLUCIÓN, RESULTADO)
   ================================ */

.modal-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(26, 26, 26, 0.7);
  border-radius: 8px;
  border-left: 3px solid #00ff88;
}

.modal-section h3 {
  color: #00ff88;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.modal-section p {
  line-height: 1.6;
  color: #e0e0e0;
  margin: 0;
}

/* Estilo específico para la lista de características */
.modal-section ul {
  margin: 0;
  padding-left: 1.2rem;
}

.modal-section ul li {
  color: #e0e0e0;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

.modal-section ul li:last-child {
  margin-bottom: 0;
}

/* ================================
   CONTROLES DE GALERÍA
   ================================ */

.gallery-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.gallery-nav {
  background: #00ff88;
  color: #1a1a1a;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.gallery-nav:hover {
  background: #00cc6a;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.gallery-indicators {
  display: flex;
  gap: 0.5rem;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #00ff88;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* ================================
   TECNOLOGÍAS Y ROL
   ================================ */

.modal-tech {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.tech-category {
  background: rgba(26, 26, 26, 0.7);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #333;
}

.tech-subtitle {
  color: #00ff88;
  font-size: 1rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.tech-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 136, 0.3);
  font-size: 0.85rem;
}

.tech-item i {
  font-size: 1rem;
}

.modal-role {
  text-align: center;
  margin: 1rem 0;
  padding: 0.8rem;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.modal-role strong {
  color: #00ff88;
}

/* ================================
   BOTÓN GITHUB
   ================================ */

.modal-github {
  text-align: center;
  margin-top: 1.5rem;
}

.github-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #00ff88;
  color: #1a1a1a;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.github-btn:hover {
  background: #00cc6a;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

/* ================================
   BOTONES DE NAVEGACIÓN EN VERDE - GALERÍA PRINCIPAL
   ================================ */

.gallery-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 20;
}

.gallery-btn {
  background: rgba(0, 255, 136, 0.9); /* Verde más sólido */
  border: 2px solid #00ff88;
  color: #1a1a1a; /* Texto oscuro para mejor contraste */
  width: 45px; /* Un poco más grandes */
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem; /* Iconos más grandes */
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4); /* Sombra verde */
}

.gallery-btn:hover {
  background: #00ff88;
  color: #1a1a1a;
  transform: scale(1.1); /* Efecto de agrandamiento al hover */
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.6);
}

/* ================================
   INDICADORES EN VERDE
   ================================ */

.gallery-indicators {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 20;
}

.indicator {
  width: 8px; /* Un poco más grandes */
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.5); /* Más visibles */
  border: 1px solid #00ff88;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.indicator.active {
  background: #00ff88;
  transform: scale(1.2); /* Efecto de agrandamiento cuando está activo */
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.8);
}

.indicator:hover {
  background: rgba(0, 255, 136, 0.8);
  transform: scale(1.1);
}

/* ================================
   CONTENIDO DE TEXTO ABAJO (SIN MOVIMIENTO)
   ================================ */

.modal-content-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-section {
  background: #1a1a1a;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #333;
  transition: all 0.3s ease;
}

.modal-section:hover {
  background: #222;
  border-color: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

.modal-section h3,
.modal-section h4 {
  color: #00ff88;
  font-size: 1rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.modal-section h3::before,
.modal-section h4::before {
  content: '';
  width: 2px;
  height: 14px;
  background: #00ff88;
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.modal-description {
  color: #d0d0d0;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* ================================
   LISTA ULTRA COMPACTA
   ================================ */

.modal-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-features li {
  color: #d0d0d0;
  padding: 0.4rem 0;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}

.modal-features li:last-child {
  border-bottom: none;
}

.modal-features li:hover {
  color: #fff;
  background: rgba(0, 255, 136, 0.05);
}

.modal-features li::before {
  content: '✓';
  color: #00ff88;
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ================================
   EFECTO DE COLORES EN TECNOLOGÍAS - MODIFICACIÓN
   ================================ */

.tech-category {
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(20, 20, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tech-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 255, 136, 0.1), 
    rgba(0, 255, 255, 0.1), 
    rgba(255, 0, 255, 0.1), 
    rgba(255, 255, 0, 0.1), 
    transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.tech-category:hover::before {
  left: 100%;
}

.tech-category:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 255, 136, 0.2);
}

.tech-category:last-child {
  margin-bottom: 0;
}

.tech-subtitle {
  color: #00ff88;
  font-size: 1rem;
  margin: 0 0 0.8rem 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 0.5rem;
  border-left: 3px solid #00ff88;
  position: relative;
  z-index: 2;
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

/* Efecto de colores individuales para cada tecnología */
.tech-item {
  background: #1a1a1a;
  padding: 0.6rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s ease;
  border: 1px solid #333;
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
}

.tech-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 255, 136, 0.2), 
    rgba(0, 255, 255, 0.2), 
    rgba(255, 0, 255, 0.2), 
    transparent);
  transition: left 0.5s ease;
  z-index: 0;
}

.tech-item:hover::before {
  left: 100%;
}

.tech-item:hover {
  border-color: #00ff88;
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
  transform: translateX(5px);
}

/* Colores específicos para diferentes tipos de tecnologías */
.tech-item:nth-child(odd):hover {
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
}

.tech-item:nth-child(even):hover {
  box-shadow: 0 4px 12px rgba(0, 200, 255, 0.3);
}

/* Efecto de cambio de color en el ícono */
.tech-item:hover i {
  animation: colorChange 1.5s infinite alternate;
}

@keyframes colorChange {
  0% {
    color: #00ff88;
  }
  25% {
    color: #00ffff;
  }
  50% {
    color: #ff00ff;
  }
  75% {
    color: #ffff00;
  }
  100% {
    color: #00ff88;
  }
}

.tech-item i {
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
}

.tech-item span {
  color: #d0d0d0;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.modal-role {
  background: #1a1a1a;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  color: #00ff88;
  font-weight: 600;
  text-align: center;
  border: 1px solid #00ff88;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 0.85rem;
}

.modal-github-link,
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  border: 2px solid #00ff88;
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 0.85rem;
}

.modal-github-link:hover,
.modal-btn:hover {
  background: #00ff88;
  color: #1a1a1a;
}

.modal-github-link i,
.modal-btn i {
  font-size: 1rem;
}

.modal-footer {
  padding: 1rem 2rem;
  background: #1a1a1a;
  border-top: 2px solid #00ff88;
  display: flex;
  justify-content: center;
}

/* ================================
   MODAL PARA VISUALIZACIÓN DE IMÁGENES EN GRANDE
   ================================ */

.image-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

.image-modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2001;
  transition: color 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-close:hover {
  color: #ccc;
  transform: scale(1.1);
}

.image-modal-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#modalImage {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.image-caption {
  text-align: center;
  color: white;
  padding: 15px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 10px 10px;
  margin: 0 auto;
  width: fit-content;
  min-width: 300px;
  font-family: 'Arial', sans-serif;
}

/* ================================
   BOTONES DE NAVEGACIÓN EN VERDE - MODAL DE IMAGEN GRANDE
   ================================ */

.image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 255, 136, 0.9); /* Fondo verde sólido */
  color: #1a1a1a; /* Texto oscuro para contraste */
  border: 2px solid #00ff88; /* Borde verde */
  font-size: 24px;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4); /* Sombra verde */
}

.image-nav:hover {
  background: #00ff88; /* Verde más sólido al hover */
  color: #1a1a1a;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.6);
}

.image-prev {
  left: 20px;
}

.image-next {
  right: 20px;
}

#imageCounter {
  font-size: 14px;
  opacity: 0.8;
  margin-left: 15px;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.image-modal-content {
  animation: zoomIn 0.3s ease;
}

/* DEL LOGO TIPO */

/* Estilos para la funcionalidad de imagen ampliada */       /* DEL LOGO TIPO */
.logo-img {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%;
    height: auto;
}

.logo-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.imagen-grande {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10000;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    cursor: pointer;
    border-radius: 8px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(5px);
}


/* ================================
   LIGHT MODE ULTRA COMPACTO - AZUL (SIN MOVIMIENTO)
   ================================ */

body.light-mode .modal-content {
  background: #f5f5f5;
  border-color: #007bff;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 123, 255, 0.1);
}

body.light-mode .modal-header {
  background: #fff;
  border-bottom-color: #007bff;
}

body.light-mode .modal-header h2,
body.light-mode .modal-header h3 {
  color: #007bff;
  text-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}

body.light-mode .close-modal {
  border-color: #007bff;
  color: #007bff;
}

body.light-mode .close-modal:hover {
  background: #007bff;
  color: white;
}

body.light-mode .modal-body {
  background: #f5f5f5;
}

body.light-mode .modal-body::-webkit-scrollbar-track {
  background: #e0e0e0;
}

body.light-mode .modal-body::-webkit-scrollbar-thumb {
  background: #007bff;
}

body.light-mode .modal-section {
  background: #fff;
  border-color: #e0e0e0;
}

body.light-mode .modal-section:hover {
  background: #f8f9fa;
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

body.light-mode .modal-section h3,
body.light-mode .modal-section h4 {
  color: #007bff;
}

body.light-mode .modal-section h3::before,
body.light-mode .modal-section h4::before {
  background: #007bff;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
}

body.light-mode .modal-description {
  color: #333;
}

body.light-mode .modal-features li {
  color: #333;
  border-bottom-color: #e0e0e0;
}

body.light-mode .modal-features li:hover {
  color: #000;
  background: rgba(0, 123, 255, 0.05);
}

body.light-mode .modal-features li::before {
  color: #007bff;
}

/* EFECTOS DE COLORES EN LIGHT MODE */
body.light-mode .tech-category {
  background: rgba(240, 240, 245, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .tech-category::before {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 123, 255, 0.1), 
    rgba(0, 200, 255, 0.1), 
    rgba(150, 0, 255, 0.1), 
    rgba(255, 100, 0, 0.1), 
    transparent);
}

body.light-mode .tech-category:hover {
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
}

body.light-mode .tech-subtitle {
  color: #007bff;
  border-left-color: #007bff;
}

body.light-mode .tech-item {
  background: #fff;
  border-color: #e0e0e0;
}

body.light-mode .tech-item::before {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 123, 255, 0.15), 
    rgba(0, 200, 255, 0.15), 
    rgba(150, 0, 255, 0.15), 
    transparent);
}

body.light-mode .tech-item:hover {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

body.light-mode .tech-item:nth-child(odd):hover {
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

body.light-mode .tech-item:nth-child(even):hover {
  box-shadow: 0 4px 12px rgba(0, 150, 255, 0.3);
}

body.light-mode .tech-item:hover i {
  animation: colorChangeLight 1.5s infinite alternate;
}

@keyframes colorChangeLight {
  0% {
    color: #007bff;
  }
  25% {
    color: #00a8ff;
  }
  50% {
    color: #9c27b0;
  }
  75% {
    color: #ff9800;
  }
  100% {
    color: #007bff;
  }
}

body.light-mode .tech-item span {
  color: #333;
}

body.light-mode .modal-role {
  background: #fff;
  color: #007bff;
  border-color: #007bff;
}

body.light-mode .modal-github-link,
body.light-mode .modal-btn {
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
  border-color: #007bff;
}

body.light-mode .modal-github-link:hover,
body.light-mode .modal-btn:hover {
  background: #007bff;
  color: #fff;
}

body.light-mode .modal-footer {
  background: #fff;
  border-top-color: #007bff;
}

body.light-mode .modal-gallery img {
  background: rgba(0, 0, 0, 0.02);
}

body.light-mode .modal-gallery img.active {
  border-color: #007bff;
  box-shadow: 0 15px 40px rgba(0, 123, 255, 0.4), 0 0 20px rgba(0, 123, 255, 0.3);
}

/* BOTONES VERDES EN LIGHT MODE */
body.light-mode .gallery-btn {
  background: rgba(0, 123, 255, 0.9);
  border-color: #007bff;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

body.light-mode .gallery-btn:hover {
  background: #007bff;
  color: white;
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6);
}

body.light-mode .indicator {
  background: rgba(0, 123, 255, 0.5);
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

body.light-mode .indicator.active {
  background: #007bff;
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.8);
}

body.light-mode .indicator:hover {
  background: rgba(0, 123, 255, 0.8);
}

body.light-mode .image-modal {
  background-color: rgba(255, 255, 255, 0.95);
}

body.light-mode .image-close {
  color: #007bff;
}

body.light-mode .image-close:hover {
  color: #0056b3;
}

body.light-mode #modalImage {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.light-mode .image-caption {
  color: #333;
  background: rgba(255, 255, 255, 0.9);
}

body.light-mode .image-nav {
  background: rgba(0, 123, 255, 0.2);
  color: #007bff;
}

body.light-mode .image-nav:hover {
  background: rgba(0, 123, 255, 0.3);
  color: #0056b3;
}

/* ================================
   RESPONSIVE ULTRA COMPACTO
   ================================ */

/* Soporte para teclado y accesibilidad */
.image-nav:focus,
.image-close:focus,
.gallery-btn:focus,
.close-modal:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

/* Mejora de rendimiento para imágenes */
#modalImage,
.modal-gallery img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Efecto de carga */
#modalImage.loading {
  opacity: 0.7;
  filter: blur(2px);
}


/* ============================== 
   LENGUAJES DE PROGRAMACIÓN EN PROYECTOS
============================== */
.lenguajes {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
  padding: 15px 0 5px 0;
  /* 🟢 VERDE: Borde superior lenguajes */
  border-top: 1px solid rgba(0, 204, 102, 0.3);
}

.lenguaje-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lenguaje-item span {
  /* 🟢 VERDE: Texto lenguaje */
  color: #00cc66;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lenguaje-item i {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.lenguaje-item:hover i {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px currentColor);
}

/* ================================
MARCA PERSONAL
================================ */
#marca-personal {
  padding: 4rem 0;
  /* 🎨 MODO OSCURO: Fondo sección */
  background: #272727;
  text-align: center;
  /* 🟢 VERDE: Bordes superior e inferior */
  border-top: 1px solid #00cc66;
  border-bottom: 1px solid #00cc66;
}

#marca-personal h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  /* 🟢 VERDE: Título sección */
  color: #00cc66;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

#marca-personal h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  /* 🟢 VERDE: Línea decorativa título */
  background: #00cc66;
  border-radius: 2px;
}

.marca-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.logo-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  /* 🟢 VERDE: Sombra logo */
  box-shadow: 0 4px 15px rgba(0, 204, 102, 0.3);
  /* 🟢 VERDE: Borde logo */
  border: 3px solid #00cc66;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.logo-container:hover {
  transform: scale(1.05);
  /* 🟢 VERDE: Sombra hover logo */
  box-shadow: 0 8px 25px rgba(0, 204, 102, 0.5);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frase-container {
  text-align: left;
  max-width: 500px;
}

.frase-marca {
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 1rem;
  /* ⚪ BLANCO: Texto frase marca */
  color: #f5f5f5;
  line-height: 1.4;
  font-weight: 500;
}

.frase-container cite {
  font-size: 1rem;
  /* 🟢 VERDE: Autor frase marca */
  color: #00cc66;
  font-weight: 600;
  font-style: normal;
}

/* ================================
MODO CLARO PARA MARCA PERSONAL
================================ */
body.light-mode #marca-personal {
  background: #f9f9f9;
}

body.light-mode .frase-marca {
  color: #000000;
}

body.light-mode .frase-container cite {
  color: #0055cc;
}

body.light-mode .logo-container {
  border: 3px solid #0055cc;
  box-shadow: 0 4px 15px rgba(0, 85, 204, 0.3);
}

body.light-mode .logo-container:hover {
  box-shadow: 0 8px 25px rgba(0, 85, 204, 0.5);
}



/* ============================================================
   CARRUSEL DE TESTIMONIOS (MOSTRAR SOLO UNO A LA VEZ)
============================================================ */
.testimonios-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.t-track {
  display: flex;
  overflow: hidden;
  width: 100%;
  scroll-behavior: smooth;
  justify-content: center;
}

/* Solo muestra un slide */
.t-slide {
  display: flex;
  flex: 0 0 100%;
  background: rgba(0, 255, 100, 0.06);
  border: 1px solid rgba(0, 255, 100, 0.4);
  box-shadow: 0 0 12px rgba(0, 255, 100, 0.18);
  padding: 25px;
  border-radius: 18px;
  min-height: 260px;
  transition: 0.3s;
  backdrop-filter: blur(6px);
  align-items: center;
  margin: 0 10px;
}

/* Oculta los no activos */
.t-slide:not(.active) {
  display: none;
}

/* Imagen */
.t-left img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #00cc66;
  margin-right: 25px;
  cursor: pointer;
}

/* Texto */
.t-right {
  padding-left: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  flex: 1;
}

.t-right h3 {
  color: #00ff88;
  margin-bottom: 5px;
  font-size: 1.5rem;
}

.t-right .cargo {
  color: #8affc8;
  font-size: 0.9rem;
  margin-bottom: 15px;
  font-style: italic;
}

.t-right p {
  color: #e1ffe9;
  line-height: 1.5;
  font-size: 1.1rem;
  quotes: "«" "»";
}

.t-right p::before {
  content: open-quote;
  color: #00ff88;
  font-size: 1.5rem;
  margin-right: 5px;
}

.t-right p::after {
  content: close-quote;
  color: #00ff88;
  font-size: 1.5rem;
  margin-left: 5px;
}

/* Flechas */
.t-arrow {
  background: rgba(0, 255, 100, 0.2);
  border: 1px solid #00ff88;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #00ff88;
  cursor: pointer;
  font-size: 22px;
  transition: 0.3s;
  backdrop-filter: blur(5px);
}

.t-arrow:hover {
  background: rgba(0, 255, 100, 0.35);
  transform: scale(1.1);
}

/* Indicadores */
.t-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.t-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 255, 100, 0.3);
  border: 1px solid rgba(0, 255, 100, 0.5);
  cursor: pointer;
  transition: 0.3s;
}

.t-indicator.active {
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
}

/* ============================================================
   MODAL DE IMÁGENES
============================================================ */
.t-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
}

.t-modal img {
  display: block;
  max-width: 70%;
  margin: 100px auto;
  border-radius: 10px;
  border: 3px solid #00ff88;
  box-shadow: 0 0 25px #00ff88;
}

.t-close {
  position: absolute;
  top: 20px; right: 40px;
  font-size: 35px;
  color: #00ff88;
  cursor: pointer;
  text-shadow: 0 0 15px #00ff88;
}

.t-modal-prev, .t-modal-next {
  position: absolute;
  top: 50%;
  font-size: 45px;
  background: none;
  border: none;
  color: #00ff88;
  cursor: pointer;
  text-shadow: 0 0 20px #00ff88;
  transition: transform 0.3s;
}

.t-modal-prev { left: 50px; }
.t-modal-next { right: 50px; }

.t-modal-prev:hover,
.t-modal-next:hover {
  transform: scale(1.3);
}





/* ============================================================
   TU CSS ORIGINAL DE TESTIMONIOS
============================================================ */
#testimonios {
  padding: 4rem 0;
  background: #272727;
  color: #00cc66;
  text-align: center;
  border-top: 1px solid rgba(0, 255, 100, 0.3);
  border-bottom: 1px solid rgba(0, 255, 100, 0.3);
  position: relative;
  overflow: hidden;
}

#testimonios .container {
  position: relative;
  z-index: 2;
}

#testimonios h2 {
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #00cc66;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

#testimonios h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #00cc66;
  border-radius: 2px;
}

.t-slide {
  display: none;
}

.t-slide.active {
  display: flex; /* o block según tu diseño */
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .t-slide {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .t-left img {
    margin-right: 0;
    margin-bottom: 20px;
    width: 150px;
    height: 150px;
  }

  .t-right {
    padding-left: 0;
    text-align: center;
  }

  .testimonios-carousel {
    padding: 0 15px;
  }
}




/* ============================================================
   SECCIÓN INTERESES – SLIDER PREMIUM (OPCIÓN A)
============================================================ */

/* ================================
   CONTENEDOR PRINCIPAL
================================ */
#intereses {
  background: #272727; /* verde oscuro elegante */
  padding: 4rem 0;
  margin-bottom: 90px; /* <-- evita que se pegue con la siguiente sección */
}

/* TÍTULO CENTRADO */
#intereses h2 {
  text-align: center;
  font-size: 2.6rem;
  margin-bottom: 3rem;
  color: #2bff88; /* verde brillante moderno */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

#intereses h2::after {
  content: '';
  display: block;
  margin: 0.6rem auto 0 auto;
  width: 110px;
  height: 4px;
  background: #2bff88;
  border-radius: 2px;
}

/* ================================
      SLIDER CONTENEDOR
================================ */
.intereses-slider {
  position: relative;
  max-width: 950px;
  margin: auto;
  overflow: hidden;
  padding: 0 40px;
}

/* FILA DESLIZANTE */
.intereses-wrapper {
  display: flex;
  transition: transform 0.4s ease;
}

/* ================================
       CARD DE INTERÉS – A
================================ */
.interes-card {
  min-width: 100%;
  background: #143726; /* verde más claro */
  border-radius: 25px; /* esquinas muy redondeadas */
  overflow: hidden;
  border: 2px solid #2bff88; /* borde verde suave */
  box-shadow: 0 0 20px rgba(43, 255, 136, 0.15); /* sombra suave verde */
  display: flex;
  padding: 1.5rem;
  gap: 1.5rem;
}

/* IMAGEN CUADRADA */
.interes-img {
  width: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.interes-img img {
  width: 220px;
  height: 220px;
  border-radius: 15px; /* <-- cuadrada con esquinas suaves */
  object-fit: cover;
  border: 3px solid #2bff88;
  box-shadow: 0 0 12px rgba(43, 255, 136, 0.3);
}

/* CONTENIDO */
.interes-content {
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.interes-content h3 {
  font-size: 1.9rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  color: #63ffb0; /* verde moderno */
}

.interes-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #d6ffe8; /* blanco verdoso suave */
}

/* ================================
      BOTONES DEL SLIDER
================================ */
.intereses-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(43, 255, 136, 0.9);
  border: none;
  padding: 16px 18px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  color: #0f2e1e;
  font-size: 1.6rem;
  transition: 0.3s ease;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.intereses-btn:hover {
  background: #1dcf69;
  transform: translateY(-50%) scale(1.12);
}

.intereses-btn.prev {
  left: 10px;
}

.intereses-btn.next {
  right: 10px;
}

/* ================================
            RESPONSIVE
================================ */

/* TABLET */
@media (max-width: 768px) {

  #intereses h2 {
    font-size: 2.2rem;
  }

  .interes-card {
    flex-direction: column;
    text-align: center;
  }

  .interes-img img {
    width: 180px;
    height: 180px;
    border-radius: 12px;
  }

  .interes-content {
    width: 100%;
  }

  .intereses-btn {
    padding: 12px 14px;
    font-size: 1.3rem;
  }
}

/* MÓVIL */
@media (max-width: 480px) {

  #intereses h2 {
    font-size: 1.9rem;
  }

  .interes-img img {
    width: 150px;
    height: 150px;
    border-radius: 10px;
  }

  .interes-content h3 {
    font-size: 1.5rem;
  }

  .interes-content p {
    font-size: 0.95rem;
  }

  .intereses-btn {
    padding: 10px 12px;
    font-size: 1.1rem;
  }
}
/* =======================================
   BOTÓN VER VIDEO – ESTILO PREMIUM
======================================= */
.ver-video-btn {
  background: #00ff85;               /* Verde neón */
  color: #000;                       /* Texto oscuro */
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: 0.3s ease;
  margin-top: 10px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 12px #00ff85a8;    /* Brillo suave */
}

/* Hover */
.ver-video-btn:hover {
  background: #00cc6a;
  box-shadow: 0 0 18px #00ff85;
  transform: scale(1.05);
}

/* =======================================
   BOTÓN VER IMAGEN – MISMO ESTILO PREMIUM
======================================= */
.ver-imagen-btn {
  background: #2bff88;               /* Verde neón igual al tema */
  color: #000;                       /* Texto oscuro */
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition: 0.3s ease;
  margin-top: 10px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 12px #2bff88a8;    /* Brillo verde */
}

/* Hover */
.ver-imagen-btn:hover {
  background: #25d66f;               /* Verde más oscuro */
  box-shadow: 0 0 18px #2bff88;
  transform: scale(1.05);
}

/* ================================
   MODAL DE IMAGEN (ESTILO PREMIUM)
================================ */
.modal-img {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(3px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-img-contenido {
  max-width: 90%;
  max-height: 85%;
  border-radius: 12px;
  box-shadow: 0 0 25px #00ff85;
  animation: aparecer 0.3s ease;
}

@keyframes aparecer {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.cerrar-modal-img {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 45px;
  color: #2bff88;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.cerrar-modal-img:hover {
  color: #ffffff;
  transform: scale(1.2);
}

/* ================================
   📱 MODO MÓVIL – MODAL DE IMAGEN
================================ */
@media (max-width: 480px) {

  /* Fondo más suave para evitar saturación */
  .modal-img {
    padding: 20px;
    backdrop-filter: blur(2px);
  }

  /* Imagen más pequeña para que no se salga */
  .modal-img-contenido {
    max-width: 95%;
    max-height: 70%;
    border-radius: 10px;
    box-shadow: 0 0 18px #00ff85;
  }

  /* Botón X más pequeño y cerca del borde */
  .cerrar-modal-img {
    font-size: 32px;
    top: 12px;
    right: 20px;
  }
}

/* ================================
   📱 MODO TABLET – MODAL DE IMAGEN
================================ */
@media (max-width: 768px) {

  .modal-img-contenido {
    max-width: 92%;
    max-height: 78%;
    border-radius: 12px;
    box-shadow: 0 0 20px #00ff85;
  }

  .cerrar-modal-img {
    font-size: 38px;
    top: 16px;
    right: 25px;
  }
}






/* ========================================================= */
/* ==================== SECCIÓN: diplomas lo demas se dejo como publicaciones  ============== */
/* ========================================================= */

/* --------------------------------------------------------- */
/* 🟩 CONTENEDOR GENERAL DE LA SECCIÓN                      */
/* --------------------------------------------------------- */
#publicaciones {
  background-color: #272727; /* Fondo oscuro */
  padding: 80px 0;
  text-align: center;
  color: #fff;
}

/* --------------------------------------------------------- */
/* 🟢 TÍTULO PRINCIPAL Y LÍNEA DECORATIVA                   */
/* --------------------------------------------------------- */
#publicaciones h2 {
  font-size: 2.3rem;
  font-weight: 700;
  color: #00ff99;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

#publicaciones .intro {
  color: #ccc;
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  line-height: 1.7;
}

#publicaciones h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: #00ff99;
  margin: 10px auto 0;
  border-radius: 5px;
}

/* ========================================================= */
/* 🔵 CARRUSEL DE PUBLICACIONES                             */
/* ========================================================= */
.publicaciones-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 40px auto;
}

.slider-wrapper {
  width: 70%;     /* Mostrar solo espacio para 2 tarjeta */
  margin: 0 auto;
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.6s ease-in-out;
}

/* Botones verde neón del carrusel */
.publi-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #00ff99;
  border: none;
  color: #000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 0 25px #00ff99;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.publi-btn:hover {
  background-color: #00ffaa;
  transform: translateY(-50%) scale(1.1);
}

.publi-btn.prev { left: 2%; }
.publi-btn.next { right: 2%; }

/* ========================================================= */
/* 🟧 TARJETAS DE PUBLICACIONES                             */
/* ========================================================= */
#publicaciones .card {
  background: #2a2a2a;
  border: 1px solid rgba(0, 255, 153, 0.4);
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 255, 153, 0.2);
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#publicaciones .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 20px rgba(0, 255, 153, 0.4);
}

/* ========================================================= */
/* 🟣 MEJORA VISUAL DE IMÁGENES                             */
/* ========================================================= */
#publicaciones .card .imgBx {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 255, 153, 0.2);
  cursor: pointer;
}

#publicaciones .card .imgBx img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease, filter 0.4s ease;
}

#publicaciones .card:hover .imgBx img {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* ========================================================= */
/* 🟠 CONTENIDO DE TARJETA                                 */
/* ========================================================= */
#publicaciones .card .content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

#publicaciones .card h3 {
  font-size: 1.3rem;
  color: #00ff99;
  margin-bottom: 0.6rem;
  font-weight: 600;
  text-align: left;
}

#publicaciones .card p {
  color: #ccc;
  font-size: 0.95rem;
  text-align: left;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------- */
/* 🟡 PIE DE TARJETA Y BOTÓN LINKEDIN                      */
/* --------------------------------------------------------- */
#publicaciones .post-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid rgba(0, 255, 153, 0.2);
  padding-top: 10px;
}

/* ========================================================= */
/* 🟢 BOTÓN "VER EN LINKEDIN" CON EFECTO NEÓN              */
/* ========================================================= */
#publicaciones .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: transparent; /* Fondo oscuro */
  color: #00ff99;
  padding: 10px 18px;
  border: 2px solid #00ff99; /* Borde verde neón */
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 8px #00ff99;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ✨ Hover: verde brillante */
#publicaciones .btn-more:hover {
  background-color: #00ff66;
  color: #000;
  transform: scale(1.05);
  box-shadow: 0 0 15px #00ff66, 0 0 35px #00ff66;
}

/* Icono dentro del botón */
#publicaciones .btn-more i {
  font-size: 1rem;
  color: inherit;
}

/* ========================================================= */
/* 🟣 EFECTO DE ZOOM Y NAVEGACIÓN EN IMÁGENES               */
/* ========================================================= */
.image-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.image-popup.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.image-popup img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 0 25px #00ff99;
  animation: zoomIn 0.4s ease;
}

/* Botón cerrar */
.close-btn {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 2.5rem;
  color: #00ff99;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.close-btn:hover {
  transform: scale(1.2);
  color: #00ffaa;
}

/* Flechas de navegación */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #00ff99;
  cursor: pointer;
  user-select: none;
  padding: 10px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav-btn:hover {
  color: #00ffaa;
  transform: translateY(-50%) scale(1.2);
}

.nav-btn.prev { left: 40px; }
.nav-btn.next { right: 40px; }

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ========================================================= */
/* 🟫 MEDIA QUERIES                                         */
/* ========================================================= */
@media (max-width: 768px) {
  #publicaciones {
    padding: 60px 20px;
  }

  #publicaciones h2 {
    font-size: 1.8rem;
  }

  .publi-btn {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
  }

  .publi-btn.prev { left: 4%; }
  .publi-btn.next { right: 4%; }

  .nav-btn.prev { left: 20px; }
  .nav-btn.next { right: 20px; }
}

/* ========================================================= */
/* 🟢 BOTONES ESTILO VERDE NEÓN CON EFECTO DE BRILLO        */
/* ========================================================= */
#publicaciones .card .btn {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  background-color: #00ff66; /* Verde neón principal */
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px #00ff66, 0 0 25px #00ff66;
  overflow: hidden;
  z-index: 1;
}

/* ✨ Borde animado brillante */
#publicaciones .card .btn::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00ff66, #00cc55, #00ff66);
  border-radius: 10px;
  z-index: -1;
  animation: neon-border 3s linear infinite;
  filter: blur(4px);
}

/* 🔄 Animación de brillo */
@keyframes neon-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ✋ Hover brillante */
#publicaciones .card .btn:hover {
  background-color: #00cc55;
  transform: scale(1.05);
  box-shadow: 0 0 18px #00ff66, 0 0 35px #00ff66;
}

/* 🔲 Efecto al hacer clic */
#publicaciones .card .btn:active {
  transform: scale(0.98);
}

/* ========================================================= */
/* 🟢 NUEVO BOTÓN "VER MÁS" COMO EN LAS IMÁGENES            */
/* ========================================================= */
#publicaciones .card .btn-vermas {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  background-color: transparent; /* Fondo oscuro inicial */
  color: #00ff99;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #00ff99;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #00ff99;
  z-index: 1;
}

/* ✨ Hover con fondo verde brillante */
#publicaciones .card .btn-vermas:hover {
  background-color: #00ff66;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 15px #00ff66, 0 0 35px #00ff66;
}

/* 🔲 Efecto al hacer clic */
#publicaciones .card .btn-vermas:active {
  transform: scale(0.97);
}

#publicaciones .card .btn:active {
  transform: scale(0.98);
}

/* ========================================================= */
/* 🟢 NUEVO BOTÓN "VER MÁS"                                 */
/* ========================================================= */
#publicaciones .card .btn-vermas {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  background-color: transparent;
  color: #00ff99;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #00ff99;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #00ff99;
  z-index: 1;
}

#publicaciones .card .btn-vermas:hover {
  background-color: #00ff66;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 15px #00ff66, 0 0 35px #00ff66;
}

#publicaciones .card .btn-vermas:active {
  transform: scale(0.97);
}

/* Estilo para la fecha de los diplomas */
.fecha-publicacion {
  color: #00ff99 !important;  /* Fuerza el color verde brillante */
  font-size: 1.1rem;
  font-weight: 700;
  margin: 10px 0 15px 0;
  display: block;
}








/* ================================
   FORMULARIO DE CONTACTO (NEÓN)
================================ */

/* Contenedor */
.contact-container {
    width: 650px;
    margin: 40px auto;
    background: #0f0f0f; /* Negro */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0, 255, 157, 0.15); /* Glow verde suave */
    font-family: 'Poppins', sans-serif;
    border: 1px solid rgba(0,255,157,0.2);
}

/* Título */
.contact-container h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    color: #00ff9d; /* Verde neón */
    text-shadow: 0 0 10px rgba(0,255,157,0.6);
}

/* Grupo */
.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #cfcfcf;
}

/* Caja con icono */
.input-icon {
    position: relative;
}

.input-icon i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #00ff9d;
    font-size: 17px;
    text-shadow: 0 0 10px rgba(0,255,157,0.7);
}

.input-icon textarea ~ i {
    top: 18px;
}

/* Inputs */
.input-icon input,
.input-icon textarea {
    width: 100%;
    padding: 14px 14px 14px 40px;
    border-radius: 10px;
    border: 1px solid rgba(0,255,157,0.3);
    outline: none;
    transition: 0.3s ease;
    font-size: 16px;
    background: #1a1a1a;
    color: white;
}

/* Efecto focus */
.input-icon input:focus,
.input-icon textarea:focus {
    border-color: #00ff9d;
    box-shadow: 0 0 10px rgba(0,255,157,0.6);
}

/* Botón Enviar */
.btn-submit {
    width: 100%;
    background: transparent;
    border: 2px solid #00ff9d;
    color: #00ff9d;
    padding: 15px;
    font-size: 17px;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.3s ease;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0,255,157,0.5);
    box-shadow: 0 0 15px rgba(0,255,157,0.4);
}

.btn-submit i {
    margin-right: 6px;
}

.btn-submit:hover {
    background: #00ff9d;
    color: #0f0f0f;
    box-shadow: 0 0 20px rgba(0,255,157,0.8);
}







/* ================================
CONTACTO - ESTILO ACTUALIZADO
================================ */
#contacto {
  /* 🎨 MODO OSCURO: Fondo sección */
  background: #272727;
  padding: 4rem 0;
  /* 🟢 VERDE: Borde superior */
  border-top: 2px solid #00cc66;
}

#contacto h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  /* 🟢 VERDE: Título sección */
  color: #00cc66;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

#contacto h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  /* 🟢 VERDE: Línea decorativa título */
  background: #00cc66;
  border-radius: 2px;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.socials a {
  font-size: 1.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* ⚪ BLANCO: Iconos redes sociales */
  color: white;
}

/* ====== Colores oficiales ====== */
.socials a.linkedin {
  /* 🔵 AZUL LINKEDIN: Fondo LinkedIn */
  background: #0077b5;
}

.socials a.linkedin:hover {
  /* 🔵 AZUL LINKEDIN OSCURO: Hover LinkedIn */
  background: #005582;
  box-shadow: 0 6px 12px rgba(0, 119, 181, 0.4);
}

.socials a.github {
  /* 🎨 GRIS: Fondo GitHub */
  background: #333;
}

.socials a.github:hover {
  /* 🎨 GRIS OSCURO: Hover GitHub */
  background: #111;
  box-shadow: 0 6px 12px rgba(51, 51, 51, 0.4);
}

/* ====== Gmail ====== */
.socials a.email {
  /* 🔴 ROJO GMAIL */
  background: #D44638;
}

.socials a.email:hover {
  /* 🔴 ROJO OSCURO */
  background: #B23121;
  box-shadow: 0 6px 12px rgba(212, 70, 56, 0.4);
}


/* ================================
FOOTER
================================ */
.footer {
  /* 🎨 MODO OSCURO: Fondo footer */
  background-color: #1a1a1a;
  width: 100%;
  margin: 0;
  padding: 30px 0;
  /* 🟢 VERDE: Borde superior footer */
  border-top: 2px solid #00ff88;
  text-align: center;
}

.footer p {
  /* 🎨 GRIS CLARO: Texto footer */
  color: #cccccc;
  font-size: 1rem;
  margin: 0;
  padding: 0 20px;
}
/* ================================
   MODO CLARO (azul + blanco, texto negro)
   ================================ */

/* SELECTOR PRINCIPAL DEL MODO CLARO */
/* Aplica estos estilos cuando el body tiene la clase 'light-mode' */
body.light-mode {
  /* ⚪ MODO CLARO: Fondo blanco para toda la página */
  background-color: #ffffff;
  /* ⚫ MODO CLARO: Color de texto negro por defecto */
  color: #000000;
}

/* ============ BARRA SUPERIOR (TOPBAR) ============ */

/* Contenedor principal de la barra de navegación */
body.light-mode .topbar {
  /* 🔵 AZUL CLARO: Fondo con tono azul muy suave */
  background: #e6f0ff;
  /* Línea divisoria inferior sutil */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* Sombra suave para efecto de elevación */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Logo o marca del sitio */
body.light-mode .topbar .brand {
  /* 🔵 AZUL: Color azul intenso para el logo */
  color: #0055cc;
  /* 🔵 AZUL: Efecto de resplandor sutil alrededor del texto */
  text-shadow: 0 0 10px rgba(0, 85, 204, 0.3);
}

/* Enlaces del menú de navegación */
body.light-mode .topbar .menu a {
  /* ⚫ NEGRO: Color de texto negro para enlaces */
  color: #000000;
}

/* Estados de hover y activo para enlaces del menú */
body.light-mode .topbar .menu a:hover,
body.light-mode .topbar .menu a.active {
  /* 🔵 AZUL: Cambia a azul al pasar el mouse o estar activo */
  color: #0055cc;
  /* 🔵 AZUL: Fondo semitransparente azul al interactuar */
  background-color: rgba(0, 85, 204, 0.1);
}

/* Línea decorativa bajo los enlaces (probablemente pseudo-elemento) */
body.light-mode .topbar .menu a::after {
  /* 🔵 AZUL: Línea azul como indicador visual */
  background: #0055cc;
}

/* Botones de toggle (modo oscuro/claro e idioma) */
body.light-mode #mode-toggle,
body.light-mode #lang-toggle {
  /* ⚫ NEGRO: Color negro para iconos de toggle */
  color: #000000;
}

/* Estados hover para botones de toggle */
body.light-mode #mode-toggle:hover,
body.light-mode #lang-toggle:hover {
  /* 🔵 AZUL: Cambian a azul al pasar el mouse */
  color: #0055cc;
  /* 🔵 AZUL: Fondo semitransparente azul */
  background-color: rgba(0, 85, 204, 0.1);
}

/* Etiqueta de idioma */
body.light-mode #lang-label {
  /* ⚫ NEGRO: Texto negro para la etiqueta */
  color: #000000;
  /* 🔵 AZUL: Fondo semitransparente azul claro */
  background: rgba(0, 85, 204, 0.1);
  /* Borde sutil azul semitransparente */
  border: 1px solid rgba(0, 85, 204, 0.2);
}

/* ============ SECCIONES PRINCIPALES ============ */

/* Secciones alternas y específicas */
body.light-mode .section.alt,
body.light-mode #sobre-mi,
body.light-mode #habilidades,
body.light-mode #proyectos,
body.light-mode #testimonios,
body.light-mode #intereses,
body.light-mode #contacto {
  /* ⚪ GRIS MUY CLARO: Fondo ligeramente gris para contraste */
  background: #f9f9f9;
  /* ⚫ NEGRO: Texto negro para legibilidad */
  color: #000000;
}

/* Secciones con bordes decorativos */
body.light-mode #habilidades,
body.light-mode #testimonios {
  /* 🔵 AZUL: Líneas azules arriba y abajo como separadores */
  border-top: 1px solid #0055cc;
  border-bottom: 1px solid #0055cc;
}

/* Sección de contacto con borde destacado */
body.light-mode #contacto {
  /* 🔵 AZUL: Borde superior más grueso para destacar */
  border-top: 2px solid #0055cc;
}

/* ============ TIPOGRAFÍA Y TÍTULOS ============ */

/* Todos los títulos principales */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode .section-title {
  /* ⚫ NEGRO: Color negro consistente para títulos */
  color: #000000;
}

/* Elementos destacados (nombres, palabras resaltadas) */
body.light-mode h1 span,
body.light-mode h2 span,
body.light-mode .highlight {
  /* 🔵 AZUL: Color azul para elementos que quieren resaltarse */
  color: #0055cc !important; /* !important para sobrescribir otros estilos */
}

/* ============ IMÁGENES Y FOTOS ============ */

/* Foto del héroe (principal) y foto "sobre mí" */
body.light-mode .hero-photo img,
body.light-mode .about-img img {
  /* 🔵 AZUL: Marco azul alrededor de las fotos */
  border: 3px solid #0055cc !important;
  /* 🔵 AZUL: Efecto de resplandor azul con múltiples capas */
  box-shadow: 0 0 20px rgba(0, 85, 204, 0.7), 
              0 0 40px rgba(0, 85, 204, 0.5) !important;
}

/* ============ TÍTULOS DE SECCIÓN ============ */

/* Títulos principales de cada sección */
body.light-mode #sobre-mi h2,
body.light-mode #habilidades h2,
body.light-mode #proyectos h2,
body.light-mode #testimonios h2,
body.light-mode #intereses h2,
body.light-mode #contacto h2 {
  /* 🔵 AZUL: Color azul para identificar cada sección */
  color: #0055cc !important;
}

/* Líneas decorativas bajo los títulos de sección */
body.light-mode #sobre-mi h2::after,
body.light-mode #habilidades h2::after,
body.light-mode #proyectos h2::after,
body.light-mode #testimonios h2::after,
body.light-mode #intereses h2::after,
body.light-mode #contacto h2::after {
  /* 🔵 AZUL: Línea azul como subrayado decorativo */
  background: #0055cc !important;
}

/* ============ TARJETAS Y COMPONENTES ============ */

/* Títulos de habilidades específicas */
body.light-mode .habilidad-titulo {
  /* 🔵 AZUL: Color azul para subtítulos de habilidades */
  color: #0055cc !important;
}

/* Tarjetas de habilidades, testimonios, intereses y tarjetas genéricas */
body.light-mode .skill-card,
body.light-mode .tcard,
body.light-mode #intereses .card,
body.light-mode .card {
  /* ⚪ BLANCO: Fondo blanco para contraste con sección */
  background: #ffffff;
  /* 🔵 AZUL: Borde azul definiendo la tarjeta */
  border: 1px solid #0055cc;
  /* 🔵 AZUL: Sombra azul sutil para efecto 3D */
  box-shadow: 0 4px 12px rgba(0, 85, 204, 0.15);
  /* ⚫ NEGRO: Texto negro para máxima legibilidad */
  color: #000000;
}

/* Efecto hover en tarjetas */
body.light-mode .skill-card:hover,
body.light-mode .tcard:hover,
body.light-mode #intereses .card:hover,
body.light-mode .card:hover {
  /* 🔵 AZUL: Sombra más intensa al interactuar */
  box-shadow: 0 8px 20px rgba(0, 85, 204, 0.25);
}

/* Títulos dentro de tarjetas */
body.light-mode .skill-card h3,
body.light-mode .card .content h3,
body.light-mode #intereses .card .content h3 {
  /* 🔵 AZUL: Títulos azules dentro de tarjetas */
  color: #0055cc !important;
}

/* Texto de párrafos en tarjetas y sección "sobre mí" */
body.light-mode .skill-card p,
body.light-mode .card .content p,
body.light-mode #intereses .card .content p,
body.light-mode .tcard p,
body.light-mode .about-text p {
  /* ⚫ NEGRO: Texto negro estándar para contenido */
  color: #000000 !important;
}

/* Subtítulos en sección "sobre mí" */
body.light-mode .about-text h3 {
  /* ⚫ NEGRO: Subtítulos en negro para jerarquía */
  color: #000000 !important;
}

/* ============ BOTONES EN MODO CLARO ============ */

/* Botones principales (rellenos) en modo claro */
body.light-mode .btn {
  /* 🔵 AZUL: Fondo azul sólido */
  background: #0055cc;
  /* ⚪ BLANCO: Texto blanco para contraste */
  color: #ffffff;
}

/* Estados hover de botones principales */
body.light-mode .btn:hover {
  /* 🔵 AZUL OSCURO: Azul más oscuro al interactuar */
  background: #003399;
}

/* Botones ghost (con borde, sin fondo) en modo claro */
body.light-mode .btn.ghost {
  /* 🔵 AZUL: Borde azul definiendo el botón */
  border: 2px solid #0055cc;
  /* 🔵 AZUL: Texto azul coherente con el borde */
  color: #0055cc;
  /* Transparente: Sin fondo por defecto */
  background: transparent;
}

/* Estados hover de botones ghost en modo claro */
body.light-mode .btn.ghost:hover {
  /* 🔵 AZUL: Fondo azul al interactuar */
  background: #0055cc;
  /* ⚪ BLANCO: Texto blanco para contraste con fondo azul */
  color: #fff;
}

/* Botones específicos de GitHub en modo claro */
body.light-mode .btn-github {
  /* 🔵 AZUL: Texto azul */
  color: #0055cc;
  /* 🔵 AZUL: Borde azul */
  border: 2px solid #0055cc;
  /* 🔵 AZUL: Efecto de resplandor azul */
  box-shadow: 0 0 10px rgba(0, 85, 204, 0.5),
              0 0 20px rgba(0, 85, 204, 0.3),
              0 0 30px rgba(0, 85, 204, 0.2);
  background: transparent;
}

/* Estados hover de botones GitHub en modo claro */
body.light-mode .btn-github:hover {
  /* ⚪ BLANCO: Texto blanco al interactuar */
  color: #ffffff;
  /* 🔵 AZUL: Fondo azul sólido */
  background-color: #0055cc;
  /* 🔵 AZUL: Resplandor más intenso al interactuar */
  box-shadow: 0 0 15px rgba(0, 85, 204, 0.7),
              0 0 30px rgba(0, 85, 204, 0.5),
              0 0 45px rgba(0, 85, 204, 0.3);
}

/* Botones Ver Más en modo claro */
body.light-mode .btn-more {
  /* 🔵 AZUL: Texto azul */
  color: #0055cc;
  /* 🔵 AZUL: Borde azul */
  border: 2px solid #0055cc;
  /* 🔵 AZUL: Efecto de resplandor azul */
  box-shadow: 0 0 10px rgba(0, 85, 204, 0.5),
              0 0 20px rgba(0, 85, 204, 0.3),
              0 0 30px rgba(0, 85, 204, 0.2);
  background: transparent;
}

/* Estados hover de botones Ver Más en modo claro */
body.light-mode .btn-more:hover {
  /* ⚪ BLANCO: Texto blanco al interactuar */
  color: #ffffff;
  /* 🔵 AZUL: Fondo azul sólido */
  background-color: #0055cc;
  /* 🔵 AZUL: Resplandor más intenso al interactuar */
  box-shadow: 0 0 15px rgba(0, 85, 204, 0.7),
              0 0 30px rgba(0, 85, 204, 0.5),
              0 0 45px rgba(0, 85, 204, 0.3);
}

/* Estados active para todos los botones en modo claro */
body.light-mode .btn:active,
body.light-mode .btn-github:active,
body.light-mode .btn-more:active {
  transform: translateY(1px);
  /* 🔵 AZUL OSCURO: Fondo active */
  background-color: #003399;
  /* 🔵 AZUL: Glow active */
  box-shadow: 0 0 5px rgba(0, 85, 204, 0.7),
              0 0 15px rgba(0, 85, 204, 0.5),
              0 0 25px rgba(0, 85, 204, 0.3);
}

/* Para botones ghost en estado active */
body.light-mode .btn.ghost:active {
  /* 🔵 AZUL OSCURO: Fondo active para ghost */
  background-color: #003399;
  border-color: #003399;
}

/* Botones grandes en modales (modo claro) */
body.light-mode .btn-github.large {
  /* 🔵 AZUL: Texto azul */
  color: #0055cc;
  /* 🔵 AZUL: Borde azul */
  border: 2px solid #0055cc;
  /* 🔵 AZUL: Efecto de resplandor azul */
  box-shadow: 0 0 10px rgba(0, 85, 204, 0.5),
              0 0 20px rgba(0, 85, 204, 0.3),
              0 0 30px rgba(0, 85, 204, 0.2);
  background: transparent;
}

body.light-mode .btn-github.large:hover {
  /* ⚪ BLANCO: Texto blanco al interactuar */
  color: #ffffff;
  /* 🔵 AZUL: Fondo azul sólido */
  background-color: #0055cc;
  /* 🔵 AZUL: Resplandor más intenso al interactuar */
  box-shadow: 0 0 15px rgba(0, 85, 204, 0.7),
              0 0 30px rgba(0, 85, 204, 0.5),
              0 0 45px rgba(0, 85, 204, 0.3);
}

/* Botón de cerrar en modales (modo claro) */
body.light-mode .btn-close {
  /* 🎨 GRIS: Fondo gris para botón cerrar */
  background: #666;
  /* ⚪ BLANCO: Texto blanco */
  color: #fff;
  border: none;
}

body.light-mode .btn-close:hover {
  /* 🎨 GRIS OSCURO: Hover botón cerrar */
  background: #555;
}

/* ============ LENGUAJES DE PROGRAMACIÓN ============ */

/* Texto de items de lenguajes */
body.light-mode .lenguaje-item span {
  /* 🔵 AZUL: Color azul para nombres de lenguajes */
  color: #0055cc !important;
}

/* ============ TESTIMONIOS ============ */

/* Autor/firma de testimonios */
body.light-mode .tcard footer {
  /* 🔵 AZUL: Color azul para destacar el autor */
  color: #0055cc !important;
}

/* Imágenes en testimonios */
body.light-mode .tcard img {
  /* 🔵 AZUL: Marco azul alrededor de fotos de testimonios */
  border: 3px solid #0055cc !important;
}

/* ============ PIE DE PÁGINA ============ */

/* Contenedor principal del footer */
body.light-mode .footer {
  /* 🔵 AZUL CLARO: Fondo azul muy claro coherente con topbar */
  background: #e6f0ff;
  /* ⚫ NEGRO: Texto negro para legibilidad */
  color: #000000;
  /* 🔵 AZUL: Línea divisoria superior azul */
  border-top: 2px solid #0055cc;
}

/* Párrafos dentro del footer */
body.light-mode .footer p {
  /* ⚫ NEGRO: Texto negro consistente */
  color: #000000;
}

/* ================================
   SECCIÓN ESPECÍFICA: LENGUAJES DE PROGRAMACIÓN
   ================================ */

/* Sección completa de lenguajes */
body.light-mode #lenguajes {
  /* ⚪ GRIS MUY CLARO: Fondo consistente con otras secciones */
  background: #f9f9f9;
  /* 🔵 AZUL: Bordes azules como separadores */
  border-top: 1px solid #0055cc;
  border-bottom: 1px solid #0055cc;
}

/* Título de la sección lenguajes */
body.light-mode #lenguajes h2 {
  /* 🔵 AZUL: Color azul para el título */
  color: #0055cc !important;
}

/* Línea decorativa bajo el título */
body.light-mode #lenguajes h2::after {
  /* 🔵 AZUL: Línea azul decorativa */
  background: #0055cc !important;
}

/* Elementos individuales de lenguajes */
body.light-mode .lenguaje-nombre {
  /* 🔵 AZUL: Texto azul para nombres de lenguajes */
  color: #0055cc !important;
  /* 🔵 AZUL: Borde azul definiendo cada elemento */
  border: 2px solid #0055cc !important;
}

/* Estados hover de elementos de lenguajes */
body.light-mode .lenguaje-nombre:hover {
  /* 🔵 AZUL: Fondo azul al interactuar */
  background: #0055cc !important;
  /* ⚪ BLANCO: Texto blanco para contraste */
  color: #ffffff !important;
  /* 🔵 AZUL: Sombra azul para efecto de elevación */
  box-shadow: 0 5px 15px rgba(0, 85, 204, 0.4) !important;
}

/* ================================
   SECCIÓN ESPECÍFICA: MARCA PERSONAL
   ================================ */

/* Sección completa de marca personal */
body.light-mode #marca-personal {
  /* ⚪ GRIS MUY CLARO: Fondo consistente */
  background: #f9f9f9;
  /* 🔵 AZUL: Bordes azules como separadores */
  border-top: 1px solid #0055cc;
  border-bottom: 1px solid #0055cc;
}

/* Título de la sección marca personal */
body.light-mode #marca-personal h2 {
  /* 🔵 AZUL: Color azul para el título */
  color: #0055cc !important;
}

/* Línea decorativa bajo el título */
body.light-mode #marca-personal h2::after {
  /* 🔵 AZUL: Línea azul decorativa */
  background: #0055cc !important;
}

/* Contenedor de logos */
body.light-mode .logo-container {
  /* 🔵 AZUL: Marco azul alrededor del logo */
  border: 3px solid #0055cc !important;
  /* 🔵 AZUL: Sombra azul sutil */
  box-shadow: 0 4px 15px rgba(0, 85, 204, 0.3) !important;
}

/* Estados hover del contenedor de logos */
body.light-mode .logo-container:hover {
  /* 🔵 AZUL: Sombra más intensa al interactuar */
  box-shadow: 0 8px 25px rgba(0, 85, 204, 0.5) !important;
}

/* Frase de marca personal */
body.light-mode .frase-marca {
  /* ⚫ NEGRO: Texto negro para la frase */
  color: #000000 !important;
}

/* Autor de la frase de marca */
body.light-mode .frase-container cite {
  /* 🔵 AZUL: Color azul para destacar al autor */
  color: #0055cc !important;
}

/* ================================
   CORRECCIONES ESPECÍFICAS PARA HERO
   ================================ */

/* Subtítulo en sección hero */
body.light-mode .lead h2 {
  /* 🔵 AZUL: Color azul para subtítulo */
  color: #0055cc !important;
}

/* Textos de interés en hero */
body.light-mode .lead span {
  /* 🔵 AZUL: Color azul para elementos destacados */
  color: #0055cc !important;
}

/* Nombre en hero */
body.light-mode .hero-text h1 span {
  /* 🔵 AZUL: Color azul para resaltar el nombre */
  color: #0055cc !important;
}

/* ================================
   CORRECCIÓN DE ESPECIFICIDAD PARA BOTONES
   ================================ */

/* Asegurar que los estilos del modo claro tengan mayor especificidad */
body.light-mode .btn.ghost,
body.light-mode .btn-github,
body.light-mode .btn-more {
  /* Forzar los colores azules en modo claro */
  border-color: #0055cc !important;
  color: #0055cc !important;
  background: transparent !important;
}

body.light-mode .btn.ghost:hover,
body.light-mode .btn-github:hover,
body.light-mode .btn-more:hover {
  /* Forzar los colores de hover en modo claro */
  background: #0055cc !important;
  color: #ffffff !important;
}

/* Botones principales sólidos */
body.light-mode .btn:not(.ghost):not(.btn-github):not(.btn-more) {
  background: #0055cc !important;
  color: #ffffff !important;
  border: 2px solid #0055cc !important;
}

body.light-mode .btn:not(.ghost):not(.btn-github):not(.btn-more):hover {
  background: #003399 !important;
  border-color: #003399 !important;
} 

/* ================================
   🌓 MODO CLARO PARA EL HEADER DE M1 PORTFOLIO
   ================================ */

body.light-mode .portfolio-header {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f0ff 100%);
}

body.light-mode .portfolio-header::before {
  background: radial-gradient(circle at 30% 50%, rgba(0, 85, 204, 0.1) 0%, transparent 70%);
}

body.light-mode .portfolio-header h1 {
  /* 🔵 AZUL: Título en modo claro */
  color: #0055cc;
  text-shadow: 0 0 30px rgba(0, 85, 204, 0.7),
               0 0 60px rgba(0, 85, 204, 0.5),
               0 0 90px rgba(0, 85, 204, 0.3);
  animation: titleGlowLight 3s ease-in-out infinite alternate;
}

@keyframes titleGlowLight {
  0% {
    text-shadow: 0 0 30px rgba(0, 85, 204, 0.7),
                 0 0 60px rgba(0, 85, 204, 0.5),
                 0 0 90px rgba(0, 85, 204, 0.3);
  }
  100% {
    text-shadow: 0 0 40px rgba(0, 85, 204, 0.8),
                 0 0 80px rgba(0, 85, 204, 0.6),
                 0 0 120px rgba(0, 85, 204, 0.4);
  }
}

body.light-mode .portfolio-header h2 {
  /* ⚫ NEGRO: Subtítulo en modo claro */
  color: #333333;
}

body.light-mode .portfolio-header .divider {
  background: linear-gradient(90deg, transparent, #0055cc, transparent);
}

body.light-mode .portfolio-header .divider::after {
  background: rgba(0, 85, 204, 0.2);
}

body.light-mode .portfolio-menu .menu-item {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 85, 204, 0.3);
  /* ⚫ NEGRO: Texto en modo claro */
  color: #333333;
}

body.light-mode .portfolio-menu .menu-item:hover {
  background: rgba(0, 85, 204, 0.15);
  border-color: #0055cc;
  box-shadow: 0 5px 15px rgba(0, 85, 204, 0.3);
  /* 🔵 AZUL: Texto en hover modo claro */
  color: #0055cc;
}

/* ==========================================================
   📱 RESPONSIVE DESIGN - MOBILE FIRST
========================================================== */

/* Pantallas medianas (tablets) */
@media (max-width: 992px) {
  /* Ajustar contenedores */
  .container {
    width: 95%;
  }
  
  /* Hero section */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  
  .hero-text h1 {
    font-size: 2rem;
  }
  
  /* About section */
  .about {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  /* Proyectos grid */
  .grid.cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Intereses grid */
  #intereses .grid.cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Marca personal */
  .marca-container {
    flex-direction: column;
    gap: 2rem;
  }
  
  .frase-container {
    text-align: center;
  }
  
  /* M1 Portfolio Header */
  .portfolio-header h1 {
    font-size: 3rem;
  }
  
  .portfolio-header h2 {
    font-size: 2rem;
    letter-spacing: 6px;
  }
  
  .portfolio-menu {
    gap: 0.8rem;
  }
  
  /* Navbar menu */
  .topbar .menu {
    gap: 0.5rem;
  }
  
  .topbar .menu a {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  /* Ajustes generales */
  .section {
    padding: 3rem 0;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  /* M1 Portfolio Header */
  .portfolio-header {
    padding: 4rem 0 3rem 0;
  }
  
  .portfolio-header h1 {
    font-size: 2.5rem;
    letter-spacing: 2px;
  }
  
  .portfolio-header h2 {
    font-size: 1.8rem;
    letter-spacing: 4px;
    margin-bottom: 2rem;
  }
  
  .portfolio-menu {
    gap: 0.5rem;
    padding: 0 1rem;
  }
  
  .portfolio-menu .menu-item {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
  
  /* NAVBAR - IMPORTANTE para móviles */
  .topbar .nav {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .topbar .menu {
    display: none; /* Ocultar menú por defecto en móviles */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f1f1f;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
  }
  
  .topbar .menu.active {
    display: flex;
  }
  
  .topbar .menu a {
    padding: 0.8rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Botón hamburguesa */
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    color: #f5f5f5;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
  }
  
  /* Logo más pequeño */
  .logo-brand img {
    height: 50px;
    width: 50px;
  }
  
  .logo-brand span {
    font-size: 1.1rem;
  }
  
  /* Hero */
  .hero {
    min-height: auto;
    padding: 2rem 0;
  }
  
  .hero-photo img,
  .about-img img {
    width: 200px;
    height: 200px;
  }
  
  /* Habilidades */
  .skills-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  
  /* Lenguajes */
  .lenguaje-linea {
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .lenguaje-nombre {
    font-size: 1rem;
    padding: 0.6rem 1rem;
  }
  
  /* Testimonios */
  .testimonios-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .tcard {
    width: 90%;
    max-width: 320px;
  }
  
  /* Contacto */
  .contact-container {
    width: 90%;
    padding: 20px;
  }
  
  /* Modal responsive */
  .modal-content {
    width: 95%;
    margin: 1% auto;
  }
  
  .modal-layout {
    flex-direction: column;
  }
  
  .modal-tech {
    grid-template-columns: 1fr;
  }
  
  .modal-gallery {
    height: 300px;
  }
  
  .modal-gallery img {
    max-width: 90%;
    max-height: 280px;
  }

  /* ---------------------------------------- */
  /*  CARRUSEL DE DIPLOMAS (PUBLICACIONES)    */
  /* ---------------------------------------- */
  
  .diplomas-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
  }
  
  .carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
  
  .carousel-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    object-fit: contain;
    max-height: 400px;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .carousel-btn.prev {
    left: 10px;
  }
  
  .carousel-btn.next {
    right: 10px;
  }
  
  /* ---------------------------------------- */
  /*  TARJETAS DE PROYECTOS                   */
  /* ---------------------------------------- */
  
  .grid.cards,
  #intereses .grid.cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 420px;
    margin: 0 auto;
  }
  
  .pcard {
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .pcard-img {
    height: 180px;
    object-fit: cover;
  }
  
  .pcard-body {
    padding: 1rem;
  }
  
  .pcard-body h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  
  .pcard-body p {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  
  .pcard-tech {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .tech-tag {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  
  .pcard-footer {
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
  }
  
  .btn.primary,
  .btn.secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ---------------------------------------- */
  /*  FIX PUBLICACIONES EN MÓVIL              */
  /* ---------------------------------------- */

  .slider-wrapper {
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto;
  }

  .publi-slide {
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 1rem;
    box-sizing: border-box;
  }

  .publi-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .publi-slide h3 {
    font-size: 1.2rem;
    text-align: center;
  }

  .publi-slide p {
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
  }

  .publi-btn.prev,
  .publi-btn.next {
    top: 45%;
    transform: translateY(-50%);
  }

  .publi-btn.prev {
    left: 5px !important;
  }

  .publi-btn.next {
    right: 5px !important;
  }
}

/* Pantallas muy pequeñas (móviles pequeños) */
@media (max-width: 480px) {
  .container {
    width: 98%;
    padding: 0 10px;
  }
  
  .portfolio-header h1 {
    font-size: 2rem;
  }
  
  .portfolio-header h2 {
    font-size: 1.5rem;
    letter-spacing: 3px;
  }
  
  .portfolio-menu {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  
  .portfolio-menu .menu-item {
    width: 80%;
    text-align: center;
  }
  
  .topbar .nav-controls {
    gap: 0.5rem;
  }
  
  #mode-toggle,
  #lang-toggle {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  /* Hero */
  .hero-text h1 {
    font-size: 1.6rem;
  }
  
  .lead {
    font-size: 1rem;
  }
  
  p {
    font-size: 0.95rem;
  }
  
  .socials a {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  
  .modal-header {
    padding: 0.8rem 1rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .close-modal {
    top: 0.5rem;
    right: 0.8rem;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
  }
  
  /* Diplomas carrusel */
  .carousel-slide img {
    max-height: 300px;
  }
  
  .carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  /* Proyectos cards */
  .pcard-img {
    height: 160px;
  }
  
  .pcard-body h3 {
    font-size: 1.1rem;
  }
  
  .pcard-body p {
    font-size: 0.9rem;
  }
  
  .tech-tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Ajuste para landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
  }
  
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .modal-content {
    max-height: 90vh;
  }
  
  .diplomas-carousel {
    max-height: 70vh;
  }
  
  .carousel-slide img {
    max-height: 250px;
  }
  
  .grid.cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  
  .pcard {
    height: 100%;
  }
}