/* ==========================================================================
   motion.css — animaciones compartidas de la landing mayorista.
   Lo usan las páginas de public/ y el catálogo (template en generar-catalogo.js).

   Reglas de la casa:
   - Sin librerías. Solo transform y opacity, para no mover el layout (CLS).
   - Nada se oculta si el JS no corre: todo lo que entra al bajar vive detrás
     de .js, que agrega motion.js. Sin JS la página se ve como antes.
   - prefers-reduced-motion: reduce apaga TODO, y deja el contenido visible.
   ========================================================================== */

/* --- 1. Aparecer al bajar ------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --- 2. Entrada del hero ------------------------------------------------- */
.js [data-hero] > * {
  animation: subir .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes subir { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
/* Escalón por posición, para los heros que no traen su propio --d en el HTML. */
.js [data-hero] > :nth-child(2) { --d: 90ms; }
.js [data-hero] > :nth-child(3) { --d: 180ms; }
.js [data-hero] > :nth-child(4) { --d: 270ms; }
.js [data-hero] > :nth-child(5) { --d: 360ms; }
.js [data-hero] > :nth-child(6) { --d: 450ms; }

/* Capas del fondo del hero: degradados que se funden + textura de ruido.
   El ruido es un SVG inline (feTurbulence), no pesa ni pide otra descarga. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 2; }
.hero-capa {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  transition: opacity 2.2s ease;
}
.hero-capa.on { opacity: 1; }
.hero-capa-1 { background: radial-gradient(120% 90% at 15% 10%, #5B2D78 0%, #442560 45%, #0F1B3D 100%); }
.hero-capa-2 { background: radial-gradient(110% 95% at 85% 20%, #3C2A7A 0%, #35215C 50%, #0F1B3D 100%); }
.hero-capa-3 { background: radial-gradient(130% 85% at 40% 95%, #4A2463 0%, #29215A 55%, #0F1B3D 100%); }
.hero-ruido {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* --- 3. Header que pasa a vidrio al bajar -------------------------------- */
header { transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(15,27,61,.10);
}
.nav a { transition: background .15s ease, color .15s ease; }

/* --- 4. Barra de progreso de lectura ------------------------------------- */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--purpura, #442560), var(--royal, #1E3A6E));
}
@supports (animation-timeline: scroll()) {
  .progreso { animation: llenar linear both; animation-timeline: scroll(root block); }
  @keyframes llenar { from { transform: scaleX(0) } to { transform: scaleX(1) } }
}

/* --- 5. Botones: rebote al pasar el mouse, se achican al tocar ----------- */
.cta, .cta-2, .nav-cta {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .15s ease;
}
.cta:hover { transform: translateY(-2px) scale(1.03); }
.cta:active, .cta-2:active, .nav-cta:active { transform: scale(.97); }
.cta-2:hover { transform: translateY(-2px); }

/* Brillo que cruza el botón principal, solo al pasar el mouse. */
.cta { position: relative; overflow: hidden; }
.cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
}
.cta:hover::after { animation: brillo .75s ease; }
@keyframes brillo { to { left: 120%; } }

/* --- 6. Tarjetas: se elevan con rebote y el ícono hace pop --------------- */
.card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(15,27,61,.12);
  border-color: var(--purpura, #442560);
}
.card .ico { display: inline-block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.card:hover .ico { transform: scale(1.22) rotate(-8deg); }

/* --- 7. Fondo con grilla de puntos en las secciones claras -------------- */
/* "body" adelante: cada página define .alt con background: y eso borraba los puntos. */
body .alt, body .cierre {
  background-image: radial-gradient(rgba(68,37,96,.10) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- 8. Cinta de beneficios que corre ----------------------------------- */
.cinta {
  background: var(--purpura, #442560); color: #fff; overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.14);
}
.cinta-pista {
  display: flex; gap: 0; width: max-content;
  animation: correr 38s linear infinite;
}
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista span {
  padding: 11px 26px; font-weight: 600; font-size: 15px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.cinta-pista span::before { content: "·"; opacity: .5; }
@keyframes correr { to { transform: translateX(-50%); } }

/* --- 9. Góndola (clase .fam: el catálogo usa .prod para otra cosa): fotos reales, la segunda aparece al pasar el mouse ------ */
.gondola { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.fam {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--borde, #D5CBE8); border-radius: 16px; overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
}
.fam:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(15,27,61,.12); border-color: var(--purpura, #442560); }
.fam-foto { position: relative; aspect-ratio: 1/1; background: var(--fondo, #F2F0F7); }
.fam-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .4s ease, transform .5s ease;
}
.fam-foto img + img { opacity: 0; }
.fam:hover .fam-foto img { transform: scale(1.04); }
.fam:hover .fam-foto img + img { opacity: 1; }
.fam-txt { padding: 18px 20px 22px; }
.fam-txt h3 { font-size: 20px; color: var(--purpura, #442560); margin-bottom: 6px; }
.fam-txt p { color: var(--texto-suave, #6B7280); font-size: 15px; }
.fam-ver { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--royal, #1E3A6E); font-size: 15px; }
.fam:hover .fam-ver { text-decoration: underline; }

/* --- 10. Los 3 pasos del QR: línea que los va uniendo -------------------- */
.pasos { position: relative; }
.paso { position: relative; }
.js .paso .n { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.js .paso.is-visible .n { animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* --- 11. Preguntas frecuentes ------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--borde, #D5CBE8); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 12px;
}
.faq details[open] { border-color: var(--purpura, #442560); }
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--purpura, #442560); font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--texto-suave, #6B7280); font-size: 16px; margin-top: 10px; }

/* --- 12. Movimiento reducido: se apaga todo ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-hero] > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .cinta-pista { animation: none !important; }
  .progreso { display: none; }
  .hero-capa { transition: none; }
  .hero-capa-1 { opacity: 1; }
  .cta::after { display: none; }
  .card:hover, .fam:hover, .cta:hover, .cta-2:hover { transform: none; }
  .card:hover .ico, .fam:hover .fam-foto img { transform: none; }
  .js .paso.is-visible .n { animation: none; }
}

/* --- 13. Salida para el consumidor final ------------------------------------
   Esta web es solo mayorista, pero a veces cae alguien buscando un collar para
   su mascota (por Google, o por un link que le pasaron). En vez de que se vaya
   sin entender, el pie de cada página le dice adónde ir. El catálogo además lo
   avisa arriba de todo, donde se ve sin bajar. */
.salida-minorista {
  margin-top: 12px;
  font-size: 15px;
}
.salida-minorista a {
  font-weight: 700;
  text-decoration: underline;
}