/* ============================================================================
   Luma Peptides — Capa de pulido (animaciones sutiles + microinteracciones)
   Todo está gateado bajo .lp (que agrega polish.js). Si quitas el <script>
   de polish.js, esta capa queda inerte y el sitio vuelve exactamente a como
   estaba. Diseño: movimiento preciso y discreto, no efectos dispersos.
   ============================================================================ */

/* ---- Revelado al entrar en viewport (orquestado) ---- */
.lp .lp-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s cubic-bezier(.22,1,.36,1),
              transform .62s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--lp-delay, 0ms);
}
.lp .lp-reveal.lp-in { opacity: 1; transform: none; }

/* ---- Entrada orquestada al cargar (visible de inmediato, sin flash) ----
   Estas reglas son globales: existen solo porque polish.css está enlazado.
   Quitar el <link> de polish.css revierte todo. ---- */
@keyframes lpRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lpRiseImg { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* Hero del inicio — secuencia escalonada */
.hero-eyebrow, .hero-title, .hero-body, .hero-actions { animation: lpRise .85s cubic-bezier(.22,1,.36,1) both; }
.hero-eyebrow { animation-delay: .10s; }
.hero-title  { animation-delay: .22s; }
.hero-body   { animation-delay: .36s; }
.hero-actions{ animation-delay: .50s; }
.hero-vials-wrap { animation: lpRiseImg 1.05s cubic-bezier(.22,1,.36,1) .20s both; }

/* Encabezado de páginas internas — entrada simple */
.art-head, .head { animation: lpRise .8s cubic-bezier(.22,1,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-title, .hero-body, .hero-actions, .hero-vials-wrap,
  .art-head, .head { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---- Header: sombra y refinamiento sutil al hacer scroll ---- */
.lp .luma-header { transition: box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.lp .luma-header.lp-scrolled {
  box-shadow: 0 8px 30px rgba(10,21,48,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
  border-bottom-color: rgba(226,232,242,0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.70));
}

/* ---- Tarjetas: elevación suave en hover ---- */
.lp .blog-card, .lp .post-card, .lp .review-card, .lp .cert-card,
.lp .lg-pillar, .lp .prod-card, .lp .product-card, .lp .lg-callout {
  transition: transform .38s cubic-bezier(.22,1,.36,1),
              box-shadow .38s ease, border-color .38s ease;
  will-change: transform;
}
.lp .blog-card:hover, .lp .post-card:hover, .lp .review-card:hover,
.lp .cert-card:hover, .lp .lg-pillar:hover, .lp .prod-card:hover,
.lp .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(10,21,48,0.11);
  border-color: #CDD6E8;
}

/* ---- Zoom delicado de la imagen en tarjetas con thumbnail ---- */
.lp .blog-card, .lp .post-card { overflow: hidden; }
.lp .blog-thumb, .lp .post-thumb { transition: transform .6s cubic-bezier(.22,1,.36,1); transform-origin: center; }
.lp .blog-card:hover .blog-thumb, .lp .post-card:hover .post-thumb { transform: scale(1.045); }

/* ---- Botones y enlaces: microinteracción ---- */
.lp .luma-header-buy { transition: transform .2s cubic-bezier(.22,1,.36,1), background .2s ease, box-shadow .2s ease; }
.lp .luma-header-buy:hover { box-shadow: 0 10px 24px rgba(29,79,215,0.28); }
.lp .luma-header-buy:active { transform: translateY(0) scale(.97); }
.lp .prod-row-add { transition: transform .15s ease, background .2s ease; }
.lp .prod-row-add:active { transform: scale(.97); }

/* ---- Buscador del header: glow sutil al enfocar ---- */
.lp .luma-header-search { transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.lp .luma-header-search:focus-within { box-shadow: 0 0 0 4px rgba(37,99,235,0.10); }

/* ---- FAQ: transición del marcador ---- */
.lp .faq-item { transition: border-color .25s ease, box-shadow .25s ease; }
.lp .faq-item[open] { box-shadow: 0 10px 30px rgba(10,21,48,0.06); }

/* ---- Foco accesible (teclado) ---- */
.lp a:focus-visible, .lp button:focus-visible, .lp input:focus-visible,
.lp summary:focus-visible, .lp [tabindex]:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Selección de texto en tono de marca ---- */
.lp ::selection { background: rgba(37,99,235,0.16); color: #0A1530; }

/* ---- Scroll suave en navegación interna ---- */
.lp { scroll-behavior: smooth; }

/* ---- Respeto total a prefers-reduced-motion ---- */
.lp-reduce .lp-reveal,
.lp-reduce .lp-reveal.lp-in { opacity: 1 !important; transform: none !important; transition: none !important; }
.lp-reduce .blog-thumb, .lp-reduce .post-thumb,
.lp-reduce .blog-card, .lp-reduce .post-card, .lp-reduce .review-card,
.lp-reduce .cert-card, .lp-reduce .lg-pillar { transition: none !important; }
.lp-reduce { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  .lp .lp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}