/* ============================================================
   FX3D LOGO + EXTRAS — Logo lobo 3D y profundidad adicional
   ============================================================ */

/* ---------- LOGO 3D (header y footer) ---------- */
.fx-logo3d {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateY(0) rotateX(0);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), filter .5s ease;
  filter: drop-shadow(0 6px 14px rgba(var(--cl-accent), .35)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  animation: fx-logo-breathe 6s ease-in-out infinite;
}
.fx-logo3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(26px);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.fx-logo3d:before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cl-accent), .35), transparent 68%);
  transform: translateZ(-16px);
  transition: transform .6s ease, opacity .5s;
  opacity: .75;
}
.fx-logo3d:after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--cl-accent), .45);
  transform: translateZ(8px);
  animation: fx-logo-orbit 14s linear infinite;
  opacity: .6;
}
@keyframes fx-logo-breathe {
  0%, 100% { transform: perspective(600px) rotateY(-6deg) rotateX(3deg) translateZ(0); }
  50% { transform: perspective(600px) rotateY(6deg) rotateX(-3deg) translateZ(10px); }
}
@keyframes fx-logo-orbit {
  to { transform: translateZ(8px) rotate(360deg); }
}
a:hover > .fx-logo3d,
a:focus-visible > .fx-logo3d {
  animation-play-state: paused;
  transform: perspective(600px) rotateY(22deg) rotateX(-10deg) scale(1.14) translateZ(24px);
  filter: drop-shadow(0 14px 30px rgba(var(--cl-accent), .65)) drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
}
a:hover > .fx-logo3d:before { transform: translateZ(-28px) scale(1.5); opacity: 1; }
a:hover > .fx-logo3d img { transform: translateZ(48px) scale(1.05); }

.fx-logo3d--lg { width: 84px; height: 84px; }

/* Nombre de la tienda junto al logo: relieve */
.premium-nav__brand strong,
.premium-footer__logo strong {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform .4s ease, text-shadow .4s ease;
}
a:hover > strong { transform: translateZ(16px); text-shadow: 0 8px 22px rgba(var(--cl-accent), .4); }

/* ---------- TÍTULOS con profundidad al hover ---------- */
.section-heading h2,
.products-page-hero h1,
.faq-premium h1,
.feedback-hero h1 {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), text-shadow .5s;
  animation: fx-title-rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fx-title-rise {
  from { opacity: 0; transform: translateY(30px) translateZ(-80px) rotateX(8deg); }
  to { opacity: 1; transform: none; }
}
.section-heading h2:hover { transform: translateZ(30px) rotateX(2deg); text-shadow: 0 20px 44px rgba(var(--cl-accent), .3); }

/* ---------- INPUTS 3D: elevación al enfocar ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .25s;
}
input:focus,
textarea:focus,
select:focus {
  transform: translateZ(22px) rotateX(3deg);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .4), 0 0 0 3px rgba(var(--cl-accent), .14), 0 6px 18px rgba(var(--cl-accent), .12);
  outline: none;
}

/* ---------- MEGA-MENÚ: despliegue 3D ---------- */
.catalog-mega {
  transform-origin: top center;
  transform-style: preserve-3d;
  animation: fx-mega-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fx-mega-in {
  from { opacity: 0; transform: translateY(-14px) translateZ(-90px) rotateX(-8deg); }
  to { opacity: 1; transform: none; }
}
.catalog-mega__item,
.catalog-mega [class*="item"] {
  transform-style: preserve-3d;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, background .25s;
}
.catalog-mega__item:hover,
.catalog-mega [class*="item"]:hover {
  transform: translateX(5px) translateZ(20px) rotateY(-3deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 4px 14px rgba(var(--cl-accent), .12);
}
.catalog-mega img { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.catalog-mega__item:hover img { transform: translateZ(26px) scale(1.07) rotateY(-4deg); }

/* ---------- CATEGORÍAS (card de colección) ---------- */
.categories a,
[class*="category-card"] {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.categories a:hover { transform: translateY(-8px) translateZ(42px) rotateX(4deg); box-shadow: 0 26px 60px rgba(0, 0, 0, .45), 0 10px 30px rgba(var(--cl-accent), .16); }
.categories img { transition: transform .5s; }
.categories a:hover img { transform: translateZ(34px) scale(1.07); }

/* ---------- BOTONES del nav (login, carrito, hamburguesa) ---------- */
.premium-nav__login,
.premium-nav__menu,
.premium-header-search {
  transform-style: preserve-3d;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, background .25s;
}
.premium-nav__login:hover,
.premium-header-search:hover {
  transform: translateZ(24px) translateY(-2px) rotateX(8deg);
  box-shadow: 0 14px 32px rgba(var(--cl-accent), .22), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.premium-nav__menu:hover { transform: translateZ(20px) scale(1.1); }

/* ---------- FOOTER: escena completa ---------- */
.premium-footer__grid { transform-style: preserve-3d; }
.premium-footer__col h4 {
  transform-style: preserve-3d;
  transition: transform .35s ease, text-shadow .35s;
}
.premium-footer__col:hover h4 { transform: translateZ(20px); text-shadow: 0 10px 24px rgba(var(--cl-accent), .35); }
.premium-footer__socials a {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.premium-footer__socials a:hover {
  transform: translateZ(30px) rotateY(-14deg) scale(1.15);
  box-shadow: 0 14px 32px rgba(var(--cl-accent), .4);
}
.premium-footer__glow { animation: fx-footer-glow 9s ease-in-out infinite alternate; }
@keyframes fx-footer-glow {
  from { opacity: .5; transform: translateX(-6%) translateZ(-40px); }
  to { opacity: .95; transform: translateX(6%) translateZ(0); }
}

/* ---------- TOASTS y badges flotantes ---------- */
.premium-nav__cart-count {
  animation: fx-badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
  transform-style: preserve-3d;
  box-shadow: 0 6px 16px rgba(var(--cl-accent), .5);
}
@keyframes fx-badge-pop {
  from { transform: scale(0) translateZ(-40px) rotateX(-90deg); }
  to { transform: scale(1) translateZ(20px); }
}

/* ---------- HERO: botón primario con pulso 3D ---------- */
.premium-hero__actions .premium-button--primary {
  animation: fx-cta-pulse 3.2s ease-in-out infinite;
}
@keyframes fx-cta-pulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(var(--cl-accent), .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 20px 48px rgba(var(--cl-accent), .55), inset 0 1px 0 rgba(255, 255, 255, .4); }
}

/* ---------- Trust row del hero: iconos 3D en cascada ---------- */
.premium-hero__trust i {
  display: inline-block;
  transform-style: preserve-3d;
  animation: fx-trust-float 4s ease-in-out infinite;
}
.premium-hero__trust span:nth-child(2) i { animation-delay: .5s; }
.premium-hero__trust span:nth-child(3) i { animation-delay: 1s; }
.premium-hero__trust i:hover { transform: translateZ(26px) scale(1.3) rotateZ(8deg); }
@keyframes fx-trust-float {
  0%, 100% { transform: translateZ(0) translateY(0); }
  50% { transform: translateZ(18px) translateY(-4px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-logo3d, .fx-logo3d:before, .fx-logo3d:after, .fx-logo3d img,
  .premium-footer__glow, .premium-hero__actions .premium-button--primary,
  .premium-hero__trust i, .premium-nav__cart-count, .catalog-mega { animation: none !important; }
}