/* ════════════════════════════════════════════════════════════════════
   Alquilar mi piso — popup/wizard de /alquilar-mi-piso/

   Hermano de valoracion-popup.css con namespace propio (.sc-alqpop capa,
   .sc-alqw wizard) para convivir con el popup de valoración, que está en
   todas las páginas. Solo se carga en la landing de alquiler (preload desde
   AlquilerController). No pinta nada hasta que el JS abre el popup: el
   markup vive en un <template>.

   Paleta y tipografía: las de alquilar.css (azul, crema, Cormorant para
   titulares, DM Sans para el resto), con tokens globales y fallback.
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset de ámbito: el componente no hereda estilos de la página ── */
.sc-alqpop,
.sc-alqpop *,
.sc-alqw,
.sc-alqw *,
.sc-alqw *::before,
.sc-alqw *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sc-alqw button,
.sc-alqw input,
.sc-alqw textarea { font-family: 'DM Sans', sans-serif; color: inherit; }

.sc-alqw ol,
.sc-alqw ul { list-style: none; }

/* `hidden` gana siempre, aunque la regla del bloque sea display:flex/grid. */
.sc-alqpop[hidden],
.sc-alqw [hidden] { display: none !important; }

/* ── Capa modal ──────────────────────────────────────────────────── */
.sc-alqpop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.sc-alqpop--visible { opacity: 1; }

.sc-alqpop__back {
	position: absolute;
	inset: 0;
	background: rgba(24, 26, 30, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.sc-alqpop__dialog {
	position: relative;
	width: 100%;
	max-width: 980px;
	max-height: min(94vh, 860px);
	background: var(--blanco, #fff);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	transform: translateY(14px) scale(0.985);
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
}

.sc-alqpop--visible .sc-alqpop__dialog { transform: none; }

.sc-alqpop__sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sc-alqpop__x {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gris-texto, #54585e);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.sc-alqpop__x:hover { background: var(--beige, #fbf5e9); color: var(--negro, #333); }
.sc-alqpop__x:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }

.sc-alqpop__mount { display: flex; width: 100%; min-width: 0; }

/* Bloqueo del fondo (iOS-safe: position fixed en body, como en la ficha) */
body.sc-alqpop-lock {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* ── Componente ──────────────────────────────────────────────────── */
.sc-alqw {
	display: grid;
	grid-template-columns: 320px 1fr;
	width: 100%;
	min-width: 0;
	font-family: 'DM Sans', sans-serif;
	color: var(--negro, #333);
	font-size: 15px;
	line-height: 1.55;
}

/* ── Panel de confianza (izquierda, escritorio) ──────────────────── */
.sc-alqw__aside {
	background: var(--beige, #fbf5e9);
	border-right: 1px solid var(--beige-dark, #f0e8d5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sc-alqw__aside-foto { position: relative; height: 150px; flex-shrink: 0; }

.sc-alqw__aside-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.sc-alqw__aside-foto::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 56px;
	background: linear-gradient(to bottom, rgba(251, 245, 233, 0), var(--beige, #fbf5e9));
}

.sc-alqw__aside-in {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 18px 24px 26px;
	overflow-y: auto;
}

.sc-alqw__aside-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--negro, #333);
	margin-bottom: 8px;
}

/* Tres argumentos de una línea, con el check dibujado (dos bordes
   girados, sin SVG). Antes eran cuatro con título y subtítulo. */
.sc-alqw__args { margin-top: 14px; }

.sc-alqw__args li {
	position: relative;
	padding: 0 0 12px 26px;
}

.sc-alqw__args li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--azul, #4a8fcc);
}

.sc-alqw__args li::after {
	content: '';
	position: absolute;
	left: 4.5px;
	top: 6px;
	width: 8px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.sc-alqw__args b {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--negro, #333);
}

/* ── Columna del wizard ──────────────────────────────────────────── */
.sc-alqw__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--blanco, #fff);
	max-height: min(94vh, 860px);
}

.sc-alqw__head {
	position: relative;
	padding: 20px 66px 12px 30px;
	flex-shrink: 0;
}

/* En la pantalla 0 no hay progreso: la cabecera se reduce al hueco de la X. */
.sc-alqw__head--cero { padding-bottom: 0; min-height: 30px; }

.sc-alqw__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	padding: 6px 10px 6px 6px;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--gris-texto, #54585e);
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

.sc-alqw__back:hover { color: var(--negro, #333); background: var(--beige, #fbf5e9); }
.sc-alqw__back:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 1px; }

.sc-alqw__head-txt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.sc-alqw__step {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--negro, #333);
	letter-spacing: 0.01em;
}

.sc-alqw__time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--gris-texto, #54585e);
	white-space: nowrap;
}

.sc-alqw__bar {
	height: 4px;
	border-radius: 4px;
	background: var(--beige-dark, #f0e8d5);
	overflow: hidden;
}

.sc-alqw__bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: var(--azul, #4a8fcc);
	transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tira de badges: solo móvil (en escritorio los cubre el panel lateral) */
/* Tira de sellos: el único sitio donde se promete «solo cobramos si se
   alquila». Antes se repetía al pie del paso 5 y bajo el botón. */
.sc-alqw__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	padding: 12px 30px 0;
}

/* Pantalla 0 en escritorio: el alto del diálogo lo marca el panel lateral y
   las dos tarjetas no lo llenan; centradas en vertical no parecen un
   formulario a medio cargar. En móvil no hace falta (hoja completa). */
@media (min-width: 769px) {
	.sc-alqw__body--cero { display: flex; flex-direction: column; justify-content: center; }
}

.sc-alqw__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px 30px 24px;
	overscroll-behavior: contain;
}

/* ── Aviso de borrador ───────────────────────────────────────────── */
.sc-alqw__draft {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--beige, #fbf5e9);
	font-size: 12.5px;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__draft button {
	border: 0;
	background: none;
	padding: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--azul, #4a8fcc);
	text-decoration: underline;
	cursor: pointer;
}

.sc-alqw__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Pasos ───────────────────────────────────────────────────────── */
.sc-alqw__step-pane { animation: scaPaneIn 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.sc-alqw__step-pane--back { animation-name: scaPaneInBack; }

@keyframes scaPaneIn {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes scaPaneInBack {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: none; }
}

.sc-alqw__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--negro, #333);
}

.sc-alqw__title--s0 { font-size: 32px; }

.sc-alqw__sub {
	margin: 6px 0 20px;
	font-size: 14px;
	color: var(--gris-texto, #54585e);
}

/* ── Pantalla 0: las dos tarjetas de bifurcación ──────────────────
   Una encima de la otra, a todo el ancho: son la decisión del embudo y
   tienen que leerse enteras de un vistazo. Icono en círculo crema, título,
   una línea de explicación, la duración en pequeño y la flecha. */
.sc-alqw__caminos {
	display: grid;
	gap: 12px;
}

.sc-alqw__camino {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr 22px;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 92px;
	padding: 16px 18px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 14px;
	background: var(--blanco, #fff);
	color: var(--negro, #333);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sc-alqw__camino:hover {
	border-color: var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
	box-shadow: 0 8px 24px rgba(74, 143, 204, 0.14);
	transform: translateY(-1px);
}

.sc-alqw__camino:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }
.sc-alqw__camino:active { transform: none; }

.sc-alqw__camino-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--beige, #fbf5e9);
	color: var(--azul, #4a8fcc);
	transition: background 0.18s ease;
}

.sc-alqw__camino:hover .sc-alqw__camino-ico { background: var(--blanco, #fff); }

.sc-alqw__camino-txt { display: block; min-width: 0; }

.sc-alqw__camino-txt b {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--negro, #333);
}

.sc-alqw__camino-txt em {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	font-style: normal;
	line-height: 1.4;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__camino-txt small {
	display: inline-block;
	margin-top: 7px;
	padding: 3px 9px;
	border-radius: 20px;
	background: var(--beige, #fbf5e9);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__camino:hover .sc-alqw__camino-txt b { color: var(--azul, #4a8fcc); }

.sc-alqw__camino-arrow {
	display: flex;
	color: var(--azul, #4a8fcc);
	opacity: 0.55;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.sc-alqw__camino:hover .sc-alqw__camino-arrow { opacity: 1; transform: translateX(3px); }

.sc-alqw__hablar {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--borde, #e5e5e5);
	font-size: 13.5px;
	color: var(--gris-texto, #54585e);
	text-align: center;
}

.sc-alqw__hablar a { color: var(--azul, #4a8fcc); text-decoration: none; white-space: nowrap; }
.sc-alqw__hablar a:hover { text-decoration: underline; }
.sc-alqw__hablar b { font-weight: 700; }

/* ── Campos ──────────────────────────────────────────────────────── */
.sc-alqw__field { margin-bottom: 18px; }
.sc-alqw__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-alqw__row .sc-alqw__field { margin-bottom: 18px; }

.sc-alqw__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--negro, #333);
}

.sc-alqw__opt { font-weight: 400; color: var(--gris-texto, #54585e); }

.sc-alqw__inp {
	width: 100%;
	/* 16px sin excepciones: por debajo, Safari en iOS hace zoom al enfocar. */
	font-size: 16px;
	line-height: 1.4;
	padding: 12px 14px;
	min-height: 48px;
	border: 1.5px solid var(--borde, #e5e5e5);
	border-radius: 10px;
	background: var(--blanco, #fff);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sc-alqw__inp::placeholder { color: #9aa0a8; }
.sc-alqw__inp:hover { border-color: #d3d7dd; }

.sc-alqw__inp:focus {
	outline: none;
	border-color: var(--azul, #4a8fcc);
	box-shadow: 0 0 0 3px var(--azul-light, rgba(74, 143, 204, 0.08));
}

.sc-alqw__inp[aria-invalid="true"] { border-color: #e74c3c; }
.sc-alqw__inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12); }

.sc-alqw__inp--corto { max-width: 180px; }

.sc-alqw__ta { min-height: 68px; resize: vertical; }

/* Quita las flechas del number: se teclea, no se sube de uno en uno */
.sc-alqw__inp[type="number"] { -moz-appearance: textfield; }
.sc-alqw__inp[type="number"]::-webkit-outer-spin-button,
.sc-alqw__inp[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* El date de iOS no estira solo: sin esto queda a media altura */
.sc-alqw__inp[type="date"] { min-height: 48px; display: block; -webkit-appearance: none; }

.sc-alqw__suffix { position: relative; }
.sc-alqw__suffix .sc-alqw__inp { padding-right: 46px; }
.sc-alqw__suffix--corto { max-width: 220px; }

.sc-alqw__suffix span {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--gris-texto, #54585e);
	pointer-events: none;
}

/* La renta es el campo estrella del paso 3: más grande, con el «€/mes» a la
   derecha y espacio para que no se pise con el número. */
.sc-alqw__suffix--renta .sc-alqw__inp { padding-right: 78px; }
.sc-alqw__suffix--renta span { font-size: 15px; font-weight: 600; }

.sc-alqw__inp--renta {
	font-size: 22px;
	font-weight: 600;
	min-height: 54px;
	letter-spacing: 0.01em;
}

.sc-alqw__row--renta { align-items: start; }
.sc-alqw__row--renta .sc-alqw__field { margin-bottom: 0; }
/* La fecha a la misma altura que la renta: sin esto las dos etiquetas
   quedaban a distinta línea porque el input de renta es más alto. */
.sc-alqw__row--renta .sc-alqw__inp { min-height: 54px; }

.sc-alqw__hint {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__hint--renta { margin: 8px 0 20px; }

.sc-alqw__err {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: #c0392b;
}

/* ── Chips ───────────────────────────────────────────────────────── */
.sc-alqw__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.sc-alqw__chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-alqw__chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sc-alqw__chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 9px 10px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: var(--radio-sm, 8px);
	background: var(--blanco, #fff);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--negro, #333);
	text-align: center;
	hyphens: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sc-alqw__chip:hover {
	border-color: var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
}

.sc-alqw__chip:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }

.sc-alqw__chip[aria-pressed="true"] {
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
	color: var(--azul, #4a8fcc);
	font-weight: 600;
}

/* Check de «elegida»: dos trazos girados en la esquina. */
.sc-alqw__chip[aria-pressed="true"]::after {
	content: '';
	position: absolute;
	top: 8px;
	right: 7px;
	width: 9px;
	height: 4.5px;
	border-left: 2px solid var(--azul, #4a8fcc);
	border-bottom: 2px solid var(--azul, #4a8fcc);
	transform: rotate(-45deg);
}

/* ── Selector numérico (habitaciones, baños) ──────────────────────
   Etiqueta a la izquierda y stepper a la derecha, en una fila con marco. */
.sc-alqw__numrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 6px 8px 6px 14px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: var(--radio-sm, 8px);
	background: var(--blanco, #fff);
	margin-bottom: 10px;
}

.sc-alqw__numrow .sc-alqw__label { margin-bottom: 0; }

.sc-alqw__stepper {
	display: flex;
	align-items: center;
	gap: 4px;
}

.sc-alqw__stp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 50%;
	background: var(--blanco, #fff);
	color: var(--negro, #333);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sc-alqw__stp:hover:not(:disabled) {
	border-color: var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
	color: var(--azul, #4a8fcc);
}

.sc-alqw__stp:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }
.sc-alqw__stp:disabled { opacity: 0.35; cursor: default; }

/* El icono no puede ser el objetivo del clic (rage-click de tracker.js). */
.sc-alqw__stp svg { pointer-events: none; }

.sc-alqw__stp-val {
	display: block;
	min-width: 64px;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--negro, #333);
	border-radius: 8px;
	padding: 4px 2px;
}

.sc-alqw__stp-val:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }
.sc-alqw__stp-val[data-vacio="1"] { color: #9aa0a8; font-weight: 500; }

/* ── Tarjetas de servicio (paso 3) ────────────────────────────────
   Tres tarjetas a igual ancho: nombre del servicio y precio corto. */
.sc-alqw__servs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.sc-alqw__serv {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-height: 72px;
	padding: 12px 26px 12px 14px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 10px;
	background: var(--blanco, #fff);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sc-alqw__serv b {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--negro, #333);
}

.sc-alqw__serv em {
	font-size: 12px;
	font-style: normal;
	line-height: 1.3;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__serv:hover {
	border-color: var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
}

.sc-alqw__serv:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }

.sc-alqw__serv[aria-pressed="true"] {
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
}

.sc-alqw__serv[aria-pressed="true"] b { color: var(--azul, #4a8fcc); }

.sc-alqw__serv[aria-pressed="true"]::after {
	content: '';
	position: absolute;
	top: 10px;
	right: 9px;
	width: 9px;
	height: 4.5px;
	border-left: 2px solid var(--azul, #4a8fcc);
	border-bottom: 2px solid var(--azul, #4a8fcc);
	transform: rotate(-45deg);
}

/* ── Consentimiento y confianza ──────────────────────────────────── */
.sc-alqw__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gris-texto, #54585e);
	cursor: pointer;
}

.sc-alqw__check input {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--azul, #4a8fcc);
	cursor: pointer;
}

.sc-alqw__check a { color: var(--azul, #4a8fcc); text-decoration: underline; }
.sc-alqw__check input[aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 2px; }

.sc-alqw__badges li {
	position: relative;
	padding-left: 18px;
	font-size: 12.5px;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__badges li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--azul, #4a8fcc);
	border-bottom: 2px solid var(--azul, #4a8fcc);
	transform: rotate(-45deg);
}

/* ── Pie con el botón principal ──────────────────────────────────── */
.sc-alqw__foot {
	flex-shrink: 0;
	padding: 14px 30px 18px;
	border-top: 1px solid var(--borde, #e5e5e5);
	background: var(--blanco, #fff);
}

.sc-alqw__alert {
	margin-bottom: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fdecea;
	border: 1px solid #f5c6c0;
	font-size: 13px;
	line-height: 1.45;
	color: #a03127;
}

.sc-alqw__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	border: 0;
	border-radius: 12px;
	background: var(--azul, #4a8fcc);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sc-alqw__cta:hover { background: var(--azul-hover, #3a7fb8); box-shadow: 0 6px 18px rgba(74, 143, 204, 0.28); color: #fff; }
.sc-alqw__cta:active { transform: translateY(1px); }
.sc-alqw__cta:focus-visible { outline: 2px solid var(--negro, #333); outline-offset: 2px; }
.sc-alqw__cta[disabled] { opacity: 0.65; cursor: default; box-shadow: none; }

/* ── Pantalla de éxito ───────────────────────────────────────────── */
.sc-alqw:has(.sc-alqw__ok:not([hidden])) { grid-template-columns: 1fr; }
.sc-alqw:has(.sc-alqw__ok:not([hidden])) .sc-alqw__aside { display: none; }
.sc-alqpop__dialog:has(.sc-alqw__ok:not([hidden])) { max-width: 620px; }

.sc-alqw__ok {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 30px 30px 34px;
	text-align: center;
}

.sc-alqw__ok-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--sc-success-bg, #eafaf1);
	color: var(--sc-success, #27ae60);
	margin-bottom: 14px;
}

.sc-alqw__ok-c,
.sc-alqw__ok-p {
	stroke: currentColor;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sc-alqw__ok-c { stroke-dasharray: 152; stroke-dashoffset: 152; animation: scaDraw 0.5s ease forwards; }
.sc-alqw__ok-p { stroke-dasharray: 40; stroke-dashoffset: 40; animation: scaDraw 0.35s 0.4s ease forwards; }

@keyframes scaDraw { to { stroke-dashoffset: 0; } }

.sc-alqw__ok-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--negro, #333);
}

.sc-alqw__ok-title:focus { outline: none; }

.sc-alqw__ok-desc {
	max-width: 480px;
	margin: 8px auto 0;
	font-size: 14.5px;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__ok-h {
	margin: 24px 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto, #54585e);
	text-align: left;
}

.sc-alqw__ok-sum {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 6px 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--beige, #fbf5e9);
	text-align: left;
	font-size: 13.5px;
}

.sc-alqw__ok-sum dt { font-weight: 600; color: var(--gris-texto, #54585e); }
.sc-alqw__ok-sum dd { color: var(--negro, #333); overflow-wrap: anywhere; }

.sc-alqw__ok-btns { display: flex; gap: 10px; margin-top: 22px; }

/* Reparto a partes iguales: con la hoja estrecha del exito, sin esto el
   «Llamar 966 980 245» se partia en cuatro lineas y el boton crecia. */
.sc-alqw__ok-btns > .sc-alqw__cta { flex: 1 1 0; min-width: 0; }

/* «Llamar» primario azul, «WhatsApp» secundario en outline: paleta de marca. */
.sc-alqw__cta--wa {
	background: var(--blanco, #fff);
	color: var(--azul, #4a8fcc);
	box-shadow: inset 0 0 0 1px var(--borde, #e5e5e5);
}
.sc-alqw__cta--wa:hover {
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
	color: var(--azul, #4a8fcc);
	box-shadow: inset 0 0 0 1px var(--azul, #4a8fcc);
}

.sc-alqw__ok-close {
	margin-top: 14px;
	padding: 10px 18px;
	min-height: 44px;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--gris-texto, #54585e);
	text-decoration: underline;
	cursor: pointer;
}

.sc-alqw__ok-close:hover { color: var(--negro, #333); }

@media (prefers-reduced-motion: reduce) {
	.sc-alqw__chip,
	.sc-alqw__camino,
	.sc-alqw__serv,
	.sc-alqw__stp { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   Móvil: hoja a pantalla completa, cabecera y pie fijos
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* Hoja anclada abajo y a la MEDIDA del contenido. Antes ocupaba los
	   100dvh siempre y con una pantalla corta —la bifurcación, el éxito— se
	   veía media pantalla en blanco bajo el botón. Ahora la hoja crece con lo
	   que hay y solo llega al tope cuando de verdad no cabe, que es cuando el
	   cuerpo scrollea. El pie va pegado al borde inferior de la capa, y la
	   capa la ajusta el JS al visualViewport, así que con el teclado abierto
	   el botón sigue justo encima de él. */
	.sc-alqpop { padding: 0; align-items: flex-end; }

	.sc-alqpop__dialog {
		max-width: none;
		width: 100%;
		height: auto;
		max-height: 100%;
		border-radius: 18px 18px 0 0;
		transform: translateY(24px);
	}

	.sc-alqpop__back { background: rgba(24, 26, 30, 0.4); }
	.sc-alqpop__x { top: 10px; right: 10px; width: 40px; height: 40px; background: #fff; }

	/* Sin alturas al 100%: la hoja mide lo que mide su contenido y el tope
	   lo pone el max-height del diálogo. */
	.sc-alqpop__mount { min-height: 0; }
	.sc-alqw { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
	.sc-alqw__aside { display: none; }
	.sc-alqw__main { max-height: 100%; min-height: 0; }

	.sc-alqw__head { padding: 14px 58px 10px 18px; }
	.sc-alqw__head--cero { min-height: 0; padding-top: 0; }
	.sc-alqw__back { margin-bottom: 6px; }

	.sc-alqw__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		padding: 10px 18px;
		background: var(--beige, #fbf5e9);
		border-bottom: 1px solid var(--beige-dark, #f0e8d5);
		margin-top: 12px;
	}

	.sc-alqw__badges li { font-size: 11.5px; padding-left: 16px; }

	.sc-alqw__body { padding: 18px 18px 22px; }
	.sc-alqw__title { font-size: 24px; }
	.sc-alqw__title--s0 { font-size: 28px; padding-right: 40px; }
	.sc-alqw__sub { font-size: 13.5px; margin-bottom: 18px; }

	.sc-alqw__camino { grid-template-columns: 44px 1fr 18px; gap: 12px; padding: 14px 14px; min-height: 84px; }
	.sc-alqw__camino-ico { width: 44px; height: 44px; }
	.sc-alqw__camino-txt b { font-size: 19px; }
	.sc-alqw__camino-txt em { font-size: 13px; }

	.sc-alqw__foot {
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
	}

	.sc-alqw__row { grid-template-columns: 1fr; gap: 0; }
	.sc-alqw__row--renta .sc-alqw__field { margin-bottom: 16px; }
	.sc-alqw__row--renta .sc-alqw__field:last-child { margin-bottom: 0; }
	.sc-alqw__hint--renta { margin-top: 6px; }

	.sc-alqw__field,
	.sc-alqw__row .sc-alqw__field { margin-bottom: 16px; }

	.sc-alqw__chips--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sc-alqw__servs { grid-template-columns: 1fr; }
	.sc-alqw__serv { min-height: 58px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
	.sc-alqw__serv b { flex: 0 0 auto; }
	.sc-alqw__serv em { flex: 1 1 auto; text-align: right; }
	/* En la pantalla 0 no hay cabecera: los badges no pueden meterse bajo la X. */
	.sc-alqw__head--cero + .sc-alqw__badges { padding-right: 64px; }
	.sc-alqw__inp--corto,
	.sc-alqw__suffix--corto { max-width: none; }

	.sc-alqw__ok { padding: 26px 18px 30px; }
	.sc-alqw__ok-btns { flex-direction: column; }
	.sc-alqw__ok-sum { grid-template-columns: 80px 1fr; }
}

@media (max-width: 380px) {
	.sc-alqw__chips { gap: 6px; }
	.sc-alqw__chip { padding: 8px 6px; font-size: 14px; }
	.sc-alqw__title { font-size: 22px; }
	.sc-alqw__title--s0 { font-size: 26px; }
	.sc-alqw__numrow { padding-left: 12px; }
	.sc-alqw__stp-val { min-width: 52px; font-size: 18px; }
}

/* Escritorio pequeño: el panel de confianza estorba más que ayuda */
@media (max-width: 900px) and (min-width: 769px) {
	.sc-alqw { grid-template-columns: 1fr; }
	.sc-alqw__aside { display: none; }
	.sc-alqpop__dialog { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-alqpop,
	.sc-alqpop__dialog,
	.sc-alqw__bar i,
	.sc-alqw__step-pane,
	.sc-alqw__ok-c,
	.sc-alqw__ok-p { transition: none !important; animation: none !important; }
	.sc-alqw__ok-c,
	.sc-alqw__ok-p { stroke-dashoffset: 0; }
}

/* ── Escritorio con poca altura (portátiles 768-820 px): el paso debe caber
   sin scroll. Se aprovecha casi todo el alto y se aprietan los espacios. ── */
@media (min-width: 769px) and (max-height: 840px) {
	.sc-alqpop__dialog,
	.sc-alqw__main { max-height: calc(100vh - 20px); }
	.sc-alqw__head { padding: 14px 66px 8px 30px; }
	.sc-alqw__body { padding: 12px 30px 14px; }
	.sc-alqw__foot { padding: 10px 30px 12px; }
	.sc-alqw__field,
	.sc-alqw__row .sc-alqw__field { margin-bottom: 10px; }
	.sc-alqw__numrow { margin-bottom: 8px; }
	.sc-alqw__camino { min-height: 80px; padding: 12px 16px; }
}

/* ════════════════════════════════════════════════════════════════
   V2 — ficha completa: equipamiento, condiciones, fotos y documentos
   ════════════════════════════════════════════════════════════════ */

/* ── Separador de bloque dentro de un paso («Equipamiento») ──────── */
.sc-alqw__sep {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__sep::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--borde, #e5e5e5);
}

/* ── Rejillas de chips propias de los pasos nuevos ───────────────── */
.sc-alqw__chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-alqw__chips--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Certificado energético: siete letras estrechas + dos etiquetas largas. */
.sc-alqw__chips--cee { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* Siete letras arriba; «En trámite» y «Exento» reparten la fila de abajo
   entera (4 + 3) para no dejar un hueco suelto a la derecha. */
.sc-alqw__chips--cee .sc-alqw__chip:not(.sc-alqw__chip--letra) { grid-column: span 3; }
.sc-alqw__chips--cee .sc-alqw__chip:nth-last-child(2) { grid-column: span 4; }
.sc-alqw__chip--letra { font-weight: 700; letter-spacing: 0.02em; }

/* Los chips de 6 columnas («2 meses») no pueden partir la palabra. */
.sc-alqw__chips--6 .sc-alqw__chip { padding-left: 4px; padding-right: 4px; font-size: 13.5px; }

.sc-alqw__hint--sup { margin: -8px 0 18px; }
.sc-alqw__hint--dur { margin: -10px 0 18px; }

/* Unidad del selector numérico de meses. */
.sc-alqw__stp-uni {
	margin-left: 2px;
	font-size: 13px;
	color: var(--gris-texto, #54585e);
}

/* ── Fotos y documentos ──────────────────────────────────────────── */
.sc-alqw__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sc-alqw__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	min-height: 96px;
	padding: 18px;
	border: 1.5px dashed var(--beige-dark, #f0e8d5);
	border-radius: 12px;
	background: var(--blanco, #fff);
	color: var(--negro, #333);
	font-size: 14.5px;
	font-weight: 600;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.sc-alqw__drop svg { color: var(--azul, #4a8fcc); }
.sc-alqw__drop em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--gris-texto, #54585e); }
.sc-alqw__drop:hover,
.sc-alqw__drop--over { border-color: var(--azul, #4a8fcc); background: var(--azul-light, rgba(74, 143, 204, 0.08)); }
.sc-alqw__drop:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }
.sc-alqw__drop[disabled] { opacity: 0.6; cursor: default; }
.sc-alqw__drop--doc { min-height: 84px; }

.sc-alqw__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.sc-alqw__thumbs li {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--beige, #fbf5e9);
}

.sc-alqw__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-alqw__thumb-x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.sc-alqw__thumb-x:hover { background: #c0392b; }
.sc-alqw__thumb-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── Lista de documentos ─────────────────────────────────────────── */
.sc-alqw__docs { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.sc-alqw__doc {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto 32px;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 10px;
	background: var(--blanco, #fff);
}

.sc-alqw__doc-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-radius: 7px;
	background: var(--beige, #fbf5e9);
	color: var(--azul, #4a8fcc);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.sc-alqw__doc-txt { display: block; min-width: 0; }

.sc-alqw__doc-txt b {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--negro, #333);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-alqw__doc-txt em { font-style: normal; font-size: 12px; color: var(--gris-texto, #54585e); }

.sc-alqw__doc-tipo {
	max-width: 190px;
	min-height: 38px;
	padding: 7px 9px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 8px;
	background: var(--blanco, #fff);
	color: var(--negro, #333);
	/* 16px en móvil: por debajo, iOS hace zoom al abrir el desplegable. */
	font-size: 13.5px;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
}

.sc-alqw__doc-tipo:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 1px; }

.sc-alqw__doc-x {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--beige, #fbf5e9);
	color: var(--gris-texto, #54585e);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sc-alqw__doc-x:hover { background: #fdecea; color: #c0392b; }
.sc-alqw__doc-x:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 1px; }

/* Aviso de ficheros rechazados (formato, peso, tope). */
.sc-alqw__aviso {
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	background: #fdf6e3;
	border: 1px solid #f3e2b8;
	font-size: 12.5px;
	line-height: 1.45;
	color: #8a6d3b;
}

.sc-alqw__aviso--ok { margin: 14px 0 0; text-align: left; }

/* Nota de privacidad de los documentos. */
.sc-alqw__privacidad {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--beige, #fbf5e9);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--gris-texto, #54585e);
}

.sc-alqw__privacidad svg { flex-shrink: 0; margin-top: 2px; color: var(--azul, #4a8fcc); }

/* Progreso de subida en la pantalla de éxito. */
.sc-alqw__ok-sub {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--azul, #4a8fcc);
	text-align: left;
}

/* El borrador avisa aparte de que los ficheros no se guardan. El color se
   fija a mano: `em` hereda el azul de los énfasis del sitio y aquí parecería
   un enlace que no lleva a ninguna parte. */
.sc-alqw__draft em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	color: var(--gris-texto, #54585e);
	opacity: 0.9;
}

@media (max-width: 768px) {
	/* Chips a 2-3 columnas: a 6 no cabe «3 meses» en un móvil de 360 px. */
	.sc-alqw__chips--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-alqw__chips--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sc-alqw__chips--cee { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sc-alqw__chips--cee .sc-alqw__chip:not(.sc-alqw__chip--letra) { grid-column: span 2; }

	.sc-alqw__sep { margin: 22px 0 16px; }
	.sc-alqw__hint--sup { margin: -6px 0 16px; }

	/* Documento: el selector de tipo baja a su propia línea. Las posiciones
	   son explícitas porque, dejando que la rejilla coloque sola, la «×»
	   caía debajo del selector en una tercera fila vacía. */
	.sc-alqw__doc {
		grid-template-columns: 38px minmax(0, 1fr) 32px;
		row-gap: 8px;
	}
	.sc-alqw__doc-ico { grid-area: 1 / 1; }
	.sc-alqw__doc-txt { grid-area: 1 / 2; }
	.sc-alqw__doc-x { grid-area: 1 / 3; }
	.sc-alqw__doc-tipo {
		grid-area: 2 / 1 / 3 / -1;
		max-width: none;
		width: 100%;
		min-height: 44px;
		font-size: 16px;
	}
}

@media (max-width: 380px) {
	.sc-alqw__chips--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-alqw__chips--cee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cláusula informativa de protección de datos. Va plegada: el aviso o la
   casilla de arriba recogen el consentimiento y esto es la información en
   capas, que debe estar sin comerse el formulario. */
.sc-alqw__rgpd {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--gris-texto, #54585e);
	text-align: left;
}

.sc-alqw__rgpd summary { cursor: pointer; font-weight: 600; }
.sc-alqw__rgpd summary:hover { color: var(--azul, #4a8fcc); }
.sc-alqw__rgpd p { margin: 8px 0 0; }