/* ==========================================================================
   Portafolio de logos (/logos y /logos/<marca>)
   Galería de tiras que se abren como una ola bajo el cursor; al tocar una,
   la tira crece hasta la vista de la marca y su monograma se arma en grande.
   ========================================================================== */

.page-logos { background: var(--blue); }

.lx {
  --slice-h: min(46vh, 420px);
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 88px 88px,
    radial-gradient(900px 600px at 50% 50%, rgba(255, 255, 255, .12), transparent 70%),
    var(--blue);
}

/* Regla superior con el número de la marca bajo el cursor */
.lx__ruler {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}
.lx__ticks {
  width: clamp(60px, 10vw, 150px);
  height: 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1.5px, transparent 1.5px 9px);
}
.lx__count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.lx__count > b { color: var(--lime); min-width: 2ch; text-align: right; }

/* Caja entre los números: vacía en reposo, muestra la pieza bajo el cursor */
.lx__caption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  min-width: 34px;
  padding: 0 4px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--lime);
  white-space: nowrap;
  overflow: hidden;
  transition: padding 300ms var(--ease-out);
}
.lx__caption.is-on { padding: 0 12px; }
.lx__caption b {
  font-size: .8125rem;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.lx__caption span { color: var(--lime); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.lx__caption:not(.is-on) b,
.lx__caption:not(.is-on) span { display: none; }

/* Tira de piezas */
.lx__strip-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--slice-h) * 1.3);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.lx__strip {
  display: flex;
  align-items: center;
  gap: var(--gap, 10px);
  will-change: transform;
}
.lx__slice {
  position: relative;
  flex: none;
  width: var(--w, 34px);
  height: calc(var(--slice-h) * var(--h, 1));
  border-radius: 10px;
  overflow: hidden;
  filter: grayscale(var(--g, .72)) brightness(var(--l, .9));
  box-shadow: 0 18px 40px rgba(3, 20, 90, calc(var(--f, 0) * .45));
  -webkit-tap-highlight-color: transparent;
}
.lx__slice:focus-visible { outline-offset: 4px; border-radius: 10px; }

/* Entrada: cada pieza sube dentro de su tira, en cascada */
.lx__slice > .lxp {
  transform: translateY(105%);
  transition: transform 1100ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 28ms);
}
.lx.is-in .lx__slice > .lxp { transform: none; }

/* Dentro de una tira se ve un fragmento del logo, como un recorte */
.lx__slice .lxp img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  max-height: none;
  height: 24%;
  transform: translate(calc(-50% + var(--ox, 0%)), -50%);
}
.lx__slice .lxp--tall img { height: 30%; }
.lx__slice .lxp--cover img {
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(50% + var(--ox, 0%)) 50%;
  transform: none;
}
.lx__slice .lxp--palette { flex-direction: column; }

.lx__intro {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(24px, 5vh, 48px);
}
.lx__eyebrow {
  color: var(--lime);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lx__title {
  font-size: clamp(2.25rem, 4.6vw, 4.75rem);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  line-height: .9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.lx__hint {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 5vh, 48px);
  font-size: .875rem;
  font-weight: 600;
  opacity: .85;
}
.lx__hint-touch { display: none; }

/* ==========================================================================
   Pieza de marca (se usa en la tira, en la vista, en miniaturas y tarjetas)
   ========================================================================== */
.lxp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg, #fff);
}
.lxp img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--s, 60) * 1%);
  height: auto;
  max-height: 78%;
  object-fit: contain;
}
.lxp--tall img { width: auto; height: calc(var(--s, 34) * 1.6%); max-height: 86%; }
.lxp--cover img { top: 0; left: 0; transform: none; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.lxp img.is-white { filter: brightness(0) invert(1); }
.lxp--palette { display: flex; align-items: stretch; }
.lxp--palette > span { flex: 1; background: var(--c); }

/* Paleta en grande: cada color con su nombre y código */
.lxp--swatches { display: flex; align-items: stretch; }
.lxp--swatches > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: clamp(14px, 2vw, 26px);
  background: var(--c);
  color: var(--paper);
}
.lxp--swatches > span.is-light { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(4, 18, 63, .08); }
.lxp--swatches b {
  font-size: clamp(.9375rem, 1.3vw, 1.25rem);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
}
.lxp--swatches code { font: 600 .8125rem/1.2 "Archivo", sans-serif; letter-spacing: .04em; opacity: .8; }

/* ==========================================================================
   Vista de una marca
   ========================================================================== */
html.lx-lock,
html.lx-lock body { overflow: hidden; }

.lxd {
  /* arriba quedan el nav y "Todas las marcas"; abajo, la ficha de la marca */
  --top: 150px;
  --bottom: 150px;
  --viewer-w: min(48vw, 900px, calc((100svh - var(--top) - var(--bottom) - 44px) * 1.6));
  position: fixed;
  inset: 0;
  z-index: 45;
  color: var(--paper);
}
.lxd__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 88px 88px,
    var(--ink);
  opacity: 0;
  transition: opacity 520ms ease;
}
.lxd.is-open .lxd__bg { opacity: 1; }

.lxd__mono {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: 104px;
  display: flex;
  font-size: min(11vw, 19svh);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  line-height: .78;
  letter-spacing: -0.04em;
  color: var(--lime);
  pointer-events: none;
}
.lxd__mono span { display: block; will-change: transform; }

.lxd__close {
  position: absolute;
  z-index: 3;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--lime);
  font: 700 .8125rem/1 "Archivo", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
}
.lxd__close span { font-size: 1.25rem; line-height: 0; }

.lxd__stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--top);
  bottom: var(--bottom);
  width: var(--viewer-w);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lxd__viewer {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
}
.lxd__viewer .lxp { z-index: 1; }
.lxd__viewer .lxp.is-active { z-index: 2; }
.lxd__piece {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  font-size: .875rem;
  font-weight: 600;
}
.lxd__piece b { color: var(--lime); font-variant-numeric: tabular-nums; }

.lxd__thumbs {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: var(--top);
  bottom: var(--bottom);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 10px;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.lxd__thumbs button {
  position: relative;
  display: block;
  width: 96px;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: .5;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.lxd__thumbs button:hover { opacity: .85; }
.lxd__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime); }

.lxd__meta {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(18px, 3.5svh, 32px);
  max-height: calc(var(--bottom) - 30px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, .9fr) minmax(220px, 1.6fr) auto;
  gap: clamp(16px, 2.6vw, 40px);
  align-items: end;
  font-size: .875rem;
  line-height: 1.45;
}
.lxd__name {
  font-size: clamp(1.375rem, 2vw, 2rem);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  line-height: .95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lxd__tag, .lxd__label {
  margin-top: 6px;
  color: var(--lime);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lxd__label { margin: 0 0 6px; }
.lxd__list li { opacity: .9; }
.lxd__desc {
  max-width: 48ch;
  opacity: .92;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lxd__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lxd__links { display: flex; gap: 18px; }
.lxd__case, .lxd__next {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--paper);
  font: 700 .9375rem/1 "Archivo", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 0;
}
.lxd__case:hover, .lxd__next:hover { border-color: var(--lime); color: var(--lime); }

/* Lo secundario aparece cuando la pieza ya llegó a su lugar */
.lxd__close, .lxd__piece, .lxd__thumbs, .lxd__meta {
  opacity: 0;
  transition: opacity 420ms ease;
}
.lxd.is-ready .lxd__close,
.lxd.is-ready .lxd__piece,
.lxd.is-ready .lxd__thumbs,
.lxd.is-ready .lxd__meta { opacity: 1; }
.lxd.is-ready .lxd__meta { transition-delay: 80ms; }

/* ==========================================================================
   Lista de marcas (debajo de la galería)
   ========================================================================== */
.lx-list { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 8vw, 110px); }
.lx-list__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.lx-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.lx-card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.lx-card__art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(4, 18, 63, .08);
  transition: transform 400ms var(--ease-out);
}
.lx-card__art .lxp { transition: transform 600ms var(--ease-out); }
.lx-card:hover .lx-card__art .lxp { transform: scale(1.04); }
.lx-card__name {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  line-height: 1;
  text-transform: uppercase;
}
.lx-card__tag { color: var(--blue); font-weight: 600; font-size: .9375rem; }

/* ==========================================================================
   Tablet y móvil: la tira se desliza con el dedo y la marca se lee de arriba abajo
   ========================================================================== */
@media (max-width: 1080px) {
  .lxd__meta { grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.8fr) auto; }
  .lxd__meta .lxd__col { display: none; }
  .lxd__thumbs button { width: 80px; }
  .lx-list__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px), (hover: none) {
  .lx { --slice-h: min(52svh, 440px); }
  .lx__strip-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .lx__strip-wrap::-webkit-scrollbar { display: none; }
  .lx__strip { padding: 0 var(--gutter); }
  .lx__slice {
    width: clamp(74px, 22vw, 120px);
    filter: none;
    scroll-snap-align: center;
  }
  .lx__slice .lxp img { height: 20%; }
  .lx__slice .lxp--tall img { height: 26%; }
  .lx__hint-mouse { display: none; }
  .lx__hint-touch { display: inline; }
}

@media (max-width: 820px) {
  .lx__ruler { top: 92px; }
  .lx__hint { display: none; }

  .lxd {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 92px var(--gutter) 40px;
  }
  .lxd__bg { position: fixed; }
  .lxd__mono, .lxd__close, .lxd__stage, .lxd__thumbs, .lxd__meta {
    position: relative;
    inset: auto;
    transform: none;
  }
  .lxd__close { display: inline-flex; margin-bottom: 18px; }
  .lxd__mono { font-size: 30vw; margin-bottom: 22px; }
  .lxd__stage { width: 100%; }
  .lxd__thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    margin: 14px -4px 30px;
  }
  .lxd__thumbs button { width: 84px; flex: none; }
  .lxd__meta { grid-template-columns: 1fr; gap: 22px; }
  .lxd__desc, .lxd__actions { grid-column: auto; grid-row: auto; }
  .lxd__actions { flex-wrap: wrap; }

  .lx-list__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lx__slice > .lxp { transform: none; transition: none; }
  .lxd__bg, .lxd__close, .lxd__piece, .lxd__thumbs, .lxd__meta { transition: none; }
}