/* Responsive — Fase 5.
 *
 * El diseño está resuelto a 1240px y ese caso base NO se toca: todo lo de acá vive dentro de
 * media queries por debajo de 1240px. El gate lo prueba (baseline RESTO = 0/0/0 a 1240px).
 *
 * Por qué !important: el export pinta la maqueta con estilos inline, y una regla de hoja
 * pierde contra un atributo style salvo que sea !important. No es descuido: es la única forma
 * de agregar breakpoints sin reescribir el markup del contrato.
 *
 * Por qué selectores de atributo, y OJO con su forma: no hay clases en el export. Se enganchan
 * por fragmentos del atributo style, que en el home vienen SERIALIZADOS por el runtime
 * ("min-width: 1240px", "repeat(3, 1fr)", "padding: 0px 12px") y no como los escribió el
 * export ("min-width:1240px"). Las rutas legales son HTML estático, así que ahí el atributo
 * queda tal cual se escribió. Cualquier selector nuevo se calibra mirando el DOM real, no el
 * archivo fuente: tools/diff/dbg-attrs.mjs imprime las cadenas vigentes.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   < 1240px — el contenedor deja de ser rígido
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1239px) {
  [style*="min-width: 1240px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  [style*="max-width: 1000px"],
  [style*="max-width: 960px"] {
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 1023px — tablet
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Las tres cards de micro-graficos no entran en tres columnas a 768: "Desempeno del
   * vendedor" se salia 138px del contenedor. Pasan a una sola columna ya en tablet, que es
   * ademas lo que pide el context.md para las grillas de 3 y 4. */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] > *,
  [style*="grid-template-columns: repeat(4, 1fr)"] > *,
  [style*="grid-template-columns: 1fr 1fr"] > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
  }

  /* Titulares: bajan de escalón. Peso y tracking no se tocan. */
  [style*="font-size: 72px"] { font-size: 54px !important; }
  [style*="font-size: 52px"] { font-size: 40px !important; }
  [style*="font-size: 48px"] { font-size: 37px !important; }
  [style*="font-size: 46px"] { font-size: 37px !important; }
  [style*="font-size: 44px"] { font-size: 35px !important; }
  [style*="font-size: 42px"] { font-size: 33px !important; }
  [style*="font-size: 40px"] { font-size: 31px !important; }

  [style*="padding: 98px 24px 24px"] { padding: 88px 20px 20px !important; }
  [style*="padding: 90px 64px 40px"] { padding: 72px 28px 32px !important; }

  /* ── Hero: tres piezas dimensionadas para 1240px que en pantallas angostas dejan huecos
   * muertos o desbordan. El aire de 80px arriba y abajo de los CTA es ritmo de escritorio;
   * el carrusel viene con un ancho fijo de 937px; y la fila de métricas mide 445px con 34 de
   * gap, más que la pantalla entera. */
  [style*="padding-top: 80px"][style*="padding-bottom: 80px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  [style*="max-width: 940px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="gap: 34px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 26px !important;
  }

  /* el marco del navegador falso de la demo cede aire lateral desde tablet */
  [style*="margin: 56px 64px 0px"] {
    margin: 44px 24px 0 !important;
    padding: 22px 20px 0 !important;
  }

  /* ── Targets táctiles ──
   * Van desde tablet, no sólo desde mobile: a 768px la pantalla ya se toca con el dedo. Es
   * alto mínimo, nunca tamaño de fuente ni color: no cambia el aspecto, cambia el área. */
  [style*="z-index: 100"] button,
  [style*="z-index:100"] button {
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  /* por clase, no por fragmento de estilo: el selector viejo apuntaba a la nav de las rutas
   * legales y dejaba los rotulos del home en 17px de alto en tablet. */
  .upran-nav-link,
  [style*="z-index:100"] a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  [data-demo] [data-nav-item] { min-height: 44px !important; }
  button[aria-pressed], button[type="submit"] { min-height: 44px !important; }
  /* Sin touch-action el navegador se queda el gesto horizontal para hacer scroll y el slider
   * no se entera: se puede tocar pero no arrastrar. pan-y le cede al slider el eje X y deja
   * el scroll vertical de la pagina intacto. */
  input[type="range"] {
    min-height: 44px !important;
    touch-action: pan-y !important;
  }
  /* enlaces del footer: legales y redes */
  a[aria-label="Instagram"] {
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  a[href="/privacidad"], a[href="/terminos"], a[href="/reembolso"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Los campos del formulario tambien desde tablet. Con el form colapsado (antes del cambio
   * #3) no aparecian en la auditoria a 768; ahora esta siempre abierto y sus inputs de 14px
   * disparaban el zoom de iOS en un iPad. El honeypot va fuera de pantalla y no cuenta. */
  input[type="text"]:not([name="empresa_web"]),
  input[type="email"], input[type="tel"], select, textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  .upran-nav-cta {
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 767px — mobile
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Nav compacta con menú colapsado ──
   * Mobile es el funnel: la píldora baja a ~50px de alto y el CTA queda SIEMPRE visible.
   * Las cuatro anclas pasan a un panel que se despliega con "Menú". Mismo vocabulario del
   * sistema —superficie, borde de 1px, radio— sin hamburguesa ni iconografía nueva.
   *
   * Los selectores van por CLASE, no por tag ni por fragmento de estilo inline: cuando los
   * rótulos pasaron de <span> a <a>, el selector viejo dejó de matchear y la nav colapsada se
   * rompió sin que el gate de desktop lo notara. */
  .upran-nav { padding: 10px 0 !important; }

  .upran-nav-pill {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    padding: 5px 6px 5px 12px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    min-height: 50px !important;
  }
  .upran-nav-pill img { width: 22px !important; height: 22px !important; margin-right: 2px !important; }

  /* El isologo es el disparador: en mobile su botón deja de ser transparente al layout
   * (display:contents) y pasa a ser una caja tocable de 44px. La píldora queda con TRES
   * elementos y no hay rótulo extra que apriete la fila. */
  .upran-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
  }
  .upran-nav-menu img { margin-right: 0 !important; }
  .upran-menu-abierto .upran-nav-menu { background: var(--brand-surface) !important; }

  /* Resiliencia ante escalado de texto del sistema: en un teléfono con "tamaño de fuente
   * grande" el CTA crece y podría empujar al toggle fuera de la píldora. Se le permite
   * encoger y, en el peor caso, recortar con puntos suspensivos antes que pisar nada. */
  .upran-nav-cta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Panel centrado en la PANTALLA, no colgado de la píldora: fixed y no absolute, para que no
   * dependa del ancho ni de la posición del contenedor. Se lee como un desplegable propio. */
  .upran-nav-links {
    position: fixed !important;
    top: 74px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: min(300px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    background: var(--s1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--elev) !important;
    padding: 6px !important;
    /* cerrado por defecto: sin alto, sin foco, sin lectura */
    display: none !important;
  }
  .upran-menu-abierto .upran-nav-links { display: flex !important; }
  .upran-nav-links .upran-nav-link {
    /* content-box otra vez: sin esto el min-height de 44 se suma al padding y cada ítem mide
     * 68px, con el panel estirado a 292 en vez de ~196. */
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* la píldora es el ancla de posicionamiento del panel */
  .upran-nav-pill { position: relative !important; }

  /* CTA compacto pero siempre visible: es el funnel.
   * box-sizing:border-box es obligatorio: como <div> es content-box, el min-height de 40 se
   * sumaba a su padding de 8+8 y la píldora terminaba en 68px en vez de ~52. */
  .upran-nav-cta {
    box-sizing: border-box !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .upran-nav-menu { box-sizing: border-box !important; }
  .upran-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  /* ── Grillas de 3 y 4 columnas → 1 columna ── */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Un hijo de grid o flex no baja de su tamaño de contenido salvo que se lo permita: por eso
   * la calculadora se salía 14px y las cards de micro-gráficos 4px, cortando "US$ 5.00",
   * "190 · 38" y "+67 venta" contra el borde. min-width:0 los deja encoger; border-box evita
   * que el padding se sume al 100% del ancho. */
  [style*="grid-template-columns: repeat(3, 1fr)"] > *,
  [style*="grid-template-columns: repeat(4, 1fr)"] > *,
  [style*="grid-template-columns: 1fr 1fr"] > *,
  [style*="grid-template-columns: 1fr"] > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
  }

  /* ── Centrados en mobile ──
   * Con las grillas en una sola columna, el contenido alineado a la izquierda queda flotando
   * en un bloque ancho. Los tres bloques de la calculadora ("Mismo presupuesto", "Otro orden
   * de atención", "Fallas visibles") y las cards de micro-gráficos de "Tres respuestas" van
   * centradas, con sus indicadores centrados también. */
  [style*="grid-template-columns: repeat(3, 1fr)"] > *,
  [style*="grid-template-columns: repeat(4, 1fr)"] > * {
    text-align: center !important;
    align-items: center !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] > * > *,
  [style*="grid-template-columns: repeat(4, 1fr)"] > * > * {
    justify-content: center !important;
  }
  /* los micro-gráficos son barras: su eje de etiquetas se centra, no el gráfico en sí */
  [data-bars] { justify-content: center !important; }

  /* ── Demo del portal: el menú lateral pasa a tabs horizontales ──
   * Primero hay que devolverle ancho al panel: el marco del navegador falso se lleva 64px de
   * margen y 32px de padding por lado, 192px de cromo que en 390 dejan la pantalla del portal
   * en 174px. */
  [style*="margin: 56px 64px 0px"] {
    margin: 30px 10px 0 !important;
    padding: 18px 10px 0 !important;
  }
  /* ALTURA FIJA, como en el export.
   * El diseño de escritorio fija la demo en 496px tomando "Mis leads" como referencia
   * justamente para que el auto-recorrido no mueva el layout de la página. El responsive
   * había puesto height:auto y perdió esa propiedad: la página crecía y se encogía 305-372px
   * en cada cambio de pantalla, y 423px más durante el flujo de carga. Se recupera la idea
   * original con la misma referencia, sólo que la altura de "Mis leads" depende del ancho
   * porque el texto envuelve distinto. */
  [data-demo] {
    height: 760px !important;
    flex-direction: column !important;
  }
  /* el area de contenido absorbe la diferencia; si alguna pantalla creciera, scrollea adentro
   * en vez de empujar la pagina */
  [data-demo] > [style*="flex: 1 1 0%"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-demo] [style*="width: 196px"] {
    width: 100% !important;
    /* el sidebar es content-box: sin esto el padding se suma al 100% y vuelve a desbordar */
    box-sizing: border-box !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Los ítems no cuelgan del sidebar: viven en un contenedor propio en columna. Es ese el que
   * hay que voltear, no sólo el sidebar. */
  [data-demo] [style*="width: 196px"] > div[style*="gap: 2px"] {
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-demo] [style*="width: 196px"] > div[style*="gap: 2px"]::-webkit-scrollbar { display: none; }
  /* el lockup Scorix/by Upran y el pie de cuenta no entran en una tira de tabs */
  [data-demo] [style*="width: 196px"] > div:first-child,
  [data-demo] [style*="width: 196px"] > div[style*="margin-top: auto"] {
    display: none !important;
  }
  [data-demo] [data-nav-item] {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* ── Tabla de leads: caen las columnas que no deciden nada en mobile ── */
  [style*="grid-template-columns: 44px 1fr 150px 110px 74px"] {
    grid-template-columns: 40px 1fr 104px !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns: 44px 1fr 150px 110px 74px"] > *:nth-child(n + 4) {
    display: none !important;
  }
  [style*="grid-template-columns: 44px 1fr 140px 70px"] {
    grid-template-columns: 40px 1fr !important;
  }
  [style*="grid-template-columns: 44px 1fr 140px 70px"] > *:nth-child(n + 3) {
    display: none !important;
  }

  /* ── Tipografía en mobile ── */
  [style*="font-size: 72px"] { font-size: 37px !important; }
  [style*="font-size: 52px"] { font-size: 29px !important; }
  [style*="font-size: 48px"] { font-size: 28px !important; }
  [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size: 44px"] { font-size: 27px !important; }
  [style*="font-size: 42px"] { font-size: 27px !important; }
  [style*="font-size: 40px"] { font-size: 25px !important; }
  [style*="font-size: 26px"] { font-size: 20px !important; }
  [style*="font-size: 20px"] { font-size: 17px !important; }

  /* ── Carrusel de logos: más marcas por pantalla ──
   * A 1240px cada caja mide 184px con 30 de margen a cada lado: en un teléfono eso deja una
   * marca y media en pantalla. Se achica la caja y se junta el paso. Sólo mobile; el desktop
   * conserva la calibración óptica del contrato. */
  [style*="upran-marquee 34s"] > *,
  [style*="34s"] > * {
    width: 116px !important;
    height: 44px !important;
    margin: 0 12px !important;
  }

  /* ── Métricas del hero en una sola fila ──
   * Las tres a la par desde 360: la fila deja de envolver y los cuerpos bajan lo justo para
   * entrar sin desbordar. */
  [style*="gap: 34px"] {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  [style*="gap: 34px"] > * {
    min-width: 0 !important;
    text-align: center !important;
    /* la cifra arriba y la bajada debajo: en fila, "tasa de cierre" envolvia en tres lineas
     * al lado del +30% y la terna se leia como un renglon desprolijo */
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }

  /* ── Hero en mobile: comprimido para que la demo asome sin scrollear (cambio #4) ── */
  [style*="padding-top: 80px"][style*="padding-bottom: 80px"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  [style*="padding: 90px 64px 40px"] {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
  }
  /* El contenedor del carrusel conserva los 105px de alto pensados para cajas de 64: con las
   * de 44 sobran casi 60px de aire muerto justo encima de la demo. */
  [style*="max-width: 940px"] {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    height: 52px !important;
  }
  [style*="padding: 98px 24px 24px"] { padding-top: 38px !important; }
  [style*="gap: 34px"] { padding-top: 0 !important; }
  [style*="gap: 34px"] { gap: 12px 22px !important; }

  /* ── Aire lateral ──
   * La seccion de cierre trae padding: 120px 56px sin border-box: 388 de contenido mas 112 de
   * padding daban 500px de caja en una pantalla de 412, y el bloque entero se salia por la
   * derecha. Es el desborde que aparecia en el telefono y que el auditor viejo no veia, porque
   * miraba scrollWidth del documento en vez de la caja de cada elemento. */
  [style*="padding: 120px 56px"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 56px 18px !important;
  }

  [style*="padding: 98px 24px 24px"] { padding: 78px 14px 14px !important; }
  [style*="padding: 90px 64px 40px"] { padding: 56px 18px 28px !important; }
  [style*="padding: 80px 24px"] { padding: 54px 18px !important; }
  [style*="padding: 0px 56px"] { padding: 0 18px !important; }

  /* ── Formularios: 16px o iOS hace zoom al enfocar ── */
  /* Sólo los campos donde se escribe: un input[type=range] no dispara el zoom de iOS. */
  input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* ── Real results: en mobile el autoscroll se apaga y el carrusel pasa a swipe nativo ──
   * En un telefono un marquee continuo es peor que inutil: no se puede leer, obliga a
   * perseguir la tarjeta y consume bateria animando 10 cards fuera de pantalla. El dedo ya
   * sabe deslizar, asi que se le devuelve el control con scroll nativo y snap.
   *
   * El track se identifica por la duracion de su animacion (52s), que es lo unico que lo
   * distingue del carrusel de logos (34s) sin tocar el markup; el contenedor se alcanza con
   * :has(). El carrusel de logos NO se toca: sigue andando. */
  [style*="52s"] {
    animation: none !important;
    width: max-content !important;
  }
  div:has(> [style*="52s"]) {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    /* el degradado de los bordes es para un movimiento continuo; con swipe estorba */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  div:has(> [style*="52s"])::-webkit-scrollbar { display: none; }
  [style*="52s"] > * {
    scroll-snap-align: center !important;
    flex-shrink: 0 !important;
  }

  /* ── Founders: 3:4 a ancho completo queda enorme ── */
  img[alt="Nicolás Bialet"], img[alt="Lorenzo Cabirta"] {
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 480px
   ───────────────────────────────────────────────────────────────────────────── */
/* La altura de referencia depende del ancho: "Mis leads" envuelve mas texto cuanto mas
 * angosta es la pantalla. Estos valores salen de medir la pantalla mas alta en cada tramo
 * (tools/diff/demo-altura.mjs), con un margen para que nada quede cortado. */
@media (max-width: 400px) {
  [data-demo] { height: 812px !important; }
}
@media (max-width: 374px) {
  [data-demo] { height: 852px !important; }
}

@media (max-width: 480px) {
  /* El area de contenido del portal trae 26px de padding lateral: a 360 eso deja 308px utiles
   * y las etiquetas de accion de la tabla se salen. */
  [data-demo] [style*="padding: 22px 26px 28px"] {
    padding: 16px 10px 20px !important;
  }
  /* La fila "lead + que hacer" del panel Inicio es un flex con el texto de accion a la
   * derecha; a 360 no entra. Se le permite encoger y envolver. */
  /* Dentro del portal hay varias filas flex con el texto de accion a la derecha. En vez de
   * cazarlas una por una, se le permite encoger a todo lo del panel: min-width:0 no cambia
   * como se ve nada que ya entre, solo deja que lo que no entra deje de desbordar. */
  [data-demo] * {
    min-width: 0 !important;
  }
  /* ...pero respetando los anchos minimos que el diseño declara a proposito. La columna del
   * score de la ficha pide 70px; al aplastarla a 0 quedaba en 12px y la prosa se le encimaba
   * encima de "CALIDAD 6,4 de 10". Un barrido generico necesita esta excepcion. */
  [data-demo] [style*="min-width: 70px"] { min-width: 70px !important; }
  [data-demo] [style*="min-width: 44px"] { min-width: 44px !important; }
  [data-demo] [style*="justify-content: space-between"] > * {
    overflow-wrap: break-word;
  }
  /* Etiquetas de los micro-graficos: vienen con nowrap para no cortarse en desktop; a 360 esa
   * misma regla las manda afuera del contenedor. Se les permite envolver. */
  [style*="white-space: nowrap"] {
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  [style*="font-size: 72px"] { font-size: 32px !important; }
  /* el aire superior lo fija la compresión del hero (cambio #4); acá sólo el lateral */
  [style*="padding: 98px 24px 24px"] { padding: 38px 12px 12px !important; }

  /* la tabla de leads se queda con calidad + lead */
  [style*="grid-template-columns: 44px 1fr 150px 110px 74px"] {
    grid-template-columns: 34px 1fr !important;
  }
  [style*="grid-template-columns: 44px 1fr 150px 110px 74px"] > *:nth-child(n + 3) {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Puntero fantasma: es una metáfora de mouse
   ─────────────────────────────────────────────────────────────────────────────
   El auto-recorrido de la demo mueve un puntero fantasma que "viaja" hasta el ítem y hace
   una pulsación de click. En un teléfono no hay puntero que viajar: un cursor deslizándose
   solo es un objeto que no corresponde a nada que el usuario pueda hacer.

   Se suprime en punteros gruesos y el auto-recorrido sigue igual: las pantallas cambian solas
   y la pestaña activa se ilumina, que es la señal que sí se entiende en touch. Se resuelve con
   una regla de CSS y sin tocar el JS del recorrido — el código no pedía más que esto, y toda
   la lógica de "muere a la primera interacción real" queda intacta. */
@media (pointer: coarse) {
  [data-ghost] { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Rutas legales — HTML estático: acá el atributo style queda como se escribió
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  main[style*="padding:150px 24px 0"] { padding: 104px 18px 0 !important; }
  [data-legal] h1 { font-size: 30px !important; }
  [data-legal] h2 { font-size: 20px !important; margin-top: 36px !important; }
  [data-legal] p, [data-legal] li { font-size: 15px !important; }
  /* nav y footer de las legales: target táctil */
  [style*="z-index:100"] a, [style*="z-index:100"] button {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}