/* ===========================================================================
   Concreto Urbano — sistema del rediseño
   Se carga DESPUES de style.min.css y solo agrega o corrige.

   Referencia visual: Kaldera / HorizonX — fondo gris concreto, barra negra
   flotante tipo pildora, tipografia display pesada en mayusculas con tracking
   cerrado, y bloques asimetricos.

   Paleta de marca: amarillo, blanco, gris, negro.
   =========================================================================== */

/* ===========================================================================
   1. Tokens
   =========================================================================== */
:root{
	/* --- Marca: un solo amarillo. El sitio traia cuatro (#fed136 #ffd200
	       #ffd400 #fec503) mas un naranja suelto. --- */
	--cu-amarillo:        #FFD200;
	--cu-amarillo-vivo:   #FFDD33;
	--cu-amarillo-hondo:  #E5BD00;

	/* --- Neutros: una sola familia de grises, templada --- */
	--cu-negro:           #141416;
	--cu-negro-suave:     #1E1E21;
	--cu-gris-hondo:      #3A3A3E;
	--cu-gris:            #636466;   /* el gris de la marca */
	--cu-gris-medio:      #8E8F92;
	--cu-gris-claro:      #C9C9C6;
	--cu-concreto:        #DEDEDB;   /* el gris concreto de la referencia */
	--cu-concreto-claro:  #EDEDEA;
	--cu-blanco:          #FFFFFF;

	/* --- Papeles: lo que cambia entre tema claro y oscuro --- */
	--cu-fondo:           var(--cu-concreto);
	--cu-panel:           var(--cu-concreto-claro);
	--cu-panel-alto:      var(--cu-blanco);
	--cu-tinta:           var(--cu-negro);
	--cu-tinta-suave:     var(--cu-gris);
	--cu-tinta-tenue:     var(--cu-gris-medio);
	--cu-linea:           rgba(20, 20, 22, .12);
	--cu-linea-suave:     rgba(20, 20, 22, .07);

	/* --- Barra de cristal --- */
	--cu-barra-fondo:     rgba(20, 20, 22, .82);
	--cu-barra-tenue:     rgba(20, 20, 22, .55);
	--cu-barra-solida:    rgba(18, 18, 20, .96);
	--cu-barra-borde:     rgba(255, 255, 255, .12);
	--cu-barra-texto:     rgba(255, 255, 255, .78);
	--cu-barra-activo-fondo: var(--cu-blanco);
	--cu-barra-activo-texto: var(--cu-negro);

	/* --- Sombras: llevan el tono del fondo, nunca negro puro --- */
	--cu-sombra-sm:       0 1px 2px rgba(28, 28, 32, .06),
	                      0 2px 6px rgba(28, 28, 32, .05);
	--cu-sombra-md:       0 4px 14px rgba(28, 28, 32, .10),
	                      0 1px 4px rgba(28, 28, 32, .06);
	--cu-sombra-lg:       0 12px 34px rgba(28, 28, 32, .16),
	                      0 4px 10px rgba(28, 28, 32, .08);
	--cu-sombra-barra:    0 10px 34px rgba(12, 12, 16, .30),
	                      0 2px 8px  rgba(12, 12, 16, .18);

	/* --- Tipografia --- */
	--cu-fuente:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--cu-display-fuente: "Antonio", "Inter", "Segoe UI", sans-serif;

	/* Escala fluida: crece con la ventana sin saltos por breakpoint */
	--cu-display:  clamp(2.6rem, 7.4vw, 6.2rem);
	--cu-titulo:   clamp(1.9rem, 4.2vw, 3.4rem);
	--cu-subtitulo:clamp(1.25rem, 2.2vw, 1.75rem);
	--cu-cuerpo:   1rem;
	--cu-menudo:   .8125rem;
	--cu-etiqueta: .6875rem;

	/* --- Radios: mas cerrados por dentro, mas suaves por fuera --- */
	--cu-radio-sm:  8px;
	--cu-radio-md:  14px;
	--cu-radio-lg:  22px;
	--cu-radio-xl:  32px;
	--cu-pildora:   999px;

	/* --- Ritmo --- */
	--cu-ancho:     1280px;
	--cu-margen:    clamp(16px, 3vw, 40px);

	/* --- Curvas --- */
	--cu-salida:    cubic-bezier(.22, .61, .36, 1);
	--cu-resorte:   cubic-bezier(.34, 1.28, .64, 1);

	/* --- Capas --- */
	--cu-capa-barra:  1000;
	--cu-capa-menu:   1010;
	--cu-capa-saltar: 1020;

	color-scheme: light;
}

/* --- Tema oscuro ------------------------------------------------------- */
[data-tema="oscuro"]{
	/* Gris muy oscuro, no negro: el negro puro hunde las fotos y cansa la
	   vista en pantallas grandes. */
	--cu-fondo:           #1C1C1F;
	--cu-panel:           #242427;
	--cu-panel-alto:      #2E2E32;
	--cu-tinta:           #F2F2F0;
	--cu-tinta-suave:     #A6A7AA;
	--cu-tinta-tenue:     #76777A;
	--cu-linea:           rgba(255, 255, 255, .12);
	--cu-linea-suave:     rgba(255, 255, 255, .07);

	--cu-barra-fondo:     rgba(32, 32, 36, .78);
	--cu-barra-tenue:     rgba(32, 32, 36, .48);
	--cu-barra-solida:    rgba(26, 26, 30, .96);
	--cu-barra-borde:     rgba(255, 255, 255, .13);

	--cu-sombra-sm:       0 1px 2px rgba(0, 0, 0, .40);
	--cu-sombra-md:       0 4px 14px rgba(0, 0, 0, .46);
	--cu-sombra-lg:       0 12px 34px rgba(0, 0, 0, .56);
	--cu-sombra-barra:    0 10px 34px rgba(0, 0, 0, .60);

	color-scheme: dark;
}

/* Antes de que el usuario elija, se respeta la preferencia del sistema */
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]){
		/* Los mismos grises que el bloque de arriba. Este selector pesa mas
		   (:root mas :not) y va despues, asi que si se olvidan aqui, mandan
		   estos y el cambio de color no se ve. */
		--cu-fondo:        #1C1C1F;
		--cu-panel:        #242427;
		--cu-panel-alto:   #2E2E32;
		--cu-tinta:        #F2F2F0;
		--cu-tinta-suave:  #A6A7AA;
		--cu-tinta-tenue:  #76777A;
		--cu-linea:        rgba(255, 255, 255, .12);
		--cu-linea-suave:  rgba(255, 255, 255, .07);
		--cu-barra-fondo:  rgba(32, 32, 36, .78);
		--cu-barra-tenue:  rgba(32, 32, 36, .48);
		--cu-barra-solida: rgba(26, 26, 30, .96);
		--cu-sombra-lg:    0 12px 34px rgba(0, 0, 0, .56);
		--cu-sombra-barra: 0 10px 34px rgba(0, 0, 0, .60);
		color-scheme: dark;
	}
}


/* ===========================================================================
   2. Base
   =========================================================================== */
/* Bootstrap 3 pone html{font-size:10px} como convencion suya. Eso hacia que
   TODOS los rem de esta hoja salieran al 62.5% del tamaño previsto: el
   cuerpo quedaba en 10.6px en vez de 17px. Se devuelve a 16px.
   Comprobado: Bootstrap 3 no usa ninguna unidad rem, solo px, asi que
   este cambio no afecta a nada suyo. */
html{
	font-size: 100%;
	scroll-behavior: smooth;
}

body{
	background: var(--cu-fondo);
	color: var(--cu-tinta);
	font-family: var(--cu-fuente);
	font-size: var(--cu-cuerpo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .3s ease, color .3s ease;
	padding-top: 96px;             /* hueco de la barra flotante */
}
body.cu-hero{ padding-top: 0; }   /* paginas con hero: la barra flota encima */

/* Bootstrap pinta de blanco varios contenedores; aqui se neutraliza para que
   el tema oscuro no quede a medias. */
.container, section, .bg-white{ background-color: transparent; }

h1, h2, h3, h4, h5{
	font-family: var(--cu-fuente);
	color: var(--cu-tinta);
	text-wrap: balance;
}

p{ text-wrap: pretty; }

a{ color: inherit; }
a:hover, a:focus{ color: inherit; }

:focus-visible{
	outline: 2px solid var(--cu-amarillo);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- Tipografia de la referencia --------------------------------------- */
.cu-display{
	font-size: var(--cu-display);
	font-weight: 700;
	line-height: .94;
	letter-spacing: -.032em;
	text-transform: uppercase;
	margin: 0;
}
.cu-titulo{
	font-size: var(--cu-titulo);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.024em;
	text-transform: uppercase;
	margin: 0;
}
.cu-etiqueta{
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
.cu-parrafo{
	max-width: 46ch;              /* ~46 caracteres, como la referencia */
	font-size: var(--cu-menudo);
	line-height: 1.7;
	color: var(--cu-tinta-suave);
}
/* Cifras alineadas en columnas de datos */
.cu-cifra{ font-variant-numeric: tabular-nums; }

.cu-contenedor{
	width: 100%;
	max-width: var(--cu-ancho);
	margin: 0 auto;
	padding: 0 var(--cu-margen);
}


/* ===========================================================================
   3. Salto al contenido
   =========================================================================== */
.cu-saltar{
	position: fixed;
	top: 12px; left: 12px;
	z-index: var(--cu-capa-saltar);
	padding: 10px 18px;
	background: var(--cu-amarillo);
	color: var(--cu-negro);
	font-weight: 600;
	border-radius: var(--cu-radio-sm);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform .2s var(--cu-salida);
}
.cu-saltar:focus{
	transform: translateY(0);
	color: var(--cu-negro);
	text-decoration: none;
}


/* ===========================================================================
   6. Tema oscuro sobre lo que aun no se rediseña
   Ajustes minimos para que las paginas heredadas no queden a medias mientras
   se van reconstruyendo seccion por seccion.
   =========================================================================== */
[data-tema="oscuro"] .sale-rent,
[data-tema="oscuro"] .panel,
[data-tema="oscuro"] .modal-content{
	background: var(--cu-panel);
	color: var(--cu-tinta);
}
[data-tema="oscuro"] .sale-rent a,
[data-tema="oscuro"] .sale-rent h3,
[data-tema="oscuro"] .title-propiedad{ color: var(--cu-tinta); }

[data-tema="oscuro"] .form-control{
	background: var(--cu-panel-alto);
	border-color: var(--cu-linea);
	color: var(--cu-tinta);
}
[data-tema="oscuro"] .text-muted{ color: var(--cu-tinta-suave) !important; }
[data-tema="oscuro"] hr{ border-color: var(--cu-linea); }


/* ===========================================================================
   7. Menos movimiento si el sistema lo pide
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.nav-pill, .nav-panel, .nav-toggle span,
	.cu-saltar, .cu-tema, body{
		transition-duration: .01ms !important;
	}
	/* Se esconde igual, solo que sin deslizamiento */
	.cu-tema .cu-icono-tema{ transition: none; }
}


/* ===========================================================================
   8. Tipografia unificada
   style.min.css declara "Century" en 14 reglas con especificidades distintas.
   En vez de perseguirlas una por una se fuerza desde aqui, que es la ultima
   hoja que se carga. Se excluyen las fuentes de iconos (Glyphicons y Font
   Awesome), que dejarian de dibujarse.
   =========================================================================== */
body,
body *:not(.glyphicon):not([class*="glyphicon-"]):not(.fa):not([class*="fa-"]){
	font-family: var(--cu-fuente) !important;
}


/* ===========================================================================
   10. Botones
   =========================================================================== */
.cu-boton{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: var(--cu-pildora);
	font-size: var(--cu-menudo);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease,
	            transform .15s var(--cu-salida), box-shadow .2s ease;
}
.cu-boton:hover, .cu-boton:focus{ text-decoration: none; }
.cu-boton:active{ transform: translateY(1px) scale(.99); }

.cu-boton--solido{
	background: var(--cu-amarillo);
	color: var(--cu-negro);
	box-shadow: 0 4px 14px rgba(255, 210, 0, .28);
}
.cu-boton--solido:hover, .cu-boton--solido:focus{
	background: var(--cu-amarillo-vivo);
	color: var(--cu-negro);
	box-shadow: 0 6px 20px rgba(255, 210, 0, .38);
}
.cu-boton--oscuro{ background: var(--cu-negro); color: var(--cu-blanco); }
.cu-boton--oscuro:hover, .cu-boton--oscuro:focus{ background: var(--cu-negro-suave); color: var(--cu-blanco); }

.cu-boton--cristal{
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.24);
	color: var(--cu-blanco);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.cu-boton--cristal:hover, .cu-boton--cristal:focus{ background: rgba(255,255,255,.24); color: var(--cu-blanco); }

.cu-boton--linea{
	background: transparent;
	border-color: var(--cu-linea);
	color: var(--cu-tinta);
}
.cu-boton--linea:hover, .cu-boton--linea:focus{
	background: var(--cu-tinta);
	border-color: var(--cu-tinta);
	color: var(--cu-fondo);
}


/* ===========================================================================
   11. Buscador — monta sobre el borde del hero
   =========================================================================== */
.cu-buscador{
	position: relative;
	z-index: 3;
	max-width: var(--cu-ancho);
	margin: -46px auto 0;
	padding: 0 var(--cu-margen);
}
.cu-buscador__caja{
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-lg);
	box-shadow: var(--cu-sombra-lg);
	padding: 14px;
}
/* Flex y no rejilla: el home lleva un filtro mas que venta y renta, y asi
   la barra se acomoda sola sin tener una plantilla de columnas por pagina. */
.cu-buscador__fila{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.cu-buscador__fila .cu-campo{ flex: 1 1 148px; min-width: 0; }
.cu-buscador__fila .cu-campo--texto{ flex: 2.2 1 250px; }
.cu-buscador__enviar{ flex: 0 0 auto; }

@media (max-width: 1040px){
	.cu-buscador__fila .cu-campo--texto{ flex-basis: 100%; }
	.cu-buscador__enviar{ flex: 1 1 100%; }
}
@media (max-width: 560px){
	.cu-buscador__fila .cu-campo{ flex-basis: 100%; }
	.cu-buscador{ margin-top: -30px; }
}

.cu-campo{ position: relative; display: flex; flex-direction: column; }
.cu-campo > label{
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
	margin: 0 0 5px 13px;
}
.cu-campo input,
.cu-campo select,
.cu-campo textarea{
	width: 100%;
	height: 46px;
	padding: 0 14px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	color: var(--cu-tinta);
	font-size: .875rem;
	font-family: inherit;
	transition: border-color .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.cu-campo textarea{ height: auto; padding: 12px 14px; resize: vertical; min-height: 124px; }
.cu-campo input::placeholder, .cu-campo textarea::placeholder{ color: var(--cu-tinta-tenue); }
.cu-campo input:focus, .cu-campo select:focus, .cu-campo textarea:focus{
	border-color: var(--cu-amarillo);
	background: var(--cu-panel-alto);
	outline: none;
}
/* Flecha propia del select, ya que se quito la del sistema */
.cu-campo--select::after{
	content: "";
	position: absolute;
	right: 16px; bottom: 19px;
	width: 8px; height: 8px;
	border-right: 1.5px solid var(--cu-tinta-suave);
	border-bottom: 1.5px solid var(--cu-tinta-suave);
	transform: rotate(45deg);
	pointer-events: none;
}
.cu-buscador__enviar{ display: flex; align-items: flex-end; }
.cu-buscador__enviar .cu-boton{ height: 46px; width: 100%; justify-content: center; }


/* ===========================================================================
   12. Secciones del home
   =========================================================================== */
.cu-seccion{
	max-width: var(--cu-ancho);
	margin: 0 auto;
	padding: clamp(72px, 11vh, 132px) var(--cu-margen);
}
.cu-seccion__cabeza{ margin-bottom: clamp(34px, 5vh, 58px); }
.cu-seccion__cabeza .cu-etiqueta{ display: block; margin-bottom: 14px; }

/* --- Servicios: cuatro tarjetas de proceso ---------------------------------
   Diseño tomado de la referencia que pidio el cliente: cuadro del icono
   arriba, numero de paso, titulo, una linea de resumen y la lista con viñeta
   de anillo. Los colores y la tipografia siguen siendo los de la marca.
   ------------------------------------------------------------------------ */
.cu-servicios{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 1180px){ .cu-servicios{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  640px){ .cu-servicios{ grid-template-columns: 1fr; } }

.cu-servicio{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 24px 28px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-lg);
	transition: transform .28s var(--cu-salida), border-color .28s ease,
	            box-shadow .28s ease, background-color .28s ease;
}
.cu-servicio:hover{
	transform: translateY(-4px);
	background: var(--cu-panel-alto);
	border-color: var(--cu-linea);
	box-shadow: var(--cu-sombra-md);
}

/* El numero de paso, discreto, en la esquina */
.cu-servicio__num{
	position: absolute;
	top: 26px;
	right: 24px;
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .12em;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta-tenue);
}

/* El cuadro del icono: lo que le da la cara a la tarjeta */
/* La imagen del servicio. Es cuadrada a proposito: asi se puede cambiar por
   una foto sin tocar el diseño (index.php dice de donde sale cada una). */
.cu-servicio__foto{
	display: block;
	width: 128px;
	height: 128px;
	margin-bottom: 20px;
	overflow: hidden;
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 18px;
}
.cu-servicio__foto img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--cu-salida);
}
.cu-servicio:hover .cu-servicio__foto img{ transform: scale(1.06); }

@media (max-width: 640px){
	.cu-servicio__foto{ width: 108px; height: 108px; }
}

.cu-servicio h3{
	margin: 0 0 8px;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.2;
	text-wrap: balance;
}
.cu-servicio__resumen{
	margin: 0 0 18px;
	font-size: var(--cu-menudo);
	line-height: 1.55;
	color: var(--cu-tinta-tenue);
}

.cu-servicio ul{
	margin: 0; padding: 0;
	list-style: none;
	font-size: var(--cu-menudo);
	line-height: 1.55;
	color: var(--cu-tinta-suave);
}
.cu-servicio li{
	position: relative;
	padding-left: 24px;
	margin-bottom: 11px;
}
.cu-servicio li:last-child{ margin-bottom: 0; }

/* Viñeta de anillo: punto lleno dentro de un aro, como en la referencia */
.cu-servicio li::before{
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 14px;
	height: 14px;
	border: 1.5px solid rgba(20, 20, 22, .2);
	border-radius: 50%;
}
[data-tema="oscuro"] .cu-servicio li::before{ border-color: rgba(255, 255, 255, .24); }

.cu-servicio li::after{
	content: "";
	position: absolute;
	left: 4.5px;
	top: calc(.45em + 4.5px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cu-amarillo);
}

/* --- Nosotros: dos columnas desiguales --- */
.cu-nosotros{
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(30px, 6vw, 84px);
	align-items: start;
}
@media (max-width: 900px){ .cu-nosotros{ grid-template-columns: 1fr; } }
.cu-nosotros__texto p{
	max-width: 58ch;
	margin-bottom: 18px;
	color: var(--cu-tinta-suave);
	font-size: .9375rem;
	line-height: 1.75;
}
.cu-nosotros__texto p:first-of-type{ font-size: 1.0625rem; color: var(--cu-tinta); }

.cu-datos{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 32px;
}
.cu-dato{
	padding: 22px 20px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
}
.cu-dato b{
	display: block;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}
.cu-dato span{
	display: block;
	margin-top: 7px;
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
@media (max-width: 560px){ .cu-datos{ grid-template-columns: 1fr; } }


/* ===========================================================================
   13. Hablemos
   =========================================================================== */
.cu-hablemos{
	background: var(--cu-panel);
	border-top: 1px solid var(--cu-linea-suave);
}
.cu-hablemos__rejilla{
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: clamp(30px, 6vw, 76px);
	align-items: start;
}
@media (max-width: 900px){ .cu-hablemos__rejilla{ grid-template-columns: 1fr; } }

.cu-contacto__lista{ margin: 28px 0 0; padding: 0; }
.cu-contacto__fila{
	display: flex;
	gap: 14px;
	padding: 15px 0;
	border-top: 1px solid var(--cu-linea-suave);
	font-size: var(--cu-menudo);
	line-height: 1.55;
}
.cu-contacto__fila:last-child{ border-bottom: 1px solid var(--cu-linea-suave); }
.cu-contacto__fila dt{
	flex: 0 0 88px;
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
	margin: 0;
}
.cu-contacto__fila dd{ margin: 0; }
.cu-contacto__fila a{ color: var(--cu-tinta); text-decoration: none; }
.cu-contacto__fila a:hover{ color: var(--cu-amarillo-hondo); text-decoration: underline; }

.cu-form{
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-lg);
	padding: clamp(22px, 3vw, 34px);
	box-shadow: var(--cu-sombra-sm);
}
.cu-form__rejilla{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cu-form__rejilla .cu-campo--ancho{ grid-column: 1 / -1; }
@media (max-width: 620px){ .cu-form__rejilla{ grid-template-columns: 1fr; } }
.cu-form .cu-campo input, .cu-form .cu-campo textarea{ background: var(--cu-panel); }

.cu-form__pie{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 8px;
}
/* Ojo: .cu-aviso ya existe para el modal de borrado del manager (seccion 33),
   que lleva caja y sombra. Por eso el aviso del formulario tiene nombre
   propio: antes heredaba ese recuadro sin querer. */
.cu-form__aviso{
	max-width: 40ch;
	margin: 0;
	font-size: var(--cu-etiqueta);
	color: var(--cu-tinta-tenue);
	letter-spacing: .02em;
	text-transform: none;
	line-height: 1.5;
}
.cu-form__aviso a{ color: var(--cu-tinta-suave); text-decoration: underline; }

.cu-mensaje{
	margin-top: 16px;
	padding: 13px 16px;
	border-radius: var(--cu-radio-md);
	font-size: var(--cu-menudo);
	display: none;
}
.cu-mensaje--ok{ background: rgba(46,160,90,.12); color: #2E7D4F; border: 1px solid rgba(46,160,90,.28); }
.cu-mensaje--mal{ background: rgba(196,60,60,.10); color: #B03B3B; border: 1px solid rgba(196,60,60,.26); }
[data-tema="oscuro"] .cu-mensaje--ok{ color: #7BD9A4; }
[data-tema="oscuro"] .cu-mensaje--mal{ color: #F08A8A; }

.cu-campo .cu-error{
	min-height: 15px;
	margin: 5px 0 0 13px;
	font-size: var(--cu-etiqueta);
	letter-spacing: .04em;
	color: #B03B3B;
	text-transform: none;
}
[data-tema="oscuro"] .cu-campo .cu-error{ color: #F08A8A; }


/* ===========================================================================
   15. Entrada al hacer scroll
   =========================================================================== */
.cu-revelar{
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--cu-salida), transform .6s var(--cu-salida);
}
.cu-revelar.es-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
	.cu-revelar{ opacity: 1; transform: none; transition: none; }
	.cu-servicio:hover{ transform: none; }
}


/* ===========================================================================
   4. Barra flotante  (diseño del hero, adaptado al sistema de tokens)

   En el home baja cuando termina la pista del hero; en las demas paginas
   esta visible desde el principio. Lo decide .cu-barra--fija, que pone el PHP.
   =========================================================================== */
.nav-pill{
	position: fixed;
	top: 24px;
	left: 50%;
	z-index: var(--cu-capa-barra);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 12px 24px;

	background: rgba(31, 31, 31, .34);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	border: .8px solid #333;
	border-radius: var(--cu-pildora);

	/* Arranca fuera de pantalla; baja al agotarse la pista del hero.
	   El translateX(-50%) es el centrado: no se puede perder al animar. */
	transform: translateX(-50%) translateY(calc(-100% - 32px));
	opacity: 0;
	pointer-events: none;
	transition: border-radius .3s cubic-bezier(.4,0,.2,1),
	            transform .55s cubic-bezier(.22,1,.36,1),
	            opacity .35s ease,
	            background-color .3s ease;
}
.nav-pill.visible{
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}
/* Paginas sin hero: la barra ya esta puesta desde el arranque */
.nav-pill.cu-barra--fija{
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
	background: rgba(20, 20, 22, .74);
}
.nav-pill.abierto{ border-radius: 24px; }

/* Se esconde al bajar. Gana a .visible y a .cu-barra--fija por especificidad
   y por orden, asi no hace falta !important. */
.nav-pill.esta-oculta,
.nav-pill.visible.esta-oculta,
.nav-pill.cu-barra--fija.esta-oculta{
	transform: translateX(-50%) translateY(calc(-100% - 32px));
	opacity: 0;
	pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	.nav-pill{ background: rgba(20, 20, 22, .94); }
}

.nav-fila{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}
/* logotxt.svg es un logotipo de texto de 307x24 (proporcion 12.9:1):
   se dimensiona por altura, si no desbordaria la barra. */
.nav-marca img{ height: 15px; width: auto; display: block; }
.nav-marca{ display: block; line-height: 0; }

.nav-links{ display: none; align-items: center; gap: 24px; }
.nav-acciones{ display: none; align-items: center; gap: 10px; }

/* Hover de rodillo: el texto va DUPLICADO en una columna y sube la mitad. */
.nav-link{
	display: block;
	overflow: hidden;
	height: 20px;
	text-decoration: none;
	border-radius: 3px;
}
.nav-link .rodillo{
	display: flex;
	flex-direction: column;
	transition: transform .4s cubic-bezier(0,0,.2,1);
}
.nav-link:hover .rodillo,
.nav-link:focus-visible .rodillo{ transform: translateY(-50%); }
.nav-link .rodillo > span{
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	white-space: nowrap;
}
.nav-link .rodillo > span:first-child{ color: rgba(255,255,255,.62); }
.nav-link .rodillo > span:last-child { color: #fff; }
/* El cambio a amarillo al entrar en la seccion no debe ser un salto seco */
.nav-link .rodillo > span{ transition: color .25s ease; }

/* Pagina actual */
.nav-link.esta-activo .rodillo > span{ color: var(--cu-amarillo); }

/* --- Boton redondo (tema) --- */
.nav-redondo{
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	padding: 0;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .15s var(--cu-salida);
}
.nav-redondo:hover{ background: rgba(255,255,255,.22); }
.nav-redondo:active{ transform: scale(.94); }
.nav-redondo svg{ width: 16px; height: 16px; display: block; }
.nav-redondo .cu-icono-tema{ transition: transform .45s var(--cu-resorte); }
[data-tema="oscuro"] .nav-redondo .cu-icono-tema{ transform: rotate(180deg); }

/* --- Hamburguesa --- */
.nav-toggle{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.nav-toggle span{
	display: block;
	height: 1.5px; width: 20px;
	background: #d4d4d4;
	border-radius: 2px;
	transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.nav-pill.abierto .nav-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-pill.abierto .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-pill.abierto .nav-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* --- Panel desplegable: el alto lo fija el JS para poder animarlo --- */
.nav-panel{
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: height .3s cubic-bezier(.4,0,.2,1);
}
.nav-panel-interior{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding-top: 18px;
}
.nav-panel a{
	color: rgba(255,255,255,.66);
	text-decoration: none;
	font-size: 15px;
	transition: color .15s;
}
.nav-panel a:hover{ color: #fff; }
.nav-panel .nav-acciones-movil{ display: flex; flex-direction: column; gap: 10px; width: 100%; }

@media (min-width: 768px){
	.nav-links, .nav-acciones{ display: flex; }
	.nav-toggle{ display: none; }
	.nav-panel{ display: none; }
	.nav-marca img{ height: 19px; }
}

/* En el sitio publico el menu dice siempre "Propiedades en venta" y
   "Propiedades en renta", como en escritorio. Con esos nombres la barra mide
   800 px, y solo cabe junto a los botones de tema y Hablemos desde 1280 px:
   a 1200 ya se les montaba encima. Por debajo se usa el menu desplegable,
   igual que en el celular. El manager no cambia (tiene su propia barra). */
@media (min-width: 768px) and (max-width: 1279px){
	.nav-pill:not(.cu-barra--manager) .nav-links{ display: none; }
	.nav-pill:not(.cu-barra--manager) .nav-toggle{ display: flex; }
	.nav-pill:not(.cu-barra--manager) .nav-panel{ display: block; }
}


/* ===========================================================================
   5. Boton de relleno expansivo
   Un circulo del color de relleno vive donde la flecha; al pasar el raton su
   inset pasa a 0 y cubre el boton entero. Una copia del texto, recortada con
   clip-path a esa misma caja, se va revelando conforme el circulo crece.
   =========================================================================== */
.afb{
	--afb-h:        2.375rem;
	--afb-icon:     1.75rem;
	--afb-gap:      0.3rem;
	--afb-pad:      1.1rem;
	--afb-inset-y:  calc((var(--afb-h) - var(--afb-icon)) / 2);
	--afb-ease:     cubic-bezier(.785, .135, .15, .86);
	--afb-dur:      450ms;

	--afb-bg:        var(--cu-amarillo);
	--afb-text:      #111;
	--afb-fill-bg:   #0a0a0a;
	--afb-fill-text: var(--cu-amarillo);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--afb-h);
	padding-left: var(--afb-pad);
	padding-right: calc(var(--afb-icon) + var(--afb-gap) + var(--afb-pad));
	border-radius: var(--cu-pildora);
	border: 1px solid var(--afb-bg);
	background: var(--afb-bg);
	color: var(--afb-text);
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1;
}
.afb:hover, .afb:focus{ text-decoration: none; color: var(--afb-text); }
.afb__label{ position: relative; z-index: 1; }

.afb__fill{
	position: absolute; z-index: 2;
	pointer-events: none;
	border-radius: var(--cu-pildora);
	background: var(--afb-fill-bg);
	inset: var(--afb-inset-y) var(--afb-gap) var(--afb-inset-y)
	       calc(100% - var(--afb-gap) - var(--afb-icon));
	transition: inset var(--afb-dur) var(--afb-ease),
	            background-color var(--afb-dur) var(--afb-ease);
}
.afb__ghost{
	position: absolute; inset: 0; z-index: 2;
	pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	padding-left: var(--afb-pad);
	padding-right: calc(var(--afb-icon) + var(--afb-gap) + var(--afb-pad));
	color: var(--afb-fill-text);
	clip-path: inset(var(--afb-inset-y) var(--afb-gap) var(--afb-inset-y)
	                 calc(100% - var(--afb-gap) - var(--afb-icon)));
	transition: clip-path var(--afb-dur) var(--afb-ease),
	            color var(--afb-dur) var(--afb-ease);
}
.afb__icon{
	position: absolute; right: var(--afb-gap); top: 50%; z-index: 3;
	width: var(--afb-icon); height: var(--afb-icon);
	transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--cu-pildora);
	background: var(--afb-fill-bg);
	color: var(--afb-fill-text);
	overflow: hidden;
	transition: background-color var(--afb-dur) var(--afb-ease),
	            color var(--afb-dur) var(--afb-ease);
}
.afb__arrow{
	position: absolute; left: 50%; top: 50%;
	width: 1rem; height: 1rem;
	transform-origin: center;
	transition: transform var(--afb-dur) var(--afb-ease);
}
.afb__arrow--in { transform: translate(-170%, -50%) scale(0); }
.afb__arrow--out{ transform: translate(-50%, -50%) scale(1); }

.afb:hover .afb__fill,       .afb:focus-visible .afb__fill      { inset: 0; }
.afb:hover .afb__ghost,      .afb:focus-visible .afb__ghost     { clip-path: inset(0 0 0 0); }
.afb:hover .afb__arrow--in,  .afb:focus-visible .afb__arrow--in { transform: translate(-50%, -50%) scale(1); }
.afb:hover .afb__arrow--out, .afb:focus-visible .afb__arrow--out{ transform: translate(70%, -50%) scale(0); }
.afb:active{ transform: scale(.98); }


/* ===========================================================================
   9. Hero (hero.php elige al azar una version de assets/img/hero/)

   En computadora, con video, el video no se reproduce: se "rasca" moviendo
   currentTime segun el scroll y la pista mide 300vh. En celular y tableta el
   video corre solo en bucle, y las imagenes fijas no tienen nada que
   recorrer: ahi la pista mide una pantalla.
   =========================================================================== */
.cu-pista{
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;                /* una pantalla: imagen fija o video en bucle */
	background: #0a0a0a;
	color: #fff;
}
/* El scrub: solo con raton, pantalla ancha y video. Es la misma condicion que
   MEDIA_SCRUB en rediseno.js */
@media (hover: hover) and (pointer: fine) and (min-width: 768px){
	.cu-pista--video{ height: 300vh; }   /* cuanto dura el efecto */
}
/* Video sin scrub (menos movimiento, ahorro de datos): lo marca el JS */
.cu-pista.cu-pista--quieta{ height: 100vh; height: 100svh; }
.cu-escenario{
	position: sticky;
	top: 0; left: 0;
	width: 100%;
	height: 100svh;                /* svh evita el salto de barras en moviles */
	overflow: hidden;

	/* Tres filas: aire, logo con lema, y el pie con Skip y SCROLL. Las de los
	   extremos se reparten el alto a partes iguales, asi que con espacio de
	   sobra el logo queda centrado igual que antes. En una pantalla bajita
	   la de abajo no se deja aplastar (mide lo que ocupan Skip y SCROLL) y
	   cede la de arriba: el logo sube en vez de caerle encima al pie. */
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
}
.cu-escenario__media{
	position: absolute; inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
/* La portada y el video, uno encima del otro. La portada se ve desde el
   primer instante; el video entra encima cuando ya tiene cuadros (el JS le
   pone .esta-listo). Si el celular no lo deja reproducir, queda la portada. */
.cu-escenario__foto,
.cu-escenario__media video{
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
}
.cu-escenario__foto img{
	display: block;
	width: 100%; height: 100%;
}
.cu-escenario__foto img,
.cu-escenario__media video{
	object-fit: cover;
	transform: scale(1.01);        /* mata la costura de subpixel en los bordes */
}
.cu-escenario__media video{
	opacity: 0;
	transition: opacity .6s ease;
}
.cu-escenario__media video.esta-listo{ opacity: 1; }
/* Viñeta doble: oscurece arriba (barra) y abajo (titular) sin ensuciar el centro */
.cu-vineta{
	position: absolute; inset: 0;
	z-index: 10;
	background: linear-gradient(to bottom,
		rgba(0,0,0,.50) 0%,
		rgba(0,0,0,0)  40%,
		rgba(0,0,0,0)  55%,
		rgba(0,0,0,.75) 100%);
}

.cu-lockup{
	grid-row: 2;
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 16px;
	text-align: center;
}
/* Con alto de sobra miden lo de siempre: 124 px de logo (168 desde 768 de
   ancho) y 76 de hueco. Por debajo de ~540 px de alto, un celular acostado
   o una ventana bajita, encogen con la altura: si no, no caben encima del
   pie. El logo del cargador los mide y los copia, asi que tambien encoge. */
.cu-lockup__logo{ height: clamp(56px, 50svh - 100px, 124px); width: auto; display: block; }
.cu-lockup__hueco{ height: clamp(20px, 25svh - 58px, 76px); }
@media (min-width: 768px){
	.cu-lockup__logo{ height: clamp(56px, 50svh - 100px, 168px); }
}
@media (min-width: 1024px){
	.cu-lockup{ padding-bottom: 48px; }
}

.cu-lockup h1{ margin: 0; width: 100%; }
.cu-lema{
	display: inline-block;
	/* Tamaño explicito, no auto-ajustado: un eslogan necesita seguir siendo
	   legible, no estirarse hasta llenar el ancho. */
	font-size: clamp(11px, 2vw, 18px);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .12em;
	white-space: nowrap;
	user-select: none;
	color: #fff;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .9s cubic-bezier(.22,1,.36,1),
	            transform .9s cubic-bezier(.22,1,.36,1);
}
.cu-lema.entro{ opacity: 1; transform: none; }

/* Aviso de scroll al pie del hero */
.cu-pista__pista{
	position: absolute;
	left: 50%; bottom: 26px;
	z-index: 20;
	transform: translateX(-50%);
	font-size: var(--cu-etiqueta);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.50);
	animation: cuLatido 2.4s ease-in-out infinite;
}
@keyframes cuLatido{
	0%, 100%{ opacity: .35; transform: translateX(-50%) translateY(0); }
	50%     { opacity: .85; transform: translateX(-50%) translateY(4px); }
}

@media (prefers-reduced-motion: reduce){
	.cu-pista{ height: auto; }
	.cu-escenario{ position: relative; height: 100svh; }
	.cu-lema{ opacity: 1; transform: none; transition: none; }
	.cu-pista__pista{ animation: none; }
	.nav-pill{ transition: opacity .01ms; }
}

/* Los titulares grandes usan Antonio, como el eslogan del hero */
.cu-display, .cu-titulo, .cu-lema, .cu-servicio h3,
.cu-dato b, .cu-hero-hueco__titulo{
	font-family: var(--cu-display-fuente) !important;
}


/* ===========================================================================
   16. Volver, vacio y paginacion
   =========================================================================== */
.cu-volver{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px 8px 11px;
	background: transparent;
	border: 1px solid var(--cu-linea);
	border-radius: var(--cu-pildora);
	color: var(--cu-tinta-suave);
	font-size: var(--cu-menudo);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cu-volver:hover, .cu-volver:focus{
	background: var(--cu-tinta);
	border-color: var(--cu-tinta);
	color: var(--cu-fondo);
	text-decoration: none;
}
.cu-volver svg{ width: 15px; height: 15px; }

.cu-vacio{
	max-width: 46ch;
	margin: 0 auto;
	padding: clamp(40px, 8vh, 80px) 0;
	text-align: center;
}
.cu-vacio__acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.cu-paginas{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 46px;
	font-size: var(--cu-menudo);
}
.cu-paginas a{
	padding: 10px 20px;
	border: 1px solid var(--cu-linea);
	border-radius: var(--cu-pildora);
	color: var(--cu-tinta);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.cu-paginas a:hover{
	background: var(--cu-tinta);
	color: var(--cu-fondo);
	text-decoration: none;
}
.cu-paginas__estado{ color: var(--cu-tinta-tenue); }


/* ===========================================================================
   17. Cargador del hero
   Tapa la pista hasta que el video esta descargado al 100%. Sin esto el
   scrub se traba: mover currentTime a un punto que aun no llego obliga al
   navegador a esperar, y se siente como un tiron.
   =========================================================================== */
.cu-cargador{
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	background: #141416;
	transition: opacity .55s var(--cu-salida), visibility 0s linear .55s;
}
.cu-cargador.se-fue{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* El cargador y Skip solo en computadora con video: es donde hay que bajar el
   video completo y recorrer la pista larga (MEDIA_SCRUB en rediseno.js). En
   celular el video se reproduce solo y esperar la descarga completa era lo
   que dejaba la pantalla pasmada. */
.cu-pista .cu-cargador,
.cu-skip{ display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px){
	.cu-pista--video .cu-cargador{ display: grid; }
	.cu-skip{ display: inline-block; }
}
@media (prefers-reduced-motion: reduce){
	.cu-pista .cu-cargador,
	.cu-skip{ display: none !important; }
}

.cu-cargador__centro{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(340px, calc(100vw - 48px));
	text-align: center;
}

/* Cuando el JS ya midio donde cae el logo del hero, el bloque se ancla a esa
   altura: el logo es su primer hijo y no lleva margen arriba, asi que su
   borde superior es el mismo. Al irse el cargador, el logo no se mueve. */
.cu-cargador__centro.esta-calzado{
	position: fixed;
	top: var(--cu-logo-y, 50%);
	left: 50%;
	transform: translateX(-50%);
}

.cu-cargador__logo{
	height: 58px;
	width: auto;
	margin-bottom: 34px;
	opacity: .92;
	transition: none;
}
.esta-calzado .cu-cargador__logo{
	height: var(--cu-logo-alto, 58px);
	margin-bottom: var(--cu-logo-hueco, 34px);
}

/* La barra: una linea fina que se rellena de izquierda a derecha */
.cu-cargador__barra{
	position: relative;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, .14);
	border-radius: 2px;
	overflow: hidden;
}
.cu-cargador__relleno{
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--cu-amarillo);
	border-radius: 2px;
	/* La transicion suaviza los saltos entre bloques descargados */
	transition: width .25s var(--cu-salida);
}

.cu-cargador__cifra{
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3em;
	color: rgba(240, 244, 248, .78);
	font-variant-numeric: tabular-nums;
}
.cu-cargador__aviso{
	margin: 6px 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(240, 244, 248, .38);
}


/* ===========================================================================
   18. Indicador de scroll
   =========================================================================== */
/* Medidas del pie del hero. Las usan SCROLL, que va dentro del hero, y Skip,
   que va fuera (tiene que quedar por encima del cargador) y se coloca con
   estas mismas cuentas para caer justo encima de SCROLL. Si cambia la letra
   o el margen de alguno de los dos, se ajusta aqui. */
:root{
	--cu-hero-pie:    clamp(20px, 6svh, 48px);  /* de la flecha al borde */
	--cu-scroll-alto: 46px;    /* SCROLL 20 + hueco 8 + flecha 18 */
	--cu-skip-alto:   34px;
	--cu-skip-hueco:  10px;    /* entre Skip y SCROLL */

	/* Lo minimo libre entre el lema y Skip. No es solo por el lema: en el
	   cargador, la cifra y el "Cargando" bajan 23 px mas que el. */
	--cu-skip-aire:   40px;
}
/* En escritorio el lockup ya trae 48 px de colchon abajo (seccion 9) */
@media (min-width: 1024px){
	:root{ --cu-skip-aire: 0px; }
}

.cu-scroll{
	grid-row: 3;
	align-self: end;
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;

	/* Arriba se aparta el lugar de Skip mas su aire; abajo, el pie. Asi la
	   fila nunca mide menos de lo que el pie necesita. */
	padding: calc(var(--cu-skip-aire) + var(--cu-skip-alto) + var(--cu-skip-hueco))
	         0 var(--cu-hero-pie);

	color: rgba(240, 244, 248, .75);
	font-size: clamp(10px, 1.4vw, 12px);
	font-weight: 600;
	letter-spacing: .3em;
	pointer-events: none;
	opacity: 1;
	transition: opacity .4s ease;
}
/* Se desvanece en cuanto el usuario empieza a bajar: ya cumplio su funcion */
.cu-scroll.se-fue{ opacity: 0; }

/* Renglon fijo: el alto de SCROLL tiene que ser exacto o Skip se desfasa */
.cu-scroll span{ line-height: 20px; }

.cu-scroll svg{
	animation: cuRebote 1.6s ease-in-out infinite;
}
@keyframes cuRebote{
	0%, 100%{ transform: translateY(0); opacity: .5; }
	50%     { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.cu-scroll svg{ animation: none; opacity: .8; }
	.cu-cargador__relleno{ transition: none; }
}


/* ===========================================================================
   19. Pie  (reemplaza la version corta de la seccion 14)
   =========================================================================== */
.cu-pie{
	background: var(--cu-negro);
	color: rgba(255, 255, 255, .58);
	padding: clamp(48px, 7vh, 80px) 0 26px;
	font-size: var(--cu-menudo);
}

.cu-pie__rejilla{
	max-width: var(--cu-ancho);
	margin: 0 auto;
	padding: 0 var(--cu-margen);
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 860px){
	.cu-pie__rejilla{ grid-template-columns: 1fr 1fr; }
	.cu-pie__marca{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
	.cu-pie__rejilla{ grid-template-columns: 1fr; gap: 30px; }
}

/* Logo y lema en una linea: el lema a la derecha del logo */
.cu-pie__marca{
	display: flex;
	align-items: center;
	gap: 16px;
}
.cu-pie__marca img{
	height: 52px;
	width: auto;
	display: block;
	flex: 0 0 auto;
}
.cu-pie__lema{
	margin: 0;
	max-width: 16ch;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
	line-height: 1.7;
}

.cu-pie__col{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
}
.cu-pie__titulo{
	margin: 0 0 5px;
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .40);
}

.cu-pie a{
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
	transition: color .2s ease;
}
.cu-pie a:hover,
.cu-pie a:focus{
	color: var(--cu-amarillo);
	text-decoration: none;
}
.cu-pie a:focus-visible{
	outline: 2px solid var(--cu-amarillo);
	outline-offset: 3px;
	border-radius: 3px;
}

.cu-pie__legal{
	max-width: var(--cu-ancho);
	margin: clamp(38px, 5vh, 58px) auto 0;
	padding: 22px var(--cu-margen) 0;
	border-top: 1px solid rgba(255, 255, 255, .10);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	justify-content: space-between;
	align-items: center;
	font-size: var(--cu-etiqueta);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .42);
}
.cu-pie__legal-enlaces{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
@media (max-width: 700px){
	.cu-pie__legal{ justify-content: flex-start; }
}


/* ===========================================================================
   20. Acceso al Manager

   Es una sola pantalla: todo cabe en la ventana, sin scroll.

   Esta pagina no carga Bootstrap, que en el resto del sitio es quien quita el
   margen del body y hace que el relleno cuente DENTRO del ancho y el alto.
   Sin eso la pantalla medía la ventana mas 96 px (de ahi el scroll), y en el
   celular la caja se salia por los lados y los campos rebasaban su espacio.
   =========================================================================== */
body.cu-pagina-acceso{ margin: 0; padding: 0; }

.cu-acceso,
.cu-acceso *,
.cu-acceso *::before,
.cu-acceso *::after{ box-sizing: border-box; }

.cu-acceso{
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: clamp(16px, 5vh, 40px) var(--cu-margen);
	background: var(--cu-fondo);
}
.cu-acceso__caja{
	width: min(400px, 100%);
	padding: clamp(28px, 4vw, 42px);
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-lg);
	box-shadow: var(--cu-sombra-lg);
	text-align: center;
}
.cu-acceso__logo{
	height: 44px;
	width: auto;
	margin-bottom: 26px;
	/* El logo es claro: en tema claro necesita invertirse para verse */
	filter: invert(1) brightness(.2);
}
[data-tema="oscuro"] .cu-acceso__logo{ filter: none; }

.cu-acceso__titulo{
	margin: 0 0 6px;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: uppercase;
	font-family: var(--cu-display-fuente);
}
.cu-acceso__nota{
	margin: 0 0 26px;
	font-size: var(--cu-etiqueta);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
.cu-acceso .cu-campo{ text-align: left; margin-bottom: 14px; }
.cu-acceso .cu-boton{ width: 100%; justify-content: center; }
.cu-acceso__error{
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: var(--cu-radio-md);
	background: rgba(196, 60, 60, .10);
	border: 1px solid rgba(196, 60, 60, .26);
	color: #B03B3B;
	font-size: var(--cu-menudo);
}
[data-tema="oscuro"] .cu-acceso__error{ color: #F08A8A; }
.cu-acceso__volver{
	display: inline-block;
	margin-top: 22px;
	font-size: var(--cu-etiqueta);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
	text-decoration: none;
}
.cu-acceso__volver:hover{ color: var(--cu-tinta); }

/* Pantallas bajas (una laptop con las barras del navegador, o con el aviso
   de error a la vista): la caja se compacta para seguir cabiendo. Va al final
   de la seccion a proposito: antes de las reglas de la caja, estas le ganaban. */
@media (max-height: 680px){
	.cu-acceso__caja{ padding-block: 22px; }
	.cu-acceso__logo{ height: 34px; margin-bottom: 14px; }
	.cu-acceso__nota{ margin-bottom: 16px; }
	.cu-acceso__error{ margin-bottom: 12px; padding-block: 8px; }
	.cu-acceso .cu-campo{ margin-bottom: 10px; }
	.cu-acceso__volver{ margin-top: 14px; }
}


/* ===========================================================================
   21. Rejilla de propiedades
   Bootstrap 3 no puede hacer 5 columnas (12 no divide entre 5), asi que el
   listado usa rejilla CSS propia. Las tarjetas siguen siendo .sale-rent.
   =========================================================================== */
.cu-rejilla-props{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}
@media (max-width: 1240px){ .cu-rejilla-props{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px){ .cu-rejilla-props{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  760px){ .cu-rejilla-props{ grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width:  460px){ .cu-rejilla-props{ grid-template-columns: 1fr; } }

/* Dentro de la rejilla la tarjeta ya no necesita el margen de Bootstrap */
.cu-rejilla-props .sale-rent{ margin-bottom: 0; }

/* Con 5 por fila la foto necesita menos alto para no dominar la tarjeta */
.cu-rejilla-props .bg-image{ height: 170px; }
@media (max-width: 1000px){ .cu-rejilla-props .bg-image{ height: 190px; } }

/* Las anclas se detienen debajo de la barra, no debajo del borde de la
   ventana: si no, el titulo de la seccion queda tapado. */
#buscador, #servicios, #nosotros, #hablemos, #contenido{
	scroll-margin-top: 112px;
}
@media (max-width: 900px){
	#buscador, #servicios, #nosotros, #hablemos, #contenido{ scroll-margin-top: 92px; }
}


/* Tipo de propiedad y ciudad, arriba de la colonia */
.cu-tarjeta__tipo{
	margin: 12px 0 0;
	text-align: center;
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
.cu-tarjeta__lugar{ margin-bottom: 8px; }
.cu-tarjeta__ciudad{
	display: block;
	font-weight: 600;
}

/* Lo mismo en la ficha: el tipo bajo el titulo y la ciudad sobre la calle */
.cu-ficha__tipo{
	margin: -6px 0 2px;
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cu-amarillo-hondo);
}
.cu-ficha__ciudad{
	margin: 0 0 2px;
	font-size: 1.0625rem;
	font-weight: 600;
}

.cu-buscador__limpiar{
	margin: 12px 4px 2px;
	font-size: var(--cu-etiqueta);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cu-buscador__limpiar a{
	color: var(--cu-tinta-tenue);
	text-decoration: underline;
}
.cu-buscador__limpiar a:hover{ color: var(--cu-tinta); }


/* ===========================================================================
   22. Ajuste de tamaños de texto
   La escala anterior venia de la referencia, que usa parrafos muy pequeños
   sobre imagen. En paginas con texto de lectura se quedaba corta.
   =========================================================================== */
:root{
	--cu-cuerpo:   1.0625rem;   /* 17px */
	--cu-menudo:   .9375rem;    /* 15px, antes 13px */
	--cu-etiqueta: .75rem;      /* 12px, antes 11px */
}

.cu-parrafo{
	max-width: 54ch;
	font-size: 1rem;
	line-height: 1.75;
}
.cu-servicio h3{ font-size: 1.25rem; }
.cu-nosotros__texto p{ font-size: 1.0625rem; line-height: 1.8; }
.cu-nosotros__texto p:first-of-type{ font-size: 1.25rem; line-height: 1.65; }
.cu-dato b{ font-size: 2.125rem; }
.cu-hero-hueco__texto{ font-size: 1.0625rem; }

/* Los enlaces y datos del pie tambien crecen */
.cu-pie{ font-size: .9375rem; }
.cu-pie__lema{ font-size: .8125rem; }

/* La barra se mantiene compacta: ahi el tamaño si venia bien */
.nav-link .rodillo span{ font-size: 14px; }
.cu-barra__lista a{ font-size: .875rem; }


/* ===========================================================================
   23. Ajustes de la barra
   =========================================================================== */

/* Logo y boton de Hablemos un punto mas discretos */
.nav-marca img{ height: 13px; }
@media (min-width: 768px){
	.nav-marca img{ height: 16px; }
}

.afb{
	--afb-h:    2.125rem;   /* antes 2.375rem */
	--afb-icon: 1.5rem;     /* antes 1.75rem  */
	--afb-pad:  .95rem;
	font-size: .6875rem;
}
.afb__arrow{ width: .875rem; height: .875rem; }


/* ===========================================================================
   24. Tema y Hablemos: fuera de la barra, fijos al borde derecho
   =========================================================================== */
.cu-flotantes{
	position: fixed;
	top: 24px;
	right: 18px;
	z-index: calc(var(--cu-capa-barra) + 1);

	display: flex;
	align-items: center;
	gap: 10px;

	/* Entra y sale con la barra: mismas clases y mismo tiempo */
	transform: translateY(calc(-100% - 32px));
	opacity: 0;
	pointer-events: none;
	transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.cu-flotantes.visible,
.cu-flotantes.cu-barra--fija{
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.cu-flotantes.esta-oculta,
.cu-flotantes.visible.esta-oculta,
.cu-flotantes.cu-barra--fija.esta-oculta{
	transform: translateY(calc(-100% - 32px));
	opacity: 0;
	pointer-events: none;
}

.cu-tema{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;

	background: rgba(31, 31, 31, .34);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	border: .8px solid #333;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .15s var(--cu-salida);
}
.cu-tema:hover{ background: rgba(31, 31, 31, .62); }
.cu-tema:active{ transform: scale(.94); }
.cu-tema:focus-visible{
	outline: 2px solid var(--cu-amarillo);
	outline-offset: 3px;
}
.cu-tema svg{ width: 17px; height: 17px; display: block; }
.cu-tema .cu-icono-tema{ transition: transform .45s var(--cu-resorte); }
[data-tema="oscuro"] .cu-tema .cu-icono-tema{ transform: rotate(180deg); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	.cu-tema{ background: rgba(20, 20, 22, .92); }
}

/* Hablemos, ya fuera de la barra. Antes heredaba el cristal de la pildora;
   ahora se lo pone el mismo. */
.cu-flotantes .afb{
	flex: 0 0 auto;
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
}


/* Entre 768 y 1000 px la barra se estira lo suficiente para montarse sobre
   estos botones. Ahi Hablemos se queda solo con su flecha: sigue pulsable y
   deja de estorbar. */
@media (max-width: 1100px){
	.cu-flotantes .afb{ --afb-pad: .55rem; }
	.cu-flotantes .afb__label,
	.cu-flotantes .afb__ghost{ display: none; }

	/* Y la barra se aprieta un punto para dejarles sitio */
	.nav-links{ gap: 17px; }
	.nav-pill{ padding: 12px 18px; }
}

@media (max-width: 900px){
	.cu-flotantes{ top: 18px; right: 14px; gap: 8px; }
	.cu-tema{ width: 34px; height: 34px; }
	.cu-tema svg{ width: 15px; height: 15px; }
}

/* En movil la barra ya trae hamburguesa, y Hablemos vive en el desplegable:
   el grupo baja a la esquina inferior y se queda solo con el tema. */
@media (max-width: 560px){
	.cu-flotantes{ top: auto; bottom: 18px; right: 14px; }
	.cu-flotantes .afb{ display: none; }

	/* Anclado abajo, esconderlo hacia arriba lo metería en el contenido */
	.cu-flotantes,
	.cu-flotantes.esta-oculta,
	.cu-flotantes.visible.esta-oculta,
	.cu-flotantes.cu-barra--fija.esta-oculta{
		transform: translateY(calc(100% + 32px));
	}
	.cu-flotantes.visible,
	.cu-flotantes.cu-barra--fija{ transform: translateY(0); }
}


/* ===========================================================================
   25. Secciones del home sin cajas
   style.min.css le pone header-bg.jpg de fondo a TODOS los <header>, y aqui
   se usa esa etiqueta por semantica para los titulos de seccion. Se anula.
   =========================================================================== */
/* header-bg.jpg ya no existe, asi que ningun <header> debe pedirla: si no,
   cada pagina se lleva un 404 invisible por cada cabecera. */
header{ background-image: none; }

.cu-seccion header,
.cu-seccion__cabeza,
.cu-nosotros header,
.cu-hablemos header{
	background-image: none;
	background-color: transparent;
	min-height: 0;
	padding: 0;
}

/* Nosotros va a dos columnas: el titulo se alinea con el texto de al lado.
   style.min.css centra TODOS los <header>, y ahi se veia descuadrado. */
@media (min-width: 981px){
	.cu-nosotros header{ text-align: left; }
}

/* Nosotros: las cifras tampoco llevan caja */
.cu-dato{
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.cu-datos{
	gap: clamp(24px, 4vw, 44px);
	margin-top: 38px;
}
.cu-dato b{ color: var(--cu-tinta); }
.cu-nosotros__texto p{ color: var(--cu-tinta); }


/* ===========================================================================
   26. Ficha de propiedad
   =========================================================================== */

/* --- Cabeza: tipo, titulo, lugar y precio. Va debajo de las fotos --- */
.cu-ficha__cabeza{
	max-width: 900px;
	margin: 30px 0 28px;
}
.cu-ficha__titulo{
	margin: 0;
	font-family: var(--cu-display-fuente);
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--cu-tinta);
}
.cu-ficha__nombre{
	margin: 10px 0 0;
	font-size: 1.0625rem;
	color: var(--cu-tinta-suave);
}
.cu-ficha__lugar{
	margin: 12px 0 0;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}
.cu-ficha__precio{
	margin: 16px 0 0;
	font-family: var(--cu-display-fuente);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta);
}

/* --- Galeria: lo primero de la ficha --- */
.cu-galeria{ margin: 16px 0 0; }

.cu-galeria__marco{
	position: relative;
	overflow: hidden;
	background: var(--cu-panel);
	border-radius: var(--cu-radio-lg);
	aspect-ratio: 16 / 9;
}
/* Respaldo para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
	.cu-galeria__marco{ height: clamp(240px, 46vw, 560px); }
}

/* La foto se ve entera. Casi dos de cada tres fotos son verticales, y con
   object-fit: cover el marco apaisado les cortaba mas de la mitad del alto:
   parecia que faltaban partes. Detras va la misma foto, ampliada y
   desenfocada, para que los lados no queden vacios. */
.cu-galeria__fondo{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(26px) brightness(.6);
	transform: scale(1.15);
	pointer-events: none;
}
.cu-galeria__foto{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* En el celular el marco es mas alto (4:3): una foto vertical, que es lo que
   mas se sube, se ve bastante mas grande */
@media (max-width: 560px){
	.cu-galeria__marco{ aspect-ratio: 4 / 3; }
}

.cu-galeria__flecha{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;

	background: rgba(18, 18, 20, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .15s var(--cu-salida);
}
.cu-galeria__flecha:hover{ background: rgba(18, 18, 20, .8); }
.cu-galeria__flecha:active{ transform: translateY(-50%) scale(.92); }
.cu-galeria__flecha:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-galeria__flecha svg{ width: 20px; height: 20px; }
.cu-galeria__flecha--ant{ left: 14px; }
.cu-galeria__flecha--sig{ right: 14px; }

.cu-galeria__cuenta{
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 5px 11px;
	background: rgba(18, 18, 20, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	font-size: var(--cu-etiqueta);
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.cu-galeria__cuenta b{ font-weight: 700; }

/* Tira de miniaturas: en filas, no en una sola linea que se desplaza.
   De salida se ven dos filas; si hay mas, el boton las descubre. */
.cu-galeria__tira{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
	margin-top: 8px;
	overflow: hidden;
	max-height: 148px;            /* dos filas de 70 px mas el hueco */
	transition: max-height .4s var(--cu-salida);
}
/* Abierta, sin tope: con uno fijo (eran 1400 px) en el celular solo cabian
   unas 90 miniaturas y las demas quedaban recortadas */
.cu-galeria__tira.esta-abierta{ max-height: none; }

.cu-galeria__mini{
	width: 100%;
	height: 70px;
	padding: 0;
	overflow: hidden;
	background: var(--cu-panel);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease, box-shadow .2s ease;
}
.cu-galeria__mini img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cu-galeria__mini:hover{ opacity: .85; }
.cu-galeria__mini.es-activa{
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--cu-amarillo);
}
.cu-galeria__mini:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }

@media (max-width: 560px){
	.cu-galeria__tira{
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
		max-height: 112px;        /* dos filas de 52 px */
	}
	.cu-galeria__mini{ width: 100%; height: 52px; }
	.cu-galeria__flecha{ width: 38px; height: 38px; }
	.cu-galeria__flecha--ant{ left: 8px; }
	.cu-galeria__flecha--sig{ right: 8px; }
}

/* --- Tira de datos con iconos --- */
.cu-ficha__datos{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}
.cu-dato-ficha{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
}
.cu-dato-ficha svg{
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	color: var(--cu-amarillo-hondo);
}
.cu-dato-ficha b{
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta);
}
.cu-dato-ficha span{
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}

/* --- Lista de caracteristicas extra --- */
.cu-ficha__lista{
	margin: 0;
	padding: 0;
}
.cu-ficha__fila{
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px solid var(--cu-linea-suave);
}
.cu-ficha__fila:last-child{ border-bottom: 0; }
.cu-ficha__fila dt{
	font-weight: 500;
	color: var(--cu-tinta-suave);
}
.cu-ficha__fila dd{
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta);
}


/* --- Los tres botones de abajo, iguales --- */
.cu-ficha__acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}
.cu-ficha__acciones .cu-boton{
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.cu-ficha__acciones svg{ width: 18px; height: 18px; }

@media (max-width: 560px){
	.cu-ficha__acciones{ flex-direction: column; align-items: stretch; }
	.cu-ficha__acciones .cu-boton{ justify-content: center; }
}

/* La ficha venia de Bootstrap: style.min.css le pone a TODO <header> una
   imagen de fondo, alto minimo y texto centrado. Aqui no va nada de eso. */
.print header, #element-to-print header, .cu-ficha__cabeza{
	background-image: none;
	background-color: transparent;
	min-height: 0;
	padding: 0;
	text-align: left;
}


/* ===========================================================================
   27. Redondeo de las tarjetas
   style.min.css lo trae a 1.5rem (24 px) en dos sitios: la tarjeta y la
   franja amarilla de arriba. Aqui se baja, y de un solo lugar.
   =========================================================================== */
:root{ --cu-radio-tarjeta: 14px; }

.sale-rent.rounded{
	border-radius: var(--cu-radio-tarjeta) !important;
}
.sale-rent .sale-title{
	border-radius: var(--cu-radio-tarjeta) var(--cu-radio-tarjeta) 0 0 !important;
}


/* ===========================================================================
   28. Manager

   Misma pildora y mismo ambiente que el sitio publico. Lo de aqui es una
   pantalla de trabajo: sin pie, sin scroll lateral y con la tabla legible.
   =========================================================================== */

/* --- La barra ---
   Todos los botones iguales: icono y texto, sin marco, como "Ver sitio" y
   "Cerrar sesion". Antes habia tres diseños a la vez: sellos amarillos,
   pildoras con marco y el circulo del ambiente. */
.cu-barra--manager .nav-marca{ display: flex; align-items: center; }
.cu-barra--manager .nav-links,
.cu-barra--manager .nav-acciones{ gap: 4px; }

.cu-accion{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 12px;
	background: transparent;
	border: 0;
	border-radius: var(--cu-pildora);
	font-size: .8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .86);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.cu-accion:hover,
.cu-accion:focus{
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
}
.cu-accion:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-accion svg{ width: 15px; height: 15px; flex: 0 0 auto; }

/* La pantalla en la que se esta, en amarillo, como en el menu del sitio */
.cu-accion.esta-activo,
.cu-accion.esta-activo:hover{ color: var(--cu-amarillo); }

/* El del ambiente solo lleva icono: redondo, del mismo alto que los demas */
.cu-accion--icono{ width: 37px; height: 37px; padding: 0; }
.cu-tema-manager .cu-icono-tema{ transition: transform .45s var(--cu-resorte); }
[data-tema="oscuro"] .cu-tema-manager .cu-icono-tema{ transform: rotate(180deg); }

/* Donde ya no caben los textos, "Manager" y "Cerrar sesion" se quedan solo
   con su icono. Los demas no tienen icono: conservan el texto. Con todo
   escrito la barra pide una pantalla de 926 px; se deja algo de holgura por
   si la fuente tarda en cargar. */
@media (max-width: 959px){
	.cu-accion--con-icono span{ display: none; }
	.cu-accion--con-icono{ width: 37px; height: 37px; padding: 0; }   /* como el del ambiente */
	.cu-barra--manager .nav-fila{ gap: 14px; }   /* a 768 px no cabia por unos pixeles */
}

@media (prefers-reduced-motion: reduce){
	.cu-accion,
	.cu-tema-manager .cu-icono-tema{ transition: none; }
}


/* --- El lienzo --- */
.cu-manager{
	max-width: 1360px;
	margin: 0 auto;
	padding: 18px var(--cu-margen) 80px;
}
.cu-manager__cabeza{
	background-image: none;
	background-color: transparent;
	min-height: 0;
	padding: 0;
	text-align: center;
	margin-bottom: 20px;
}
.cu-manager__cabeza .cu-titulo{ font-size: clamp(1.6rem, 3vw, 2.25rem); }

.cu-manager__barra{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}
.cu-manager__barra .cu-boton{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cu-manager__barra svg{ width: 16px; height: 16px; }

/* Dentro del manager las secciones de Bootstrap no necesitan su relleno */
.cu-manager section{ padding: 0; }
.cu-manager .container{ width: auto; max-width: none; padding: 0; }


/* --- La tabla: ancha completa, sin barra lateral --- */
.cu-manager .dataTables_wrapper{ overflow: visible; }
.cu-manager .dataTables_scrollBody{ overflow: visible !important; }

.cu-manager #table{
	width: 100% !important;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	overflow: hidden;
}
.cu-manager #table th,
.cu-manager #table td{
	/* Compacta: con la columna de la fecha de alta ya son nueve */
	padding: 10px 10px;
	border: 0;
	border-bottom: 1px solid var(--cu-linea-suave);
	vertical-align: middle;
	font-size: .9375rem;
	color: var(--cu-tinta);
}
.cu-manager #table thead th{
	background: transparent;
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
	white-space: nowrap;
}
.cu-manager #table tbody tr:last-child td{ border-bottom: 0; }

/* La flecha de ordenar de DataTables va en la esquina derecha de cada
   cabecera: se le deja su lugar. Si no, en las columnas angostas se encimaba
   sobre el texto ("Operación", "#"). */
.cu-manager #table thead th.sorting,
.cu-manager #table thead th.sorting_asc,
.cu-manager #table thead th.sorting_desc{ padding-right: 26px; }
.cu-manager #table thead th.sorting:after,
.cu-manager #table thead th.sorting_asc:after,
.cu-manager #table thead th.sorting_desc:after{
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}
.cu-manager #table tbody tr:hover td{ background: var(--cu-panel-alto); }
.cu-manager #table.table-striped>tbody>tr:nth-of-type(odd){ background: transparent; }

/* El nombre es lo unico que puede ser largo: se corta ahi, no en la fila */
.cu-col-nombre{
	max-width: 340px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cu-col-precio{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-col-acciones{ width: 1%; white-space: nowrap; text-align: right; }

/* Columnas de dato corto (#, codigo, OP, tipo, alta, estado): tan angostas
   como su contenido y sin partirse en dos renglones. El espacio que sobra
   se lo queda el nombre. */
.cu-manager #table .cu-col-corta{ width: 1%; white-space: nowrap; }
.cu-col-fecha{ font-variant-numeric: tabular-nums; color: var(--cu-tinta-suave); }

/* --- Sello de publicado --- */
.cu-sello{
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--cu-pildora);
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	white-space: nowrap;
}
/* En claro, ambar hondo como el codigo: el amarillo no se leia sobre el fondo */
.cu-sello--si{ background: rgba(255, 210, 0, .24); color: #7A5C00; }
[data-tema="oscuro"] .cu-sello--si{ background: rgba(255, 210, 0, .16); color: var(--cu-amarillo-hondo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-sello--si{ background: rgba(255, 210, 0, .16); color: var(--cu-amarillo-hondo); }
}
.cu-sello--no{ background: rgba(128, 128, 136, .18); color: var(--cu-tinta-tenue); }

/* --- Botones de accion de cada fila --- */
.cu-acciones-fila{
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.cu-icono-accion{
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--cu-linea-suave);
	border-radius: 9px;
	color: var(--cu-tinta-suave);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cu-icono-accion:hover,
.cu-icono-accion:focus{
	background: var(--cu-panel-alto);
	border-color: var(--cu-linea);
	color: var(--cu-tinta);
	text-decoration: none;
}
.cu-icono-accion:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-icono-accion svg{ width: 17px; height: 17px; }

.cu-icono-accion--borrar:hover,
.cu-icono-accion--borrar:focus{
	background: rgba(220, 60, 50, .14);
	border-color: rgba(220, 60, 50, .4);
	color: #E5544A;
}


/* --- Lo que DataTables pinta alrededor --- */
.cu-manager .dataTables_filter,
.cu-manager .dataTables_length{ margin-bottom: 14px; }

.cu-manager .dataTables_filter label,
.cu-manager .dataTables_length label,
.cu-manager .dataTables_info{
	font-size: var(--cu-menudo);
	font-weight: 500;
	color: var(--cu-tinta-tenue);
}
.cu-manager .dataTables_filter input,
.cu-manager .dataTables_length select{
	margin-left: 8px;
	padding: 8px 12px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 9px;
	color: var(--cu-tinta);
	box-shadow: none;
	height: auto;
}
.cu-manager .dataTables_filter input:focus,
.cu-manager .dataTables_length select:focus{
	outline: 2px solid var(--cu-amarillo);
	outline-offset: 1px;
	border-color: transparent;
}

.cu-manager .pagination{ margin: 18px 0 0; }
.cu-manager .pagination>li>a,
.cu-manager .pagination>li>span{
	background: transparent;
	border: 1px solid var(--cu-linea-suave);
	border-radius: 8px;
	margin-left: 5px;
	padding: 7px 12px;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-suave) !important;
}
.cu-manager .pagination>li>a:hover{
	background: var(--cu-panel-alto) !important;
	color: var(--cu-tinta) !important;
}
.cu-manager .pagination>.active>a,
.cu-manager .pagination>.active>span,
.cu-manager .pagination>.active>a:hover{
	background: var(--cu-amarillo) !important;
	border-color: var(--cu-amarillo) !important;
	color: #141416 !important;
}
.cu-manager .pagination>.disabled>a,
.cu-manager .pagination>.disabled>span{ opacity: .45; }

/* En pantallas chicas la tabla si necesita deslizarse, pero dentro de su
   propia caja: el cuerpo de la pagina nunca se mueve de lado. */
@media (max-width: 860px){
	.cu-manager .box-body{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cu-manager #table{ min-width: 700px; }
	.cu-col-nombre{ max-width: 200px; }
}

/* --- Formularios del manager (alta, editar, fotos, videos) --- */
.cu-manager .form-control{
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 9px;
	color: var(--cu-tinta);
	box-shadow: none;
	height: auto;
	padding: 9px 12px;
}
.cu-manager .form-control:focus{
	outline: 2px solid var(--cu-amarillo);
	outline-offset: 1px;
	border-color: transparent;
	box-shadow: none;
}
.cu-manager label{ font-weight: 500; color: var(--cu-tinta-suave); }
.cu-manager .panel,
.cu-manager .panel-default{
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	box-shadow: none;
}
.cu-manager .panel-heading{
	background: transparent;
	border-bottom: 1px solid var(--cu-linea-suave);
}
.cu-manager .panel-title a{ color: var(--cu-tinta); }
.cu-manager hr{ border-color: var(--cu-linea-suave); }


/* ===========================================================================
   29. Configuración del manager: los estados
   =========================================================================== */
.cu-config{ margin-bottom: 14px; }

.cu-config__caja{
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	overflow: hidden;
}

.cu-config__titulo{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--cu-tinta);
	user-select: none;
}
.cu-config__titulo::-webkit-details-marker{ display: none; }
.cu-config__titulo:hover{ background: var(--cu-panel-alto); }
.cu-config__titulo svg{
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--cu-tinta-tenue);
	transition: transform .25s var(--cu-salida);
}
.cu-config__caja[open] .cu-config__titulo svg{ transform: rotate(180deg); }

.cu-config__cuerpo{
	padding: 4px 18px 20px;
	border-top: 1px solid var(--cu-linea-suave);
}
.cu-config__nota{
	max-width: 62ch;
	margin: 14px 0 18px;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}

/* --- Una fila por estado --- */
.cu-estados{ display: grid; gap: 8px; }

.cu-estado{
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 10px;
}

/* El selector de color: un cuadro, no el control gris del navegador */
.cu-estado__color{
	display: block;
	width: 38px;
	height: 38px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cu-linea-suave);
	border-radius: 9px;
	cursor: pointer;
}
.cu-estado__color input[type="color"]{
	display: block;
	width: 150%;
	height: 150%;
	margin: -25%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.cu-estado__color input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; }
.cu-estado__color input[type="color"]::-webkit-color-swatch{ border: 0; }
.cu-estado__color input[type="color"]::-moz-color-swatch{ border: 0; }

.cu-estado__texto{ min-width: 0; }

.cu-estado__uso{
	font-size: var(--cu-etiqueta);
	color: var(--cu-tinta-tenue);
	white-space: nowrap;
}

.cu-config__acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.cu-config__acciones .cu-boton{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cu-config__acciones svg{ width: 16px; height: 16px; }

.cu-estados__vacio{
	margin: 4px 0 0;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}

@media (max-width: 640px){
	.cu-estado{
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "color texto quitar" ". uso .";
	}
	.cu-estado__color{ grid-area: color; }
	.cu-estado__texto{ grid-area: texto; }
	.cu-estado__quitar{ grid-area: quitar; }
	.cu-estado__uso{ grid-area: uso; }
}


/* ===========================================================================
   30. Formularios del manager (alta y editar)

   Traen cabeceras de seccion con .bg-gray, un gris claro fijo que en ambiente
   oscuro se ve como una tira blanca. Aqui pasan a ser etiquetas de seccion.
   =========================================================================== */
.cu-manager .bg-gray{
	background: transparent;
	margin: 34px 0 0;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--cu-linea);
}
.cu-manager .bg-gray .row{ margin: 0; }

/* Mas grandes y en negro: en ambiente claro el amarillo no se leia sobre el
   fondo. En el oscuro se quedan amarillos, que ahi si se leen. */
.cu-manager .bg-gray h4{
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cu-tinta);
	text-align: left;
}
[data-tema="oscuro"] .cu-manager .bg-gray h4{ color: var(--cu-amarillo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-manager .bg-gray h4{ color: var(--cu-amarillo); }
}

/* El titulo mide lo mismo que los campos de abajo (col-md-8 col-md-offset-2)
   y no todo el ancho: queda encima del formulario en vez de suelto en la
   orilla. Las cuentas salen de la rejilla de Bootstrap: 2/12 de margen a cada
   lado, sobre una fila 30 px mas ancha que la caja. */
@media (min-width: 992px){
	.cu-manager .bg-gray{
		margin-left: calc(16.6667% + 5px);
		margin-right: calc(16.6667% + 5px);
	}
	/* En Fotos y videos el contenido va a todo lo ancho: ahi el titulo tambien */
	.cu-manager .bg-gray.cu-banda--ancha{ margin-left: 0; margin-right: 0; }
}

/* Y pegado a sus campos: el .margin-top de la plantilla dejaba 48 px */
.cu-manager .bg-gray + .row.margin-top{ margin-top: 18px; }

/* style.min.css pinta .text-orange de dorado apagado (#9E8004). Dentro del
   manager manda el amarillo de la marca en el ambiente oscuro. En el claro,
   un ambar hondo: el amarillo sobre fondo claro no se lee (asteriscos de los
   campos obligatorios). */
.cu-manager .text-orange,
.cu-manager .text-primary,
.cu-manager .table-link{ color: #7A5C00 !important; }
[data-tema="oscuro"] .cu-manager .text-orange,
[data-tema="oscuro"] .cu-manager .text-primary,
[data-tema="oscuro"] .cu-manager .table-link{ color: var(--cu-amarillo) !important; }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-manager .text-orange,
	:root:not([data-tema="claro"]) .cu-manager .text-primary,
	:root:not([data-tema="claro"]) .cu-manager .table-link{ color: var(--cu-amarillo) !important; }
}
.cu-manager .btn-add{ background: var(--cu-amarillo); border-color: var(--cu-amarillo); }
.cu-manager .bg-white{ background: transparent; padding: 0; }
.cu-manager .info-inicio{ background: transparent; }

/* Los botones de Bootstrap que quedan sueltos, con el mismo aire del sitio */
.cu-manager .btn-contacto,
.cu-manager .btn-add,
.cu-manager .btn-orange,
.cu-manager input[type="submit"]{
	background: var(--cu-amarillo);
	border: 1px solid var(--cu-amarillo);
	border-radius: var(--cu-pildora);
	padding: 11px 24px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #141416;
	transition: background-color .2s ease, transform .15s var(--cu-salida);
}
/* Al pasar el mouse se invierten a negro con letra amarilla, como el boton
   Hablemos del sitio. Antes pasaban a un amarillo apenas mas vivo y el cambio
   no se notaba. */
.cu-manager .btn-contacto:hover,
.cu-manager .btn-add:hover,
.cu-manager .btn-orange:hover,
.cu-manager input[type="submit"]:hover,
.cu-manager .btn-contacto:focus-visible,
.cu-manager input[type="submit"]:focus-visible,
.cu-manager .cu-boton--solido:hover,
.cu-manager .cu-boton--solido:focus-visible{
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: var(--cu-amarillo);
	box-shadow: none;
}
/* En el ambiente oscuro el negro casi no se distingue del fondo: el borde
   amarillo mantiene la forma del boton */
[data-tema="oscuro"] .cu-manager .btn-contacto:hover,
[data-tema="oscuro"] .cu-manager .btn-add:hover,
[data-tema="oscuro"] .cu-manager .btn-orange:hover,
[data-tema="oscuro"] .cu-manager input[type="submit"]:hover,
[data-tema="oscuro"] .cu-manager .cu-boton--solido:hover{ border-color: var(--cu-amarillo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-manager .btn-contacto:hover,
	:root:not([data-tema="claro"]) .cu-manager .btn-add:hover,
	:root:not([data-tema="claro"]) .cu-manager .btn-orange:hover,
	:root:not([data-tema="claro"]) .cu-manager input[type="submit"]:hover,
	:root:not([data-tema="claro"]) .cu-manager .cu-boton--solido:hover{ border-color: var(--cu-amarillo); }
}
.cu-manager .btn-contacto:active,
.cu-manager input[type="submit"]:active{ transform: scale(.98); }

.cu-manager .table-link{ color: var(--cu-amarillo-hondo); }
.cu-manager .link-manager{ color: var(--cu-tinta-suave); }


/* ===========================================================================
   31. Globo de ayuda de los iconos

   El atributo title del navegador tarda cerca de un segundo en aparecer y no
   se puede apurar. Este sale al instante.
   =========================================================================== */
.cu-tip{ position: relative; }

.cu-tip::after{
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;

	padding: 5px 9px;
	background: #141416;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;

	opacity: 0;
	visibility: hidden;
}
.cu-tip::before{
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	border: 5px solid transparent;
	border-top-color: #141416;
	pointer-events: none;

	opacity: 0;
	visibility: hidden;
}
.cu-tip:hover::after,
.cu-tip:hover::before,
.cu-tip:focus-visible::after,
.cu-tip:focus-visible::before{
	opacity: 1;
	visibility: visible;
}

[data-tema="claro"] .cu-tip::after{ background: #2A2A2E; }
[data-tema="claro"] .cu-tip::before{ border-top-color: #2A2A2E; }

/* En la primera fila de la tabla el globo se saldria por arriba: baja. Si
   es la unica fila (una busqueda con un solo resultado) abajo ya no hay
   tabla y la tabla recorta: ahi se queda arriba, sobre las cabeceras. */
.cu-manager #table tbody tr:first-child:not(:last-child) .cu-tip::after{
	bottom: auto;
	top: calc(100% + 8px);
}
.cu-manager #table tbody tr:first-child:not(:last-child) .cu-tip::before{
	bottom: auto;
	top: calc(100% + 3px);
	border-top-color: transparent;
	border-bottom-color: #141416;
}
[data-tema="claro"] .cu-manager #table tbody tr:first-child:not(:last-child) .cu-tip::before{
	border-bottom-color: #2A2A2E;
}

/* Botones pegados a la orilla derecha de una caja que recorta lo que se
   sale (la tabla, las tarjetas de fotos y videos): el globo crece hacia la
   izquierda en vez de centrarse. Centrado se cortaba ("Eliminar fo"). */
.cu-acciones-fila .cu-tip:last-child::after,
.cu-foto__botones .cu-tip::after{
	left: auto;
	right: 0;
	transform: none;
}

@media (prefers-reduced-motion: reduce){
	.cu-tip::after, .cu-tip::before{ transition: none; }
}


/* ===========================================================================
   32. Código de propiedad
   =========================================================================== */
/* En claro va en ambar hondo: el amarillo sobre el fondo concreto no se leia */
.cu-codigo{
	display: inline-block;
	padding: 3px 9px;
	background: rgba(255, 210, 0, .24);
	border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: #7A5C00;
	white-space: nowrap;
}
[data-tema="oscuro"] .cu-codigo:not(.cu-codigo--pendiente){ background: rgba(255, 210, 0, .14); color: var(--cu-amarillo-hondo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-codigo:not(.cu-codigo--pendiente){ background: rgba(255, 210, 0, .14); color: var(--cu-amarillo-hondo); }
}

.cu-manager__id{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;   /* bajo el titulo, que va centrado */
	gap: 8px 10px;
	margin-top: 12px;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
	text-align: center;
}

/* "Regresar" de Editar, centrado tambien: suelto a la izquierda quedaba
   desfasado de todo lo demas */
.cu-manager > .cu-volver{
	display: flex;
	width: max-content;
	margin: 0 auto;
}


/* ===========================================================================
   33. Aviso de borrado
   =========================================================================== */
.cu-boton--peligro{
	background: #D8382C;
	border: 1px solid #D8382C;
	color: #fff;
}
.cu-boton--peligro:hover,
.cu-boton--peligro:focus{
	background: #C22E23;
	border-color: #C22E23;
	color: #fff;
}

.cu-aviso{
	padding: 30px 30px 26px;
	background: var(--cu-panel) !important;
	border: 1px solid var(--cu-linea-suave) !important;
	border-radius: var(--cu-radio-lg) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .38) !important;
	text-align: center;
	color: var(--cu-tinta);
}

.cu-aviso__icono{
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	background: rgba(216, 56, 44, .14);
	border-radius: 50%;
	color: #E5544A;
}
.cu-aviso__icono svg{ width: 26px; height: 26px; }

.cu-aviso__titulo{
	margin: 0 0 6px;
	font-family: var(--cu-display-fuente);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--cu-tinta);
}
.cu-aviso__nombre{
	margin: 0 0 16px;
	font-size: var(--cu-menudo);
	font-weight: 600;
	color: var(--cu-amarillo-hondo);
}
.cu-aviso__nombre:empty{ display: none; }

.cu-aviso__texto{
	max-width: 44ch;
	margin: 0 auto;
	font-size: var(--cu-menudo);
	line-height: 1.65;
	color: var(--cu-tinta-suave);
}
.cu-aviso__texto strong{ color: var(--cu-tinta); }

.cu-aviso__acciones{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
@media (max-width: 480px){
	.cu-aviso__acciones{ flex-direction: column-reverse; }
	.cu-aviso__acciones .cu-boton{ width: 100%; }
}


/* ===========================================================================
   34. Campo obligatorio que quedo vacio
   =========================================================================== */
.cu-manager .form-control.cu-falta{
	border-color: #D8382C;
	box-shadow: 0 0 0 3px rgba(216, 56, 44, .16);
}
.cu-manager .form-control.cu-falta:focus{
	outline-color: #D8382C;
}


/* ===========================================================================
   35. Subir imágenes: zona de arrastre y cola de archivos
   =========================================================================== */
.cu-subida{ margin-bottom: 26px; }

.cu-zona{
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 26px 24px;
	background: var(--cu-panel);
	border: 1.5px dashed var(--cu-linea);
	border-radius: var(--cu-radio-lg);
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, transform .15s var(--cu-salida);
}
.cu-zona:hover{ border-color: var(--cu-tinta-tenue); }
.cu-zona:active{ transform: scale(.995); }
.cu-zona:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 3px; }
.cu-zona.esta-encima{
	border-color: var(--cu-amarillo);
	border-style: solid;
	background: var(--cu-panel-alto);
}

.cu-zona__icono{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	background: var(--cu-panel-alto);
	border-radius: 16px;
	color: var(--cu-tinta);
	transition: transform .2s var(--cu-salida);
}
.cu-zona.esta-encima .cu-zona__icono{
	transform: translateY(-3px);
	background: rgba(255, 210, 0, .16);
	color: var(--cu-amarillo-hondo);
}
.cu-zona__icono svg{ width: 24px; height: 24px; }

.cu-zona__texto{ flex: 1 1 auto; min-width: 0; }
.cu-zona__titulo{
	display: block;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--cu-tinta);
}
.cu-zona__nota{
	display: block;
	margin-top: 3px;
	font-size: var(--cu-etiqueta);
	color: var(--cu-tinta-tenue);
}
.cu-zona__boton{
	flex: 0 0 auto;
	padding: 9px 16px;
	background: transparent;
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-pildora);
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	color: var(--cu-tinta);
	transition: background-color .15s ease;
}
.cu-zona:hover .cu-zona__boton{ background: var(--cu-panel-alto); }

@media (max-width: 640px){
	.cu-zona{ flex-direction: column; text-align: center; gap: 12px; }
	.cu-zona__texto{ text-align: center; }
}

/* --- La cola --- */
.cu-cola{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.cu-cola[hidden]{ display: none; }

.cu-archivo{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
}
.cu-archivo__icono{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var(--cu-panel-alto);
	border-radius: 11px;
	color: var(--cu-tinta-tenue);
}
.cu-archivo__icono svg{ width: 19px; height: 19px; }

.cu-archivo__cuerpo{ flex: 1 1 auto; min-width: 0; }
.cu-archivo__fila{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.cu-archivo__nombre{
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .875rem;
	font-weight: 500;
	color: var(--cu-tinta);
}
.cu-archivo__dato{
	display: block;
	margin-top: 2px;
	font-size: var(--cu-etiqueta);
	color: var(--cu-tinta-tenue);
}

.cu-archivo__botones{
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}
.cu-archivo__estado{
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--cu-tinta-tenue);
}
.cu-archivo__estado svg{ width: 16px; height: 16px; }
.cu-archivo[data-estado="listo"] .cu-archivo__estado{ color: #24A46D; }
.cu-archivo[data-estado="error"] .cu-archivo__estado{ color: #E5544A; }

.cu-archivo__accion{
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--cu-tinta-tenue);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.cu-archivo__accion:hover{ background: var(--cu-panel-alto); color: var(--cu-tinta); }
.cu-archivo__accion:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 1px; }
.cu-archivo__accion svg{ width: 14px; height: 14px; }

.cu-archivo__barra{
	display: block;
	height: 5px;
	margin-top: 9px;
	overflow: hidden;
	background: var(--cu-panel-alto);
	border-radius: 999px;
}
.cu-archivo__barra[hidden]{ display: none; }
.cu-archivo__relleno{
	display: block;
	width: 0;
	height: 100%;
	background: var(--cu-tinta);
	border-radius: 999px;
	transition: width .25s var(--cu-salida);
}
.cu-archivo[data-estado="listo"] .cu-archivo__relleno{ background: #24A46D; }

.cu-gira{ display: grid; place-items: center; animation: cu-vuelta 1s linear infinite; }
@keyframes cu-vuelta{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
	.cu-gira{ animation: none; }
	.cu-archivo__relleno{ transition: none; }
}


/* ===========================================================================
   36. Galería del manager: ordenar arrastrando y elegir portada
   =========================================================================== */
.cu-oculto{
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cu-galeria-admin__ayuda{
	max-width: 62ch;
	margin: 4px 0 14px;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}

.cu-galeria-caja{ margin-bottom: 30px; }
.cu-galeria-caja.esta-guardando{ opacity: .7; }

.cu-galeria-admin{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
}
.cu-galeria-admin__vacio{
	margin: 0;
	padding: 22px;
	background: var(--cu-panel);
	border: 1px dashed var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
	text-align: center;
}

.cu-foto{
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	cursor: grab;
	transition: border-color .18s ease, transform .18s var(--cu-salida), opacity .18s ease;
}
.cu-foto:hover{ border-color: var(--cu-linea); }
.cu-foto.se-arrastra{ opacity: .45; cursor: grabbing; }
.cu-foto.se-va{ opacity: .35; pointer-events: none; }

.cu-foto img{
	display: block;
	width: 100%;
	height: 118px;
	object-fit: cover;
	user-select: none;
}

.cu-foto__mover{
	position: absolute;
	top: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: rgba(18, 18, 20, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-radius: 7px;
	color: #fff;
	opacity: 0;
	transition: opacity .18s ease;
}
.cu-foto:hover .cu-foto__mover{ opacity: 1; }
.cu-foto__mover svg{ width: 16px; height: 16px; }

.cu-foto__pie{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 7px 8px 7px 10px;
	min-height: 40px;
}

.cu-foto__sello{
	display: none;
	padding: 3px 8px;
	background: var(--cu-amarillo);
	border-radius: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #141416;
}
.cu-foto.es-portada .cu-foto__sello{ display: inline-block; }
.cu-foto.es-portada{ border-color: var(--cu-amarillo); }

.cu-foto__botones{ display: flex; gap: 4px; margin-left: auto; }

.cu-foto__accion{
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--cu-linea-suave);
	border-radius: 8px;
	color: var(--cu-tinta-tenue);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cu-foto__accion:hover{
	background: var(--cu-panel-alto);
	border-color: var(--cu-linea);
	color: var(--cu-tinta);
}
.cu-foto__accion:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-foto__accion svg{ width: 15px; height: 15px; }

.cu-foto__portada:hover{ color: var(--cu-amarillo-hondo); border-color: var(--cu-amarillo); }
.cu-foto.es-portada .cu-foto__portada{ color: var(--cu-amarillo-hondo); }

.cu-foto__borrar:hover,
.cu-foto__borrar-amenidad:hover,
.cu-foto__borrar-video:hover{
	background: rgba(220, 60, 50, .14);
	border-color: rgba(220, 60, 50, .4);
	color: #E5544A;
}

.cu-codigo--pendiente{
	background: rgba(128, 128, 136, .16);
	color: var(--cu-tinta-tenue);
}


/* ===========================================================================
   37. Código de la propiedad en la ficha pública
   =========================================================================== */
.cu-ficha__codigo{
	margin: 10px 0 0;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}
.cu-ficha__codigo b{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--cu-tinta);
}


/* ===========================================================================
   38. Páginas legales: aviso de privacidad y protección de datos

   Texto justificado y una columna más ancha. Los párrafos traían <br><br>
   al final, que era lo que estiraba la página: ahora el aire lo pone el
   margen y se gana bastante alto.
   =========================================================================== */
.cu-legal{
	max-width: 1020px;
	margin: 0 auto;
	padding: 6px 0 34px;
}

.cu-legal__titulo{
	margin: 0 0 26px;
	font-family: var(--cu-display-fuente);
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--cu-tinta);
}

.cu-legal p{
	margin: 0 0 12px;
	font-size: .9375rem;
	line-height: 1.62;
	color: var(--cu-tinta-suave);

	text-align: justify;
	text-justify: inter-word;

	/* Con el texto justificado en español los huecos entre palabras se
	   disparan: la division silabica los cierra. */
	-webkit-hyphens: auto;
	hyphens: auto;
}
/* Los bloques son <section>, y style.min.css le pone 5em de relleno a toda
   <section>: eran 80 px de aire antes del primer titulo. */
.cu-legal__bloque{ padding: 0; }

/* Los dos bloques, separados por una raya */
.cu-legal__bloque + .cu-legal__bloque{
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--cu-linea-suave);
}
.cu-legal__bloque h2.cu-legal__titulo{
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	margin-bottom: 20px;
}

.cu-legal__fecha{
	margin: 30px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--cu-linea-suave);
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
	text-align: left;
}

/* En pantallas chicas justificar deja rios de espacios en blanco */
@media (max-width: 640px){
	.cu-legal p{ text-align: left; }
}


/* ===========================================================================
   39. Título que es una frase completa

   .cu-titulo esta pensado para dos o tres palabras en mayusculas. Cuando el
   titulo es una oracion entera hay que bajarle el cuerpo y respetar como
   viene escrita: "CONCRETO URBANO" en altas y el resto normal.
   =========================================================================== */
.cu-titulo--frase{
	font-size: clamp(1.375rem, 2.5vw, 2rem);
	line-height: 1.18;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
	max-width: 18ch;
}
@media (max-width: 980px){
	.cu-titulo--frase{ max-width: none; }
}


/* ===========================================================================
   40. Entrada bajo el título de una sección
   Mismo cuerpo que los párrafos de Nosotros, de donde vino este texto.
   =========================================================================== */
.cu-seccion__entrada{
	max-width: 66ch;
	margin: 20px auto 0;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--cu-tinta-suave);
	text-wrap: pretty;
}


/* ===========================================================================
   41. Pie más angosto y menos aire al cerrar Hablemos

   El pie se llevaba casi 290 px de alto en una pantalla de 800, y la sección
   de contacto cerraba con 85 px de relleno abajo antes de entrar al pie: dos
   huecos seguidos que no aportaban nada.
   =========================================================================== */
.cu-pie{
	padding: clamp(30px, 4vh, 48px) 0 18px;
}
.cu-pie__rejilla{
	gap: clamp(20px, 3vw, 42px);
}
/* El logo manda en el pie; el lema va a su derecha (seccion 20) */
.cu-pie__marca img{ height: 94px; }
.cu-pie__lema{ font-size: 11px; line-height: 1.6; }
.cu-pie__col{ gap: 8px; }
.cu-pie__titulo{ margin-bottom: 3px; }

.cu-pie__legal{
	margin-top: clamp(22px, 3vh, 34px);
	padding-top: 15px;
	gap: 8px 22px;
}

/* Contacto: el remate de abajo no necesita tanto aire, el pie ya separa */
.cu-hablemos .cu-seccion{
	padding-bottom: clamp(38px, 5vh, 62px);
}

/* La sección de contacto en su propia página, igual */
.cu-contacto{
	padding-bottom: clamp(38px, 5vh, 62px) !important;
}


/* ===========================================================================
   42. Ficha: menos aire arriba y el botón de la tira de miniaturas
   =========================================================================== */

/* style.min.css le da a toda <section> 5em de relleno; en la ficha, encima
   del hueco que ya deja la barra flotante, eran 181 px antes del "Regresar". */
.cu-ficha-seccion{
	padding-top: 22px;
}

.cu-galeria__mas{
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 9px 14px;
	background: transparent;
	border: 1px solid var(--cu-linea-suave);
	border-radius: 9px;
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cu-tinta-suave);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cu-galeria__mas:hover{
	background: var(--cu-panel);
	border-color: var(--cu-linea);
	color: var(--cu-tinta);
}
.cu-galeria__mas:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-galeria__mas[hidden]{ display: none; }

@media (prefers-reduced-motion: reduce){
	.cu-galeria__tira{ transition: none; }
}


/* ===========================================================================
   43. Venta y Renta: ver en fichas o en mapa
   =========================================================================== */
.cu-vista{
	display: inline-flex;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-pildora);
}

.cu-vista__boton{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: transparent;
	border: 0;
	border-radius: var(--cu-pildora);
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.cu-vista__boton:hover{ color: var(--cu-tinta); }
.cu-vista__boton:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-vista__boton svg{ width: 17px; height: 17px; }

.cu-vista__boton.es-activa{
	background: var(--cu-amarillo);
	color: #141416;
}

.cu-vista__cuenta{
	padding: 1px 7px;
	background: rgba(128, 128, 136, .22);
	border-radius: 999px;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}
.cu-vista__boton.es-activa .cu-vista__cuenta{ background: rgba(20, 20, 22, .16); }


/* --- El mapa --- */
.cu-mapa{ position: relative; }
.cu-mapa[hidden]{ display: none; }

.cu-mapa__lienzo{
	width: 100%;
	height: clamp(420px, 68vh, 760px);
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-lg);
	overflow: hidden;
}

.cu-mapa__aviso{
	max-width: 52ch;
	margin: 16px auto 0;
	font-size: var(--cu-menudo);
	line-height: 1.6;
	color: var(--cu-tinta-tenue);
	text-align: center;
}


/* --- El globo del precio --------------------------------------------------
   Va anclado por su punta: el ancla queda justo sobre la coordenada.
   ------------------------------------------------------------------------ */
.cu-globo{
	position: absolute;
	transform: translate(-50%, calc(-100% - 9px));
	z-index: 1;

	display: block;
	padding: 7px 12px;
	background: var(--cu-amarillo);
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .35);

	font-family: var(--cu-fuente);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #141416;
	text-decoration: none;

	transition: transform .16s var(--cu-salida), box-shadow .16s ease, background-color .16s ease;
}
.cu-globo:hover,
.cu-globo:focus,
.cu-globo.esta-encima{
	z-index: 40;
	background: var(--cu-amarillo-vivo);
	color: #141416;
	text-decoration: none;
	transform: translate(-50%, calc(-100% - 13px));
	box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.cu-globo:focus-visible{ outline: 2px solid #141416; outline-offset: 2px; }

/* La punta que señala la coordenada */
.cu-globo__pico{
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--cu-amarillo);
	border-bottom: 0;
}
.cu-globo:hover .cu-globo__pico,
.cu-globo.esta-encima .cu-globo__pico{ border-top-color: var(--cu-amarillo-vivo); }

@media (max-width: 560px){
	.cu-vista{ display: flex; width: 100%; }
	.cu-vista__boton{ flex: 1; justify-content: center; padding: 10px 12px; }
	.cu-globo{ font-size: 12px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce){
	.cu-globo{ transition: none; }
}


/* ===========================================================================
   44. Manager: ubicación de la propiedad
   =========================================================================== */
.cu-ubicacion__ayuda{
	max-width: 62ch;
	margin: 14px 0 16px;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}

.cu-ubicacion__buscar{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.cu-ubicacion__buscar .form-control{ flex: 1 1 260px; min-width: 0; }
.cu-ubicacion__buscar .cu-boton{ flex: 0 0 auto; }

.cu-ubicacion__aviso{
	margin: 0 0 12px;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}
.cu-ubicacion__aviso.es-error{ color: #E5544A; }
.cu-ubicacion__aviso[hidden]{ display: none; }

.cu-ubicacion__mapa{
	width: 100%;
	height: clamp(300px, 42vh, 440px);
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
	overflow: hidden;
}

.cu-ubicacion__coords{
	display: grid;
	grid-template-columns: auto 1fr auto 1fr;
	align-items: center;
	gap: 10px 12px;
	margin-top: 14px;
}
.cu-ubicacion__coords label{
	margin: 0;
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
	white-space: nowrap;
}
.cu-ubicacion__coords .form-control{ font-variant-numeric: tabular-nums; }

@media (max-width: 640px){
	.cu-ubicacion__coords{ grid-template-columns: auto 1fr; }
}


/* ===========================================================================
   45. El atributo hidden manda

   El navegador le da display:none a [hidden], pero cualquier regla nuestra que
   fije display gana. Por eso la rejilla de tarjetas (display:grid) se quedaba
   a la vista al cambiar al mapa aunque el JS la marcara como oculta.
   =========================================================================== */
[hidden]{ display: none !important; }


/* ===========================================================================
   46. Skip: saltar el video

   Se ve igual que la palabra SCROLL y va centrado justo encima. Esta por
   encima del cargador (z-index 2000) para poder pulsarse mientras el video
   baja, y sigue ahi despues para no tener que recorrer la animación a mano.
   Por eso vive fuera del hero y se coloca con las medidas del pie (seccion 18).
   =========================================================================== */
.cu-skip{
	position: fixed;
	/* El hero mide 100svh y va pegado arriba, asi que su pie cae aqui. Con
	   top y no con bottom: en el celular, al esconderse la barra del
	   navegador la pantalla crece por abajo y un bottom se despegaria de
	   SCROLL, que se queda con el hero. */
	top: calc(100svh - var(--cu-hero-pie) - var(--cu-scroll-alto)
	          - var(--cu-skip-hueco) - var(--cu-skip-alto));
	left: 50%;
	z-index: 2100;
	transform: translateX(-50%);

	height: var(--cu-skip-alto);
	padding: 0 14px;               /* area de toque mas ancha, sin que se vea */
	background: none;
	border: 0;

	/* La misma letra que SCROLL (seccion 18) */
	font-family: var(--cu-fuente);
	font-size: clamp(10px, 1.4vw, 12px);
	font-weight: 600;
	line-height: 22px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(240, 244, 248, .75);
	text-decoration: none;
	cursor: pointer;

	transition: color .2s ease, opacity .35s ease, transform .35s ease;
}
.cu-skip:hover,
.cu-skip:focus{ color: #fff; }
.cu-skip:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 3px; }

.cu-skip.se-fue{
	opacity: 0;
	/* Se va hacia arriba, lejos de SCROLL: al volver entra bajando y nunca
	   queda a menos de su hueco de 10 px */
	transform: translateX(-50%) translateY(-8px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
	.cu-skip{ transition: none; }
}


/* ===========================================================================
   47. Botón de WhatsApp en contacto
   =========================================================================== */
.cu-whats{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	background: #25D366;
	border-radius: var(--cu-pildora);
	font-size: .9375rem;
	font-weight: 600;
	color: #0B3D20;
	text-decoration: none;
	transition: background-color .2s ease, transform .15s var(--cu-salida);
}
.cu-whats:hover,
.cu-whats:focus{
	background: #1FBE5A;
	color: #0B3D20;
	text-decoration: none;
}
.cu-whats:active{ transform: scale(.97); }
.cu-whats:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 3px; }
.cu-whats svg{ width: 19px; height: 19px; flex: 0 0 auto; }


/* ===========================================================================
   48. Carrusel de últimas propiedades
   =========================================================================== */
.cu-novedades{ padding-top: clamp(48px, 7vh, 84px); padding-bottom: 0; }

.cu-carrusel{ position: relative; }

.cu-carrusel__pista{
	display: flex;
	gap: 16px;
	overflow-x: auto;
	/* 'proximity' y no 'mandatory': con el iman en mandatory el
	   navegador reevalua el anclaje mientras corre la animacion de las
	   flechas y devuelve la pista a su sitio -- medido, la flecha movia
	   2 px en vez de una tarjeta. Con proximity el arrastre del dedo
	   sigue pegandose a la tarjeta mas cercana. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;

	/* La barra de desplazamiento no aporta aqui: se mueve con las flechas,
	   arrastrando en el móvil o con la rueda. */
	scrollbar-width: none;
}
.cu-carrusel__pista::-webkit-scrollbar{ display: none; }

.cu-tarjeta-mini{
	flex: 0 0 clamp(230px, 24vw, 292px);
	scroll-snap-align: start;

	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-tarjeta, 14px);
	text-decoration: none;
	transition: transform .28s var(--cu-salida), border-color .28s ease, box-shadow .28s ease;
}
.cu-tarjeta-mini:hover,
.cu-tarjeta-mini:focus{
	transform: translateY(-4px);
	border-color: var(--cu-linea);
	box-shadow: var(--cu-sombra-md);
	text-decoration: none;
}
.cu-tarjeta-mini:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 3px; }

.cu-tarjeta-mini__foto{
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--cu-panel-alto);
	aspect-ratio: 4 / 3;
}
.cu-tarjeta-mini__foto img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--cu-salida);
}
.cu-tarjeta-mini:hover .cu-tarjeta-mini__foto img{ transform: scale(1.05); }

.cu-tarjeta-mini__op{
	position: absolute;
	top: 10px; left: 10px;
	padding: 4px 10px;
	background: var(--cu-amarillo);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #141416;
}

.cu-tarjeta-mini__cuerpo{ display: block; padding: 14px 15px 16px; }

.cu-tarjeta-mini__tipo{
	display: block;
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
.cu-tarjeta-mini__titulo{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cu-tinta);
}
.cu-tarjeta-mini__lugar{
	display: block;
	margin-top: 5px;
	font-size: var(--cu-etiqueta);
	color: var(--cu-tinta-tenue);
}
.cu-tarjeta-mini__precio{
	display: block;
	margin-top: 11px;
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta);
}

/* --- Las flechas --- */
.cu-carrusel__flecha{
	position: absolute;
	top: 34%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;

	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 50%;
	color: var(--cu-tinta);
	cursor: pointer;
	box-shadow: var(--cu-sombra-md);
	transition: opacity .2s ease, transform .15s var(--cu-salida), background-color .2s ease;
}
.cu-carrusel__flecha:hover{ background: var(--cu-panel); }
.cu-carrusel__flecha:active{ transform: scale(.93); }
.cu-carrusel__flecha:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-carrusel__flecha svg{ width: 19px; height: 19px; }
.cu-carrusel__flecha--ant{ left: -14px; }
.cu-carrusel__flecha--sig{ right: -14px; }

.cu-carrusel__flecha[disabled]{ opacity: 0; pointer-events: none; }

/* En pantallas chicas no hay flechas: se pasa arrastrando el dedo. */
@media (max-width: 860px){
	.cu-carrusel__flecha{ display: none; }
}

@media (prefers-reduced-motion: reduce){
	.cu-carrusel__pista{ scroll-behavior: auto; }
	.cu-tarjeta-mini, .cu-tarjeta-mini__foto img{ transition: none; }
}


/* ===========================================================================
   49. Sugerencias de dirección de Google dentro del manager

   El desplegable lo dibuja Google fuera de nuestro marcado (.pac-container),
   asi que hay que vestirlo aparte o sale blanco sobre el ambiente oscuro.
   =========================================================================== */
.pac-container{
	z-index: 3000;
	margin-top: 4px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 10px;
	box-shadow: var(--cu-sombra-md);
	font-family: var(--cu-fuente);
}
.pac-item{
	padding: 9px 12px;
	border-top: 1px solid var(--cu-linea-suave);
	font-size: .875rem;
	color: var(--cu-tinta-suave);
	cursor: pointer;
}
.pac-item:first-child{ border-top: 0; }
.pac-item:hover,
.pac-item-selected{ background: var(--cu-panel-alto); }
.pac-item-query{ font-size: .9375rem; color: var(--cu-tinta); }
.pac-matched{ color: var(--cu-amarillo); }
.pac-icon{ display: none; }
.hdpi .pac-icon{ display: none; }


/* ===========================================================================
   50. Redes sociales: la ultima publicacion de cada una

   Cada tarjeta enseña la vista oficial de la red (un iframe) recortada a una
   ventana del mismo alto, para que la fila quede pareja. Al tocarla se abre
   la publicacion en la red; "Ver en..." lleva ahi tambien. Las vistas de
   Instagram y Facebook son blancas y no tienen modo oscuro, por eso la
   ventana va en blanco en los dos temas.

   La de X ya no esta: no hay forma gratuita de enseñar su ultima
   publicacion (su linea de tiempo para sitios responde "Rate limit
   exceeded" y su API es de pago). Sus enlaces siguen en el pie y en Contacto.
   =========================================================================== */
.cu-redes{ padding-top: clamp(48px, 7vh, 84px); padding-bottom: 0; }

/* Tres redes. Instagram pide al menos 326 px de ancho: por eso en el
   celular va una por fila y en tableta dos, no tres apretadas. */
.cu-redes__rejilla{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
}

/* Tableta: dos por fila, y la que queda sola va centrada y del mismo ancho
   que las de arriba, no estirada a todo lo ancho */
@media (min-width: 720px){
	.cu-redes__rejilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cu-redes__rejilla > .cu-red:last-child:nth-child(odd){
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 7px);
	}
}

/* Escritorio: las tres en una fila. Con la caja de 1140 px tocan a unos
   370 px cada una. */
@media (min-width: 1100px){
	.cu-redes__rejilla{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cu-redes__rejilla > .cu-red:last-child:nth-child(odd){
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}
}

.cu-red{
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-lg);
}

.cu-red__cabeza{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 16px 18px;
}

.cu-red__logo{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--cu-panel-alto);
	color: var(--cu-tinta);
	transition: background-color .25s ease, color .25s ease;
}
.cu-red__logo svg{ width: 21px; height: 21px; }

/* Cada red con su color al pasar el mouse por la tarjeta */
.cu-red--instagram:hover .cu-red__logo{ background: #E1306C; color: #fff; }
.cu-red--facebook:hover  .cu-red__logo{ background: #1877F2; color: #fff; }
/* TikTok: su rojo, y la nota con el desfase cian y rojo de su logotipo */
.cu-red--tiktok:hover    .cu-red__logo{ background: #FE2C55; color: #fff; }
.cu-red--tiktok .cu-red__logo svg{ transition: filter .25s ease; }
.cu-red--tiktok:hover    .cu-red__logo svg{
	filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #141416);
}

.cu-red__quien{ display: block; min-width: 0; }
.cu-red__nombre{
	display: block;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--cu-tinta);
}
.cu-red__cuenta{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--cu-etiqueta);
	color: var(--cu-tinta-tenue);
}

/* La ventana a la publicacion. El alto de Facebook tiene que ser el mismo
   que se le pide al plugin en controllers/Redes.php (280). */
.cu-red__post{
	height: var(--cu-red-alto, 280px);
	overflow: hidden;
	background: #fff;
}
.cu-red__post iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Si una red no tiene una vista que enseñar (por ejemplo, un perfil mal
   escrito en config/Redes.php), la ventana invita al perfil. Blanca como las
   demas, que son las vistas oficiales de cada red */
.cu-red__perfil{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	text-align: center;
	color: #141416;
	text-decoration: none;
}
.cu-red__perfil:hover,
.cu-red__perfil:focus{ color: #141416; text-decoration: none; }
.cu-red__perfil-logo{
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	background: #141416;
	border-radius: 50%;
	color: #fff;
	transition: transform .25s var(--cu-salida);
}
.cu-red__perfil-logo svg{ width: 28px; height: 28px; }
.cu-red__perfil:hover .cu-red__perfil-logo{ transform: scale(1.06); }
.cu-red__perfil-cuenta{ font-size: 1rem; font-weight: 600; }
.cu-red__perfil-texto{ max-width: 24ch; font-size: var(--cu-menudo); line-height: 1.45; color: #56575B; }
@media (prefers-reduced-motion: reduce){
	.cu-red__perfil-logo{ transition: none; }
}

/* Si una red no tiene publicacion que enseñar */
.cu-red__texto{
	margin: 0;
	padding: 0 18px;
	font-size: var(--cu-menudo);
	line-height: 1.55;
	color: var(--cu-tinta-suave);
}

.cu-red__ir{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;               /* los "Ver en" de las tres al mismo nivel */
	padding: 14px 18px 16px;
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cu-amarillo-hondo);
	text-decoration: none;
}
.cu-red__ir:hover,
.cu-red__ir:focus{ color: var(--cu-tinta); text-decoration: none; }
.cu-red__ir:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: -4px; }
.cu-red__ir svg{ width: 15px; height: 15px; transition: transform .2s var(--cu-salida); }
.cu-red__ir:hover svg{ transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce){
	.cu-red__logo, .cu-red__ir svg,
	.cu-red--tiktok .cu-red__logo svg{ transition: none; }
}


/* ===========================================================================
   51. Ficha en escritorio: foto a la izquierda, miniaturas a la derecha

   La foto baja a un 70% del ancho y las miniaturas pasan a su derecha, a la
   misma altura, de 15 en 15 con flechas para pasar de pagina (rediseno.js).
   Debajo de la foto se comian casi una pantalla antes de llegar al titulo y
   al precio. En tableta y celular sigue todo apilado, como antes.
   =========================================================================== */
@media (min-width: 992px){
	.cu-galeria{
		display: grid;
		grid-template-columns: 70% minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
	}

	/* El alto de la galeria lo pone la foto y la columna se estira hasta ahi:
	   con contain: size su contenido no cuenta para medir. */
	.cu-galeria__lado{
		align-self: stretch;
		display: flex;
		flex-direction: column;
		min-width: 0;
		contain: size;
	}

	/* Una pagina de 3 x 5 que se reparte el alto de la foto. Si se cambia,
	   hay que cambiar tambien POR_PAGINA en rediseno.js. */
	.cu-galeria__tira{
		flex: 1 1 0;
		min-height: 0;
		margin-top: 0;
		max-height: none;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(5, minmax(0, 1fr));
		transition: none;
	}
	.cu-galeria__mini{ height: 100%; }

	/* Aqui no se despliega hacia abajo: se pasa de pagina */
	.cu-galeria__mas{ display: none; }
}

/* Flechas para pasar de pagina: la de seguir, en amarillo */
.cu-galeria__paginas{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}
.cu-galeria__pagina{
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 50%;
	color: var(--cu-tinta);
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease, transform .15s var(--cu-salida);
}
.cu-galeria__pagina svg{ width: 18px; height: 18px; }
.cu-galeria__pagina:hover{ background: var(--cu-panel-alto); }
.cu-galeria__pagina--sig{
	background: var(--cu-amarillo);
	border-color: transparent;
	color: #141416;
}
.cu-galeria__pagina--sig:hover{ background: var(--cu-amarillo); filter: brightness(1.06); }
.cu-galeria__pagina:active{ transform: scale(.92); }
.cu-galeria__pagina:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-galeria__pagina:disabled{ opacity: .3; cursor: default; pointer-events: none; }

.cu-galeria__rango{
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta-suave);
}

@media (prefers-reduced-motion: reduce){
	.cu-galeria__pagina{ transition: none; }
}


/* ===========================================================================
   52. Banda de cifras entre Servicios y Quiénes somos

   El fondo va un escalon aparte del resto del sitio: mas claro en el tema
   oscuro y mas oscuro en el claro. Asi la banda corta la pagina y separa una
   seccion de la otra.
   =========================================================================== */
/* En claro, un paso MAS oscuro que el fondo del sitio (#DEDEDB) */
:root{ --cu-banda: #CBCBC7; }
[data-tema="oscuro"]{ --cu-banda: #27272B; }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]){ --cu-banda: #27272B; }
}

.cu-cifras{
	background: var(--cu-banda);
	border-top: 1px solid var(--cu-linea-suave);
	border-bottom: 1px solid var(--cu-linea-suave);
}
.cu-cifras__caja{
	max-width: var(--cu-ancho);
	margin: 0 auto;
	padding: clamp(32px, 5vh, 54px) var(--cu-margen);
}
.cu-cifras .cu-datos{
	max-width: 860px;
	margin: 0 auto;
}
.cu-cifras .cu-dato{
	text-align: center;
	background: transparent;
	border: 0;
}
/* En la banda las cifras son el asunto: se leen desde lejos */
.cu-cifras .cu-dato b{
	font-size: clamp(2.6rem, 5vw, 4rem);
	letter-spacing: -.04em;
}
.cu-cifras .cu-dato span{ margin-top: 10px; font-size: var(--cu-menudo); }

/* Menos aire encima de Contacto: la banda y el pie ya separan de sobra */
@media (min-width: 992px){
	.cu-hablemos > .cu-seccion{ padding-top: clamp(46px, 6vh, 78px); }
}

/* El boton de relleno expansivo tambien se usa en <button> */
.afb:disabled{ opacity: .55; cursor: default; pointer-events: none; }


/* ===========================================================================
   53. Numeros de pagina en los listados

   Antes solo habia "Anterior / Siguiente": para llegar a la pagina 7 habia
   que pulsar seis veces.
   =========================================================================== */
.cu-paginas__numeros{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.cu-paginas__num{
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-pildora);
	color: var(--cu-tinta);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
a.cu-paginas__num:hover{
	background: var(--cu-panel-alto);
	border-color: var(--cu-linea);
	color: var(--cu-tinta);
	text-decoration: none;
}
.cu-paginas__num.es-activa{
	background: var(--cu-amarillo);
	border-color: var(--cu-amarillo);
	color: #141416;
	font-weight: 700;
}
.cu-paginas__salto{
	padding: 0 2px;
	color: var(--cu-tinta-tenue);
}
@media (max-width: 560px){
	.cu-paginas{ gap: 10px; flex-wrap: wrap; }
	.cu-paginas__num{ min-width: 34px; height: 34px; }
}


/* ===========================================================================
   54. El boton de relleno expansivo, en su version de linea

   Misma animacion que el de Hablemos, pero sin relleno amarillo de salida:
   es el que acompaña a un boton principal (la ficha tiene tres seguidos).
   =========================================================================== */
.afb--linea{
	--afb-bg:        transparent;
	--afb-text:      var(--cu-tinta);
	--afb-fill-bg:   var(--cu-amarillo);
	--afb-fill-text: #141416;
	border-color: var(--cu-linea);
}
.afb--linea:hover, .afb--linea:focus{ color: var(--cu-tinta); }

/* Un icono dentro del boton (el de WhatsApp) */
.afb__label svg,
.afb__ghost svg{
	width: 1.05em;
	height: 1.05em;
	margin-right: .45em;
	vertical-align: -.18em;
}

/* El mensaje del correo de la ficha: mas alto y que no se pueda estirar */
.cu-modal__mensaje{
	min-height: 168px;
	resize: none;
}


/* ===========================================================================
   55. Etiqueta de estado: PREVENTA, VENDIDO, AMUEBLADO...

   Antes era un triangulo de color en la esquina de la tarjeta, y en la ficha
   no salia. Ahora es texto en altas con un punto del color que eligio el
   manager, y aparece igual en la tarjeta y en la ficha.

   El color llega en dos tonos (header.php los calcula) porque algunos estados
   son casi blancos o casi negros y no se leerian sobre el papel del tema.
   =========================================================================== */
.cu-marca-estado{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--cu-estado-claro, var(--cu-tinta));
}
[data-tema="oscuro"] .cu-marca-estado{ color: var(--cu-estado-oscuro, var(--cu-tinta)); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-marca-estado{
		color: var(--cu-estado-oscuro, var(--cu-tinta));
	}
}
.cu-marca-estado__punto{
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

/* En la tarjeta va sobre la foto, arriba a la izquierda. Debajo empujaba el
   tipo, el lugar, el titulo y el precio 30 px, y en una fila las tarjetas con
   etiqueta quedaban desfasadas de las que no la tienen. Ahi arriba no ocupa
   sitio: los espacios de la tarjeta quedan igual con etiqueta y sin ella.
   El contenedor solo sirve de referencia para colocar el sello: no lleva alto
   ni contiene la flotacion de .bg-image (style.min.css la flota), asi que el
   resto de la tarjeta se acomoda exactamente igual que antes. */
.cu-tarjeta__foto{ position: relative; }
.sale-rent .cu-tarjeta__estado{
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	max-width: calc(100% - 20px);
	margin: 0;
	padding: 5px 10px;
	background: rgba(255, 255, 255, .94);
	border-radius: 7px;
	box-shadow: 0 2px 10px rgba(20, 20, 22, .22);
}
/* El sello es blanco en los dos ambientes: siempre el tono claro del color,
   que es el que se lee sobre fondo claro */
.cu-tarjeta__foto .cu-tarjeta__estado .cu-marca-estado{
	color: var(--cu-estado-claro, var(--cu-negro));
	font-size: .75rem;
	letter-spacing: .1em;
}
/* Y en la ficha, encima del tipo de propiedad */
.cu-ficha__cabeza .cu-marca-estado{ margin-bottom: 12px; }


/* ===========================================================================
   56. Preloader dibujado con CSS

   Sustituye a los GIF (loader.gif pesaba 48 KB y pageloader.gif otro tanto).
   Un anillo que gira, del amarillo de la marca.
   =========================================================================== */
.cu-giro{
	display: inline-block;
	width: 26px;
	height: 26px;
	margin-right: 10px;
	vertical-align: -7px;
	border: 3px solid var(--cu-linea);
	border-top-color: var(--cu-amarillo);
	border-radius: 50%;
	animation: cuGirar .8s linear infinite;
}
@keyframes cuGirar{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
	.cu-giro{ animation-duration: 2.6s; }
}


/* ===========================================================================
   57. Manager: la busqueda, junto a "Mostrar"

   DataTables las pinta en el mismo renglon (una a cada lado). Aqui solo se
   quita el aire que dejaban debajo, para que la tabla empiece antes.
   =========================================================================== */
.cu-manager .dataTables_wrapper > .row:first-child{
	margin-bottom: 0;
}
.cu-manager .dataTables_filter{ text-align: right; }

/* El aviso de privacidad, sin el hueco de la plantilla vieja arriba: el
   cuerpo ya reserva 96 px para la barra flotante, con eso basta */
.cu-legal-seccion{ padding-top: 6px; }


/* ===========================================================================
   58. Ficha en escritorio: la columna de la derecha

   Todo lo que antes colgaba del final de la ficha (los tres botones y el
   enlace al mapa) se muda a una columna propia, y con ellos el código y la
   dirección. La ficha bajaba casi una pantalla de más por tener esas cosas
   una debajo de la otra a todo lo ancho.

   La columna es una división de verdad: una línea vertical la separa del
   texto, sin caja ni sombra. De 992 px para abajo no existe la rejilla y
   todo vuelve a apilarse, que en un celular es lo que se lee bien.
   =========================================================================== */
@media (min-width: 992px){
	.cu-ficha__cuerpo{
		display: grid;
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: 0 34px;
		align-items: start;
	}

	.cu-ficha__principal{ min-width: 0; }

	.cu-ficha__lado{
		min-width: 0;
		padding-left: 34px;
		border-left: 1px solid var(--cu-linea-suave);
	}

	/* En la columna los botones van uno debajo de otro y a todo lo ancho:
	   en 330 px no caben tres en fila. */
	.cu-ficha__lado .cu-ficha__acciones{
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 0;
	}
	.cu-ficha__lado .afb{ width: 100%; }
}

/* El código encabeza la columna, ya no la cabecera de la ficha */
.cu-ficha__lado .cu-ficha__codigo{ margin: 0 0 16px; }

.cu-ficha__direccion{ margin-top: 26px; }
.cu-ficha__direccion .cu-ficha__ciudad{ margin-bottom: 2px; }
.cu-ficha__direccion p{ margin-bottom: 14px; }


/* --- El cuadro del mapa ---------------------------------------------------
   Nunca lleva alfiler: un círculo ancho de barrio marca el rumbo sin enseñar
   la puerta. El script de Google lo carga la ficha cuando el mapa se asoma. */
.cu-mapa{
	position: relative;
	border-radius: var(--cu-radio-md);
	overflow: hidden;
	border: 1px solid var(--cu-linea-suave);
	background: var(--cu-panel);
}
.cu-mapa__lienzo{
	width: 100%;
	height: 230px;
}

/* Mientras Google no contesta, el hueco no se queda mudo */
.cu-mapa__lienzo::after{
	content: "Cargando el mapa…";
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}
.cu-mapa--listo .cu-mapa__lienzo::after{ content: none; }
.cu-mapa--falla .cu-mapa__lienzo::after{ content: "No se pudo cargar el mapa"; }

.cu-mapa__nota{
	margin: 8px 0 0;
	font-size: var(--cu-menudo);
	color: var(--cu-tinta-tenue);
}

/* El botón de crecer, encima del mapa */
.cu-mapa__crecer{
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	background: var(--cu-papel);
	border: 1px solid var(--cu-linea);
	border-radius: var(--cu-pildora);
	font-size: var(--cu-menudo);
	font-weight: 600;
	color: var(--cu-tinta);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	transition: background-color .2s ease, transform .15s var(--cu-salida);
}
.cu-mapa__crecer svg{ width: 15px; height: 15px; }
.cu-mapa__crecer:hover{ background: var(--cu-panel-alto); }
.cu-mapa__crecer:active{ transform: scale(.96); }
.cu-mapa__crecer:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }

/* --- El mapa crecido ------------------------------------------------------
   Va en un telón aparte, con su propio mapa recién hecho, y no agrandando el
   de la columna: a un mapa ya dibujado no se le puede cambiar el cuadro
   (Google se queda con las teselas del encuadre viejo y sale el mapa chico
   flotando en un rectángulo blanco). */
.cu-mapa-telon{
	position: fixed;
	inset: 0;
	/* Por encima de la barra (1000), los botones flotantes (1001) y el
	   enlace de saltar al contenido (1020) */
	z-index: 1030;
	padding: 4vh 4vw;
	background: rgba(8, 8, 10, .78);
}
.cu-mapa-telon__lienzo{
	width: 100%;
	height: 100%;
	border-radius: var(--cu-radio-md);
	overflow: hidden;
}
.cu-mapa-telon__cerrar{
	position: absolute;
	top: calc(4vh - 19px);
	right: calc(4vw - 19px);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--cu-papel);
	border: 1px solid var(--cu-linea);
	border-radius: 50%;
	color: var(--cu-tinta);
	cursor: pointer;
}
.cu-mapa-telon__cerrar svg{ width: 18px; height: 18px; }
.cu-mapa-telon__cerrar:hover{ background: var(--cu-panel-alto); }
.cu-mapa-telon__cerrar:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }

/* Con el mapa abierto la página de abajo no se mueve */
body.cu-sin-scroll{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
	.cu-mapa__crecer{ transition: none; }
}


/* ===========================================================================
   59. Campo trampa de los formularios

   Una persona no lo ve y lo deja vacio; los robots que llenan todo lo que
   encuentran lo rellenan y su mensaje no sale (controllers/Correo.php).
   Va fuera de la pantalla y no con display:none: algunos robots saben que un
   campo con display:none es trampa y se lo saltan.
   =========================================================================== */
.cu-trampa{
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


/* ===========================================================================
   60. Manager: grises del ambiente claro

   Sobre el fondo concreto, las etiquetas de los campos, las notas, las
   cabeceras de la tabla y el "Mostrando 1 a 10" se perdian. Solo dentro del
   manager y solo en claro: el sitio publico y el ambiente oscuro no cambian.
   =========================================================================== */
[data-tema="claro"] .cu-manager{
	--cu-tinta-suave: #3A3A3E;
	--cu-tinta-tenue: #56575B;
}
@media (prefers-color-scheme: light){
	:root:not([data-tema]) .cu-manager{
		--cu-tinta-suave: #3A3A3E;
		--cu-tinta-tenue: #56575B;
	}
}


/* ===========================================================================
   61. Manager: aviso de fotos y videos en Nueva propiedad y Editar

   Las fotos y los videos se suben en su propia pantalla (fotos.php). En el
   formulario queda este aviso en su lugar: en Editar trae el boton que la
   abre; en Nueva propiedad explica que primero hay que guardar.
   =========================================================================== */
.cu-medios{
	display: flex;
	align-items: center;
	gap: 16px 20px;
	padding: 18px 20px;
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea);
	border-radius: var(--cu-radio-md);
}
.cu-medios__icono{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	background: rgba(255, 210, 0, .22);
	border-radius: 14px;
	color: #7A5C00;
}
[data-tema="oscuro"] .cu-medios__icono{ background: rgba(255, 210, 0, .14); color: var(--cu-amarillo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-medios__icono{ background: rgba(255, 210, 0, .14); color: var(--cu-amarillo); }
}
.cu-medios__icono svg{ width: 22px; height: 22px; }

.cu-medios__texto{ flex: 1 1 auto; min-width: 0; }
.cu-medios__texto p{
	margin: 0;
	font-size: var(--cu-menudo);
	line-height: 1.55;
	color: var(--cu-tinta-suave);
}
.cu-medios__texto .cu-medios__titulo{
	margin-bottom: 3px;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cu-tinta);
	text-wrap: balance;
}
.cu-medios__boton{ flex: 0 0 auto; }

@media (max-width: 640px){
	.cu-medios{ flex-direction: column; align-items: flex-start; }
	.cu-medios__boton{ width: 100%; justify-content: center; }
}


/* ===========================================================================
   62. Manager: videos en la pantalla de Fotos y videos

   Las mismas tarjetas que las fotos, mas anchas para que el reproductor se
   pueda usar ahi mismo. Los videos no se ordenan: sin cursor de arrastre.
   =========================================================================== */
.cu-galeria-admin--videos{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cu-foto--video{ cursor: default; }
.cu-foto--video video{
	display: block;
	width: 100%;
	height: 150px;
	background: #0a0a0a;
	object-fit: contain;
}
.cu-foto__formato{
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--cu-tinta-tenue);
}


/* ===========================================================================
   63. Manager: reporte de palabras clave (admin/palabras-clave.php)

   Un documento para leer, no un formulario: bloques sobre el fondo del
   manager, las frases como etiquetas y el titulo tal como sale en Google.
   =========================================================================== */
.cu-reporte{
	--cu-rep-google: #1A0DAB;
	--cu-rep-ambar: #7A5C00;
	display: grid;
	gap: 18px;
	max-width: 980px;
	margin: 0 auto;
}
[data-tema="oscuro"] .cu-reporte{ --cu-rep-google: #8AB4F8; --cu-rep-ambar: var(--cu-amarillo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-reporte{ --cu-rep-google: #8AB4F8; --cu-rep-ambar: var(--cu-amarillo); }
}
/* Sin esto la tabla de fichas estiraba la columna y en el celular la pagina
   entera se corria de lado; asi solo la tabla se desliza */
.cu-reporte > *{ min-width: 0; }

.cu-reporte__intro{
	max-width: 66ch;
	margin: 0 auto;
	text-align: center;
	color: var(--cu-tinta-suave);
}

/* Las cifras de arriba */
.cu-reporte__cifras{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
}
.cu-reporte__cifras > div{ padding: 16px 18px; }
.cu-reporte__cifras > div + div{ border-left: 1px solid var(--cu-linea-suave); }
.cu-reporte__cifras b{
	display: block;
	font-family: var(--cu-display-fuente);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--cu-tinta);
}
.cu-reporte__cifras span{ display: block; margin-top: 6px; font-size: var(--cu-menudo); color: var(--cu-tinta-tenue); }
@media (max-width: 640px){
	.cu-reporte__cifras{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cu-reporte__cifras > div:nth-child(3){ border-left: 0; }
	.cu-reporte__cifras > div:nth-child(n+3){ border-top: 1px solid var(--cu-linea-suave); }
}

/* Con .cu-reporte delante: ".cu-manager section" les quitaba el relleno */
.cu-reporte .cu-reporte__bloque{
	padding: 24px clamp(18px, 3vw, 30px);
	background: var(--cu-panel);
	border: 1px solid var(--cu-linea-suave);
	border-radius: var(--cu-radio-md);
}
.cu-reporte__cabeza{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
}

/* Los titulos, como los de las secciones del formulario */
.cu-reporte h2{
	margin: 0;
	font-family: var(--cu-display-fuente);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cu-tinta);
}
[data-tema="oscuro"] .cu-reporte h2{ color: var(--cu-amarillo); }
@media (prefers-color-scheme: dark){
	:root:not([data-tema="claro"]) .cu-reporte h2{ color: var(--cu-amarillo); }
}
.cu-reporte h3{ margin: 28px 0 12px; font-size: 1rem; font-weight: 600; color: var(--cu-tinta); }
.cu-reporte h4{ margin: 0 0 8px; font-size: var(--cu-menudo); font-weight: 600; color: var(--cu-tinta-suave); }
.cu-reporte h4 span{ margin-left: 4px; font-weight: 500; color: var(--cu-tinta-tenue); }

.cu-reporte a:not(.cu-codigo){ color: var(--cu-rep-ambar); font-weight: 500; }
.cu-reporte a:not(.cu-codigo):hover,
.cu-reporte a:not(.cu-codigo):focus{ color: var(--cu-tinta); }

.cu-reporte__cuenta{ font-size: var(--cu-menudo); color: var(--cu-tinta-tenue); }
.cu-reporte__cuenta b{ color: var(--cu-tinta); font-variant-numeric: tabular-nums; }
.cu-reporte__nota{ max-width: 70ch; margin: 6px 0 0; font-size: .9375rem; color: var(--cu-tinta-suave); }

.cu-reporte__como{ display: grid; gap: 12px; max-width: 72ch; margin-top: 14px; }
.cu-reporte__como p{ margin: 0; line-height: 1.6; color: var(--cu-tinta-suave); }
.cu-reporte__como strong{ color: var(--cu-tinta); }

/* Asi se ve en los resultados de Google */
.cu-reporte__google{
	display: grid;
	gap: 10px;
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--cu-panel-alto);
	border-left: 3px solid var(--cu-amarillo);
	border-radius: 0 var(--cu-radio-sm) var(--cu-radio-sm) 0;
}
.cu-reporte__google div{ display: grid; gap: 2px; }
.cu-reporte__google dt{
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
.cu-reporte__google dd{ margin: 0; font-size: .875rem; color: var(--cu-tinta-suave); }
.cu-reporte__google .cu-reporte__titulo{ font-size: 1.0625rem; color: var(--cu-rep-google); }

/* Las frases como etiquetas */
.cu-reporte__chips{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cu-reporte__chips li{
	padding: 5px 10px;
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea-suave);
	border-radius: 6px;
	font-size: .84rem;
	line-height: 1.35;
	color: var(--cu-tinta);
}
.cu-reporte__chips--chicas li{ padding: 3px 8px; font-size: .78rem; }

/* Como se arman las frases de una ficha */
.cu-reporte__formulas{ width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .875rem; }
.cu-reporte__formulas th,
.cu-reporte__formulas td{
	padding: 8px 12px 8px 0;
	border-bottom: 1px solid var(--cu-linea-suave);
	text-align: left;
	vertical-align: top;
}
.cu-reporte__formulas th{ width: 44%; font-weight: 500; color: var(--cu-tinta-suave); }
.cu-reporte__formulas td{ font-weight: 600; color: var(--cu-tinta); }

.cu-reporte__zonas{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px){ .cu-reporte__zonas{ grid-template-columns: 1fr; } }
.cu-reporte__grupos{ display: grid; gap: 18px; }

/* El detalle por propiedad, con su filtro */
.cu-reporte__buscar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cu-reporte__buscar label{
	margin: 0;
	font-size: var(--cu-etiqueta);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cu-tinta-tenue);
}
.cu-reporte__buscar input{
	flex: 1 1 260px;
	min-width: 0;
	padding: 10px 12px;
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea);
	border-radius: var(--cu-radio-sm);
	font-size: .9375rem;
	color: var(--cu-tinta);
}
.cu-reporte__buscar input:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-reporte__buscar span{ font-size: var(--cu-menudo); color: var(--cu-tinta-tenue); }

.cu-reporte__tabla{ overflow-x: auto; border: 1px solid var(--cu-linea-suave); border-radius: var(--cu-radio-sm); }
.cu-reporte__tabla table{ width: 100%; min-width: 640px; border-collapse: collapse; font-size: .875rem; }
.cu-reporte__tabla th{
	padding: 10px 12px;
	background: var(--cu-panel-alto);
	border-bottom: 1px solid var(--cu-linea-suave);
	font-size: var(--cu-etiqueta);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cu-tinta-tenue);
}
.cu-reporte__tabla td{ padding: 10px 12px; border-bottom: 1px solid var(--cu-linea-suave); vertical-align: top; }
.cu-reporte__tabla tr:last-child td{ border-bottom: 0; }
.cu-reporte__tabla .cu-codigo{ text-decoration: none; }
.cu-reporte__tabla .cu-codigo:hover{ text-decoration: underline; }
.cu-reporte__prop{ min-width: 200px; max-width: 280px; color: var(--cu-tinta-suave); }

/* La lista completa para copiar */
.cu-reporte__lista{
	width: 100%;
	margin-top: 14px;
	padding: 14px;
	background: var(--cu-panel-alto);
	border: 1px solid var(--cu-linea);
	border-radius: var(--cu-radio-sm);
	font-size: .875rem;
	line-height: 1.6;
	color: var(--cu-tinta);
	resize: vertical;
}
.cu-reporte__lista:focus-visible{ outline: 2px solid var(--cu-amarillo); outline-offset: 2px; }
.cu-reporte__copiar{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.cu-reporte__copiar span{ font-size: var(--cu-menudo); color: var(--cu-tinta-tenue); }

/* Impreso: sin la barra ni los controles */
@media print{
	.cu-barra--manager,
	.cu-reporte__buscar,
	.cu-reporte__copiar{ display: none !important; }
}