/* ==========================================================================
   Efectos visuales globales: animaciones de entrada, brillos, luces y detalles
   (todo se desactiva con «reducir movimiento» del sistema)
   ========================================================================== */

/* Entrada suave de la página */
body { animation: page-in .5s ease both; }
@keyframes page-in { from { opacity: 0; } }

/* Barra de progreso de lectura en el encabezado */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--orange), #FFB27A, var(--navy-700));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* Encabezado que se compacta al bajar */
.site-header .logo-img { transition: height .35s var(--ease); }
.site-header .header-inner { transition: min-height .35s var(--ease); }
.site-header.is-scrolled .header-inner { min-height: calc(var(--header-h) - 10px); }
.site-header.is-scrolled .logo-img { height: 54px; }
@media (max-width: 1080px) { .site-header.is-scrolled .logo-img { height: 46px; } }

/* ── Aparición al hacer scroll (variantes) ──────────────────────────── */
.js [data-reveal] {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="up"]    { transform: translateY(36px); }
.js [data-reveal="left"]  { transform: translateX(-48px); }
.js [data-reveal="right"] { transform: translateX(48px); }
.js [data-reveal="zoom"]  { transform: scale(.92); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Títulos de sección: subrayado que se dibuja al aparecer */
.section-head h2 { position: relative; }
.section-head h2::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--orange), #FFB27A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s .3s cubic-bezier(.2, .8, .2, 1);
}
.section-head.center h2::after { margin-inline: auto; transform-origin: center; }
.section-head.is-visible h2::after { transform: scaleX(1); }
html:not(.js) .section-head h2::after { transform: scaleX(1); }

/* ── Botones con destello ───────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  animation: shine 5s 2s ease-in-out infinite;
}
.btn-shine:hover::after { animation-duration: 1.2s; animation-delay: 0s; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-orange { box-shadow: 0 10px 26px rgba(244, 123, 32, .3); }
.btn-navy { box-shadow: 0 10px 26px rgba(11, 37, 101, .22); }

/* ── Luz que sigue al cursor en tarjetas ────────────────────────────── */
[data-spotlight] { position: relative; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 45%);
  transition: opacity .3s;
}
[data-spotlight]:hover::before { opacity: 1; }
.product-card[data-spotlight]::before,
.benefit[data-spotlight]::before {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(244, 123, 32, .10), transparent 45%);
}
/* El degradado de las tarjetas del mosaico usa ::before; su luz va en ::after */
.bento-card[data-spotlight]::before { opacity: 1; }
.bento-card[data-spotlight]::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .18), transparent 45%);
  transition: opacity .3s;
}
.bento-card[data-spotlight]:hover::after { opacity: 1; }

/* ── Tarjeta de producto: botón «Ver detalle» ───────────────────────── */
.product-quick {
  position: absolute;
  left: 50%; bottom: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(11, 37, 101, .9);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .3s, transform .4s var(--ease);
}
.product-quick .icon { width: 16px; height: 16px; }
.product-card:hover .product-quick { opacity: 1; transform: translate(-50%, 0); }
.product-card { transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .3s; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(11, 37, 101, .14); }
@media (hover: none) { .product-quick { display: none; } }

/* ── Portadas de páginas internas ───────────────────────────────────── */
.page-hero { isolation: isolate; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(500px circle at 15% 120%, rgba(91, 139, 224, .35), transparent 60%),
    radial-gradient(420px circle at 95% -10%, rgba(244, 123, 32, .30), transparent 60%);
  animation: page-hero-glow 12s ease-in-out infinite alternate;
}
@keyframes page-hero-glow { to { transform: translate(-30px, 18px) scale(1.05); } }
.page-hero::after { animation: spin-center 40s linear infinite; }
.js .page-hero h1, .js .page-hero p, .js .page-hero .breadcrumb, .js .page-hero .eyebrow {
  animation: hero-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.js .page-hero .eyebrow { animation-delay: .05s; }
.js .page-hero h1 { animation-delay: .12s; }
.js .page-hero p { animation-delay: .25s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes spin-center { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Ficha de producto: lupa ────────────────────────────────────────── */
.pd-media { cursor: zoom-in; }
.zoom-lens {
  position: absolute;
  z-index: 4;
  width: 190px; height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  border: 5px solid var(--white);
  box-shadow: 0 0 0 3px var(--navy), 0 18px 40px rgba(11, 37, 101, .35);
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .25s var(--ease);
}
.zoom-lens::after {
  /* brillo del cristal */
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .45), transparent 40%);
}
.pd-media.is-zooming .zoom-lens { opacity: 1; transform: scale(1); }
.zoom-hint {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--navy);
  font-size: .75rem;
  font-weight: 600;
  transition: opacity .2s;
}
.zoom-hint .icon { width: 15px; height: 15px; }
.pd-media.is-zooming .zoom-hint { opacity: 0; }
@media (hover: none) { .zoom-hint, .zoom-lens { display: none; } .pd-media { cursor: auto; } }

/* ── Pie de página ──────────────────────────────────────────────────── */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), #FFB27A 40%, var(--navy-700));
}
.site-footer::after {
  /* lentes de marca de agua */
  content: "";
  position: absolute;
  right: -60px; bottom: -40px;
  width: 420px; height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='36'/%3E%3Ccircle cx='170' cy='50' r='36'/%3E%3Cpath d='M86 44 Q110 28 134 44M14 44 2 30M206 44 218 30'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.footer-links a { position: relative; display: inline-block; transition: color .2s, transform .25s var(--ease); }
.footer-links a:hover { transform: translateX(4px); }

/* Botón de WhatsApp con pulso */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--whatsapp);
  z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(1.7); opacity: 0; } }

/* Barra de desplazamiento con los colores de la marca */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--navy-700) var(--gray-100); }
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--navy-700); border-radius: 8px; border: 2px solid var(--gray-100); }

/* ── Movimiento reducido: todo quieto ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .orb, .marquee-track, .hero-ring, .spin-badge-text, .wholesale-band, .wholesale-deco,
  .hero-float, .btn-shine::after, .wa-float::before, .page-hero::before, .page-hero::after { animation: none !important; }
  .section-head h2::after { transform: scaleX(1); }
}