/**
 * SIKER — block adaptations.
 *
 * components.css is the port of the design system. This file is the bridge to the
 * markup WordPress actually emits: a Columns block instead of a CSS grid, a
 * Details block instead of a bespoke accordion, a Navigation overlay instead of a
 * hand-built off-canvas panel.
 *
 * Keeping the two apart means the design system stays diffable against its source,
 * and everything WordPress-shaped is in one place when core changes.
 *
 * Contents
 *   1. Header: brand, search disclosure, navigation overlay
 *   2. Hero and media bands
 *   3. Category band (Columns)
 *   4. Contact strip (Columns)
 *   5. Numbered columns (Columns)
 *   6. Service rows
 *   7. Property page
 *   8. Sticky action bar
 *   9. FAQ (Details)
 *  10. Gallery mosaic
 *  11. Lead form
 *  12. Blog and article
 *  13. Splits and closing blocks
 */

/* ==========================================================================
   1. Header
   ========================================================================== */

/* Cabecera, contenido y pie van pegados. WordPress separa los hijos de
   `.wp-site-blocks` con el hueco de bloque (24px), y eso dejaba una franja
   blanca entre la cabecera y el hero de cada página —y otra sobre el pie—.
   Las secciones ya traen su propio aire; este hueco solo estorbaba. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* El desenfoque de la cabecera se pinta en un pseudo-elemento, no en la propia
   cabecera, y esto **no es cosmético**: un `backdrop-filter` (como `filter` y
   `transform`) convierte al elemento en bloque contenedor de sus descendientes
   `position: fixed`. El overlay del menú de core es `fixed; inset: 0`, así que
   dentro de una cabecera con blur no cubre la pantalla — queda recortado a la
   caja de la cabecera, con la página visible detrás. Era exactamente el menú
   roto en escritorio y en móvil.

   El pseudo-elemento es hijo, no ancestro, del menú: mantiene el cristal
   esmerilado del diseño sin atrapar nada. */
.siker-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: transparent;
}

.siker-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 90%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.siker-header .siker-header__bar {
	gap: var(--space-8);
}

.siker-header__brand {
	gap: var(--space-3);
}

/* The site title stands in until a logo file is uploaded — nothing is drawn. */
.siker-header__brand .wp-block-site-logo + .wp-block-site-title {
	display: none;
}

.siker-header__brand .wp-block-site-title a {
	color: var(--ink-900);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	padding-right: 0.24em;
}

.siker-header__nav {
	gap: var(--space-4);
	margin-inline-start: auto;
}

.siker-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/* En móvil la cabecera es marca + buscador + menú, como en el diseño. El botón
   «Vende con SIKER» no cabe junto a los dos iconos —empujaba la cabecera 32px
   fuera de la pantalla y hacía que toda la web se moviera de lado— y no se
   pierde: está en el menú y tiene su propia banda en la portada. */
@media (max-width: 781px) {
	/* Con la clase de core dentro a propósito: `.wp-block-buttons.is-layout-flex`
	   trae su `display: flex` y gana a un solo selector nuestro. */
	.siker-header .siker-header__cta.wp-block-buttons {
		display: none;
	}

	.siker-header .siker-header__bar {
		gap: var(--space-4);
	}

	/* Mientras no haya logo, el rótulo hace de marca: en pantalla estrecha se
	   aprieta el tracking y, si aun así no cabe, se recorta con puntos
	   suspensivos en vez de desbordar. */
	.siker-header__brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.siker-header__brand .wp-block-site-title {
		min-width: 0;
	}

	.siker-header__brand .wp-block-site-title a {
		display: block;
		overflow: hidden;
		letter-spacing: 0.12em;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* --- Search disclosure ---------------------------------------------------
   A <details> rather than a scripted panel: the browser gives us the open/close
   state, the button semantics and keyboard support for free. */

.siker-header__search {
	position: static;
	border: 0;
	padding: 0;
	margin: 0;
}

.siker-header__search > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	min-height: 0;
	font-size: 0;
	color: var(--ink-900);
	cursor: pointer;
}

.siker-header__search > summary::after {
	content: "";
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 0;
	background: currentcolor;
	mask: var(--siker-icon-search) center / contain no-repeat;
	transform: none;
}

.siker-header__search[open] > summary::after {
	mask-image: var(--siker-icon-x);
}

/* Un `<details>` cerrado esconde su contenido, pero los navegadores lo hacen
   ahora con `content-visibility: hidden`: la caja sigue existiendo y, siendo
   absoluta y más ancha que la pantalla, seguía contando para el ancho del
   documento. Es decir, toda la web se movía de lado en móvil por un panel que
   nadie veía. Cerrado significa fuera. */
.siker-header__search:not([open]) > .siker-header__search-panel {
	display: none;
}

.siker-header__search-panel {
	position: absolute;
	inset: 100% 0 auto 0;
	z-index: calc(var(--z-header) + 1);
	padding: var(--space-8) var(--gutter);
	background: var(--surface-inverse);
	border-top: 1px solid var(--border-on-dark);
	animation: siker-drop var(--dur-slow) var(--ease-out);
}

@keyframes siker-drop {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.siker-header__search-panel {
		animation: none;
	}
}

/* --- Navigation overlay --------------------------------------------------
   The hamburger is present at every breakpoint; the overlay is the real
   navigation. Core handles focus trapping and Escape. */

.siker-nav .wp-block-navigation__responsive-container-open,
.siker-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	color: var(--ink-900);
}

.siker-nav .wp-block-navigation__responsive-container-close {
	color: var(--paper);
	top: var(--space-7);
	right: var(--space-7);
}

/* El panel del diseño es una lámina de 420px anclada a la derecha sobre un velo,
   no una pantalla negra entera (ver project/components/layout/OffCanvasMenu.jsx).
   Core pinta el contenedor a pantalla completa con su color de fondo, así que
   aquí ese fondo pasa a ser el velo y el negro se reduce a la lámina. */
.siker-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	/* `!important` porque las clases de preset de color que emite WordPress
	   (`.has-ink-900-background-color`) lo llevan; sin él no hay forma de
	   convertir ese fondo en velo. */
	background-color: rgb(10 10 10 / 55%) !important;
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	position: relative;
	width: min(420px, 92vw);
	max-width: none;
	height: 100%;
	/* Core pone `margin-left: auto; margin-right: auto` y eso centra la lámina.
	   Anclarla a la derecha es quitarle el margen de ese lado, no añadir otro. */
	margin-inline-start: auto;
	margin-inline-end: 0;
	padding: var(--space-7) var(--space-8) var(--space-8);
	background: var(--ink-900);
	overflow-y: auto;
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-height: 100%;
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	/* La barra alinea sus enlaces a la derecha; dentro del panel las filas son
	   de ancho completo, con la etiqueta a la izquierda y la flecha al final. */
	align-items: stretch;
	justify-content: flex-start;
	/* Lo que venga después del menú queda abajo del todo. */
	margin-bottom: auto;
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	border-bottom: 1px solid var(--border-on-dark);
	font: var(--type-h3);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
	color: var(--paper);
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--bronze-300);
}

/* La flecha de cada fila. Va como máscara y no como icono en la marcación
   porque los enlaces los escribe el bloque Navegación de core y no podemos
   meterles nada dentro. El glifo es el mismo `arrow-right` de Lucide. */
.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	opacity: 0.5;
	background-color: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') center / contain no-repeat;
	transition: var(--transition-control);
}

.siker-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after {
	opacity: 1;
	transform: translateX(4px);
}

/* Mientras el menú está abierto no deben flotar cosas por encima. WordPress
   marca el `<html>` con `has-modal-open` al abrirlo — el `<html>`, no el
   `<body>`: es su propio gancho y no hace falta script nuestro. */
.has-modal-open .siker-wa-fab,
.has-modal-open .siker-action-bar {
	display: none;
}

.siker-nav__social {
	margin-top: var(--space-8);
	gap: var(--space-3);
}

/* ==========================================================================
   2. Hero and media bands
   ========================================================================== */

.siker-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.siker-hero__media .wp-block-image,
.siker-hero__media figure {
	margin: 0;
	height: 100%;
}

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

.siker-hero__inner > * {
	margin-block: 0;
}

.siker-hero__inner .siker-eyebrow {
	color: var(--ink-300);
	margin-bottom: var(--space-5);
}

.siker-hero__search {
	width: min(720px, 100%);
	margin-top: var(--space-8);
}

.siker-hero__actions {
	margin-top: var(--stack-body-to-cta);
}

.siker-media-band .wp-block-image,
.siker-media-band figure {
	margin: 0;
	height: 100%;
}

.siker-media-band img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   3. Category band
   Four Columns, hairline-divided. The heading's link is stretched over the whole
   column, so the target is the tile but the accessibility tree sees one link.
   ========================================================================== */

.siker-cats.wp-block-columns {
	gap: 0;
	margin-block: 0;
}

.siker-cats .siker-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-2) var(--space-6);
	border-left: 1px solid var(--border-hairline);
	transition: var(--transition-control);
}

.siker-cats .siker-cat:first-child {
	padding-left: 0;
	border-left: 0;
}

.siker-cat > * {
	margin-block: 0;
}

.siker-cat__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	font: var(--type-h3);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-strong);
}

.siker-cat__label a {
	color: inherit;
}

/* One stretched link: the whole column is the target. */
.siker-cat__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.siker-cat__label::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background: var(--ink-400);
	mask: var(--siker-icon-arrow-up-right) center / contain no-repeat;
	transition:
		background var(--dur-fast) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard);
}

.siker-cat:hover .siker-cat__label a {
	color: var(--text-strong);
}

.siker-cat:hover .siker-cat__label::after {
	background: var(--bronze-700);
	transform: translate(3px, -3px);
}

.siker-cat:hover .siker-icon-block {
	color: var(--bronze-700);
}

/* The rule grows to the column width on hover — a discreet cue that these are
   navigation, not decoration. */
.siker-cat__rule.wp-block-separator {
	width: 56px;
	max-width: 100%;
	margin: 0;
	border-top-color: var(--border-hairline);
	transition:
		width var(--dur-base) var(--ease-out),
		border-color var(--dur-fast) var(--ease-standard);
}

.siker-cat:hover .siker-cat__rule.wp-block-separator {
	width: 100%;
	border-top-color: var(--ink-900);
}

.siker-cat__note {
	font: var(--type-body-sm);
	color: var(--text-body);
}

@media (max-width: 1024px) {
	.siker-cats.wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: var(--space-7);
	}

	.siker-cats .siker-cat {
		flex-basis: calc(50% - var(--space-6)) !important;
	}

	.siker-cats .siker-cat:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}

	.siker-cats .siker-cat:nth-child(n + 3) {
		padding-top: var(--space-7);
		border-top: 1px solid var(--border-hairline);
	}
}

@media (max-width: 620px) {
	.siker-cats .siker-cat {
		flex-basis: 100% !important;
		padding-left: 0;
		padding-top: var(--space-6);
		border-left: 0;
		border-top: 1px solid var(--border-hairline);
	}

	.siker-cats .siker-cat:first-child {
		padding-top: 0;
		border-top: 0;
	}
}

/* ==========================================================================
   4. Contact strip
   ========================================================================== */

.siker-contacts.wp-block-columns {
	gap: var(--space-7);
	margin-block: 0;
}

.siker-contacts .siker-contact {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	gap: 3px var(--space-4);
}

.siker-contact > .siker-icon-block {
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border-hairline);
	color: var(--ink-900);
	transition: var(--transition-control);
}

.siker-contact:hover > .siker-icon-block {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper);
}

.siker-contact__label {
	grid-column: 2;
	margin: 0;
	align-self: end;
	font: var(--type-eyebrow);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.siker-contact__value {
	grid-column: 2;
	margin: 0;
	align-self: start;
	font: var(--type-h4);
	color: var(--text-strong);
}

.siker-ground-inverse .siker-contact > .siker-icon-block {
	border-color: var(--border-on-dark);
	color: var(--paper);
}

.siker-ground-inverse .siker-contact:hover > .siker-icon-block {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink-900);
}

.siker-ground-inverse .siker-contact__label {
	color: var(--ink-400);
}

.siker-ground-inverse .siker-contact__value,
.siker-ground-inverse .siker-contact__value a {
	color: var(--paper);
}

/* ==========================================================================
   5. Numbered columns
   ========================================================================== */

.siker-numbered.wp-block-columns {
	gap: var(--space-8) var(--space-7);
	flex-wrap: wrap !important;
	margin-block: 0;
}

.siker-numbered .siker-numbered__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-strong);
}

.siker-numbered--hairline .siker-numbered__item {
	border-top-color: var(--border-hairline);
}

.siker-ground-inverse .siker-numbered .siker-numbered__item {
	border-top-color: var(--border-on-dark);
}

.siker-numbered__item > * {
	margin-block: 0;
}

.siker-numbered__head {
	gap: var(--space-4);
}

@media (max-width: 1024px) {
	.siker-numbered .siker-numbered__item {
		flex-basis: calc(50% - var(--space-7)) !important;
	}
}

@media (max-width: 620px) {
	.siker-numbered .siker-numbered__item {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   6. Service rows
   ========================================================================== */

.siker-services-list {
	counter-reset: siker-service;
}

.siker-services-list .siker-service {
	gap: var(--space-5);
	padding-block: var(--space-5);
	border-top: 1px solid var(--border-hairline);
	counter-increment: siker-service;
}

.siker-service > .siker-icon-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border: 1px solid var(--border-hairline);
	color: var(--bronze-500);
	transition: var(--transition-control);
}

.siker-service:hover > .siker-icon-block {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper);
}

.siker-service__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font: var(--type-h4);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
}

.siker-service::after {
	content: counter(siker-service, decimal-leading-zero);
	flex: 0 0 auto;
	font: var(--type-caption);
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--track-eyebrow);
	color: var(--text-muted);
}

.siker-mini-services.wp-block-columns {
	gap: var(--space-6);
	flex-wrap: wrap !important;
}

.siker-mini-services .wp-block-column {
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-hairline);
	flex-basis: calc(50% - var(--space-6)) !important;
}

.siker-mini-services h3 {
	margin: var(--space-3) 0 0;
	text-transform: uppercase;
	letter-spacing: var(--track-nav);
}

/* A short line beside an icon: keeps the icon from stretching the row. */
.siker-note-line {
	gap: var(--space-4);
	align-items: flex-start;
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-hairline);
	max-width: var(--container-narrow);
}

.siker-note-line > .siker-icon-block {
	margin-top: 5px;
}

.siker-note-line p {
	margin: 0;
	color: var(--text-strong);
}

/* ==========================================================================
   7. Property page
   ========================================================================== */

.siker-prop-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

/* Ver «Rejillas sobre grupos de WordPress», al final de este archivo. */

.siker-prop-hero__media {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	background: var(--surface-media);
}

.siker-prop-hero__media .wp-block-post-featured-image,
.siker-prop-hero__media figure {
	margin: 0;
	height: 100%;
}

.siker-prop-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.siker-prop-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay-gradient);
	pointer-events: none;
}

.siker-prop-hero__marks {
	position: absolute;
	top: var(--space-6);
	left: var(--space-6);
	z-index: 1;
	gap: var(--space-2);
}

.siker-prop-hero__marks p {
	margin: 0;
}

/* An empty binding renders an empty badge; hide it rather than show a blank pill. */
.siker-prop-hero__marks .siker-badge:empty {
	display: none;
}

.siker-prop-hero__gallery-link {
	position: absolute;
	left: var(--space-6);
	bottom: var(--space-6);
	z-index: 1;
	margin: 0;
}

.siker-prop-hero__gallery-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding-inline: var(--space-5);
	background: var(--paper);
	color: var(--ink-900);
	font: var(--type-button);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	transition: var(--transition-control);
}

.siker-prop-hero__gallery-link a:hover {
	background: var(--ink-050);
	color: var(--ink-900);
}

.siker-prop-hero__brief {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-6);
	padding: var(--space-10) clamp(28px, 4.5vw, 72px);
}

.siker-prop-hero__brief > * {
	margin-block: 0;
}

.siker-prop-hero__kind {
	color: var(--paper);
}

.siker-prop-hero__title {
	font: var(--type-lead);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--paper);
	text-wrap: pretty;
}

.siker-prop-hero__summary {
	max-width: 46ch;
	color: var(--ink-300);
}

.siker-prop-hero__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-on-dark);
}

.siker-prop-hero__actions {
	gap: var(--space-3);
}

@media (max-width: 980px) {
	.siker-prop-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.siker-prop-hero__media {
		min-height: 62vw;
	}
}

/* --- Enquiry aside -------------------------------------------------------- */

.siker-prop-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-7);
	background: var(--surface-alt);
	border: 1px solid var(--border-hairline);
	top: calc(var(--header-h) + var(--space-6));
}

.siker-prop-aside > * {
	margin-block: 0;
}

.siker-prop-aside__note {
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-hairline);
	font: var(--type-body-sm);
	color: var(--text-body);
}

/* ==========================================================================
   8. Sticky action bar (mobile, property pages only)
   ========================================================================== */

.siker-action-bar {
	display: none;
}

@media (max-width: 760px) {
	.siker-action-bar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: var(--z-float);
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		background: var(--surface-page);
		border-top: 1px solid var(--border-hairline);
		box-shadow: 0 -8px 24px rgb(10 10 10 / 8%);
	}

	.siker-action-bar__price {
		flex: 1;
		min-width: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		font: 600 18px / 1.1 var(--font-display);
		color: var(--text-strong);
	}

	.siker-action-bar__label {
		font: var(--type-caption);
		letter-spacing: var(--track-eyebrow);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.siker-action-bar__cta {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-min);
		padding-inline: var(--space-5);
		background: var(--ink-900);
		color: var(--paper);
		font: var(--type-button);
		letter-spacing: var(--track-button);
		text-transform: uppercase;
	}

	.siker-action-bar__cta:hover {
		color: var(--paper);
	}

	.siker-action-bar__wa {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--tap-min);
		height: var(--tap-min);
		background: var(--whatsapp);
		color: var(--ink-900);
	}
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.siker-faq .wp-block-details:first-child {
	border-top-color: var(--border-strong);
}

.siker-faq .wp-block-details {
	padding-block: 0;
}

.siker-faq .wp-block-details summary {
	padding-block: var(--space-5);
	min-height: 64px;
}

/* ==========================================================================
   10. Gallery mosaic
   A 2×2 lead tile plus four, with the photo count over the last one. The viewer
   is core's own lightbox.
   ========================================================================== */

.wp-block-gallery.is-style-siker-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(120px, 1fr);
	gap: 2px;
}

.wp-block-gallery.is-style-siker-mosaic .wp-block-image {
	margin: 0;
	width: auto !important;
	height: 100%;
}

.wp-block-gallery.is-style-siker-mosaic .wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.wp-block-gallery.is-style-siker-mosaic .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Anything past the sixth tile is reachable through the lightbox, not the grid. */
.wp-block-gallery.is-style-siker-mosaic .wp-block-image:nth-child(n + 7) {
	display: none;
}

.wp-block-gallery.is-style-siker-mosaic .wp-block-image:nth-child(6) {
	position: relative;
}

.wp-block-gallery.is-style-siker-mosaic .wp-block-image:nth-child(6)::after {
	content: var(--siker-gallery-label, "");
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: rgb(10 10 10 / 62%);
	color: var(--paper);
	font: var(--type-button);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
}

@media (max-width: 700px) {
	.wp-block-gallery.is-style-siker-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-gallery.is-style-siker-mosaic .wp-block-image:nth-child(n + 5) {
		display: none;
	}

	.wp-block-gallery.is-style-siker-mosaic .wp-block-image:nth-child(4)::after {
		content: var(--siker-gallery-label, "");
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-4);
		background: rgb(10 10 10 / 62%);
		color: var(--paper);
		font: var(--type-button);
		letter-spacing: var(--track-button);
		text-transform: uppercase;
		text-align: center;
		pointer-events: none;
	}

	.wp-block-gallery.is-style-siker-mosaic .wp-block-image:nth-child(4) {
		position: relative;
	}
}

/* ==========================================================================
   11. Lead form
   ========================================================================== */

.siker-leadform__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.siker-leadform__head .siker-eyebrow {
	margin: 0;
}

.siker-leadform__title {
	margin: 0;
	font: var(--type-h3);
	font-family: var(--font-display);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	color: var(--text-strong);
}

.siker-ground-inverse .siker-leadform__title {
	color: var(--paper);
}

.siker-leadform__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 60px;
	padding-inline: var(--control-pad-x);
	cursor: pointer;
	border: 1px solid var(--paper);
	background: var(--paper);
	color: var(--ink-900);
	font: var(--type-button);
	font-family: var(--font-display);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	transition: var(--transition-control);
}

.siker-leadform__submit:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
}

.siker-leadform:not(.siker-ground-inverse) .siker-leadform__submit {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper);
}

.siker-leadform:not(.siker-ground-inverse) .siker-leadform__submit:hover {
	background: var(--ink-700);
	border-color: var(--ink-700);
}

.siker-leadform__result {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--status-success);
	color: var(--status-success);
	font: var(--type-body-sm);
	background: rgb(46 107 79 / 8%);
}

.siker-leadform__result--error {
	border-color: var(--status-danger);
	color: var(--status-danger);
	background: rgb(140 47 38 / 8%);
}

.siker-ground-inverse .siker-leadform__result {
	color: var(--paper);
	border-color: var(--whatsapp);
	background: rgb(37 211 102 / 12%);
}

/* ==========================================================================
   12. Blog and article
   ========================================================================== */

.siker-post .wp-block-post-featured-image,
.siker-post .wp-block-post-featured-image img {
	margin: 0;
	width: 100%;
}

.siker-post__title a,
.siker-post__title {
	font: var(--type-h4);
	font-family: var(--font-display);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	text-wrap: pretty;
}

.siker-post__body > * {
	margin-block: 0;
}

.siker-post__category a {
	color: var(--text-eyebrow);
}

.siker-post__meta {
	gap: var(--space-3);
	font: var(--type-eyebrow);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

.siker-article-media .wp-block-post-featured-image {
	margin: 0;
}

.siker-article-media img {
	width: 100%;
	object-fit: cover;
}

.siker-article > p:first-of-type::first-letter {
	float: left;
	margin: 4px 10px 0 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-3);
	font-weight: 800;
	line-height: 0.85;
	color: var(--bronze-500);
}

.siker-article-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-7);
	background: var(--surface-alt);
	border: 1px solid var(--border-hairline);
}

.siker-article-aside > * {
	margin-block: 0;
}

/* ==========================================================================
   13. Splits and closing blocks
   ========================================================================== */

.siker-split > * {
	min-width: 0;
}

.siker-split--article {
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
}

.siker-split--reel {
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

/* Una propiedad sin video no imprime el reel, y entonces la columna de la
   derecha se queda vacía: el texto ocupa el ancho entero en vez de la mitad. */
.siker-split--reel > :only-child {
	grid-column: 1 / -1;
}

.siker-split--services {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--space-10);
}

.siker-split--form {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
}

.siker-split--contact {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--space-10);
}

.siker-closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-5);
}

.siker-closing > * {
	margin-block: 0;
}

.siker-closing h2 {
	max-width: 18ch;
}

.siker-team.wp-block-columns {
	gap: var(--space-9);
	flex-wrap: wrap !important;
	margin-block: 0;
}

.siker-portrait figure {
	margin: 0;
	aspect-ratio: var(--ratio-portrait);
	background: var(--ink-100);
}

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

.siker-portrait__name {
	margin: var(--space-5) 0 var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-strong);
	font: var(--type-h3);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
}

.siker-team__note {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-6);
	padding-bottom: var(--space-2);
}

.siker-team__note > * {
	margin-block: 0;
}

.siker-team__rule.wp-block-separator {
	width: 56px;
	margin: 0;
	border-top-color: var(--bronze-300);
}

@media (max-width: 1024px) {
	.siker-split--article,
	.siker-split--reel,
	.siker-split--services,
	.siker-split--form,
	.siker-split--contact {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-9);
	}

	.siker-team .siker-portrait {
		flex-basis: calc(50% - var(--space-9)) !important;
	}

	.siker-team__note {
		flex-basis: 100% !important;
		justify-content: flex-start;
	}
}

@media (max-width: 620px) {
	.siker-team .siker-portrait {
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Case exceptions.
   Section titles are uppercase (theme.json sets it on h1/h2). These are not
   section titles: a property name, an article headline and a person's name are
   content, and content is sentence case.
   -------------------------------------------------------------------------- */

.siker-card__title,
.siker-row__title,
.siker-post__title,
.siker-post__title a,
.siker-prop-hero__title,
.wp-block-post-title.siker-post__title {
	text-transform: none;
}

/* The article's own headline is the page's h1 and keeps the display treatment,
   but a long Spanish headline in caps is unreadable — sentence case, display
   weight and tracking. */
.siker-article h2,
.siker-article h3 {
	text-transform: none;
}

/* --------------------------------------------------------------------------
   La ficha, dibujada desde los campos.
   La descripción, las amenidades, la distribución y la galería salen de
   `siker_*` — no del contenido del post — así que su marcación es nuestra y
   vive aquí, no en el port del sistema de diseño.
   -------------------------------------------------------------------------- */

.siker-prop-description__title {
	margin: 0 0 var(--space-7);
	font: var(--type-h2);
	letter-spacing: var(--track-display);
	color: var(--ink-900);
	/* El nombre de una propiedad es contenido, no título de sección: caja baja. */
	text-transform: none;
}

.siker-prop-description p {
	max-width: 68ch;
	margin: 0 0 var(--space-3);
	color: var(--text-body);
}

.siker-prop-description p:last-child {
	margin-bottom: 0;
}

.siker-features-grid {
	display: grid;
	grid-template-columns: repeat(var(--siker-features-cols, 2), minmax(0, 1fr));
	gap: var(--space-8);
}

/* La regla superior separa las amenidades de la descripción sin una tarjeta:
   la separación del sistema viene de hairlines y aire. */
.siker-features-grid--rule {
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-strong);
}

@media (max-width: 700px) {
	.siker-features-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-7);
	}
}

/* ==========================================================================
   14. Rejillas sobre grupos de WordPress

   Un grupo con disposición «por defecto» es flujo, y core separa a sus hijos
   con `margin-block-start: var(--wp--style--block-gap)`. Cuando ese mismo
   grupo se convierte aquí en rejilla o en fila, el margen sigue ahí y empuja
   la segunda celda hacia abajo: eran los 24px de franja blanca encima del
   panel del hero, el bloque de cita desalineado del texto, las columnas del
   pie escalonadas y las tarjetas de distrito fuera de línea.

   Una rejilla separa con `gap`. Estos contenedores lo hacen, así que el
   margen de core sobra en todos.

   **Al añadir un contenedor de rejilla o de fila sobre un grupo, añádelo a
   esta lista.** Es la única forma de que no reaparezca el escalón.
   ========================================================================== */

.siker-cats > *,
.siker-contacts > *,
.siker-footer__grid > *,
.siker-grid-2 > *,
.siker-grid-3 > *,
.siker-head-row > *,
.siker-leadform__contact > *,
.siker-limatop > *,
.siker-numbered > *,
.siker-prop-hero > *,
.siker-sell-cta > *,
.siker-split > * {
	margin-block: 0;
}


/* ==========================================================================
   15. Titulares del hero que se editan desde el editor

   El titular tiene un ancho máximo de 14 caracteres para que, sin tocar nada,
   se reparta en tres líneas como en el diseño. Pero eso hacía imposible
   decidir los saltos: con Mayúscula + Intro tras «Disfruta de», «nuevos
   comienzos» seguía sin caber en una línea y salían tres igualmente. Si quien
   edita pone un salto a mano, manda el salto, no el tope.
   ========================================================================== */

.siker-hero__title:has(br) {
	max-width: none;
}

/* El acento era un `<span class="siker-accent">` con su propio bronce, y
   ganaba a cualquier color que se eligiera en el editor: se cambiaba el color
   y «no pasaba nada». Ahora el acento es un Resaltado nativo (un `<mark>`),
   que el editor muestra y deja cambiar. Esta regla cubre las páginas que aún
   tengan el span y a las que alguien aplique un resaltado por encima. */
mark.has-inline-color .siker-accent {
	color: inherit;
}