/* ==========================================================================
   PARK STORE — Hoja de estilos
   Paleta tomada directamente del logo original (Park Store Logo.ai)
   --------------------------------------------------------------------------
   ÍNDICE
   01  Tokens: colores, tipografía, ritmo, curvas
   02  Reset y base
   03  Cursor personalizado
   04  Aparición al hacer scroll
   05  Navegación
   06  Hero
   07  Catálogo: riel fijo + categorías ancladas
   08  Tarjetas de producto (inclinación 3D)
   09  Pedido
   10  Pie
   11  Aviso de error en la lista
   12  Responsive
   13  Movimiento reducido
   ========================================================================== */

/* ===== 01  TOKENS ======================================================== */
:root{
  /* Colores extraídos del logo */
  --crema:        #FBF7ED;
  --crema-alta:   #FFFDF8;
  --crema-hund:   #F2ECDC;
  --tinta:        #014527;
  --tinta-fuerte: #004023;
  --hoja:         #4C8431;
  --hoja-osc:     #4C762F;
  --corteza:      #6D584F;

  /* Derivados */
  /* --linea y --linea-firme son para FILETES, nunca para texto.
     --suave y --tenue son para TEXTO: su opacidad está puesta para que
     se lean de verdad sobre la crema (medido: 5.7:1 y 4.6:1, AA cumplido).
     Si las bajas, el texto pequeño deja de leerse. */
  --linea:        color-mix(in srgb, var(--tinta) 14%, transparent);
  --linea-firme:  color-mix(in srgb, var(--tinta) 28%, transparent);
  --suave:        color-mix(in srgb, var(--tinta) 78%, transparent);
  --tenue:        color-mix(in srgb, var(--tinta) 70%, transparent);

  /* Tipografía */
  --fuente:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-tit: "Inter Tight", var(--fuente);

  --t-eyebrow: 0.6875rem;
  --t-cuerpo:  clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --t-lead:    clamp(1.125rem, 1rem + 0.9vw, 1.6rem);
  --t-h2:      clamp(2rem, 1.3rem + 3.4vw, 4.5rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-hero:    clamp(3.25rem, 1rem + 15vw, 15rem);

  /* Ritmo */
  --pad-x: clamp(1.25rem, 4vw, 5.5rem);
  --sec-y: clamp(5rem, 11vh, 10rem);
  --maxw:  84rem;

  /* Curvas: cortas y decididas. Nada flota, nada se arrastra. */
  --snap:   cubic-bezier(.2,.9,.25,1);
  --sobre:  cubic-bezier(.22,1.42,.36,1);
  --salida: cubic-bezier(.4,0,.2,1);
  --d-rapido: 160ms;
  --d-medio:  280ms;
  --d-largo:  420ms;

  /* Puntero y luz dirigida (los actualiza el JS) */
  --mx: 0.5;
  --my: 0.35;
  --px: 0;
  --py: 0;
}

/* ===== 02  RESET Y BASE ================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--fuente);
  font-size:var(--t-cuerpo);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--fuente-tit);
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:0.95;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; }

::selection{ background:var(--tinta); color:var(--crema); }

:focus-visible{
  outline:2px solid var(--hoja);
  outline-offset:3px;
  border-radius:3px;
}

.envoltorio{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.oculto-visual{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); border:0;
}

/* Etiqueta pequeña en versalitas */
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--tenue);
}
.eyebrow::before{
  content:"";
  width:1.75rem; height:1px;
  background:var(--linea-firme);
}

.lead{
  max-width:34ch;
  font-size:var(--t-lead);
  line-height:1.3;
  letter-spacing:-0.02em;
  color:var(--suave);
}

/* ===== 03  CURSOR PERSONALIZADO ========================================= */
@media (hover:hover) and (pointer:fine){
  body.cursor-activo,
  body.cursor-activo a,
  body.cursor-activo button,
  body.cursor-activo .tarjeta{ cursor:none; }
}

.cursor{
  position:fixed; top:0; left:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--d-medio) var(--snap);
}
.cursor.visible{ opacity:1; }

.cursor-punto{
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:var(--tinta);
  transition:opacity var(--d-rapido) var(--snap);
}

.cursor-aro{
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border:1px solid var(--linea-firme);
  border-radius:50%;
  transition:opacity var(--d-medio) var(--snap),
             width var(--d-rapido) var(--sobre),
             height var(--d-rapido) var(--sobre),
             margin var(--d-rapido) var(--sobre),
             background-color var(--d-rapido) var(--snap),
             border-color var(--d-rapido) var(--snap);
}

body.cursor-sobre .cursor-aro{
  width:54px; height:54px;
  margin:-27px 0 0 -27px;
  background:color-mix(in srgb, var(--tinta) 8%, transparent);
  border-color:var(--tinta);
}
body.cursor-sobre .cursor-punto{ opacity:0; }

/* ===== 04  APARICIÓN AL HACER SCROLL ==================================== */
.rev{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity var(--d-medio) var(--salida),
             transform var(--d-largo) var(--sobre);
  transition-delay:calc(var(--d,0) * 45ms);
}
.rev.dentro{ opacity:1; transform:none; }

/* Variante cortina, para títulos grandes */
.rev-linea{ display:block; overflow:hidden; }
.rev-linea > span{
  display:block;
  transform:translate3d(0,105%,0);
  transition:transform 520ms var(--sobre);
  transition-delay:calc(var(--d,0) * 60ms);
}
.rev-linea.dentro > span{ transform:none; }

/* ===== 05  NAVEGACIÓN =================================================== */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1rem var(--pad-x);
  background:color-mix(in srgb, var(--crema) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-medio) var(--snap),
             transform 320ms var(--snap);
}
.nav.pegada{ border-bottom-color:var(--linea); }
.nav.oculta{ transform:translate3d(0,-102%,0); }

.nav-marca{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--fuente-tit);
  font-weight:600; font-size:0.9375rem;
  letter-spacing:-0.025em;
}
.nav-marca svg{ width:30px; height:30px; }

.nav-enlaces{
  display:flex; align-items:center;
  gap:clamp(1rem,2.4vw,2.25rem);
}
/* ---------------------------------------------------------------------------
   DE AQUÍ HASTA EL FINAL DE LA SECCIÓN NO SE USA AHORA MISMO.
   La página no tiene ningún enlace ni botón de contacto: se quitaron junto
   con el número de teléfono. Todo esto queda listo para cuando vuelvas a
   poner uno. Para reactivarlo, dentro de <header class="nav"> agrega:

     <nav class="nav-enlaces">
       <a href="#catalogo" data-cursor>Catálogo</a>
       <a class="boton" href="#pedido" data-cursor>Hacer pedido</a>
     </nav>

   Si no piensas volver a usarlo, puedes borrar hasta donde empieza
   la sección 06 HERO.
   --------------------------------------------------------------------------- */
.nav-enlaces a:not(.boton){
  position:relative;
  padding-block:.25rem;
  font-size:0.8125rem; font-weight:500;
  color:var(--suave);
  transition:color var(--d-rapido) var(--snap);
}
.nav-enlaces a:not(.boton)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-medio) var(--sobre);
}
.nav-enlaces a:not(.boton):hover{ color:var(--tinta); }
.nav-enlaces a:not(.boton):hover::after{ transform:scaleX(1); }

.boton{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem;
  border-radius:999px;
  background:var(--tinta);
  color:var(--crema);
  font-size:0.8125rem; font-weight:600;
  white-space:nowrap;
  transition:transform var(--d-rapido) var(--sobre),
             background-color var(--d-rapido) var(--snap);
}
.boton:hover{ transform:translateY(-2px); background:var(--tinta-fuerte); }
.boton:active{ transform:translateY(0) scale(.97); }

.boton--linea{
  background:none;
  color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--linea-firme);
}
.boton--linea:hover{
  background:color-mix(in srgb, var(--tinta) 6%, transparent);
}

/* ===== 06  HERO ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:clamp(6rem,14vh,9rem) var(--pad-x) 2rem;
  overflow:clip;
}

.hero-centro{
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:clamp(1.25rem,3vh,2.5rem);
  text-align:center;
}

/* Marca grande: se desplaza con el puntero y recibe luz dirigida */
.hero-marca{
  position:relative;
  width:clamp(104px,15vw,188px);
  aspect-ratio:1;
  transform:translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0)
            rotate(calc(var(--px) * 4deg));
  transition:transform 420ms var(--snap);
  will-change:transform;
}
.hero-marca svg{ width:100%; height:100%; }
.hero-marca::after{
  content:"";
  position:absolute; inset:-6%;
  border-radius:50%;
  background:radial-gradient(
    circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),
    color-mix(in srgb, var(--crema-alta) 60%, transparent) 0%,
    transparent 58%);
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.hero h1{
  font-size:var(--t-hero);
  letter-spacing:-0.055em;
  line-height:0.84;
}
.hero h1 .hero-pal{
  display:inline-block;
  transition:transform 380ms var(--snap);
  will-change:transform;
}
.hero h1 .hero-pal:nth-of-type(1){
  transform:translate3d(calc(var(--px) * 18px), calc(var(--py) * 10px), 0);
}
.hero h1 .hero-pal:nth-of-type(2){
  transform:translate3d(calc(var(--px) * 30px), calc(var(--py) * 16px), 0);
}

.hero-lead{
  max-width:40ch;
  margin-inline:auto;
  font-size:var(--t-lead);
  line-height:1.3;
  letter-spacing:-0.02em;
  color:var(--suave);
  transform:translate3d(calc(var(--px) * 8px), calc(var(--py) * 5px), 0);
  transition:transform 440ms var(--snap);
}

.hero-pie{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem;
  padding-top:2rem;
  border-top:1px solid var(--linea);
  font-size:0.8125rem;
  color:var(--tenue);
}
.hero-pie strong{ color:var(--tinta); font-weight:600; }

.baja{
  display:inline-flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:var(--t-eyebrow);
  font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--tenue);
}
.baja i{
  display:block;
  width:1px; height:2.25rem;
  background:linear-gradient(var(--linea-firme), transparent);
  transform-origin:top;
  animation:baja 1.6s var(--snap) infinite;
}
@keyframes baja{
  0%,100%{ transform:scaleY(.35); opacity:.4; }
  45%    { transform:scaleY(1);   opacity:1;  }
}

/* ===== 07  CATÁLOGO ===================================================== */
.catalogo{
  border-top:1px solid var(--linea);
  padding-top:var(--sec-y);
}
.catalogo-intro{ margin-bottom:clamp(3rem,8vh,6rem); }
.catalogo-intro h2{ font-size:var(--t-h2); margin-top:1.25rem; }
.catalogo-intro .lead{ margin-top:1.5rem; }

.catalogo-cuerpo{
  display:grid;
  grid-template-columns:minmax(11rem,15rem) 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}

/* Riel: queda anclado mientras pasan las categorías */
.riel{
  position:sticky;
  top:calc(50vh - 9rem);
  display:flex; flex-direction:column;
}
.riel-titulo{
  margin-bottom:1rem;
  font-size:var(--t-eyebrow);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue);
}
.riel a{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.45rem 0;
  font-family:var(--fuente-tit);
  font-size:1.0625rem; font-weight:500;
  letter-spacing:-0.025em;
  color:var(--tenue);
  transition:color var(--d-rapido) var(--snap),
             transform var(--d-medio) var(--sobre);
}
.riel a:hover{ color:var(--tinta); transform:translateX(5px); }
.riel .riel-num{
  min-width:1.1rem;
  font-family:var(--fuente);
  font-size:0.6875rem; font-weight:600;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--tinta) 72%, transparent);
  transition:color var(--d-rapido) var(--snap);
}
.riel a.activa{ color:var(--tinta); transform:translateX(5px); }
.riel a.activa .riel-num{ color:var(--hoja); }
.riel a.activa::after{
  content:"";
  width:.3rem; height:.3rem;
  align-self:center;
  border-radius:50%;
  background:var(--hoja);
  animation:brote var(--d-medio) var(--sobre);
}
@keyframes brote{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* Una categoría */
.cat{
  padding-bottom:clamp(4rem,10vh,7rem);
  scroll-margin-top:7rem;
}

/* Cabecera anclada mientras recorres la rejilla */
.cat-cab{
  position:sticky; top:0;
  z-index:5;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem 0 .9rem;
  margin-bottom:1.25rem;
  background:color-mix(in srgb, var(--crema) 97%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.cat-cab h3{
  display:flex; align-items:baseline; gap:.75rem;
  font-size:clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.cat-cab .cat-num{
  position:relative; top:-.9em;
  font-family:var(--fuente);
  font-size:0.6875rem; font-weight:600; letter-spacing:.16em;
  color:var(--hoja);
}
.cat-cuenta{
  white-space:nowrap;
  font-size:0.8125rem;
  font-variant-numeric:tabular-nums;
  color:var(--tenue);
}
.cat-nota{
  max-width:42ch;
  margin-bottom:1.75rem;
  font-size:0.9375rem;
  color:var(--suave);
}

/* Sin perspective aquí a propósito: cada tarjeta lleva la suya en su propio
   transform, así el punto de fuga queda en el centro de cada tarjeta y no en
   el centro de la rejilla (si no, las tarjetas lejanas se deforman). */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));
  gap:.75rem;
}

/* ===== 08  TARJETAS ===================================================== */
.tarjeta{
  --rx:0deg; --ry:0deg; --sx:50%; --sy:50%; --lift:0;
  position:relative;
  display:flex; flex-direction:column;
  gap:.35rem;
  min-height:9.5rem;
  padding:1.1rem 1.15rem;
  border-radius:.625rem;
  background:var(--crema-alta);
  box-shadow:inset 0 0 0 1px var(--linea);
  transform-style:preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx)) rotateY(var(--ry))
    translate3d(0, calc(var(--lift) * -4px), 0)
    scale(calc(1 + var(--lift) * 0.014));
  transition:transform var(--d-largo) var(--sobre),
             box-shadow var(--d-medio) var(--snap);
}
/* Mientras el puntero está encima seguimos el movimiento al instante */
.tarjeta.inclinando{
  transition:transform 90ms linear,
             box-shadow var(--d-medio) var(--snap);
  will-change:transform;
}
.tarjeta:hover{
  box-shadow:inset 0 0 0 1px var(--linea-firme),
             0 14px 28px -18px color-mix(in srgb, var(--tinta) 42%, transparent);
}
/* Brillo especular que sigue al puntero */
.tarjeta::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(
    18rem circle at var(--sx) var(--sy),
    color-mix(in srgb, var(--hoja) 13%, transparent),
    transparent 62%);
  opacity:0;
  transition:opacity var(--d-medio) var(--snap);
  pointer-events:none;
}
.tarjeta:hover::before{ opacity:1; }

.tarjeta-nombre{
  font-family:var(--fuente-tit);
  font-size:1.0625rem; font-weight:500;
  letter-spacing:-0.025em;
  line-height:1.15;
  transform:translateZ(18px);
}
/* Variantes, sabores y gramaje. Línea secundaria, nunca compite con el nombre. */
.tarjeta-detalle{
  font-size:0.75rem;
  line-height:1.35;
  letter-spacing:-0.005em;
  color:color-mix(in srgb, var(--tinta) 72%, transparent);
  transform:translateZ(12px);
  text-wrap:pretty;
}

.tarjeta-fila{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem;
  margin-top:auto;          /* empuja precio y clave al pie de la tarjeta */
  padding-top:1.25rem;
  transform:translateZ(26px);
}

/* --- Tarjeta con varios precios (por pieza, por medio kilo, por kilo) --- */
.tarjeta--tramos .tarjeta-sku{
  margin-top:auto;
  padding-top:1.25rem;
  transform:translateZ(20px);
}
.tarjeta-tramos{
  display:grid;
  margin:.5rem 0 0;
  transform:translateZ(26px);
}
.tarjeta-tramo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem;
  padding:.3rem 0;
  border-top:1px solid var(--linea);
}
.tarjeta-tramo dt{
  font-size:0.75rem;
  color:var(--tenue);
  text-wrap:nowrap;
}
.tarjeta-tramo dd{
  margin:0;
  font-family:var(--fuente-tit);
  font-size:1rem; font-weight:600;
  letter-spacing:-0.035em;
  font-variant-numeric:tabular-nums;
}
.tarjeta-tramo dd .mon{
  margin-right:.08em;
  font-size:.66em; font-weight:500;
  vertical-align:.2em;
  color:var(--tenue);
}
.tarjeta-precio{
  font-family:var(--fuente-tit);
  font-size:1.375rem; font-weight:600;
  letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;
}
.tarjeta-precio .mon{
  margin-right:.1em;
  font-size:.62em; font-weight:500;
  vertical-align:.18em;
  color:var(--tenue);
}
.tarjeta-sku{
  font-size:0.625rem; font-weight:600;
  letter-spacing:.11em;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--tinta) 72%, transparent);
  transition:color var(--d-rapido) var(--snap);
}
.tarjeta:hover .tarjeta-sku{ color:var(--hoja); }

/* ===== 09  PEDIDO ======================================================= */
.pedido{
  margin-top:var(--sec-y);
  padding:var(--sec-y) 0;
  border-top:1px solid var(--linea);
}
.pedido-rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:clamp(2rem,5vw,4rem);
  align-items:end;
}
.pedido h2{ font-size:var(--t-h2); margin-top:1.25rem; }
.pedido .lead{ margin-top:1.5rem; }
/* Sin uso por ahora: era la fila de botones de contacto. Queda para cuando
   vuelvas a poner uno:
   <div class="pedido-acciones"><a class="boton" href="...">Pedir</a></div>  */
.pedido-acciones{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:2rem;
}
.pedido-datos{ display:grid; gap:1.25rem; }
.pedido-dato{
  display:grid; gap:.3rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--linea);
}
.pedido-dato dt{
  font-size:var(--t-eyebrow);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue);
}
.pedido-dato dd{
  margin:0;
  font-family:var(--fuente-tit);
  font-size:1.25rem; font-weight:500; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
/* Matiz bajo un dato: horarios que cambian, condiciones, etc. */
.pedido-nota{
  display:block;
  margin-top:.35rem;
  font-family:var(--fuente);
  font-size:0.8125rem; font-weight:400;
  letter-spacing:0;
  line-height:1.4;
  color:var(--tenue);
}

/* ===== 10  PIE ========================================================== */
.pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:2.5rem 0 3rem;
  border-top:1px solid var(--linea);
  font-size:0.8125rem;
  color:var(--tenue);
}
.pie-marca{
  display:flex; align-items:center; gap:.6rem;
  color:var(--tinta);
}
.pie-marca svg{ width:26px; height:26px; }
.pie-marca b{
  font-family:var(--fuente-tit);
  font-weight:600; letter-spacing:-0.025em;
}

/* ===== 11  AVISO DE ERROR EN LA LISTA ================================== */
/* Sólo aparece si el bloque CATALOGO tiene un error de escritura.
   En uso normal nunca se ve. */
.aviso{
  position:fixed;
  left:1rem; right:1rem; bottom:1rem;
  z-index:200;
  display:grid; gap:.45rem;
  max-width:34rem;
  margin-inline:auto;
  padding:1rem 1.15rem;
  border-radius:.625rem;
  background:var(--tinta);
  color:var(--crema);
  font-size:0.875rem;
  line-height:1.45;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.5);
}
.aviso strong{
  font-family:var(--fuente-tit);
  font-size:1rem; font-weight:600;
  letter-spacing:-0.02em;
}
.aviso-detalle{
  padding:.4rem .55rem;
  border-radius:.3rem;
  background:color-mix(in srgb, var(--crema) 14%, transparent);
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size:0.8125rem;
  word-break:break-word;
}
.aviso-pista{
  color:color-mix(in srgb, var(--crema) 74%, transparent);
  font-size:0.8125rem;
}

/* ===== 12  RESPONSIVE =================================================== */
@media (max-width:900px){
  .catalogo-cuerpo{ grid-template-columns:1fr; }

  /* El riel pasa a ser una tira horizontal anclada bajo la nav */
  .riel{
    top:3.6rem;
    flex-direction:row; flex-wrap:nowrap;
    gap:.4rem;
    overflow-x:auto;
    padding:.6rem 0;
    margin-bottom:2rem;
    background:color-mix(in srgb, var(--crema) 92%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--linea);
    scrollbar-width:none;
  }
  .riel::-webkit-scrollbar{ display:none; }
  .riel-titulo{ display:none; }
  .riel a{
    padding:.3rem .7rem;
    border-radius:999px;
    font-size:0.9375rem;
    white-space:nowrap;
    box-shadow:inset 0 0 0 1px var(--linea);
  }
  .riel a:hover,
  .riel a.activa{ transform:none; }
  .riel a.activa{ background:var(--tinta); color:var(--crema); }
  .riel a.activa .riel-num{ color:color-mix(in srgb, var(--crema) 60%, transparent); }
  .riel a.activa::after{ display:none; }

  .cat-cab{ top:6.9rem; }
}

@media (max-width:560px){
  /* 9.5rem deja entrar dos columnas en una pantalla de 375 px */
  .rejilla{ grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.5rem; }
  .tarjeta{ min-height:7.5rem; padding:.9rem .95rem; }
  .tarjeta-nombre{ font-size:0.9375rem; }
  .tarjeta-detalle{ font-size:0.6875rem; }
  .tarjeta-fila{ padding-top:1rem; }
  .tarjeta-precio{ font-size:1.25rem; }
  .tarjeta--tramos .tarjeta-sku{ padding-top:1rem; }
  .tarjeta-tramo dt{ font-size:0.6875rem; }
  .tarjeta-tramo dd{ font-size:0.9375rem; }
  .hero-pie{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .nav-enlaces a:not(.boton){ display:none; }
}

/* ===== 13  MOVIMIENTO REDUCIDO ========================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rev{ opacity:1 !important; transform:none !important; }
  .rev-linea > span{ transform:none !important; }
  .cursor{ display:none !important; }
  .hero-marca,
  .hero h1 .hero-pal,
  .hero-lead{ transform:none !important; }
  .tarjeta{ transform:none !important; }
}