/* ==========================================================================
   responsive.css — capa de responsive para tablet/móvil
   El sitio se construyó 100% con estilos inline y anchos fijos en px, más un
   sistema propio (JS) que auto-escala cada página completa con
   transform:scale() para que nunca desborde (ver updateScale() en cada
   <script type="text/x-dc">). Ese auto-escalado se dejó intacto para
   pantallas grandes, pero por debajo de 1024px cada página ahora fija
   scale:1 y deja que el contenido reordene de verdad en vez de encogerse
   proporcionalmente (lo que lo volvía diminuto e imposible de tocar).

   Este archivo complementa esos estilos inline con overrides !important
   dentro de @media — la única forma de ganarle a la especificidad de un
   style="" inline sin reescribir cada página a mano.

   Las clases tw-* las agrega un script una sola vez sobre los elementos que
   las necesitan (nav, canvases, filas de 2 columnas, decoración, anchos
   fijos). No dependen del texto exacto del style="": React reformatea todo
   estilo inline al renderizar (ej. "width:640px" en el HTML fuente se
   vuelve "width: 640px" en el DOM real, "margin:0 auto" se vuelve
   "margin: 0px auto"), así que un selector [style*="width:640px"] SIN
   espacio no matchea nada en el navegador real — solo en el HTML crudo que
   ve un bot sin JS. Por eso lo estructural va por clase; los selectores
   [style*=...] que quedan abajo solo matchean sobre VALORES sueltos
   (números+unidad, ej. "200px"), que no cambian con el reformateo.

   Si una página puntual se ve mal, lo correcto es agregar la clase que
   falte en su HTML, no inventar un selector [style*=...] nuevo.

   Convención de breakpoints: ≤1024px = tablet, ≤640px = móvil.
   ========================================================================== */

/* ---------- Base: nunca debe haber scroll horizontal ---------- */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ---------- Menú móvil (checkbox-hack, sin JS) ----------
   El markup (checkbox + label + panel) se inyecta una vez por página, justo
   después del logo del nav. Desktop no lo ve (display:none); en tablet/móvil
   reemplaza al menú de escritorio (.tw-desktop-nav, oculto más abajo). */
.tw-nav-toggle-input { display: none; }
.tw-nav-toggle-label {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  position: relative; z-index: 300;
}
.tw-nav-toggle-label span {
  position: absolute; left: 8px; width: 24px; height: 2px;
  background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.tw-nav-toggle-label span:nth-child(1) { top: 14px; }
.tw-nav-toggle-label span:nth-child(2) { top: 20px; }
.tw-nav-toggle-label span:nth-child(3) { top: 26px; }
.tw-nav-toggle-input:checked ~ .tw-nav-toggle-label span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tw-nav-toggle-input:checked ~ .tw-nav-toggle-label span:nth-child(2) { opacity: 0; }
.tw-nav-toggle-input:checked ~ .tw-nav-toggle-label span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.tw-mobile-nav-panel {
  display: none;
  position: fixed; left: 0; right: 0; top: 85px; bottom: 0;
  background: rgb(0,0,37);
  z-index: 250;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 40px;
  box-sizing: border-box;
  overflow-y: auto;
}
.tw-mobile-nav-panel a {
  color: #fff; font-size: 18px; font-weight: 500; text-decoration: none;
  padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
  display: block;
}
.tw-nav-toggle-input:checked ~ .tw-mobile-nav-panel { display: flex; }

@media (max-width: 1024px) {
  .tw-nav-toggle-label { display: flex; }
  .tw-desktop-nav { display: none !important; }

  /* Barra del nav (ancho fijo 1520px, en las 2 variantes de plantilla) -> fluida.
     BUG REAL encontrado el 2026-08-28 (reportado por el usuario con capturas):
     en la plantilla vieja (Shopify/Woo/E-commerce y afines) el nav es
     position:absolute (top:45px) DENTRO del mismo .tw-hero-canvas que el
     contenido del hero -- que también es position:absolute (top:280px) y por
     eso nunca chocan en escritorio (cada uno a su propia altura). Pero
     .tw-stack-row (la regla de abajo) pasa el contenido del hero a
     position:relative para poder apilarlo -- eso lo mete al flujo normal del
     documento, y como el nav SIGUE en position:absolute (position:absolute
     no reserva espacio en el flujo), el contenido del hero arranca desde
     arriba de todo, tapando/tapado por el nav que sigue "flotando" en su
     top:45px original. En la plantilla nueva (home, etc.) el nav YA es
     position:relative en escritorio, así que nunca tuvo este problema --
     por eso no apareció en las páginas que se probaron primero. Fix: forzar
     también el nav a position:relative (no rompe nada donde ya lo era) para
     que quede en el flujo normal ANTES del contenido del hero, sin
     necesidad de coordenadas mágicas. */
  .tw-nav-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100% - 40px) !important;
    margin: 0 auto 32px !important;
  }
}

/* ---------- Elementos puramente decorativos (glows, grid de fondo) ---------- */
@media (max-width: 1024px) {
  .tw-decor { display: none !important; }
  .float-card { display: none !important; }
  .float-circle { display: none !important; }
  .tw-visual-mockup { display: none !important; }
}

/* ---------- .tw-hero-scene-clip / .tw-hero-scene-clip-landing nunca tuvieron base para desktop ----------
   Reportado por el usuario con captura a ancho de escritorio real: el mockup del hero
   (Home) se veía pegado sin margen contra el borde derecho, con las tarjetas flotantes
   cortadas, y un espacio en blanco raro debajo. Mismo patrón que el bug del footer
   (.tw-footer-links-grid) de esta misma sesión: el wrapper solo tiene reglas dentro de
   @media(max-width:1024px) más abajo, nunca una regla base para >1024px.

   Antes de que este wrapper existiera, .tw-hero-visual-col era HIJO DIRECTO de
   .tw-stack-row (display:flex) y su propio inline `flex:1 1 0%` lo hacía crecer para
   llenar el espacio junto a la columna de texto. Al envolverlo en .tw-hero-scene-clip
   (para el fix de escalado en tablet/móvil, ver más abajo), pasó a ser NIETO en vez de
   hijo directo -- a >1024px, .tw-hero-scene-clip mismo es ahora el hijo directo del
   flex row, pero como NO tiene su propio flex:1 ni ancho explícito, cae al default de
   un item flex (flex:0 1 auto) con contenido intrínseco 0 (todos sus descendientes son
   position:absolute) -- se encoge a width:0, y todo lo que hay adentro (mockup +
   tarjetas) se pinta fuera de esa caja de 0px, pegado sin margen al borde derecho real
   del viewport en vez de al borde de su columna.

   Fix: display:contents en el wrapper -- lo saca por completo del modelo de caja (no
   aporta su propia caja), así .tw-hero-visual-col vuelve a comportarse como si fuera
   hijo directo de .tw-stack-row, exactamente igual que antes de que el wrapper
   existiera. La regla @media(max-width:1024px) de abajo lo sigue sobreescribiendo a
   display:flex igual (para centrar/recortar la composición ya escalada), así que el
   fix de tablet/móvil no se toca. */
.tw-hero-scene-clip, .tw-hero-scene-clip-landing { display: contents; }

/* ---------- Excepción: mockup de tienda del hero (home) -> escalar, no ocultar ----------
   Encontrado el 2026-08-29 al revisar el pedido de "no ocultes contenido importante para
   solucionar responsive": el mockup principal del hero de Home (ventana de navegador con
   la tienda -- "New In", categorías, banner, cuotas/envíos, tiles de producto) y las
   tarjetas flotantes reales que lo acompañan (chaqueta, promo de zapatilla, selector de
   talles, banner de envío gratis) comparten la clase .float-card con las burbujas
   puramente decorativas (chat, notificación) -- la regla de arriba las ocultaba TODAS por
   igual, dejando el hero de Home sin ningún mockup visible en tablet/móvil. El pedido
   explícito del usuario es mantener este mockup como una composición visual escalada, no
   ocultarlo ni desarmarlo. .tw-hero-scene-clip (wrapper agregado en el HTML, envuelve a
   .tw-hero-visual-col) reactiva sus .float-card (con el display original: block por
   defecto, flex donde el propio inline style lo pide) y la sección de más abajo escala
   toda la composición como una sola unidad. */
@media (max-width: 1024px) {
  .tw-hero-scene-clip .float-card { display: block !important; }
  .tw-hero-scene-clip .float-card[style*="display:flex"],
  .tw-hero-scene-clip .float-card[style*="display: flex"] { display: flex !important; }
}

/* ---------- Escalar el mockup de tienda del hero (home) como una sola composición ----------
   .tw-hero-visual-col es un lienzo de coordenadas absolutas fijas (~820x605px nativos)
   -- la ventana de navegador con la tienda + 4-5 tarjetas flotantes de producto alrededor,
   todo posicionado unos respecto a otros para formar una escena. Reflowar cada pieza por
   separado la desarmaría (exactamente lo que el usuario pidió evitar); en cambio, se fija
   el lienzo a su tamaño nativo y se encoge COMO UNIDAD con transform:scale -- el wrapper
   .tw-hero-scene-clip (flex + justify-content:center + overflow:hidden) centra el lienzo
   sin ancho fijo propio y recorta visualmente solo el margen que el scale ya no ocupa (no
   hay contenido real ahí, así que no se pierde nada). El margin-bottom negativo compensa
   el hueco que el layout (que no se achica con transform) dejaría debajo del lienzo ya
   encogido -- sin esto, el resto de la página quedaría con un espacio vacío del tamaño
   del lienzo sin escalar. Dos niveles de escala (tablet más grande, móvil más chico) igual
   que el resto del sistema. */
@media (max-width: 1024px) {
  .tw-hero-scene-clip { width: 100%; overflow: hidden; display: flex; justify-content: center; }
  /* Selector con 2 clases (más específico que el .tw-hero-visual-col de una sola clase,
     compartido con Landing page, que usa SU PROPIO wrapper .tw-hero-scene-clip-landing
     más abajo -- ver esa sección: el mockup AUREVIA de Landing page tenía el mismo bug,
     encontrado el 2026-08-30 con captura real del usuario) -- así esta regla gana sin
     importar el orden de aparición en el archivo.
     flex:none!important es necesario acá (no alcanza con ponerlo solo en .tw-hero-scene-clip
     vía la regla existente ".tw-stack-row > *") -- el wrapper nuevo hizo que
     .tw-hero-visual-col deje de ser hijo DIRECTO de .tw-stack-row (ahora es nieto), así
     que el combinador ">" de esa regla ya no lo alcanza y vuelve a caer en su flex:1
     inline original (flex-basis:0%, se encogía al ancho del wrapper en vez de sus
     820px fijos). */
  .tw-hero-scene-clip .tw-hero-visual-col {
    width: 820px !important;
    height: 605px !important;
    flex: none !important;
    transform: scale(0.8);
    transform-origin: top center;
    margin: 16px 0 -121px !important;
  }
}
@media (max-width: 640px) {
  .tw-hero-scene-clip .tw-hero-visual-col {
    transform: scale(0.4);
    margin: 16px 0 -363px !important;
  }
}

/* ---------- Mismo problema en Landing page: mockup AUREVIA fuera de su caja ----------
   Encontrado el 2026-08-30 con captura real del usuario: el mockup AUREVIA (ventana de
   navegador con una landing de bienes raíces + varias tarjetas flotantes de producto)
   se veía enorme y se superponía con la sección de abajo. Landing page comparte la
   clase .tw-hero-visual-col con Home, pero acá SÍ tiene contenido real (a diferencia de
   los otros 8 wrappers "hero visual" del sitio, que solo tenían float-card decorativos ya
   ocultos) -- mismo bug de fondo que Home: el contenedor queda en height:0 (sus hijos son
   position:absolute, no aportan altura) pero el float-card visible sigue pintándose fuera
   de esa caja de 0px, encima del contenido siguiente. Wrapper propio
   .tw-hero-scene-clip-landing (no reutiliza .tw-hero-scene-clip de Home -- cada uno
   necesita su propio tamaño de lienzo nativo, 830x665 acá contra 820x605 en Home) con el
   mismo tratamiento: escalar como una sola composición en vez de ocultar o reflowar. */
@media (max-width: 1024px) {
  .tw-hero-scene-clip-landing .float-card { display: block !important; }
  .tw-hero-scene-clip-landing .float-card[style*="display:flex"],
  .tw-hero-scene-clip-landing .float-card[style*="display: flex"] { display: flex !important; }
  .tw-hero-scene-clip-landing { width: 100%; overflow: hidden; display: flex; justify-content: center; }
  .tw-hero-scene-clip-landing .tw-hero-visual-col {
    width: 830px !important;
    height: 665px !important;
    flex: none !important;
    transform: scale(0.78);
    transform-origin: top center;
    margin: 16px 0 -146px !important;
  }
}
@media (max-width: 640px) {
  .tw-hero-scene-clip-landing .tw-hero-visual-col {
    transform: scale(0.4);
    margin: 16px 0 -399px !important;
  }
}

/* ---------- Mismo problema, 6 páginas más: mockup de hero oculto por completo ----------
   Encontrado al revisar Shopify/Woo/Google Ads/Meta Ads/Publicidad Digital/Website
   corporativo: el hero de CADA una tiene su propio .tw-visual-mockup (checkout de
   Shopify, panel de Woo, dashboard de Google/Meta Ads, dashboard de Publicidad Digital,
   mockup web de Website corporativo) -- mismo bug que el de Home: quedaba oculto del
   todo en tablet/móvil por la regla ".tw-visual-mockup{display:none}" de más arriba,
   compartida con mockups puramente decorativos (el bloque de chat "Cliente potencial"
   del CTA final, que sí debe seguir oculto -- por eso NO se saca .tw-visual-mockup de
   esa regla general, se soluciona con una excepción más específica acá). Mismo patrón
   que Home: wrapper .tw-hero-scene-clip (HTML) alrededor de CADA .tw-visual-mockup
   -- .float-card interno recupera su display original vía la regla ya existente más
   arriba (scope por .tw-hero-scene-clip, no por página, así que no hace falta repetirla).
   A diferencia de Home, acá cada página tiene un tamaño nativo distinto -- selectores
   por el propio width/height inline (único por página, ver el comentario de cada uno)
   en vez de una clase nueva por página. flex:none!important hace falta en las 6 por el
   mismo motivo que en Home (el wrapper nuevo las vuelve nietas de .tw-stack-row, no
   hijas directas -- el combinador ">" de la regla existente ya no las alcanza). */
@media (max-width: 1024px) {
  .tw-hero-scene-clip .tw-visual-mockup { display: block !important; }

  /* Shopify: checkout mockup, 900x680 nativos */
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:900px;height:680px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 900px; height: 680px"] {
    flex: none !important;
    transform: scale(0.75);
    transform-origin: top center;
    margin: 16px 0 -170px !important;
  }
  /* Woo: panel WooCommerce, 900x620 nativos */
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:900px;height:620px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 900px; height: 620px"] {
    flex: none !important;
    transform: scale(0.75);
    transform-origin: top center;
    margin: 16px 0 -155px !important;
  }
  /* Google Ads: dashboard, 700x600 nativos */
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:700px;height:600px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 700px; height: 600px"] {
    flex: none !important;
    transform: scale(0.9);
    transform-origin: top center;
    margin: 16px 0 -60px !important;
  }
  /* Meta Ads: reel/dashboard, 750x560 nativos */
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:750px;height:560px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 750px; height: 560px"] {
    flex: none !important;
    transform: scale(0.85);
    transform-origin: top center;
    margin: 16px 0 -84px !important;
  }
  /* Publicidad Digital: dashboard del hero, 900x700 nativos */
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:900px;height:700px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 900px; height: 700px"] {
    flex: none !important;
    transform: scale(0.75);
    transform-origin: top center;
    margin: 16px 0 -175px !important;
  }
  /* Website corporativo: mockup web, 850x600 nativos (único con flex:1 inline, igual
     que Home -- flex:none!important también lo neutraliza) */
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 850px"] {
    flex: none !important;
    transform: scale(0.78);
    transform-origin: top center;
    margin: 16px 0 -132px !important;
  }
}
@media (max-width: 640px) {
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:900px;height:680px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 900px; height: 680px"] {
    transform: scale(0.36);
    margin: 16px 0 -435px !important;
  }
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:900px;height:620px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 900px; height: 620px"] {
    transform: scale(0.36);
    margin: 16px 0 -397px !important;
  }
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:700px;height:600px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 700px; height: 600px"] {
    transform: scale(0.47);
    margin: 16px 0 -318px !important;
  }
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:750px;height:560px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 750px; height: 560px"] {
    transform: scale(0.44);
    margin: 16px 0 -314px !important;
  }
  .tw-hero-scene-clip .tw-visual-mockup[style*="width:900px;height:700px"],
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 900px; height: 700px"] {
    transform: scale(0.36);
    margin: 16px 0 -448px !important;
  }
  .tw-hero-scene-clip .tw-visual-mockup[style*="width: 850px"] {
    transform: scale(0.38);
    margin: 16px 0 -372px !important;
  }
}

/* ---------- Excepción: .float-card con contenido real (no decorativo) ----------
   La regla de arriba (.float-card{display:none}) es correcta para las tarjetas
   flotantes puramente ilustrativas alrededor de un mockup, pero en Auditoria.html
   una de esas tarjetas ("4 páginas analizadas" / hallazgos / score provisional) es
   contenido real, no decoración -- ocultarla le quita información al usuario en
   móvil en vez de solo simplificar la composición visual. */
@media (max-width: 1024px) {
  .tw-scan-summary { display: flex !important; }
}

/* ---------- Canvas de escaneo (Auditoria.html, hero) -> altura fija de 560px ----------
   El hero de Auditoria.html arma un "lienzo" de coordenadas fijas (1040x560) con
   4 tarjetas flotantes anotando un mockup de celular centrado -- pensado para el
   auto-escalado JS de la página completa (ver cabecera del archivo), que por
   debajo de 1024px queda fijo en scale:1. Con las tarjetas flotantes ya ocultas
   (regla de arriba) solo queda el mockup del celular (~280px de ancho, mucho más
   bajo que 560px) dentro de un contenedor que seguía forzado a 560px de alto -->
   dejaba un bloque de espacio vacío debajo del celular. Altura automática en vez
   de fija, y el SVG puramente decorativo (líneas punteadas apuntando a las
   tarjetas ya ocultas) se oculta también -- sin las tarjetas a las que apunta no
   cumple ninguna función, y al quedar con position:absolute;inset:0 dentro de un
   contenedor de altura ahora automática (más chica que sus 560px nativos) se
   deformaba (ancho escalado a 100% del contenedor, alto sin escalar). */
@media (max-width: 1024px) {
  .tw-scan-canvas { height: auto !important; min-height: 0 !important; }
  .tw-scan-decor-svg { display: none !important; }
  /* el mockup del celular es el único hijo visible que queda -- pero al ser
     position:absolute no aporta altura a un padre con height:auto (los
     elementos absolutos salen del flujo), dejando el canvas en 0px de alto y
     el celular flotando encima de la tarjeta de resultados de abajo. Pasarlo
     a flujo normal (relative + margin:auto) resuelve ambas cosas a la vez. */
  .scan-phone {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }
}

/* ---------- Canvas raíz de cada página (el que se auto-escala con JS) ----------
   Se deja fluido para que, con scale:1 fijado por JS (ver arriba), el
   contenido reordene dentro del ancho real del viewport en vez de quedar
   recortado a la izquierda de una caja de 1920px. */
@media (max-width: 1024px) {
  .tw-app-root { width: 100% !important; }
  .tw-hero-canvas { width: 100% !important; height: auto !important; min-height: 0 !important; }
}

/* ---------- Gaps verticales grandes (listas/columnas apiladas) -> más compactos ----------
   Además de las filas de 2 columnas (.tw-stack-row, más abajo, que fuerza su propio
   gap:24px al apilarse), muchos contenedores flex-direction:column ya vienen
   apilados de por sí mas usan gap de 50-100px pensado para un layout de 1920px --
   en móvil eso es demasiado aire entre elementos que ya están uno debajo del otro.
   Va ANTES del bloque de .tw-stack-row a propósito: si un mismo elemento cae en
   las dos reglas, el gap:24px de .tw-stack-row (más específico a esa situación,
   más abajo en el archivo) debe ganar por orden de aparición. */
@media (max-width: 1024px) {
  [style*="gap:100px"], [style*="gap: 100px"] { gap: 56px !important; }
  [style*="gap:90px"], [style*="gap: 90px"] { gap: 52px !important; }
  [style*="gap:80px"], [style*="gap: 80px"] { gap: 48px !important; }
  [style*="gap:70px"], [style*="gap: 70px"] { gap: 44px !important; }
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 40px !important; }
  [style*="gap:50px"], [style*="gap: 50px"] { gap: 36px !important; }
  [style*="gap:36px"], [style*="gap: 36px"] { gap: 28px !important; }
  [style*="gap:35px"], [style*="gap: 35px"] { gap: 28px !important; }
}
@media (max-width: 640px) {
  [style*="gap:100px"], [style*="gap: 100px"] { gap: 32px !important; }
  [style*="gap:90px"], [style*="gap: 90px"] { gap: 30px !important; }
  [style*="gap:80px"], [style*="gap: 80px"] { gap: 28px !important; }
  [style*="gap:70px"], [style*="gap: 70px"] { gap: 26px !important; }
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 24px !important; }
  [style*="gap:50px"], [style*="gap: 50px"] { gap: 22px !important; }
  [style*="gap:36px"], [style*="gap: 36px"] { gap: 20px !important; }
  [style*="gap:35px"], [style*="gap: 35px"] { gap: 20px !important; }
}
/* ---------- Filas de 2 columnas (texto + imagen, servicios, etc.) ---------- */
@media (max-width: 1024px) {
  .tw-stack-row {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 900px) {
  .tw-stack-row {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 24px !important;
  }
  /* el align-items:center original (pensado para 2 columnas en fila) centraba
     cada hijo por su ancho "preferido" antes de aplicar max-width, corriendo
     el contenido fuera del viewport aunque su ancho final ya estuviera
     limitado a 100% -- stretch evita ese cálculo. */
  .tw-stack-row > * { align-self: stretch !important; flex: none !important; }
}

/* ---------- Panel de calculadora (inputs + resultado) -> 1 columna en móvil ----------
   Las 10 páginas de Calculadora de.../Generador de... comparten el mismo componente:
   dos paneles "flex:1;min-width:420px" / "flex:1;min-width:380px" lado a lado, con
   el min-width como único mecanismo para forzar el wrap a 1 columna cuando no cabe.
   La regla general de abajo (body [style]:not(...)) fuerza min-width:0 en TODO
   elemento con estilo inline -- necesario para otros casos, pero acá anula
   justamente el min-width que hacía el trabajo de apilar, dejando los 2 paneles
   compitiendo por el ancho total en la misma fila (flex:1 con flex-basis 0%), y
   dentro del panel de "Resultado" ya angosto, sus propias 2 tarjetas de stat
   (flex:1 otra vez) se comprimían una segunda vez -- terminaban en ~30px de ancho,
   texto ilegible. flex-basis:100% fuerza el apilamiento de forma explícita, sin
   depender de min-width. */
@media (max-width: 900px) {
  .tw-calc-col { flex: 1 1 100% !important; width: 100% !important; }
}

/* ---------- Anchos fijos de contenido (tarjetas, columnas de texto) ---------- */
@media (max-width: 1024px) {
  /* max-width solo no alcanza: en varios botones/tarjetas con align-self
     distinto de stretch (ej. los CTA del home), el navegador no lo respeta
     y el ancho fijo original (ej. 550px) se sigue renderizando por fuera
     del viewport pese al max-width:100% -- forzar width:100% es lo que
     realmente lo resuelve en todos los casos probados. */
  .tw-cap-width { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* si un <a> envuelve directamente un botón/tarjeta con ancho forzado, el
     <a> (inline por defecto) no le da un containing block real -> el hijo
     puede terminar midiendo su ancho contra el ancestro equivocado y
     desbordar pese al width:100%. Forzarlo a block+100% lo corrige. */
  a:has(> .tw-cap-width) { display: block !important; width: 100% !important; }

  /* Excepción: un BOTÓN (cursor:pointer) con .tw-cap-width no debería
     estirarse a 100% solo porque comparte la clase con tarjetas/columnas de
     texto que sí necesitan ese ancho completo -- un botón de CTA se ve
     "gigante" ocupando todo el ancho de la pantalla cuando su contenido
     (texto corto + ícono) cabe cómodo en su ancho natural. Selector más
     específico (clase + atributo) que .tw-cap-width solo, así gana pase lo
     que pase el orden de aparición en el archivo. */
  .tw-cap-width[style*="cursor:pointer"],
  .tw-cap-width[style*="cursor: pointer"] {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
  }
  a:has(> .tw-cap-width[style*="cursor:pointer"]),
  a:has(> .tw-cap-width[style*="cursor: pointer"]) {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ---------- Excepción: .video-card DENTRO de un marquee (después del bloque de
   arriba a propósito, ver por qué abajo) ----------
   "Súmate a la tendencia con vídeos con opción de compra" (E-commerce/Shopify/
   Woo) -- reportado por el usuario con captura real: la sección quedaba con un
   hueco vacío enorme, la tarjeta de video invisible. Causa: .marquee-track usa
   width:max-content (se dimensiona según el ancho natural de su contenido para
   que el scroll infinito funcione) -- un hijo con width:100% dentro de un padre
   que a su vez depende del ancho de sus hijos es una dependencia circular sin
   salida clara. Primer intento (width:auto) tampoco funcionó: TODOS los hijos de
   .video-card son position:absolute (la imagen, los overlays decorativos) -- sin
   ningún hijo en flujo normal que aporte ancho, "auto" también resuelve a 0px.
   Hace falta el ancho fijo explícito (280px, igual en las 3 páginas). Este bloque
   va DESPUÉS del de arriba (no adentro) porque .video-card también tiene
   cursor:pointer -- misma especificidad que la excepción de botones (2 clases /
   1 clase+1 atributo), así que sin este orden esa regla (width:auto) ganaba de
   nuevo y recreaba el mismo bug. */
@media (max-width: 1024px) {
  .video-card.tw-cap-width {
    width: 280px !important;
    max-width: 280px !important;
  }
}

/* ---------- Filas cortas (pares de botones, badges, íconos) -> permiten wrap ----------
   Muchas filas cortas (ej. los 2 botones del hero) usan display:flex sin declarar
   flex-direction (row es el default) y sin flex-wrap -> con dos botones más anchos
   que el viewport, el segundo queda cortado en vez de bajar de línea. En vez de
   perseguir cada patrón puntual, se le permite wrap a CUALQUIER elemento con
   estilo inline dentro del canvas (flex-wrap no hace nada en algo que no sea un
   contenedor flex, así que es seguro aplicarlo en bloque) — con una excepción
   explícita para los marquees (tienen que quedarse en una sola fila para que el
   scroll infinito funcione). */
@media (max-width: 900px) {
  /* :not(.tw-overlay-card) -- este selector (body + [style] + tres :not()) tiene MÁS
     especificidad CSS que una clase sola (.tw-overlay-card, .tw-cap-width, etc.), así
     que sin esta exclusión su max-width:100% le gana a cualquier max-width distinto
     que se quiera dar por clase más abajo en el archivo, sin importar el orden real
     de aparición (encontrado con .tw-overlay-card, que en tablet necesita max-width:
     420px en vez de 100% -- ver esa sección más abajo). Si se agrega OTRA clase que
     necesite un max-width propio distinto de 100% en este rango, hay que sumarla acá
     también. */
  body [style]:not(.marquee-track):not(.marquee-track-slow):not(.tw-mobile-nav-panel):not(.tw-overlay-card):not(.tw-compare-table):not(.tw-compare-col):not(.tw-pillars-row):not(.tw-pillars-card):not(.tw-features-row):not(.tw-features-col):not(.tw-video-features-row):not(.tw-video-features-col):not(.tw-howsteps-row):not(.tw-howsteps-card):not(.tw-gauges-row):not(.tw-gauges-item):not(.tw-channels-row):not(.tw-channels-card):not(.tw-hero-visual-col):not(.tw-visual-mockup) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Muchos botones/labels usan white-space:nowrap para no partirse en desktop —
   en móvil eso obliga al elemento a ser tan ancho como el texto sin cortar
   (los flex items no encogen bajo su contenido por defecto), empujándolo
   fuera del viewport aunque el contenedor ya esté limitado a 100%. */
@media (max-width: 640px) {
  .tw-app-root [style*="white-space:nowrap"],
  .tw-app-root [style*="white-space: nowrap"] {
    white-space: normal !important;
  }
  /* Excepción: el texto del ticker/marquee (barra superior "Optimizamos tu
     e-commerce...") también usa white-space:nowrap inline en cada frase --
     necesario para que el scroll infinito funcione, cada frase debe medirse
     y desplazarse como una sola línea. La regla de arriba se lo revertía a
     "normal", partiendo cada frase en 2 líneas dentro de la franja de 35px
     de alto (overflow:hidden), viéndose cortada/rota -- reportado por el
     usuario con capturas reales. Selector igual de específico que la regla
     de arriba (clase+atributo) pero declarado DESPUÉS, así gana por orden. */
  .marquee-track [style*="white-space:nowrap"],
  .marquee-track [style*="white-space: nowrap"],
  .marquee-track-slow [style*="white-space:nowrap"],
  .marquee-track-slow [style*="white-space: nowrap"] {
    white-space: nowrap !important;
  }
}

/* ---------- Badge de rating del hero (home) -> vuelve al flujo normal ---------- */
@media (max-width: 1024px) {
  .tw-rating-badge {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 16px 0 !important;
  }
}

/* ---------- Tarjetas superpuestas centradas verticalmente (servicios, home) ----------
   Cada sección "Servicios integrales" tiene una imagen de fondo con una tarjeta
   flotando encima, centrada con top:50%+transform. A un ancho fijo (420px) eso
   se sale del viewport en móvil -- se vuelve al flujo normal y la sección
   pasa de altura fija (560px, con overflow:hidden) a automática para que la
   tarjeta quepa completa. En tablet (641-1024px) los 420px originales entran
   perfecto sin necesidad de estirar la tarjeta a 100% -- forzarla a 100% ahí
   la dejaba enorme (y de paso estiraba el botón "Conocer más" de adentro a
   lo ancho de toda la tarjeta) sin necesidad; en tablet solo se limita con
   max-width, conservando su ancho natural. */
@media (max-width: 1024px) {
  .tw-overlay-section { height: auto !important; overflow: visible !important; width: 100% !important; }
  .tw-overlay-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 640px) {
  .tw-overlay-card { width: 100% !important; max-width: 100% !important; }
}

/* ---------- Grids con varias columnas -> 2 columnas en móvil (no 1) ----------
   Antes esto forzaba 1fr (una sola columna) para CUALQUIER grid del sitio. Revisado
   cada uso real de grid-template-columns en el sitio (relevamiento completo): son
   grids de números/stats (home, Calculadoras -- "+500 Proyectos", "+800 E-commerce"),
   catálogos de tarjetas cortas (Herramientas, con 12+ tarjetas: badge + título +
   descripción corta + botón) o pares de campo de formulario en las calculadoras
   (label + input). Ninguno de estos necesita caer a 1 columna -- 2 columnas les
   entra perfecto incluso en 360px y reduce la altura a la mitad. Los grids con
   contenido realmente denso por celda (si aparece alguno a futuro) deben marcarse
   aparte con su propia clase en vez de depender de esta regla general.
   (El grid "Ecosystem 360°" de E-commerce/Shopify/Woo tiene su propio manejo
   dedicado más abajo -- pasa a flex, así que grid-template-columns ya no aplica
   ahí de todas formas.) */
@media (max-width: 700px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Padding horizontal de secciones grandes -> fluido ----------
   Dos niveles: tablet (≤1024px) todavía tiene ancho de sobra para un padding
   moderado, mobile (≤640px) necesita mucho menos -- antes era un solo valor
   (24px) para ambos, lo que en tablet se sentía angosto sin necesidad. */
@media (max-width: 1024px) {
  [style*="200px"], [style*="235px"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 640px) {
  [style*="200px"], [style*="235px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- Secciones sin padding horizontal propio (padding:150px 0) ----------
   Reportado por el usuario con capturas reales en E-commerce/Shopify/Woo: la
   sección de "soluciones" (Para emprendedores / Para empresas escalables, tarjeta
   con checklist) usa "padding:150px 0" -- CERO padding horizontal, ni siquiera en
   escritorio. A esa distancia no hace falta (el contenido tiene su propio ancho
   fijo centrado), pero en móvil/tablet la tarjeta se fuerza a 100% de ancho
   (.tw-cap-width) y queda pegada a ambos bordes del viewport, sin aire -- "se ven
   muy pegadas al lado del ancho". Mismos valores que el resto de las secciones
   (40px tablet, 20px móvil). */
@media (max-width: 1024px) {
  [style*="padding:150px 0;"], [style*="padding: 150px 0px;"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 640px) {
  [style*="padding:150px 0;"], [style*="padding: 150px 0px;"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- Padding vertical de secciones grandes -> reducido ----------
   Muchas secciones de página completa usan 100-150px de padding arriba Y
   abajo (pensado para el espaciado de un layout de 1920px) -- en móvil eso
   son 200-300px de puro aire por sección, la causa principal de "se ve
   muy vacío". Se reduce a algo razonable sin tocar el padding horizontal
   (ya cubierto arriba). Dos niveles, igual que el padding horizontal. */
@media (max-width: 1024px) {
  .tw-section-pad {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}
@media (max-width: 640px) {
  .tw-section-pad {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ---------- Escala tipográfica: títulos grandes se reducen gradualmente ----------
   Generado a partir de un relevamiento de TODOS los font-size usados en el sitio
   (valores exactos en px, es un sistema 100% de estilos inline, no hay una escala
   tipográfica real que fluya sola). Selectores con prefijo de propiedad
   (font-size:NNpx) en vez de valores sueltos, para no pisar por accidente un
   width/padding/gap que coincida con el mismo número -- ambas variantes (con y sin
   espacio tras los dos puntos) cubren tanto el HTML crudo (formato mixto entre
   páginas) como el DOM ya renderizado por React (siempre "font-size: NNpx", con
   espacio). line-height se resetea a un valor relativo (no px) porque muchos
   títulos traen un line-height fijo en px pensado para el tamaño de escritorio (ej.
   font-size:45px + line-height:55px) -- sin este reset, el texto encoge pero
   conserva un interlineado gigante, generando espacio vertical de sobra entre
   líneas. */
@media (max-width: 1024px) {
  [style*="font-size:90px"], [style*="font-size: 90px"] { font-size: 52px !important; line-height: 1.25 !important; }
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 46px !important; line-height: 1.25 !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 40px !important; line-height: 1.25 !important; }
  [style*="font-size:50px"], [style*="font-size: 50px"] { font-size: 36px !important; line-height: 1.25 !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 34px !important; line-height: 1.25 !important; }
  [style*="font-size:45px"], [style*="font-size: 45px"] { font-size: 32px !important; line-height: 1.25 !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 32px !important; line-height: 1.25 !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 30px !important; line-height: 1.25 !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 30px !important; line-height: 1.25 !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 28px !important; line-height: 1.25 !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 27px !important; line-height: 1.25 !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 26px !important; line-height: 1.25 !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 25px !important; line-height: 1.25 !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 24px !important; line-height: 1.25 !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 23px !important; line-height: 1.25 !important; }
  [style*="font-size:27px"], [style*="font-size: 27px"] { font-size: 22px !important; line-height: 1.25 !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 22px !important; line-height: 1.25 !important; }
  [style*="font-size:25px"], [style*="font-size: 25px"] { font-size: 21px !important; line-height: 1.25 !important; }
  [style*="font-size:24px"], [style*="font-size: 24px"] { font-size: 20px !important; line-height: 1.25 !important; }
  [style*="font-size:22px"], [style*="font-size: 22px"] { font-size: 19px !important; line-height: 1.25 !important; }
}
@media (max-width: 640px) {
  /* Recalibrado 2026-08-29 a pedido explícito del usuario: rangos objetivo
     H1 32-40px / H2 26-32px / H3 20-26px / párrafos 15-18px. La tabla
     anterior fue calibrada ANTES de ese pedido y quedaba por debajo de esos
     rangos en varios casos (ej. el H1 real del home, 44px de escritorio,
     terminaba en 24px -- muy por debajo del mínimo de 32px pedido ahora).
     Confirmado con el H1 real de index.html ("Impulsamos el crecimiento
     digital de tu negocio", 44px escritorio) y su H2 real ("Preguntas
     frecuentes", 38px escritorio) como anclas para calibrar el resto de la
     tabla de forma monótona. */
  [style*="font-size:90px"], [style*="font-size: 90px"] { font-size: 38px !important; line-height: 1.25 !important; }
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 36px !important; line-height: 1.25 !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 36px !important; line-height: 1.25 !important; }
  [style*="font-size:50px"], [style*="font-size: 50px"] { font-size: 35px !important; line-height: 1.25 !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 34px !important; line-height: 1.25 !important; }
  [style*="font-size:45px"], [style*="font-size: 45px"] { font-size: 34px !important; line-height: 1.25 !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 34px !important; line-height: 1.25 !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 32px !important; line-height: 1.25 !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 32px !important; line-height: 1.25 !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 28px !important; line-height: 1.28 !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 27px !important; line-height: 1.28 !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 26px !important; line-height: 1.28 !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 25px !important; line-height: 1.28 !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 24px !important; line-height: 1.28 !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 23px !important; line-height: 1.3 !important; }
  [style*="font-size:27px"], [style*="font-size: 27px"] { font-size: 22px !important; line-height: 1.3 !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 21px !important; line-height: 1.3 !important; }
  [style*="font-size:25px"], [style*="font-size: 25px"] { font-size: 21px !important; line-height: 1.3 !important; }
  [style*="font-size:24px"], [style*="font-size: 24px"] { font-size: 20px !important; line-height: 1.3 !important; }
  [style*="font-size:22px"], [style*="font-size: 22px"] { font-size: 19px !important; line-height: 1.3 !important; }
}

/* ---------- Botones: padding excesivo -> más compacto en tablet/móvil ----------
   Relevados los pares padding:Npx Mpx usados en botones reales (cursor:pointer +
   border-radius) en todo el sitio -- selectores con prefijo de propiedad (mismo
   criterio que la escala tipográfica de arriba). El font-size del label del botón
   ya se reduce solo vía la escala tipográfica (arriba), esto solo toca el padding
   del contenedor. */
@media (max-width: 1024px) {
  [style*="padding:20px 50px"], [style*="padding: 20px 50px"] { padding: 16px 28px !important; }
  [style*="padding:30px 35px"], [style*="padding: 30px 35px"] { padding: 20px 28px !important; }
  [style*="padding:18px 28px"], [style*="padding: 18px 28px"] { padding: 16px 24px !important; }
  [style*="padding:18px 26px"], [style*="padding: 18px 26px"] { padding: 16px 22px !important; }
  [style*="padding:20px 25px"], [style*="padding: 20px 25px"] { padding: 16px 22px !important; }
}
@media (max-width: 640px) {
  [style*="padding:20px 50px"], [style*="padding: 20px 50px"] { padding: 14px 24px !important; }
  [style*="padding:30px 35px"], [style*="padding: 30px 35px"] { padding: 16px 24px !important; }
  [style*="padding:18px 28px"], [style*="padding: 18px 28px"] { padding: 14px 20px !important; }
  [style*="padding:18px 26px"], [style*="padding: 18px 26px"] { padding: 14px 20px !important; }
  [style*="padding:20px 25px"], [style*="padding: 20px 25px"] { padding: 14px 20px !important; }
}

/* ---------- Padding interno de tarjetas/paneles (valor único, las 4 direcciones) ----------
   Relevado en todo el sitio: paddings de tarjeta/panel de 26px en adelante (30, 32,
   34, 36, 44, 50) son el valor de escritorio -- nunca se habían reducido para
   móvil/tablet, a diferencia del padding de BOTONES (par de valores, ya cubierto
   arriba). El caso más notorio: el panel de calculadoras (.tw-calc-col,
   padding:44px) se apila a 1 columna en móvil pero conserva sus 44px de padding
   por lado -- en un panel de 335px de ancho eso deja apenas 247px reales para el
   contenido. Valores de 22px o menos ya son razonables para móvil, no se tocan. */
@media (max-width: 1024px) {
  [style*="padding:50px;"], [style*="padding: 50px;"] { padding: 32px !important; }
  [style*="padding:44px;"], [style*="padding: 44px;"] { padding: 28px !important; }
  [style*="padding:36px;"], [style*="padding: 36px;"] { padding: 24px !important; }
  [style*="padding:34px;"], [style*="padding: 34px;"] { padding: 24px !important; }
  [style*="padding:32px;"], [style*="padding: 32px;"] { padding: 22px !important; }
  [style*="padding:30px;"], [style*="padding: 30px;"] { padding: 22px !important; }
  [style*="padding:26px;"], [style*="padding: 26px;"] { padding: 20px !important; }
}
@media (max-width: 640px) {
  [style*="padding:50px;"], [style*="padding: 50px;"] { padding: 20px !important; }
  [style*="padding:44px;"], [style*="padding: 44px;"] { padding: 18px !important; }
  [style*="padding:36px;"], [style*="padding: 36px;"] { padding: 16px !important; }
  [style*="padding:34px;"], [style*="padding: 34px;"] { padding: 16px !important; }
  [style*="padding:32px;"], [style*="padding: 32px;"] { padding: 16px !important; }
  [style*="padding:30px;"], [style*="padding: 30px;"] { padding: 16px !important; }
  [style*="padding:26px;"], [style*="padding: 26px;"] { padding: 16px !important; }
}

/* ---------- Padding interno de tarjetas (par de valores, top/bottom left/right) ----------
   Mismo problema que el bloque de arriba pero con paddings tipo "padding:50px 35px"
   (top/bottom 50, left/right 35) en vez de un valor único en las 4 direcciones --
   ninguna de las dos tablas anteriores (botones, o el valor único de arriba) los
   cubre. El más frecuente (21 usos): las tarjetas de "Funcionalidades"
   (E-commerce/Shopify/Woo) y tarjetas equivalentes en otras páginas -- en una
   tarjeta de ~167px de ancho (grid de 2 columnas en móvil) ese padding sin reducir
   dejaba muy poco espacio real para el contenido. */
@media (max-width: 1024px) {
  [style*="padding:50px 35px"], [style*="padding: 50px 35px"] { padding: 24px 20px !important; }
  [style*="padding:46px 40px"], [style*="padding: 46px 40px"] { padding: 24px 20px !important; }
  [style*="padding:36px 34px"], [style*="padding: 36px 34px"] { padding: 22px 20px !important; }
}
@media (max-width: 640px) {
  [style*="padding:50px 35px"], [style*="padding: 50px 35px"] { padding: 16px 14px !important; }
  [style*="padding:46px 40px"], [style*="padding: 46px 40px"] { padding: 18px 16px !important; }
  [style*="padding:36px 34px"], [style*="padding: 36px 34px"] { padding: 16px 16px !important; }
}

/* ---------- line-height fijo en px que queda gigante tras reducir el font-size ----------
   Ej. "font-size:18px;line-height:35px" (casi el doble de lo normal) o títulos con
   "line-height:55px"/"50px" que ya se resetean en la escala tipográfica de arriba
   pero, por si alguno quedó fuera de esa lista de valores de font-size, este es un
   respaldo genérico solo por line-height. */
@media (max-width: 640px) {
  [style*="line-height:35px"], [style*="line-height: 35px"] { line-height: 1.5 !important; }
  [style*="line-height:55px"], [style*="line-height: 55px"] { line-height: 1.25 !important; }
  [style*="line-height:50px"], [style*="line-height: 50px"] { line-height: 1.25 !important; }
}

/* ---------- Tabla comparativa (E-commerce/Shopify/Woo) -> filas convertidas en cajas ----------
   Vuelta 2 (2026-08-29), a pedido explícito del usuario con capturas reales: el primer
   intento (carrusel horizontal de 3 columnas angostas, scroll-snap) SEGÍA viéndose mal
   -- "se sigue viendo feo así de largo, es mejor unas cajas horizontales que queden bien
   cuadradas". El problema de fondo: la tabla original está armada por COLUMNA en el HTML
   (todas las 7 etiquetas de "Necesidad" primero, luego los 7 valores del plan A, luego
   los 7 del plan B) -- apilar o hacer scroll de esas 3 columnas tal cual nunca iba a dar
   una "caja por fila" sin reordenar el contenido.
   Fix real (no solo CSS): se restructuró el HTML (E-commerce/Shopify/Woo, mismo patrón
   en las 3) agrupando cada fila real -- necesidad + valor plan A + valor plan B -- en su
   propio <div class="tw-compare-row"> (o .tw-compare-divider-row para las líneas
   separadoras, que en el diseño nuevo de cajas ya no hacen falta). Para que ESCRITORIO
   se siga viendo exactamente igual que antes con esta nueva estructura por fila (no por
   columna), .tw-compare-table pasa a grid de 3 columnas con cada fila en display:contents
   -- sus 3 hijos entran directo al grid del padre, reproduciendo la tabla de 3 columnas
   original sin tocar ni un px del diseño de escritorio (ver el bloque SIN @media más
   abajo). En tablet/móvil, cada fila deja de ser transparente (display:contents) y se
   convierte en su propia caja compacta: grid de 2 columnas con la etiqueta de necesidad
   ocupando la fila de arriba completa y los 2 valores lado a lado debajo -- una caja
   ancha y baja ("cuadrada", no una columna angosta y larga) por cada característica, sin
   scroll horizontal. */
.tw-compare-table {
  display: grid !important;
  grid-template-columns: 400px 400px 400px;
  row-gap: 25px;
  column-gap: 0;
}
.tw-compare-row, .tw-compare-divider-row { display: contents; }
.tw-compare-row > *:nth-child(1) { justify-self: stretch; }
.tw-compare-row > *:nth-child(2) { justify-self: center; }
.tw-compare-row > *:nth-child(3) { justify-self: center; }
@media (max-width: 1024px) {
  .tw-compare-table {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 24px 20px !important;
    width: 100% !important;
  }
  .tw-compare-divider-row { display: none !important; }
  .tw-compare-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
  }
  .tw-compare-row > *:nth-child(1) {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .tw-compare-row > *:nth-child(2),
  .tw-compare-row > *:nth-child(3) {
    justify-self: stretch !important;
    text-align: center !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  /* La fila de encabezado (badge "Para emprendedores"/"Para empresas escalables" +
     título del plan) es la única con una palabra larga sin espacios ("emprendedores",
     13 caracteres) -- a la mitad del ancho de la fila (~140px) esa palabra sola no
     entraba ni en su propia línea, y como nada la recortaba (overflow:visible) el
     sobrante quedaba pintado encima por la caja verde de al lado, viéndose "cortada"
     (reportado por el usuario con captura real). overflow-wrap:break-word dejar
     partir la palabra dentro de su propia caja en vez de desbordarla. */
  .tw-compare-row > *:nth-child(2) *,
  .tw-compare-row > *:nth-child(3) * {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* La fila de encabezado en particular (.tw-compare-row:first-of-type -- la única
     con badge + título de 2-3 palabras, las demás filas son "Sí"/"Opcional"/etc,
     mucho más cortas) queda igual de angosta (~140px por columna) pero con texto
     bastante más grande (18-25px) -- incluso con overflow-wrap:break-word de arriba
     como red de seguridad, el resultado partido letra por letra ("emprend-edores",
     "E-commerc-e") se ve poco profesional. Reducir el tamaño acá para que la
     mayoría de las palabras entren en una sola línea sin necesidad de partirse. */
  .tw-compare-row:first-of-type > *:nth-child(2) span,
  .tw-compare-row:first-of-type > *:nth-child(3) span {
    font-size: 11px !important;
  }
  .tw-compare-row:first-of-type > *:nth-child(2) > span:last-child,
  .tw-compare-row:first-of-type > *:nth-child(3) > span:last-child {
    font-size: 17px !important;
  }
  .tw-compare-row:first-of-type > *:nth-child(2) > div,
  .tw-compare-row:first-of-type > *:nth-child(3) > div {
    padding: 6px 8px !important;
  }
}

/* ---------- Diagrama "Ecosystem 360°" (E-commerce/Shopify/Woo) -> lista simple ----------
   CSS Grid con el logo en el centro y 6 etapas alrededor, cada una posicionada por
   grid-area calculado en JS (pensado para el layout circular de escritorio, con líneas
   SVG curvas conectando cada etapa al centro). Forzar grid-template-columns:1fr rompería
   esto: las etapas seguirían citando un grid-area que ya no existe en un grid de 1
   columna, quedando amontonadas/superpuestas de forma impredecible. En vez de pelear
   contra el grid, se apaga el grid entero (display:flex en columna) -- grid-area no hace
   nada en un contenedor flex, así que las etapas simplemente caen en orden normal del
   DOM (logo primero, luego las 6 etapas en el orden que ya traen). Las líneas SVG
   curvas se ocultan (solo tienen sentido en el layout circular). */
@media (max-width: 1024px) {
  .tw-e360-wrap { min-height: 0 !important; }
  .tw-e360-svg { display: none !important; }
  .tw-e360-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    justify-items: stretch !important;
  }
  .e360-logo {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 8px !important;
  }
  .e360-stage {
    grid-area: unset !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

/* ---------- Footer: columnas de links -> nunca tuvieron display:flex base ----------
   .tw-footer-links-grid envuelve los 4 grupos (Publicidad digital, Web,
   Automatizaciones, Recursos), cada uno ya con `flex:1` inline -- pero la clase en sí
   nunca tuvo una regla base de `display:flex` en ningún ancho, solo la versión
   ≤900px de abajo la define (como `display:grid`). A >900px (desktop real, no el
   ancho ~800px del panel de preview que veníamos usando para verificar) el navegador
   cae al `display:block` por defecto de un <div>, y los 4 grupos se apilan uno debajo
   del otro como una sola lista vertical en vez de ir en fila -- reportado por el
   usuario con captura a ancho de escritorio real (1524px). Fix: regla base
   `display:flex;flex-direction:row` sin condicionar a ningún media query, para que
   se comporte como fila en cualquier ancho >900px; la regla ≤900px de abajo la
   sobreescribe igual (usa !important) para pasar a grid 2x2 en tablet/móvil. */
.tw-footer-links-grid {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 0;
  gap: 40px;
}

/* ---------- Footer: columnas de links -> grid de 2 en vez de una lista larga ----------
   El footer tiene logo+tagline + 4 grupos de links (Publicidad digital, Web,
   Automatizaciones/Herramientas, Recursos) en una fila. Apilar los 5 en una sola
   columna (lo que haría .tw-stack-row) deja una lista vertical larguísima -- en la
   página de Herramientas, el grupo "Herramientas" solo ya tiene 10+ links. En vez de
   eso, el logo queda arriba (ancho completo) y los 4 grupos pasan a un grid de 2x2:
   la mitad de alto que apilarlos de a uno, sin perder ningún link. */
@media (max-width: 900px) {
  .tw-footer-row {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .tw-footer-links-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    row-gap: 28px !important;
    width: 100% !important;
  }
  .tw-footer-links-grid > * { min-width: 0 !important; flex: none !important; }
}

/* ---------- Columna visual del hero (rating badge / fab-btn entre float-cards) ----------
   En el hero de home y Landing page, la columna de la derecha es un contenedor con
   altura fija (650-800px) pensada para alojar varias tarjetas flotantes (float-card,
   ya ocultas en tablet/móvil) más 1-2 elementos que SÍ deben verse (el badge de
   rating, un botón flotante). Al ocultarse las float-cards, la altura fija del
   contenedor queda como una caja vacía real de 650-800px -- el "hero gigante" que
   no debería existir. height:auto dejaa que el contenedor se ajuste a lo que
   realmente queda visible. */
@media (max-width: 1024px) {
  .tw-hero-visual-col {
    height: auto !important;
    margin-top: 16px !important;
  }
}

/* ---------- "¿Cómo funciona?" (home) -> 1 columna, no carrusel ----------
   3 tarjetas de paso (Estrategia/Tecnología/Diseño UX-UI), cada una con imagen de
   300px + título + un párrafo real de 2 frases -- "cards con bastante texto" (no
   solo ícono+label), así que la regla es apilarlas en 1 columna compacta, no
   forzarlas a un carrusel horizontal ni a 2 columnas donde el párrafo quedaría
   apretado contra una imagen angosta. Revisado 2026-08-29: el pedido explícito del
   usuario es "no conviertas todo en carruseles" -- el carrusel anterior funcionaba
   sin overflow, pero no es la solución preferida para una secuencia de solo 3
   tarjetas con contenido real. */
@media (max-width: 1024px) {
  .tw-pillars-row { flex-direction: column !important; flex-wrap: nowrap !important; gap: 20px !important; }
  .tw-pillars-card { width: 100% !important; max-width: 100% !important; }
  .tw-pillars-card > div:first-child { height: 200px !important; }
}

/* ---------- Excepción: catálogos con tarjetas de contenido largo -> 1 columna ----------
   Herramientas.html (12+ herramientas, título largo tipo "Calculadora de
   Rentabilidad de Ecommerce" + descripción de 1-2 líneas) y Recursos.html (imagen de
   280px de alto + título + descripción) NO entran bien en 2 columnas de ~155px --
   el título solo ya ocupa 4-5 líneas. Para estos dos catálogos puntuales, opt-out
   del default de 2 columnas de arriba. */
@media (max-width: 700px) {
  .tw-grid-1col { grid-template-columns: 1fr !important; }
}

/* ---------- "Funcionalidades" (E-commerce/Shopify/Woo) -> 1 columna, no carrusel ----------
   6 tarjetas reales (Integración total/Compras rápidas/Diagramación/Gestión
   simplificada/Mega menús/Impulsa el tráfico) agrupadas de a 2 en 3 "columnas"
   masonry en el HTML -- pensadas para desktop.
   Vuelta 2 (2026-08-30), a pedido explícito del usuario con capturas reales: el
   primer intento (grid de 2 columnas, ~167px de ancho cada tarjeta) se veía "muy
   vertical y alargado" y encima partía palabras largas ("Diagramación
   personalizada" se cortaba a mitad de palabra) -- a 167px de ancho ni un título
   de 25px cabía en una sola palabra sin desbordar el overflow:hidden de la
   tarjeta. 1 columna a ancho completo (mismo criterio que .tw-pillars-row/
   .tw-channels-row: tarjetas con imagen + título + párrafo real, no solo
   ícono+label, van en 1 columna) -- con el ancho completo el título entra
   cómodo y la tarjeta deja de verse como una columna angosta y larga. */
@media (max-width: 1024px) {
  .tw-features-row { flex-direction: column !important; flex-wrap: nowrap !important; gap: 16px !important; width: 100% !important; }
  .tw-features-col { flex-direction: column !important; width: 100% !important; gap: 16px !important; }
  .tw-features-col > .card-hover { width: 100% !important; min-width: 0 !important; }
  .tw-features-col [style*="height: 350px"],
  .tw-features-col [style*="height:350px"] { height: 220px !important; }
  .tw-features-col [style*="height: 450px"],
  .tw-features-col [style*="height:450px"] { height: 260px !important; }
}

/* ---------- 4 videos de demo (E-commerce/Shopify/Woo) -> 1 columna, no carrusel ----------
   4 mockups de teléfono con video autoplay (Administración ágil / Integración total /
   Experiencia de usuario / Sitio multidispositivos), cada uno con su propio teléfono
   (350px de ancho nativo) + texto. Un teléfono necesita ancho real para verse bien --
   2 columnas lo dejarían en ~170px, ilegible -- así que se apilan en 1 columna
   centrada conservando su ancho natural (350px, o 100% si el viewport es más angosto
   que eso), en vez de convertirlos en un carrusel. */
@media (max-width: 1024px) {
  .tw-video-features-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    padding: 0 20px !important;
    gap: 24px !important;
  }
  .tw-video-features-col { width: 100% !important; max-width: 350px !important; margin: 0 auto !important; }
}

/* ---------- "Canales que automatizamos" (Automatizaciones.html) -> 1 columna, no carrusel ----------
   3 tarjetas (Chatbots/IA, Email Marketing, SMS) con imagen + título + descripción +
   stat -- contenido real, no solo un ícono con label. Se apilan compactas en 1
   columna (imagen más baja, padding ya reducido por la regla general) en vez de un
   carrusel horizontal. */
@media (max-width: 1024px) {
  .tw-channels-row { flex-direction: column !important; flex-wrap: nowrap !important; gap: 20px !important; }
  .tw-channels-card { flex: none !important; width: 100% !important; max-width: 100% !important; }
  .tw-channels-card .img-zoom-wrap { height: 200px !important; }
}

/* ---------- "Pauta digital en Meta/Google" (E-commerce/Shopify/Woo) -> 1 columna ----------
   2 tarjetas flex:1 (título + párrafo + imagen de 350px) en una fila sin ancho fijo
   real (width:1520px se recorta a 100% por la regla general, pero las 2 tarjetas
   flex:1 seguían compitiendo por ese ancho ya recortado) -- quedaban en ~155-160px,
   apenas por encima del umbral que se usó para detectar este patrón en el resto del
   sitio, así que pasó desapercibido en la primera pasada. Solo son 2 bloques con
   bastante contenido cada uno (no una lista larga tipo carrusel) -> 1 columna en vez
   de carrusel, más simple y igual de válido para solo 2 tarjetas.  */
@media (max-width: 1024px) {
  .tw-pauta-row { flex-direction: column !important; }
  .tw-pauta-card { flex: 1 1 100% !important; width: 100% !important; }
  .tw-pauta-card [style*="height:350px"],
  .tw-pauta-card [style*="height: 350px"] { height: 220px !important; }
}

/* ---------- Collage de foto + stats (Publicidad Digital.html, Google Ads/Meta Ads) ----------
   Grid 2x2 con grid-template-rows:170px 490px fijo -- pensado para desktop (banner de
   stat arriba ocupando las 2 columnas, foto de cliente + tarjeta de stat abajo,
   170/160px de ancho). En móvil la fila de 490px queda igual de alta pero solo con
   160px de ancho para cada columna: la foto del cliente se ve como una tira vertical
   angosta y recortada, y la tarjeta de stat queda con ~300px de espacio vacío debajo
   de su contenido real (icono+número+frase corta no necesita 490px de alto). 1 columna
   en vez de 2, altura automática -- la foto pasa a un alto fijo razonable en vez de
   heredar la fila de 490px. */
@media (max-width: 1024px) {
  .tw-collage-grid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto !important;
  }
  /* el banner superior usa grid-column:1/3 para ocupar las 2 columnas de desktop --
     con 1 sola columna explícita, esa línea "3" no existe y el grid crea una
     columna implícita extra para poder ubicarlo ahí (mismo problema que ya se vio
     en Biblioteca.html con grid-column:span). */
  .tw-collage-grid > [style*="grid-column:1/3"],
  .tw-collage-grid > [style*="grid-column: 1 / 3"] { grid-column: 1 !important; }
  .tw-collage-grid image-slot { width: 100% !important; height: 220px !important; }
}

/* ---------- Gauges circulares de "Actividad de automatización" (Automatizaciones.html) ----------
   4 anillos SVG de progreso (width/height="86" fijos por atributo HTML, no CSS) dentro
   de columnas flex:1 -- min-width:0 (regla general) permite que el contenedor se
   encoja por debajo del tamaño nativo del SVG, pero el SVG en sí no se encoge (sus
   atributos width/height no son porcentuales), así que quedaba desbordando su propia
   columna y superponiéndose con las columnas vecinas. 2x2 en vez de 4 en fila, y el
   SVG se reduce por CSS (mismo viewBox, se reescala solo). */
@media (max-width: 1024px) {
  .tw-gauges-row { flex-wrap: wrap !important; row-gap: 16px !important; }
  .tw-gauges-item {
    flex: 0 0 calc(50% - 9px) !important;
    width: calc(50% - 9px) !important;
    max-width: calc(50% - 9px) !important;
    min-width: 0 !important;
  }
  .tw-gauges-item svg { width: 64px !important; height: 64px !important; }
}

/* ---------- "¿Cómo funciona?" de 4 pasos (Landing page / Website corporativo) ----------
   4 tarjetas con flex:1 dentro de una fila sin ancho fijo -- al activarse flex-wrap
   (regla general) + min-width:0 (regla general, necesaria para otros casos), el
   navegador reparte el ancho total entre las 4 tarjetas por igual (flex:1 =
   flex-basis:0%) en vez de apilarlas, dejando cada una en ~90px de ancho: texto
   cortado letra por letra. Revisado 2026-08-29: el usuario pidió explícitamente que
   el "proceso" de Website corporativo (esta misma sección) pueda quedar VERTICAL
   ("conceptualmente funciona bien así, pero sin gaps enormes") -- se reemplaza el
   carrusel horizontal anterior por una columna compacta, mismo criterio en Landing
   page (comparte la clase). */
@media (max-width: 1024px) {
  .tw-howsteps-row { flex-direction: column !important; flex-wrap: nowrap !important; gap: 20px !important; }
  .tw-howsteps-card { flex: none !important; width: 100% !important; max-width: 100% !important; }
}

/* ---------- Botones flotantes (WhatsApp/chat) -> más chicos y pegados al borde ----------
   Reportado por el usuario con capturas reales: el widget fijo de WhatsApp+chat
   (position:fixed;right:40px;bottom:40px, 60x60px cada ícono, igual en las 24
   páginas DC) tapaba texto real de las tarjetas -- en el grid nuevo de 2 columnas de
   "Funcionalidades" (E-commerce/Shopify/Woo) el texto de la tarjeta derecha llega
   hasta cerca del borde derecho, y el widget (que no se mueve con el scroll, siempre
   ahí) le tapaba palabras enteras. No es necesario ocultarlo (es un canal de
   contacto real) -- se reduce su tamaño y el margen al borde en móvil, para que
   tape mucho menos superficie sin perder la función. Selector por el propio inline
   style (idéntico en las 24 páginas, no tiene clase propia el contenedor). */
@media (max-width: 640px) {
  [style*="position:fixed;right:40px;bottom:40px"],
  [style*="position: fixed; right: 40px; bottom: 40px"] {
    right: 14px !important;
    bottom: 14px !important;
    gap: 10px !important;
  }
  .fab-btn { width: 46px !important; height: 46px !important; }
}

/* ---------- Navegación de pasos "¿Cómo funciona?" (Automatizaciones/Auditoria) ----------
   4 pasos en fila (círculo numerado + etiqueta), cada uno flex:1 SIN gap entre columnas --
   a ancho de móvil cada columna queda en ~84-90px. Reportado por el usuario con captura
   real: las etiquetas de columnas vecinas ("Implementación"/"Monitoreo" en Automatizaciones,
   aún más largas en Auditoria: "Analizamos 40+ puntos"/"Implementas con nosotros") se veían
   pegadas/fusionadas entre sí. Causa real (confirmada tras medir con getBoundingClientRect:
   los CONTENEDORES `.tw-howstep-nav-item` nunca se solapan, `flex:1` los reparte bien) --
   el `<span>` de la etiqueta es texto inline SIN ancho propio ni wrap: a texto largo con
   columna angosta, el span renderiza más ancho que su propia columna y se desborda encima
   del span vecino, aunque los contenedores midan separación real. Reducir font-size solo
   retrasa el desborde, no lo elimina. Fix real: forzar el span a ocupar el 100% de su
   columna y hacer wrap (2 líneas) en vez de desbordarse en 1 línea larga. */
@media (max-width: 1024px) {
  .tw-howstep-nav-item { padding: 0 4px !important; box-sizing: border-box !important; }
  .tw-howstep-nav-item span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}
@media (max-width: 640px) {
  .tw-howstep-nav-item span { font-size: 11px !important; line-height: 1.25 !important; }
}

/* ---------- Boton "Cotiza tu e-commerce aqui!" -> texto se salia del boton ----------
   Reportado por el usuario con captura: en E-commerce/Shopify/Woo, el boton con el
   texto largo "Cotiza tu e-commerce aqui!" se desbordaba pegado a la flecha en
   tablet/movil, sin espacio entre ambos.

   Dos intentos previos fallidos antes de este fix, los dos por atacar el boton via
   selectores de atributo fragiles en vez de una clase propia:
   1. El selector solo cubria "padding:20px 50px" sin espacio -- el framework
      serializa el inline style CON espacio ("padding: 20px 50px"), asi que nunca
      matcheaba y solo entraba una regla generica preexistente (mas arriba en este
      archivo) que reduce el padding para CUALQUIER boton con ese padding, pero no
      lo suficiente para este texto especifico.
   2. Al cubrir ambas variantes de espacio, se arreglo la instancia dentro de la
      tarjeta comparadora (.tw-cap-width) -- pero el MISMO texto largo se reusa en
      una TERCERA seccion distinta ("Escala tu negocio con nuestro nuevo sistema"),
      con un padding distinto (20px 25px, sin la clase .tw-cap-width) -- el selector
      no la alcanzaba y seguia desbordada ahi.

   Fix real y definitivo: en vez de encadenar selectores de atributo por cada
   variante de padding que aparezca, se agrego una clase propia (.tw-cta-shrink) a
   las 6 ocurrencias reales (2 por pagina x 3 paginas) de este boton especifico en
   el HTML -- inmune a futuros cambios de padding/espaciado en el inline style.

   Reportado de nuevo por el usuario DESPUES de este fix, confirmado en Chrome
   incognito (sin cache de ningun tipo) a resolucion de ESCRITORIO real (1920px):
   el texto seguia cortado ahi tambien -- este fix solo cubria ≤1024px. Medido con
   precision: a 25px (el tamano original, sin tocar en desktop), "Cotiza tu
   e-commerce aqui!" mide 364px de ancho, pero el boton (400px, padding 20px 50px)
   solo tiene 300px de espacio de contenido -- NUNCA cupo en escritorio, ni antes
   de esta sesion. El boton hermano "Solicita tu diagnostico" (mismo diseno, texto
   mas corto, 293px) SI cabia de casualidad en esos mismos 300px -- por eso se veia
   bien y este no, pese a compartir exactamente el mismo boton/padding/font-size.
   Fix: reducir el font-size tambien en la version base (sin media query, aplica a
   TODOS los anchos) a 20px -- a ese tamano el texto mide ~291px, con el mismo
   margen ajustado (~9px) que ya tenia el boton hermano funcionando bien. La regla
   de abajo (≤1024px, 16px) lo sigue reduciendo aun mas en movil/tablet. */
.tw-cta-shrink span { font-size: 20px !important; }
@media (max-width: 1024px) {
  .tw-cta-shrink { padding: 14px 18px !important; }
  .tw-cta-shrink span { font-size: 16px !important; }
}

/* ---------- Boton "Cotiza tu e-commerce aqui!" en Shopify/Woo -> quedaba FUERA del viewport ----------
   Encontrado al verificar el fix de arriba: en la seccion "Escala tu negocio con
   nuestro nuevo sistema E-commerce 360" (Shopify/Woo, no E-commerce.html que no
   tiene esta seccion), el boton no solo se veia con el texto apretado -- estaba
   posicionado ENTERAMENTE fuera del viewport en movil (x=377 con viewport de
   375px), practicamente invisible.

   Causa real (nada que ver con el texto/padding del boton): su contenedor
   (heading + boton, gap:50px) tiene `height:285px` fijo -- pensado para la fila de
   2 columnas de escritorio (diagrama + texto), donde ambos hijos comparten esa
   altura. Aparte, existe una regla "red de seguridad" generica en este archivo
   (`body [style]:not(...)`) que fuerza `flex-wrap:wrap` a CUALQUIER elemento con
   estilo inline no excluido explicitamente, para evitar desbordes de ANCHO en
   otras secciones -- pero combinada con este `height:285px` fijo, el resultado es
   un desborde de ALTO: el titulo (45px, envuelve a 265px de alto en movil) mas el
   gap (50px) ya suman mas que los 285px disponibles, asi que el boton (segundo
   hijo) no cabe en esa "columna" de 285px y el flex-wrap lo manda a una SEGUNDA
   columna virtual, posicionada a la derecha -- fuera del viewport.
   Fix: quitar el height fijo en tablet/movil para que el contenedor crezca lo que
   necesite y todo quepa en una sola columna, sin necesidad de wrap. */
@media (max-width: 900px) {
  .tw-e360-cta-col { height: auto !important; }
}