/* ============================================================
   theme-2026.css
   "Tech Operations Editorial 2026" — capa de rediseño
   Juan Carlos Marroquín · juangestionati.com
   ------------------------------------------------------------
   Se carga en último lugar (después de styles/cyberpunk/
   responsive/animations/cv-sections/ui-premium) para poder
   refinar botones, tarjetas, etiquetas, foco y el nuevo
   objeto 3D del hero sin reescribir los ficheros existentes.
   ============================================================ */

/* ------------------------------------------------------------
   1. ACCESIBILIDAD — foco visible consistente en toda la web
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.project-card:focus-visible,
.skill-tag:focus-visible,
.blog-card:focus-visible {
  outline: 2px solid var(--pastel-cyan, #8FE8FF);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(124, 147, 255, 0.55));
}

/* Evita doble anillo en elementos con radio grande (botones, chips) */
.cta-button:focus-visible {
  outline: 2px solid var(--pastel-cyan, #8FE8FF);
  outline-offset: 3px;
}

.skip-link:focus-visible {
  outline: 3px solid var(--pastel-cyan, #8FE8FF);
  outline-offset: 2px;
}

/* Tamaño de objetivo táctil WCAG 2.5.5 (>= 44x44px) — el icono visual no
   cambia, solo se amplía el área clicable mediante box-sizing + padding. */
.mobile-menu-toggle {
  width: 44px;
  height: 44px;
}

.mobile-menu-toggle .hamburger-icon {
  width: 26px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cookie-modal-close {
  min-width: 44px;
  min-height: 44px;
}

.footer-cookie-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
}

/* ------------------------------------------------------------
   2. BOTONES — microinteracciones adicionales
   ------------------------------------------------------------ */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.25s ease,
              background 0.3s ease,
              color 0.25s ease;
}

.cta-button::after {
  content: '\2192'; /* flecha derecha */
  display: inline-block;
  transition: transform 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  font-weight: 700;
}

.cta-button:hover::after,
.cta-button:focus-visible::after {
  transform: translateX(4px);
}

.cta-button:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* La descarga de CV / enlaces sin flecha explícita (iconos propios) no la necesitan */
.footer-cookie-link.cta-button::after,
.form-submit-btn::after {
  content: '';
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cta-button,
  .cta-button::after {
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   3. SECTION TITLE — subrayado vívido "que se dibuja"
   ------------------------------------------------------------ */
.section-title::after {
  background: var(--gradient-brand, linear-gradient(90deg, #4361FF, #8B5CF6, #FF3D8A)) !important;
  width: 64px;
  transform-origin: left center;
  transition: width 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.section-title.fade-in.visible::after,
.section-title:hover::after {
  width: 96px;
}

/* ------------------------------------------------------------
   4. VARIEDAD DE COLOR EN TARJETAS
   Ciclo de acentos: eléctrico → magenta → cian → violeta
   Da personalidad "viva" a grids repetitivos sin saturar.
   ------------------------------------------------------------ */
.projects-grid .project-card:nth-of-type(4n+1)::after,
.skills-grid .skill-category:nth-of-type(4n+1)::before {
  background: linear-gradient(90deg, transparent, var(--accent-electric, #4361FF), transparent);
}

.projects-grid .project-card:nth-of-type(4n+2)::after,
.skills-grid .skill-category:nth-of-type(4n+2)::before {
  background: linear-gradient(90deg, transparent, var(--accent-magenta, #FF3D8A), transparent);
}

.projects-grid .project-card:nth-of-type(4n+3)::after,
.skills-grid .skill-category:nth-of-type(4n+3)::before {
  background: linear-gradient(90deg, transparent, var(--accent-cyan, #2FE0FF), transparent);
}

.projects-grid .project-card:nth-of-type(4n)::after,
.skills-grid .skill-category:nth-of-type(4n)::before {
  background: linear-gradient(90deg, transparent, var(--accent-violet, #8B5CF6), transparent);
}

.projects-grid .project-card:nth-of-type(4n+1):hover,
.projects-grid .project-card:nth-of-type(4n+1):focus {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(67, 97, 255, 0.18);
}

.projects-grid .project-card:nth-of-type(4n+2):hover,
.projects-grid .project-card:nth-of-type(4n+2):focus {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 61, 138, 0.18);
}

.projects-grid .project-card:nth-of-type(4n+3):hover,
.projects-grid .project-card:nth-of-type(4n+3):focus {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(47, 224, 255, 0.18);
}

.projects-grid .project-card:nth-of-type(4n):hover,
.projects-grid .project-card:nth-of-type(4n):focus {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.18);
}

/* Tarjetas destacadas conservan su acento magenta ya definido */
.project-card-highlight::after {
  background: linear-gradient(90deg, var(--accent-magenta, #FF3D8A), var(--accent-magenta-light, #FF7AB3)) !important;
}

/* ------------------------------------------------------------
   5. ETIQUETAS PASTEL — chips con acentos suaves rotativos
   ------------------------------------------------------------ */
.skill-tags .skill-tag:nth-of-type(4n+1),
.project-tags .project-tag:nth-of-type(4n+1) {
  border-color: rgba(143, 232, 255, 0.3) !important;
  background: rgba(143, 232, 255, 0.1) !important;
  color: var(--pastel-cyan, #8FE8FF) !important;
}

.skill-tags .skill-tag:nth-of-type(4n+2),
.project-tags .project-tag:nth-of-type(4n+2) {
  border-color: rgba(143, 245, 201, 0.3) !important;
  background: rgba(143, 245, 201, 0.1) !important;
  color: var(--pastel-mint, #8FF5C9) !important;
}

.skill-tags .skill-tag:nth-of-type(4n+3),
.project-tags .project-tag:nth-of-type(4n+3) {
  border-color: rgba(198, 181, 255, 0.3) !important;
  background: rgba(198, 181, 255, 0.1) !important;
  color: var(--pastel-violet, #C6B5FF) !important;
}

.skill-tags .skill-tag:nth-of-type(4n),
.project-tags .project-tag:nth-of-type(4n) {
  border-color: rgba(255, 201, 168, 0.3) !important;
  background: rgba(255, 201, 168, 0.1) !important;
  color: var(--pastel-peach, #FFC9A8) !important;
}

.skill-tag:hover, .skill-tag:focus-visible,
.project-tag:hover, .project-tag:focus-visible {
  color: #0B0F1F !important;
  filter: brightness(1.05);
}

.skill-tags .skill-tag:nth-of-type(4n+1):hover, .project-tags .project-tag:nth-of-type(4n+1):hover { background: var(--pastel-cyan, #8FE8FF) !important; }
.skill-tags .skill-tag:nth-of-type(4n+2):hover, .project-tags .project-tag:nth-of-type(4n+2):hover { background: var(--pastel-mint, #8FF5C9) !important; }
.skill-tags .skill-tag:nth-of-type(4n+3):hover, .project-tags .project-tag:nth-of-type(4n+3):hover { background: var(--pastel-violet, #C6B5FF) !important; }
.skill-tags .skill-tag:nth-of-type(4n):hover, .project-tags .project-tag:nth-of-type(4n):hover { background: var(--pastel-peach, #FFC9A8) !important; }

/* Las etiquetas marcadas como IA conservan su tratamiento propio */
.skill-tag-ai, .project-badge-ai {
  color: #FFFFFF !important;
}

/* ------------------------------------------------------------
   6. HERO 3D — red de nodos conectados
   ------------------------------------------------------------ */
.hero3d-stage {
  position: absolute;
  inset: 0;
  z-index: 2; /* por encima de #particles-js, por debajo de .hero-content (z:10) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
}

.hero3d-stage canvas {
  max-width: 100%;
  max-height: 100%;
}

.hero3d-stage.hero3d-ready {
  opacity: 0.85;
  pointer-events: auto;
}

.hero3d-stage.hero3d-unavailable {
  display: none;
}

@media (max-width: 640px) {
  .hero3d-stage {
    opacity: 0.5;
  }
  .hero3d-stage.hero3d-ready {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero3d-stage.hero3d-ready {
    opacity: 0.6;
  }
}

/* ------------------------------------------------------------
   7. SUPERFICIES Y BORDES — pequeños ajustes de coherencia
   ------------------------------------------------------------ */
.hero-badge {
  border-color: rgba(255, 61, 138, 0.35);
  background: rgba(255, 61, 138, 0.08);
  color: var(--pastel-peach, #FFC9A8);
}

.hero-metric-value {
  background: var(--gradient-brand, linear-gradient(135deg, #4361FF, #8B5CF6, #FF3D8A));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.timeline::before {
  background: var(--gradient-brand, linear-gradient(180deg, #4361FF, #8B5CF6, #FF3D8A)) !important;
  opacity: 0.55;
}

.valor-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.valor-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-texto, #F3F7FC);
}

.valor-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--pastel-mint, #8FF5C9);
  font-weight: 700;
}

/* ------------------------------------------------------------
   8. RESPONSIVE — ajustes puntuales del rediseño
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .cta-button::after {
    display: none; /* menos ruido visual en pantallas muy pequeñas */
  }
}

@media (min-width: 1440px) {
  .hero3d-stage canvas {
    filter: saturate(1.05);
  }
}

/* Nota: el resto de reglas prefers-reduced-motion (animate-fade-in, hover-lift,
   etc.) ya viven en animations.css — aquí solo se añaden las específicas
   de los componentes nuevos de este fichero (botones, hero 3D). */