/* Damico — components reutilizables (botones, header, footer, cards, forms, badges, pagination). */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.04em;
	border-radius: var(--r-pill);
	cursor: pointer;
	border: 1px solid transparent;
	padding: 14px 28px;
	transition:
		transform var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		background var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.btn--primary {
	background: var(--accent);
	color: #fff;
}
.btn--primary:hover {
	background: var(--accent);
	color: #fff;
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 10px 24px -10px var(--accent);
}

.btn--ghost {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
	font-weight: 600;
	padding: 12px 22px;
}
.btn--ghost:hover {
	color: var(--ink);
	background: var(--bg-soft);
	border-color: var(--ink);
}

.btn--outline {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}
.btn--outline:hover { background: var(--accent); color: #fff; }

.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--lg    { padding: 16px 32px; font-size: 15px; }
.btn--sm    { padding: 10px 18px; font-size: 13px; }

/* Link CTA estilo "PUBLICAR PROPIEDAD". */
.link-cta {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.link-cta:hover { color: var(--accent-hover); }

/* "Ver todas →" minilink */
.arrow-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}
.arrow-link svg { transition: transform var(--dur) var(--ease); }
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom: 1px solid rgba(255,255,255,0.35);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.85);
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

/* Offset global del contenido para no quedar tapado por el header fixed.
   En home el hero ocupa todo el viewport y debe quedar PARCIALMENTE detrás
   del header (efecto glass), por eso lo desactivamos. */
body { padding-top: var(--header-h); }
body.home,
body.page-template-front-page { padding-top: 0; }
.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-7);
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Brand — el logo ya incluye símbolo + wordmark en un solo PNG. */
.brand {
	display: inline-flex; align-items: center;
	color: inherit;
	transition: opacity var(--dur-fast) var(--ease);
}
.brand:hover { opacity: 0.85; color: inherit; }
.brand__logo {
	height: 44px;
	width: auto;
	display: block;
}
@media (max-width: 880px) {
	.brand__logo { height: 36px; }
}

/* Primary nav */
.primary-nav { display: flex; justify-content: center; }
.primary-nav__list {
	display: flex;
	list-style: none;
	margin: 0; padding: 0;
	gap: 36px;
}
.primary-nav__link {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	position: relative;
	padding: 4px 0;
}
.primary-nav__link::after {
	content: '';
	position: absolute;
	left: 50%; right: 50%; bottom: -4px;
	height: 1.5px;
	background: var(--ink);
	transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}
.primary-nav__item.is-active .primary-nav__link,
.primary-nav__link:hover { color: var(--ink); }
.primary-nav__item.is-active .primary-nav__link::after,
.primary-nav__link:hover::after { left: 0; right: 0; }

/* Header actions */
.site-header__actions {
	display: flex; align-items: center; gap: 16px;
}
.site-header__social {
	display: inline-flex; align-items: center; gap: 8px;
}
.site-header__social a {
	display: inline-grid; place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	color: var(--ink);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-header__social a:hover {
	background: rgba(33,25,21,0.06);
	color: var(--accent);
	transform: translateY(-1px);
}
.site-header__social svg { display: block; }
@media (max-width: 700px) {
	.site-header__social { display: none; }
}
.user-btn {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--muted);
	background: var(--paper);
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.user-btn:hover { color: var(--ink); border-color: var(--ink); }

/* Favs link en el header */
.favs-link {
	position: relative;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--muted);
	background: var(--paper);
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.favs-link:hover { color: var(--accent); border-color: var(--accent); }
.favs-link.has-favs { color: var(--accent); border-color: var(--accent); }
.favs-link.has-favs svg { fill: currentColor; }
.favs-link__count {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 18px; height: 18px;
	display: grid; place-items: center;
	padding: 0 5px;
	background: var(--accent);
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* Mobile hamburger — oculto desktop */
.menu-toggle {
	display: none;
	width: 40px; height: 40px;
	color: var(--ink);
}

@media (max-width: 880px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: var(--space-4);
	}
	.primary-nav { display: none; }
	/* En mobile dejamos visible solo el favs link (corazón con counter) */
	.site-header__actions { gap: 8px; }
	.menu-toggle { display: grid; place-items: center; }
}
@media (max-width: 480px) {
	.site-header__actions { gap: 4px; }
	.favs-link { width: 32px; height: 32px; }
	.menu-toggle { width: 36px; height: 36px; }
}

/* Share popover (WhatsApp / Email / Copy link) */
.share-pop {
	position: absolute;
	top: calc(100% + 6px); left: 0;
	min-width: 180px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 10px 30px -8px rgba(0,0,0,0.18);
	padding: 6px;
	z-index: 80;
	display: none;
}
.share-pop.is-open { display: block; }
.share-pop__opt {
	display: flex; align-items: center; gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--ink);
	background: transparent;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	cursor: pointer;
	border: none;
	text-align: left;
}
.share-pop__opt:hover { background: var(--bg-soft); color: var(--accent); }
.share-pop__opt svg { flex-shrink: 0; }

/* WhatsApp Floating Action Button */
.whatsapp-fab {
	position: fixed;
	bottom: 24px; right: 24px;
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0,0,0,0.15);
	z-index: 90;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.whatsapp-fab:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5), 0 2px 8px rgba(0,0,0,0.2);
	color: #fff;
}
.whatsapp-fab:active { transform: scale(0.96); }
@media (max-width: 700px) {
	.whatsapp-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
}

/* Mobile drawer */
.mobile-drawer {
	position: fixed; inset: 0;
	background: var(--paper);
	z-index: 1000;
	transform: translateX(100%);
	transition: transform var(--dur) var(--ease);
	display: flex; flex-direction: column;
	padding: 24px;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__close {
	align-self: flex-end;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	color: var(--ink);
}
.mobile-drawer .primary-nav__list {
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}
.mobile-drawer .primary-nav__link {
	font-size: 18px;
	font-family: var(--font-display);
	color: var(--ink);
	text-transform: none;
	letter-spacing: -0.01em;
	font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--paper);
	border-top: 1px solid rgba(33, 25, 21, 0.1);
	padding-top: var(--space-9);
	padding-bottom: var(--space-5);
	margin-top: var(--space-9);
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--space-7);
	align-items: start;
	padding-bottom: var(--space-7);
	border-bottom: 1px solid var(--line);
}
.site-footer__brand p {
	max-width: 320px;
	color: var(--muted);
	font-size: 13px;
	margin-top: var(--space-4);
}
.site-footer__nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}
.site-footer__nav-list .primary-nav__link {
	font-size: 12px;
	letter-spacing: 0.06em;
}
.site-footer__social {
	display: flex; gap: 12px; justify-content: flex-end;
}
.site-footer__social a {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bg-soft);
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-footer__social a:hover { background: var(--paper); transform: translateY(-2px); }
.site-footer__social img { width: 16px; height: 16px; opacity: 0.7; transition: opacity var(--dur-fast) var(--ease); }
.site-footer__social a:hover img { opacity: 1; }

.site-footer__legal {
	display: flex; justify-content: space-between; gap: var(--space-5);
	padding-top: var(--space-5);
	color: var(--muted);
	font-size: 12px;
	flex-wrap: wrap;
}

@media (max-width: 880px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.site-footer__nav-list { justify-content: center; }
	.site-footer__social { justify-content: center; }
	.site-footer__legal { flex-direction: column; align-items: center; gap: var(--space-3); }
}

/* ============================================================
   CARD — Property card (tarjeta de propiedad)
   ============================================================ */
.card {
	position: relative;
	display: block;
	background: var(--paper);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	color: inherit;
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
	color: inherit;
}
/* Link como overlay absoluto: cubre toda la card sin envolver al fav-toggle.
   El heart queda como hermano (HTML válido) y siempre encima. */
.card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	font-size: 0;
	color: transparent;
	background: transparent;
	border-radius: inherit;
}

.card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-soft);
}
.card__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__image img { transform: scale(1.04); }

.card__body {
	padding: 18px 20px 22px;
	display: flex; flex-direction: column;
	gap: 6px;
}
.card__title {
	font-family: 'Epilogue', var(--font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 31.2px;
	letter-spacing: 0;
	color: var(--ink);
	margin: 0;
}
.card__zone {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
}
.card__zone svg { color: var(--muted); opacity: 0.7; }
.card__stats {
	display: flex;
	gap: 16px;
	color: var(--muted);
	font-size: 13px;
	margin-top: var(--space-2);
}
.card__stats span {
	display: inline-flex; align-items: center; gap: 6px;
}
.card__price {
	margin-top: var(--space-3);
	font-weight: 700;
	font-size: 18px;
	color: var(--ink);
}

/* Heart toggle (favorito) — Figma: círculo BLANCO con corazón en outline gris. */
.fav-toggle {
	position: absolute;
	top: 12px; right: 12px;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--muted);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	z-index: 2;
}
.fav-toggle svg { fill: none; stroke: currentColor; }
.fav-toggle:hover { transform: scale(1.08); background: #fff; color: var(--ink); }
.fav-toggle.is-active { background: #fff; color: var(--accent); }
.fav-toggle.is-active svg { fill: var(--accent); stroke: var(--accent); }

/* Variante con texto (botón "Guardar" del single propiedad) */
.fav-toggle--text {
	position: static;
	width: auto; height: auto;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 12px 22px;
	font-weight: 600;
	font-size: 14px;
	display: inline-flex; align-items: center; gap: 10px;
	backdrop-filter: none;
}
.fav-toggle--text:hover { transform: none; background: var(--bg-soft); border-color: var(--ink); color: var(--ink); }
.fav-toggle--text.is-active { background: var(--paper); border-color: var(--accent); color: var(--accent); }
.fav-toggle--text.is-active svg { fill: var(--accent); }
.fav-toggle--text .fav-toggle__label-saved { display: none; }
.fav-toggle--text.is-active .fav-toggle__label-save { display: none; }
.fav-toggle--text.is-active .fav-toggle__label-saved { display: inline; }

/* ============================================================
   BADGES (NUEVO / OPORTUNIDAD)
   ============================================================ */
.badge {
	position: absolute;
	top: 12px; left: 12px;
	display: inline-block;
	padding: 5px 11px;
	border-radius: var(--r-sm);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	z-index: 2;
}
.badge--nuevo       { background: var(--accent); color: #fff; }
.badge--oportunidad { background: var(--gold);   color: #fff; }
.badge--vendida     { background: var(--ink);    color: #fff; opacity: 0.85; }
.badge--status      { background: rgba(0,0,0,0.6); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.18); }

/* ============================================================
   GRIDS
   ============================================================ */
.grid { display: grid; }
.grid--cards-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid--cards-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }

@media (max-width: 1099px) {
	.grid--cards-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.grid--cards-3,
	.grid--cards-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   FORMS
   ============================================================ */
.field {
	display: flex; flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}
.field__label {
	font-size: 12px;
	color: var(--gold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(193, 41, 34, 0.1);
}
textarea { min-height: 120px; resize: vertical; }
::placeholder { color: rgba(126, 117, 118, 0.6); }

/* Newsletter pill form (home) */
.newsletter {
	display: flex; gap: 8px;
	background: var(--paper);
	border-radius: var(--r-pill);
	padding: 6px;
	box-shadow: var(--shadow-sm);
}
.newsletter input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 10px 18px;
}
.newsletter input:focus { box-shadow: none; }
.newsletter.is-success { background: rgba(45, 122, 79, 0.08); }

/* ============================================================
   PAGINATION
   ============================================================ */
.nav-links {
	display: flex; gap: 10px; justify-content: center; align-items: center;
	margin-top: var(--space-7);
}
.page-numbers {
	width: 36px; height: 36px;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink);
	font-weight: 600;
	font-size: 13px;
	transition: border-color var(--dur-fast) var(--ease);
}
.page-numbers:hover { border-color: var(--ink); }
.page-numbers.current { border-color: var(--ink); font-weight: 700; }
.page-numbers.dots { border: 0; background: transparent; color: var(--muted); }

/* ============================================================
   404 / empty
   ============================================================ */
.empty {
	background: var(--paper);
	border-radius: var(--r-xl);
	padding: 64px 32px;
	text-align: center;
	color: var(--muted);
	box-shadow: var(--shadow-sm);
}