/*
 * Piscinas Aquatec - mobile fixes (Eli Garcia request, 2026-10-14).
 * Loaded after the parent responsive.css so equal-specificity rules win.
 */

@media (max-width: 767px) {

	/* Header: bigger logo, clearly visible hamburger button */
	.top_panel .sc_layouts_row .vc_col-xs-5 {
		width: 72%;
	}
	.top_panel .sc_layouts_row .vc_col-xs-7 {
		width: 28%;
	}
	.top_panel .sc_layouts_logo img {
		max-height: 64px;
		width: auto;
	}
	.top_panel .sc_layouts_menu_mobile_button .sc_layouts_item_icon {
		font-size: 2.4em;
		color: #ffffff;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	}

	/* Content: fluid width with 20px side gutters instead of fixed 600/440/270px boxes */
	.content_wrap,
	.content_container,
	.sc_content_width_1_1 {
		width: calc(100% - 40px) !important;
	}
	.sc_content_width_1_2 { width: calc((100% - 40px) / 2) !important; }
	.sc_content_width_1_3 { width: calc((100% - 40px) / 3) !important; }
	.sc_content_width_2_3 { width: calc((100% - 40px) * 2 / 3) !important; }
	.sc_content_width_1_4 { width: calc((100% - 40px) / 4) !important; }
	.sc_content_width_3_4 { width: calc((100% - 40px) * 3 / 4) !important; }

	/* Fixed social icons: horizontal bar at the bottom so they do not cover the wider content */
	body .fixed-social-icons {
		top: auto;
		bottom: 0;
		transform: none;
		flex-direction: row;
	}
	body .fixed-social-icons a {
		margin-bottom: 0;
		margin-right: 1px;
	}

	/* Hamburger button: rounded translucent tile with three CSS bars instead of the font glyph */
	.top_panel .sc_layouts_menu_mobile_button .sc_layouts_item_link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.16);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	}
	.top_panel .sc_layouts_menu_mobile_button .sc_layouts_item_icon {
		position: relative;
		display: block;
		width: 22px;
		height: 2px;
		margin: 0;
		font-size: 0;
		border-radius: 2px;
		background: #ffffff;
		box-shadow: 0 -7px 0 #ffffff, 0 7px 0 #ffffff;
		text-shadow: none;
	}
	.top_panel .sc_layouts_menu_mobile_button .sc_layouts_item_icon:before {
		display: none;
	}

	/* Mobile menu panel: brand blue, large tappable items, logo and close on one row */
	body .menu_mobile,
	body .menu_mobile .menu_mobile_inner {
		-webkit-transition: none !important;
		transition: none !important;
	}
	body .menu_mobile .menu_mobile_inner {
		background: linear-gradient(165deg, #123f78 0%, #2e66ad 100%) !important;
		text-align: left;
		padding: 0 28px;
		box-sizing: border-box;
	}
	body .menu_mobile .sc_layouts_logo {
		display: block;
		margin: 22px 0 0;
		text-align: left;
	}
	body .menu_mobile .sc_layouts_logo img,
	body.mobile_layout .menu_mobile .sc_layouts_logo img,
	body.mobile_device .menu_mobile .sc_layouts_logo img {
		max-height: 72px;
		width: auto;
	}
	body .menu_mobile .menu_mobile_close {
		top: 18px;
		right: 20px;
		width: 46px;
		height: 46px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.16);
	}
	body .menu_mobile .menu_mobile_close:before,
	body .menu_mobile .menu_mobile_close:after {
		color: #ffffff;
	}
	body .menu_mobile .menu_mobile_nav_area {
		margin: 48px 0 0;
		text-align: left;
	}
	body .menu_mobile .menu_mobile_nav_area > ul > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}
	body .menu_mobile .menu_mobile_nav_area > ul > li > a {
		display: block;
		padding: 16px 0;
		font-size: 26px;
		line-height: 1.2;
		letter-spacing: 0.04em;
		color: #ffffff;
	}
	body .menu_mobile .menu_mobile_nav_area > ul > li.current-menu-item > a,
	body .menu_mobile .menu_mobile_nav_area > ul > li > a:hover {
		color: #9fd3ff;
	}
	body .menu_mobile .search_mobile {
		width: 100%;
		margin: 36px 0 0;
	}
	body .menu_mobile .search_mobile .search_field {
		width: 100%;
		height: 44px;
		padding-top: 0;
		padding-bottom: 0;
		line-height: 44px;
		background: rgba(255, 255, 255, 0.12);
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 12px;
		color: #ffffff;
	}
	body .menu_mobile .search_mobile .search_field::placeholder {
		color: rgba(255, 255, 255, 0.75);
	}
	body .menu_mobile .search_mobile .search_submit {
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 0;
		width: 48px;
		height: 44px;
		padding: 0;
		line-height: 1;
		color: #ffffff;
	}
	body .menu_mobile .search_mobile .search_submit:before {
		margin: 0;
		line-height: 1;
	}

	/* Eli 2026-10-14 (1): "Nuestro compromiso" text sat flush on the photo below it (its spacer is 0em) */
	#about-us .vc_col-sm-7 .sc_content_width_90p {
		margin-bottom: 32px;
	}

	/* Rules (2) and (3) are prefixed with "body" to outrank the Customizer CSS, which prints later.
	   Eli 2026-10-14 (2): Customizer CSS gives #news blocks min-height 330px for the desktop cards;
	   stacked on mobile it leaves large gaps above and below the texts */
	body #news .wpb_content_element {
		min-height: 0;
	}

	/* Eli 2026-10-14 (3): "Atenderte" above the footer on one line */
	body .atenderte .sc_action_item.sc_action_item_simple .sc_action_item_title {
		font-size: 12vw;
		white-space: nowrap;
	}
}