/* ═══════════════════════════════════════════════════════════════
 *  mmb-empresas.css — Componentes premium de la línea "MMB Empresas".
 *  Reutiliza los tokens de mmb-tokens.css. Carácter corporativo, tecnológico
 *  y premium, manteniendo la identidad de Academia MMB.
 *  Usado por: /empresas y subpáginas (servicio, sector, proyectos, demos).
 * ═══════════════════════════════════════════════════════════════ */
.emp-body{ font-family:'Inter',system-ui,sans-serif; background:var(--mmb-bg); color:var(--mmb-ink); position:relative; overflow-x:hidden; }
/* Fondo ambiental: brillos + rejilla de puntos sutil (sin imágenes, muy ligero). */
.emp-body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 460px at 12% -6%, rgba(0,120,212,.16), transparent 60%),
    radial-gradient(620px 420px at 92% 6%, rgba(80,230,255,.09), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(244,247,252,.045) 1px, transparent 0);
  background-size:auto, auto, 24px 24px;
}
.emp-display{ font-family:'Space Grotesk',sans-serif; }
.emp-wrap{ max-width:1120px; margin:0 auto; padding-left:20px; padding-right:20px; }
.emp-section{ padding-top:5rem; padding-bottom:5rem; scroll-margin-top:80px; position:relative; }
.emp-eyebrow{ font-family:'Space Grotesk'; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--mmb-office-cyan); font-weight:600; display:inline-flex; align-items:center; gap:.55rem; }
.emp-eyebrow::before{ content:''; width:22px; height:1px; background:linear-gradient(90deg,var(--mmb-office-cyan),transparent); }
.emp-h2{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.08; letter-spacing:-.01em; }
.emp-h2--grad{ background:linear-gradient(120deg,var(--mmb-ink) 30%,var(--mmb-office-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.emp-lead{ color:var(--mmb-ink-dim); font-size:1.08rem; line-height:1.7; }

.emp-grid{ display:grid; gap:1.35rem; }
.emp-grid-3{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.emp-grid-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

/* ── Tarjetas premium (borde degradado al hover + sheen superior) ── */
.emp-card{ position:relative; isolation:isolate; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent), var(--mmb-bg-elevated); border:1px solid var(--mmb-line); border-radius:var(--mmb-radius-md); padding:1.7rem; transition:transform .28s var(--mmb-ease-soft), box-shadow .28s, border-color .28s; height:100%; display:flex; flex-direction:column; overflow:hidden; }
.emp-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,rgba(80,230,255,.5),rgba(124,58,237,.25) 45%,rgba(244,247,252,.05)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; z-index:1; pointer-events:none; }
.emp-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(80,230,255,.4),transparent); opacity:.5; }
.emp-card:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 30px 70px -30px rgba(0,120,212,.55), var(--mmb-shadow-glow-cyan); }
.emp-card:hover::before{ opacity:1; }
.emp-card--link{ text-decoration:none; color:inherit; }
.emp-card--feature{ border-color:rgba(80,230,255,.4); box-shadow:var(--mmb-shadow-glow-cyan); }
.emp-card--feature::before{ opacity:.6; }
.emp-card > *{ position:relative; z-index:2; }

.emp-ic{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:1.45rem; background:linear-gradient(135deg,rgba(0,120,212,.28),rgba(80,230,255,.16)); color:var(--mmb-office-cyan); margin-bottom:1.05rem; box-shadow:inset 0 0 0 1px rgba(80,230,255,.18); transition:transform .28s var(--mmb-ease-bounce); }
.emp-card:hover .emp-ic{ transform:scale(1.08) rotate(-3deg); }
.emp-emoji{ font-size:2rem; line-height:1; margin-bottom:.7rem; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); transition:transform .28s var(--mmb-ease-bounce); }
.emp-card:hover .emp-emoji{ transform:scale(1.12) translateY(-2px); }
.emp-card h3{ font-family:'Space Grotesk'; font-weight:600; font-size:1.18rem; margin-bottom:.45rem; letter-spacing:-.01em; }
.emp-card p{ color:var(--mmb-ink-dim); font-size:.96rem; margin:0; }
.emp-card .emp-more{ margin-top:auto; padding-top:1.1rem; color:var(--mmb-office-cyan); font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.45rem; transition:gap .25s; }
.emp-card:hover .emp-more{ gap:.8rem; }

/* ── Botones con destello ── */
.emp-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.55rem; font-weight:700; padding:.9rem 1.5rem; border-radius:12px; transition:transform .14s, box-shadow .25s, background .25s; text-decoration:none; cursor:pointer; border:none; }
.emp-btn::after{ content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .6s var(--mmb-ease-soft); }
.emp-btn:hover::after{ left:140%; }
.emp-btn-primary{ background:linear-gradient(135deg,var(--mmb-office-blue),var(--mmb-office-cyan)); color:#04121f; }
.emp-btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--mmb-shadow-glow-blue); }
.emp-btn-glass{ background:var(--mmb-glass-bg); border:1px solid var(--mmb-glass-border); color:var(--mmb-ink); backdrop-filter:blur(var(--mmb-glass-blur)); }
.emp-btn-glass:hover{ border-color:rgba(80,230,255,.5); transform:translateY(-2px); }

.emp-chip{ display:inline-block; font-size:.78rem; font-weight:600; padding:.32rem .75rem; border-radius:999px; background:rgba(80,230,255,.1); color:var(--mmb-office-cyan); border:1px solid rgba(80,230,255,.28); }
.emp-chip--muted{ background:rgba(244,247,252,.05); color:var(--mmb-ink-dim); border-color:var(--mmb-line); }
.emp-chip--dev{ background:rgba(240,180,41,.14); color:var(--mmb-gold); border-color:rgba(240,180,41,.35); }
.emp-chip--ok{ background:rgba(22,163,74,.16); color:#4ADE80; border-color:rgba(74,222,128,.4); }
.emp-pill{ display:inline-flex; gap:.45rem; align-items:center; color:var(--mmb-ink-dim); font-size:.9rem; }
.emp-list li{ color:var(--mmb-ink); font-size:.96rem; margin-bottom:.6rem; display:flex; gap:.6rem; align-items:flex-start; }
.emp-list li i{ color:var(--mmb-office-cyan); margin-top:.28rem; }

.emp-input{ width:100%; background:rgba(7,11,20,.6); border:1px solid var(--mmb-line); color:var(--mmb-ink); border-radius:11px; padding:.75rem .95rem; font:inherit; transition:border-color .2s, box-shadow .2s; }
.emp-input:focus{ outline:none; border-color:var(--mmb-office-cyan); box-shadow:0 0 0 3px rgba(80,230,255,.15); }
.emp-input::placeholder{ color:var(--mmb-ink-faint); }

.emp-header{ background:rgba(7,11,20,0.72); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--mmb-line); position:sticky; top:0; z-index:40; }
.emp-navlink{ color:var(--mmb-ink-dim); transition:color .15s; text-decoration:none; position:relative; }
.emp-navlink::after{ content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--mmb-office-cyan); transition:right .25s; border-radius:2px; }
.emp-navlink:hover{ color:var(--mmb-ink); }
.emp-navlink:hover::after{ right:0; }
.emp-breadcrumb{ color:var(--mmb-ink-faint); font-size:.85rem; }
.emp-breadcrumb a{ color:var(--mmb-ink-dim); text-decoration:none; }
.emp-breadcrumb a:hover{ color:var(--mmb-office-cyan); }

.emp-step{ position:relative; background:var(--mmb-bg-elevated); border:1px solid var(--mmb-line); border-radius:16px; padding:1.5rem; transition:transform .25s, border-color .25s; }
.emp-step:hover{ transform:translateY(-3px); border-color:rgba(80,230,255,.35); }
.emp-step .n{ font-family:'Space Grotesk'; font-weight:700; color:var(--mmb-office-cyan); font-size:.95rem; letter-spacing:.05em; }
.emp-flow-item{ display:inline-flex; align-items:center; gap:.7rem; background:var(--mmb-bg-elevated); border:1px solid var(--mmb-line); border-radius:12px; padding:.65rem 1.1rem; color:var(--mmb-ink); font-weight:600; transition:border-color .2s, transform .2s; }
.emp-flow-item:hover{ border-color:rgba(80,230,255,.4); transform:translateY(-2px); }

.emp-wa{ position:fixed; right:18px; bottom:18px; z-index:50; background:#25D366; color:#04121f; border-radius:999px; padding:.85rem 1.15rem; font-weight:700; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 14px 34px -10px rgba(37,211,102,.65); text-decoration:none; transition:transform .18s, box-shadow .25s; }
.emp-wa:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px -10px rgba(37,211,102,.8); }

:focus-visible{ outline:2px solid var(--mmb-office-cyan); outline-offset:2px; border-radius:6px; }

/* ── Aparición al hacer scroll (progressive enhancement) ──
   Solo se activa si <html> tiene .emp-js (IntersectionObserver + no reduced-motion).
   Sin JS o con movimiento reducido → todo visible desde el principio. */
.emp-js :is(.emp-card,.emp-h2,.emp-eyebrow,.emp-lead,.emp-step,[data-reveal]){ opacity:0; transform:translateY(20px); transition:opacity .55s var(--mmb-ease-premium), transform .55s var(--mmb-ease-premium); will-change:opacity,transform; }
.emp-js :is(.emp-card,.emp-h2,.emp-eyebrow,.emp-lead,.emp-step,[data-reveal]).in{ opacity:1; transform:none; }

/* ── Feedback de pulsación (tactil, imprescindible en móvil) ── */
.emp-btn{ transition:transform .14s var(--mmb-ease-premium), box-shadow .25s, background .25s; }
.emp-btn:active{ transform:scale(.97); }
.emp-card--link:active{ transform:scale(.985); }
.emp-chip, .emp-flow-item{ -webkit-tap-highlight-color:transparent; }

/* ── Miniatura de proyecto real (escudo del club sobre tile de marca) ── */
.emp-shot{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.emp-shot img{ transition:transform .5s var(--mmb-ease-premium), filter .5s; will-change:transform; }
.emp-shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%); transform:translateX(-120%); transition:transform .7s var(--mmb-ease-premium); pointer-events:none; }
.emp-shot:hover img{ transform:scale(1.06); filter:drop-shadow(0 14px 32px rgba(0,0,0,.6)); }
.emp-shot:hover::after{ transform:translateX(120%); }
.emp-shot:active{ transform:scale(.99); }

/* ── En pantallas táctiles no disparamos los hover de movimiento ── */
@media (hover: none){
  .emp-card:hover{ transform:none; box-shadow:none; border-color:var(--mmb-line); }
  .emp-card:hover::before{ opacity:0; }
  .emp-card:hover .emp-ic, .emp-card:hover .emp-emoji{ transform:none; }
  .emp-btn-primary:hover, .emp-btn-glass:hover, .emp-flow-item:hover, .emp-step:hover, .emp-wa:hover{ transform:none; box-shadow:none; }
  .emp-btn::after{ display:none; }
  .emp-shot:hover img{ transform:none; filter:none; }
  .emp-shot::after{ display:none; }
}

/* ── Transiciones entre páginas (app-like cross-fade en navegadores compatibles) ── */
@view-transition{ navigation: auto; }

@media (prefers-reduced-motion: reduce){ .emp-js :is(.emp-card,.emp-h2,.emp-eyebrow,.emp-lead,.emp-step,[data-reveal]){ opacity:1 !important; transform:none !important; } .emp-card, .emp-btn, .emp-ic, .emp-emoji{ transition:none !important; } .emp-shot img, .emp-shot::after{ transition:none !important; } }