/*
Theme Name:   GeneratePress Child — SurfTerra
Theme URI:    https://surfterra.com
Description:  Tema hijo de GeneratePress para SurfTerra Inmobiliaria. Contiene la línea gráfica de marca (atardecer/océano/arena) y las plantillas a medida de propiedad. Update-safe: las actualizaciones de GeneratePress no lo sobrescriben.
Author:       SurfTerra
Author URI:   https://surfterra.com
Template:     generatepress
Version:      2.2.0
Text Domain:  generatepress-child
*/

/* =========================================================
   Tipografía — Jost (alternativa LIBRE a Century Gothic)
   =========================================================
   Auto-alojada (assets/fonts/), fuente variable de código
   abierto. Sustituto legal de Century Gothic mientras llega
   la tipografía oficial. Reemplazar por la fuente propia
   "SurfTerra" (stencil) para titulares cuando esté disponible.
   ========================================================= */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/jost-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fuente base del sitio (cuerpo + UI). Fallback a Century Gothic
   (fuente secundaria oficial, disponible localmente en muchos equipos). */
body,
button, input, select, textarea {
	font-family: 'Jost', 'Century Gothic', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Titulares con la misma familia geométrica (provisional hasta la stencil oficial). */
h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: 'Jost', 'Century Gothic', system-ui, sans-serif;
	letter-spacing: .2px;
}

/* =========================================================
   Paleta de marca SurfTerra — OFICIAL (Brand Book 2026)
   =========================================================
   Colores del manual (HEX ← PANTONE):
   navy   #374466 (7546 C) · morado #5A3C62 (519 C)
   teal   #3A6A6C (5405 C) · azul   #498496 (5483 C)
   rojo   #8E202D (202 C)  · café   #7C3F33 (499 C)
   verde  #00A182 (GREEN)  · naranja #D36100 (717 C · CTA)
   ========================================================= */
:root {
	/* --- Paleta oficial --- */
	--st-navy:   #374466;
	--st-purple: #5a3c62;
	--st-teal:   #3a6a6c;
	--st-blue:   #498496;
	--st-red:    #8e202d;
	--st-green:  #00a182;
	--st-cafe:   #7c3f33;
	--st-orange: #d36100;
	--st-cream:  #ead9b0;

	/* --- Alias semánticos (conservan el CSS existente) --- */
	--st-dusk:   var(--st-navy);    /* titulares, navegación, texto oscuro */
	--st-terra:  var(--st-cafe);    /* precio y acento "Terra" */
	--st-sunset: var(--st-orange);  /* botones y CTA */
	--st-sand:   #e8933f;           /* naranja claro para los degradados de atardecer */
	--st-brown:  var(--st-navy);    /* pie de página y superficies oscuras (navy del manual) */
}

/* ===== Acentos de marca (migrado desde el Personalizador) ===== */

/* Logo (incluye el nombre): alto legible */
.site-logo img,
.site-header .header-image {
	max-height: 60px;
	width: auto;
}

/* Menú principal */
.main-navigation .main-nav ul li a {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: .9rem;
}

/* ===== Pie de página ===== */

/* Franja de atardecer arriba del pie */
.site-footer .footer-widgets {
	border-top: 6px solid transparent;
	border-image: linear-gradient(90deg, var(--st-dusk) 0%, var(--st-terra) 22%, var(--st-sunset) 52%, var(--st-sand) 100%) 1;
}

/* Títulos de los widgets del pie en dorado */
.footer-widgets .widget .widget-title,
.footer-widgets .widget .widgettitle {
	color: var(--st-sand);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1rem;
	margin-bottom: .8rem;
}

/* Lista de enlaces del pie sin viñetas */
.footer-widgets .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-widgets .widget ul li {
	margin-bottom: .45rem;
}

/* Barra de copyright con el marrón de marca */
.site-info {
	background-color: var(--st-brown);
	color: var(--st-cream);
}

/* =========================================================
   PORTADA (landing) — hero, secciones y tarjetas de propiedad
   ========================================================= */

/* Evita el scroll horizontal que provocan los bloques a ancho completo
   (alignfull usa 100vw, que incluye el ancho de la barra de scroll). */
body {
	overflow-x: hidden; /* Respaldo para navegadores sin 'clip'. */
	overflow-x: clip;   /* No crea contenedor de scroll: no rompe sticky ni anclas. */
}

/* ---------- HERO ---------- */
.st-hero {
	align-items: center;
	text-align: center;
	overflow: hidden;
}

/* Degradado profundo de atardecer + resplandor de sol (sustituye
   el degradado pálido que pinta el bloque Cubierta por defecto). */
.st-hero > .wp-block-cover__background {
	background:
		radial-gradient(circle at 74% 22%, rgba(246, 185, 59, .65), rgba(246, 185, 59, 0) 42%),
		linear-gradient(120deg, #241a38 0%, var(--st-dusk) 24%, var(--st-terra) 60%, var(--st-sunset) 82%, var(--st-sand) 100%) !important;
	opacity: 1 !important;
}

/* Viñeta superior/inferior para dar profundidad y legibilidad. */
.st-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 12, 30, .30) 0%, rgba(20, 12, 30, 0) 26%, rgba(20, 12, 30, 0) 62%, rgba(20, 12, 30, .40) 100%);
}
.st-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 820px;
	padding: 0 1.25rem;
}

/* Eyebrow en dorado */
.st-hero .wp-block-cover__inner-container > p:first-child {
	color: var(--st-sand) !important;
	margin-bottom: 1rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

/* Titular grande con sombra suave */
.st-hero h1 {
	text-shadow: 0 2px 24px rgba(20, 12, 30, .35);
	margin: 0 0 1.1rem;
}

.st-hero p {
	text-shadow: 0 1px 12px rgba(20, 12, 30, .30);
}

/* ---------- Botones de marca ---------- */
.st-hero .wp-block-buttons {
	margin-top: 2rem;
	gap: .9rem;
}
.st-hero .wp-block-button__link,
.st-cta .wp-block-button__link {
	padding: .85rem 1.9rem;
	font-weight: 700;
	letter-spacing: .3px;
	border-radius: 6px;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	box-shadow: 0 8px 22px rgba(20, 12, 30, .22);
}
.st-hero .wp-block-button__link:hover,
.st-cta .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(20, 12, 30, .30);
}

/* Botón primario (naranja de marca, como el CTA del manual) */
.st-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--st-orange);
	color: #fff;
}
.st-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: #b95400;
}

/* Botón secundario (contorno blanco, limpio) */
.st-hero .is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 2px solid rgba(255, 255, 255, .9) !important;
	color: #fff !important;
	box-shadow: none;
}
.st-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12) !important;
}

/* ---------- Propuesta de valor (3 columnas -> tarjetas) ---------- */
.home .wp-block-columns .wp-block-column {
	background: #fff;
	border-radius: 12px;
	padding: 1.9rem 1.6rem;
	box-shadow: 0 10px 30px rgba(55, 40, 25, .07);
	border-top: 4px solid var(--st-sunset);
}
.home .wp-block-columns .wp-block-column h3 {
	margin-top: 0;
	color: var(--st-dusk);
}

/* ---------- Encabezados de sección con acento ---------- */
.home .wp-block-group h2 {
	position: relative;
	display: inline-block;
	margin-bottom: .4rem;
}
.home .wp-block-group h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: .7rem auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--st-terra), var(--st-sand));
}

/* ---------- Tarjetas de propiedad (WooCommerce) ----------
   RETIRADO. La tarjeta la define ahora por completo el sistema de diseño del
   kit (assets/css/homansion.css → .kit-property), junto con la plantilla
   woocommerce/content-product.php.

   Estas reglas no solo sobraban: el ':hover' de aquí llevaba un
   translateY(-4px) que movía la tarjeta ENTERA al pasar el ratón, y por
   llevar el prefijo '.home' ganaba en especificidad al reseteo del kit. El
   zoom del kit se aplica solo a la foto. */

/* ---------- Franja CTA ---------- */
.st-cta {
	align-items: center;
	text-align: center;
}
.st-cta .wp-block-cover__inner-container {
	max-width: 720px;
	padding: 2.5rem 1.25rem;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
	.st-hero h1 {
		font-size: 2.4rem !important;
	}
	.st-hero {
		min-height: 88vh !important;
	}
}

/* =========================================================
   Animaciones (carga + revelado al hacer scroll)
   Solo si el usuario NO pidió reducir el movimiento.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

	/* Hero: entrada escalonada de cada elemento al cargar. */
	.st-hero .wp-block-cover__inner-container > * {
		opacity: 0;
		animation: stFadeUp .9s cubic-bezier(.2, .7, .2, 1) forwards;
	}
	.st-hero .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: .15s; }
	.st-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: .32s; }
	.st-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: .49s; }
	.st-hero .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: .66s; }

	/* El "sol" respira: brillo muy sutil y lento. */
	.st-hero > .wp-block-cover__background {
		animation: stSunBreath 9s ease-in-out infinite alternate;
	}

	/* Estado inicial de los elementos que se revelan al hacer scroll.
	   Las clases las añade movimiento.js; .is-visible las activa al entrar.

	   El desplazamiento se declara con dos variables en vez de escribir un
	   'transform' distinto por dirección: así la transición, la curva y el
	   estado final viven en un solo sitio, y cada variante solo cambia el
	   punto de partida.

	   Sin 'will-change': Chrome ya pasa a su propia capa lo que se está
	   animando mientras dura la transición. Declararlo mantenía una capa
	   gráfica por elemento (hasta 29 por página) durante toda la visita. */
	.st-reveal {
		opacity: 0;
		transform:
			translate(var(--st-reveal-x, 0), var(--st-reveal-y, 56px))
			scale(var(--st-reveal-s, .96));
		transition:
			opacity .95s ease,
			transform .95s cubic-bezier(.16, .84, .27, 1);
	}

	/* Entra desde la izquierda / desde la derecha. */
	.st-reveal--izq { --st-reveal-x: -90px; --st-reveal-y: 0; }
	.st-reveal--der { --st-reveal-x:  90px; --st-reveal-y: 0; }

	/* Recorrido más corto para listas largas: con muchos elementos seguidos,
	   un recorrido completo cada uno se lee como un temblor. */
	.st-reveal--corto { --st-reveal-x: 0; --st-reveal-y: 34px; --st-reveal-s: .98; }

	/*
	 * CORTINA para fotos y bloques con imagen. En vez de desplazarse, la foto
	 * se descubre: el recorte se abre de izquierda a derecha mientras la imagen
	 * hace un contra-zoom muy leve, como si la cámara se asentara. Es el efecto
	 * que más se nota sin mover el bloque de sitio, así que no descoloca el
	 * texto de al lado mientras entra.
	 */
	/*
	 * El recorte y el contra-zoom van en la IMAGEN, no en el bloque que se
	 * observa. Es la única forma de que funcione: al aplicar 'clip-path' al
	 * propio elemento observado, Chrome calcula su área visible como cero y el
	 * IntersectionObserver no lo da nunca por «en pantalla», así que jamás
	 * recibía la clase que lo revelaría. Se quedaba invisible para siempre.
	 * Observando el contenedor —que no se recorta— y animando la imagen de
	 * dentro, el efecto es el mismo y el observador sí dispara.
	 */
	.st-reveal--cortina {
		--st-reveal-x: 0;
		--st-reveal-y: 0;
		--st-reveal-s: 1;
		transition: opacity .5s ease;
	}
	.st-reveal--cortina img {
		clip-path: inset(0 100% 0 0);
		transform: scale(1.12);
		transition:
			clip-path 1.05s cubic-bezier(.16, .84, .27, 1),
			transform 1.4s cubic-bezier(.16, .84, .27, 1);
	}
	.st-reveal--cortina.is-visible img {
		clip-path: inset(0 0 0 0);
		transform: scale(1);
	}

	.st-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

@keyframes stFadeUp {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

@keyframes stSunBreath {
	from { filter: brightness(1) saturate(1); }
	to   { filter: brightness(1.06) saturate(1.12); }
}

/* =========================================================
   FICHA DE PROPIEDAD (página individual del producto)
   ========================================================= */

/* ---------- Galería ---------- */
/* Imagen grande (propiedades): la galería ocupa algo más de la mitad y la
   imagen llena su columna. Marco con esquinas suaves y sombra, coherente
   con las tarjetas de la portada. */
.single-product div.product .woocommerce-product-gallery {
	width: 56%;
	margin-bottom: 2rem;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(55, 40, 25, .12);
}
.single-product div.product .summary.entry-summary {
	width: 40%;
}
.single-product .woocommerce-product-gallery__image--placeholder img,
.single-product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	border-radius: 0;
	display: block;
}

/* En móvil: una sola columna, imagen a todo el ancho. */
@media (max-width: 768px) {
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary.entry-summary {
		width: 100%;
	}
}

/* ---------- Título y precio ---------- */
.single-product .product_title.entry-title {
	line-height: 1.08;
	color: var(--st-dusk);
	font-size: 2.4rem;
	margin: 0 0 .5rem;
}
.single-product .summary .price,
.single-product .summary .price ins {
	color: var(--st-terra);
	font-weight: 800;
}
.single-product .summary .price {
	font-size: 2rem;
	margin: .3rem 0 1.3rem;
	line-height: 1;
}
.single-product .summary .price del {
	color: #a99f92;
	font-weight: 500;
	font-size: 1.2rem;
	margin-right: .5rem;
}

/* ---------- Selector de moneda (USD / EUR / BTC) ---------- */
.st-currency {
	margin: 0 0 1.3rem;
}
.st-currency__switch {
	display: inline-flex;
	gap: 0;
	padding: 3px;
	background: #f4eee2;
	border-radius: 999px;
}
/* Son <button>, no enlaces: cambiar de moneda no lleva a ninguna parte.
   De ahí el aplanado (el navegador les pone borde y fondo propios). */
.st-cur-btn {
	display: inline-block;
	padding: .38rem .95rem;
	border: 0;
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
	color: #7a7268;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* GeneratePress pinta de gris oscuro todo button:hover y button:focus;
   sin quitarle ese fondo, el texto de las monedas inactivas desaparecía. */
.st-cur-btn:hover,
.st-cur-btn:focus {
	color: var(--st-dusk);
	background: none;
}
.st-cur-btn.is-active {
	color: #fff;
	background: var(--st-sunset);
	box-shadow: 0 4px 12px rgba(238, 123, 48, .28);
}
.st-currency__equiv {
	margin: .7rem 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--st-terra);
}
.st-currency__note {
	margin: .25rem 0 0;
	font-size: .74rem;
	color: #9a9086;
}

/* ---------- Disponibilidad (píldora verde discreta) ---------- */
.single-product .summary .stock {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .82rem;
	font-weight: 600;
	color: #2f7d4f;
	background: #e8f6ee;
	padding: .32rem .8rem;
	border-radius: 999px;
	margin: 0 0 1.2rem;
}
.single-product .summary .stock::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #35a568;
}

/* Una propiedad es única: no tiene sentido elegir cantidad. */
.single-product form.cart .quantity {
	display: none;
}

/* ---------- Distintivos (zona / frente al mar) ---------- */
.st-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1rem;
}
.st-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.st-badge--zona {
	background: #f2ecff;
	color: var(--st-dusk);
}
.st-badge--zona:hover {
	background: #e7ddff;
}
.st-badge--frente {
	/* "Frente al mar": tonos océano del manual (teal → azul). */
	background: linear-gradient(90deg, var(--st-teal), var(--st-blue));
	color: #fff;
}

/* ---------- Rejilla de especificaciones (tarjetas) ---------- */
.st-specs {
	list-style: none;
	margin: 1.6rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
	gap: .8rem;
}
.st-spec {
	text-align: center;
	margin: 0;
	padding: 1.1rem .6rem;
	background: linear-gradient(180deg, #ffffff, #fbf6ec);
	border: 1px solid #f0e6d2;
	border-radius: 14px;
	transition: transform .16s ease, box-shadow .16s ease;
}
.st-spec:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(55, 40, 25, .10);
}
.st-spec__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.7rem;
	height: 2.7rem;
	margin: 0 auto .55rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 5px 14px rgba(238, 123, 48, .18);
	font-size: 1.3rem;
}
.st-spec__val {
	display: block;
	font-weight: 800;
	color: var(--st-dusk);
	font-size: 1.1rem;
}
.st-spec__label {
	display: block;
	margin-top: .1rem;
	font-size: .72rem;
	color: #7a7268;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* ---------- Botón "Reservar propiedad" ---------- */
.single-product .cart .single_add_to_cart_button.button.alt {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--st-sunset);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .3px;
	padding: .95rem 2rem;
	border-radius: 8px;
	box-shadow: 0 10px 26px rgba(238, 123, 48, .28);
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.single-product .cart .single_add_to_cart_button.button.alt:hover {
	background: var(--st-terra);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(184, 92, 56, .32);
}

/* ---------- Metadatos (categoría) ---------- */
.single-product .product_meta {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid #eee;
	font-size: .85rem;
	color: #7a7268;
}
/* La propiedad no expone SKU al visitante. */
.single-product .product_meta .sku_wrapper {
	display: none;
}
.single-product .product_meta .posted_in {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}
.single-product .product_meta .posted_in a {
	display: inline-block;
	padding: .2rem .65rem;
	background: #f2ecff;
	color: var(--st-dusk);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.single-product .product_meta .posted_in a:hover {
	background: #e7ddff;
}

/* ---------- Pestañas (Descripción / Características / Reviews) ---------- */
/* Se neutraliza el marco redondeado por defecto de WooCommerce por un
   subrayado limpio con el naranja de marca en la pestaña activa. */
.woocommerce-tabs ul.tabs {
	margin: 0 0 1.6rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	border-bottom: 2px solid #eee;
}
.woocommerce-tabs ul.tabs::before {
	display: none;
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .7rem 1.1rem;
	margin-bottom: -2px;
	font-weight: 600;
	color: #7a7268;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--st-dusk);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--st-dusk);
	border-bottom-color: var(--st-sunset);
}
.woocommerce-tabs .panel {
	padding-top: .3rem;
}
.woocommerce-tabs .panel > h2:first-child,
.woocommerce-tabs .panel h3 {
	color: var(--st-dusk);
}

/* ---------- Contenido de la pestaña Características ---------- */
.st-amenities {
	list-style: none;
	margin: .5rem 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .5rem .9rem;
}
.st-amenities li {
	position: relative;
	padding-left: 1.6rem;
}
.st-amenities li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--st-sunset);
	font-weight: 700;
}
.st-feature-link {
	display: inline-block;
	font-weight: 600;
	color: var(--st-terra);
}

/* ---------- Propiedades relacionadas ---------- */
.single-product .related.products h2 {
	color: var(--st-dusk);
}
/* Las tarjetas de las propiedades relacionadas usan la misma plantilla que el
   catálogo, así que las define el sistema del kit. Aquí se retiraron por el
   mismo motivo que las de la portada: su ':hover' desplazaba la tarjeta
   completa. */

/* =========================================================
   FILTRO «Distancia a Punta Roca» (catálogo)
   ========================================================= */
.st-punta-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.1rem;
	margin: 0 0 1.8rem;
	padding: 1.1rem 1.3rem;
	background: linear-gradient(120deg, #fff 0%, #fbf6ec 100%);
	border: 1px solid #f0e6d2;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(55, 40, 25, .07);
}
.st-punta-filter__label {
	font-weight: 800;
	color: var(--st-dusk);
	font-size: 1rem;
	letter-spacing: .2px;
}
.st-punta-filter__opts {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}
.st-punta-pill {
	display: inline-block;
	padding: .4rem .9rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
	color: var(--st-terra);
	background: #fff;
	border: 1.5px solid #f0d9c4;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.st-punta-pill:hover {
	border-color: var(--st-sunset);
	color: var(--st-sunset);
}
.st-punta-pill.is-active {
	color: #fff;
	background: var(--st-sunset);
	border-color: var(--st-sunset);
	box-shadow: 0 5px 14px rgba(238, 123, 48, .28);
}

/* =========================================================
   VISUALIZACIÓN INMERSIVA (ficha de propiedad)
   ========================================================= */

/* ---------- Header de video 4K ---------- */
.st-video-hero {
	position: relative;
	margin: 0 0 2rem;
	border-radius: 16px;
	overflow: hidden;
	background: var(--st-brown);
	box-shadow: 0 16px 40px rgba(55, 40, 25, .16);
	line-height: 0;
}
.st-video-hero__media {
	display: block;
	width: 100%;
	height: clamp(240px, 52vh, 620px);
	object-fit: cover;
}
/* Variante oEmbed (YouTube/Vimeo): mantiene proporción 16:9. */
.st-video-hero--embed {
	height: 0;
	padding-top: 56.25%;
}
.st-video-hero--embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Botón ▶ central: visible solo cuando el video está pausado
   (autoplay suprimido por ahorro de datos / reducir movimiento, o pausa manual). */
.st-video-hero__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 4.6rem;
	height: 4.6rem;
	border: 0;
	border-radius: 50%;
	background: rgba(238, 123, 48, .92);
	color: #fff;
	font-size: 1.5rem;
	line-height: 4.6rem;
	padding-left: .35rem; /* Centra visualmente el triángulo. */
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(20, 12, 30, .35);
	transition: background-color .15s ease, transform .15s ease;
}
.st-video-hero__play:hover {
	background: var(--st-terra);
	transform: translate(-50%, -50%) scale(1.06);
}
.st-video-hero.is-playing .st-video-hero__play {
	display: none;
}

/* Botón de sonido flotante */
.st-video-hero__sound {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	width: 2.9rem;
	height: 2.9rem;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 12, 30, .55);
	color: #fff;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color .15s ease, transform .15s ease;
}
.st-video-hero__sound:hover {
	background: rgba(20, 12, 30, .78);
	transform: translateY(-2px);
}

/* =========================================================
   RESERVA (seña / Holding Fee)
   ========================================================= */
.st-reservar {
	margin: .4rem 0 0;
}
.st-reservar__fee {
	margin: 0 0 .6rem;
	font-size: 1rem;
	color: #7a7268;
}
.st-reservar__fee strong {
	color: var(--st-terra);
	font-weight: 800;
	font-size: 1.15rem;
}
.st-reservar__btn.single_add_to_cart_button.button.alt {
	display: block;
	width: 100%;
	text-align: center;
}
.st-reservar__hint {
	margin: .7rem 0 0;
	font-size: .8rem;
	color: #9a9086;
}
.st-reservar__done {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: .7rem 1.1rem;
	background: #f4eee2;
	border-radius: 8px;
	font-weight: 700;
	color: var(--st-dusk);
}
.st-reservar__note {
	margin: 0;
	padding: .7rem 1.1rem;
	background: #fff6ec;
	border: 1px dashed #f0d9c4;
	border-radius: 8px;
	color: #7a7268;
	font-size: .9rem;
}

/* ---------- Tour 3D (Matterport) ---------- */
.st-tour {
	clear: both; /* Baja del área flotante (galería + resumen) de WooCommerce. */
	margin: 2.5rem 0;
	padding-top: 1rem;
}
.st-tour__title {
	color: var(--st-dusk);
	margin: 0 0 .3rem;
}
.st-tour__hint {
	margin: 0 0 1.1rem;
	color: #7a7268;
}
.st-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 16:9 */
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(55, 40, 25, .12);
	background: #f4eee2;
}
.st-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}