/* ==========================================================================
   LA SUCURSAL — TIENDA DTF — sistema de diseño "Estudio / Jordan"
   6a vuelta: el cliente pidió explícitamente pivotar de "grafiti/asfalto"
   a un estilo como nike.com / jordan.com — blanco dominante, negro para
   secciones fuertes (header, hero, footer), un solo rojo de acento (no
   oro+rojo+azul+amarillo como antes), tipografía condensada de póster
   pero sin desregistro de tinta ni rotaciones — y sin los gestos de
   cursor (tilt 3D en tarjetas, parallax de textura en el hero): Nike no
   persigue el ratón, deja que la foto de producto grande haga el trabajo.
   Se retiran también los elementos "de taller" (cinta rasgada, pegatina
   circular rotada, sello DTF al hover, ticker con rombos) — no encajan
   con la referencia pedida. La mecánica de scroll-reveal/carrusel se
   conserva (es estructura, no estilo), solo cambian los tonos.

   NEGOCIO: taller DTF — #productos son prendas BASE lisas, #disenos es
   el catálogo de estampados propios (o el cliente sube el suyo), y
   #marca-propia enlaza al relato de los diseños propios. Ver index.html.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- color: blanco dominante, negro para bloques fuertes, un rojo ---- */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f4;
  --color-ink: #0d0d0d;
  --color-ink-2: #1a1a1a;
  --color-surface: #ffffff;
  --color-surface-2: #f0efed;
  --color-hairline: rgba(13, 13, 13, 0.12);
  --color-hairline-on-ink: rgba(255, 255, 255, 0.16);
  --color-photo-bg: #efe6d2;

  --color-text: #0d0d0d;
  --color-text-muted: #64615c;
  --color-text-on-ink: #ffffff;
  --color-text-on-ink-muted: #a8a6a1;

  --color-accent: #d3242a;
  --color-accent-dim: #ad1d22;
  --color-accent-tint: rgba(211, 36, 42, 0.1);
  --color-error: #c81e24;

  /* ---- type ---- */
  --font-display: "Anton", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-tag: "Anton", sans-serif;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-modal: 260ms;

  /* ---- layout ---- */
  --radius-pill: 999px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --shadow-card: 0 1px 2px rgba(13, 13, 13, 0.05);
  --shadow-card-hover: 0 18px 34px -18px rgba(13, 13, 13, 0.35);
  --shadow-modal: 0 30px 70px -18px rgba(13, 13, 13, 0.3);
  --container: 1280px;
  --gap: clamp(1rem, 2vw, 1.75rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
a, button, input, [role="button"] { -webkit-tap-highlight-color: transparent; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
  text-wrap: balance;
}
p { margin: 0; }
[id] { scroll-margin-top: 92px; }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--color-ink); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-ink);
  color: #fff;
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  z-index: 300;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- reveal al hacer scroll ---------- */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.merch-grid) {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  }
  [data-reveal][data-visible="true"]:not(.merch-grid) { opacity: 1; transform: none; }

  @keyframes card-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .merch-grid > .card-producto { opacity: 0; }
  .merch-grid[data-visible="true"] > .card-producto {
    animation: card-fade-in 480ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }

}

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  position: relative;
  z-index: 1;
}
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section--alt { background: var(--color-bg-alt); }
.hero + .section { padding-top: clamp(4rem, 9vw, 6.5rem); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
  max-width: 62ch;
}
.section-head h2 { font-size: clamp(2.2rem, 6vw, 3.9rem); }
.section-head p { color: var(--color-text-muted); font-size: 1.02rem; max-width: 56ch; line-height: 1.7; }

/* separa subgrupos DENTRO de una misma seccion (p.ej. prendas vs.
   accesorios en #productos) — mas discreto que .section-head, para que
   quede claro que es un subgrupo, no una seccion nueva. */
.subsection-head {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--color-hairline);
}
.subsection-head h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.subsection-head p { color: var(--color-text-muted); font-size: 0.92rem; }

/* etiqueta plana, sin viñeta/bullet — en las referencias reales (nike.com,
   jordan.com) el texto pequeño encima de un titular nunca lleva icono ni
   color de acento, es solo una etiqueta discreta en gris. El rojo se
   reserva para las cosas que en Nike SÍ llevan color: "Lo último",
   "Superventas" — ver .card-producto-tag mas abajo. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.8rem 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-pop),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--color-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--color-ink-2); transform: translateY(-1px); }
}
.btn-secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { background: var(--color-ink); color: #fff; }
}
.btn-ghost { background: transparent; border-color: var(--color-hairline); color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background: var(--color-surface-2); border-color: var(--color-text-muted); }
}
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0.6rem 1.3rem; font-size: 0.8rem; }
.btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* botones "sobre negro" — solo el header se queda oscuro (el footer ya
   es blanco, como en nike.com: usa el .btn-ghost normal sin variante). */
.site-header .btn-ghost { border-color: var(--color-hairline-on-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .site-header .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
}

/* ---------- barra de aviso (encima del header, no sticky) ---------- */
.promo-bar {
  background: #000;
  color: var(--color-text-on-ink-muted);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  padding: 0.55rem 1rem;
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  border-bottom: 1px solid var(--color-hairline-on-ink);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 1rem;
}
.logo {
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.logo span { color: var(--color-accent); }
.nav-links { display: flex; gap: clamp(1rem, 2vw, 1.9rem); align-items: center; }
.nav-links a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-on-ink-muted);
  padding-block: 0.3rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--color-hairline-on-ink);
  border-radius: var(--radius-sm);
  min-width: 46px;
  min-height: 46px;
  cursor: pointer;
  touch-action: manipulation;
}
.nav-toggle span { position: relative; display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto; transition: background var(--dur-base) var(--ease-out); }
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-actions .btn { padding-inline: 1rem; font-size: 0.8rem; min-height: 42px; white-space: nowrap; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-ink);
    border-bottom: 1px solid var(--color-hairline-on-ink);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
    gap: 0.9rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .nav-links[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* ---------- hero ---------- */
/* 2a vuelta de layout: la primera version (texto centrado sobre negro
   liso) seguia leyendo como "pagina generica con titular grande", no
   como Nike/Jordan — la referencia real (nike.com, jordan.com,
   capturadas por Playwright para esta vuelta) SIEMPRE tira de foto a
   sangre completa (edge-to-edge, sin contenedor/padding) como elemento
   dominante, con el texto superpuesto o partido a un lado — nunca texto
   solo sobre un color plano. Aqui no hay fotografia de estilo de vida
   (solo producto de estudio), asi que se monta un hero partido: copy a
   la izquierda dentro de `.wrap` normal, foto de producto a sangre
   completa a la derecha (sin contenedor, toca el borde del viewport) —
   mismo patron compositivo que un hero de "drop" de Nike, con los
   activos reales que hay. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: #fff;
}
.hero-texture { display: none; }
.hero-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 861px) {
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: min(82vh, 720px); }
}
.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 4rem) clamp(1.1rem, 4vw, 2rem);
  animation: hero-enter 700ms var(--ease-out) both;
}
@keyframes hero-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* caption discreta encima del titular, sin pastilla ni icono — mismo
   patron que la etiqueta pequeña sobre el hero de jordan.com ("Howard
   University Apparel Collection"). */
.hero-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-text-on-ink-muted);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  max-width: 13ch;
  color: #fff;
}
.hero h1 .accent-word { color: var(--color-accent); }
.hero-sub {
  margin-top: 1.6rem;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: 40ch;
  color: var(--color-text-on-ink-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.4rem; }
.hero-actions .btn-primary { background: #fff; color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .hero-actions .btn-primary:hover { background: #ececec; transform: translateY(-1px); }
}
.hero-actions .btn-secondary { border-color: #fff; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .hero-actions .btn-secondary:hover { background: #fff; color: var(--color-ink); }
}
/* foto a sangre completa: SIN .wrap, toca el borde derecho e inferior
   del hero. En movil pasa arriba del todo (order:-1) a 62vh; en desktop
   ocupa la mitad derecha entera, altura completa del hero. */
.hero-visual { position: relative; overflow: hidden; height: 62vh; order: -1; }
@media (min-width: 861px) {
  .hero-visual { height: auto; order: 0; }
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.55) 0%, transparent 35%);
}
@media (min-width: 861px) {
  .hero-visual::after { background: linear-gradient(90deg, rgba(13, 13, 13, 0.7) 0%, transparent 22%); }
}

/* barra inferior fija del hero — info plana, sin iconos ni color de mas;
   mismo mecanismo de bucle infinito que el carrusel de diseños (contenido
   x2, -50% exacto). */
.hero-ticker {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.4rem, 6vw, 3.6rem);
  overflow: hidden;
  border-top: 1px solid var(--color-hairline-on-ink);
  width: 100%;
}
.hero-ticker-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  padding-block: 0.9rem;
  animation: ticker-scroll 26s linear infinite;
}
.hero-ticker-track span {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-on-ink-muted);
}
@keyframes ticker-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
  .hero-ticker:hover .hero-ticker-track { animation-play-state: paused; }
}

/* ---------- tira de categorías ---------- */
/* antes los iconos eran fijos a 100px — al lado de titulares enormes y
   fotos a sangre completa en el resto del sitio, quedaban minusculos y
   perdidos en una fila con mucho hueco vacio a la derecha. Grid con
   auto-fit en vez de flex: cada icono crece para repartirse el ancho
   completo de `.wrap`, nunca queda un tamaño fijo pequeño suelto.
   Circulares (no cuadrados como el resto de fotos del sitio) — patron
   reconocible de "comprar por categoria" y rompe la monotonia de tanto
   cuadrado repetido. */
.cat-strip { padding-block: clamp(2.6rem, 5vw, 4rem) clamp(2.4rem, 5vw, 3.5rem); }
.cat-strip h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.cat-strip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: clamp(1.4rem, 2.5vw, 2.2rem); }
.cat-strip-item { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-decoration: none; }
.cat-strip-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--color-photo-bg);
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cat-strip-item:hover img { transform: scale(1.06); }
}
.cat-strip-item span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  color: var(--color-text);
  text-align: center;
}

/* ---------- prendas base ----------
   Estructura calcada de la ficha real de nike.com/w/... (capturada para
   esta vuelta de diseño): sin tarjeta — ni borde, ni sombra, ni fondo, ni
   esquinas redondeadas. La foto flota directa sobre el fondo de la
   pagina, y el texto debajo es una simple pila sin caja: etiqueta de
   color (solo si hay oferta/novedad — "Lo último"/"Superventas" en Nike,
   ver .card-producto-tag), nombre en negrita, subtitulo gris, precio. */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem) var(--gap); }
.card-producto { display: flex; flex-direction: column; }
.card-producto-photo {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-photo-bg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.card-producto-photo-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.card-producto-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card-producto:hover .card-producto-photo img { transform: scale(1.045); }
}
.card-producto-ref {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.card-producto-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-accent);
}
.card-producto-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: var(--color-text);
}
.card-producto-name a { text-decoration: none; color: inherit; }
.card-producto-name a:hover { text-decoration: underline; }
/* oculta por completo cuando no hay reseñas (ver productoCardHTML) — no
   es un elemento vacio que ocupe espacio, simplemente no se imprime. */
.card-producto-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  width: fit-content;
}
.card-producto-rating:hover { text-decoration: underline; }
.card-producto-rating-count { font-weight: 500; color: var(--color-text-muted); }
.card-producto-body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.card-producto-composicion { font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted); }
.card-producto-foot { margin-top: 0.7rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.card-producto-price { font-weight: 700; font-size: 0.95rem; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* carrito flotante */
.cart-btn {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
}
[data-merch-grid="accesorio"] { margin-bottom: 5rem; }
.cart-count {
  background: #fff;
  color: var(--color-ink);
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
}

/* ---------- carrusel de diseños propios (en movimiento) ----------
   Antes era una rejilla fija de 3 columnas sin gap, a sangre completa —
   6 diseños enormes pegados unos a otros. El cliente pidio separacion
   real y movimiento. Mismo mecanismo que .hero-ticker: contenido
   duplicado x2 en el html, bucle -50% exacto, pausa al pasar el raton. */
.diseno-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.diseno-marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(1rem, 2vw, 1.6rem);
  animation: diseno-scroll 44s linear infinite;
}
@keyframes diseno-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
  .diseno-marquee:hover .diseno-marquee-track { animation-play-state: paused; }
}
.diseno-mosaic-tile {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(240px, 26vw, 340px);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-ink);
  text-decoration: none;
}
.diseno-mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .diseno-mosaic-tile:hover img { transform: scale(1.05); }
}
.diseno-mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.85) 0%, rgba(13, 13, 13, 0.15) 45%, transparent 65%);
}
.diseno-mosaic-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.1rem 1.2rem 1.3rem; }
.diseno-mosaic-copy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: #fff;
  margin-bottom: 0.7rem;
}
.diseno-mosaic-copy .btn { pointer-events: none; min-height: 38px; padding: 0.4rem 1.1rem; font-size: 0.8rem; }

/* ---------- footer ---------- */
/* footer real de nike.com: blanco, plano, columnas de enlaces en gris —
   nada de bloque negro. El contraste fuerte se reserva para header/hero. */
.site-footer { background: var(--color-bg); color: var(--color-text-muted); padding-block: 3.4rem 1.8rem; border-top: 1px solid var(--color-hairline); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2rem; }
.footer-grid .logo { color: var(--color-text); }
.footer-grid .logo span { color: var(--color-accent); }
.footer-grid h4 { color: var(--color-text); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9rem; }
.footer-grid a { text-decoration: none; color: var(--color-text-muted); font-size: 0.9rem; transition: color var(--dur-base) var(--ease-out); }
.footer-grid a:hover { color: var(--color-text); }
.footer-grid ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-bottom {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- modales (login / pago / personalizar) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-modal) var(--ease-out);
}
.modal-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.8rem;
  transform: scale(0.96) translateY(6px);
  opacity: 0;
  transition: transform var(--dur-modal) var(--ease-pop), opacity var(--dur-modal) var(--ease-out);
  transform-origin: center;
}
.modal-backdrop[data-open="true"] .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal-lg { max-width: 480px; }
.modal-xl { max-width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; gap: 1rem; }
.modal-head h3 { font-size: 1.2rem; font-weight: 400; color: var(--color-text); }
.modal-close {
  background: var(--color-surface-2);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--color-hairline); }
.modal p.hint { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.pago-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}
.pago-section-label:not(:first-child) { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--color-hairline); }
.field[hidden] { display: none; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--color-text); }
.field input {
  min-height: 46px;
  border: 1.5px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: #9c9890; }
.field input:focus-visible { outline-offset: 0; border-color: var(--color-ink); }

/* carrito editable (modal "carrito") */
.carrito-line {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--color-hairline);
}
.carrito-line:first-child { padding-top: 0; }
.carrito-line-photo { width: 64px; height: 64px; object-fit: cover; background: var(--color-photo-bg); flex-shrink: 0; }
.carrito-line-info { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.carrito-line-name { font-weight: 700; font-size: 0.92rem; color: var(--color-text); }
.carrito-line-price { font-size: 0.82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.carrito-line-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }
.carrito-line-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
}
.carrito-line-btn:hover { text-decoration: underline; }
.carrito-line-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }
.carrito-line-btn-remove { color: var(--color-accent); }

/* pago */
.pay-methods { display: flex; gap: 0.7rem; margin-bottom: 1.3rem; }
.pay-method {
  flex: 1;
  min-height: 48px;
  border: 1.5px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.7rem;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pay-method[aria-pressed="true"] { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1.1rem; margin-top: 0.4rem; border-top: 1px solid var(--color-hairline); }
.pay-total strong { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }

/* ---------- personalizar (aplicar diseño a la prenda) ---------- */
.personalizar-stages[hidden] { display: none; }
.personalizar-stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 620px) {
  .personalizar-stages { grid-template-columns: 1fr; }
}
.personalizar-stages:has(> .personalizar-panel[hidden]) { grid-template-columns: 1fr; }
.personalizar-stages:has(> .personalizar-panel[hidden]) .personalizar-panel { max-width: 380px; margin-inline: auto; width: 100%; }
.personalizar-panel { display: flex; flex-direction: column; gap: 0.7rem; }
.personalizar-panel-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.personalizar-stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-photo-bg);
}
.personalizar-stage .personalizar-photo { width: 100%; height: 100%; object-fit: cover; }
.personalizar-mark {
  position: absolute;
  /* print de pecho real, zona alta del torso, SIN inclinación: una
     colocación recta y precisa lee como estampado de marca (referencia
     Nike/Jordan), la inclinación de golpe de sello quedaba mas
     "grafiti/artesanal" que "producto". */
  top: 33%;
  left: 50%;
  width: 24%;
  height: auto;
  transform: translate(-50%, -50%);
  /* soft-light: deja pasar el sombreado/textura real de la foto a traves
     del diseño (el estampado se oscurece en sombra, se aclara con la luz)
     sin restar brillo al arte, que ya trae su propio volumen/sombreado
     "grabado" — multiply lo apagaba a un marron sucio. */
  mix-blend-mode: soft-light;
  opacity: 1;
}
/* tote: superficie plana y mas ancha que un pecho de camiseta — el
   estampado va mas abajo (bajo las asas) y algo mas grande, si no
   queda un sello diminuto perdido en medio de la bolsa. */
.personalizar-mark[data-product="tote"] {
  top: 66%;
  width: 38%;
}
@media (prefers-reduced-motion: no-preference) {
  .personalizar-mark.stamp-in { animation: mark-in 320ms var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .personalizar-mark.stamp-in { animation: none; }
}
@keyframes mark-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.personalizar-faces-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
@media (max-width: 620px) {
  .personalizar-faces-picker { grid-template-columns: 1fr; }
}
.personalizar-faces-picker:has(> [hidden]) { grid-template-columns: 1fr; }
.personalizar-swatch-group { display: flex; flex-direction: column; gap: 0.5rem; }
.personalizar-swatch-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}
.personalizar-upload-btn { align-self: flex-start; gap: 0.45rem; }
.personalizar-swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.swatch {
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-hairline);
  background: #fff;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-pop), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.swatch:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.swatch:active { transform: scale(0.94); }
.swatch[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

/* talla (presentacional, ver nota en index.html) */
.personalizar-size-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.size-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size-swatch {
  min-width: 44px;
  min-height: 40px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-hairline);
  background: #fff;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-pop), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.size-swatch:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.size-swatch:active { transform: scale(0.94); }
.size-swatch[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.personalizar-size-note { font-size: 0.78rem; color: var(--color-text-muted); }

/* toast confirmacion */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(12%);
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.9rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-modal);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  max-width: min(90vw, 420px);
  text-align: center;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-pop);
}
.toast[data-open="true"] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* utilidades */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Buscador de productos: compacto en escritorio, fila propia en móvil. */
.product-search { width: 14rem; flex-shrink: 0; padding-block: 0.65rem; }
.search-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.search-field { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-on-ink); border-bottom: 1px solid var(--color-hairline-on-ink); }
.search-field svg { flex-shrink: 0; }
.search-field input { width: 100%; min-width: 0; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--color-text-on-ink); font: inherit; font-size: 0.9rem; color-scheme: dark; }
.search-field input::placeholder { color: var(--color-text-on-ink-muted); opacity: 1; }
.search-status { display: block; color: var(--color-text-on-ink); font-size: 0.78rem; text-underline-offset: 0.2em; }
.search-status:empty { display: none; }
.search-empty { padding-block: 1rem; color: var(--color-text-muted); }

/* orden del catalogo — reordena tarjetas ya en el DOM, sin volver a
   pedir al backend (catalogo pequeño, no hace falta). */
.catalog-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.catalog-sort-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); }
.catalog-toolbar select {
  min-height: 42px;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.merch-grid > .card-producto[hidden] { display: none; }
/* Secuencia de taller: pictogramas amplios, sin cajas ni sombras. */
.how-it-works .section-head {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.how-it-works .section-head p { max-width: 26ch; }
.process-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.process-visual { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.process-number { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: var(--color-accent); }
.process-art { display: block; width: 75%; max-width: 250px; height: 180px; color: var(--color-ink); }
.process-list h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.15; margin-bottom: 0.8rem; }
.process-list p { color: var(--color-text-muted); max-width: 40ch; }

/* El carrusel desemboca en el bloque negro, sin una franja vacía. */
#disenos { padding-bottom: 0; }
.trust-section { background: var(--color-ink); color: var(--color-text-on-ink); }
.trust-layout { display: grid; grid-template-columns: 0.9fr 1.5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.trust-section h2 { font-size: clamp(3rem, 5.6vw, 5rem); line-height: 1.06; text-wrap: initial; }
.trust-period { color: var(--color-accent); }
.trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.trust-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.trust-icon { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.trust-list h3 { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.4; font-weight: 700; text-transform: none; margin-bottom: 0.6rem; }
.trust-list p { color: var(--color-text-on-ink-muted); font-size: 0.9rem; max-width: 32ch; }
@media (max-width: 860px) {
  .site-header:has(.product-search) .wrap { flex-wrap: wrap; column-gap: 0.5rem; padding-top: 0.65rem; }
  .product-search { order: 4; width: 100%; padding-top: 0; }
  .trust-layout { grid-template-columns: 1fr; }
  body:has(.product-search) [id] { scroll-margin-top: 170px; }
}
@media (max-width: 600px) {
  .how-it-works .section-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .how-it-works .section-head p { max-width: none; }
  .process-list { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1.25rem; }
  .process-visual { flex-direction: column; gap: 0.5rem; margin: 0; }
  .process-number { font-size: 2rem; }
  .process-art { width: 100%; height: 80px; }
  .process-list h3 { font-size: 1.5rem; }
  .process-list p { font-size: 0.9rem; }
  .trust-list { grid-template-columns: 1fr; gap: 2rem; }
  .trust-list li { flex-direction: row; gap: 1.25rem; }
  .trust-icon { width: 38px; height: 38px; }
}

/* ---------- páginas de contenido (FAQ, legales) ----------
   Texto largo en columna legible, mismo sistema tipografico que el
   resto (Anton en titulares, Inter en cuerpo) — sin inventar clases
   nuevas de titular, reutiliza .section-head. */
.content-page { max-width: 70ch; }
.content-page h2 { margin-top: 2.6rem; margin-bottom: 0.9rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.content-page h2:first-child { margin-top: 0; }
.content-page p { margin-bottom: 1rem; color: var(--color-text-muted); line-height: 1.7; }
.content-page strong { color: var(--color-text); }
.content-page .legal-placeholder { color: var(--color-accent); font-weight: 700; }
.content-page ul { margin-bottom: 1rem; padding-left: 1.2rem; list-style: disc; color: var(--color-text-muted); line-height: 1.7; }

/* FAQ: acordeon nativo <details>, sin JS */
.faq-list { max-width: 70ch; display: flex; flex-direction: column; }
.faq-list details {
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 1.2rem;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  touch-action: manipulation;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin-top: 0.9rem; color: var(--color-text-muted); line-height: 1.7; }

/* enlace simple de vuelta, encima del titular de la pagina */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 1.4rem;
}
.back-link:hover { color: var(--color-text); }

/* ---------- pagina de producto (producto.html) ---------- */
.producto-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; }
@media (min-width: 861px) {
  .producto-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.producto-gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.producto-gallery:has(> [data-producto-back-panel]:not([hidden])) { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .producto-gallery:has(> [data-producto-back-panel]:not([hidden])) { grid-template-columns: 1fr; }
}
.producto-photo-panel { display: flex; flex-direction: column; gap: 0.6rem; }
.producto-photo { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-photo-bg); }
.producto-info h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 0.6rem;
}
.producto-rating { color: var(--color-accent); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; }
.producto-price { font-weight: 700; font-size: 1.4rem; margin-bottom: 1.2rem; }
.producto-desc { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1.6rem; max-width: 50ch; }
.producto-actions { display: flex; flex-direction: column; gap: 0.7rem; max-width: 320px; }

/* ---------- reseñas ---------- */
.reviews-section { border-top: 1px solid var(--color-hairline); padding-top: 2.5rem; max-width: 70ch; }
.reviews-summary { font-size: 1.05rem; color: var(--color-text); }
.review-form-wrap { margin-block: 1.6rem 2rem; }
.review-form-label { font-weight: 700; margin-bottom: 0.6rem; }
.review-stars { display: flex; gap: 0.3rem; margin-bottom: 1rem; }
.review-star {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-hairline);
  cursor: pointer;
  touch-action: manipulation;
}
.review-star.is-active { color: var(--color-accent); }
.review-list { display: flex; flex-direction: column; }
.review-item { padding-block: 1.2rem; border-bottom: 1px solid var(--color-hairline); }
.review-item-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.review-item-stars { color: var(--color-accent); font-size: 0.9rem; }
.review-item-author { font-weight: 700; font-size: 0.9rem; }
.review-item-date { font-size: 0.8rem; color: var(--color-text-muted); }
.review-item-comment { color: var(--color-text-muted); line-height: 1.6; }

/* ---------- mis pedidos (pedidos.html) ---------- */
.pedidos-list { display: flex; flex-direction: column; gap: 1.2rem; max-width: 70ch; }
.pedido-card { border: 1px solid var(--color-hairline); padding: 1.2rem 1.4rem; }
.pedido-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-hairline); }
.pedido-card-fecha { font-size: 0.82rem; color: var(--color-text-muted); }
.pedido-card-estado { font-weight: 700; font-size: 0.92rem; margin-top: 0.2rem; }
.pedido-card-estado[data-status="PAID"] { color: #1a7d3c; }
.pedido-card-estado[data-status="CANCELLED"],
.pedido-card-estado[data-status="REFUNDED"] { color: var(--color-accent); }
.pedido-card-total { font-weight: 700; font-size: 1.05rem; }
.pedido-card-lineas { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--color-text-muted); }
.pedido-card-lineas li { display: flex; justify-content: space-between; gap: 1rem; }
.pedido-shipping { font-size: 0.82rem; color: var(--color-text-muted); }