/* ════════════════════════════════════════════════════════════════════
   Valoración — popup/wizard sitewide (+ montaje inline en /valoracion/)

   Se carga en TODAS las páginas: no puede pesar ni pintar nada hasta que
   el JS abre el popup (el markup vive en un <template>). El modificador
   --inline reutiliza el mismo componente dentro de la página, sin modal.
   ════════════════════════════════════════════════════════════════════ */

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

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

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

/* El componente enseña y esconde bloques con el atributo `hidden`: gana
   siempre, aunque la regla del bloque sea display:flex o display:grid. */
.sc-valpop[hidden],
.sc-valw [hidden] { display: none !important; }

/* ── Capa modal ──────────────────────────────────────────────────── */
.sc-valpop {
	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-valpop--visible { opacity: 1; }

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

.sc-valpop__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-valpop--visible .sc-valpop__dialog { transform: none; }

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

.sc-valpop__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, transform 0.2s ease;
}

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

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

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

/* ── Componente ──────────────────────────────────────────────────── */
.sc-valw {
	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-valw__aside {
	background: var(--beige, #fbf5e9);
	border-right: 1px solid var(--beige-dark, #f0e8d5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

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

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

.sc-valw__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-valw__aside-in { padding: 18px 24px 26px; overflow-y: auto; }

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

.sc-valw__aside-text { font-size: 13.5px; color: var(--gris-texto, #54585e); }

.sc-valw__stats {
	display: flex;
	gap: 14px;
	margin: 20px 0;
	padding: 14px 0;
	border-top: 1px solid var(--beige-dark, #f0e8d5);
	border-bottom: 1px solid var(--beige-dark, #f0e8d5);
}

.sc-valw__stats li { flex: 1; min-width: 0; }

.sc-valw__stats b {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--azul, #4a8fcc);
	line-height: 1.1;
}

.sc-valw__stats span {
	display: block;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--gris-texto, #54585e);
	margin-top: 2px;
}

.sc-valw__tl-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto, #54585e);
	margin-bottom: 10px;
}

.sc-valw__tl { counter-reset: scvtl; }

.sc-valw__tl li {
	counter-increment: scvtl;
	position: relative;
	padding: 0 0 14px 30px;
	font-size: 13px;
	color: var(--negro, #333);
}

.sc-valw__tl li::before {
	content: counter(scvtl);
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--azul, #4a8fcc);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sc-valw__tl li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 9.5px;
	top: 22px;
	bottom: 4px;
	width: 1px;
	background: var(--beige-dark, #f0e8d5);
}

.sc-valw__quote {
	border-top: 1px solid var(--beige-dark, #f0e8d5);
	padding-top: 14px;
}

.sc-valw__quote blockquote {
	font-family: 'Cormorant Garamond', serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--negro, #333);
}

.sc-valw__quote figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: var(--gris-texto, #54585e);
}

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

.sc-valw__head {
	position: relative;
	/* El hueco bajo la barra evita que el contenido, al scrollear, quede
	   pegado a ella y se lea como parte del paso. */
	padding: 20px 66px 12px 30px;
	flex-shrink: 0;
}

.sc-valw__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-valw__back:hover { color: var(--negro, #333); background: var(--beige, #fbf5e9); }
.sc-valw__back:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 1px; }

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

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

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

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

.sc-valw__bar i {
	display: block;
	height: 100%;
	width: 33%;
	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) */
.sc-valw__badges { display: none; }

.sc-valw__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-valw__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-valw__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-valw__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

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

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

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

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

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

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

.sc-valw__label--sm { font-size: 12.5px; font-weight: 500; color: var(--gris-texto, #54585e); }
.sc-valw__opt { font-weight: 400; color: var(--gris-texto, #54585e); }

.sc-valw__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-valw__inp::placeholder { color: #9aa0a8; }

.sc-valw__inp:hover { border-color: #d3d7dd; }

.sc-valw__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-valw__inp[aria-invalid="true"] { border-color: #e74c3c; }
.sc-valw__inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12); }

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

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

.sc-valw__suffix { position: relative; }
.sc-valw__suffix .sc-valw__inp { padding-right: 46px; }

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

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

.sc-valw__hint--top { margin: -4px 0 10px; }

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

/* ── Chips y selectores numéricos ──────────────────────────────────
   Rejilla de tarjetas de igual ancho, 3 columnas TAMBIÉN en móvil: con dos
   por fila el paso «Tu vivienda» pedía dos pantallas y media de scroll solo
   para elegir población y tipo. Con tres, cada bloque baja de 5 filas a 3 y
   el paso entero cabe en pantalla y media.
   El texto va centrado y el check de «elegida» se retira a la esquina: así
   la tarjeta no tiene que reservar 32px de padding a la derecha y caben
   «Monóvar» o «Bungalow» a 15px sin partirse.
   La opción elegida no cambia de tamaño — el anillo de 2px es un box-shadow
   interior, el borde de 1px se vuelve transparente. */
.sc-valw__chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

/* Franja horaria: 4 opciones, mejor 2×2 que 3+1 huérfano. */
.sc-valw__chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sc-valw__chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 46px: área táctil holgada (el objetivo real es la tarjeta entera) */
	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-valw__chip:hover {
	border-color: var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
}

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

.sc-valw__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, sin cargar otro SVG
   y sin robarle ancho al texto. */
.sc-valw__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);
}

/* «Costa»: la fila secundaria vive bajo su propia etiqueta, dentro del mismo
   ritmo de rejilla pero un punto más pequeña para que se lea como detalle. */
.sc-valw__costa { margin-top: 10px; }

.sc-valw__sublabel {
	display: block;
	margin-bottom: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-texto, #54585e);
}

.sc-valw__chips--sub { gap: 8px; }

.sc-valw__chip--sm {
	min-height: 44px;
	padding: 8px 8px;
	font-size: 13.5px;
}

.sc-valw__chip--sm[aria-pressed="true"]::after { top: 7px; right: 6px; }

/* Habitaciones y baños siguen siendo un selector numérico en fila, pero con
   el mismo estado de «elegida» que las tarjetas. */
.sc-valw__nums { display: flex; gap: 8px; }

.sc-valw__num {
	flex: 1;
	min-width: 44px;
	min-height: 48px;
	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: 600;
	color: var(--negro, #333);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

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

.sc-valw__num[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);
}

/* ── Planta: selector numérico en una línea ────────────────────────
   Seis chips («Bajo», «1ª»… «Ático») ocupaban dos filas para un dato que es
   un número y que además se contradecía con el tipo de inmueble (había que
   elegir «Ático» dos veces). Ahora es una fila: etiqueta a la izquierda y
   stepper a la derecha, con el mismo lenguaje visual que las tarjetas. */
.sc-valw__planta {
	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);
}

.sc-valw__planta .sc-valw__label { margin-bottom: 0; }

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

.sc-valw__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-valw__stp:hover:not(:disabled) {
	border-color: var(--azul, #4a8fcc);
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
	color: var(--azul, #4a8fcc);
}

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

/* El icono no puede ser el objetivo del clic: en un <svg> `className` es un
   SVGAnimatedString y el detector de «rage click» de tracker.js reventaba al
   pulsar varias veces seguidas (que es justo lo que se hace en un stepper). */
.sc-valw__stp svg { pointer-events: none; }

/* El valor: ancho fijo para que «Bajo», «—» y «10ª» no muevan los botones */
.sc-valw__stp-val {
	display: block;
	min-width: 88px;
	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-valw__stp-val:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }
.sc-valw__stp-val[data-vacio="1"] { color: #9aa0a8; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
	.sc-valw__chip,
	.sc-valw__modo,
	.sc-valw__stp,
	.sc-valw__num { transition: none; }
}

/* ── Modalidad: online / presencial ──────────────────────────────────
   Dos tarjetas de igual ancho, también en móvil: es la primera decisión del
   embudo y tiene que verse de un vistazo. Mismo lenguaje visual que los chips
   (borde de 1px, elegida con anillo azul de 2px por dentro y check). */
.sc-valw__modos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.sc-valw__modo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 68px;
	padding: 10px 12px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: var(--radio-sm, 8px);
	background: var(--blanco, #fff);
	font-family: 'DM Sans', sans-serif;
	color: var(--negro, #333);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sc-valw__modo-ico {
	flex: 0 0 auto;
	color: var(--azul, #4a8fcc);
}

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

.sc-valw__modo-txt b {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.25;
}

/* Una de las dos líneas secundarias sobra según el ancho (ver el partial).
   Van con el padre por delante para ganarle en especificidad a la regla
   `.sc-valw__modo-txt em` de aquí abajo, que si no las enseñaba las dos. */
.sc-valw__modo-txt .sc-valw__modo-corta { display: none; }

.sc-valw__modo-txt em {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.3;
	color: var(--gris-texto, #54585e);
}

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

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

.sc-valw__modo[aria-checked="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-valw__modo[aria-checked="true"] .sc-valw__modo-txt b { color: var(--azul, #4a8fcc); }

/* Mismo check en la esquina que los chips elegidos. */
.sc-valw__modo[aria-checked="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);
}

/* Visita presencial: agrupada en su propio bloque para que no se lea como
   dos campos sueltos entre el email y las franjas horarias. */
.sc-valw__visita {
	padding: 14px 16px 4px;
	border-radius: 12px;
	background: var(--beige, #fbf5e9);
}

.sc-valw__visita .sc-valw__hint { margin-bottom: 14px; }

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

.sc-valw__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;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

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

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

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

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

.sc-valw__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-valw__thumb-x:hover { background: #c0392b; }

.sc-valw__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;
}

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

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

.sc-valw__check a { color: var(--azul, #4a8fcc); text-decoration: underline; }

.sc-valw__check input[aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 2px; }

.sc-valw__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding-top: 4px;
}

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

.sc-valw__trust li::before,
.sc-valw__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-valw__foot {
	flex-shrink: 0;
	padding: 14px 30px 18px;
	border-top: 1px solid var(--borde, #e5e5e5);
	background: var(--blanco, #fff);
}

.sc-valw__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-valw__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;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

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

.sc-valw__legal {
	margin-top: 8px;
	font-size: 11.5px;
	line-height: 1.4;
	text-align: center;
	color: var(--gris-texto, #54585e);
}

/* ── Pantalla de éxito ───────────────────────────────────────────── */
.sc-valw__ok {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 30px 30px 34px;
	text-align: center;
}

.sc-valw__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-valw__ok-c,
.sc-valw__ok-p {
	stroke: currentColor;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

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

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

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

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

.sc-valw__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-valw__ok-steps { text-align: left; }

.sc-valw__ok-steps li {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid var(--borde, #e5e5e5);
	font-size: 13.5px;
	color: var(--negro, #333);
}

.sc-valw__ok-steps li:last-child { border-bottom: 0; }

.sc-valw__ok-steps b {
	font-size: 12px;
	font-weight: 700;
	color: var(--azul, #4a8fcc);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sc-valw__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-valw__ok-sum dt { font-weight: 600; color: var(--gris-texto, #54585e); }
.sc-valw__ok-sum dd { color: var(--negro, #333); overflow-wrap: anywhere; }

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

/* Los dos botones del cierre hablan el idioma de la marca: «Llamar» es el
   primario azul (hereda .sc-valw__cta) y «WhatsApp» el secundario en outline.
   Ni verde de WhatsApp ni negro: desentonaban con la paleta corporativa. */
.sc-valw__cta--wa {
	background: var(--blanco, #fff);
	color: var(--azul, #4a8fcc);
	box-shadow: inset 0 0 0 1px var(--borde, #e5e5e5);
}
.sc-valw__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-valw__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-valw__ok-close:hover { color: var(--negro, #333); }

/* ── Montaje inline en /valoracion/ ──────────────────────────────── */
.sc-valw--inline {
	max-width: 980px;
	margin: 0 auto 56px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--sombra, 0 2px 16px rgba(0, 0, 0, 0.08));
	background: var(--blanco, #fff);
}

.sc-valw--inline .sc-valw__main { max-height: none; }
.sc-valw--inline .sc-valw__body { overflow: visible; }
.sc-valw--inline .sc-valw__ok { overflow: visible; }
.sc-valw--inline .sc-valw__head { padding-right: 30px; }
.sc-valw--inline .sc-valw__ok-close { display: none; }

/* Destello al llegar desde un CTA de la propia página: en /valoracion/ el
   botón de la cabecera no abre un segundo wizard, lleva a este. Sin la señal,
   el scroll suave parecía que el clic no había hecho nada. */
.sc-valw--destacado {
	animation: sc-valw-destello 1.6s ease-out;
}

@keyframes sc-valw-destello {
	0%   { box-shadow: 0 0 0 0 rgba(74, 143, 204, 0); }
	18%  { box-shadow: 0 0 0 6px rgba(74, 143, 204, .28); }
	100% { box-shadow: var(--sombra, 0 2px 16px rgba(0, 0, 0, 0.08)); }
}

@media (prefers-reduced-motion: reduce) {
	/* Sin parpadeo: un borde estable durante el mismo rato dice lo mismo. */
	.sc-valw--destacado { animation: none; box-shadow: 0 0 0 3px rgba(74, 143, 204, .35); }
}

/* ── Tarjeta de inicio (/valoracion/ en móvil) ────────────────────────
   Sustituye al wizard incrustado: solo promete y abre el popup a pantalla
   completa. Mismo material que el resto —marco claro, sombra suave— para que
   no parezca un banner pegado. */
.sc-valw-start {
	margin: 0 auto 40px;
	padding: 22px 20px 20px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 16px;
	background: var(--blanco, #fff);
	box-shadow: var(--sombra, 0 2px 16px rgba(0, 0, 0, 0.08));
	text-align: center;
}

.sc-valw-start__title {
	margin: 0 0 8px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--negro, #333);
}

.sc-valw-start__desc {
	margin: 0 0 16px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--gris-texto, #54585e);
}

/* Los tres avales, en columna y alineados a la izquierda: en una fila a 390px
   se partían en tres renglones sueltos que no se leían como lista. */
.sc-valw-start__badges {
	margin: 0 0 18px;
	padding: 0 0 0 2px;
	list-style: none;
	display: grid;
	gap: 7px;
	text-align: left;
}

.sc-valw-start__badges li {
	position: relative;
	padding-left: 24px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--negro, #333);
}

/* Check dibujado con dos bordes: ni un SVG más que descargar. */
.sc-valw-start__badges li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 4px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--azul, #4a8fcc);
	border-bottom: 2px solid var(--azul, #4a8fcc);
	transform: rotate(-45deg);
}

.sc-valw-start__btn {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--radio-sm, 8px);
	background: var(--azul, #4a8fcc);
	font-family: 'DM Sans', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sc-valw-start__btn:hover { background: var(--azul-hover, #3a7fb8); }
.sc-valw-start__btn:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 3px; }

.sc-valw-start__time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: var(--gris-texto, #54585e);
}

@media (max-width: 640px) {
	/* .sc-val-inline pierde su padding a este ancho: lo pone la tarjeta. */
	.sc-valw-start { margin: 0 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-valw-start__btn { transition: none; }
}

/* Aviso sin JavaScript (dentro de #scValInline; el JS vacía el contenedor
   al montar, así que este párrafo solo se ve cuando de verdad no hay JS). */
.sc-val-inline__noscript {
	max-width: 720px;
	margin: 0 auto 56px;
	padding: 18px 20px;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 14px;
	background: var(--gris-fondo, #f7f7f7);
	color: var(--gris-texto, #54585e);
	font-size: 15px;
	line-height: 1.55;
	text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   Móvil: hoja a pantalla completa, cabecera y pie fijos
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* En móvil el ancho de media tarjeta no da para icono + texto en fila:
	   el título partía en dos y las dos tarjetas quedaban descuadradas.
	   Icono arriba y texto debajo: cada frase gana la línea entera. */
	.sc-valw__modo-txt .sc-valw__modo-larga { display: none; }
	.sc-valw__modo-txt .sc-valw__modo-corta { display: block; }

	.sc-valw__modo {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		min-height: 64px;
		padding: 11px 12px 12px;
	}

	.sc-valpop { padding: 0; }

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

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

	/* La hoja se ajusta al viewport visual: con el teclado abierto, el
	   campo activo no queda debajo del pie (ver ajustarAlViewport en JS). */
	.sc-valpop--teclado .sc-valpop__dialog { height: var(--sc-valpop-vh, 100dvh); }

	/* Alturas encadenadas hasta el cuerpo scrollable: sin ellas el pie con
	   el botón principal se va por debajo del borde de la pantalla. */
	.sc-valpop__mount { height: 100%; min-height: 0; }
	.sc-valw { grid-template-columns: 1fr; grid-template-rows: 100%; height: 100%; min-height: 0; }
	.sc-valw__aside { display: none; }
	.sc-valw__main { max-height: none; height: 100%; min-height: 0; }

	.sc-valw__head { padding: 14px 58px 10px 18px; }
	.sc-valw__back { margin-bottom: 6px; }

	.sc-valw__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-valw__badges li { font-size: 11.5px; padding-left: 16px; }

	.sc-valw__body { padding: 18px 18px 22px; }
	.sc-valw__title { font-size: 24px; }
	.sc-valw__sub { font-size: 13.5px; margin-bottom: 18px; }

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

	.sc-valw__row { grid-template-columns: 1fr; gap: 0; }

	/* Un punto menos de aire entre bloques: con las tarjetas a 3 columnas
	   lo que sobra es margen, no contenido. */
	.sc-valw__field,
	.sc-valw__row .sc-valw__field { margin-bottom: 16px; }

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

	/* Inline en móvil: sin marco, ocupa el ancho de la página */
	.sc-valw--inline {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		margin-bottom: 32px;
	}
}

@media (max-width: 380px) {
	.sc-valw__chips { gap: 6px; }
	.sc-valw__modos { gap: 6px; }
	.sc-valw__modo { padding: 10px 9px; gap: 7px; }
	.sc-valw__chip { padding: 8px 6px; font-size: 14px; }
	.sc-valw__chip--sm { padding: 7px 5px; font-size: 12.5px; }
	.sc-valw__title { font-size: 22px; }
	.sc-valw__planta { padding-left: 12px; }
	.sc-valw__stp-val { min-width: 76px; font-size: 18px; }
}

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

@media (prefers-reduced-motion: reduce) {
	.sc-valpop,
	.sc-valpop__dialog,
	.sc-valw__bar i,
	.sc-valw__step-pane,
	.sc-valw__ok-c,
	.sc-valw__ok-p { transition: none !important; animation: none !important; }
	.sc-valw__ok-c,
	.sc-valw__ok-p { stroke-dashoffset: 0; }
}

/* ── Escritorio con poca altura (portátiles 768-820 px): el paso 1 debe caber
   sin scroll. Se aprovecha casi todo el alto y se aprietan los espacios. ── */
@media (min-width: 769px) and (max-height: 840px) {
	.sc-valpop__dialog,
	.sc-valw__main { max-height: calc(100vh - 20px); }
	.sc-valw__head { padding: 14px 66px 8px 30px; }
	.sc-valw__body { padding: 12px 30px 14px; }
	.sc-valw__foot { padding: 10px 30px 12px; }
	.sc-valw__field,
	.sc-valw__row .sc-valw__field { margin-bottom: 10px; }
	.sc-valw__modo { min-height: 56px; padding: 8px 12px; }
}