/* Acto 2: holding fleet (Avelon-inspired, SSG tokens) */
.fleet{
  --fleet-in:1;
  --fleet-widgets:1;
  --fleet-i:0;
  position:relative;
  z-index:2;
  height:220vh;
  background:var(--mist,#eceae8);
  color:var(--charcoal,#1a1b1d);
}
.fleet__pin{
  position:sticky;top:0;height:100vh;height:100lvh;
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(14px, 2.4vh, 22px);
  padding:clamp(20px, 3.5vh, 36px) 0 clamp(16px, 2.5vh, 28px);
  overflow:hidden;
}
.fleet__statement{
  margin:0 auto;max-width:min(38ch, calc(100% - 40px));text-align:center;
  font:600 12px/1 "Geist Sans",Geist,system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange,#FF6600);
  filter:none;
  opacity:calc(.55 + var(--fleet-in, 1) * .45);
  transform:translateY(calc((1 - var(--fleet-in, 1)) * 8px));
}
.fleet__row{
  position:relative;
  flex:0 0 auto;
  display:flex;align-items:center;
  width:100%;
  min-height:min(38vh, 380px);
  --fleet-n:5;
  --fleet-pitch:min(40vw, 480px);
  overflow:visible;
}
.fleet__track{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(12px, 1.8vw, 24px);
  width:max-content;
  /* centra la placa activa en el viewport; el JS sincroniza --fleet-i */
  transform:translateX(calc(50vw - (var(--fleet-pitch) * .46) - (var(--fleet-i) * var(--fleet-pitch))));
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.fleet__plate{
  flex:0 0 auto;
  width:calc(var(--fleet-pitch) * .92);
  aspect-ratio:16/10;
  overflow:hidden;
  background:#111;
  opacity:.42;
  transform:scale(.88);
  transition:opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
  cursor:pointer;border:0;padding:0;
}
.fleet__plate.is-active{
  opacity:1;transform:scale(1);
  box-shadow:0 20px 50px rgba(0,0,0,.16);
}
.fleet__plate img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.fleet__widgets{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(12px, 2vw, 20px);
  align-items:stretch;
  max-width:min(1080px, calc(100% - 40px));width:100%;margin:0 auto;
  opacity:calc(.35 + var(--fleet-widgets, 1) * .65);
  transform:translateY(calc((1 - var(--fleet-widgets, 1)) * 16px));
}
.fleet__arrow{
  width:48px;min-height:48px;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(26,27,29,.18);background:transparent;color:inherit;
  font:600 18px/1 "Geist Sans",system-ui,sans-serif;cursor:pointer;
}
.fleet__arrow:hover{border-color:var(--orange,#FF6600);color:var(--orange,#FF6600)}
.fleet__main{
  display:grid;gap:8px;
  padding:16px 18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(26,27,29,.08);
}
.fleet__div{
  margin:0;font:600 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange,#FF6600);
}
.fleet__name{
  margin:0;font:600 clamp(22px, 2.6vw, 30px)/1.1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.025em;
}
.fleet__role{
  margin:0;font:500 15px/1.35 "Geist Sans",system-ui,sans-serif;color:rgba(26,27,29,.72);
}
.fleet__body{
  margin:4px 0 0;font:400 14px/1.45 "Geist Sans",system-ui,sans-serif;color:rgba(26,27,29,.78);
  max-width:52ch;
}
@media (max-width:767px){
  .fleet{height:200vh}
  .fleet__pin{padding:18px 0 14px;gap:12px}
  .fleet__statement{max-width:calc(100% - 32px)}
  .fleet__row{--fleet-pitch:78vw;min-height:min(34vh, 280px)}
  .fleet__widgets{
    max-width:calc(100% - 32px);
    grid-template-columns:1fr 1fr;
    grid-template-areas:"main main" "prev next";
  }
  .fleet__main{grid-area:main}
  .fleet__arrow[data-fleet-prev]{grid-area:prev}
  .fleet__arrow[data-fleet-next]{grid-area:next;justify-self:end}
  .fleet__arrow{width:100%;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .fleet__statement,.fleet__track,.fleet__plate,.fleet__widgets{transition:none!important;filter:none!important;opacity:1!important;transform:none!important}
  .fleet{height:auto}
  .fleet__pin{position:relative;height:auto}
}