/* Liberty — Base, layout y componentes. Mobile-first (390px), luego 768px / 1024px / 1440px.
   "Editorial luminoso": fondo claro por defecto, el carbón (.surface-dark) es acento
   estructural — header, footer y máx. 1 de cada 3 franjas de sección. */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-bg);
  color: var(--surface-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background var(--duration-base) var(--ease);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Tipografía ---------- */
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--surface-ink);
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-family: var(--font-body); font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--surface-gold);
  margin-bottom: var(--space-3);
}

.text-muted { color: var(--surface-ink-muted); }
.text-gold { color: var(--surface-gold); }

/* ---------- Layout — 3 anchos de contenedor ---------- */
/* Wide (por defecto): grillas, secciones, footer. */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Text: párrafos largos y descripciones — línea de lectura de 65-75 caracteres. */
.container--text {
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Full-bleed: 100% del viewport, sin márgenes — heros, franjas de sección.
   Rompe cualquier contenedor ancestro (técnica de "breakout"), así sirve
   también anidado dentro de un .container o .container--text. */
.full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: 0;
}

.section {
  padding-block: var(--space-12);
  background: var(--surface-bg);
  color: var(--surface-ink);
}
.section--raised { background: var(--surface-bg-raised); }
@media (min-width: 768px) {
  :root { --container-pad: var(--space-6); }
  .section { padding-block: var(--space-16); }
}

.hairline {
  border: 0;
  border-top: var(--hairline);
  margin-block: var(--space-6);
}

/* ---------- Reveal on scroll (fade leve) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Grillas escalonadas: los hijos reciben .reveal-item vía JS (main.js),
   así que si el JS no corre, nunca quedan en opacity:0 — se ven normal. */
.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9em 1.8em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-gold);
  color: var(--color-charcoal);
  border: 1px solid var(--color-gold);
}
.btn-primary:hover { background: var(--color-gold-soft); border-color: var(--color-gold-soft); }

.btn-ghost {
  background: transparent;
  color: var(--surface-gold);
  border: 1px solid var(--surface-line);
}
.btn-ghost:hover { border-color: var(--surface-gold); background: rgba(198, 163, 93, 0.08); }

.btn-whatsapp {
  background: transparent;
  color: var(--surface-ink);
  border: 1px solid var(--surface-line);
}
.btn-whatsapp:hover { border-color: var(--surface-gold); color: var(--surface-gold); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ---------- Header (carbón — acento estructural, siempre .surface-dark) ---------- */
/* Header inteligente: fixed (no reserva espacio en el flujo — el body
   compensa con padding-top medido por JS). Tres estados según scroll:
   is-top (transparente + scrim, arriba del todo), is-hidden (scroll
   abajo), is-compact (scroll arriba, carbón + blur, más bajo). */
body { padding-top: var(--header-height-top, 92px); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  color: var(--surface-ink);
  border-bottom: 1px solid transparent;
  transition: transform var(--duration-base) var(--ease),
    background var(--duration-base) var(--ease),
    border-color var(--duration-base) var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.5) 0%, rgba(10, 9, 8, 0) 100%);
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease);
}
.site-header.is-compact {
  background: rgba(27, 26, 24, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--surface-hairline-soft);
}
.site-header.is-compact::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-4);
  transition: padding-block var(--duration-base) var(--ease);
}
.site-header.is-compact .site-header__bar { padding-block: var(--space-2); }
.site-header.is-compact .site-logo { font-size: var(--text-lg); }
.site-header.is-compact .site-logo img { max-height: 30px; }
.site-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--surface-ink);
}
.site-logo span { color: var(--surface-gold); }
.site-logo img { max-height: 40px; width: auto; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  z-index: 60;
}
.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--surface-ink);
  transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav {
  position: fixed;
  inset: 0;
  background: var(--surface-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), visibility var(--duration-base);
  z-index: 55;
}
.primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav li { list-style: none; }
.primary-nav a {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--surface-ink);
}
.primary-nav a:hover { color: var(--surface-gold); }
.header-cta { display: none; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    flex-direction: row;
    background: none;
    gap: var(--space-8);
  }
  .primary-nav a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }
  .header-cta { display: inline-flex; }
}

/* ---------- Acceso flotante de WhatsApp ----------
   Siempre visible en móvil (el header no muestra su CTA ahí). En
   desktop el header ya tiene un acceso persistente, así que la
   burbuja solo aparece cuando el header está oculto (scroll hacia
   abajo) — el JS marca body.header-is-hidden en ese momento. */
.whatsapp-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 45;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-charcoal);
  border: 1px solid var(--color-gold-line-dark);
  box-shadow: var(--shadow-dark-md);
  transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease),
    opacity var(--duration-base) var(--ease), visibility var(--duration-base);
}
.whatsapp-fab svg { width: 24px; height: 24px; fill: var(--color-gold); }
.whatsapp-fab:hover { background: var(--color-charcoal-elevated); transform: translateY(-2px); }

@media (min-width: 1024px) {
  .whatsapp-fab { opacity: 0; visibility: hidden; }
  body.header-is-hidden .whatsapp-fab { opacity: 1; visibility: visible; }
}

/* ---------- Footer (carbón — acento estructural, siempre .surface-dark) ---------- */
.site-footer {
  padding-block: var(--space-12) var(--space-8);
}
.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}
.footer-brand .site-logo { display: inline-block; margin-bottom: var(--space-3); }
.footer-heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--surface-gold);
  margin-bottom: var(--space-3);
}
.footer-links a:hover { color: var(--surface-gold); }
.footer-links li { margin-bottom: var(--space-2); }
.footer-social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-pill);
}
.footer-social a:hover { background: rgba(198, 163, 93, 0.1); border-color: var(--surface-gold); }
.footer-social svg { width: 16px; height: 16px; fill: var(--surface-ink); }
.footer-social a:hover svg { fill: var(--surface-gold); }
.footer-bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--hairline-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--surface-ink-faint);
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ---------- Tarjeta de propiedad ---------- */
/* Foto protagonista, sombra suave, precio en dorado. Se adapta automáticamente
   si aparece dentro de una franja .surface-dark (hereda las variables de superficie). */
.property-card {
  display: block;
  background: var(--surface-card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--surface-shadow);
  transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--surface-shadow-hover); }
.property-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-bg-raised);
}
.property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.property-card:hover .property-card__media img { transform: scale(1.05); }
.property-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-gradient);
}
.property-card__status {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--overlay-dark-strong);
  color: var(--color-ivory);
}
.property-card__status.is-available { color: var(--status-available-on-dark); }
.property-card__status.is-sold { color: var(--status-sold-on-dark); }
.property-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
}
.property-card__badge--renta {
  background: var(--color-gold);
  color: var(--color-charcoal);
  font-weight: 600;
}
.property-card__badge--venta {
  background: var(--overlay-dark-strong);
  color: var(--color-ivory-muted);
}
.property-card__price {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold-soft);
}
.property-card__video-icon {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 28px;
  height: 28px;
  opacity: 0.85;
}
.property-card:hover .property-card__video-icon { opacity: 1; }
.property-card__video-icon svg { width: 100%; height: 100%; }
.property-card__video-icon circle { fill: var(--overlay-dark-strong); }
.property-card__video-icon path { fill: var(--color-ivory); }

.property-card__body { padding: var(--space-5); }
.property-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--surface-ink);
  margin-bottom: var(--space-1);
}
.property-card__sector {
  font-size: var(--text-sm);
  color: var(--surface-ink-muted);
  margin-bottom: var(--space-3);
}
.property-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--surface-ink-muted);
  padding-top: var(--space-3);
  border-top: var(--hairline-soft);
}
.property-card__meta strong { color: var(--surface-ink); font-weight: 600; }

.property-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .property-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .property-grid.property-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-ivory);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.08);
  animation: liberty-kenburns 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes liberty-kenburns {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media-el { animation: none; transform: none; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 13, 11, 0.2) 0%, rgba(14, 13, 11, 0.5) 55%, rgba(8, 7, 6, 0.92) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--space-16) var(--space-12);
}
.hero__content h1 {
  color: var(--surface-ink);
  max-width: 15ch;
}
.hero__content p {
  color: var(--surface-ink-muted);
  max-width: 42ch;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ---------- Hero — coreografía de entrada (tras la cortina) ---------- */
.hero__headline span {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: liberty-fade-up 0.5s var(--ease) forwards;
}
.hero__headline span:nth-child(1) { animation-delay: 1.2s; }
.hero__headline span:nth-child(2) { animation-delay: 1.35s; }
.hero__subhead {
  opacity: 0;
  transform: translateY(20px);
  animation: liberty-fade-up 0.45s var(--ease) forwards;
  animation-delay: 1.55s;
}
.hero__cta {
  opacity: 0;
  transform: translateY(20px);
  animation: liberty-fade-up 0.45s var(--ease) forwards;
  animation-delay: 1.75s;
}
/* Visitas repetidas en la sesión: sin cortina, sin espera — la coreografía
   corre igual pero desde el instante de carga. */
html.no-intro .hero__headline span:nth-child(1) { animation-delay: 0s; }
html.no-intro .hero__headline span:nth-child(2) { animation-delay: 0.15s; }
html.no-intro .hero__subhead { animation-delay: 0.35s; }
html.no-intro .hero__cta { animation-delay: 0.55s; }

@keyframes liberty-fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__headline span, .hero__subhead, .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 1024px) {
  .hero { min-height: 92vh; }
}

/* ---------- Sectores ---------- */
.sector-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .sector-grid { grid-template-columns: repeat(4, 1fr); }
}
.sector-card {
  display: block;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.sector-card:hover {
  border-color: var(--surface-line);
  transform: translateY(-2px);
}
.sector-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--surface-ink);
  margin-bottom: var(--space-1);
}
.sector-card__count {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-ink-muted);
}

/* ---------- Nosotros: fundadores y valores ---------- */
.founder-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .founder-grid { grid-template-columns: repeat(2, 1fr); }
}
.founder-card { text-align: center; }
.founder-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  box-shadow: var(--surface-shadow);
}
.founder-card__name { margin-bottom: var(--space-1); }
.founder-card__role {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-gold);
  margin-bottom: var(--space-3);
}

.value-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .value-grid { grid-template-columns: repeat(4, 1fr); }
}
.value-card {
  padding: var(--space-6);
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-md);
  text-align: center;
}
.value-card h4 { color: var(--surface-gold); margin-bottom: var(--space-2); }

/* ---------- Grilla de servicios (página Servicios) ---------- */
.service-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-md);
  transition: box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.service-card:hover {
  box-shadow: var(--surface-shadow-hover);
  transform: translateY(-2px);
}
.service-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.service-card p {
  color: var(--surface-ink-muted);
  flex-grow: 1;
  margin-bottom: var(--space-4);
}
.service-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--surface-gold);
  align-self: flex-start;
  border-bottom: 1px solid var(--surface-line);
  padding-bottom: 2px;
}
.service-card__cta:hover { color: var(--surface-ink); }

/* ---------- Blog — listado editorial ---------- */
.blog-feature {
  display: block;
  margin-bottom: var(--space-10);
}
@media (min-width: 900px) {
  .blog-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
}
.blog-feature__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
@media (min-width: 900px) { .blog-feature__media { margin-bottom: 0; } }
.blog-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); }
.blog-feature:hover .blog-feature__media img { transform: scale(1.03); }
.blog-feature__title { font-size: var(--text-3xl); margin-block: var(--space-2) var(--space-3); }

.blog-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid--single { grid-template-columns: 1fr; max-width: var(--container-text); margin-inline: auto; }
}
.blog-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  background: var(--surface-bg-raised);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__date {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-gold);
  margin-bottom: var(--space-2);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--surface-ink);
  margin-bottom: var(--space-2);
}
.blog-card__excerpt { color: var(--surface-ink-muted); font-size: var(--text-sm); }

/* ---------- Toggle Comprar / Rentar ---------- */
.operation-toggle {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-1);
  margin-bottom: var(--space-6);
  background: var(--surface-bg-raised);
  border-radius: var(--radius-pill);
}
.operation-toggle__chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--surface-ink-muted);
  padding: 0.55em 1.4em;
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.operation-toggle__chip:hover { color: var(--surface-ink); }
.operation-toggle__chip.is-active {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* ---------- Filtros de catálogo ---------- */
.property-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-2);
  border-bottom: var(--hairline-soft);
}
.property-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 150px;
  min-width: 130px;
}
.property-filter label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-ink-faint);
}
.property-filter select {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--surface-ink);
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-sm);
  padding: 0.6em 2em 0.6em 0.9em;
  background-image: linear-gradient(45deg, transparent 50%, var(--surface-ink-faint) 50%), linear-gradient(135deg, var(--surface-ink-faint) 50%, transparent 50%);
  background-position: right 1em top 55%, right 0.65em top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease);
}
.property-filter select:hover,
.property-filter select:focus { border-color: var(--surface-line); outline: none; }
.property-filters__reset {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-gold);
  border-bottom: 1px solid var(--surface-line);
  padding-bottom: 2px;
  align-self: center;
}
.property-filters__reset:hover { color: var(--surface-ink); }
.property-filters__empty {
  text-align: center;
  color: var(--surface-ink-muted);
  padding-block: var(--space-8);
}

/* ---------- Mapa de parroquias (filtro visual) ---------- */
.parroquia-map {
  margin-bottom: var(--space-8);
}
.parroquia-map__heading {
  text-align: center;
  max-width: var(--container-text);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.parroquia-map__subtitle { margin-top: var(--space-2); }
.parroquia-map__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .parroquia-map__layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    align-items: stretch;
  }
}
.parroquia-map__viz {
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  min-height: 50vh;
}
@media (min-width: 768px) {
  .parroquia-map__viz { min-height: 70vh; max-height: 80vh; }
}
.parroquia-map__svg {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
  overflow: visible;
}

/* Capa de fondo: duplica los mismos paths para que cualquier hueco real
   entre parroquias vecinas muestre este tono de base en vez del marfil
   de la página — resuelve la fragmentación sin tocar la geometría OSM. */
.parroquia-map__landmass path {
  fill: var(--color-parroquia-empty);
  stroke: var(--color-parroquia-empty);
  stroke-width: 14;
  stroke-linejoin: round;
}

/* Escala centrada en el propio polígono: traslada al punto propio
   (--ox/--oy, mismo dato que ya usan las etiquetas), escala, y deshace
   la traslación — evita transform-box:fill-box (soporte inconsistente
   en SVG) sin perder el centrado. */
.parroquia-map__region {
  --ox: 500;
  --oy: 332;
  stroke: var(--color-charcoal);
  stroke-width: 1;
  cursor: pointer;
  transform: translate(var(--ox), var(--oy)) scale(1) translate(calc(-1 * var(--ox)), calc(-1 * var(--oy)));
  transition: fill var(--duration-fast) var(--ease),
    stroke-width var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
/* Foco de teclado vía stroke, no outline: outline sobre un <path> no
   rectangular pinta un artefacto sólido (bug de renderizado en Chromium,
   reproducido incluso con GPU real, no solo headless) en vez de un
   simple borde — stroke sigue la geometría real del polígono. */
.parroquia-map__region:focus,
.parroquia-map__region:focus-visible {
  outline: none;
}
.parroquia-map__region:focus-visible {
  stroke: var(--surface-gold);
  stroke-width: 3;
}
.parroquia-map__region.is-empty {
  fill: var(--color-parroquia-empty);
  stroke: var(--color-parroquia-empty-line);
}
.parroquia-map__region.has-properties {
  fill: var(--color-gold);
  stroke: var(--color-charcoal);
}
/* :hover puro además de .is-hovered (JS) — si el JS no corre, el mapa
   igual da feedback visual básico al pasar el mouse. */
.parroquia-map__region.is-empty:hover,
.parroquia-map__region.is-empty.is-hovered {
  fill: var(--color-parroquia-empty-hover);
}
.parroquia-map__region.has-properties:hover,
.parroquia-map__region.has-properties.is-hovered {
  fill: var(--color-charcoal);
  stroke: var(--color-gold);
  transform: translate(var(--ox), var(--oy)) scale(1.02) translate(calc(-1 * var(--ox)), calc(-1 * var(--oy)));
}
.parroquia-map__region.is-active {
  fill: var(--color-gold-deep);
  stroke: var(--color-charcoal);
  stroke-width: 2;
}
.parroquia-map__region.is-active.has-properties.is-hovered { fill: var(--color-charcoal); }

/* ---------- Etiquetas y líneas guía ---------- */
.parroquia-map__labels { pointer-events: none; }
/* font-size en unidades de viewBox (sin "px"): así el texto escala
   proporcional al mapa igual que el stroke de los paths — con px fijo
   quedaba diminuto al agrandar el bloque del mapa (Fase T). El valor
   real de cada etiqueta lo pone el style="" inline por parroquia (Fase
   U — varía según cuánto nombre entra en cada polígono); esto es solo
   el fallback si por lo que sea faltara ese inline. */
.parroquia-map__label {
  font-family: var(--font-body);
  font-size: 16;
  font-weight: 500;
  fill: var(--color-ink);
  dominant-baseline: middle;
  transition: fill var(--duration-fast) var(--ease);
}
/* Halo marfil detrás del texto (paint-order: stroke) en las que tienen
   propiedades — sin esto, el texto se fundía con el relleno dorado del
   propio polígono (Sinincay, San Sebastián, Baños). Sigue la letra, no
   una caja, así no compite con las líneas guía vecinas. Las inactivas
   usan --color-ink (más oscuro que ink-muted, que se leía demasiado
   tenue sobre el gris de relleno) sin halo ni negrita — la jerarquía
   activa/inactiva la da sobre todo el contraste oro-vs-gris de fondo,
   no el color del texto. */
.parroquia-map__label-group.has-properties .parroquia-map__label {
  fill: var(--color-charcoal);
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--color-paper);
  stroke-width: 4;
  stroke-linejoin: round;
}
.parroquia-map__label-group.is-hovered .parroquia-map__label,
.parroquia-map__label-group.is-active .parroquia-map__label {
  fill: var(--color-gold-deep);
  font-weight: 700;
}
.parroquia-map__label-count {
  fill: var(--color-gold-deep);
  font-weight: 700;
}
.parroquia-map__leader {
  stroke: var(--color-ink-faint);
  stroke-width: 0.75;
  fill: none;
}
.parroquia-map__leader-dot {
  fill: var(--color-ink-faint);
}
.parroquia-map__label-group.has-properties .parroquia-map__leader,
.parroquia-map__label-group.has-properties .parroquia-map__leader-dot {
  stroke: var(--color-gold-deep);
  fill: var(--color-gold-deep);
}
/* Móvil: en desktop las 23 llevan nombre siempre (pedido explícito de
   Esteban), pero el clúster urbano apretado en 390px sí se satura con
   los 17 nombres del núcleo a la vez — esas colapsan a "solo panel"
   si quedan inactivas. Las grandes/periurbanas aisladas (.core=false)
   entran bien igual en móvil y no se tocan. */
@media (max-width: 767px) {
  .parroquia-map__label-group--core:not(.is-active) { display: none; }
}

/* Entrada escalonada: mismo mecanismo de .reveal-stagger (main.js), con
   escala en vez de desplazamiento — "el mapa se dibuja" al llegar. */
.parroquia-map__regions.reveal-stagger .reveal-item {
  opacity: 0;
  transform: translate(var(--ox), var(--oy)) scale(0.82) translate(calc(-1 * var(--ox)), calc(-1 * var(--oy)));
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.parroquia-map__regions.reveal-stagger .reveal-item.is-visible {
  opacity: 1;
  transform: translate(var(--ox), var(--oy)) scale(1) translate(calc(-1 * var(--ox)), calc(-1 * var(--oy)));
}

/* ---------- Panel lateral (buscador + lista sincronizada) ---------- */
.parroquia-map__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.parroquia-map__panel-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.parroquia-map__panel-head label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-ink-faint);
}
.parroquia-map__search {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--surface-ink);
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-sm);
  padding: 0.65em 0.9em;
}
.parroquia-map__search:focus { border-color: var(--surface-gold); outline: none; }

.parroquia-map__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 380px;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .parroquia-map__list { flex: 1; max-height: none; }
}
.parroquia-map__list-item.is-search-hidden { display: none; }
.parroquia-map__list-item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.55em 0.75em;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--surface-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.parroquia-map__list-item.is-empty button { color: var(--surface-ink-faint); }
.parroquia-map__list-item button:hover,
.parroquia-map__list-item.is-hovered button {
  background: var(--surface-bg-raised);
}
.parroquia-map__list-item.is-active button {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}
.parroquia-map__list-count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--surface-ink-faint);
  flex-shrink: 0;
}
.parroquia-map__list-item.is-active .parroquia-map__list-count { color: var(--color-gold-soft); }
.parroquia-map__list-empty-msg {
  font-size: var(--text-sm);
  color: var(--surface-ink-faint);
  padding: var(--space-2) 0.75em;
}

/* Móvil: panel como fila de chips tocables debajo del mapa, no lista vertical. */
@media (max-width: 767px) {
  .parroquia-map__viz { padding: var(--space-2); }
  .parroquia-map__list {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
  }
  .parroquia-map__list-item button {
    width: auto;
    border-radius: var(--radius-pill);
    background: var(--surface-bg-raised);
    padding: 0.5em 0.9em;
  }
  .parroquia-map__list-item.is-empty button { opacity: 0.7; }
}

/* ---------- Transición suave de filtrado (grilla de propiedades) ---------- */
.property-grid__item {
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.property-grid__item.is-entering,
.property-grid__item.is-leaving {
  opacity: 0;
  transform: scale(0.96);
}
.property-grid__item.is-hidden { display: none; }
.property-grid { margin-top: var(--space-8); }

/* ---------- Ficha de propiedad — galería ---------- */
.property-gallery {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
}
.property-gallery__main {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
}
.property-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.property-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.property-gallery__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease);
}
.property-gallery__thumb:hover { opacity: 1; }
.property-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .property-gallery { grid-template-columns: 2fr 1fr; align-items: stretch; }
  .property-gallery__main { aspect-ratio: auto; height: 70vh; }
  .property-gallery__thumbs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; height: 70vh; overflow-y: auto; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 7, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__image {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-ivory);
  padding: var(--space-2);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-ivory);
  padding: var(--space-3);
}
.lightbox__nav:hover { color: var(--color-gold); }
.lightbox__prev { left: var(--space-2); }
.lightbox__next { right: var(--space-2); }
.lightbox__counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-ivory-muted);
  font-size: var(--text-sm);
}
@media (min-width: 768px) {
  .lightbox__nav { font-size: 3rem; }
}

/* ---------- Datos clave ---------- */
.property-info-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--hairline-soft);
}
.property-info-bar__title { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.property-info-bar__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--surface-gold);
  margin-top: var(--space-2);
}
.property-info-bar__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.property-info-bar .stat { display: flex; flex-direction: column; }
.property-info-bar .stat strong { font-size: var(--text-xl); font-family: var(--font-display); color: var(--surface-ink); }
.property-info-bar .stat span { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--surface-ink-muted); }
.property-info-bar__cta { white-space: nowrap; }

/* ---------- Video de propiedad ---------- */
/* Video de la propiedad — YouTube es horizontal (16:9, el iframe de
   YouTube siempre respeta esa proporción, por eso la caja fija +
   overflow:hidden no lo recorta). TikTok es vertical: forzarlo a la
   misma caja de 16:9 es justo lo que lo cortaba. El modificador
   --vertical (agregado en single-properties.php cuando la URL es de
   TikTok) cambia a un contenedor angosto y centrado que deja que el
   embed oficial calcule su propio alto (min-width:325px,
   max-width:605px inline en el blockquote; el iframe fija su alto
   real vía JS) — nada de aspect-ratio ni overflow:hidden ahí. */
.property-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-bg-raised);
}
.property-video iframe,
.property-video blockquote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.property-video--vertical {
  display: flex;
  justify-content: center;
  aspect-ratio: auto;
  max-width: 400px;
  margin-inline: auto;
  overflow: visible;
  background: none;
  border-radius: 0;
}
.property-video--vertical iframe,
.property-video--vertical blockquote {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ---------- Mapa del sector ---------- */
.property-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--hairline-soft);
}
@media (min-width: 768px) { .property-map { aspect-ratio: 21 / 9; } }
.property-map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Formulario de búsqueda (404 / resultados) ---------- */
.search-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}
.search-form__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--surface-ink);
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
}
.search-form__input:focus { border-color: var(--surface-gold); outline: none; }

/* ---------- Paginación (blog) ---------- */
.page-numbers {
  display: inline-flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-numbers li { display: inline-flex; }
a.page-numbers,
span.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--surface-ink-muted);
  border: var(--hairline-soft);
}
a.page-numbers:hover { border-color: var(--surface-gold); color: var(--surface-gold); }
.page-numbers.current { background: var(--color-charcoal); color: var(--color-ivory); border-color: var(--color-charcoal); }

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-form__field label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface-ink-faint);
}
.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--surface-ink);
  background: var(--surface-card-bg);
  border: var(--hairline-soft);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  resize: vertical;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus { border-color: var(--surface-gold); outline: none; }
.contact-map-wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info p { margin: 0; }

/* ---------- Barra fija móvil (ficha de propiedad) ---------- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--container-pad);
  background: rgba(27, 26, 24, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-gold-line-dark);
}
.mobile-cta-bar__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold);
}
@media (max-width: 1023px) {
  body.single-properties { padding-bottom: 72px; }
  .mobile-cta-bar { display: flex; }
}

/* ---------- Fallback genérico (contenido estándar de WP mientras no hay plantillas completas) ---------- */
.entry {
  max-width: var(--container-text);
  margin-inline: auto;
}
.entry h2, .entry h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.entry p { margin-bottom: var(--space-4); color: var(--surface-ink-muted); }
.entry img { border-radius: var(--radius-md); margin-block: var(--space-6); }
.entry a { color: var(--surface-gold); border-bottom: 1px solid var(--surface-line); }
.entry ul {
  list-style: disc;
  padding-left: 1.25em;
  margin-bottom: var(--space-4);
}
.entry ul li { margin-bottom: var(--space-2); color: var(--surface-ink-muted); }
.entry .tiktok-embed,
.entry iframe[src*="tiktok.com"] {
  margin-inline: auto !important;
  margin-block: var(--space-6) !important;
}
.entry blockquote.instagram-media { margin-inline: auto !important; }
.page-hero {
  padding-block: var(--space-12) var(--space-8);
  text-align: center;
}

/* ---------- Cortina de marca (home, primera visita de la sesión) ----------
   El único trabajo real de JS es el gate de sessionStorage en header.php
   (agrega .no-intro a <html> en visitas repetidas). El dibujo del ícono,
   el fundido del wordmark y el levantamiento de la cortina son animaciones
   CSS que corren solas al pintarse el elemento — si el JS fallara por
   completo, la cortina se levanta igual a los 1.2s (nunca bloquea nada). */
.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--color-charcoal);
  animation: liberty-curtain-lift 1.2s var(--ease) forwards;
}
html.no-intro .intro-curtain { display: none; }

.intro-curtain__icon { overflow: visible; }
.intro-curtain__icon path {
  fill: none;
  stroke: #d6a841;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: liberty-draw 0.55s ease-out forwards;
}
.intro-curtain__icon path.is-green { stroke: #73a023; }
.intro-curtain__icon path:nth-child(2) { animation-delay: 0.25s; animation-duration: 0.45s; }
.intro-curtain__icon path:nth-child(3) { animation-delay: 0.31s; animation-duration: 0.45s; }
.intro-curtain__icon path:nth-child(4) { animation-delay: 0.37s; animation-duration: 0.45s; }

.intro-curtain__wordmark {
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  animation: liberty-fade-up 0.3s var(--ease) forwards;
  animation-delay: 0.7s;
}
.intro-curtain__brand {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.intro-curtain__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8fae5c;
  margin-top: 0.4em;
}

@keyframes liberty-draw { to { stroke-dashoffset: 0; } }
@keyframes liberty-curtain-lift {
  0%, 79% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-curtain { display: none; }
}