@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./manrope-latin.woff2") format("woff2");
}

/* Voltaje negro: el rayo y los aros del logo guían los acentos. */
body { isolation: isolate; }
body::before { z-index: -2; }
body::after { z-index: -1; }
.wrap::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 22% 18%, #ffe5000c, transparent 48%), radial-gradient(ellipse at 78% 70%, #bd910009, transparent 42%);
  animation: ambient-light 20s ease-in-out infinite alternate;
}
.page-top { padding-bottom: 10px; border-bottom: 1px solid #ffe50020; }
.page-top span:last-child { color: #ded99f; letter-spacing: .8px; }
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 12% 18%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 45px #ffe5000c;
  animation: logo-halo 8s ease-in-out infinite alternate;
}
.orbit-inner { stroke: #ffe50055; stroke-dasharray: 3 47; animation: orbit 26s linear infinite reverse; }
.orbit-trace { filter: drop-shadow(0 0 3px #ffe50070); }
.brand-tick { opacity: .6; }
.orbit { pointer-events: none; }
/* Tratamiento solicitado para Moral Store: logo flotante con identidad. */
.logo-panel {
  pointer-events: none;
  animation: logo-float 7s ease-in-out infinite;
}
.logo-panel img {
  filter: drop-shadow(0 7px 7px #0008) drop-shadow(0 0 2px #ffe50024);
}
.brand-mark::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 112px;
  height: 7px;
  border-radius: 50%;
  background: #d8b80012;
  filter: blur(3px);
  pointer-events: none;
  animation: logo-ground 7s ease-in-out infinite;
}
.action-detail { margin-left: auto; flex: none; font-size: 10px; letter-spacing: 1.3px; color: #d6c958; }
.button-whatsapp .action-detail { color: #272604; }
.action-detail svg { width: 18px; height: 18px; }
.button > span:not(.action-detail) { min-width: 0; overflow-wrap: anywhere; }
.button-web { overflow: hidden; border-color: #ffe50048; }
.button-web::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -35%;
  width: 35%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffe500, transparent);
  animation: circuit-line 9s ease-in-out infinite;
}
.button-location { background: #11110e; }
.stars svg { animation: star-light 7s ease-in-out infinite; }
.stars svg:nth-child(2) { animation-delay: .2s; }
.stars svg:nth-child(3) { animation-delay: .4s; }
.stars svg:nth-child(4) { animation-delay: .6s; }
.stars svg:nth-child(5) { animation-delay: .8s; }
.social-icon { animation: social-light 12s ease-in-out infinite; }
.social:nth-child(2) .social-icon { animation-delay: 1.5s; }
.social:nth-child(3) .social-icon { animation-delay: 3s; }

@keyframes ambient-light {
  from { opacity: .55; }
  to { opacity: 1; }
}
@keyframes logo-halo {
  from { box-shadow: 0 0 32px #ffe50006; }
  to { box-shadow: 0 0 52px #ffe50017; }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-4px); }
}
@keyframes logo-ground {
  0%, 100% { opacity: .7; transform: scaleX(1); }
  50% { opacity: .35; transform: scaleX(.86); }
}
@keyframes circuit-line {
  0%, 35% { transform: translateX(0); }
  80%, 100% { transform: translateX(390%); }
}
@keyframes star-light {
  0%, 45%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: .7; }
  65%, 75% { filter: drop-shadow(0 0 3px #ffe50070); opacity: 1; }
}
@keyframes social-light {
  0%, 45%, 100% { filter: drop-shadow(0 0 0 transparent); }
  65%, 75% { filter: drop-shadow(0 0 3px #ffe50060); }
}

@media (min-width: 700px) {
  body::after { inset: 20px; border-radius: 20px; }
  .wrap { padding: 22px 26px; max-width: 476px; border: 1px solid #ffe50025; border-top: 2px solid #ffe50080; border-radius: 16px; background: #090909d9; box-shadow: 0 24px 80px #0008; }
}
@media (max-width: 359px) {
  .button-whatsapp .action-detail { display: none; }
  .button-whatsapp small, .button-location small { font-size: 11px; }
  .review-bottom { row-gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button-whatsapp::after { display: none; }
  .button-web::after { left: 25%; transform: none; }
  .orbit-trace { stroke-dasharray: 8 42; }
  .logo-panel, .brand-mark::after { transform: none; }
  .stars svg, .social-icon, .wrap::before { opacity: 1; filter: none; }
}