/* ===== BLOQUE 1 (index.html L54-69)   — nav ===== */
/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 2.5rem;
  background:rgba(6,6,10,0.7);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border);
}
.nav-logo{font-size:1.1rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--white);text-decoration:none;}
.nav-logo span{color:var(--red);}
nav ul{list-style:none;display:flex;gap:2rem;}
nav ul a{color:var(--gray-5);text-decoration:none;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s;}
nav ul a:hover{color:var(--white);}

/* ===== BLOQUE 1 (index.html L104-120) — stats glass bar ===== */
/* Stats glass bar */
.hero-stats{
  display:flex;gap:0;max-width:700px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.stat-item{flex:1;padding:1.4rem 1.2rem;border-right:1px solid var(--glass-border);}
.stat-item:last-child{border-right:none;}
.stat-num{font-size:1.9rem;font-weight:900;letter-spacing:-0.04em;color:var(--white);line-height:1;}
.stat-num span{color:var(--red);}
.stat-label{font-size:0.58rem;color:var(--gray-5);letter-spacing:0.08em;text-transform:uppercase;margin-top:0.25rem;}

/* ===== BLOQUE 1 (index.html L152-185) — tabs / client panel ===== */
/* ── TABS ── */
.tabs-nav{
  display:flex;gap:0;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:2rem;
  max-width:780px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.tab-btn{
  flex:1;padding:0.75rem 0.5rem;
  background:transparent;border:none;border-right:1px solid var(--glass-border);
  color:var(--gray-5);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;transition:all 0.2s;font-family:inherit;font-weight:500;
}
.tab-btn:last-child{border-right:none;}
.tab-btn.active{background:rgba(255,255,255,0.1);color:var(--white);font-weight:700;}
.tab-btn:hover:not(.active){background:var(--glass-hover);color:rgba(255,255,255,0.7);}

.client-panel{display:none;}
.client-panel.active{
  display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem;
  background:var(--glass-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:2.5rem;
  box-shadow:0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ===== BLOQUE 1 (index.html L186-214) — client info ===== */
/* Client info */
.client-tag{
  display:inline-block;font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--red);border:1px solid rgba(224,53,53,0.3);
  background:rgba(224,53,53,0.08);
  padding:0.25rem 0.7rem;border-radius:20px;margin-bottom:1rem;
}
.client-name{font-size:1.9rem;font-weight:900;letter-spacing:-0.03em;margin-bottom:0.6rem;line-height:1.05;}
.client-desc{font-size:0.85rem;color:var(--gray-5);line-height:1.75;margin-bottom:1.5rem;}
.client-metrics-row{
  display:flex;gap:0;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);overflow:hidden;
  margin-bottom:1.2rem;
  background:rgba(0,0,0,0.3);
}
.cm{flex:1;padding:1rem;border-right:1px solid var(--glass-border);}
.cm:last-child{border-right:none;}
.cm-val{font-size:1.4rem;font-weight:900;letter-spacing:-0.03em;}
.cm-val span{color:var(--red);}
.cm-key{font-size:0.58rem;color:var(--gray-4);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.15rem;}
.engagement-pill{
  display:inline-flex;align-items:center;gap:0.4rem;
  background:rgba(224,53,53,0.1);
  border:1px solid rgba(224,53,53,0.25);
  color:var(--red);font-size:0.65rem;font-weight:700;
  padding:0.3rem 0.8rem;border-radius:20px;letter-spacing:0.04em;
}

/* ===== BLOQUE 1 (index.html L215-233) — videos ===== */
/* Videos */
.videos-label{font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gray-4);margin-bottom:0.8rem;}
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;}
.video-wrap{
  aspect-ratio:9/16;
  border-radius:var(--radius-sm);overflow:hidden;
  background:var(--gray-2);position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  border:1px solid var(--glass-border);
}
.video-wrap iframe{width:100%;height:100%;border:none;}
.video-info{
  position:absolute;bottom:0;left:0;right:0;padding:0.6rem;
  background:linear-gradient(transparent,rgba(0,0,0,0.9));
  pointer-events:none;
}
.video-views{font-size:0.62rem;font-weight:700;color:var(--white);}
.video-title{font-size:0.58rem;color:rgba(255,255,255,0.5);margin-top:0.1rem;}

/* ===== BLOQUE 1 (index.html L234-250) — cine ===== */
/* ── CINE ── */
.cine-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:1.2rem;}
.cine-card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  box-shadow:0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform 0.25s, box-shadow 0.25s;
}
.cine-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.cine-card video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.cine-info{padding:1.2rem;}
.cine-tag{font-size:0.58rem;color:var(--red);text-transform:uppercase;letter-spacing:0.12em;font-weight:600;}
.cine-name{font-size:1rem;font-weight:800;margin-top:0.25rem;letter-spacing:-0.01em;}
.cine-desc{font-size:0.78rem;color:var(--gray-5);margin-top:0.3rem;line-height:1.6;}

/* ===== BLOQUE 1 (index.html L251-287) — services ===== */
/* ── SERVICES ── */
.services-grid{
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
}
.service-card{
  background:var(--glass-bg);
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:2.5rem 2rem;
  position:relative;
  box-shadow:0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform 0.25s, box-shadow 0.25s;
}
.service-card:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,0.4);}
.service-featured{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.15)!important;
  box-shadow:0 12px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.04)!important;
}
.service-badge{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--white);color:var(--black);
  font-size:0.58rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.25rem 0.9rem;border-radius:0 0 6px 6px;
}
.service-num{font-size:3rem;font-weight:900;color:rgba(255,255,255,0.06);letter-spacing:-0.05em;line-height:1;margin-bottom:1rem;}
.service-name{font-size:1.1rem;font-weight:800;margin-bottom:0.5rem;}
.service-desc{font-size:0.82rem;color:var(--gray-5);line-height:1.65;margin-bottom:1.3rem;}
.service-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem;}
.service-list li{
  font-size:0.78rem;color:var(--gray-4);padding:0.4rem 0.6rem 0.4rem 0.8rem;
  border-left:2px solid var(--gray-3);
  background:rgba(255,255,255,0.02);border-radius:0 4px 4px 0;
}
.service-price{font-size:1.5rem;font-weight:900;letter-spacing:-0.03em;}
.service-price small{font-size:0.7rem;font-weight:400;color:var(--gray-5);letter-spacing:0;}

/* ===== BLOQUE 1 (index.html L288-315) — method ===== */
/* ── METHOD ── */
.method-grid{
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
}
.method-step{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:2.5rem 2rem;
  position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.method-step::before{
  content:attr(data-n);
  position:absolute;top:-1rem;right:1rem;
  font-size:7rem;font-weight:900;
  color:rgba(255,255,255,0.03);
  letter-spacing:-0.05em;line-height:1;
  pointer-events:none;
}
.step-phase{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);margin-bottom:0.5rem;font-weight:600;}
.step-name{font-size:1.25rem;font-weight:900;margin-bottom:0.3rem;}
.step-days{font-size:0.7rem;color:var(--gray-5);font-weight:600;margin-bottom:1rem;
  display:inline-block;background:rgba(224,53,53,0.1);border:1px solid rgba(224,53,53,0.2);
  color:var(--red);padding:0.15rem 0.6rem;border-radius:20px;
}
.step-desc{font-size:0.82rem;color:var(--gray-5);line-height:1.7;}

/* ===== BLOQUE 1 (index.html L316-327) — footer ===== */
/* ── FOOTER ── */
footer{
  padding:1.8rem 2.5rem;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(6,6,10,0.9);
  border-top:1px solid var(--glass-border);
  position:relative;z-index:1;
}
.footer-logo{font-size:1rem;font-weight:800;letter-spacing:0.12em;}
.footer-logo span{color:var(--red);}
footer p{font-size:0.72rem;color:var(--gray-4);}

/* ===== BLOQUE 3 (index.html L533-546) — client selector ===== */
    .client-selector { display:grid; grid-template-columns:repeat(6,1fr); gap:0.8rem; margin-bottom:2rem; }
    .client-sel-card {
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,255,255,0.07);
      border-radius:10px; padding:1rem 0.8rem;
      cursor:pointer; transition:all 0.22s;
      text-align:center; user-select:none;
    }
    .client-sel-card:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.15); transform:translateY(-2px); }
    .client-sel-card.active { background:rgba(224,53,53,0.1); border-color:rgba(224,53,53,0.4); box-shadow:0 0 0 1px rgba(224,53,53,0.2), 0 8px 24px rgba(224,53,53,0.12); }
    .csc-icon { font-size:1.6rem; margin-bottom:0.4rem; }
    .csc-name { font-size:0.72rem; font-weight:700; color:#F0F0EE; letter-spacing:0.02em; line-height:1.3; }
    .csc-rubro { font-size:0.6rem; color:#555566; margin-top:0.2rem; letter-spacing:0.04em; text-transform:uppercase; }
    .client-sel-card.active .csc-name { color:#E03535; }

/* ===== #tecnologia — indicador del carrusel mobile ===== */
/* Oculto por defecto: en desktop el bloque de 4 tarjetas sigue siendo el grid
   de 2 columnas y no hay nada que indicar. css/responsive.css lo muestra
   (display:flex) y lo estiliza dentro del media query de 768px. */
.tech-dots{display:none;}