/* ============================================================
   AURORA GLASS — capa de diseño compartida (glass + bento + spatial)
   Se carga DESPUÉS de plum.css en base.html y base_landing.html.
   plum.css está 100% en @layer; esta capa va sin layer → gana en cascada.
   Soporta tema claro y oscuro vía [data-theme] (toggle existente).
   ============================================================ */

/* ── Alias --pl-* → tokens plum unificados ───────────────────
   Las plantillas landing referencian --pl-* que NUNCA se definían
   (bug pre-existente). Aquí se mapean a los tokens plum (que ya
   cambian por tema), así el morado queda unificado en #7c3aed. */
:root {
  --pl-brand:        var(--brand);
  --pl-brand-hover:  var(--brand-hover);
  --pl-brand-soft:   var(--brand-soft);
  --pl-brand-vivid:  var(--brand-vivid);
  --pl-ink:          var(--ink);
  --pl-ink-soft:     var(--ink-soft);
  --pl-ink-faint:    var(--ink-faint);
  --pl-text-faint:   var(--text-faint);
  --pl-surface:      var(--surface-1);
  --pl-surface-2:    var(--surface-2);
  --pl-surface-3:    var(--surface-3);
  --pl-border:       var(--border);
  --pl-border-strong:var(--border-strong);
  --pl-ok:           var(--ok);
  --pl-warn:         var(--warn);
  --pl-err:          var(--err);
  --pl-info:         var(--info);
  /* Tinta de los recuadros de estado. Las plantillas de cuenta y checkout las
     venían usando con un respaldo fijo —`var(--pl-warn-ink,#7a4708)`— y ese
     respaldo es lo que se pintaba SIEMPRE, porque la variable no estaba
     definida en ningún sitio. El efecto no era un fallo visible en claro sino
     uno en oscuro: tinta pensada para fondo claro sobre el recuadro oscuro.
     Se definen con el MISMO valor del respaldo, así que en claro no se mueve
     nada; lo que cambia es que ahora el bloque oscuro puede aclararlas. */
  --pl-ok-ink:       #0d5c2c;
  --pl-warn-ink:     #7a4708;
  --pl-err-ink:      #8f1d1d;
  --pl-radius:       var(--radius);
  --pl-radius-sm:    var(--radius-sm);
  --pl-radius-md:    var(--radius-md);
  --pl-radius-lg:    var(--radius-lg);
  --pl-radius-xl:    var(--radius-xl);
  --pl-radius-pill:  var(--radius-pill);
  /* Tokens que las plantillas landing referenciaban sin estar definidos
     (causaban fondos transparentes / radios nulos). Mapeados a plum. */
  --pl-bg:           var(--surface-0);
  --pl-surface-0:    var(--surface-0);
  --pl-surface-1:    var(--surface-1);
  --pl-container:    var(--content-max);
  --pl-ink-body:     var(--ink);
  --pl-shadow:       var(--shadow);
  --pl-shadow-md:    var(--shadow-md);
  --pl-shadow-glass: var(--shadow-glass);
  /* WhatsApp (color de canal, fijo — no depende del tema). Usar este token
     en vez de hardcodear un verde en cada plantilla.
     #25D366 (verde oficial de marca) da solo 1.98:1 de contraste contra texto
     blanco — muy por debajo del mínimo WCAG AA (4.5:1), auditoría PageSpeed
     Insights 2026-07-04. Oscurecido a #0F7A42 (5.41:1 contra #fff) — mismo
     tono verde WhatsApp, ahora accesible. */
  --pl-wa:           #0F7A42;
  --pl-wa-hover:     #0c6636;

  /* Variantes de TEXTO de los colores semánticos. --ok/--warn/--err están
     calibrados como color de RELLENO (fondo de badge, barra, punto); usados como
     texto sobre superficie clara se quedan cortos de contraste. Estas son sus
     versiones legibles: ok 4.79:1, warn 4.84:1, err 5.91:1 sobre blanco.
     Vivían hardcodeadas en catalog-page.css; son sistema, no página. */
  --ok-ink:          #15803d;
  --warn-ink:        #b45309;
  --err-ink:         #b91c1c;

  /* Soporte de la foto de producto en la card de catálogo (banda superior de la
     card a dos tonos). Blanco puro en claro; en oscuro, blanco roto para que la
     foto siga sobre superficie clara sin deslumbrar sobre la rejilla. */
  --card-media-bg:   #fff;

  --aurora-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Tokens de cristal (por tema) ──────────────────────────── */
:root,
[data-theme="light"] {
  --glass-bg:         rgba(255, 255, 255, 0.60);
  --glass-bg-strong:  rgba(255, 255, 255, 0.82);
  --glass-flat-bg:    rgba(255, 255, 255, 0.55);
  --glass-border:     rgba(124, 58, 237, 0.16);
  --glass-highlight:  rgba(255, 255, 255, 0.85);
  --glass-shadow:     0 8px 32px -12px rgba(124, 58, 237, 0.18), 0 2px 8px -4px rgba(45, 31, 61, 0.08);
  --glass-blur:        16px;
  --glass-blur-strong: 24px;
  --aurora-1: rgba(124, 58, 237, 0.10);
  --aurora-2: rgba(167, 139, 250, 0.10);
  --aurora-3: rgba(34, 211, 238, 0.06);
}

[data-theme="dark"] {
  --glass-bg:         rgba(28, 21, 46, 0.55);
  --glass-bg-strong:  rgba(20, 15, 36, 0.80);
  --glass-flat-bg:    rgba(255, 255, 255, 0.05);
  --glass-border:     rgba(167, 139, 250, 0.18);
  --glass-highlight:  rgba(255, 255, 255, 0.14);
  /* Contraparte oscura de la tinta de estado: los valores claros son verdes,
     ámbares y rojos oscuros, ilegibles sobre el recuadro en tema oscuro. */
  --pl-ok-ink:        #6ee7a8;
  --pl-warn-ink:      #fcd88a;
  --pl-err-ink:       #ffb3ad;
  --glass-shadow:     0 14px 44px -14px rgba(0, 0, 0, 0.60), 0 2px 8px -4px rgba(0, 0, 0, 0.40);
  --aurora-1: rgba(124, 58, 237, 0.24);
  --aurora-2: rgba(167, 139, 250, 0.16);
  --aurora-3: rgba(34, 211, 238, 0.12);
}

/* ── Cristal base ──────────────────────────────────────────── */
.glass,
.glass-strong {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
}
/* Sin blur: para paneles anidados dentro de otro .glass (evita apilar blur) */
.glass-flat {
  background: var(--glass-flat-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* Cristal semántico (tintado) */
.glass-brand { background: color-mix(in srgb, var(--brand) 12%, var(--glass-bg)); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.glass-ok    { background: color-mix(in srgb, var(--ok)    10%, var(--glass-bg)); border-color: color-mix(in srgb, var(--ok)    28%, transparent); }
.glass-warn  { background: color-mix(in srgb, var(--warn)  10%, var(--glass-bg)); border-color: color-mix(in srgb, var(--warn)  28%, transparent); }
.glass-err   { background: color-mix(in srgb, var(--err)   10%, var(--glass-bg)); border-color: color-mix(in srgb, var(--err)   28%, transparent); }
.glass-info  { background: color-mix(in srgb, var(--info)  10%, var(--glass-bg)); border-color: color-mix(in srgb, var(--info)  28%, transparent); }

/* Píldoras / chips de cristal */
.glass-pill,
.glass-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
}

/* ── Fondo aurora (washes radiales sobre el lienzo) ──────────
   Pintados como background del contenedor: sin problemas de z-index,
   sin blur costoso de repintar; los tokens --aurora-* cambian por tema. */
.aurora-bg {
  position: relative;
  background:
    radial-gradient(60vw 60vw at 88% -8%, var(--aurora-1), transparent 60%),
    radial-gradient(52vw 52vw at -12% 108%, var(--aurora-3), transparent 58%),
    radial-gradient(42vw 42vw at 50% 42%, var(--aurora-2), transparent 72%),
    var(--surface-0);
  background-attachment: fixed;
}
/* Táctil: attachment fixed en iOS Safari no se soporta (repinta mal / deja
   franjas blancas al hacer scroll u overscroll) y en Android fuerza repaint
   por frame. En pantallas táctiles los orbes se anclan al documento. */
@media (pointer: coarse) {
  .aurora-bg { background-attachment: scroll; }
}
/* Orbe utilitario (para heroes/stages puntuales) */
.aurora-orb {
  position: absolute; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0;
}
.aurora-orb--1 { background: var(--aurora-1); }
.aurora-orb--2 { background: var(--aurora-2); }
.aurora-orb--3 { background: var(--aurora-3); }

/* ── Bento grid ────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bento-col-2  { grid-column: span 2; }
.bento-col-3  { grid-column: span 3; }
.bento-col-4  { grid-column: span 4; }
.bento-col-5  { grid-column: span 5; }
.bento-col-6  { grid-column: span 6; }
.bento-col-7  { grid-column: span 7; }
.bento-col-8  { grid-column: span 8; }
.bento-col-9  { grid-column: span 9; }
.bento-col-12 { grid-column: span 12; }
.bento-row-2  { grid-row: span 2; }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .bento-col-7, .bento-col-8, .bento-col-9, .bento-col-12 { grid-column: span 6; }
  .bento-col-5 { grid-column: span 6; }
}
@media (max-width: 639px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: 1 / -1 !important; }
}

/* ── Profundidad espacial (parallax via JS) ────────────────── */
[data-depth] { will-change: transform; }

/* ── KPI tile (extiende .glass) ────────────────────────────── */
.kpi-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.kpi-tile__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.kpi-tile__value { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.kpi-tile__trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.kpi-tile__trend--up   { color: var(--ok); }
.kpi-tile__trend--down { color: var(--err); }
.kpi-tile[data-urgency="warn"] { box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.kpi-tile[data-urgency="err"]  { box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 0 1px color-mix(in srgb, var(--err) 45%, transparent); }

/* ── Tabla de cristal ──────────────────────────────────────── */
.aurora-table-card { overflow: hidden; padding: 0; }
.aurora-table-card table { width: 100%; border-collapse: collapse; }
.aurora-table-card thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 12px 16px; border-bottom: 1px solid var(--glass-border); text-align: left; }
.aurora-table-card tbody td { padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--ink); }
.aurora-table-card tbody tr { transition: background .2s var(--aurora-ease); }
.aurora-table-card tbody tr:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.aurora-table-card tbody tr:last-child td { border-bottom: none; }

/* ── Input "glass" = SÓLIDO opaco (nunca translúcido, legibilidad) ── */
.glass-input {
  width: 100%; background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 14px; min-height: 44px;
  transition: border-color .2s var(--aurora-ease), box-shadow .2s var(--aurora-ease);
}
.glass-input::placeholder { color: var(--ink-faint); }
.glass-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ── Barra de filtros de cristal ───────────────────────────── */
.gl-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; }

/* ── Chip nav/filtro (cristal reposo, sólido brand activo) ─── */
.aurora-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: all .25s var(--aurora-ease);
}
.aurora-chip:hover { color: var(--ink); transform: translateY(-1px); }
.aurora-chip.active,
.aurora-chip[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Modal de cristal (override aditivo de .pl-modal__dialog) ── */
.aurora-modal-dialog,
.pl-modal__dialog.aurora-modal-dialog {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

/* ── Icono de sección (cuadrado brand-grad) ────────────────── */
.aurora-section-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-grad); color: #fff; font-size: 16px;
  box-shadow: 0 6px 16px -6px var(--brand);
}

/* ── Toggle switch (CSS puro) ──────────────────────────────── */
.glass-toggle-switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.glass-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.glass-toggle-switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); transition: background .25s var(--aurora-ease); }
.glass-toggle-switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--aurora-ease); }
.glass-toggle-switch input:checked ~ .track { background: var(--brand); border-color: var(--brand); }
.glass-toggle-switch input:checked ~ .thumb { transform: translateX(18px); }

/* ── Barra de progreso aurora ──────────────────────────────── */
.progress-aurora { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-aurora__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-vivid)); transition: width .6s var(--aurora-ease); }

/* ── Footer (landing) — Aurora ─────────────────────────────── */
.aurora-footer { position: relative; }
.aurora-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: .55;
}
/* ══ Pie mínimo ══
   Tres bandas y nada más: identidad + navegación esencial, luego identidad
   legal + pago, luego copyright. Sin columnas de enlaces, sin CTA, sin
   tarjetas: el peso visual lo carga el espacio, no los contenedores. */
.aurora-footer--min { padding-block: 2.5rem 1.75rem; }
.aurora-footer__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; padding-bottom: 1.5rem;
}
.aurora-footer__nav {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-size: .875rem; font-weight: 500;
}
/* `min-height` era 24px y los enlaces medían 42px reales — por debajo de los
   44px de SC 2.5.8 (AA de WCAG 2.2) y del piso que fija PRODUCT.md. Medido con
   hit-testing real (elementFromPoint a ±21px del centro), no sólo con la caja:
   5 enlaces del pie fallaban. Sube a 44 y con eso la caja real pasa a 44.
   No se toca el interlineado ni el `gap` de la columna: los 2px que faltaban
   caben dentro del espacio que ya había entre filas. */
.aurora-footer__nav a {
  color: var(--ink-soft); text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color .2s var(--aurora-ease);
}
.aurora-footer__nav a:hover { color: var(--brand); }
.aurora-footer__base {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem 2.5rem;
  /* Único hairline del pie: separa lo navegable de lo declarativo. Más reglas
     y el bloque vuelve a parecer una tabla. */
  border-top: 1px solid var(--border);
  padding-top: 1.25rem; margin-bottom: 1.25rem;
}
/* Identidad legal + contacto: letra chica de verdad, un escalón por debajo de
   la navegación. Legible sin competir (--ink-soft cumple contraste sobre el
   fondo del pie). */
.aurora-footer__id {
  display: flex; flex-direction: column; gap: .3rem;
  font-style: normal; font-size: .75rem; line-height: 1.55;
  color: var(--ink-soft); max-width: 62ch;
  /* La dirección completa parte en dos líneas y dejaba "Dominicana" sola en la
     segunda; `pretty` reparte el corte sin tocar el ancho. */
  text-wrap: pretty;
}
.aurora-footer__id strong { font-weight: 600; color: inherit; }
.aurora-footer__id a {
  color: inherit; text-decoration: none;
  transition: color .2s var(--aurora-ease);
}
.aurora-footer__id a:hover { color: var(--brand); }
/* Pago: las marcas al natural, sin chip ni caja alrededor. Cada SVG ya trae su
   propio borde de 1px, así que envolverlas duplicaría el marco. */
.aurora-footer__pay {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin: 0; padding: 0; list-style: none;
}
/* `.pay-mark` y `.aurora-footer__pay-txt` se retiraron con el marcado que las
   usaba: el pie pasó del parcial `_pay_marks.html` (dos logotipos sueltos) al
   bloque completo `_payment_marks.html`, que trae además los sellos 3-D
   Secure que exige AZUL, y el texto "Transferencia · Efectivo" salió por
   decisión del dueño. Se borran en vez de dejarse "por si acaso": tener dos
   juegos de marcas de tarjeta casi idénticos fue exactamente lo que hizo que
   la portada llevara meses sin los sellos — el requisito parecía cumplido
   porque el pie mostraba Visa y Mastercard, pero eran los del OTRO parcial. */

/* ── Bloque de marcas de pago (`landing/_payment_marks.html`) ──────────────
   Requisito de afiliación de AZUL, correo del 13/07/2026: las marcas Visa y
   Mastercard más los sellos 3-D Secure tienen que verse en la página
   principal, en la política de datos de tarjeta y en el checkout.

   ESTE BLOQUE NO TENÍA CSS. El parcial existía y se incluía en la política y
   en el checkout, pero ninguna hoja definía `.pay-marks`: se pintaba como una
   columna de imágenes a su tamaño NATIVO (88px de alto) con las viñetas de
   `<li>` a la vista. O sea que el requisito estaba "cumplido" en el marcado y
   roto en pantalla, justo en las dos páginas que el banco revisa. Va aquí, en
   la hoja global del landing, porque las tres apariciones la cargan — meterlo
   en la hoja de una página dejaría las otras dos sin estilar otra vez.

   Alto fijo y ancho automático: los cuatro assets oficiales tienen relaciones
   de aspecto distintas (Visa 271×88, Mastercard 113×88, los sellos ~88×88), y
   forzar un ancho común los deformaría. Igualar el ALTO es la forma estándar
   de alinear marcas de tarjeta. Los `width`/`height` del `<img>` siguen
   dando la relación de aspecto, así que el navegador reserva la caja antes de
   descargar el PNG y no hay salto de layout. */
.pay-marks { --mark-h: 26px; }
.pay-marks--lg { --mark-h: 40px; }
.pay-marks__title {
  margin: 0 0 .35rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .02em; color: var(--ink);
}
.pay-marks--lg .pay-marks__title { font-size: .9375rem; margin-bottom: .5rem; }
.pay-marks__lede {
  margin: 0 0 .85rem; max-width: 60ch;
  font-size: .8125rem; line-height: 1.55; color: var(--ink-soft);
}
.pay-marks__lede a { color: var(--brand); text-underline-offset: 3px; }
.pay-marks__lede a:hover { text-decoration: underline; }
/* Dos grupos, no una tira: "qué tarjetas" y "cómo se autentica" son hechos
   distintos y AZUL los pidió como requisitos distintos. El separador vertical
   lo dice sin gastar una palabra, y desaparece al envolverse en móvil, donde
   ya separa el salto de línea. */
.pay-marks__groups { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.pay-marks__group + .pay-marks__group {
  padding-left: 1.5rem; border-left: 1px solid var(--border);
}
.pay-marks__row {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; padding: 0; list-style: none;
}
/* Los chips son `<li>`, y este bloque es global: puede caer dentro de
   cualquier contenedor de prosa que decore sus listas. Pasa de verdad en la
   página de política, donde `.pl-legal-card li` le pone a CUALQUIER li un
   punto de 6px por `::before` y 1.5rem de sangría — medido, salían cuatro
   viñetas moradas delante de los logotipos oficiales de Visa y Mastercard.
   Se anulan aquí, en el componente, y no allá: el bloque tiene que verse
   igual en el pie, en el checkout y en la política sin que cada página que lo
   reciba se acuerde de desactivar sus propias viñetas.

   El selector lleva `.pay-marks` delante A PROPÓSITO, no por costumbre:
   `.pl-legal-card li::before` pesa (0,1,2) y `.pay-marks__chip::before` sólo
   (0,1,1), así que la versión corta PIERDE y las viñetas seguían saliendo
   (comprobado en navegador: `content` seguía siendo `""` y el padding en
   24px). Con la clase del bloque delante son (0,2,1) y (0,2,0), que ganan sin
   gastar un `!important` — que aquí sería la respuesta perezosa y dejaría al
   siguiente sin forma de sobreescribirlo. */
.pay-marks .pay-marks__chip { display: flex; flex: none; margin: 0; padding-left: 0; }
.pay-marks .pay-marks__chip::before { content: none; }
.pay-marks__chip img { height: var(--mark-h); width: auto; display: block; }
/* En tema oscuro las marcas pierden su propia tipografía: los assets oficiales
   traen el wordmark "mastercard" y el "ID Check" en NEGRO sobre transparente,
   y contra el pie oscuro (#1c1726) desaparecen — medido en navegador, no
   supuesto: los círculos rojo y ámbar se siguen viendo y el texto de debajo
   no. Un sello de seguridad que no se lee no cumple el requisito que lo puso
   ahí. La placa clara es además lo que piden las guías de marca de las redes
   de tarjetas cuando el entorno es oscuro: se muestra la marca sobre fondo
   claro, nunca se le cambia el color. No se invierte ni se aclara el PNG
   (`filter: invert()` destrozaría el azul de Visa y el rojo/ámbar de
   Mastercard, que son parte de la marca registrada). */
[data-theme="dark"] .pay-marks .pay-marks__chip {
  background: #fff; border-radius: 5px; padding: 4px 7px;
}
.pay-marks__label {
  margin: .3rem 0 0; font-size: .7rem; line-height: 1.35;
  color: var(--ink-soft);
}
.pay-marks--lg .pay-marks__label { font-size: .8125rem; }
@media (max-width: 560px) {
  .pay-marks__groups { gap: .9rem; }
  .pay-marks__group + .pay-marks__group { padding-left: 0; border-left: 0; }
}
.aurora-footer__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; min-height: 32px; font-family: 'Sarpanch', 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif; }
.aurora-footer__logo strong { color: var(--ink); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; }
/* La segunda palabra iguala a la primera: mismo cuerpo, mismo peso (700). */
.aurora-footer__logo strong + span { font-size: 1.125rem; font-weight: 700; }
.aurora-footer__social { display: flex; gap: .5rem; }
.aurora-footer__social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--ink-soft); font-size: .875rem;
  text-decoration: none; transition: color .2s var(--aurora-ease), background .2s var(--aurora-ease), border-color .2s var(--aurora-ease);
}
.aurora-footer__social a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.aurora-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; font-size: .75rem; color: var(--ink-soft);
}
/* `flex-wrap` y no `nowrap`: los cinco enlaces suman 289px + 4 huecos de 20 =
   369px dentro de un padre de 339, así que a 320px el último («Seguridad de
   pagos») terminaba en x=388 y arrastraba el DOCUMENTO ENTERO a 78px de scroll
   horizontal — medido, `scrollWidth 387` contra `clientWidth 309`. El pie vive
   en todas las páginas, así que el desborde era de todo el sitio, no del
   catálogo donde se vio. El hueco vertical baja a .5rem: envuelto, 1.25rem
   entre filas abre una zanja. */
.aurora-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
/* Mismo motivo que `.aurora-footer__nav a`: 24px no alcanza el piso de 44px
   de SC 2.5.8. Esta fila es la última de la página y la más pulsada con el
   pulgar en móvil. */
.aurora-footer__legal a {
  color: var(--ink-soft); text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; transition: color .2s var(--aurora-ease);
}
.aurora-footer__legal a:hover { color: var(--brand); }
/* Foco visible. Medido en navegador: de las 18 reglas `:focus-visible` del
   sitio, NINGUNA alcanzaba los enlaces del pie —ni con la estructura anterior—,
   así que quien navega con teclado los recorría a ciegas. Mismo anillo que usan
   el nav y los botones (`outline` de 2px, offset 2), para que el foco se vea
   igual en todo el storefront. */
.aurora-footer a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}
.aurora-footer__social a:focus-visible { border-radius: 50%; }
/* Sociales en dark: el hover con --brand (#a78bfa) dejaba el glifo blanco a
   ~2.7:1; --brand-hover (#7c3aed) mantiene >=3:1 para objetos gráficos. */
[data-theme="dark"] .aurora-footer__social a:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
@media (prefers-reduced-motion: reduce) {
  .aurora-footer__nav a, .aurora-footer__social a, .aurora-footer__legal a, .aurora-footer__id a { transition: none; }
}
@media (max-width: 720px) {
  /* El logo y las redes comparten fila; la navegación baja entera debajo, que
     a 375px son seis enlaces cortos en dos o tres filas. */
  .aurora-footer__top { gap: 1rem; }
  .aurora-footer__nav { order: 3; width: 100%; gap: .5rem 1.25rem; }
}
@media (max-width: 520px) {
  .aurora-footer--min { padding: 2rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px)); margin-top: 3rem; }
  .aurora-footer__social a { width: 44px; height: 44px; }
  .aurora-footer__base, .aurora-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ── De-slop: matar gradient-text (baneado) en todo el sitio ──
   .pl-text-gradient / .pl-stat-gradient usaban background-clip:text.
   Se reemplaza por color sólido morado en una sola regla global. */
.pl-text-gradient,
.pl-stat-gradient {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* ── Motion: reveal on scroll (estado oculto SOLO si JS vivo) ── */
html.aurora-ready [data-animate],
html.aurora-ready [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--aurora-ease), transform .7s var(--aurora-ease);
}
html.aurora-ready [data-animate].is-visible,
html.aurora-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Fallbacks de performance + accesibilidad (no negociables) ── */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong, .glass-flat, .aurora-chip, .glass-pill, .glass-chip, .aurora-modal-dialog {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--surface-1) !important;
  }
  .aurora-bg::before, .aurora-bg::after, .aurora-orb { display: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong, .aurora-chip, .glass-pill, .aurora-modal-dialog { background: var(--surface-1); }
  .glass-flat { background: var(--surface-2); }
}
@media (max-width: 767px) {
  /* iOS: blur fijo grande es caro al repintar; reduce intensidad */
  .glass, .glass-strong {
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
  }
  .aurora-bg::before, .aurora-bg::after { filter: blur(70px); }
}
@media (prefers-reduced-motion: reduce) {
  html.aurora-ready [data-animate],
  html.aurora-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-depth] { transform: none !important; }
  .aurora-orb, .aurora-bg::before, .aurora-bg::after { animation: none !important; }
}