/**
 * AxA Vertical Sites — Micrositios verticales sobre el catálogo de AxA (axa_verticalsites)
 *
 * Hoja de estilos del micrositio.
 *
 * AISLAMIENTO: todo va con prefijo .axa-vs-. No hay ni un selector de elemento
 * suelto (div, a, button, h1) ni un solo !important. El micrositio no debe poder
 * romper a AxA, y un cambio de theme no debe poder romper al micrositio.
 *
 * MOBILE FIRST: las reglas base son las del teléfono; las media queries solo
 * agregan. Probado desde 320 px.
 *
 * Código 100% propio de AxA Computación.
 *
 * @author    Aníbal Adrián Vidal
 * @copyright 2026 AxA Computación
 * @license   Propietaria
 */

.axa-vs {
  /* El acento lo inyecta el vertical desde su configuración; el resto de la
     paleta es fija para mantener el contraste verificado. */
  --axa-vs-accent: #d92b2b;

  --axa-vs-bg: #0a0d13;
  --axa-vs-bg-alt: #0f141d;
  --axa-vs-surface: #151b26;
  --axa-vs-surface-2: #1c2432;
  --axa-vs-line: #262f3f;
  --axa-vs-text: #eaeff8;
  --axa-vs-muted: #94a2ba;
  --axa-vs-ok: #35c46e;
  --axa-vs-warn: #f0a132;

  --axa-vs-radius: 14px;
  --axa-vs-gap: 16px;
  --axa-vs-maxw: 1200px;

  box-sizing: border-box;
  margin: 0;
  background: var(--axa-vs-bg);
  color: var(--axa-vs-text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Cinturón contra el overflow horizontal: ninguna tarjeta o tabla ancha debe
     poder hacer scrollear el documento entero. */
  overflow-x: hidden;
}

.axa-vs *,
.axa-vs *::before,
.axa-vs *::after {
  box-sizing: inherit;
}

/* ---------------------------------------------------------------- layout -- */

.axa-vs-wrap {
  width: 100%;
  max-width: var(--axa-vs-maxw);
  margin-inline: auto;
  padding-inline: 16px;
}

.axa-vs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--axa-vs-accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  z-index: 100;
}

.axa-vs-skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------- header -- */

.axa-vs-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--axa-vs-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--axa-vs-line);
}

.axa-vs-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.axa-vs-brand {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  color: inherit;
  line-height: 1.15;
}

.axa-vs-brand em {
  font-style: normal;
  color: var(--axa-vs-accent);
}

.axa-vs-brand small {
  font-size: 10px;
  font-weight: 600;
  color: var(--axa-vs-muted);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* El alto lo fija el vertical (configurable); el ancho acompaña. El tope de
   ancho evita que un logo apaisado desplace la navegación en pantallas chicas. */
.axa-vs-logo {
  display: block;
  width: auto;
  max-width: min(70vw, 440px);
  object-fit: contain;
}

/* La navegación por anclas scrollea en horizontal dentro de su propia caja en
   pantallas chicas, en vez de desbordar la página. */
.axa-vs-nav {
  display: none;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.axa-vs-nav::-webkit-scrollbar {
  display: none;
}

.axa-vs-navlink {
  color: var(--axa-vs-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.axa-vs-navlink:hover,
.axa-vs-navlink:focus-visible {
  color: var(--axa-vs-text);
  border-bottom-color: var(--axa-vs-accent);
}

.axa-vs-header-cta {
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .axa-vs-nav { display: flex; }
}

/* ------------------------------------------------------------------ hero -- */

.axa-vs-hero {
  position: relative;
  padding-block: 44px 32px;
  background:
    radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--axa-vs-accent) 16%, transparent) 0%, transparent 60%),
    var(--axa-vs-bg-alt);
  border-bottom: 1px solid var(--axa-vs-line);
}

.axa-vs-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--axa-vs-accent) 55%, var(--axa-vs-line));
  border-radius: 999px;
  color: var(--axa-vs-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.axa-vs-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.axa-vs-hero p {
  margin: 0;
  color: var(--axa-vs-muted);
  font-size: clamp(15px, 2.4vw, 18px);
  max-width: 56ch;
  text-wrap: pretty;
}

.axa-vs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .axa-vs-hero { padding-block: 72px 56px; }
}

/* --------------------------------------------------------------- botones -- */

.axa-vs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44 px de alto mínimo: objetivo táctil accesible. */
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, border-color .15s ease;
}

.axa-vs-btn--primary {
  background: var(--axa-vs-accent);
  color: #fff;
}

.axa-vs-btn--primary:hover,
.axa-vs-btn--primary:focus-visible {
  filter: brightness(1.12);
}

.axa-vs-btn--ghost {
  background: transparent;
  border-color: var(--axa-vs-line);
  color: var(--axa-vs-text);
}

.axa-vs-btn--ghost:hover,
.axa-vs-btn--ghost:focus-visible {
  border-color: var(--axa-vs-accent);
}

.axa-vs-btn--block {
  width: 100%;
}

/* -------------------------------------------------------------- secciones -- */

.axa-vs-section {
  padding-block: 36px;
  /* Compensa el header pegajoso al saltar por ancla. */
  scroll-margin-top: 76px;
}

.axa-vs-section:nth-of-type(even) {
  background: var(--axa-vs-bg-alt);
}

.axa-vs-section-head {
  margin-bottom: 20px;
}

.axa-vs-section-title {
  margin: 0 0 4px;
  font-size: clamp(21px, 4vw, 28px);
  letter-spacing: -.01em;
}

.axa-vs-section-sub {
  margin: 0;
  color: var(--axa-vs-muted);
  font-size: 14px;
}

/* --------------------------------------------------------------- filtros -- */

.axa-vs-filters {
  margin-bottom: 20px;
  border: 1px solid var(--axa-vs-line);
  border-radius: var(--axa-vs-radius);
  background: var(--axa-vs-surface);
  padding: 14px 16px;
}

.axa-vs-search {
  margin-bottom: 14px;
}

.axa-vs-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--axa-vs-line);
  border-radius: 10px;
  background: var(--axa-vs-surface-2);
  color: var(--axa-vs-text);
  font: inherit;
}

.axa-vs-search-input::placeholder {
  color: var(--axa-vs-muted);
}

.axa-vs-search-input:focus-visible {
  border-color: color-mix(in srgb, var(--axa-vs-accent) 60%, var(--axa-vs-line));
}

.axa-vs-filters-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.axa-vs-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.axa-vs-legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--axa-vs-muted);
}

.axa-vs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axa-vs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--axa-vs-line);
  border-radius: 999px;
  background: var(--axa-vs-surface-2);
  color: var(--axa-vs-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.axa-vs-chip:hover {
  border-color: color-mix(in srgb, var(--axa-vs-accent) 60%, var(--axa-vs-line));
}

/* El input real queda accesible para el teclado y los lectores de pantalla,
   solo se oculta visualmente. */
.axa-vs-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.axa-vs-chip:has(input:checked) {
  background: var(--axa-vs-accent);
  border-color: var(--axa-vs-accent);
  color: #fff;
}

.axa-vs-chip:has(input:focus-visible) {
  outline: 2px solid var(--axa-vs-accent);
  outline-offset: 2px;
}

.axa-vs-chip-count {
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.axa-vs-filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--axa-vs-line);
  font-size: 13px;
  color: var(--axa-vs-muted);
}

@media (min-width: 640px) {
  .axa-vs-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .axa-vs-filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- tarjetas -- */

.axa-vs-grid {
  display: grid;
  gap: var(--axa-vs-gap);
  /* Una sola columna hasta 380 px: a 320 px dos columnas dejarían las tarjetas
     ilegibles. */
  grid-template-columns: 1fr;
}

@media (min-width: 380px) {
  .axa-vs-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}

@media (min-width: 768px) {
  .axa-vs-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}

.axa-vs-card {
  display: flex;
  flex-direction: column;
  background: var(--axa-vs-surface);
  border: 1px solid var(--axa-vs-line);
  border-radius: var(--axa-vs-radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}

.axa-vs-card:hover {
  border-color: color-mix(in srgb, var(--axa-vs-accent) 45%, var(--axa-vs-line));
  transform: translateY(-2px);
}

.axa-vs-card[hidden] {
  display: none;
}

.axa-vs-media {
  position: relative;
  background: #fff;
}

/* aspect-ratio + width/height en el <img> evitan el salto de layout (CLS)
   mientras carga la imagen. */
.axa-vs-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.axa-vs-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.axa-vs-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

.axa-vs-badge--sale { background: var(--axa-vs-accent); }
.axa-vs-badge--new { background: var(--axa-vs-ok); color: #06210f; }

.axa-vs-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  flex: 1;
}

.axa-vs-card-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--axa-vs-muted);
}

.axa-vs-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  /* Tres líneas como máximo: sin esto, un nombre largo descuadra la fila entera. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Las referencias de producto traen cadenas sin espacios ("SSD M.2 1TB-PC14A")
     que a 320 px desbordarían la tarjeta. */
  overflow-wrap: break-word;
}

.axa-vs-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--axa-vs-muted);
}

.axa-vs-specs li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  /* min-width:0 es obligatorio: sin él un hijo de flex no baja de su ancho de
     contenido, y nombres como "Placa de Video MSI GeForce RTX 3050 VENTUS 2X 6G
     OC 6GB GDDR6" desbordan la tarjeta en pantallas de 320-390 px. */
  min-width: 0;
  overflow-wrap: break-word;
}

.axa-vs-specs li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--axa-vs-line);
  flex-shrink: 0;
  /* La viñeta se alinea con la primera línea del texto, no con su línea base. */
  transform: translateY(-2px);
}

.axa-vs-spec--gpu {
  color: var(--axa-vs-ok);
  font-weight: 700;
}

.axa-vs-spec--gpu::before {
  background: var(--axa-vs-ok);
}

.axa-vs-stock {
  /* Ancla el bloque inferior (disponibilidad + precios + botón) al fondo de la
     tarjeta: "Disponible" queda SIEMPRE a la misma altura, encima del precio, sin
     importar cuántas líneas ocupen el nombre o las specs. */
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
}

.axa-vs-stock--in { color: var(--axa-vs-ok); }
.axa-vs-stock--out { color: var(--axa-vs-muted); }

.axa-vs-prices {
  /* Reserva la altura de dos líneas (precio anterior tachado + actual) aunque la
     tarjeta no tenga descuento, y apoya el contenido abajo: así "Disponible" y el
     precio actual quedan alineados en toda la fila, haya o no precio tachado. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 52px;
  padding-top: 4px;
}

.axa-vs-price-before {
  display: block;
  font-size: 13px;
  color: var(--axa-vs-muted);
  text-decoration: line-through;
}

.axa-vs-card-price {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Las cuotas no llevan estilos propios aca: el pill de axacuotas esta DISENADO
   para flotar sobre la miniatura, y el slot del template es su .axc-list-wrapper
   oficial (la misma insercion que hace el scanner del modulo en el theme),
   anclado a .axa-vs-media, que ya es position:relative. Al ser una capa
   superpuesta, el AJAX que lo completa no mueve nada del layout. */

.axa-vs-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------------------------------------------------------------- varios -- */

.axa-vs-empty {
  padding: 28px;
  border: 1px dashed var(--axa-vs-line);
  border-radius: var(--axa-vs-radius);
  color: var(--axa-vs-muted);
  text-align: center;
}

.axa-vs-prose {
  max-width: 70ch;
  color: var(--axa-vs-muted);
}

/* El texto editorial usa h3/p simples; los títulos van en el color pleno para
   que la jerarquía se lea también en el fondo oscuro. */
.axa-vs-prose h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  color: var(--axa-vs-text);
}

.axa-vs-prose h3:first-child {
  margin-top: 0;
}

.axa-vs-prose p {
  margin: 0 0 12px;
}

.axa-vs-prose ul {
  margin: 0 0 12px;
  padding-left: 18px;
}

.axa-vs-benefits {
  display: grid;
  gap: var(--axa-vs-gap);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.axa-vs-benefit {
  padding: 18px;
  border: 1px solid var(--axa-vs-line);
  border-radius: var(--axa-vs-radius);
  background: var(--axa-vs-surface);
}

.axa-vs-benefit strong {
  display: block;
  margin-bottom: 4px;
}

.axa-vs-benefit span {
  color: var(--axa-vs-muted);
  font-size: 14px;
}

@media (min-width: 640px) {
  .axa-vs-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .axa-vs-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.axa-vs-cta-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--axa-vs-line);
  border-radius: var(--axa-vs-radius);
  background:
    radial-gradient(100% 140% at 100% 0%, color-mix(in srgb, var(--axa-vs-accent) 14%, transparent) 0%, transparent 65%),
    var(--axa-vs-surface);
}

.axa-vs-cta-panel p {
  margin: 0;
  color: var(--axa-vs-muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------- footer -- */

.axa-vs-footer {
  border-top: 1px solid var(--axa-vs-line);
  padding-block: 28px 44px;
  color: var(--axa-vs-muted);
  font-size: 13.5px;
}

.axa-vs-footer-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.axa-vs-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.axa-vs-footer a {
  color: var(--axa-vs-muted);
  text-decoration: none;
}

.axa-vs-footer a:hover,
.axa-vs-footer a:focus-visible {
  color: var(--axa-vs-text);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .axa-vs-footer-grid { grid-template-columns: 2fr 1fr; align-items: start; }
}

/* Identificación fiscal del vendedor + badge Data Fiscal de AFIP. */
.axa-vs-legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--axa-vs-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  font-size: 12.5px;
  line-height: 1.5;
}

.axa-vs-legal-data p {
  margin: 0;
}

.axa-vs-datafiscal {
  flex-shrink: 0;
}

.axa-vs-datafiscal img {
  display: block;
  height: auto;
  border: 0;
}

/* --------------------------------------------------------- diagnóstico --- */

.axa-vs-diag {
  margin-block: 32px;
  border: 1px solid var(--axa-vs-line);
  border-radius: var(--axa-vs-radius);
  /* El scroll queda dentro de la tabla, nunca en el body. */
  overflow-x: auto;
}

.axa-vs-diag table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.axa-vs-diag th,
.axa-vs-diag td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--axa-vs-line);
  vertical-align: top;
}

.axa-vs-diag th {
  color: var(--axa-vs-muted);
  font-weight: 600;
  white-space: nowrap;
}

.axa-vs-diag td {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

/* ------------------------------------------------- accesibilidad global -- */

.axa-vs :focus-visible {
  outline: 2px solid var(--axa-vs-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.axa-vs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .axa-vs *,
  .axa-vs *::before,
  .axa-vs *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
    scroll-behavior: auto;
  }
}