/* ==========================================================================
   Tema realstate · «Cuánto vale mi casa»
   Fuente de verdad: Figma jJVoIe4aGd0lMV9WF71NTC, página «08 · Home (propuesta)».
   Mobile-first. Un único corte a 60em (960 px): por debajo, maqueta móvil 375; por encima, escritorio 1440.
   Tokens de color, espacio y radio: tokens.css (copia literal de marca/tokens.css).
   ========================================================================== */

/* --- Fuentes autoalojadas (SIL OFL 1.1; licencias en assets/fonts/) --- */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Constantes de marca que no cambian con el tema (bocadillo, rótulos sobre foto) --- */
:root {
	--c-azul-noche: #1C1F2A;
	--c-blanco-roto: #FAF8F3;
	--c-lino: #EDE9DD;
	--c-cobre-hover: var(--c-cobre-700);
	--contenido: 1184px;
	--fraunces-ejes: "SOFT" 0, "WONK" 0, "opsz" 30;
	/* Escala fluida 375 → 1440 */
	--t-h1: clamp(3rem, 2.296rem + 3.005vw, 5rem);          /* 48 → 80 */
	--t-h2: clamp(1.875rem, 1.743rem + 0.563vw, 2.25rem);   /* 30 → 36 */
	--t-cuerpo: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);  /* 16 → 18 */
	--t-grande: clamp(1rem, 0.912rem + 0.376vw, 1.25rem);   /* 16 → 20 */
	--seccion-y: var(--space-48);
	--seccion-hueco: var(--space-32);
}
@media (min-width: 60em) {
	:root {
		--seccion-y: var(--space-96);
		--seccion-hueco: var(--space-48);
	}
}

/* --- Base --- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Regla fija de la casa: el móvil no «baila». En los DOS selectores, clip después de hidden. */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-fondo-pagina);
	color: var(--c-texto-fuerte);
	font-family: var(--font-cuerpo);
	font-size: var(--t-cuerpo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg { max-width: 100%; height: auto; display: block; }
.icono { flex: none; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
	outline: 2px solid var(--c-texto-fuerte);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.saltar {
	position: absolute;
	left: var(--space-16);
	top: -100px;
	z-index: 100;
	padding: var(--space-12) var(--space-16);
	background: var(--c-blanco-roto);
	color: var(--c-azul-noche);
	border-radius: var(--radius);
	font-weight: 600;
}
.saltar:focus { top: var(--space-16); }

main:focus { outline: none; }

.contenedor {
	width: min(100% - 2 * var(--space-16), var(--contenido));
	margin-inline: auto;
}

/* --- Tipografía común --- */
.antetitulo {
	font-family: var(--font-datos);
	font-size: 0.8125rem; /* «Datos/Etiqueta» 13 px (Figma P3-09) */
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-texto-suave);
}

.h2,
.hero__titulo,
.h1-interior {
	font-family: var(--font-titulares);
	font-weight: 400;
	font-variation-settings: var(--fraunces-ejes);
	color: var(--c-texto-fuerte);
}
.h2 {
	font-size: var(--t-h2);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.h1-interior { font-size: var(--t-h2); line-height: 1.15; margin-bottom: var(--space-24); }

.h4,
.firma__nombre,
.grupo__titulo,
.caminos__texto,
.pregunta__texto {
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	line-height: 1.3;
	font-size: 1.25rem;
}

.texto-base { font-size: var(--t-cuerpo); line-height: 1.6; max-width: 65ch; }
.texto-grande { font-size: var(--t-grande); line-height: 1.6; max-width: 65ch; }
.pie-foto { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.pie-foto--video { margin: var(--space-8) 0 0; }
.pie-foto__video { display: block; }

.encabezado {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}
@media (min-width: 60em) {
	.encabezado { gap: var(--space-16); }
}

/* --- Secciones --- */
.seccion { padding-block: var(--seccion-y); }
.seccion--superficie { background: var(--c-fondo-superficie); }
:where(.seccion > .contenedor) { display: flex; flex-direction: column; gap: var(--seccion-hueco); }

/* --- Botones (Figma 41:53): un solo primario por pantalla --- */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-height: 48px;
	padding-inline: var(--space-24);
	border-radius: var(--radius);
	font-family: var(--font-cuerpo);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.boton--primario {
	border: 0;
	background: var(--c-marca-principal);
	color: var(--c-marca-sobre-principal);
	min-height: 56px;
	padding-inline: var(--space-32);
}
.boton--primario:hover { background: var(--c-cobre-hover); }
.boton--secundario {
	border: 1px solid var(--c-texto-fuerte);
	background: transparent;
	color: var(--c-texto-fuerte);
}
.boton--secundario:hover { background: color-mix(in srgb, var(--c-texto-fuerte) 8%, transparent); }
.boton--terciario {
	padding-inline: 0;
	color: var(--c-texto-fuerte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--c-borde-control);
	align-self: flex-start;
}
.boton--terciario:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Cabecera (Figma 44:66 escritorio · 44:78 móvil · 46:600 menú abierto)
   ========================================================================== */
.cabecera {
	position: relative;
	z-index: 20;
	background: var(--c-fondo-pagina);
	border-bottom: 1px solid var(--c-borde-suave);
	color: var(--c-texto-fuerte);
}
.cabecera__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	min-height: 79px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 13.77px;
	text-decoration: none;
	color: var(--c-lino);
}
.logo__sello { width: 60px; height: 60px; }
.logo__nombre {
	font-family: var(--font-titulares);
	font-weight: 400;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 15.52px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
@media (max-width: 22.4375em) { /* < 360 px: que el logo y el botón quepan a 320 */
	.logo { gap: 10px; }
	.logo__sello { width: 44px; height: 44px; }
	.logo__nombre { font-size: 13px; letter-spacing: 0.08em; }
}

.cabecera__conmutador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.cabecera__icono-cerrar { display: none; }
.menu-abierto .cabecera__conmutador { border-color: var(--c-lino); }
.menu-abierto .cabecera__icono-abrir { display: none; }
.menu-abierto .cabecera__icono-cerrar { display: block; }

/* Panel móvil: fondo lino a pantalla completa bajo la barra */
.cabecera__menu {
	display: none;
	position: fixed;
	inset: 80px 0 0 0;
	overflow-y: auto;
	padding: var(--space-16);
	background: var(--c-lino);
	color: var(--c-azul-noche);
	flex-direction: column;
	gap: var(--space-32);
}
.menu-abierto { overflow: hidden; }
.menu-abierto .cabecera__menu { display: flex; }

.menu-principal { display: flex; flex-direction: column; }
.menu-principal a {
	display: flex;
	align-items: center;
	min-height: 64px;
	border-bottom: 1px solid #CFC8B6;
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.5rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--c-azul-noche);
}
.cabecera__boton {
	min-height: 64px;
	border-color: var(--c-azul-noche);
	color: var(--c-azul-noche);
}
.cabecera__menu :focus-visible { outline-color: var(--c-azul-noche); }
.cabecera__correo { font-size: 0.875rem; color: #555A52; }
.cabecera__correo a { text-decoration: none; }
/* Objetivo táctil ≥ 44 px sin mover nada (padding compensado con margen negativo) */
.cabecera__correo a { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* Pie: zona táctil real de 48 px por enlace, sin solaparse (Figma P3-06; el pie crece) */
.pie__columna a,
.pie__correo a { display: inline-block; padding-block: var(--space-12); }

/* Sin JavaScript (clase en <html>, la quita un script en línea del <head>) el menú se ve siempre, apilado bajo la barra (nunca inaccesible). */
.sin-js .cabecera__conmutador { display: none; }
.sin-js .cabecera__barra { flex-wrap: wrap; }
.sin-js .cabecera__menu { display: flex; position: static; width: 100%; background: transparent; color: var(--c-texto-fuerte); padding: 0 0 var(--space-16); }
.sin-js .menu-principal a, .sin-js .cabecera__boton { color: var(--c-texto-fuerte); border-color: var(--c-borde-suave); }

@media (min-width: 60em) {
	.cabecera__barra { min-height: 103px; }
	.logo { gap: 17.7px; }
	.logo__sello { width: 77px; height: 77px; }
	.logo__nombre { font-size: 19.96px; }
	.cabecera__conmutador { display: none; }
	.cabecera__menu,
	.sin-js .cabecera__menu,
	.menu-abierto .cabecera__menu {
		display: flex;
		position: static;
		flex-direction: row;
		align-items: center;
		gap: var(--space-32);
		padding: 0;
		overflow: visible;
		background: transparent;
		color: var(--c-texto-fuerte);
	}
	.menu-abierto { overflow: visible; }
	.menu-principal { flex-direction: row; gap: var(--space-32); }
	.menu-principal a,
	.sin-js .menu-principal a {
		min-height: 48px;
		border: 0;
		font-family: var(--font-cuerpo);
		font-weight: 400;
		font-variation-settings: normal;
		font-size: 1rem;
		line-height: 1.5;
		color: var(--c-texto-fuerte);
	}
	.menu-principal a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
	.cabecera__boton,
	.sin-js .cabecera__boton { min-height: 48px; border-color: var(--c-texto-fuerte); color: var(--c-texto-fuerte); }
	.cabecera__menu :focus-visible { outline-color: var(--c-texto-fuerte); }
	.cabecera__correo { display: none; }
}

/* ==========================================================================
   01 · Hero (Figma 45:46 · 46:256)
   ========================================================================== */
.hero { padding-block: var(--space-32) var(--space-48); }
.hero__columnas { display: flex; flex-direction: column; gap: var(--space-64); }
.hero__principal {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}
.hero__titulo {
	font-size: var(--t-h1);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.hero__entradilla {
	font-size: var(--t-grande);
	line-height: 1.6;
	color: var(--c-texto-suave);
	max-width: 640px;
}

.hero__acompana--movil { display: flex; flex-direction: column; gap: var(--space-24); }
.hero__avatar-fila { display: flex; align-items: center; gap: var(--space-12); }
.hero__avatar { width: 64px; height: 64px; border-radius: 50%; }
.hero__acompana--escritorio { display: none; }

@media (min-width: 60em) {
	.hero { padding-block: var(--space-64) var(--space-96); }
	.hero__columnas { flex-direction: row; align-items: center; }
	.hero__titulo { line-height: 1.05; letter-spacing: -0.015em; }
	.hero__acompana--movil { display: none; }
	.hero__acompana--escritorio {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		flex: 0 0 400px;
		width: 400px;
	}
	.hero__foto {
		width: 400px;
		height: 533px;
		object-fit: cover;
		border-radius: var(--radius);
	}
}

/* Bocadillo de Cristina (Figma 44:25) */
.bocadillo { display: flex; flex: 1 1 0; min-width: 0; }
.bocadillo--abajo { flex-direction: column; align-items: flex-start; flex: none; }
.bocadillo__globo {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius);
	background: var(--c-azul-noche);
	color: var(--c-blanco-roto);
	font-size: 1rem;
	line-height: 1.5;
}
.bocadillo--abajo .bocadillo__globo { align-self: stretch; }
.bocadillo--abajo .bocadillo__cola { margin-left: var(--space-24); width: 16px; height: 10px; }
.bocadillo--izquierda { align-items: center; }
.bocadillo--izquierda .bocadillo__cola { width: 10px; height: 16px; }

/* Tarjeta del formulario y campo (Figma 41:108, 41:163) */
.tarjeta-formulario {
	padding: var(--space-24) var(--space-16);
	border: 1px solid var(--c-borde-suave);
	border-radius: var(--radius);
	background: var(--c-fondo-superficie);
}
@media (min-width: 60em) {
	.tarjeta-formulario { padding: var(--space-32); }
}

.flujo { display: flex; flex-direction: column; gap: var(--space-16); }
.flujo__fila { display: flex; flex-direction: column; gap: var(--space-16); }
.flujo__boton { width: 100%; min-height: 56px; } /* P5-07 (Fernando, 25-10): campo «Grande» 56 + botón «Grande» 56 también en móvil, en home y T2 */
.flujo__ayuda,
.flujo__aviso { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.flujo__aviso { color: var(--c-texto-fuerte); }

.progreso { display: flex; flex-direction: column; gap: var(--space-8); }
.progreso__texto {
	font-family: var(--font-datos);
	font-size: 0.8125rem; /* «Datos/Etiqueta» 13 px (Figma P3-09) */
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-texto-suave);
}
.progreso__barras { display: flex; gap: var(--space-4); }
.progreso__barras span { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--c-borde-suave); }
.progreso__barras .es-actual { background: var(--c-texto-fuerte); }

.campo { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 1 0; min-width: 0; }
.campo__etiqueta { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--c-texto-fuerte); }
.campo__caja {
	width: 100%;
	height: 56px;
	padding: 0 var(--space-16);
	border: 1px solid var(--c-borde-control);
	border-radius: var(--radius);
	background: var(--c-fondo-superficie);
	color: var(--c-texto-fuerte);
	font-family: var(--font-cuerpo);
	font-size: 1rem;
	line-height: 1.5;
}
.campo--sugerencias { position: relative; }
.sugerencias {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: var(--space-4, 4px);
	background: var(--c-fondo-superficie); border: 1px solid var(--c-texto-fuerte); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 0 0 / .14); overflow: hidden;
}
.sugerencias[hidden] { display: none; }
.sugerencias__lista { list-style: none; margin: 0; padding: 0; }
.sugerencias__item {
	margin: 0; padding: 12px 16px; min-height: 48px; font-size: 1rem; line-height: 1.5;
	color: var(--c-texto-fuerte); text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.sugerencias__item:hover, .sugerencias__item[aria-selected="true"] { background: rgb(0 0 0 / .06); }
.sugerencias__marca { margin: 0; padding: 6px 16px; font-family: Roboto, Arial, sans-serif; font-size: .75rem; line-height: 1.5; color: #5e5e5e; text-align: right; } /* Atribución: estilo exigido por Google. */
.sugerencias__aviso { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.campo__caja::placeholder { color: var(--c-texto-suave); opacity: 1; }
.campo__caja:focus { outline: none; border-color: var(--c-texto-fuerte); box-shadow: 0 0 0 1px var(--c-texto-fuerte); }

@media (min-width: 60em) {
	.progreso { width: 240px; }
	.flujo__fila { flex-direction: row; align-items: flex-end; gap: var(--space-12); }
	.flujo__boton { width: auto; min-height: 56px; flex: none; }
	.campo__caja { height: 56px; font-size: 1.25rem; line-height: 1.6; }
}

/* Sellos de confianza (Figma 41:134) */
.sellos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-16);
	font-size: 0.875rem;
	line-height: 1.5;
}
.sellos li { display: flex; align-items: center; gap: var(--space-8); }
@media (min-width: 60em) {
	.sellos { gap: var(--space-32); }
}

/* ==========================================================================
   02 · Cómo funciona
   ========================================================================== */
.pasos { display: flex; flex-direction: column; gap: var(--space-24); }
.paso {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-top: var(--space-24);
	border-top: 1px solid var(--c-texto-fuerte);
}
.paso__numero,
.caminos__numero {
	font-family: var(--font-datos);
	font-size: 0.8125rem; /* «Datos/Etiqueta» 13 px (Figma P3-09) */
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--c-marca-principal);
}
.paso p { font-size: var(--t-cuerpo); color: var(--c-texto-suave); }
@media (min-width: 60em) {
	.pasos { flex-direction: row; gap: 0; }
	.paso { flex: 1 1 0; padding-right: var(--space-24); }
}

/* ==========================================================================
   03 · Una persona, no una calculadora
   ========================================================================== */
.persona__columnas { display: flex; flex-direction: column; gap: var(--space-32); }
.persona__media { display: flex; flex-direction: column; gap: var(--space-12); }
.marcador-video {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 3 / 4;
}
.marcador-video__foto { width: 100%; height: 100%; object-fit: cover; }
.marcador-video__rotulo {
	position: absolute;
	margin: 0;
	left: var(--space-16);
	bottom: var(--space-16);
	padding: var(--space-8) var(--space-12);
	border-radius: var(--radius);
	background: var(--c-azul-noche);
	color: var(--c-blanco-roto);
	font-size: 0.875rem;
	line-height: 1.5;
}
.video-asesora {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--c-azul-noche);
}
.persona__texto { display: flex; flex-direction: column; gap: var(--space-16); }
.persona__texto .texto-base { max-width: 580px; }
.firma { display: flex; flex-direction: column; gap: var(--space-4); }
.firma__cargo { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
@media (min-width: 60em) {
	.persona__columnas { flex-direction: row; align-items: center; gap: var(--space-96); }
	.persona__media { flex: 0 0 480px; }
	.persona__texto { flex: 1 1 0; min-width: 0; gap: var(--space-24); }
}

/* ==========================================================================
   04 · Qué recibes (en móvil la nota va tras la lista; en escritorio, bajo el título)
   ========================================================================== */
.que-recibes__rejilla { display: grid; gap: var(--space-32); }
.lista-check li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	padding-block: var(--space-16);
	border-bottom: 1px solid var(--c-borde-suave);
	font-size: var(--t-cuerpo);
	line-height: 1.6;
}
.lista-check .icono { margin-top: 1px; }
.nota {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-16);
	border-radius: var(--radius);
	background: var(--c-fondo-pagina);
	color: var(--c-texto-suave);
	font-size: var(--t-cuerpo);
	line-height: 1.6;
}
@media (min-width: 60em) {
	.que-recibes .que-recibes__rejilla {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 560px;
		grid-template-rows: auto 1fr;
		grid-template-areas: "enc lista" "nota lista";
		column-gap: var(--space-96);
		row-gap: var(--space-32);
	}
	.que-recibes .encabezado { grid-area: enc; }
	.que-recibes .lista-check { grid-area: lista; }
	.que-recibes .nota { grid-area: nota; align-self: start; padding: var(--space-24); gap: var(--space-16); }
}

/* ==========================================================================
   05 · Precios por zona (tarjeta en escritorio, fila en móvil: mismo <dl>)
   ========================================================================== */
.grupo { display: flex; flex-direction: column; gap: var(--space-12); }
.grupo__foto { width: 100%; object-fit: cover; border-radius: var(--radius); }
.grupo--noroeste .grupo__foto { aspect-ratio: 343 / 193; }
.grupo--madrid .grupo__foto { aspect-ratio: 343 / 229; }
.grupo__cuerpo { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.grupo__titulo { font-size: 1.5rem; }
.grupo__nota { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.grupo__referencia { font-size: 1rem; line-height: 1.5; color: var(--c-texto-fuerte); } /* M1: visible en todos los anchos (la nota se oculta en escritorio) */

.zonas { border-top: 1px solid var(--c-borde-suave); }
.zona {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "nombre variacion" "precio variacion";
	column-gap: var(--space-16);
	row-gap: var(--space-4);
	align-items: center;
	min-height: 64px;
	padding: var(--space-12) 36px var(--space-12) 0;
	border-bottom: 1px solid var(--c-borde-suave);
}
.zona__nombre { grid-area: nombre; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.zona__enlace { text-decoration: none; color: var(--c-texto-fuerte); }
.zona__enlace::after { content: ""; position: absolute; inset: 0; }
.zona__enlace:focus-visible { outline: none; }
.zona:focus-within { outline: 2px solid var(--c-texto-fuerte); outline-offset: 2px; }
.zona__flecha { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.zona__texto { color: var(--c-texto-fuerte); } /* zona sin página pública: sin enlace ni flecha (C1-03) */
.zona__precio {
	grid-area: precio;
	font-family: var(--font-datos);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5;
	white-space: nowrap;
}
.zona__precio--sin-dato { font-family: var(--font-cuerpo); font-weight: 400; font-size: 0.875rem; color: var(--c-texto-suave); white-space: normal; }
.zona__variacion { grid-area: variacion; font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); white-space: nowrap; }
.zona__periodo { display: none; }

.precios__pie { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.fuente { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }

@media (min-width: 60em) {
	.grupo { flex-direction: row; align-items: flex-start; gap: var(--space-48); }
	.grupo__foto { flex: 0 0 280px; width: 280px; }
	.grupo--noroeste .grupo__foto { aspect-ratio: 280 / 187; }
	.grupo--madrid .grupo__foto { aspect-ratio: 280 / 373; }
	.grupo__cuerpo { flex: 1 1 0; gap: var(--space-16); }
	.grupo__cuenta { font-family: var(--font-cuerpo); font-weight: 400; font-variation-settings: normal; font-size: 1rem; line-height: 1.5; color: var(--c-texto-suave); margin-left: var(--space-4); }
	.grupo__nota { display: none; }

	.zonas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); border: 0; }
	.zona {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-8);
		min-height: 0;
		padding: var(--space-24);
		border: 1px solid var(--c-borde-suave);
		border-radius: var(--radius);
		background: var(--c-fondo-superficie);
		transition: border-color 0.15s ease;
	}
	.zona:not(.zona--sin-pagina):hover { border-color: var(--c-borde-control); }
	.zona { min-height: 156px; } /* la tarjeta sin cifra no puede quedar más baja (Figma 44:40) */
	.zona__nombre {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-12);
		font-family: var(--font-titulares);
		font-variation-settings: var(--fraunces-ejes);
		font-size: 1.25rem;
		line-height: 1.3;
	}
	.zona__flecha { position: static; transform: none; }
	.zona__precio { font-size: 2.25rem; line-height: 1.2; }
	.zona__precio--sin-dato { font-size: 1.125rem; line-height: 1.6; padding-block: 0.1em; }
	.zona__variacion { color: var(--c-texto-fuerte); }
	.zona__periodo { display: inline; }

	.precios__pie { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-24); }
}

/* ==========================================================================
   06 · Después de la valoración
   ========================================================================== */
.despues__columnas { display: flex; flex-direction: column; gap: var(--space-32); }
.despues__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.despues__texto { display: flex; flex-direction: column; gap: var(--space-32); }
.caminos li {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-block: var(--space-16);
	border-bottom: 1px solid var(--c-borde-suave);
}
.caminos__texto { flex: 1 1 0; }
@media (min-width: 60em) {
	.despues__columnas { flex-direction: row; align-items: center; gap: var(--space-96); }
	.despues__foto { flex: 0 0 544px; width: 544px; height: 408px; }
	.despues__texto { flex: 1 1 0; min-width: 0; gap: var(--space-24); }
}

/* ==========================================================================
   07 · Tu dato es tuyo (data-tema="oscuro")
   ========================================================================== */
.dato-tuyo { background: var(--c-fondo-pagina); color: var(--c-texto-fuerte); }
.dato-tuyo__columnas { display: flex; flex-direction: column; gap: var(--space-24); }
.dato-tuyo__titulo { display: flex; flex-direction: column; gap: var(--space-24); }
.dato-tuyo__titulo .icono { width: 32px; height: 32px; }
@media (min-width: 60em) { .dato-tuyo__titulo .icono { width: 40px; height: 40px; } }
@media (min-width: 60em) {
	.dato-tuyo .dato-tuyo__columnas { flex-direction: row; align-items: flex-start; gap: var(--space-96); }
	.dato-tuyo__titulo { flex: 0 0 480px; }
	.dato-tuyo .texto-grande { flex: 1 1 0; }
}

/* ==========================================================================
   08 · Preguntas frecuentes (<details>)
   ========================================================================== */
.faq__columnas { display: flex; flex-direction: column; gap: var(--space-16); }
.pregunta {
	display: flex;
	flex-direction: column;
	padding-block: var(--space-24);
	border-bottom: 1px solid var(--c-borde-suave);
}
.pregunta__boton {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	min-height: 48px;
	list-style: none;
	cursor: pointer;
}
.pregunta__boton::-webkit-details-marker { display: none; }
.pregunta__boton::marker { content: ""; }
.pregunta__texto { flex: 1 1 0; }
.pregunta__menos,
.pregunta[open] .pregunta__mas { display: none; }
.pregunta[open] .pregunta__menos { display: block; }
.pregunta__respuesta {
	margin-top: var(--space-12);
	font-size: var(--t-cuerpo);
	line-height: 1.6;
	color: var(--c-texto-suave);
	max-width: 65ch;
}
@media (min-width: 60em) {
	.faq__columnas { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-96); }
	.faq .encabezado { flex: 0 0 384px; }
	.faq__lista { flex: 0 1 620px; min-width: 0; }
}

/* ==========================================================================
   09 · Cierre
   ========================================================================== */
.cierre__caja { max-width: 760px; gap: var(--space-16); }
.cierre__sello { width: 72px; height: 72px; align-self: center; }
.cierre .encabezado { text-align: center; gap: var(--space-16); }
.cierre .flujo { gap: var(--space-16); }
@media (min-width: 60em) {
	.cierre .cierre__caja,
	.cierre .encabezado,
	.cierre .flujo { gap: var(--space-24); }
}

/* ==========================================================================
   Pie (Figma 45:371 · 46:557)
   ========================================================================== */
.pie {
	background: var(--c-fondo-pagina);
	color: var(--c-texto-fuerte);
	padding-block: var(--space-48);
}
.pie .contenedor { display: flex; flex-direction: column; gap: var(--space-48); }
.pie__superior { display: flex; flex-direction: column; gap: var(--space-32); }
.pie .contenedor { gap: var(--space-32); }
.logo--pie { gap: 14.7px; }
.logo--pie .logo__sello { width: 64px; height: 64px; }
.logo--pie .logo__nombre { font-size: 16.6px; }
.pie__columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-32) var(--space-24);
}
.pie__columna { display: flex; flex-direction: column; gap: var(--space-12); }
.pie__rotulo {
	font-family: var(--font-datos);
	font-weight: 400;
	font-size: 0.8125rem; /* «Datos/Etiqueta» 13 px (Figma P3-09) */
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-texto-suave);
}
.pie__columna ul { display: flex; flex-direction: column; gap: 0; font-size: 1rem; line-height: 1.5; }
.pie__columna a {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-lino);
	text-decoration: none;
}
.pie__columna a:hover,
.pie__correo a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.pie__inferior {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-top: var(--space-24);
	border-top: 1px solid var(--c-borde-suave);
}
.pie__correo { font-size: 1rem; line-height: 1.5; }
.pie__correo a { color: var(--c-lino); text-decoration: none; }
.pie__nota { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.pie :focus-visible { outline-color: var(--c-lino); }

@media (min-width: 60em) {
	.pie { padding-block: var(--space-96) var(--space-48); }
	.pie .contenedor { gap: var(--space-48); }
	.logo--pie { gap: 16.5px; }
	.logo--pie .logo__sello { width: 72px; height: 72px; }
	.logo--pie .logo__nombre { font-size: 18.63px; }
	.pie__columnas { display: flex; flex-wrap: wrap; gap: var(--space-32) var(--space-48); }
	.pie__columna a { white-space: nowrap; }
	.pie__inferior { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-24); }
}

@media (min-width: 75em) { /* el pie en una fila solo cuando cabe (Figma a 1440) */
	.pie__superior { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-64); }
	.pie__columnas { flex-wrap: nowrap; gap: var(--space-64); }
}

/* ==========================================================================
   Interiores provisionales (index, 404) hasta P4b
   ========================================================================== */
.prosa { display: flex; flex-direction: column; gap: var(--space-24); max-width: 760px; }
.prosa p { max-width: 65ch; }
.error-404__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
.error-404__enlaces a { display: inline-flex; min-height: 48px; align-items: center; }

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Etiquetas a 13 px: cortes equilibrados (sin palabra suelta) y, a 320 px, rótulos del pie a 2 líneas para que las columnas arranquen a la vez */
.antetitulo, .pie__rotulo, .n13__grupo { text-wrap: balance; }
@media (max-width: 22.4375em) {
	.pie__rotulo { min-height: 3em; }
}