@charset "UTF-8";
/* ==========================================================
   movil.css - Contte Consultores (octubre 2026)
   Adapta la web a móviles y tablets SIN cambiar el ordenador:
   todo está dentro de la media query, así que en pantallas
   de más de 1000 px no se aplica nada.
   ========================================================== */

/* El botón ☰ no se ve nunca en ordenador */
.menu-movil-boton { display: none; }

@media screen and (max-width: 1000px) {

	html { -webkit-text-size-adjust: 100%; }
	body { overflow-x: hidden; background-color: #eff2b3; }
	*, *:before, *:after { box-sizing: border-box; }

	/* ---- Anchos fijos -> ancho de la pantalla ---- */
	.bannerArea, .topnavigationArea, .contentArea, .footerArea,
	.container, .topnavigationArea .container, .contentArea .container,
	.carrusel, #wrapper, .containerlogos, .containertrabajos {
		width: auto !important;
		max-width: 100%;
		float: none;
	}
	.contentArea .container { margin-top: 0; padding: 10px 0; border-radius: 0; }

	/* Imágenes y mapa nunca más anchos que la pantalla */
	img, iframe, object, embed { max-width: 100%; }
	img { height: auto; }
	iframe { display: block; margin: 0 auto 15px; }

	/* ---- Cabecera ---- */
	.bannerArea { height: auto; }
	.bannerArea .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; }
	.bannerArea .container:after { content: ""; display: table; clear: both; }
	.toplogo { width: auto; padding: 0; float: none; }
	.toplogo p { margin: 0; }
	.toplogo img { width: 120px; height: auto; display: block; }
	.buscararea { width: auto; float: none; padding: 0; font-size: 13px; }
	.buscararea p { display: none; }
	.buscararea a { display: inline-block; padding: 8px 4px; }
	.buscararea form { display: none; } /* buscador de Google: solo en ordenador */

	/* ---- Menú ☰ ---- */
	.topnavigationArea { background-size: auto; }
	.topnavigationgroup { float: none; width: 100%; padding: 0; }
	.menu-movil-boton {
		display: block; width: 100%; margin: 0; padding: 12px 16px;
		background: transparent; border: 0; text-align: left; cursor: pointer;
		color: #e0e667; font: bold 16px Arial, Helvetica, sans-serif;
	}
	ul.MenuBarHorizontal { display: none; width: 100%; margin: 0; padding: 0; }
	.topnavigationArea.menu-abierto ul.MenuBarHorizontal { display: block; }

	ul.MenuBarHorizontal li,
	ul.MenuBarHorizontal ul li {
		float: none; width: 100% !important; border: 0;
		border-top: 1px solid rgba(255,255,255,0.25);
		background-color: #00009c;
	}
	ul.MenuBarHorizontal li[style] { border-right-style: none !important; }
	ul.MenuBarHorizontal a { padding: 12px 16px; font-size: 15px; background-image: none !important; }
	ul.MenuBarHorizontal a.MenuBarItemSubmenu:after { content: " ▾"; }
	ul.MenuBarHorizontal li.submenu-abierto > a.MenuBarItemSubmenu:after { content: " ▴"; }

	/* Submenús: dentro del menú, debajo de su apartado, se abren al tocar */
	ul.MenuBarHorizontal ul,
	ul.MenuBarHorizontal ul ul,
	ul.MenuBarHorizontal ul.MenuBarSubmenuVisible,
	ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
		display: none; position: static; left: auto; top: auto;
		width: 100% !important; margin: 0; z-index: auto;
	}
	ul.MenuBarHorizontal li.submenu-abierto > ul { display: block; }
	ul.MenuBarHorizontal ul a { padding-left: 32px; background-color: #2a2aa0; }
	ul.MenuBarHorizontal ul ul a { padding-left: 48px; background-color: #4a4aaa; }
	ul.MenuBarHorizontal ul ul ul a { padding-left: 64px; background-color: #5a5ab8; }
	ul.MenuBarHorizontal iframe { display: none; }

	/* ---- Foto de cabecera (carrusel) ---- */
	.carrusel { height: auto; padding: 0; display: flex; flex-direction: column; }
	.carrusel > img { width: 100%; height: auto; display: block; }
	.fadein { width: 100%; height: 0; padding-bottom: 26.32%; /* 250/950 */ }
	.fadein img { width: 100%; height: auto; }
	#autor { order: 2; position: static; width: auto; padding: 4px 12px 0; color: #00009c; }
	#autor o { display: none; }
	#autor b { color: #00009c; }

	/* ---- Contenido ---- */
	p { text-align: left; }
	h1, h4 { float: none; width: auto; text-align: left; }
	h2 { margin-left: 0; }

	.content2, .content4, .content5, .content7, .containertrabajos, .auto-style1 {
		float: none; width: auto; padding-left: 15px; padding-right: 15px;
	}
	.content4 { margin-bottom: 10px; }

	/* Recuadros azules de la portada, uno debajo de otro */
	.contentleft, .contentmid, .contentright {
		float: none; width: auto; margin: 0 12px 15px; padding: 20px 20px 0;
	}
	.buttonwrapper { width: auto; }

	/* Testimonio (la frase va dentro de la imagen) */
	.content3 {
		float: none; width: auto; max-width: 400px; height: auto;
		aspect-ratio: 2 / 1; margin: 0 auto 15px; padding: 0;
		background-size: contain; background-repeat: no-repeat; background-position: center;
	}
	.content3 h4 { display: none; }

	/* Fotos laterales (Carreteras, Clientes, Edificación...) */
	.content6, .content8 {
		float: none; width: auto; height: auto; padding: 0 15px 15px;
	}
	.fadein2 {
		float: none; width: 275px; max-width: 100%; height: 230px;
		margin: 0 auto 15px; padding: 0;
	}
	.content7 img[style*="float"], .auto-style1 img[style*="float"],
	.content7 img[hspace], .imageright, .imageleft {
		float: none !important; display: block; margin: 10px auto !important;
	}

	/* Listas */
	ul.content { padding-left: 20px; margin-left: 0; }

	/* Logos de clientes y miniaturas de planos */
	.containerlogos { padding: 0 6px; }
	.contentlogos { padding: 0; margin: 0; text-align: center; }
	.contentlogos li, .alt_contentlogos li {
		float: none; display: inline-block; vertical-align: top;
		margin: 6px; width: 100px; height: 70px;
	}
	.page_navigation { padding: 0 9px 20px; }
	.page_navigation a { padding: 8px 10px; font-size: 13px; }
	.info_text { padding: 0 15px; }

	/* ---- Pie ---- */
	.footerArea { height: auto; }
	.footerArea .container { height: auto; background: #00009c; padding: 14px 12px; text-align: center; }
	.copyright, .direccion { float: none; width: auto; padding: 4px 0; color: #e0e667; }
	.direccion { line-height: 1.5; }
}