/* ==========================================================================
   RN.MATES — Motion premium (capa de remate)
   Se encola al final (inc/enqueue.php, prioridad 99) para ganar la cascada.
   Aplica los estandares de Emil Kowalski: feedback de press en todo pressable,
   deleite en acciones clave (add-to-cart, favorito, badge del carrito), stagger,
   crossfade de galeria, dropdown origin-aware y reduced-motion que degrada a un
   fade suave (no a un salto seco). Todo en transform/opacity (GPU) y con su rama
   prefers-reduced-motion. NADA bouncy: scales 0.90-0.98, sin overshoot elastico.
   ========================================================================== */

/* ---------------------------- Keyframes ------------------------------- */
@keyframes rn-count-pop  { 0% { transform: scale(0.6); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes rn-fav-pop    { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes rn-added-in   { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
@keyframes rn-mc-item-in { from { opacity: 0; transform: translateY(0.55rem); } to { opacity: 1; transform: none; } }

/* ============================ 1. FEEDBACK DE PRESS ==================== */
/* Todo pressable responde al click con un scale sutil. Bajo reduced-motion no
   escala (el bloque entero vive en no-preference). */
@media (prefers-reduced-motion: no-preference) {
	.rn-icon-btn {
		transition: background var(--tr), color var(--tr), transform var(--tr);
	}
	.rn-icon-btn:active { transform: scale(0.94); }

	.rn-qty button,
	.rn-qty__btn {
		transition: background var(--tr), color var(--tr), transform 120ms var(--ease-out-expo);
	}
	.rn-qty button:active,
	.rn-qty__btn:active:not(:disabled) { transform: scale(0.92); }

	.rn-product__fav:active { transform: scale(0.9); }

	/* CTAs de compra y otros botones (carrito, checkout, mini-cart). */
	.rn-cart__proceed .button:active,
	.rn-checkout__place-order .rn-btn:active,
	.rn-minicart .woocommerce-mini-cart__buttons .button:active {
		transform: scale(0.97);
	}

	/* Paginacion. */
	.rn-pagination a:active,
	.rn-pagination .page-numbers:active { transform: scale(0.95); }
}

/* El fill/color del favorito ya no snapean (transicion explicita, fuera del
   media query para que tambien suavice el color en reduced-motion). */
.rn-product__fav {
	transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}

/* ============================ 2. DELEITE: ADD-TO-CART ================ */
/* El link "Ver carrito" que agrega WooCommerce tras el alta AJAX entra animado. */
@media (prefers-reduced-motion: no-preference) {
	.rn-product__foot .added_to_cart { animation: rn-added-in 320ms var(--ease-out-expo) both; }
}
/* Estado de exito en el boton: main.js le pone .is-added por ~1.6s. */
.rn-product__foot .button.is-added,
.rn-single .single_add_to_cart_button.is-added {
	background: var(--c-verde-700);
	border-color: var(--c-verde-700);
	color: var(--c-crema);
	transition: background var(--tr), color var(--tr);
}
.rn-product__foot .button.is-added::after,
.rn-single .single_add_to_cart_button.is-added::after { content: " \2713"; }

/* ============================ 3. BADGE DEL CARRITO ================== */
/* El contador se reemplaza por fragments AJAX al agregar: la animacion corre
   sola al re-insertarse el elemento, sin JS extra. */
@media (prefers-reduced-motion: no-preference) {
	.rn-cart-count { animation: rn-count-pop 260ms var(--ease-out-expo); }
}

/* ============================ 4. CORAZON FAVORITO ================== */
/* Pop al marcar: main.js agrega .rn-pop (y lo reinicia por reflow). */
@media (prefers-reduced-motion: no-preference) {
	.rn-product__fav.rn-pop { animation: rn-fav-pop 280ms var(--ease-out-expo); }
}

/* ============================ 5. DROPDOWN "TIENDA" ================= */
/* Origin desde el trigger (arriba-izquierda) + la curva fuerte que el tema YA
   define, en vez del ease suave/simetrico. */
.rn-nav .sub-menu {
	transform-origin: top left;
	transform: translateY(6px) scale(0.97);
	transition: opacity 180ms var(--ease-out-expo), transform 180ms var(--ease-out-expo), visibility 0s linear 180ms;
}
.rn-nav .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
	.rn-nav .menu-item-has-children:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
}
/* Stagger de los items del submenu (solo en hover-capable + motion-OK). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.rn-nav .sub-menu a {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity 160ms var(--ease-out-expo), transform 160ms var(--ease-out-expo), background var(--tr), color var(--tr);
	}
	.rn-nav .menu-item-has-children.is-open > .sub-menu a,
	.rn-nav .menu-item-has-children:hover > .sub-menu a { opacity: 1; transform: none; }
	.rn-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(2) a,
	.rn-nav .menu-item-has-children:hover > .sub-menu li:nth-child(2) a { transition-delay: 40ms; }
	.rn-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(3) a,
	.rn-nav .menu-item-has-children:hover > .sub-menu li:nth-child(3) a { transition-delay: 80ms; }
	.rn-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(4) a,
	.rn-nav .menu-item-has-children:hover > .sub-menu li:nth-child(4) a { transition-delay: 120ms; }
}
@media (prefers-reduced-motion: reduce) {
	.rn-nav .sub-menu { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
	.rn-nav .menu-item-has-children.is-open > .sub-menu,
	.rn-nav .menu-item-has-children:hover > .sub-menu { transform: none; }
}

/* ============================ 6. SCROLL REVEAL: STAGGER ============= */
/* En las grillas, el contenedor .reveal no anima; animan sus hijos en cascada
   (main.js numera cada hijo con --rn-i). Red de seguridad CSS: el keyframe
   rn-reveal-safety (definido en theme.css) revela igual a los ~2s si el JS no
   corre, asi que nunca queda contenido oculto. */
@media (prefers-reduced-motion: no-preference) {
	.reveal.rn-grid { opacity: 1; transform: none; }
	.reveal.rn-grid > * {
		opacity: 0;
		transform: translateY(1.1rem);
		transition: opacity 520ms var(--ease-out-expo), transform 520ms var(--ease-out-expo);
		transition-delay: calc(var(--rn-i, 0) * 55ms);
		animation: rn-reveal-safety 0.01s linear 2s forwards;
	}
	.reveal.rn-grid.is-in > * { opacity: 1; transform: none; }
}

/* ============================ 7. GALERIA: SOFT SWAP ================= */
/* El crossfade real lo maneja main.js (fade+blur durante el swap de src); aca
   solo aseguramos que la imagen principal tenga de donde transicionar. */
.rn-gallery .woocommerce-product-gallery__wrapper img { will-change: opacity; }

/* ============================ 8. OVERLAYS: reduced-motion =========== */
/* En vez de matar la transicion a CERO (teletransporte), degradamos a un fade
   suave. Sin transform (no slide); opacity + visibility. */
@media (prefers-reduced-motion: reduce) {
	.rn-minicart,
	.rn-mobile-nav__panel,
	.rn-search-overlay__panel {
		transform: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 180ms linear, visibility 0s linear 180ms;
	}
	body.rn-minicart-open .rn-minicart,
	body.rn-nav-open .rn-mobile-nav__panel,
	body.rn-search-open .rn-search-overlay__panel {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	.rn-minicart__backdrop,
	.rn-mobile-nav__backdrop,
	.rn-search-overlay__backdrop { transition: opacity 180ms linear; }
}

/* ============================ 9. MINI-CART: stagger de items ======== */
@media (prefers-reduced-motion: no-preference) {
	body.rn-minicart-open .rn-minicart .woocommerce-mini-cart-item {
		animation: rn-mc-item-in 360ms var(--ease-out-expo) both;
	}
	body.rn-minicart-open .rn-minicart .woocommerce-mini-cart-item:nth-child(2) { animation-delay: 55ms; }
	body.rn-minicart-open .rn-minicart .woocommerce-mini-cart-item:nth-child(3) { animation-delay: 110ms; }
	body.rn-minicart-open .rn-minicart .woocommerce-mini-cart-item:nth-child(4) { animation-delay: 165ms; }
	body.rn-minicart-open .rn-minicart .woocommerce-mini-cart-item:nth-child(n+5) { animation-delay: 200ms; }
}

/* ===================== 10. FAB WHATSAPP: DESTACADO + entrada ======== */
/* Es la unica via de contacto directo: vale que se note. Mas grande, en el
   verde WhatsApp (reconocible al instante), con glow y un pulso sutil que llama
   la atencion sin gritar. Mantiene el fade al abrir un panel (theme.css). */
.rn-whatsapp-fab {
	width: 62px;
	height: 62px;
	background: #25d366;
	color: #fff;
	overflow: visible;
	box-shadow: 0 10px 28px -6px rgba(37, 211, 102, 0.6), 0 2px 8px rgba(15, 23, 17, 0.2);
}
.rn-whatsapp-fab svg { width: 32px; height: 32px; }
.rn-whatsapp-fab:hover { background: #20bd5a; color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.rn-whatsapp-fab:hover { box-shadow: 0 16px 36px -6px rgba(37, 211, 102, 0.72); }
}
@media (prefers-reduced-motion: no-preference) {
	.rn-whatsapp-fab {
		transition: opacity 360ms var(--ease-out-expo), transform 360ms var(--ease-out-expo), box-shadow var(--tr), background var(--tr), color var(--tr);
	}
	@starting-style {
		.rn-whatsapp-fab { opacity: 0; transform: scale(0.85); }
	}
	/* Pulso de atencion: un anillo verde que emana y se desvanece (lento, sutil). */
	.rn-whatsapp-fab::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background: #25d366;
		animation: rn-wa-pulse 2.6s var(--ease-out-expo) infinite;
	}
}
@keyframes rn-wa-pulse {
	0% { transform: scale(1); opacity: 0.5; }
	70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* ============================ 11. SPINNER WOOCOMMERCE =============== */
/* El loader generico de WooCommerce, en verde de marca y un poco mas rapido
   (un spinner mas veloz hace sentir la carga mas veloz). */
.woocommerce .blockUI.blockOverlay::after,
.woocommerce .loader::after,
.woocommerce-cart .blockUI.blockOverlay::after {
	border-top-color: var(--c-verde-600) !important;
	border-right-color: var(--c-verde-600) !important;
	animation-duration: 0.7s !important;
}

/* ============================ 12. ACORDEON (FAQ + tabs) ============= */
/* Apertura con altura animada en vez del salto display:none -> block. */
@media (prefers-reduced-motion: no-preference) {
	[data-rn-accordion].is-enhanced .rn-faq__answer,
	[data-rn-accordion].is-enhanced .rn-tabs__panel {
		display: block;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 300ms var(--ease-out-expo), opacity 220ms ease;
	}
	[data-rn-accordion].is-enhanced .rn-faq__answer.is-open,
	[data-rn-accordion].is-enhanced .rn-tabs__panel.is-open {
		max-height: 1600px;
		opacity: 1;
	}
}

/* ============================ 13. GALERIA: reduced-motion =========== */
/* Completa el reduced-motion: tambien el lift de las miniaturas y el trigger
   de zoom dejan de moverse. */
@media (prefers-reduced-motion: reduce) {
	.rn-gallery .flex-control-thumbs img,
	.rn-gallery__thumb,
	.rn-gallery .woocommerce-product-gallery__trigger,
	.rn-gallery .woocommerce-product-gallery__wrapper img { transition: none; }
}