/*
	Custom — Torres Exhacienda Coapa
	Overrides sobre la plantilla Forty (html5up.net).
	Cárgalo SIEMPRE después de main.css.

	Paleta:
	  Azul oscuro / fondo   #001A2F
	  Naranja / coral       #F38F36
	  Amarillo              #FFD945
	  Azul claro            #ECF4FF
*/

/* ===== 1. Header ===== */

	/* Barra fija en azul de marca (al hacer scroll Forty la pone morada #2a2f4a). */
	#header {
		background-color: #001A2F;
		box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.35);
	}

	/* Ícono del logo (cuadrado, variante clara) en la barra fija de 3.25em.
	   Quitamos el "MENU" y la hamburguesa eliminando el <nav> en el HTML. */
	#header .logo {
		display: flex;
		align-items: center;
		height: 100%;
		border-bottom: 0;
	}

	#header .logo img {
		display: block;
		height: 2.5em;
		width: auto;
	}

/* ===== 2. Hero / Banner con imagen fija (sin video) ===== */

	/* Imagen aérea de la torre con degradado oscuro encima para legibilidad. */
	#banner {
		background-color: #001A2F;
		background-image:
			linear-gradient(180deg, rgba(0,26,47,0.55) 0%, rgba(0,26,47,0.45) 45%, rgba(0,26,47,0.75) 100%),
			url('../../images/hero-poster.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		min-height: 90vh;
	}

	/* Capa de marca que TIÑE la foto de azul (multiply) para el look monocromático. */
	#banner .banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #001A2F;
		opacity: 0.35;
		mix-blend-mode: multiply;
		z-index: 2;
	}

	/* Desactivamos el overlay oscuro propio de Forty para no duplicar capas. */
	#banner:after {
		display: none !important;
	}

	#banner .inner {
		position: relative;
		z-index: 3;
	}

	/* Texto del hero en claro/blanco. */
	#banner .inner header.major h1,
	#banner .inner .content,
	#banner .inner .content p {
		color: #ffffff;
	}

	/* Título grande y con peso (Forty lo trae light y chico). */
	#banner .inner header.major h1 {
		font-size: 4em;
		line-height: 1.05;
		font-weight: 800;
		letter-spacing: -0.01em;
		text-shadow: 0 2px 24px rgba(0,0,0,0.35);
	}

	/* "65% Vendido" como badge de escasez, no como subtítulo. */
	#banner .inner header.major h2 {
		display: inline-block;
		margin-top: 1em;
		padding: 0.45em 1em;
		background: #F38F36;
		color: #001A2F;
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		border-radius: 6px;
	}

	@media screen and (max-width: 736px) {
		#banner .inner header.major h1 { font-size: 2.75em; }
		#banner { min-height: 80vh; }
	}

	/* Forty pone .content en flex (fila); lo apilamos en vertical. */
	#banner > .inner .content {
		display: block;
	}

	#banner > .inner .content > * {
		margin-right: 0;
	}

	/* Precio destacado en el hero. */
	#banner .content .hero-price {
		font-size: 1.7em;
		font-weight: 700;
		color: #ffffff;
		letter-spacing: 0;
		text-transform: none;
		margin-top: 1.1em;
		margin-bottom: 0.35em;
		text-shadow: 0 2px 14px rgba(0,0,0,0.3);
	}

	/* "Entrega inmediata" — etiqueta amarilla, sin competir con el precio. */
	#banner .content .entrega {
		font-size: 0.8em;
		color: #FFD945;
		opacity: 1;
		margin: 0;
	}

	/* CTA principal del hero en naranja de marca. */
	#banner .content .actions {
		margin-top: 1.5em;
	}

	#banner .content .button.primary {
		background-color: #F38F36;
		color: #001A2F;
		border: 0;
		font-weight: 700;
		box-shadow: 0 8px 24px rgba(0,0,0,0.35);
		transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	}

	#banner .content .button.primary:hover {
		background-color: #ffa14e;
		transform: translateY(-2px);
		box-shadow: 0 12px 30px rgba(0,0,0,0.4);
	}

/* ===== 3. Bloques informativos (tiles) =====
   En reposo: capa de color de marca (opacidad 0.9) con el título.
   En hover: la capa se desvanece y se REVELA la foto del departamento
   (como el dummy), el texto pasa a blanco con sombra y hace un leve zoom. */

	#one.tiles article:after {
		display: none;
	}

	/* Zoom suave de la foto de fondo al hover. */
	#one.tiles article {
		background-size: cover;
		-webkit-transition: background-size 0.6s ease;
		transition: background-size 0.6s ease;
	}

	#one.tiles article:hover {
		background-size: 115%;
	}

	/* La capa de color se desvanece para mostrar la foto. */
	#one.tiles article:before {
		opacity: 0.9;
		-webkit-transition: opacity 0.45s ease;
		transition: opacity 0.45s ease;
	}

	#one.tiles article:hover:before {
		opacity: 0.12;
	}

	/* Texto: oscuro sobre el color, blanco con sombra sobre la foto. */
	#one.tiles article h3,
	#one.tiles article p {
		color: #001A2F;
		-webkit-transition: color 0.45s ease, text-shadow 0.45s ease;
		transition: color 0.45s ease, text-shadow 0.45s ease;
	}

	#one.tiles article:hover h3,
	#one.tiles article:hover p {
		color: #ffffff;
		text-shadow: 0 2px 10px rgba(0,0,0,0.75);
	}

	/* Indicador "+" que aparece al hover para invitar a la interacción. */
	#one.tiles article header.major:after {
		content: '';
		display: block;
		width: 2.5em;
		height: 3px;
		margin-top: 1em;
		background: currentColor;
		opacity: 0.6;
		-webkit-transition: width 0.45s ease;
		transition: width 0.45s ease;
	}

	#one.tiles article:hover header.major:after {
		width: 4em;
	}

	/* Colores de overlay por bloque. */
	#one .block-conoce:before { background-color: #F38F36; }
	#one .block-vive:before { background-color: #FFD945; }
	#one .block-departamentos:before { background-color: #ECF4FF; }
	#one .block-ubicacion:before { background-color: #F38F36; }

	/* Aire interno y títulos editoriales uniformes. */
	#one.tiles article {
		padding: 3em 2.75em;
	}

	#one.tiles article h3 {
		font-size: 1.6em;
		font-weight: 800;
		letter-spacing: 0.02em;
	}

	#one.tiles article p {
		line-height: 1.5;
		max-width: 22em;
	}

	/* El tile claro (#ECF4FF) se ve débil: párrafo con más cuerpo y
	   barrita-acento en naranja para darle un punto focal cálido. */
	#one .block-departamentos p {
		font-weight: 500;
	}

	#one .block-departamentos header.major:after {
		background: #F38F36;
		opacity: 0.85;
	}

/* ===== 4. Sección de contenido informativo (#two) ===== */

	#two {
		background-color: #001A2F;
		padding: 5.5em 0;
		border-top: 1px solid rgba(255,255,255,0.08);
	}

	#two,
	#two h2,
	#two h3,
	#two p {
		color: #ffffff;
	}

	/* Título principal de sección con línea-acento naranja. */
	#two header.major h2 {
		font-size: 2.25em;
		font-weight: 700;
	}

	#two header.major h2:after {
		content: '';
		display: block;
		width: 3em;
		height: 3px;
		margin-top: 0.6em;
		background: #F38F36;
	}

	/* Subtítulos secundarios más chicos para escalonar la jerarquía. */
	#two .inner h2 {
		font-size: 1.5em;
		margin-top: 2.25em;
	}

	/* Texto descriptivo +2pt, con ancho de lectura cómodo. */
	#two .inner p {
		font-size: 1.125em;
		color: rgba(255,255,255,0.85);
		max-width: 42em;
	}

	/* Títulos de sección con la misma escala en #two, galería y contacto. */
	#two header.major h2,
	#gallery header.major h2,
	#contact header.major h2 {
		font-size: 2.25em;
		font-weight: 700;
	}

	@media screen and (max-width: 736px) {
		#two { padding: 3.5em 0; }
	}

/* ===== 5. Sección "Agenda tu cita" (#contact) ===== */

	#contact {
		background-color: #001A2F;
	}

	/* Forty pone el .inner en flex y fuerza el primer hijo a 60% con borde
	   derecho; lo anulamos para que nuestro grid ocupe todo el ancho. */
	#contact > .inner {
		display: block !important;
	}

	#contact > .inner > .contact-grid {
		width: 100% !important;
		border-right: 0 !important;
		padding: 0 !important;
	}

	/* Dos columnas balanceadas: formulario (más ancho) + datos/mapa. */
	#contact .contact-grid {
		display: grid;
		grid-template-columns: 1.25fr 1fr;
		gap: 3.5em;
		align-items: start;
	}

	#contact .contact-info-col .map-embed {
		margin-top: 1.5em;
	}

	/* Anula el gutter de margen negativo de Forty (.fields) que, sin el padding
	   del .inner, hacía que el formulario se saliera del viewport en móvil.
	   Usamos flex-gap en su lugar. */
	#contact form > .fields {
		width: 100%;
		margin: 0 0 2em 0;
		gap: 1.5em;
	}

	#contact form > .fields > .field {
		padding: 0;
		width: 100%;
	}

	#contact form > .fields > .field.half {
		width: calc(50% - 0.75em);
	}

	#contact .contact-form-col h2,
	#contact .contact-form-col > p {
		color: #ffffff;
	}

	#contact form label {
		color: #ffffff;
	}

	/* Inputs adaptados al fondo oscuro. */
	#contact form input[type="text"],
	#contact form input[type="email"],
	#contact form input[type="tel"],
	#contact form select,
	#contact form textarea {
		background: rgba(255,255,255,0.09);
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 6px;
		color: #ffffff;
	}

	/* Flecha del select visible (amarillo de marca). */
	#contact form select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.4-0.4,1-0.4,1.4,0l3.3,3.3c0.4,0.4,0.4,1,0,1.4L20.7,31.9c-0.4,0.4-1,0.4-1.4,0L4.3,17.3c-0.4-0.4-0.4-1,0-1.4l3.3-3.3C8,11.9,8.6,11.9,9.4,12.3z' fill='%23FFD945'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 1em center;
		background-size: 0.9em;
		padding-right: 2.75em;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	#contact form input::placeholder,
	#contact form textarea::placeholder {
		color: rgba(255,255,255,0.6);
	}

	#contact form input:focus,
	#contact form select:focus,
	#contact form textarea:focus {
		border-color: #FFD945;
		box-shadow: 0 0 0 2px rgba(255,217,69,0.25);
	}

	#contact form select option {
		color: #001A2F;
		background: #ECF4FF;
	}

	/* Botón Enviar en naranja de marca (mismo color de acción que el CTA del hero). */
	#contact form .actions .button,
	#contact form input[type="submit"] {
		background-color: #F38F36;
		color: #001A2F;
		border: 0;
		font-weight: 700;
	}

	#contact form input[type="submit"]:hover {
		background-color: #ffa14e;
	}

	/* Honeypot oculto. */
	#contact .hp-field {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	/* Mensajes de estado / alertas. */
	#contact .form-status,
	#contact .form-alert {
		margin-top: 1em;
		padding: 0.85em 1.1em;
		border-radius: 6px;
		font-size: 0.95em;
	}

	#contact .form-alert--ok,
	#contact .form-status.is-ok {
		background: rgba(255,217,69,0.15);
		border: 1px solid #FFD945;
		color: #FFD945;
	}

	#contact .form-alert--err,
	#contact .form-status.is-err {
		background: rgba(243,143,54,0.15);
		border: 1px solid #F38F36;
		color: #F8B27A;
	}

	/* Mapa embebido. */
	#contact .map-embed {
		margin-top: 1.5em;
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0 10px 30px rgba(0,0,0,0.35);
	}

	#contact .map-embed iframe {
		display: block;
		width: 100%;
		height: 300px;
		border: 0;
	}

	@media screen and (max-width: 980px) {
		#contact .contact-grid {
			grid-template-columns: 1fr;
			gap: 2.5em;
		}
	}

/* ===== 4b. Galería de espacios ===== */

	#gallery {
		background-color: #021F38; /* un punto más claro que #001A2F para diferenciar la sección */
		padding: 5.5em 0;
		border-top: 1px solid rgba(255,255,255,0.08);
	}

	#gallery,
	#gallery h2 {
		color: #ffffff;
	}

	#gallery header.major h2:after {
		content: '';
		display: block;
		width: 3em;
		height: 3px;
		margin-top: 0.6em;
		background: #F38F36;
	}

	#gallery .gallery-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 16em;
		gap: 1em;
	}

	#gallery .gallery-grid figure {
		position: relative;
		margin: 0;
		overflow: hidden;
		border-radius: 6px;
		background: #021F38;
	}

	/* Velo azul permanente para amarrar la galería al monocromo de marca. */
	#gallery .gallery-grid figure:after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(transparent 55%, rgba(0,26,47,0.45));
		pointer-events: none;
	}

	/* La foto vertical (vista desde el balcón) ocupa dos filas. */
	#gallery .gallery-grid figure.tall {
		grid-row: span 2;
	}

	#gallery .gallery-grid img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		filter: saturate(1.05);
		transition: transform 0.5s ease;
	}

	#gallery .gallery-grid figure:hover {
		z-index: 2;
		box-shadow: 0 16px 40px rgba(0,0,0,0.45);
	}

	#gallery .gallery-grid figure:hover img {
		transform: scale(1.07);
	}

	@media screen and (max-width: 980px) {
		#gallery .gallery-grid {
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: 13em;
		}
		#gallery .gallery-grid figure.tall {
			grid-row: span 1; /* evita huecos en 2 columnas */
		}
	}

	@media screen and (max-width: 736px) {
		#gallery { padding: 3.5em 0; }
		#gallery .gallery-grid { grid-auto-rows: 11em; }
	}

	@media screen and (max-width: 480px) {
		#gallery .gallery-grid {
			grid-template-columns: 1fr;
		}
	}

/* ===== 6. Datos de contacto — textos e íconos en #FFD945 ===== */

	#contact .contact-info-col .contact-method {
		margin-bottom: 1.75em;
	}

	#contact .contact-method h3,
	#contact .contact-method a,
	#contact .contact-method span {
		color: #FFD945;
	}

	#contact .contact-method a:hover {
		color: #ffe372;
		text-decoration: underline;
	}

	#contact .contact-method .icon:before {
		color: #FFD945;
	}

/* ===== 7. Footer — fondo oscuro y logo completo ===== */

	#footer {
		background-color: #001A2F;
		border-top: 1px solid rgba(255,255,255,0.08);
		padding-top: 3em;
	}

	#footer .footer-logo {
		display: block;
		width: 9em;
		height: auto;
		margin: 0 auto 1.5em auto;
		opacity: 0.9;
	}

/* ===== 8. WhatsApp ===== */

	/* Botón flotante. */
	.wa-float {
		position: fixed;
		right: 1.5em;
		bottom: 1.5em;
		z-index: 1000;
		width: 3.4em;
		height: 3.4em;
		border-radius: 50%;
		background: #25D366;
		color: #ffffff !important;
		box-shadow: 0 8px 24px rgba(0,0,0,0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 0;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.wa-float:hover {
		transform: translateY(-2px) scale(1.05);
		box-shadow: 0 12px 30px rgba(0,0,0,0.4);
	}

	.wa-float .icon:before {
		font-size: 1.7em;
		line-height: 1;
	}

	/* Botón WhatsApp secundario dentro del formulario. */
	#contact .wa-inline {
		box-shadow: inset 0 0 0 1px #25D366;
		color: #25D366;
	}

	#contact .wa-inline:hover {
		background: #25D366;
		color: #001A2F;
	}

	@media screen and (max-width: 480px) {
		.wa-float { width: 3em; height: 3em; right: 1em; bottom: 1em; }
	}

/* ===== 9. Accesibilidad y anclas ===== */

	/* El header fijo (3.25em) no debe tapar el destino de los anclas. */
	#two, #gallery, #contact { scroll-margin-top: 3.75em; }

	/* Foco visible coherente con la paleta. */
	#contact a:focus-visible,
	#contact form input:focus-visible,
	#contact form select:focus-visible,
	#contact form textarea:focus-visible,
	#contact form input[type="submit"]:focus-visible,
	#banner .content .button:focus-visible,
	.wa-float:focus-visible {
		outline: 2px solid #FFD945;
		outline-offset: 2px;
	}

	#contact .contact-method a {
		word-break: break-word;
	}

	/* Tiles: altura flexible en móvil para que no se corte el texto. */
	@media screen and (max-width: 736px) {
		#one.tiles article {
			height: auto;
			min-height: 16em;
			padding: 2.5em 2em;
		}
		/* Sin hover en móvil: dejamos entrever la foto del departamento. */
		#one.tiles article:before {
			opacity: 0.82;
		}
	}

/* ===== 10. Panel de éxito y estado de carga del formulario ===== */

	#contact .form-success {
		background: rgba(255,217,69,0.12);
		border: 1px solid #FFD945;
		border-radius: 6px;
		padding: 2em 1.75em;
	}

	#contact .form-success h3 {
		color: #FFD945;
		margin-bottom: 0.5em;
	}

	#contact .form-success p {
		color: #ffffff;
		margin-bottom: 1.25em;
	}

	#contact .form-success .button {
		background: #25D366;
		color: #001A2F;
	}

	/* Estado de carga al enviar. */
	#contact form.is-loading {
		opacity: 0.7;
		cursor: progress;
	}

/* ===== 11. CTA intermedio (tras la galería) ===== */

	#gallery .gallery-cta {
		text-align: center;
		margin-top: 2.5em;
	}

	#gallery .gallery-cta .button.primary {
		background-color: #F38F36;
		color: #001A2F;
		font-weight: 700;
	}

	#gallery .gallery-cta .button.primary:hover {
		background-color: #ffa14e;
	}

/* ===== 12. Ajustes móviles de conversión ===== */

	@media screen and (max-width: 736px) {
		/* CTAs del formulario apilados a todo el ancho (mejor tap). */
		#contact form .actions {
			width: 100%;
		}
		#contact form .actions li {
			width: 100%;
			margin: 0 0 0.7em 0;
		}
		#contact form .actions .button,
		#contact form input[type="submit"] {
			width: 100%;
		}
		/* Áreas de toque cómodas en datos de contacto. */
		#contact .contact-method a {
			display: inline-block;
			padding: 0.25em 0;
			min-height: 40px;
		}
	}

	/* Aviso de privacidad bajo el formulario. */
	#contact .form-privacy {
		margin-top: 1em;
		font-size: 0.8em;
		color: rgba(255,255,255,0.6);
	}

	#contact .form-privacy a {
		color: #FFD945;
	}

/* ==========================================================================
   Amenidades (Seguridad y comodidad) — sección #two
   ========================================================================== */

	#two ul.amenidades {
		list-style: none;
		padding: 0;
		margin: 1.5em 0 0 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5em;
	}

	#two ul.amenidades li {
		padding: 2em 1.5em;
		text-align: center;
		background: rgba(255,255,255,0.04);
		border: 1px solid rgba(255,255,255,0.1);
		border-radius: 6px;
		transition: transform 0.2s ease, border-color 0.2s ease;
	}

	#two ul.amenidades li:hover {
		transform: translateY(-4px);
		border-color: #FFD945;
	}

	#two ul.amenidades .icon {
		font-size: 2.5em;
		color: #FFD945;
		margin-bottom: 0.4em;
		display: inline-block;
	}

	#two ul.amenidades h3 {
		margin: 0 0 0.4em 0;
	}

	#two ul.amenidades p {
		margin: 0;
		font-size: 0.9em;
		color: rgba(255,255,255,0.7);
	}

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

		#two ul.amenidades {
			grid-template-columns: 1fr;
			gap: 1em;
		}

		#two ul.amenidades li {
			padding: 1.5em;
		}

	}