/* CSS específico para la página team.html
   Reglas con mayor especificidad (prefijo #team-page) para no alterar
   estilos globales del sitio. Reusa variables de :root definidas en
   indexnew-merged.css / indexnew.css cuando sea posible.
*/

/* Theme variables scoped to teams pages */
#team-page{
  --bg-card: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.05);
  --accent: #6A1BB1;
  --accent-2: #1F6DFF;
  --accent-gold: #d4af37;
  --muted: rgba(255,255,255,0.65);
}

#team-page .qb-hero{
  padding:56px 20px;
  text-align:center;
  background: linear-gradient(135deg, rgba(10,12,18,0.8), rgba(22,18,40,0.85));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: #fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Hero profile layout */
#team-page .hero-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center }
#team-page .hero-row{ display:flex; gap:18px; align-items:center; width:100%; }
#team-page .avatar{ width:140px; height:140px; border-radius:50%; object-fit:cover; border: 4px solid rgba(255,255,255,0.06); box-shadow: 0 8px 28px rgba(2,6,23,0.6) }
#team-page .hero-copy{ text-align:left }
#team-page .qb-hero h1{ font-size:2.1rem; margin:0 0 6px; color: #fff }
#team-page .qb-hero .lead{ color: rgba(255,255,255,0.85); margin:4px 0 12px; max-width:720px }

/* Hero action buttons */
#team-page .hero-actions{ display:flex; gap:10px; margin-top:8px }
#team-page .btn-secondary{ display:inline-block; padding:8px 12px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:#fff; text-decoration:none }
#team-page .btn-secondary:hover{ background: rgba(255,255,255,0.02) }

@media (max-width:780px){
  #team-page .hero-row{ flex-direction:column; text-align:center }
  #team-page .hero-copy{ text-align:center }
  #team-page .avatar{ width:120px; height:120px }
}

#team-page .qb-container{ max-width:1100px; margin:0 auto; padding:28px 20px; }

#team-page .qb-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }

/* Layout spacing previously inline in HTML */
#team-page section{ margin-top:28px; }
#team-page #projects{ margin-top:34px; }
#team-page .qb-grid{ margin-top:14px; }

/* Hero paragraph */
#team-page .qb-hero p{ max-width:820px; margin:8px auto 0; color:var(--text-soft); }

/* Cards específicos para el equipo: más claros que las cards globales para mejorar legibilidad */
#team-page .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  color: var(--text-main);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

#team-page .card:hover{ transform: translateY(-6px); box-shadow: 0 26px 70px rgba(0,0,0,0.85); }

#team-page .card h3{ margin:0 0 6px; color: var(--accent); }
#team-page .card .meta{ color: var(--text-soft); font-size:0.95rem; display:block; margin-bottom:10px }

#team-page .projects-list{ padding-left:0; list-style:none; }
#team-page .projects-list li{ margin:10px 0; color: var(--text-soft); }

/* Botón mail */
#team-page .btn-primary{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--brand2, #1F6DFF), var(--brand, #6A1BB1));
  color:#fff;
  font-weight:700;
}

/* Encabezados y texto */
#team-page h1{ color: var(--text-main); margin:0 0 6px; }
#team-page p{ color: var(--text-soft); }

#team-page footer{ margin-top:40px; color:var(--text-soft); font-size:0.9rem; text-align:center }

@media (max-width: 720px){
  #team-page .qb-hero{ padding:36px 16px; }
  #team-page .qb-grid{ gap:14px; }
}

/* Pequeñas utilidades locales */
  #team-page .cta-row{ text-align:center; margin-top:22px }

/* Año en tarjetas */
#team-page .year{ color: var(--text-soft); font-size:0.95rem; margin:8px 0 10px; }

/* Listados de idiomas y educación */
#team-page .lang-list,
#team-page .edu-list{
  list-style: none;
  padding-left: 0;
  margin: 8px 0 14px;
  color: var(--text-soft);
}

#team-page .lang-list li,
#team-page .edu-list li{
  padding: 4px 0;
  font-size: 0.95rem;
}

#team-page h4{
  margin-top:12px;
  margin-bottom:6px;
  color: var(--text-main);
  font-size:1rem;
}

/* Spacing helpers formerly inline */
#team-page .section-spaced{ margin-top:28px }
#team-page .grid-spaced{ margin-top:14px }
#team-page .muted-center{ text-align:center; margin-top:28px; color:var(--text-soft) }

/* Dashboard styles for profile */
#team-page .dashboard {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

#team-page .panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}

#team-page .panel h4{ margin:0 0 10px; color:var(--text-main); font-size:1rem }

#team-page .chart-wrap{ width:100%; height:320px }

/* Controls row replacing inline styles */
#team-page .controls-row{ display:flex; gap:10px; align-items:center; margin-bottom:8px }

#team-page .metric-select{
  padding:8px 10px; border-radius:10px; background: rgba(255,255,255,0.02); border:1px solid var(--glass-border); color:var(--text-main);
}

/* Modern metric cards */
#team-page .metrics { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px }

#team-page .metric { background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01)); padding:14px; border-radius:10px; text-align:left; display:flex; gap:12px; align-items:center }
#team-page .metric .meta-icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff }
#team-page .metric .value { font-size:1.4rem; font-weight:800; color:var(--accent-2) }
#team-page .metric .label { font-size:0.85rem; color:var(--muted) }

/* Right column compact chart */
#team-page aside .chart-wrap{ height:200px }

/* Small screens adjustments */
@media (max-width: 900px){
  #team-page .dashboard{ grid-template-columns: 1fr; }
  #team-page .chart-wrap{ height:260px }
  #team-page .metrics{ grid-template-columns: repeat(2,1fr) }
}

/* subtle entrance animation */
#team-page .card, #team-page .panel{ opacity:0; transform: translateY(8px); animation: cardIn 420ms ease forwards }
@keyframes cardIn{ to{ opacity:1; transform: translateY(0) } }

/* Projects grid and modal */
#team-page .project-grid{ margin-top:18px; display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:12px }
#team-page .project-card{ display:flex; flex-direction:column; gap:8px }
#team-page .project-card .thumb{ width:100%; height:100px; background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06)); border-radius:10px; object-fit:cover }
#team-page .tag{ display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.03); color:var(--muted); font-size:0.8rem; margin-right:6px }

/* Modal */
#project-modal{ position:fixed; inset:0; background:rgba(2,6,23,0.6); display:none; align-items:center; justify-content:center; z-index:1200 }
#project-modal[aria-hidden="false"]{ display:flex }
#project-modal .project-modal-content{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--glass-border); border-radius:12px; padding:18px; width:min(940px,96%); max-height:90vh; overflow:auto }
#project-modal .modal-close{ position:absolute; right:20px; top:18px; background:transparent; border:0; color:var(--muted); font-size:1.6rem }

/* Utility for centering with margin instead of inline style */
.muted-center.margin-top{ margin-top:18px }

/* Category headings for projects */
#team-page .project-category{ margin-top:28px }
#team-page .project-category h3{ font-size:1.15rem; color:var(--accent-2); margin-bottom:10px }

/* Company list inside sector card: white text per design */
/* Sector card compact: reduced padding to lower perceived height */
#team-page .project-category .sector-card{ padding:8px; background:transparent; border-radius:8px }
/* Company line: single-row, white text, companies separated by | */
#team-page .project-category .company-line{ color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.95rem }

/* Keep the old list class around for fallbacks but hide default list styling */
#team-page .project-category .company-list{ list-style:none; padding-left:0; margin:6px 0; color:#ffffff }
#team-page .project-category .company-list li{ padding:4px 0 }

/* IA icons usage */
.ia-icon{ width:40px; height:40px; vertical-align:middle; margin-right:8px }
.card .avatar-small{ width:64px; height:64px; border-radius:8px; object-fit:cover; margin-bottom:12px }

/* small favicon-like icon used inside certain agent cards (e.g., Legal) */
.agent-favicon{ width:20px; height:20px; vertical-align:middle; margin-right:8px; border-radius:4px }

/* IA agent icon and card polish */
.card img.ia-icon {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 0.6rem;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(12,20,32,0.08);
}

.card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
}

/* Team-page specific: force darker card background and white text for better contrast */
#team-page .card {
  background: linear-gradient(180deg, rgba(12,14,20,0.96), rgba(8,10,14,0.95));
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.04);
  color: #ffffff;
}

#team-page .card h3 { color: #ffffff; }

#team-page .card p.lead {
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
  color: #eef2ff;
}

#team-page .metrics { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px }

#team-page .metric { background: rgba(255,255,255,0.02); padding:10px; border-radius:8px; text-align:center }
#team-page .metric .value { font-size:1.2rem; font-weight:700; color:var(--accent-gold) }

@media (max-width: 900px){
  #team-page .dashboard{ grid-template-columns: 1fr; }
  #team-page .chart-wrap{ height:220px }
}

/* Fin teams.css */

/* Project cards: improved layout and spacing to avoid chaotic stacking */

/* Stack categories vertically to avoid empty column gaps (scoped to #team-page) */
#team-page #projects-grid{
  display: block;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Each category is a full-width block: sector card on top, project cards grid below (scoped) */
#team-page .project-category{
  display: block;
  width: 100%;
  margin-bottom: 28px;
  padding: 6px 0;
}

#team-page .project-category > .card.sector-card{ order: 0; }

#team-page .project-cards{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
  /* -webkit-overflow-scrolling: touch; removed to avoid compat lint warning; keep native scroll behavior */
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
}

#team-page .project-card{
  background: linear-gradient(180deg, rgba(12,14,20,0.96), rgba(8,10,14,0.95));
  border: 1px solid rgba(255,255,255,0.04);
  color: #ffffff;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.55);
  min-height: 0;
  flex: 0 0 320px;
  scroll-snap-align: start;
  min-width: 260px;
}

/* Scrollbar styling (visible but subtle) */
#team-page .project-cards::-webkit-scrollbar{ height:10px }
#team-page .project-cards::-webkit-scrollbar-track{ background:transparent }
#team-page .project-cards::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius:10px }

/* On small screens, make cards slightly larger to be easily swipeable */
@media (max-width:640px){
  #team-page .project-card{ flex: 0 0 86%; min-width: 82%; }
}

#team-page .project-card h3{ color: #ffffff; font-size:1rem; margin:0 0 6px }
#team-page .project-card .meta{ color: #f8fafc; font-size:0.88rem; margin-bottom:6px }
#team-page .project-card .lead{ color: #eef2ff; font-size:0.9rem; margin-bottom:6px }
#team-page .project-card .project-behalf{ color: #e6f0ff; opacity:0.95; font-size:0.88rem }

#team-page .project-card .thumb{ display:none !important }

#team-page .project-card .tag{
  display:inline-block;
  margin-right:6px;
  margin-top:4px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.03);
  color: #dbeffd;
  font-size:0.77rem;
  border: 1px solid rgba(255,255,255,0.02);
}

/* Slider arrows and hover/bounce styles */
#team-page .project-category{ position: relative }
.slider-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(180deg, #001f5a 0%, #0033a0 100%);
  color:#eaf6ff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.45rem; z-index:1400;
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 8px 26px rgba(0,120,255,0.16), 0 0 22px rgba(0,120,255,0.22);
  border: 1px solid rgba(255,255,255,0.04);
}
.slider-arrow:hover{ transform: translateY(-50%) scale(1.08); box-shadow: 0 14px 40px rgba(0,140,255,0.28), 0 0 48px rgba(0,140,255,0.42) }
.slider-left{ left: -52px }
.slider-right{ right: -52px }

/* On very small screens bring arrows inside so they remain tappable */
@media (max-width:560px){
  .slider-left{ left:8px }
  .slider-right{ right:8px }
}

/* Hovered card animation */
.project-card.is-hovered{ transform: translateY(-6px); box-shadow: 0 26px 70px rgba(0,0,0,0.85); z-index:1300 }
/* Ensure hover triggers the same lift as programmatic .is-hovered */
#team-page .project-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 70px rgba(0,0,0,0.85); z-index:1300 }

/* Case cards and general cards (team) should also bounce on hover */
#team-page .case-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 70px rgba(0,0,0,0.85); }

#team-page .project-card{
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
}

/* Additional helpers: small avatar class (replaces inline styles) and hide modal by default */
#team-page .avatar-card{ width:80px; height:80px; object-fit:cover; border-radius:8px; margin-bottom:12px }
#coming-soon-modal{ display:none }

/* Fallback element shown when brand images fail to load (replaces inline onerror behavior) */
.brand-logo-fallback{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background: linear-gradient(180deg,#ffffff 0%, #e6e6e6 100%);
  color:#111;
  font-weight:700;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Ensure avatars inside general .card and hero/card variants have breathing room
   between the image and following headings/text. This addresses spacing issues
   noticed in the team cards. */
.card img.avatar,
.card img.avatar-card,
.card img.avatar-small{
  margin-bottom:14px;
  display:block;
}