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

	body {
		overflow-x: hidden!important;
	}

	/* General improvement (not tied to a specific numbered comment): the closing
	   photo+quote row wasn't actually vertically centered against each other
	   (it was relying on inline-block vertical-align:middle, which centers each column
	   against its own line box, not against the other column -- so the photo's center and
	   the text block's center never lined up), and the empty space above the photo and
	   below the quote didn't match (live page measured ~46px above vs. ~120px below, because a
	   second, empty spacer div with its own mt110 sat right after this row). Flexbox
	   actually centers the two columns against each other, and the margins below give this
	   block the same ~100px of breathing room on both sides. */
	.rs-closing-row {
		display: flex !important;
		align-items: center;
		margin-top: 100px !important;
		margin-bottom: 100px !important;
	}
	.rs-closing-row > div { float: none; }
	.rs-empty-spacer { margin: 0 !important; padding: 0 !important; }

	@media only screen and (max-width: 600px) {
		.rs-closing-row { display: block !important; margin-top: 40px !important; margin-bottom: 40px !important; }
	}

	/* #50 - this comment's real target is the pool/amenities photo in the intro section
	   (its pin lands there in Figma, not on the closing photo+quote row above). The
	   concrete, confirmed part of the fix: the amenities text column was exactly 500px
	   wide (the full 50% split), which wrapped the last bullet ("FOUR SEASONS A-LA-CARTE
	   SERVICES...") to 3 lines -- Figma wraps the same text to 2 lines, since its column
	   has a bit more breathing room. Widening the text box to 570px matches that 2-line
	   wrap.

	   Second pass, caught on review: with the photo still using its old absolute
	   positioning (top:-10px; right:0, from the shared .residences .img-abs rule), the
	   570px-wide text box now overflowed the 500px column and ran directly underneath the
	   photo -- exactly the "image flowing into the text" the live page was showing. Figma
	   doesn't overlap these at all: the photo sits in normal flow above the bullet list,
	   left-aligned, with clear space below it before the text starts (measured directly
	   off the Christian Horan pool photo layer: 203x138, and the amenities text block:
	   355x208, both left-aligned to the same edge). Reordered the two so the photo comes
	   first in the markup, took it out of absolute positioning, and sized it to the same
	   proportion of the column (photo width : text width ~= 0.57 in Figma). */
	.residences .textos.mt85 { width: 570px !important; }
	.rs-amenities-photo { position: static !important; margin: 0 0 25px !important; top: auto !important; right: auto !important; }
	.rs-amenities-photo img.pos-abs { position: static !important; width: 55%; max-width: 245px; display: block; padding-left: 20px; padding-top: 15px; margin-bottom: -30px;}

	/* #47/#49 - Private Residences and Hotel Residences rebuilt as live HTML/CSS instead of
	   flattened images (cc1-web.jpg / cc2.png). Previous pass here was wrong on three counts
	   caught in review: the desktop paragraph text was missing entirely, the building photo
	   in Private Residences needs to overlap the living-room photo's corner (it does in
	   Figma, with a higher z-index) instead of sitting in its own non-overlapping slot, and
	   the proportions were eyeballed instead of measured. All sizes/positions below come
	   from clicking the actual photo layers in Figma and reading their real width/height/
	   top/left -- title, paragraph, caption and quote are normal flowing text; only the
	   photo clusters that have real overlapping geometry use absolute positioning, inside a
	   wrapper sized to match that geometry's own aspect ratio so it stays responsive. */
	.rs-live-section { display: flex; flex-wrap: wrap; align-items: flex-start; }
	.rs-live-section .title { margin: 0 0 18px; }
	.rs-live-section p.txt-text { margin: 0 0 18px; }

	.rs-live-text { width: 35%; box-sizing: border-box; padding-right: 25px; }
	.rs-pr-lobby-wrap { margin-top: 25px; }
	.rs-pr-lobby-wrap img { width: 57%; display: block; }
	.rs-pr-caption { margin: 10px 0 0; font-size: 10px; color: #999; }

	/* Bug found on review: the "too tall" building photo was a CSS math error, not a
	   bad image crop. Percentage padding-top is resolved against the CONTAINING BLOCK's
	   width (the flex row, .rs-live-section), not against the element's own width --
	   so padding-top:62.1% on a box that is itself only 63% wide computed to 62.1% of the
	   FULL row width, not 62.1% of the box's own (63%-wide) width, making the box roughly
	   1/0.63 = 1.59x taller than intended. Corrected value = own-aspect-ratio x own-width%
	   (62.1% x 63% = 39.1%). Same fix applied to the Hotel Residences stack below. */
	.rs-pr-photos { position: relative; width: 63%; padding-top: 39.1%; box-sizing: border-box; }
	.rs-pr-photos img { position: absolute; object-fit: cover; display: block; }
	.rs-pr-livingroom { left: 21.3%; top: 0; width: 78.7%; height: 84.5%; z-index: 1; }
	.rs-pr-building { left: 0; top: 42.2%; width: 32.8%; height: 57.8%; z-index: 2; border: 2px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,.35); }

	.rs-hr-left { width: 42%; box-sizing: border-box; padding-right: 25px; }
	.rs-hr-right { width: 58%; box-sizing: border-box; }
	.rs-hr-lounge { width: 100%; display: block; }
	.rs-hr-quote { margin: 25px auto 0; width: 75%; text-align: center; }

	.rs-hr-photos-stack { position: relative; width: 84%; padding-top: 90.5%; margin-top: 22px; }
	.rs-hr-photos-stack img { position: absolute; object-fit: cover; display: block; }
	/* Bug found on review: the balcony photo (c11.jpg) had a thick, uneven white margin
	   baked into the source file itself (a leftover crop mistake from re-capturing it off
	   Figma, not an intentional frame) -- roughly 34px on the left, 5-9px top/bottom, none
	   on the right. Stacked on top of the intentional 2px CSS border below, it read as one
	   oversized, lopsided white border. Re-cropped c11.jpg (and c12.jpg, which had the same
	   issue) tight to the actual photo; the 2px border here is now the only border. */
	.rs-hr-balcony { left: 0; top: 0; width: 68.7%; height: 42.5%; border: 2px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,.25); }
	.rs-hr-bedroom { left: 18.9%; top: 50%; width: 81.1%; height: 50%; }

	@media only screen and (max-width: 1000px) {
		.rs-live-text, .rs-hr-left { width: 45%; }
	}

	.residences .textos.mt85 {
		border-left: none;
	}