/* =========================================================
   SISTEMA DE DISEÑO «HOMANSION» — adaptado a la marca SurfTerra
   =========================================================
   Origen: Template Kit de Elementor "Homansion — Real Estate &
   Property", extraído en uploads/template-kits/2f7b1…/. Los
   valores (escala tipográfica, radios, paddings, sombras,
   estructura de secciones) se leyeron de templates/global.json y
   de las plantillas homepage/properties/property-detail.

   NO se usa Elementor ni ElementsKit: el kit solo aportó los
   ajustes de diseño y aquí se reescriben como CSS propio.

   Decisiones de adaptación (deliberadas, no omisiones):

   1. TIPOGRAFÍA. El kit usa Figtree + Josefin Sans. Se conserva
      Jost (ya autoalojada y exigida por el Brand Book como
      sustituta de Century Gothic) y se replica la ESCALA del kit:
      los mismos clamp(), pesos, alturas de línea y tracking
      negativo. Es el ritmo tipográfico —no la familia— lo que
      hace que un diseño se reconozca.

   2. COLOR. El kit es verde oscuro (#142611) con acento lima
      (#E8F243). Se mantiene la paleta oficial navy/naranja y solo
      se traducen los ROLES. Ver el mapa en :root.

   3. CONTRASTE. Los botones usan el café secundario del Manual
      de Marca (#7C3F33) con texto beige (#FFF9F0): 7,67:1, cumple
      AA y AAA. El naranja de marca (#D36100) queda para acentos
      decorativos, donde el contraste no es requisito.

   Para revertir todo el kit: comentar el enqueue de este archivo
   en functions.php. No modifica style.css.
   ========================================================= */

/* Tipografía propia de marca. El archivo aún no lo ha entregado el cliente:
   la declaración queda lista y --kit-font-marca sin aplicar a ningún selector
   para no provocar una petición fallida en cada carga. */
@font-face {
	font-family: 'SurfTerra';
	src: url('../fonts/surfterra.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Escala tipográfica (clamps literales del kit) ---- */
	--kit-fs-hero:    clamp(3.5rem, 2.4239rem + 4.7826vw, 6.25rem);
	--kit-fs-h1:      clamp(2.125rem, 1.7092rem + 1.8478vw, 3.1875rem);
	--kit-fs-h2:      clamp(1.8125rem, 1.519rem + 1.3043vw, 2.5625rem);
	--kit-fs-h3:      clamp(1.5rem, 1.2799rem + 0.9783vw, 2.0625rem);
	--kit-fs-h4:      clamp(1.3125rem, 1.1902rem + 0.5435vw, 1.625rem);
	--kit-fs-h5:      clamp(1.09375rem, 1.0082rem + 0.3804vw, 1.3125rem);
	/* Antetítulos un paso mayores: a petición del cliente, «QUIÉNES SOMOS»
	   quedaba demasiado pequeño sobre las fotos. */
	--kit-fs-eyebrow: clamp(0.9375rem, 0.8641rem + 0.3261vw, 1.125rem);
	--kit-fs-body:    clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
	--kit-fs-medium:  clamp(1.0625rem, 1.0136rem + 0.2174vw, 1.1875rem);
	--kit-fs-small:   clamp(0.8125rem, 0.7636rem + 0.2174vw, 0.9375rem);
	--kit-fs-label:   clamp(0.875rem, 0.8261rem + 0.2174vw, 1rem);

	/* ---- Neutros del kit (se conservan tal cual) ---- */
	--kit-surface:     #ffffff; /* "Netral" */
	--kit-surface-alt: #f4f6f6; /* "BG Light" */
	--kit-border:      #e0e6e5; /* "Border/Divider" */
	/* Texto corrido en café, no en gris: el cliente pidió «color fuente café».
	   #6A5544 sobre blanco da 7,01:1 → AAA, y a este tamaño se lee mejor que
	   el café pleno de los recuadros. */
	--kit-text:        #6A5544;

	/* ---- Café y beige de marca ----
	   El café es el secundario oficial del Manual de Marca (Pantone 499 C,
	   #7C3F33), el mismo que declara style.css como --st-cafe: el manual
	   reserva esa paleta para «superficies», que es lo que son los botones y
	   recuadros. Beige del texto tomado de la papelería. Contraste 7,67:1 → AAA. */
	--kit-cafe:      var(--st-cafe);
	--kit-cafe-hond: #5E2F26; /* Barrido de los botones al pasar el ratón. */
	--kit-beige:     #FFF9F0;

	/* Familia propia de marca, lista para cuando llegue el .woff2. */
	--kit-font-marca: 'SurfTerra', 'Jost', system-ui, sans-serif;

	/* ---- Mapa de roles: kit → SurfTerra ---- */
	--kit-ink:           var(--st-navy);   /* kit #142611 · titulares y texto fuerte */
	--kit-accent:        var(--st-orange); /* kit #E8F243 · acentos decorativos */
	--kit-accent-strong: var(--kit-cafe);  /* fondo de botón: el recuadro café de la papelería */
	--kit-accent-2:      var(--st-sand);   /* kit #B2B54F · iconos, cifras, hover */
	--kit-badge:         var(--st-teal);   /* kit #33602B · franja sobre la foto */
	--kit-dark:          var(--st-navy);   /* kit #202020 · secciones oscuras */
	--kit-muted:         var(--kit-cafe);  /* kit #7A7C34 · etiquetas secundarias */

	/* ---- Medidas ---- */
	--kit-container:   1280px;
	/*
	 * Radio de los botones. El kit los deja rectos (button_border_radius = 0);
	 * aquí se redondean ligeramente por decisión de marca. Un solo valor para
	 * todos: cambiándolo aquí se ajustan botones, catálogo y formularios.
	 */
	--kit-radius-btn:  6px;
	--kit-shadow-bar:  0 5px 20px -5px rgba(0, 0, 0, .15);
	--kit-shadow-card: 0 10px 30px -10px rgba(0, 0, 0, .15);

	/* ---- Movimiento ----
	 * Un solo lenguaje para todo el sitio. Antes convivían dos: el zoom de las
	 * fotos y el revelado usaban una curva larga y suave, mientras que botones,
	 * enlaces y menú usaban 'var(--kit-dur) var(--kit-ease)' —rápido y seco—, así que la misma
	 * interfaz se sentía cuidada en unos sitios y funcional en otros.
	 *
	 * La curva es la del kit (mismo cubic-bezier del revelado): arranca
	 * decidida y frena largo, que es lo que hace que un movimiento se lea como
	 * suave y no como brusco.
	 */
	--kit-ease:      cubic-bezier(.2, .7, .2, 1);
	--kit-dur:       .32s; /* Cambios de color, subrayados, iconos. */
	--kit-dur-larga: .55s; /* Recorridos visibles: zoom de foto, desplazamientos. */
}

/* =========================================================
   1 · CAPA TIPOGRÁFICA
   ========================================================= */

body {
	font-size: var(--kit-fs-body);
	line-height: 1.62;
	color: var(--kit-text);
}

h1, h2, h3, h4, h5 {
	color: var(--kit-ink);
	text-transform: none;
}

h1 { font-size: var(--kit-fs-h1); font-weight: 600; line-height: 1.2;  letter-spacing: -1.3px; }
h2 { font-size: var(--kit-fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -1.1px; }
h3 { font-size: var(--kit-fs-h3); font-weight: 600; line-height: 1.15; letter-spacing: -1px; }
h4 { font-size: var(--kit-fs-h4); font-weight: 500; line-height: 1.2;  letter-spacing: -.2px; }
h5 { font-size: var(--kit-fs-h5); font-weight: 500; line-height: 1.2;  letter-spacing: -.2px; }

/* H6 del kit = etiqueta «eyebrow»: pequeña, mayúsculas, muy espaciada. */
h6,
.kit-eyebrow {
	display: block;
	margin: 0 0 .6em;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kit-cafe);
}

/* Variante con barra vertical de acento a la izquierda. En el kit es un
   borde del propio encabezado ('_border_color'), no una línea horizontal. */
.kit-eyebrow--rule {
	display: inline-block;
	padding-left: .8em;
	border-left: 3px solid var(--kit-accent-2);
	line-height: 1.15;
}

/* =========================================================
   2 · APLANADO
   =========================================================
   El kit no tiene esquinas redondeadas (button_border_radius = 0)
   ni sombras difusas: es plano y geométrico. Aquí se neutraliza
   el lenguaje redondeado de style.css sin tener que editarlo.
   ========================================================= */

.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-product-gallery,
.st-embed,
.st-video-hero,
.st-spec,
.st-punta-filter {
	border-radius: 0;
	box-shadow: none;
}

/* Las píldoras pierden su forma de cápsula y adoptan la tipografía de
   etiqueta del kit. Los distintivos y la disponibilidad son ETIQUETAS: van
   rectas como las tarjetas. El filtro de distancia y el selector de moneda
   son CONTROLES, así que toman el radio de los botones. */
.st-badge,
.st-punta-pill,
.st-cur-btn,
.single-product .summary .stock {
	box-shadow: none;
	font-size: var(--kit-fs-eyebrow);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.st-badge,
.single-product .summary .stock {
	border-radius: 0;
}

.st-punta-pill,
.st-cur-btn {
	border-radius: var(--kit-radius-btn);
}

/*
 * Estado activo del filtro de distancia, en café.
 *
 * La hoja base lo pintaba en naranja, y quedaba raro: el selector de moneda
 * —que es el control gemelo, y aparece a dos dedos de aquí en la ficha— ya
 * marca su opción elegida en café. Dos controles hermanos con dos acentos
 * distintos se leen como dos sistemas.
 *
 * El criterio que sigue el kit: los estados RELLENOS de un control van en
 * café, que es el «recuadro» que pidió el cliente; el naranja se reserva para
 * los acentos finos (cifras, trazos, filetes).
 */
.st-punta-pill.is-active {
	background: var(--kit-accent-strong);
	border-color: var(--kit-accent-strong);
	box-shadow: none;
}
.st-punta-pill:hover {
	border-color: var(--kit-accent-strong);
	color: var(--kit-accent-strong);
}
.st-punta-pill.is-active:hover {
	color: #fff;
}

/* =========================================================
   3 · BOTONES
   =========================================================
   Kit: fondo de acento, texto sobre él, radio 0, tipografía
   «Accent» (600, capitalize) y transición al tono secundario.
   ========================================================= */

.kit-btn,
.woocommerce ul.products li.product .button,
.single-product .cart .single_add_to_cart_button.button.alt,
.st-hero .wp-block-button__link,
.st-cta .wp-block-button__link {
	display: inline-block;
	padding: 1em 2.2em;
	border: 0;
	border-radius: var(--kit-radius-btn);
	background: var(--kit-accent-strong);
	color: var(--kit-beige);
	font-size: var(--kit-fs-body);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	position: relative;
	z-index: 0;
	overflow: hidden;
	text-decoration: none;
	box-shadow: none;
	transition:
		color var(--kit-dur) var(--kit-ease),
		transform var(--kit-dur) var(--kit-ease),
		box-shadow var(--kit-dur) var(--kit-ease);
}

/*
 * BARRIDO DEL BOTÓN. El color de fondo ya no cambia de golpe: una capa del tono
 * oscuro se despliega desde la izquierda por debajo del texto. Va en un
 * pseudoelemento con 'z-index: -1' (sobre el fondo del botón, bajo su texto)
 * porque un degradado animado obligaría a repintar el fondo en cada fotograma,
 * mientras que una transformación la resuelve la GPU.
 */
.kit-btn::before,
.woocommerce ul.products li.product .button::before,
.single-product .cart .single_add_to_cart_button.button.alt::before,
.st-hero .wp-block-button__link::before,
.st-cta .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--kit-cafe-hond);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--kit-dur) var(--kit-ease);
}

.kit-btn:hover::before,
.woocommerce ul.products li.product .button:hover::before,
.single-product .cart .single_add_to_cart_button.button.alt:hover::before,
.st-hero .wp-block-button__link:hover::before,
.st-cta .wp-block-button__link:hover::before {
	transform: scaleX(1);
}

/* El fondo lo pinta el barrido; aquí solo se levanta ligeramente el botón. */
.kit-btn:hover,
.woocommerce ul.products li.product .button:hover,
.single-product .cart .single_add_to_cart_button.button.alt:hover,
.st-hero .wp-block-button__link:hover,
.st-cta .wp-block-button__link:hover {
	color: var(--kit-beige);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -8px rgba(26, 20, 40, .45);
}

/*
 * El rótulo se queda beige TAMBIÉN con el foco del teclado.
 *
 * GeneratePress genera desde el personalizador la regla
 * `a:hover, a:focus, a:active { color: #ee7b30; }`. Su especificidad (0,1,1)
 * gana a la del botón (0,1,0), así que al llegar con el tabulador —sin el
 * ratón encima, que es cuando la regla de arriba lo tapaba— el texto se volvía
 * naranja sobre el fondo café: 2,3:1 de contraste, por debajo del mínimo
 * legible. Con el ratón no se notaba nunca, porque `:hover` (0,2,0) ya ganaba.
 *
 * Se repite el color en `:focus` con la misma especificidad que el hover.
 * El anillo de foco del navegador se conserva: no hay ningún `outline: 0` que
 * lo quite, así que la señal de «estoy aquí» no depende del color del texto.
 */
.kit-btn:focus,
.woocommerce ul.products li.product .button:focus,
.single-product .cart .single_add_to_cart_button.button.alt:focus,
.st-hero .wp-block-button__link:focus,
.st-cta .wp-block-button__link:focus {
	color: var(--kit-beige);
}
.kit-btn:active,
.woocommerce ul.products li.product .button:active,
.st-cta .wp-block-button__link:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.kit-btn:hover,
	.woocommerce ul.products li.product .button:hover,
	.st-cta .wp-block-button__link:hover {
		transform: none;
	}
	.kit-btn::before,
	.woocommerce ul.products li.product .button::before {
		transition: none;
	}
}

/* Botón fantasma sobre fondo oscuro (hero y secciones dark). */
.kit-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
}
.kit-btn--ghost:hover {
	background: #fff;
	color: var(--kit-ink);
	border-color: #fff;
}

/*
 * El resto de botones del sitio (carrito, pago, formularios, buscador) toma el
 * mismo radio, para que no queden unos redondeados y otros rectos.
 *
 * Los elementos circulares —«volver arriba» del pie, el ▶ del video— definen
 * su radio en reglas con clase, que ganan en especificidad a estos selectores
 * de elemento: siguen siendo círculos.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
button,
input[type="submit"],
input[type="button"] {
	border-radius: var(--kit-radius-btn);
}

/* Campos de formulario: el kit los deja muy redondeados (30px)
   sobre fondo claro — el único radio que sí conserva. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], select, textarea {
	background: var(--kit-surface-alt);
	border: 1px solid var(--kit-border);
	border-radius: 30px;
	padding: 10px 20px;
	color: var(--kit-text);
}
textarea {
	border-radius: 16px;
}

/* ---- Iconos en línea ----
   Los dibuja inc/iconos.php como SVG de 24×24. El tamaño va en 'em' para que
   sigan al texto del bloque, y el color lo heredan con currentColor: el mismo
   icono sirve en blanco sobre el cuadro de acento y en tinta sobre fondo
   claro, sin declarar un color aquí. */
.kit-icono {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
}

.kit-icono-2 {
	flex: 0 0 auto;
	width: 100px;
	height: 1.25em;
}

/* Botón con flecha: los CTA del kit cierran con una punta a la derecha. */
.kit-btn--flecha {
	display: inline-flex;
	align-items: center;
	gap: .6em;
}
.kit-btn__flecha {
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--kit-dur) var(--kit-ease);
}
/* Icono delante del texto, como la lupa del hero. */
.kit-btn__icono {
	flex: none;
	width: 1.1em;
	height: 1.1em;
}
.kit-btn--flecha:hover .kit-btn__flecha {
	transform: translateX(3px);
}

/* =========================================================
   4 · SECCIONES
   =========================================================
   Ritmo vertical del kit: 7em arriba, 5–6em abajo, 1em a los
   lados; las secciones oscuras respiran más (8–9em).
   ========================================================= */

/*
 * RITMO VERTICAL. El kit declara 7em arriba y 6em abajo, pensados para su
 * maqueta original en inglés, con titulares cortos y párrafos de dos líneas.
 * Con los textos en español —más largos— y las franjas ya bien diferenciadas
 * por color, ese aire se acumulaba: medido en la portada, el 21% del alto de
 * la página era espacio vacío, y entre dos franjas seguidas se juntaban más de
 * 200px sin nada.
 *
 * 5em/4em mantiene la sensación de holgura (el kit es un diseño amplio, no
 * apretado) y devuelve unos 250px a la portada. Cambiando estos dos valores se
 * reajusta el ritmo de todo el sitio.
 */
.kit-section {
	padding: 5em 1em 4em;
}
.kit-section--tight { padding: 3.5em 1em 3em; }

/* La sección del catálogo cierra con menos aire: cada tarjeta ya aporta 2em
   de relleno propio en su borde inferior, así que los 6em del kit sumaban
   demasiado hueco antes de la sección siguiente. */
.kit-section--propiedades { padding-bottom: 3.5em; }
/* La franja oscura llevaba 8em arriba y abajo: medidos, 136px vacíos por cada
   lado. Se acompasa con el resto (misma reducción proporcional). */
.kit-section--dark  { padding: 6em 1em; background: var(--kit-dark); color: rgba(255, 255, 255, .82); }
.kit-section--alt   { background: var(--kit-surface-alt); }

/*
 * Franjas con fotografía de fondo. El kit no las deja en color plano: pone
 * una foto y encima un velo del color «Black BG» (#202020). El velo no es
 * decorativo — sin él el texto blanco no se lee sobre la foto.
 *
 * FOTOS PROVISIONALES de Unsplash (licencia libre, uso comercial sin
 * atribución). Sustituir los archivos en assets/img/ por fotos propias.
 */
.kit-section--foto-anochecer,
.kit-section--foto-aerea {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * Sin parallax (septiembre de 2026). Estas franjas y las cabeceras de página
 * llevaban en escritorio 'background-attachment: fixed'. Un fondo anclado a la
 * ventana obliga al navegador a repintar la foto en cada paso del scroll y a
 * reservar memoria gráfica del tamaño de la ventana; en portátiles con gráfica
 * integrada esa memoria sale de la RAM del equipo, y con la RAM justa la
 * página llegaba a dejar de responder. La foto acompaña al scroll.
 */

/* Banda: el texto vive en el 43% izquierdo, así que el velo va degradado
   —denso donde está el texto, abierto donde se ve la casa—. */
.kit-section--foto-anochecer {
	background-image:
		linear-gradient(
			90deg,
			rgba(32, 32, 32, .93) 0%,
			rgba(32, 32, 32, .76) 48%,
			rgba(32, 32, 32, .42) 100%
		),
		var(--st-img-banda);
}

/* Cierre: el texto va centrado sobre toda la franja, así que el velo es
   uniforme y algo más denso que el del kit, porque la foto es muy luminosa.
   Solo la usa Contacto; la foto la pidió el cliente (Depositphotos_101343240). */
.kit-section--foto-aerea {
	background-image:
		linear-gradient(rgba(32, 32, 32, .74), rgba(32, 32, 32, .74)),
		url('../img/surfista-atardecer.webp');
}

.kit-section--dark h1,
.kit-section--dark h2,
.kit-section--dark h3,
.kit-section--dark h4,
.kit-section--dark h5 { color: #fff; }
.kit-section--dark .kit-eyebrow { color: var(--kit-border); }

.kit-container {
	max-width: var(--kit-container);
	margin-inline: auto;
}

/* Encabezado de sección centrado: eyebrow + H2 + entradilla. */
.kit-heading {
	max-width: 720px;
	margin: 0 auto 3em;
	text-align: center;
}
.kit-heading p {
	margin: .8em 0 0;
	color: var(--kit-text);
}

/* =========================================================
   5 · TARJETA DE PROPIEDAD (catálogo)
   =========================================================
   La pieza más característica del kit: fila de 50/50 con la foto
   a un lado y los datos al otro, alternando el lado en cada
   tarjeta. Sobre la foto, una franja con el estado y la ubicación.
   Estructura en woocommerce/content-product.php.
   ========================================================= */

/* El catálogo deja de ser rejilla y pasa a ser una pila de filas. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 2em;
	/* Sin margen inferior: el relleno de la sección ya separa de la
	   siguiente. Tenerlo aquí contaba el hueco dos veces. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	background: transparent;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: none;
}
.woocommerce ul.products li.product:hover {
	transform: none;
	box-shadow: none;
}

/*
 * La tarjeta entera reacciona al ratón, no solo la foto: el marco se aclara, la
 * tarjeta se levanta un poco y proyecta una sombra baja. El kit deja las
 * tarjetas planas (por eso .woocommerce li.product lleva 'box-shadow: none'),
 * así que esto es una desviación deliberada: sin ella, una fila que ocupa media
 * pantalla no daba ninguna señal de ser pulsable.
 */
.kit-property {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	padding: 2em;
	background: var(--kit-surface-alt);
	transition:
		transform var(--kit-dur) var(--kit-ease),
		box-shadow var(--kit-dur) var(--kit-ease),
		background-color var(--kit-dur) var(--kit-ease);
}

.woocommerce ul.products li.product:hover .kit-property {
	transform: translateY(-6px);
	box-shadow: 0 22px 45px -28px rgba(26, 20, 40, .55);
	background: #eef1f1;
}

/* La foto se acerca aunque el ratón esté sobre la columna de datos: la tarjeta
   es una sola unidad, y que solo respondiera la mitad se notaba. */
.woocommerce ul.products li.product:hover .kit-property__media img {
	transform: scale(1.05);
}

/* El botón «Ver detalle» completa su barrido a la vez que el resto. */
.woocommerce ul.products li.product:hover .kit-btn::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover .kit-property {
		transform: none;
	}
}

/* Alternancia izquierda/derecha, como en la plantilla. */
.woocommerce ul.products li.product:nth-child(even) .kit-property {
	flex-direction: row-reverse;
}

/* ---- Columna de la foto ---- */
.kit-property__media {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 50%;
	margin: 0;
	line-height: 0;
}
/*
 * El enlace define el hueco de la foto y lo recorta:
 *  - 'overflow: hidden' evita que el zoom del hover se desborde.
 *  - 'aspect-ratio' fija la proporción del hueco (3:2, la de las fotos
 *    horizontales) para que TODAS las tarjetas midan igual. Sin esto, una
 *    foto vertical estira la tarjeta al doble de alto que las demás.
 *  - 'flex: 1 1 auto' le permite crecer si la columna de datos es más alta,
 *    para que no quede un hueco sobre la franja de estado.
 * La imagen rellena ese hueco con 'object-fit: cover', recortando lo que
 * sobre en lugar de deformarse.
 */
.kit-property__media a {
	display: block;
	overflow: hidden;
	flex: 1 1 auto;
	aspect-ratio: 3 / 2;
	min-height: 0;
}
.kit-property__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
	transition: transform var(--kit-dur-larga) var(--kit-ease);
}

/* Zoom al pasar el ratón SOBRE LA FOTO, no sobre la tarjeta entera: el
   enlace envuelve solo la imagen, así que la columna de datos y la franja
   de estado no lo disparan. El 1.05 es el valor literal del kit
   ('_transform_scale_effect_hover'), no una estimación. */
.kit-property__media a:hover img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.kit-property__media img {
		transition: none;
	}
	.kit-property__media a:hover img {
		transform: none;
	}
}

/* Franja inferior: estado a la izquierda, ubicación a la derecha. */
.kit-property__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5em 1em;
	min-height: 60px;
	padding: 20px 25px 15px;
	background: var(--kit-badge);
	line-height: 1.2;
}
.kit-property__status,
.kit-property__place {
	margin: 0;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.kit-property__status { color: var(--kit-beige); }
.kit-property__place  { color: #fff; }

/* ---- Columna de datos ---- */
.kit-property__body {
	display: flex;
	flex-direction: column;
	width: 50%;
	padding: 3em;
	background: var(--kit-surface);
}
/*
 * El selector lleva el rastro completo del listado a propósito. WooCommerce
 * declara `.woocommerce ul.products li.product h3 { font-size: 1em }` —tres
 * clases y tres elementos—, que gana a un `.kit-property__title` suelto: el
 * titular de la tarjeta se quedaba en 17px en vez de los ~33 que pide la
 * escala del kit. Medido, pasaba TANTO en el catálogo como en «Otras
 * propiedades»; se notó en el segundo porque la tarjeta va más estrecha.
 */
.woocommerce ul.products li.product .kit-property__title {
	margin: 0 0 .5em;
	padding: 0;
	font-size: var(--kit-fs-h3);
	line-height: 1.15;
	letter-spacing: -1px;
}
.kit-property__title a {
	color: var(--kit-ink);
	text-decoration: none;
}
.kit-property__title a:hover {
	color: var(--kit-accent-strong);
}
.kit-property__excerpt {
	margin: 0 0 1em;
	color: var(--kit-text);
}

/* Fila de datos con filete arriba y abajo (1px del kit). */
.kit-property__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1em 1.5em;
	margin: auto 0 1em; /* 'auto' empuja el bloque al pie de la tarjeta. */
	/* Ver más abajo: con menos de tres datos, 'space-between' los descoloca. */
	padding: 20px 0;
	border-top: 1px solid var(--kit-border);
	border-bottom: 1px solid var(--kit-border);
	list-style: none;
}
/*
 * 'space-between' reparte tres datos a lo ancho, que es como lo hace el kit.
 * Pero un terreno suele declarar solo el área: con un único dato, ese reparto
 * lo dejaba flotando en mitad de la fila (medido: a 178px del borde, es decir
 * centrado) como si le faltara algo al lado. Con menos de tres, se alinean a
 * la izquierda y se leen como el principio de una lista.
 */
.kit-property__stats:not(:has(> :nth-child(3))) {
	justify-content: flex-start;
	gap: 1em 3em;
}

.kit-property__stat {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	/* La hoja del tema sangra los <li> para colocar sus viñetas propias (igual
	   que hay que anularlo en .st-amenities). Aquí no hay viñeta, y ese sangrado
	   despegaba el primer dato 49px del borde de la tarjeta. */
	padding-left: 0;
}
.kit-property__stat-label {
	font-size: var(--kit-fs-label);
	font-weight: 600;
	line-height: 1.3;
	color: var(--kit-text);
}
.kit-property__stat-value {
	display: flex;
	align-items: center;
	gap: .4em;
	font-size: var(--kit-fs-small);
	color: var(--kit-text);
}
.kit-property__stat-value::before {
	content: "";
	width: .45em;
	height: .45em;
	background: var(--kit-accent-2);
}

/* Precio + llamada a la acción. */
.kit-property__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1em;
}
.kit-property__price-label {
	display: block;
	margin: 0 0 .2em;
	font-size: var(--kit-fs-small);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kit-muted);
}
.kit-property__price .price,
.kit-property__price .price ins {
	display: block;
	font-size: var(--kit-fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -1px;
	color: var(--kit-ink);
	text-decoration: none;
}
.kit-property__price .price del {
	font-size: var(--kit-fs-small);
	font-weight: 400;
	color: var(--kit-text);
	letter-spacing: 0;
}
.kit-property .kit-btn {
	align-self: flex-end;
}

/* =========================================================
   6 · MÉTRICAS, SERVICIOS Y LISTA NUMERADA
   ========================================================= */

/* Fila de cifras: 4 columnas con filetes verticales y filete
   inferior de 2px en el tono de acento. */
.kit-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 3em 0;
	background: var(--kit-surface);
	border-bottom: 2px solid var(--kit-accent-2);
}
.kit-metrics__item {
	padding: 0 2em;
	border-left: 1px solid var(--kit-border);
}
.kit-metrics__item:first-child {
	border-left: 0;
}
.kit-metrics__num {
	display: block;
	font-size: var(--kit-fs-h1);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.3px;
	color: var(--kit-ink);
}
/* En el kit las cifras alternan color; aquí, las impares en acento. */
.kit-metrics__item:nth-child(odd) .kit-metrics__num {
	color: var(--st-orange);
}
.kit-metrics__label {
	display: block;
	margin-top: .4em;
	font-size: var(--kit-fs-medium);
	font-weight: 600;
	color: var(--kit-ink);
}
.kit-metrics__note {
	display: block;
	margin-top: .2em;
	font-size: var(--kit-fs-small);
	color: var(--kit-text);
}

/* Rejilla de servicios: cajas planas con filete y fondo claro. */
/* Tres columnas: el cliente redujo la oferta a tres servicios. Con las cuatro
   de antes quedaba una celda vacía a la derecha. */
.kit-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.kit-service {
	padding: 30px;
	background: var(--kit-surface-alt);
	border: 1px solid var(--kit-border);
}
.kit-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2em;
	height: 3.2em;
	margin-bottom: 1.2em;
	background: var(--kit-badge);
	color: var(--kit-beige);
	font-size: 1rem;
}
/* Icono opcional del servicio cuando viene como imagen adjunta. */
/* Imagen destacada dentro del recuadro del icono, en lugar del emoji. */
.kit-service__icon img {
	width: 62%;
	height: 62%;
	object-fit: contain;
}
.kit-service__title {
	margin: 0 0 .5em;
	font-size: var(--kit-fs-h5);
	font-weight: 500;
	letter-spacing: -.2px;
}
.kit-service p {
	margin: 0;
	font-size: var(--kit-fs-body);
}

/* Lista numerada de la sección oscura «por qué elegirnos». */
.kit-numbered {
	margin: 2em 0 0;
	padding: 0;
	list-style: none;
}
.kit-numbered__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 35px;
	padding-bottom: 5px;
	margin-bottom: 2em;
	border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.kit-numbered__num {
	font-size: var(--kit-fs-h4);
	font-weight: 500;
	color: var(--kit-accent-2);
}
.kit-numbered__title {
	margin: 0 0 .4em;
	font-size: var(--kit-fs-h4);
	font-weight: 500;
}
.kit-numbered p {
	margin: 0;
	color: rgba(255, 255, 255, .78);
}

/* Marca de agua: el kit repite el título de sección en muy bajo
   contraste como elemento gráfico. Decorativo, se oculta a los
   lectores de pantalla desde el marcado (aria-hidden). */
.kit-watermark {
	display: block;
	text-align: right;
	font-size: var(--kit-fs-hero);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -2.2px;
	color: rgba(255, 255, 255, .06);
	pointer-events: none;
	user-select: none;
}

/* =========================================================
   7 · CABECERA FLOTANTE
   =========================================================
   El kit no usa una cabecera pegada al borde: es una barra
   blanca con sombra, separada 15px del borde superior, que se
   solapa 100px sobre el hero (margin-bottom negativo).
   ========================================================= */

.site-header {
	padding: 15px 2% 0;
	background: transparent;
}

.site-header .inside-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	max-width: var(--kit-container);
	padding: 12px 25px;
	/*
	 * Arena de la foto que mandó el cliente (Depositphotos 17596765), recortada
	 * a la derecha de las conchas para que nada quede detrás del logotipo. El
	 * velo beige al 20 % calma el grano: los enlaces café se leen a ~5,4:1 de
	 * media sobre la arena. El color del final cubre mientras carga la foto.
	 */
	background:
		linear-gradient(rgba(255, 249, 240, .2), rgba(255, 249, 240, .2)),
		url(../img/header-sand.jpg) center / cover no-repeat,
		#efe5d3;
	box-shadow: var(--kit-shadow-bar);
}

/* El logotipo de SurfTerra es un lockup VERTICAL (insignia sobre la
   palabra), mientras el del kit era horizontal. A los 60px que fija
   style.css la palabra «SURFTERRA» quedaba en ~10px e «INMOBILIARIA»
   en ~4px: ilegible. Se le da altura suficiente y la barra crece con él. */
.site-logo img,
.site-header .header-image {
	max-height: 92px;
	width: auto;
}

/*
 * ESTRELLA DE MAR. Recortada de la misma foto, va en el hueco libre entre el
 * logotipo y el menú, anclada al borde derecho del logo: así sigue a su lado
 * aunque cambie el ancho de la barra. El cliente pidió que asomara algo de la
 * foto sin tapar el logo ni los textos, así que solo aparece donde cabe con
 * holgura (medido en 15 anchos: nunca a menos de 12px de nada):
 *
 *   desde 1120px   junto al logo, a tamaño completo
 *   769 – 1119px   no aparece: el menú llega casi al logo
 *   390 – 768px    más pequeña, entre el logo y el botón
 *   hasta 389px    no aparece: el botón queda pegado al logo
 *
 * Si el menú crece (más enlaces) o cambia la tipografía del botón, hay que
 * volver a comprobar que no se toquen.
 */
.site-header .site-logo {
	position: relative;
}
.site-header .site-logo::after {
	content: "";
	position: absolute;
	pointer-events: none;
	background: url(../img/header-starfish.png) center / contain no-repeat;
	filter: drop-shadow(0 3px 3px rgba(70, 45, 20, .35));
	top: calc(50% - 38px);
	left: calc(100% + 40px);
	width: 112px;
	height: 75px;
	rotate: 0deg;
}

/* Giro de entrada de la X de cerrar del menú móvil (bloque de ≤768px). */
@keyframes st-icono-cerrar {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(.6);
	}
}

@media (min-width: 769px) and (max-width: 1119px) {
	.site-header .site-logo::after { display: none; }
}
@media (max-width: 768px) {
	.site-header .site-logo::after {
		top: calc(50% - 28px);
		left: calc(100% + 24px);
		width: 58px;
		height: 56px;
	}
}
@media (max-width: 469px) {
	.site-header .site-logo::after {
		top: calc(50% - 19px);
		left: calc(100% + 12px);
		width: 38px;
		height: 38px;
	}
}
@media (max-width: 389px) {
	.site-header .site-logo::after { display: none; }
}

/*
 * CABECERA SIEMPRE A LA VISTA. El cliente quiere el menú pegado arriba al
 * hacer scroll, en todas las páginas.
 *
 * En la mayoría de páginas la barra ocupa su sitio al principio y 'sticky' la
 * mantiene arriba sin mover nada. En la portada y las páginas del kit, en
 * cambio, flota SOBRE la foto de cabecera, que arranca en lo alto de la
 * ventana: ahí va 'fixed', a 24px del borde (el kit separaba 15px; aquí algo
 * más porque nuestro logotipo es vertical y la barra resulta más alta).
 *
 * Con la sesión abierta, la barra de administración de WordPress desplaza la
 * página con un margen que un elemento fijo ignora: se suma su altura, que
 * WordPress publica en --wp-admin--admin-bar--height. Sin sesión vale 0.
 *
 * z-index 100: por encima de los elementos de la página que llevan uno propio
 * (galerías, botones), que si no asomarían sobre la barra al pasar por debajo.
 */
.site-header {
	position: sticky;
	/* -15px: al pegarse, el aire de arriba (el padding de 15px) sube fuera de
	   la ventana y la barra queda contra el borde, sin mover el contenido. */
	top: calc(var(--wp-admin--admin-bar--height, 0px) - 15px);
	z-index: 100;
}
.home .site-header,
.kit-landing .site-header {
	position: fixed;
	top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
	left: 0;
	right: 0;
}

/*
 * PEGADA AL HACER SCROLL. Arriba del todo la barra flota separada del borde y
 * alineada con el contenido; al bajar, assets/js/cabecera.js le pone
 * .is-pegada y se ajusta al borde de la ventana, a todo el ancho y un punto
 * más baja, con una transición suave. Flotando también al bajar dejaba ver el
 * contenido por encima y a los lados de la barra.
 *
 * Todo se anima con la misma duración y la misma curva, y eso evita saltos:
 *   · El logotipo y los enlaces no se mueven de lado mientras la barra se
 *     ensancha: el relleno interior crece lo mismo que se abren los márgenes
 *     (el mayor entre 2 % + 25px y la mitad de lo que sobra fuera de los
 *     1280px del contenedor).
 *   · Donde la barra ocupa sitio en la página (sticky), el margen de abajo
 *     crece lo mismo que ella encoge, así que el contenido no sube.
 *
 * Solo en escritorio: en móvil la barra ya va de lado a lado y pegada. Encoge
 * desde 1025px, donde el menú cabe en una fila; entre 769 y 1024px va en dos
 * filas y encogerla movería el contenido.
 */
@media (min-width: 769px) {
	.site-header {
		transition:
			top var(--kit-dur) var(--kit-ease),
			padding var(--kit-dur) var(--kit-ease),
			margin var(--kit-dur) var(--kit-ease);
	}
	.site-header .inside-header {
		transition:
			max-width var(--kit-dur) var(--kit-ease),
			padding var(--kit-dur) var(--kit-ease),
			box-shadow var(--kit-dur) var(--kit-ease);
	}
	.site-header.is-pegada {
		padding-right: 0;
		padding-left: 0;
	}
	.home .site-header.is-pegada,
	.kit-landing .site-header.is-pegada {
		top: var(--wp-admin--admin-bar--height, 0px);
		padding-top: 0;
	}
	.site-header.is-pegada .inside-header {
		max-width: 100%;
		padding-right: max(calc(2% + 25px), calc((100% - var(--kit-container)) / 2 + 25px));
		padding-left: max(calc(2% + 25px), calc((100% - var(--kit-container)) / 2 + 25px));
		box-shadow: 0 8px 24px -12px rgba(26, 20, 40, .4);
	}
}
@media (min-width: 1025px) {
	.site-header .header-image {
		transition: max-height var(--kit-dur) var(--kit-ease);
	}
	.site-header .site-logo::after {
		transition:
			top var(--kit-dur) var(--kit-ease),
			left var(--kit-dur) var(--kit-ease),
			width var(--kit-dur) var(--kit-ease),
			height var(--kit-dur) var(--kit-ease);
	}
	.site-header .main-navigation .main-nav ul li a {
		transition:
			color var(--kit-dur) var(--kit-ease),
			padding var(--kit-dur) var(--kit-ease);
	}

	/* Barra de 116px a 82px: 6px + logotipo de 70px + 6px. */
	.site-header.is-pegada .inside-header {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.site-header.is-pegada .header-image {
		max-height: 70px;
	}
	.site-header.is-pegada .main-navigation .main-nav ul li a {
		padding-top: .2em;
		padding-bottom: .2em;
	}
	.site-header.is-pegada .site-logo::after {
		top: calc(50% - 29px);
		left: calc(100% + 30px);
		width: 60px;
		height: 58px;
	}
	/* Donde la barra ocupa sitio, lo que encoge (116 - 82 = 34px) pasa al
	   margen de abajo y el contenido se queda donde estaba. */
	body:not(.home):not(.kit-landing) .site-header.is-pegada {
		margin-bottom: 34px;
	}
}

/*
 * CATÁLOGO Y FICHA: A TODO EL ANCHO DESDE ARRIBA. En la portada y las páginas
 * del kit la barra flota sobre la foto de cabecera. En el catálogo (tienda y
 * zonas) y en la ficha de propiedad empieza la página debajo de ella, y la caja
 * flotando sobre el blanco se leía como una tarjeta suelta. Aquí arranca ya
 * como queda al pegarse —de lado a lado y contra el borde, con el logotipo y el
 * menú alineados con el contenido— y al bajar solo encoge.
 */
@media (min-width: 769px) {
	.kit-catalogo .site-header,
	.single-product .site-header {
		top: var(--wp-admin--admin-bar--height, 0px);
		padding: 0;
	}
	.kit-catalogo .site-header .inside-header,
	.single-product .site-header .inside-header {
		max-width: 100%;
		padding-right: max(calc(2% + 25px), calc((100% - var(--kit-container)) / 2 + 25px));
		padding-left: max(calc(2% + 25px), calc((100% - var(--kit-container)) / 2 + 25px));
		box-shadow: 0 8px 24px -12px rgba(26, 20, 40, .4);
	}
}

/* Al cargar una página ya bajada, la barra aparece pegada sin animarse. */
.site-header.is-sin-transicion,
.site-header.is-sin-transicion .inside-header,
.site-header.is-sin-transicion .header-image,
.site-header.is-sin-transicion .site-logo::after,
.site-header.is-sin-transicion .main-navigation .main-nav ul li a {
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header .inside-header,
	.site-header .header-image,
	.site-header .site-logo::after,
	.site-header .main-navigation .main-nav ul li a {
		transition: none;
	}
}

/*
 * Lo que se ancla en la página (los saltos a una sección) tiene que quedar por
 * debajo de la barra. Su altura la mide assets/js/cabecera.js y la publica en
 * --st-cabecera-alto, porque cambia con el ancho: una o dos filas, o la barra
 * de móvil. ':root' y no 'html' para ganar a la regla de la barra de
 * administración, que declara lo mismo.
 */
:root {
	scroll-padding-top: calc(var(--st-cabecera-alto, 0px) + 16px);
}

/* Botón del menú: más compacto que el de las secciones. */
.kit-btn--header {
	padding: .8em 1.6em;
	font-size: var(--kit-fs-small);
}

/* GeneratePress inyecta desde el personalizador un color de texto para
   .menu-bar-items que apagaba el rótulo del botón sobre el fondo café. Se
   fija aquí con la especificidad necesaria para ganarle. */
body .main-navigation .menu-bar-items a.kit-btn--header {
	color: var(--kit-beige);
	background-color: var(--kit-accent-strong);
}

/* El menú va transparente sobre la barra blanca: el fondo crema que pone
   el personalizador de GeneratePress parte la barra en dos bloques. El
   estado activo se marca con un filete de acento, como en el kit, no con
   un rectángulo de color. */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav ul li a {
	background: transparent;
}

/*
 * Enlaces del menú: en café y un punto más grandes, como pidió el cliente
 * («Color Fuente: Café · Aumentar un poco Tamaño Fuente»).
 *
 * El color iba en --kit-ink (navy) y solo la página actual se ponía café, así
 * que la petición se estaba cumpliendo en un enlace de cinco.
 *
 * Al pasarlos TODOS a café aparece un problema: el color era justo lo que
 * distinguía la página actual. Por eso se usan los DOS cafés que ya tiene la
 * marca, no uno: el de texto corrido (--kit-text, #6A5544) en reposo y el
 * café pleno del Manual (--kit-accent-strong, #7c3f33) al pasar el ratón y en
 * la página actual. Todo es café, y la jerarquía se mantiene —reforzada por
 * el trazo inferior, que solo aparece en la actual.
 *
 * El tamaño sube de un máximo de 16px a 17.6px. Es «un poco» a propósito: la
 * barra comparte fila con el logotipo y el botón «Hablar con un agente», y a
 * anchos intermedios no sobra sitio.
 */
.main-navigation .main-nav ul li a {
	position: relative;
	padding: .9em 1.1em;
	font-size: clamp(1rem, 0.9457rem + 0.2415vw, 1.1rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kit-text);
	transition: color var(--kit-dur) var(--kit-ease);
}

/*
 * El subrayado se dibuja con un pseudoelemento y no con 'border-bottom' porque
 * un borde solo puede aparecer y desaparecer (se anima su color): entra de
 * golpe. Así crece desde la izquierda, que es el gesto que acompaña a la
 * lectura. Se traza dentro del relleno lateral para que mida lo que el texto y
 * no toda la celda.
 */
.main-navigation .main-nav ul li > a::after {
	content: "";
	position: absolute;
	right: 1.1em;
	bottom: 0;
	left: 1.1em;
	height: 2px;
	background: var(--kit-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--kit-dur) var(--kit-ease);
}

/* El botón de la cabecera no lleva subrayado: ya es un botón. */
.main-navigation a.kit-btn--header::after {
	content: none;
}

/*
 * El fondo beige del hover lo pinta el CSS que GeneratePress genera desde el
 * personalizador, con selectores sobre 'li:hover > a' (no sobre 'a:hover').
 * Hay que repetir esos mismos selectores para desactivarlo; el prefijo 'body'
 * añade la especificidad necesaria para ganarle sin recurrir a !important.
 */
/*
 * Café pleno: al pasar el ratón y en la sección actual. Es el tono que separa
 * «dónde estoy» del resto, ahora que todos los enlaces son café.
 *
 * Se marca toda la familia `current-menu-*` (item, ancestro, padre) y no solo
 * `current-menu-item`, para que coincida con el trazo inferior de más abajo,
 * que ya usaba el selector amplio: si no, una ficha de propiedad encendía el
 * trazo bajo «Propiedades» pero dejaba el rótulo en el café suave.
 */
body .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
body .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
body .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
body .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body .main-navigation .menu-bar-item:hover > a,
body .main-navigation .menu-bar-item.sfHover > a {
	color: var(--kit-accent-strong);
	background-color: transparent;
}

/* El trazo se despliega al pasar el ratón, y queda fijo en la página actual. */
body .main-navigation .main-nav ul li:hover > a::after,
body .main-navigation .main-nav ul li:focus-within > a::after,
body .main-navigation .main-nav ul li.sfHover > a::after,
body .main-navigation .main-nav ul li.current-menu-item > a::after,
body .main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
	transform: scaleX(1);
}

/* Con movimiento reducido, el trazo aparece sin recorrido. */
@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav ul li > a::after {
		transition: none;
	}
}

/* El botón del menú mantiene su fondo café también al pasar el ratón:
   la regla de arriba no debe volverlo transparente. */
body .main-navigation .menu-bar-item:hover > a.kit-btn--header,
body .main-navigation a.kit-btn--header:hover {
	color: var(--kit-beige);
	background-color: var(--kit-cafe-hond);
	border-bottom-color: transparent;
}

/* =========================================================
   8 · PORTADA
   =========================================================
   front-page.php escribe las secciones directamente dentro de
   .site-content, así que hay que liberar el contenedor de
   GeneratePress (que es flex y con ancho máximo) para que las
   franjas puedan ir a sangre.
   ========================================================= */

/*
 * '.kit-landing' la añade functions.php a las páginas que usan una plantilla
 * del kit (Nosotros y las que vengan). Igual que la portada, necesitan que el
 * contenedor de GeneratePress deje de limitar el ancho para que las franjas
 * puedan ir a sangre.
 */
.home .site,
.home .site-content,
.kit-landing .site,
.kit-landing .site-content {
	display: block;
	max-width: none;
	padding: 0;
	margin: 0;
}

/*
 * Las entradas «desde la derecha» de movimiento.js esperan desplazadas 90px
 * fuera de la pantalla hasta que se revelan. El body ya recorta en horizontal
 * (style.css), pero en móvil el navegador no respeta ese recorte en la raíz y
 * la página se podía arrastrar de lado hasta que la animación terminaba.
 * Recortando en el contenedor, ese desborde deja de contar para el ancho de
 * la página. 'clip' y no 'hidden': no crea contenedor de scroll, así que no
 * rompe position: sticky.
 *
 * Solo donde .site va a todo el ancho (portada, páginas del kit, catálogo y
 * ficha de propiedad, cuyas «Otras propiedades» entran igual desde los lados).
 */
.home .site,
.kit-landing .site,
.kit-catalogo .site,
.single-product .site {
	overflow-x: clip;
}

/* ---- Hero ---- */
.kit-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh; /* En móvil descuenta la barra del navegador. */
	/*
	 * El relleno superior solo tiene que dejar libre la cabecera flotante
	 * (~140px con el logotipo vertical). Antes eran 40vh, que en pantallas
	 * bajas empujaba el contenido fuera de la ventana y obligaba a hacer
	 * scroll para ver el botón.
	 */
	padding: 170px 2% 7vh;
	overflow: hidden;
	/* La foto va en ::before con z-index negativo; así no sale del hero. */
	isolation: isolate;
	color: #fff;
	background-color: var(--st-navy); /* Mientras carga la foto. */
}

/*
 * La foto es El Tunco al atardecer (el-tunco.webp), que es la que pidió el
 * cliente para este hero. Autoría y licencia, en docs/CREDITOS-IMAGENES.md.
 * Se cambia desde Apariencia > Personalizar, que publica --st-img-hero en :root.
 *
 * Va en una capa propia para poder avivarla con un filtro: tal cual, bajo el
 * velo, salía apagada y el hero se veía plano. Un filtro sobre el propio
 * .kit-hero se aplicaría también al texto.
 */
.kit-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--st-img-hero) center 62% / cover no-repeat;
	filter: brightness(1.12) saturate(1.22) contrast(1.04);
}

/*
 * Velo. Es funcional, no decorativo: sin él el titular blanco no se leería
 * sobre el cielo. Va denso a la izquierda, donde se asienta el texto, y casi
 * abierto a la derecha para que se vea la roca. Abajo se oscurece un poco
 * para separar el hero de la sección siguiente y asentar el botón.
 */
.kit-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(26, 20, 40, 0) 68%, rgba(26, 20, 40, .34) 100%),
		linear-gradient(
			90deg,
			rgba(26, 20, 40, .68) 0%,
			rgba(26, 20, 40, .46) 38%,
			rgba(26, 20, 40, .08) 66%,
			rgba(26, 20, 40, .12) 100%
		);
}

.kit-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}
.kit-hero__lead {
	/* El kit usaba 45%; se ensancha un poco porque el titular en español es
	   más largo que el original en inglés y a 45% caía en tres líneas. */
	max-width: 54%;
}
.kit-hero__title {
	margin: 0 0 .5em;
	/*
	 * Escala propia, no --kit-fs-hero: el máximo del kit (6.25rem = 100px)
	 * estaba pensado para «Perfect home with perfect space». Con un titular
	 * español más largo, tres líneas a 100px no caben en una pantalla de
	 * portátil. El token original se sigue usando en la marca de agua.
	 *
	 * Rebajada un 15 % cuando el cliente cambió el titular a «La propiedad
	 * soñada a tu alcance en El Salvador», once caracteres más largo que el
	 * anterior. Con el tope viejo (4.75rem) caía en tres líneas y, en un
	 * portátil de 1258×669, quedaba a 15px de la cabecera flotante. Así
	 * vuelve a dos líneas y deja aire bajo la barra.
	 */
	font-size: clamp(2.125rem, 1.4243rem + 3.0026vw, 4rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -2px;
	color: #fff;
	text-shadow: 0 2px 24px rgba(20, 12, 30, .35);
}
/*
 * Blanco puro, no al 88%. Ese 12% de transparencia dejaba el párrafo en un gris
 * claro sobre la foto y le restaba contraste justo donde menos sobra: es texto
 * de tamaño normal, así que necesita 4.5:1, mientras que al titular —grande—
 * le basta 3:1. Recuperando el blanco entero se puede aclarar más la fotografía
 * sin bajar de ese mínimo. La sombra se refuerza un punto por el mismo motivo.
 */
.kit-hero__text {
	/* 31em y reparto equilibrado: la bienvenida cae en dos líneas parejas en
	   lugar de una muy larga y otra corta. */
	max-width: 31em;
	margin: 0 0 2em;
	font-size: var(--kit-fs-medium);
	color: #fff;
	text-shadow: 0 1px 14px rgba(20, 12, 30, .45);
	text-wrap: balance;
}

/*
 * Destacado bajo la bienvenida: icono de casa, rótulo en negrita y el resto de
 * la frase debajo. Sale del campo «Destacado con icono» partido por los dos
 * puntos, sin cambiar las palabras del cliente.
 *
 * El párrafo de arriba no reserva el hueco grande: lo pone el destacado. Si
 * ese campo se deja vacío, el párrafo recupera su margen antes del botón.
 */
.kit-hero__text:has(+ .kit-hero__destacado) {
	margin-bottom: 0;
}
.kit-hero__destacado {
	display: flex;
	align-items: flex-start;
	gap: .95em;
	max-width: 25em;
	margin: 1.9em 0 2.3em;
}
/* Arena, el mismo tono de los demás iconos del sitio. */
.kit-hero__icono {
	flex: none;
	width: 2.75em;
	height: 2.75em;
	color: var(--kit-accent-2);
	filter: drop-shadow(0 1px 10px rgba(20, 12, 30, .5));
}
.kit-hero__destacado p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: #fff;
	text-shadow: 0 1px 14px rgba(20, 12, 30, .5);
	text-wrap: balance;
}
.kit-hero__destacado strong {
	display: block;
	margin-bottom: .15em;
	font-size: var(--kit-fs-body);
	font-weight: 600;
	letter-spacing: .01em;
}
/* El botón del hero se despega un poco de la foto. */
.kit-hero .kit-btn {
	padding: 1em 1.75em;
	box-shadow: 0 16px 32px -14px rgba(10, 6, 16, .7);
}

/* ---- Bloque a dos columnas (40 / 60, gap 5em del kit) ---- */
/*
 * 'stretch', no 'start'. Las columnas de este bloque están pensadas para que el
 * botón caiga al pie (ver .kit-split__cta, con 'margin-top: auto'), pero con
 * 'align-items: start' la columna no llegaba a ocupar el alto de la fila: el
 * margen automático no tenía espacio que repartir, el botón se quedaba pegado
 * al texto y bajo él aparecía un hueco en blanco de ~450px hasta la franja
 * siguiente. Estirando, el botón se alinea con el pie de la foto de al lado.
 */
/* Las dos columnas arrancan arriba, no centradas: el titular de la izquierda
   debe leerse a la altura del primer párrafo de la derecha. Centrándolas, una
   columna corta junto a otra con dos párrafos y una foto se hundía hasta la
   mitad de la sección. */
.kit-split {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 5em;
	margin-bottom: 2.5em;
	align-items: start;
}
/* El kit reparte 32%/55%, pero lo hizo con titulares en inglés: «From interest
   to keys in hand» son 29 caracteres y el nuestro 63. En esa columna el
   titular partía en cuatro líneas. */
.kit-split--headline {
	grid-template-columns: 40% 52%;
	justify-content: space-between;
	gap: 3em;
}
.kit-split h2 {
	margin: 0;
}
.kit-split p {
	margin: 0 0 1.5em;
}
/*
 * El titular va sin margen (lo fija la regla de arriba), así que el párrafo
 * que le sigue quedaba pegado a la última línea —y con un titular a dos
 * líneas, leyéndose casi como parte de él—. Este aire va aquí, en la
 * adyacencia, y no en el margen del h2: así solo aparece cuando de verdad
 * hay un párrafo debajo.
 */
.kit-split h2 + p {
	margin-top: .9em;
}

/* Las dos columnas son flex en vertical para poder empujar el botón al pie,
   como hace el kit (el botón queda alineado abajo, no pegado al texto). */
.kit-split__side {
	display: flex;
	flex-direction: column;
}
.kit-split__lead {
	margin: 1.2em 0 0;
	font-size: var(--kit-fs-medium);
	line-height: 1.5;
}
.kit-split__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* ---- Imagen con reproductor superpuesto ---- */
.kit-media {
	position: relative;
	margin: 1em 0 0;
	line-height: 0;
}
/*
 * La foto se recorta a 16:9 en vez de respetar su proporción original (3:2).
 * Medido: con 3:2 esta columna medía 661px y la de texto de al lado 275px —386px
 * de diferencia, que es el hueco en blanco más grande de la portada—. El recorte
 * baja la fila unos 70px sin encoger la foto de ancho, que es lo que le da
 * presencia. 'object-fit: cover' recorta por arriba y abajo en lugar de
 * deformar; 'object-position' centra alto para conservar el horizonte, que es
 * donde está el interés en una foto de costa.
 */
.kit-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 45%;
}

/* El kit coloca el reproductor abajo a la izquierda, con 70px de aire
   arriba dentro de un degradado que lo despega de la foto. */
.kit-media__play {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 70px 20px 20px;
	color: #fff;
	font-size: var(--kit-fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	background: linear-gradient(0deg, rgba(26, 20, 40, .65) 0%, rgba(26, 20, 40, 0) 100%);
}
.kit-media__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.2em;
	height: 3.2em;
	border-radius: 50%;
	background: #fff;
	color: var(--kit-accent-strong);
	font-size: .85rem;
	transition: transform var(--kit-dur) var(--kit-ease), background-color var(--kit-dur) var(--kit-ease);
}
.kit-media__play:hover .kit-media__icon {
	transform: scale(1.08);
	background: var(--kit-accent);
	color: #fff;
}
.kit-media__label {
	padding-left: .9em;
	border-left: 2px solid var(--kit-accent);
}

/* ---- Franja oscura con el texto al 43% ---- */
.kit-band {
	max-width: 43%;
}
.kit-band h2 {
	margin: 0 0 .8em;
}
.kit-band p {
	margin: 0 0 2em;
}
.kit-band p:last-child {
	margin-bottom: 0;
}

/* ---- CTA de cierre ---- */
/*
 * 'background-color', NO el atajo 'background': esta regla va más abajo en la
 * hoja que .kit-section--foto-aerea, y el atajo reinicia todas las
 * propiedades de fondo — incluida background-image. Con él, la franja se
 * quedaba en azul plano y la foto aérea no llegaba a verse nunca. El color
 * sigue haciendo de respaldo mientras la foto carga (o si falta).
 */
.kit-section--cta {
	padding: 9em 1em;
	background-color: var(--kit-dark);
	text-align: center;
}
.kit-cta {
	max-width: 560px; /* El ancho del contenedor del kit. */
}
.kit-cta h2 {
	margin: 0 0 1.4em;
	color: #fff;
}

/* =========================================================
   9 · PÁGINAS INTERIORES
   =========================================================
   El kit abre cada página con una franja de 500px de alto, foto de fondo con
   velo y el título abajo a la izquierda ocupando poco más de un tercio.
   ========================================================= */

.kit-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 500px;
	padding: 0 2%;
	overflow: hidden;
	background-color: var(--kit-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * Nosotros: el Lago de Coatepeque (Depositphotos 372434206), que pidió el
 * cliente, y sin título encima para que luzca la foto. Sin texto que leer, el
 * velo oscuro de las otras cabeceras sobra: queda solo un degradado suave
 * abajo que asienta la franja contra la sección blanca siguiente.
 */
.kit-page-hero--lago {
	background-image:
		linear-gradient(0deg, rgba(26, 20, 40, .28) 0%, rgba(26, 20, 40, 0) 45%),
		url('../img/lago-coatepeque.webp');
}

.kit-page-hero__inner {
	width: 100%;
	max-width: var(--kit-container);
	margin-inline: auto;
}
/* El margen superior debe superar la altura de la cabecera flotante
   (24px de separación + barra de ~130px): con textos largos la caja crecía
   hacia arriba y el titular quedaba debajo del menú. */
.kit-page-hero__caja {
	max-width: 40%; /* El kit usa 35%; algo más porque el español es más largo. */
	margin: 180px 0 70px;
}
.kit-page-hero__titulo {
	margin: 0 0 .6em;
	font-size: var(--kit-fs-h1);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -1.3px;
	color: #fff;
}
.kit-page-hero p {
	margin: 0;
	font-size: var(--kit-fs-medium);
	color: rgba(255, 255, 255, .86);
}

/* Split con imagen a un lado (30/70 del kit). */
.kit-split--imagen {
	grid-template-columns: 30% 1fr;
	gap: 4em;
	align-items: start;
}
.kit-media--alta img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/*
 * Lista numerada sobre fondo CLARO. La versión base está pensada para las
 * franjas oscuras (texto blanco, filetes translúcidos); aquí se invierte.
 */
.kit-numbered--claro .kit-numbered__item {
	border-bottom-color: var(--kit-border);
}
.kit-numbered--claro .kit-numbered__title {
	color: var(--kit-ink);
}
.kit-numbered--claro p {
	color: var(--kit-text);
}
.kit-numbered--claro .kit-numbered__num {
	color: var(--kit-accent-strong);
}

/* Marca de agua sobre fondo claro (en el kit, #D5D5D545). */
.kit-watermark--claro {
	color: rgba(0, 0, 0, .055);
}

/*
 * Cabecera de página de Servicios. Sin título ni lema encima (pedido del
 * cliente), el velo oscuro que los hacía legibles sobra: queda el mismo
 * degradado suave de Nosotros, que asienta la franja contra la sección
 * siguiente.
 */
.kit-page-hero--anochecer {
	background-image:
		linear-gradient(0deg, rgba(26, 20, 40, .28) 0%, rgba(26, 20, 40, 0) 45%),
		var(--st-img-banda);
}

/* Lema bajo el titular de una cabecera de página: una línea, no un párrafo.
   El texto largo va en el cuerpo (.kit-intro), no sobre la foto. */
.kit-page-hero__lema {
	font-size: var(--kit-fs-medium);
	font-weight: 600;
}


/* ---- Servicios: tarjeta destacada + rejilla de cuatro ----
   El kit reparte la fila en dos mitades: a la izquierda una tarjeta con foto,
   a la derecha cuatro tarjetas en 2×2. */
.kit-servicios-mix {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	align-items: start;
}
.kit-servicios-mix__rejilla {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}
/* Con un número impar de tarjetas, la última ocupa las dos columnas: así no
   queda una celda vacía ni una tarjeta estrecha que sobresalga por abajo. */
.kit-servicios-mix__rejilla > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.kit-service--destacado .kit-media {
	margin: 0 0 1.4em;
}
.kit-service--destacado .kit-media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.kit-service__cta {
	margin-top: 1.4em;
}

/* ---- Franja de testimonio ----
   Sin relleno vertical: la separación con la sección siguiente ya la aporta el
   relleno superior de esa sección. Tenerlo aquí también sumaba 14em de hueco
   entre las dos. */
.kit-testimonio-marco {
	padding: 0 1em;
}
.kit-testimonio {
	max-width: var(--kit-container);
	margin-inline: auto;
	padding: 5em 4em;
	text-align: center;
	color: #fff;
	background-color: var(--kit-dark);
	background-image:
		linear-gradient(rgba(26, 20, 40, .78), rgba(26, 20, 40, .78)),
		url('../img/el-tunco-aerea.webp');
	background-size: cover;
	background-position: center;
}
.kit-testimonio__foto {
	display: block;
	width: 88px;
	height: 88px;
	margin: 0 auto 1.4em;
	border-radius: 50%;
	object-fit: cover;
}
.kit-testimonio__texto {
	max-width: 46em;
	margin: 0 auto 1.4em;
	padding: 0;
	border: 0;
	font-size: var(--kit-fs-medium);
	line-height: 1.6;
	color: #fff;
}
.kit-testimonio__autor {
	margin: 0;
	font-size: var(--kit-fs-h5);
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--kit-accent-2);
}
.kit-testimonio__cargo {
	display: block;
	margin-top: .3em;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* Marcador mientras no haya un testimonio real. */
.kit-testimonio__pendiente {
	max-width: 34em;
	margin: 0 auto;
	font-size: var(--kit-fs-small);
	color: rgba(255, 255, 255, .72);
}

/* ---- Preguntas frecuentes ----
   Acordeón con <details>/<summary> nativos: se abren y cierran sin una línea
   de JavaScript, funcionan con teclado y los lee cualquier lector de pantalla.
   El acordeón del kit era un widget de ElementsKit. */
.kit-split--faq {
	grid-template-columns: 35% 1fr;
	gap: 5em;
}
.kit-faq__item {
	border-bottom: 1px solid var(--kit-border);
}
.kit-faq__item:first-child {
	border-top: 1px solid var(--kit-border);
}
.kit-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.1em 0;
	cursor: pointer;
	list-style: none; /* Oculta el triángulo por defecto. */
	font-size: var(--kit-fs-h5);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.2px;
	color: var(--kit-ink);
	transition: color var(--kit-dur) var(--kit-ease);
}
.kit-faq__pregunta::-webkit-details-marker {
	display: none;
}
.kit-faq__pregunta::after {
	content: "＋";
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 400;
	color: var(--kit-accent-strong);
	transition: transform var(--kit-dur) var(--kit-ease);
}
.kit-faq__item[open] .kit-faq__pregunta::after {
	content: "－";
}
.kit-faq__pregunta:hover {
	color: var(--kit-accent-strong);
}
.kit-faq__respuesta {
	padding: 0 0 1.4em;
}
.kit-faq__respuesta p {
	margin: 0;
	max-width: 44em;
	color: var(--kit-text);
}

/* Caja de apoyo bajo el titular de las preguntas. */
.kit-faq-apoyo {
	margin-top: auto;
	padding: 1.6em;
	background: var(--kit-surface-alt);
}
.kit-faq-apoyo__titulo {
	margin: 0 0 .5em;
	font-size: var(--kit-fs-h5);
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--kit-ink);
}
.kit-faq-apoyo p {
	margin: 0 0 1.3em;
	font-size: var(--kit-fs-small);
}
.kit-faq-apoyo__btn {
	display: block;
	text-align: center;
}

/* Cabecera de página de Contacto: el peñasco sobre el mar que pidió el
   cliente (IMG_4347, septiembre de 2026). */
.kit-page-hero--costa {
	background-image:
		linear-gradient(0deg, rgba(26, 20, 40, .88) 0%, rgba(26, 20, 40, .35) 60%, rgba(26, 20, 40, .25) 100%),
		url('../img/penasco-costa.webp');
}

/*
 * Encuadre de las cabeceras en escritorio. Con el fondo fijo que tenían (ver
 * «Sin parallax»), la foto se medía contra la ventana y al abrir la página se
 * veía su parte alta. Con el fondo normal se mide contra la cabecera y saldría
 * el centro de la foto, así que se sube para conservar el mismo encuadre: las
 * montañas del lago, el cielo del atardecer y el acantilado con su escalera.
 * Los porcentajes salen de comparar ambas versiones entre 1280 y 1920 px.
 */
@media (min-width: 1025px) {
	.kit-page-hero--lago,
	.kit-page-hero--anochecer {
		background-position: center top;
	}
	/* El peñasco ocupa la mitad baja derecha de la foto: se baja el
	   encuadre para que no quede cortado bajo el horizonte. */
	.kit-page-hero--costa {
		background-position: center 60%;
	}
}

/* En móvil la cabecera es más alta que ancha y el centro de la foto es solo
   mar: se desplaza hacia la derecha para que se vea el peñasco. */
@media (max-width: 768px) {
	.kit-page-hero--costa {
		background-position: 80% center;
	}
}

/* ---- Contacto: formulario + datos ---- */
/*
 * El kit reparte la fila en dos mitades iguales, no en columna ancha +
 * barra estrecha: la tarjeta de datos pesa visualmente lo mismo que el
 * formulario. 'minmax(0, …)' evita que el mapa incrustado, que es un
 * iframe, empuje su columna y desborde la rejilla.
 */
.kit-contacto {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px;
	align-items: start;
}

.kit-form {
	padding: 2.5em;
	background: var(--kit-surface-alt);
}
.kit-form__titulo {
	margin: 0 0 1.6em;
	padding-bottom: .6em;
	border-bottom: 1px solid var(--kit-border);
	font-size: var(--kit-fs-h4);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.2px;
	color: var(--kit-ink);
}

.kit-datos {
	padding: 2.2em;
	background: var(--kit-surface);
	border: 1px solid var(--kit-border);
}
.kit-datos__titulo {
	margin: 0 0 .5em;
	font-size: var(--kit-fs-h4);
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--kit-ink);
}
.kit-datos__intro {
	margin: 0 0 2em;
	font-size: var(--kit-fs-small);
	color: var(--kit-text);
}
/*
 * Los bloques se separan con aire, no con filetes: el kit deja la tarjeta
 * limpia y son los cuadros de color los que marcan el ritmo de la lista.
 */
.kit-datos__lista {
	display: grid;
	gap: 1.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kit-dato {
	display: flex;
	gap: 1.1em;
	align-items: flex-start;
}
/*
 * Cuadro redondeado con el icono en blanco, como en el kit (allí es un
 * cuadrado verde con el icono de ElementsKit). El tamaño se fija en rem para
 * que los cuatro cuadros queden idénticos aunque su texto sea más corto o
 * más largo.
 */
.kit-dato__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 10px;
	background: var(--kit-badge);
	color: #fff;
}
.kit-dato__icono .kit-icono {
	width: 1.35rem;
	height: 1.35rem;
}
.kit-dato__cuerpo {
	min-width: 0; /* Permite que un correo largo se parta en lugar de desbordar. */
	padding-top: .2em;
}
.kit-dato__titulo {
	margin: 0 0 .25em;
	font-size: var(--kit-fs-label);
	font-weight: 600;
	color: var(--kit-ink);
}
.kit-dato__linea {
	margin: 0;
	font-size: var(--kit-fs-small);
	line-height: 1.5;
	color: var(--kit-text);
	overflow-wrap: break-word;
}
/*
 * Dato aún sin definir. Se marca con cursiva y NO bajando el color: un gris
 * más claro que el --kit-text (#737373, justo en el 4.9:1 de AA) dejaría el
 * texto por debajo del contraste mínimo. La cursiva ya lo distingue de un
 * dato real.
 */
.kit-dato__linea--pendiente {
	font-style: italic;
}

.kit-datos__mapa {
	position: relative;
	height: 0;
	margin-top: 2em;
	padding-top: 60%; /* Proporción del mapa del kit, más panorámica que alta. */
	overflow: hidden;
	border-radius: 8px;
}
.kit-datos__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/*
 * Sin dirección no hay mapa, pero el hueco se reserva: así la tarjeta tiene la
 * misma forma antes y después de rellenar los datos.
 */
.kit-datos__mapa--vacio {
	background: var(--kit-surface-alt);
	border: 1px dashed var(--kit-border);
}
/* El contenedor mide 0 de alto (la proporción la da el padding-top), así que
   el aviso se centra en absoluto, igual que haría el iframe. */
.kit-datos__mapa--vacio span {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5em;
	font-size: var(--kit-fs-small);
	font-style: italic;
	text-align: center;
	color: var(--kit-text);
}

/* Aviso de dato pendiente o de formulario no disponible. */
.kit-aviso {
	margin: 0;
	padding: 1em 1.2em;
	background: var(--kit-surface-alt);
	border-left: 3px solid var(--kit-accent-2);
	font-size: var(--kit-fs-small);
	color: var(--kit-text);
}

/* ---- Formulario de Contact Form 7 con el lenguaje del kit ----
   CF7 imprime su propio marcado; aquí solo se le da forma. Las clases
   .st-form__* vienen de la plantilla del formulario, editable desde el
   escritorio sin tocar el tema. */
.wpcf7-form p {
	margin: 0 0 1.1em;
}
.wpcf7-form label {
	display: block;
	font-size: var(--kit-fs-small);
	font-weight: 600;
	color: var(--kit-ink);
}
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: .45em;
}
/*
 * Campos a ancho completo y RECTANGULARES. El radio de 30px que declara la
 * capa base viene del global.json del kit (form_field_border_radius), pero la
 * plantilla contact-us lo pisa: allí los campos son rectángulos de esquina
 * apenas redondeada. Se replica esa plantilla, no el ajuste global, y se
 * limita al formulario para no volver rectos el buscador ni los campos de
 * WooCommerce.
 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	border-radius: var(--kit-radius-btn);
	background: var(--kit-surface);
}
.wpcf7-form textarea {
	min-height: 9em;
	resize: vertical;
}
/* El campo activo se marca con el acento, no con el contorno del navegador. */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
	outline: 0;
	border-color: var(--kit-accent);
	box-shadow: 0 0 0 3px rgba(211, 97, 0, .12);
}

/* Dos campos por fila, como en el kit. */
.st-form__fila {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 1.2em;
}

/* El botón de envío toma el estilo de los botones del kit. */
.wpcf7-form input[type="submit"] {
	padding: 1em 2.2em;
	border: 0;
	border-radius: var(--kit-radius-btn);
	background: var(--kit-accent-strong);
	color: #fff;
	font-size: var(--kit-fs-body);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--kit-dur) var(--kit-ease);
}
.wpcf7-form input[type="submit"]:hover {
	background: var(--kit-ink);
}

/* Mensajes de respuesta: planos, con filete de color según el resultado. */
.wpcf7-response-output {
	margin: 1.4em 0 0 !important;
	padding: 1em 1.2em !important;
	border: 0 !important;
	border-left: 3px solid var(--kit-accent-2) !important;
	background: var(--kit-surface);
	font-size: var(--kit-fs-small);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--kit-badge) !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--st-red) !important;
}
.wpcf7-not-valid-tip {
	margin-top: .4em;
	font-size: var(--kit-fs-small);
	color: var(--st-red);
}

/* ---- Franja de redes sociales ---- */
.kit-redes-marco {
	border-top: 1px solid var(--kit-border);
	border-bottom: 1px solid var(--kit-border);
}
.kit-redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1em 1.6em;
}
.kit-redes__etiqueta {
	font-size: var(--kit-fs-medium);
	font-weight: 600;
	color: var(--kit-ink);
}
.kit-redes__lista {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
 * Cada red es un cuadro claro con su icono, como en el kit (allí son botones
 * de 40px con el icono en verde). El texto de la etiqueta no se pinta: va en
 * aria-label, que es lo que necesita un lector de pantalla.
 */
.kit-redes__lista a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 8px;
	background: var(--kit-surface-alt);
	color: var(--kit-ink);
	text-decoration: none;
	transition: background-color var(--kit-dur) var(--kit-ease), color var(--kit-dur) var(--kit-ease);
}
.kit-redes__lista a:hover,
.kit-redes__lista a:focus-visible {
	background: var(--kit-badge);
	color: #fff;
}
.kit-redes__lista .kit-icono {
	width: 1.15rem;
	height: 1.15rem;
}

/* ---- Equipo ---- */
.kit-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
}
.kit-team__card {
	background: var(--kit-surface);
	box-shadow: 0 5px 30px -5px rgba(0, 0, 0, .15);
}
.kit-team__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/*
 * Hueco de la foto mientras no haya una propia. No se usan retratos de banco
 * de imágenes: serían caras de personas reales presentadas como agentes de
 * SurfTerra.
 */
.kit-team__hueco {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background: var(--kit-surface-alt);
	border-bottom: 1px solid var(--kit-border);
}
.kit-team__silueta {
	font-size: 2.5rem;
	line-height: 1;
	color: var(--kit-border);
}
.kit-team__cuerpo {
	padding: 1.3em;
}
.kit-team__nombre {
	margin: 0 0 .3em;
	font-size: var(--kit-fs-h5);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.2px;
	color: var(--kit-ink);
}
.kit-team__cargo {
	display: block;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kit-muted);
}

/* Las tarjetas pendientes se muestran atenuadas: se ve la maqueta sin que
   parezcan personas de verdad. */
.kit-team__card--pendiente .kit-team__nombre {
	color: var(--kit-text);
	font-weight: 400;
}

/* =========================================================
   10 · PIE
   =========================================================
   Según la referencia del cliente: arena clara y desenfocada con un
   panel crema translúcido encima. Dentro, tres columnas separadas por
   filetes finos —enlaces, logotipo a color, y formas de pago con los
   datos de contacto— y, debajo, el copyright. Compacto: la versión
   anterior pasaba de 600px de alto en escritorio.
   ========================================================= */

.kit-footer {
	position: relative;
	padding: 26px 1em;
	color: var(--kit-text);
	/*
	 * Todo en capas de fondo, de arriba abajo: los dos filetes claros del
	 * panel; el panel crema translúcido, más transparente en el borde
	 * izquierdo para que se vean los caracoles; los caracoles, con su propia
	 * arena fundida en la del fondo, y la arena desenfocada.
	 */
	background:
		linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) 0 26px / 100% 1px no-repeat,
		linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) 0 calc(100% - 26px) / 100% 1px no-repeat,
		linear-gradient(90deg, rgba(255, 250, 243, .3), rgba(255, 250, 243, .64) 320px) 0 26px / 100% calc(100% - 52px) no-repeat,
		url(../img/pie-caracoles.webp) -40px 55% / 392px auto no-repeat,
		url(../img/pie-arena-clara.webp) center / cover no-repeat,
		#efe5d3;
}

/* Con el contenedor cerca del borde, los caracoles se achican y, cuando ya
   no caben junto a los enlaces, se quitan hasta el diseño de tableta. */
@media (max-width: 1440px) {
	.kit-footer {
		background-position: 0 26px, 0 calc(100% - 26px), 0 26px, -50px 55%, center;
		background-size: 100% 1px, 100% 1px, 100% calc(100% - 52px), 300px auto, cover;
	}
}
@media (min-width: 1025px) and (max-width: 1240px) {
	.kit-footer {
		background-size: 100% 1px, 100% 1px, 100% calc(100% - 52px), 0 0, cover;
	}
}

.kit-footer__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	padding: 2.2em 0 1.6em;
}

/* ---- Enlaces, con viñetas, arrimados al filete del logotipo ---- */
.kit-footer__enlaces {
	justify-self: end;
	padding-right: 3.5em;
}
.kit-footer__enlaces ul {
	display: grid;
	gap: .3em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kit-footer__enlaces a {
	display: inline-flex;
	align-items: center;
	gap: .9em;
	font-size: var(--kit-fs-medium);
	color: var(--kit-text);
	text-decoration: none;
	transition: color var(--kit-dur) var(--kit-ease);
}
.kit-footer__enlaces a::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kit-accent-2);
	transition: transform var(--kit-dur) var(--kit-ease);
}
.kit-footer__enlaces a:hover,
.kit-footer__enlaces a:focus-visible {
	color: var(--kit-accent-strong);
}
.kit-footer__enlaces a:hover::before,
.kit-footer__enlaces a:focus-visible::before {
	transform: scale(1.6);
}

/* ---- Logotipo a color, entre dos filetes ---- */
.kit-footer__brand {
	display: flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	padding: 0 4em;
	border-inline: 1px solid rgba(124, 63, 51, .3);
	line-height: 0;
}
.kit-footer__logo {
	display: block;
	width: auto;
	max-height: 180px;
}
.kit-footer__wordmark {
	display: block;
	font-size: var(--kit-fs-h4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--kit-ink);
}

/* ---- Formas de pago y contacto ---- */
.kit-footer__contacto {
	justify-self: start;
	display: grid;
	gap: 1.1em;
	max-width: 30em;
	padding-left: 3.5em;
}
.kit-footer__pagos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kit-footer__pagos img {
	display: block;
	width: auto;
	height: 50px;
}
.kit-footer__datos {
	display: grid;
	gap: .5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--kit-fs-body);
	line-height: 1.45;
}
.kit-footer__datos li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: .75em;
}
.kit-footer__icono {
	width: 1.15em;
	height: 1.15em;
	margin-top: .15em;
	color: var(--kit-accent-strong);
}
.kit-footer__datos strong {
	font-weight: 600;
	color: var(--kit-accent-strong);
}
.kit-footer__datos a {
	color: var(--kit-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.kit-footer__datos a:hover,
.kit-footer__datos a:focus-visible {
	color: var(--kit-accent-strong);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* ---- Copyright y enlaces legales ---- */
.kit-footer__row--legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 2em;
	padding: .9em 0 1.1em;
	border-top: 1px solid rgba(124, 63, 51, .22);
}
.kit-footer__copy {
	margin: 0 auto 0 0;
	font-size: var(--kit-fs-small);
	color: var(--kit-text);
}
.kit-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kit-footer__legal a {
	font-size: var(--kit-fs-small);
	color: var(--kit-text);
	text-decoration: none;
}
.kit-footer__legal a:hover {
	color: var(--kit-accent-strong);
}
.kit-footer__legal li + li::before {
	content: "|";
	margin-right: 1em;
	color: rgba(106, 85, 68, .4);
}

/* «Volver arriba»: arriba a la derecha del panel, alineado con el borde del
   contenido, como en la referencia. */
.kit-footer__top {
	position: absolute;
	top: calc(26px + 1.2em);
	right: max(1.5em, calc((100% - var(--kit-container)) / 2));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9em;
	height: 2.9em;
	border: 1px solid rgba(124, 63, 51, .5);
	border-radius: 50%;
	color: var(--kit-accent-strong);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--kit-dur) var(--kit-ease), border-color var(--kit-dur) var(--kit-ease), color var(--kit-dur) var(--kit-ease), transform var(--kit-dur) var(--kit-ease);
}
.kit-footer__top:hover,
.kit-footer__top:focus-visible {
	background: var(--kit-accent-strong);
	border-color: var(--kit-accent-strong);
	color: var(--kit-beige);
	transform: translateY(-2px);
}

/* Tableta: logotipo arriba; debajo, enlaces y contacto separados por un filete. */
@media (max-width: 1024px) {
	/* Los caracoles, pequeños, en la esquina de arriba a la izquierda. */
	.kit-footer {
		background-position: 0 26px, 0 calc(100% - 26px), 0 26px, -34px 10px, center;
		background-size: 100% 1px, 100% 1px, 100% calc(100% - 52px), 190px auto, cover;
	}
	.kit-footer__cuerpo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.6em;
		padding-top: 2em;
	}
	.kit-footer__brand {
		grid-column: 1 / -1;
		order: -1;
		padding: 0 0 1.4em;
		border-inline: 0;
		border-bottom: 1px solid rgba(124, 63, 51, .22);
	}
	.kit-footer__logo {
		max-height: 150px;
	}
	.kit-footer__enlaces {
		justify-self: stretch;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 0;
		border-right: 1px solid rgba(124, 63, 51, .3);
	}
	.kit-footer__contacto {
		padding-left: 2em;
	}
}

/* Móvil: una sola columna, centrada; los caracoles pasan arriba a la izquierda. */
@media (max-width: 768px) {
	.kit-footer {
		padding-block: 16px;
		background-position: 0 16px, 0 calc(100% - 16px), 0 16px, -34px 4px, center;
		background-size: 100% 1px, 100% 1px, 100% calc(100% - 32px), 170px auto, cover;
	}
	.kit-footer__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 1.4em;
		padding: 2em 0 1.2em;
		text-align: center;
	}
	.kit-footer__brand {
		width: 100%;
		padding-bottom: 1.2em;
	}
	.kit-footer__logo {
		max-height: 120px;
	}
	.kit-footer__enlaces {
		border-right: 0;
	}
	.kit-footer__enlaces ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: .3em 1.4em;
	}
	.kit-footer__contacto {
		justify-self: center;
		justify-items: center;
		max-width: none;
		padding-left: 0;
	}
	.kit-footer__pagos {
		justify-content: center;
	}
	.kit-footer__pagos img {
		height: 44px;
	}
	.kit-footer__datos {
		text-align: left;
	}
	.kit-footer__row--legal {
		justify-content: center;
		text-align: center;
	}
	.kit-footer__copy {
		margin: 0;
	}
	.kit-footer__top {
		top: calc(16px + .8em);
		right: .8em;
		width: 2.6em;
		height: 2.6em;
	}
}

/* Desplazamiento suave para el ancla de «volver arriba», respetando a quien
   haya pedido reducir el movimiento en su sistema. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* =========================================================
   11 · FICHA DE PROPIEDAD
   =========================================================
   Adopta la composición de la plantilla property-detail del kit:
   panel oscuro para el precio, caja clara de especificaciones con filetes,
   y amenidades en rejilla con icono circular. Se conservan los iconos y los
   datos que ya imprime surfterra-core: solo cambia su presentación.
   ========================================================= */

/* ---- Rastro de migas ----
   WooCommerce lo imprime como texto corriente con enlaces subrayados. Se pasa
   a la etiqueta pequeña en mayúsculas del kit, que lo convierte en un dato de
   contexto discreto en lugar de una línea de enlaces compitiendo con el hero.
   El kit no lleva migas en su plantilla de propiedad; se conservan por su
   valor de navegación y SEO. */
.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 1.2em;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kit-text);
}
.woocommerce .woocommerce-breadcrumb a {
	color: var(--kit-text);
	text-decoration: none;
	transition: color var(--kit-dur) var(--kit-ease);
}
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--kit-accent-strong);
	text-decoration: none;
}

/* ---- Hero de la ficha ----
   Medio a todo lo ancho con el estado, el título y la ubicación encima. El
   velo inferior no es decorativo: sin él el texto blanco no se lee sobre un
   video que cambia de brillo fotograma a fotograma. */
.st-ficha-hero {
	position: relative;
	margin: 0 0 2.5em;
	overflow: hidden;
	background: var(--kit-dark);
	line-height: 0;
}
/* Con el contenedor delante: WooCommerce pone '.woocommerce-page img
   { height: auto }', que gana a una clase sola y deja la foto a su alto
   natural. Una foto vertical estiraba la cabecera hasta 1920px. */
.st-ficha-hero .st-ficha-hero__foto {
	display: block;
	width: 100%;
	height: clamp(280px, 52vh, 620px);
	object-fit: cover;
}

/* El video del plugin ocupa el hueco sin su marco anterior. */
.st-ficha-hero .st-video-hero {
	margin: 0;
	box-shadow: none;
	border-radius: 0;
}

.st-ficha-hero__capa {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 6em 2em 2em;
	line-height: 1.2;
	pointer-events: none; /* Deja pasar el clic a los botones del video. */
	background: linear-gradient(0deg, rgba(26, 20, 40, .82) 0%, rgba(26, 20, 40, 0) 100%);
}
.st-ficha-hero__capa a {
	pointer-events: auto; /* Salvo los enlaces de los distintivos. */
}

.st-ficha-hero__estado {
	display: inline-block;
	margin-bottom: .9em;
	padding: .5em 1.1em;
	border-radius: var(--kit-radius-btn);
	background: var(--kit-accent-strong);
	color: #fff;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.single-product .st-ficha-hero__titulo {
	margin: 0 0 .5em;
	max-width: 22em;
	font-size: var(--kit-fs-h1);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.3px;
	color: #fff;
}
.st-ficha-hero__capa .st-badges {
	margin: 0;
}
.st-ficha-hero__capa .st-badge {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}
.st-ficha-hero__capa .st-badge:hover {
	background: rgba(255, 255, 255, .28);
}

/* ---- Dos columnas: contenido y barra lateral ---- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	column-gap: 3em;
	align-items: start;
}

/* Todo cae en la columna izquierda salvo lo que se coloque a mano. */
.single-product div.product > * {
	grid-column: 1;
}

/*
 * La barra lateral se ancla a la columna derecha y abarca todas las filas, de
 * modo que el contenido de la izquierda fluye a su lado. 'sticky' la mantiene
 * a la vista mientras se lee la ficha.
 */
.single-product div.product > .summary.entry-summary {
	grid-column: 2;
	grid-row: 1 / span 30;
	position: sticky;
	/* Por debajo de la cabecera, que también va pegada: su altura la publica
	   assets/js/cabecera.js. */
	top: calc(var(--st-cabecera-alto, 0px) + 2em);
}

/*
 * Los elementos deben LLENAR su celda de la rejilla.
 *
 * WooCommerce impone el ancho con selectores que incluyen un ID:
 *   .woocommerce #content div.product div.summary { width: 48% }
 * y GeneratePress envuelve el contenido en <div id="content">, así que ese
 * bloque se aplica. Un ID gana a cualquier número de clases, de modo que un
 * reseteo con clases nunca lo alcanza: los elementos se quedaban al 48% de su
 * celda (la barra lateral en 184px de los 380px, la galería en 338 de 728).
 *
 * Por eso aquí se repite el '#content' y se suma una clase más, lo justo para
 * superarlo sin recurrir a !important. Si algún día GeneratePress dejara de
 * usar ese ID, la regla de WooCommerce tampoco encajaría y volverían a mandar
 * las clases, donde estas ya ganan.
 */
.single-product #content div.product div.woocommerce-product-gallery.images,
.single-product #content div.product div.summary.entry-summary,
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

/* ---- Galería en cuadrícula, como el «Property Gallery» del kit ----
   WooCommerce imprime la galería con 'opacity: 0' en línea y la revela por
   JavaScript: si el script falla, queda invisible. Se fuerza visible, y este
   es uno de los pocos casos en que !important está justificado, porque no hay
   otra forma de ganarle a un estilo en línea. */
.single-product .woocommerce-product-gallery {
	opacity: 1 !important;
}
/*
 * Miniaturas en cuadrícula, como el «Property Gallery» del kit: las fotos
 * abren en grande, no son protagonistas.
 *
 * Las columnas dependen de cuántas fotos haya (clase st-galeria--N que pone
 * PHP). Con tres columnas fijas, una foto sola parecía un hueco sin rellenar.
 */
.single-product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
	margin: 0;
	transform: none;
}
.single-product .st-galeria--1 .woocommerce-product-gallery__wrapper,
.single-product .st-galeria--2 .woocommerce-product-gallery__wrapper {
	grid-template-columns: repeat(2, 1fr);
}
/*
 * Todas las fotos son celdas iguales de la rejilla.
 *
 * WooCommerce encoge las que no son la primera con esta regla:
 *   .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
 *     { width: 25%; display: inline-block; }
 * Es su tira de miniaturas para cuando no hay carrusel, y el ':nth-child' le
 * da la especificidad de cinco clases: la primera foto llenaba su celda y las
 * demás salían al 25% y en línea, descuadradas.
 *
 * Se repite ese mismo selector (empata y gana por orden de carga) y se añade
 * la variante con '#content' por si WooCommerce la sirve también así.
 */
.single-product .woocommerce-product-gallery__image,
.single-product div.product div.images .woocommerce-product-gallery__image:nth-child(n+2),
.single-product #content div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
	display: block;
	width: auto;
	float: none;
	margin: 0;
}
.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Sin carrusel no hay flechas ni puntos que mostrar. */
.single-product .flex-control-nav,
.single-product .flex-direction-nav {
	display: none;
}

/*
 * Orden de la columna izquierda, siguiendo al kit: primero los textos
 * (descripción y amenidades), después la galería y por último el tour.
 * En el marcado la galería va antes, así que se reordena con 'order'.
 */
.single-product .st-ficha-seccion { order: 1; }
.single-product .st-galeria__titulo { order: 2; }
.single-product div.product > .woocommerce-product-gallery { order: 3; }
.single-product .st-tour { order: 4; }

/* Las propiedades relacionadas cierran a todo lo ancho. */
/*
 * «Otras propiedades» ya NO vive dentro de div.product: functions.php lo
 * reengancha a 'woocommerce_after_single_product', fuera de la rejilla. El
 * motivo está explicado allí —la barra lateral pegajosa se le montaba encima—.
 * Aquí solo queda el caso de las ventas cruzadas, que sí siguen dentro.
 */
.single-product div.product > .up-sells {
	grid-column: 1 / -1;
	order: 5;
}

/* ---- Panel del precio ----
   El kit lo pone sobre fondo oscuro; aquí va en el gris claro del sistema,
   más discreto. El precio recibe el mismo tratamiento que en las tarjetas del
   catálogo —etiqueta en café, importe en navy— para que la ficha y el listado
   hablen el mismo idioma. */
.st-price-panel {
	margin: 0 0 2em;
	padding: 1.7em;
	background: var(--kit-surface-alt);
	color: var(--kit-text);
}
.st-price-panel__label {
	display: block;
	margin-bottom: .4em;
	font-size: var(--kit-fs-eyebrow);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kit-muted);
}

.single-product .st-price-panel .price,
.single-product .st-price-panel .price ins {
	margin: 0;
	/* H3 y no H2: en la columna lateral un importe largo como $285,000.00
	   se partía por la mitad. */
	font-size: var(--kit-fs-h3);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.1px;
	color: var(--kit-ink);
	text-decoration: none;
}
.single-product .st-price-panel .price del {
	font-size: var(--kit-fs-body);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--kit-text);
}

/* Selector de moneda: los botones en blanco para que se lean como controles
   sobre el gris del panel. */
.st-price-panel .st-currency {
	margin: 1.1em 0 0;
}
.st-price-panel .st-currency__switch {
	background: #fff;
	border-radius: var(--kit-radius-btn);
}
.st-price-panel .st-cur-btn {
	color: var(--kit-text);
}
.st-price-panel .st-cur-btn:hover,
.st-price-panel .st-cur-btn:focus {
	background: rgba(124, 63, 51, .08);
	color: var(--kit-accent-strong);
}
.st-price-panel .st-cur-btn.is-active {
	background: var(--kit-accent-strong);
	color: #fff;
	box-shadow: none;
}
.st-price-panel .st-currency__equiv {
	color: var(--kit-ink);
}
.st-price-panel .st-currency__note {
	color: var(--kit-text);
}

/* ---- Llamada a la acción que cierra la barra lateral ----
   Es el único bloque de la ficha en fondo oscuro, y a propósito: le da peso al
   final de la columna y hace que el botón sea lo más visible de la página. */
.st-cta-ficha {
	margin: 2em 0 0;
	padding: 1.7em;
	background: var(--kit-dark);
	color: rgba(255, 255, 255, .82);
}
.single-product .st-cta-ficha__titulo {
	margin: 0 0 .6em;
	font-size: var(--kit-fs-h5);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.2px;
	color: #fff;
}
.st-cta-ficha__texto {
	margin: 0 0 1.4em;
	font-size: var(--kit-fs-small);
}
.st-cta-ficha__btn {
	display: block;
	text-align: center;
}

/* ---- Caja de especificaciones (el «Key Specification» del kit) ---- */
/* Cabecera: el título y, a su derecha, el selector de unidades (SurfTerra
   Localización). Si no caben en la columna, el selector baja debajo. */
.st-specs__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6em 1em;
	padding: 1.3em 1.4em .7em;
	background: var(--kit-surface-alt);
}
.st-specs__title {
	margin: 0;
	/* H5 y no H4: en una columna de 380px el tamaño mayor partía la palabra
	   «Especificaciones» en dos líneas. */
	font-size: var(--kit-fs-h5);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.2px;
	color: var(--kit-ink);
}

/* Sin lista de datos no hay título que encabezar. */
.st-specs__head:not(:has(+ .st-specs)) {
	display: none;
}

/* Selector de unidades: el mismo lenguaje que el de monedas del panel del
   precio —botones en blanco sobre el gris, el activo en café—, algo más
   pequeño porque comparte fila con el título. */
.st-unidades__switch {
	display: inline-flex;
	padding: 3px;
	background: #fff;
	border-radius: var(--kit-radius-btn);
}
.st-uni-btn {
	padding: .42rem .7rem;
	border: 0;
	border-radius: var(--kit-radius-btn);
	background: none;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--kit-text);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}
/* GeneratePress pinta de gris oscuro todo button:hover y button:focus. */
.st-uni-btn:hover,
.st-uni-btn:focus {
	background: rgba(124, 63, 51, .08);
	color: var(--kit-accent-strong);
}
.st-uni-btn.is-active {
	background: var(--kit-accent-strong);
	color: #fff;
}

/* Deja de ser rejilla de tarjetas y pasa a ser una lista con filetes. */
.single-product .st-specs {
	display: block;
	grid-template-columns: none;
	gap: 0;
	margin: 0 0 2em;
	padding: 0 1.4em 1.4em;
	background: var(--kit-surface-alt);
	list-style: none;
}
.single-product .st-spec {
	display: flex;
	align-items: center;
	gap: .9em;
	margin: 0;
	padding: .9em 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--kit-border);
	border-radius: 0;
	text-align: left;
	box-shadow: none;
	transform: none;
}
.single-product .st-spec:first-child {
	border-top: 0;
}
.single-product .st-spec:hover {
	transform: none;
	box-shadow: none;
}

/* Los emoji del plugin, ahora dentro del círculo del kit. */
.single-product .st-spec__icon {
	flex: 0 0 auto;
	width: 2.5em;
	height: 2.5em;
	margin: 0;
	border-radius: 50%;
	background: var(--kit-badge);
	box-shadow: none;
	font-size: 1rem;
}

/*
 * El plugin imprime el valor y DESPUÉS la etiqueta; el kit lo muestra al
 * revés («Etiqueta: valor»). Se reordena visualmente con 'order' en lugar de
 * modificar el plugin, que es lógica de negocio.
 */
.single-product .st-spec__label {
	order: 1;
	display: inline;
	margin: 0;
	font-size: var(--kit-fs-label);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kit-ink);
}
.single-product .st-spec__label::after {
	content: ":";
}
.single-product .st-spec__val {
	order: 2;
	display: inline;
	font-size: var(--kit-fs-body);
	font-weight: 400;
	color: var(--kit-text);
}

/*
 * Precio pendiente. Se compone con el mismo peso que una cifra real —ocupa su
 * sitio— pero en el gris del texto, para que no compita con los precios de
 * verdad cuando conviven en el listado.
 *
 * El color va en --kit-text y NO en blanco: el panel del precio es gris claro
 * (--kit-surface-alt), no navy como el CTA que tiene debajo. Con blanco el
 * texto quedaba prácticamente invisible sobre su propio fondo.
 */
.st-precio-consultar {
	font-size: var(--kit-fs-h4);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--kit-text);
}
.single-product .st-price-panel .st-precio-consultar {
	font-size: var(--kit-fs-h3);
	color: var(--kit-ink);
}

/* ---- Otras propiedades (los «relacionados» de WooCommerce) ----
   El bloque ya ocupa las dos columnas de la rejilla (ver §11, junto a
   .up-sells); aquí solo se le da el aire que le faltaba: sin él, el titular
   quedaba pegado a la última foto de la galería. La rejilla del listado no
   necesita el margen inferior del catálogo, porque la sección cierra con el
   pie de página. */
.single-product .related.products {
	margin-top: 3em;
	clear: both;
}
.single-product .related.products ul.products {
	margin-bottom: 0;
}

/* ---- Ficha técnica: tabla de dato / valor ----
   Dos columnas de pares, con un filete por fila. Se usa <dl> y no una tabla
   porque son pares dato-valor, no una matriz: así el lector de pantalla anuncia
   «Clasificación: urbano» en lugar de leer celdas sueltas. */
.single-product .st-ficha {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2.5em;
	margin: 1.2em 0 2.5em;
}
.single-product .st-ficha__dato {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .4em 1.5em;
	padding: .85em 0;
	border-bottom: 1px solid var(--kit-border);
}
/* Las colindancias son una frase larga: ocupan las dos columnas y el valor
   baja a su propia línea para no quedar en una columna de dos palabras. */
.single-product .st-ficha__dato--ancho {
	grid-column: 1 / -1;
	display: block;
}
.single-product .st-ficha__label {
	margin: 0;
	font-size: var(--kit-fs-small);
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--kit-ink);
}
.single-product .st-ficha__valor {
	margin: 0;
	font-size: var(--kit-fs-small);
	line-height: 1.5;
	text-align: right;
	color: var(--kit-text);
}
.single-product .st-ficha__dato--ancho .st-ficha__valor {
	margin-top: .35em;
	text-align: left;
}

/* ---- Amenidades en rejilla con icono circular ---- */
.single-product .st-amenities {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1em 2em;
	margin: 1.2em 0 2em;
}
.single-product .st-amenities li {
	display: flex;
	align-items: center;
	gap: .9em;
	padding-left: 0;
}

/* Se conserva el ✓ del diseño actual, ahora dentro del círculo. */
.single-product .st-amenities li::before {
	content: "✓";
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: var(--kit-badge);
	color: var(--kit-beige);
	font-size: .8rem;
	font-weight: 700;
}

/* ---- Restos del diseño anterior que quedaban fuera del lenguaje del kit ----
   La píldora de categoría usaba un lila (#f2ecff) que no está en el Brand
   Book, y la nota de reservas una caja crema con borde discontinuo. Las dos
   eran redondeadas y pastel, mientras el resto de la ficha es plano y
   navy/naranja: cantaban. */
.single-product .product_meta .posted_in a {
	padding: .35rem .8rem;
	border-radius: var(--kit-radius-btn);
	background: var(--kit-surface-alt);
	color: var(--kit-ink);
	font-size: var(--kit-fs-small);
}
.single-product .product_meta .posted_in a:hover {
	background: var(--kit-accent-strong);
	color: #fff;
}

.st-reservar__note,
.st-reservar__done {
	border-radius: 0;
	background: var(--kit-surface-alt);
	border: 1px solid var(--kit-border);
	color: var(--kit-text);
	font-size: var(--kit-fs-small);
}
.st-reservar__done {
	color: var(--kit-ink);
}

/* ---- Secciones apiladas (en lugar de pestañas) ---- */
.st-ficha-seccion {
	clear: both; /* Baja del área flotante galería + resumen de WooCommerce. */
	margin: 0 0 3em;
}
/*
 * Encabezados de sección. Se uniforman los que ya escriben los callbacks de
 * WooCommerce y del plugin —h2 de «Descripción» y «Valoraciones», h3 de
 * «Amenidades» y «Ubicación»— para que todos se lean igual, con el filete
 * inferior del kit.
 */
.st-ficha-seccion__titulo,
.st-ficha-seccion > h2,
.st-ficha-seccion > h3,
.st-ficha-seccion .woocommerce-Reviews-title,
.single-product .related.products > h2,
.st-tour__title {
	margin: 0 0 1em;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--kit-border);
	font-size: var(--kit-fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -1px;
	color: var(--kit-ink);
}

/* Los encabezados que no abren la sección llevan aire por encima. */
.st-ficha-seccion > h3 ~ h3 {
	margin-top: 2em;
}

/* ---- Catálogo y ficha de propiedad a la anchura del kit ----
   El catálogo y la ficha los pinta WooCommerce dentro de la estructura de
   GeneratePress, no una plantilla del kit, así que heredaban el contenedor de
   1200px del tema padre. Medido a 1440px: el listado se quedaba en 740px —con
   la barra lateral ya desactivada, en 1120px— mientras que esas MISMAS
   tarjetas en la portada miden 1280px. La ficha, igual: 1120px de contenido a
   1920px, más estrecha que el menú y el pie. Aquí se suelta el contenedor del
   padre y se recompone el ancho del kit sobre .site-main, que es el único
   envoltorio común a todo lo que imprimen (migas, título, filtro, listado y
   paginación; hero, columnas y «Otras propiedades»).

   El '+2em' del max-width no es un número mágico: replica cómo se comporta
   .kit-container en el resto del sitio, donde la sección aporta 1em de relleno
   a cada lado POR FUERA del tope de 1280. Sin él el contenido se quedaría en
   1248px y no acabaría de alinear con la portada. */
.kit-catalogo .site,
.kit-catalogo .site-content,
.single-product .site,
.single-product .site-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
.kit-catalogo .content-area,
.single-product .content-area {
	width: 100%;
	max-width: none;
}
/*
 * Tres clases, no dos: GeneratePress fija los márgenes de este mismo elemento
 * con '.separate-containers.no-sidebar .site-main' (0,3,0). Con dos clases la
 * regla del padre ganaba y el bloque no se centraba. Empatando en
 * especificidad manda la hoja que carga después, que es esta.
 */
.kit-catalogo.no-sidebar .site-main,
.single-product.no-sidebar .site-main {
	max-width: calc(var(--kit-container) + 2em);
	margin-inline: auto;
	padding-inline: 1em;
}
/*
 * En el modo «contenedores separados» el contenido va dentro de una caja
 * (.inside-article) con 40px de relleno lateral. La cadena real del archivo es
 *   main.site-main > .woocommerce-archive-wrapper > .inside-article > .entry-content
 * así que la caja es NIETA del main, no hija: por eso hay que nombrarla. Aquí
 * la anchura ya la fija el contenedor del kit y ese relleno solo servía para
 * dejar el listado 80px más estrecho que las mismas tarjetas en la portada.
 */
.kit-catalogo .site-main .inside-article,
.single-product .site-main .inside-article {
	padding-inline: 0;
}
/*
 * En la ficha, además, la caja sumaba arriba 40px de relleno (30px en móvil) y
 * el contenido otros 36px de margen, que GeneratePress pone cuando no es lo
 * primero de la caja: casi 100px en blanco entre la cabecera y la foto. Sin
 * ellos queda el mismo respiro de 20px que en el catálogo.
 */
.single-product .site-main .inside-article {
	padding-top: 0;
}
.single-product .site-main .inside-article > .entry-content {
	margin-top: 0;
}

/* ---- Carrito vacío: rejilla de productos de WooCommerce ----
   El bloque «carrito vacío» propone productos con .wc-block-grid__products, que
   WooCommerce declara con 'margin: 0 -8px 16px': un margen negativo que da por
   supuesto un contenedor con relleno lateral. Aquí no lo hay, así que la
   rejilla sobresalía 8px por cada lado (medido: -7px a la izquierda y +8px a la
   derecha a 768px). Se anula solo el margen horizontal; las tarjetas conservan
   su relleno de 8px, que es el que separa unas de otras. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	margin-inline: 0;
}

/* =========================================================
   12 · RESPONSIVO (cortes del kit: lg 1025 · md 768)
   ========================================================= */

@media (max-width: 1024px) {
	/* Con tres servicios en dos columnas, el tercero se quedaba solo en la
	   última fila. Ocupa el ancho, igual que en la rejilla de Servicios. */
	.kit-services { grid-template-columns: repeat(2, 1fr); }
	.kit-services > :last-child:nth-child(odd) { grid-column: 1 / -1; }

	.kit-metrics  { grid-template-columns: repeat(2, 1fr); gap: 2em 0; }
	.kit-metrics__item:nth-child(odd) { border-left: 0; }
	.kit-property__body { padding: 2em; }

	.kit-split,
	.kit-split--headline { grid-template-columns: 1fr; gap: 2.5em; }
	.kit-split--imagen { grid-template-columns: 40% 1fr; gap: 2.5em; }
	.kit-split--faq { grid-template-columns: 1fr; gap: 2.5em; }
	.kit-team { grid-template-columns: repeat(2, 1fr); }
	.kit-page-hero__caja { max-width: 65%; }
	.kit-servicios-mix { grid-template-columns: 1fr; }
	.kit-testimonio { padding: 4em 2em; }
	.kit-contacto { grid-template-columns: 1fr; }
	.kit-hero__lead { max-width: 80%; }
	.kit-band { max-width: 75%; }
	.single-product .st-amenities { grid-template-columns: repeat(2, 1fr); }
	.single-product .st-ficha { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 768px) {
	.kit-section       { padding: 4.5em 1em 4em; }
	.kit-section--dark { padding: 5em 1em; }

	/* La tarjeta se apila y deja de alternar: en móvil la foto
	   siempre va primero. */
	.kit-property,
	.woocommerce ul.products li.product:nth-child(even) .kit-property {
		flex-direction: column;
		padding: 1.2em;
	}
	.kit-property__media,
	.kit-property__body {
		width: 100%;
	}
	.kit-property__stats {
		margin-top: 1.5em;
	}
	.kit-services { grid-template-columns: 1fr; }
	.kit-watermark { display: none; }

	/*
	 * Franja de cifras: a 320 px las dos columnas no daban de sí. Los 2em de
	 * relleno a cada lado dejaban ~96px de hueco útil, menos de lo que mide
	 * «Propiedades», y como los items de una rejilla no bajan de su contenido
	 * (min-width:auto) el carril crecía y la franja sobresalía 2px.
	 * Se recorta el relleno, se permite que el carril encoja y se autoriza a
	 * partir la palabra si aun así no cabe.
	 */
	.kit-metrics__item {
		min-width: 0;
		padding: 0 1em;
	}
	.kit-metrics__label,
	.kit-metrics__note {
		overflow-wrap: break-word;
	}

	/*
	 * El botón de la cabecera comparte fila con el conmutador del menú: a este
	 * ancho, con el relleno de escritorio se comía casi toda la barra.
	 */
	.kit-btn--header {
		padding: .7em 1.1em;
		font-size: var(--kit-fs-eyebrow);
	}

	/*
	 * En móvil la barra deja de flotar (no hay sitio) y va de lado a lado: el
	 * margen de 15px y 2 % que la separa del borde en escritorio dejaba una
	 * franja blanca alrededor de la arena. Se queda por encima del contenido
	 * para que el panel del menú lo cubra al abrirse.
	 */
	.site-header,
	.home .site-header,
	.kit-landing .site-header {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		padding: 0;
	}
	/* Por debajo de 600px la barra de administración ya no es fija: se va con
	   el scroll, así que la cabecera se pega al borde. */
	@media (max-width: 600px) {
		.admin-bar .site-header {
			top: 0;
		}
	}

	/*
	 * PANEL DEL MENÚ. GeneratePress lo abre dentro del flujo, así que al
	 * desplegarse empujaba toda la página hacia abajo. Aquí sale del flujo y
	 * cae desde la barra por encima del contenido, con un fundido corto.
	 *
	 * Se queda siempre pintado y se oculta con 'visibility', que sí se puede
	 * animar y además lo saca del tabulador y de los lectores de pantalla
	 * mientras está cerrado.
	 *
	 * La arena sigue sin corte desde la barra: las dos usan la misma imagen al
	 * ancho de la pantalla, y el panel la sube lo que mide la barra (12px +
	 * logo de 64px + 12px). Es el recorte de escritorio duplicado en espejo,
	 * para que al repetirse hacia abajo no se vea la unión.
	 */
	.site-header .inside-header {
		position: relative;
		background:
			linear-gradient(rgba(255, 249, 240, .2), rgba(255, 249, 240, .2)),
			url(../img/cabecera-arena-movil.webp) center top / 100% auto repeat-y,
			#efe5d3;
	}
	.site-header .main-navigation:not(.mobile-menu-control-wrapper) {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		padding: 8px 0 16px;
		padding-right: inherit;
		padding-left: inherit;
		/* Con la cabecera pegada, el panel ya no se va con el scroll de la
		   página: en pantallas bajas (un móvil en horizontal) se desplaza por
		   dentro para que se llegue al último enlace. */
		max-height: calc(100vh - var(--st-cabecera-alto, 88px));
		max-height: calc(100dvh - var(--st-cabecera-alto, 88px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			linear-gradient(rgba(255, 249, 240, .2), rgba(255, 249, 240, .2)),
			url(../img/cabecera-arena-movil.webp) center -88px / 100% auto repeat-y,
			#efe5d3;
		box-shadow: 0 18px 30px -16px rgba(26, 20, 40, .45);
		/*
		 * APERTURA. El panel no se desliza: se descubre de arriba abajo, como
		 * una cortina que cae desde la barra, y la arena se queda quieta. Al
		 * abrir tarda algo más y frena despacio; al cerrar se recoge antes. El
		 * recorte abierto deja 40px de más abajo para no cortar la sombra.
		 */
		visibility: hidden;
		clip-path: inset(0 0 100% 0);
		transition:
			clip-path .4s cubic-bezier(.55, 0, .45, 1),
			visibility 0s linear .4s;
	}
	.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) {
		position: absolute;
		visibility: visible;
		clip-path: inset(0 0 -40px 0);
		transition:
			clip-path .75s cubic-bezier(.33, 1, .68, 1),
			visibility 0s;
	}

	/* Los enlaces aparecen uno tras otro mientras cae la cortina, bajando unos
	   pocos píxeles hasta su sitio. Al cerrar se apagan todos a la vez. */
	.site-header .main-navigation:not(.mobile-menu-control-wrapper) .main-nav > ul > li {
		opacity: 0;
		transform: translateY(-10px);
		transition:
			opacity .2s ease,
			transform .2s ease;
	}
	.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) .main-nav > ul > li {
		opacity: 1;
		transform: none;
		transition:
			opacity .55s ease,
			transform .7s cubic-bezier(.33, 1, .68, 1);
		transition-delay: .14s;
	}
	.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) .main-nav > ul > li:nth-child(2) { transition-delay: .21s; }
	.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) .main-nav > ul > li:nth-child(3) { transition-delay: .28s; }
	.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) .main-nav > ul > li:nth-child(4) { transition-delay: .35s; }
	.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) .main-nav > ul > li:nth-child(n+5) { transition-delay: .42s; }

	/* La X de cerrar entra con un giro corto en lugar de aparecer de golpe. */
	.site-header .mobile-menu-control-wrapper.toggled .icon-menu-bars svg:nth-child(2) {
		animation: st-icono-cerrar .45s cubic-bezier(.22, 1, .36, 1);
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header .main-navigation:not(.mobile-menu-control-wrapper),
		.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper),
		.site-header .main-navigation:not(.mobile-menu-control-wrapper) .main-nav > ul > li,
		.site-header .main-navigation.toggled:not(.mobile-menu-control-wrapper) .main-nav > ul > li {
			transition: none;
		}
		.site-header .main-navigation:not(.mobile-menu-control-wrapper) .main-nav > ul > li {
			transform: none;
		}
		.site-header .mobile-menu-control-wrapper.toggled .icon-menu-bars svg:nth-child(2) {
			animation: none;
		}
	}

	/*
	 * GeneratePress quita la lista con 'display: none' mientras está cerrado,
	 * lo que cortaría el fundido de salida, y al abrir le suma 1.5em de margen
	 * y un fondo casi transparente, que separarían el panel de la barra. Se
	 * repiten sus selectores —con el id, como los suyos— para ganarles sin
	 * recurrir a !important.
	 */
	.site-header .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
		display: block;
	}
	.has-inline-mobile-toggle #site-navigation.toggled {
		margin-top: 0;
		background-color: #efe5d3;
	}

	/*
	 * La señal de «página actual» pasa de trazo inferior a marca lateral.
	 *
	 * En el menú desplegable cada enlace ocupa la fila entera, así que el
	 * trazo de escritorio —anclado a los dos lados— se estiraba de borde a
	 * borde y se leía como un separador entre ítems, no como la marca de
	 * dónde estás. En vertical, la señal va en el borde de entrada.
	 *
	 * El transform no se toca: la hoja base ya oculta la marca con scaleX(0)
	 * y la muestra con scaleX(1) en la página actual. Aquí solo cambia la
	 * geometría.
	 */
	.main-navigation .main-nav ul li > a::after {
		top: .55em;
		right: auto;
		bottom: .55em;
		left: 0;
		width: 3px;
		height: auto;
	}

	.kit-page-hero { min-height: 60svh; padding: 0 1em; }
	.kit-page-hero__caja { max-width: 100%; margin: 2.5em 0; }
	.kit-split--imagen { grid-template-columns: 1fr; }
	.kit-media--alta img { aspect-ratio: 3 / 2; }
	.kit-team { grid-template-columns: 1fr; }
	.kit-servicios-mix__rejilla { grid-template-columns: 1fr; }
	.st-form__fila { grid-template-columns: 1fr; }
	.kit-form { padding: 1.6em; }
	.kit-testimonio { padding: 3em 1.4em; }

	/* Sin cabecera flotante, el hero no necesita reservar hueco arriba. */
	.kit-hero {
		min-height: 80svh;
		padding: 3.5em 1em 3.5em;
	}
	.kit-hero__lead { max-width: 100%; }

	/*
	 * Aquí el texto ocupa todo el ancho: con el velo lateral, el final de cada
	 * línea caía sobre la parte clara de la foto. El velo va de abajo arriba,
	 * que es donde se asienta el bloque.
	 */
	.kit-hero::after {
		background: linear-gradient(180deg, rgba(26, 20, 40, .10) 0%, rgba(26, 20, 40, .50) 42%, rgba(26, 20, 40, .74) 100%);
	}

	/*
	 * Todo el bloque un punto menor, a petición del cliente: el titular un
	 * 10 % (la misma escala de escritorio ×0,9) y los textos y el botón lo
	 * justo para acompañarlo sin bajar de 14px.
	 */
	.kit-hero__title { font-size: clamp(1.9125rem, 1.2819rem + 2.7023vw, 4rem); }
	.kit-hero__text { font-size: 1rem; }
	.kit-hero__destacado { margin: 1.5em 0 1.9em; }
	.kit-hero__icono { width: 2.25em; height: 2.25em; }
	.kit-hero__destacado p { font-size: .875rem; }
	.kit-hero__destacado strong { font-size: .9375rem; }
	.kit-hero .kit-btn { padding: .9em 1.5em; font-size: .9375rem; }

	/*
	 * La franja oscura también recupera el ancho completo.
	 *
	 * El corte de 1024 la deja en `max-width: 75%`, que en una tableta está
	 * bien, pero nadie lo deshacía más abajo: a 390px el texto envolvía en
	 * 268px de los 358 disponibles y quedaban 90px muertos a la derecha. Con
	 * la columna tan estrecha el borde derecho salía muy irregular y el bloque
	 * se leía torcido respecto al resto de la página, que arranca y termina en
	 * el mismo margen.
	 */
	.kit-band { max-width: 100%; }
	.site-logo img,
	.site-header .header-image { max-height: 64px; }
	/* El pie lleva sus propias reglas de tableta y móvil, en «10 · PIE». */

	.single-product .st-amenities { grid-template-columns: 1fr; }
	.single-product .woocommerce-product-gallery__wrapper { grid-template-columns: repeat(2, 1fr); }

	/* La ficha pasa a una sola columna: la barra lateral se coloca arriba,
	   justo después del hero, para no enterrar el precio. */
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2em;
	}
	.single-product div.product > .summary.entry-summary {
		grid-column: 1;
		grid-row: auto;
		position: static;
		order: 0;
	}
	.st-ficha-hero__capa { padding: 4em 1.2em 1.2em; }
}

/* =========================================================
   13 · MÓVIL ESTRECHO (≤400px)
   =========================================================
   La cabecera se partía en dos filas por debajo de 390px: el logotipo arriba y
   el botón con la hamburguesa debajo, y pasaba de 119px de alto a 195px.

   La cuenta, a 360px: el contenedor deja 296px útiles, el logotipo ocupa 80,
   la separación 16 y el bloque de botón + hamburguesa 225. Suman 321 y no
   caben, así que el navegador parte la fila.

   No se recoloca nada: se aprieta lo justo para que la fila entre. El botón
   pierde dos puntos de tipografía y algo de relleno —«Hablar con un agente»
   son 20 caracteres, y ahí está el ancho—, y la cabecera cede margen lateral,
   que a este ancho sobraba. Con eso el bloque baja de 225px a ~197px y la
   fila cabe incluso a 320px.
   ========================================================= */

@media (max-width: 400px) {
	.site-header .inside-header {
		gap: 10px;
		padding-right: 15px;
		padding-left: 15px;
	}

	/*
	 * Se repite el selector largo de la regla de color de más arriba
	 * (body .main-navigation .menu-bar-items a.kit-btn--header). Con
	 * `.kit-btn--header` a secas el relleno sí entraba, pero el tamaño de letra
	 * no: lo pisa el CSS que GeneratePress genera desde el personalizador para
	 * los elementos de la barra de menú, que tiene más especificidad.
	 */
	body .main-navigation .menu-bar-items a.kit-btn--header {
		padding: .6em .9em;
		font-size: .8125rem; /* 13px: por debajo de la escala, es un control compacto. */
	}
}