/* Padeland · catálogo de palas en blanco y negro (como su Instagram @padelandve):
 * fondo negro, texto y detalles en blanco y grises. Títulos en Archivo ancho y grueso, como la letra del logo.
 * Arriba, una vitrina con palas reales sobre una cancha de pádel dibujada en líneas finas.
 * Las fotos vienen con fondo blanco de fábrica: van en una baldosa clara con mix-blend multiply.
 * Movimiento corto y suave; con prefers-reduced-motion solo quedan cambios de color y opacidad. */
/* tokens.css y base.css ya no entran por @import (llegaban en cadena): la página los pide antes, con su propio <link>
   (src/plantilla.html y la cabeza del panel en src/admin.js). */

:root { --control-h: 44px; }
h1, h2, h3 { text-transform: uppercase; font-stretch: 125%; font-weight: 800; letter-spacing: -0.01em; }

/* ── Franja de arriba (datos de su bio) ── */
.franja { background: var(--color-ink); color: var(--color-accent-ink); }
.franja-dentro {
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px; padding-block: 7px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
}
.franja-dentro span + span::before { content: "·"; margin-inline: 10px; }
/* En el celular no caben juntos: se turnan, uno a la vez (con "menos movimiento" queda fijo el primero) */
@media (max-width: 47.99rem) {
  .franja-dentro { display: grid; justify-items: center; overflow: hidden; }
  .franja-dentro span { grid-area: 1 / 1; visibility: hidden; }
  .franja-dentro span:first-child { visibility: visible; }
  .franja-dentro span + span::before { content: none; }
}
/* Cada mensaje se ve 4 s, sale hacia arriba y el siguiente entra desde abajo. Se desliza en vez de fundirse: el texto
 * nunca queda a medio transparentar (gris sobre blanco, poco contraste). Los retrasos negativos hacen que, en el
 * segundo 0, el primero ya esté a la vista (aunque el navegador no llegue a animar). */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .franja-dentro span { animation: turno 12s var(--ease-suave) infinite; }
  .franja-dentro span:nth-child(2) { animation-delay: -8s; }
  .franja-dentro span:nth-child(3) { animation-delay: -4s; }
}
@keyframes turno {
  0%, 27% { transform: none; visibility: visible; }
  30% { transform: translateY(-120%); visibility: hidden; }
  31%, 97% { transform: translateY(120%); visibility: hidden; }
  100% { transform: none; visibility: visible; }
}

/* ── Barra ── */
.barra {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: rgb(10 10 10 / 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.barra-dentro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 60px; }
.marca { display: block; flex: none; padding-block: var(--space-xs); }
/* Alto fijo y ancho según su proporción: la barra nunca lo aplasta ni lo estira */
.marca img { height: 20px; width: auto; max-width: none; object-fit: contain; }
.logo-entra .marca img { opacity: 0; }
.barra-links { display: flex; align-items: center; gap: var(--space-md); }
.barra-link { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: color 200ms ease; }
.barra-link:hover { color: var(--color-ink); }
.barra-wa { min-height: 40px; padding-inline: 16px; }
/* Categorías en la barra: solo en computadora ancha. La línea de abajo crece desde el centro al pasar el mouse. */
.barra-cats { display: none; }
@media (min-width: 72rem) {
  .barra-dentro { justify-content: flex-start; }
  .barra-cats { display: flex; align-items: center; gap: 2px; margin-left: var(--space-lg); }
  .barra-links { margin-left: auto; }
  .barra-cats a {
    position: relative; padding: 10px 12px; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none;
    transition: color 200ms ease;
  }
  .barra-cats a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--color-ink);
    transform: scaleX(0); transition: transform 200ms var(--ease-suave);
  }
  .barra-cats a:hover { color: var(--color-ink); }
  .barra-cats a:hover::after, .barra-cats a:focus-visible::after { transform: scaleX(1); }
}

/* ── Portada ── */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background:
    radial-gradient(60% 45% at 50% 100%, rgb(255 255 255 / 0.10), transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgb(255 255 255 / 0.07), transparent 70%),
    var(--color-paper);
}
/* Cancha de pádel vista desde arriba, en líneas finas: llena el fondo sin hacer ruido */
.portada::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -40px; right: -90px; width: 300px; aspect-ratio: 1 / 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 202' fill='none' stroke='white' stroke-width='0.8'%3E%3Crect x='1' y='1' width='100' height='200'/%3E%3Cpath d='M1 101h100' stroke-width='2.2'/%3E%3Cpath d='M1 31.5h100M1 170.5h100M51 31.5v139'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.09; transform: rotate(-16deg);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
}
.portada-dentro { display: grid; gap: var(--space-md); padding-block: var(--space-xl) var(--space-lg); }
.portada-kicker { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.portada h1 { max-width: none; font-size: clamp(2.6rem, 12.5vw, 5.75rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; }
.intro-dato { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 52ch; }
.cifras {
  display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--space-sm) var(--space-xl);
  padding-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.35;
}
.cifras span { display: grid; gap: 2px; }
.cifras span:nth-child(3) { grid-column: 1 / -1; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.cifras b { color: var(--color-ink); font-size: 1.6rem; font-weight: 800; font-stretch: 125%; line-height: 1; font-variant-numeric: tabular-nums; }
.aviso { color: var(--color-ink); background: var(--color-paper-3); border-left: 2px solid var(--color-ink); padding: var(--space-sm) var(--space-md); max-width: 60ch; }

/* ── Vitrina (Colección 2026) ── */
.vitrina { padding-bottom: var(--space-xl); }
.vitrina-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); }
.vitrina-cabeza h2 { font-size: var(--text-md); letter-spacing: 0.02em; display: flex; align-items: center; gap: var(--space-sm); }
.vitrina-cabeza h2::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.vitrina-flechas { display: none; gap: var(--space-xs); }
.flecha {
  width: 40px; height: 40px; border-radius: 50%; border: var(--rule-hair) solid var(--color-rule-2); background: transparent; color: var(--color-ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-suave);
}
.flecha:hover { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); }
.flecha:active { transform: scale(0.95); }
.vitrina-fila {
  list-style: none; margin: 0; display: flex; gap: var(--space-sm); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 2px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.vitrina-fila::-webkit-scrollbar { display: none; }
.vitrina-item { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
.vitrina-enlace { display: grid; gap: 2px; color: var(--color-ink); text-decoration: none; border-radius: 18px; }
.vitrina-enlace:focus-visible { outline-offset: 4px; }
.vitrina-foto {
  display: block; aspect-ratio: 4 / 5; margin-bottom: var(--space-xs); border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #fff 45%, #e6e6e6 100%);
}
.vitrina-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 300ms var(--ease-suave); }
.vitrina-marca { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.vitrina-nombre { font-size: 0.95rem; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.vitrina-precio { font-size: 1.25rem; font-weight: 800; font-stretch: 125%; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .vitrina-enlace:hover .vitrina-foto img { transform: scale(1.04); }
}

/* ── Catálogo ── */
.catalogo-titulo { padding-top: var(--space-xl); font-size: clamp(1.5rem, 6.5vw, 2.5rem); max-width: none; }

/* ── Filtros ── */
.filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); padding-block: var(--space-md) var(--space-sm); }
.campo { display: grid; gap: var(--space-2xs); min-width: 0; }
.campo > span { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.campo--buscar, .campo--orden { grid-column: 1 / -1; }
.campo input, .campo select {
  height: var(--control-h); width: 100%; min-width: 0; padding-inline: var(--space-sm);
  background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 10px;
  transition: border-color 200ms ease;
}
.campo select {
  -webkit-appearance: none; appearance: none; text-align: left; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fafafa' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 7px;
}
.campo input::placeholder { color: var(--color-muted); }
.campo input:hover, .campo select:hover { border-color: #5a5a5a; }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }

.marcas {
  grid-column: 1 / -1; display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding: var(--space-xs) var(--gutter) var(--space-sm);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.marcas::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 38px; padding-inline: var(--space-md); border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule-2); background: transparent; color: var(--color-ink-2);
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-suave);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
  .chip[aria-pressed="true"]:hover { color: var(--color-accent-ink); }
}
.sin-js { justify-self: start; grid-column: 1 / -1; order: 9; }
.con-js .sin-js { display: none; }

.cuenta { color: var(--color-muted); font-size: var(--text-sm); padding-block: 0 var(--space-md); }
.cuenta [data-cuenta] { display: inline-block; color: var(--color-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-suave);
}
.btn .icono { flex: none; }
.btn--primary { background: var(--color-ink); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--secondary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ── Palas ── */
.palas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.pala {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-margin-top: 90px;
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  outline: 2px solid transparent; outline-offset: 3px;
  transition: transform 250ms var(--ease-suave), border-color 200ms ease, outline-color 700ms ease;
}
/* Cuando se llega desde la vitrina, la tarjeta se marca un momento */
.pala.resaltada { outline-color: var(--color-ink); transition-duration: 250ms, 200ms, 0ms; }
.pala-foto {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #fff 45%, #ececec 100%);
}
.pala-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 300ms var(--ease-suave); }
.pala-foto:not(:has(img)) { background: var(--color-paper-3); }
.pala-sinfoto { font-size: var(--text-xl); font-weight: 800; font-stretch: 125%; text-transform: uppercase; color: var(--color-muted); }
/* Sello "Últimas unidades" */
.pala-quedan {
  position: absolute; top: 8px; left: 8px; margin: 0; padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.pala-texto { flex: 1; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-sm) var(--space-md); }
.pala-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.pala-tipo { padding: 1px 7px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink-2); letter-spacing: 0.06em; }
.pala-nombre { font-family: var(--font-body); font-weight: 600; font-stretch: 100%; font-size: 0.95rem; line-height: 1.3; letter-spacing: 0; text-transform: none; max-width: none; color: var(--color-ink); text-wrap: pretty; }
.pala-precio { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-xs); }
.pala-usd { font-size: 1.35rem; font-weight: 800; font-stretch: 125%; line-height: 1.1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.pala-bs { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* Lo que incluye cada pala (pedido de la tienda): envío gratis, protector + grip, garantía */
.pala-incluye { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: 1px; font-size: 0.72rem; line-height: 1.35; color: var(--color-muted); }
.pala-incluye li::before { content: "✓"; margin-right: 5px; color: var(--color-ink); font-weight: 700; }
.pala-pedir { margin-top: var(--space-sm); width: 100%; min-height: 40px; padding-inline: var(--space-xs); font-size: 0.85rem; }
.pedir-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .pala:hover { transform: translateY(-3px); border-color: var(--color-rule-2); }
  .pala:hover .pala-foto img { transform: scale(1.03); }
}

/* ── Estados ── */
.estado { padding-block: var(--space-2xl); display: grid; gap: var(--space-sm); justify-items: start; }
.estado h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); max-width: 20ch; }
.estado p { color: var(--color-ink-2); }

/* ── Categorías ── */
/* Atajos de la portada: círculos con foto, como los destacados de Instagram */
.atajos { display: flex; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: var(--space-xs) var(--gutter) 2px; }
.atajos::-webkit-scrollbar { display: none; }
.atajo { flex: none; display: grid; justify-items: center; gap: 6px; width: 72px; color: var(--color-ink-2); text-decoration: none; font-size: var(--text-xs); font-weight: 600; }
.atajo-foto { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #fafafa, #6b6b6b); transition: transform 140ms var(--ease-suave); }
.atajo-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; border: 2px solid var(--color-paper); }
.atajo[aria-current="page"] { color: var(--color-ink); }
.atajo[aria-current="page"] .atajo-foto { background: var(--color-ink); }
.atajo:active .atajo-foto { transform: scale(0.95); }
/* Menú del catálogo */
.categorias { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin: var(--space-sm) calc(var(--gutter) * -1) 0; padding: 2px var(--gutter); }
.categorias::-webkit-scrollbar { display: none; }
.categoria { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: var(--space-md); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-weight: 700; font-size: var(--text-sm); text-decoration: none; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.categoria b { font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.categoria[aria-current="page"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.categoria[aria-current="page"] b { color: var(--color-accent-ink); }
@media (hover: hover) and (pointer: fine) { .categoria:hover { border-color: var(--color-ink-2); color: var(--color-ink); } .categoria[aria-current="page"]:hover { color: var(--color-accent-ink); } }

/* Tallas en la tarjeta: se ven siempre; el selector aparece solo con el carrito encendido */
.pala-tallas { font-size: 0.72rem; color: var(--color-ink-2); line-height: 1.4; margin-top: 4px; }
.pala-tallas span { color: var(--color-muted); }
.pala-talla { display: none; width: 100%; min-height: 38px; margin-top: var(--space-xs); padding: 0 30px 0 10px; border-radius: 10px; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fafafa' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 7px; color: var(--color-ink); font: inherit; font-size: var(--text-sm); -webkit-appearance: none; appearance: none; }
.con-carrito .pala-talla { display: block; }
.pala-talla--falta { border-color: var(--color-ink); outline: 2px solid var(--color-ink); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) { .pala-talla--falta { animation: dice-que-no 300ms var(--ease-suave); } }
@keyframes dice-que-no { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.pala-usd small { font-size: 0.6em; font-weight: 600; font-stretch: 100%; color: var(--color-muted); }

/* ── Portada: datos en una línea y la vitrina de protagonista (título y abanico: ver "Portada con carácter") ── */
.portada-dentro { padding-block: var(--space-lg) var(--space-md); }
.portada .cifras { grid-template-columns: auto auto minmax(0, 1fr); gap: 0 var(--space-lg); padding-top: var(--space-xs); font-size: var(--text-xs); }
.portada .cifras b { font-size: 1.15rem; }
.portada .cifras span:nth-child(3) { grid-column: auto; padding: 0 0 0 var(--space-lg); border-top: 0; border-left: var(--rule-hair) solid var(--color-rule); }
.vitrina-cabeza h2 { font-size: clamp(1.1rem, 4vw, 1.6rem); }

/* ── Portada en el celular: compacta, tipo app (lo primero que se ve son las categorías y los productos) ── */
@media (max-width: 47.99rem) {
  .portada-kicker { display: none; }
  .portada-dentro { gap: var(--space-sm); padding-block: var(--space-md) var(--space-sm); }
  .portada h1 { font-size: clamp(1.9rem, 9.5vw, 2.6rem); line-height: 0.98; }
  .portada h1 br { display: none; }
  .intro-dato { font-size: 0.8rem; }
  .cifras { grid-template-columns: auto auto minmax(0, 1fr); gap: 0 var(--space-md); padding-top: 0; font-size: 0.66rem; }
  .cifras b { font-size: 1.05rem; }
  .cifras span:nth-child(3) { grid-column: auto; padding-top: 0; border-top: 0; }
  .vitrina { padding-bottom: var(--space-lg); }
  .vitrina-cabeza h2 { font-size: var(--text-sm); }
  .vitrina-item { flex-basis: 44vw; }
  .vitrina-nombre { font-size: 0.82rem; }
  .vitrina-precio { font-size: 1.05rem; }
  .catalogo-titulo { padding-top: var(--space-lg); }
}

/* ── Pulido: filtros plegables, categorías fijas, fotos suaves, toque en tarjetas ── */
.filtros { grid-template-columns: minmax(0, 1fr); }
.filtros .campo--buscar { grid-column: auto; }
.filtros-mas { border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; }
.filtros-boton { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); cursor: pointer; list-style: none; font-weight: 700; font-size: var(--text-sm); }
.filtros-boton::-webkit-details-marker { display: none; }
.filtros-boton::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease-suave); }
.filtros-mas[open] > .filtros-boton::after { transform: rotate(-135deg) translateY(-2px); }
.filtros-boton b { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: var(--color-accent-ink); font-size: var(--text-xs); }
.filtros-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md); }
@media (min-width: 60rem) { .filtros-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .filtros { grid-template-columns: minmax(0, 1fr); } }
/* Categorías fijas debajo de la barra al bajar por el catálogo */
.categorias { position: sticky; top: 60px; z-index: 5; background: rgb(10 10 10 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: var(--space-xs); }
/* Fotos suaves: con JavaScript arrancan transparentes y aparecen al cargar (sin JS se ven siempre) */
.pala-foto img, .vitrina-foto img, .atajo-foto img { transition: opacity 400ms ease, transform 300ms var(--ease-suave); }
.fotos-suaves .pala-foto img:not(.cargada), .fotos-suaves .vitrina-foto img:not(.cargada), .fotos-suaves .atajo-foto img:not(.cargada) { opacity: 0; }
/* Toque en el celular: la tarjeta se hunde un poquito */
@media (hover: none) { .pala:active { transform: scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .pala:active { transform: none; } }

/* ── Aviso al agregar ("Agregado: … · Ver pedido") ── */
.aviso-carrito {
  position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: calc(var(--z-sticky-nav) + 1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); max-width: 440px; margin-inline: auto;
  padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--color-ink); color: var(--color-accent-ink);
  font-size: var(--text-sm); font-weight: 600; box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.8);
}
.aviso-carrito span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-carrito button { flex: none; height: 36px; padding-inline: 14px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 48rem) { .aviso-carrito { left: auto; right: 24px; bottom: 92px; width: 400px; } }
@media (prefers-reduced-motion: no-preference) {
  /* Solo transform: si el navegador no anima, el aviso igual se ve */
  .aviso-carrito--entra { animation: aviso-entra 320ms var(--ease-suave); }
}
@keyframes aviso-entra { from { transform: translateY(14px) scale(0.97); } }

/* ── Carrito (camino B): botón flotante + ventana del pedido ── */
.pala-pedir--lista { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.carrito-boton {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-sticky-nav);
  display: inline-flex; align-items: center; gap: var(--space-xs); height: 52px; padding: 0 8px 0 18px; border-radius: var(--radius-pill);
  border: 0; background: var(--color-ink); color: var(--color-accent-ink); font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.15);
  transition: transform 140ms var(--ease-suave);
}
.carrito-boton:active { transform: scale(0.96); }
.carrito-boton b { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--color-paper); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.carrito-boton--salta { animation: carrito-salta 320ms var(--ease-suave); }
@keyframes carrito-salta { 40% { transform: scale(1.08); } }

.carrito {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 0;
  border-radius: 20px 20px 0 0; background: var(--color-paper-2); color: var(--color-ink); overflow: auto; overscroll-behavior: contain;
}
.carrito::backdrop { background: rgb(0 0 0 / 0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.carrito-form { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom)); }
.carrito-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.carrito-cabeza h2 { font-size: var(--text-xl); }
.carrito-cerrar { width: 40px; height: 40px; border-radius: 50%; border: var(--rule-hair) solid var(--color-rule-2); background: transparent; color: var(--color-ink); font-size: 1rem; cursor: pointer; }
.carrito-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.carrito-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "foto info cant" "foto quitar cant"; gap: 2px var(--space-sm); align-items: center; padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.carrito-item img, .carrito-sinfoto { grid-area: foto; width: 64px; height: 64px; border-radius: 10px; background: #fff; object-fit: contain; mix-blend-mode: normal; }
.carrito-info { grid-area: info; min-width: 0; }
.carrito-nombre { font-weight: 600; font-size: var(--text-sm); line-height: 1.3; }
.carrito-precio { font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.carrito-cantidad { grid-area: cant; display: flex; align-items: center; gap: 6px; }
.carrito-cantidad button { width: 36px; height: 36px; border-radius: 50%; border: var(--rule-hair) solid var(--color-rule-2); background: transparent; color: var(--color-ink); font-size: 1.1rem; cursor: pointer; }
.carrito-cantidad button:disabled { opacity: 0.35; cursor: not-allowed; }
.carrito-cantidad b { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.carrito-quitar { grid-area: quitar; justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--color-muted); font: inherit; font-size: var(--text-xs); text-decoration: underline; cursor: pointer; }
.carrito-vacio { color: var(--color-muted); font-size: var(--text-sm); }
.carrito-regalo { padding: var(--space-sm); border: var(--rule-hair) dashed var(--color-rule-2); border-radius: 10px; font-size: var(--text-sm); }
.carrito-total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px var(--space-sm); }
.carrito-total span { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.carrito-total b { font-size: 1.6rem; font-weight: 800; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.carrito-total small { grid-column: 1 / -1; justify-self: end; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.carrito-datos { display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md) 0 0; border: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.carrito-datos legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.carrito .a-campo { display: grid; gap: 4px; }
.carrito .a-campo > span { font-size: var(--text-xs); color: var(--color-ink-2); }
.carrito .a-campo input { min-height: 44px; padding: 10px 12px; font-size: 1rem; background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 10px; }
.carrito .a-campo input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.carrito-entregas { display: grid; gap: var(--space-xs); }
.carrito-entrega { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 10px; font-size: var(--text-sm); cursor: pointer; }
.carrito-entrega:has(input:checked) { border-color: var(--color-ink); }
.carrito-entrega input { accent-color: #fafafa; width: 18px; height: 18px; }
.carrito-enviar { width: 100%; min-height: 52px; }
.carrito-enviar:disabled { opacity: 0.4; cursor: not-allowed; }
.carrito-nota { color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .carrito[open] { animation: carrito-sube 320ms var(--ease-suave); }
  .carrito[open]::backdrop { animation: carrito-fondo 320ms ease; }
}
@keyframes carrito-sube { from { translate: 0 100%; } }
@keyframes carrito-fondo { from { opacity: 0; } }
@media (min-width: 48rem) {
  /* En computadora, panel a la derecha */
  .carrito { width: 440px; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; }
  @keyframes carrito-sube { from { translate: 100% 0; } }
  .carrito-boton { right: 24px; bottom: 24px; }
}

/* ── Tarjeta de regalo ── */
.regalo { margin-top: var(--space-3xl); border-block: var(--rule-hair) solid var(--color-rule); background: radial-gradient(60% 80% at 15% 50%, rgb(255 255 255 / 0.06), transparent 70%), var(--color-paper); }
.regalo-dentro { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); }
.regalo-tarjeta {
  position: relative; width: min(100%, 300px); aspect-ratio: 1.586; justify-self: center; display: grid; align-content: space-between; padding: 20px;
  border-radius: 16px; background: linear-gradient(135deg, #ffffff 0%, #e9e9e9 100%); color: var(--color-accent-ink);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.2); transform: rotate(-5deg);
  transition: transform 300ms var(--ease-suave);
}
.regalo-tarjeta img { height: 16px; width: auto; filter: invert(1); }
.regalo-tarjeta span { font-size: 0.8rem; font-weight: 800; font-stretch: 125%; letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .regalo:hover .regalo-tarjeta { transform: rotate(-2deg) translateY(-4px); } }
.regalo-texto { display: grid; gap: var(--space-sm); }
.regalo-texto h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
.regalo-texto > p { color: var(--color-ink-2); }
.regalo-form { display: grid; gap: var(--space-sm); padding-top: var(--space-xs); }
.regalo-form fieldset { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.regalo-monto { position: relative; cursor: pointer; }
.regalo-monto input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.regalo-monto span {
  display: inline-flex; align-items: center; height: 44px; padding-inline: var(--space-md); border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule-2); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.regalo-monto input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.regalo-monto input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.regalo-otro { display: grid; gap: 4px; max-width: 220px; }
.regalo-otro > span { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.regalo-otro input { height: var(--control-h); padding-inline: var(--space-sm); background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 10px; font-size: 1rem; }
.regalo-otro input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
/* El campo de "otro monto" aparece solo cuando lo eligen (si el navegador no sabe :has, se ve siempre) */
@supports selector(:has(*)) {
  .regalo-form:not(:has(input[value="otro"]:checked)) .regalo-otro { display: none; }
}
.regalo-error { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.regalo-form .btn { justify-self: start; }
@media (min-width: 48rem) {
  .regalo-dentro { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) { .regalo:hover .regalo-tarjeta { transform: rotate(-5deg); } }

/* ── Pie ── */
.pie { margin-top: 0; background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.pie-cta { border-bottom: var(--rule-hair) solid var(--color-rule); }
.pie-cta-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-block: var(--space-xl); }
.pie .pie-cta-titulo { color: var(--color-ink); font-size: clamp(1.6rem, 7vw, 3rem); font-weight: 900; font-stretch: 125%; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; max-width: none; }
.pie-dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xl); }
.pie-dato { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.pie-icono { color: var(--color-ink); margin-bottom: var(--space-2xs); }
.pie h2 { font-size: var(--text-md); letter-spacing: 0.02em; }
.pie p { color: var(--color-ink-2); }
/* ── Portada con carácter: título grande, abanico de palas, cinta de marcas ──
 * Celular: título compacto, categorías y la vitrina enseguida. Computadora: título a la izquierda y el abanico
 * con 3 palas reales a la derecha. Todo entra una vez al abrir (sin "menos movimiento"); si el navegador no anima,
 * se ve igual, quieto. */
.portada .portada-dentro { grid-template-columns: minmax(0, 1fr); align-items: center; }
.portada-texto { display: grid; gap: var(--space-sm); justify-items: start; }
.portada .portada-titulo {
  font-size: clamp(2.5rem, 12vw, 6.4rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; max-width: none;
}
.titulo-linea { display: inline-block; }
/* "aquí." en letra hueca (solo el borde), como los títulos de sus posts */
.titulo-hueco { color: transparent; -webkit-text-stroke: 1.5px var(--color-ink); }
@supports not (-webkit-text-stroke: 1px black) { .titulo-hueco { color: var(--color-ink); } }
.portada-bajada { color: var(--color-ink-2); font-size: var(--text-base); max-width: 42ch; text-wrap: pretty; }
.portada .cifras { padding-top: var(--space-xs); }
.abanico { display: none; }

/* Íconos de los atajos sin foto */
.atajo-foto svg { display: block; width: 100%; height: 100%; padding: 17px; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); border: 2px solid var(--color-paper); }

/* Cinta de marcas: nombres grandes en letra hueca que se llenan al pasar el mouse */
.cinta {
  overflow: hidden; border-block: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista { display: flex; width: max-content; }
.cinta-lista { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.cinta-lista li { display: flex; align-items: center; }
/* Separador: una pelotita entre marca y marca (va en cada li, así las dos copias miden lo mismo) */
.cinta-lista li::after { content: ""; width: 8px; height: 8px; margin-inline: clamp(18px, 3vw, 36px); border-radius: 50%; background: var(--color-muted); }
.cinta-lista a {
  display: block; padding-block: 14px; text-decoration: none; white-space: nowrap;
  font-size: clamp(1.4rem, 5vw, 2.6rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--color-ink-2); transition: color 200ms ease, -webkit-text-stroke-color 200ms ease;
}
@supports not (-webkit-text-stroke: 1px black) { .cinta-lista a { color: var(--color-ink-2); } }
.cinta-lista a:hover, .cinta-lista a:focus-visible { color: var(--color-ink); -webkit-text-stroke-color: var(--color-ink); }
.cinta-lista a:focus-visible { outline-offset: -4px; }
.cinta-lista[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cinta-lista[aria-hidden="true"] { display: flex; }
  .cinta-pista { animation: cinta-pasa 45s linear infinite; }
  .cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }
}
/* Con "menos movimiento" la cinta queda quieta y se desliza con el dedo */
@media (prefers-reduced-motion: reduce) { .cinta { overflow-x: auto; scrollbar-width: none; } }
@keyframes cinta-pasa { to { transform: translateX(-50%); } }

/* Entrada al abrir: el título sube línea por línea (con un desenfoque corto) */
@media (prefers-reduced-motion: no-preference) {
  .titulo-linea { animation: titulo-entra 700ms var(--ease-suave) backwards; animation-delay: calc(var(--n) * 90ms); }
  .portada-bajada, .portada .cifras { animation: titulo-entra 700ms var(--ease-suave) 300ms backwards; }
}
@keyframes titulo-entra { from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); } }

@media (max-width: 47.99rem) {
  .portada .portada-titulo { font-size: clamp(2.2rem, 11.5vw, 3rem); }
  .portada-bajada { display: none; }
  .titulo-hueco { -webkit-text-stroke-width: 1.2px; }
  .cinta { margin-bottom: var(--space-md); }
}

/* Computadora: título y abanico lado a lado; las categorías abajo, a todo el ancho */
@media (min-width: 60rem) {
  .portada .portada-dentro {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 36vw, 460px); grid-template-areas: "texto abanico" "atajos atajos";
    gap: var(--space-lg) var(--space-xl); padding-block: var(--space-xl) var(--space-lg);
  }
  .portada-texto { grid-area: texto; }
  .atajos { grid-area: atajos; }
  .portada .portada-titulo { font-size: clamp(4.2rem, 7.4vw, 6.6rem); }
  .titulo-linea { display: block; }
  .titulo-hueco { -webkit-text-stroke-width: 2px; }

  .abanico { display: block; grid-area: abanico; position: relative; height: 400px; }
  /* Un brillo suave detrás de las cartas, como un foco */
  .abanico::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.14), transparent); pointer-events: none; }
  .abanico-carta {
    --x: 0px; --y: 0px; --r: 0deg;
    position: absolute; left: 50%; top: 50%; width: 200px; height: 270px; margin: -135px 0 0 -100px;
    display: block; border-radius: 22px; background: #fff; overflow: hidden; color: #0a0a0a; text-decoration: none;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -16px rgb(0 0 0 / 0.9), 0 8px 16px -8px rgb(0 0 0 / 0.6);
    transform: translate(var(--x), var(--y)) rotate(var(--r)); transform-origin: 50% 90%;
    transition: transform 500ms var(--ease-suave);
  }
  .abanico-carta img { width: 100%; height: 100%; object-fit: contain; padding: 16px 14px 38px; mix-blend-mode: multiply; }
  .abanico-pie {
    position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b6b;
  }
  .abanico-pie b { color: #0a0a0a; font-size: 0.9rem; font-stretch: 125%; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .abanico-carta--izq { --x: -118px; --y: 18px; --r: -13deg; }
  /* En la carta de la izquierda el precio va a la izquierda: la del medio le tapa el lado derecho */
  .abanico-carta--izq .abanico-pie { flex-direction: row-reverse; }
  .abanico-carta--centro { z-index: 1; --y: -10px; }
  .abanico-carta--der { --x: 118px; --y: 18px; --r: 13deg; }
  .abanico-carta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; z-index: 2; }
  @media (hover: hover) and (pointer: fine) {
    /* Al pasar el mouse el abanico se abre, y la carta señalada sube y queda adelante */
    .abanico:hover .abanico-carta--izq { --x: -150px; --r: -17deg; }
    .abanico:hover .abanico-carta--der { --x: 150px; --r: 17deg; }
    .abanico .abanico-carta:hover { z-index: 2; --y: -26px; }
    .abanico-carta:active { transition-duration: 160ms; --y: -18px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    /* Entrada: las cartas suben juntas desde abajo y se abren en abanico */
    .abanico-carta { animation: carta-entra 900ms var(--ease-suave) backwards; animation-delay: calc(200ms + var(--n) * 80ms); }
  }
  .cinta { margin-bottom: var(--space-xl); }
}
/* Pantallas de 960 a 1200 px: el abanico un poco más chico, para que "EMPIEZA" no quede debajo de las cartas */
@media (min-width: 60rem) and (max-width: 74.99rem) { .abanico { scale: 0.82; } }
@keyframes carta-entra { from { opacity: 0; transform: translate(0, 70px) rotate(0deg) scale(0.94); } }
@media (prefers-reduced-motion: reduce) {
  .abanico-carta { transition: none; }
}

.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.pie-final p { font-size: var(--text-sm); color: var(--color-muted); }
.pie-redes a { color: var(--color-ink); font-weight: 600; text-decoration-color: var(--color-muted); }
.pie-redes a:hover { text-decoration-color: var(--color-ink); }

/* ── Entrada suave de las tarjetas al bajar (solo si el sistema no pide menos movimiento) ──
 * La portada no se anima: el título está siempre visible, aunque el navegador no corra animaciones. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pala { animation: aparece linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes aparece { from { opacity: 0; translate: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  .pala:hover, .pala:hover .pala-foto img, .vitrina-enlace:hover .vitrina-foto img, .btn:active, .chip:active, .flecha:active { transform: none; }
}

/* ── Tamaños ── */
@media (max-width: 30rem) {
  .barra-wa { width: 40px; padding: 0; }
  .barra-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 40rem) {
  .palas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
  .pie-dentro { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
  .portada::before { width: 420px; right: -60px; top: -60px; }
}
@media (min-width: 48rem) {
  .portada-dentro { padding-block: var(--space-2xl) var(--space-xl); }
  .cifras { grid-template-columns: auto auto auto; }
  .cifras span:nth-child(3) { grid-column: auto; padding-top: 0; padding-left: var(--space-xl); border-top: 0; border-left: var(--rule-hair) solid var(--color-rule); }
  .con-js .vitrina-flechas { display: flex; }
}
@media (min-width: 60rem) {
  .filtros { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .campo--buscar, .campo--orden { grid-column: auto; }
  .palas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pedir-extra { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .portada::before { width: 520px; right: 4%; top: -80px; }
}
@media (min-width: 80rem) {
  .palas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Tallas de zapatos: US al lado de la EU, filtro "Tu talla US" y guía por marca ── */
.pala-tallas small { color: var(--color-muted); font-size: inherit; font-variant-numeric: tabular-nums; }
.pala-tallas small:empty { display: none; }
.campo--us select { font-weight: 700; }
.guia-tallas { border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; margin-bottom: var(--space-md); }
.guia-tallas > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); cursor: pointer; list-style: none; font-weight: 700; font-size: var(--text-sm); }
.guia-tallas > summary::-webkit-details-marker { display: none; }
.guia-tallas > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease-suave); }
.guia-tallas[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.guia-tallas > p { padding: 0 var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); text-wrap: pretty; max-width: 60ch; }
.guia-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); padding: var(--space-md); }
.guia-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.guia-tabla caption { text-align: left; font-weight: 800; padding-bottom: var(--space-2xs); }
.guia-tabla caption a { font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); margin-left: var(--space-xs); }
.guia-tabla th, .guia-tabla td { padding: 6px 8px; text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.guia-tabla thead th { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }

/* ── Ficha de producto (/p/<id>) ── */
.pala-enlace { color: inherit; text-decoration: none; }
.pala-foto .pala-enlace { display: contents; }
.pala-nombre .pala-enlace:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .pala-nombre .pala-enlace:hover { text-decoration: underline; text-underline-offset: 3px; } }
.ficha-migas { padding-block: var(--space-md) var(--space-sm); font-size: var(--text-sm); }
.ficha-migas a { color: var(--color-ink-2); text-decoration: none; font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.ficha-cuerpo { display: grid; gap: var(--space-md); align-items: start; padding-bottom: var(--space-xl); }
.ficha { overflow: hidden; }
.ficha .pala-texto { padding: var(--space-md); gap: var(--space-xs); }
.ficha .pala-nombre { font-size: clamp(1.35rem, 5.5vw, 2rem); font-weight: 800; font-stretch: 112%; line-height: 1.15; text-wrap: balance; }
.ficha .pala-usd { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.ficha .pala-tallas { font-size: var(--text-sm); }
.ficha .pala-pedir { min-height: 50px; font-size: 1rem; }
.ficha .pedir-extra { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.ficha-preguntar { width: 100%; min-height: 44px; margin-top: var(--space-2xs); background: transparent; border-color: transparent; color: var(--color-ink-2); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .ficha-preguntar:hover { color: var(--color-ink); border-color: var(--color-rule-2); } }
.ficha-guia { border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; padding: var(--space-md); display: grid; gap: var(--space-sm); }
.ficha-guia h2 { font-size: var(--text-base); font-family: var(--font-body); font-stretch: 100%; text-transform: none; letter-spacing: 0; }
.ficha-guia p { font-size: var(--text-xs); color: var(--color-muted); text-wrap: pretty; }
.ficha-guia a { color: inherit; }
.ficha-mas { padding-bottom: var(--space-2xl); }
.ficha-mas .catalogo-titulo { padding-top: 0; margin-bottom: var(--space-md); }
.ficha-cuerpo { max-width: 72rem; }
@media (min-width: 48rem) {
  .ficha { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ficha .pala-foto { aspect-ratio: 1; }
  .ficha .pala-texto { padding: var(--space-lg); justify-content: center; }
  .ficha .pala-precio { margin-top: var(--space-sm); }
  .ficha-guia { max-width: 36rem; }
}
.pala.ficha:hover, .pala.ficha:active { transform: none; }
.pala.ficha:hover .pala-foto img { transform: none; }
/* En la ficha, "Agregar" es la acción principal */
.ficha .pala-pedir { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); }
.ficha .pala-pedir.pala-pedir--lista { background: transparent; color: var(--color-ink); }
.ficha .pala-incluye { font-size: var(--text-sm); }
/* Selector de talla en la tarjeta: entra "EU 42.5 · US 10.5" en el celular */
.pala-talla { padding: 0 24px 0 8px; background-position: right 8px center; font-size: 0.8rem; letter-spacing: -0.01em; }
.ficha .pala-talla { font-size: var(--text-sm); padding: 0 30px 0 12px; }

/* ── "Avísame": talla o producto que no hay ── */
.pala-avisame { display: inline-flex; align-items: center; min-height: 36px; margin-top: 2px; font-size: var(--text-xs); color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pala-avisame:hover { color: var(--color-ink); } }
.ficha .pala-avisame { display: none; }   /* en la ficha el formulario está justo abajo */
.ficha-avisame { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); padding: var(--space-md); display: grid; gap: var(--space-sm); scroll-margin-top: 90px; }
.ficha-avisame h2 { font-size: var(--text-lg, 1.25rem); font-family: var(--font-body); font-stretch: 100%; text-transform: none; letter-spacing: 0; }
.ficha-avisame > p { color: var(--color-ink-2); font-size: var(--text-sm); }
.avisame-form { display: grid; gap: var(--space-sm); }
.avisame-form .btn { min-height: 48px; }
.avisame-nota { font-size: var(--text-xs); color: var(--color-muted); }
.avisame-flash { padding: var(--space-sm) var(--space-md); border-radius: 10px; background: var(--color-ink); color: var(--color-paper); font-weight: 600; font-size: var(--text-sm); }
.avisame-flash--error { background: transparent; color: var(--color-ink); border: var(--rule-hair) solid var(--color-ink); }
.estado + .ficha-avisame { margin-bottom: var(--space-2xl); max-width: 32rem; }
@media (min-width: 48rem) { .avisame-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .avisame-form .campo:first-of-type:has(select), .avisame-form .btn, .avisame-nota { grid-column: 1 / -1; } }
.ficha-avisame > .avisame-flash { color: var(--color-paper); font-size: var(--text-sm); }
.ficha-avisame > .avisame-flash--error { color: var(--color-ink); }

/* Inclinación de las fotos hacia el mouse (catalogo.js pone --rx/--ry/--mx/--my y la clase .inclina) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pala-foto, .vitrina-foto { perspective: 700px; }
  .pala-foto::after, .vitrina-foto::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / 0.55), transparent 55%);
    mix-blend-mode: soft-light;
  }
  .vitrina-foto { position: relative; }
  .pala-foto.inclina::after, .vitrina-foto.inclina::after { opacity: 1; }
  :is(.pala, .vitrina-enlace) :is(.pala-foto, .vitrina-foto).inclina img {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04);
    transition: opacity 400ms ease, transform 160ms ease-out;
  }
  .pala.ficha .pala-foto.inclina img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02); }
}

/* ── Mientras carga una foto: un brillo que pasa (en vez de un cuadro vacío). Solo transform. ── */
.vitrina-foto { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .fotos-suaves :is(.pala-foto, .vitrina-foto):has(img:not(.cargada))::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent 25%, rgb(0 0 0 / 0.07) 50%, transparent 75%);
    transform: translateX(-100%); animation: brillo-carga 1.4s linear infinite;
  }
  .fotos-suaves .atajo-foto:has(img:not(.cargada)) { animation: pulso-carga 1.1s ease-in-out infinite alternate; }
}
@keyframes brillo-carga { to { transform: translateX(100%); } }
@keyframes pulso-carga { from { opacity: 0.45; } }

/* ── Paso entre páginas (categorías, ficha de producto): fundido corto; la barra queda quieta y la foto del
 * producto "viaja" de la tarjeta a la ficha (catalogo.js le pone el nombre a la foto que se tocó). ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .barra { view-transition-name: barra; }
  .pala.ficha .pala-foto img { view-transition-name: foto-producto; }
  ::view-transition-old(root) { animation: 160ms ease-out both salir-pagina; }
  ::view-transition-new(root) { animation: 260ms var(--ease-suave) both entrar-pagina; }
  ::view-transition-group(foto-producto) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
}
@keyframes salir-pagina { to { opacity: 0; } }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(8px); } }

/* ── La cancha del fondo gira apenas al bajar (animación ligada al scroll, sin JavaScript) ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .portada::before { animation: cancha-gira linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
  }
}
@keyframes cancha-gira { to { transform: rotate(-24deg) translateY(60px); opacity: 0.03; } }
@media (hover: hover) and (pointer: fine) {
  .vitrina-fila { cursor: grab; }
  .vitrina-fila--arrastra { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .vitrina-fila--arrastra a { pointer-events: none; }
}

/* ── Specs de las palas (src/specs.js): línea corta en la tarjeta y ficha técnica en la página del producto ── */
.pala-specs { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-ink-2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ficha .pala-specs { font-size: var(--text-sm); }
.ficha-specs { border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; padding: var(--space-md); display: grid; gap: var(--space-sm); }
.ficha-specs h2 { font-size: var(--text-base); font-family: var(--font-body); font-stretch: 100%; text-transform: none; letter-spacing: 0; }
.specs-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.specs-tabla th, .specs-tabla td { padding: 8px 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.specs-tabla tr:last-child th, .specs-tabla tr:last-child td { border-bottom: 0; }
.specs-tabla th { width: 38%; padding-right: var(--space-sm); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.specs-tabla td { color: var(--color-ink); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.specs-fuente { font-size: var(--text-xs); color: var(--color-muted); text-wrap: pretty; }
.specs-fuente a { color: inherit; }
@media (min-width: 48rem) { .ficha-specs { max-width: 36rem; } }

/* "Filtros y orden" en computadora: ocupa todo el ancho y cada campo toma ~170 px (antes quedaba encajonado en una
 * columna de la grilla de búsqueda y los selectores se cortaban). */
@media (min-width: 60rem) {
  .filtros-mas { grid-column: 1 / -1; }
  .filtros-campos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ── Comparar palas (/comparar y el botón "Comparar" de cada tarjeta) ── */
.comparar { padding-bottom: var(--space-2xl); }
.comparar-titulo { font-size: clamp(1.5rem, 6vw, 2.25rem); padding-bottom: var(--space-2xs); }
.comparar-nota { color: var(--color-ink-2); font-size: var(--text-sm); padding-bottom: var(--space-md); }
.comparar-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink); vertical-align: middle; margin-inline: 2px; }
.comparar-marco { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.comparar-marco:focus-visible { outline-offset: -2px; }
.comparar-tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.comparar-3 { min-width: 600px; }   /* con 3 palas se desliza de lado en el celular; con 2 entra en la pantalla */
.comparar-tabla th, .comparar-tabla td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.comparar-tabla thead th, .comparar-tabla thead td { border-bottom: 0; vertical-align: bottom; }
.comparar-tabla tbody th { position: sticky; left: 0; z-index: 1; width: 110px; background: var(--color-paper); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.comparar-tabla td { color: var(--color-ink); text-wrap: pretty; }
.comparar-2 thead th { width: 45%; } .comparar-3 thead th { width: 30%; }
.comparar-distinto th::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--color-ink); vertical-align: middle; }
.comparar-distinto td { font-weight: 700; }
.comparar-falta { color: var(--color-muted); }
.comparar-precio td { font-size: 1.25rem; font-weight: 800; font-stretch: 125%; }
.comparar-precio small { font-size: var(--text-xs); font-weight: 600; font-stretch: 100%; color: var(--color-muted); }
.comparar-acciones th, .comparar-acciones td { border-bottom: 0; }
.comparar-pala { display: grid; gap: 4px; color: var(--color-ink); text-decoration: none; }
.comparar-foto { display: block; aspect-ratio: 1; max-width: 220px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0%, #fff 45%, #ececec 100%); }
.comparar-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.comparar-marca { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.comparar-nombre { font-weight: 700; line-height: 1.25; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .comparar-pala:hover .comparar-nombre { text-decoration: underline; text-underline-offset: 3px; } }
.comparar-quitar { display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; font-size: var(--text-xs); color: var(--color-muted); }
.comparar-ver { min-height: 40px; width: 100%; }
.comparar-fuente { padding-top: var(--space-md); max-width: 70ch; }

/* Botón "Comparar" sobre la foto de cada pala (lo pone catalogo.js) y barra de abajo */
.pala-comparar {
  position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0 11px; border-radius: var(--radius-pill); border: var(--rule-hair) solid rgb(0 0 0 / 0.14);
  background: rgb(255 255 255 / 0.92); color: #111; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-suave);
}
.pala-comparar::before { content: "+"; font-size: 0.95rem; line-height: 1; }
.pala-comparar[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.pala-comparar[aria-pressed="true"]::before { content: "✓"; font-size: 0.8rem; }
.pala-comparar:active { transform: scale(0.95); }
/* Área táctil de 44 px sin agrandar la píldora */
.pala-comparar::after { content: ""; position: absolute; inset: -6px; }
.barra-comparar {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
  transition: opacity 180ms ease-out, transform 180ms var(--ease-suave);
}
.barra-comparar[hidden] { display: none; }
@starting-style { .barra-comparar { opacity: 0; transform: translateY(12px); } }
.barra-comparar a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.barra-comparar a[aria-disabled="true"] { background: transparent; color: var(--color-ink-2); pointer-events: none; }
.barra-comparar button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--color-ink-2); cursor: pointer; font-size: 1rem; }
.barra-comparar-aviso { position: absolute; left: 4px; bottom: calc(100% + 8px); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--color-ink); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; }
@media (max-width: 40rem) {
  .comparar-tabla th, .comparar-tabla td { padding: 8px 6px; }
  .comparar-tabla tbody th { width: 76px; font-size: 0.62rem; letter-spacing: 0.04em; white-space: nowrap; }
  .comparar-distinto th::before { margin-right: 4px; }
  .comparar-precio td { font-size: 1.05rem; }
  .comparar-nombre { font-size: var(--text-sm); }
}

/* ── "¿Qué pala me conviene?" (src/worker.js → ayudaPala) ── */
.ayuda-pala { margin-top: var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; background: linear-gradient(120deg, rgb(255 255 255 / 0.05), transparent 60%); }
.ayuda-boton { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-xs); min-height: 52px; padding: var(--space-sm) var(--space-md); cursor: pointer; list-style: none; }
.ayuda-boton::-webkit-details-marker { display: none; }
.ayuda-boton span:first-child { font-weight: 800; font-size: var(--text-md); }
.ayuda-sub { color: var(--color-ink-2); font-size: var(--text-sm); }
.ayuda-boton::after { content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease-suave); }
.ayuda-pala[open] > .ayuda-boton::after { transform: rotate(-135deg) translateY(-2px); }
.ayuda-form { display: grid; gap: var(--space-md); padding: 0 var(--space-md) var(--space-md); }
.ayuda-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.ayuda-form legend { padding: 0 0 var(--space-xs); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.ayuda-opciones { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ayuda-opcion { position: relative; }
.ayuda-opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ayuda-opcion span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-suave);
}
.ayuda-opcion input:checked + span { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); }
.ayuda-opcion input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ayuda-opcion:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ayuda-opcion:hover input:not(:checked) + span { border-color: var(--color-ink-2); color: var(--color-ink); } }
.ayuda-form .btn { justify-self: start; min-height: 46px; }
.ayuda-consejo { padding: 0 var(--space-md) var(--space-md); color: var(--color-ink); font-weight: 600; text-wrap: pretty; }
.ayuda-consejo:empty { display: none; }

/* ── Colección 2026 en el celular: al deslizar, las tarjetas de los costados giran y se achican un poco
 * (animación ligada al scroll horizontal, sin JavaScript; solo transform/opacity) ── */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view(inline)) {
    .vitrina-item { animation: vitrina-flujo linear both; animation-timeline: view(inline); }
    .vitrina-fila { padding-block: 10px; }
  }
}
@keyframes vitrina-flujo {
  0% { transform: perspective(900px) rotateY(-24deg) scale(0.86); opacity: 0.55; }
  38%, 62% { transform: perspective(900px) rotateY(0deg) scale(1); opacity: 1; }
  100% { transform: perspective(900px) rotateY(24deg) scale(0.86); opacity: 0.55; }
}

/* ── Ficha de producto vistosa ──
 * La foto es la protagonista: un estudio blanco con luz arriba, piso y sombra, y la marca en letras gigantes detrás
 * (las fotos traen fondo blanco y se mezclan con multiply, así la marca se ve "detrás" de la pala; nada de líneas,
 * que se verían cruzando las palas blancas). Marca, nombre y precio en Archivo ancho; "Agregar" grande; lo que
 * promete la tienda con íconos.
 * En computadora, dos columnas: la foto se queda quieta mientras se lee la ficha técnica al lado.
 * En el celular la foto va de borde a borde y, al pasar "Agregar", aparece abajo una píldora con el precio. */
.ficha-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-xs); }
.ficha-migas span { color: var(--color-muted); }
.ficha-cuerpo { max-width: none; padding-bottom: var(--space-2xl); timeline-scope: --comprar; }
.pala.ficha { overflow: visible; background: none; border: 0; border-radius: 0; }

/* Foto */
.ficha .pala-foto {
  margin-inline: calc(var(--gutter) * -1); container-type: inline-size; isolation: isolate;
  background:
    radial-gradient(42% 6% at 50% 91%, rgb(0 0 0 / 0.14), transparent 70%),
    linear-gradient(transparent 62%, rgb(0 0 0 / 0.07)),
    radial-gradient(circle at 50% 34%, #fff 0%, #fff 36%, #e2e2e2 100%);
}
.ficha-marca-fondo {
  position: absolute; z-index: -1; left: 0; right: 0; top: 6%; text-align: center; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-size: 30cqi; font-weight: 900; font-stretch: 125%; line-height: 0.8; letter-spacing: -0.04em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; color: rgb(0 0 0 / 0.06);
}
.ficha .pala-foto img { position: relative; padding: 6%; box-sizing: border-box; }
/* Sin foto: baldosa oscura más baja con la marca en grande (sin la marca repetida de fondo) */
.ficha .pala-foto:not(:has(img)) { aspect-ratio: 4 / 3; background: radial-gradient(70% 60% at 50% 40%, rgb(255 255 255 / 0.07), transparent 70%), var(--color-paper-3); }
.ficha .pala-foto:not(:has(img)) .ficha-marca-fondo { display: none; }
.ficha .pala-sinfoto { max-width: 90%; font-size: 10cqi; font-weight: 900; letter-spacing: -0.02em; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.ficha-detalles:empty { display: none; }   /* sin ficha técnica, sin Avísame y sin guía: no deja un hueco */
.ficha .pala-quedan { z-index: 3; }
.ficha .pala-foto:not(:has(img)) .pala-quedan { background: var(--color-ink); color: var(--color-accent-ink); }   /* sobre la baldosa oscura, en blanco */

/* Marca, nombre y precio */
.ficha .pala-texto { padding: var(--space-lg) 0 0; gap: var(--space-sm); }
.ficha .pala-marca { font-size: var(--text-sm); letter-spacing: 0.2em; color: var(--color-ink-2); }
.ficha .pala-marca a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ficha .pala-marca a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; } }
.ficha .pala-nombre {
  font-family: var(--font-display); font-size: clamp(1.9rem, 8.4vw, 3.4rem); font-weight: 900; font-stretch: 125%;
  line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
}
.ficha .pala-nombre--largo { font-size: clamp(1.45rem, 6.2vw, 2.5rem); line-height: 1.02; }   /* nombres largos (zapatos, ropa) */
.ficha .pala-precio { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-sm); margin-top: 0; padding-top: var(--space-2xs); scroll-margin-top: 96px; }
.ficha .pala-usd { font-size: clamp(2.3rem, 10vw, 3.3rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.ficha .pala-bs { font-size: var(--text-sm); }
.ficha-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-chips li {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink);
}

/* "Agregar al pedido": la acción principal, grande */
.ficha .pala-pedir {
  min-height: 58px; margin-top: var(--space-xs); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 14px 36px -16px rgb(255 255 255 / 0.45);
  view-timeline: --comprar; view-timeline-inset: 80px 0px;
}
.ficha .pala-talla { min-height: 48px; }

/* Lo que promete la tienda */
.ficha-confianza { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.ficha-confianza li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: 14px 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); text-wrap: pretty;
}
.ficha-confianza b { display: block; color: var(--color-ink); font-weight: 700; }
.ficha-icono { color: var(--color-ink); }

/* Ficha técnica, Avísame y guía de tallas: tarjetas con título en Archivo ancho */
.ficha-detalles { display: grid; gap: var(--space-md); padding-top: var(--space-lg); }
.ficha-detalles > * { max-width: none; background: var(--color-paper-2); border-color: var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg) var(--space-md); }
.ficha-detalles h2 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.02em; }

/* "Más de <marca>": en el celular, una fila que se desliza de lado */
.ficha-mas-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-md); margin-bottom: var(--space-md); }
.ficha-mas .ficha-mas-cabeza .catalogo-titulo { margin: 0; }
.ficha-mas-ver { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ficha-mas-ver:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 47.99rem) {
  .ficha-mas .palas {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 47%; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  }
  .ficha-mas .palas::-webkit-scrollbar { display: none; }
  .ficha-mas .pala { scroll-snap-align: start; }
}

/* Computadora: foto quieta a la izquierda, todo lo demás a la derecha */
@media (min-width: 48rem) {
  .pala.ficha { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 64px); align-items: start; }
  /* Cuadrada y entera a la vista: nunca más alta que la pantalla menos la barra */
  .ficha .pala-foto { grid-row: 1 / span 2; justify-self: center; width: min(100%, calc(100svh - 120px)); margin-inline: 0; border-radius: 24px; position: sticky; top: 88px; }
  .ficha .pala-texto { grid-column: 2; padding: var(--space-md) 0 0; justify-content: flex-start; }
  .ficha-detalles { grid-column: 2; }
  .ficha .pala-precio { margin-top: 0; }
  /* El nombre crece con el ancho de su columna (media pantalla), no con toda la pantalla */
  .ficha .pala-nombre { font-size: clamp(1.8rem, 3.6vw, 3.4rem); }
  .ficha .pala-nombre--largo { font-size: clamp(1.4rem, 2.6vw, 2.5rem); }
  .ficha .pala-usd { font-size: clamp(2rem, 3.4vw, 3.3rem); }
}
@media (min-width: 48rem) and (max-height: 40rem) { .ficha .pala-foto { position: relative; top: auto; } }

/* Celular: la píldora con el precio aparece cuando "Agregar" ya quedó arriba (animación ligada al scroll, sin JavaScript).
 * Mismo lugar que el botón del carrito: si ese botón o la barra de comparar están a la vista, la píldora no sale. */
.ficha-barra { display: none; }
@media (max-width: 47.99rem) {
  @supports (animation-timeline: view()) and (timeline-scope: none) {
    .ficha-barra {
      position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
      display: inline-flex; align-items: center; gap: var(--space-sm); height: 52px; padding: 0 20px; border-radius: var(--radius-pill);
      background: var(--color-ink); color: var(--color-accent-ink); text-decoration: none; font-weight: 700; touch-action: manipulation;
      box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.15);
      visibility: hidden;   /* si la animación no corre, queda escondida (nunca tapando sin motivo) */
      animation: ficha-barra-entra linear both; animation-timeline: --comprar; animation-range: exit 0% exit 100%;
    }
    .ficha-barra b { font-size: 1.1rem; font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums; }
    .ficha-barra small { font-size: 0.7em; font-weight: 600; font-stretch: 100%; }
    .ficha-barra span { padding-left: var(--space-sm); border-left: var(--rule-hair) solid rgb(0 0 0 / 0.2); font-size: var(--text-sm); }
    .ficha-barra:active { scale: 0.96; }
    body:has(.carrito-boton:not([hidden]), .barra-comparar:not([hidden])) .ficha-barra { display: none; }
  }
}
@keyframes ficha-barra-entra {
  from { transform: translateY(calc(100% + 32px)); opacity: 0; visibility: hidden; }
  to { transform: none; opacity: 1; visibility: visible; }
}

/* Entrada: los datos suben apenas, uno detrás de otro (la foto no: ella viaja desde la tarjeta) */
@media (prefers-reduced-motion: no-preference) {
  .ficha .pala-texto > *, .ficha-detalles { animation: ficha-entra 480ms var(--ease-suave) both; }
  .ficha .pala-texto > :nth-child(2) { animation-delay: 40ms; }
  .ficha .pala-texto > :nth-child(3) { animation-delay: 80ms; }
  .ficha .pala-texto > :nth-child(4) { animation-delay: 120ms; }
  .ficha .pala-texto > :nth-child(n+5), .ficha-detalles { animation-delay: 160ms; }
}
@keyframes ficha-entra { from { opacity: 0; transform: translateY(10px); } }

/* Carrito: aviso de tope por pedido debajo del precio (el "+" queda apagado) */
.carrito-tope { margin-top: 2px; font-size: var(--text-xs); color: var(--color-muted); }
/* Comparar: pala sin foto en Odoo → la marca en grande sobre gris oscuro (antes quedaba un cuadro blanco vacío) */
.comparar-foto:has(.comparar-sinfoto) { display: grid; place-items: center; background: var(--color-paper-3); container-type: inline-size; }
.comparar-sinfoto { max-width: 92%; font-size: 10cqi; font-weight: 900; font-stretch: 125%; line-height: 1; text-align: center; text-transform: uppercase; color: var(--color-muted); }

/* Ficha: "Preguntar por WhatsApp" y "Compartir" uno al lado del otro (si no hay WhatsApp, Compartir ocupa todo) */
.ficha-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-2xs); }
.ficha-acciones .btn { width: 100%; min-height: 44px; margin: 0; padding-inline: var(--space-xs); gap: 6px; background: transparent; border-color: var(--color-rule-2); color: var(--color-ink-2); font-weight: 600; font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) { .ficha-acciones .btn:hover { color: var(--color-ink); border-color: var(--color-ink-2); } }
.ficha-acciones .btn:active { transform: scale(0.97); }

/* Comparar: "Pregúntanos cuál te conviene" debajo de la tabla */
.comparar-pregunta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card);
  background: linear-gradient(120deg, rgb(255 255 255 / 0.06), transparent 60%);
}
.comparar-pregunta p { max-width: 46ch; color: var(--color-ink-2); text-wrap: pretty; }
.comparar-pregunta b { color: var(--color-ink); }
.comparar-pregunta .btn { min-height: 48px; }
@media (max-width: 40rem) { .comparar-pregunta { padding: var(--space-md); } .comparar-pregunta .btn { width: 100%; } }
/* Comparar en el celular: la columna de los nombres (Forma, Peso…) queda fija al deslizar de lado, con una sombra
 * que marca el borde; la celda vacía de arriba también, para que las fotos pasen por detrás */
.comparar-tabla thead td:first-child, .comparar-tabla tbody th { position: sticky; left: calc(var(--gutter) * -1); z-index: 2; background: var(--color-paper); }   /* hasta el borde de la pantalla: sin rendija */
.comparar-tabla tbody th { box-shadow: 8px 0 12px -10px rgb(0 0 0 / 0.9); }

/* Carrito: para qué es la cédula, datos guardados en el teléfono, producto que ya no está */
.carrito-ayuda { font-size: inherit; color: var(--color-muted); font-weight: 400; }
.carrito-recuerda { text-align: left; }
.carrito-olvidar { padding: 0; border: 0; background: none; color: var(--color-ink-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; }
.carrito-item--agotado img, .carrito-item--agotado .carrito-sinfoto { opacity: 0.4; filter: grayscale(1); }
.carrito-item--agotado .carrito-nombre { color: var(--color-muted); text-decoration: line-through; }
.carrito-agotado { margin-top: 2px; font-size: var(--text-xs); font-weight: 700; color: var(--color-ink); }

/* Página de error del pedido */
.pedido-fallido-acciones { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pedido-fallido-acciones .btn { min-height: 48px; }

/* Ficha: tallas como botones. Con ellos encendidos (.con-chips, lo pone public/carrito.js) se esconden la línea
 * "Tallas: …" y el selector, que repiten lo mismo; el selector sigue en la página porque es el que lee "Agregar". */
.pala.con-chips .pala-tallas, .pala.con-chips .pala-talla { display: none; }
.tallas-chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.tallas-chips legend { padding: 0 0 var(--space-xs); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.tallas-chips legend small { font-size: inherit; font-weight: 400; letter-spacing: 0.04em; }
.tallas-chips-lista { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.talla-chip { position: relative; }
.talla-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.talla-chip span {
  display: grid; justify-items: center; align-content: center; min-width: 56px; min-height: 52px; padding: 6px 12px;
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: 12px; color: var(--color-ink); line-height: 1.1; font-variant-numeric: tabular-nums;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-suave);
}
.talla-chip b { font-size: 1rem; font-weight: 800; font-stretch: 112%; }
.talla-chip small { font-size: 0.68rem; color: var(--color-muted); transition: color 160ms ease; }
.talla-chip i { margin-top: 2px; font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2); }
.talla-chip input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.talla-chip input:checked + span :is(small, i) { color: rgb(10 10 10 / 0.65); }
.talla-chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.talla-chip:active span { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .talla-chip:hover input:not(:checked) + span { border-color: var(--color-ink-2); } }
.tallas-chips--falta .talla-chip span { border-color: var(--color-ink); }
@media (prefers-reduced-motion: no-preference) { .tallas-chips--falta .tallas-chips-lista { animation: dice-que-no 300ms var(--ease-suave); } }

/* Listado: los mismos botones, chicos y en una fila que se desliza de lado (de borde a borde de la tarjeta) */
.tallas-chips--fila { margin-top: var(--space-2xs); }
.tallas-chips--fila .tallas-chips-lista {
  flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: calc(var(--space-sm) * -1); padding: 2px var(--space-sm);
}
.tallas-chips--fila .tallas-chips-lista::-webkit-scrollbar { display: none; }
.tallas-chips--fila .talla-chip { flex: none; scroll-snap-align: start; }
.tallas-chips--fila .talla-chip span { min-width: 44px; min-height: 44px; padding: 4px 8px; border-radius: 10px; }
.tallas-chips--fila .talla-chip b { font-size: 0.85rem; }
.tallas-chips--fila .talla-chip small { font-size: 0.6rem; white-space: nowrap; }
.tallas-chips--fila .talla-chip i { font-size: 0.52rem; }

/* Carrito: cambiar la talla en la línea y aviso si el precio cambió desde que se agregó */
.carrito-talla { display: grid; gap: 2px; max-width: 100%; margin: 4px 0 2px; font-size: var(--text-xs); color: var(--color-muted); }
.carrito-talla select {
  width: 100%; min-width: 0; min-height: 36px; padding: 0 28px 0 10px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: 8px;
  background-color: var(--color-paper); color: var(--color-ink); font: inherit; font-size: var(--text-sm); font-weight: 600;
}
/* Celular angosto (≤ 384 px): el nombre y la talla usan todo el ancho; la cantidad baja a la fila de "Quitar" */
@media (max-width: 24rem) {
  .carrito-item { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "foto info info" "foto quitar cant"; }
  .carrito-item img, .carrito-sinfoto { width: 56px; height: 56px; }
}
.carrito-cambio { margin-top: 2px; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.carrito-cambio--bajo::before { content: "↓ "; }
.carrito-cambio--subio::before { content: "↑ "; }

/* Celular: con "Tu pedido" a la vista, la barra de "Comparar" sube (bloque "Quinta vuelta") justo a la altura del aviso
 * "Agregado: …". Si la barra está, el aviso sube por encima de ella y de su mensajito ("Máximo 3", 36 px más arriba). */
@media (max-width: 36rem) {
  body:has(.barra-comparar:not([hidden])) .aviso-carrito { bottom: calc(176px + env(safe-area-inset-bottom)); }
}

/* ── Catálogo, regalo y pie vistosos ── */

/* Tarjetas del listado: la foto queda como una placa blanca con piso, la marca y el precio pesan más,
 * y al pasar el mouse la tarjeta sube, brilla apenas y una línea blanca cruza arriba del texto.
 * Todo con ".palas" adelante para no tocar la ficha /p/ (usa las mismas clases). */
.palas .pala {
  position: relative; background: linear-gradient(180deg, var(--color-paper-2) 0%, #0d0d0d 100%);
  transition: transform 300ms var(--ease-suave), border-color 200ms ease, outline-color 700ms ease, box-shadow 300ms var(--ease-suave);
}
.palas .pala.resaltada { transition-duration: 300ms, 200ms, 0ms, 300ms; }
.palas .pala-foto {
  margin: 6px 6px 0; border-radius: calc(var(--radius-card) - 5px);
  background:
    radial-gradient(40% 5% at 50% 94%, rgb(0 0 0 / 0.16), transparent 100%),
    radial-gradient(circle at 50% 40%, #fff 0%, #fff 48%, #e4e4e4 100%);
}
/* Sin foto: placa oscura con las líneas de una cancha y la marca grande */
.palas .pala-foto:not(:has(img)) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='.8'%3E%3Crect x='14' y='8' width='72' height='84'/%3E%3Cpath d='M14 50h72M14 30h72M14 70h72M50 30v40'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 40%, #222 0%, var(--color-paper-3) 70%);
}
.palas .pala-sinfoto { color: var(--color-ink-2); letter-spacing: 0.02em; }

/* "Últimas unidades": abajo a la izquierda (arriba lo tapaba "Comparar"), negro sobre la foto blanca, con un punto que late */
.palas .pala-quedan {
  top: auto; bottom: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; background: #0a0a0a; color: #fff; font-size: 0.62rem; letter-spacing: 0.06em; white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.55);
}
.palas .pala-quedan::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .palas .pala-quedan::before { animation: quedan-late 1.6s ease-in-out infinite; }
}
@keyframes quedan-late { 50% { opacity: 0.25; } }

/* Jerarquía: marca ancha con una rayita, nombre más firme, precio grande */
.palas .pala-texto { position: relative; }
.palas .pala-marca { color: var(--color-ink-2); font-stretch: 125%; letter-spacing: 0.12em; }
.palas .pala-marca::before { content: ""; width: 12px; height: 2px; background: currentColor; }
.palas .pala-nombre { font-weight: 700; font-size: 0.98rem; }
.palas .pala-usd { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; }

/* Línea blanca que cruza arriba del texto al pasar el mouse (solo transform) */
.palas .pala-texto::before {
  content: ""; position: absolute; top: 0; left: var(--space-sm); right: var(--space-sm); height: 2px; border-radius: 2px;
  background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-suave);
}
@media (hover: hover) and (pointer: fine) {
  .palas .pala:hover { border-color: #4a4a4a; box-shadow: 0 24px 44px -26px rgb(255 255 255 / 0.22); }
  .palas .pala:hover .pala-texto::before { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .palas .pala:hover { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .palas .pala-texto::before { transition: none; }
}

/* ── Tarjeta de regalo: dos tarjetas de verdad (la blanca adelante, una negra asomando atrás).
 * El monto que eligen se ve escrito en la tarjeta (solo CSS con :has, sin JavaScript). ── */
.regalo-mazo { position: relative; width: min(100%, 320px); aspect-ratio: 1.586; justify-self: center; margin-block: var(--space-sm) var(--space-md); }
.regalo-mazo .regalo-tarjeta {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; align-items: end; gap: 0 var(--space-sm);
  padding: 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='.8'%3E%3Crect x='6' y='10' width='148' height='80'/%3E%3Cpath d='M80 10v80M38 10v80M122 10v80M38 50h84'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(135deg, #ffffff 0%, #f0f0f0 42%, #d2d2d2 100%);
  transition: transform 450ms var(--ease-suave);
}
.regalo-mazo .regalo-tarjeta img { grid-column: 1 / -1; align-self: start; height: 18px; }
.regalo-mazo .regalo-tarjeta span { grid-row: 3; font-size: 0.7rem; letter-spacing: 0.1em; }
.regalo-cifra { grid-row: 3; grid-column: 2; font-size: 2.1rem; font-weight: 900; font-stretch: 125%; line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.regalo-cifra::after { content: "$100"; }
.regalo:has(input[value="200"]:checked) .regalo-cifra::after { content: "$200"; }
.regalo:has(input[value="300"]:checked) .regalo-cifra::after { content: "$300"; }
.regalo:has(input[value="otro"]:checked) .regalo-cifra::after { content: "Tú eliges"; font-size: 0.55em; letter-spacing: 0; }
/* La de atrás: negra, con las líneas de la cancha en blanco, girada para el otro lado */
.regalo-mazo .regalo-tarjeta--atras {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='.8'%3E%3Crect x='6' y='10' width='148' height='80'/%3E%3Cpath d='M80 10v80M38 10v80M122 10v80M38 50h84'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(135deg, #2a2a2a 0%, #0e0e0e 70%);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.14);
  transform: translate(22px, -14px) rotate(7deg);
}
/* Brillo que cruza la tarjeta blanca: una vez al aparecer en pantalla y otra al pasar el mouse */
.regalo-mazo .regalo-tarjeta:not(.regalo-tarjeta--atras)::before,
.regalo-mazo .regalo-tarjeta:not(.regalo-tarjeta--atras)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.95) 48%, transparent 60%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .regalo-mazo .regalo-tarjeta:not(.regalo-tarjeta--atras)::after { transition: transform 900ms var(--ease-suave); }
  @supports (animation-timeline: view()) {
    .regalo-mazo .regalo-tarjeta:not(.regalo-tarjeta--atras)::before { animation: regalo-brillo linear both; animation-timeline: view(); animation-range: entry 60% cover 55%; }
  }
  /* Al cambiar el monto, la cifra entra de nuevo (cada monto tiene su propia animación, así se reinicia) */
  .regalo-cifra { animation: cifra-1 350ms var(--ease-suave); }
  .regalo:has(input[value="200"]:checked) .regalo-cifra { animation-name: cifra-2; }
  .regalo:has(input[value="300"]:checked) .regalo-cifra { animation-name: cifra-3; }
  .regalo:has(input[value="otro"]:checked) .regalo-cifra { animation-name: cifra-4; }
}
@keyframes regalo-brillo { to { transform: translateX(120%); } }
@keyframes cifra-1 { from { opacity: 0; transform: translateY(6px); } }
@keyframes cifra-2 { from { opacity: 0; transform: translateY(6px); } }
@keyframes cifra-3 { from { opacity: 0; transform: translateY(6px); } }
@keyframes cifra-4 { from { opacity: 0; transform: translateY(6px); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .regalo:hover .regalo-mazo .regalo-tarjeta:not(.regalo-tarjeta--atras) { transform: rotate(-2deg) translate(-6px, -6px); }
  .regalo:hover .regalo-mazo .regalo-tarjeta--atras { transform: translate(34px, -22px) rotate(11deg); }
  .regalo:hover .regalo-mazo .regalo-tarjeta:not(.regalo-tarjeta--atras)::after { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .regalo:hover .regalo-mazo .regalo-tarjeta--atras { transform: translate(22px, -14px) rotate(7deg); }
}
/* Montos: se hunden al tocarlos y se marcan al pasar el mouse */
.regalo-monto span { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-suave); }
.regalo-monto:active span { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .regalo-monto:hover input:not(:checked) + span { border-color: var(--color-ink-2); } }
@media (prefers-reduced-motion: reduce) { .regalo-monto:active span { transform: none; } }
@media (min-width: 48rem) {
  .regalo-mazo { width: min(100%, 380px); }
  .regalo-cifra { font-size: 2.5rem; }
}

/* ── Pie con presencia de marca: cinta blanca que corre, datos con íconos en círculo, Instagram como botón
 * y el logo grande al final que se asoma al llegar ── */
.pie-cinta { display: flex; overflow: hidden; background: var(--color-ink); color: var(--color-accent-ink); }
.pie-cinta p { flex: none; display: flex; justify-content: space-around; min-width: 100%; max-width: none; margin: 0; padding-block: 11px; }   /* cada copia, al menos tan ancha como la pantalla: sin hueco al dar la vuelta */
.pie-cinta span { display: inline-flex; align-items: center; white-space: nowrap; font-size: 0.78rem; font-weight: 800; font-stretch: 125%; letter-spacing: 0.06em; text-transform: uppercase; }
.pie-cinta span::after { content: "✦"; margin-inline: 18px; font-size: 0.7em; }
@media (prefers-reduced-motion: no-preference) {
  .pie-cinta p { animation: cinta-corre 38s linear infinite; }
  .pie-cinta:hover p { animation-play-state: paused; }
}
@keyframes cinta-corre { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .pie-cinta p { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 4px; padding-inline: var(--gutter); }
  .pie-cinta p + p { display: none; }
  .pie-cinta span:last-child::after { content: none; }
}

.pie .pie-dato { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; transition: border-color 200ms ease, transform 300ms var(--ease-suave); }
.pie .pie-dato > :not(.pie-icono) { grid-column: 2; }
.pie .pie-icono { grid-row: span 2; width: 44px; height: 44px; margin: 0; padding: 10px; border-radius: 50%; background: var(--color-ink); color: var(--color-accent-ink); }
.pie .pie-dato h2 { font-stretch: 125%; font-weight: 800; align-self: center; }
@media (min-width: 40rem) {
  .pie .pie-dato { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .pie .pie-dato > :not(.pie-icono) { grid-column: auto; }
  .pie .pie-icono { grid-row: auto; margin-bottom: var(--space-2xs); }
}
@media (hover: hover) and (pointer: fine) {
  .pie .pie-dato:hover { border-color: var(--color-rule-2); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pie .pie-dato:hover { transform: translateY(-3px); }
}

.pie-final { align-items: center; }
.pie .pie-redes a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; font-weight: 700;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-suave);
}
.pie .pie-redes a:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
.pie .pie-redes a:active { transform: scale(0.97); }
.pie .pie-redes a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pie .pie-redes a:active { transform: none; } }

/* Logo grande al final, que se desvanece hacia abajo */
.pie-logo { overflow: hidden; padding-top: var(--space-md); }
.pie-logo img {
  display: block; width: 100%; height: auto; margin-bottom: -3%;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 95%); mask-image: linear-gradient(#000 30%, transparent 95%);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pie-logo img { animation: logo-asoma linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes logo-asoma { from { opacity: 0.2; transform: translateY(35%); } }

/* ── Segunda vuelta: tarjetas en celulares angostos (320 px) ──
 * El precio y la marca de los productos sin foto se achican según el ancho de la tarjeta (antes se cortaban),
 * "Últimas unidades" queda en "Últimas" si no entra, y la tarjeta negra del regalo ya no se sale por el borde. */
.palas .pala { container-type: inline-size; }
.palas .pala-usd { font-size: clamp(1.1rem, 13cqi, 1.5rem); }
.palas .pala-sinfoto { max-width: 100%; padding-inline: 10px; text-align: center; font-size: clamp(0.8rem, 11cqi, 1.6rem); overflow-wrap: anywhere; }
.palas .pala-quedan { max-width: calc(100% - 16px); }
@container (max-width: 150px) {
  .palas .quedan-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.regalo-mazo { width: min(calc(100% - 40px), 320px); }
@media (min-width: 48rem) { .regalo-mazo { width: min(calc(100% - 40px), 380px); } }
/* Con "Otro monto" escrito (catalogo.js pone data-monto), la tarjeta muestra ese monto */
.regalo:has(input[value="otro"]:checked) .regalo-cifra[data-monto]::after { content: attr(data-monto); font-size: 1em; letter-spacing: -0.02em; }

/* ── Saltar al contenido y página que no existe ── */
/* "Saltar al catálogo/contenido": escondido hasta que se llega con el teclado (Tab), entonces aparece arriba. */
.saltar { position: absolute; top: 8px; left: 8px; z-index: var(--z-toast); padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-accent-ink); font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.saltar:focus-visible { transform: none; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .saltar { transition: transform 200ms var(--ease-suave); } }
/* 404: buscador (categoría + texto + botón) y los círculos de categorías */
.perdido { justify-items: stretch; max-width: 44rem; }
.perdido h1 { font-size: clamp(1.75rem, 7vw, 2.75rem); font-stretch: 125%; font-weight: 900; line-height: 1; text-transform: uppercase; }
.perdido-buscar { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 40rem) { .perdido-buscar { grid-template-columns: minmax(9rem, auto) 1fr auto; } .perdido-buscar .campo--buscar { grid-column: auto; } }
.perdido .atajos { margin-block: var(--space-sm); }
.perdido > .btn { justify-self: start; }
/* A19: la cinta del pie heredaba el gris de `.pie p` (gris claro sobre blanco, contraste 1,67); vuelve al color de la cinta */
.pie .pie-cinta p { color: inherit; }

/* ── Tercera vuelta: "¿Cómo compro?" en el pie (3 pasos numerados, número hueco como el título de la portada) ── */
.pie-pasos { display: grid; gap: var(--space-md); padding-block: var(--space-xl) var(--space-lg); }
.pie-pasos h2 { font-size: clamp(1.3rem, 5.5vw, 2rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.pie-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: paso; }
.pie-pasos li {
  counter-increment: paso; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-sm); align-items: start;
  padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper);
}
.pie-pasos li::before {
  content: counter(paso); grid-row: span 2; font-size: 2.6rem; font-weight: 900; font-stretch: 125%; line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-ink); font-variant-numeric: tabular-nums;
}
.pie-pasos b { font-size: var(--text-md); font-weight: 800; font-stretch: 112%; color: var(--color-ink); }
.pie-pasos li span { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.45; text-wrap: pretty; }
@media (min-width: 48rem) {
  .pie-pasos ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
  .pie-pasos li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); padding: var(--space-lg); }
  .pie-pasos li::before { grid-row: auto; font-size: 3.4rem; margin-bottom: var(--space-2xs); }
  /* Flecha entre pasos */
  .pie-pasos li:not(:last-child)::after { content: "→"; position: absolute; right: calc(var(--space-md) * -1 - 6px); top: 50%; translate: 0 -50%; z-index: 1; color: var(--color-muted); font-weight: 700; }
}
/* Sello con la talla ("Solo talla 44 2/3"): en tarjetas angostas, letra un poco más chica para que entre */
@container (max-width: 150px) { .palas .pala-quedan { font-size: 0.56rem; letter-spacing: 0.03em; } }

/* ── Cuarta vuelta: "Ver más" en el listado ──
 * Las que pasan de las primeras 24 (worker.js / catalogo.js les ponen pala--despues) no se ven ni bajan su foto
 * hasta tocar "Ver más". Con ?ver=todas (o después de tocarlo) la lista lleva palas--todas y se ven todas. */
[data-palas]:not(.palas--todas) > .pala--despues { display: none; }
.ver-mas { display: flex; justify-content: center; margin: var(--space-lg) 0 0; }
.ver-mas[hidden] { display: none; }
.ver-mas .btn { min-width: min(100%, 280px); min-height: 48px; font-weight: 800; }
/* La tilde de "AQUÍ." casi tocaba la "I" de "EMPIEZA" (interlineado 0.9): un poco de aire solo encima de esa línea */
.portada .titulo-hueco { padding-top: 0.08em; }

/* ── Quinta vuelta (revisión cruzada): en el celular la barra de "Comparar" (abajo a la izquierda) quedaba tapada por
 * "Tu pedido" (abajo a la derecha). Con el botón del pedido a la vista y pantalla angosta, la barra sube encima. ── */
@media (max-width: 36rem) {
  body:has(.carrito-boton:not([hidden])) .barra-comparar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ── Sexta vuelta ──
 * A27: con "Tu pedido" a la vista, el pie deja lugar al final para que el botón no tape el logo grande. */
body:has(.carrito-boton:not([hidden])) .pie-logo { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
body:has(.carrito-boton:not([hidden])) .pie-logo img { margin-bottom: 0; }   /* sin el margen negativo, que se comía ese lugar */
/* A29: "Cargando…" junto al contador mientras llegan las demás tarjetas (solo si tarda) */
.cuenta-cargando { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.cuenta-cargando::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .cuenta-cargando::before { animation: quedan-late 1s ease-in-out infinite; }
}