/* oficinas.css — Página de Oficinas: recorrido 3D de Bogotá a París.
 *
 * Dos modos con el MISMO HTML:
 *  - Base (sin la clase .vivo): página normal con las dos tarjetas. Es lo que ve quien no
 *    tiene JavaScript o WebGL, quien pidió "reducir movimiento" y los buscadores.
 *  - .vivo (lo pone oficinas.js si el 3D arranca bien): la escena se fija en pantalla y el
 *    scroll mueve la cámara sobre el globo y el mapa.
 */
.fus { --esc-bg: #0a0a0a; --esc-brillo: rgba(196,164,105,.06); --esc-velo: rgba(10,10,10,.86);
       --esc-texto: #e8e4de; --esc-suave: rgba(232,228,222,.64); --esc-tenue: rgba(232,228,222,.4);
       --esc-acento: #c4a469; --tarjeta-bg: rgba(14,13,12,.74); --tarjeta-borde: rgba(196,164,105,.22);
       --tarjeta-linea: rgba(255,255,255,.08); --sombra: 0 30px 80px -30px rgba(0,0,0,.85);
       position: relative; background: var(--esc-bg); color: var(--esc-texto);
       padding: 128px clamp(20px, 6vw, 100px) 96px; }

/* ───────────────────────────── Textos y tarjetas (los dos modos) ───────────────────────────── */
.fus-eyebrow, .fus-label { font: 500 11px/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
                           color: var(--esc-acento); display: flex; gap: 12px; align-items: center; margin: 0 0 var(--space-5); }
.fus-eyebrow::before, .fus-label::before { content: ''; width: 30px; height: 1px; background: var(--esc-acento); flex: none; }
.fus-titulo { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 1.1rem + 3.8vw, 5.4rem);
              line-height: 1.02; letter-spacing: -.02em; margin: 0 0 var(--space-6); color: var(--esc-texto); }
.fus-titulo em, .fus-grande em { font-style: italic; color: var(--esc-acento); }
.fus-texto { font: 300 var(--text-base)/1.75 var(--font-body); color: var(--esc-suave); max-width: 44ch; margin: 0 0 var(--space-8); }
.fus-tarjeta { background: var(--tarjeta-bg); border: 1px solid var(--tarjeta-borde); box-shadow: var(--sombra); }
.fus-tarjeta img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fus-cuerpo { padding: var(--space-8); }
.fus-ciudad { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 2rem + 2.6vw, 4.4rem); line-height: .9;
              margin: 0 0 var(--space-4); color: var(--esc-texto); }
.fus-tag { font: 300 var(--text-sm)/1.7 var(--font-body); color: var(--esc-suave); margin: 0 0 var(--space-6); }
.fus-datos { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: 8px;
             font: 400 var(--text-sm)/1.5 var(--font-body); color: var(--esc-texto); }
.fus-datos li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--tarjeta-linea); padding-top: 8px; text-align: right; }
.fus-datos li > span { color: var(--esc-tenue); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; flex: none; text-align: left; }
.fus-datos a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--tarjeta-borde); }
.fus-datos a:hover { color: var(--esc-acento); }
.fus-datos time { font-variant-numeric: tabular-nums; color: var(--esc-acento); }
.fus-cta { font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--esc-acento);
           text-decoration: none; border-bottom: 1px solid var(--esc-acento); padding-bottom: 4px; transition: letter-spacing .3s; }
.fus-cta:hover { letter-spacing: .16em; }
.fus-grande { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.2rem);
              line-height: 1.05; margin: 0 0 var(--space-4); color: var(--esc-texto); }
.fus-centro, .fus-final { text-align: center; }
.fus-centro .fus-texto, .fus-final .fus-texto { margin: 0 auto var(--space-5); }
.fus-final .fus-grande { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); }
.fus-final .fus-cta { display: inline-block; }
.fus a:focus-visible { outline: 1px solid var(--esc-acento); outline-offset: 4px; }

/* ───────────────────────────── Modo base: página normal ───────────────────────────── */
.fus-escena { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; max-width: 1180px; margin: 0 auto;
              grid-template-areas: "intro intro" "bog par" "atl atl" "fin fin"; }
.fus-intro { grid-area: intro; } .fus-izq { grid-area: bog; } .fus-der { grid-area: par; }
.fus-centro { grid-area: atl; margin-top: 24px; } .fus-final { grid-area: fin; }
.fus-canvas, .fus-pin, .fus-marca, .fus-riel, .fus-bajar, .fus-solo-vivo { display: none; }
@media (max-width: 900px) {
  .fus-escena { grid-template-columns: 1fr; grid-template-areas: "intro" "bog" "par" "atl" "fin"; }
}

/* ───────────────────────────── Modo .vivo: el recorrido 3D ───────────────────────────── */
.fus.vivo { height: 650vh; padding: 0; }
.fus.vivo .fus-escena { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; max-width: none;
                        background: radial-gradient(ellipse 70% 60% at 55% 55%, var(--esc-brillo), transparent 70%), var(--esc-bg); }
.fus.vivo .fus-escena::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 2; pointer-events: none;
                                background: linear-gradient(var(--esc-bg), transparent); }
.fus.vivo .fus-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.fus.vivo .fus-pin, .fus.vivo .fus-marca, .fus.vivo .fus-riel { display: block; }
.fus.vivo .fus-bajar { display: inline-flex; }
.fus.vivo .fus-solo-vivo { display: block; }

.fus.vivo .fus-paso { position: absolute; z-index: 4; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.fus.vivo .fus-intro { left: clamp(24px, 7vw, 120px); top: 50%; translate: 0 -50%; max-width: 540px; opacity: 1; visibility: visible; }
.fus.vivo .fus-tarjeta { top: 50%; translate: 0 -50%; width: min(400px, 36vw);
                         -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fus.vivo .fus-izq { left: clamp(24px, 6vw, 100px); }
.fus.vivo .fus-der { right: clamp(24px, 6vw, 100px); }
.fus.vivo .fus-centro, .fus.vivo .fus-final { left: 50%; bottom: 7vh; translate: -50% 0; width: min(720px, 92vw); margin: 0;
                                              padding: 40px 48px 32px; background: radial-gradient(ellipse closest-side, var(--esc-velo) 55%, transparent); }
.fus.vivo .fus-final { bottom: 4vh; }

.fus-bajar { font: 500 10px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--esc-suave);
             align-items: center; gap: 12px; }
.fus-bajar::after { content: ''; width: 1px; height: 38px; background: linear-gradient(var(--esc-acento), transparent);
                    animation: fus-gota 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes fus-gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Marcador pequeño sobre el globo */
.fus-pin { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; transition: opacity .35s ease; will-change: transform; }
.fus-pin.oculto { opacity: 0; }
.fus-pin-punto { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
                 background: var(--color-accent-light); box-shadow: 0 0 14px 3px rgba(212,184,122,.75); }
.fus-pin-punto::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(212,184,122,.75);
                        animation: fus-onda 2.6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes fus-onda { from { transform: scale(.25); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.fus-pin-texto { position: absolute; left: 16px; top: -34px; white-space: nowrap; font: 500 10px/1 var(--font-body);
                 letter-spacing: .22em; text-transform: uppercase; color: var(--esc-texto); padding: 7px 11px;
                 border: 1px solid rgba(196,164,105,.35); background: rgba(10,10,10,.55);
                 -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Etiquetas sobre las columnas de luz */
.fus-marca { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.fus-marca-caja { position: absolute; left: 0; bottom: 14px; translate: -50% 0; text-align: center; white-space: nowrap;
                  padding: 11px 17px 10px; border: 1px solid var(--tarjeta-borde); background: var(--tarjeta-bg);
                  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fus-marca-caja::after { content: ''; position: absolute; left: 50%; bottom: -15px; width: 1px; height: 14px;
                         background: linear-gradient(var(--esc-acento), transparent); }
.fus-marca.abajo .fus-marca-caja { bottom: auto; top: 22px; }
.fus-marca.abajo .fus-marca-caja::after { bottom: auto; top: -15px; background: linear-gradient(transparent, var(--esc-acento)); }
.fus-m-nombre { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
                line-height: 1; color: var(--esc-texto); margin-bottom: 5px; }
.fus-m-meta { display: block; font: 400 10px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--esc-suave); }
.fus-m-meta time { color: var(--esc-acento); font-variant-numeric: tabular-nums; }

/* Riel de avance */
.fus-riel { position: absolute; right: 26px; top: 50%; translate: 0 -50%; height: 40vh; width: 1px; background: var(--tarjeta-borde); z-index: 4; }
.fus-riel i { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%; translate: -50% -50%;
              background: var(--esc-bg); border: 1px solid var(--esc-tenue); }
.fus-riel b { position: absolute; right: 14px; translate: 0 -50%; font: 500 9px/1 var(--font-body); letter-spacing: .2em;
              text-transform: uppercase; color: var(--esc-tenue); white-space: nowrap; }
.fus-riel-punto { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%; translate: -50% -50%;
                  background: var(--esc-acento); box-shadow: 0 0 0 4px var(--tarjeta-borde); }

@media (max-width: 900px) {
  .fus.vivo .fus-intro { top: auto; bottom: 18vh; translate: none; right: 24px; }
  .fus.vivo .fus-tarjeta { top: auto; bottom: 24px; translate: none; left: 12px; right: 12px; width: auto; }
  .fus.vivo .fus-tarjeta img { display: none; }
  .fus.vivo .fus-cuerpo { padding: var(--space-6); }
  .fus.vivo .fus-centro, .fus.vivo .fus-final { bottom: 28px; padding: 28px 20px 20px; }
  .fus.vivo .fus-riel { display: none; }
  .fus-marca-caja { padding: 8px 11px 7px; }
  .fus-m-nombre { font-size: 1.5rem; }
  .fus-m-meta { font-size: 9px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .fus-bajar::after, .fus-pin-punto::after { animation: none; }
}