/* ==========================================================================
   decoratel.net/butacas-de-teatro (CodeIgniter) - adaptación a tableta y móvil.
   Solo estilos: el contenido, los textos, los títulos y los enlaces no cambian.
   Por encima de 960px no se aplica nada: el escritorio se ve exactamente igual que antes.
   ========================================================================== */
@media screen and (max-width: 959px) {
	body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

	/* contenedores de ancho fijo -> ancho de la pantalla */
	#header-menu, #marquesina .marquesina-imagen, #migas .migas-navegacion, #content, #righ-side, #footer-content,
	#footer-content .datos, #footer-content .logo, #footer-content .links {
		width: auto !important; max-width: 100%; box-sizing: border-box;
	}
	#content { margin: 10px 8px; }
	#righ-side { float: none; }

	/* menú: ver el bloque MENÚ MÓVIL al final */
	#header-menu { border: 0 !important; box-shadow: none !important; }
	.datosCabecera { display: none; } /* bloque vacío colocado con márgenes fijos de escritorio */

	/* imagen de la marquesina (894x120): se escala a lo ancho */
	#marquesina .marquesina-imagen { height: auto !important; }
	#marquesina .marquesina-imagen img { width: 100% !important; margin-left: 0 !important; height: auto; display: block; } /* lleva width:907px en línea */

	/* galería de imágenes (jdGallery, 365x274 en línea): no más ancha que la caja */
	#myGallery, .jdGallery { max-width: 100% !important; }
	.jdGallery .slideElement { background-size: cover !important; }
	.jdGallery .carouselContainer, .jdGallery .carousel { max-width: 100% !important; overflow: hidden; }

	/* aviso "Portes y Montaje No Incluidos" (colocado con margen negativo sobre el título) */
	.module-der h3 span[style*="margin-top"], .module-centro h3 span[style*="margin-top"] { margin: 4px 0 0 !important; text-align: left !important; }
	.module-centro span[style*="padding-left"], .module-centrado span[style*="padding-left"] { padding-left: 0 !important; display: block; } /* padding-left:450px en línea */
	#content img.colores-modelos, #content a img { max-width: 100% !important; height: auto !important; }
	img.colores-modelos { margin-left: 0 !important; } /* margin-left:41px de escritorio */

	/* migas e idiomas, una debajo de otra */
	#migas .migas-migas, #migas .migas-idiomas { float: none !important; width: auto !important; }
	#migas .migas-idiomas ul { text-align: left; }

	/* cajas de contenido (vídeo, modelos destacados, catálogo...) */
	.module-izq, .module-der, .module-centro, .module-centrado {
		width: auto !important; height: auto !important; min-height: 0 !important;
		margin: 10px 0 !important; padding: 10px !important; box-sizing: border-box; float: none !important;
	}
	#caja-1-1, #caja-1-2, #caja-3-1, #caja-3-2 { float: none !important; margin: 0 !important; }
	#caja-4 { margin-top: 10px !important; }
	.tabla-videos { margin: 10px 0 0 0 !important; width: 100%; }
	.iframe-google { margin-left: 0 !important; }
	#content img { max-width: 100%; height: auto; }
	#content iframe, #content object, #content embed, #content video { max-width: 100%; }
	#content table { max-width: 100%; }

	/* catálogo de butacas: 2 por fila en móvil (3 o 4 en tableta) */
	.item_catalogo { width: 48% !important; height: auto !important; box-sizing: border-box; float: left; position: relative; }
	.item_catalogo > a > img { width: 100% !important; height: auto; } /* solo la foto de la butaca */
	.item_catalogo div img { width: auto !important; max-width: 100px !important; height: auto !important; } /* icono "Ficha Técnica": 100x35 como en escritorio, nunca mayor */
	.precio_butaca { margin-left: 0 !important; right: 8px; }
	.precio_butaca_2 { margin-left: 0 !important; left: 8px; }
	.box-producto-portada, .block-producto, .box-imagen-galeria { width: 48% !important; box-sizing: border-box; }

	/* formularios (contacto, compra, cliente) */
	#contacto-form, #formulario-form, #compra-form { width: auto !important; margin-left: 0 !important; }
	#contacto-form label, #formulario-form label, #compra-form label { float: none !important; display: block; margin-left: 0 !important; width: auto !important; }
	#contacto-form input[type="text"], #formulario-form input[type="text"], #compra-form input[type="text"],
	#contacto-form textarea, #formulario-form textarea, #compra-form textarea, #contacto-form select, #formulario-form select {
		width: 100% !important; max-width: 100%; box-sizing: border-box;
	}
	#contacto-form input[type="submit"], #boton_enviar_formulario input[type="submit"] { margin-left: 0 !important; }
	#formulario-form h3, #formulario-form h4, .cabecera-web2 { width: auto !important; margin-left: 0 !important; }
	.radioIzq, .radioDer { margin-left: 0 !important; float: none !important; }
	#div_boton_paypal, #div_boton_transferencia { margin-left: 0 !important; float: none !important; }
	.text-item { margin-left: 0 !important; width: auto !important; height: auto !important; }
	.imagen-item { float: none !important; }
	.boton-enlace-carrito, .div_boton_comprar { margin-left: 0 !important; }

	/* ventana "Más información" */
	#mas_info { width: 92% !important; margin-left: 4% !important; }

	/* pie */
	#footer-content .links, #footer-content .logo, #footer-content .datos { float: none !important; border-right: 0 !important; padding-left: 10px !important; }
}

@media screen and (min-width: 600px) and (max-width: 959px) {
	.item_catalogo { width: 32% !important; }
}
@media screen and (min-width: 760px) and (max-width: 959px) {
	.item_catalogo { width: 24% !important; }
}
@media screen and (max-width: 600px) {
	#content h1, #content h2 { font-size: 1.25em; line-height: 1.3; }
	.tabla-videos, .tabla-videos tbody, .tabla-videos tr, .tabla-videos td { display: block; width: auto !important; }
}

/* ==========================================================================
   MENÚ MÓVIL (lo crea scripts/menu-movil.js). Vale para el menú de las páginas .html (#ja-cssmenu) y el de la
   tienda (#css-menu).
   ========================================================================== */
/* en escritorio los botones del menú móvil no existen a la vista */
.menu-movil-boton, .menu-movil-sub { display: none; }
/* pantallas táctiles anchas: el primer toque en "Productos" abre el desplegable */
#ja-cssmenu li.menu-tactil-abierto > ul, #css-menu li.menu-tactil-abierto > ul { left: auto !important; }

@media screen and (max-width: 959px) {
	/* botón "Menú" con icono de hamburguesa */
	.menu-movil-boton {
		display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; box-sizing: border-box;
		background: #2f2f2f linear-gradient(#4a4a4a, #2b2b2b); color: #fff; border: 0; border-bottom: 1px solid #1f1f1f;
		font: bold 16px/1 "Lucida Grande", "Trebuchet MS", Arial, sans-serif; letter-spacing: 1px; text-align: left; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.menu-movil-icono { display: inline-block; width: 24px; margin-right: 12px; }
	.menu-movil-icono span { display: block; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
	.menu-movil-abierto .menu-movil-icono span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.menu-movil-abierto .menu-movil-icono span:nth-child(2) { opacity: 0; }
	.menu-movil-abierto .menu-movil-icono span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	/* menú cerrado por defecto; al pulsar el botón se despliega en vertical */
	#ja-cssmenu, #css-menu { display: none !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
	.menu-movil-abierto > #ja-cssmenu, .menu-movil-abierto > #css-menu { display: block !important; }
	#ja-cssmenu li, #css-menu li {
		float: none !important; display: block; width: auto !important; position: relative; margin: 0 !important; padding: 0 !important;
		border-top: 1px solid #444; background: #2f2f2f !important; white-space: normal !important;
	}
	#ja-cssmenu li a, #css-menu li a {
		float: none !important; display: block !important; width: auto !important; margin: 0 !important;
		padding: 0 60px 0 16px !important; border: 0 !important; line-height: 48px !important;
		font-size: 15px !important; color: #efefef !important; background: none !important; white-space: normal !important; text-align: left;
	}
	#ja-cssmenu li a span, #css-menu li a span { background: none !important; padding: 0 !important; display: inline !important; float: none !important; position: static !important; width: auto !important; }

	/* submenús: dentro del menú, cerrados hasta pulsar "+" */
	#ja-cssmenu li ul, #css-menu li ul {
		position: static !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important;
		display: none !important; border: 0 !important; background: #262626 !important; box-shadow: none !important;
	}
	#ja-cssmenu li.menu-movil-sub-abierto > ul, #css-menu li.menu-movil-sub-abierto > ul { display: block !important; }
	#ja-cssmenu li li, #css-menu li li { background: #262626 !important; border-top: 1px solid #383838; }
	#ja-cssmenu li li a, #css-menu li li a { padding-left: 34px !important; font-size: 14px !important; line-height: 44px !important; color: #ccc !important; }

	/* botón "+" / "−" para abrir cada submenú (zona de toque grande) */
	.menu-movil-sub {
		display: block; position: absolute; right: 0; top: 0; width: 56px; height: 48px; margin: 0; padding: 0;
		border: 0; border-left: 1px solid #444; background: transparent; color: #fff; font: bold 24px/48px Arial, sans-serif;
		cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 5;
	}
	.menu-movil-con-sub.menu-movil-sub-abierto > .menu-movil-sub { background: #3a3a3a; }
}