/* ======================================================
   JJ Paper — FX de botones (hover effects)
   6 efectos, uno por familia de botón, paleta de marca:
   RIPPLE  → .btn-p / .prod-modal-add / .f-sub / .pd-add
   SCRATCH → .pm-buy            (foil dorado que se raspa)
   GRASS   → .dl-btn            (briznas verdes al pie)
   HEAT    → .btn-wa            (resplandor térmico)
   LANTERN → .pm-quote / .btn-o (farol que sigue al cursor)
   HELIX   → .c-checkout        (hebras ADN entrelazadas)
   Capas inyectadas por fx-buttons.js (los ::before/::after
   de estos botones ya los usa glass.css).
   ====================================================== */

/* ---- Base: cualquier botón con capa FX recorta su interior ---- */
.fx-host { position:relative; overflow:hidden; isolation:isolate }
.fx-layer { position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0 }

/* ===================== 1) RIPPLE ====================== */
/* Onda de agua desde el punto de contacto (hover y clic) */
.fx-ripple {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  left:var(--rx, 50%); top:var(--ry, 50%);
  background:radial-gradient(circle,
    rgba(255,255,255,.40) 0%, rgba(199,236,148,.28) 40%, rgba(255,255,255,0) 70%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.35);
  transform:scale(0); opacity:.9;
  animation:fxRipple .65s cubic-bezier(.2,.6,.3,1) forwards;
}
.fx-ripple.soft { animation-duration:.95s; opacity:.45 }
@keyframes fxRipple {
  to { transform:scale(1); opacity:0 }
}

/* ===================== 2) SCRATCH ===================== */
/* Foil metálico latón sobre el botón; al hover se "raspa"
   con borde dentado y revela la cara real */
.fx-foil {
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.16) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(110deg, #e9dfc6 0%, #f7f1de 18%, #cbb178 38%,
      #e8d9b0 52%, #b3934e 70%, #e2d3a8 88%, #cbb178 100%);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:clip-path .55s cubic-bezier(.6,.05,.3,1), opacity .4s ease .25s;
  z-index:1;
}
.fx-foil::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);
}
.fx-scratch:hover .fx-foil,
.fx-scratch:focus-visible .fx-foil {
  /* borde de raspado dentado que barre hacia la derecha */
  clip-path:polygon(115% 0, 100% 0, 100% 100%, 115% 100%,
    112% 88%, 118% 66%, 111% 45%, 117% 22%, 112% 8%);
  opacity:0;
}
.fx-scratch > * { position:relative; z-index:2 }

/* ====================== 3) GRASS ====================== */
/* Briznas de grama (verde marca) creciendo del pie del botón,
   se mecen mientras el cursor esté encima */
.fx-grass-layer {
  top:auto; height:100%; display:flex; align-items:flex-end;
  overflow:hidden;
}
.fx-grass-layer svg {
  width:100%; height:70%; display:block;
  transform:translateY(101%); transform-origin:bottom;
  transition:transform .38s cubic-bezier(.2,.9,.3,1.15);
}
.fx-grass:hover .fx-grass-layer svg,
.fx-grass:focus-visible .fx-grass-layer svg { transform:translateY(12%) }
.fx-grass:hover .fx-grass-layer .gb,
.fx-grass:focus-visible .fx-grass-layer .gb {
  animation:fxSway 1.1s ease-in-out infinite alternate;
}
.fx-grass-layer .gb { transform-origin:50% 100%; transform-box:fill-box }
.fx-grass-layer .gb:nth-child(2n)  { animation-delay:.12s !important }
.fx-grass-layer .gb:nth-child(3n)  { animation-delay:.25s !important }
.fx-grass-layer .gb:nth-child(5n)  { animation-delay:.4s  !important }
@keyframes fxSway {
  from { transform:rotate(-6deg) } to { transform:rotate(7deg) }
}
.fx-grass > * { position:relative; z-index:2 }

/* ====================== 4) HEAT ======================= */
/* Calor térmico: brasa interna que palpita + halo cálido.
   Adaptado a marca: verde WhatsApp que "enciende" a latón */
.fx-heat { transition:filter .3s ease }
.fx-heat:hover, .fx-heat:focus-visible {
  animation:fxHeatGlow 1.3s ease-in-out infinite alternate;
}
.fx-heat-layer {
  opacity:0; transition:opacity .35s ease;
  background:
    radial-gradient(120% 90% at 50% 110%,
      rgba(201,162,75,.55) 0%, rgba(214,120,40,.28) 38%, rgba(0,0,0,0) 72%);
  mix-blend-mode:screen;
}
.fx-heat:hover .fx-heat-layer,
.fx-heat:focus-visible .fx-heat-layer {
  opacity:1; animation:fxHeatWave 1.6s ease-in-out infinite;
}
@keyframes fxHeatGlow {
  from { filter:brightness(1) saturate(1);
         box-shadow:inset 0 1px 0 rgba(255,255,255,.60), 0 10px 28px rgba(37,180,92,.34) }
  to   { filter:brightness(1.13) saturate(1.25);
         box-shadow:inset 0 1px 0 rgba(255,255,255,.60), 0 12px 34px rgba(201,140,60,.55) }
}
@keyframes fxHeatWave {
  0%,100% { transform:translateY(0) scaleY(1) }
  50%     { transform:translateY(-7%) scaleY(1.12) }
}
.fx-heat > * { position:relative; z-index:2 }

/* ===================== 5) LANTERN ===================== */
/* Farol: luz cálida latón que sigue al cursor dentro del botón */
.fx-lantern-layer {
  opacity:0; transition:opacity .3s ease;
  background:radial-gradient(130px circle at var(--fx-x, 50%) var(--fx-y, 50%),
    rgba(201,162,75,.42) 0%, rgba(201,162,75,.16) 42%, rgba(0,0,0,0) 72%);
}
.fx-lantern:hover .fx-lantern-layer,
.fx-lantern:focus-visible .fx-lantern-layer { opacity:1 }
/* halo exterior tenue que también sigue la luz */
.fx-lantern:hover, .fx-lantern:focus-visible {
  box-shadow:0 0 24px rgba(201,162,75,.28);
}
.fx-lantern > * { position:relative; z-index:2 }

/* ====================== 6) HELIX ====================== */
/* ADN: dos hebras senoidales (lima + latón) cruzándose;
   al hover se desplazan en sentidos opuestos = torsión viva */
.fx-helix-layer { display:flex; align-items:center; opacity:.35; transition:opacity .3s ease }
.fx-helix:hover .fx-helix-layer,
.fx-helix:focus-visible .fx-helix-layer { opacity:.85 }
.fx-helix-layer svg { width:200%; height:78%; flex:none }
.fx-helix-layer .hx1, .fx-helix-layer .hx2 { animation-play-state:paused }
.fx-helix:hover .hx1, .fx-helix:focus-visible .hx1,
.fx-helix:hover .hx2, .fx-helix:focus-visible .hx2 { animation-play-state:running }
.hx1 { animation:fxHelixL 2.6s linear infinite }
.hx2 { animation:fxHelixR 2.6s linear infinite }
@keyframes fxHelixL { from { transform:translateX(0) }    to { transform:translateX(-25%) } }
@keyframes fxHelixR { from { transform:translateX(-25%) } to { transform:translateX(0) } }
.fx-helix > * { position:relative; z-index:2 }

/* =============== Accesibilidad / rendimiento ============= */
@media (prefers-reduced-motion:reduce) {
  .fx-ripple, .fx-heat:hover, .fx-heat-layer,
  .fx-grass-layer .gb, .hx1, .hx2 { animation:none !important }
  .fx-foil { transition:opacity .2s ease }
  .fx-scratch:hover .fx-foil { clip-path:none; opacity:0 }
  .fx-grass-layer svg { transition:none }
}
/* En táctil no hay hover: las capas quedan inertes (solo ripple al toque) */
@media (hover:none) {
  .fx-foil { display:none }
  .fx-helix-layer { opacity:.25 }
}