/* Detalles de diseño encima del sitio de Cande (ver detalles.js). No reemplaza style.css: lo complementa. */

/* Flechas: línea fina, anillo dorado que se dibuja al pasar, flecha que avanza */
.fx-btn{display:inline-grid;place-items:center;padding:0!important;border:0!important;border-radius:50%;background:#f7f5efd9!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#3f493b!important;box-shadow:inset 0 0 0 1px #c2a46a59,0 8px 22px -12px #2c332980;cursor:pointer;transition:transform .35s cubic-bezier(.2,1.2,.3,1),background-color .35s,box-shadow .35s;-webkit-tap-highlight-color:transparent}
.fx-arrow{display:block;width:100%;height:100%;overflow:visible}
.fx-arrow path{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fx-ring{fill:none;stroke:#c2a46a;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:0 101;transform:rotate(-90deg);transform-origin:24px 24px;opacity:0;transition:stroke-dasharray .7s cubic-bezier(.6,0,.2,1),opacity .2s}
.fx-move{transition:transform .4s cubic-bezier(.2,1.2,.3,1)}
.fx-btn:hover{background:#fffdf8!important;box-shadow:inset 0 0 0 1px transparent,0 12px 26px -12px #2c3329a0}
.fx-btn:hover .fx-ring,.fx-btn:focus-visible .fx-ring{stroke-dasharray:101 0;opacity:1}
.fx-btn:hover .fx-move{transform:translateX(3px)}
.fx-btn:active{transform:scale(.92)}
.fx-btn:focus-visible{outline:2px solid #3f493b;outline-offset:3px}
.fx-btn:disabled{opacity:.35;cursor:default}
.fx-btn:disabled:hover .fx-ring{stroke-dasharray:0 101;opacity:0}
.fx-btn:disabled:hover .fx-move{transform:none}
.hero-arrow.fx-btn{width:54px;height:54px}
/* la flecha de «siguiente» del banner invita a tocarla cada tanto */
.hero-next.fx-btn .fx-move{animation:fxEmpuja 7s 3s ease-in-out infinite}
@media(max-width:800px){.hero-arrow.fx-btn{width:40px;height:40px}}

/* Círculos de categorías con vida */
.fx-vivo .category-circle{opacity:0;transform:translateY(22px) scale(.92);transition:opacity .7s ease calc(var(--i,0)*90ms),transform .9s cubic-bezier(.2,1.25,.3,1) calc(var(--i,0)*90ms)}
.fx-vivo.is-visto .category-circle{opacity:1;transform:none}
.fx-vivo.is-visto .category-circle:hover{transform:translateY(-6px);transition-delay:0s}
.fx-vivo .category-circle>span{position:relative;overflow:visible;border-color:transparent;box-shadow:0 14px 26px -18px #2c3329;animation:fxFlota 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.9s)}
/* anillo dorado que gira */
.fx-vivo .category-circle>span::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1.6px;background:conic-gradient(#c2a46a,#f6e4b8 14%,#c2a46a00 32%,#c2a46a00 58%,#c2a46a 76%,#e8d3a5 90%,#c2a46a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fxGira 8s linear infinite;animation-delay:calc(var(--i,0)*-1.3s);pointer-events:none}
/* destello que cruza la foto cada tanto */
.fx-vivo .category-circle>span::after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(115deg,transparent 38%,#ffffff70 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:fxBrillo 7s ease-in-out infinite;animation-delay:calc(var(--i,0)*.7s + 1.2s);pointer-events:none;mix-blend-mode:soft-light}
.fx-vivo .category-circle:hover>span::before{filter:brightness(1.15) saturate(1.2)}
.fx-vivo .category-circle:active>span{scale:.95}
/* nombre con línea dorada que crece */
.fx-vivo .category-circle strong{position:relative;display:inline-block}
.fx-vivo .category-circle strong::after{content:"";position:absolute;left:15%;right:15%;bottom:-3px;height:1px;background:#c2a46a;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,1,.3,1)}
.fx-vivo .category-circle:hover strong::after,.fx-vivo .category-circle:focus-visible strong::after{transform:scaleX(1)}

@keyframes fxFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fxGira{to{transform:rotate(1turn)}}
@keyframes fxBrillo{0%,70%{background-position:130% 0}90%,100%{background-position:-30% 0}}
@keyframes fxEmpuja{0%,86%,100%{transform:none}90%{transform:translateX(4px)}94%{transform:translateX(-1px)}97%{transform:translateX(2px)}}

@media (prefers-reduced-motion:reduce){
 .fx-vivo .category-circle{opacity:1;transform:none;transition:none}
 .fx-vivo .category-circle>span,.fx-vivo .category-circle>span::before,.fx-vivo .category-circle>span::after,.hero-next.fx-btn .fx-move{animation:none}
}

/* Novedades: carrusel que avanza solo (ver detalles.js) */
.new-grid.fx-carrusel{display:block;overflow:hidden;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.fx-pista{display:flex;width:max-content;will-change:transform}
.fx-pista>*{flex:0 0 var(--w,25%);width:var(--w,25%);min-width:0}
.fx-carrusel img{-webkit-user-drag:none;user-select:none}

/* Cuotas debajo del precio en cada tarjeta (pedido de Marta 07/10). */
.product-card .card-cuotas { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--turquesa-hondo, #00705F); text-align: left; }