/* ============================================================
   /productos/ — productos.css
   Catálogo de productos y servicios. Motion siguiendo el skill
   "apple-design":

   - Nada en esta página se arrastra o se avienta (no hay drag/flick),
     así que NADA debería rebotar — el skill reserva el overshoot
     para movimiento que heredó momentum de un gesto (§4). Todo aquí
     usa una curva críticamente amortiguada (sin rebote): --ease-spring.
   - El indicador de categoría SÍ es un spring real (ver <script> en
     productos/index.html), no una transición CSS — es el único
     elemento interactivo repetible de la página y el lugar honesto
     para demostrar interrupción/retargeting (§3), no decoración.
   - Las tarjetas se materializan una por una (opacity+scale, con
     stagger), no como un bloque — "materialize, don't just fade" (§12).
============================================================ */

:root{
  /* Aproximación cúbica de un spring críticamente amortiguado
     (damping 1.0): acelera rápido, sin overshoot al llegar. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Nav de categorías (segmented control, sticky bajo el header) ---------- */
.cat-nav-wrap{
  position:sticky; top:var(--header-h); z-index:40;
  background:rgba(250,249,252,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); padding:14px 0;
}
.cat-nav{
  position:relative; display:flex; gap:4px;
  overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{ display:none; }
.cat-nav a{
  position:relative; z-index:1; flex-shrink:0;
  padding:10px 18px; border-radius:var(--r-pill);
  font-size:.86rem; font-weight:600; color:var(--text-2); white-space:nowrap;
  transition:color .25s ease, transform .2s var(--ease-spring);
}
.cat-nav a:active{ transform:scale(.96); }
.cat-nav a.is-active{ color:var(--cream); }
/* .cat-nav-indicator NO lleva transition: su posición la mueve un
   spring real por JS cada frame (ver productos/index.html), no CSS. */
.cat-nav-indicator{
  position:absolute; top:0; left:0; height:100%; width:0; border-radius:var(--r-pill);
  background:var(--purple-deep); z-index:0;
}
@media (prefers-reduced-motion: reduce){
  .cat-nav a{ transition:color .15s ease; }
}

/* ---------- Grid de productos ---------- */
.product-grid{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:32px; }
@media (min-width:680px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }

/* Materialización por tarjeta: cada una llega por su cuenta al entrar
   en viewport (revealObserver de main.js le agrega .is-visible), con
   un pequeño stagger por posición — no el grid completo como un bloque. */
.product-card.reveal{
  opacity:0; transform:scale(.94) translateY(10px);
  transition:opacity .5s var(--ease-spring), transform .5s var(--ease-spring), box-shadow .3s ease, border-color .3s ease;
}
.product-card.reveal.is-visible{ opacity:1; transform:none; }
.product-grid > .product-card:nth-child(1){ transition-delay:0ms; }
.product-grid > .product-card:nth-child(2){ transition-delay:60ms; }
.product-grid > .product-card:nth-child(3){ transition-delay:120ms; }
.product-grid > .product-card:nth-child(4){ transition-delay:60ms; }
.product-grid > .product-card:nth-child(5){ transition-delay:120ms; }
.product-grid > .product-card:nth-child(6){ transition-delay:180ms; }
.product-grid > .product-card:nth-child(7){ transition-delay:120ms; }
.product-grid > .product-card:nth-child(8){ transition-delay:180ms; }
.product-grid > .product-card:nth-child(9){ transition-delay:240ms; }
.product-grid > .product-card:nth-child(10){ transition-delay:240ms; }

.product-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:28px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-sm);
}
.product-card:hover, .product-card:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--purple-soft);
}
.product-card:active{ transform:translateY(-1px) scale(.99); }
@media (prefers-reduced-motion: reduce){
  .product-card.reveal{ opacity:1; transform:none; transition:box-shadow .2s ease, border-color .2s ease; }
  .product-grid > .product-card{ transition-delay:0ms; }
  .product-card:hover, .product-card:active{ transform:none; }
}
.no-js .product-card.reveal{ opacity:1; transform:none; }

.product-icon{
  width:52px; height:52px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--purple-soft); color:var(--purple-deep);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease-spring);
}
.product-card:hover .product-icon{ transform:scale(1.08) rotate(-2deg); }
@media (prefers-reduced-motion: reduce){ .product-card:hover .product-icon{ transform:none; } }
.product-icon svg{ width:26px; height:26px; }
.product-icon--new{ background:var(--accent-warm); color:var(--on-accent-warm); }

.product-badge{
  display:inline-flex; align-self:flex-start; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--on-accent-warm);
  background:var(--accent-warm); padding:4px 10px; border-radius:var(--r-pill);
}

/* Tracking por tamaño (§15 del skill): el h1/section-title grandes ya
   llevan tracking negativo propio del sitio (base.css); a este tamaño
   medio (~1.12rem) le toca quedarse cerca de 0 — solo se ajusta el
   leading para que respire un poco más que el texto grande. */
.product-card h3{ font-family:var(--serif); font-size:1.12rem; font-weight:600; letter-spacing:-.005em; line-height:1.34; color:var(--purple-deep); }
.product-card p{ color:var(--text-2); font-size:.94rem; line-height:1.68; }
.product-card .bento-link{ margin-top:auto; font-size:.92rem; }

.product-section-intro{ font-size:1rem; color:var(--text-2); max-width:var(--measure); margin-top:14px; line-height:1.7; }