/* Launched 2026-10-28 from four-seasons-hotel-tmp4.php. Page-specific redesign styles, loaded via $acs[] so
   estilos.css stays untouched. */

	body {
		overflow-x: hidden!important;
	}

	/* #11/#12, v3 fix: the real cause of the uneven whitespace above/below the intro
	   text+image row was two things stacked on top of the 140px padding-top below --
	   (1) a scroll-triggered JS effect (all.js adds a "smaller" class to #cont-first,
	   applying transform:scale(0.8)) that visually shrinks the hero photo without
	   shrinking the space it reserves in the layout, leaving dead space behind it, and
	   (2) #conter is forced to height:100vh sitewide, taller than its actual hero
	   content, adding more dead space regardless of window size. Both are neutralized
	   here, scoped to this page only so the effect isn't touched elsewhere on the site. */
	.fsh #cont-first.smaller { transform: none !important; }
	.fsh #conter { height: auto !important; }
	.fsh-intro-wrap { padding-top: 140px; }

	/* #13 - same idea for the closing contact block: 110px above (margin) vs. 100px
	   below (the page's own bottom padding) -- bring the top margin down to match. */
	.fsh-contact-block { margin-top: 100px !important; }

	/* v2 fix per Ana: the second full-width image (hotel/3.jpg) had "mtb90xd mt110"
	   stacked on it -- two classes fighting over margin-top (90px vs 110px) left the
	   actual rendered spacing above/below uneven and inconsistent with the page's
	   other established gaps. Replaced with one explicit rule so both sides match. */
	.fsh-second-img { margin: 100px auto !important; }

	/* v3, Ana 8/21: "I'm talking about the second picture, not the hero image. The image
	   and text aren't vertically centered -- there's much more space above them than
	   below." Measured on the live page: estilos.css pulls this photo up with
	   "#fsh-p1 { margin-top: -100px }" while both columns are vertical-align:top, so the
	   copy started 100px below the top of the photo and finished flush with its bottom
	   edge -- 100px of space above the text, none below it. Figma ("3 - Four Seasons
	   Hotel") centres the two on each other, with the photo overhanging the copy equally
	   top and bottom. Dropping the pull and centring both columns reproduces that: the
	   shorter copy block now sits with ~45px above and below inside the photo's height. */
	.fsh-intro-wrap .row > .w55,
	.fsh-intro-wrap .row > #fsh-p1 { vertical-align: middle !important; }
	.fsh-intro-wrap #fsh-p1 { margin-top: 0 !important; }

	/* CJ 9/8: "when I scroll the images move on the page" -- correct, and it is the root
	   of Ana's recurring "not centred" note. all.js runs
	       if( $('body').hasClass('fsh') ){ $("#fsh-p1").parallax({ "y": "10%" }); ... }
	   so this photo drifts vertically against the copy beside it as you scroll. The
	   45px-above / 45px-below centring is therefore only true at one scroll offset;
	   everywhere else the photo has slid. Figma is a static comp, so Ana will never see
	   it match while the photo is moving. Pinned here, scoped to this page.
	   #fsh-p2 and #fsh-p3 keep their parallax -- they are full-width blocks with no
	   adjacent column to line up against, so the motion costs nothing there. */
	.fsh #fsh-p1 { transform: none !important; }

	/* v4, Ana 9/18: "please make the FS logo just slightly larger -- a very subtle
	   increase". Sized off Figma rather than by eye. Comparing like for like -- logo
	   width against the width of the title underneath it, which cancels out the
	   difference between Figma's 1444px frame and this fluid column -- Figma runs 0.329
	   and this page 0.313, so the design's logo is ~5% larger in proportion.
	   150px x 1.05 = 158px. Checked against the body copy width as a second reference
	   and that lands on 158px too. */
	.fsh-intro-wrap .textos img.mw150 { max-width: 158px !important; }

	@media only screen and (max-width: 600px) {
		.fsh-intro-wrap { padding-top: 0; }
		.fsh-contact-block { margin-top: 40px !important; }
		.fsh-second-img { margin: 40px auto !important; }
	}