/* voxon.cloud — componentes. Especificación en design/SPEC.md. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.47;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; }
a { color: var(--acento); }
h1, h2, h3 { text-wrap: balance; }
/* Con texto muy grande (Dynamic Type al 200 %), una palabra que no cabe se corta en vez de desbordar */
h1, h2, h3, p, li, dd, dt, th, td, label { overflow-wrap: break-word; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px; border-radius: var(--r-control);
  background: var(--acento-fondo); color: var(--sobre-acento); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: none; }

.contenedor { width: min(100% - 2 * max(16px, env(safe-area-inset-left)), 1080px); margin-inline: auto; }

/* ---------- Tipografía ---------- */
h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); line-height: 1.08; font-weight: 700; margin: 0 0 var(--e-5); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.12; font-weight: 700; margin: 0 0 var(--e-4); }
h3 { font-size: 1.1765rem; line-height: 1.25; font-weight: 600; }
.antetitulo { margin: 0 0 var(--e-2); font-size: 0.8824rem; font-weight: 600; color: var(--acento); }
.entradilla { margin: 0; max-width: 40rem; font-size: 1.1765rem; line-height: 1.4; color: var(--texto-2); }
.subtitulo { margin: var(--e-12) 0 var(--e-4); font-size: 1rem; font-weight: 600; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-6); border: 0; border-radius: var(--r-capsula);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--dur-micro) var(--ease-micro), filter 200ms var(--ease-smooth);
}
.boton:active { transform: scale(calc(1 - 0.03 * var(--motion-escala))); }
.boton:hover { filter: brightness(1.06); }
.boton--primario { background: var(--acento-fondo); color: var(--sobre-acento); }
.boton--secundario { background: var(--relleno); color: var(--acento); }
.boton--tinte {
  background: rgb(var(--lg-tinte) / 0.92); color: #ffffff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28);
}
.boton--compacto { min-height: 44px; padding: 0 var(--e-4); }
.boton--ancho { width: 100%; }
.boton[aria-busy="true"] { opacity: 0.7; cursor: progress; }
@media (prefers-contrast: more) {
  .boton--tinte { background: var(--acento-fondo); color: var(--sobre-acento); box-shadow: none; }
  .boton--secundario { box-shadow: inset 0 0 0 2px var(--acento); background: transparent; }
}

/* ---------- Liquid Glass (§9.10): una capa por nodo ---------- */
.lg { position: relative; isolation: isolate; border-radius: var(--lg-radio, 999px); }
.lg > [aria-hidden] { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lg__contenido { position: relative; }
.lg__sombra { box-shadow: var(--elevacion-flotante); }
.lg__vidrio {
  background: rgb(var(--lg-relleno) / var(--lg-opacidad));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.lg.con-refraccion { --lg-blur: 5px; --lg-opacidad: 0.5; }
.lg.con-refraccion .lg__vidrio {
  backdrop-filter: blur(var(--lg-blur)) url(#lg-refraccion) saturate(var(--lg-sat));
}
.lg__borde {
  padding: 1px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.1) 40%, rgb(255 255 255 / 0.3));
  -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 exclude, linear-gradient(#000 0 0);
}
.lg__brillo {
  opacity: var(--brillo, 0);
  background: radial-gradient(circle at var(--brillo-x, 50%) var(--brillo-y, 50%), rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 70%);
  mix-blend-mode: plus-lighter;
  transition: opacity 250ms var(--ease-smooth);
}
.lg--grueso { --lg-opacidad: 0.78; --lg-blur: 24px; --lg-radio: 28px; }
@media (prefers-color-scheme: dark) {
  .lg__borde { background: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.04) 40%, rgb(255 255 255 / 0.14)); }
}
@media (prefers-reduced-transparency: reduce) {
  .lg .lg__vidrio, .lg.con-refraccion .lg__vidrio {
    -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
    background: rgb(var(--lg-relleno) / 0.92);
  }
}
@media (prefers-contrast: more) {
  .lg .lg__vidrio, .lg.con-refraccion .lg__vidrio { -webkit-backdrop-filter: none; backdrop-filter: none; background: Canvas; }
  .lg__borde { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) { .lg__brillo { display: none; } }

/* ---------- Barra flotante y borde de scroll (§9.7, soft) ---------- */
.borde-scroll {
  position: fixed; inset: 0 0 auto 0; z-index: 9; height: calc(96px + env(safe-area-inset-top));
  pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease-smooth);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
          mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.con-scroll .borde-scroll { opacity: 1; }

.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 10; pointer-events: none;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.barra__pastilla { pointer-events: auto; max-width: 1080px; height: 60px; margin-inline: auto; --lg-radio: 30px; container-type: inline-size; }
/* Con texto muy grande no caben marca, «Hablemos» y menú: el menú y la portada ya llevan a Contacto */
@container (max-width: 19em) { .barra__fila > .boton { display: none; } .barra__menu { margin-left: auto; } }
.barra__fila { display: flex; align-items: center; gap: var(--e-2); height: 100%; padding: 0 8px 0 var(--e-4); }
.marca {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--texto); font-weight: 700; text-decoration: none;
}
.barra__enlaces { display: none; gap: var(--e-1); margin: 0 auto; padding: 0; list-style: none; }
.barra__enlaces a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-capsula); color: var(--texto); font-size: 0.9412rem; text-decoration: none;
  transition: background-color 200ms var(--ease-smooth);
}
.barra__enlaces a:hover { background: var(--relleno); }
.barra__fila > .boton { margin-left: auto; }
.barra__menu {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-capsula);
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.barra__menu-linea {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 1px; background: var(--texto);
  transition: transform var(--dur-snappy) var(--ease-snappy);
}
.barra__menu-linea:first-child { top: 17px; }
.barra__menu-linea:last-child { top: 25px; }
.barra__menu[aria-expanded="true"] .barra__menu-linea:first-child { transform: translateY(4px) rotate(45deg); }
.barra__menu[aria-expanded="true"] .barra__menu-linea:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 860px) {
  .barra__enlaces { display: flex; }
  .barra__menu { display: none; }
  .barra__fila > .boton { margin-left: 0; }
}

/* Menú móvil: nace del botón (origen arriba a la derecha) [§8.8, aproximación HEURÍSTICA] */
.menu-movil {
  position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 68px); right: max(16px, env(safe-area-inset-right));
  width: min(300px, 100% - 32px); pointer-events: auto; transform-origin: calc(100% - 30px) -20px;
  opacity: 0; transform: scale(calc(1 - 0.08 * var(--motion-escala)));
  transition: opacity 200ms var(--ease-smooth), transform var(--dur-snappy) var(--ease-snappy);
}
.menu-movil.abierto { opacity: 1; transform: none; }
.menu-movil__lista { margin: 0; padding: 8px; list-style: none; }
.menu-movil__lista li {
  opacity: 0; transform: translateY(calc(-6px * var(--motion-escala)));
  transition: opacity 250ms var(--ease-smooth), transform var(--dur-snappy) var(--ease-snappy);
}
.menu-movil.abierto li { opacity: 1; transform: none; }
.menu-movil.abierto li:nth-child(1) { transition-delay: 40ms; }
.menu-movil.abierto li:nth-child(2) { transition-delay: 58ms; }
.menu-movil.abierto li:nth-child(3) { transition-delay: 76ms; }
.menu-movil.abierto li:nth-child(4) { transition-delay: 94ms; }
.menu-movil__lista a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--e-4);
  border-radius: 20px; color: var(--texto); font-weight: 500; text-decoration: none;
}
.menu-movil__lista a:active { background: var(--relleno); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(64px, 9vw, 112px); }
.seccion--alterna { background: var(--fondo-2); }

.portada { padding: calc(132px + env(safe-area-inset-top)) 0 clamp(64px, 9vw, 112px); }
.portada__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-12); align-items: center; }
@media (min-width: 960px) { .portada__rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-8); }

.tarjeta { background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: var(--elevacion-2); }

/* Ticket de ejemplo */
.ticket { justify-self: center; width: 100%; max-width: 420px; margin: 0; padding: var(--e-6); box-shadow: var(--elevacion-3); font-variant-numeric: tabular-nums; container-type: inline-size; }
.ticket__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-4); border-bottom: 1px dashed var(--borde); font-weight: 600; }
/* Con texto muy grande, cada línea se apila: concepto arriba, monto abajo */
@container (max-width: 16em) {
  .ticket tr { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .ticket th, .ticket td { flex: 1 1 100%; }
  .ticket td { padding-top: 0; padding-left: 0; }
}
.etiqueta { padding: 2px 10px; border-radius: var(--r-capsula); background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); font-size: 0.7647rem; font-weight: 600; }
.ticket table { width: 100%; border-collapse: collapse; }
.ticket th { padding: 6px 0; font-weight: 400; text-align: left; }
.ticket td { padding: 6px 0 6px var(--e-3); text-align: right; white-space: nowrap; }
.ticket__lineas { margin-top: var(--e-3); }
.ticket__totales { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px dashed var(--borde); color: var(--texto-2); }
.ticket__totales tr:first-child th, .ticket__totales tr:first-child td { padding-top: var(--e-4); }
.ticket__total th, .ticket__total td { padding-top: var(--e-3); color: var(--texto); font-size: 1.1765rem; font-weight: 700; }
.ticket__pie { margin-top: var(--e-4); color: var(--texto-2); font-size: 0.7647rem; text-align: center; }

/* Modos, reglas, apps, trabajos */
.modos, .trabajos {
  display: grid; gap: var(--e-4); margin: var(--e-10) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.trabajos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.modo, .trabajo { padding: var(--e-6); }
.modo h3, .trabajo h3 { margin: var(--e-4) 0 var(--e-2); }
.trabajo h3 { margin-top: 0; }
.modo p, .trabajo p { margin: 0; color: var(--texto-2); }
.trabajo .trabajo__tecnologias { margin-top: var(--e-4); font-size: 0.8824rem; }
a.trabajo { display: block; color: inherit; text-decoration: none; transition: transform var(--dur-micro) var(--ease-micro); }
a.trabajo:active { transform: scale(calc(1 - 0.03 * var(--motion-escala))); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.chip { padding: 6px 14px; border-radius: var(--r-capsula); background: var(--relleno); font-size: 0.8824rem; }

.reglas {
  display: grid; gap: var(--e-8) var(--e-6); margin: var(--e-10) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.regla h3 { margin: var(--e-3) 0 var(--e-1); font-size: 1rem; }
.regla p { margin: 0; color: var(--texto-2); }

.apps { display: grid; gap: var(--e-4); margin: var(--e-10) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .apps { grid-template-columns: 1fr 1fr; } }
.app { display: flex; flex-direction: column; padding: var(--e-8); }
.app h3 { margin: var(--e-4) 0 var(--e-2); font-size: 1.2941rem; }
.app p { margin: 0; color: var(--texto-2); }
.app .app__plataformas { margin-top: auto; padding-top: var(--e-6); font-size: 0.8824rem; }

/* ---------- Planes: control segmentado (momento firma) ---------- */
#planes .contenedor > .antetitulo, #planes .contenedor > h2 { text-align: center; }
#planes .contenedor > .entradilla { margin-inline: auto; text-align: center; }
.segmentado {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 440px; margin: var(--e-10) auto var(--e-6); padding: 4px;
  border-radius: var(--r-capsula); background: var(--relleno);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.segmentado__opcion {
  position: relative; z-index: 1; min-height: 44px; padding: 0; border: 0; border-radius: var(--r-capsula);
  background: transparent; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.segmentado__pomo {
  position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: calc((100% - 8px) / 4);
  border-radius: var(--r-capsula); background: var(--pomo); box-shadow: var(--elevacion-2);
  will-change: transform; transition: background-color 200ms var(--ease-smooth), box-shadow 200ms var(--ease-smooth);
}
/* Al tocarlo, el pomo "se eleva" a Liquid Glass [APPLE] */
.segmentado.presionado .segmentado__pomo {
  background: rgb(var(--lg-relleno) / 0.3);
  -webkit-backdrop-filter: blur(4px) saturate(1.8); backdrop-filter: blur(4px) saturate(1.8);
  box-shadow: var(--elevacion-flotante), inset 0 0 0 1px rgb(255 255 255 / 0.55);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .segmentado.presionado .segmentado__pomo { background: var(--pomo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) { .segmentado__pomo { box-shadow: inset 0 0 0 2px var(--texto); } }

.plan { max-width: 760px; min-height: 28rem; margin: 0 auto; padding: var(--e-8); }
.plan__nombre { margin: 0; font-size: 1.6471rem; }
.plan__lema { margin: var(--e-1) 0 0; color: var(--texto-2); }
.plan__limites { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); margin: var(--e-6) 0; }
@media (min-width: 640px) { .plan__limites { grid-template-columns: repeat(4, 1fr); } }
.plan__limites div { padding: var(--e-3) 14px; border-radius: 12px; background: var(--fondo-2); }
.plan__limites dt { color: var(--texto-2); font-size: 0.7647rem; }
.plan__limites dd { margin: 2px 0 0; font-size: 1.2941rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan__incluye { margin: 0; font-size: 1rem; }
.plan__funciones { margin: var(--e-3) 0 0; padding: 0; list-style: none; columns: 2 240px; column-gap: var(--e-6); }
.plan__funciones li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; break-inside: avoid; }
.plan__funciones .icono { flex: none; width: 20px; height: 20px; margin-top: 2px; background: var(--exito); }
.plan__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4);
  margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--borde);
}
.plan__precio { margin: 0; color: var(--texto-2); }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: var(--e-10); }
@media (min-width: 960px) { .contacto { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.contacto__tarjeta { padding: var(--e-8); }
.campo { display: grid; gap: 6px; margin-bottom: var(--e-5); }
.campo label { font-size: 0.9412rem; font-weight: 600; }
.opcional { color: var(--texto-2); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--borde-control); border-radius: var(--r-control);
  background: var(--fondo); color: var(--texto); font: inherit;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.campo__error { margin: 0; color: var(--error); font-size: 0.8824rem; }
.campo--trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario__privacidad { margin: var(--e-3) 0 0; color: var(--texto-2); font-size: 0.7647rem; text-align: center; }
.formulario__estado { margin: var(--e-2) 0 0; color: var(--error); font-size: 0.8824rem; text-align: center; }
.formulario__estado:empty { display: none; }
.enviado { padding: var(--e-8) 0; text-align: center; }
.enviado:focus { outline: none; }
.enviado .icono { width: 48px; height: 48px; background: var(--exito); }
.enviado h3 { margin: var(--e-4) 0 var(--e-2); font-size: 1.2941rem; }
.enviado p { margin: 0; color: var(--texto-2); }

/* ---------- Página 404 ---------- */
.error { display: grid; justify-items: center; gap: var(--e-4); min-height: 100vh; align-content: center; padding-block: var(--e-16); text-align: center; }
.error h1 { margin: var(--e-4) 0 0; }
.error .entradilla { margin-bottom: var(--e-4); }

/* ---------- Pie ---------- */
.pie { padding: var(--e-8) 0 calc(var(--e-8) + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); color: var(--texto-2); font-size: 0.8824rem; }
.pie__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.marca--pie { color: var(--texto); font-size: 0.9412rem; min-height: 0; }

/* ---------- Entradas (§7.7): solo con JS; con Reduce Motion queda el fundido ---------- */
@keyframes aparecer { from { opacity: 0; transform: translateY(calc(12px * var(--motion-escala))); } }
.js .aparece { animation: aparecer var(--dur-smooth) var(--ease-smooth) both; }
.js .aparece:nth-child(2) { animation-delay: 30ms; }
.js .aparece:nth-child(3) { animation-delay: 60ms; }
.js .aparece:nth-child(4) { animation-delay: 90ms; }
.js .portada .ticket.aparece { animation-delay: 120ms; }
.js .revelar { transition: opacity 500ms var(--ease-smooth), transform var(--dur-smooth) var(--ease-smooth); transition-delay: calc(var(--i, 0) * 30ms); }
.js .revelar:not(.visible) { opacity: 0; transform: translateY(calc(12px * var(--motion-escala))); }

@media print {
  .js .aparece, .js .revelar:not(.visible) { animation: none; opacity: 1; transform: none; }
  .barra, .borde-scroll { display: none; }
}

/* Panel del plan: reemplazo con blur (§8.6) */
.plan.saliendo { opacity: 0; filter: blur(6px); transform: scale(calc(1 - 0.02 * var(--motion-escala))); transition: opacity 150ms var(--ease-smooth), filter 150ms var(--ease-smooth), transform 150ms var(--ease-smooth); }
@media (prefers-reduced-motion: reduce) { .plan.saliendo { filter: none; } }

/* ---------- Iconos (máscaras SVG propias; trazo 1.75) ---------- */
.icono { display: inline-block; width: 28px; height: 28px; background: var(--acento); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.icono--supermarket { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20.5 8H6.2'/%3E%3Ccircle cx='9' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%3E%3C/svg%3E"); }
.icono--colmado { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9 5.5 4h13l2 5z'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.icono--restaurant { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v5a2 2 0 0 0 4 0V3M8 3v18'/%3E%3Cpath d='M17 21V3c-1.7 0-3 2.4-3 6v4h3'/%3E%3C/svg%3E"); }
.icono--store { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5V4a1 1 0 0 1 1-1h8.5l8.5 8.5-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.icono--itbis { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E"); }
.icono--propina { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.icono--fiao { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h11a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6z'/%3E%3Cpath d='M9 3v18M12 8h4M12 12h4'/%3E%3C/svg%3E"); }
.icono--ncf { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
.icono--formatos { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M10 10v10'/%3E%3C/svg%3E"); }
.icono--caja { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.icono--v360 { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E"); }
.icono--pos { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M11 17.5h2'/%3E%3C/svg%3E"); }
.icono--check { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.icono--enviado { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E"); }