/* =====================================================================
   Aurora — plantilla de tienda
   Se carga DESPUÉS de app.css: aquí va lo propio de la plantilla y los
   ajustes sobre los componentes compartidos (checkout, confirmación).

   Todo el color sale de las variables que inyecta Branding::cssVars()
   (--accent, --accent-dark, --accent-light, --accent-rgb) y toda la
   tipografía de --font-body / --font-display / --font-accent. Así la
   plantilla sirve para cualquier tienda, sea cual sea su paleta.
   ===================================================================== */

.au {
  /* Superficies propias: más profundas y frías que el negro plano del tema
     clásico, para que la luz del acento destaque. */
  --au-ink:      #07070b;
  --au-ink-2:    #0b0b12;
  --au-panel:    rgba(255, 255, 255, .034);
  --au-panel-2:  rgba(255, 255, 255, .055);
  --au-line:     rgba(255, 255, 255, .09);
  --au-line-2:   rgba(var(--accent-rgb), .32);
  --au-txt:      #f5f5f7;
  --au-txt-mut:  #a8a8b3;
  --au-txt-dim:  #6f6f7d;

  --au-r:        18px;
  --au-r-lg:     26px;
  --au-max:      1180px;
  --au-pad:      clamp(16px, 4vw, 32px);

  /* Curva de resorte suave: entra rápido y asienta sin rebote brusco. */
  --au-ease:     cubic-bezier(.22, 1, .36, 1);

  background: var(--au-ink);
  color: var(--au-txt);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El tema clásico pinta su propio fondo y rejilla: aquí sobran. */
.au .bg-fx { display: none; }

.au-layout { position: relative; z-index: 1; }

/* === Fondo: malla de aurora ==========================================
   Tres orbes desenfocados que derivan muy despacio. Solo se animan
   transform y opacity, así que el compositor lo resuelve en GPU y no
   provoca repintados. */

.au-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.au-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.au-orb-1 {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .55), transparent 70%);
  animation: au-drift-1 34s var(--au-ease) infinite alternate;
}
.au-orb-2 {
  width: 38vw; height: 38vw;
  min-width: 260px; min-height: 260px;
  top: 6vw; right: -10vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .34), transparent 70%);
  animation: au-drift-2 42s var(--au-ease) infinite alternate;
}
.au-orb-3 {
  width: 52vw; height: 52vw;
  min-width: 300px; min-height: 300px;
  bottom: -22vw; left: 22vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .20), transparent 72%);
  animation: au-drift-3 50s var(--au-ease) infinite alternate;
}

/* Panal de fondo: la retícula que llevan los HUD del género. Se hace con dos
   degradados repetidos a ±60º en vez de una imagen; pesa cero y escala. */
.au-hex {
  position: absolute;
  inset: 0;
  opacity: .9;
  background-image:
    repeating-linear-gradient(60deg,  rgba(190,190,255,.075) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-60deg, rgba(190,190,255,.075) 0 1px, transparent 1px 34px);
  /* Se atenúa hacia abajo, pero no se apaga del todo: si desaparece, las
     tarjetas translúcidas de la mitad inferior quedan sobre un negro plano
     y la transparencia deja de significar nada. */
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.5) 50%, rgba(0,0,0,.32) 100%);
          mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.5) 50%, rgba(0,0,0,.32) 100%);
}

/* Suelo en perspectiva: la rejilla táctica que cierra la escena por abajo. */
.au-floor {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 55vh;
  /* Con el origen abajo, el rotateX aplasta el plano contra el borde inferior:
     hay que dejarlo anclado a bottom:0 o la proyección cae fuera de pantalla. */
  transform: perspective(560px) rotateX(69deg);
  transform-origin: bottom center;
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .55) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg,  rgba(var(--accent-rgb), .42) 0 1px, transparent 1px 58px);
  -webkit-mask-image: linear-gradient(0deg, #000 0, transparent 78%);
          mask-image: linear-gradient(0deg, #000 0, transparent 78%);
  opacity: .85;
}

/* Viñeta: empuja la mirada al centro, que es donde está la compra. */
.au-vign {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 78% at 50% 32%, transparent 46%, rgba(0,0,0,.42) 100%);
}

/* Esquirlas de diamante a la deriva. */
.au-shards { position: absolute; inset: 0; color: rgba(var(--accent-rgb), .85); }
.au-shard {
  position: absolute;
  width: 26px; height: 26px;
  opacity: .2;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .5));
  will-change: transform;
  animation: au-fall linear infinite;
}
.au-shard-1 { left:  8%; top: -8%;  width: 20px; animation-duration: 38s; animation-delay:  -4s; }
.au-shard-2 { left: 23%; top: -18%; width: 30px; animation-duration: 52s; animation-delay: -22s; opacity: .15; }
.au-shard-3 { left: 41%; top: -12%; width: 16px; animation-duration: 44s; animation-delay: -11s; }
.au-shard-4 { left: 58%; top: -20%; width: 26px; animation-duration: 60s; animation-delay: -35s; opacity: .13; }
.au-shard-5 { left: 72%; top: -9%;  width: 22px; animation-duration: 47s; animation-delay: -18s; }
.au-shard-6 { left: 86%; top: -16%; width: 34px; animation-duration: 56s; animation-delay: -29s; opacity: .12; }
.au-shard-7 { left: 95%; top: -6%;  width: 18px; animation-duration: 41s; animation-delay:  -8s; }

@keyframes au-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-4vw, 128vh, 0) rotate(220deg); }
}

/* Grano finísimo: rompe el bandeado de los degradados grandes. */
.au-grain {
  position: absolute;
  inset: -50%;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes au-drift-1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw, 5vw, 0) scale(1.14); } }
@keyframes au-drift-2 { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-7vw, 8vw, 0) scale(1); } }
@keyframes au-drift-3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5vw, -6vw, 0) scale(1.1); } }

/* === Cabecera ======================================================== */

.au-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: clamp(10px, 2vw, 16px) var(--au-pad);
  background:
    /* Chevrones inclinados: el galón que llevan los banners del género. */
    repeating-linear-gradient(115deg,
      rgba(var(--accent-rgb), .07) 0 2px,
      transparent 2px 16px),
    linear-gradient(180deg, rgba(7,7,11,.94), rgba(7,7,11,.66) 70%, rgba(7,7,11,.12)),
    radial-gradient(70% 180% at 50% -60%, rgba(var(--accent-rgb), .22), transparent 70%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden; /* el destello del filo arranca fuera del encuadre */
}

/* Filo inferior: una línea de acento con un destello que la recorre, como el
   barrido de una mira. Lenta y de una sola pasada cada 9 s: se percibe viva
   sin llamar la atención mientras se lee. */
.au-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--accent-rgb), .45) 22%,
    rgba(var(--accent-rgb), .45) 78%,
    transparent);
}
.au-header::before {
  content: "";
  position: absolute;
  left: -30%; bottom: 0;
  width: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  animation: au-scan 9s linear infinite;
}

@keyframes au-scan {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(440%); opacity: 0; }
}

.au-header-in {
  max-width: var(--au-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.au-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.au-brand-logo { height: clamp(34px, 5vw, 44px); width: auto; max-width: 190px; object-fit: contain; display: block; }

.au-brand-mark {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05));
  border: 1px solid var(--au-line-2);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .22);
}
.au-brand-mark svg { width: 21px; height: 21px; }

.au-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.au-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 2.2vw, 18px);
  letter-spacing: .02em;
  color: var(--au-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au-brand-sub {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--au-txt-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.au-nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); }
.au-nav-link {
  color: var(--au-txt-mut);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .18s ease;
}
.au-nav-link:hover { color: var(--au-txt); }

/* === Botones ========================================================= */

.au-btn {
  --au-btn-bg: var(--au-panel-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid var(--au-line);
  border-radius: 999px;
  background: var(--au-btn-bg);
  color: var(--au-txt);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .22s var(--au-ease), box-shadow .22s var(--au-ease), border-color .22s ease;
}
.au-btn svg { width: 17px; height: 17px; }
.au-btn:hover { transform: translateY(-2px); border-color: var(--au-line-2); }

.au-btn-primary {
  border-color: transparent;
  color: #0a0a0c;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), .3);
}
.au-btn-primary:hover { box-shadow: 0 16px 40px rgba(var(--accent-rgb), .42); }

/* Brillo que recorre el botón principal al pasar el ratón. */
.au-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.au-btn-primary:hover::after { animation: au-sheen .75s var(--au-ease) forwards; }
@keyframes au-sheen { from { left: -60%; opacity: 1; } to { left: 115%; opacity: 0; } }

.au-btn-ghost { background: transparent; }
.au-btn-block { display: flex; width: 100%; }

/* === Hero ============================================================ */

.au-hero { padding: clamp(28px, 7vw, 76px) var(--au-pad) clamp(20px, 5vw, 48px); }

.au-hero-in {
  max-width: var(--au-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.au-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--au-line-2);
  background: rgba(var(--accent-rgb), .07);
  color: var(--accent-light);
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.au-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7);
  animation: au-ping 2.4s ease-out infinite;
}
@keyframes au-ping {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .65); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.au-h1 {
  margin: 20px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -.02em;
  background: linear-gradient(170deg, #fff 18%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.au-hero-sub {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--au-txt-mut);
}

.au-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.au-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--au-txt-mut);
  text-decoration: none;
  font-size: 14px;
}
.au-hero-rating strong { color: var(--au-txt); }
.au-stars { color: var(--accent); letter-spacing: 2px; }

.au-trust {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.au-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--au-txt-dim);
}
.au-trust svg { width: 16px; height: 16px; color: var(--accent); }

/* === Tarjetas de paquete ("gemas") =================================== */

.au-hero-panel { display: flex; justify-content: center; }

.au-gem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(22px, 3vw, 30px) clamp(18px, 2.4vw, 26px);
  border-radius: var(--au-r-lg);
  border: 1px solid var(--au-line);
  /* Translúcida a propósito: el panal y el suelo en fuga se leen a través
     del cristal. Con un fondo opaco detrás, la escena no existía. */
  background:
    linear-gradient(180deg, var(--au-panel-2), var(--au-panel)),
    rgba(11, 11, 18, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--au-ease), border-color .3s ease, box-shadow .3s var(--au-ease);
  overflow: hidden; /* recorta la cinta diagonal de "más elegido" */
}

/* Halo superior: da volumen sin recurrir a otra caja. */
.au-gem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.au-gem-card:hover {
  transform: translateY(-6px);
  border-color: var(--au-line-2);
  box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb), .1);
}

.au-gem-card.is-popular,
.au-gem-card.is-hero {
  border-color: var(--au-line-2);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)),
    rgba(11, 11, 18, .42);
  box-shadow: 0 18px 46px rgba(var(--accent-rgb), .16);
}
.au-gem-card.is-hero { width: min(340px, 100%); }

/* Cinta diagonal cruzando la esquina. La tarjeta recorta lo que sobresale,
   así que la cinta se saca por los lados y se gira 45º. */
.au-gem-tag {
  position: absolute;
  top: 18px; right: -42px;
  width: 150px;
  padding: 5px 0;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #0a0a0c;
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.au-gem-visual {
  width: 58px; height: 58px;
  margin-bottom: 14px;
  display: grid; place-items: center;
  color: var(--accent);
  filter: drop-shadow(0 6px 16px rgba(var(--accent-rgb), .42));
}
.au-gem-visual svg { width: 100%; height: 100%; }
.au-gem-card:hover .au-gem-visual { animation: au-float 2.6s ease-in-out infinite; }
@keyframes au-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.au-gem-amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
}
.au-gem-unit {
  margin-top: 4px;
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--au-txt-dim);
}
.au-gem-price {
  margin: 16px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  color: var(--accent);
}
.au-gem-foot { margin: 12px 0 0; font-size: 12px; color: var(--au-txt-dim); }

/* Rebaja del paquete destacado: precio anterior tachado y cuánto baja. */
.au-gem-card.is-hero .au-gem-price {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 8px;
}
.au-precio-antes {
  font-size: .6em;
  font-weight: 600;
  color: var(--au-txt-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.au-precio-off {
  font-family: var(--font-accent);
  font-size: .4em;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(53, 208, 127, .16);
  border: 1px solid rgba(53, 208, 127, .4);
  color: #6ee7a8;
  white-space: nowrap;
}

.au-gems {
  max-width: var(--au-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* === Secciones ======================================================= */

.au-section { padding: clamp(36px, 6vw, 72px) var(--au-pad); }

.au-section-head {
  max-width: var(--au-max);
  margin: 0 auto clamp(24px, 3.5vw, 40px);
  text-align: center;
}
.au-section-head h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 38px);
  letter-spacing: -.015em;
}
.au-section-head h2 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.au-section-head p { margin: 0; color: var(--au-txt-mut); font-size: 15px; }

/* === Banners ========================================================= */

.au-banners { padding-top: 0; }
.au-banners-track {
  max-width: var(--au-max);
  margin: 0 auto;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.au-banners-track::-webkit-scrollbar { display: none; }
.au-banner {
  flex: 0 0 min(100%, 720px);
  scroll-snap-align: center;
  border-radius: var(--au-r);
  overflow: hidden;
  border: 1px solid var(--au-line);
}
.au-banner img, .au-banner a { display: block; width: 100%; }
.au-banner img { aspect-ratio: 3.4/1; object-fit: cover; }

/* === Pasos =========================================================== */

.au-steps {
  max-width: var(--au-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.au-step {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--au-r);
  border: 1px solid var(--au-line);
  background: linear-gradient(180deg, var(--au-panel-2), var(--au-panel));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.au-step-n {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent);
}
.au-step h3 { margin: 12px 0 8px; font-size: 17px; font-weight: 700; }
.au-step p { margin: 0; color: var(--au-txt-mut); font-size: 14px; line-height: 1.6; }

/* === Reseñas ========================================================= */

.au-reviews {
  max-width: var(--au-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.au-review {
  margin: 0;
  padding: 22px;
  border-radius: var(--au-r);
  border: 1px solid var(--au-line);
  background: var(--au-panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.au-review-stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.au-review-stars span { color: var(--au-txt-dim); }
.au-review blockquote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--au-txt);
}
.au-review figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--au-txt-dim);
  border-top: 1px solid var(--au-line);
  padding-top: 12px;
}
.au-review-name { font-weight: 600; color: var(--au-txt-mut); }

/* === Compras recientes (prueba social) ===============================
   Solo se pinta si hay ventas reales; el bloque no existe si no las hay. */

.au-live {
  max-width: 880px;
  margin: 0 auto;
  border-radius: var(--au-r-lg);
  border: 1px solid var(--au-line);
  background: linear-gradient(180deg, var(--au-panel-2), var(--au-panel));
  overflow: hidden;
}

.au-live-head,
.au-live-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px clamp(14px, 3vw, 22px);
}

.au-live-head {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--au-txt-dim);
  border-bottom: 1px solid var(--au-line);
  background: rgba(0,0,0,.22);
}
.au-live-head span:last-child,
.au-live-row .au-live-time { text-align: right; }

.au-live-list { list-style: none; margin: 0; padding: 0; }
.au-live-row { border-top: 1px solid rgba(255,255,255,.045); font-size: 14px; }
.au-live-row:first-child { border-top: 0; }

.au-live-user { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--au-txt); font-weight: 600; }
.au-live-ini {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid var(--au-line-2);
  color: var(--accent-light);
  font-family: var(--font-accent);
  font-size: 13px;
}
.au-live-dia { color: var(--accent-light); font-family: var(--font-display); font-weight: 700; }
.au-live-dia small { color: var(--au-txt-dim); font-family: var(--font-body); font-weight: 400; font-size: 12px; }
.au-live-time { color: var(--au-txt-dim); font-size: 13px; white-space: nowrap; }

.au-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .55);
  animation: au-pulse 2s ease-out infinite;
}

@keyframes au-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

/* Aviso flotante: abajo a la derecha, que la izquierda es de WhatsApp, y por
   encima del selector de moneda, que ocupa la esquina. */
.au-toast {
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(330px, calc(100vw - 36px));
  padding: 12px 34px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--au-line-2);
  background: rgba(14,14,20,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  color: var(--au-txt);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .38s var(--au-ease), transform .38s var(--au-ease);
}
.au-toast.is-on { opacity: 1; transform: none; }

.au-toast-ico {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent-light);
}
.au-toast-ico svg { width: 19px; height: 19px; }
.au-toast-txt { min-width: 0; }
.au-toast-txt strong { display: block; color: var(--au-txt); }
.au-toast-txt span { color: var(--au-txt-mut); }

.au-toast-x {
  position: absolute;
  top: 6px; right: 8px;
  border: 0;
  background: transparent;
  color: var(--au-txt-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.au-toast-x:hover { color: var(--au-txt); }

/* === Pie ============================================================= */

.au-foot {
  position: relative;
  isolation: isolate;
  margin-top: clamp(40px, 7vw, 84px);
  border-top: 1px solid var(--au-line);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .10), transparent 42%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.72));
  padding: clamp(30px, 5vw, 52px) var(--au-pad) 0;
  overflow: hidden;
}

/* Escena del salto: paracaídas descendiendo sobre el horizonte de la isla.
   Va detrás del contenido y no captura ningún clic. */
.au-foot-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: rgba(var(--accent-rgb), .9);
}
.au-foot-drop { width: 100%; height: 100%; display: block; }

.au-para { animation: au-glide 16s ease-in-out infinite alternate; will-change: transform; }
.au-para-2 { animation-duration: 21s; animation-delay: -6s; }
.au-para-3 { animation-duration: 18s; animation-delay: -11s; }
.au-para-4 { animation-duration: 24s; animation-delay: -3s; }

/* Se anima solo el desplazamiento del grupo; el transform de posición vive en
   el atributo del SVG, así que aquí basta con mecerlos. */
@keyframes au-glide {
  from { transform: translate(0, 0); }
  to   { transform: translate(-14px, 12px); }
}

.au-foot-ridge { fill: currentColor; }
.au-foot-ridge-1 { opacity: .2; }
.au-foot-ridge-2 { opacity: .11; }

/* Los enlaces del pie mandan sobre la escena. */
.au-foot-in, .au-foot-bottom { position: relative; z-index: 1; }
.au-foot-in {
  max-width: var(--au-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(22px, 3vw, 40px);
}
.au-foot-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
  margin-bottom: 10px;
}
.au-foot-brand p { margin: 0 0 12px; max-width: 38ch; color: var(--au-txt-mut); font-size: 13.5px; line-height: 1.6; }
.au-foot-legal { color: var(--au-txt-dim); font-size: 12px; line-height: 1.6; }
.au-foot-col h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--au-txt);
}
.au-foot-col ul { list-style: none; margin: 0; padding: 0; }
.au-foot-col li { margin-bottom: 9px; }
.au-foot-col a { color: var(--au-txt-mut); text-decoration: none; font-size: 13.5px; transition: color .18s ease; }
.au-foot-col a:hover { color: var(--accent-light); }

/* Botón de instalar: oculto hasta que el navegador confirma que puede. */
.au-instalar-li { display: none; }
.pwa-instalable .au-instalar-li { display: list-item; }
.au-instalar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-light);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}
.au-instalar:hover { text-decoration: underline; }

.au-foot-bottom {
  max-width: var(--au-max);
  margin: clamp(26px, 4vw, 40px) auto 0;
  padding: 18px 0 26px;
  border-top: 1px solid var(--au-line);
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: center;
  font-size: 12px;
  color: var(--au-txt-dim);
}
.au-foot-dis { opacity: .72; line-height: 1.5; }

/* El selector de divisa hereda el aire de la plantilla. Fondo opaco: flota
   sobre el catálogo y el panel translúcido de la plantilla dejaba ver las
   tarjetas de detrás. */
.au .divisa-trigger, .au .divisa-panel {
  background: rgba(14,14,20,.94);
  border-color: var(--au-line-2);
}
.au .divisa-panel button { color: var(--au-txt-mut); }
.au .divisa-panel button.active {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #0a0a0c;
}
.au .aviso-usd { color: var(--au-txt-mut); }

/* === Ajustes sobre los componentes compartidos ========================
   checkout.php, confirmacion.php, resena.php y las páginas legales usan
   las clases de app.css. No se bifurcan: se reviste lo que ya existe. */

.au .checkout-wrap { padding: clamp(20px, 4vw, 44px) var(--au-pad); }

/* El título y el precio son hermanos sueltos dentro de la tarjeta: con una
   rejilla de dos columnas se leen como la cabecera de un resumen de pedido,
   sin tocar el marcado de checkout.php. */
.au .checkout-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 18px;
}
.au .checkout-card > h2 { grid-column: 1; margin: 0; }
.au .checkout-card > .precio-tag { grid-column: 2; justify-self: end; }
.au .checkout-card > *:not(h2):not(.precio-tag) { grid-column: 1 / -1; }

.au .checkout-card,
.au .confirm-card {
  border-radius: var(--au-r-lg);
  border: 1px solid var(--au-line);
  background:
    linear-gradient(180deg, var(--au-panel-2), var(--au-panel)),
    var(--au-ink-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}

.au .checkout-card h2,
.au .confirm-card h2 { font-family: var(--font-display); letter-spacing: -.01em; }

.au .form-control {
  border-radius: 12px;
  border: 1px solid var(--au-line);
  background: rgba(0,0,0,.34);
  color: var(--au-txt);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.au .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16);
}

.au .btn {
  border-radius: 999px;
  font-family: var(--font-accent);
  letter-spacing: .04em;
  transition: transform .22s var(--au-ease), box-shadow .22s var(--au-ease);
}
.au .btn:hover { transform: translateY(-2px); }

.au .metodo-card {
  border-radius: 14px;
  border: 1px solid var(--au-line);
  background: var(--au-panel);
  transition: transform .2s var(--au-ease), border-color .2s ease, background .2s ease;
  /* Los logotipos de los métodos semiautomáticos vienen de cada tienda y
     tienen alturas dispares; la rejilla los alinea igual. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 104px;
}
.au .metodo-card img { max-height: 34px; width: auto; object-fit: contain; }
.au .metodo-card .icon svg { width: 26px; height: 26px; }
.au .metodo-card .nombre { font-size: 14px; font-weight: 600; }
.au .metodo-card:hover { transform: translateY(-3px); border-color: var(--au-line-2); }
.au .metodo-card.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .28);
}

.au .pin-display {
  border-radius: 14px;
  border: 1px dashed var(--au-line-2);
  background: rgba(var(--accent-rgb), .07);
  color: var(--accent-light);
}

.au .precio-tag {
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid var(--au-line-2);
  color: var(--accent-light);
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 800;
  white-space: nowrap;
}

.au .alert { border-radius: 14px; }
.au .legal-wrap h1, .au .legal-wrap h2 { font-family: var(--font-display); }

/* === Animaciones de entrada ==========================================
   Sin JS los elementos ya son visibles. La clase .au-anim la pone el
   script solo si el sistema no pide movimiento reducido, así que nunca
   se queda contenido oculto por un fallo de JS. */

.au-anim .au-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--au-ease), transform .6s var(--au-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.au-anim .au-rise.is-in { opacity: 1; transform: none; }
.au-anim .au-rise-2 { transition-delay: 120ms; }

/* El hero nunca espera al observador: entra con una animación CSS que
   arranca sola. Es la primera pantalla y la que decide la venta; que
   dependiera del JS era regalarle el fallo a quien tenga la red lenta. */
.au-hero-copy { animation: au-in .7s var(--au-ease) both; }
.au-hero-panel { animation: au-in .7s var(--au-ease) .12s both; }

@keyframes au-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .au-hero-copy, .au-hero-panel { animation: none; }
  .au-live-dot { animation: none; }
  .au-shard, .au-para { animation: none; }
  .au-header::before { display: none; }
  .au-orb { animation: none; }
  .au-eyebrow-dot { animation: none; }
  .au-gem-card:hover .au-gem-visual { animation: none; }
  .au-btn-primary:hover::after { animation: none; }
  .au *, .au *::before, .au *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* === Responsive ======================================================
   Tipografía y espaciados ya son fluidos con clamp(); aquí solo se
   recolocan las rejillas. */

@media (max-width: 980px) {
  .au-hero-in { grid-template-columns: 1fr; text-align: center; }
  .au-hero-copy { display: flex; flex-direction: column; align-items: center; }
  .au-hero-sub { margin-inline: auto; }
  .au-hero-cta, .au-trust { justify-content: center; }
  .au-foot-in { grid-template-columns: 1fr 1fr; }
  .au-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .au .checkout-card { grid-template-columns: 1fr; }
  .au .checkout-card > .precio-tag { grid-column: 1; justify-self: start; margin-top: 10px; }
  .au-live-head { display: none; }
  .au-live-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .au-live-row .au-live-dia { grid-column: 1; padding-left: 40px; font-size: 13px; }
  .au-live-row .au-live-time { grid-column: 2; grid-row: 1; }
  .au-toast { left: 12px; right: 12px; bottom: 84px; max-width: none; }
  .au-toast-checkout { display: none; }
  /* Catálogo compacto: en un móvil, nueve tarjetas grandes son nueve
     pantallas de scroll y la mitad de la gente no llega al paquete que
     buscaba. Aquí se ve el catálogo entero de un vistazo. La tarjeta
     destacada del hero (.is-hero) se queda como está: es el escaparate. */
  .au-gems { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }

  .au-gem-card:not(.is-hero) { padding: 13px 8px 11px; border-radius: 14px; }
  .au-gem-card:not(.is-hero) .au-gem-visual {
    width: 20px; height: 20px;
    margin-bottom: 5px;
    filter: none;
  }
  .au-gem-card:not(.is-hero) .au-gem-amount { font-size: 17px; }
  .au-gem-card:not(.is-hero) .au-gem-unit { margin-top: 1px; font-size: 8.5px; letter-spacing: .1em; }
  .au-gem-card:not(.is-hero) .au-gem-price { margin: 6px 0 0; font-size: 15px; }

  /* El botón se retira, pero su enlace pasa a cubrir la tarjeta entera: el
     área táctil crece en vez de encoger. */
  .au-gem-card:not(.is-hero) .au-btn-block {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0;
  }
  .au-gem-card:not(.is-hero) .au-btn-block::after { display: none; }

  /* En la rejilla compacta la cinta se encoge con la tarjeta. */
  .au-gem-card:not(.is-hero) .au-gem-tag {
    top: 10px; right: -28px;
    width: 100px;
    padding: 2px 0;
    font-size: 7px;
    letter-spacing: .04em;
  }

  .au-brand-sub { display: none; }
  .au-nav { gap: 10px; }
  .au-foot-in { grid-template-columns: 1fr; }
  .au-foot-bottom { padding-bottom: 84px; } /* deja aire al botón de WhatsApp */
}

@media (max-width: 380px) {
  /* Ni siquiera en el móvil más estrecho se baja de tres por fila: el
     catálogo tiene que caber en una pantalla. */
  .au-gems { grid-template-columns: repeat(3, 1fr); gap: 7px; }
}