/* ==========================================================================
   FisioXperience | fx-movil.css
   Correcciones propias de la version movil.

   Por que un archivo aparte y no una seccion mas de wp-overrides.css:
   la revision de movil se hace por fases y se espera que crezca (barra
   superior, zonas de toque, longitud de pagina). Cuando un bloque de
   correcciones va a seguir engordando, tenerlo suelto permite apagarlo
   entero quitando una linea de functions.php.

   Ojo: esto NO es "todo el CSS de movil". Las @media de 1024, 900 y 620 px
   del diseno original siguen en fisioxperience.css, y las de la linea de
   tiempo (620) y las puertas (760) siguen en wp-overrides.css. Aqui solo
   vive lo que se corrigio DESPUES, a partir de la auditoria del 29 de
   agosto de 2026 (WEB-MOVIL/auditoria/AUDITORIA-MOVIL.md).

   Se encola despues de wp-overrides.css, asi que gana los empates sin
   !important. Solo hace falta !important donde haya que vencer a otro
   !important anterior, y esta senalado.

   Indice
     1.  Cabecera y cajon del menu
     1.b Margen fantasma del <ul> y barra fija sobre el menu abierto
     1.c El hueco blanco de la parte de arriba del cajon
     2.  Barra fija y final de pagina
     2.b Los botones se salian de la barra verde
     3.  Barra superior de contacto
     4.  Tamano minimo de los rotulos (y el epigrafe, que tenia lo suyo)
     5.  Zonas de toque del pie
     6.  Las rejillas de fichas, en horizontal
   ========================================================================== */


/* ==========================================================================
   1. CABECERA Y CAJON DEL MENU
   ========================================================================== */

/* El problema, medido el 29/08/2026 sobre el staging:

     - la pagina se podia deslizar 317 px hacia el lado en un movil de
       360 px (343 px en uno de 390), en las trece paginas;
     - al abrir la hamburguesa aparecia un panel de 112 px de alto con
       743 px de enlaces dentro: cero de los trece enlaces a la vista.

   Los dos salian de la misma linea. El cajon del menu se aparca fuera de
   la pantalla con `position:fixed` + `transform:translateX(100%)`, y lo
   que esta fijado a la ventana y se sale de ella no ensancha nada. Pero
   la cabecera llevaba `backdrop-filter:blur(12px)`, y un elemento con
   filtro deja de ser un elemento normal: pasa a ser el marco de
   referencia de todos sus descendientes `fixed`.

   A partir de ahi el cajon ya no cuelga de la ventana sino de la
   cabecera. Y eso trae las dos consecuencias a la vez: lo que sobresale
   por la derecha se convierte en ancho de pagina de verdad, y el
   `inset:0` que pedia toda la altura de la pantalla pasa a pedir toda la
   altura de la cabecera, que son 112 px.

   Es la diferencia entre una puerta corredera atornillada a la pared del
   edificio y otra atornillada a un armario: con la segunda, al deslizarla
   arrastras el armario.

   La solucion es apagar el desenfoque por debajo de 900 px y devolver el
   fondo solido. En una pantalla de seis pulgadas el cristal esmerilado de
   la cabecera es un efecto que nadie mira, y encima cuesta un repintado
   por cada pixel de scroll justo en el hardware mas flojo.

   Si algun dia se quiere recuperar el desenfoque en movil, la via es
   llevarlo a un pseudoelemento (`.fx-header::before` con position
   absolute e inset 0): un pseudoelemento no es antepasado del cajon, asi
   que no puede convertirse en su marco de referencia. Cuesta mas codigo y
   obliga a vigilar el apilamiento con el menu abierto. */

@media (max-width:900px){
  .fx-header{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:var(--fx-fondo);
  }
}


/* --------------------------------------------------------------------------
   1.b Dos restos que solo se vieron una vez el cajon funcionaba
   -------------------------------------------------------------------------- */

/* El margen fantasma del navegador. `.fx-nav` es un <ul>, y la hoja por
   defecto de todos los navegadores le pone `margin:1em 0`. El diseno pone
   a cero el margen de los <ul> de DENTRO del menu (`.fx-nav ul{margin:0}`),
   pero nunca el del propio `.fx-nav`. En escritorio eso no se nota porque
   es un elemento flexible dentro de una fila; en movil, convertido en
   cajon a pantalla completa, esos 16 px se traducian en una franja de
   pagina asomando por arriba y por abajo del panel abierto.

   Es el rodapie que nadie quita antes de alicatar: da igual en la pared
   grande y canta en cuanto pones el panel a ras de suelo. */
@media (max-width:900px){
  .fx-nav{ margin:0; }
}

/* La barra fija por encima del menu abierto. `.fx-header` lleva
   `z-index:60` y `position:sticky`, asi que crea su propio contexto de
   apilamiento: todo lo que vive dentro de la cabecera queda encerrado en
   el nivel 60 y NO puede subir por encima de la barra fija, que esta en
   el 70. Subirle el z-index al cajon no sirve de nada, porque el techo se
   lo pone su padre.

   Asi que en vez de pelear con el apilamiento se retira la barra mientras
   el menu esta abierto, que ademas es lo correcto: sus dos botones ya
   estan dentro del menu ("Reservar cita") y el visitante que ha abierto
   el menu esta eligiendo destino, no llamando.

   Se hace en CSS con :has() y no tocando el JS para no rehacer
   fisioxperience.js: el script ya pone `is-open` en el cajon, y aqui solo
   se lee. Si un navegador viejo no soporta :has(), la regla se ignora y
   se vuelve al comportamiento anterior, que era feo pero no roto. */
@media (max-width:900px){
  body:has(.fx-nav.is-open) .fx-movil{ display:none; }
}



/* --------------------------------------------------------------------------
   1.c El hueco blanco de la parte de arriba del cajon
   -------------------------------------------------------------------------- */

/* El cajon abria con 5rem (80 px) de relleno superior. Ese relleno no era
   decorativo: existia para que el primer enlace no quedara debajo de la
   hamburguesa, que vive en la cabecera y se queda encima del panel. Pero en
   un movil se lee como una franja blanca vacia antes de que empiece el menu,
   y encima empuja los ultimos enlaces fuera de la vista.

   La solucion no es quitar el relleno a secas, porque entonces el primer
   enlace se mete debajo del boton. Lo que se hace es fijar la hamburguesa a
   la esquina superior derecha de la pantalla mientras el menu esta abierto,
   que es donde todo el mundo espera encontrar el cierre, y dejar libre esa
   esquina en el primer enlace.

   Es la diferencia entre reservar toda la primera fila de un teatro por si
   llega alguien, y sentar a esa persona en su butaca: el resto de la fila
   queda disponible.

   La hamburguesa puede fijarse a la ventana porque la cabecera ya no lleva
   `backdrop-filter` en movil (seccion 1): si lo llevara, `position:fixed`
   quedaria anclado a la cabecera y no a la pantalla. Los dos arreglos van
   juntos. */
@media (max-width:900px){
  .fx-nav{ padding:1.15rem 1.2rem 2rem; }

  /* La esquina que ocupa el boton de cierre: que el texto nunca llegue ahi. */
  .fx-nav > li:first-child > a{ padding-right:3.2rem; }

  body:has(.fx-nav.is-open) .fx-burger{
    position:fixed;
    top:.55rem;
    right:.75rem;
  }
}

/* ==========================================================================
   2. BARRA FIJA Y FINAL DE PAGINA
   ========================================================================== */

/* La barra inferior de "Llamar | Pedir cita" mide 63 px y se comia los
   ultimos 39 px de todas las paginas, incluida la linea legal, que
   quedaba cortada por la mitad.

   El diseno original ya lo tenia resuelto: en la misma @media en la que
   enciende `.fx-movil`, fisioxperience.css reservaba `padding-bottom:72px`
   en el body. Lo que paso es que la primera regla de wp-overrides.css
   (`body{padding:0 !important}`), escrita para neutralizar el relleno que
   impone Twenty Twenty-Five, se lo llevo por delante de paso.

   No es culpa de nadie: es lo que pasa al repintar el suelo de una
   habitacion sin levantar antes el felpudo que habias puesto tu.

   Aqui hace falta !important porque hay que vencer al !important de la
   seccion 1 de wp-overrides.css, no por gusto.

   El `env(safe-area-inset-bottom)` es el aire extra de los iPhone con
   barra de gestos: sin el, la barra fija se sienta encima de la raya del
   sistema. En un telefono sin esa barra, `env()` vale 0 y la cuenta se
   queda en los 72 px de siempre. */

/* ACTUALIZADO EN 1.21.0: la barra fija de abajo ya no existe. Sus dos
   acciones (telefono y WhatsApp) subieron a la cabecera, que es pegajosa
   y esta siempre a la vista, asi que no hay nada que reservar en el pie
   y la pagina recupera esos 72 px. La regla se deja documentada y
   desactivada porque explica por que hizo falta en su dia:

   @media (max-width:900px){
     body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important; }
   }
*/


/* --------------------------------------------------------------------------
   2.b Los botones se salian de la barra verde
   -------------------------------------------------------------------------- */

/* Los dos botones asomaban por fuera de la barra, sobre todo por los lados.
   No era que fueran grandes de mas: era geometria. La barra lleva
   `border-radius:100px` en las esquinas de arriba, y con solo 63 px de alto
   ese radio dibuja un arco muy abierto. A la altura del borde superior de
   los botones, el verde todavia no habia empezado: arrancaba a 54 px del
   margen, y los botones empezaban a 13.

   Una curva de 100 px de radio en una pieza de 63 px de alto no es una
   esquina redondeada, es media circunferencia. Como poner una puerta de
   arco de medio punto en un hueco de metro y medio: lo que sobra no es la
   puerta, es el arco.

   Se corrigen las tres cosas a la vez: el radio baja a 34 px —sigue siendo
   capsula, en la linea del resto de la web—, los botones se separan mas del
   borde y se encogen un punto.

   El alto se queda en 44 px a proposito y no baja mas: es el minimo que
   Apple recomienda para algo que se pulsa con el pulgar, y estos dos
   botones son el telefono y la cita, o sea lo unico que de verdad tiene que
   funcionar en un movil. Lo que encoge es el ancho, que es lo que hacia que
   se salieran. */
@media (max-width:900px){
  .fx-movil{
    padding:.55rem 1.5rem calc(.55rem + env(safe-area-inset-bottom));
    border-radius:34px 34px 0 0;
    gap:.6rem;
  }
  .fx-movil .fx-btn{
    font-size:.86rem;
    padding:.95em 1em;
  }
}


/* ==========================================================================
   3. BARRA SUPERIOR DE CONTACTO
   ========================================================================== */

/* En escritorio `.fx-topbar` es una linea fina de datos centrada. En un movil
   de 390 px sus cuatro datos se partian en tres filas centradas, con hueco a
   los lados: 83 px de la primera pantalla gastados en letra de 11,7 px, y un
   bloque verde que no llenaba su propio ancho y quedaba desconectado del
   logotipo de abajo.

   Centrar funciona cuando hay una cosa. Con cuatro y poco ancho, centrar
   deja los bordes desiguales y obliga a una fila mas. Es la mesa puesta:
   cuatro platos amontonados en el centro ocupan mas sitio y se ven peor que
   cuatro platos repartidos por el mantel.

   Asi que en movil pasa a rejilla de dos columnas y dos filas, llenando el
   ancho: las dos ubicaciones a la izquierda, el telefono y el correo a la
   derecha. `grid-auto-flow:column` es lo que hace que el reparto sea por
   columnas —primero baja, luego salta— y no el reparto por filas de siempre.

   El ancho del contenedor sube de `100% - 2.4rem` a `100% - 1.6rem` solo
   aqui: son 12,8 px mas de linea, que es justo lo que falta para que la
   direccion de la clinica no se parta. Lleva `!important` porque la
   seccion 3 de wp-overrides.css fija el ancho de `.fx-wrap` con
   `!important`; no es por gusto.

   Y no se pone `white-space:nowrap`. Se probo, y por debajo de 340 px de
   pantalla empujaba la pagina 10 px de lado: justo el fallo que arreglamos
   en la seccion 1. Sin el, en una pantalla muy estrecha la direccion se
   parte en dos y la barra crece un poco, que es feo pero no roto.

   Medido: 83 px -> 50 px, en dos filas, de 360 px de pantalla en adelante. */
/* Afinado en 1.13.0: al subir la letra de la barra a 12 px (seccion 4) la
   direccion de la clinica dejaba de caber en su celda en pantallas de 360 px
   y se partia, con lo que la barra crecia otra vez. Se recupera el sitio por
   los dos lados: 3,2 px mas de linea por cada margen y 4 px menos de hueco
   entre columnas. Con eso vuelve a entrar de 360 px en adelante. */
@media (max-width:900px){
  .fx-topbar .fx-wrap{
    width:min(100% - .9rem, var(--fx-ancho)) !important;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    grid-auto-flow:column;
    gap:.1rem .45rem;
    padding:.42rem 0;
    justify-content:stretch;
  }
  .fx-topbar .fx-wrap > :nth-child(3),
  .fx-topbar .fx-wrap > :nth-child(4){ justify-self:end; }
}


/* ==========================================================================
   4. TAMANO MINIMO DE LOS ROTULOS
   ========================================================================== */

/* La auditoria conto entre trece y veinticinco elementos de texto por pagina
   por debajo de 12,5 px, con un minimo de 10,6. Son todos rotulos, no texto
   corrido, asi que nadie tiene que leerse un parrafo a ese tamano. Pero van
   en versalitas y con el interletraje abierto, y eso, que en una pantalla
   grande se lee como elegancia, en un movil al sol se lee como nada.

   Una clinica se busca de pie, en la calle, con una mano ocupada. Ese es el
   sitio donde hay que poder leer el telefono, no un escritorio a las once de
   la noche.

   Se sube el suelo a 12 px, que es poco pedir, y no se toca ninguno de los
   que ya lo cumplen. En escritorio se quedan como estaban: alli el problema
   no existe.

     .fx-badge y .fx-sub__tag   10,6 -> 12   etiquetas y rotulos del menu
     barra superior             10,9 -> 12   telefono y correo
     .fx-eyebrow                11,5 -> 12   el epigrafe sobre cada titular
     .fx-puerta__num            11,5 -> 12   "Puerta 1 | Vas tu"
     h4 del pie                 11,8 -> 12   Ubicaciones, Horario, Precios */
@media (max-width:900px){
  .fx-badge,
  .fx-topbar,
  .fx-topbar a,
  .fx-footer h4,
  .fx-puerta__num,
  .fx-eyebrow{ font-size:.75rem; }

  /* `.fx-sub__tag` necesita mas peso de selector que los demas: el tamano
     original se lo pone una regla anidada y con `.fx-sub__tag` a secas
     perdia el pulso. No es capricho, esta comprobado: con la regla corta se
     quedaba en 10,56 px. */
  .fx-nav .fx-sub .fx-sub__tag{ font-size:.75rem; }
}

/* El epigrafe, aparte, porque tenia un problema propio.

   "Clinica en Posadas | Visitas a domicilio en Cordoba" salia en TRES lineas
   y la segunda empezaba con un espacio suelto, asi que el bloque quedaba
   descuadrado por la izquierda y la barra separadora se quedaba colgando al
   final de la primera linea.

   La causa esta en el HTML: el separador se escribio como `&nbsp;|&nbsp;`,
   con espacios duros a los dos lados. Un espacio duro le prohibe al navegador
   cortar ahi, asi que "Posadas | Visitas" queda pegado en una sola pieza y el
   corte se va a un sitio peor. Es como unir tres palabras con cinta adhesiva:
   el navegador ya no puede cortar donde le vendria bien, y corta donde puede.

   Lo correcto seria quitar esos dos `&nbsp;` del contenido, pero estan en las
   trece paginas y esto se arregla sin tocar el contenido: el epigrafe medido
   a pelo ocupa 406 px, y la caja mide 337. Bajando el interletraje de .12em a
   .04em se queda en 373 px, que ya entra en dos lineas; `text-wrap:balance`
   las reparte parejas (282 y 235 px) en vez de dejar una larga y una corta.

   Aviso honesto: el `&nbsp;` sigue ahi. Si algun dia el epigrafe crece o el
   titular cambia de sitio, volvera a partir mal, y entonces si toca editar el
   contenido. `text-wrap:balance` tampoco lo entienden los navegadores
   antiguos: alli quedan dos lineas desiguales, que sigue siendo mejor que
   tres. */
/* Corregido en 1.13.1: la primera version bajo el interletraje de TODOS los
   epigrafes en movil, de .18em a .04em. Eso arreglaba el de portada y de paso
   apretaba los otros treinta y pico de la web, que no tenian ningun problema
   y estaban asi por diseno. El apano tiene que caer solo donde esta el
   problema: el epigrafe largo de la portada es el unico que lleva el
   modificador `--limpio`, comprobado pagina por pagina. Los heroes de las
   demas paginas son mas cortos y entran en una linea. */
@media (max-width:900px){
  .fx-eyebrow--limpio{
    letter-spacing:.04em;
    text-wrap:balance;
  }
}


/* ==========================================================================
   5. ZONAS DE TOQUE DEL PIE
   ========================================================================== */

/* El pie tenia catorce enlaces de 16 px de alto separados por 16 px de aire.
   Lo que responde al dedo son esos 16 px; el resto no es de nadie.

   Apple recomienda 44 px y Google 48 para cualquier cosa que se pulse con el
   pulgar. Una yema apoya entre 8 y 10 milimetros, o sea mas que la fila
   entera contando el hueco. Acertar con "Fisioterapia oncologica" y no con
   "Fisioterapia neurologica" era cuestion de punteria.

   Se le da a cada enlace relleno propio hasta los 44 px y se ajusta el hueco
   entre ellos para que las zonas se toquen. Las dos cosas van juntas y la
   segunda importa tanto como la primera: sin hueco muerto, cada pixel de la
   columna pertenece a algun enlace y un dedo que apunta regular sigue
   acertando. Son las teclas de un ascensor: grandes y pegadas, para que no
   se pueda pulsar "entre" dos.

   Corregido en 1.13.2, y merece contarse porque la primera version la lie.
   El primer intento fue `display:block` en los enlaces del pie. Sobre el
   papel es lo obvio; en la practica rompio una frase. En la columna de
   Horario hay una linea que dice "Sabados, domingos y festivos: solo
   urgencias a domicilio en Cordoba", y el trozo "urgencias a domicilio en
   Cordoba" es un enlace DENTRO de la frase. Al volverlo bloque, la frase se
   partio en tres pedazos y el punto final se quedo solo en una linea.

   La leccion: "los enlaces de una lista" y "los enlaces que ocupan toda su
   linea" no son lo mismo, y el CSS no sabe distinguirlos porque no puede
   preguntar por el texto que rodea a un elemento.

   La salida es no cambiar el tipo de caja. Un enlace en linea con relleno
   vertical NO empuja a los renglones de al lado —el relleno no cuenta para
   la maquetacion— pero SI agranda la zona que responde al dedo. Asi que el
   enlace suelto de una lista crece a 44 px sin mover nada, y el que vive
   dentro de una frase se queda donde estaba, con la frase entera.

   Es un felpudo invisible: no levanta el suelo, pero pisarlo cuenta.

   El hueco entre elementos sube a 1,25rem, que son exactamente los 20 px que
   los dos rellenos vecinos necesitan para tocarse sin montarse. Medido: doce
   enlaces de 44 px, cero huecos muertos entre ellos y cero solapamientos.
   Toda la columna esta viva y cada pixel pertenece al enlace mas cercano.

   Cuesta 121 px de pie (1.270 -> 1.391), menos que los 182 del primer
   intento. Se acepta a proposito: al pie llega quien ya sabe lo que busca, y
   ahi la punteria vale mas que el ahorro de scroll. */
@media (max-width:900px){
  .fx-footer ul{ gap:1.25rem; }
  .fx-footer li a{ padding:.875rem 0; }
}


/* ==========================================================================
   6. LAS REJILLAS DE FICHAS, EN HORIZONTAL
   ========================================================================== */

/* El problema de fondo es el largo de las paginas: la portada mide once
   pantallas de movil. Y no viene de los respiros entre secciones, viene de
   que cada rejilla de tres fichas se convierte en tres filas. La altura no
   se suma, se multiplica.

   Recortar texto era una via. La otra, que es la que se eligio, es no quitar
   nada y cambiar la direccion: las fichas pasan a un carrusel horizontal,
   con lo que tres fichas ocupan el alto de una.

   No es un patron nuevo en esta web: `.fx-rail` ya hace esto en tres sitios
   de la portada. Por eso los numeros de aqui son los suyos y no otros
   —hueco de 1,1rem, ficha de 255 px, anclaje al inicio—, para que las dos
   clases de carrusel se comporten igual y la ficha siguiente asome lo mismo.
   Dos carruseles distintos en la misma pagina se notan.

   Medido, en pantallas de movil de 390 px:

     Posadas             6,8 -> 5,6
     Urgencia            8,6 -> 7,8
     Equipo              6,1 -> 5,5
     Inicio             11,3 -> 10,9

   La portada apenas baja porque solo tiene una rejilla: su largo esta en los
   bloques de texto con foto y en los huecos de imagen, que se quedan.

   EL PRECIO, Y POR QUE SE ACOTA
   Un carrusel esconde. De tres fichas apiladas se ven las tres; en carrusel
   se ve una y media. Eso esta bien cuando las fichas son hermanas —tres
   opciones equivalentes, y con ver una entiendes de que van las otras— y
   esta mal cuando son los pasos de un razonamiento, porque el que no desliza
   se queda sin el argumento.

   Un menu de restaurante se puede leer de un vistazo o pasando paginas, da
   igual: son platos, estan al mismo nivel. Una receta no: si escondes los
   pasos dos y tres detras de un gesto, la mitad de la gente se queda con el
   pollo crudo.

   Por eso esto cae solo sobre `.fx-grid`, que por construccion son fichas
   hermanas, y no sobre los `.fx-split`, que son el hilo del argumento.

   Y con una excepcion dentro: LAS TARIFAS SE QUEDAN APILADAS. Una rejilla
   que contiene `.fx-precio` no se convierte en carrusel, porque un precio no
   se lee, se compara: 39 EUR suelto no dice nada, 39 contra 35 contra 33 lo
   dice todo. Esconder dos de los tres detras de un deslizamiento es quitarle
   al visitante justo la operacion que ha venido a hacer. Cuesta 0,6
   pantallas en Posadas y se pagan de buena gana.

   `:has()` es lo que permite distinguirlas sin tocar el HTML. Si un
   navegador viejo no lo entiende, la regla entera se ignora y todo se queda
   apilado como antes: se pierde el ahorro, no se rompe nada. */

@media (max-width:900px){
  .fx-grid:not(:has(.fx-precio)){
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:1.1rem;
    padding-bottom:1.2rem;
    scrollbar-width:thin;
  }
  .fx-grid:not(:has(.fx-precio)) > *{
    flex:0 0 255px;
    scroll-snap-align:start;
    min-width:0;
  }
}


/* ==========================================================================
   7. LOS DOS ULTIMOS REMATES DE LA BARRA SUPERIOR
   ========================================================================== */

/* 7.a Los dos rotulos de ubicacion, a 12 px

   La seccion 4 subio el suelo de los rotulos a 12 px, pero se quedaron fuera
   los dos textos de ubicacion de la barra superior:

     "Clinica | Calle Gaitan 18, Posadas"
     "A domicilio | Cordoba capital"

   No fue descuido de la regla, fue peso de selector. La seccion 4 escribio
   `.fx-topbar` y `.fx-topbar a`; el telefono y el correo llevan su propia
   regla, asi que subieron. Los dos `<span>` no tienen ninguna, de modo que
   heredan de `.fx-topbar .fx-wrap{font-size:.68rem}` de fisioxperience.css,
   que con dos clases pesa mas que `.fx-topbar` con una. Herencia contra
   herencia gana la regla que apunta al padre mas cercano.

   Se arregla apuntando exactamente a ese contenedor, con el mismo peso y mas
   tarde en la cascada. Medido a 360, 390 y 430 px: la barra sigue midiendo
   53 px y las dos direcciones siguen entrando en una sola linea cada una.
   No cuesta ni un pixel.

   El limite inferior de 340 px no es un numero redondo puesto al azar: por
   debajo de esa anchura la direccion de la clinica ya no cabe ni a 10,88 px
   y la barra crece a 69 px, que es la degradacion que aceptamos en agosto a
   cambio de no bajar la letra. Subirla a 12 px alli la llevaria a 92 px. Asi
   que la mejora entra a partir de 340 px, que es donde es gratis, y la
   pantalla muy estrecha se queda exactamente como esta hoy. */
@media (min-width:340px) and (max-width:900px){
  .fx-topbar .fx-wrap{ font-size:.75rem; }
}


/* 7.b El telefono y el correo, con toda la barra por zona de toque

   Eran los dos unicos enlaces importantes de la web que no llegaban a los
   44 px que recomienda Apple: cajas de 19 px de alto por 72 y 137 de ancho.
   Todo lo demas —pie, botones, acordeon, barra fija— ya estaba resuelto.

   Aqui no vale el truco del pie (seccion 5). Alli los enlaces son elementos
   en linea dentro de un parrafo, y a un elemento en linea el relleno vertical
   le agranda la zona de toque sin empujar a los renglones vecinos. Estos dos
   son celdas de una rejilla, y una celda de rejilla si se hace mas alta con
   relleno: la barra creceria, y en agosto costo trabajo bajarla de 83 a 50.

   La salida son dos movimientos que no ocupan sitio:

   1. El enlace pasa a ocupar el ancho entero de su columna en vez de
      encogerse a su texto, con `text-align:right` para que se vea
      exactamente donde se veia. De 72 px de ancho a 137.

   2. La altura se estira con un pseudoelemento absoluto, que se pinta pero no
      ocupa: el de arriba crece hacia el relleno de la barra, el de abajo
      hacia el suyo, y los dos se reparten el hueco de 1,6 px que hay entre
      ellos. Ni se pisan ni dejan tierra de nadie.

   Comprobado midiendo pixel a pixel la columna derecha de la barra, con
   `elementFromPoint`, a 320, 360 y 390 px:

                     Antes            Ahora
     sin dueno        13 px            0 px
     telefono         20 px           26 px
     correo           20 px           27 px
     alto de la barra 53 px           53 px

   No llega a 44 px, y no puede llegar sin devolver los 33 px de primera
   pantalla que recuperamos en agosto: dos zonas de 44 px en una barra de 53
   se pisarian la una a la otra. Lo que si se consigue es que la superficie
   del telefono pase de 1.440 a 3.562 px cuadrados, dos veces y media mas, y
   que no quede un solo pixel muerto entre los dos. Son las teclas de un
   ascensor: grandes y pegadas, para que no se pueda pulsar "entre" dos.

   El boton de llamar de verdad, el que tiene que funcionar con el pulgar y a
   la primera, sigue siendo el de la barra fija de abajo, que mide 44 px de
   alto y esta siempre a la vista. */
@media (max-width:900px){
  .fx-topbar .fx-wrap > a:nth-child(n){
    justify-self:stretch;
    text-align:right;
    position:relative;
  }
  .fx-topbar .fx-wrap > a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
  }
  .fx-topbar .fx-wrap > a:nth-child(3)::after{ top:-.42rem; bottom:-.05rem; }
  .fx-topbar .fx-wrap > a:nth-child(4)::after{ top:-.05rem; bottom:-.42rem; }
}


/* 7.c Los tres rotulos que se habian quedado detras del anterior

   Al medir el minimo de cada pagina, el rotulo mas pequeno era siempre el de
   la barra superior, y tapaba a los que venian justo detras. Con la barra ya
   a 12 px salieron a la luz tres mas, uno por sitio:

     .fx-ahorro           11,2  px   el "ahorras X" de los bonos de Posadas
     .fx-paso__marca      11,84 px   la marca de cada paso del proceso
     .wp-block-post-date  11,52 px   la fecha de cada entrada del blog

   Los tres son de la misma familia que los de la seccion 4 —rotulos cortos,
   no texto corrido— asi que se les aplica el mismo suelo. Medido antes y
   despues a 390 px: Posadas +4 px, oncologica +1 px, blog +3 px de alto de
   pagina. Cuatro pixeles de scroll a cambio de que no quede en la web ni un
   texto por debajo de 12 px.

   La fecha del blog se apunta por su clase de WordPress y no por la etiqueta
   `time` a secas: `time` puede aparecer en sitios que no son la fecha de una
   entrada, y una regla que cae donde no la llaman es justo el error que ya
   se cometio dos veces en la 1.13. */
@media (max-width:900px){
  .fx-ahorro,
  .fx-paso__marca,
  .wp-block-post-date,
  .wp-block-post-date time{ font-size:.75rem; }
}