/*
 * Repaso de la vista movil.
 *
 * Todo lo de aqui es correccion de lo que se rompe o estorba por debajo de
 * 768 px. Cada bloque dice que se vio y con que medida, para que se pueda
 * discutir el criterio y no solo el codigo.
 *
 * Medido con la pantalla de un telefono corriente: 390 x 844.
 */

@media ( max-width: 767px ) {

	/* ----------------------------------------------- Los botones flotantes
	 *
	 * Habia tres cosas fijas peleandose por la esquina inferior derecha: la
	 * barra de "¿Hablamos de tu negocio?" (abajo del todo), el boton redondo
	 * del diagnostico (a 90 px del borde) y el de volver arriba (a 80 px y
	 * 50 px de la derecha). Los dos ultimos se solapaban: 322-372 contra
	 * 290-340 en horizontal y 704-754 contra 714-764 en vertical. En las
	 * capturas se ve el cuadrado naranja metido dentro del circulo.
	 *
	 * Se ponen en columna: la barra abajo del todo, el circulo del
	 * diagnostico encima -ya estaba colocado a 90 px, ocupa hasta 140- y el
	 * de volver arriba encima de ese, alineado a la misma derecha.
	 */
	/*
	 * Solo en .open. El tema esconde este boton sacandolo de la pantalla con
	 * bottom:-10% y lo saca anadiendo .open al bajar; una regla sobre
	 * .scroll-top a secas -y encima con !important- le gana tambien al
	 * estado oculto y lo deja fijo desde que se carga la pagina.
	 */
	.scroll-top.open {
		right: 18px !important;
		bottom: 154px !important;
	}

	/* --------------------------------------------- La tabla comparativa
	 *
	 * En /planes/ la tabla mide 680 px de ancho minimo dentro de una caja de
	 * 274: entra en un contenedor con scroll, si, pero lo unico que se ve son
	 * los nombres de las filas. Las cuatro columnas de planes -Basico, Pro,
	 * Negocios, Empresas- quedan fuera y nada indica que se pueda arrastrar,
	 * asi que en un movil la comparativa sencillamente no existe.
	 *
	 * Tres cosas: que la caja ocupe todo el ancho de la pantalla en vez de
	 * los 274 que le dejaban los rellenos, que la primera columna se quede
	 * fija al desplazar -si no, se arrastra y ya no se sabe que fila se esta
	 * leyendo- y un degradado a la derecha que avisa de que hay mas.
	 */
	.waad-compare {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.waad-compare-inner {
		position: relative;
	}

	/*
	 * La tabla llevaba overflow:hidden para redondearse las esquinas, y eso
	 * anula el position:sticky de la primera columna: al arrastrar se iba con
	 * las demas y quedaban cuatro cifras sin saber de que fila son. El recorte
	 * y el redondeo pasan a la caja que hace el scroll, que es la que toca.
	 */
	.waad-compare table {
		overflow: visible !important;
		min-width: 560px !important;
		border-radius: 0 !important;
	}

	.waad-compare-scroll {
		background: #FFFFFF;
		border-radius: 16px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.waad-compare-scroll th,
	.waad-compare-scroll td {
		scroll-snap-align: start;
	}

	/*
	 * La columna de los conceptos: fija al desplazar, y con ancho propio. Se
	 * dimensionaba al texto mas largo -"Propuestas comerciales automaticas"- y
	 * ocupaba la pantalla entera, con lo que de "Basico" solo asomaba el
	 * rabillo. Lleva fondo para que las demas no se le transparenten por
	 * debajo al pasar.
	 */
	.waad-compare-scroll th:first-child,
	.waad-compare-scroll td:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		width: 148px;
		min-width: 148px;
		max-width: 148px;
		white-space: normal;
		background: #FFFFFF;
		box-shadow: 1px 0 0 rgba( 31, 48, 76, .08 );
	}

	/* El rayado de filas es rgba(31,48,76,.04) sobre blanco. La columna fija
	   necesita el color ya resuelto: al ser opaca, una transparencia dejaria
	   ver pasar las celdas de debajo. */
	.waad-compare-scroll tbody tr:nth-child( odd ) th:first-child,
	.waad-compare-scroll tbody tr:nth-child( odd ) td:first-child {
		background: #F5F6F7;
	}

	/* El degradado del borde: deja de pintarse al llegar al final. */
	.waad-compare-inner::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44px;
		pointer-events: none;
		background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, .92 ) );
		opacity: 1;
		transition: opacity .2s ease;
	}

	.waad-compare-inner.waad-compare-final::after {
		opacity: 0;
	}

	.waad-compare-aviso {
		margin: 0 8px 10px;
		font-size: 12px;
		color: #6B7280;
	}

	/* ------------------------------------------------ El formulario de contacto
	 *
	 * La columna que lo contiene llevaba 60 px de relleno a la izquierda y 85
	 * a la derecha tambien en movil: el formulario se quedaba en 225 px de los
	 * 390 de la pantalla, desplazado a la derecha y sin alinear con los iconos
	 * de redes que tiene encima, que empiezan en el borde.
	 */
	.elementor-element-65f6530 > .elementor-widget-wrap.elementor-element-populated {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* ------------------------------------------------- El aire entre secciones
	 *
	 * Las secciones propias llevan 100 px arriba y 100 abajo, que en un
	 * escritorio esta bien y en un movil son 200 px seguidos en blanco: casi
	 * un cuarto de la pantalla entre un bloque y el siguiente. Se bajan a 56.
	 *
	 * Se nombran una a una en vez de poner una regla general sobre las
	 * secciones de Elementor: hay varias con relleno cero a proposito -la
	 * portada, sin ir mas lejos- y una regla ciega les meteria hueco donde
	 * ahora no hay.
	 */
	#waad-auth-section,
	#waad-case-studies,
	#waad-home-stats,
	#waad-services-home-v2,
	#waad-final-cta,
	#waad-faq,
	#waad-blog-heading,
	.postbox__area.blog-single-area {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	/*
	 * La portada de WAAD Conecta: el relleno de arriba tiene que dejar pasar
	 * la cabecera entera.
	 *
	 * La cabecera es absoluta y mide 86 px en movil, asi que no empuja nada:
	 * se pinta encima. Al bajar este relleno a 72 px la etiqueta de la
	 * portada quedaba a 124 y la cabecera llegaba a 138: catorce pixeles por
	 * debajo, cortada. Vuelve a un valor que la libra con holgura.
	 */
	.wc-hero {
		padding-top: 112px !important;
		padding-bottom: 24px !important;
	}

	/*
	 * Y aun asi la portada terminaba en 890 con una pantalla de 844: al
	 * entrar se veia cortada por abajo. El hueco sobrante estaba todo en los
	 * margenes, no en el texto, asi que se aprieta sin tocar ni una palabra.
	 */
	.wc-hero .wc-eyebrow {
		margin-bottom: 18px !important;
	}


	/*
	 * El listado de casos es lo primero de su pagina y la cabecera, que es
	 * absoluta, se le pone encima: con 56 px de relleno el epigrafe quedaba
	 * a 90 y la cabecera llega a 120, o sea treinta pixeles por debajo. Le
	 * hace falta el mismo hueco que a la portada de WAAD Conecta.
	 */
	#waad-case-studies-archive {
		padding-top: 112px !important;
	}

	/* Estas dos cierran contra el bloque de abajo y no llevaban hueco
	   inferior: se respeta. */
	#waad-case-studies,
	#waad-blog-heading {
		padding-bottom: 0 !important;
	}

	/*
	 * La pagina de planes abria con 124 px de blanco entre la cabecera y la
	 * etiqueta "Precios". El bloque lleva 200 px de relleno arriba, que en
	 * escritorio es lo que lo separa de la cabecera; en un movil, con la
	 * cabecera acabando en 120, sobran mas de cien.
	 */
	.waad-pricing-block {
		padding-top: 128px !important;
	}

	/* ------------------------------------------- La barra de anuncio
	 *
	 * El texto entero son 54 caracteres y en 390 px ocupa dos lineas: 52 px
	 * de alto antes de que empiece nada, y empujando la cabecera. Se queda
	 * solo la llamada a la accion, que es lo que hay que leer; la entradilla
	 * se pinta a partir de 768 px.
	 */
	.site-topbar__intro {
		display: none;
	}

	.site-topbar__link {
		white-space: nowrap;
	}

	/* ------------------------------------------------------- Letra minima
	 *
	 * Habia etiquetas a 11 px. En una pantalla de telefono eso ya cuesta de
	 * leer, y son justo las que dan contexto: "Servicio", "Mas popular".
	 */
	.waad-ce-row-label,
	.waad-plan-badge,
	.wc-figcaption,
	figcaption {
		font-size: 12px !important;
	}
}

/*
 * El cursor de adorno del tema, fuera de las pantallas tactiles.
 *
 * El tema sustituye el puntero del raton por un anillo naranja de 30 px y un
 * punto de 6 px que lo siguen. En un movil no hay raton que seguir, asi que
 * se quedan quietos donde los dejo el navegador -en la esquina de arriba a
 * la izquierda, en -15,-15- y se ve media circunferencia naranja pegada al
 * borde en todas las paginas. Se pintan con z-index 10000000, por encima de
 * todo lo demas.
 *
 * Se filtra por el puntero y no por el ancho: lo que sobra no es la pantalla
 * pequeña, es que no haya raton. Asi tambien desaparece en tabletas, donde
 * la ventana es ancha y el problema es el mismo.
 */
@media ( hover: none ), ( pointer: coarse ) {

	.mouseCursor {
		display: none !important;
	}
}