/* ============================================================
   PISEANDO v2 · base.css — piel portada de la v1, medida
   Estructura canónica: A tokens · B fuentes · C puente Astra ·
   D cabecera + hamburguesa · E footer · F puente Woo (n/a) ·
   G utilidades · H motion + reduced-motion

   PALETA MEDIDA (luminancia WCAG, 06/08/2026). Fondo = #FFFFFF,
   superficie = #F6F5F2 (hueso cálido).
   ⚠️ La superficie de la v1 era #F0F5FA, y NO era una decisión de marca:
   es el valor por defecto de Astra (--ast-global-color-5). Un azul frío muy
   desaturado que en superficies grandes se lee como clínico. Se cambia por
   un hueso cálido, que es lo que pide un portal que vende hogar; el azul
   marino sigue llevando toda la seriedad. Los contrastes no se resienten
   (la luminancia es casi idéntica: 11.52 → 11.59 en el texto).
     tinta/fondo 12.63 · tinta/superficie 11.59
     titular/fondo 10.98 · titular/superficie 10.07
     tinta-2/fondo 6.23 · tinta-2/superficie 5.71
     acento/fondo 13.95 · blanco/acento 13.95
     acento-2/fondo 9.45 · blanco/acento-2 9.45 · ok/fondo 5.87
     borde de control/fondo 3.67 · /superficie 3.37 (WCAG 1.4.11)
     barra gris (marino sobre #DDD9D2) 9.92
   CORREGIDO RESPECTO A LA V1: sus grises secundarios #7A7A7A (4.29)
   y #808285 (3.85) NO pasaban AA; aquí el rol lo cubre #56626F.
   PROHIBIDO: tinta sobre acento (1.10). Si se cambia un color, RE-MEDIR.
   ============================================================ */

/* ---------- A · TOKENS ---------- */
:root {
	--gab-fondo:      #FFFFFF;   /* fondo de página */
	/* NEUTRO desde el 11/08/2026 (tarde). Era #F4F6F8, un gris con azul
	   dentro; a Gerardo le cantaba («el azulito»). El gris NO se quita: está
	   en 26 reglas y es el material del que están hechas la ficha (barra de
	   precio, avisos, bloque de contacto), la cabecera de los listados y el
	   menú móvil — en blanco, esas cajas desaparecen del fondo. Lo que se
	   quita es el AZUL, y así los 26 sitios cambian a la vez y coherentes. */
	--gab-superficie: #F5F5F5;   /* cajas y marcos internos (no franjas) */
	--gab-franja:     #154585;   /* franja de sección en azul (blanco encima: 9.45) */
	--gab-tinta:      #333333;   /* texto */
	--gab-titular:    #2C3E50;   /* titulares (v1 los diferencia del texto) */
	--gab-tinta-2:    #56626F;   /* secundario: sustituye a los grises que fallaban */
	--gab-acento:     #0D2C54;   /* marca y única acción */
	--gab-acento-2:   #154585;   /* hover */
	--gab-ok:         #157347;
	--gab-linea:      #D1D5DB;   /* decorativa y barras (marino encima: 9.47) */
	--gab-linea-2:    #7F8A9A;   /* bordes de campos: 3.50 blanco / 3.35 superficie */

	--gab-maxw:  1160px;
	--gab-gutter: clamp(1rem, 4vw, 2rem);

	--gab-font-texto:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--gab-font-titulo: 'Montserrat', var(--gab-font-texto);

	--gab-d1: 160ms;
	--gab-d2: 260ms;

}

/* ---------- B · FUENTES (auto-alojadas: 0 peticiones a Google) ----------
   La v1 las pedía a fonts.googleapis.com (IP del visitante a un tercero).
   Aquí viven en assets/fonts/, subconjunto latino. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('../fonts/montserrat-400-700-latin.woff2') format('woff2');
  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:'Lato';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/lato-400-latin.woff2') format('woff2');
  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:'Lato';font-style:normal;font-weight:700;
  font-display:swap;src:url('../fonts/lato-700-latin.woff2') format('woff2');
  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}

/* ---------- C · PUENTE ASTRA (parches conocidos, no tocar al forkear) ---------- */

/* Astra baja el rem raíz en móvil (medido: 14.6px) y descuadra todo lo
   dimensionado en rem. Se fija el rem a 16px SIEMPRE; el !important es
   necesario porque el CSS dinámico de Astra va inline. */
html {
	font-size: 100% !important;
}

body {
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	font-family: var(--gab-font-texto);
}

/* Astra pinta el fondo con .ast-separate-container (clase en el <body>):
   una clase gana a nuestro selector de elemento, así que el fondo se
   declaraba pero NO se veía — salía su --ast-global-color-5 (#F0F5FA,
   valor por defecto de Astra). Se ataca con la misma clase.
   Medido en el fork el 06/08/2026: sin esto, body computa #F0F5FA. */
body.ast-separate-container {
	background: var(--gab-fondo);
}

/* Y el contenedor de contenido, que Astra pinta aparte. */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comments-area .comment-respond,
.ast-separate-container .ast-comment-list li.depth-1 {
	background: var(--gab-superficie);
}

/* Astra impone color a h1-h6 con su CSS dinámico (--ast-global-color-2):
   heredar NO funciona, el color se DECLARA. */
h1, h2, h3, h4, h5, h6 {
	color: var(--gab-titular);
	font-family: var(--gab-font-titulo);
	font-weight: 600;
}

/* Astra pinta TODO enlace con su azul corporativo (#046BD2, su
   --ast-global-color-0), también fuera del contenido: paginación, metas,
   tarjetas, panel de usuario. Medido en el fork: 8 elementos en una home
   vacía. El acento del proyecto es el único color de acción, así que se
   declara a nivel de elemento (0,0,1): cualquier clase de las piezas GAB
   sigue ganando. */
a {
	color: var(--gab-acento);
}

a:hover,
a:focus-visible {
	color: var(--gab-acento-2);
}

/* Astra estiliza aparte la meta de entrada (autor/fecha, su azul) y el
   título enlazado (#1E293B). Solo se ve si hay blog, pero ningún color
   queda fuera de paleta por descuido. */
.entry-meta,
.entry-meta *,
.entry-meta a {
	color: var(--gab-tinta-2);
}

.entry-meta a:hover,
.entry-meta a:focus-visible {
	color: var(--gab-acento);
}

.entry-title a {
	color: var(--gab-titular);
}

/* Enlaces: el acento es el único color de acción. Subrayado visible en
   enlaces dentro de párrafo (WCAG 1.4.1: solo se quita en listas/menús,
   donde la posición ya los distingue). */
.entry-content a:not(.gab-nav-cta) {
	color: var(--gab-acento);
	text-decoration: underline;
}

.entry-content a:not(.gab-nav-cta):hover {
	color: var(--gab-acento-2);
}

/* Botón scroll-to-top de Astra: sale azul corporativo suyo (#046BD2). */
#ast-scroll-top {
	background-color: var(--gab-acento);
}

/* Anclas bajo cabecera sticky: que el destino no quede tapado. */
html {
	scroll-padding-top: 90px;
}

/* ---------- D · CABECERA + HAMBURGUESA ---------- */

.gab-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--gab-tinta);
	color: var(--gab-fondo);
}

.gab-skip:focus {
	left: 0;
}

/* Sticky con fondo SÓLIDO: backdrop-filter en cabecera sticky = jank al
   scrollear + texto rasterizado blando (medido en SAGASTA). Nunca. */
.gab-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--gab-superficie);
	border-bottom: 1px solid var(--gab-linea);
}

/* A sangre completa pero alineada con las secciones (truco SAGASTA):
   el padding crece hasta centrar el contenido en --gab-maxw. */
.gab-header__inner {
	display: flex;
	align-items: center;
	/* flex-start + margin-left:auto en el nav (no space-between): con el
	   icono de cuenta como tercer item, space-between centraría el menú y
	   cambiaría el layout aprobado. Así el nav sigue pegado a la derecha
	   y el icono queda en el borde. */
	justify-content: flex-start;
	gap: 1rem;
	min-height: 64px;
	padding-inline: max(var(--gab-gutter), calc((100% - var(--gab-maxw)) / 2));
}

.gab-nav {
	margin-left: auto;
}

/* Icono de cuenta: mismo lenguaje que la hamburguesa (44px, borde). */
.gab-nav-usuario {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--gab-titular);
	border: 1px solid var(--gab-linea-2);
	border-radius: 6px;
	transition: color var(--gab-d1) ease, border-color var(--gab-d1) ease;
}

.gab-nav-usuario:hover,
.gab-nav-usuario:focus-visible {
	color: var(--gab-acento);
	border-color: var(--gab-acento);
}

.gab-nav-usuario svg {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Con sesión (lo marca el JS): el icono toma el acento. */
.gab-nav-usuario.es-conectado {
	color: var(--gab-acento);
	border-color: var(--gab-acento);
}

.gab-marca,
.gab-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;             /* hit-area: un logo es un enlace */
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--gab-tinta);
	text-decoration: none;
}

.gab-nav__lista {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gab-nav__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;             /* hit-area táctil */
	padding: 0 .9rem;
	color: var(--gab-tinta);
	text-decoration: none;
	transition: color var(--gab-d1) ease;
}

.gab-nav__lista a:hover {
	color: var(--gab-acento);
}

.gab-nav__lista .current-menu-item > a,
.gab-nav__lista .current_page_item > a {
	color: var(--gab-acento);
}

/* CTA de cabecera (opcional por filtro): blanco sobre acento = 7.59:1.
   ⚠️ Renombrado de `.gab-cta` a `.gab-nav-cta` (gab-base-theme 0.1.2):
   colisionaba con el contenedor de la pieza gab-cuentas y el formulario
   de registro heredaba estilo de botón. */
.gab-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.25rem;
	background: var(--gab-acento);
	color: #FFFFFF;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: background var(--gab-d1) ease, transform var(--gab-d1) ease;
}

.gab-nav-cta:hover {
	background: var(--gab-acento-2);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.gab-nav__cta {
	margin-left: .75rem;
}

/* Hamburguesa: nace [hidden] (sin JS ni se ve) y solo actúa en móvil. */
.gab-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--gab-linea-2);
	border-radius: 6px;
	background: transparent;
	color: var(--gab-tinta);
	cursor: pointer;
}

/* La hamburguesa no tenía estado de hover, así que en móvil se volvía azul de
   Astra al tocarla. Mismo motivo que en `.pis-accion:hover`. */
.gab-nav-toggle:hover,
.gab-nav-toggle:focus-visible {
	background: var(--gab-superficie);
	border-color: var(--gab-acento);
	color: var(--gab-acento);
}

.gab-nav-toggle[hidden] {
	display: none !important;
}

.gab-nav-toggle__cerrar {
	display: none;
}

.gab-nav-toggle[aria-expanded="true"] .gab-nav-toggle__abrir {
	display: none;
}

.gab-nav-toggle[aria-expanded="true"] .gab-nav-toggle__cerrar {
	display: block;
}

@media (max-width: 899.98px) {
	.gab-nav-toggle {
		display: inline-flex;
		/* El nav está absoluto (fuera del flujo): sin esto, con flex-start
		   la hamburguesa quedaría pegada al logo. Así hamburguesa + icono
		   de cuenta hacen pareja en el borde derecho. */
		margin-left: auto;
	}

	/* SIN js-on (JS apagado o roto): el nav queda desplegado y usable.
	   CON js-on: colapsado hasta que el botón lo abra. */
	.js-on .gab-nav {
		display: none;
	}

	.js-on .gab-nav.gab-nav--abierta {
		display: block;
	}

	.gab-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--gab-superficie);
		border-bottom: 1px solid var(--gab-linea);
		padding: .5rem var(--gab-gutter) 1rem;
	}

	.gab-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* ⚠️ `display: flex` y no el `inline-flex` de la regla base: en línea, el
	   enlace mide lo que mide su texto, así que el borde inferior quedaba
	   como una rayita corta y de distinta longitud debajo de cada palabra —
	   lo que se veía «desordenado» en el menú desplegado (11/08/2026).
	   Estirándolo, las separaciones son una retícula de lado a lado. */
	.gab-nav__lista a {
		display: flex;
		min-height: 48px;
		padding-inline: 0;
		border-bottom: 1px solid var(--gab-linea);
	}

	/* La última no lleva raya: iría pegada al CTA y se leerían como dos
	   líneas juntas. */
	.gab-nav__lista li:last-child a {
		border-bottom: 0;
	}

	.gab-nav-cta {
		margin: 1rem 0 .25rem;
	}
}

/* ---------- E · FOOTER ---------- */

.gab-footer {
	margin-top: clamp(3rem, 8vw, 6rem);
	background: var(--gab-superficie);
	border-top: 1px solid var(--gab-linea);
}

.gab-footer__inner {
	max-width: var(--gab-maxw);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--gab-gutter);
	display: grid;
	gap: 1rem;
}

.gab-footer__marca {
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	margin: 0;
}

.gab-footer__lista {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gab-footer__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gab-tinta-2);
	text-decoration: none;
}

.gab-footer__lista a:hover {
	color: var(--gab-acento);
}

.gab-footer__credito {
	margin: 0;
	color: var(--gab-tinta-2);
	font-size: .9rem;
}

/* ---------- F · PUENTE WOOCOMMERCE (solo en tiendas; plantilla) ----------
   Al forkear una tienda, recordar lo aprendido:
   - Carrito/checkout modernos son WooCommerce BLOCKS (wc-block-*): el CSS
     clásico .woocommerce no les afecta; estilar los bloques.
   - .alt es la acción PRINCIPAL (añadir al carrito, finalizar compra).
   - En diseño oscuro: :root{color-scheme:dark} y estilar inputs/selects.
   - gab-ficha se ancla a woocommerce_before/after_add_to_cart_form,
     nunca por prioridades del summary (Astra lo recompone).
--------------------------------------------------------------------- */

/* ---------- G · UTILIDADES ---------- */

.gab-wrap {
	max-width: var(--gab-maxw);
	margin-inline: auto;
	padding-inline: var(--gab-gutter);
}

/* Respiración premium entre secciones (py-24/32 de la guía). */
.gab-seccion {
	padding-block: clamp(4rem, 9vw, 8rem);
}

.gab-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 2px;
}

/* ---------- H · MOTION + REDUCED-MOTION ---------- */
/* El movimiento fino (reveals, parallax) NO vive aquí: se trae de
   gab-kit (motion.css + reveal.js) solo si el proyecto lo pide. El
   estado por defecto de cualquier componente es el VISIBLE: si el JS
   falla, el contenido no puede desaparecer. */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ---------- PISEANDO · marca ---------- */
.pis-marca {
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: -.01em;
	color: var(--gab-acento);
	text-decoration: none;
}

.pis-marca:hover,
.pis-marca:focus-visible {
	color: var(--gab-acento-2);
}

/* ============================================================
   I · PORTAL — ficha y listado de inmuebles
   Composición heredada de la demo SAGASTA (el estilo aprobado).
   Motion: solo los dos gestos del sistema (hover de 3 capas y
   cascada de delays). Techo R6: ~60 elementos animados por página.
   ============================================================ */

.pis-marco {
	width: min(100% - (var(--gab-gutter) * 2), var(--gab-maxw));
	margin-inline: auto;
}

.pis-eyebrow {
	font-family: var(--gab-font-titulo);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 .5rem;
	color: var(--gab-tinta-2);
}

.pis-bloque__titulo {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	margin: 0 0 1rem;
}

.pis-icono {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -.125em;
}

/* ---------- Hero de ficha ---------- */

.pis-fhero {
	position: relative;
	min-height: clamp(320px, 46vh, 520px);
	display: flex;
	align-items: flex-end;
	background: var(--gab-acento);
	overflow: hidden;
}

.pis-fhero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* R1 del sistema: overlay del 60% mínimo cuando hay texto sobre foto.
   Degradado para que la parte alta de la imagen respire. */
.pis-fhero__scrim {
	position: absolute;
	inset: 0;
	/* SUAVIZADO 11/08/2026 (Gerardo): empezaba en .25 y la foto del inmueble
	   —que es lo que vende— se veía azulada de arriba abajo.

	   ★ RECALIBRADO 11/08/2026 (tarde) con `pruebas/velo-minimo.py`, que
	   despeja el alfa MÍNIMO de marino que pone cada letra en 4,5 sobre la
	   foto cruda. Aquí salió 0,63, y el que lo pedía era la línea de
	   referencia («Psn-120 · Zaragoza…»): cae en el **41 %** del alto, donde
	   el degradado de la mañana todavía iba por .10 → **2,01 de contraste**.
	   El título (54 %) y la dirección (75 %) sí llegaban.

	   ★★ AQUÍ EL DEGRADADO VA EN PÍXELES DESDE ABAJO, NO EN PORCENTAJE, y no
	   es un capricho: **en la ficha el texto se mueve**. El bloque está
	   anclado abajo (`align-items: flex-end`) y crece hacia arriba con el
	   largo del título, que lo escribe el anunciante. Medido en el catálogo
	   real: la línea de referencia empieza en el **41 %** del hero en un
	   anuncio, en el **30 %** en otro y en el **9 %** en el del título largo
	   («Precioso piso en edificio catalogado…»). Un degradado por porcentaje
	   acierta en uno y falla en los otros — medido: 4,54 en el primero y
	   **4,18 en el segundo**. Anclado al fondo en píxeles, el velo va donde
	   el texto está SIEMPRE.

	   ★★ Y el alfa lleva más margen que la home por otra razón: **la home
	   tiene UNA foto, nuestra; la ficha tiene una foto DISTINTA por anuncio y
	   la elige el anunciante.** Calibrar al mínimo medido sería calibrar
	   sobre la foto que me tocara. El valor sale del PEOR CASO POSIBLE —una
	   foto blanca pura—, calculado: .63 se queda en 4,39 y **.65 es la
	   frontera** (4,66). Se deja en **.66** (4,81): 0,03 más de marino y
	   aguanta cualquier foto que suba nadie, hoy y dentro de un año.

	   En escritorio el hero es más alto, así que la parte alta —la que se
	   ve— sigue limpia. */
	background: linear-gradient(0deg,
		rgba(13, 44, 84, .70) 0,
		rgba(13, 44, 84, .66) 400px,
		rgba(13, 44, 84, .22) 500px,
		rgba(13, 44, 84, 0) 620px);
}

.pis-fhero__texto {
	position: relative;
	z-index: 1;
	padding-block: 2.5rem;
	color: #fff;
}


.pis-fhero__texto .pis-eyebrow {
	color: rgba(255,255,255,.92);
}

.pis-fhero__titulo {
	color: #fff;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	line-height: 1.15;
	margin: .5rem 0 .75rem;
	max-width: 22ch;
}

.pis-fhero__direccion {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: rgba(255,255,255,.95);
}

/* ---------- Barra de datos clave ---------- */

.pis-barra-datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1.25rem 1.5rem;
	margin-top: -2rem;
	position: relative;
	z-index: 2;
	background: var(--gab-superficie);
	border: 1px solid var(--gab-linea);
	box-shadow: 0 12px 32px rgba(13,44,84,.10);
}

/* ⚠️★ EL CTA DE LA BARRA, EN MÓVIL (15/08/2026).
   `.pis-cta` nace con `margin-left: auto` porque en esta barra va empujado a la
   derecha, que es lo correcto cuando precio, datos y botón caben en una fila.
   En móvil la barra ENVUELVE y el botón cae en su propia línea: allí ese
   `auto` ya no empuja contra nada, solo lo descuadra. Medido a 390 px: **85 px
   de margen a la izquierda y 25 a la derecha**. Lo vio Gerardo en una captura.
   → Se neutraliza solo donde molesta y se centra la línea entera; el
   comportamiento de escritorio no se toca.
   📌 Deuda anotada en la línea del comentario de `.pis-vacio__acciones`: este
   `auto` en la clase base ya se ha tenido que neutralizar en tres sitios. Si
   vuelve a aparecer, sacarlo de `.pis-cta` y ponerlo solo aquí. */
@media (max-width: 700px) {
	.pis-barra-datos {
		justify-content: center;
	}

	.pis-barra-datos .pis-cta {
		margin-left: 0;
	}
}

.pis-barra-datos__precio {
	font-family: var(--gab-font-titulo);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 700;
	color: var(--gab-acento);
	margin: 0;
}

.pis-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pis-chip {
	padding: .25rem .75rem;
	border: 1px solid var(--gab-linea);
	background: var(--gab-fondo);
	font-size: .9375rem;
	color: var(--gab-tinta-2);
}

.pis-cta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: .75rem 1.5rem;
	background: var(--gab-acento);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--gab-d1) ease;
}

.pis-cta:hover,
.pis-cta:focus-visible {
	background: var(--gab-acento-2);
	color: #fff;
}

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

.pis-ficha__grid {
	display: grid;
	gap: 2.5rem;
	padding-block: 3rem;
}

@media (min-width: 900px) {
	.pis-ficha__grid {
		grid-template-columns: minmax(0, 1fr) 22rem;
		gap: 3rem;
	}
}

.pis-ficha__prosa > * + * {
	margin-top: 2.5rem;
}

.pis-ficha__aside > .pis-solicitud {
	position: sticky;
	top: 6rem;
}

.pis-solicitud {
	padding: 1.5rem;
	background: var(--gab-superficie);
	border: 1px solid var(--gab-linea);
}

.pis-solicitud__titulo {
	font-size: 1.125rem;
	margin: 0 0 .25rem;
}

.pis-solicitud__ref {
	color: var(--gab-tinta-2);
	font-size: .9375rem;
	margin: 0 0 1rem;
}

/* ---------- Tarjeta del anunciante (ficha) ----------
   Cabecera por tipo: agencia sobre la franja azul (blanco 9,45; rol al
   88 % = 7,72, valores ya medidos componiendo alfa), particular y equipo
   sobre superficie. Avatar cuadrado: radio 0 en toda la piel del portal. */

.pis-anunciante {
	margin: 0 0 1rem;
	border: 1px solid var(--gab-linea);
	background: var(--gab-fondo);
}

.pis-anunciante__cabecera {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
	background: var(--gab-superficie);
}

.pis-anunciante--agencia .pis-anunciante__cabecera,
.pis-anunciante--equipo .pis-anunciante__cabecera {
	background: var(--gab-franja);
}

.pis-anunciante__avatar,
.pis-anunciante__logo {
	flex: none;
	width: 48px;
	height: 48px;
}

.pis-anunciante__avatar {
	display: grid;
	place-items: center;
	background: var(--gab-acento);
	color: #FFFFFF;
	font: 700 1rem/1 var(--gab-font-titulo);
	letter-spacing: .03em;
}

.pis-anunciante--agencia .pis-anunciante__avatar,
.pis-anunciante--equipo .pis-anunciante__avatar {
	background: var(--gab-fondo);
	color: var(--gab-acento);
}

.pis-anunciante__logo {
	object-fit: contain;
	background: var(--gab-fondo);
	padding: 4px;
}

.pis-anunciante__quien {
	min-width: 0;
}

.pis-anunciante__rol {
	margin: 0;
	font: 600 .75rem/1.3 var(--gab-font-titulo);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gab-tinta-2);
}

.pis-anunciante--agencia .pis-anunciante__rol,
.pis-anunciante--equipo .pis-anunciante__rol {
	color: rgba(255, 255, 255, .88);
}

.pis-anunciante__nombre {
	margin: .125rem 0 0;
	font: 700 1.0625rem/1.3 var(--gab-font-titulo);
	color: var(--gab-titular);
	overflow-wrap: anywhere;
}

.pis-anunciante--agencia .pis-anunciante__nombre,
.pis-anunciante--equipo .pis-anunciante__nombre {
	color: #FFFFFF;
}

.pis-anunciante__cuerpo {
	padding: .875rem 1.25rem 1rem;
	font-size: .9375rem;
}

.pis-anunciante__desde,
.pis-anunciante__solo {
	margin: 0;
	color: var(--gab-tinta-2);
}

.pis-anunciante__enlace {
	display: inline-block;
	padding: .75rem 0;
	margin-top: .125rem;
	color: var(--gab-acento);
	font-weight: 700;
	text-underline-offset: 3px;
	transition: color var(--gab-d1) ease;
}

.pis-anunciante__enlace:hover,
.pis-anunciante__enlace:focus-visible {
	color: var(--gab-acento-2);
}

/* Aviso de listado acotado a un anunciante (archivo) */

.pis-aviso-anunciante {
	margin: 0 0 1.25rem;
	padding: .875rem 1.25rem;
	background: var(--gab-superficie);
	border-left: 3px solid var(--gab-acento);
}

/* ---------- Favoritos (corazón) ----------
   Sobre la foto va con FONDO OPACO (un alfa sobre imagen da contraste
   indefinido — la lección del badge) y padding 0 con el SVG a medida fija
   (la del padding de Astra que come iconos). El relleno activo usa el
   rojo ya presente en la paleta extendida (#8C1C1C). */

/* ★ El atributo [hidden] lo pinta el navegador con display:none de su
   hoja de agente… que CUALQUIER regla de autor pisa. Nuestro display:grid
   lo pisaba: los corazones se veían aunque el JS no hubiera podido
   engancharles el clic (así se camufló el bug del BOM, 08/08). Se honra
   el atributo explícitamente: sin contexto no hay corazón. */
.pis-fav[hidden] {
	display: none;
}

/* El corazón se dibuja más fino (trazo 1.7 como los iconos de valor):
   a 20 px el trazo 2 empastaba y «parecía dibujado» (Gerardo, 08/08). */
.pis-fav svg {
	stroke-width: 1.7;
}

/* El BOTÓN mide 44×44 (hit-area del sistema, no se negocia) pero es
   transparente: lo visible es un chip blanco de 34 px pintado sobre el
   propio SVG, para que se vea más corazón y menos cuadro (Gerardo 07/08).
   El chip sigue OPACO: un alfa sobre foto da contraste indefinido. */
.pis-fav--tarjeta {
	position: absolute;
	top: .35rem;
	right: .35rem;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gab-acento);
	cursor: pointer;
	transition: transform var(--gab-d1) ease;
}

/* Astra pinta TODO button:hover con su azul y texto blanco (regla global
   de main.min.css + inline): sobre el chip blanco el corazón desaparecía.
   Se declara explícito el estado hover/focus y el gesto pasa al SVG. */
.pis-fav--tarjeta:hover,
.pis-fav--tarjeta:focus,
.pis-fav--tarjeta:focus-visible {
	background: transparent;
	border: 0;
	color: var(--gab-acento);
}

.pis-fav--tarjeta svg {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 7px;
	box-sizing: border-box;
	background: var(--gab-fondo);
	border: 1px solid var(--gab-linea);
	transition: transform var(--gab-d1) ease;
}

.pis-fav--tarjeta:hover svg,
.pis-fav--tarjeta:focus-visible svg {
	transform: scale(1.06);
}

.pis-fav.es-activo {
	color: #8C1C1C;
}

.pis-fav.es-activo svg {
	fill: #8C1C1C;
	stroke: #8C1C1C;
}

@media (prefers-reduced-motion: reduce) {
	.pis-fav--tarjeta,
	.pis-fav--tarjeta:hover,
	.pis-fav--tarjeta svg,
	.pis-fav--tarjeta:hover svg,
	.pis-fav--tarjeta:focus-visible svg {
		transition: none;
		transform: none;
	}
}

/* La tarjeta es el contexto de posición del corazón. */
.pis-tarjeta {
	position: relative;
}

/* ---------- Botón «subir» de Astra (#ast-scroll-top) ----------
   La flecha salía descuadrada del cuadrado azul: Astra aplasta el SVG
   (24×9 px medidos en el navegador, 07/08) — la familia del bug «el
   padding de Astra se come los iconos». Caja fija, centrado por flex y
   el SVG a su proporción real. */
#ast-scroll-top {
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 0;
	background: var(--gab-acento);
}

#ast-scroll-top .ast-icon.icon-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Mismo selector que la regla inline de Astra (id + 2 clases): la suya trae
   un translate(0,-20%) que descentra la flecha y un width en em. Se
   conserva su rotate(180deg), que es lo que orienta la flecha hacia
   arriba. */
#ast-scroll-top .ast-icon.icon-arrow svg {
	display: block;
	width: 18px;
	height: auto;
	margin: 0;
	transform: rotate(180deg);
}

/* Lista de favoritos en el panel */

.pis-favoritos {
	margin-top: 2.5rem;
}

.pis-favoritos__titulo {
	font-size: 1.375rem;
	margin: 0 0 1rem;
}

.pis-favoritos__vacio {
	color: var(--gab-tinta-2);
}

.pis-favoritos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}

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

.pis-galeria__principal {
	margin: 0;
	overflow: hidden;
	background: var(--gab-superficie);
}

.pis-galeria__foto {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.pis-galeria__tira {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: .5rem;
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
}

.pis-galeria__enlace {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.pis-galeria__mini {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--gab-d2) ease;
}

.pis-galeria__enlace:hover .pis-galeria__mini,
.pis-galeria__enlace:focus-visible .pis-galeria__mini {
	transform: scale(1.06);
}

/* ---------- Especificaciones ---------- */

.pis-specs__lista {
	margin: 0;
	display: grid;
	gap: 0;
}

@media (min-width: 640px) {
	.pis-specs__lista {
		grid-template-columns: 1fr 1fr;
		column-gap: 2.5rem;
	}
}

.pis-specs__fila {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding: .625rem 0;
	border-bottom: 1px solid var(--gab-linea);
}

.pis-specs__fila dt {
	color: var(--gab-tinta-2);
	flex: none;
}

/* Puntos conductores tipo índice de libro: guían la vista de clave a valor. */
.pis-specs__fila::after {
	content: "";
	order: 1;
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--gab-linea-2);
	transform: translateY(-.25em);
	min-width: 1rem;
}

.pis-specs__fila dd {
	order: 2;
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* ---------- Etiqueta energética ---------- */

.pis-energia__valor {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1rem;
}

.pis-energia__letra {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding-inline: .5rem;
	font-family: var(--gab-font-titulo);
	font-weight: 700;
}

.pis-energia__letra--grande {
	min-width: 3rem;
	height: 3rem;
	font-size: 1.5rem;
}

.pis-energia__escala {
	display: flex;
	gap: 2px;
}

.pis-energia__banda {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	font-size: .875rem;
	opacity: .45;
}

.pis-energia__banda.es-activa {
	opacity: 1;
	outline: 3px solid var(--gab-tinta);
	outline-offset: 1px;
	z-index: 1;
}

/* Sin letra todavía: la escala se enseña como REFERENCIA, así que va más
   apagada que cuando hay calificación y ninguna banda lleva el marcado.
   El hueco de la letra es un recuadro neutro con una raya. */
.pis-energia--sin-letra .pis-energia__banda {
	/* .55 y no .3: sin banda activa que dé contraste, la escala entera se
	   quedaba lavada y dejaba de reconocerse como la etiqueta energética,
	   que es justo lo que se quiere enseñar. Sigue por debajo del 1 de una
	   banda calificada, así que no se confunde con una calificación. */
	opacity: .55;
}

.pis-energia__letra--vacia {
	background: var(--gab-superficie);
	color: var(--gab-tinta-2);
	border: 2px dashed var(--gab-linea-2);
}

.pis-energia__nota,
.pis-energia__sin {
	font-size: .875rem;
	color: var(--gab-tinta-2);
	margin: .75rem 0 0;
}

.pis-energia--chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
}

.pis-energia--chip .pis-energia__letra {
	min-width: 1.5rem;
	height: 1.5rem;
	font-size: .8125rem;
}

.pis-energia__rotulo {
	color: var(--gab-tinta-2);
}

/* ---------- Badges ---------- */

/* Badge de tres valores (R4): fondo pastel, texto oscuro y punto. Sin
   borde y con un radio suave — única pieza redondeada del sistema, pedido
   por Gerardo (07/08) al verlo en pantalla. */
.pis-badge {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .375rem .875rem;
	border: 0;
	border-radius: 4px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.pis-badge__punto {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	flex: none;
}

.pis-badge--tarjeta {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 1;
}

/* ---------- Acciones y avisos ---------- */

.pis-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.pis-accion {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: .625rem 1rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--gab-d1) ease, color var(--gab-d1) ease;
}

/* ★★★ EL `background` DE AQUÍ NO ES DECORACIÓN: ES LA DEFENSA (15/08/2026).
   Astra declara, en su CSS dinámico en línea:

       button:focus, button:hover, … {
           color: #fff;
           background-color: var(--ast-global-color-1);   ← #045cb4
       }

   Alcanza a TODO `<button>` del sitio. Esta regla pisaba **solo el color**, así
   que el fondo se quedaba con el azul de Astra y el texto marino encima:
   **contraste 2,12 medido en producción**. La ironía es que Astra pone fondo
   azul Y texto blanco (4,6, que pasaría): **fue el arreglo a medias el que lo
   rompió**. Lo vio Gerardo en una captura, no ninguna comprobación.
   ⚠️ También alcanza a `:focus`, así que quien navega con teclado se llevaba lo
   mismo.
   → **Regla de la casa: todo `:hover`/`:focus` de un `<button>` declara su
   `background`.** Es la 5ª vez que se paga «Astra gana a las piezas». */
.pis-accion:hover,
.pis-accion:focus-visible {
	background: var(--gab-superficie);
	border-color: var(--gab-acento);
	color: var(--gab-acento);
}

.pis-accion__icono {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

.pis-avisos {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.pis-avisos {
		grid-template-columns: 1fr 1fr;
	}
}

.pis-aviso {
	padding: 1rem 1.25rem;
	background: var(--gab-superficie);
	border-left: 3px solid var(--gab-acento);
}

.pis-aviso__titulo {
	font-size: 1rem;
	margin: 0 0 .375rem;
}

.pis-aviso p {
	margin: 0;
	font-size: .9375rem;
	color: var(--gab-tinta-2);
}

/* ---------- Barra fija de móvil ---------- */

.pis-barra-movil {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1rem;
	background: var(--gab-fondo);
	border-top: 1px solid var(--gab-linea);
	box-shadow: 0 -6px 20px rgba(13,44,84,.10);
}

@media (min-width: 900px) {
	.pis-barra-movil {
		display: none;
	}
}

/* El body reserva el alto de la barra para que no tape el pie. */
.single-inmueble {
	padding-bottom: 5rem;
}

@media (min-width: 900px) {
	.single-inmueble {
		padding-bottom: 0;
	}
}

.pis-barra-movil__datos {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
}

.pis-barra-movil__precio {
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	color: var(--gab-acento);
}

.pis-barra-movil__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem 1.25rem;
	background: var(--gab-acento);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	flex: none;
}

/* ---------- Listado ---------- */

.pis-archivo__cabecera {
	padding-block: 2.5rem 1.5rem;
	background: var(--gab-superficie);
	border-bottom: 1px solid var(--gab-linea);
	margin-bottom: 2rem;
}

.pis-archivo__titulo {
	margin: 0 0 .25rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.pis-archivo__conteo {
	margin: 0;
	color: var(--gab-tinta-2);
}

/* El lede del índice del blog.
   ★ Clase PROPIA y no un max-width en `.pis-archivo__conteo`: esa clase es el
   CONTADOR de los listados («14 inmuebles en venta»), que es una línea corta y
   no necesita límite. El blog reutiliza el hueco para un párrafo largo, y a
   ancho de marco (1.136 px) se quedaba en UNA sola línea de 155 caracteres.
   Lo cómodo de leer son 45-75 por línea. En móvil no actúa: el marco ya mide
   menos que el tope. */
.pis-archivo__lede {
	max-width: 68ch;
}

/* minmax 340: a ancho de marco (~1200 px) salen 3 columnas, no 4 — la foto
   manda sobre el texto (pedido por Gerardo, 07/08).
   ★ El `min(340px, 100%)` NO es adorno: un `minmax(340px, …)` a secas obliga
   a la columna a medir 340 aunque el contenedor mida menos, y a 375 px el
   marco deja ~311 → la tarjeta se salía 5 px y el móvil scrolleaba en
   horizontal. Medido el 10/08/2026 en /?s=… y en 404; venía de S1. */
.pis-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.pis-tarjeta {
	background: var(--gab-fondo);
	border: 1px solid var(--gab-linea);
	transition: transform var(--gab-d2) ease, box-shadow var(--gab-d2) ease;
}

/* Hover compuesto de 3 capas: la tarjeta sube, la foto se acerca y el
   título toma el acento. Tres micro-gestos con el mismo easing. */
.pis-tarjeta:hover,
.pis-tarjeta:focus-within {
	transform: translateY(-6px);
	/* Sombra teñida de marino a dos capas (repertorio BootstrapMade,
	   aprobado probar 07/08): una corta de contacto y una larga difusa. */
	box-shadow: 0 6px 14px rgba(13,44,84,.10), 0 20px 44px rgba(13,44,84,.20);
}

.pis-tarjeta__marco {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	background: var(--gab-superficie);
}

.pis-tarjeta__foto,
.pis-tarjeta__sinfoto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--gab-d2) ease;
}

.pis-tarjeta:hover .pis-tarjeta__foto,
.pis-tarjeta:focus-within .pis-tarjeta__foto {
	transform: scale(1.05);
}

.pis-tarjeta__cuerpo {
	padding: 1rem 1.125rem 1.25rem;
	display: grid;
	gap: .5rem;
}

.pis-tarjeta__precio {
	font-family: var(--gab-font-titulo);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--gab-acento);
	margin: 0;
}

.pis-tarjeta__titulo {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 0;
}

.pis-tarjeta__titulo a {
	color: var(--gab-titular);
	text-decoration: none;
	transition: color var(--gab-d1) ease;
}

.pis-tarjeta:hover .pis-tarjeta__titulo a,
.pis-tarjeta__titulo a:focus-visible {
	color: var(--gab-acento);
}

.pis-tarjeta__ubicacion {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	font-size: .9375rem;
	color: var(--gab-tinta-2);
}

/* Sufijo del precio periódico («/mes»): en el cuerpo de texto y en gris,
   para que el número siga siendo el protagonista. */
.pis-tarjeta__mes {
	font-family: var(--gab-font-base);
	font-size: .9375rem;
	font-weight: 400;
	color: var(--gab-tinta-2);
	margin-left: .25rem;
}

/* Fila inferior de la tarjeta (referencia 07/08): datos duros + energía,
   separados del bloque de texto por una línea. Con el precio arriba (orden
   final de Gerardo, 07/08), la fila se empuja al fondo y toda la rejilla
   la alinea a la misma altura. */
.pis-tarjeta__pie {
	margin-top: auto;
	padding-top: .875rem;
	border-top: 1px solid var(--gab-linea);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
}

/* Dentro de la fila, los datos van desnudos (icono + cifra), sin la píldora
   con borde del chip genérico: la línea superior ya separa. */
.pis-tarjeta__pie .pis-chip {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: .875rem;
}

.pis-tarjeta__pie .pis-chips {
	gap: .375rem 1rem;
}

/* ---------- Cascada de reveals (sistema, sección 3) ---------- */

/* Estado por defecto VISIBLE: si el JS falla, el contenido se ve. */
.reveal {
	opacity: 1;
	transform: none;
}

.js-on .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
	transition-delay: calc(var(--i, 0) * 80ms);
}

.js-on .reveal.es-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-on .reveal,
	.js-on .reveal.es-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.pis-tarjeta,
	.pis-tarjeta__foto,
	.pis-galeria__mini {
		transition: none;
	}
	.pis-tarjeta:hover,
	.pis-tarjeta:focus-within,
	.pis-tarjeta:hover .pis-tarjeta__foto,
	.pis-galeria__enlace:hover .pis-galeria__mini {
		transform: none;
	}
}

/* ---------- Impresión: la ficha en papel para la visita ---------- */

@media print {
	.gab-header,
	.gab-footer,
	.pis-barra-movil,
	.pis-acciones,
	.pis-ficha__aside,
	.pis-galeria__tira,
	.pis-cta {
		display: none !important;
	}
	.pis-fhero {
		min-height: auto;
	}
	.pis-fhero__foto,
	.pis-fhero__scrim {
		position: static;
		height: auto;
	}
	.pis-fhero__texto {
		color: #000;
		padding-block: 1rem;
	}
	.pis-fhero__titulo,
	.pis-fhero__direccion,
	.pis-fhero__texto .pis-eyebrow {
		color: #000;
	}
	.pis-ficha__grid {
		display: block;
	}
	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- Lightbox de galería (dialog nativo) ---------- */

.pis-lightbox {
	width: min(94vw, 1100px);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
}

.pis-lightbox::backdrop {
	background: rgba(13, 44, 84, .92);
}

.pis-lightbox__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 86vh;
	object-fit: contain;
}

.pis-lightbox__cerrar {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 1.75rem;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	cursor: pointer;
}

.pis-lightbox__cerrar:hover,
.pis-lightbox__cerrar:focus-visible {
	background: rgba(255, 255, 255, .14);
}

.pis-galeria__foto[role="button"] {
	cursor: zoom-in;
}

/* ---------- Paginación ----------
   Astra la pinta con su propio azul (#334155 computado) y con hit-areas
   pequeñas. Se viste con la paleta y se llevan los enlaces a 44px. */

.pis-archivo .pagination,
.pis-archivo .ast-pagination {
	margin: 0 0 3rem;
}

.pis-archivo .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.pis-archivo .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: .5rem .875rem;
	border: 1px solid var(--gab-linea);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	text-decoration: none;
	transition: border-color var(--gab-d1) ease, color var(--gab-d1) ease;
}

.pis-archivo a.page-numbers:hover,
.pis-archivo a.page-numbers:focus-visible {
	border-color: var(--gab-acento);
	color: var(--gab-acento);
}

.pis-archivo .page-numbers.current {
	background: var(--gab-acento);
	border-color: var(--gab-acento);
	color: #fff;
	font-weight: 600;
}

.pis-archivo .page-numbers.dots {
	border-color: transparent;
	color: var(--gab-tinta-2);
}

/* Logotipo en la cabecera: alto fijo para que no salte al cargar. */
.pis-marca--logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.pis-marca__img {
	height: clamp(38px, 5vw, 52px);
	width: auto;
	display: block;
}

/* ---------- Mapa de la ficha ---------- */

.pis-mapa__nota {
	color: var(--gab-tinta-2);
	margin: 0 0 1rem;
}

.pis-mapa__boton {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: .75rem 1.25rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	font: inherit;
	cursor: pointer;
	transition: border-color var(--gab-d1) ease, color var(--gab-d1) ease;
}

/* El `background` es la defensa contra Astra — ver `.pis-accion:hover`. */
.pis-mapa__boton:hover:not(:disabled),
.pis-mapa__boton:focus-visible {
	background: var(--gab-superficie);
	border-color: var(--gab-acento);
	color: var(--gab-acento);
}

.pis-mapa__boton:disabled {
	opacity: .6;
	cursor: progress;
}

.pis-mapa__aviso {
	font-size: .875rem;
	color: var(--gab-tinta-2);
	margin: .625rem 0 0;
}

/* Alto fijo: el hueco ya ocupa lo que ocupará el mapa, así que abrirlo no
   provoca salto de maquetación (CLS 0). */
.pis-mapa__lienzo {
	height: 360px;
	margin-top: 1rem;
	background: var(--gab-superficie);
	border: 1px solid var(--gab-linea);
}

.pis-mapa__lienzo[hidden] {
	display: none;
}

/* Marcador en CSS puro: no se descargan los PNG de Leaflet. */
.pis-marcador__punto {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gab-acento);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(13, 44, 84, .45);
}

/* Leaflet pone su propio tipo de letra y colores: se traen a la paleta. */
.leaflet-container {
	font-family: var(--gab-font-texto);
}

.leaflet-container a {
	color: var(--gab-acento);
}

/* (07/08) Sin franjas de color, la separación entre secciones la hace el
   AIRE: padding generoso, no bandas (referencia aprobada por Gerardo). */
.pis-seccion {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* Cabecera de sección con la salida a la derecha (patrón de la
   referencia: título + «Ver todos →» en la misma línea). */
.pis-seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: 1.75rem;
}

.pis-seccion__cabecera .pis-h2 {
	margin: 0;
}

/* Eyebrow de sección (firma BootstrapMade de la casa): rótulo corto en
   mayúsculas sobre el titular. El azul #154585 da 9,45:1 sobre blanco
   (mismo par medido que la franja, el ratio es simétrico). */
.pis-eyebrow--seccion {
	color: var(--gab-acento-2);
	margin-bottom: .375rem;
}

.pis-valores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	/* (08/08) Más aire: separación de la cabecera y entre columnas — la
	   sección iba «ajustada verticalmente» (Gerardo mirando en pantalla).
	   El margen va en el shorthand: una línea suelta antes del shorthand
	   queda pisada por él. */
	gap: 2.5rem 2rem;
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
}

/* (07/08) Formato de la referencia: icono + titular + dos líneas,
   centrado y sin la barra superior de acento. */
.pis-valor {
	text-align: center;
}

.pis-valor__icono {
	display: inline-flex;
	width: 3rem;
	height: 3rem;
	color: var(--gab-acento-2);
	margin-bottom: .875rem;
}

.pis-valor__icono svg {
	width: 100%;
	height: 100%;
}

.pis-valor__titulo {
	font-size: 1.0625rem;
	margin: 0 0 .5rem;
}

.pis-valor p {
	margin: 0 auto;
	color: var(--gab-tinta-2);
	font-size: .9375rem;
	max-width: 34ch;
}

/* ---------- Agencias destacadas (Acción 5, 08/08) ----------
   Tarjetas a la línea de las puertas por tipo: superficie con borde,
   centradas, hover que levanta. El avatar de iniciales sigue el patrón de
   la tarjeta del anunciante (cuadrado, radio 0, NUNCA Gravatar). */
.pis-agencias {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pis-agencia a {
	display: grid;
	justify-items: center;
	gap: .375rem;
	padding: 2rem 1.25rem;
	border: 1px solid var(--gab-linea);
	background: var(--gab-superficie);
	text-decoration: none;
	color: var(--gab-titular);
	text-align: center;
	transition: border-color var(--gab-d1) ease, transform var(--gab-d2) ease, box-shadow var(--gab-d2) ease;
}

.pis-agencia a:hover,
.pis-agencia a:focus-visible {
	border-color: var(--gab-acento);
	transform: translateY(-4px);
	box-shadow: 0 6px 14px rgba(13,44,84,.10), 0 20px 44px rgba(13,44,84,.18);
}

.pis-agencia__logo img,
.pis-agencia__inicial {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--gab-fondo);
	border: 1px solid var(--gab-linea);
	margin-bottom: .625rem;
}

.pis-agencia__inicial {
	display: grid;
	place-items: center;
	font-family: var(--gab-font-titulo);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--gab-acento);
}

.pis-agencia__nombre {
	font-family: var(--gab-font-titulo);
	font-weight: 600;
	font-size: 1.0625rem;
}

.pis-agencia__n {
	font-size: .9375rem;
	color: var(--gab-tinta-2);
}

@media (prefers-reduced-motion: reduce) {
	.pis-agencia a,
	.pis-agencia a:hover,
	.pis-agencia a:focus-visible {
		transition: none;
		transform: none;
	}
}

/* ---------- «Crear cuenta» en la cabecera (08/08) ----------
   Enlace de texto junto al icono de usuario: el registro solo se veía en
   el pie. Con sesión lo esconde el JS ([hidden] se honra más abajo con el
   mismo criterio que el corazón). En móvil estrecho se oculta: el camino
   es icono → /acceder/ → «Crear cuenta gratis». */
.gab-nav-registro {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: .5rem;
	font-family: var(--gab-font-titulo);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--gab-titular);
	text-decoration: none;
	transition: color var(--gab-d1) ease;
}

.gab-nav-registro:hover,
.gab-nav-registro:focus-visible {
	color: var(--gab-acento-2);
	text-decoration: underline;
}

.gab-nav-registro[hidden] {
	display: none;
}

@media (max-width: 700px) {
	.gab-nav-registro {
		display: none;
	}
}

/* ---------- Franja CTA de publicar (Acción 4, 08/08) ----------
   La única banda de color de la home: marino como el hero, texto blanco
   (13,95:1 medido) y botón claro. Patrón de la referencia aprobada. */
.pis-cta-franja {
	background: var(--gab-acento);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.pis-cta-franja__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
}

.pis-cta-franja__titulo {
	color: #fff;
	font-size: clamp(1.375rem, 3vw, 1.875rem);
	margin: 0 0 .375rem;
}

.pis-cta-franja__texto {
	color: rgba(255, 255, 255, .92);
	margin: 0;
}

.pis-cta-franja .pis-cta--claro {
	margin-left: 0;
	flex: none;
}

/* Utilidad de cabecera centrada (referencia: la sección de ayuda va
   centrada, las demás a la izquierda). El .pis-h2 es flex (herencia de la
   numeración retirada), así que el centrado pide justify-content. */
.pis-centrado {
	text-align: center;
}

.pis-centrado .pis-h2 {
	justify-content: center;
}

.pis-faq-marco {
	max-width: 46rem;
}

.pis-faq {
	margin-top: 1.5rem;
	border-top: 1px solid var(--gab-linea);
}

.pis-faq__item {
	border-bottom: 1px solid var(--gab-linea);
}

.pis-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 0;
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}

.pis-faq__item summary::-webkit-details-marker {
	display: none;
}

.pis-faq__item summary:focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 2px;
}

.pis-faq__pregunta {
	font-size: 1.0625rem;
	margin: 0;
	color: var(--gab-titular);
}

.pis-faq__signo {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--gab-acento);
	transition: transform var(--gab-d2) ease;
}

.pis-faq__item[open] .pis-faq__signo {
	transform: rotate(45deg);
}

.pis-faq__item[open] .pis-faq__pregunta {
	color: var(--gab-acento);
}

.pis-faq__respuesta {
	margin: 0 0 1.25rem;
	color: var(--gab-tinta-2);
	max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {


	.pis-faq__signo {
		transition: none;
	}
}

/* ============================================================
   K · PIE DEL PORTAL
   Fondo de marca, cuatro bloques y barra de créditos, como la v1.
   Ratio medido: blanco sobre #0D2C54 = 13,95:1 (AAA).
   ============================================================ */

.gab-footer {
	background: var(--gab-acento);
	color: #fff;
}

.pis-pie {
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 720px) {
	.pis-pie {
		grid-template-columns: 1.2fr 1fr 1fr 1fr;
		gap: 2rem;
	}
}

.pis-pie__logo {
	width: 108px;
	height: auto;
	display: block;
	background: #fff;
	padding: .5rem;
}

.pis-pie__lema {
	margin: .875rem 0 0;
	color: rgba(255, 255, 255, .88);
	font-size: .9375rem;
}

.pis-pie__titulo {
	font-family: var(--gab-font-titulo);
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 1rem;
}

.pis-pie__bloque ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .125rem;
}

.pis-pie__bloque a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	padding-block: .25rem;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	transition: color var(--gab-d1) ease;
}

.pis-pie__bloque a:hover,
.pis-pie__bloque a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.pis-pie__icono {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

/* Barra de créditos: el gris claro de la v1 con la tinta de marca.
   Ratio medido: #0D2C54 sobre #D1D5DB = 9,47:1. */
.gab-footer__credito {
	margin: 0;
	background: var(--gab-linea);
	color: var(--gab-acento);
	text-align: center;
	padding-block: 1rem;
	font-size: .9375rem;
}

.gab-footer__credito a {
	color: var(--gab-acento);
}

/* La barra de créditos va a sangre completa, fuera del marco del pie. */
.gab-footer__inner:has(> .gab-footer__credito) {
	padding-inline: 0;
}

/* ============================================================
   L · PORTADA v2 — composición SAGASTA con firma propia
   ============================================================ */

/* ---------- Titulares numerados ---------- */

.pis-h2 {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin: 0 0 .75rem;
}

.pis-h2--centrado {
	justify-content: center;
	text-align: center;
	margin-bottom: 2rem;
}

.pis-seccion--compacta {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---------- Hero a sangre con foto real ---------- */

.pis-hero {
	position: relative;
	display: grid;
	align-content: end;
	/* Más bajo que antes (68vh dejaba la tarjeta del buscador fuera de
	   pantalla en portátiles): el hero termina de verse y los filtros entran
	   sin scrollear. */
	min-height: clamp(400px, 56vh, 540px);
	padding-block: clamp(2rem, 5vw, 3rem) 0;
	background: var(--gab-acento);
	/* SIN overflow:hidden. Lo tenía para que la foto no desbordara y estaba
	   RECORTANDO la tarjeta del buscador, que por diseño sobresale del borde
	   inferior: en pantalla se veía media tarjeta metida bajo la sección
	   siguiente. El recorte va ahora en `.pis-hero__fondo`, que es quien
	   contiene la imagen. */
}

.pis-hero__fondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pis-hero__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* R1 del sistema: overlay del 60% mínimo donde hay texto encima. El
   degradado deja respirar la parte alta de la foto. */
.pis-hero__scrim {
	position: absolute;
	inset: 0;
	/* Degradado SELECTIVO, no un velo uniforme: arriba la foto se ve limpia
	   (son imágenes bonitas y taparlas es desperdiciarlas) y el azul solo
	   pesa en la franja baja, que es donde va el texto blanco. La regla R1
	   del sistema pide 60% mínimo BAJO EL TEXTO, no en toda la imagen.

	   SUAVIZADO 11/08/2026 (Gerardo): el tinte marino teñía de azul la foto
	   entera y se perdía el color real del inmueble. Ahora la mitad superior
	   va a CERO y el degradado entra abajo.

	   ★★ CALIBRADO POR ANCHO — 11/08/2026 (tarde). Se probó un velo en franja
	   pegado al texto y Gerardo lo rechazó: se veía la franja. Vuelve el
	   degradado de siempre, pero **el mismo degradado para todos los anchos
	   no puede funcionar aquí**, y esta es la razón:

	   la tarjeta del buscador pasa a UNA FILA en `min-width: 980px`. Por
	   debajo va apilada, ocupa la parte baja del hero y **empuja el texto
	   ARRIBA** (medido: del 4 % al 37 % del alto); por encima, el texto baja
	   al 40-82 %. Un degradado calibrado para uno deja al otro sin velo — que
	   es exactamente lo que pasó por la mañana: validado en escritorio, texto
	   ilegible en móvil (1,3 de contraste).

	   ⚠️ El corte de 980 NO es un número redondo elegido a ojo: es el mismo
	   `min-width` de `.pis-buscador`. **Si se mueve ese, hay que mover este.**

	   El .63 tampoco es a ojo: `pruebas/velo-minimo.py` despeja, píxel a
	   píxel de cada letra, el alfa MÍNIMO de marino que pone el blanco en
	   4,5 sobre la foto cruda. Salió 0,62 y se deja en 0,63. Menos marino =
	   texto que no se lee; más = la foto azulada que Gerardo no quiere. */
	background: linear-gradient(180deg,
		rgba(13, 44, 84, .63) 0%,
		rgba(13, 44, 84, .63) 40%,
		rgba(13, 44, 84, .22) 70%,
		rgba(13, 44, 84, .10) 100%);
}

/* ≥980: el buscador es una fila, el texto baja — y la parte alta de la foto,
   que es la que más se ve en escritorio, queda LIMPIA. */
@media (min-width: 980px) {
	.pis-hero__scrim {
		background: linear-gradient(180deg,
			rgba(13, 44, 84, 0) 0%,
			rgba(13, 44, 84, .03) 20%,
			rgba(13, 44, 84, .63) 39%,
			rgba(13, 44, 84, .63) 86%,
			rgba(13, 44, 84, .52) 100%);
	}
}

.pis-hero__contenido {
	position: relative;
	z-index: 1;
	padding-bottom: 2rem;
}


.pis-hero__titulo {
	color: #fff;
	font-size: clamp(2.25rem, 6.5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: .5rem 0 1rem;
	/* Sombra sutil: con el velo más claro, asegura el borde de las letras
	   contra las zonas claras de la foto (ventanas, cielo). No se percibe
	   como sombra, se percibe como nitidez. */
	text-shadow: 0 2px 12px rgba(13, 44, 84, .45);
}

.pis-hero__lede {
	color: #fff;
	font-size: clamp(1rem, 2vw, 1.1875rem);
	line-height: 1.55;
	margin: 0;
	max-width: 54ch;
	text-shadow: 0 1px 10px rgba(13, 44, 84, .5);
}

.pis-eyebrow--claro {
	color: #fff;
	text-shadow: 0 1px 8px rgba(13, 44, 84, .55);
}

/* La tarjeta del buscador monta sobre el borde del hero: es lo que la hace
   protagonista sin robarle sitio a la foto. */
.pis-hero__tarjeta {
	position: relative;
	z-index: 2;
	margin-bottom: -3.5rem;
}

.pis-buscador {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--gab-fondo);
	border: 1px solid var(--gab-linea);
	box-shadow: 0 20px 48px rgba(13,44,84,.28);
}

@media (min-width: 980px) {
	.pis-buscador {
		grid-template-columns: 1.6fr 1fr 1.2fr 1fr auto;
		align-items: end;
	}
}

.pis-buscador__campo {
	display: grid;
	gap: .3125rem;
	min-width: 0;
	margin: 0;
}

.pis-buscador__campo label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--gab-tinta-2);
}

.pis-buscador__campo input,
.pis-buscador__campo select {
	width: 100%;
	min-height: 48px;
	padding: .625rem .75rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	font: inherit;
}

.pis-buscador__campo input:focus-visible,
.pis-buscador__campo select:focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 1px;
}

.pis-buscador__enviar {
	min-height: 48px;
	padding: .75rem 2rem;
	border: 0;
	background: var(--gab-acento);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--gab-d1) ease;
}

.pis-buscador__enviar:hover,
.pis-buscador__enviar:focus-visible {
	background: var(--gab-acento-2);
}

/* El hero deja hueco para la tarjeta que se le monta encima. */
.pis-home .pis-seccion:first-of-type {
	padding-top: calc(clamp(2.5rem, 5vw, 3.5rem) + 3.5rem);
}

/* ---------- Puertas por tipo ---------- */

.pis-puertas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Tiles sobre superficie CON borde (07/08, segunda pasada de Gerardo: el
   borde siempre visible «quedaba bien»); en hover pasa al acento. */
.pis-puerta a {
	display: grid;
	justify-items: center;
	gap: .5rem;
	padding: 1.5rem 1rem;
	border: 1px solid var(--gab-linea);
	/* BLANCO, no `--gab-superficie` (11/08/2026, Gerardo): ese gris tira a
	   azul (#F4F6F8) y en tres cajas grandes seguidas se notaba como un
	   tono sucio. El borde ya las separa del fondo, así que no hacen falta
	   las dos cosas. */
	background: var(--gab-fondo);
	text-decoration: none;
	color: var(--gab-titular);
	transition: border-color var(--gab-d1) ease, transform var(--gab-d2) ease, box-shadow var(--gab-d2) ease;
}

.pis-puerta a:hover,
.pis-puerta a:focus-visible {
	border-color: var(--gab-acento);
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(13,44,84,.12);
}

.pis-puerta__svg {
	width: 2rem;
	height: 2rem;
	color: var(--gab-acento);
}

.pis-puerta__nombre {
	font-family: var(--gab-font-titulo);
	font-weight: 600;
}

.pis-puerta__n {
	font-size: .8125rem;
	color: var(--gab-tinta-2);
}

.pis-cta--claro {
	background: var(--gab-fondo);
	color: var(--gab-acento);
	margin-left: 0;
}

.pis-cta--claro:hover,
.pis-cta--claro:focus-visible {
	background: var(--gab-superficie);
	color: var(--gab-acento-2);
}

/* ---------- Chips con icono ---------- */

.pis-chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
}

.pis-chip__icono {
	width: 1.0625rem;
	height: 1.0625rem;
	flex: none;
	color: var(--gab-acento);
	opacity: .85;
}

/* ---------- Tarjetas: que el interior cuadre en altura ----------
   Sin esto, tarjetas con título de una o de tres líneas dejan los chips a
   alturas distintas y la rejilla se ve descuadrada. La tarjeta es una
   columna flex y el bloque de datos se empuja al fondo. */

.pis-tarjeta,
.pis-tarjeta > article {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pis-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1 1 auto;
}

/* El título ocupa dos líneas SIEMPRE: reserva su alto aunque el texto sea
   corto, y recorta con elipsis si es largo. Así todas las tarjetas alinean
   precio arriba y chips abajo. */
.pis-tarjeta__titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * 1.35 * 1.0625rem);
}

/* (07/08) El empuje al fondo lo lleva ahora .pis-tarjeta__pie, que agrupa
   chips y energía bajo la línea separadora — ver la sección de tarjetas. */

@media (prefers-reduced-motion: reduce) {
	.pis-puerta a:hover,
	.pis-puerta a:focus-visible {
		transform: none;
	}
}

/* ============================================================
   M · CABECERA DEL PORTAL
   Cuatro arreglos medidos sobre el chrome del starter (06/08):
   1. Fondo BLANCO. El logotipo es un PNG **sin canal alfa** con fondo
      blanco opaco (comprobado: las cuatro esquinas son 255,255,255,255),
      así que sobre la superficie #F0F5FA se recortaba un rectángulo.
      La v1 también tenía la cabecera en blanco.
   2. El nombre «Piseando» heredaba `line-height: 0` del enlace del logo
      (medido: altura 0 px) y salía descolgado. Ahora la marca es un flex
      con su propio interlineado y separación.
   3. El menú se va al centro y el CTA a la derecha: iban apilados dentro
      del mismo `<nav>` (el CTA quedaba a 44 px por debajo del menú).
   4. El contenido de la cabecera se alinea con el de las secciones
      (1160 px centrados), no con el borde de la ventana.
   ============================================================ */

.gab-header {
	background: var(--gab-fondo);
	border-bottom: 1px solid var(--gab-linea);
}

.gab-header__inner {
	width: min(100% - (var(--gab-gutter) * 2), var(--gab-maxw));
	margin-inline: auto;
	padding-inline: 0;
	gap: 1.5rem;
}

/* ---------- Marca ---------- */

.pis-marca--logo {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	line-height: 1.1;
	text-decoration: none;
}

.pis-marca__img {
	height: clamp(40px, 4.5vw, 52px);
	width: auto;
	display: block;
	flex: none;
}

.pis-marca__texto {
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1;
	color: var(--gab-acento);
	/* Compensa el aire inferior del propio dibujo del logotipo: sin esto el
	   texto se lee un pelo alto respecto al icono. */
	transform: translateY(1px);
}

/* ---------- Navegación y CTA en escritorio ---------- */

@media (min-width: 900px) {
	.gab-nav {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	/* La lista se centra en el espacio libre y el CTA queda pegado a la
	   derecha, en la misma línea. */
	.gab-nav__lista {
		margin-inline: auto;
	}

	.gab-nav__cta {
		margin-left: auto;
		flex: none;
	}
}

.gab-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gab-nav__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gab-tinta);
	text-decoration: none;
	font-size: 1.0625rem;
	transition: color var(--gab-d1) ease;
}

.gab-nav__lista a:hover,
.gab-nav__lista a:focus-visible {
	color: var(--gab-acento);
}

.gab-nav__lista .current-menu-item > a {
	color: var(--gab-acento);
	font-weight: 600;
}

/* CTA de la cabecera: píldora, como en la v1. */
.gab-nav-cta.gab-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .75rem 1.75rem;
	border-radius: 999px;
	background: var(--gab-acento);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--gab-d1) ease;
}

.gab-nav-cta.gab-nav__cta:hover,
.gab-nav-cta.gab-nav__cta:focus-visible {
	background: var(--gab-acento-2);
	color: #fff;
}

/* En móvil el CTA ocupa el ancho del panel desplegado. */
@media (max-width: 899px) {
	.gab-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.gab-nav__lista a {
		min-height: 48px;
		padding-block: .5rem;
	}

	.gab-nav-cta.gab-nav__cta {
		margin-top: 1rem;
		width: 100%;
	}
}

/* El centrado del menú iba en una media query ANTERIOR a la regla general
   de `.gab-nav__lista`, que declara `margin: 0` y la pisaba por orden
   (medido: el menú quedaba a 24 px de la marca y a 297 px del CTA). Se
   redeclara aquí, ya al final de la hoja. */
@media (min-width: 900px) {
	.gab-nav__lista {
		margin-inline: auto;
	}
}

/* ---------- Cabecera: aire y peso del menú (ajuste 06/08) ----------
   El menú se leía blando por tres cosas a la vez: Lato 400 (grotesca
   humanista de trazo fino), gris de texto y poco aire alrededor. Se
   corrigen las tres.

   El menú pasa a Montserrat 500 —la familia de los titulares, y peso REAL
   de la variable 400-700, no sintetizado: Lato no tiene 600 y subirle peso
   habría saltado a negrita— con el color de titular (#2C3E50, 10,98:1
   sobre blanco). */

.gab-header__inner {
	/* 88 px era justo lo que ya medía por el contenido (logo de 52 px + su
	   caja), así que no añadía aire. Con 104 quedan ~26 px arriba y abajo. */
	min-height: 104px;
	padding-block: 1.25rem;
}

.gab-nav__lista a {
	font-family: var(--gab-font-titulo);
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: .005em;
	color: var(--gab-titular);
}

.gab-nav__lista a:hover,
.gab-nav__lista a:focus-visible {
	color: var(--gab-acento);
}

.gab-nav__lista .current-menu-item > a,
.gab-nav__lista .current_page_item > a {
	color: var(--gab-acento);
	font-weight: 600;
}

/* ★ Astra pone `.ast-container` en FLEX: un `main` sin flex-grow encoge
   a su contenido y queda pegado a la izquierda. En la home no se veía
   (el hero a sangre lo estira), pero /inmueble/ y /cuenta/ salían
   descentrados — medido 08/08: main a 1188 px con left 0 en un viewport
   de 2545. El main del portal ocupa SIEMPRE todo el marco. */
.ast-container > main {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* Los filtros sticky del buscador conviven con la cabecera sticky del
   portal (105 px): sin este top se metían por debajo de ella. Desde
   gab-facetas 1.4.0 el sticky vive en el PANEL (details), no en el form. */
@media (min-width: 900px) {
	body .gab-fac__panel,
	body .gab-fac__filtros {
		top: 121px;
	}
}

/* La cabecera es sticky y ahora mide 105 px: el `scroll-padding-top` del
   starter (90 px) dejaba el destino de las anclas medio tapado. Se ajusta
   con holgura para que el título del bloque quede a la vista. */
html {
	scroll-padding-top: 124px;
}

/* ============================================================
   N · BARRA SUPERIOR (patrón de dos líneas)
   Gris #D1D5DB con tinta de marca: 9,47:1 (medido). Es el mismo
   recurso que la barra de créditos del pie, así que la web queda
   cerrada arriba y abajo con la misma pieza.
   No es sticky: al hacer scroll se va y queda la cabecera.
   ============================================================ */

.pis-topbar {
	background: var(--gab-linea);
	color: var(--gab-acento);
	font-size: .875rem;
}

.pis-topbar__inner {
	width: min(100% - (var(--gab-gutter) * 2), var(--gab-maxw));
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 40px;
	padding-block: .375rem;
	flex-wrap: wrap;
}

.pis-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	margin: 0;
}

.pis-topbar__item--derecha {
	margin-left: auto;
}

.pis-topbar__item a {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	color: inherit;
	text-decoration: none;
	min-height: 32px;
}

.pis-topbar__item a:hover,
.pis-topbar__item a:focus-visible {
	color: var(--gab-acento-2);
	text-decoration: underline;
}

.pis-topbar__icono {
	width: 1rem;
	height: 1rem;
	flex: none;
	opacity: .85;
}

/* En móvil solo caben el ámbito y el correo; el reclamo de «publicar gratis»
   ya está en la portada y en el CTA, así que aquí se retira. */
@media (max-width: 720px) {
	.pis-topbar__item--oculto-movil {
		display: none;
	}

	.pis-topbar__inner {
		gap: 1rem;
		font-size: .8125rem;
	}
}

/* Con la barra encima, la cabecera puede ser más baja sin agobiar: el
   conjunto de las dos líneas es lo que da el aire. */
.gab-header__inner {
	min-height: 84px;
	padding-block: 1rem;
}

/* ---------- Hamburguesa: parche del starter 0.1.1 ----------
   Astra estiliza todos los `button` con `padding: 12px 24px`. En un botón de
   44×44 px esos 48 px horizontales no caben y el navegador **comprime el SVG
   a ancho 0**: la hamburguesa se queda sin rayas y no hay ningún error.
   Corregido también en gab-base-theme 0.1.1 para que ningún fork lo repita. */
.gab-nav-toggle {
	padding: 0;
	flex: none;
}

.gab-nav-toggle svg {
	flex: none;
	width: 22px;
	height: 22px;
}

/* ---------- Hero y primera sección: ajustes finales (06/08) ----------
   1. El hero se veía encogido tras bajarlo para que cupieran los filtros.
      Ahora que la tarjeta ya no se recorta, puede volver a respirar.
   2. La sección siguiente quedaba PEGADA a la tarjeta del buscador: la
      regla que reservaba el hueco (`.pis-seccion:first-of-type`) la pisaba
      después `.pis-seccion--compacta`. Se ataca con el selector adyacente,
      que además es más claro: «lo que va justo detrás del hero».
      Reserva = lo que sobresale la tarjeta (56 px) + su propio aire. */

.pis-hero {
	min-height: clamp(460px, 64vh, 620px);
}

.pis-hero + .pis-seccion,
.pis-hero + .pis-seccion--compacta {
	/* (07/08) Un punto más de aire tras la tarjeta del buscador, pedido por
	   Gerardo mirando la pantalla. */
	padding-top: calc(3.5rem + clamp(3.5rem, 7vw, 5rem));
}

/* ---------- Puertas por tipo: más presencia ----------
   Eran demasiado tímidas para ser el primer punto de entrada al catálogo:
   icono pequeño, texto de tamaño normal y el contador perdido. */

.pis-puerta a {
	gap: .875rem;
	padding: 2.25rem 1.25rem;
}

.pis-puerta__svg {
	width: 2.75rem;
	height: 2.75rem;
	stroke-width: 1.4;
}

.pis-puerta__nombre {
	font-size: 1.25rem;
	letter-spacing: -.01em;
}

.pis-puerta__n {
	font-size: .9375rem;
	color: var(--gab-tinta-2);
}

/* El texto del contador lo pone PHP: con CSS saldría «1 disponibles». */
.pis-puerta a {
	text-align: center;
}

/* ---------- Buscador del hero: más presencia (06/08) ----------
   Es LA acción de un portal inmobiliario: lo primero que hace quien entra
   es filtrar. Antes competía en peso con el texto de encima; ahora gana.
   Iconos dentro de cada campo para escanear sin leer las etiquetas,
   controles de 52 px (objetivo táctil principal de la web) y botón con
   lupa. Se mantiene el alto total para que siga entrando en un portátil
   de 700 px: comprobado. */

.pis-buscador {
	padding: 1.5rem;
	gap: 1.125rem;
	box-shadow: 0 22px 54px rgba(13, 44, 84, .32);
}

.pis-buscador__campo label {
	font-weight: 600;
	font-size: .84375rem;
	color: var(--gab-titular);
	letter-spacing: .01em;
}

/* Caja que envuelve icono + control, para poder superponerlos. */
.pis-buscador__control {
	position: relative;
	display: block;
}

.pis-buscador__icono {
	position: absolute;
	left: .875rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.125rem;
	height: 1.125rem;
	color: var(--gab-acento);
	opacity: .75;
	pointer-events: none;
	z-index: 1;
}

.pis-buscador__campo input,
.pis-buscador__campo select {
	min-height: 52px;
	padding-left: 2.75rem;
	border-color: var(--gab-linea-2);
	font-size: 1rem;
	/* Los select nativos traen su propia flecha a la derecha; se les deja
	   sitio para que no pise al texto de la opción larga. */
	padding-right: 2rem;
}

.pis-buscador__campo select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2C54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 1.125rem;
}

.pis-buscador__campo input::placeholder {
	color: var(--gab-tinta-2);
	opacity: .8;
}

/* Al enfocar, el campo se marca entero: el foco se ve desde lejos. */
.pis-buscador__campo input:focus-visible,
.pis-buscador__campo select:focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 0;
	border-color: var(--gab-acento);
}

.pis-buscador__enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 52px;
	padding-inline: 2.25rem;
	font-size: 1.0625rem;
	letter-spacing: .01em;
}

.pis-buscador__enviar svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

@media (max-width: 979px) {
	.pis-buscador__enviar {
		width: 100%;
	}
}

/* ---------- Buscador: iconos de los desplegables, a la etiqueta ----------
   El panel de opciones nativo NO hereda el `padding-left` del `select`, así
   que con el icono dentro el valor cerrado quedaba a 44 px y las opciones
   del desplegable a 12: desalineados, y eso no se corrige con CSS.
   La solución es sacar el icono del control y llevarlo junto a la etiqueta.
   El campo de texto SÍ conserva la lupa dentro: ahí es el patrón esperado y
   no hay panel con el que desalinearse.

   El euro va como CARÁCTER (€), no dibujado: con dos trazos salía un
   símbolo que no se reconocía. */

.pis-buscador__campo label {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
}

.pis-buscador__icono-etiqueta {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--gab-acento);
	opacity: .8;
}

.pis-buscador__euro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	opacity: 1;
}

/* Sin icono dentro, los desplegables recuperan su sangría natural y el
   valor cerrado queda alineado con las opciones del panel. */
.pis-buscador__campo select {
	padding-left: .875rem;
}

/* Cifras a la izquierda y texto a la derecha (orden ya invertido en el
   HTML). La columna de cifras es la estrecha; el texto necesita más ancho
   para no partirse en líneas cortas. */

/* Enlace con flecha: acción secundaria sin competir con el botón. */
.pis-enlace-fuerte {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	font-family: var(--gab-font-titulo);
	font-weight: 600;
	color: var(--gab-acento);
	text-decoration: none;
	/* Subrayado que CRECE de izquierda a derecha (repertorio BootstrapMade,
	   aprobado probar 07/08): degradado pegado abajo cuyo ancho anima de 0
	   a 100%. Sustituye al border-bottom que aparecía de golpe. */
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 8px);
	background-size: 0% 2px;
	transition: background-size var(--gab-d2) ease, color var(--gab-d1) ease;
}

.pis-enlace-fuerte svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	transition: transform var(--gab-d1) ease;
}

.pis-enlace-fuerte:hover,
.pis-enlace-fuerte:focus-visible {
	color: var(--gab-acento-2);
	background-size: 100% 2px;
}

.pis-enlace-fuerte:hover svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {.pis-enlace-fuerte,
.pis-enlace-fuerte svg {
		transition: none;
	}.pis-enlace-fuerte:hover svg {
		transform: none;
	}
}

/* ============================================================
   O · RITMO FINAL DE LA HOME + BARRA SUPERIOR EN MARCA
   Secuencia: MARINO(hero) · blanco · AZUL(cifras) · blanco ·
   claro(zonas) · blanco(publicar) · claro · blanco. Sin repetidos.
   ============================================================ */

/* La barra superior pasa al marino de marca: hace de techo y enlaza con el
   hero. Blanco encima: 13.95 (medido). Antes iba en gris azulado, que con
   la franja azul de las cifras se quedaba en tierra de nadie. */
.pis-topbar {
	background: var(--gab-acento);
	color: #fff;
}

.pis-topbar__item a:hover,
.pis-topbar__item a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* La barra de créditos del pie hace juego: marino con un filete que la
   separa del bloque del pie. */
.gab-footer__credito {
	background: var(--gab-acento);
	color: rgba(255, 255, 255, .92);
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.gab-footer__credito a {
	color: #fff;
}

/* ---------- Barra superior: el mismo azul que las franjas ---------- */

.pis-topbar {
	background: var(--gab-franja);
	color: #fff;
}

/* ---------- Pie SOBRIO en claro (Acción 6 del rediseño, 08/08) ----------
   Cambio de criterio con la referencia delante: el cierre a todo color lo
   pone la franja CTA (última sección de la home) y el pie baja a blanco
   con línea superior — columnas aireadas, texto gris (#56626F, 6,23:1) y
   créditos discretos. El logo cuadrado (PNG con fondo blanco opaco) deja
   de necesitar la caja: sobre blanco desaparece el parche. */

.gab-footer {
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	border-top: 1px solid var(--gab-linea);
}

/* (08/08, 2ª pasada de Gerardo) Menos colchón vertical y piezas mayores:
   el pie tenía poco contenido para tanto aire — se equilibra subiendo
   logo y tipografías y bajando el padding, no metiendo relleno. */
.pis-pie {
	gap: 2rem 3rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.pis-pie__logo {
	background: transparent;
	padding: 0;
	border: 0;
	width: 148px;
}

.pis-pie__lema {
	color: var(--gab-tinta-2);
	max-width: 26ch;
	font-size: 1rem;
}

.pis-pie__titulo {
	color: var(--gab-titular);
	font-size: 1.0625rem;
}

.pis-pie__bloque a {
	color: var(--gab-tinta-2);
	font-size: 1rem;
	/* 40px: lo que entregaba el starter auditado — son enlaces de texto
	   (exentos del ≥44) pero no se baja de lo ya aprobado. */
	min-height: 40px;
	padding-block: .125rem;
}

.pis-pie__bloque a:hover,
.pis-pie__bloque a:focus-visible {
	color: var(--gab-acento-2);
	text-decoration: underline;
}

.gab-footer__credito {
	background: transparent;
	color: var(--gab-tinta-2);
	border-top: 1px solid var(--gab-linea);
	font-size: .875rem;
	padding-block: 1.25rem;
}

.gab-footer__credito a {
	color: var(--gab-tinta-2);
}

/* ============================================================
   Q · FORMULARIO DE SOLICITUD CON LA PALETA DEL PORTAL
   gab-solicitudes trae su marcado pero no su piel: sobre Astra, las
   etiquetas salían en #1E293B y los radios con el azul #046BD2 del tema.
   Medido en la ficha: 16 elementos fuera de paleta.
   ============================================================ */

.gab-sol__campo label,
.gab-sol__campo legend,
.gab-sol__form label {
	color: var(--gab-titular);
	font-weight: 600;
	font-size: .9375rem;
}

.gab-sol__form input[type="text"],
.gab-sol__form input[type="email"],
.gab-sol__form input[type="tel"],
.gab-sol__form input[type="date"],
.gab-sol__form select,
.gab-sol__form textarea {
	width: 100%;
	min-height: 48px;
	padding: .625rem .875rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	font: inherit;
}

.gab-sol__form textarea {
	min-height: 110px;
	padding-top: .75rem;
}

.gab-sol__form input:focus-visible,
.gab-sol__form select:focus-visible,
.gab-sol__form textarea:focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 0;
	border-color: var(--gab-acento);
}

/* Radios y casillas: el color lo pone la variable de la pieza
   (`--gab-sol-acento`, arriba en los tokens). Aquí solo el tamaño, para que
   el hit-area sea cómodo. */
.gab-sol__form input[type="radio"],
.gab-sol__form input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
}

.gab-sol__radio {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	font-weight: 400 !important;
	color: var(--gab-tinta) !important;
	cursor: pointer;
}

.gab-sol__form button,
.gab-sol__form input[type="submit"] {
	width: 100%;
	min-height: 52px;
	padding: .75rem 1.5rem;
	border: 0;
	background: var(--gab-acento);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 1.0625rem;
	cursor: pointer;
	transition: background var(--gab-d1) ease;
}

.gab-sol__form button:hover,
.gab-sol__form input[type="submit"]:hover {
	background: var(--gab-acento-2);
}

/* Nota de privacidad y textos de ayuda del formulario. */
.gab-sol__nota,
.gab-sol__ayuda,
.gab-sol__form small {
	color: var(--gab-tinta-2);
	font-size: .875rem;
}


/* ---------- Piel de las piezas GAB ----------
   Cada pieza expone variables para vestirla desde el proyecto, pero las
   declara en SU contenedor (`.gab-sol`, `.gab-fac`), no en `:root`. Por eso
   definirlas en `:root` no hace nada: la declaración local del componente
   gana siempre. Se redefinen aquí sobre su propio contenedor, con `body`
   delante para no depender de qué hoja cargue antes.

   ⚠️ El defecto de `--gab-sol-acento` es `currentColor`, así que sin esto
   los radios y casillas heredaban el gris de Astra (#808285), que además es
   uno de los que NO pasaban AA en la v1.

   Ratios medidos: aviso ok 6,61 · aviso de error 7,78. */

body .gab-sol {
	--gab-sol-acento: var(--gab-acento);
	--gab-sol-borde: var(--gab-linea-2);
	--gab-sol-ok-fondo: #D5F5E8;
	--gab-sol-ok-texto: #065F46;
	--gab-sol-error-fondo: #FDE8E8;
	--gab-sol-error-texto: #8C1C1C;
	max-width: none;
}

body .gab-fac {
	--gab-fac-acento: var(--gab-acento);
	--gab-fac-borde: var(--gab-linea);
}

/* Astra da `background-color` a los inputs, y en un radio/casilla eso pisa
   al `accent-color`: el control marcado salía con su azul #046BD2 en vez
   del de marca. Se devuelve el fondo al navegador para que mande el accent
   (que ya viene de `--gab-sol-acento`). */
.gab-sol input[type="radio"],
.gab-sol input[type="checkbox"],
.gab-fac input[type="radio"],
.gab-fac input[type="checkbox"] {
	background: transparent;
	border: 0;
	color: inherit;
}

/* Etiquetas y leyendas del buscador de facetas: heredaban el #1E293B de
   Astra. Mismo caso que el formulario de solicitud. */
.gab-fac label,
.gab-fac legend,
.gab-fac__titulo,
.gab-fac__opcion {
	color: var(--gab-titular);
}

.gab-fac__opcion {
	font-weight: 400;
	color: var(--gab-tinta);
}

/* El contador de cada opción, en secundario. */
.gab-fac__cuenta {
	color: var(--gab-tinta-2);
}

/* ============================================================
   R · CUENTAS Y PANEL CON LA PALETA DEL PORTAL
   gab-cuentas y gab-anuncios declaran sus variables en SU contenedor
   (nunca en :root — la lección de siempre). Medido en /registro/ antes
   de vestir: el botón salía con el #2244CC de fábrica, las etiquetas
   con el #1E293B de Astra y los inputs con el gris #808285 que no pasa
   AA. Mismo tratamiento que gab-sol y gab-fac.
   ============================================================ */

body .gab-cta {
	--gab-cta-acento: var(--gab-acento);
	--gab-cta-linea: var(--gab-linea-2);
	--gab-cta-ok: var(--gab-ok);
	--gab-cta-error: #8C1C1C;
}

body .gab-anu {
	--gab-anu-acento: var(--gab-acento);
	--gab-anu-borde: var(--gab-linea-2);
	--gab-anu-suave: var(--gab-tinta-2);
	--gab-anu-panel: var(--gab-superficie);
	--gab-anu-ok-fondo: #D5F5E8;
	--gab-anu-ok-texto: #065F46;
	--gab-anu-error-fondo: #FDE8E8;
	--gab-anu-error-texto: #8C1C1C;
}

/* Etiquetas y leyendas: fuera el #1E293B de Astra. El prefijo `body` en
   toda la sección es a propósito: el CSS de las piezas carga DESPUÉS del
   tema y empata en especificidad — sin él, el empate lo gana el orden. */
body .gab-cta label,
body .gab-cta legend,
body .gab-cta__titulo,
body .gab-cta__campo-titulo,
body .gab-cta__grupo-titulo,
body .gab-anu label,
body .gab-anu legend,
body .gab-anu__titulo {
	color: var(--gab-titular);
}

body .gab-cta__campo label,
body .gab-anu__campo label {
	font-weight: 600;
	font-size: .9375rem;
}

/* Campos: mismo trato que el formulario de solicitud (borde AA, 48px). */
body .gab-cta input[type="text"],
body .gab-cta input[type="email"],
body .gab-cta input[type="password"],
body .gab-cta input[type="tel"],
body .gab-cta input[type="number"],
body .gab-cta select,
body .gab-cta textarea,
body .gab-anu input[type="text"],
body .gab-anu input[type="email"],
body .gab-anu input[type="password"],
body .gab-anu input[type="tel"],
body .gab-anu input[type="number"],
body .gab-anu select,
body .gab-anu textarea {
	width: 100%;
	min-height: 48px;
	padding: .625rem .875rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
	font: inherit;
}

body .gab-cta textarea,
body .gab-anu textarea {
	min-height: 110px;
}

body .gab-cta input:focus-visible,
body .gab-cta select:focus-visible,
body .gab-cta textarea:focus-visible,
body .gab-anu input:focus-visible,
body .gab-anu select:focus-visible,
body .gab-anu textarea:focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 0;
	border-color: var(--gab-acento);
}

/* Radios y casillas: fondo al navegador para que mande el accent-color
   (Astra lo pisa con su #046BD2 — el mismo caso de gab-sol). */
body .gab-cta input[type="radio"],
body .gab-cta input[type="checkbox"],
body .gab-anu input[type="radio"],
body .gab-anu input[type="checkbox"] {
	background: transparent;
	border: 0;
	color: inherit;
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;
	accent-color: var(--gab-acento);
}

/* Botones: la acción del portal, con su hover medido. */
body .gab-cta__boton,
body .gab-anu__boton {
	min-height: 52px;
	padding: .75rem 1.75rem;
	border: 0;
	background: var(--gab-acento);
	color: #FFFFFF;
	font: 600 1rem/1.2 var(--gab-font-titulo);
	cursor: pointer;
	transition: background var(--gab-d1) ease;
}

/* ★★ Un botón que es un <a> necesita GANARLE a `.entry-content a:not(...)`,
   que fija el color del texto de contenido con especificidad 0-2-1 — más que
   el 0-1-1 de la regla de arriba. Sin esto, el CTA «Publicar anuncio» del
   panel salía azul marino SOBRE azul marino: contraste **1,00**, texto
   invisible (lo vio Gerardo en una captura, medido el 10/08/2026).
   El tema ya tenía la excepción hecha para su CTA de cabecera
   (`.gab-nav-cta`); esto es lo mismo para los botones de las piezas.
   0-2-2 gana a 0-2-1 sin depender del orden del fichero. */
body .gab-anu a.gab-anu__boton,
body .gab-cta a.gab-cta__boton,
body .gab-anu a.gab-anu__boton:hover,
body .gab-cta a.gab-cta__boton:hover,
body .gab-anu a.gab-anu__boton:focus-visible,
body .gab-cta a.gab-cta__boton:focus-visible {
	color: #FFFFFF;
	/* Esa misma regla le mete el subrayado del texto de contenido, y un
	   botón sólido no lo lleva (la pieza ya decía `none`, pero con 0-1-0). */
	text-decoration: none;
}

body .gab-cta__boton:hover,
body .gab-cta__boton:focus-visible,
body .gab-anu__boton:hover,
body .gab-anu__boton:focus-visible {
	background: var(--gab-acento-2);
}

body .gab-cta__boton--peligro,
body .gab-anu__boton--peligro {
	background: #8C1C1C;
}

body .gab-cta__boton--peligro:hover,
body .gab-anu__boton--peligro:hover {
	background: #6E1414;
}


/* ---------- Búsqueda y 404 (09/08/2026) ----------
   Sin plantillas propias mandaba Astra: los inmuebles salían como entradas
   de blog (firma y fecha, sin foto ni precio) y la 404 era genérica. Estas
   dos vistas reutilizan .pis-rejilla y pis_tarjeta(); aquí solo va lo que
   NO existía ya. Cero colores nuevos: todo sale de las variables. */

.pis-404__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.5rem;
}

.pis-busqueda__otros {
	margin-top: 3rem;
}

.pis-busqueda__lista {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}

.pis-busqueda__vacio {
	margin: 2rem 0 0;
	max-width: 44rem;
}
/* ============================================================
   LOGO DE AGENCIA EN EL PERFIL (/cuenta/)
   ============================================================
   Bloque que piseando-core inyecta dentro del formulario de perfil de
   gab-cuentas. Cero colores nuevos: todo sale de las variables. Radio 0,
   como el resto de la piel del portal. */

.pis-logo__actual {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 .75rem;
	padding: .75rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-superficie);
}

.pis-logo__img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	flex: 0 0 auto;
	/* Lienzo FIJO en blanco, a propósito no var(--gab-fondo): un logo con
	   transparencia se diseñó sobre blanco y debe verse igual aunque el
	   fondo del tema cambie. Hoy coinciden (#FFFFFF): no es un color nuevo. */
	background: #FFF;
	border: 1px solid var(--gab-linea-2);
}

/* La casilla de quitar no es un campo más: que no herede el ancho completo
   del bloque y quede el clic a media pantalla del texto. */
.pis-logo__quitar {
	flex: 1 1 12rem;
	min-width: 0;
}

body .gab-cta input[type="file"] {
	width: 100%;
	min-height: 48px;
	padding: .6rem .75rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
	color: var(--gab-tinta);
}

body .gab-cta input[type="file"]:focus-visible {
	outline: 2px solid var(--gab-acento);
	outline-offset: 2px;
}

/* ============================================================
   BLOQUE DE AGENCIA EN /cuenta/ (10/08/2026)
   ============================================================
   Identidad + totales de la agencia, encima del panel de anuncios. Un
   particular no lo ve (el shortcode no pinta nada). Cero colores nuevos y
   radio 0, como el resto de la piel. */

.pis-agencia-panel {
	margin: 0 0 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-superficie);
}

.pis-agencia-panel__cabecera {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.pis-agencia-panel__logo,
.pis-agencia-panel__inicial {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	flex: 0 0 auto;
	border: 1px solid var(--gab-linea-2);
	/* Lienzo blanco fijo por el mismo motivo que .pis-logo__img. */
	background: #FFF;
}

/* El marco SE AJUSTA AL LOGO: alto fijo y ancho automático. Un marco de
   proporción fija deja hueco muerto con cualquier logo que no sea justo esa
   proporción — medido: el de Piseando (340×282) en una caja 2:1 se pintaba
   a 87×72 dentro de 144, o sea 57 px de blanco al lado. Así el logo ocupa
   siempre los 72 px de alto, sea cuadrado o apaisado. El tope de ancho
   existe para que un logo de 10:1 no empuje la fila. */
.pis-agencia-panel__logo {
	width: auto;
	max-width: 240px;
	padding: 4px;
}

.pis-agencia-panel__logo img {
	width: auto;
	max-width: 100%;
	height: 100%;
}

.pis-agencia-panel__inicial {
	width: 72px;
}

.pis-agencia-panel__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pis-agencia-panel__inicial {
	background: var(--gab-acento);
	color: #FFF;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.pis-agencia-panel__quien {
	min-width: 0;
}

.pis-agencia-panel__rol {
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gab-franja);
}

.pis-agencia-panel__nombre {
	margin: .15rem 0 0;
	font-size: 1.5rem;
	line-height: 1.2;
}

.pis-agencia-panel__meta,
.pis-agencia-panel__estados {
	margin: .35rem 0 0;
	font-size: .9375rem;
	color: var(--gab-tinta);
}

.pis-agencia-panel__pendiente {
	margin: 1rem 0 0;
	padding: .75rem;
	border-left: 3px solid var(--gab-franja);
	background: var(--gab-fondo);
	font-size: .9375rem;
}

.pis-agencia-panel__cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.pis-agencia-panel__cifra {
	padding: .875rem 1rem;
	border: 1px solid var(--gab-linea-2);
	background: var(--gab-fondo);
}

/* El valor va DESPUÉS de la etiqueta en el HTML (un <dl> exige dt antes que
   dd), pero se lee mejor con la cifra arriba: se invierte con order, no
   reordenando el marcado. */
.pis-agencia-panel__cifra {
	display: flex;
	flex-direction: column;
}

.pis-agencia-panel__valor {
	order: -1;
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gab-acento);
}

.pis-agencia-panel__etiqueta {
	font-size: .875rem;
	color: var(--gab-tinta);
}

@media (max-width: 700px) {
	.pis-agencia-panel {
		padding: 1.25rem;
	}

	.pis-agencia-panel__nombre {
		font-size: 1.25rem;
	}

	.pis-agencia-panel__valor {
		font-size: 1.75rem;
	}
}

/* ============================================================
   BANNER DE COOKIES CON LA PIEL DEL PORTAL (10/08/2026)
   ============================================================
   La pieza gab-cookies se viste redefiniendo SUS variables EN SU
   CONTENEDOR, nunca en :root (regla de la librería). Radio 0 y la paleta
   del portal, como el resto. Contrastes medidos tras el cambio.
   Posición: esquina inferior izquierda (`gab_ck_posicion`), para que no
   tape el centro, que es por donde se lee. */

body .gab-ck {
	--gab-ck-fondo: var(--gab-fondo);
	--gab-ck-tinta: var(--gab-tinta);
	--gab-ck-tinta-2: var(--gab-tinta-2);
	--gab-ck-acento: var(--gab-acento);
	--gab-ck-linea: var(--gab-linea-2);
}

/* ★ Este bloque es la ÚNICA excepción al radio 0 del portal, y es
   deliberada (Gerardo, 10/08/2026): el banner es una tarjeta flotante,
   no una pieza del layout, y a escuadra quedaba duro. */
body .gab-ck__caja {
	border-radius: 12px;
	border: 1px solid var(--gab-linea-2);
	/* Sombra teñida de marino, la misma familia que el hover de tarjeta. */
	box-shadow: 0 12px 34px rgba(13, 44, 84, .20);
}

body .gab-ck__titulo {
	font-family: var(--gab-font-titulo);
	font-size: 1.05rem;
	color: var(--gab-acento);
}

/* Las casillas del panel: mismo trato que las de gab-cuentas y gab-anuncios.
   Sin esto, Astra las pinta con su azul (#046BD2) y su gris, dos colores
   fuera de la paleta del portal. */
body .gab-ck input[type="checkbox"] {
	background: transparent;
	border: 0;
	min-height: 0;
	accent-color: var(--gab-acento);
}

/* Botones: el de aceptar es la acción del portal; rechazar tiene el MISMO
   peso visual (mismo tamaño y mismo plano), que es lo que exige la AEPD:
   no se hace pequeño ni gris el «no». */
body .gab-ck__btn {
	border-radius: 8px;
	font-family: var(--gab-font-titulo);
	min-height: 44px;
}

/* ★ «Preferencias» es la acción TERCIARIA: ni compite con Aceptar/Rechazar
   ni debe parecer un botón a medio pintar. Astra le metía su fondo por ser
   un `button`, y al pasar el ratón la pieza lo quitaba — de ahí el fondo
   que aparecía y desaparecía. Aquí no tiene fondo NUNCA en reposo, sin
   subrayado, y el hover es un relleno suave: el cambio se nota, pero al
   revés (aparece, no desaparece). */
body .gab-ck__btn--prefs,
body .gab-ck__btn--prefs:focus {
	background: none;
	border: 1px solid transparent;
	color: var(--gab-acento);
	text-decoration: none;
}

body .gab-ck__btn--prefs:hover {
	background: var(--gab-superficie);
	border-color: var(--gab-linea-2);
	color: var(--gab-acento);
}

body .gab-ck__btn--si {
	background: var(--gab-acento);
	color: #FFFFFF;
	border: 1px solid var(--gab-acento);
}

body .gab-ck__btn--si:hover {
	background: var(--gab-franja);
	border-color: var(--gab-franja);
}

body .gab-ck__btn--no {
	background: var(--gab-fondo);
	color: var(--gab-acento);
	border: 1px solid var(--gab-acento);
}

body .gab-ck__btn--no:hover {
	background: var(--gab-superficie);
}

body .gab-ck__btn--guardar {
	background: var(--gab-franja);
	color: #FFFFFF;
	border: 1px solid var(--gab-franja);
}

body .gab-ck__lista li {
	border-radius: 0;
	background: var(--gab-superficie);
}

/* ★ El botón «Cambiar mis preferencias» vive DENTRO de `.entry-content`, y
   ahí Astra pinta todo `button` con su azul (#045CB4, fuera de paleta). La
   pieza lo declara como enlace de texto (`background:none`), pero con menos
   especificidad. Comprobado con una prueba de control: el mismo botón fuera
   de `.entry-content` sale transparente y dentro sale azul. Misma familia
   que el CTA «Publicar anuncio» del panel (10/08/2026). */
body .entry-content button.gab-ck-reabrir,
body .entry-content button.gab-ck-reabrir:hover,
body .entry-content button.gab-ck-reabrir:focus {
	background: none;
	border: 0;
	padding: 0;
	color: var(--gab-acento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body .entry-content button.gab-ck-reabrir:hover {
	color: var(--gab-franja);
}

/* ---------- Perfil público de agencia (/agencia/{slug}/) ----------
   Cabecera de identidad + la MISMA rejilla de tarjetas del catálogo. El
   logo repite el criterio del panel: alto fijo y marco que se ajusta. */

.pis-agencia-perfil {
	padding: 2.5rem 0;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--gab-linea-2);
	background: var(--gab-superficie);
}

.pis-agencia-perfil__marco {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.pis-agencia-perfil__logo,
.pis-agencia-perfil__inicial {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	flex: 0 0 auto;
	border: 1px solid var(--gab-linea-2);
	background: #FFF;
}

.pis-agencia-perfil__logo {
	width: auto;
	max-width: 300px;
	padding: 6px;
}

.pis-agencia-perfil__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.pis-agencia-perfil__inicial {
	width: 96px;
	background: var(--gab-acento);
	color: #FFF;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
}

.pis-agencia-perfil__titulo {
	margin: .15rem 0 0;
	font-size: 2rem;
	line-height: 1.15;
}

.pis-agencia-perfil__datos {
	margin: .35rem 0 0;
	color: var(--gab-tinta);
}

@media (max-width: 700px) {
	.pis-agencia-perfil {
		padding: 1.75rem 0;
	}

	.pis-agencia-perfil__titulo {
		font-size: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Listado sin inventario todavía (hoy, «Compartir piso»).
 *
 * No es el «sin resultados» de un filtro: es que la línea aún no tiene
 * anuncios. Se dice en claro y se ofrece la salida útil —publicar— en vez de
 * un buscador con todos los contadores a cero.
 * ---------------------------------------------------------------------- */

.pis-vacio {
	margin: 0 0 4rem;
	padding: 3rem 2rem;
	background: var(--gab-superficie);
	text-align: center;
}

.pis-vacio__titulo {
	margin: 0 0 0.75rem;
	font-family: var(--gab-font-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gab-titular);
}

.pis-vacio__texto {
	max-width: 46ch;
	margin: 0 auto 1.75rem;
	color: var(--gab-tinta-2);
}

.pis-vacio__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
	justify-content: center;
	margin: 0;
}

/* ⚠️ `.pis-cta` nace con `margin-left: auto` porque en la barra de datos de
   la ficha va empujado a la derecha. Reutilizado aquí, ese margen automático
   se comía el centrado: el botón aparecía desplazado (medido el 11/08/2026,
   99 px de margen izquierdo en un contenedor de 288). Es la tercera vez que
   hay que neutralizarlo —ya pasaba en la franja CTA y en `.pis-cta--claro`—,
   así que si aparece un cuarto sitio, el `auto` debería salir de la clase
   base y ponerse solo donde se necesita. */
.pis-vacio__acciones .pis-cta {
	margin-left: 0;
}

@media (max-width: 700px) {
	.pis-vacio {
		padding: 2.25rem 1.25rem;
	}
}

/* -------------------------------------------------------------------------
 * Características del piso compartido (casillas del formulario de publicar
 * habitación). El marcado lo pinta piseando-core en `gab_anu_form_extra`.
 *
 * `body .gab-pis-carac` y no `.gab-pis-carac` a secas: el formulario vive
 * dentro de `.entry-content`, y ahí Astra le impone su color y su subrayado
 * a cualquier control (0-2-1 gana a 0-1-0). Misma cautela que con el CTA del
 * panel el 10/08.
 * ---------------------------------------------------------------------- */

body .gab-pis-carac {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
}

body .gab-pis-carac legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: var(--gab-titular);
}

body .gab-pis-carac__opcion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;             /* hit-area táctil, norma del portal */
	font-weight: 400;
	color: var(--gab-tinta);
	cursor: pointer;
}

body .gab-pis-carac__opcion input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--gab-acento);
}

body .gab-pis-carac__opcion:focus-within {
	outline: 2px solid var(--gab-acento);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Menú desplegado en móvil — acabado (11/08/2026)
 *
 * ⚠️ Va AL FINAL del fichero a propósito. La regla del rediseño
 * `.gab-nav__lista a { display: inline-flex }` vive ~2.100 líneas por debajo
 * del bloque `@media (max-width: 899.98px)` de la cabecera, así que con la
 * misma especificidad **gana por orden** y allí arriba no había forma de
 * estirar el enlace. (Se vio al medir: el `border-bottom` sí se aplicaba
 * —esa regla lleva `li:last-child`, 0-3-0— pero el `display` no.)
 *
 * El síntoma que arreglan: cada enlace medía lo que su texto, así que las
 * rayas de separación quedaban cortas y desiguales debajo de cada palabra.
 * ---------------------------------------------------------------------- */

@media (max-width: 899.98px) {
	.gab-nav__lista a {
		display: flex;
		width: 100%;
		padding-inline: 0;
	}
}

/* -------------------------------------------------------------------------
 * Campo «Referencia del anuncio» de /contacto/
 *
 * La pieza gab-solicitudes no tiene clase de texto de ayuda (sus campos son
 * etiqueta + control), así que el estilo es del proyecto. Va al FINAL del
 * fichero a propósito: aquí la regla que manda puede estar 2.000 líneas más
 * abajo, y esta tiene que ganar.
 * ---------------------------------------------------------------------- */

.pis-sol-ayuda {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: var(--gab-tinta-2);
}

/* -------------------------------------------------------------------------
 * Aire entre la cabecera y el H1 de las PÁGINAS (contacto, legales, cuenta,
 * publicar, acceder…).
 *
 * No había ningún margen que quitar: NADIE ponía el aire. El único que lo
 * daba era una regla inline del personalizador de Astra sobre `#primary`,
 * y solo a partir de 1200 px — medido: hueco de 0 px a 375 Y a 1000, y de
 * 60 px a 1280. O sea que no era un fallo «de móvil»: estaba pegado en todo
 * portátil por debajo de 1200.
 *
 * El clamp enlaza con esos 60 px sin dar un salto al cruzar el umbral.
 *
 * ⚠️ Mi selector y el de Astra tienen la MISMA especificidad, así que esto
 * gana por orden: `base.css` se encola después de los estilos inline del
 * tema. Si algún día deja de ganar, mirar el orden antes que la
 * especificidad — aquí ya ha pasado (el menú móvil, 11/08).
 *
 * `#primary` solo existe en las páginas: la home, la ficha, el listado y la
 * búsqueda usan plantillas propias y no lo llevan, así que esto no puede
 * empujar ningún hero. Comprobado en el HTML de 10 vistas.
 * ---------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.ast-plain-container.ast-no-sidebar #primary {
		margin-top: clamp(1.75rem, 5vw, 3.75rem);
	}
}

/* -------------------------------------------------------------------------
 * Badge «Rebajado» y precio anterior
 *
 * Marino sólido, NO un pastel: los pasteles son las categorías (Venta,
 * Alquiler, Compartir) y una rebaja no es una categoría más — si compartiera
 * lenguaje con ellas, se leería como un tipo de operación. Blanco sobre
 * marino: 13,95 medido.
 * ---------------------------------------------------------------------- */

.pis-badge--rebaja {
	background: var(--gab-acento);
	color: #fff;
	margin-left: 0.5rem;
	vertical-align: middle;
	white-space: nowrap;
}

.pis-barra-datos__antes {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--gab-tinta-2);
}

/* ============================================================
   MEDIDA DE LECTURA DE LAS PÁGINAS DE TEXTO   (13/08/2026, S11)
   ============================================================
   Medido a 1280: los párrafos de las estáticas iban a 1.200 px =
   **129 caracteres por línea**. La horquilla cómoda de lectura está en
   45-75, así que era casi el doble. Afecta sobre todo a las legales, que
   son las que alguien lee de verdad cuando entra a leerlas.

   ★ El 1.200 no era nuestro: lo pone ASTRA con
   `.entry-content[data-ast-blocks-layout] > *`, que es 0-2-0. Por eso aquí
   va `body.page` delante: 0-2-2 le gana. Es la misma cautela que ya hubo
   que tomar con el CTA del panel (10/08) y con el botón de preferencias de
   cookies: dentro de `.entry-content`, Astra manda.

   ★ Se acota SOLO el texto de PRIMER NIVEL (`> p`, `> ul`, `> ol`):
   - Lo que pintan los shortcodes queda intacto. En `/contacto/`,
     `/registro/` y `/publicar-anuncio/` el formulario vive dentro de
     `.entry-content` y estrecharlo sería un destrozo.
   - `.entry-content` NO existe en home, listados ni fichas (comprobado en
     9 vistas), así que esto no las toca.

   ★ `ch` y no px: la medida se mantiene si algún día cambia el cuerpo de
   letra. 72ch ≈ 670 px con la tipografía actual.
   ============================================================ */

/* ⛔ REVERTIDO el 13/08/2026, el mismo día, por Gerardo: «me gustaba más las
   legales y quiénes somos con el ancho de antes, tan estrecho lo veo raro».
   Se probó `max-width: 72ch` (de 129 a 72 caracteres por línea) y no le
   convence: el texto queda estrecho para el ancho de la página.
   **NO REPROPONERLO.** El dato sigue siendo cierto —129 caracteres por línea
   está por encima de la horquilla cómoda de 45-75— pero es una decisión
   estética suya y está tomada. Si algún día se retoma, el punto medio sería
   ~90-100ch, no 72. */

/* ============================================================
   EL PIE, 3ª PASADA   (Gerardo, 13/08/2026 — S11)
   ============================================================
   Lo vio en pantalla: «tiene algo de aire vertical» y «en responsive es
   muy alto». Medido antes de tocar:

   | | movil 375 | escritorio 1265 |
   |---|---|---|
   | alto | **893 px = 1,10 pantallas** | 358 px |
   | padding | 40 / 40 | 56 / 56 |
   | columnas | **1** (4 bloques apilados) | 4 |
   | logo | 148x148 | 148x148 |

   En movil no es que fuera alto: **ocupaba mas de una pantalla entera**.

   Tres cambios, y ninguno toca el contenido:
   1. Menos aire arriba y abajo, en las dos anchuras.
   2. **Dos columnas en movil** para los bloques de enlaces; la marca cruza
      las dos, que su lema necesita el ancho.
   3. **El logo fuera por debajo de 720 px.** Se queda el lema, que es el
      que dice quien eres; el logo ya esta en la cabecera de esa misma
      pagina, asi que en movil solo cuesta 148 px de alto.

   ⚠️ NO se toca el `min-height: 40px` de los enlaces: es su zona tactil.
   ⚠️ Va al FINAL del fichero a proposito: hay otra regla `.pis-pie` en la
   linea ~3093 (2ª pasada, 08/08) que gana por orden a la original de la
   ~2061. Aqui la que manda suele estar mas abajo.
   ============================================================ */

.pis-pie {
	padding-block: clamp(2rem, 4vw, 2.75rem);
}

@media (max-width: 719px) {
	.pis-pie {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.5rem;
	}

	.pis-pie__marca {
		grid-column: 1 / -1;
	}

	.pis-pie__logo {
		display: none;
	}

	/* Sin el logo, el lema ya no compite con nada: puede ocupar la fila. */
	.pis-pie__lema {
		max-width: none;
	}
}

/* ============================================================
   EL PIE, 4ª PASADA   (Gerardo, 13/08/2026 — sobre captura en móvil)
   ============================================================
   Dos cosas que vio él y una que salió al medirlas.

   ★★ FALLO REAL: **el pie no tenía NINGÚN margen lateral.** Medido a 375:
   `.gab-footer__inner` con `padding-inline: 0` y `left: 0` — el texto
   empezaba en el píxel 0, pegado al borde de la pantalla. No se veía en
   escritorio porque su `max-width: 1160px` lo centra dentro de los 1265;
   por debajo de 1160 el contenido va a sangre. Llevaba así desde siempre.
   Se arregla con **la misma fórmula que `.pis-marco`**, para que el pie
   quede alineado con el resto de la página (16 px en móvil), no con un
   valor inventado.

   ★ El hueco de arriba: eran 46 px = 32 de relleno + **14 de un
   `margin-top` que el lema tenía para separarse del LOGO**… que en móvil ya
   no está (3ª pasada). Un margen huérfano.

   ★ Y el lema pasa a **negrita y algo mayor** solo en móvil: sin el logo es
   lo único que sostiene ese bloque, y en cuerpo 16 normal se leía como una
   nota suelta. En escritorio no se toca: ahí manda el logo, y ese equilibrio
   lo aprobó Gerardo el 08/08.
   ============================================================ */

.gab-footer__inner {
	width: min(100% - (var(--gab-gutter) * 2), var(--gab-maxw));
	margin-inline: auto;
}

@media (max-width: 719px) {
	.pis-pie__lema {
		margin-top: 0;
		font-size: 1.1875rem;
		font-weight: 600;
		color: var(--gab-titular);
	}
}

/* ============================================================
   EL PIE, 5ª PASADA: el nombre del portal en móvil (Gerardo, 13/08 — opción B)
   ============================================================
   Se le enseñaron tres variantes montadas en el navegador y eligió la B:
   «Piseando» encima y el lema debajo, fino. Y pidió menos aire arriba.

   ★ Por qué el lema BAJA de rango (de 19/600 a 16/400): en cuanto el nombre
   está encima, el lema deja de ser el ancla del bloque y pasa a ser la
   explicación. Dos líneas en negrita seguidas se pelean, y ese bloque
   acabaría gritando más que los otros tres, que van a 17 px.

   ★ En ESCRITORIO el nombre se oculta: ahí está el logo, y decirlo dos veces
   sobra. Por eso el `<p>` va siempre en el marcado y se apaga aquí — no al
   revés.

   ★ El aire de arriba baja **solo en móvil** (32 → 24 px). En escritorio se
   queda en 44: allí el bloque empieza con el logo, que necesita su respiro.
   ============================================================ */

.pis-pie__nombre {
	display: none;
}

@media (max-width: 719px) {
	.pis-pie {
		padding-top: 1.5rem;
	}

	.pis-pie__nombre {
		display: block;
		margin: 0;
		font-family: var(--gab-font-titulo);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 1.2;
		color: var(--gab-titular);
	}

	/* Con el nombre delante, el lema explica: no compite. */
	.pis-pie__lema {
		margin-top: 0.35rem;
		font-size: 1rem;
		font-weight: 400;
		color: var(--gab-tinta-2);
	}
}

/* ============================================================
   BUSCADOR DEL HERO: que el botón entre en la primera pantalla
   (Gerardo, 13/08/2026 — S11)
   ============================================================
   Lo preguntó él: «en móvil ocupa mucho, ¿tú crees?». Medido, el tamaño no
   es el problema —en un portal el buscador ES la acción principal— pero
   salió otra cosa:

   | | antes |
   |---|---|
   | Alto del buscador | 482 px = **59 %** de la pantalla |
   | Los 4 campos | 77 px cada uno, apilados |
   | Botón «Buscar» | terminaba en **854**, con la pantalla en **812** |

   **El botón se salía 42 px por debajo del pliegue**: se veían los cuatro
   campos y no el botón que los envía.

   Se emparejan «Operación» y «Zona» (`--medio`): son los selects más cortos
   —2 y 3 opciones— y van juntos de forma natural (qué y dónde). «Qué
   buscas» es texto libre y se queda a lo ancho. No se toca ni el relleno ni
   el tamaño de los controles: el buscador se ve igual, solo ocupa una fila
   menos.

   ⚠️ El corte es **980 px, el mismo de `.pis-buscador`**, y ese punto es
   DELICADO: el velo del hero de la home está calibrado contra él («por
   debajo la tarjeta va apilada y empuja el texto al 4-37 %», S7). Si alguien
   mueve el breakpoint del buscador, hay que mover este Y **volver a medir el
   contraste del hero** con `pruebas/contraste-hero.py`.
   ============================================================ */

@media (max-width: 979.98px) {
	.pis-buscador {
		grid-template-columns: 1fr 1fr;
	}

	/* Todo a lo ancho salvo los que se declaran a medias. */
	.pis-buscador > * {
		grid-column: 1 / -1;
	}

	.pis-buscador__campo--medio {
		grid-column: span 1;
	}
}

/* ============================================================
   CABECERA DE SECCIÓN: el enlace no compartía línea base con el título
   (Gerardo, 13/08/2026 — lo vio en una captura)
   ============================================================
   La cabecera alinea sus dos bloques con `align-items: flex-end`, así que
   sus CAJAS terminan a la misma altura… pero el TEXTO no. El enlace es un
   flex con `min-height: 44px` (su zona táctil) y `align-items: center`: el
   sobrante se reparte arriba y abajo, y su texto queda **11-12 px por encima**
   de la línea base del título. Medido en 6 anchos (1265, 1100, 980, 900, 820
   y 760): el desfase es constante, no es cosa de un tamaño concreto.

   ★ Lo que NO funciona, probado y descartado antes de escribir esto:
   - `align-items: baseline` en la cabecera → **empeora a −53 px**. El bloque
     de la izquierda reporta la línea base de su PRIMERA línea, que es el
     eyebrow, no el título.
   - `align-items: flex-end` en el enlace → arregla la base (−3) pero **baja
     la flecha 5 px** respecto al texto: se cambia un desajuste por otro.

   ★ Lo que sí: el relleno va ARRIBA (`padding-top`) y se quita el
   `min-height`. La zona táctil sigue siendo de 44 px —18 de relleno + 26,4
   de línea—, el contenido del enlace se sigue centrando entre sí (la flecha
   no se mueve) y el texto baja hasta casi la línea base del título.
   Resultado medido: desfase **−11 → −3 px**, flecha en 1 px, alto 44.
   Los 3 px que quedan son medio interlineado; corregirlos pediría un margen
   negativo y no compensa.
   ============================================================ */

/* ⚠️ PRIMER INTENTO, RETIRADO EL MISMO DÍA — que no se repita:
   `min-height: 0; padding-top: 18px` alineaba la base (−3) pero **el
   subrayado pasaba a TACHAR el texto**, y lo vio Gerardo en una captura.
   Motivo: ese subrayado NO es `text-decoration`, es un `linear-gradient` de
   fondo anclado a `calc(100% - 8px)` —8 px sobre el borde INFERIOR de la
   caja— que crece de 0 % a 100 % en `:hover`. Al bajar solo el TEXTO hacia
   ese borde, la raya se quedaba 4 px por encima del final del texto.
   → **Regla: en este enlace, texto y subrayado se mueven JUNTOS.** Se baja
   el elemento entero con un margen negativo, no su relleno interno. */

.pis-seccion__cabecera .pis-enlace-fuerte {
	margin-bottom: -8px;
}

/* ============================================================
   LA FRANJA CTA EN MÓVIL   (Gerardo, 13/08/2026: «parece algo soso»)
   ============================================================
   Medido a 375 antes de tocar: la franja son 286 px de marino plano, y
   dentro el botón mide **188 px en una columna de 343 — el 55 %**, flotando
   a la izquierda con medio ancho vacío al lado. Eso es lo que se lee como
   soso: no es el color, es que la pieza de acción no tiene peso.

   ⚠️ **El arreglo es SOLO estético, y eso está comprobado.** La primera
   sospecha era funcional —el título dice «¿Vendes, alquilas o compartes
   piso?» y el botón lleva a `/publicar-anuncio/`, el formulario de
   inmuebles—, pero **sin sesión esa página no enseña el formulario: enseña
   el de ACCESO** («Entrar en Piseando» + «Crear cuenta gratis»), porque sin
   cuenta no se publica nada. Nadie aterriza en el formulario equivocado, así
   que aquí no hay nada que arreglar salvo cómo se ve. Lo dijo Gerardo y se
   verificó pidiendo la página sin sesión.

   El botón pasa a ocupar el ancho en móvil. En una banda de color plano un
   botón blanco a todo lo ancho es el ancla que le faltaba, y de paso la zona
   táctil pasa de 188×50 a 343×50. En ESCRITORIO no se toca: allí el botón
   vive a la derecha del texto (x=1024 de 1160) y esa composición ya
   funciona.
   ============================================================ */

@media (max-width: 719px) {
	.pis-cta-franja .pis-cta {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   LA FRANJA CTA EN ESCRITORIO   (Gerardo, 13/08/2026)
   ============================================================
   «Sigue quedando sosa». Medido a 1265, el porqué tenía número: el marco
   usa `justify-content: space-between`, así que el texto se iba al extremo
   izquierdo (53→607) y el botón al derecho (1024→1213), dejando **417 px de
   vacío en medio**. El ojo lee dos cosas sueltas, no una llamada a la
   acción. Y el hover del botón era blanco → #F5F5F5: casi invisible.

   Tres cambios, y ninguno toca el contenido:

   1. **Marco acotado a 900 px** (opción V1, elegida sobre la de centrarlo
      todo). Mantiene el lenguaje de la home —texto a la izquierda, botón a
      la derecha— y el vacío baja de **417 a 157 px**: los dos bloques pasan
      a leerse como una pareja. Centrar el conjunto (V2) era más rotundo
      pero rompía la alineación a la izquierda de toda la página.
   2. **El botón, mayor**: 48→56 px de alto, relleno 12/24 → 16/32 y cuerpo
      16 → 17. Es la pieza de acción de la página: tenía el mismo tamaño que
      cualquier enlace.
   3. **Elevación en `:hover`/`:focus-visible`**: sube 2 px y aparece una
      sombra. Es lo que le faltaba para no verse plano.

   ⚠️ **NO se le pone radio.** El radio 0 es regla del portal y solo tiene
   dos excepciones documentadas (el banner de cookies, 12 px deliberados, y
   el CTA de la cabecera, heredado de la v1). Abrir una tercera aquí es
   decisión de Gerardo, no una consecuencia de «que no se vea plano».

   ★ `prefers-reduced-motion` desactiva el desplazamiento —obligatorio en
   toda animación de este proyecto—, pero **deja la sombra**: el estado de
   hover tiene que seguir siendo perceptible para quien no quiere
   movimiento.
   ============================================================ */

@media (min-width: 720px) {
	.pis-cta-franja__inner {
		max-width: 900px;
		margin-inline: auto;
	}
}

.pis-cta-franja .pis-cta--claro {
	min-height: 56px;
	padding: 1rem 2rem;
	font-size: 1.0625rem;
	transition:
		background var(--gab-d1) ease,
		color var(--gab-d1) ease,
		transform var(--gab-d1) ease,
		box-shadow var(--gab-d1) ease;
}

.pis-cta-franja .pis-cta--claro:hover,
.pis-cta-franja .pis-cta--claro:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.pis-cta-franja .pis-cta--claro {
		transition: background var(--gab-d1) ease, color var(--gab-d1) ease;
	}

	.pis-cta-franja .pis-cta--claro:hover,
	.pis-cta-franja .pis-cta--claro:focus-visible {
		transform: none;
	}
}

/* =====================================================================
   BLOG / RECURSOS  (añadido 13/08/2026, S12)
   ---------------------------------------------------------------------
   Va AL FINAL a propósito: en este fichero la regla que manda puede estar
   2.000 líneas más abajo, así que los añadidos se ponen aquí.

   ⚠️ El cuerpo del artículo vive dentro de `.entry-content`, y ahí ASTRA
   gana con `.entry-content[data-ast-blocks-layout] > *` (0-2-0). Para
   ganarle hace falta `body.single` delante (0-2-2). Es la cuarta vez que
   hay que tomar esta cautela: antes fueron el CTA del panel, el botón de
   cookies y la medida de lectura de las páginas legales.
   ===================================================================== */

/* ---------- Listado de artículos ---------- */

.pis-articulos {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.pis-articulo-tarjeta {
	padding: 1.5rem;
	background: var(--gab-superficie);
	border-left: 3px solid var(--gab-acento);
}

.pis-articulo-tarjeta__categoria {
	margin: 0 0 0.5rem;
	font-family: var(--gab-font-titulo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pis-articulo-tarjeta__categoria a {
	color: var(--gab-acento);
	text-decoration: none;
}

.pis-articulo-tarjeta__categoria a:hover,
.pis-articulo-tarjeta__categoria a:focus-visible {
	text-decoration: underline;
}

.pis-articulo-tarjeta__titulo {
	margin: 0 0 0.5rem;
	font-family: var(--gab-font-titulo);
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	line-height: 1.3;
	color: var(--gab-titular);
}

.pis-articulo-tarjeta__enlace {
	color: inherit;
	text-decoration: none;
}

.pis-articulo-tarjeta__enlace:hover,
.pis-articulo-tarjeta__enlace:focus-visible {
	color: var(--gab-acento);
	text-decoration: underline;
}

.pis-articulo-tarjeta__extracto {
	margin: 0 0 0.75rem;
	color: var(--gab-tinta);
}

.pis-articulo-tarjeta__fecha,
.pis-articulo__fecha {
	margin: 0;
	font-size: 0.875rem;
	color: var(--gab-tinta-2);
}

.pis-articulos__vacio {
	margin: 0 0 2.5rem;
	color: var(--gab-tinta);
}

/* ---------- El artículo ---------- */

.pis-articulo__fecha {
	margin-top: 0.75rem;
}

/* La medida de lectura del cuerpo. 66ch sobre el tamaño base ≈ 620 px, que
   es lo que ya heredaba de Astra (medido: 630 px / 79 cpl) — o sea que esto
   NO estrecha lo que se veía, lo fija para que no dependa de Astra.
   ⚠️ Solo el texto de PRIMER NIVEL: acotar el contenedor entero rompería
   cualquier bloque ancho (tablas, imágenes) que se meta en un artículo. */
body.single .pis-articulo__cuerpo > p,
body.single .pis-articulo__cuerpo > ul,
body.single .pis-articulo__cuerpo > ol,
body.single .pis-articulo__cuerpo > h2,
body.single .pis-articulo__cuerpo > h3,
body.single .pis-articulo__cuerpo > blockquote {
	max-width: 66ch;
}

body.single .pis-articulo__cuerpo > h2,
body.single .pis-articulo__cuerpo > h3 {
	font-family: var(--gab-font-titulo);
	color: var(--gab-titular);
	margin-top: 2rem;
}

body.single .pis-articulo__cuerpo > blockquote {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--gab-linea);
	color: var(--gab-tinta-2);
}

/* ---------- El empujón al portal ---------- */

.pis-articulo__cta {
	margin: 2.5rem 0;
	padding: 1.75rem;
	background: var(--gab-acento);
	color: #FFFFFF;
}

.pis-articulo__cta-titulo {
	margin: 0 0 0.5rem;
	font-family: var(--gab-font-titulo);
	font-size: clamp(1.125rem, 2.4vw, 1.375rem);
	color: #FFFFFF;
}

.pis-articulo__cta-texto {
	margin: 0 0 1.25rem;
	color: #FFFFFF;
}

.pis-articulo__cta-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	background: #FFFFFF;
	color: var(--gab-acento);
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	text-decoration: none;
	transition:
		transform var(--gab-d1) ease,
		box-shadow var(--gab-d1) ease;
}

.pis-articulo__cta-boton:hover,
.pis-articulo__cta-boton:focus-visible {
	color: var(--gab-acento);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.pis-articulo__cta-boton {
		transition: none;
	}

	.pis-articulo__cta-boton:hover,
	.pis-articulo__cta-boton:focus-visible {
		transform: none;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	}
}

/* En móvil el botón a lo ancho, igual que en la franja CTA de la home. */
@media (max-width: 600px) {
	.pis-articulo__cta-boton {
		display: flex;
		width: 100%;
	}
}

/* ---------- Artículos vecinos ---------- */

.pis-articulo__vecinos {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-bottom: 2.5rem;
}

/* El eyebrow de la ficha del artículo es un enlace: hereda el color. */
.pis-eyebrow__enlace {
	color: inherit;
	text-decoration: none;
}

.pis-eyebrow__enlace:hover,
.pis-eyebrow__enlace:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Navegación entre artículos del blog (14/08/2026)
 *
 * Sustituye a `.pis-articulo__vecinos`, que usaba `.pis-enlace-fuerte`. Ver el
 * porqué en `single.php`: aquella clase es `inline-flex` y dentro de un
 * contenedor flex el navegador la BLOCKIFICA, con lo que su subrayado de
 * degradado se estiraba a todo el ancho bajo la segunda línea del título.
 *
 * Aquí el subrayado no existe: el afordance es la tarjeta entera.
 * Radio 0, como todo el portal.
 * ---------------------------------------------------------------------- */

.pis-vecinos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.pis-vecino {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1rem 1.25rem;
	background: var(--gab-fondo);
	border: 1px solid var(--gab-linea);
	text-decoration: none;
	transition: border-color var(--gab-d1) ease, background-color var(--gab-d1) ease;
}

.pis-vecino:hover,
.pis-vecino:focus-visible {
	border-color: var(--gab-acento);
	background: var(--gab-superficie);
}

.pis-vecino__etiqueta {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--gab-font-titulo);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gab-tinta-2);
}

.pis-vecino__flecha {
	width: 1rem;
	height: 1rem;
	flex: none;
	transition: transform var(--gab-d1) ease;
}

/* La flecha se separa hacia SU lado: refuerza en qué dirección va el enlace. */
.pis-vecino--prev:hover .pis-vecino__flecha { transform: translateX(-3px); }
.pis-vecino--next:hover .pis-vecino__flecha { transform: translateX(3px); }

.pis-vecino__titulo {
	font-family: var(--gab-font-titulo);
	font-weight: 600;
	line-height: 1.35;
	color: var(--gab-acento);
}

.pis-vecino:hover .pis-vecino__titulo,
.pis-vecino:focus-visible .pis-vecino__titulo {
	color: var(--gab-acento-2);
}

@media (prefers-reduced-motion: reduce) {
	.pis-vecino,
	.pis-vecino__flecha {
		transition: none;
	}
	.pis-vecino--prev:hover .pis-vecino__flecha,
	.pis-vecino--next:hover .pis-vecino__flecha {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * La casita del banner de cookies (14/08/2026, a petición de Gerardo)
 *
 * Va por CSS y no tocando `gab-cookies`: es un adorno de ESTE portal, no algo
 * que deba llevar la pieza en todos los proyectos.
 *
 * ★ `mask` en vez de `background-image` para que el icono **herede el color**
 * del título con `currentColor`. Con `background-image` habría que hornear el
 * color dentro del SVG y se desincronizaría el día que cambie la paleta.
 * ★ Es decorativo: no lleva texto alternativo porque el título ya lo dice.
 * ---------------------------------------------------------------------- */

.gab-ck__titulo {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.gab-ck__titulo::before {
	content: '';
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	background-color: currentColor;
	-webkit-mask: var(--pis-ck-casita) no-repeat center / contain;
	mask: var(--pis-ck-casita) no-repeat center / contain;
}

/* ★★ 14/08/2026: era una casita DIBUJADA (un icono genérico de trazo, tipo
   Lucide) y ahora es **la casita de la marca**, a petición de Gerardo. Sale
   del propio `piseando-logo-cabecera.webp`: se le extrajo el canal alfa —el
   original es azul sobre blanco SIN transparencia, así que como máscara habría
   tapado todo— y se redujo a 96 px de ancho (2,3 KB) para un icono que se
   pinta a 22. Sigue siendo `mask`, así que **sigue heredando el color** del
   título: si cambia la paleta, cambia con ella. */
:root {
	--pis-ck-casita: url("../img/piseando-casita.png");
}

/* ============================================================
   L · LANDING «Publica tu anuncio gratis» (/publicar-gratis/)
   Pieza A1 del plan SEO. Piel del portal, sin firma nueva: hero de
   marino sólido (el LCP es el titular, no una foto) y cuerpo claro
   con la gramática existente (valores, faq, cta-franja, enlace-fuerte).
   Pares nuevos medidos sobre --gab-acento #0D2C54:
     blanco 13.95 (ya medido) · blanco al 92% ~12.4 · blanco al 85% ~11.2
   El resto de pares son los de la cabecera del archivo.
   ============================================================ */

.pis-pub-hero {
	background: var(--gab-acento);
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.pis-pub-hero__titulo {
	color: #fff;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: .5rem 0 1rem;
}

.pis-pub-hero__lede {
	color: rgba(255, 255, 255, .92);
	font-size: clamp(1rem, 2vw, 1.1875rem);
	line-height: 1.6;
	max-width: 58ch;
	margin: 0 0 1.75rem;
}

.pis-pub-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
}

/* CTA secundario: texto blanco subrayado con flecha de ancla. */
.pis-pub-hero__secundario {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	min-height: 48px;
	padding-inline: .25rem;
	color: #fff;
	font-family: var(--gab-font-titulo);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .25em;
}

.pis-pub-hero__secundario:hover,
.pis-pub-hero__secundario:focus-visible {
	color: rgba(255, 255, 255, .85);
}

.pis-pub-hero__secundario svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

/* El outline global es del color del acento: sobre el propio marino es
   invisible, así que dentro del hero (y solo ahí) el foco va en blanco. */
.pis-pub-hero :is(a):focus-visible {
	outline-color: #fff;
}

.pis-pub-hero__confianza {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.75rem;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	color: rgba(255, 255, 255, .85);
	font-size: .9375rem;
	/* Recorta el `·` del primer item de cada línea plegada: el punto se pinta
	   a -1.0625rem del item, así que en el arranque de línea queda FUERA de la
	   lista (medido a 375: colgaba en el borde). Los de la misma línea caen
	   dentro del gap y se siguen viendo. */
	overflow: hidden;
}

/* Separador de puntos entre items, solo decoración (el móvil los apila). */
.pis-pub-hero__confianza li {
	position: relative;
}

.pis-pub-hero__confianza li + li::before {
	content: '·';
	position: absolute;
	left: -1.0625rem;
	font-weight: 700;
}

/* ---------- Qué puedes publicar: tiles NO interactivos ----------
   Mismo material que las puertas de la home (borde + fondo blanco) pero
   sin hover que levante: no son enlaces y no deben parecerlo. */

.pis-pub-lineas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.pis-pub-linea {
	border: 1px solid var(--gab-linea);
	background: var(--gab-fondo);
	padding: 1.75rem 1.5rem;
}

.pis-pub-linea__icono {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	color: var(--gab-acento-2);
	margin-bottom: .75rem;
}

.pis-pub-linea__icono svg {
	width: 100%;
	height: 100%;
}

.pis-pub-linea__titulo {
	font-size: 1.0625rem;
	margin: 0 0 .5rem;
}

.pis-pub-linea p {
	margin: 0;
	color: var(--gab-tinta-2);
	font-size: .9375rem;
}

/* ---------- Gratis de verdad: lista densa con checks (R7) ---------- */

.pis-pub-gratis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.125rem 2.5rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.pis-pub-gratis li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.pis-pub-gratis svg {
	width: 1.375rem;
	height: 1.375rem;
	flex: none;
	margin-top: .0625rem;
	color: var(--gab-ok); /* 5.87 sobre blanco, medido en la cabecera */
}

.pis-pub-gratis strong {
	color: var(--gab-titular);
}

/* ---------- Cómo funciona: tres pasos numerados ---------- */

.pis-pub-pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.pis-pub-paso {
	border-top: 3px solid var(--gab-acento-2);
	padding-top: 1.125rem;
}

.pis-pub-paso__numero {
	display: block;
	font-family: var(--gab-font-titulo);
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--gab-acento-2);
	margin-bottom: .625rem;
}

.pis-pub-paso__titulo {
	font-size: 1.0625rem;
	margin: 0 0 .5rem;
}

.pis-pub-paso p {
	margin: 0;
	color: var(--gab-tinta-2);
	font-size: .9375rem;
}

.pis-pub-pasos__cta {
	margin: 2.25rem 0 0;
}

.pis-pub-pasos__cta .pis-cta {
	margin-left: 0;
}

/* ---------- Franja de agencias: caja sobre superficie ---------- */

.pis-pub-agencias {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2.5rem;
	border: 1px solid var(--gab-linea);
	background: var(--gab-superficie);
	padding: 1.75rem 1.5rem;
}

.pis-pub-agencias__titulo {
	font-size: 1.25rem;
	margin: 0 0 .375rem;
}

.pis-pub-agencias p {
	margin: 0;
	max-width: 60ch;
	color: var(--gab-tinta-2);
}

.pis-pub-agencias .pis-enlace-fuerte {
	flex: none;
}

/* ============================================================
   EL PIE, 6ª PASADA: el nombre TAMBIÉN en escritorio + menos aire
   (Gerardo, 22/08/2026)
   ============================================================
   ★ Por qué el nombre deja de ocultarse en escritorio. La 5ª pasada lo apagaba
   con un motivo bueno: «ahí está el logo, y decirlo dos veces sobra». Eso era
   cierto mientras el logo del pie era el montaje del cartel, que **lleva la
   palabra PISEANDO dentro**. El 22/08 se cambió por la casita limpia (el mismo
   adjunto que la cabecera), que **no lleva texto** — así que el bloque se
   quedaba siendo un dibujo sin nombre. El `<p>` ya estaba en el marcado desde
   la 3ª pasada: aquí solo se enciende.

   Sigue siendo un `<p>` y no un encabezado, por lo mismo que se decidió
   entonces: los otros tres bloques llevan `h2` y este no debe competir en el
   esquema del documento.

   ★ El aire. Medido en el navegador a 1350 px, el hueco antes del logo eran
   **196 px**: 96 del `margin-top` de `.gab-footer` + 56 del relleno de
   `.gab-footer__inner` + 44 de `.pis-pie`. Los tres se suman sin que ninguno lo
   sepa. Se recorta **solo el tercero**, que es el que se solapa con el
   contenedor que ya lo envuelve: 32-44 px → 16-24 px. El margen de 96 px NO se
   toca: ese no es aire del pie, es el ritmo de la página.

   ⚠️⚠️ TODO ESTO VA DENTRO DE `min-width: 720px`, y no es cosmético.
   Al escribirlo suelto —como las cinco pasadas anteriores— **pisó el bloque
   móvil de la 5ª pasada**, que está más arriba en el fichero: el relleno
   superior del móvil pasó de los 24 px que aprobó Gerardo el 13/08 a 16, y el
   nombre se llevó un margen de 8 px que allí era 0. Medido en el navegador a
   375 px, no visto de refilón. En un fichero donde «la que manda suele estar
   más abajo», **una regla nueva sin acotar alcanza a TODOS los anchos**.
   El móvil se queda exactamente como estaba.
   ============================================================ */

@media (min-width: 720px) {
	.pis-pie {
		padding-block: clamp(1rem, 2vw, 1.5rem);
	}

	/*
	 * El logo baja de 148 a 96 px de ancho (de 123 a 80 de alto).
	 *
	 * Los 148 venían de la 2ª pasada, cuando el logo del pie era el montaje del
	 * cartel: una imagen con su propio marco, que aguanta ese tamaño. La casita
	 * suelta, no — medido, quedaba en **2,4 veces el logo de la cabecera** (52 px)
	 * y aplastaba a un nombre de 22. La columna de la marca tiene que pesar
	 * **como sus tres vecinas**, no más. A 80 px sigue siendo mayor que el de
	 * cabecera, que es lo correcto en un cierre de página, pero ya no manda solo.
	 *
	 * `height: auto` viene de la 2ª pasada y NO se toca: con los atributos
	 * `width`/`height` del `<img>` es lo que reserva el hueco y evita que el pie
	 * salte al cargar.
	 */
	.pis-pie__logo {
		width: 96px;
	}

	.pis-pie__nombre {
		display: block;
		/* 8 px hacían que el logo y la palabra se leyeran como un solo bulto. */
		margin: 0.875rem 0 0;
		font-family: var(--gab-font-titulo);
		font-size: 1.375rem;
		font-weight: 700;
		line-height: 1.2;
		color: var(--gab-titular);
	}

	/* Con el nombre delante, el lema explica en vez de sostener el bloque: el
	   margen de 14px existía para separarlo del logo, y ahora ya no lo toca. */
	.pis-pie__lema {
		margin-top: 0.35rem;
	}
}