/*
  Comentarios en español añadidos.
  Propósito: documentar los selectores/clases principales, indicar en qué archivos HTML/JS se usan
  y facilitar el rastreo de dependencias entre HTML, CSS y JS.

  Nota: este archivo contiene reglas que afectan a todas las páginas del portafolio.
  Archivos relacionados (uso de clases en HTML):
    - index.html: .hero, .floating-objects, .nav, .hero-img
    - portfolio.html: .grid, .card, .floating-item, .filters, .chip
    - cloud&analytics.html: .skills-section, .skills-group, .certifications-grid
    - project-management.html: .cert-card, .cert-provider, .cert-logo
    - cv.html / about.html / blog.html: .title-with-icon, .skills-section
  Archivo JS que interactúa con estos selectores: scripts/main.js (animaciones & bindings)
*/
:root {
  --bg: #2a4365;
  --panel: #3182ce;
  --text: #f7fafc;
  --muted: #f7fafc;
  --brand: #e6eaed;
  --accent: #180444;
  --footer-home: #2c5282;
  --footer-about: #2b6cb0;
  --footer-portfolio: #3182ce;
  --footer-blog: #2b6cb0;
  --footer-cv: #2c5282;
  --footer-skills: #1e40af;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 2rem auto; }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: var(--panel); position: sticky; top: 0; z-index: 10; }
/*
  Selector: .nav
  Uso en HTML: presente en todos los archivos como barra superior (index.html, portfolio.html, about.html, cv.html, blog.html, cloud&analytics.html, project-management.html)
  JS: scripts/main.js manipula #nav-links y .nav-toggle para abrir/cerrar en pantallas pequeñas
*/
.brand { font-weight: 700; letter-spacing: .4px; }
.nav-links { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.nav-links a[aria-current='page'] { color: var(--accent); }

.site-header .hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; padding: 3rem 2rem 2rem; align-items: center; }
/*
  Selectores: .site-header .hero, .hero-text, .hero-img
  Uso: index.html (sección principal / hero)
  JS: animateHome() en scripts/main.js anima .hero-text h1, .hero-text p y .hero-img
*/
.hero-text h1 { font-size: clamp(1.8rem, 1.6rem + 1.2vw, 2.6rem); margin: 0 0 .5rem; }
.hero-text p { color: var(--muted); }
.hero-img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; justify-self: center; border: 3px solid var(--brand); }

.btn { 
  display: inline-block; 
  background: var(--brand); 
  color: #002233; 
  padding: .5rem .8rem; 
  border-radius: .4rem; 
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-secondary { background: #2567c2; color: var(--text); border: 1px solid #374151; }
.cta { display: flex; gap: .8rem; margin-top: 1rem; }

.footer { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text); 
  padding: 1.5rem;
  margin-top: 3rem;
  background: linear-gradient(to bottom, var(--panel), rgba(49, 130, 206, 0.9));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer a {
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer a:hover {
  transform: translateY(-2px);
  text-decoration: none;
  opacity: 0.9;
}

.footer img.github-logo {
  height: 24px;
  width: 24px;
  margin-left: 12px;
  filter: brightness(1.1);
  transition: filter 0.2s ease;
}

.footer img.github-logo:hover {
  filter: brightness(1.2);
}


  /*
    Objetos flotantes (floating-objects)
    Uso en HTML: portfolio.html, index.html, about.html, cloud&analytics.html, project-management.html
    JS: scripts/main.js enlaza eventos hover a .floating-item[data-related] para resaltar tarjetas relacionadas
  */
  .floating-objects {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .floating-item {
    position: absolute;
    font-size: 2.2rem;
    /* Atenuamos color y opacidad para no distraer la lectura */
    opacity: 0.08;
    color: rgba(230,234,237,0.12); /* versión tenue de var(--brand) */
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.25s ease;
    will-change: transform;
    /* Evitar que los elementos flotantes intercepten eventos y asegurar que
       no queden por encima del contenido principal durante animaciones */
    z-index: 0;
    pointer-events: none;
  }

  .floating-item img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    /* Hacer las miniaturas más tenues: menos sombra y saturación reducida */
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    opacity: 0.86;
    filter: grayscale(18%) saturate(70%);
  }

  /* Posiciones individuales y tiempos sutiles para evitar solapamientos */
  .floating-item.f1 { left: 6%; top: 18%; animation: floatA 10s ease-in-out infinite; }
  .floating-item.f2 { left: 22%; top: 70%; font-size: 1.9rem; animation: floatB 12s ease-in-out infinite; color: rgba(144,205,244,0.22); }
  .floating-item.f3 { left: 46%; top: 8%; animation: floatC 14s ease-in-out infinite; color: rgba(183,164,240,0.20); }
  .floating-item.f4 { left: 74%; top: 24%; font-size: 2rem; animation: floatB 11s ease-in-out infinite; color: rgba(99,179,237,0.20); }
  .floating-item.f5 { left: 84%; top: 66%; font-size: 1.8rem; animation: floatA 13s ease-in-out infinite; color: rgba(125,211,252,0.18); }
  .floating-item.f6 { left: 52%; top: 54%; font-size: 2.4rem; animation: floatC 9s ease-in-out infinite; color: rgba(255,255,255,0.08); opacity: 0.08; }

  @keyframes floatA {
    0% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-18px) rotate(2deg); }
    100% { transform: translateY(0) rotate(-2deg); }
  }

  /* Tarjeta resaltada cuando se hace hover sobre su elemento flotante o sobre la tarjeta */
  /* Clase .floating-highlight aplicada por scripts/main.js */
.card.floating-highlight {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.22);
}

  @keyframes floatB {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-28px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }

  @keyframes floatC {
    0% { transform: translateY(0) rotate(1deg); }
    50% { transform: translateY(-12px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(1deg); }
  }

  /*
    Asegurar posición del contenido principal sobre los objetos flotantes
    Ajuste: elevamos el z-index del contenedor principal para que el texto
    y el contenido queden siempre por encima de elementos decorativos
    o animados (por ejemplo .floating-item).
  */
  .container { position: relative; z-index: 6; }

  /* Reducir la intrusividad de objetos flotantes en pantallas pequeñas */
  @media (max-width: 900px) {
    .floating-item { opacity: 0.08; }
    .floating-item.f1, .floating-item.f3 { display: none; }
  }

  /*
    Tarjetas de proyectos y cards generales
    Selectores clave: .grid, .card, .card-thumb, .card-body
    Uso HTML: portfolio.html (render-portfolio.js crea .card con estructura), otras páginas usan .card para mostrar contenido similar
    JS: animatePortfolio() y las animaciones on-scroll en scripts/main.js animan .card
  */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; margin-top: 1rem; }
.card { 
  background: #2d3748; 
  border: 1px solid #4a5568; 
  border-radius: 1rem; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  border-color: rgba(255,255,255,0.22);
}
.card-thumb { 
  aspect-ratio: 16/9; 
  width: 100%; 
  object-fit: cover; 
  background: #2d3748; 
  transition: transform 0.25s ease;
}
.card-media {
  position: relative;
}
.tech-chips {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.tech-chip {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
}
.tech-chip.HTML { background: #e34f26; color: #fff; }
.tech-chip.CSS { background: #1572B6; color: #fff; }
.tech-chip.JavaScript { background: #F7DF1E; color: #111827; border-color: rgba(0,0,0,0.12);} 
.card:hover .card-thumb { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .card-thumb { transition: none; }
  .card:hover .card-thumb { transform: none; }
}
.card-body { padding: 1rem; display: grid; gap: .6rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { 
  background: #4a5568; 
  color: var(--text); 
  padding: .2rem .8rem; 
  border-radius: 999px; 
  font-size: .8rem;
  transition: background-color 0.2s ease;
}
.tag:hover {
  background: #2b6cb0;
}
.actions { 
  display: flex; 
  gap: .5rem; 
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
  padding-top: 1rem;
}

.filters { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.chip { 
  background: #2d3748; 
  color: var(--text); 
  border: 1px solid #4a5568; 
  padding: .4rem 1rem; 
  border-radius: 999px; 
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip:hover {
  background: #3182ce;
  border-color: #90cdf4;
}
.chip[aria-pressed='true'] { border-color: var(--brand); color: var(--brand); }

/*
  Sección de habilidades (skills-section)
  Uso HTML: cv.html, cloud&analytics.html, cv.html
  Selectores internos: .skills-group, .skills-list, .skill-item
  JS: animateCloud() y observador on-scroll animan .skills-group y .skill-item
*/
.skills-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Contenedor de grupo de habilidades: .skills-group */
.skills-group {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.skills-group h3 {
  color: var(--brand);
  margin-top: 0;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
}

.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.skill-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.skill-item i, .skill-item img {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
}

/* Colores para los íconos de habilidades blandas */
.skill-item i.fa-handshake { color: #4CAF50; }
.skill-item i.fa-comments { color: #2196F3; }
.skill-item i.fa-tasks { color: #FF9800; }
.skill-item i.fa-lightbulb { color: #FFC107; }
.skill-item i.fa-chart-line { color: #9C27B0; }
.skill-item i.fa-book { color: #E91E63; }
.skill-item i.fa-users-cog { color: #00BCD4; }
.skill-item i.fa-project-diagram { color: #8BC34A; }

/* Fondo claro para los logos técnicos que lo necesiten */
.skill-item img[alt="MySQL"],
.skill-item img[alt="GitHub"] {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px;
}

.devicon {
  font-size: 1.5rem;
}

.post header .meta { color: var(--muted); }

@media (max-width: 900px) {
  .site-header .hero { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 680px) {
  .nav { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; background: none; border: 1px solid #1f2937; color: var(--text); padding: .3rem .6rem; border-radius: .5rem; }
  .nav-links { width: 100%; display: none; flex-direction: column; }
  .nav-links.open { display: flex; }
}

/* Tarjetas más grandes en pantallas anchas; prevenir desbordes en pantallas pequeñas */
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

/* Estilos específicos para la página de Cloud & Data */
.cloud-profile-card {
  background: rgba(66, 133, 244, 0.1);
  border: 1px solid rgba(66, 133, 244, 0.3);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.profile-header h3 {
  margin: 0;
  color: var(--brand);
  font-size: 1.3rem;
}

.achievement-badge {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(66, 133, 244, 0.25);
  border-radius: 0.8rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.league-badge {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.achievement-text {
  flex: 1;
}

.achievement-text strong {
  display: block;
  font-size: 1.5rem;
  color: #90cdf4;
  margin-bottom: 0.3rem;
}

.achievement-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/*
  Contenedores de certificaciones
  Selectores: .certifications-grid, .cert-card, .cert-logo, .cert-chip
  Uso HTML: cloud&analytics.html, project-management.html
  JS: animateCerts() y observer on-scroll en scripts/main.js
*/
.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

/* Tarjeta de certificación: .cert-card */
.cert-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.cert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border-color: rgba(66, 133, 244, 0.4);
}

.cert-icon {
  font-size: 2.5rem;
  /* Degradado multicolor para mayor contraste */
  background: linear-gradient(135deg, #EA4335, #FBBC05, #34A853, #4285F4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.cert-card h4 {
  margin: 0.5rem 0;
  color: var(--brand);
  font-size: 1.1rem;
}

.cert-date {
  color: #90cdf4;
  font-size: 0.85rem;
  margin: 0.5rem 0;
  font-weight: 600;
}

.cert-card p:last-child {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.8rem 0 0;
  line-height: 1.5;
}

/* Logos coloreados para tarjetas de certificación */
/* Logo de certificación: .cert-logo
  Uso: img dentro de .cert-provider en project-management.html y cloud&analytics.html
*/
.cert-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* Coursera & ScrumStudy provider-specific styling */
.cert-card.coursera {
  background: linear-gradient(135deg, rgba(42,98,201,0.06), rgba(255,255,255,0.02));
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 8px 20px rgba(59,130,246,0.09);
}
.cert-card.coursera:hover { box-shadow: 0 12px 32px rgba(59,130,246,0.12); transform: translateY(-6px); }
.cert-card.coursera .cert-provider { 
  width: 106px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg,#d2dcf0,#dee5ec); border-radius: 10px; margin-bottom: 0.6rem;
  box-shadow: 0 6px 14px rgba(47,112,255,0.12);
}
.cert-card.coursera .cert-logo { width: 100px; height: 50px; }

.cert-card.scrumstudy {
  background: linear-gradient(135deg, rgba(255,196,96,0.04), rgba(255,255,255,0.02));
  border-color: rgba(9, 225, 77, 0.35);
  box-shadow: 0 8px 20px rgba(249,115,22,0.08);
}
.cert-card.scrumstudy:hover { box-shadow: 0 12px 32px rgba(249,115,22,0.12); transform: translateY(-6px); }
.cert-card.scrumstudy .cert-provider { 
  width: 106px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg,#d2dcf0,#dee5ec); border-radius: 10px; margin-bottom: 0.6rem;
  box-shadow: 0 6px 14px rgba(255,112,67,0.10);
}
.cert-card.scrumstudy .cert-logo { width: 100px; height: 50px; }

.cert-provider img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.cert-card .cert-provider { display: inline-flex; align-items: center; justify-content: center; }

/* Acentos por categoría */
.cert-card.gcp {
  border-color: rgba(66, 133, 244, 0.35);
}
.cert-card.gcp:hover {
  box-shadow: 0 8px 20px rgba(66, 133, 244, 0.25);
}

.cert-card.terraform {
  border-color: rgba(100, 86, 255, 0.35);
}
.cert-card.terraform:hover {
  box-shadow: 0 8px 20px rgba(100, 86, 255, 0.25);
}

.cert-card.network {
  border-color: rgba(52, 168, 83, 0.35);
}
.cert-card.network:hover {
  box-shadow: 0 8px 20px rgba(52, 168, 83, 0.25);
}

/* Chips de certificación */
.cert-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: #0b1220;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.cert-chip.gcp { color: #0b1f3a; background: rgba(66,133,244,0.2); border-color: rgba(66,133,244,0.45); }
.cert-chip.terraform { color: #1a133d; background: rgba(100,86,255,0.2); border-color: rgba(100,86,255,0.45); }
.cert-chip.network { color: #0f2b18; background: rgba(52,168,83,0.2); border-color: rgba(52,168,83,0.45); }

/* Project card chips (reuse style but separate class) */
.card-chips {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}

.card-chip {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
}
.card-chip.colaborativo {
  background: #2563EB; /* blue-600 */
  color: #ffffff;
  border-color: rgba(255,255,255,0.22);
}
.card-chip.frontend {
  background: #F59E0B; /* amber-500 */
  color: #111827; /* gray-900 for contrast */
  border-color: rgba(0,0,0,0.12);
}
.card-chip.ui {
  background: #EC4899; /* pink-500 */
  color: #ffffff;
  border-color: rgba(255,255,255,0.22);
}

.skills-section h4 {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

/* Responsive adjustments for Cloud & Data page */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .achievement-badge {
    flex-direction: column;
    text-align: center;
  }
  
  .certifications-grid {
    grid-template-columns: 1fr;
  }
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.title-icon {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  object-fit: contain;
}

/* Slight polish for league badge image */
.league-badge {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* Brand color utilities and contrast helpers for Cloud & Data icons */
.icon-contrast { text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.45); }
.logo-contrast { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

.icon-gcp-blue { color: #4285F4; }
.icon-gcp-green { color: #34A853; }
.icon-gcp-yellow { color: #FBBC04; }
.icon-gcp-red { color: #EA4335; }
.icon-k8s { color: #326CE5; }
.icon-terraform { color: #7B42BC; }
.icon-lookerstudio { color: #1A73E8; }
.icon-excel { color: #217346; }
.icon-powerbi { color: #F2C811; }