/**
 * GIC Inmobiliaria — estilos del sitio.
 *
 * Orden del archivo:
 *   1. Variables (colores y tipografías del diseño)
 *   2. Base y utilidades
 *   3. Botones y etiquetas
 *   4. Encabezado y pie
 *   5. Inicio: hero, buscador, destacadas, cifras, proceso, cierre
 *   6. Tarjeta de propiedad
 *   7. Adaptación a tablet y celular
 */

/* ------------------------------------------------------------------ */
/* 1. Variables                                                        */
/* ------------------------------------------------------------------ */

/* Domine: tipografía de los títulos. Se sirve desde el propio tema (no desde
   Google) y es una fuente variable: un solo archivo cubre los grosores 400 a 700. */
@font-face {
	font-family: "Domine";
	src: url( "../fonts/Domine-Variable.woff2" ) format( "woff2" );
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--navy: #1f3a5f;
	--navy-dark: #152a46;
	--cream: #eaeae6;
	--gold: #d8c3a5;
	--olive: #969674;
	--borde: #d8d8d2;
	--texto: #1f3a5f;
	--texto-tenue: #6e6e6e;
	--blanco: #ffffff;

	--fuente-titulo: "Domine", Georgia, "Times New Roman", serif;
	--fuente-texto: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ancho: 1280px;
	--radio: 16px;
	--radio-sm: 12px;
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--texto);
	font-family: var(--fuente-texto);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

svg {
	width: 1em;
	height: 1em;
}

/* Red de seguridad: JavaScript oculta cosas poniendo el.hidden = true (el
   atributo "hidden"). Sin esto, cualquier clase que ya traiga su propio
   "display" (como .btn o .campo-formulario__error) le gana al atributo
   "hidden" en un empate de especificidad, y el elemento se sigue viendo
   aunque JavaScript diga que está oculto. Ya pasó dos veces en este tema. */
[hidden] {
	display: none !important;
}

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

.contenedor--angosto {
	max-width: 1024px;
}

.seccion {
	padding: 80px 0;
}

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

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--gold);
	color: var(--navy);
	border-radius: var(--radio-sm);
	font-weight: 600;
}

.antetitulo {
	margin: 0;
	color: var(--olive);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.antetitulo--centrado {
	text-align: center;
}

.antetitulo--gold {
	color: var(--gold);
	text-align: center;
}

.titulo-seccion {
	margin: 4px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
}

.titulo-seccion--centrado {
	text-align: center;
}

.aviso-vacio {
	margin: 40px 0 0;
	padding: 40px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
	color: var(--texto-tenue);
	text-align: center;
}

/* Texto suelto de páginas simples (avisos legales, etc.) — sin esto, los
   párrafos quedaban pegados y los links no se distinguían del texto normal. */
.entrada__contenido p {
	margin: 0 0 20px;
	line-height: 1.7;
}

.entrada__contenido ul,
.entrada__contenido ol {
	margin: 0 0 20px;
	padding-left: 24px;
	line-height: 1.7;
}

.entrada__contenido li {
	margin-bottom: 8px;
}

.entrada__contenido a {
	color: var(--olive);
	text-decoration: underline;
}

.entrada__contenido a:hover {
	color: var(--navy);
}

/* ------------------------------------------------------------------ */
/* 3. Botones y etiquetas                                              */
/* ------------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	border: 0;
	border-radius: var(--radio-sm);
	font-family: var(--fuente-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.btn svg {
	width: 16px;
	height: 16px;
}

/* Sin esto, un botón oculto vía JavaScript (el.hidden = true) seguiría
   viéndose: [hidden] y .btn pesan lo mismo, y .btn está declarado después. */
.btn[hidden] {
	display: none;
}

.btn--sm {
	padding: 10px 20px;
	font-size: 12px;
}

.btn--lg {
	padding: 16px 32px;
}

.btn--bloque {
	width: 100%;
}

.btn--navy {
	background: var(--navy);
	color: var(--cream);
}

.btn--navy:hover {
	background: var(--navy-dark);
}

.btn--gold {
	background: var(--gold);
	color: var(--navy);
	border-radius: 999px;
}

.btn--gold:hover {
	opacity: 0.9;
}

.btn--lg.btn--gold {
	border-radius: var(--radio-sm);
}

.btn--contorno {
	background: transparent;
	border: 2px solid var(--navy);
	color: var(--navy);
}

.btn--contorno:hover {
	background: var(--navy);
	color: var(--cream);
}

.btn--contorno-gold {
	background: transparent;
	border: 1px solid rgba( 216, 195, 165, 0.5 );
	color: var(--gold);
}

.btn--contorno-gold:hover {
	background: rgba( 216, 195, 165, 0.1 );
}

.etiqueta {
	position: absolute;
	top: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.etiqueta--navy {
	left: 12px;
	background: var(--navy);
	color: var(--cream);
}

.etiqueta--gold {
	right: 12px;
	background: var(--gold);
	color: var(--navy);
}

.pastilla {
	display: inline-block;
	padding: 7px 20px;
	border: 1px solid rgba( 216, 195, 165, 0.3 );
	border-radius: 999px;
	background: rgba( 216, 195, 165, 0.15 );
	color: var(--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 4. Encabezado y pie                                                 */
/* ------------------------------------------------------------------ */

.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	background: rgba( 31, 58, 95, 0.95 );
	backdrop-filter: blur( 12px );
}

/* Cuando quien visita el sitio tiene sesión abierta en el panel, WordPress
   pone su propia barra negra encima de todo (z-index muy por arriba del
   nuestro) — sin esto, tapa el logo y el botón de menú. Un visitante sin
   sesión nunca ve esa barra, así que esto solo importa para quien administra
   el sitio. La variable ya la calcula WordPress (32px en escritorio, 46px en
   celular); solo hay que correr el encabezado esa misma distancia hacia abajo. */
body.admin-bar .site-header {
	top: var( --wp-admin--admin-bar--height, 0px );
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--ancho);
	height: 72px;
	margin: 0 auto;
	padding: 0 24px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
}

.site-header__logo img {
	height: 56px;
	width: auto;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	color: rgba( 216, 195, 165, 0.85 );
	font-size: 14px;
	font-weight: 500;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.site-nav__list a:hover {
	color: var(--gold);
}

.site-nav__list .current-menu-item a,
.site-nav__list .current_page_item a {
	border-bottom-color: var(--gold);
	color: var(--gold);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--gold);
	cursor: pointer;
}

.site-header__toggle svg {
	width: 22px;
	height: 22px;
}

.site-nav-movil {
	padding: 16px 24px;
	border-top: 1px solid rgba( 216, 195, 165, 0.1 );
	background: var(--navy);
}

.site-nav-movil__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-movil__list a {
	display: block;
	padding: 10px 12px;
	border-left: 2px solid transparent;
	border-radius: 8px;
	color: rgba( 216, 195, 165, 0.85 );
	font-size: 14px;
	font-weight: 500;
}

.site-nav-movil__list .current-menu-item a {
	border-left-color: var(--gold);
	background: rgba( 255, 255, 255, 0.05 );
	color: var(--gold);
}

.site-footer {
	padding: 56px 0 0;
	background: var(--navy-dark);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 24px;
}

.site-footer__logo {
	height: 100px;
	width: auto;
	margin: 0 0 4px;
}

.site-footer__nombre {
	margin: 2px 0 0;
	color: var(--olive);
	font-size: 12px;
}

.site-footer__texto {
	max-width: 320px;
	margin: 16px 0 0;
	color: rgba( 234, 234, 230, 0.55 );
	font-size: 14px;
	line-height: 1.7;
}

.site-footer__titulo {
	margin: 0;
	color: var(--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-footer__lista {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	color: rgba( 234, 234, 230, 0.55 );
	font-size: 14px;
}

.site-footer__lista li + li {
	margin-top: 10px;
}

.site-footer__lista a:hover {
	color: var(--gold);
}

.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--ancho);
	margin: 40px auto 0;
	padding: 28px 24px 32px;
	border-top: 1px solid rgba( 216, 195, 165, 0.1 );
	color: rgba( 234, 234, 230, 0.35 );
	font-size: 12px;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal-lista {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ */
/* 5. Inicio                                                           */
/* ------------------------------------------------------------------ */

.hero {
	position: relative;
	overflow: hidden;
	padding: 180px 24px 96px;
	background: var(--navy);
}

.hero__fondo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.45;
}

.hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 31, 58, 95, 0.25 ), rgba( 31, 58, 95, 0.7 ) );
}

.hero__contenido {
	position: relative;
	max-width: 896px;
	margin: 0 auto;
	text-align: center;
}

.hero__titulo {
	margin: 24px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 60px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--cream);
}

.hero__titulo-cursiva {
	display: block;
	color: var(--gold);
	font-style: italic;
}

.hero__texto {
	max-width: 576px;
	margin: 24px auto 0;
	color: rgba( 234, 234, 230, 0.75 );
	font-size: 18px;
}

/* El buscador queda encimado sobre la parte baja del hero. */
.hero__buscador {
	position: relative;
	z-index: 10;
	margin-top: -71px;
	padding: 0 24px;
}

.buscador {
	max-width: 768px;
	margin: 0 auto;
	padding: 16px;
	border-radius: var(--radio);
	background: var(--blanco);
	box-shadow: 0 24px 48px -12px rgba( 21, 42, 70, 0.25 );
}

.toggle-operacion {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--radio-sm);
	background: var(--cream);
}

.toggle-operacion input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.toggle-operacion label {
	flex: 1;
	padding: 9px 16px;
	border-radius: 8px;
	color: var(--texto-tenue);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.toggle-operacion input:checked + label {
	background: var(--navy);
	color: var(--cream);
}

.toggle-operacion input:focus-visible + label {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.toggle-operacion--compacto {
	flex: 0 0 auto;
	background: var(--borde);
}

.toggle-operacion--compacto label {
	flex: 0 0 auto;
	padding: 8px 20px;
	font-size: 13px;
}

.buscador__campos {
	display: grid;
	/* Los campos se reparten el ancho: con menos filtros (sin precio, sin zona) crecen solos. */
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 12px;
	margin-top: 16px;
}

.campo__etiqueta {
	display: block;
	color: var(--texto-tenue);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.campo__control {
	width: 100%;
	margin-top: 6px;
	padding: 11px 12px;
	border: 0;
	border-radius: var(--radio-sm);
	background: var(--cream);
	color: var(--navy);
	font-family: var(--fuente-texto);
	font-size: 14px;
	outline: none;
}

.campo__control::placeholder {
	color: rgba( 31, 58, 95, 0.5 );
}

.campo__control:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

/* Lista desplegable con estilo propio, no la gris del navegador. */
.campo__select {
	position: relative;
}

.campo__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	cursor: pointer;
}

.campo__flecha {
	position: absolute;
	right: 12px;
	bottom: 13px;
	width: 16px;
	height: 16px;
	color: var(--navy);
	pointer-events: none;
	transition: transform 0.15s ease;
}

.campo__select.is-abierto .campo__flecha {
	transform: rotate( 180deg );
}

/* Desplegable a la medida (assets/js/custom-select.js): un botón con la
   opción actual y, al abrirlo, una lista blanca con sombra — igual al resto
   del sitio, en vez del recuadro gris de fábrica del navegador. */
.campo__disparador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	appearance: none;
	text-align: left;
	cursor: pointer;
}

.campo__opciones {
	position: absolute;
	z-index: 30;
	top: 100%;
	left: 0;
	right: 0;
	margin: 6px 0 0;
	padding: 4px 0;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	border: 1px solid var(--borde);
	border-radius: var(--radio-sm);
	background: var(--blanco);
	box-shadow: 0 20px 40px -12px rgba( 21, 42, 70, 0.25 );
}

.campo__opcion {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	color: var(--navy);
	font-family: var(--fuente-texto);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.campo__opcion:hover,
.campo__opcion:focus-visible {
	background: var(--cream);
	outline: none;
}

.campo__opcion svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	color: var(--navy);
}

.buscador .btn {
	margin-top: 12px;
}

.destacadas {
	padding-top: 128px;
}

.destacadas__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	margin-top: 40px;
}

.destacadas__pie {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.cifras {
	padding: 64px 0;
	background: var(--navy);
}

.cifras__rejilla {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 32px;
}

.cifra {
	text-align: center;
}

.cifra__valor {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	color: var(--gold);
}

.cifra__etiqueta {
	margin: 8px 0 0;
	color: rgba( 234, 234, 230, 0.65 );
	font-size: 14px;
}

.proceso__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
	margin-top: 56px;
	text-align: left;
}

.paso {
	position: relative;
	padding: 32px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
}

.paso__numero {
	position: absolute;
	top: -14px;
	left: 32px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--gold);
	color: var(--navy);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.paso__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radio-sm);
	background: var(--cream);
	color: var(--navy);
}

.paso__icono svg {
	width: 26px;
	height: 26px;
}

.paso__titulo {
	margin: 16px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 20px;
	font-weight: 600;
	color: var(--navy);
}

.paso__texto {
	margin: 12px 0 0;
	color: var(--texto-tenue);
	font-size: 14px;
	line-height: 1.7;
}

.cta {
	position: relative;
	overflow: hidden;
	padding: 80px 24px;
	background: var(--navy);
}

.cta__patron {
	position: absolute;
	inset: 0;
	opacity: 0.07;
	background-image: radial-gradient( circle at 1px 1px, var(--cream) 1px, transparent 0 );
	background-size: 24px 24px;
}

.cta__contenido {
	position: relative;
	max-width: 768px;
	margin: 0 auto;
	text-align: center;
}

.cta__titulo {
	margin: 12px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--cream);
}

.cta__texto {
	max-width: 576px;
	margin: 20px auto 0;
	color: rgba( 234, 234, 230, 0.7 );
	font-size: 14px;
}

.cta__acciones {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.cta__datos {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 32px;
	color: rgba( 234, 234, 230, 0.6 );
	font-size: 14px;
}

.cta__datos span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cta__datos svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------ */
/* 6. Tarjeta de propiedad                                             */
/* ------------------------------------------------------------------ */

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
	box-shadow: 0 1px 3px rgba( 21, 42, 70, 0.06 );
}

.card__foto {
	position: relative;
	height: 220px;
}

.card__foto img,
.card__foto-vacia {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__foto-vacia {
	background: var(--borde);
}

.card__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.card__titulo {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 17px;
	font-weight: 600;
	color: var(--navy);
}

.card__ubicacion {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 8px 0 0;
	color: var(--olive);
	font-size: 12px;
}

.card__ubicacion svg {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
}

.card__datos {
	display: flex;
	gap: 16px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	color: var(--texto-tenue);
	font-size: 12px;
}

.card__datos li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.card__datos svg {
	width: 15px;
	height: 15px;
}

.card__precio {
	margin: 16px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 22px;
	font-weight: 700;
	color: var(--navy);
}

.card__acciones {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
}

.card__acciones .btn {
	flex: 1;
	border-radius: var(--radio-sm);
}

.card__acciones .btn--contorno {
	border-width: 1px;
}

/* Cuánto sube el buscador sobre el borde inferior del encabezado azul. El
   encabezado reserva ese mismo espacio más un respiro de 28px, así que el
   subtítulo nunca queda tapado, sea cual sea el tamaño de pantalla. */
:root {
	--solape-buscador: 60px;
}

/* Encabezado azul de las páginas interiores. */
.encabezado-pagina {
	padding: 144px 0 calc( var( --solape-buscador ) + 28px );
	background: var(--navy);
	color: var(--cream);
}

.encabezado-pagina__titulo {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 44px;
	font-weight: 700;
	color: var(--cream);
}

.encabezado-pagina__subtitulo {
	margin: 8px 0 0;
	color: rgba( 234, 234, 230, 0.7 );
	font-size: 14px;
}

/* El buscador de Propiedades vive fuera de esta sección (ver
   archive-propiedad.php) para poder encimarse sobre la línea donde el azul
   termina — mismo truco que .hero__buscador en el Inicio. El padding-bottom
   normal (64px) se queda igual: es lo que le da margen para subir sin tocar
   el título ni el subtítulo de arriba. */
.encabezado-pagina__buscador {
	position: relative;
	z-index: 10;
	margin-top: calc( var( --solape-buscador ) * -1 );
}

.seccion--resultados {
	padding-top: 48px;
}

.contador {
	margin: 0 0 24px;
	color: var(--texto-tenue);
	font-size: 14px;
}

#resultados-propiedades[aria-busy="true"] {
	opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* 6b. Ficha de propiedad                                              */
/* ------------------------------------------------------------------ */

.no-scrollbar {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.ficha {
	padding: 112px 0 64px;
}

.migas {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: var(--texto-tenue);
	font-size: 12px;
}

.migas a:hover {
	color: var(--navy);
}

.migas__actual {
	color: var(--navy);
}

/* Galería ------------------------------------------------------------ */

.galeria__principal {
	position: relative;
	cursor: zoom-in; /* al hacer clic se abre la foto en grande */
	height: 320px;
	overflow: hidden;
	border-radius: var(--radio);
	background: var(--navy-dark);
}

.galeria__slides {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.galeria__slide {
	position: absolute;
	inset: 0;
}

.galeria__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* foto completa, centrada; lo que sobra queda en azul oscuro */
}

.galeria__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 21, 42, 70, 0.6 ), transparent 50% );
}

.galeria__etiquetas {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.galeria__etiqueta {
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.galeria__etiqueta--navy {
	background: var(--navy);
	color: var(--cream);
}

.galeria__etiqueta--gold {
	background: var(--gold);
	color: var(--navy);
}

.galeria__contador {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba( 21, 42, 70, 0.6 );
	color: var(--cream);
	font-size: 12px;
	font-weight: 600;
}

.galeria__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY( -50% );
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	color: var(--navy);
	cursor: pointer;
}

.galeria__flecha svg {
	width: 18px;
	height: 18px;
}

.galeria__flecha:hover {
	background: var(--blanco);
}

.galeria__flecha--prev {
	left: 16px;
}

.galeria__flecha--next {
	right: 16px;
}

.galeria__puntos {
	position: absolute;
	bottom: 16px;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 8px;
	transform: translateX( -50% );
}

.galeria__punto {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.5 );
	cursor: pointer;
	transition: width 0.18s ease, background-color 0.18s ease;
}

.galeria__punto.is-activo {
	width: 24px;
	background: var(--gold);
}

.galeria__miniaturas {
	display: flex;
	gap: 12px;
	margin-top: 12px;
	padding-bottom: 4px;
	overflow-x: auto;
}

.galeria__miniatura {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radio-sm);
	background: none;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.18s ease, border-color 0.18s ease;
}

.galeria__miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.galeria__miniatura.is-activa {
	border-color: var(--navy);
	opacity: 1;
}

.galeria__miniatura:hover {
	opacity: 1;
}

/* Cuerpo de la ficha --------------------------------------------------- */

.ficha__cuerpo {
	display: grid;
	/* minmax(0, …): sin esto, un carrusel ancho estira la columna y aplasta la lateral. */
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
	gap: 32px;
	margin-top: 32px;
}

.ficha__principal {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.ficha__titulo {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 32px;
	font-weight: 700;
	color: var(--navy);
}

.ficha__precio-fila {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

.ficha__precio {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 26px;
	font-weight: 700;
	color: var(--navy);
}

.etiqueta-pill {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.etiqueta-pill--navy {
	background: var(--navy);
	color: var(--gold);
}

.ficha__ubicacion {
	margin: 12px 0 0;
	color: var(--olive);
	font-size: 14px;
}

.estadisticas {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
	gap: 16px;
}

.estadistica {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
	text-align: center;
}

.estadistica svg {
	width: 22px;
	height: 22px;
	color: var(--navy);
}

.estadistica__valor {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 18px;
	font-weight: 700;
	color: var(--navy);
}

.estadistica__label {
	margin: 0;
	color: var(--olive);
	font-size: 12px;
}

.tarjeta {
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
	padding: 24px;
}

.tarjeta__titulo {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 20px;
	font-weight: 600;
	color: var(--navy);
}

.tarjeta__titulo--sm {
	font-size: 14px;
}

.ficha__descripcion {
	margin-top: 16px;
	color: var(--texto-tenue);
	font-size: 14px;
	line-height: 1.7;
}

.ficha__descripcion p + p {
	margin-top: 12px;
}

.amenidades {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.amenidad {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--navy);
}

.amenidad__icono {
	display: flex;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--cream);
	color: var(--navy);
}

.amenidad__icono svg,
.amenidad__icono img {
	width: 14px;
	height: 14px;
}

/* Amenidades con foto: carrusel de tarjetas y visor ---------------------- */

.amenidades-fotos {
	position: relative;
	margin-top: 20px;
}

.amenidades-fotos__pista {
	display: flex;
	gap: 12px;
	/* Las tarjetas llegan hasta el borde de la tarjeta blanca (la última se ve cortada). */
	margin: 0 -24px 0 0;
	padding: 0 24px 4px 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.amenidades-fotos__pista::-webkit-scrollbar {
	display: none;
}

/* Desvanecido hacia blanco en el borde donde todavía hay más fotos por ver. */
.amenidades-fotos--mas-derecha .amenidades-fotos__pista {
	-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - 80px ), transparent );
	mask-image: linear-gradient( to right, #000 calc( 100% - 80px ), transparent );
}

.amenidades-fotos--mas-izquierda .amenidades-fotos__pista {
	-webkit-mask-image: linear-gradient( to right, transparent, #000 80px );
	mask-image: linear-gradient( to right, transparent, #000 80px );
}

.amenidades-fotos--mas-izquierda.amenidades-fotos--mas-derecha .amenidades-fotos__pista {
	-webkit-mask-image: linear-gradient( to right, transparent, #000 80px, #000 calc( 100% - 80px ), transparent );
	mask-image: linear-gradient( to right, transparent, #000 80px, #000 calc( 100% - 80px ), transparent );
}

.amenidades-fotos__pista li {
	flex: 0 0 188px;
	scroll-snap-align: start;
}

.amenidad-foto {
	position: relative;
	display: block;
	height: 240px;
	overflow: hidden;
	border-radius: var(--radio-sm);
	background: var(--navy-dark);
}

.amenidad-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.amenidad-foto:hover img {
	transform: scale( 1.04 );
}

.amenidad-foto__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 21, 42, 70, 0.9 ), transparent 50% );
}

.amenidad-foto__icono {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--blanco);
	color: var(--navy);
}

.amenidad-foto__icono svg,
.amenidad-foto__icono img {
	width: 14px;
	height: 14px;
}

.amenidad-foto__nombre {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 48px;
	display: flex;
	align-items: center;
	min-height: 28px;
	color: var(--blanco);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
}

.tarjeta__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.amenidades-fotos__flechas {
	display: flex;
	gap: 8px;
}

.amenidades-fotos__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--cream);
	color: var(--navy);
	cursor: pointer;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.amenidades-fotos__flecha:hover:not( :disabled ) {
	background: var(--gold);
}

.amenidades-fotos__flecha[hidden] {
	display: none;
}

.amenidades-fotos__flecha:disabled {
	opacity: 0.4;
	cursor: default;
}

.amenidades-fotos__flecha svg {
	width: 18px;
	height: 18px;
}

.amenidades--aparte {
	margin-top: 24px;
}

.amenidades-visor {
	width: min( 92vw, 720px );
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--blanco);
	overflow: visible;
}

.amenidades-visor::backdrop {
	background: rgba( 10, 20, 35, 0.88 );
}

.amenidades-visor[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.amenidades-visor__figura {
	margin: 0;
	text-align: center;
}

.amenidades-visor__figura img {
	display: block;
	max-width: 100%;
	max-height: 62vh;
	margin: 0 auto;
	border-radius: var(--radio-sm);
}

.amenidades-visor__figura figcaption {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 600;
}

.amenidades-visor__cerrar,
.amenidades-visor__flecha {
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.95 );
	color: var(--navy);
	cursor: pointer;
	line-height: 1;
}

.amenidades-visor__cerrar {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 26px;
}

.amenidades-visor--galeria {
	width: min( 94vw, 1000px );
}

.amenidades-visor--galeria .amenidades-visor__figura img {
	max-height: 78vh;
}

.amenidades-visor__flecha[hidden] {
	display: none;
}

.amenidades-visor__flecha {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	font-size: 30px;
}

/* Página 404 ----------------------------------------------------------- */

.pagina-404 {
	padding: 40px 24px;
	text-align: center;
}

.pagina-404__texto {
	max-width: 520px;
	margin: 0 auto 24px;
	color: var(--texto-tenue);
	font-size: 15px;
	line-height: 1.7;
}

.pagina-404__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Columna lateral ------------------------------------------------------ */

.columna-lateral {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tarjeta--asesor {
	padding: 20px;
}

.asesor__encabezado {
	display: flex;
	align-items: center;
	gap: 12px;
}

.asesor__avatar {
	display: flex;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--navy);
	color: var(--gold);
	font-weight: 700;
	font-size: 13px;
}

.asesor__nombre {
	margin: 0;
	color: var(--navy);
	font-size: 14px;
	font-weight: 600;
}

.asesor__empresa {
	margin: 2px 0 0;
	color: var(--olive);
	font-size: 12px;
}

.asesor__texto {
	margin: 16px 0;
	color: var(--texto-tenue);
	font-size: 12px;
	line-height: 1.7;
}

.tarjeta--navy {
	border-color: var(--navy-dark);
	background: var(--navy);
	padding: 20px;
}

.ficha-tecnica__encabezado {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ficha-tecnica__icono {
	display: flex;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radio-sm);
	background: rgba( 216, 195, 165, 0.15 );
	color: var(--gold);
}

.ficha-tecnica__icono svg {
	width: 20px;
	height: 20px;
}

.ficha-tecnica__titulo {
	margin: 0;
	color: var(--cream);
	font-size: 14px;
	font-weight: 600;
}

.ficha-tecnica__subtitulo {
	margin: 3px 0 0;
	color: rgba( 216, 195, 165, 0.75 );
	font-size: 12px;
}

/* Deshabilitado en dorado al 30 %, no en gris — así se sigue viendo la
   marca aunque no se pueda usar todavía. */
.ficha-tecnica__boton-deshabilitado {
	background: rgba( 216, 195, 165, 0.3 );
	color: rgba( 234, 234, 230, 0.7 );
	cursor: not-allowed;
}

.ficha-tecnica__boton-deshabilitado:hover {
	background: rgba( 216, 195, 165, 0.3 );
}

.ficha-tecnica__aviso {
	margin: 8px 0 0;
	color: rgba( 234, 234, 230, 0.5 );
	font-size: 11px;
	text-align: center;
}

.info-general {
	margin: 8px 0 0;
}

.info-general__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--cream);
}

.info-general__fila:last-child {
	border-bottom: 0;
}

.info-general__fila dt {
	color: var(--olive);
	font-size: 12px;
}

.info-general__fila dd {
	margin: 0;
	color: var(--navy);
	font-size: 12px;
	font-weight: 600;
}

/* Propiedades relacionadas ---------------------------------------------- */

.relacionadas {
	margin-top: 40px;
}

.relacionadas__carrusel {
	display: flex;
	gap: 24px;
	margin-top: 20px;
	padding-bottom: 4px;
	overflow-x: auto;
	scroll-behavior: smooth;
}

.relacionadas__item {
	flex: 0 0 300px;
	width: 300px;
}

.relacionadas__flechas {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.flecha-circular {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--blanco);
	color: var(--navy);
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.flecha-circular svg {
	width: 18px;
	height: 18px;
}

.flecha-circular:hover {
	background: var(--cream);
}

.flecha-circular:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* ------------------------------------------------------------------ */
/* 6c. Nosotros y Contacto                                             */
/* ------------------------------------------------------------------ */

.linea-dorada {
	width: 40px;
	height: 2px;
	margin-top: 16px;
	background: var(--gold);
}

.linea-dorada--centrada {
	margin-left: auto;
	margin-right: auto;
}

.titulo-seccion--sm {
	font-size: 26px;
}

.titulo-seccion--claro {
	color: var(--cream);
}

.resaltado-gold {
	color: var(--gold);
}

.resaltado-olive {
	color: var(--olive);
}

.resaltado-olive--negrita {
	font-weight: 600;
}

.btn-pill {
	display: inline-flex;
	margin-top: 32px;
	padding: 13px 32px;
	border-radius: 999px;
	background: var(--navy);
	color: var(--gold);
	font-size: 14px;
	font-weight: 600;
	transition: opacity 0.18s ease;
}

.btn-pill:hover {
	opacity: 0.9;
}

/* Botón deshabilitado: sigue en azul marino, solo que al 40 % — nunca gris,
   para que se note que es la misma marca aunque no se pueda usar todavía. */
.btn--navy:disabled,
.btn--navy:disabled:hover {
	background: rgba( 31, 58, 95, 0.4 );
	cursor: not-allowed;
}

/* Nosotros -------------------------------------------------------------- */

.nosotros-hero {
	position: relative;
	overflow: hidden;
	padding: 160px 24px 96px;
	background: var(--navy);
	text-align: center;
}

.nosotros-hero__fondo {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	background-size: cover;
	background-position: center;
}

.nosotros-hero__contenido {
	position: relative;
	max-width: 896px;
	margin: 0 auto;
}

.nosotros-hero__titulo {
	margin: 16px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--cream);
}

.nosotros-hero__titulo-cursiva {
	font-style: italic;
	color: var(--gold);
}

.nosotros-hero__texto {
	max-width: 640px;
	margin: 24px auto 0;
	color: rgba( 234, 234, 230, 0.8 );
	font-size: 16px;
	line-height: 1.7;
}

.nosotros__trayectoria {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	max-width: 1152px;
	margin: 0 auto;
}

.nosotros__foto {
	position: relative;
	max-width: 420px;
	margin: 0 auto;
}

.nosotros__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--radio);
	object-fit: cover;
}

.nosotros__insignia {
	position: absolute;
	right: 0;
	bottom: -24px;
	max-width: 200px;
	padding: 16px 24px;
	border-radius: var(--radio);
	background: var(--navy);
	box-shadow: 0 10px 30px -6px rgba( 21, 42, 70, 0.3 );
}

.nosotros__insignia-numero {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 24px;
	font-weight: 700;
	color: var(--gold);
}

.nosotros__insignia-texto {
	margin: 4px 0 0;
	color: rgba( 234, 234, 230, 0.7 );
	font-size: 12px;
}

.nosotros__parrafo {
	margin-top: 20px;
	color: var(--texto-tenue);
	font-size: 14px;
	line-height: 1.7;
}

.nosotros-valores {
	padding: 96px 24px;
	background: var(--navy);
}

.nosotros-valores__contenido {
	max-width: 1152px;
	margin: 0 auto;
	text-align: center;
}

.nosotros-valores__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
	margin-top: 64px;
	text-align: left;
}

.valor {
	padding: 32px;
	border: 1px solid rgba( 216, 195, 165, 0.2 );
	border-radius: var(--radio);
	background: rgba( 234, 234, 230, 0.06 );
}

.valor__icono {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radio-sm);
	background: var(--gold);
	color: var(--navy);
}

.valor__icono svg {
	width: 26px;
	height: 26px;
}

.valor__titulo {
	margin: 24px 0 0;
	font-family: var(--fuente-titulo);
	font-size: 18px;
	font-weight: 600;
	color: var(--gold);
}

.valor__texto {
	margin: 12px 0 0;
	color: rgba( 234, 234, 230, 0.65 );
	font-size: 14px;
	line-height: 1.7;
}

.nosotros-cierre__contenido {
	max-width: 672px;
	margin: 0 auto;
	text-align: center;
}

.nosotros-cierre__texto {
	margin-top: 16px;
	color: var(--texto-tenue);
	font-size: 14px;
}

/* Contacto ---------------------------------------------------------------- */

.contacto__rejilla {
	display: grid;
	/* minmax(0, 1fr): sin el 0, una columna crece hasta el texto más largo
	   (el correo) y empuja la página fuera de la pantalla en celulares angostos. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 48px;
	max-width: 1024px;
	margin: 0 auto;
}

.contacto__texto {
	margin-top: 8px;
	color: var(--texto-tenue);
	font-size: 14px;
}

.contacto__metodos {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
}

.contacto__metodo {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
}

.contacto__metodo-icono {
	display: flex;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radio-sm);
	background: var(--cream);
	color: var(--navy);
}

.contacto__metodo-icono svg {
	width: 18px;
	height: 18px;
}

.contacto__metodo-etiqueta {
	display: block;
	color: var(--olive);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* min-width: 0 deja que el texto se achique dentro de la fila (flex); sin
   él, un correo largo la ensancha. */
.contacto__metodo-texto {
	min-width: 0;
}

.contacto__metodo-valor {
	display: block;
	overflow-wrap: anywhere;
	margin-top: 2px;
	color: var(--navy);
	font-size: 14px;
	font-weight: 600;
}

.contacto__redes {
	margin-top: 32px;
}

.contacto__redes-lista {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

.contacto__red {
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radio-sm);
	background: var(--navy);
}

.tarjeta--formulario {
	border-radius: 24px;
	padding: 32px;
}

.formulario__subtitulo {
	margin: 4px 0 0;
	color: var(--olive);
	font-size: 13px;
}

.formulario__aviso-propiedad {
	margin: 16px 0 0;
	padding: 10px 16px;
	border-radius: var(--radio-sm);
	background: var(--cream);
	color: var(--navy);
	font-size: 14px;
}

.formulario__error {
	margin: 16px 0 0;
	color: #dc2626;
	font-size: 13px;
}

.formulario {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

.campo-formulario__etiqueta {
	display: block;
	margin-bottom: 6px;
	color: var(--navy);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Asterisco de "obligatorio" — sin esto se veía del mismo color que el
   resto de la etiqueta, en vez de resaltar como una alerta. */
.gic-req {
	color: #dc2626;
}

.formulario textarea.campo__control {
	min-height: 96px;
	font-family: var(--fuente-texto);
	resize: vertical;
}

.campo-formulario__error {
	display: block;
	margin-top: 6px;
	color: #dc2626;
	font-size: 12px;
}

/* Mismo caso que .btn[hidden] más arriba: sin esto, [hidden] y esta clase
   pesan lo mismo, y como la clase está declarada después, gana ella y el
   mensaje de error se ve aunque el campo esté vacío. */
.campo-formulario__error[hidden] {
	display: none;
}

.campo-formulario--casilla {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--texto-tenue);
	font-size: 12px;
}

.campo-formulario--casilla input {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--navy);
}

.campo-formulario--casilla a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
}

/* Campo trampa anti-spam: invisible para personas, pero un bot que llena
   todos los campos automáticamente sí lo completa. */
.campo-trampa {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	opacity: 0;
}

.formulario__exito {
	padding: 16px 0;
	text-align: center;
}

.formulario__exito-titulo {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: 20px;
	font-weight: 600;
	color: var(--navy);
}

.formulario__exito-texto {
	margin: 8px 0 0;
	color: var(--texto-tenue);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* 7. Tablet y celular                                                 */
/* ------------------------------------------------------------------ */

@media ( min-width: 768px ) {
	.galeria__principal {
		height: 480px;
	}
}

@media ( max-width: 1023px ) {
	.rejilla,
	.proceso__rejilla {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ficha__cuerpo {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 767px ) {
	.seccion {
		padding: 56px 0;
	}

	.site-nav {
		display: none;
	}

	.site-header__toggle {
		display: inline-flex;
	}

	.hero {
		padding: 140px 24px 88px;
	}

	.hero__titulo {
		font-size: 36px;
	}

	.hero__texto {
		font-size: 16px;
	}

	.buscador__campos {
		grid-template-columns: 1fr;
	}

	.destacadas {
		padding-top: 96px;
	}

	.destacadas__encabezado {
		flex-direction: column;
		align-items: flex-start;
	}

	.titulo-seccion {
		font-size: 28px;
	}

	.rejilla,
	.proceso__rejilla,
	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.cifras__rejilla {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cifra__valor {
		font-size: 36px;
	}

	.cta__titulo {
		font-size: 30px;
	}

	.cta__acciones,
	.cta__datos {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.cta__datos {
		align-items: center;
	}

	.site-footer__legal {
		flex-direction: column;
		text-align: center;
	}

	.encabezado-pagina {
		padding-top: 120px;
	}

	.encabezado-pagina__titulo {
		font-size: 32px;
	}

	.ficha {
		padding-top: 96px;
	}

	.galeria__principal {
		height: 240px;
	}

	.ficha__titulo {
		font-size: 26px;
	}

	.estadisticas {
		grid-template-columns: repeat( 2, 1fr );
	}

	.amenidades {
		grid-template-columns: 1fr;
	}

	.amenidades-visor[open] {
		gap: 8px;
	}

	.amenidades-visor__flecha {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
	}

	.relacionadas__item {
		flex-basis: 260px;
		width: 260px;
	}

	.nosotros-hero {
		padding: 128px 24px 72px;
	}

	.nosotros-hero__titulo {
		font-size: 36px;
	}

	.nosotros__trayectoria,
	.nosotros-valores__rejilla,
	.contacto__rejilla {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nosotros__trayectoria {
		gap: 48px;
	}

	.nosotros__foto {
		max-width: 280px;
	}

	.nosotros-valores {
		padding: 64px 24px;
	}

	.nosotros-valores__rejilla {
		margin-top: 48px;
	}
}