/* =========================================================
   Selector de sede — control segmentado estilo iOS
   Mismo archivo en Sbelt Med (web-v2) y Crew Spa (crew-spa-web).
   Orden fijo: Sbelt Med a la izquierda, Crew Spa a la derecha.
   La cápsula blanca marca dónde estás; al tocar la otra sede
   la cápsula se desliza (resorte .snappy de Apple) y cambia de sitio.
   No usa logos: así no se rompe cuando cambie el logo de Crew.
   ========================================================= */

.selector-sede {
  --s-sbelt: #17786D;      /* verde Sbelt (texto ≥4.5:1) */
  --s-sbelt-punto: #57C4B8;
  --s-crew: #003A86;       /* azul Crew */
  --s-crew-punto: #E30D31;
  --s-pista: rgba(118, 118, 128, .12);   /* pista del segmentado iOS */
  --s-alto: 40px;

  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr;
  height: var(--s-alto); padding: 3px; border-radius: 999px;
  background: var(--s-pista);
  font-family: "Montserrat", system-ui, sans-serif;
  flex: none;
}

/* La cápsula que se desliza */
.selector-sede__cap {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: 999px; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), inset 0 0 0 .5px rgba(0,0,0,.04);
  transition: transform 560ms linear(0, 0.059 4.2%, 0.189 8.3%, 0.342 12.5%, 0.492 16.7%, 0.624 20.8%, 0.732 25.0%, 0.817 29.2%, 0.881 33.3%, 0.927 37.5%, 0.959 41.7%, 0.980 45.8%, 0.993 50.0%, 1.000 54.2%, 1.004 58.3%, 1.006 62.5%, 1.006 66.7%, 1.006 70.8%, 1.005 75.0%, 1.004 79.2%, 1.003 83.3%, 1.002 87.5%, 1.001 91.7%, 1.001 95.8%, 1);
}
.selector-sede[data-actual="crew"] .selector-sede__cap { transform: translateX(100%); }
.selector-sede.yendo-sbelt .selector-sede__cap { transform: translateX(0); }
.selector-sede.yendo-crew .selector-sede__cap { transform: translateX(100%); }

.selector-sede__op {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 14px; border-radius: 999px; min-width: 0;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: #6E6E73; transition: color 250ms ease;
}
.selector-sede__op small { font-weight: 500; font-size: 11px; color: #86868B; transition: color 250ms ease; }
.selector-sede__textos { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.selector-sede__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; opacity: .5; transition: opacity 250ms, transform 400ms; }
.selector-sede__op--sbelt .selector-sede__punto { color: var(--s-sbelt-punto); }
.selector-sede__op--crew  .selector-sede__punto { color: var(--s-crew-punto); }

/* Estado: dónde estás */
.selector-sede[data-actual="sbelt"]:not(.yendo-crew) .selector-sede__op--sbelt,
.selector-sede.yendo-sbelt .selector-sede__op--sbelt { color: var(--s-sbelt); }
.selector-sede[data-actual="crew"]:not(.yendo-sbelt) .selector-sede__op--crew,
.selector-sede.yendo-crew .selector-sede__op--crew { color: var(--s-crew); }
.selector-sede[data-actual="sbelt"]:not(.yendo-crew) .selector-sede__op--sbelt .selector-sede__punto,
.selector-sede[data-actual="crew"]:not(.yendo-sbelt) .selector-sede__op--crew .selector-sede__punto,
.selector-sede.yendo-sbelt .selector-sede__op--sbelt .selector-sede__punto,
.selector-sede.yendo-crew .selector-sede__op--crew .selector-sede__punto { opacity: 1; transform: scale(1.15); }

@media (hover: hover) {
  .selector-sede__op:not([aria-current]):hover { color: #1D1D1F; }
  .selector-sede__op:not([aria-current]):hover .selector-sede__punto { opacity: 1; }
}
.selector-sede__op:focus-visible { outline: 3px solid var(--s-sbelt-punto); outline-offset: 1px; }

/* Versión compacta (celular): solo el lugar */
.selector-sede__corto { display: none; }
@media (max-width: 1100px) {
  .selector-sede__op small { display: none; }
}
@media (max-width: 734px) {
  .selector-sede { --s-alto: 36px; }
  .selector-sede__op { padding: 0 11px; gap: 6px; font-size: 12px; }
  .selector-sede__largo { display: none; }
  .selector-sede__corto { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .selector-sede__cap { transition: none; }
}