/** Shopify CDN: Minification failed

Line 1446:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:main-article (INDEX:60) */
/* ═══════════════════════════════════════════════════
   SNEAKER LANE — ARTICLE  |  drop-culture editorial
   ═══════════════════════════════════════════════════ */
.sl-article {
  --sl-ink:     rgb(var(--color-foreground, 31,29,36));
  --sl-paper:   rgb(var(--color-background, 255,255,255));
  --sl-muted:   rgba(var(--color-foreground, 31,29,36), 0.58);
  --sl-line:    rgba(var(--color-foreground, 31,29,36), 0.1);
  display: block;
  color: var(--sl-ink);
}

/* ── HEADER (NK-style: 2-col grid) ────────────────── */
.sl-article__header {
  padding-top: clamp(2.4rem, 4vw, 4rem);
  padding-bottom: clamp(2.4rem, 4vw, 4.8rem);
  border-bottom: 5px solid var(--sl-accent);
  margin-bottom: clamp(3.2rem, 5vw, 5.6rem);
}

.sl-article__header-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 4vw, 4rem);
}

/* Left col: meta + title + dateline */
.sl-article__header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Right col: featured image */
.sl-article__header-right {
  min-width: 0;
}

.sl-article__hero-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--media-radius, 12px);
  background: rgba(var(--color-foreground, 31,29,36), 0.04);
  line-height: 0;
}

.sl-article__hero-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Breadcrumb */
.sl-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
}
.sl-crumbs a { color: inherit; text-decoration: none; opacity: 0.65; transition: opacity 0.2s; }
.sl-crumbs a:hover { opacity: 1; }
.sl-crumbs span { opacity: 0.35; }

/* Orange tag chip (replaces kicker) */
.sl-tag-chip {
  display: inline-block;
  background: var(--sl-accent);
  color: #1f1d24;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem 0.35rem;
  border-radius: 2px;
  margin: 0 0 2rem;
  line-height: 1;
}

/* TITLE — legible at any column width */
.sl-article__title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 2rem;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
}

/* Dateline (date · read-time · author) */
.sl-article__dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sl-muted);
}

/* ── LAYOUT: main + sidebar ─────────────────────────── */
.sl-article__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(4rem, 6vw, 7rem);
}

/* ── BODY (main column) ─────────────────────────────── */
.sl-article__body {
  min-width: 0;
}

.sl-article__content {
  font-family: var(--font-body-family);
  font-size: 1.85rem;
  line-height: 1.72;
  color: rgba(var(--color-foreground, 31,29,36), 0.92);
  counter-reset: sl-h2;
}
.sl-article__content > * + * { margin-top: 1.5em; }
.sl-article__content p { margin: 0; }

/* H2: section counter §01 §02 (sin los titulares del cuerpo que eran H1: ver data-sl-h1 mas abajo) */
.sl-article__content h2:not(:where([data-sl-h1])),
.sl-article__content h3,
.sl-article__content h4 {
  font-family: var(--font-heading-family);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sl-ink);
  text-wrap: balance;
  margin: 0;
}
.sl-article__content h2:not(:where([data-sl-h1])) {
  counter-increment: sl-h2;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  margin-top: 2.4em;
}
.sl-article__content h2:not(:where([data-sl-h1]))::before {
  content: "§0" counter(sl-h2);
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sl-accent);
  margin-bottom: 0.6em;
}
.sl-article__content h3 {
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  margin-top: 1.8em;
  padding-left: 1.4rem;
  border-left: 3px solid var(--sl-accent);
}
.sl-article__content h4 { font-size: 1.7rem; margin-top: 1.6em; }

.sl-article__content a {
  color: var(--sl-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sl-accent);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.sl-article__content a:hover { color: var(--sl-accent); }

.sl-article__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--media-radius, 12px);
  margin-block: 1.8em;
}
.sl-article__content figure { margin: 2em 0; }
.sl-article__content figcaption {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  color: var(--sl-muted);
  text-align: center;
}

/* Blockquote */
.sl-article__content blockquote {
  margin: 2.4em 0;
  padding: 2.4rem 2rem;
  border: 0;
  border-top: 3px solid var(--sl-accent);
  border-bottom: 3px solid var(--sl-accent);
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--sl-ink);
  text-align: left;
}
.sl-article__content blockquote p { margin: 0; }
.sl-article__content blockquote::before {
  content: '"';
  display: block;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.7;
  color: var(--sl-accent);
  margin-bottom: 0.3em;
  font-family: var(--font-heading-family);
}

.sl-article__content ul,
.sl-article__content ol { padding-left: 1.6em; }
.sl-article__content li { margin-block: 0.5em; padding-left: 0.3em; }
.sl-article__content ul li::marker { color: var(--sl-accent); }
.sl-article__content ol li::marker { color: var(--sl-accent); font-weight: 700; }

.sl-article__content hr {
  border: 0;
  height: 1px;
  background: var(--sl-line);
  margin: 2.8em auto;
  width: 100%;
}

.sl-article__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
  margin: 1.8em 0;
}
.sl-article__content th,
.sl-article__content td {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--sl-line);
}
.sl-article__content th { font-family: var(--font-heading-family); font-weight: 700; }

/* Tag chips */
.sl-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--sl-line);
}
.sl-chip {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--sl-line);
  border-radius: 2px;
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sl-ink);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sl-chip:hover { border-color: var(--sl-accent); background: var(--sl-accent); color: #1f1d24; }

/* ── SIDEBAR ─────────────────────────────────────────── */
.sl-article__sidebar {
  min-width: 0;
}

.sl-sidebar__inner {
  border-top: 3px solid var(--sl-accent);
  padding-top: 1.8rem;
}

.sl-sidebar__eyebrow {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sl-muted);
  margin: 0 0 0.5rem;
}

.sl-sidebar__heading {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 2rem;
  color: var(--sl-ink);
}

.sl-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-sidebar__item {
  border-bottom: 1px solid var(--sl-line);
}
.sl-sidebar__item:first-child {
  border-top: 1px solid var(--sl-line);
}

.sl-sidebar__card {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem 0;
  text-decoration: none;
  color: var(--sl-ink);
  transition: opacity 0.2s;
}
.sl-sidebar__card:hover { opacity: 0.7; }

.sl-sidebar__media {
  flex-shrink: 0;
  width: 6.8rem;
  height: 6.8rem;
  border-radius: var(--media-radius, 8px);
  overflow: hidden;
  background: rgba(var(--color-foreground, 31,29,36), 0.05);
  position: relative;
}

.sl-sidebar__media img,
.sl-sidebar__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sl-sidebar__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sl-sidebar__title {
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sl-sidebar__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.5rem;
}

.sl-sidebar__price-now { color: var(--sl-ink); }
.sl-sidebar__price-was {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--sl-muted);
  text-decoration: line-through;
}

.sl-sidebar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.8rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1f1d24;
  background: var(--sl-accent);
  padding: 1rem 1.6rem;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.sl-sidebar__cta:hover {
  background: var(--sl-ink);
  color: var(--sl-accent);
  transform: translateY(-2px);
}
.sl-sidebar__cta svg { transition: transform 0.25s ease; }
.sl-sidebar__cta:hover svg { transform: translateX(3px); }

/* ── SHOP THE DROP (badge — reutilizado en sidebar) ─── */
.sl-shop__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.25rem 0.5rem;
  background: #1f1d24;
  color: var(--sl-accent);
  font-family: var(--font-heading-family);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* ── FOOTER ──────────────────────────────────── */
.sl-article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 0;
  padding-block: 3rem;
  border-top: 1px solid var(--sl-line);
}
.sl-article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.sl-article__back .icon-wrap svg { transform: rotate(180deg); }

.sl-article__comments-wrap {
  margin-top: 5rem;
  padding-block: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--sl-line);
}
.sl-article__comments-title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── RESPONSIVE ──────────────────────────────── */
@media screen and (min-width: 750px) {
  .sl-article__content blockquote {
    margin-inline: -2rem;
    padding-inline: 2rem;
  }
}

@media screen and (min-width: 990px) {
  /* Header: left 54% / right 46% — image gets generous space */
  .sl-article__header-inner {
    grid-template-columns: 54fr 46fr;
    align-items: center;
  }

  /* Content area: main column + 30rem sidebar */
  .sl-article__layout {
    grid-template-columns: 1fr 30rem;
    gap: clamp(3.6rem, 4vw, 5rem);
  }

  /* Sidebar sticks while scrolling the article */
  .sl-sidebar__inner {
    position: sticky;
    top: 2rem;
  }
}

@media screen and (max-width: 749px) {
  .sl-article__header-inner { gap: 2rem; }
}

/* ── LOAD REVEAL ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .sl-tag-chip,
  .sl-article__title,
  .sl-article__dateline {
    animation: sl-drop-in 0.8s cubic-bezier(0.22,1,0.36,1) both;
  }
  .sl-article__title    { animation-delay: 0.07s; }
  .sl-article__dateline { animation-delay: 0.16s; }
  .sl-article__header-right {
    animation: sl-drop-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.05s both;
  }
  @keyframes sl-drop-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── BLOQUE DE SALIDA (nota de prensa, calcado de Nice Kicks) ────────── */
.sl-article__content .sl-release-info {
  margin-top: 1.8em;
  background: rgba(var(--color-foreground, 31, 29, 36), 0.045);
  border-left: 4px solid var(--sl-accent);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}
/* el nombre del par NO lleva el contador §0N de las secciones */
.sl-article__content .sl-release-info h2:not(:where([data-sl-h1])) {
  counter-increment: none;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
}
.sl-article__content .sl-release-info h2:not(:where([data-sl-h1]))::before { content: none; }
/* Titular del cuerpo que era H1 (sale como <h2 data-sl-h1>): el tamaño de un h1 del tema,
   salvo que el propio articulo lo fije (sus reglas y estilos en linea pesan mas o van despues). */
:where(.sl-article__content) [data-sl-h1] { font-size: calc(var(--font-heading-scale) * 3rem); }
@media only screen and (min-width: 750px) {
  :where(.sl-article__content) [data-sl-h1] { font-size: calc(var(--font-heading-scale) * 4rem); }
}
.sl-article__content .sl-release-info p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.1;
  color: var(--sl-ink);
}
.sl-article__content .sl-release-info strong {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground, 31, 29, 36), 0.58);
  margin-right: 0.5rem;
}

/* pie de la tira de fotos */
.sl-article__content .sl-shot-caption {
  margin-top: 0.9rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground, 31, 29, 36), 0.55);
}

/* ── FOTOS del par ──────────────────────────────────────────────────── */
.sl-article__content .sl-shot {
  margin: 2em 0 0;
}
.sl-article__content .sl-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: rgba(var(--color-foreground, 31, 29, 36), 0.04);
}
.sl-article__content .sl-shot figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground, 31, 29, 36), 0.55);
}
@media screen and (max-width: 749px) {
  .sl-article__content .sl-specs { font-size: 1.5rem; }
  .sl-article__content .sl-specs th,
  .sl-article__content .sl-specs td { padding: 1rem 1.2rem; }
  .sl-article__content .sl-specs th { width: 42%; white-space: normal; }
}

/* ── 21-oct-2026: COLORES DE LA CASA ─────────────────────────────────────────
   El acento pasa del naranja (#ff9300) a la tinta (#111111, en templates/article.json). Donde el
   naranja hacía de fondo con texto oscuro encima (la etiqueta de arriba, el botón de la colección y
   la marca de oferta), el texto pasa a blanco: si no, quedaba negro sobre negro. Y los radios, los
   de la tienda nueva (12 en botones, 16 en tarjetas). */
.sl-article__header { border-bottom: 1px solid var(--sl-line); }
.sl-tag-chip {
  align-self: flex-start;
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0.6rem 1.2rem 0.55rem;
}
.sl-sidebar__cta {
  color: #FFFFFF;
  border-radius: 12px;
  padding: 1.3rem 2rem;
}
.sl-sidebar__cta:hover { background: #333333; color: #FFFFFF; }
.sl-shop__badge { background: #111111; color: #FFFFFF; border-radius: 999px; }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:61) */
/* ═══════════════════════════════════════════════════
   SNEAKER LANE — DIARIO  |  drop-culture editorial
   ═══════════════════════════════════════════════════ */
.slz {
  --sl-ink:   rgb(var(--color-foreground, 31,29,36));
  --sl-paper: rgb(var(--color-background, 255,255,255));
  --sl-muted: rgba(var(--color-foreground, 31,29,36), 0.52);
  --sl-line:  rgba(var(--color-foreground, 31,29,36), 0.1);
  color: var(--sl-ink);
  overflow-x: hidden;
}

/* ── TICKER ─────────────────────────────────── */
.slz-ticker {
  background: var(--sl-accent);
  color: #1f1d24;
  padding: 0.8rem 0;
  overflow: hidden;
}
.slz-ticker__track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: slz-roll 28s linear infinite;
}
.slz-ticker__track span {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@keyframes slz-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .slz-ticker__track { animation-play-state: paused; }
}

/* ── MASTHEAD ────────────────────────────────── */
.slz-head {
  border-bottom: 5px solid var(--sl-accent);
}
.slz-head__label {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sl-accent);
  margin: 0 0 1.2rem;
}
.slz-head__title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(4.8rem, 11vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 2.4rem;
}
.slz-head__desc {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  color: var(--sl-muted);
  margin: -1.4rem 0 2.2rem;
  max-width: 50ch;
  line-height: 1.5;
}

.slz-wrap { padding-block: clamp(3rem, 5vw, 5rem); }
.slz-empty { font-size: 1.6rem; color: var(--sl-muted); }

/* ── PILL TAG ────────────────────────────────── */
.slz-pill {
  display: inline-block;
  background: var(--sl-accent);
  color: #1f1d24;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem 0.35rem;
  border-radius: 2px;
  margin: 0 0 1.6rem;
  line-height: 1;
}
.slz-pill--xs {
  font-size: 0.9rem;
  padding: 0.3rem 0.75rem 0.25rem;
  margin-bottom: 0.9rem;
}

/* ── FEATURED ────────────────────────────────── */
.slz-feat {
  display: block;
  text-decoration: none;
  color: var(--sl-ink);
  border-bottom: 1px solid var(--sl-line);
  margin-bottom: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.slz-feat__img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sl-line);
  margin-bottom: 2.6rem;
}
.slz-feat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.slz-feat:hover .slz-feat__img img { transform: scale(1.04); }

.slz-feat__body {
  position: relative;
  overflow: hidden;
}
.slz-feat__bg {
  position: absolute;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(10rem, 20vw, 24rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--sl-accent);
  opacity: 0.07;
  top: -1rem;
  right: -1rem;
  user-select: none;
  pointer-events: none;
}
.slz-feat__inner { position: relative; z-index: 1; }
.slz-feat__title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(3rem, 5.5vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 2rem;
  max-width: 18ch;
  transition: color 0.2s ease;
}
.slz-feat:hover .slz-feat__title { color: var(--sl-accent); }
.slz-feat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  font-family: var(--font-heading-family);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-muted);
  margin-bottom: 2.2rem;
}
.slz-feat__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--sl-accent);
  padding-bottom: 0.25rem;
  transition: color 0.2s ease;
}
.slz-feat__cta svg { transition: transform 0.25s ease; }
.slz-feat:hover .slz-feat__cta { color: var(--sl-accent); }
.slz-feat:hover .slz-feat__cta svg { transform: translateX(5px); }

/* ── CARD GRID ───────────────────────────────── */
.slz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 4vw, 4.5rem) clamp(2rem, 3vw, 3rem);
}
.slz-card { min-width: 0; }
.slz-card__a {
  display: block;
  text-decoration: none;
  color: var(--sl-ink);
}
.slz-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--sl-line);
  margin-bottom: 1.6rem;
}
.slz-card__img img,
.slz-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.slz-card__a:hover .slz-card__img img { transform: scale(1.07); }

.slz-card__num {
  position: absolute;
  bottom: 0.9rem;
  left: 1rem;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  z-index: 2;
  font-style: normal;
}
.slz-card__go {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: rgba(15,14,18,0.55);
  color: #fff;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 3;
}
.slz-card__a:hover .slz-card__go { opacity: 1; }

.slz-card__title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  transition: color 0.2s ease;
}
.slz-card__a:hover .slz-card__title { color: var(--sl-accent); }
.slz-card__date {
  display: block;
  font-family: var(--font-heading-family);
  font-size: 1.0rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-muted);
  margin-top: 0.2rem;
}

.slz-pag { margin-top: clamp(4rem, 6vw, 6rem); }

/* ── RESPONSIVE ──────────────────────────────── */
@media screen and (min-width: 750px) {
  .slz-feat {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: clamp(3rem, 4vw, 5rem);
    align-items: start;
  }
  .slz-feat__img {
    margin-bottom: 0;
    aspect-ratio: 4 / 5;
  }
  .slz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 990px) {
  .slz-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── LOAD REVEAL ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .slz-head__label { animation: slz-up 0.6s cubic-bezier(0.22,1,0.36,1) both; }
  .slz-head__title { animation: slz-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.06s both; }
  .slz-head__desc  { animation: slz-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.12s both; }
  @keyframes slz-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* END_SECTION:main-blog */

/* START_SECTION:sl-hero-banner (INDEX:98) */
/* ══════════════════════════════════════════════════════════════════════════
   🔴 TODO LO DE LA PORTADA CUELGA DEL AJUSTE «PORTADA NUEVA» (1-oct-2026).
   Este fichero lleva dos cosas: el BANNER y el sistema de la portada nueva
   (fondo negro, contenedor blanco, apilado, baraja, canalon, pie oscuro). Jorge
   quiso los banners en el tema en vivo SIN cambiar el resto de su portada, asi
   que todas las reglas de portada van con `:has(.sl-hero--portada)` y el JS de
   portada (slApilar) solo arranca con esa clase. La pone el ajuste
   `portada_nueva`: encendido en el tema de trabajo, apagado en el vivo. Un solo
   fichero para los dos temas: al publicar el de trabajo no hay que reconciliar.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   EL HERO SE QUEDA CLAVADO Y LA PAGINA LE SUBE POR ENCIMA (8-sep-2026)
   Jorge, con emestudios.com de referencia. Medida SU web viva: su hero es
   `position: sticky; top: 0; z-index: 3` y no se mueve —su foto se queda en
   y=61 mientras el panel de abajo sube de 747 a -103—, y el panel que le pasa
   por encima lleva esquinas de 12px.

   Se hace con `:has()` sobre el envoltorio que genera Shopify en vez de meterle
   una clase: ese envoltorio no lo controlamos y el editor lo regenera.
   Depende de que NINGUN ancestro tenga overflow oculto: con overflow hidden,
   `sticky` deja de pegarse sin avisar de nada.

   Las secciones que suben se pintan de blanco a proposito: el hero se queda
   pegado arriba TODA la pagina, no solo el primer scroll, asi que sin fondo
   opaco se veria por detras hasta el final.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LA PORTADA SE APILA: CADA SECCION SE CLAVA Y LA SIGUIENTE LE CAE ENCIMA
   Jorge, 9-sep-2026: «cada vez que se termine una seccion y empiece otra, la de
   arriba se queda bloqueada y la de abajo se superpone».

   Antes esto solo lo hacia el hero. Ahora lo hacen TODAS: cada seccion es
   `sticky`, se queda pegada al llegar arriba, y la siguiente —con mas z-index
   por ir despues— sube por encima y la tapa. El canto redondeado de 12px marca
   el corte, igual que hace el panel contra la foto.

   El `top` y el `z-index` los pone el JS (ver slApilar), no el CSS, por dos
   razones:
     · el z-index tiene que crecer con el ORDEN del DOM, y el editor de temas
       reordena secciones: con nth-child se quedaria mal a la primera que Jorge
       mueva una;
     · una seccion MAS ALTA que la ventana no puede clavarse en top:0 —su parte
       de abajo no se veria nunca—. Esas se clavan cuando su PIE llega al pie de
       la ventana (top negativo), asi se leen enteras y despues se quedan.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LA PORTADA VA SOBRE NEGRO (Jorge, 10-sep-2026)
   Las secciones de arriba son TARJETAS BLANCAS con el borde redondeado ARRIBA
   Y ABAJO, flotando sobre el fondo. De «Cada par lleva su chapa» hacia abajo,
   todo va a sangre sobre ese mismo negro, como el final de adobe.com.

   🔴 EL NEGRO ES #1F1D24, NO #000. Es el `background-2` que el tema ya usa en
   el pie y en las secciones oscuras: usando el mismo, las secciones finales y
   el pie funden con el fondo sin costura. Con negro puro se verian como bloques
   ligeramente mas claros encima de la pagina, que es justo lo contrario de «a
   sangre».
   ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 EL SOLAPE, DECLARADO EN UN SOLO SITIO. Lo usan CUATRO reglas: el contenedor
   blanco montandose sobre el banner, el bloque negro montandose por detras del
   contenedor, el relleno de abajo del banner (para que no se coma el boton) y la
   altura a la que van los puntos del carrusel. Si vive solo como valor por
   defecto repetido, cambiarlo obliga a tocar las cuatro y una se queda atras. */
body:has(.sl-hero--portada) {
  --sl-solape: 22px;
  /* 🔴 AIRE ENTRE EL BANNER Y LA PRIMERA SECCION (Jorge, 11-sep-2026: «el banner
     demasiado pegado a la primera seccion, separarlo un poco manteniendo el
     efecto de que estamos por encima»). Como se solapan a proposito, lo que se
     separa no son las cajas sino el CONTENIDO del banner —boton y puntos— del
     canto del contenedor: quedaban a 4px. Esto deja una banda de foto ahi. */
  --sl-aire-banner: 44px;
}

body:has(.sl-hero--portada),
body:has(.sl-hero--portada) #MainContent {
  background-color: rgb(31, 29, 36);
}

#MainContent:has(.sl-hero--portada) > * {
  position: sticky;
  background-color: rgb(255, 255, 255);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA BARAJA DE COLECCIONES (Jorge, 11-sep-2026 · referencia: adobe.com, movil)
   Back 2 School, New y Best Sellers son tarjetas negras que se clavan bajo la
   cabecera; la siguiente sube por encima y la de detras SUBE un poco, SE
   ESTRECHA y PIERDE CONTRASTE, asi que asoman sus cantos grises por arriba.
   Medido en adobe.com (390x844): tarjeta sticky a 152px, radio 16, 12px de
   margen, hasta 50px de subida, contraste 1 → 0 / .5 y hasta 28px de estrechado.
   El envoltorio `.sl-baraja` lo crea slApilar(): es el que acota el sticky.
   ══════════════════════════════════════════════════════════════════════════ */
.sl-baraja {
  /* 🔴 UN SOLO NUMERO PARA EL TOPE. Lo usan el `top` de la tarjeta (CSS) y la
     regla que decide si cabe (JS). Los tuve un rato descuadrados —CSS 38, JS 48—
     y a 1366x768 daba por no-cabe una tarjeta que si cabia: las tres pasaban de
     largo y el apilado desaparecia sin motivo. */
  --sl-tope-extra: 38px;
  display: flex;
  flex-direction: column;
  padding: 20px 0 28px;
  --sl-margen: 12px;
}
@media (min-width: 750px) {
  .sl-baraja { --sl-margen: clamp(16px, 2.5vw, 40px); padding-top: 28px; }
}
/* 🔴 EL RECORRIDO VA ENTRE TARJETAS, NO COMO `gap` DEL CONTENEDOR. Con `gap`, la
   tira de confianza que va delante quedaria separada de la primera tarjeta ese
   mismo 20% de pantalla. Asi solo separa tarjeta de tarjeta.
   (Adobe deja 175px en una ventana de 844, o sea ~20vh.) */
.sl-baraja > .sl-carta + .sl-carta {
  margin-top: 20vh;
}
/* 🔴 EN MOVIL, SIN RECORRIDO (14-oct-2026). Jorge: «si bajas y subes, en un momento se crea un
   espacio grande entre las colecciones». Era este 20vh: en el movil las tarjetas miden ~375px y
   caben de sobra, asi que mientras la de arriba esta clavada se ve el recorrido entero como un
   vacio blanco (medido: hasta 190px; con tarjetas blancas sobre blanco no se lee como recorrido
   sino como un agujero). Con 24px el hueco maximo baja a 42px y el apilado sigue igual: el canto
   de la tarjeta de detras asoma 12px al clavarse la siguiente (con 20vh, 14px). En ordenador no
   cambia. Comparativa en datos-respaldo/hueco-baraja-movil-2026-10-14/. */
@media (max-width: 749px) {
  .sl-baraja > .sl-carta + .sl-carta {
    margin-top: 24px;
  }
}
/* 🔴 MENOS AIRE ENTRE LA ULTIMA COLECCION Y «AQUI COMPRAN ELLOS» (14-oct-2026). Jorge: «se
   queda mucho espacio». Se sumaban el relleno de abajo de la baraja (28), el de arriba de Wall
   of Fame (52; 84 en ordenador), el margen de su cabecera (34; 52 en ordenador), que estaba
   para la raya del masthead que ya no existe, y los 18px que sube la ultima tarjeta: ~150px
   en movil. Solo aqui, cuando Wall of Fame va justo detras de la baraja; en la ficha va detras
   de otras secciones y no se toca. */
.sl-baraja + [id*="wall_of_fame"] .sl {
  padding-top: 0;
}
.sl-baraja + [id*="wall_of_fame"] .sl__head {
  margin-top: 10px;
}
@media (min-width: 750px) {
  .sl-baraja + [id*="wall_of_fame"] .sl__head {
    margin-top: 32px;
  }
}
/* la tira respira un poco antes de la primera tarjeta */
.sl-baraja > .sl-tira-seccion {
  margin-bottom: 10px;
}

.sl-baraja > .sl-carta {
  position: sticky;
  /* 🔴 EL TOPE Y LA SUBIDA VAN ATADOS. La tarjeta enterrada acaba en
     `tope + su desfase − subida`; si se baja el tope sin bajar la subida, las de
     detras terminan POR ENCIMA del pie de la cabecera (97) y sus cantos dejan de
     verse. Con subida 40 y desfase 6, el tope minimo es 97 + 4 + 40 − 6 = 135. */
  top: calc(var(--sl-techo, 97px) + var(--sl-tope-extra, 38px));
  z-index: calc(var(--sl-i, 0) + 1);
  background: transparent;
  view-timeline-name: --sl-carta;
  /* La sombra NO va aqui: va en ::before (ver «LA SOMBRA, EN UNA CAPA PROPIA» justo debajo). */
}
/* 🔴 LA SOMBRA, EN UNA CAPA PROPIA CON box-shadow, NO COMO `filter: drop-shadow` (14-oct-2026).
   Hasta hoy era un `drop-shadow` en esta pieza, porque el estrechado era un `clip-path` sobre la
   tarjeta (desde el 21-oct es una escala) y una box-shadow EN LA TARJETA se recortaria con el. Pero en el iPhone de Jorge no
   salia NINGUNA sombra, y sin sombra las tarjetas blancas sobre blanco no se ven: parecia que
   no habia tarjetas. WebKit tiene fallos documentados que recortan o borran un drop-shadow en
   piezas con transform (bugs.webkit.org 261442, 207586, 236974), y estas son sticky y suben
   con transform. En los emuladores del Mac (Chrome y el WebKit de Playwright) si salia: no
   sirven para esto. Una box-shadow normal en una pieza fija si se ve en iPhone (la de la
   cabecera sale en su captura). Por eso la sombra la dibuja un ::before detras de la tarjeta,
   del mismo tamano, que se estrecha A LA VEZ que ella (misma linea de tiempo, mismo
   tramo). Medido en WebKit y Chrome: oscurece igual que el filtro (movil 207-212 de 255,
   ordenador 221-233). Respaldo y captura del iPhone en datos-respaldo/sombra-baraja-ios-2026-10-14/. */
.sl-baraja {
  --sl-sombra-carta: 0 -6px 16px rgba(20, 24, 26, 0.13), 0 2px 5px rgba(20, 24, 26, 0.06);
}
/* En movil mas marcada (14-oct-2026: «en movil algunos dicen que no sale la sombra»; con la
   suave, lo mas oscuro sobre el canto quedaba en 221-232 y en pantalla pequena no se leia). */
@media (max-width: 749px) {
  .sl-baraja {
    --sl-sombra-carta: 0 -8px 20px rgba(20, 24, 26, 0.20), 0 -1px 3px rgba(20, 24, 26, 0.10);
  }
}
.sl-baraja > .sl-carta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sl-margen);
  right: var(--sl-margen);
  border-radius: 16px;
  box-shadow: var(--sl-sombra-carta);
  pointer-events: none;
  z-index: -1;
}
.sl-baraja > .sl-carta.sl-carta--suelta {
  position: relative;
  top: auto;
}
/* 🔴 SIN APILADO NO HACE FALTA RECORRIDO. El hueco de 20vh entre tarjetas existe
   para dar scroll al apilado; cuando las tarjetas no caben y pasan de largo, ese
   hueco se queda como un vacio blanco enorme entre una y otra. Medido el
   11-sep-2026 en 1366x768 y 1280x800, que son dos de los portatiles mas comunes. */
.sl-baraja:has(.sl-carta--suelta) > .sl-carta + .sl-carta {
  margin-top: 28px;
}
/* La tarjeta que se ve es el envoltorio de esquema de la seccion. */
.sl-baraja > .sl-carta > .sl-tarjetas {
  margin-inline: var(--sl-margen);
  border-radius: 16px;
  overflow: hidden;
  /* 🔴 BLANCAS, NO NEGRAS (Jorge, 11-sep-2026). El fondo y el texto los pone el
     propio esquema de color de la seccion, asi que aqui no se fuerza ninguno:
     si manana cambia el esquema en el editor, la tarjeta le sigue. */
}

/* 🔴 LA TARJETA TIENE QUE CABER BAJO LA CABECERA O NO SE CLAVA, y de sus 718px
   en escritorio solo 407 eran la foto: la fila del titulo se llevaba 104 (un
   titular de 29px con 75 de margenes) y el relleno de abajo 40. Apretando lo que
   no es contenido —sin tocar cuantos productos se enseñan ni el 3:4 de las
   fotos— la tarjeta baja ~69px y el apilado pasa de funcionar solo en monitores
   grandes a funcionar tambien en portatiles. Medido el 11-sep-2026. */
.sl-baraja .collection__title h2,
.sl-baraja .collection__title .title {
  margin-top: 24px;
  margin-bottom: 16px;
}
.sl-baraja > .sl-carta > .sl-tarjetas .collection {
  padding-top: 0;
  /* 24px dejaban la tarjeta en 635 con un limite de 633 en 1366x768: fallaba por
     DOS pixeles y las tres pasaban de largo. Medido el 11-sep-2026. */
  padding-bottom: 16px;
}
.sl-baraja > .sl-carta > .sl-tarjetas ul {
  margin-bottom: 0;
}

/* 🔴 LAS ANIMACIONES VAN CON @supports. `animation-timeline` lo tienen Chrome,
   Edge y Safari 26+; en el resto las tarjetas se apilan igual —el sticky es CSS
   normal— pero sin subir, estrecharse ni agrisarse. Nunca se quedan invisibles:
   la opacidad 0 del primer fotograma solo existe donde existe la animacion.
   Se usa `transform` y `filter` como Adobe porque dentro de estas secciones no
   hay nada `position: fixed` (medido el 11-sep-2026). Si algun dia se activa el
   anadido rapido, su modal lo muda Dawn a <body> al cargar: no queda dentro. */
@supports (animation-timeline: view()) {
  .sl-baraja > .sl-carta {
    animation: sl-carta-sube linear both;
    animation-timeline: --sl-carta;
    animation-range: entry 0% exit 100%;
  }
  .sl-baraja > .sl-carta > .sl-tarjetas {
    animation: sl-carta-encoge linear both;
    animation-timeline: --sl-carta;
    animation-range: entry 0% exit 100%;
  }
  .sl-baraja > .sl-carta::before {
    animation: sl-carta-sombra linear both;
    animation-timeline: --sl-carta;
    animation-range: entry 0% exit 100%;
  }
}
/* 🔴 CON TARJETAS BLANCAS NO SE AGRISAN NI SE DESVANECEN. El `contrast` que usa
   Adobe deja una tarjeta clara en gris sucio, y bajar la opacidad sobre un fondo
   blanco la hace desaparecer. Lo que separa una tarjeta de la de abajo es LA
   SOMBRA. Aqui solo queda la subida —el canto que asoma— y el estrechado. */
@keyframes sl-carta-sube {
  0%   { transform: translateY(var(--sl-off, 0px)); }
  100% { transform: translateY(calc(var(--sl-off, 0px) - 40px)); }
}
/* 🔴 EL ESTRECHADO VA CON transform: scale, NI CON margin NI CON clip-path (21-oct-2026).
   Con margin, la fila de productos se recoloca y la tarjeta cambiaba de alto mientras se animaba
   (696 → 693), y la igualacion de alturas no se estaba quieta. Despues fue un clip-path, pero
   el navegador no sabe mover un clip-path en la tarjeta grafica: lo recalcula en el hilo
   principal y repinta la pagina en cada fotograma del scroll. Medido en un Android simulado
   (CPU x4): el documento repintado 885 veces en una bajada y 0,77 s de pintado; con escala, 164
   veces y 0,09 s. La escala sale desde el borde de arriba (transform-origin 50% 0), asi que el
   canto que asoma bajo la tarjeta siguiente se queda en su sitio y solo se estrecha, como antes.
   Ademas encoge la altura, pero esa parte ya la tapa la tarjeta que sube. El factor
   (--sl-encoge-k = 1 - 2 · encoge / ancho de la tarjeta) lo calcula colocar(). */
.sl-baraja > .sl-carta > .sl-tarjetas,
.sl-baraja > .sl-carta::before {
  transform-origin: 50% 0;
}
@keyframes sl-carta-encoge {
  0%, 20% { transform: scale(1); }
  100%    { transform: scale(var(--sl-encoge-k, 1)); }
}
/* La capa de la sombra encoge igual que la tarjeta: mismo factor, mismo origen, mismo tramo.
   🔴 21-oct-2026: CON transform Y NO CON left/right. Es una animacion ligada al scroll, y
   animar left/right recolocaba la pagina en cada fotograma: cada lectura de posicion del motor
   del apilado obligaba a recalcular la pagina entera. Medido en un Android simulado (CPU x4):
   ~2,5 s de calculo al bajar la portada y tirones de 150-180 ms. */
@keyframes sl-carta-sombra {
  0%, 20% { transform: scale(1); }
  100%    { transform: scale(var(--sl-encoge-k, 1)); }
}

/* Si la tarjeta no cabe y pasa de largo, tampoco se anima: medido en 1280x720,
   la primera se quedaba gris y al 20% de opacidad mientras subia normal. */
.sl-baraja > .sl-carta.sl-carta--suelta,
.sl-baraja > .sl-carta.sl-carta--suelta::before,
.sl-baraja > .sl-carta.sl-carta--suelta > .sl-tarjetas {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .sl-baraja > .sl-carta,
  .sl-baraja > .sl-carta::before,
  .sl-baraja > .sl-carta > .sl-tarjetas { animation: none !important; }
}

/* ── UN SOLO CONTENEDOR BLANCO ─────────────────────────────────────────────
   🔴 Jorge, 10-sep-2026: «todas estas de aqui deben de ir en un mismo
   contenedor, no 4 diferentes». Back 2 School, New, Wall of Fame y Best Sellers
   son UNA pieza: sin huecos, sin sombras y sin cantos entre ellas. El radio lo
   llevan solo el borde de ARRIBA de la primera y el de ABAJO de la ultima.
   El radio va tambien a los hijos directos: el fondo lo pinta un hijo y
   `border-radius` en el padre no recorta sin `overflow: hidden`. */
#MainContent:has(.sl-hero--portada) > .sl-blanca,
#MainContent:has(.sl-hero--portada) > .sl-blanca > * {
  border-radius: 0;
}
#MainContent:has(.sl-hero--portada) > .sl-blanca {
  margin-bottom: 0;
  box-shadow: none;
}
#MainContent:has(.sl-hero--portada) > .sl-blanca-primera,
#MainContent:has(.sl-hero--portada) > .sl-blanca-primera > * {
  border-top-left-radius: var(--sl-carta, 16px);
  border-top-right-radius: var(--sl-carta, 16px);
}
#MainContent:has(.sl-hero--portada) > .sl-blanca-ultima,
#MainContent:has(.sl-hero--portada) > .sl-blanca-ultima > * {
  border-bottom-left-radius: var(--sl-carta, 16px);
  border-bottom-right-radius: var(--sl-carta, 16px);
}

/* El banner es su propia pieza, con su canto y su hueco antes del contenedor. */
#MainContent:has(.sl-hero--portada) > .sl-banner,
#MainContent:has(.sl-hero--portada) > .sl-banner > * {
  border-radius: var(--sl-carta, 16px);
}
/* 🔴 EL CONTENEDOR SE MONTA SOBRE EL BANNER. Jorge, 10-sep-2026: «superpon la
   seccion blanca encima un poco, para que asi no se queden esas esquinas negras
   al empezar la seccion; que en vez de negras se vea el color del banner».
   Sin solape, detras de las dos esquinas redondeadas de arriba no hay banner
   sino fondo de pagina, y se veian dos muescas negras. Con el solape, lo que
   asoma por las muescas es la foto. Los puntos del carrusel del banner suben el
   mismo `--sl-solape` para que el borde blanco no se los coma. */
#MainContent:has(.sl-hero--portada) > .sl-blanca-primera {
  margin-top: calc(var(--sl-solape, 22px) * -1);
  /* 🔴 SOMBRA POR ENCIMA (Jorge, 11-sep-2026). El borde de arriba del bloque
     blanco llegaba a la foto del banner con un canto plano, asi que el solape no
     se leia: parecia un corte, no un panel metiendose por debajo. Va como
     `inset` y NO como un `::before` con degradado por dos razones: una sombra
     interior sigue sola el `border-radius` de arriba (con un degradado habria
     que recortarlo a mano y las dos muescas de las esquinas se ensuciarian), y
     se pinta por debajo del contenido, asi que oscurece el fondo sin ensuciar el
     texto de la tira. El desplazamiento negativo (-12) la recoge a los lados
     para que solo caiga por arriba.
     🔴 TIENE QUE IR DESPUES DE LA REGLA `.sl-blanca { box-shadow: none }`: la
     misma especificidad, gana la ultima. */
  box-shadow: inset 0 14px 18px -12px rgba(20, 24, 26, 0.34);
}

/* 🔴 SIN HUECO TRAS EL BANNER. Jorge, 10-sep-2026: «que no este este hueco
   negro, si no que la seccion este superpuesta al banner». El contenedor blanco
   arranca justo en el pie del banner y, al bajar, se lo va comiendo. */
#MainContent:has(.sl-hero--portada) > .sl-banner {
  margin-bottom: 0;
}

/* ── de la chapa hacia abajo: a sangre sobre el negro ──────────────────────
   La marca la pone slApilar() buscando la seccion de la chapa, no un numero:
   el editor de temas reordena secciones y un `nth-child` se rompe a la primera. */
#MainContent:has(.sl-hero--portada) > .sl-oscura,
#MainContent:has(.sl-hero--portada) > .sl-oscura > * {
  border-radius: 0;
}
#MainContent:has(.sl-hero--portada) > .sl-oscura {
  background-color: rgb(31, 29, 36);
  box-shadow: none;
  margin-bottom: 0;
  /* 🔴 `flow-root` PARA QUE NINGUN MARGEN SE ESCAPE DE LA SECCION. Jorge, 17-sep-2026:
     «se ve de fondo el banner que esta como fijo». El banner va clavado en `top: 0`
     durante TODA la pagina —es lo que hace que el contenedor blanco se lo coma— y
     esta por DEBAJO de estas secciones (z-index 1 contra 2). Mientras cada seccion
     tenga su fondo opaco no se ve; pero un margen de un hijo se escapa por colapso,
     abre un hueco SIN fondo entre dos secciones, y por ahi asoma el banner entero.
     Medido el 17-sep: 43px justo antes de la seccion de la comunidad, y el margen
     venia de dentro del bloque de la app, no de nuestro codigo — asi que no se
     puede arreglar tocando la seccion de al lado.
     `flow-root` no cambia el espaciado que se ve: el margen sigue ahi, pero DENTRO
     de la caja opaca en vez de entre dos cajas. Va en la regla general y no en esa
     seccion concreta porque el editor reordena y Jorge añade apps. */
  display: flow-root;
}
/* 🔴 DENTRO DEL BLOQUE NEGRO SE REESCRIBE EL ESQUEMA DE COLOR ENTERO.
   Poner el fondo oscuro en la seccion no basta: hay secciones que pintan su
   propio blanco por dentro —las fotos de la tienda y la newsletter no tienen
   ajuste de esquema, y las que lo tienen traen su clase `color-*` en un hijo,
   que vuelve a fijar las variables—. Aqui se redefinen las MISMAS variables que
   el tema genera para `background-2` (#1F1D24 sobre blanco), asi que todo lo
   que las use —texto, botones, chapas, enlaces— se adapta solo.
   Los valores salen de layout/theme.liquid: no son inventados. */
#MainContent:has(.sl-hero--portada) > .sl-oscura,
#MainContent:has(.sl-hero--portada) > .sl-oscura [class*='color-'] {
  --color-background: 31, 29, 36;
  --gradient-background: rgb(31, 29, 36);
  --color-background-contrast: 71, 69, 76;
  --color-foreground: 255, 255, 255;
  --color-button: 255, 255, 255;
  --color-button-text: 31, 29, 36;
  --color-secondary-button: 31, 29, 36;
  --color-secondary-button-text: 255, 255, 255;
  --color-link: 255, 255, 255;
  --color-badge-foreground: 255, 255, 255;
  --color-badge-background: 31, 29, 36;
  --color-badge-border: 255, 255, 255;
  color: rgba(255, 255, 255, 0.88);
}
/* `.gradient` y los envoltorios de esquema pintan el fondo a mano: se les quita
   para que se vea el negro de la seccion. No se toca ningun otro fondo, que
   podria ser una foto. */
#MainContent:has(.sl-hero--portada) > .sl-oscura > .gradient,
#MainContent:has(.sl-hero--portada) > .sl-oscura [class*='color-'],
#MainContent:has(.sl-hero--portada) > .sl-oscura .gradient {
  background-color: rgb(31, 29, 36);
  background-image: none;
}

/* 🔴 EL NEGRO SUBE POR DETRAS DEL CONTENEDOR. Jorge, 10-sep-2026: «la parte de
   abajo negra tiene que ser negras las esquinas como el fondo (se ve el
   banner)». Detras de las dos esquinas redondeadas de ABAJO del contenedor no
   habia negro todavia —el bloque empezaba justo ahi— y lo que asomaba era el
   banner, que sigue clavado arriba. Medido: (127,67,26) y (102,49,12), cuero.
   El bloque negro se monta el mismo `--sl-solape`, pero POR DEBAJO en z: asi el
   contenedor sigue pintando encima y por sus muescas se ve negro. */
#MainContent:has(.sl-hero--portada) > .sl-oscura-primera {
  margin-top: calc(var(--sl-solape, 22px) * -1);
}
/* 🔴 LA PRIMERA SECCION NEGRA SE REVELA (Jorge, 14-oct-2026: «el mismo efecto con este
   solapamiento: que cuando deslice vaya revelando la seccion de abajo»). La seccion negra
   (hoy «Cada par lleva su chapa») se queda QUIETA debajo y el contenedor blanco sube por
   encima como una cortina, destapandola desde abajo; cuando el blanco se ha ido, sigue bajando
   normal. Es `sticky` con `bottom`: se queda pegada al pie de la ventana mientras su sitio
   real esta mas abajo, y se suelta sola al llegar a el.
   🔴 Solo con `sl-revela`, que pone el motor (revisar) cuando al contenedor blanco le queda
   media pantalla para acabar (19-oct-2026; antes, justo al asomar su pie, y en el iPhone se
   notaba un tiron): con el `sticky` puesto siempre, la seccion se quedaria pegada abajo
   desde el principio de la pagina y taparia el banner (ella va en z 2, el banner en z 1). En
   ese instante el blanco cubre la pantalla entera, asi que el cambio no se ve.
   `--sl-revela-abajo` lo pone el motor: 0 si la seccion cabe bajo la cabecera; si es mas alta
   (movil), negativo, para que quede quieta con su borde de arriba JUSTO BAJO LA CABECERA y se
   vea el video entero (19-oct-2026; antes quedaba en top 0, con el video debajo de la cabecera). */
#MainContent:has(.sl-hero--portada) > .sl-oscura-primera.sl-revela {
  position: sticky !important;
  top: auto !important;
  bottom: var(--sl-revela-abajo, 0px);
}
/* 🔴 AIRE EN LA COSTURA BLANCO → CHAPA (Victor, 19-oct-2026: «de lo de famosos a la chapa lo
   veo muy junto»). En movil el video de la chapa empezaba en el borde mismo de la seccion, asi
   que el canto redondeado del blanco caia ENCIMA del video y por sus muescas se veia video, no
   negro. Ahora una franja negra de 32px a la vista (mas los 22 que se mete por debajo del
   blanco) separa una cosa de la otra. Va en relleno de la propia seccion, que pinta su negro:
   un margen dejaria ver el banner clavado detras. En ordenador la chapa ya trae 96px arriba. */
@media screen and (max-width: 749px) {
  #MainContent:has(.sl-hero--portada) > .sl-oscura-primera {
    padding-top: calc(var(--sl-solape, 22px) + 32px);
  }
}
/* Y debajo de la pared de famosos, algo mas de blanco antes del canto (40 → 56 en movil,
   64 → 80 en ordenador): las fotos se funden en el blanco y antes llegaban casi al borde. */
#MainContent:has(.sl-hero--portada) > [id*="wall_of_fame"] .sl {
  padding-bottom: 56px;
}
@media screen and (min-width: 750px) {
  #MainContent:has(.sl-hero--portada) > [id*="wall_of_fame"] .sl {
    padding-bottom: 80px;
  }
}

/* La ultima tarjeta blanca no necesita hueco: debajo ya empieza el negro. */
#MainContent:has(.sl-hero--portada) > .sl-ultima-blanca {
  margin-bottom: 0;
}

/* 🔴 EL BLOQUE NEGRO NO ACABA EN #MainContent. La newsletter no es una seccion
   de la portada: vive en el GRUPO DEL PIE, fuera de #MainContent (medido: main
   mide 5640 y despues cuelgan de <body> una seccion de 234 y el pie de 401).
   Por eso se quedaba blanca mientras todo lo demas ya era negro. */
body:has(.sl-hero--portada) .shopify-section-group-footer-group,
body:has(.sl-hero--portada) .shopify-section-group-footer-group [class*='color-'] {
  --color-background: 31, 29, 36;
  --gradient-background: rgb(31, 29, 36);
  --color-background-contrast: 71, 69, 76;
  --color-foreground: 255, 255, 255;
  --color-button: 255, 255, 255;
  --color-button-text: 31, 29, 36;
  --color-secondary-button: 31, 29, 36;
  --color-secondary-button-text: 255, 255, 255;
  --color-link: 255, 255, 255;
  background-color: rgb(31, 29, 36);
}

/* Dos fondos claros sueltos que no salen de ningun esquema:
   · el <video> de la chapa lo pinta la propia seccion con `background: ink`, y
     ahora ink es blanco, asi que dejaba un rectangulo blanco de 360x640;
   · las fotos de la tienda van en un contenedor con blanco a mano. */
#MainContent:has(.sl-hero--portada) > .sl-oscura .cv__video,
#MainContent:has(.sl-hero--portada) > .sl-oscura .imagenes-horizontal-a {
  background-color: rgb(31, 29, 36) !important;
}

/* El pie ya va en el esquema oscuro del tema: sobre este fondo va a sangre y
   sin canto, porque es la continuacion del bloque negro. */
body:has(.sl-hero--portada) .footer {
  border-radius: 0;
  box-shadow: none;
}
/* Fondo opaco detras de la cabecera flotante: tapa el canalon de 16px por el que
   se veia pasar el contenido. z-index -1 dentro del contexto de la cabecera, o
   sea por debajo de ella y por encima de #MainContent (que va con z-index 1). */
/* 🔴 EL CANALON VA EN SU PROPIO ELEMENTO, NO EN UN PSEUDO DE LA CABECERA.
   Estuvo un dia en `.section-header::before` — que es EXACTAMENTE donde vive el
   cristal de la barra— y le pisaba `opacity`, `position` y el fondo: en la
   portada el cristal desaparecia y el banner se veia crudo a traves del menu.
   Un elemento aparte no colisiona con nada. z-index 3: por debajo de la
   cabecera (5) y por encima de #MainContent (1). */
#sl-canalon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sl-techo, 97px);
  /* el mismo crema del ticker: asi el bloque de cabecera se lee como una sola
     barra clara sobre el negro, y el menu —texto y logo negros— sigue leyendose */
  background-color: rgb(241, 237, 231);
  z-index: 3;
  opacity: 0;
  transition: opacity 160ms linear;
  pointer-events: none;
}
body.sl-canalon #sl-canalon {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #sl-canalon { transition: none; }
}
}
#MainContent:has(.sl-hero--portada) > .sl-tapada {
  box-shadow: 0 80px 0 0 rgb(255, 255, 255);
}
#MainContent:has(.sl-hero--portada) > :last-child {
  box-shadow: 0 -10px 24px -10px rgba(20, 24, 26, 0.13);
}

.sl-hero {
  position: relative;
  width: 100%;
  background-color: var(--sl-hero-bg, #000000);
}
/* Sin la portada nueva no hay contenedor blanco que se monte sobre el banner:
   el solape vale 0 y el boton y los puntos no dejan una franja de mas abajo. */
.sl-hero:not(.sl-hero--portada) { --sl-solape: 0px; }

.sl-hero__viewport { position: relative; }

.sl-hero__track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Animamos el carril a mano, fotograma a fotograma. Si algo heredase
     scroll-behavior:smooth, cada escritura se suavizaria por su cuenta y
     perderiamos el control del movimiento. */
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sl-hero__track::-webkit-scrollbar { display: none; }

.sl-hero__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sl-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sl-hero-ar-d);
  min-height: var(--sl-hero-min-h-d, 0px);
}

/* ══════════════════════════════════════════════════════════════════════════
   ENCAJE «RECORTADA AL CENTRO» (prueba de formato, 14-sep-2026)
   Lo pide el formato nuevo: arte 2:1 en escritorio y 2:3 en movil, con tope de
   altura por pantalla para que el banner llene ~80% de la ventana sin estirarse
   en monitores grandes. Va detras de un ajuste porque cambia una promesa vieja
   de la seccion —«la foto se ve ENTERA»— y hay que poder volver con un clic.
   El tope se pone con `max-height` sobre la caja que ya lleva `aspect-ratio`:
   manda el ancho hasta que topa, y a partir de ahi recorta por arriba y abajo.
   ══════════════════════════════════════════════════════════════════════════ */
.sl-hero--recorta .sl-hero__media {
  /* 🔴 90%, NO 80% (Jorge, 14-sep: «el de pc creo que lo haria mas alto»). Con arte
     16:9 y este tope, a 1280 y 1440 —los dos portatiles mas comunes— el recorte es
     CERO y el banner llena el 90% de la ventana, dejando ~110px de la seccion
     siguiente asomando: lo justo para que se lea que hay mas abajo y funcione el
     efecto de que el contenedor blanco se lo come al bajar. Con 92% el asomo caia a
     83px en 1366x768 y se perdia ese aviso. Medido el 14-sep-2026 en nueve anchos. */
  max-height: 90vh;              /* respaldo para navegadores sin svh */
  max-height: 90svh;
}
.sl-hero--recorta .sl-hero__img { object-fit: cover; }
@media screen and (max-width: 899px) {
  /* 🔴 90%, NO 76% (22-sep-2026). El 76 venia calibrado para el cartel viejo, que
     era 4:5 y a 390px de ancho medía 487px: ahi el tope no llegaba a tocar nunca.
     El arte nuevo es 2:3 y mide 585px con ese mismo ancho, asi que el tope pasó a
     morder SIEMPRE en un telefono de verdad y recortaba la foto entre el 2,2% y el
     9,9% segun el modelo. En la vista de movil del ordenador no se veia porque ahi
     NO HAY BARRA DE DIRECCIONES: `svh` vale la pantalla entera y el tope no toca,
     que es justo por que la misma pagina se veia mejor en el emulador que en el
     movil. Medido el 22-sep con la altura visible real de cinco telefonos.
     A 90 no recorta en ninguno de los cinco, y el tope sigue de red por si algun
     dia se sube un arte mas alto o se mira en horizontal. */
  .sl-hero--recorta .sl-hero__media {
    max-height: 90vh;
    max-height: 90svh;
  }
}

.sl-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  /* 🔴 `contain`, no `cover`. La ficha manda: «la foto se ve ENTERA, sin
     recortar; cero pixeles perdidos». Con `cover` funcionaba solo porque las dos
     fotos estan exportadas justo al ratio en que se pintan: el dia que se suba
     una con otra proporcion, o que cambie el alto del banner, empezaria a
     recortar sin avisar. */
  object-fit: contain;
  object-position: center;
}

.sl-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: var(--sl-hero-scrim, none);
  pointer-events: none;
}

/* La capa clicable cubre la diapositiva entera. Va por DEBAJO del contenido
   (z-index 1 contra el 2 de `__inner`), y el contenido deja pasar el raton salvo
   en lo que de verdad es pulsable — asi el boton, las flechas y los puntos
   siguen funcionando y el resto del banner navega. */
/* 🔴 `display: block` NO SOBRA: `base.css:575` pone `a:empty{ display:none }` y
   este enlace esta vacio a proposito (es una capa, no un rotulo). Medido: salia
   0x0 y el banner no era clicable en ninguna parte. Es la trampa del tema que ya
   estaba documentada para `div:empty`, y muerde igual con `<a>`. */
.sl-hero__slide-link {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sl-hero__inner { pointer-events: none; }
.sl-hero__cta,
.sl-hero__badge,
.sl-hero__inner a,
.sl-hero__inner button { pointer-events: auto; }

.sl-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: var(--sl-hero-justify, flex-end);
  align-items: var(--sl-hero-items, flex-start);
  width: 100%;
  max-width: var(--sl-hero-rail, 1400px);
  margin-inline: auto;
  padding: var(--sl-hero-pad-y, 48px) var(--sl-hero-pad-x, 40px);
  /* 🔴 EL CONTENIDO SUBE LO QUE SE MONTA EL CONTENEDOR BLANCO. Sin esto, el
     contenedor se comia 10px del boton «Comprar ahora» en escritorio y 6 en movil
     ya en el primer pantallazo, antes de que nadie toque nada (medido el
     11-sep-2026). El banner no crece: `.sl-hero__inner` es absoluto con inset:0.
     Se suma al relleno que tenga puesto la seccion, no lo sustituye. */
  /* 🔴 `--sl-zapas-alto` LO ESCRIBE EL JS MIDIENDO LA TIRA. En modo franja (de
     canto a canto) la tira se planta justo donde acaba el bloque de texto y su
     alto NO es fijo: 44, 58 o 78px segun en cuantas lineas parta el nombre del
     producto, que cambia con el ancho de ventana Y con el nombre que tenga ese
     par. Medido el 22-sep: sin esto, entre 600 y 919px el texto y la tira se
     pisaban hasta 70px. En modo esquina vale 0 y aqui no suma nada. */
  padding-bottom: max(
    calc(var(--sl-hero-pad-y, 48px) + var(--sl-solape, 22px) + var(--sl-aire-banner, 0px)),
    calc(var(--sl-zapas-alto, 0px) + var(--sl-hueco-tira, 18px))
  );
  pointer-events: none;
}

.sl-hero__box {
  display: flex;
  flex-direction: column;
  align-items: var(--sl-hero-items, flex-start);
  gap: var(--sl-hero-gap, 24px);
  width: 100%;
  max-width: var(--sl-hero-box-w, 540px);
  text-align: var(--sl-hero-text, left);
}

.sl-hero__box > * { pointer-events: auto; }

.sl-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--badge-bg, #ffffff);
  color: var(--badge-color, #000000);
  font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sl-hero__rating { display: flex; align-items: center; gap: 8px; }
.sl-hero__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--stars-color, #ffffff); }
.sl-hero__star { flex: 0 0 auto; width: 16px; height: 16px; }

.sl-hero__rating-text {
  color: var(--rating-color, #ffffff);
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 1.2;
}

.sl-hero__heading {
  margin: 0;
  color: var(--h-color, #ffffff);
  font-family: var(--font-heading-family);
  font-size: var(--h-size, 52px);
  font-weight: 700;
  line-height: var(--h-leading, 1.05);
  letter-spacing: var(--h-track, -1px);
}

/* 🔴 EL SUBTITULO ES EL PIE DEL TITULAR, NO UN BLOQUE SUELTO. `--sl-hero-gap`
   separa por igual los tres bloques (titular, subtitulo y boton), y con el mismo
   aire antes del boton que entre las dos lineas de texto, el par se leia partido
   (Zyon, 22-sep: «los dos textos mas juntos, que no haya tanto espacio entre
   ellos»). El ajuste de la seccion no daba para esto: su minimo es 8px y solo
   habria ganado 2. Aqui se le descuenta el hueco general y se le pone el suyo.
   Efecto secundario buscado: el par se queda mas abajo, que es lo otro que pidio
   («bajaria el texto del hunt, encima hay una sombra de la arena» (medida el
   22-sep): la sombra va de y=300 a y=330 con 2,7-4,1:1, y de ahi para abajo
   la arena esta a 9-11:1. */
.sl-hero__heading + .sl-hero__text {
  margin-top: calc(var(--sl-hero-par, 4px) - var(--sl-hero-gap, 24px));
}

.sl-hero__text {
  color: var(--t-color, #ffffff);
  font-family: var(--font-body-family);
  font-size: var(--t-size, 17px);
  font-weight: var(--t-weight, 400);
  line-height: 1.45;
  letter-spacing: var(--t-track, 0px);
}

.sl-hero__text--upper { text-transform: uppercase; }
.sl-hero__text > :first-child { margin-top: 0; }
.sl-hero__text > :last-child { margin-bottom: 0; }

.sl-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: var(--cta-py, 14px) var(--cta-px, 44px);
  border-radius: var(--cta-radius, 12px);
  font-family: var(--font-button-family, var(--font-body-family));
  font-size: var(--cta-size, 16px);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.sl-hero__cta--solid { background: var(--cta-bg, #ffffff); color: var(--cta-color, #000000); border: 1px solid transparent; }
/* 🔴 EL BOTON, DEL MISMO MATERIAL QUE LA CABECERA. Jorge, 7-sep-2026: «hacerlo
   del mismo color que header». Es la receta de la casa (REFERENCIA-VISUAL.md):
   velo blanco al 50%, degradado horizontal, blur(21px) y filo blanco al 10%.
   Ventaja sobre elegir un color que combine con ESTA foto: funciona con
   cualquier campaña sin volver a tocarlo. El filo va en sombra interior porque
   Chrome recorta el backdrop-filter a la caja de relleno. */
.sl-hero__cta--cristal {
  background-color: rgba(255, 255, 255, 0.50);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(21px);
  backdrop-filter: blur(21px);
  /* 🔴 NEGRO DE MARCA, NO `#1f1d24`. El manual v2.0 retira ese tono y lo prohibe
     expresamente («retirados y prohibidos: #1f1d24, #121212 y los rosas y azules
     heredados del tema»). La marca es #000000 y #FFFFFF. */
  color: #000000;
  border: 0;
  /* 🔴 EL FILO DE LA RECETA VA AL REVES SOBRE FONDO CLARO. El filo original es
     `rgba(255,255,255,.10)`: nace de la cabecera de EME, que flota sobre
     contenido oscuro, y alli un hilo de luz es lo que separa el cristal del
     fondo. Aqui el cristal cae sobre ARENA CLARA y ese hilo blanco no separa
     nada: medido el 22-sep, el boton contra la arena de al lado daba 1,66:1 en
     escritorio y 1,68:1 en movil, cuando un control necesita 3:1. El texto se
     leia perfecto (13:1) pero no habia forma de ver que era un boton.
     Se conserva el material (velo, degradado horizontal, blur 21, sombra corta)
     y se le anade el aro oscuro, que es el mismo filo del 10% leido sobre claro.
     0,40 y no 0,30: con el arte corregido del 22-sep la arena de debajo del boton
     es mas clara y el aro se quedaba en 3,10:1 a 1440, pegado al minimo de 3. En
     una foto eso no es margen: basta que el boton caiga un palmo mas alla. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 2px 6px 0 rgba(0, 0, 0, 0.16);
}
.sl-hero__cta--cristal:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.62); }
@media (prefers-reduced-transparency: reduce) {
  .sl-hero__cta--cristal {
    background-image: none;
    background-color: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* 🔴 CRISTAL OSCURO: EL MATERIAL DEL PANEL DE «SHOP THE LOOK». Jorge, 28-sep-2026:
   «me gusta mucho el estilo... aplicalo al boton de comprar del banner, tal cual,
   con ese efecto». Alli el fondo es la foto del look desenfocada y oscurecida
   (`blur(18px) brightness(.42) saturate(1.3)`), con un velo blanco al 8% y filos
   interiores de luz. Aqui detras del boton YA esta la foto, asi que el mismo
   efecto es un `backdrop-filter` con esos mismos tres valores: el boton toma el
   color de la zona del banner que tiene debajo, a oscuras.
   Receta en REFERENCIA-VISUAL.md («La receta del cristal OSCURO»).
   El radio sigue saliendo del ajuste (2px, el de la marca para botones). */
.sl-hero__cta--oscuro {
  color: #FFFFFF;
  /* 🔴 EL OSCURECIDO VA EN EL COLOR, NO EN EL backdrop-filter (14-oct-2026). En el WebKit del
     Mac (el motor de Safari) el `brightness` del desenfoque no se aplicaba: el boton salia casi
     transparente y «COMPRAR» en blanco apenas se leia sobre la arena. Oscurecer a .42 es una
     capa negra al 58%; con el velo blanco del 8% encima, las dos juntas son rgba(33,33,33,.61).
     Igual que la receta donde el desenfoque funciona, y legible donde no. */
  background-color: rgba(33, 33, 33, 0.61);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12);
}
/* 🔴 EL HOVER NO TOCA LA OPACIDAD: sobre una superficie con `backdrop-filter`, bajar
   la opacidad deja la capa lavada (regla de la casa). Se aclara el velo. */
.sl-hero__cta--oscuro:hover { opacity: 1; background-color: rgba(63, 63, 63, 0.65); } /* velo al 16% sobre el mismo negro */
.sl-hero__cta--oscuro:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}
@media (prefers-reduced-transparency: reduce) {
  .sl-hero__cta--oscuro {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #1A191C;
  }
}
.sl-hero__cta--outline { background: transparent; color: var(--cta-color, #ffffff); border: 1px solid currentColor; }
.sl-hero__cta:hover { opacity: 0.88; }
.sl-hero__cta-arrow { flex: 0 0 auto; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.sl-hero__cta:hover .sl-hero__cta-arrow { transform: translateX(4px); }

.sl-hero__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  /* 🔴 MISMO MATERIAL Y MISMO RADIO QUE EL BOTON. Jorge, 7-sep-2026: «los
     botones ponlos en ese liquid glass tamb». Eran circulos blancos solidos: la
     unica forma redonda de toda la tienda y lo mas ruidoso de la pantalla. Ahora
     son el vidrio de la casa, y el radio lo heredan del CTA (--cta-radius) para
     que flecha y boton sean la misma familia. */
  border-radius: var(--cta-radius, 12px);
  background-color: rgba(255, 255, 255, 0.50);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(21px);
  backdrop-filter: blur(21px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 2px 2px 0 rgba(0, 0, 0, 0.10);
  color: rgb(31, 29, 36);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.2s ease;
}

/* El vidrio necesita un fondo detras. Si el sistema pide menos transparencia,
   se cae a blanco solido —igual que hace el CTA—. */
@media (prefers-reduced-transparency: reduce) {
  .sl-hero__nav {
    background-image: none;
    background-color: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.sl-hero__viewport:hover .sl-hero__nav { opacity: 0.92; }
.sl-hero__viewport:hover .sl-hero__nav:hover,
.sl-hero__nav:focus-visible { opacity: 1; }
.sl-hero__nav:hover { background-color: rgba(255, 255, 255, 0.62); }
/* (Ya no hay flechas apagadas: el carrusel da la vuelta y las dos siempre
   llevan a algun sitio.) */
.sl-hero__nav--prev { left: 16px; }
.sl-hero__nav--next { right: 16px; }

.sl-hero__dots {
  position: absolute;
  left: 50%;
  /* 🔴 EN LA FRANJA LIBRE ENTRE EL BOTON Y EL CONTENEDOR. Subirlos el solape
     entero los planto ENCIMA del texto del boton en movil —se leia «Comprar
     ▬ora»—, porque ahi el banner es mas bajo y el boton cae mas abajo. Medido:
     boton y 423–472 y puntos y 448–456, dentro de su caja. Con el contenido ya
     subido quedan 16px de aire entre el pie del boton y el contenedor: los
     puntos van ahi, a 4px de cada lado. */
  bottom: calc(var(--sl-solape, 22px) + 4px + var(--sl-aire-banner, 0px));
  z-index: 3;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.sl-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sl-nav-color, #000000);
  /* 🔴 EL PUNTO INACTIVO NO SE VEIA. Al 35% de negro sobre el corcho del banner
     daba 1,7:1 de contraste: invisible, y por eso el activo parecia una pastilla
     negra suelta, como un resto de pintado. Lo senalaron dos auditorias.
     Se arregla con un filete claro alrededor —que funciona sea cual sea el color
     que elijas en el editor— y subiendo algo la opacidad, en vez de imponer un
     color nuevo. */
  /* 🔴 LA OPACIDAD VA EN EL RELLENO, NO EN EL ELEMENTO. Con `opacity` en el
     elemento, el filete blanco se apagaba con el: medido, 1,77:1 en movil. Con el
     elemento opaco, el filete sale entero y es el que hace visible el punto sea
     cual sea la foto. */
  opacity: 1;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92), 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: opacity 0.25s ease, width 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.sl-hero__dot:not(.is-active) {
  /* el inactivo se aclara mezclando su color con transparencia, no bajando la
     opacidad del elemento, que se llevaria por delante el filete */
  background: color-mix(in srgb, var(--sl-nav-color, #000000) 55%, transparent);
}
.sl-hero__dot.is-active { width: 24px; opacity: 1; }

@media screen and (max-width: 899px) {
  /* 🔴 EN MOVIL, CERO AIRE. El arte del cartel llega casi al borde de abajo: con
     44px el boton se metia sobre el «10%» y hasta con 12 tapaba el «OFF». Aqui
     el aire solo se puede ganar haciendo el banner mas alto, que es un ajuste de
     encuadre y no un espaciado. Medido el 11-sep-2026. */
  .sl-hero { --sl-aire-banner: 0px; }

  .sl-hero__media {
    aspect-ratio: var(--sl-hero-ar-m);
    min-height: var(--sl-hero-min-h-m, 0px);
  }

  .sl-hero__inner {
    --sl-aire-banner: 0px;
    justify-content: var(--sl-hero-justify-m, flex-end);
    align-items: var(--sl-hero-items-m, center);
    padding: var(--sl-hero-pad-y-m, 24px) var(--sl-hero-pad-x-m, 20px);
    padding-bottom: max(
      calc(var(--sl-hero-pad-y-m, 24px) + var(--sl-solape, 22px) + var(--sl-aire-banner, 0px)),
      calc(var(--sl-zapas-alto, 0px) + var(--sl-hueco-tira, 18px))
    );
  }

  .sl-hero__box {
    align-items: var(--sl-hero-items-m, center);
    max-width: 100%;
    text-align: var(--sl-hero-text-m, center);
  }

  .sl-hero__heading { font-size: var(--h-size-m, 32px); }
  .sl-hero__text { font-size: var(--t-size-m, 15px); }
  .sl-hero__cta {
    font-size: var(--cta-size-m, var(--cta-size, 16px));
    padding: var(--cta-py-m, var(--cta-py, 14px)) var(--cta-px-m, var(--cta-px, 44px));
  }
  .sl-hero__cta--full-m { align-self: stretch; width: 100%; }
  .sl-hero__nav { display: none; }
  /* mismo criterio que en escritorio: la franja la fija `--sl-solape` */
  /* 🔴 EN MOVIL EL AIRE TIENE QUE SER MENOR. Con los 44px de escritorio, el boton
     subia hasta 357 y se metia encima del «10% OFF» del cartel: ahi el banner es
     mas bajo y el arte llega mas abajo. Medido el 11-sep-2026. */
  .sl-hero__dots { bottom: calc(var(--sl-solape, 22px) + 4px + var(--sl-aire-banner, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero__cta,
  .sl-hero__cta-arrow,
  .sl-hero__dot { transition: none; }
  .sl-hero__cta:hover .sl-hero__cta-arrow { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZAPATILLAS DENTRO DEL BANNER (Jorge, 14-sep-2026)
   Tarjeta horizontal: foto + nombre + precio. Compacta a proposito — es un
   atajo del banner a la ficha, no una rejilla de producto.
   ══════════════════════════════════════════════════════════════════════════ */
/* 🔴 LA TIRA VA FLOTANDO SOBRE LA FOTO, NO EN EL FLUJO (Jorge, 14-sep-2026:
   «en ordenador ponlo en esta zona de abajo a la derecha del banner y en movil
   sube las tarjetas para que se queden dentro del banner»). Al ir `absolute`
   dentro de `.sl-hero` —que ya es `relative`— el banner recupera su altura
   natural: la que manda la proporcion de la foto. Nada se recorta ni crece. */
.sl-hero__zapas {
  position: absolute;
  /* 🔴 POR ENCIMA DE LA CAPA CLICABLE DEL BANNER. `.sl-hero__slide-link` cubre la
     diapositiva entera con z-index 1 y `.sl-hero__inner` va en 2. Sin este 4 el
     clic en una tarjeta se lo llevaria el banner en vez del producto. */
  z-index: 4;
  /* POR DEFECTO, FRANJA DE CANTO A CANTO al pie del banner. El modo «esquina de
     abajo a la derecha» lo enciende el <style> de la seccion cuando la ventana da
     de si para las N tarjetas que haya puestas. `--sl-zapas-solape` es la
     separacion del canto de abajo. */
  left: 0;
  right: 0;
  bottom: calc(var(--sl-solape, 22px) + var(--sl-zapas-solape, 28px));
  max-width: none;
}

.sl-hero__zapas-pista {
  list-style: none;
  margin: 0;
  /* 🔴 SIN ESTO EL MARGEN IZQUIERDO DESAPARECE. Medido el 14-sep-2026 en movil:
     la tira cargaba con `scrollLeft: 20` —exactamente el relleno— porque
     `scroll-snap-align: start` alinea el borde de la tarjeta con el borde del
     scrollport e ignora el relleno. La primera tarjeta salia pegada al canto de
     la pantalla. `scroll-padding` le dice al enganche donde esta el margen. */
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
  align-items: stretch;
  /* 🔴 `safe center`, NO `center` a secas. Con desbordamiento, centrar recorta por
     el PRINCIPIO y las primeras tarjetas quedan inalcanzables con scroll. `safe`
     cae a `flex-start` en cuanto no caben. (En modo esquina pasa a `safe flex-end`.) */
  justify-content: safe center;
}
.sl-hero__zapas-pista::-webkit-scrollbar { display: none; }

.sl-hero__zapa {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* 🔴 TODAS LA MISMA ALTURA. Medido el 14-sep-2026 en movil: el titulo del
     primer par ocupaba 3 lineas y los otros 2, y la fila salia con una tarjeta
     de 74px junto a tres de 70. `stretch` en la pista + `height:100%` aqui hace
     que la mas alta marque la fila y las demas la acompanen. */
  display: flex;
}
.sl-hero__zapa > .sl-hero__zapa-enlace { height: 100%; }

/* 🔴 CRISTAL DE LA CASA (Jorge, 14-sep-2026: «que tuviesen estilo glassmorfismo
   como el header»). Es la receta de `REFERENCIA-VISUAL.md`, copiada, no
   reinventada: velo blanco + degradado HORIZONTAL + blur(21px) + filo al 10% +
   radio 2 + sombra corta.
   🔴 EL VELO NO ES EL 0,50 DE LA CABECERA. La regla 1 de la ficha manda calibrar
   al fondo real, y aqui el fondo no es el crema del anuncio sino el corcho con la
   suela negra de la zapatilla encima. Muestreado el 14-sep-2026 bajo la propia
   tira: el pixel mas oscuro es negro puro en escritorio, y con velo 0,50 el texto
   se queda en 4,22:1 — pasa AA por los pelos y se cae en cuanto cambie la foto.
   Con 0,72 sube a 7,95:1 en escritorio y 8,77:1 en movil, que es el 7:1 que pide
   la casa para cristal. */
.sl-hero__zapa-enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 🔴 204, NO 252 (Jorge, 14-sep: «en la pantalla del mac... sale como muy
     apretado»). Medido a 1440 —su portatil—: con 252 y hueco de 10 la fila ocupaba
     1038px, el 72% del banner, y se leia como una banda maciza pegada a la
     zapatilla. Con 204 y hueco de 18 baja a 870 (60%) y se leen sueltas. En su
     monitor de 2033 la misma fila pasa del 51% al 43%. */
  width: 204px;
  padding: 8px 12px 8px 8px;
  background-color: rgba(255, 255, 255, 0.72);
  /* `to right`, nunca diagonal: un degradado en diagonal reparte el blanco segun
     la proporcion de la caja y dos piezas del mismo ancho dejarian de casar. */
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: blur(21px);
  backdrop-filter: blur(21px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* 🔴 12px, NO los 2px de la casa (Jorge, 14-sep-2026: «redondea mas los
     bordes», con la tarjeta de adobe.com de referencia). Queda anotado que la
     ficha de marca manda 2px para lo interactivo y reserva los radios grandes a
     contenedores de imagen; aqui gana la decision de Jorge. El 12 no es a ojo: es
     el radio que ya llevan las tarjetas de producto de la portada
     (`sl-tarjetas.css`), asi que las dos piezas siguen siendo del mismo sistema. */
  border-radius: 12px;
  /* Sombra CORTA. En cristal nunca difusa: `0 10px 22px` se lee como acabado de IA. */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
  text-decoration: none;
  color: rgb(var(--color-foreground));
  transition: box-shadow 140ms linear;
}
/* La barra de tiempo se ancla a la tarjeta y se recorta con su radio. */
.sl-hero__zapa-enlace { position: relative; overflow: hidden; }

/* ══ MODO MANDO: las tarjetas SON el carrusel ═══════════════════════════════
   La activa se levanta del resto subiendo el velo —no con sombra ni con
   escala: en cristal la jerarquia se hace con material, no con elevacion. */
.sl-hero__zapas--mando .sl-hero__zapa-enlace { cursor: pointer; }
/* 🔴 LA INACTIVA NO BAJA DE 0,72. Lo puse en 0,52 para separarla de la activa y el
   nombre se cayo a 5,87:1 sobre la parte oscura de la foto —medido el 14-sep—. El
   velo minimo para el 7:1 de la casa sobre este fondo es 0,70, asi que la jerarquia
   la hace la activa SUBIENDO, no la inactiva bajando. Lo que de verdad marca cual
   esta activa es la barra de tiempo. */
.sl-hero__zapas--mando .sl-hero__zapa:not(.is-active) .sl-hero__zapa-enlace {
  background-color: rgba(255, 255, 255, 0.72);
}
.sl-hero__zapas--mando .sl-hero__zapa.is-active .sl-hero__zapa-enlace {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.45);
}

/* 🔴 LA BARRA ES LA CUENTA ATRAS DEL CARRUSEL, NO UN ADORNO. Va con
   `transform: scaleX` y no con `width` para que anime en la capa de composicion
   y no provoque reflow 60 veces por segundo debajo de un `backdrop-filter`. */
.sl-hero__zapa-tiempo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgb(var(--color-foreground));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.sl-hero__zapas--mando .sl-hero__zapa.is-active .sl-hero__zapa-tiempo {
  animation: sl-zapa-tiempo var(--sl-zapas-ms, 8000ms) linear forwards;
}
/* Con el raton encima, la cuenta se congela donde este: si no, mirar una
   zapatilla te echaba de su banner a los pocos segundos. */
.sl-hero__zapas--mando:hover .sl-hero__zapa.is-active .sl-hero__zapa-tiempo,
.sl-hero__zapas--mando:focus-within .sl-hero__zapa.is-active .sl-hero__zapa-tiempo {
  animation-play-state: paused;
}
@keyframes sl-zapa-tiempo {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Sin autoplay no hay cuenta que enseñar. */
.sl-hero__zapas--sin-tiempo .sl-hero__zapa-tiempo { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sl-hero__zapa-tiempo { display: none; }
}

/* En cristal el hover es un LAVADO del color de texto, no una elevacion. */
.sl-hero__zapa-enlace:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10), inset 0 0 0 999px rgba(var(--color-foreground), 0.06);
}
.sl-hero__zapa-enlace:focus-visible {
  /* 🔴 NUNCA el naranja de marca: es senal comercial y nada mas (manual v2.0). */
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 2px;
}
/* 🔴 REGLA 6 DE LA FICHA, INNEGOCIABLE. Quien pida menos transparencia ve una
   superficie solida: el efecto es prescindible, la legibilidad no. */
@media (prefers-reduced-transparency: reduce) {
  .sl-hero__zapas--mando .sl-hero__zapa:not(.is-active) .sl-hero__zapa-enlace { background-color: #F1EDE7; }
  .sl-hero__zapas--mando .sl-hero__zapa.is-active .sl-hero__zapa-enlace { background-color: #FFFFFF; }
  .sl-hero__zapa-enlace {
    background-color: #FFFFFF;
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(20, 24, 26, 0.10);
  }
}

/* 🔴 SIN FONDO Y EN 3:4 (Jorge, 14-sep-2026: «quitale el cuadrado que esta detras
   de la foto, para que asi se vea que es una foto 3:4 y no 1:1»). La caja era
   68x68 y la foto, en 4:5 (1280x1600, medido), se metia dentro con `contain`: lo
   que se leia como cuadrado no era la foto, era MI fondo translucido de 68x68.
   Quitado el fondo y puesta la caja en 3:4 —la proporcion de toda la tienda— la
   foto manda su propia silueta. De paso el nombre gana 17px de caja. */
.sl-hero__zapa-foto {
  flex: 0 0 auto;
  /* 45x60: al quitar el precio, la foto era lo unico que estiraba la tarjeta a 86px
     con el texto ocupando 60. Bajandola, la tarjeta cae a ~76 y pesa menos. */
  width: 45px;
  height: 60px;
  border-radius: 8px;
  background: none;
  overflow: hidden;
  display: block;
}
.sl-hero__zapa-foto img {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain` como en toda la tienda: las fotos de producto ocupan del 24% al
     100% del encuadre y `cover` recortaria unas y dejaria otras diminutas. */
  object-fit: contain;
}

.sl-hero__zapa-datos {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.sl-hero__zapa-nombre {
  font-size: 12px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: -webkit-box;
  /* 🔴 TRES LINEAS, NO DOS. Medido el 14-sep-2026: los titulos de la coleccion
     miden de 48 a 60 caracteres y COMPARTEN prefijo («Air Jordan 1 Retro Low OG
     SP Travis Scott ...»). Con dos lineas los cuatro se cortaban exactamente en
     «Travis...» y las tarjetas quedaban indistinguibles: lo que identifica el par
     —«Shy Pink», «Canary», «Archive Alaska»— va al FINAL del titulo. Con tres
     lineas de 12px en una caja de ~155px entran ~66 caracteres y caben enteros. */
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sl-hero__zapa-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.2;
}
.sl-hero__zapa-ahora { font-weight: 600; }
.sl-hero__zapa-antes {
  font-size: 12px;
  /* 🔴 SUBIDO DE 0,55 A 0,80. Sobre blanco opaco el 0,55 daba de sobra; sobre el
     cristal (superficie compuesta ~rgb(179,179,179) en el peor caso) se quedaba en
     2,85:1. La ficha avisa justo de esto: «ojo con los grises al 60-65%, que es
     donde se cae». Con 0,80 subia a 5,6:1 —AA, pero no el 7:1 que pide la casa
     para cristal—; con 0,92 llega a 7,1. La jerarquia la carga el tachado y el
     cuerpo mas pequeno, no el gris. Medido el 14-sep-2026. */
  color: rgba(var(--color-foreground), 0.92);
}

@media (max-width: 749px) {
  /* MOVIL: de canto a canto y DENTRO del banner. La banda que ocupaba el boton
     —medida el 14-sep en 390x844: y 401-450— es justo la que dejan libre las
     tarjetas al esconderlo. */
  /* 🔴 LA TARJETA DE MOVIL ES MAS ANCHA Y MAS BAJA A PROPOSITO. Medido el
     14-sep-2026 muestreando los pixeles de la foto en 390x844: la tipografia
     «10% OFF» acaba en y=406 y el canto visible del banner esta en 466 —el
     contenedor blanco se come los ultimos 22—, o sea que la banda limpia es de
     56px. La tarjeta de antes media 72 y se comia 21px del «OFF». Ensanchandola
     a 280 el nombre entra en DOS lineas en vez de tres y la tarjeta baja a ~60,
     que si cabe. La foto tambien baja a 48 para no ser ella quien marque el alto. */
  /* Jorge, 14-sep: «tienen que tener mas espacio por abajo». Se puede subir
     porque el cristal deja pasar el arte en vez de taparlo. */
  .sl-hero__zapas { bottom: calc(var(--sl-solape, 22px) + 16px); }
  .sl-hero__zapas-pista { gap: 10px; justify-content: safe flex-start; }
  .sl-hero__zapa-enlace { width: 280px; gap: 9px; padding: 6px 12px 6px 6px; }
  .sl-hero__zapa-foto { width: 33px; height: 44px; }
  .sl-hero__zapa-nombre { font-size: 11.5px; -webkit-line-clamp: 2; }
  .sl-hero__zapa-precio { font-size: 12.5px; }

  /* 🔴 CON DOS TARJETAS, SE REPARTEN EL ANCHO (24-sep-2026). Dos de 280 no caben
     en 390: la segunda asomaba cortada («Air Jor... Pink») y, cuando le tocaba el
     turno, su barra de tiempo corria fuera de la pantalla. La tira no se desplaza
     sola hacia la activa. A medias, cada una mide ~174px en 390 y ~139 en 320.
     Tres lineas de nombre y no dos: lo que distingue el par («Tropical Pink») va
     al final del titulo. No crece la tarjeta: 3 x 11,5 x 1,22 = 42px, y la foto
     ya mide 44. Con tres o mas tarjetas sigue la tira que se arrastra. */
  .sl-hero__zapas--dos .sl-hero__zapa { flex: 1 1 0; min-width: 0; }
  .sl-hero__zapas--dos .sl-hero__zapa-enlace { width: 100%; }
  .sl-hero__zapas--dos .sl-hero__zapa-nombre { -webkit-line-clamp: 3; }
}

/* 🔴 A 320px LA BANDA LIMPIA SON 45px. El banner mide 400 ahi, el arte acaba al
   83,2% (y=333, muestreado por pixeles) y el canto visible esta en 378. Con la
   tarjeta de 60 se comia 17px del «OFF». Apretandola —foto 36, nombre a 10px—
   el mordisco baja a la mitad. Es el unico tramo donde hay que bajar tanto el
   cuerpo de letra: por encima de 360 manda la regla de arriba. */
@media (max-width: 360px) {
  .sl-hero__zapa-enlace { width: 268px; padding: 5px 10px 5px 5px; gap: 8px; }
  .sl-hero__zapa-foto { width: 24px; height: 32px; }
  .sl-hero__zapa-nombre { font-size: 10px; }
  .sl-hero__zapa-precio { font-size: 11px; }
  .sl-hero__zapa-antes { font-size: 10px; }
}

/* El enlace de reserva: invisible pero enfocable y anunciable. Es el unico camino
   de teclado al destino del banner mientras el boton este escondido. */
.sl-hero__cta-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 750px) {
  /* En escritorio el boton se ve, asi que este duplicaria la parada de tabulador. */
  .sl-hero__cta-oculto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero__zapa-enlace { transition: none; }
}

/* 🔴 SIN TEXTO EN MOVIL, POR DIAPOSITIVA (24-sep-2026): opcion «Ocultos» del ajuste
   «Titular y texto en movil». Hay fotos de movil que no
   dejan hueco: en la de la Travis Pink el titular caia encima de las zapatillas y
   del monopatin de cuadros, tapando el producto y sin leerse. La maqueta del
   diseñador ya lo resolvia asi: en movil, solo el boton.
   El corte es 899px y NO el de 749 del resto de la seccion: tiene que coincidir con
   el `<source media="(max-width: 899px)">` que cambia a la foto de movil. Con otro
   corte habria una franja de anchos con la foto de movil y el texto encima. */
@media screen and (max-width: 899px) {
  .sl-hero__slide--sin-texto-movil .sl-hero__heading,
  .sl-hero__slide--sin-texto-movil .sl-hero__text,
  .sl-hero__slide--sin-texto-movil .sl-hero__badge,
  .sl-hero__slide--sin-texto-movil .sl-hero__rating {
    display: none;
  }
}

/* 🔴 TITULAR ARRIBA EN MOVIL, POR DIAPOSITIVA (24-sep-2026). Jorge quiere el texto
   de la Travis Pink tambien en movil. Abajo tapaba las zapatillas; arriba a la
   izquierda cae sobre la pared clara de la foto, justo debajo de la cabecera. El
   boton NO sube: se queda donde estaba, encima de las tarjetas.
   🔴 EL TITULAR VA EN COLUMNA ESTRECHA DE TRES LINEAS («NOT YOUR / BASIC / PINK»).
   La foto solo deja libre para tinta negra el 70% del ancho hasta el 25% de su
   altura (luego empieza el pelo), y del 28% hacia abajo solo el 34-43% (portatil,
   rodilla y vaquero). En dos lineas, «BASIC PINK» llegaba al 42% y en los moviles
   BAJOS se hundia en el vaquero: el tope de 90svh recorta la foto 2:3 por arriba
   y por abajo y la sube, pero el texto no se mueve. Medido con el alto visible
   real (con la barra del navegador): a 375x553 la «K» salia a 1,2:1. En 5,3em
   «NOT YOUR» cabe (5,04em) y «BASIC PINK» no (5,54em), asi que parte en tres y
   ninguna linea pasa del 40%. Medido palabra a palabra en 40 tamaños: toda la
   tinta por encima de 3:1 en el titular y de 4,5:1 en el subtitulo, salvo
   320x460 (iPhone SE de 2016 con la barra puesta), donde no hay sitio.
   🔴 POR DEBAJO DE 390 EL TITULAR ENCOGE CON LA FOTO: la cabecera mide lo mismo en
   todos los moviles pero la foto no. `--h-size-m-n` es el ajuste de tamaño sin
   unidad, asi la escala sigue al editor en vez de a un 26 escrito aqui. El
   subtitulo va en `em` y no en %: con % a 320 se partia con «OUT.» suelto.
   🔴 A LA IZQUIERDA SIEMPRE, aunque la seccion este centrada en movil: centrada, la
   columna caia sobre la cara del modelo.
   🔴 EN HORIZONTAL, SOLO EL BOTON. El banner mide 290-370px de alto: titular,
   subtitulo y boton no caben entre la cabecera y las tarjetas, y el boton se
   metia debajo de la tira (a 568x320 un toque en «COMPRAR» llevaba a la
   coleccion de One Piece). Ahi vuelve a ser lo que era: solo el boton, 100% pulsable.
   El techo es `--sl-techo`, el pie de la cabecera flotante que mide el JS de esta
   seccion (97px en movil). Mismo corte de 899px que la foto de movil. */
@media screen and (max-width: 899px) and (orientation: portrait) {
  .sl-hero__slide--texto-arriba-movil .sl-hero__inner {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: calc(var(--sl-techo, 97px) + 16px);
  }
  .sl-hero__slide--texto-arriba-movil .sl-hero__box {
    flex: 1 1 auto;
    align-items: flex-start;
    text-align: left;
  }
  .sl-hero__slide--texto-arriba-movil .sl-hero__heading {
    font-size: min(var(--h-size-m, 32px), calc(var(--h-size-m-n, 26) * 100vw / 390));
    max-width: 5.3em;
  }
  .sl-hero__slide--texto-arriba-movil .sl-hero__text {
    max-width: 9em;
    text-wrap: balance;
  }
  .sl-hero__slide--texto-arriba-movil .sl-hero__cta { margin-top: auto; }
  /* «Arriba, a todo el ancho» (25-oct, banner de las Voodoo en el cine): el techo de la foto es
     negro de lado a lado, así que no hace falta la columna del 40 %. Con ella, «HALLOWEEN.» no
     cabía en 5,3em y se partía a mitad de palabra. Todo lo demás, igual que «arriba». */
  .sl-hero__slide--texto-ancho-movil .sl-hero__heading,
  .sl-hero__slide--texto-ancho-movil .sl-hero__text { max-width: none; }
}
@media screen and (max-width: 899px) and (orientation: landscape) {
  .sl-hero__slide--texto-arriba-movil .sl-hero__heading,
  .sl-hero__slide--texto-arriba-movil .sl-hero__text,
  .sl-hero__slide--texto-arriba-movil .sl-hero__badge,
  .sl-hero__slide--texto-arriba-movil .sl-hero__rating {
    display: none;
  }
}
/* END_SECTION:sl-hero-banner */

/* START_SECTION:sl-marcas (INDEX:99) */
/* ============================================================================
   NUESTRAS MARCAS
   Sin cristal: esta seccion cae en la banda oscura de la portada (#1F1D24) y lo
   que manda es la fotografia. El cristal es para piezas que flotan SOBRE una
   foto, no para una rejilla de fotos.
   ============================================================================ */
.sl-marcas{ }
.sl-marcas__titulo{
  margin: 0 0 22px;
  font-size: 2.2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media screen and (min-width: 750px){
  .sl-marcas__titulo{ font-size: 2.8rem; margin-bottom: 28px; }
}

.sl-marcas__lista{
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 750px){
  .sl-marcas__lista{ gap: 16px; }
}

.sl-marcas__item{ min-width: 0; }

.sl-marcas__enlace{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}

/* 🔴 EL ANILLO DE FOCO, DECLARADO AQUI Y POR DENTRO.
   Dawn quita el anillo del enlace de la ficha (`.card__heading a:focus{outline:0}`)
   y lo pinta en un `::after` del titulo. Esta seccion no usa ese marcado, asi que
   si no se declara aqui no hay anillo. Va con `outline-offset` NEGATIVO para que
   caiga sobre la foto y no pueda recortarlo ningun contenedor: la misma trampa
   que dejo sin anillo a la fila de producto del Wall of Fame (17-sep). */
.sl-marcas__enlace:focus-visible{
  outline: 2px solid rgb(var(--color-background));
  outline-offset: -4px;
  box-shadow: 0 0 0 2px rgba(var(--color-foreground), .9);
}

.sl-marcas__foto{
  display: block;
  position: relative;
  /* 4:5 vertical. Las fotos de Nike y Air Jordan ya vienen a 1080x1350, que es
     exactamente esta proporcion; Adidas (1:1) recorta por los lados y Yeezy
     (3:4) por arriba y abajo. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background-color: rgba(var(--color-foreground), .06);
}
.sl-marcas__foto img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La zapatilla suele estar en la mitad inferior de estas fotos (son pies). */
  object-position: center 55%;
  transition: opacity .25s ease;
}

/* 🔴 EL HOVER BAJA LA OPACIDAD Y NO AGRANDA NADA. Regla de la ficha de la casa:
   «Al pasar el ratón: baja ligeramente la opacidad. Nada de agrandar.» Ademas
   Footdistrict, que es la referencia mas cercana a esto, no pone hover ninguno;
   un zoom aqui seria un adorno importado. */
@media (hover: hover){
  .sl-marcas__enlace:hover .sl-marcas__foto img{ opacity: .82; }
  .sl-marcas__enlace:hover .sl-marcas__cuenta{ opacity: 1; }
}

.sl-marcas__sinfoto{
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-foreground), .08);
}

.sl-marcas__pie{
  display: block;
  padding: 12px 2px 0;
}

/* 0,62 sobre la banda oscura da 7,0:1 medido, que es el liston de la casa para
   texto pequeno. No bajar de ahi. */
.sl-marcas__cuenta{
  display: block;
  font-size: 1.2rem;
  letter-spacing: .02em;
  opacity: .62;
  transition: opacity .25s ease;
}

/* 🔴 EL BOTON DE CRISTAL OSCURO, receta de «Shop the look» (14-oct-2026). Va SOBRE la foto,
   asi que el cristal es un `backdrop-filter` con los mismos tres valores que el panel
   (blur 18, brillo .42, saturacion 1.3): toma el color de lo que tiene detras. Velo blanco
   finisimo y filos de luz por dentro, texto blanco, sin sombra fuera. Con el prefijo
   -webkit-: los iPhone con iOS anterior al 18 no entienden el desenfoque sin el. Radio 6px,
   el del panel y el boton de Shop the look. */
.sl-marcas__boton{
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 8px 12px;
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 🔴 EL OSCURECIDO VA EN EL COLOR, NO EN EL backdrop-filter. En el WebKit del Mac (el motor
     de Safari) el `brightness(.42)` del desenfoque no se aplicaba y «Yeezy» quedaba blanco
     sobre el suelo claro, sin leerse. Oscurecer a .42 es lo mismo que una capa negra al 58%,
     y con el velo blanco del 8% encima las dos se juntan en este color: rgba(33,33,33,.61).
     Asi se ve igual que la receta donde el desenfoque funciona, y se sigue leyendo donde no. */
  background-color: rgba(33, 33, 33, .61);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    inset -1px 0 0 rgba(255, 255, 255, .12);
  transition: background-color .22s ease;
}
@media screen and (min-width: 750px){
  .sl-marcas__boton{ right: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 10px 16px; font-size: 1.4rem; }
}
@media (hover: hover){
  /* velo al 16% en vez del 8%, con el mismo negro del 58% debajo */
  .sl-marcas__enlace:hover .sl-marcas__boton{ background-color: rgba(63, 63, 63, .65); }
}
/* Si el navegador no hace desenfoque, que el cristal no se quede transparente. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .sl-marcas__boton{ background-color: rgba(20, 19, 22, .72); }
}
@media (prefers-reduced-transparency: reduce){
  .sl-marcas__boton{ -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #141316; }
}

@media (prefers-reduced-motion: reduce){
  .sl-marcas__foto img, .sl-marcas__cuenta, .sl-marcas__boton{ transition: none; }
}
/* END_SECTION:sl-marcas */

/* START_SECTION:sl-opiniones (INDEX:100) */
/* En el pie, donde la plantilla ya trae sus reseñas (portada y ficha), la sección no pinta
   nada; pero su envoltorio seguía ahí y en la portada cogía el relleno de sl-ritmo pensado
   para las reseñas de arriba (36px en ordenador). Fuera del todo (20-oct-2026). */
.shopify-section-group-footer-group[id$="__sl_opiniones"]:not(:has(.sl-opiniones)) {
  display: none;
}
/* ============================================================================
   OPINIONES DE GOOGLE: pared en 3D
   ============================================================================ */
.sl-op__pildora{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 15px 7px 13px;
  border: 1px solid rgba(var(--color-foreground), .16);
  border-radius: 999px;
  font-size: 1.2rem;
  letter-spacing: .01em;
}
.sl-op__punto{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(var(--color-foreground), .55);
}

.sl-op__cabeza-fila{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media screen and (min-width: 990px){
  .sl-op__cabeza-fila{
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: 48px;
    align-items: end;
  }
}
.sl-op__titulo{
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
@media screen and (min-width: 990px){
  .sl-op__titulo{ font-size: 4.4rem; }
}
/* 🔴 EL TITULO EN UNA SOLA LINEA (14-oct-2026). Jorge: «Lo que dicen nuestros clientes,
   asegurate de que cabe en una linea». Medido a 28px: el mas largo es el portugues («O que
   dizem os nossos clientes»), 14,5 veces el tamano de letra; el castellano, 14. En movil el
   titulo tiene el ancho de pantalla menos 30px de margenes, asi que la letra es ese ancho
   entre 15 (con algo de holgura) y nunca mas de 28px: a 390 queda en 24px, a 320 en 19. */
.sl-op__titulo{ white-space: nowrap; }
@media screen and (max-width: 749px){
  .sl-op__titulo{ font-size: min(2.8rem, calc((100vw - 30px) / 15)); }
}
/* Sin subtitulo (quitado el 14-oct-2026) la segunda columna se quedaba vacia y le robaba
   ancho al titulo en ordenador: una sola columna. */
@media screen and (min-width: 990px){
  .sl-op__cabeza-fila:not(:has(.sl-op__apoyo)){ grid-template-columns: minmax(0, 1fr); }
}
.sl-op__apoyo{
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
  color: rgba(var(--color-foreground), .72);
}

/* ---- la pared ----------------------------------------------------------- */
/* 🔴 EL AIRE VA EN LA PARED, NO EN LA CABECERA: la cabecera lleva `page-width`,
   que declara `margin: 0 auto` en ATAJO y se come cualquier margen de abajo
   (ya mordio tres veces en este proyecto). */
.sl-op__muro{
  position: relative;
  height: 440px;
  margin-top: 28px;
  overflow: hidden;
  /* Perspectiva mas suave que la del componente (300px): aquel es una caja de
     800px; esta pared va a sangre y con 300px los cantos se deformaban. */
  perspective: 700px;
}
/* Los cuatro bordes fundidos en el fondo de la seccion: el `from-background`
   del componente. Capas QUIETAS encima (no `mask-image`, ver la cabecera).
   🔴 LA BATERIA DA ROJO DE CONTRASTE AQUI Y ES ESTE FUNDIDO: mide la primera
   tarjeta de cada clase, que es la de la columna izquierda, medio tapada a
   proposito. Medidas las del centro el 5-oct, ventana entera: nombre 8,05-8,89,
   fecha 5,68-6,59, texto 6,32-7,00. */
.sl-op__velo{
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.sl-op__velo--arriba,
.sl-op__velo--abajo{ left: 0; right: 0; height: 22%; }
.sl-op__velo--arriba{ top: 0; background: linear-gradient(to bottom, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
.sl-op__velo--abajo{ bottom: 0; background: linear-gradient(to top, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
.sl-op__velo--izq,
.sl-op__velo--der{ top: 0; bottom: 0; width: 16%; }
.sl-op__velo--izq{ left: 0; background: linear-gradient(to right, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
.sl-op__velo--der{ right: 0; background: linear-gradient(to left, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
@media screen and (min-width: 750px){
  .sl-op__muro{ height: 520px; perspective: 900px; }
}
@media screen and (min-width: 990px){
  .sl-op__muro{ height: 560px; margin-top: 32px; perspective: 1100px; }
}

/* El plano inclinado: los mismos tres giros que el componente de 21st. */
.sl-op__plano{
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* `--sl-op-escala` aleja la pared en pantallas estrechas: a 390, sin ella,
     cabian dos tarjetas y el texto salia enorme (medido el 5-oct). */
  transform:
    translate(-50%, -33.3333%) scale(var(--sl-op-escala, 1)) translateZ(-60px)
    rotateX(20deg) rotateY(-10deg) rotateZ(20deg);
  /* 🔴 SE GIRA SOBRE EL PUNTO QUE SE VE, NO SOBRE EL CENTRO DEL PLANO. Colgado
     fuera de su centro, el giro de 20° sobre el centro corria lo visible ~250px
     a la derecha: con 4 columnas la mitad izquierda se quedaba vacia (5-oct). */
  transform-origin: 50% 33.3333%;
}
@media screen and (max-width: 749px){
  .sl-op__muro{ --sl-op-escala: .72; }
}
@media screen and (min-width: 750px) and (max-width: 989px){
  .sl-op__muro{ --sl-op-escala: .86; }
}
/* Con 4 columnas el plano mide ~1.000px: en pantallas anchas se agranda para
   que no sobre negro a los lados. */
@media screen and (min-width: 1440px){
  .sl-op__muro{ --sl-op-escala: 1.1; }
}
@media screen and (min-width: 1800px){
  .sl-op__muro{ --sl-op-escala: 1.3; }
}
.sl-op__col{
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: none;
  width: var(--sl-op-ficha, 240px);
}
/* En movil, tres columnas: la cuarta queda fuera de la pantalla igualmente. */
@media screen and (max-width: 749px){
  .sl-op__col--ancha{ display: none; }
}
@media screen and (max-width: 749px){
  .sl-op__col{ width: 220px; }
}

/* Cada copia sube SU alto mas un hueco: al acabar, la siguiente esta donde
   estaba ella y no se ve el salto. Las columnas pares bajan. */
.sl-op__tira{
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: sl-op-sube var(--sl-op-dur, 56s) linear infinite;
}
.sl-op__col--baja .sl-op__tira{ animation-direction: reverse; }
.sl-op__muro.is-quieto .sl-op__tira{ animation-play-state: paused; }
@keyframes sl-op-sube{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(0, calc(-100% - 16px), 0); }
}

/* ---- la tarjeta --------------------------------------------------------- */
.sl-op__ficha{
  margin: 0;
  padding: 18px 18px 20px;
  border: 1px solid rgba(var(--color-foreground), .11);
  border-radius: 12px;
  /* 🔴 OPACA, no translucida como la de la cinta: en el plano inclinado las
     tarjetas pasan unas sobre otras al girar y con fondo transparente se veia
     el texto de la de detras. Es el mismo tono que daba la de antes sobre la
     banda oscura (4% de blanco sobre el fondo). */
  background: rgb(var(--color-background));
  background-image: linear-gradient(rgba(var(--color-foreground), .04), rgba(var(--color-foreground), .04));
}
.sl-op__firma{
  display: flex;
  align-items: center;
  gap: 11px;
}
.sl-op__foto{
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--color-foreground), .08);
}
.sl-op__quien{ display: block; min-width: 0; }
.sl-op__autor{
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
}
/* La fecha no se parte: si no cabe junto a las estrellas, baja entera
   («hace 2 / semanas» en dos lineas se leia mal). */
.sl-op__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 7px;
  margin-top: 3px;
  font-size: 1.15rem;
  /* 🔴 0,72 y no 0,62: a 12px media 4,30:1, por debajo de AA. */
  color: rgba(var(--color-foreground), .72);
}
.sl-op__fecha{ white-space: nowrap; }
.sl-op__texto{
  margin: 13px 0 0;
  font-size: 1.4rem;
  line-height: 1.5;
}

/* ---- la lista de verdad: oculta mientras se ve la pared ----------------- */
.sl-op__lista{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

/* ---- estrellas ---------------------------------------------------------- */
.sl-estrellas{ display: inline-flex; gap: 2px; }
.sl-estrellas svg{
  width: 12px; height: 12px;
  /* 🔴 DORADO DE GOOGLE, NO EL NARANJA DE LA MARCA: el #EA562F es senal
     comercial y no se usa de adorno en ninguna parte. */
  fill: #FBB000;
}

/* ---- el pie ------------------------------------------------------------- */
/* 🔴 SELECTOR CON EL PADRE DELANTE: este div lleva `page-width`, que pone a
   cero en ATAJO el margen y el relleno de arriba. `.sl-opiniones .sl-op__pie`
   (0,2,0) gana; `.sl-op__pie` a secas perdia y quedaba pegado. */
.sl-opiniones .sl-op__pie{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* Sin filete encima (Jorge, 5-oct: «quita esta linea»): la pared ya se funde
     en el fondo y la separa sola. */
  margin-top: 24px;
}
/* 🔴 EL SELLO VA ENTERO EN EM: relleno, huecos, G y estrellas crecen con la letra, asi que
   todo el sello mide un multiplo fijo de su tamano de letra y se puede encoger en movil sin
   que se parta (ver la regla de movil de abajo). */
.sl-op__resumen{
  display: inline-flex;
  align-items: center;
  gap: .64em;
  margin: 0;
  padding: .7em 1.15em;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-foreground), .14);
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
}
.sl-op__g{ width: 1.3em; height: 1.3em; flex: none; }
.sl-op__nota{ font-weight: 700; }
.sl-op__resumen .sl-estrellas{ gap: .14em; }
.sl-op__resumen .sl-estrellas svg{ width: 1.07em; height: 1.07em; }
.sl-op__separa{ flex: none; width: 1px; height: 1em; background: rgba(var(--color-foreground), .18); }
.sl-op__recuento{ color: rgba(var(--color-foreground), .70); }
/* 🔴 EN MOVIL, EL SELLO CABE ENTERO EN UNA LINEA. Medido el 14-oct-2026 con 489 resenas: el
   sello mide 24,9 veces su letra en castellano, 23,3 en ingles, 23,4 en frances, 26 en
   italiano, 26,2 en portugues y 27,8 y 28,1 en aleman y neerlandes («Bewertungen auf
   Google», «beoordelingen op Google»). Se deja margen para cuando pasen de 999 (dos cifras
   mas, ~1,2 veces la letra). El sello tiene el ancho de pantalla menos 30px. */
@media screen and (max-width: 749px){
  .sl-op__resumen{ font-size: min(1.4rem, calc((100vw - 30px) / 27.5)); }
  html[lang|="de"] .sl-op__resumen,
  html[lang|="nl"] .sl-op__resumen{ font-size: min(1.4rem, calc((100vw - 30px) / 29.5)); }
}

.sl-op__enlace{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.35rem;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--color-foreground), .45);
  padding-bottom: 3px;
  transition: border-color .2s ease;
}
.sl-op__enlace:hover{ border-bottom-color: rgb(var(--color-foreground)); }
.sl-op__enlace:focus-visible{
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 4px;
  border-radius: 2px;
}
.sl-op__enlace svg{ width: 14px; height: 14px; flex: none; }

/* 🔴 CON MOVIMIENTO REDUCIDO: fuera la pared, y la lista se ensena como rejilla
   quieta (una columna en movil, dos en tableta, cuatro en ordenador). */
@media (prefers-reduced-motion: reduce){
  .sl-op__muro{ display: none; }
  .sl-opiniones .sl-op__lista{
    position: static !important;
    width: auto; height: auto;
    margin-top: 28px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sl-op__item{ display: flex; }
  .sl-op__ficha--lista{ width: 100%; }
  .sl-op__enlace{ transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 750px){
  .sl-opiniones .sl-op__lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1200px){
  .sl-opiniones .sl-op__lista{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* END_SECTION:sl-opiniones */

/* START_SECTION:sl-shop-the-look (INDEX:103) */
/* ============================================================================
   SHOP THE LOOK · medidas de thesolehunters.com (27-sep-2026)
   ============================================================================ */
.sl-stl{
  /* El carril sangra hasta el canto de la ventana (su `visor` se sale 24px por
     cada lado) y las tarjetas de la derecha quedan fuera: sin `clip` saldria
     barra de desplazamiento horizontal en toda la pagina. */
  overflow-x: clip;
}
.sl-stl__raiz{
  display: block;
  --sl-stl-hueco: 14px;
  --sl-stl-ancho: 300px;
  --sl-stl-prop: 180 / 265;
  --sl-stl-entrada: 20px;
  --sl-stl-lado: 24px;
  --sl-stl-brillo: .6;
  --sl-stl-desenfoque: 1.5px;
  --sl-stl-velado: .92;
  --sl-stl-escala: .96;
  --sl-stl-barra-margen: 12px;
  --sl-stl-barra-alto: 3px;
  --sl-stl-panel-relleno: 10px;
  /* Alto fijo del panel (el de la suya con el nombre en dos lineas): con uno de
     una linea el panel no encoge y todas las tarjetas miden igual. */
  --sl-stl-panel-alto: 72px;
  --sl-stl-mini: 48px;
  --sl-stl-nombre: 13px;
  --sl-stl-precio: 12px;
  --sl-stl-boton: 12px;
  --sl-stl-boton-y: 9px;
  --sl-stl-boton-x: 14px;
  --sl-stl-curva: cubic-bezier(.22, 1, .36, 1);
}
@media screen and (max-width: 749px){
  .sl-stl__raiz{
    --sl-stl-hueco: 10px;
    --sl-stl-ancho: 285px;
    --sl-stl-lado: 16px;
    --sl-stl-barra-margen: 10px;
    --sl-stl-panel-relleno: 9px;
    --sl-stl-panel-alto: 66px;
    --sl-stl-mini: 42px;
    --sl-stl-nombre: 12px;
    --sl-stl-precio: 11px;
    --sl-stl-boton: 11px;
    --sl-stl-boton-y: 8px;
    --sl-stl-boton-x: 12px;
  }
}

/* Sin relleno lateral: el carril va de canto a canto y la primera tarjeta cae a
   20px del borde (`--sl-stl-entrada`), que es donde la pone la suya. Medido en su
   web a 1440: carril en x=0, primera tarjeta en x=20. */
.sl-stl__in{
  max-width: 1560px;
  margin: 0 auto;
}

.sl-stl__cabeza{
  text-align: center;
  margin-bottom: 20px;
  padding: 0 var(--sl-stl-lado);
}
@media screen and (max-width: 749px){
  .sl-stl__cabeza{ margin-bottom: 24px; }
}
/* 32px / 600 / -0,06em en ordenador y 30px en movil, como la suya. La familia la
   pone el tema (la de toda la web): esa no se copia. */
.sl-stl__titulo{
  margin: 0;
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.06em;
  color: rgb(var(--color-foreground));
}
@media screen and (max-width: 749px){
  .sl-stl__titulo{ font-size: 30px; line-height: 1.05; }
}

.sl-stl__marco{ position: relative; }

.sl-stl__visor{
  overflow: hidden;
  cursor: grab;
  /* El gesto vertical es de la pagina y el horizontal del carrusel: asi el dedo
     puede bajar por la portada pasando por encima sin quedarse enganchado. */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.sl-stl__visor.is-arrastrando{ cursor: grabbing; }
.sl-stl__visor.is-arrastrando .sl-stl__look{ pointer-events: none; }

.sl-stl__carril{
  display: flex;
  gap: var(--sl-stl-hueco);
  margin: 0;
  padding: 0 0 0 var(--sl-stl-entrada);
  list-style: none;
  transition: transform .72s var(--sl-stl-curva);
  will-change: transform;
}
.sl-stl__carril.sin-animacion{ transition: none; }

/* La tarjeta es una columna: arriba la foto (en su lienzo, con la proporcion y
   el radio) y debajo el panel del producto. El panel esta en el flujo SIEMPRE,
   tambien en las inactivas (solo recortado): asi todas miden lo mismo y el carril
   no cambia de alto al pasar de look, que haria saltar la pagina. */
.sl-stl__look{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 var(--sl-stl-ancho);
  width: var(--sl-stl-ancho);
  margin: 0;
  isolation: isolate;
  cursor: pointer;
  /* La escala de las inactivas gira sobre el centro de la FOTO, no de la tarjeta
     entera: asi la foto queda centrada como en la suya aunque debajo haya panel. */
  transform-origin: 50% calc(var(--sl-stl-ancho) * 265 / 360);
  /* 21-oct-2026: SIN filter. Las 15 inactivas llevaban brightness() blur() sobre la tarjeta
     entera (274x474): en un Android cada una es una capa aparte que la grafica oscurece y
     desenfoca. El oscurecido lo hace ahora un velo negro en .sl-stl__lienzo::after (un velo
     al 40% es exactamente brightness(.6)); el desenfoque de 1,5px se pierde. */
  opacity: var(--sl-stl-velado);
  transform: scale(var(--sl-stl-escala));
  transition:
    transform .6s var(--sl-stl-curva),
    opacity .6s var(--sl-stl-curva);
}
.sl-stl__look.is-activa{
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.sl-stl__lienzo{
  position: relative;
  aspect-ratio: var(--sl-stl-prop);
  border-radius: var(--sl-stl-radio, 5px);
  overflow: hidden;
  background-color: rgba(var(--color-foreground), .06);
}
/* El oscurecido de las inactivas (ver .sl-stl__look). */
.sl-stl__lienzo::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000000;
  opacity: calc(1 - var(--sl-stl-brillo));
  pointer-events: none;
  transition: opacity .6s var(--sl-stl-curva);
}
.sl-stl__look.is-activa .sl-stl__lienzo::after{ opacity: 0; }

.sl-stl__foto{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

.sl-stl__barra{
  position: absolute;
  top: var(--sl-stl-barra-margen);
  left: var(--sl-stl-barra-margen);
  right: var(--sl-stl-barra-margen);
  z-index: 3;
  height: var(--sl-stl-barra-alto);
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.sl-stl__look.is-activa .sl-stl__barra{ opacity: 1; }
/* 21-oct-2026: la cuenta atras es una animacion de CSS (la mueve la grafica). Al acabar
   (animationend) pasa al siguiente look; se pausa con la clase is-pausada. */
@keyframes sl-stl-llenar{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}
.sl-stl__look.is-activa .sl-stl__relleno{ animation: sl-stl-llenar var(--sl-stl-ms, 4000ms) linear forwards; }
/* Mas especificas que la de arriba: su `animation` deja el estado en running. */
sl-shop-the-look.is-pausada .sl-stl__look.is-activa .sl-stl__relleno{ animation-play-state: paused; }
sl-shop-the-look.sin-autoplay .sl-stl__look.is-activa .sl-stl__relleno{ animation: none; }
/* 21-oct-2026: la barra se llena con transform y no con width. latir() la mueve en cada
   fotograma mientras la seccion se ve, y cambiar width recolocaba la pagina cada vez. */
.sl-stl__relleno{
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .5);
}

/* ── EL PANEL, DEBAJO DE LA FOTO ─────────────────────────────────────────────
   El cristal de la suya (velo blanco, filos interiores de luz, sombra) sobre la
   misma foto desenfocada. Sin `backdrop-filter`: detras ya no hay nada que
   desenfocar, el fondo viene desenfocado de serie.
   🔴 Sale con `clip-path` y no con `opacity` (ver cabecera del fichero): se
   despliega hacia abajo desde el pie de la foto, como un cajon. */
.sl-stl__panel{
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--sl-stl-panel-alto);
  padding: var(--sl-stl-panel-relleno);
  border-radius: var(--sl-stl-radio, 5px);
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background-color: #141316;
  clip-path: inset(0 0 100% 0 round var(--sl-stl-radio, 5px));
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    clip-path .45s var(--sl-stl-curva),
    transform .55s var(--sl-stl-curva);
}
/* El velo de cristal y los filos, por ENCIMA de la foto desenfocada. */
.sl-stl__panel::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-color: rgba(255, 255, 255, .08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    inset -1px 0 0 rgba(255, 255, 255, .12);
}
/* La foto del look, desenfocada y a oscuras. Se sale 24px por cada lado para que
   el desenfoque no deje un borde claro en los cantos. */
.sl-stl__panel-fondo{
  position: absolute;
  inset: -24px;
  z-index: -2;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  object-position: center 85%;
  filter: blur(18px) brightness(.42) saturate(1.3);
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 21-oct-2026: la foto desenfocada (blur 18px) solo se pinta en la activa. Las demas estan
   recortadas del todo y no se ven; se ocultan cuando su panel termina de cerrarse. */
.sl-stl__look:not(.is-activa):not(:focus-within) .sl-stl__panel-fondo{
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
.sl-stl__look.is-activa .sl-stl__panel{
  clip-path: inset(0 0 0 0 round var(--sl-stl-radio, 5px));
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: .16s;
}
/* Con el foco dentro (tabulando), el panel se ve aunque la tarjeta aun no sea la
   activa: el JS la activa en el mismo instante, esto evita el parpadeo. */
.sl-stl__look:focus-within .sl-stl__panel{
  clip-path: inset(0 0 0 0 round var(--sl-stl-radio, 5px));
  transform: translateY(0);
}

.sl-stl__mini{
  flex: 0 0 var(--sl-stl-mini);
  width: var(--sl-stl-mini);
  height: var(--sl-stl-mini);
  border-radius: 6px;
  overflow: hidden;
  /* Las fotos de producto de la tienda van sobre blanco: la miniatura tambien, y
     en `contain`, porque la zapatilla ocupa del 24% al 100% del encuadre segun la
     foto y `cover` cortaria las grandes. */
  background-color: #ffffff;
}
.sl-stl__mini img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sl-stl__datos{
  flex: 1 1 auto;
  min-width: 0;
}
.sl-stl__nombre{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--sl-stl-nombre);
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
}
.sl-stl__precio{
  display: block;
  margin-top: 2px;
  font-size: var(--sl-stl-precio);
  line-height: 1.4;
  opacity: .8;
  font-variant-numeric: tabular-nums;
}

.sl-stl__ver{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: var(--sl-stl-boton-y) var(--sl-stl-boton-x);
  font-size: var(--sl-stl-boton);
  line-height: 1.2;
  color: #111111;
  background-color: #ffffff;
  border-radius: 5.5px;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .22s ease, transform .28s var(--sl-stl-curva);
}
@media (hover: hover) and (pointer: fine){
  .sl-stl__ver:hover{ opacity: .88; transform: translateY(-1px); }
}
.sl-stl__ver:focus-visible{
  outline: 2px solid #111111;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #ffffff;
}
.sl-stl__nombre:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── FLECHAS (solo ordenador, al pasar el raton) ─────────────────────────── */
.sl-stl__flecha{
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 40px;
  height: 40px;
  display: none;
  place-items: center;
  padding: 0;
  color: #111111;
  background-color: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 20px rgba(0, 0, 0, .14);
  transition: opacity .3s ease, transform .35s var(--sl-stl-curva);
}
.sl-stl__flecha--ant{ left: 10px; }
.sl-stl__flecha--sig{ right: 10px; }
.sl-stl__flecha svg{ width: 15px; height: 15px; }
@media screen and (min-width: 750px){
  .sl-stl__flecha{ display: grid; }
}
@media (hover: hover) and (pointer: fine){
  .sl-stl__marco:hover .sl-stl__flecha{ opacity: .92; }
  .sl-stl__flecha:hover{ transform: translateY(-50%) scale(1.06); }
}
/* Tabulando tambien se tienen que ver, o el foco caeria en un boton invisible. */
.sl-stl__flecha:focus-visible{
  opacity: 1;
  outline: 2px solid #111111;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #ffffff;
}

.sl-stl__vacio{
  margin: 0;
  text-align: center;
  opacity: .7;
}

@media (prefers-reduced-motion: reduce){
  .sl-stl__carril,
  .sl-stl__look,
  .sl-stl__panel,
  .sl-stl__barra,
  .sl-stl__ver,
  .sl-stl__flecha{ transition: none; }
  .sl-stl__barra{ display: none; }
}
@media (prefers-reduced-transparency: reduce){
  .sl-stl__panel-fondo{ display: none; }
  .sl-stl__flecha{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #ffffff;
  }
}
/* END_SECTION:sl-shop-the-look */

/* START_SECTION:sl-tienda (INDEX:104) */
/* ============================================================================
   NUESTRA TIENDA
   ============================================================================ */
.sl-tienda{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  /* `isolation` crea un contexto de apilado propio: el degradado y el texto se
     quedan dentro de esta seccion y no se pelean con el banner fijo de arriba,
     que vive en z-index 1. */
  isolation: isolate;
  background-color: #1F1D24;
}

.sl-tienda__foto,
.sl-tienda__foto img,
.sl-tienda__sinfoto{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sl-tienda__foto img{ object-fit: cover; object-position: 50% 50%; }
.sl-tienda__sinfoto{ background: rgba(255,255,255,.06); }

/* 🔴 ESTE TEMA ESCONDE TODO DIV VACIO. Lleva la regla
     `a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty { display:none }`
   y el velo es, por definicion, un div sin contenido: salia con caja 0x0 y
   `display:none`, o sea que el degradado NO SE PINTABA. El sintoma fue que subir
   la fuerza del velo de 70 a 94 no cambiaba NI UN PIXEL del contraste medido, un
   valor constante donde tenia que haber una curva.
   `display:block` a secas no basta: `div:empty` tiene especificidad (0,1,1) y
   `.sl-tienda__velo` (0,1,0), asi que gana la del tema. Por eso el selector va
   con el padre delante, (0,2,0). Si algun dia alguien lo "simplifica" quitando
   `.sl-tienda`, el degradado desaparece otra vez y en silencio. */
.sl-tienda .sl-tienda__velo{
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 🔴 LA CAPA NO CAPTURA EL PUNTERO Y EL ENLACE SI. Igual que EME: si la caja del
   texto se comiera los clics, taparia la foto entera sin motivo. */
/* 🔴 EL HUECO DE ABAJO VA AQUI, NO EN `.sl-tienda__in`. Ese div lleva la clase
   `page-width` del tema, que declara `padding` en ATAJO (`padding: 0 5rem`), asi
   que pone el padding-bottom a 0. Con la misma especificidad gana quien va
   despues en el orden de carga, y base.css va despues que el CSS de seccion: el
   enlace «Cómo llegar» quedaba clavado en el borde inferior, medido a 0px el
   18-sep. La clase `page-width` se conserva porque es la que alinea el texto a
   plomo con el resto de titulos de la portada; solo se le quita el trabajo
   vertical. */
.sl-tienda__capa{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  padding-bottom: 40px;
}
@media screen and (min-width: 990px){
  .sl-tienda__capa{ padding-bottom: 64px; }
}
.sl-tienda__in{
  width: 100%;
  color: #FFFFFF;
}

/* 🔴 SIN `opacity`. Era 0,78 y sobre la foto se quedaba en 2,68:1, medido. La
   jerarquia ya la marcan el tamano (11px frente a 28px) y el espaciado entre
   letras; bajarle ademas el blanco solo servia para que no se leyera. */
.sl-tienda__overline{
  margin: 0 0 10px;
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sl-tienda__ciudad{
  margin: 0 0 16px;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.05;
  /* 14-oct-2026: sin mayusculas forzadas, como «Shop the look» (Jorge: los titulos de la
     portada en minusculas). Con minusculas, el espaciado va un poco cerrado. */
  letter-spacing: -.02em;
  text-transform: none;
}
@media screen and (min-width: 990px){
  .sl-tienda__ciudad{ font-size: 2.8rem; margin-bottom: 20px; }
}

.sl-tienda__cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 48px;
}
@media screen and (min-width: 750px){
  .sl-tienda__cols{ grid-template-columns: auto auto; justify-content: start; }
}

.sl-tienda__dato{
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.45;
}

.sl-tienda__mapa{
  pointer-events: auto;
  display: inline-block;
  margin-top: 2px;
  font-size: 1.35rem;
  line-height: 1.45;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.sl-tienda__mapa:hover{ opacity: .78; }
/* El anillo por dentro no hace falta aqui (nada lo recorta), pero SI hace falta
   declararlo: el tema quita el suyo en varios sitios y este enlace cae sobre una
   foto, asi que lleva doble aro, claro y oscuro, para que se vea sobre lo que
   sea que haya detras. */
.sl-tienda__mapa:focus-visible{
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0,0,0,.65);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce){
  .sl-tienda__mapa{ transition: none; }
}
/* END_SECTION:sl-tienda */

/* START_SECTION:wall-of-fame (INDEX:117) */
/* ============================================================================
   WALL OF FAME · PARED EN 3D (layout «pared», portada)
   Misma mecanica que `sl-opiniones` (columnas que suben y bajan alternas, tres
   copias por columna, plano colgado a un tercio y girado sobre ese punto) con
   la perspectiva EN ESPEJO: rotateY(10deg) rotateZ(-20deg) en vez de
   rotateY(-10deg) rotateZ(20deg). Alli suben hacia arriba-derecha; aqui hacia
   arriba-izquierda.
   🔴 SIN `backdrop-filter` EN LA PLACA: el carrusel la lleva de cristal, pero con
   60 tarjetas moviendose a la vez el desenfoque es lo que da lag. Placa blanca
   casi opaca, que sobre la foto se lee igual. Medido el 5-oct con la CPU
   frenada x4: 60 fps con la pared en marcha, igual que parada.
   🔴 ROJOS DE LA BATERIA QUE NO SON FALLOS DE LA PARED:
     · contraste de categoria e @Instagram: mide la primera tarjeta de cada clase,
       que es la del borde, medio tapada por el fundido. Las del centro, ventana
       entera: nombre 16-17, @Instagram 6,3-11,3, categoria 6,45;
     · fotos «cortas»: los retratos son de 560px y APAISADOS; una tarjeta vertical
       en pantalla retina pide ~1.000px. Le pasaba igual al carrusel. Se arregla
       con fotos mas grandes, no con codigo.
   ============================================================================ */
.wof3d{
  position: relative;
  height: 460px;
  margin-top: 28px;
  overflow: hidden;
  perspective: 700px;
}
@media screen and (min-width: 750px){
  .wof3d{ height: 540px; perspective: 900px; }
}
@media screen and (min-width: 990px){
  .wof3d{ height: 600px; margin-top: 36px; perspective: 1100px; }
}
.wof3d__plano{
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transform:
    translate(-50%, -33.3333%) scale(var(--wof3d-escala, 1)) translateZ(-60px)
    rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
  transform-origin: 50% 33.3333%;
}
@media screen and (max-width: 749px){
  .wof3d{ --wof3d-escala: .72; }
  /* 🔴 Doble clase a proposito: `.wof3d__col{display:flex}` va DESPUES en el
     fichero y, con la misma especificidad, ganaba y la cuarta seguia ahi. */
  .wof3d__col.wof3d__col--ancha{ display: none; }
}
@media screen and (min-width: 750px) and (max-width: 989px){
  .wof3d{ --wof3d-escala: .86; }
}
@media screen and (min-width: 1440px){
  .wof3d{ --wof3d-escala: 1.1; }
}
@media screen and (min-width: 1800px){
  .wof3d{ --wof3d-escala: 1.3; }
}
.wof3d__col{
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: none;
  width: 220px;
}
.wof3d__tira{
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: wof3d-sube var(--wof3d-dur, 35s) linear infinite;
}
.wof3d__col--baja .wof3d__tira{ animation-direction: reverse; }
.wof3d.is-quieto .wof3d__tira{ animation-play-state: paused; }
@keyframes wof3d-sube{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(0, calc(-100% - 18px), 0); }
}

.wof3d__ficha{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: #ECE9E4;
}
.wof3d__foto{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El mismo encuadre que el carrusel: el retrato es primer plano y la foto
     de tienda plano medio, o en una de las dos la cabeza queda fuera. */
  object-position: center 28%;
}
.wof3d__foto--tienda{ object-position: center top; }
.wof3d__placa{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 9px 11px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  color: #14181A;
}
.wof3d__ficha--arriba .wof3d__placa{ top: 10px; bottom: auto; }
.wof3d__placa,
.wof3d__placa *{ font-family: var(--font-heading-family), "Helvetica Neue", Helvetica, Arial, sans-serif; }
.wof3d__cat{
  margin: 0 0 4px;
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(20, 24, 26, .72);
}
.wof3d__nombre{
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.wof3d__ig{
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(20, 24, 26, .78);
}
.wof3d__ig svg{ width: 12px; height: 12px; flex: none; color: #0095F6; }

/* Los bordes fundidos en el blanco del contenedor: capas quietas encima (no
   `mask-image`, que obliga a recomponer la pared en cada fotograma). */
.wof3d__velo{ position: absolute; z-index: 1; pointer-events: none; }
.wof3d__velo--arriba,
.wof3d__velo--abajo{ left: 0; right: 0; height: 20%; }
.wof3d__velo--arriba{ top: 0; background: linear-gradient(to bottom, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
.wof3d__velo--abajo{ bottom: 0; background: linear-gradient(to top, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
.wof3d__velo--izq,
.wof3d__velo--der{ top: 0; bottom: 0; width: 14%; }
.wof3d__velo--izq{ left: 0; background: linear-gradient(to right, rgb(var(--color-background)), rgba(var(--color-background), 0)); }
.wof3d__velo--der{ right: 0; background: linear-gradient(to left, rgb(var(--color-background)), rgba(var(--color-background), 0)); }

/* Con «reducir movimiento» la pared se queda quieta. */
@media (prefers-reduced-motion: reduce){
  .wof3d__tira{ animation: none; }
}
/* END_SECTION:wall-of-fame */