/* =============================================================
   alexmarroig — component styles (BEM blocks).
   -------------------------------------------------------------
   Per .claude/skills/alexmarroig-css-system:
   - style.css holds :root design tokens + minimal reset + base
     typography. THIS file holds COMPONENT styles (BEM blocks),
     one section per block, mobile-first responsive (min-width).
   - All values reference CSS custom properties from :root —
     never hardcode hex codes or font families here.
   - No utility classes (no Tailwind, no atomic CSS).

   Visual source of truth: docs/mockups/home.html + styles.css.
   Class names ported under BEM-strict naming.
   ============================================================= */


/* =============================================================
   Section modifiers (ported from docs/mockups/styles.css)
   Used by front-page.php and other page templates to tint
   sections + add the small editorial Arcilla rule at the top.
   ============================================================= */
.section--soft {
  background-color: var(--bg-soft);
}

.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark .display-text {
  color: var(--text-on-dark);
}
.section--dark .eyebrow {
  color: var(--accent-soft);
}

/* Small centered Arcilla rule at the top of a section.
   Marks the visual break between major editorial blocks. */
.section--with-rule::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background-color: var(--accent);
  margin: 0 auto clamp(var(--space-8), 5vw, var(--space-12));
}
.section--dark.section--with-rule::before {
  background-color: var(--accent-soft);
}

/* D → E junction (Propiedades → Servicios Legales) deserves extra
   breathing room: the property grid is dense, and the dark Servicios
   Legales section reads better with a wider lead-in. Targeted via
   IDs so other sections keep their default --space-12/--space-24
   clamp from .section. */
#propiedades {
  padding-bottom: var(--space-24);
}
#servicios-legales {
  padding-top: var(--space-24);
}
@media (min-width: 1024px) {
  #propiedades {
    padding-bottom: var(--space-32);
  }
  #servicios-legales {
    padding-top: var(--space-32);
  }
}


/* =============================================================
   Button
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  padding: 16px 32px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              transform var(--transition-normal);
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn--primary {
  background-color: var(--accent);
  color: var(--color-crema-clara);
  border-color: var(--accent);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--accent-hover);
  color: var(--color-crema-clara);
  border-color: var(--accent-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--text-primary);
  color: var(--bg-page);
  border-color: var(--text-primary);
}

/* Inverted ghost when nested in a dark section. */
.section--dark .btn--ghost {
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}
.section--dark .btn--ghost:hover,
.section--dark .btn--ghost:focus-visible {
  background-color: var(--text-on-dark);
  color: var(--bg-dark);
}


/* =============================================================
   Brand mark (logo + wordmark + tagline)
   ============================================================= */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 0;
  color: inherit;
}
.brand:hover,
.brand:focus-visible {
  color: inherit;
  border-bottom: 0;
}

.brand__mark {
  display: inline-block;
  width: 34px;
  height: 38px;
  color: var(--accent);
  flex-shrink: 0;
  transition: width var(--transition-normal), height var(--transition-normal);
}
.brand__mark svg { display: block; width: 100%; height: 100%; }

.brand__text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.brand__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: font-size var(--transition-normal);
}
.brand__tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  opacity: 0.7;
  margin-top: 2px;
}


/* Custom Logo (Apariencia → Personalizar → Identidad del sitio).
   When a logo is set, header.php prints WP's the_custom_logo() in
   place of the .brand block. These rules mirror the .brand layout
   so the sticky-shrink, alignment and visual rhythm stay identical. */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  color: inherit;
}
.custom-logo-link:hover,
.custom-logo-link:focus-visible {
  color: inherit;
  border-bottom: 0;
}
.custom-logo {
  display: block;
  height: auto;
  width: auto;
  transition: max-height var(--transition-normal);
}
/* Mobile-only height cap so the logo never overflows the header on
   narrow screens. Desktop renders the image at its natural size. */
@media (max-width: 767px) {
  .custom-logo {
    max-height: 44px;
  }
  .site-header--scrolled .custom-logo {
    max-height: 32px;
  }
}


/* =============================================================
   Site header (sticky, shrinks on scroll via .site-header--scrolled)
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(222, 219, 204, 0.92); /* mares-claro @ 0.92 — translucent */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--transition-normal);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: 20px;
  padding-bottom: 20px;
  transition: padding var(--transition-normal);
}

/* Scrolled state: tighter padding, smaller wordmark + mark. */
.site-header--scrolled .site-header__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-header--scrolled .brand__mark {
  width: 26px;
  height: 30px;
}
.site-header--scrolled .brand__wordmark {
  font-size: 1rem;
}


/* =============================================================
   Site nav (primary menu)
   ============================================================= */
.site-nav__list,
.site-nav .menu { /* fallback if WP outputs .menu */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-nav__list li,
.site-nav .menu li {
  display: inline-flex;
}
.site-nav__list a,
.site-nav .menu a {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__list .current-menu-item > a,
.site-nav .menu a:hover,
.site-nav .menu a:focus-visible,
.site-nav .menu .current-menu-item > a {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* -------------------------------------------------------------
   Primary nav dropdowns
   -------------------------------------------------------------
   Parent items with a <ul class="sub-menu"> child render an
   editorial dropdown:
     - Desktop: hover (or focus-within) opens; aria-expanded="true"
       on the parent link (set by main.js on click of placeholder
       "#" parents) opens too.
     - Mobile (<768px): the mobile media query at the bottom of
       this file flips the dropdown to an inline accordion driven
       purely by aria-expanded.
   The CSS targets `.menu-item-has-children` and `.sub-menu` —
   both emitted by WP's default Walker_Nav_Menu, so no custom
   walker is needed.
   ============================================================= */
.site-nav__list .menu-item-has-children,
.site-nav .menu .menu-item-has-children {
  position: relative;
}
.site-nav__list .menu-item-has-children > a::after,
.site-nav .menu .menu-item-has-children > a::after {
  content: '\25BE'; /* ▾ */
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.75em;
  line-height: 1;
  transition: transform var(--transition-fast);
}
.site-nav__list .menu-item-has-children > a[aria-expanded="true"]::after,
.site-nav .menu .menu-item-has-children > a[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.site-nav__list .sub-menu,
.site-nav .menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--bg-page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
  z-index: 100;
}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu,
.site-nav__list .menu-item-has-children > a[aria-expanded="true"] + .sub-menu,
.site-nav .menu .menu-item-has-children:hover > .sub-menu,
.site-nav .menu .menu-item-has-children:focus-within > .sub-menu,
.site-nav .menu .menu-item-has-children > a[aria-expanded="true"] + .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__list .sub-menu li,
.site-nav .menu .sub-menu li {
  display: block;
  width: 100%;
}
.site-nav__list .sub-menu a,
.site-nav .menu .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-5, 1.25rem);
  border-bottom: 0;
  white-space: nowrap;
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible,
.site-nav .menu .sub-menu a:hover,
.site-nav .menu .sub-menu a:focus-visible {
  background-color: transparent;
  color: var(--accent);
  border-bottom-color: transparent;
}


/* =============================================================
   Mobile nav toggle (hamburger)
   ============================================================= */
.site-nav-toggle {
  display: none; /* shown on mobile via media query */
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
}
.site-nav-toggle::before,
.site-nav-toggle::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--transition-fast), top var(--transition-fast);
}
.site-nav-toggle::before { top: 14px; }
.site-nav-toggle::after  { top: 24px; }

.site-nav-toggle[aria-expanded="true"]::before {
  top: 19px;
  transform: rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"]::after {
  top: 19px;
  transform: rotate(-45deg);
}


/* =============================================================
   Site footer (functional only — contact, legal, copyright)
   ============================================================= */
.site-footer {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--space-16) 0 var(--space-8);
}
.site-footer a {
  color: var(--text-on-dark);
  border-bottom-color: transparent;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-2);
}
.site-footer__brand {
  display: inline-block;
  margin: 0 0 var(--space-2);
  border-bottom: 0;
}
.site-footer__brand:hover,
.site-footer__brand:focus-visible {
  border-bottom: 0;
}
.site-footer__logo {
  display: block;
  height: auto;
  max-height: 56px;
  width: auto;
}
.site-footer__tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-base);
  opacity: 0.75;
  margin: 0 0 var(--space-6);
}
.site-footer__creds {
  font-size: var(--fs-sm);
  opacity: 0.7;
  line-height: var(--lh-relaxed);
  margin: 0;
}

.site-footer__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 var(--space-4);
}

.site-footer__address {
  font-style: normal;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__address-line { display: block; }
.site-footer__link { display: inline-block; }
.site-footer__hours { display: block; opacity: 0.75; }

.site-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__menu li {
  margin-bottom: var(--space-1);
}

/* Funding-attribution band (Kit Digital / NextGenerationEU, attachment 151).
   Full container width above the legal line; the source JPG carries its own
   light background so it reads as a band over the dark Tierra footer. */
.site-footer__brand-band {
  padding-block: var(--space-6);
  text-align: center;
}
.site-footer__brand-band-img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin-inline: auto;
}

/* Legal line — copyright (left) + studio attribution (right).
   Mobile-first: stacked; switches to a space-between row at ≥1024px. */
.site-footer__legal-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(222, 219, 204, 0.15);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.site-footer__copyright {
  opacity: 0.7;
}
.site-footer__credits {
  opacity: 0.7;
}
/* Discreet, not the Arcilla accent — slightly brighter crema than the
   surrounding text, with a subtle underline. */
.site-footer__credits a {
  color: var(--color-crema-clara);
  border-bottom: 1px solid rgba(245, 241, 232, 0.4);
}
.site-footer__credits a:hover,
.site-footer__credits a:focus-visible {
  color: var(--color-crema-clara);
  border-bottom-color: var(--color-crema-clara);
  opacity: 1;
}


/* =============================================================
   Hero (block-hero.php)
   ============================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(52, 50, 42, 0.32); /* tierra-oscura @ 0.32 — readability overlay */
}

/* Placeholder block when no image arg is passed (dev/setup phase). */
.hero__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-color: #BDB9A7;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-6);
  overflow: hidden;
  position: relative;
}
.hero__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49.6%, rgba(0,0,0,0.06) 49.7%, rgba(0,0,0,0.06) 50.3%, transparent 50.4%),
    linear-gradient(45deg,  transparent 49.6%, rgba(0,0,0,0.06) 49.7%, rgba(0,0,0,0.06) 50.3%, transparent 50.4%);
  pointer-events: none;
}
.hero__placeholder span {
  position: relative;
  z-index: 1;
  padding: 6px 12px;
  background-color: rgba(245, 241, 232, 0.85);
  border-radius: var(--radius-sm);
}

/* .hero__content sits inside .container and is LEFT-ALIGNED there:
   no auto margins, just a max-width cap. Its left edge therefore
   aligns with the brand wordmark in the header (same .container
   wrapper, same --container-padding). */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 880px;
  color: var(--color-crema-clara);
  text-align: left;
}
.hero__eyebrow {
  color: var(--accent-soft);
}
/* Hero title — large display type. After the SEO refactor this
   often renders as a <p> (the eyebrow takes the page <h1>), so
   the heading-like properties must be explicit instead of inherited. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 5rem);   /* 32px @ 375 → 80px @ ≥1230 */
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  color: var(--color-crema-clara);
  margin: 0 0 var(--space-6);
}
.hero__subtitle {
  color: var(--color-crema-clara);
  opacity: 0.92;
  margin-bottom: var(--space-12);
}
.hero__cta {
  margin-top: var(--space-2);
}

/* Secondary hero for internal pages — same layout language but
   editorially shorter (introduces, doesn't impact). Caps at
   ~35vh on tall viewports with a hard 320px floor. */
.hero--secondary {
  min-height: max(320px, 35vh);
  padding-top: clamp(var(--space-12), 6vw, var(--space-16));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
}
.hero--secondary .hero__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
}

/* Chapter-style hero — eyebrow-only minimal divider. Page's <h1>
   lives in the section below. Vertically and horizontally centered;
   even shorter than --secondary. */
.hero--chapter {
  min-height: max(240px, 25vh);
  padding-top: clamp(var(--space-12), 6vw, var(--space-16));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
}
.hero--chapter .container {
  display: flex;
  justify-content: center;
}
.hero--chapter .hero__content {
  max-width: none;
  text-align: center;
}
.hero--chapter .hero__eyebrow {
  color: var(--color-mares-claro);
  border-bottom-color: var(--color-mares-claro);
}
/* Deeper readability overlay when the hero is reduced to a single label. */
.hero--chapter .hero__media::after {
  background-color: rgba(52, 50, 42, 0.5);
}


/* =============================================================
   Claim transition (block-claim-transition.php)
   Editorial pause between hero and the next section. Marés-claro
   band, italic Lora, centered. Not navigable — purely a visual
   breath that carries the brand claim.
   ============================================================= */
.claim-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-12) var(--container-padding);
  background-color: var(--color-mares-claro);
  color: var(--text-primary);
  text-align: center;
}
.claim-transition__text {
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.claim-transition__text em {
  font-style: italic;
}

@media (min-width: 768px) {
  .claim-transition {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}


/* =============================================================
   Steps (block-4-steps.php)
   ============================================================= */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.steps__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 600;
}
.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;        /* mobile */
  gap: var(--space-8);
}
.steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.steps__number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  color: var(--accent-soft);
}
.steps__item-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
.steps__item-text {
  font-size: var(--fs-base);
  opacity: 0.88;
  margin: 0;
  max-width: none;
}


/* =============================================================
   Narrative + values (block-narrative-values.php)
   Editorial intro + 4-item horizontal value strip. Replaces the
   older 4-steps block on the home Section B.
   ============================================================= */
.narrative-values {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.narrative-values__eyebrow {
  margin-bottom: var(--space-2);
}
.narrative-values__title {
  margin: 0;
  max-width: 26ch;
}
.narrative-values__intro {
  max-width: 70ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}
.narrative-values__intro p {
  margin: 0 0 var(--space-4);
  max-width: none;
}
.narrative-values__intro p:last-child {
  margin-bottom: 0;
}
.narrative-values__list {
  list-style: none;
  margin: 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.narrative-values__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.narrative-values__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.narrative-values__description {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  opacity: 0.85;
  max-width: none;
}


/* =============================================================
   Services list (block-services-list.php)
   Typography-led services block with optional editorial line
   icon above the title (24×24 Lucide-style, --accent colour).
   Items are visually separated by a top rule (var(--rule);
   --accent-soft tint on .section--dark).
   ============================================================= */
.services {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.services__eyebrow {
  /* inherits .eyebrow base from style.css */
  margin-bottom: var(--space-2);
}
.services__title {
  margin: 0;
  max-width: 26ch;
}
.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;        /* mobile */
  gap: var(--space-6);
}
.services__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}
.services__icon {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
}
.services__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
/* Icon stays Arcilla even inside the dark Section E. */
.section--dark .services__icon {
  color: var(--accent-soft);
}
.services__item-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;               /* 26px — matches mockup .service__title */
  line-height: var(--lh-snug);
  margin: 0;
}
.services__item-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: none;
}
/* Per-item CTA: a discreet uppercase text-arrow link under each
   service. Used on Home Real Estate (each card links to its own
   service page). Not the prominent Arcilla button — intentionally
   subdued so the three siblings sit side-by-side without competing
   with the section-level CTA below. */
.services__item-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4em;
  margin-top: var(--space-3);
  padding-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.services__item-cta:hover,
.services__item-cta:focus-visible {
  gap: 0.7em;
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.services__item-cta-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}
.services__cta {
  align-self: flex-start;
}

/* On dark sections the rule above each item softens to a Marés-claro tint. */
.section--dark .services__item {
  border-top-color: rgba(222, 219, 204, 0.18);
}


/* =============================================================
   CTA strip (block-cta-strip.php)
   Centered editorial band: title + optional subtitle + a single
   primary CTA. Default bg = Crema clara; --dark variant = Tierra
   oscura with inverted text.
   ============================================================= */
.cta-strip {
  background-color: var(--bg-soft);
  padding: var(--space-16) 0;
  text-align: center;
}
/* Cream variant — default. Marble texture is injected as an inline
   `background-image` on the section by block-cta-strip.php. No CSS
   rule on `.cta-strip--cream` so the inline background isn't
   overridden / blended away — the marble shows raw on top of the
   base `.cta-strip { background-color: var(--bg-soft) }`. If we
   later want cover/no-repeat behaviour, add it on the inline style
   in PHP or reintroduce a rule here. */

/* Accent variant — Arcilla band with Crema-clara typography and a
   Tierra-oscura inverted button. Used for "alternative path" CTAs
   (e.g. "¿Prefieres llamarnos?" on /contacto/). */
.cta-strip--accent {
  background-color: var(--accent);
  color: var(--color-crema-clara);
}
.cta-strip--accent .cta-strip__title,
.cta-strip--accent .cta-strip__subtitle {
  color: var(--color-crema-clara);
}
.cta-strip--accent .btn--primary {
  background-color: var(--color-tierra-oscura);
  border-color: var(--color-tierra-oscura);
  color: var(--color-crema-clara);
}
/* Hover/focus: invert to a Crema-clara pill with Tierra-oscura label
   — high-contrast pop against the surrounding Arcilla band. */
.cta-strip--accent .btn--primary:hover,
.cta-strip--accent .btn--primary:focus-visible {
  background-color: var(--color-crema-clara);
  border-color: var(--color-crema-clara);
  color: var(--color-tierra-oscura);
}
.cta-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.cta-strip__title {
  margin: 0;
  max-width: 28ch;
}
.cta-strip__subtitle {
  margin: 0;
  max-width: 50ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  opacity: 0.85;
}
.cta-strip__cta {
  margin-top: var(--space-2);
}


/* =============================================================
   Contact form (block-contact-form.php)
   Editorial intro left + Contact Form 7 right (stacks vertically
   on mobile). CF7 form output is styled to match the brand
   (Funnel Display labels uppercase, body-font inputs with
   subtle underline borders, Arcilla submit button).
   ============================================================= */
.contact-form__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
.contact-form__main {
  /* Wraps the text + form on the LEFT column on desktop. Stacks them
     vertically with editorial breathing space. */
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.contact-form__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact-form__photo {
  margin: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--rule);
}
.contact-form__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.contact-form__title {
  margin: 0;
  max-width: 28ch;
}
.contact-form__subtitle {
  margin: 0;
}
.contact-form__subtitle p {
  margin: 0 0 var(--space-4);
  max-width: none;
}
.contact-form__subtitle p:last-child {
  margin-bottom: 0;
}
/* ---------- Contact Form 7 output ---------- */
.contact-form .wpcf7 {
  width: 100%;
}
.contact-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-form .wpcf7-form > p {
  margin: 0;
}
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form input[type="url"],
.contact-form .wpcf7-form input[type="number"],
.contact-form .wpcf7-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(52, 50, 42, 0.2);   /* tierra-oscura @ 0.2 */
  padding: var(--space-3) 0;
  outline: none;
  border-radius: 0;
  transition: border-color var(--transition-fast);
}
.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form textarea:focus {
  border-bottom-color: var(--accent);               /* arcilla on focus */
}
/* Placeholder doubles as the field's visible label: uppercase editorial
   typography (Funnel Display) so the input bar is the only visible UI
   element. When the user types, the placeholder disappears and their
   text shows in the regular body font (Lora at --fs-base). */
.contact-form .wpcf7-form input::placeholder,
.contact-form .wpcf7-form textarea::placeholder {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.5;
}
.contact-form .wpcf7-form textarea {
  min-height: calc(3em * var(--lh-relaxed));        /* 3 lines minimum */
  resize: vertical;
  font-family: var(--font-body);
}

/* GDPR / acceptance checkbox row */
.contact-form .wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
}
.contact-form .wpcf7-acceptance .wpcf7-list-item label {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
}
.contact-form .wpcf7-form input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Submit button — matches .btn--primary exactly. */
.contact-form .wpcf7-form input[type="submit"] {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  padding: 16px 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background-color: var(--accent);
  color: var(--color-crema-clara);
  cursor: pointer;
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              transform var(--transition-normal);
}
.contact-form .wpcf7-form input[type="submit"]:hover,
.contact-form .wpcf7-form input[type="submit"]:focus-visible {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

/* Validation / response messages */
.contact-form .wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--accent);
  margin-top: var(--space-2);
}
.contact-form .wpcf7-response-output {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.contact-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--accent);
}
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--accent);
}


/* =============================================================
   Section head (eyebrow + h2 + optional right-side label)
   Shared by Section D (Propiedades) and other sections that
   need a structured editorial header. Mobile-first stack;
   horizontal split at ≥768px.
   ============================================================= */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.section-head h2,
.section-head .display-text {
  max-width: 26ch;
  margin: 0;
}


/* =============================================================
   Properties group + grid + card (block-property-grid.php,
   block-property-card.php).
   Properties stay RECTANGULAR by design — brandbook pp. 57-58,
   60-61 + decisions-log treat property photography as honest
   rectangles. No pentagon mask here.
   ============================================================= */
.properties-group + .properties-group {
  margin-top: var(--space-24);
}

.properties-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
}
/* Desktop: more air below the subsection header. */
@media (min-width: 1024px) {
  .properties-group + .properties-group {
    margin-top: var(--space-32);
  }
  .properties-group__head {
    margin-bottom: var(--space-12);
  }
}
.properties-group__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.properties-group__eyebrow {
  margin: 0 0 var(--space-1);
}
.properties-group__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 0;
}
.properties-group__count {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.6;
  white-space: nowrap;
}
.properties-group__empty {
  margin: 0;
  padding: var(--space-12) 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-primary);
  opacity: 0.7;
  max-width: none;
}

/* Grid — mobile default = single column.
   Left-aligned at every breakpoint (editorial premium, à la Sotheby's
   / Engel & Völkers). When a subsection has fewer cards than columns
   the extra slots simply stay empty on the right — no centering.
   - `--1`: card capped at ~one slot width (320px), pinned left.
   - `--2`: 2 cards take the first 2 slots of the 3-col layout on
            desktop (3rd slot empty).
   - `--3`: 3 cards distributed across the container. */
.properties {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-12);
  justify-content: flex-start;
}
.properties--1 {
  grid-template-columns: minmax(0, 320px);
}

/* Card — flex column with media on top + auto-margin on the last
   element so all cards in a grid row align their bottom edge. */
.property-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  height: 100%;             /* fill grid row so cards align */
}
.property-card:hover,
.property-card:focus-visible {
  color: inherit;
  border-bottom: 0;
}
.property-card:hover .property-card__title,
.property-card:focus-visible .property-card__title {
  color: var(--accent);
}
/* Aspect ratio 4:5 portrait — locked per brandbook pp. 57-58, 60-61
   editorial direction (no change to 16:9 or 1:1).
   Hard width:100% + aspect-ratio forces an absolute computed height
   so every card in a row renders with EXACTLY the same media height,
   even when the underlying uploaded files have different proportions
   (object-fit: cover handles the crop). */
.property-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--rule);
  position: relative;
}
.property-card__media img,
.property-card__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-normal);
}
.property-card:hover .property-card__media img {
  transform: scale(1.02);
}
.property-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-color: #BDB9A7;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
}
.property-card__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49.6%, rgba(0,0,0,0.06) 49.7%, rgba(0,0,0,0.06) 50.3%, transparent 50.4%),
    linear-gradient(45deg,  transparent 49.6%, rgba(0,0,0,0.06) 49.7%, rgba(0,0,0,0.06) 50.3%, transparent 50.4%);
  pointer-events: none;
}
.property-card__placeholder span {
  position: relative;
  z-index: 1;
  padding: 4px 8px;
  background-color: rgba(245, 241, 232, 0.85);
  border-radius: var(--radius-sm);
}
.property-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-1);
  gap: var(--space-3);
}
/* Title: reserve 2 lines of vertical space so cards align in a row
   even when one title is short and the next wraps. Clamp longer
   titles to 2 lines with an ellipsis. */
.property-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: var(--lh-snug);
  margin: 0;
  min-height: calc(2em * var(--lh-snug));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}
.property-card__location {
  font-size: var(--fs-base);
  opacity: 0.85;
  margin: 0;
}
/* Price always pinned to the bottom of the card via auto top margin
   in the flex column — keeps prices aligned horizontally across
   adjacent cards regardless of title / location line count. */
.property-card__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
  margin: auto 0 0;
  padding-top: var(--space-1);
}


/* =============================================================
   Narrative simple (block-narrative-simple.php)
   Centered editorial paragraph block — no values list, no icons.
   Two layouts:
   - default → single column, max 700px centered.
   - --split → title left / narrative right on desktop, stack on mobile.
   ============================================================= */
.narrative-simple {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.narrative-simple__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.narrative-simple__eyebrow {
  margin-bottom: var(--space-2);
}
.narrative-simple__title {
  margin: 0;
  max-width: 22ch;
}
.narrative-simple__intro {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}
.narrative-simple__intro p {
  margin: 0 0 var(--space-6);
  max-width: none;
}
.narrative-simple__intro p:last-child {
  margin-bottom: 0;
}

/* Split layout — title column + narrative column. Mobile stacks
   naturally (the default flex column kicks in). */
.narrative-simple--split {
  max-width: none;
  gap: var(--space-8);
}
.narrative-simple--split .narrative-simple__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: var(--lh-tight);
  max-width: 18ch;
}

/* Featured layout — editorial transition moment. Wider container,
   centered text and headline, larger type. */
.narrative-simple--featured {
  max-width: 800px;
  text-align: center;
}
.narrative-simple--featured .narrative-simple__head {
  align-items: center;
}
.narrative-simple--featured .narrative-simple__title {
  margin-inline: auto;
  max-width: 26ch;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: var(--lh-tight);
}
.narrative-simple--featured .narrative-simple__intro {
  margin-inline: auto;
  max-width: 60ch;
}

/* Closing pull-quote — centered italic blockquote on a top rule.
   Used at the end of a narrative section to leave a brand statement. */
.narrative-simple__quote {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.narrative-simple__quote p {
  margin: 0 auto;
  max-width: 50ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}


/* =============================================================
   Values cards (block-values-cards.php)
   Three editorial value items. Each card opens with a small
   Arcilla rule — no boxes, no shadows, just typography on rules.
   ============================================================= */
.values-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.values-cards__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 36ch;
}
.values-cards__title {
  margin: 0;
}
.values-cards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
.values-cards__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  position: relative;
}
/* Small Arcilla rule at the top of each card. */
.values-cards__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: var(--accent);
}
.values-cards__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: var(--lh-snug);
}
.values-cards__item-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  max-width: none;
}


/* =============================================================
   Editorial pentagon + image (block-editorial-pentagon-image.php)
   Signature brand composition (brandbook pp. 50-51-65, web-3.jpg):
   solid Arcilla pentagon with short editorial copy + image clipped
   to the same pentagon shape. The pentagon SHAPE is a separate
   sibling element from the text so the mask only clips the
   coloured fill, not the typography.
   ============================================================= */
.pentagon-mask {
  -webkit-mask-image: url('../svg/pentagon.svg');
          mask-image: url('../svg/pentagon.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.editorial-pentagon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* LEFT — Arcilla pentagon containing the editorial phrase. */
.editorial-pentagon__shape-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 640 / 594;          /* matches pentagon.svg viewBox */
  margin-inline: auto;
}
.editorial-pentagon__shape {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  -webkit-mask-image: url('../svg/pentagon.svg');
          mask-image: url('../svg/pentagon.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.editorial-pentagon__text {
  position: absolute;
  inset: 0;
  margin: 0;
  /* Push text down so it sits in the pentagon "body", below the
     pointed roof peak. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24% 14% 10%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: var(--lh-tight);
  color: var(--color-mares-claro);
  max-width: none;
}

/* RIGHT — image clipped to the same pentagon shape. */
.editorial-pentagon__image-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 640 / 594;
  margin-inline: auto;
  overflow: hidden;
}
.editorial-pentagon__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-mask-image: url('../svg/pentagon.svg');
          mask-image: url('../svg/pentagon.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}


/* =============================================================
   Credentials (block-credentials.php)
   Two-line label / value list (Nº Asociado API + Registro ROAIB).
   Editorial — no boxes; just typography on a top rule.
   ============================================================= */
.credentials {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.credentials__list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.credentials__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.credentials__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.6;
  margin: 0;
}
.credentials__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  color: var(--accent);
}


/* =============================================================
   Editorial image + text (block-editorial-image-text.php)
   Two-column composition (image | text). Source order is always
   image-first so mobile stacks with the image on top. On desktop
   the `--image-right` modifier uses `grid-column` to flip the image
   to the right column without touching the DOM.
   ============================================================= */
.editorial-image-text__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
.editorial-image-text__image-wrap {
  margin: 0;
  width: 100%;
  /* Match pentagon.svg viewBox 640×594 so the masked image fills the
     pentagon shape without distortion. */
  aspect-ratio: 640 / 594;
  /* No background colour — the pentagon mask has transparent corners
     and we want the section background (Marés / Crema / Tierra) to
     show through them. */
}
.editorial-image-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default subject anchor. To shift the focal point for a specific
     instance (e.g. a portrait whose face sits high), override inline
     with style="object-position: center 30%;" on the <img>, or add a
     per-section modifier class in the block call. */
  object-position: center;
  display: block;
}
.editorial-image-text__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.editorial-image-text__eyebrow {
  margin-bottom: var(--space-2);
}
.editorial-image-text__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: var(--lh-tight);
}
.editorial-image-text__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.editorial-image-text__body p {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.editorial-image-text__body p:last-child {
  margin-bottom: 0;
}
.editorial-image-text__quote {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.editorial-image-text__quote p {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  max-width: 50ch;
}


/* =============================================================
   Contacto · Localización (block-contacto-localizacion.php)
   Two-column block on the Contacto page: editorial details (eyebrow
   + h3 + paragraph + dl with dirección/teléfono/email/horario) on
   the left, Google Maps iframe on the right.
   ============================================================= */
.contacto-localizacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
.contacto-localizacion__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contacto-localizacion__title {
  margin: 0;
  max-width: 30ch;
}
.contacto-localizacion__intro {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  max-width: 50ch;
}
.contacto-localizacion__list {
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contacto-localizacion__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}
.contacto-localizacion__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.6;
}
.contacto-localizacion__value {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}
.contacto-localizacion__value a {
  color: inherit;
  border-bottom-color: transparent;
}
.contacto-localizacion__value a:hover,
.contacto-localizacion__value a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contacto-localizacion__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 400px;
  overflow: hidden;
}
.contacto-localizacion__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =============================================================
   Property hero (block-property-hero.php)
   Editorial header for the single-propiedad template.
   ============================================================= */
.property-hero {
  padding-top: clamp(var(--space-8), 6vw, var(--space-16));
  padding-bottom: clamp(var(--space-6), 4vw, var(--space-12));
}
.property-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.65;
  margin-bottom: var(--space-8);
}
.property-hero__breadcrumb a {
  color: inherit;
  border-bottom-color: transparent;
}
.property-hero__breadcrumb a:hover,
.property-hero__breadcrumb a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.property-hero__breadcrumb-current {
  color: var(--text-primary);
  opacity: 0.85;
}
.property-hero__eyebrow {
  margin-bottom: var(--space-4);
}
.property-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-tight);
  max-width: 22ch;
}
.property-hero__subtitle {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  opacity: 0.8;
  max-width: none;
}


/* =============================================================
   Property gallery (block-property-gallery.php)
   ============================================================= */
.property-gallery-section {
  padding-top: 0;
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}
.property-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.property-gallery__featured {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 0;
  cursor: zoom-in;
}
.property-gallery__featured--static {
  margin: 0;
  cursor: default;
}
.property-gallery__featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}
.property-gallery__featured:hover .property-gallery__featured-img {
  transform: scale(1.01);
}

/* Thumbnail grid — 2 cols on mobile/tablet, 3 cols on desktop (≥1024). */
.property-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.property-gallery__cell {
  margin: 0;
}
/* Shots past the visible set: kept in the DOM (so the lightbox holds the
   full gallery) but never rendered as thumbnails. */
.property-gallery__cell--hidden {
  display: none;
}
.property-gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 0;
  cursor: zoom-in;
}
.property-gallery__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}
.property-gallery__item:hover .property-gallery__item-img {
  transform: scale(1.02);
}

/* "Ver todas las fotos (N)" overlay — dimmed Tierra veil over the last
   visible cell, sitting on top of the (real) next photo. */
.property-gallery__more-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  background-color: rgba(52, 50, 42, 0.6); /* Tierra oscura @ 60% */
  color: var(--color-crema-clara);
  transition: background-color var(--transition-normal);
}
.property-gallery__more:hover .property-gallery__more-overlay,
.property-gallery__more:focus-visible .property-gallery__more-overlay {
  background-color: rgba(52, 50, 42, 0.74);
}
.property-gallery__more-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  max-width: 14ch;
}

/* When the grid is truncated (overlay present) it always renders 5 photo
   cells + the overlay cell. Below desktop, cap to 3 photo cells + overlay
   (a clean 2×2); the hidden photo cells stay in the DOM for the lightbox. */
.property-gallery__grid--truncated .property-gallery__cell:nth-child(4),
.property-gallery__grid--truncated .property-gallery__cell:nth-child(5) {
  display: none;
}

/* GLightbox caption — the image alt, centred, brand display font, white,
   on a transparent panel. Overrides the bundled "clean" skin (white box,
   black Arial); the .glightbox-container scope raises specificity so these
   win regardless of stylesheet order. */
.glightbox-container .gslide-description {
  background: transparent;
}
.glightbox-container .gslide-title {
  font-family: var(--font-display);
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}


/* =============================================================
   Property detail layout — description (main) + meta (sidebar)
   ============================================================= */
.property-detail {
  padding-top: clamp(var(--space-8), 5vw, var(--space-12));
  padding-bottom: clamp(var(--space-12), 8vw, var(--space-24));
}
.property-detail__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
.property-detail__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.property-detail__sidebar {
  min-width: 0;
}


/* =============================================================
   Property description (editorial WYSIWYG)
   ============================================================= */
.property-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.property-description__body {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  max-width: 65ch;
}
.property-description__body p {
  margin: 0 0 var(--space-6);
  max-width: none;
}
.property-description__body p:last-child {
  margin-bottom: 0;
}


/* =============================================================
   Property characteristics (block-property-characteristics.php)
   ============================================================= */
.property-characteristics {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}
.property-characteristics__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.property-characteristics__item {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.property-characteristics__item::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -0.2em;
  color: var(--accent);
  font-size: 1.75em;
  line-height: 1;
}


/* =============================================================
   Property location (block-property-location.php)
   ============================================================= */
.property-location {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}
.property-location__map {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.property-location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.property-location__address {
  font-size: var(--fs-base);
  opacity: 0.85;
  margin: 0;
}


/* =============================================================
   Property meta (block-property-meta.php) — sticky sidebar.
   No box / no shadow — pure typography on rules. Editorial.
   ============================================================= */
.property-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.property-meta__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--accent);
  line-height: 1;
}
.property-meta__list {
  list-style: none;
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.property-meta__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
}
.property-meta__label {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.6;
  flex-shrink: 0;
}
.property-meta__value {
  font-family: var(--font-body);
  font-weight: 500;
  text-align: right;
}
.property-meta__cta {
  align-self: stretch;
  justify-content: center;
  margin-top: var(--space-4);
}


/* =============================================================
   Property related (block-property-related.php)
   Wraps a `.properties` grid + eyebrow inside a soft section.
   ============================================================= */
.property-related__eyebrow {
  margin-bottom: var(--space-8);
}


/* =============================================================
   Legal page (page-legal.php — "Página Legal" Template Custom)
   -------------------------------------------------------------
   Flat Crema hero with the page title as the single H1 (rendered
   eyebrow-style per theme convention), then a 720px reading
   column for the_content(). `.legal-content` styles every WYSIWYG
   child the editor might emit.
   ============================================================= */
.legal-hero {
  background-color: var(--accent);
  padding: var(--space-16) 0 var(--space-12);
  min-height: 25vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.legal-hero__title {
  margin: 0;
  color: var(--text-on-dark);
  font-size: var(--fs-lg);
}

.legal-section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-24);
}

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.legal-content > * + * {
  margin-top: var(--space-6);
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  line-height: var(--lh-tight);
  max-width: none;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--lh-tight);
  max-width: none;
}
.legal-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 var(--space-6);
  max-width: none;
}
.legal-content ul,
.legal-content ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-6);
  line-height: 1.7;
}
.legal-content ul li,
.legal-content ol li {
  margin-bottom: var(--space-2);
}
.legal-content ul li::marker,
.legal-content ol li::marker {
  color: var(--accent);
}
.legal-content strong,
.legal-content b {
  font-weight: 600;
}
.legal-content em,
.legal-content i {
  font-style: italic;
}
.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}
.legal-content a:hover,
.legal-content a:focus-visible {
  color: var(--accent-hover);
}
.legal-content hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-12) 0;
}
.legal-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--text-muted, var(--text-primary));
}


/* =============================================================
   Responsive — tablet (>=768) and desktop (>=1024).
   Mobile-first: rules above apply by default; these scale UP.
   ============================================================= */

@media (min-width: 768px) {
  .narrative-values__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  /* Vertical separator between adjacent items. The last item in each
     row (every 2nd) drops its border. */
  .narrative-values__item {
    padding-right: var(--space-6);
    border-right: 1px solid var(--rule);
  }
  .narrative-values__item:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-12);
  }
  .steps__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }
  .services__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .cta-strip {
    padding: var(--space-24) 0;
  }
  .section-head {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
  }
  .properties {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-12);
  }
  .properties--1 {
    grid-template-columns: minmax(0, 320px);
  }
  /* --2 at tablet: 2 cards in 2 columns, naturally filling. */
  .properties--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Property characteristics — 2-col list. */
  .property-characteristics__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-8);
  }
  /* Sobre Nosotros — Section C, Section D, Section E layouts. */
  .editorial-pentagon {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .credentials__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  /* Contacto · Localización — details left, map right (~45/55). */
  .contacto-localizacion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-16);
  }
  /* Editorial image + text — 50/50 split. Image-right modifier
     flips the columns via explicit grid-column assignments without
     touching the DOM (source order stays image-first). */
  .editorial-image-text__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .editorial-image-text--image-right .editorial-image-text__image-wrap {
    grid-column: 2;
    grid-row: 1;
  }
  .editorial-image-text--image-right .editorial-image-text__text {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (min-width: 1024px) {
  /* Property gallery — 3 cols on desktop. When truncated, restore the 4th
     and 5th photo cells so the grid shows 5 photos + overlay (2×3). The
     7th-onward shots keep their own .--hidden display:none. */
  .property-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .property-gallery__grid--truncated .property-gallery__cell:nth-child(4),
  .property-gallery__grid--truncated .property-gallery__cell:nth-child(5) {
    display: block;
  }

  /* Legal line switches from stacked to a space-between row only at the
     desktop breakpoint — the copyright string is long, so it stays
     stacked on tablet to avoid a cramped two-column squeeze. */
  .site-footer__legal-line {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
  }
  .narrative-values__list {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Reset the tablet 2-col separator pattern so all items get a border,
     then drop only the LAST (every 4th) one. */
  .narrative-values__item:nth-child(2n) {
    border-right: 1px solid var(--rule);
    padding-right: var(--space-6);
  }
  .narrative-values__item:nth-child(4n) {
    border-right: 0;
    padding-right: 0;
  }
  .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .services__list {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 2-col variant stays at 2 columns on desktop. */
  .services--two .services__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-form__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
  /* WITH photo: text+form on LEFT, photo on RIGHT.
     Source order is photo-first (so mobile stacks photo on top),
     so we explicitly place items here on desktop. */
  .contact-form--with-photo .contact-form__main {
    grid-column: 1;
    grid-row: 1;
  }
  .contact-form--with-photo .contact-form__photo {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }
  .properties {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-16);
  }
  /* Explicit overrides so --1 stays capped and --2 shares the same
     3-col grid as --3 (2 cards take slots 1+2, slot 3 stays empty). */
  .properties--1 {
    grid-template-columns: minmax(0, 320px);
  }
  .properties--2 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Single-propiedad detail: main + sticky sidebar. ~63/37 split,
     visually balanced editorial. */
  .property-detail__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
  .property-detail__sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }
  /* Headers tightening for desktop. */
  .property-hero__title {
    max-width: 22ch;
  }
  /* Sobre Nosotros Section C — values cards across 3 cols on desktop. */
  .values-cards__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  /* Sobre Nosotros Section B (split) — title left, narrative right. */
  .narrative-simple--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-16);
    align-items: start;
  }
  .narrative-simple--split .narrative-simple__head {
    margin: 0;
  }
}

/* Mobile: hide horizontal nav, show hamburger toggle, swap nav into a
   collapsible panel anchored below the header. */
@media (max-width: 767px) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--space-4) var(--container-padding);
    background-color: var(--bg-page);
    border-bottom: 1px solid var(--rule);
  }
  .site-nav--open {
    display: block;
  }
  .site-nav__list,
  .site-nav .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  /* Mobile: dropdown becomes an inline accordion — no absolute
     positioning, no hover, only aria-expanded controls visibility. */
  .site-nav__list .menu-item-has-children,
  .site-nav .menu .menu-item-has-children {
    width: 100%;
    display: block;
  }
  .site-nav__list .sub-menu,
  .site-nav .menu .sub-menu {
    position: static;
    border: 0;
    background-color: transparent;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    min-width: 0;
    transform: none;
    transition: opacity var(--transition-fast), max-height var(--transition-fast);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
  }
  /* Mobile suppresses hover/focus-within (no pointer hover); only
     aria-expanded opens the accordion. */
  .site-nav__list .menu-item-has-children:hover > .sub-menu,
  .site-nav__list .menu-item-has-children:focus-within > .sub-menu,
  .site-nav .menu .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }
  .site-nav__list .menu-item-has-children > a[aria-expanded="true"] + .sub-menu,
  .site-nav .menu .menu-item-has-children > a[aria-expanded="true"] + .sub-menu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
  }
  .site-nav__list .sub-menu a,
  .site-nav .menu .sub-menu a {
    padding: var(--space-2) 0;
    white-space: normal;
  }
  .site-nav-toggle {
    display: inline-flex;
  }
  .site-header {
    position: relative; /* avoid sticky collisions with open mobile menu */
  }
}