/* ==========================================================================
   ATF3D.COM — capa "next level": mismo estilo, mas pulido.
   Animaciones sutiles, bordes de energia, HUD vivo y microinteracciones.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Aparicion progresiva al hacer scroll */
  .af-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
  .af-reveal.is-visible { opacity: 1; transform: none; }

  /* Latido del neon del logo */
  .af-logo__name { animation: afPulse 4.5s ease-in-out infinite; }
  @keyframes afPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(0,242,255,.4), 0 0 20px rgba(0,242,255,.2); }
    50%      { text-shadow: 0 0 14px rgba(0,242,255,.65), 0 0 34px rgba(0,242,255,.32); }
  }

  /* Barrido de escaner sobre las imagenes de producto */
  .woocommerce ul.products li.product > a:first-of-type { position: relative; display: block; overflow: hidden; }
  .woocommerce ul.products li.product > a:first-of-type::after {
    content: "";
    position: absolute; left: -60%; top: 0; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(0,242,255,.18), transparent);
    transform: skewX(-18deg);
    transition: left .75s ease;
    pointer-events: none;
  }
  .woocommerce ul.products li.product:hover > a:first-of-type::after { left: 120%; }

  .woocommerce ul.products li.product img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
  .woocommerce ul.products li.product:hover img { transform: scale(1.045); }
}

/* --- Rejilla de fondo con horizonte de energia -------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(70% 45% at 12% -5%, rgba(0, 242, 255, .10), transparent 65%),
    radial-gradient(60% 40% at 95% 8%, rgba(255, 0, 212, .09), transparent 65%);
}
.af-header, .af-mobile-nav, main, .af-footer { position: relative; z-index: 1; }

/* --- Cabecera que se compacta al bajar ---------------------------------- */
.af-header { transition: padding .3s ease, background .3s ease, box-shadow .3s ease; }
.af-header.is-scrolled {
  padding-top: 9px;
  padding-bottom: 9px;
  background: rgba(10, 10, 12, .93);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 242, 255, .25);
}
.af-header::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,242,255,.55), rgba(255,0,212,.45), transparent);
  opacity: .8;
}

/* Subrayado animado en el menu */
.af-nav a { position: relative; }
.af-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(0,242,255,.6);
  transition: width .3s ease;
}
.af-nav a:hover::after { width: 100%; }

/* --- Barra de progreso de lectura / scroll ------------------------------ */
.af-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 12px rgba(0, 242, 255, .7);
  z-index: 60;
  transition: width .1s linear;
}

/* --- Ticker de estado (cinta superior del hero) ------------------------- */
.af-ticker {
  overflow: hidden;
  border-top: 1px solid var(--glass-stroke);
  border-bottom: 1px solid var(--glass-stroke);
  background: rgba(19, 19, 21, .6);
  padding: 9px 0;
}
.af-ticker__track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  animation: afMarquee 34s linear infinite;
}
.af-ticker__track span b { color: var(--primary); font-weight: 700; }
@keyframes afMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .af-ticker__track { animation: none; } }

/* --- Titulares con degradado de energia --------------------------------- */
.af-hero__title {
  background: linear-gradient(100deg, #ffffff 10%, var(--primary) 55%, #ffffff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(0, 242, 255, .22));
}

/* --- Tarjetas de producto: borde de energia al pasar el raton ----------- */
.woocommerce ul.products li.product::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,242,255,.65), rgba(255,0,212,.45));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.woocommerce ul.products li.product:hover::before { opacity: 1; }

/* Esquinas HUD en cada tarjeta */
.woocommerce ul.products li.product::after {
  content: "";
  position: absolute; top: 10px; left: 10px;
  width: 14px; height: 14px;
  border-top: 2px solid rgba(0, 242, 255, .55);
  border-left: 2px solid rgba(0, 242, 255, .55);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 3;
  pointer-events: none;
}
.woocommerce ul.products li.product:hover::after { opacity: 1; }

/* Etiqueta de oferta con brillo pulsante */
.woocommerce span.onsale { animation: afSale 3s ease-in-out infinite; }
@keyframes afSale {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 0, 212, .40); }
  50%      { box-shadow: 0 0 26px rgba(255, 0, 212, .75); }
}
@media (prefers-reduced-motion: reduce) { .woocommerce span.onsale { animation: none; } }

/* --- Botones: barrido de luz -------------------------------------------- */
.af-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  position: relative;
  overflow: hidden;
}
.af-btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.af-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after { left: 130%; }

.af-btn:active { transform: translateY(1px); }

/* --- Paneles de caracteristicas: elevacion e iconos vivos --------------- */
.af-feature { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; overflow: hidden; }
.af-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(0,242,255,.10), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.af-feature:hover { transform: translateY(-5px); border-color: rgba(0, 242, 255, .4); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.af-feature:hover::before { opacity: 1; }
.af-feature > * { position: relative; }
.af-feature:hover .material-symbols-outlined { text-shadow: 0 0 14px rgba(0, 242, 255, .7); }

/* --- Marco HUD del hero: linea de escaneo ------------------------------- */
.af-hero__media { overflow: hidden; }
.af-hero__media::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 90px;
  background: linear-gradient(180deg, rgba(0,242,255,.16), transparent);
  animation: afScan 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes afScan {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(560px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .af-hero__media::after { animation: none; opacity: 0; } }

/* --- CTA: rejilla animada ----------------------------------------------- */
.af-cta { overflow: hidden; }
.af-cta::before {
  content: "";
  position: absolute; inset: -50%;
  background-image:
    linear-gradient(rgba(0,242,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,212,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: afDrift 22s linear infinite;
  pointer-events: none;
}
.af-cta > * { position: relative; }
@keyframes afDrift { to { transform: translate(44px, 44px); } }
@media (prefers-reduced-motion: reduce) { .af-cta::before { animation: none; } }

/* --- Chips de confianza -------------------------------------------------- */
.af-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.af-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-surface-variant);
  border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 7px 12px;
}
.af-trust span .material-symbols-outlined { font-size: 14px; color: var(--primary); }

/* --- Boton volver arriba ------------------------------------------------- */
.af-top {
  position: fixed; right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0,242,255,.4);
  background: rgba(19,19,21,.9);
  backdrop-filter: blur(10px);
  color: var(--primary);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all .3s ease;
  z-index: 55;
}
.af-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.af-top:hover { background: var(--primary); color: #05070a; box-shadow: 0 0 22px rgba(0,242,255,.55); }

/* --- Barra de accion fija en la ficha de producto (movil) --------------- */
@media (max-width: 767px) {
  .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
}

/* --- Scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0c; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(0,242,255,.5), rgba(255,0,212,.4)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

::selection { background: rgba(0, 242, 255, .3); color: #fff; }

/* --- Ocultar texto auxiliar en pantallas pequenas ------------------------ */
@media (max-width: 640px) { .af-hide-sm { display: none; } }

/* ============================================================
   LOGOTIPO "ATF3D.COM" — versión épica translúcida
   ============================================================ */
.af-logo { text-decoration: none; }

.af-logo__main {
	display: inline-flex;
	align-items: baseline;
	gap: .45ch;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: .06em;
}

.af-logo__word {
	background: linear-gradient(115deg, #eafcff 0%, #00f2ff 38%, #ff00d4 105%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 10px rgba(0, 242, 255, .45));
	animation: af-logo-sheen 6s ease-in-out infinite;
	background-size: 220% 100%;
}

.af-logo__word em {
	font-style: normal;
	font-weight: 700;
	opacity: .92;
}

.af-logo__3d {
	position: relative;
	font-family: "JetBrains Mono", monospace;
	font-weight: 700;
	font-size: .82em;
	padding: .12em .4em;
	color: #0a0a0c;
	background: linear-gradient(135deg, #00f2ff, #7ff9ff);
	border-radius: 3px;
	box-shadow:
		0 0 14px rgba(0, 242, 255, .55),
		inset 0 1px 0 rgba(255, 255, 255, .5);
	letter-spacing: .05em;
}

.af-logo__3d::after {
	content: "";
	position: absolute;
	inset: -3px;
	border: 1px solid rgba(0, 242, 255, .35);
	border-radius: 4px;
	pointer-events: none;
}

.af-logo__tagline {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: .6rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: rgba(185, 202, 203, .75);
	margin-top: .35em;
}

.af-logo:hover .af-logo__word {
	filter: drop-shadow(0 0 18px rgba(0, 242, 255, .75));
}

.af-logo:hover .af-logo__3d {
	box-shadow: 0 0 22px rgba(0, 242, 255, .85), inset 0 1px 0 rgba(255,255,255,.5);
}

@keyframes af-logo-sheen {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}