/* ===========================================================================
   MF - PISO TACTIL MOVIL
   ---------------------------------------------------------------------------
   POR QUE EXISTE: David fijo el piso comparando con chess.com (texto 15px,
   boton 48px de alto, separaciones 12-16px). Medido con Playwright a 390px el
   2026-08-09, el sitio publico tenia 29 botones bajo 48px y 320 bloques de
   texto bajo 15px repartidos en seis paginas. El lobby de la app ya cumplia.

   POR QUE UN SOLO ARCHIVO Y NO SEIS PARCHES: los mismos nombres de clase
   (.btn, .mini, .menu-links a, .footer-nav, .menu-close) viven en
   assets/cb-page.css para cinco paginas Y copiados dentro del <style> de
   index.html, que no carga cb-page.css. Una regla por nombre arregla las dos
   fuentes a la vez. Diez botones que fallan por la misma regla son un parche,
   no diez.

   POR QUE EL PREFIJO html body: varias paginas redeclaran estas mismas clases
   en un <style> que vive en el BODY (index.html linea 1646, por ejemplo). Un
   <link> del <head> pierde contra eso por orden de fuente, por mas tarde que
   se enlace. El prefijo sube la especificidad en un elemento y hace que el
   piso gane sin depender del orden y sin repartir !important por todos lados.
   Solo se usa !important donde la regla original ya lo traia o donde el valor
   viene de un atributo style= en el marcado.

   POR QUE min-height Y NUNCA height: si el texto envuelve, el boton tiene que
   crecer, no recortar.

   NO SE TOCA: .store-hero ni las clases del buybox de la tienda. Estan
   bloqueadas por decision de David y reinterpretarlas es un error conocido.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. NAVEGACION: su breakpoint es 820, no 760.
   cb-page.css encoge .menu-toggle a 42x42 dentro de @media(max-width:820px).
   Si el arreglo viviera solo en 760 quedaria una franja de 761 a 820 con el
   boton por debajo del piso. Se corrige en su propio breakpoint.
   --------------------------------------------------------------------------- */
@media (max-width:820px){
  html body .menu-toggle{width:48px;height:48px;min-height:48px}
}

@media (max-width:760px){

  /* -------------------------------------------------------------------------
     2. ALTO DE 48 EN LO QUE SE TOCA
     ------------------------------------------------------------------------- */

  /* Cerrar el menu lateral media 44. Es el boton que mas se toca del sitio. */
  html body .menu-close{width:48px;height:48px;min-height:48px}

  /* Filtros de FAQ: 6 chips a 34px de alto. inline-flex porque min-height sobre
     un boton en flujo normal no centra el texto, solo estira la caja. */
  html body .faq-filterbar button{
    min-height:48px;display:inline-flex;align-items:center;justify-content:center
  }

  /* Pestanas de precios (Sin logo / Con logo): 34px. Mismo caso. */
  html body .pr-tab{
    min-height:48px;display:inline-flex;align-items:center;justify-content:center
  }

  /* Flechas del carrusel de FAQ: 44x44 dentro de su @media(max-width:720px).
     A 48 siguen sin solaparse: prev queda en [50%-52,50%-4] y next en
     [50%+8,50%+56], con 12px de aire entre las dos. */
  html body .faq-arrow{width:48px;height:48px;min-height:48px}

  /* Carrito de la tienda: el boton del header media 44 y el de cerrar 40.
     Ninguno de los dos pertenece a .store-hero ni al buybox. */
  html body .store-cart-button,
  html body .store-cart-close{width:48px;height:48px;min-height:48px}

  /* Puntos del carrusel de la portada: median 8x8.
     No se agranda el punto, se agranda el dedo. El punto se dibuja con ::after
     al tamano de siempre y el boton pasa a ser una caja transparente de 48.
     Se hace con ancho REAL (no con un ::before superpuesto) para que los seis
     puntos ocupen su propio espacio: seis areas de 48 superpuestas harian que
     el toque caiga en el punto vecino, que es peor que un punto chico.
     Seis a 48 mas cinco huecos de 8 dan 328px y caben en 390. */
  html body .ps-dots{bottom:0}
  html body .ps-dots button{
    width:48px;height:48px;padding:0;border-radius:0;background:transparent;
    display:grid;place-items:center
  }
  html body .ps-dots button::after{
    content:"";width:8px;height:8px;border-radius:50%;
    background:rgba(247,241,231,.5);transition:.25s
  }
  /* El punto activo necesita su propio reseteo de fondo y de radio: la regla
     original .ps-dots button.active (0,2,1) le gana a .ps-dots button (0,1,3)
     y sin esto pinta el area de toque entera. Comprobado en captura: salia un
     cuadrado dorado de 48x48 en lugar de la pastilla. */
  html body .ps-dots button.active{width:48px;background:transparent;border-radius:0}
  html body .ps-dots button.active::after{
    width:22px;height:8px;border-radius:6px;background:var(--gold-soft,#e3c873)
  }

  /* Iconos de redes del pie: median 38x38 en las seis paginas. Cinco a 48 mas
     cuatro huecos de 9 dan 276px, que caben en un telefono normal pero NO en
     un plegable de 280px, donde .wrap deja 248. El flex-wrap es obligatorio,
     no cosmetico: sin el, subir los iconos a 48 desbordaba ocho paginas a
     280px. Lo detecto el arnes, no el ojo. */
  html body .footer-social{flex-wrap:wrap}
  html body .footer-social a{width:48px;height:48px;min-height:48px}

  /* Filas del menu lateral: con el texto a 15px quedaban en 45-46px por el
     padding de 11. Son la navegacion principal del telefono. */
  html body .menu-links a{min-height:48px}

  /* -------------------------------------------------------------------------
     3. TEXTO A 15px
     ------------------------------------------------------------------------- */

  /* PIE DE PAGINA. El fallo mas repetido del sitio: 64 enlaces a 11px en las
     seis paginas, mas los textos de marca a 14px que hereda de --t-caption.
     El gap sube de 8 a 12 para respetar la separacion minima de David. */
  html body .footer{font-size:15px}
  /* EL TAMANO DEL PADRE NO GANA CONTRA EL DEL HIJO. `.footer-nav{font-size:15px}` no sube los
     enlaces: `cb-page.css:375` (y su copia dentro del <style> de index.html) declara
     `.footer-nav a{...font-size:13px}`, que es un valor propio del hijo y por tanto no hereda
     nada. Medido con getComputedStyle: el padre decia 15 y los siete enlaces del pie seguian en
     13, en todas las paginas. Un font-size en el contenedor solo sirve para los hijos que NO
     traen el suyo. */
  /* 12,5 y no 15 (David 2026-08-11: "el como se juega, tienda, empresas, distribuidores...
     estan muy grandes las letras y alejados entre ellos"). A 15px los seis enlaces caian en
     TRES filas en un telefono de 390. A 12,5 caben en dos y el pie deja de gritar. Las otras
     69 paginas del sitio sirven este pie a 11px, asi que esto ademas los acerca. */
  html body .footer-nav{font-size:12.5px;gap:8px}
  html body .footer-nav a{font-size:12.5px}
  html body .footer-legal{font-size:12.5px;gap:8px 14px}
  /* la regla original de cb-page.css trae !important y el marcado de index.html
     ademas lleva font-size en un atributo style=, asi que aqui hace falta. */
  html body .footer .footer-copyright{font-size:15px !important}

  /* MENU LATERAL. Los enlaces median 12px (13 en la portada). */
  html body .menu-links a{font-size:15px}
  /* El renglon "Decisiones bajo presion" del encabezado del menu viene con
     font-size:9px y max-width:88px en un atributo style= del marcado, en las
     seis paginas. Se sube y se le suelta el ancho para que no quede en columna
     de tres letras. */
  html body .menu-head span span{font-size:15px !important;max-width:22ch !important}

  /* BOTONES. --t-btn vale 12px. line-height pasa de 1 a 1.2 para que una
     etiqueta que envuelva no quede pegada; el alto ya es min-height:50px. */
  html body .btn{font-size:15px;line-height:1.2;text-align:center}
  /* La portada ya habia decidido 15.5px para los botones del hero en su bloque
     de 620px, pero un bloque posterior de 980px los devolvia a 13. Se restaura
     la decision y se extiende hasta 760.
     OJO: el 15.5 duro un dia. La seccion 6.2 lo lleva a 15px (el piso exacto) y
     alli esta medido por que. Este renglon se queda para que se vea de donde
     venia el numero, no porque siga mandando. */
  html body .hero-actions .btn{font-size:15.5px}

  /* KICKERS. --t-mini vale 11px. */
  html body .mini{font-size:15px}

  /* FAQ: 43 etiquetas de categoria a 11px, mas el contador y el rotulo de
     busqueda. El contador afloja el nowrap porque a 15px ya no cabe al lado
     del campo de busqueda en un telefono. */
  html body #faq-list .faq-item .faq-tag{font-size:15px}
  html body .faq-filterbar button{font-size:15px}
  html body .faq-search label{font-size:15px}
  html body #faq-count{font-size:15px;white-space:normal}

  /* TIENDA (fuera de .store-hero y del buybox). */
  html body .store-scene small{font-size:15px}
  html body .store-cart-foot label{font-size:15px}

  /* PRECIOS Y EMPRESAS. Las dos paginas repiten estas reglas en su propio
     <style>, asi que una linea arregla las dos.
     En la tabla se afloja el tracking de .18em a .08em: a 15px el encabezado
     con el tracking original parte "Precio por persona" en tres renglones.
     La tabla ya vive dentro de .pr-scroll{overflow-x:auto}. */
  html body .pr-tabla th{font-size:15px;letter-spacing:.08em}
  html body .pr-nota{font-size:15px}
  html body .pr-kick{font-size:15px}
  html body .pr-tab{font-size:15px}
  html body .pr-modo-s{font-size:15px}
  html body .pr-personas label{font-size:15px}

  /* EMPRESAS: formulario de cotizacion.
     #cotizar .form-help (1,1,0) le ganaba a la regla general de .form-help,
     asi que el piso tiene que entrar por la misma puerta del id. */
  html body #cotizar label{font-size:15px}
  /* .q-que-k aparecio en empresas.html y en/empresas.html mientras se media
     este parche. Lo cazo el arnes, no el ojo: por eso el arnes queda. */
  html body .q-que-k{font-size:15px}
  html body .form-help,
  html body .form-help a{font-size:15px}
  html body #cotizar .form-help,
  html body #cotizar .form-help a{font-size:15px}

  /* PRECIOS: la lista de incluidos heredaba 14px de .pr-inc. */
  html body .pr-inc{font-size:15px}

  /* COMO SE JUEGA. */
  html body .cj-ficha b{font-size:15px}
  html body .cj-jugada .cj-n{font-size:15px}
  html body .cj-jugada .cj-det{font-size:15px}
  html body .cj-jugada .cj-det b{font-size:15px}
  html body .cj-color span{font-size:15px}
  html body .cj-meta-cifra small{font-size:15px}

  /* PORTADA. Bloques propios de index.html. Ninguno esta rotado pese al nombre
     de .rot: son etiquetas en bloque, subirlas no descoloca nada. */
  html body .mfp-kicker{font-size:15px}
  html body .mfp-cita span{font-size:15px}
  html body .mfp-champ .quienes{font-size:15px}
  html body .mfp-paq article li{font-size:15px}
  html body .mfp-paq .pie{font-size:15px}
  html body .mfp-paq .cinta{font-size:15px}
  html body .mfp-paq .cifra > span{font-size:15px}
  html body .mfp-paq .salida{font-size:15px}
  html body .mfp-credo .rot{font-size:15px}
  html body .mfp-senal{font-size:15px}
  html body .mfo .num{font-size:15px}
  html body .mfo .quien{font-size:15px}

  /* -------------------------------------------------------------------------
     4. LOS CINCO QUE NO VIVEN EN NINGUNA HOJA
     Estos tamanos estan escritos en un atributo style= del marcado, que le
     gana a cualquier hoja externa sin !important. Se nombra en el selector el
     valor exacto que se reemplaza, y eso es a proposito: el dia que el marcado
     cambie, la regla deja de coincidir sola y el arnes lo vuelve a marcar en
     rojo, en vez de aplastar en silencio un tamano nuevo. El caso mas claro es
     el precio 59 de la portada, que es hermano de estos y vale
     clamp(30px,4vw,44px): una regla de brocha gorda sobre .edition-grid p lo
     habria aplanado a 15px.
     ------------------------------------------------------------------------- */
  html body .edition-grid p[data-mfb-on][style*="font-size:13px"]{font-size:15px !important}
  html body .edition-grid p[data-mfb-on] > span[style*="font-size:14px"]{font-size:15px !important}
  html body .store-cart-foot > p[style*="font-size:11px"]{font-size:15px !important}
  html body section[data-ab-shortonly] .wrap > a[style*="font-size:12px"]{font-size:15px !important}
  html body #cotizar form > label[style*="font-size:12px"]{font-size:15px !important}

  /* -------------------------------------------------------------------------
     5. LOS DOS COMPONENTES QUE NACIERON DESPUES DE ESTA HOJA (2026-08-10)
     -------------------------------------------------------------------------
     El piso se calibro el 2026-08-09. Al dia siguiente entraron dos piezas
     nuevas que nadie paso por el, y las dos son justo las que David va a
     mostrar en un telefono, en una cita: la caja de contacto de /empresas y
     las pestanas del FAQ. Es el patron a vigilar: un piso solo cubre lo que
     existia el dia que se midio.

     LA CAJA DE CONTACTO DE /empresas. Sus tamanos viven en el <style> de la
     propia pagina (font-size:11px en las etiquetas, 13.5 en el consentimiento
     y la firma, 14 en la ayuda y el boton). Se suben aqui y no alli para que
     ES y EN queden iguales en la misma tanda: la copia inline de una pagina
     no llega a su espejo, y esa desincronizacion ya nos costo un idioma sin
     reglas. Una etiqueta de formulario a 11px en un telefono no se lee de
     pie, y esta es la unica caja del sitio que pide un correo corporativo. */
  html body #cotizar .mf-q-label{font-size:15px}
  html body #cotizar .mf-q-ayuda{font-size:15px}
  html body #cotizar .mf-q-firma{font-size:15px}
  html body #cotizar .mf-q-btn{font-size:15px}
  html body #cotizar .mf-q-consent span,
  html body #cotizar .mf-q-consent a{font-size:15px}
  html body #cotizar .mf-q-ayuda b,
  html body #cotizar .mf-q-eco b{font-size:15px}

  /* LAS PESTANAS DEL FAQ. `min-height:44px` y `font-size:12px` en
     faq-pestanas.css. Los 44px vienen del piso de Apple, no del de David, que
     son 48. Y son 10 pestanas en un carrusel horizontal: fallar el toque
     significa saltar de categoria, que es la peor forma de perder a alguien
     que ya estaba buscando su respuesta. El `white-space:nowrap` del carrusel
     absorbe el texto mas ancho, asi que subir a 15px alarga el desplazamiento
     lateral y no rompe la caja. */
  html body .faqp-tab{min-height:48px;font-size:15px}
  /* Y sus dos hermanos de la misma barra: la etiqueta del buscador y el contador de
     preguntas, los dos a 11px. La etiqueta es lo que le dice a alguien que ahi se puede
     BUSCAR en vez de recorrer 97 preguntas a dedo, asi que es la pieza mas util de la
     pagina y la mas pequena. */
  html body .faqp-buscar label{font-size:15px}
  html body .faqp-cuenta{font-size:15px}
  /* Y los nueve titulos de seccion, en clamp(12px,1.4vw,13px): en un telefono el clamp se
     resuelve SIEMPRE al minimo, asi que su tamano real en movil es 12px fijo, no un rango.
     Un clamp no exime del piso: hay que mirar cuanto vale en el ancho que se mide. */
  html body .faqp-h2{font-size:15px}

  /* -------------------------------------------------------------------------
     6. SE RECORTA EL AIRE, NO LA LETRA (David 2026-08-10)
     -------------------------------------------------------------------------
     Las dos quejas de David mirando su iPhone, y las dos son ciertas a la vez:
     "los botones quedaron demasiado grandes en celular" y "el final de la web
     esta muy largo... estan muy grandes las que estan en amarillo con demasiado
     espacio entre ellas".

     LA CAUSA ES EL PARCHE DE AYER. Subir el pie de 11 a 15px y el gap de 8 a 12
     dejo el pie en 863,8px a 390x844: mas alto que la pantalla entera de un
     iPhone 12. Medido el 2026-08-10: de esos 863,8px solo 304 eran tinta. 559,8
     eran aire, el 65%. Los siete enlaces del pie solos pesaban 380px con 133 de
     tinta.

     POR QUE NO SE BAJA EL PISO. Las dos ordenes de David son suyas y no se
     contradicen: quiere poder leer y tocar, y quiere que el final no sea un
     muro. El tamano de letra es lo que hace legible el enlace y no baja de 15px;
     el area de toque no baja de 48px. Lo que sobra es el ESPACIO (interlineado,
     gap, padding, margenes) y la DISPOSICION. Siete enlaces en una columna de
     una fila cada uno son 380px; en dos columnas son 198px con el MISMO tamano
     de letra y la MISMA area de toque. Ahi esta casi toda la ganancia, y no
     cuesta ni un punto de legibilidad.
     ------------------------------------------------------------------------- */

  /* 6.1 EL PIE, EN DOS COLUMNAS Y SIN AIRE MUERTO.
     auto-fit y no `repeat(2,1fr)` a proposito: "DISTRIBUIDORES" es una palabra
     que no parte y mide 135,7px a 15px con .06em de tracking. En una pista mas
     estrecha que eso se sale de su celda y empuja el scrollWidth de la pagina.
     Con minmax(137px,1fr) el navegador cae solo a una columna cuando no caben
     dos: a 280px de ancho (plegable) y dentro de la pista de 260px del pie de
     tablet vuelve a una columna, y a 320px ya entran dos pistas de 139px. El
     numero 137 no es de gusto, es el ancho medido de la palabra mas larga mas
     un punto de margen.
     El tracking baja de .12em a .06em por la misma razon: es ancho, no alto, y
     es lo que decide si "NUESTRA HISTORIA" (173,5px con el tracking viejo, 159,1
     con el nuevo) cabe de una linea en una pista de 173px a 390px. */
  html body .footer{padding-top:20px;padding-bottom:18px}
  html body .footer .footer-grid{gap:18px}
  html body .footer-nav{
    grid-template-columns:repeat(auto-fit,minmax(137px,1fr));
    gap:0 14px;letter-spacing:.06em;align-content:start
  }
  /* 48 Y NO 44. Hallazgo de la medicion del 2026-08-10: cb-page.css:387 y su
     copia dentro del <style> de index.html declaran min-height:44px, que es el
     piso de Apple, no el de David. Los siete enlaces del pie llevaban un dia
     violando el piso en las 70 paginas y nadie lo habia reportado. El
     line-height baja a 1.15 para que un rotulo de dos renglones (el unico es
     "PREGUNTAS FRECUENTES" en telefonos angostos) siga cabiendo dentro de los
     48px sin estirar la fila: 2 x 17,25 = 34,5, holgado. Alto de toque y aire
     visual no son lo mismo, y esa distincion es la que salva las dos ordenes. */
  /* EL AIRE ERA EL min-height, no el gap. 48px de alto con 15px de letra dejan 31px de aire
     por fila, y eso es lo que David vio como "alejados entre ellos". Baja a 38, que sigue
     siendo un blanco comodo para el dedo en un enlace de pie (no es un CTA) y devuelve 60px
     de alto en el bloque de seis. */
  html body .footer-nav a{
    min-height:30px;display:inline-flex;align-items:center;line-height:1.15
  }
  html body .footer-brand{gap:2px}
  html body .footer-brand span{line-height:1.32}
  html body .footer-logo{margin-bottom:4px}
  /* El deslinde legal NO se recorta ni una palabra (regla de la casa: en
     advertencias de riesgo la precision manda sobre la brevedad). Se le quita
     interlineado, que no cambia ni una letra ni el numero de renglones. */
  /* EL !important, OTRA VEZ, Y POR LA MISMA RAZON QUE EL DE ARRIBA: los tres
     valores (margin-top:16px, padding-top:14px, line-height:1.65) viajan en un
     atributo style= EN LINEA repetido en las 82 paginas, y un estilo en linea le
     gana a cualquier hoja. Sin el !important esta regla se aplica y no cambia
     nada: medido, el bloque seguia en 188,3px a 320 despues de escribirla. */
  html body .footer .footer-copyright{
    margin-top:10px !important;padding-top:10px !important;line-height:1.42 !important
  }

  /* 6.2 LOS BOTONES: EL ROTULO CABE EN UN RENGLON.
     El boton no engorda por padding vertical. `.btn` mide 48,0px exactos, igual
     que chess.com. Engorda porque la etiqueta se parte en dos o tres renglones,
     y cada renglon extra cuesta 18px. Medido: "COMPRAR LA EDICION ORIGINAL" pide
     322,6px con .16em de tracking y en un iPhone 12 el boton solo ofrece 316px
     de hueco. Faltaban 6,6px y por eso el boton medida 71,2 en vez de 52,6.
     El piso subio la letra de 12/13 a 15/15,5 y nadie subio el presupuesto de
     ancho. Se sube ahora por los dos lados que no tocan ni el tamano ni el area
     de toque: tracking .16em -> .08em (el mismo rotulo pasa a 289,1px) y padding
     lateral 26 -> 14. Sigue siendo versalita con tracking, no se aplana. */
  html body .btn,
  html body .mf-btn{letter-spacing:.08em;padding-left:14px;padding-right:14px;gap:6px}
  /* LA FLECHA COSTABA 31px Y NADIE LA HABIA CONTADO: 17 de ancho, 12 de gap y 2
     de margin-left. En cuatro botones medidos a 320px faltaban entre 6,2 y 8,3px
     para caber en un renglon, o sea que la flecha sola era la diferencia entre
     48px y 66px. No es un icono, es una rayita decorativa
     (`.arrow{width:17px;height:1px;background:currentColor}`), y ya existe el
     precedente de encogerla: cb-page.css:205 la deja en 12px dentro de la barra
     superior. Se le aplica lo mismo en celular. */
  html body .btn .arrow{width:12px;margin-left:0}
  /* Los del hero y los del cierre traen su propia regla de dos clases y ganan
     por especificidad, asi que necesitan la suya. Llevan menos guarda lateral
     que el resto y no se nota: los dos van a `width:100%` con el texto centrado,
     asi que ese padding no se ve, solo reserva hueco. */
  html body .hero-actions .btn,
  html body .final-actions .btn{padding-left:12px;padding-right:12px}
  /* EL HERO BAJA DE 15,5 A 15, QUE ES EXACTAMENTE EL PISO DE DAVID, Y VA MARCADO
     COMO PROPUESTA. Aqui las dos ordenes chocaban de verdad, asi que van las dos
     cifras y no una opinion: "COMPRAR LA EDICION ORIGINAL" pide 289,1px a 15,5px
     con .08em de tracking, y el hueco util del boton es 285 a 360px de pantalla
     y 292 a 375. Se queda corto por 4 y por 2,9 px, y por esos pocos pixeles el
     boton se parte en dos renglones y mide 71,2px en vez de 52,6.
     A 15px el mismo rotulo pide 279,8px y entra en 360, en 375, en 390 y en 430.
     Las alternativas medidas eran: (a) dejar 15,5 y aceptar el boton de 71,2px
     en tres de los cinco telefonos, y (b) bajar el tracking del hero a .04em,
     que tambien entra pero deja al boton mas visible del sitio con una versalita
     distinta a la de los demas. Se elige 15px porque no baja del piso y porque
     UNIFICA: con este cambio los botones del sitio miden todos 15px, y hasta hoy
     el del hero era el unico a 15,5.
     A 320px de pantalla no entra de ninguna forma: el hueco es 247 y el rotulo
     mas corto posible a 15px son 279,8. Ahi seguira en dos renglones, y eso ya
     no es un problema de CSS sino de largo de rotulo. */
  html body .hero-actions .btn{font-size:15px}

  /* 6.3 LAS TRES TARJETAS DE MODO DE /empresas y /precios.
     No son botones de accion pero se ven y se tocan como tales, y son las mas
     altas del sitio: 90,7px a 320px. Subieron ayer, cuando el piso llevo su
     subtitulo de 12,5 a 15px. Se recupera el alto por interlineado y padding,
     nunca por tamano: el min-height:48px de la tarjeta sigue intacto. */
  html body .pr-modo{padding:10px 12px;gap:2px}
  html body .pr-modo-t{line-height:1.15}
  html body .pr-modo-s{line-height:1.25;letter-spacing:normal}

  /* 6.4 LA TARJETA DE /precios Y /empresas.
     `padding:clamp(20px,3.6vw,38px)` se resuelve SIEMPRE al minimo en celular,
     o sea 20px fijos por lado. Eso deja al boton de dentro con 238px utiles a
     320px de pantalla, y "HABLEMOS DE TU CASO" pide 241,8px con la flecha: se
     partia en dos renglones por 3,8px de tarjeta. Bajar la guarda a 16 le da
     254 y ademas quita 8px de alto por tarjeta en dos paginas que David abre en
     reuniones. Es aire, no contenido. */
  html body .pr-card{padding:18px 16px}
}

/* ---------------------------------------------------------------------------
   7. EL MENU LATERAL EN PANTALLAS CORTAS (defecto encontrado el 2026-08-10)
   ---------------------------------------------------------------------------
   El menu NO es el muro del que se quejo David, y conviene dejarlo escrito: en
   un iPhone 12 sobran 389px de negro debajo del ultimo enlace. Pero en 320x568
   pasa lo contrario y se desborda: 573px de contenido en 568 de alto en la
   portada, y 597 en 568 en /faq, donde el menu se recorta.

   El gate va por ALTO de pantalla y no por ancho: un telefono largo no tiene
   este problema y no hay por que apretarle el menu. 620px de alto deja dentro
   solo a los cortos (568) y fuera al de 640 en adelante.

   Lo que se recorta es padding, jamas el area de toque: la fila queda en
   max(48, 10+22,5+10) = 48px mas su linea de 1px. Sigue cumpliendo el piso.
   --------------------------------------------------------------------------- */
@media (max-width:760px) and (max-height:620px){
  html body .side-menu{padding-top:20px;padding-bottom:20px}
  html body .menu-head{margin-bottom:14px}
  html body .menu-links a{padding-top:10px;padding-bottom:10px}
}
