/* ============================================================
   Orangefield — Warm-Personal Concept Sketch
   MOBILE-FIRST. Base styles target ~360–720px viewports.
   Breakpoints add complexity for larger screens:
     ≥ 720px  — tablet / large phone landscape
     ≥ 1024px — desktop
     ≥ 1280px — wide desktop
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Warm palette */
  --orange:        #E8741A;
  --orange-deep:   #A64A08;   /* AA text on cream/white (5.4:1) and hover of --orange-btn */
  --orange-btn:    #B4540C;   /* background for white text (5:1); --orange stays for decoration */
  --orange-soft:   #F2A671;
  --cream:         #FAF6EF;
  --cream-deep:    #F2EBDD;
  --ink:           #2A1F1A;
  --text:          #3D332C;
  --text-muted:    #6B645E;
  --line:          #E8DFCF;
  --white:         #FFFFFF;
  --black:         #1A140F;

  /* Semantic states (independent of the brand accent) */
  --success:       #14833B;
  --error:         #DC2626;

  /* Type */
  --font-serif:    'Playfair Display', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — these clamps cover all viewports without breakpoints. */
  --text-display:  clamp(2.5rem, 9vw, 5.5rem);
  --text-section:  clamp(1.9rem, 6vw, 3.5rem);
  --text-h3:       clamp(1.15rem, 3.5vw, 1.5rem);

  /* Spacing */
  --section-y:     clamp(56px, 12vw, 140px);
  --gutter:        clamp(18px, 5vw, 48px);

  /* Effects */
  --shadow-sm:     0 1px 2px rgba(42, 31, 26, 0.06);
  --shadow-md:     0 8px 24px rgba(42, 31, 26, 0.08);
  --shadow-lg:     0 24px 60px rgba(42, 31, 26, 0.18);
  --radius:        14px;
  --radius-lg:     24px;
  --transition:    220ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Scroll reveal ----------
   Any element with `data-reveal` starts faded down a bit, then slides
   into place the first time it intersects the viewport. Optional
   `data-delay="1..6"` staggers siblings. Respects reduced-motion. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-delay="5"] { transition-delay: 0.40s; }
[data-reveal][data-delay="6"] { transition-delay: 0.48s; }

/* Property cards in the grid get a tiny stagger from JS via inline delay. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Hash navigation (/#contact, /#about…) lands at the section heading
     instead of hiding it under the sticky navbar. */
  scroll-padding-top: clamp(72px, 9vh, 96px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol, li, h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography utilities ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-section);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}

.section-sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 14px;
  max-width: 640px;
}

.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 3.3vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 600px;
}

.body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 560px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 4px;
  transition: gap var(--transition), color var(--transition);
}
.link-arrow span { color: var(--orange); transition: transform var(--transition); }
.link-arrow:hover { gap: 14px; color: var(--orange-deep); }
.link-arrow:hover span { transform: translateX(2px); }
.link-arrow-lg { font-size: 1.05rem; padding-bottom: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
  min-height: 48px; /* mobile-first touch target */
}
.btn-primary {
  background: var(--orange-btn);
  color: var(--white);
  border-color: var(--orange-btn);
}
.btn-primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  border-color: #25D366;
}
.btn-whatsapp:hover {
  background: #1ebc5a;
  border-color: #1ebc5a;
}
.btn-full { width: 100%; }

/* ============================================================
   NAVBAR  (mobile-first: hamburger + slide-down drawer)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
}

.nav-logo { display: inline-flex; align-items: center; }
.nav-logo-img { height: 38px; width: auto; }
/* the orange (logo) in front of the name, here and in the footer */
.nav-logo::before, .footer-logo::before {
  content: ''; flex: none; width: 2rem; height: 2rem; margin-right: 0.55rem;
  background: url(/media/brand/naranja.svg) center / contain no-repeat;
}
.nav-logo-text {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  margin-left: auto;
  border-radius: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(42, 31, 26, 0.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition);
  opacity: 0;
}
.nav.is-open .nav-menu {
  max-height: 360px;
  opacity: 1;
}
.nav-link {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink);
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.nav-link:last-child { border-bottom: none; }

/* Lang switcher visible in the navbar bar at every viewport. On desktop
   it follows the (right-pushed) nav-menu; on mobile the menu is absolute
   so we re-push from here — see the @media block below. */
.nav-right {
  display: flex;
  align-items: center;
}

/* Mobile: .nav-menu is positioned absolute (drawer), so push from here
   instead. .nav-toggle then sits right next to .nav-right. */
@media (max-width: 1023px) {
  .nav-right { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
}

.lang-switcher {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: var(--white);
}
.lang-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-radius: 999px;
  transition: color var(--transition), background-color var(--transition);
}
/* languageSwitcher.js toggles `.active`; the prototype used `.is-active`.
   Style both so the v2 infrastructure keeps working. */
.lang-btn.is-active,
.lang-btn.active { background: var(--ink); color: var(--cream); }
.lang-btn:not(.is-active):not(.active):hover { color: var(--ink); }

/* Narrow phones: shrink the lang pills so logo + lang + hamburger
   fit comfortably on a single bar at ~360px. */
@media (max-width: 480px) {
  .nav { gap: 8px; }
  .lang-switcher { padding: 2px; }
  .lang-btn { padding: 5px 8px; font-size: 0.7rem; letter-spacing: 0.04em; }
}

/* ============================================================
   HERO  (mobile-first)
   ============================================================ */
.hero {
  padding: 32px var(--gutter) 36px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 30%, color-mix(in srgb, var(--orange) 6%, transparent), transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 10px 0 20px;
}
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
}

.hero-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 3vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 28px;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin: 0 auto 36px;
  max-width: 360px;
}
.hero-ctas .btn { width: 100%; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.hero-trust strong {
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-serif);
  font-size: 1.1em;
}
.hero-trust .dot { color: var(--orange); font-weight: 700; }

/* Carousel band */
.carousel-band {
  position: relative;
  margin-top: 36px;
  padding-bottom: 8px;
}
.carousel-track {
  display: flex;
  gap: 16px;
  padding: 8px var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  flex: 0 0 78vw;
  scroll-snap-align: center;
}

.carousel-btn { display: none; } /* shown on desktop */

/* ============================================================
   PROPERTY CARD
   ============================================================ */
.prop-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.prop-card:hover, .prop-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--cream-deep);
}

.prop-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
}
.prop-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.prop-card:hover .prop-card-img { transform: scale(1.04); }

.prop-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.prop-card-badge.is-featured { background: var(--orange-btn); color: var(--white); }
.prop-card-badge.is-sold     { background: var(--ink);    color: var(--cream); }

.prop-card.is-sold .prop-card-img { filter: grayscale(20%) brightness(0.96); }

.prop-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-card-loc {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.prop-card-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 4px 0 6px;
  /* Cap at 2 lines so cards stay even */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-card-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--orange);
  line-height: 1;
  margin: 4px 0 10px;
}
.prop-card-specs {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.prop-card-specs span { display: inline-flex; align-items: center; gap: 4px; }
.prop-card-specs strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   STORY  (mobile: single column, image first)
   ============================================================ */
.story {
  background: var(--cream);
  padding: var(--section-y) var(--gutter);
}
.story-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.story-image {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.story-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.story-image-caption {
  position: absolute;
  bottom: -14px;
  left: 20px;
  background: var(--white);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.story-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.story-text .section-title { margin-bottom: 6px; }
.story-text .link-arrow { align-self: flex-start; margin-top: 4px; }

/* ============================================================
   PROCESS — Vertical "journey" timeline
   Mobile: number column on the left + content on the right, connected
   by an orange thread that fills as each step is revealed.
   Desktop: same structure, more breathing room and bigger numbers.
   ============================================================ */
.process {
  background: var(--white);
  padding: var(--section-y) 0 calc(var(--section-y) * 0.85);
  overflow: hidden;
}
.process-header {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  text-align: center;
}
.process-header .section-sub { margin-left: auto; margin-right: auto; }

.journey {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.journey-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  position: relative;
}

.journey-marker {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* The vertical thread that connects all the steps. Starts as a quiet
   cream line and lights up to orange as each step enters the viewport.
   Trims at the first/last node so the line begins/ends at the node center
   (27px = mobile node radius; overridden to 40px at the desktop breakpoint). */
.journey-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--cream-deep);
  transform: translateX(-50%);
  transition: background-color 0.7s ease;
}
.journey-step:first-child .journey-line { top: 27px; }
.journey-step:last-child  .journey-line { top: 0; bottom: auto; height: 27px; }
.journey-step.is-visible .journey-line { background: var(--orange); }

.journey-node {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  /* Tight line-height + tabular numerals keep "01"…"05" centered inside the
     circle. Without `line-height: 1` the font's default leading drops the
     glyphs visually low; without `font-variant-numeric: tabular-nums` the
     italic numerals get inconsistent widths and shift horizontally. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  transition: border-color 0.5s ease, color 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.journey-step.is-visible .journey-node {
  border-color: var(--orange);
  color: var(--orange);
  transform: scale(1.04);
}

.journey-content {
  padding: 8px 0 36px;
  min-width: 0;
}
.journey-step:last-child .journey-content { padding-bottom: 0; }

.journey-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 6px;
}
.journey-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 540px;
}

/* ============================================================
   PROPERTIES GRID  (mobile: single column)
   ============================================================ */
.properties {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}
.properties-header {
  max-width: 1180px;
  margin: 0 auto 36px;
}
.properties-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.properties-cta-wrap {
  max-width: 1180px;
  margin: 40px auto 0;
  text-align: center;
}

/* ============================================================
   TESTIMONIALS  (homepage, between properties grid and trust strip)
   Three-card grid of customer quotes. Cream background so it reads
   as a distinct social-proof band before the founder's trust quote.
   ============================================================ */
.testimonials {
  background: var(--cream);
  padding: var(--section-y) var(--gutter);
}
.testimonials-header {
  max-width: 1180px;
  margin: 0 auto 48px;
  text-align: center;
}
.testimonials-header .section-sub { margin: 14px auto 0; }

.testimonials-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--cream-deep);
}

.testimonial-stars {
  color: var(--orange);
  letter-spacing: 2px;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
  flex: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testimonial-name {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.testimonial-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
  background: var(--cream);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.trust-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 6rem);
  line-height: 0.5;
  color: var(--orange);
  margin-bottom: 16px;
}
.trust-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 5vw, 2.5rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 680px;
}
.trust-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.trust-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.trust-meta { display: flex; flex-direction: column; text-align: left; }
.trust-name {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}
.trust-role {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trust-points {
  font-size: 0.825rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.trust-points .dot { color: var(--orange); margin: 0 4px; }

/* ============================================================
   CONTACT (mobile: stacked)
   ============================================================ */
.contact {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}
.contact-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-left .section-title { margin-bottom: 12px; }
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--transition), background-color var(--transition);
}
.contact-link:hover, .contact-link:focus-visible {
  transform: translateX(4px);
  background: var(--cream-deep);
}
.contact-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--orange);
}
.contact-link-whatsapp svg { color: #25D366; }
.contact-link-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-link-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
  margin-top: 2px;
  word-break: break-word;
}

.contact-form {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  border: 1px solid var(--line);
}
.contact-form-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 20px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent);
}
.form-field textarea { resize: vertical; min-height: 120px; }

/* ============================================================
   FOOTER (mobile: stacked)
   ============================================================ */
.footer {
  background: var(--black);
  color: var(--cream);
  padding: 56px var(--gutter) 28px;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(250, 246, 239, 0.1);
}
.footer-brand p {
  max-width: 320px;
  color: rgba(250, 246, 239, 0.7);
  margin-top: 12px;
  line-height: 1.6;
  font-size: 0.95rem;
}
.footer-logo { display: inline-flex; align-items: center; }
.footer-logo-img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer-logo-text {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--cream);
  letter-spacing: -0.01em;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 0.95rem;
  color: rgba(250, 246, 239, 0.7);
  margin-bottom: 8px;
  transition: color var(--transition);
  word-break: break-word;
}
.footer-col a:hover { color: var(--orange-soft); }

.footer-bottom {
  max-width: 1180px;
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(250, 246, 239, 0.5);
  text-align: center;
}
.footer-bottom span:last-child { font-style: italic; }

/* ============================================================
   MODAL  (mobile: full-screen, no border-radius)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  /* flex-start (not stretch) lets the dialog grow with its content and the
     modal container scroll. stretch + the dialog's overflow:hidden was
     clipping everything past the first viewport on mobile. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 31, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.25s ease;
}
.modal-dialog {
  position: relative;
  background: var(--white);
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  /* No overflow:hidden — lets the modal-hero corners do their own thing
     and lets all child content participate in the modal's scroll. */
  animation: modal-in 0.32s cubic-bezier(.2,.7,.2,1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform var(--transition), background-color var(--transition);
}
.modal-close svg { width: 22px; height: 22px; }
.modal-close:hover {
  transform: rotate(90deg);
  background: var(--ink);
  color: var(--cream);
}

.modal-content { padding-bottom: 16px; }

.modal-hero {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cream-deep);
  overflow: hidden;
}
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 22px 22px;
  background: linear-gradient(to top, rgba(42, 31, 26, 0.92), transparent);
  color: var(--cream);
}
.modal-hero-loc {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 6px;
}
.modal-hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.5vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 10px;
}
.modal-hero-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--orange-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-hero-sold {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 22px;
}

.modal-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 4px;
  padding: 20px;
  background: var(--cream);
  border-radius: var(--radius);
}
.modal-spec { text-align: center; }
.modal-spec-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1;
}
.modal-spec-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

.modal-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
}
.modal-desc::first-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

.modal-features h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.modal-features ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.modal-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text);
}
.modal-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.modal-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.modal-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  transition: opacity var(--transition);
}
.modal-gallery img:hover { opacity: 0.92; }

.modal-side { position: static; }
.modal-agent {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.modal-agent-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.modal-agent-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.modal-agent-meta { display: flex; flex-direction: column; }
.modal-agent-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: 1rem; }
.modal-agent-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.modal-agent-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.35;
}
.modal-agent-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-agent-actions .btn { width: 100%; }
.btn-share svg { flex-shrink: 0; }
.btn-share.is-copied {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  padding: 13px 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   BREAKPOINT — ≥ 720px (tablet / large phone landscape)
   ============================================================ */
@media (min-width: 720px) {
  .hero {
    padding: 56px var(--gutter) 60px;
  }
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    margin-bottom: 48px;
    gap: 14px;
  }
  .hero-ctas .btn { width: auto; }
  .hero-trust { font-size: 0.9rem; gap: 10px 16px; }

  .carousel-band { margin-top: 48px; }
  .carousel-slide { flex-basis: 46vw; }

  .properties-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .contact-inner {
    flex-direction: row;
    align-items: start;
    gap: clamp(36px, 5vw, 60px);
  }
  .contact-left, .contact-form { flex: 1; }

  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 36px;
  }
  .footer-brand { flex: 1 0 100%; }
  .footer-col { flex: 1; min-width: 160px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }

  /* Modal becomes a floating dialog */
  .modal {
    align-items: flex-start;
    padding: 24px;
  }
  .modal-dialog {
    max-width: 920px;
    margin: 24px auto;
    border-radius: var(--radius-lg);
    /* On desktop the dialog is a floating card — clip rounded corners. */
    overflow: hidden;
  }
  .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
  }
  .modal-hero { aspect-ratio: 16 / 9; }
  .modal-hero-overlay { padding: 80px 36px 28px; }
  .modal-body { padding: 40px 36px; }
  .modal-specs { grid-template-columns: repeat(4, 1fr); }
  .modal-features ul { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
  .modal-gallery { grid-template-columns: 1fr 1fr; }

  .journey {
    max-width: 820px;
  }
  .journey-step { grid-template-columns: 80px 1fr; gap: 32px; }
  .journey-node { width: 80px; height: 80px; font-size: 1.9rem; }
  .journey-step:first-child .journey-line { top: 40px; }
  .journey-step:last-child  .journey-line { height: 40px; }
  .journey-content { padding: 18px 0 56px; }

  .nav { padding: 16px var(--gutter); }
  .nav-logo-img { height: 42px; }
}

/* ============================================================
   BREAKPOINT — ≥ 1024px (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  .nav {
    gap: 32px;
    padding: 18px var(--gutter);
  }
  .nav-logo-img { height: 44px; }
  .nav-toggle { display: none; }
  .nav-menu {
    position: static;
    flex-direction: row;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    gap: 28px;
    margin-left: auto;
  }
  .nav-link {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    padding: 4px 0;
    border-bottom: none;
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--orange);
    transition: right var(--transition);
  }
  .nav-link:hover { color: var(--ink); }
  .nav-link:hover::after { right: 0; }
  .nav-right { display: flex; align-items: center; }

  .hero { padding: 80px var(--gutter) 80px; }

  .carousel-band { margin-top: 56px; }
  .carousel-slide { flex-basis: clamp(280px, 28vw, 360px); }
  .carousel-track {
    gap: 24px;
    /* Center the row when content fits — 5 cards × 360 + 4 × 24 = 1896px */
    padding-inline: max(var(--gutter), calc((100% - 1896px) / 2));
  }
  .carousel-btn {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transform: translateY(-50%);
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
    z-index: 2;
  }
  .carousel-btn svg { width: 22px; height: 22px; }
  .carousel-btn:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateY(-50%) scale(1.08);
  }
  .carousel-prev { left: clamp(8px, 2vw, 24px); }
  .carousel-next { right: clamp(8px, 2vw, 24px); }

  .properties-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }

  .story-inner {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .story-image { margin: clamp(20px, 5vw, 80px) 0 0 0; max-width: none; }
  .story-text { padding-top: clamp(0px, 2vw, 20px); }

  .journey { max-width: 880px; }
  .journey-content { padding: 22px 0 72px; }

  .footer { padding: 80px var(--gutter) 32px; }
  .footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom { margin-top: 32px; }

  .modal-body { grid-template-columns: 1.6fr 1fr; display: grid; gap: 48px; padding: 48px 40px; }
  .modal-main { display: contents; }
  .modal-main > * { grid-column: 1; }
  .modal-specs   { grid-column: 1; }
  .modal-desc    { grid-column: 1; }
  .modal-features { grid-column: 1; }
  .modal-gallery  { grid-column: 1; grid-template-columns: 1fr 1fr; }
  .modal-side    { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 24px; align-self: start; }
  .modal-gallery-tall { grid-row: span 2; }
  .modal-gallery-tall img { aspect-ratio: 4 / 6; }

  .modal-spec-value { font-size: 1.75rem; }
}

/* ============================================================
   BREAKPOINT — ≥ 1280px (wide desktop polish)
   ============================================================ */
@media (min-width: 1280px) {
  .modal-dialog { max-width: 1080px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PROPERTY DETAIL PAGE (static-generated /property/*.html)
   Full-bleed hero, specs strip, two-column body, sticky agent CTA.
   ============================================================ */
.prop-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 360px;
  max-height: 720px;
  background: var(--cream-deep);
  overflow: hidden;
}
.prop-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prop-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--gutter);
  background: linear-gradient(to top, rgba(42, 31, 26, 0.85) 0%, rgba(42, 31, 26, 0.25) 50%, transparent 100%);
  color: var(--cream);
}
.prop-hero-content {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: clamp(16px, 4vw, 36px);
}
.prop-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.prop-back:hover { background: rgba(0, 0, 0, 0.7); }
.prop-hero-loc {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 8px;
}
.prop-hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 900px;
}
.prop-hero-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  color: var(--orange-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.prop-hero-sold {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.prop-specs-strip {
  background: var(--cream);
  padding: 28px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.prop-specs-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.prop-spec {
  text-align: center;
  padding: 0 6px;
  border-right: 1px solid var(--line);
}
.prop-spec:last-child,
.prop-spec:nth-child(2):last-child { border-right: none; }
.prop-spec-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: var(--ink);
  line-height: 1;
}
.prop-spec-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

.prop-main {
  background: var(--white);
  padding: var(--section-y) 0;
}
.prop-main-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Generous gap between description / features / gallery — at 40px the
   sections felt cramped on mobile where the gallery starts immediately
   under the last feature checkmark. */
.prop-content { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 72px); }

.prop-description {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 65ch;
  white-space: pre-line;
}
.prop-description::first-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
}

.prop-features h2,
.prop-section-h {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.prop-features ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
}
.prop-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
}
.prop-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.property-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.property-gallery .gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-deep);
  cursor: zoom-in;
}
.property-gallery .gallery-item img,
.property-gallery .gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.property-gallery .gallery-item:hover img,
.property-gallery .gallery-item:hover video {
  transform: scale(1.04);
}

.prop-agent {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line);
}
.prop-agent-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.prop-agent-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.prop-agent-meta { display: flex; flex-direction: column; }
.prop-agent-name { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.prop-agent-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.prop-agent-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.4;
}
.prop-agent-actions { display: flex; flex-direction: column; gap: 10px; }
.prop-agent-actions .btn { width: 100%; }

/* ============================================================
   PROPERTIES LISTING PAGE
   ============================================================ */
.feature-pills {
  background: var(--white);
  padding: 18px var(--gutter) 0;
}
.feature-pills-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.feature-pill:hover {
  border-color: var(--orange-soft);
  color: var(--ink);
}
.feature-pill.active {
  background: var(--orange-btn);
  border-color: var(--orange-btn);
  color: var(--white);
}

.results-count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-muted);
}
.no-results {
  max-width: 600px;
  margin: 48px auto;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
}

.pagination {
  max-width: 1180px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination button {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 40px;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}
.pagination button.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   BLOG INDEX + POSTS
   ============================================================ */
.page-hero {
  background: var(--cream);
  padding: 100px var(--gutter) 64px;
  text-align: center;
}
.page-hero-inner { max-width: 800px; margin: 0 auto; }
.page-hero .eyebrow { color: var(--orange-deep); }
.page-hero .section-title { font-size: clamp(2rem, 6vw, 4rem); }
.page-hero .section-sub { margin-left: auto; margin-right: auto; }
/* blog filters (area chips) */
.blog-filters { margin-top: 28px; }
.blog-filters .tx-chips { justify-content: center; padding: 0; }
.blog-filters .tx-chip { display: inline-flex; align-items: center; gap: 6px; }
.blog-filters .tx-chip-n { font-size: .78rem; opacity: .7; }
.blog-filters .tx-chip.is-active .tx-chip-n { opacity: 1; }
/* the tour-page composer CTA is styled by an inline <style> in the generated page (staticGenerator.js); this wins on specificity */
.td-composer-cta .td-composer-cta-btn { background: var(--orange-btn); }
.td-composer-cta .td-composer-cta-btn:hover { background: var(--orange-deep); }
@media (max-width: 600px) {
  .blog-filters .tx-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
  .blog-filters .tx-chips::-webkit-scrollbar { display: none; }
  .blog-filters .tx-chip { flex: 0 0 auto; }
}

.blog-list {
  background: var(--white);
  padding: var(--section-y) var(--gutter);
}
.blog-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--cream-deep);
}
.blog-card-media {
  aspect-ratio: 16 / 9;
  background: var(--cream-deep);
  overflow: hidden;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.6,.2,1);
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
/* photo credit (CC BY / BY-SA attribution) */
.blog-card-media { position: relative; }
.blog-card-credit { position: absolute; right: 8px; bottom: 6px; max-width: calc(100% - 16px); font: 500 10px/1.3 var(--font-sans, sans-serif); color: rgba(255,255,255,.88); text-shadow: 0 1px 2px rgba(0,0,0,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.blog-card-body { padding: 24px 22px 28px; }
.blog-card-meta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.blog-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.blog-card-excerpt {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog post (markdown content) */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text);
}
.prose h1, .prose h2, .prose h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.prose h1 { font-size: clamp(1.8rem, 5vw, 2.75rem); margin: 0 0 18px; line-height: 1.1; }
.prose h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 40px 0 14px; }
.prose h3 { font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin: 28px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 18px;
  margin: 24px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
}
.prose img {
  max-width: 100%;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.prose a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-deep); }

/* ============================================================
   PAGE-LEVEL TYPOGRAPHY (legal, barrios — prose pages)
   ============================================================ */
.page-body {
  background: var(--white);
  padding: 0 var(--gutter) var(--section-y);
}
.page-body-inner { max-width: 760px; margin: 0 auto; padding-top: 48px; }

/* ============================================================
   BREAKPOINT — ≥ 720px overrides for detail/listings/blog
   ============================================================ */
@media (min-width: 720px) {
  .prop-specs-strip { padding: 36px var(--gutter); }
  .prop-specs-inner { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .prop-spec:nth-child(2):last-child { border-right: none; }

  .property-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ============================================================
   BREAKPOINT — ≥ 1024px (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  .prop-main-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .prop-side {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .property-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .prop-features ul { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LIGHTBOX  (gallery zoom on static property pages)
   The v3 property template loads only this stylesheet, not the old
   property-detail.css. Without these rules the lightbox div appended
   to <body> by lightbox.js renders inline at page end instead of as a
   fixed overlay.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-img {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 92vh;
  max-height: 92dvh;
  object-fit: contain;
  cursor: zoom-in;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.lightbox[data-zoomed="true"] .lightbox-prev,
.lightbox[data-zoomed="true"] .lightbox-next,
.lightbox[data-zoomed="true"] .lightbox-counter {
  display: none !important;
}
.lightbox[data-zoomed="true"] .lightbox-img {
  cursor: grab;
}
.lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: background 0.15s ease;
}
.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
}
@media (max-width: 600px) {
  .lightbox-btn { width: 40px; height: 40px; font-size: 20px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev  { left: 8px; }
  .lightbox-next  { right: 8px; }
}

/* Lightbox loading spinner — shown while the next/prev image streams in.
   Delayed appearance so cached images don't flash a spinner. */
.lightbox-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
  z-index: 1;
}
.lightbox.is-loading .lightbox-loading { opacity: 1; }
.lightbox.is-loading .lightbox-img { opacity: 0.35; }
.lightbox-img { transition: opacity 0.2s ease; }
.lightbox-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: lightbox-spin 0.9s linear infinite;
}
@keyframes lightbox-spin { to { transform: rotate(360deg); } }

/* Floating "back to top" button — appears after scrolling past ~300px. */
.scroll-to-top {
  position: fixed;
  bottom: clamp(16px, 4vw, 28px);
  right: clamp(16px, 4vw, 28px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange-btn);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--orange) 35%, transparent);
  z-index: 90;
}
.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
}

/* Contact form per-field validation states. */
.form-field input.is-valid,
.form-field textarea.is-valid {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.form-field input.is-invalid,
.form-field textarea.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form-error {
  display: block;
  min-height: 1.1em;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--error);
  font-weight: 500;
}
.form-error:empty { min-height: 0; margin-top: 0; }
.form-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
.form-meta .form-error { margin-top: 0; flex: 1; }
.form-counter {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.form-counter.is-over { color: var(--error); font-weight: 600; }
.form-contact-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: -4px 0 18px;
  line-height: 1.4;
}

/* ============================================================
   TOURS EXPLORER + TOUR SHEET  (vlc-tours-redesign)
   Map first, cards linked to it, full-screen sheet.
   --nav-h / --mh0 / --mh are set by public/js/tours.js
   ============================================================ */
.tx-hero { background: var(--cream); padding: 22px var(--gutter) 14px; }
.tx-hero-inner { max-width: 1320px; margin: 0 auto; }
.tx-title { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.5rem, 4.6vw, 2.3rem); line-height: 1.1; margin: 0; color: var(--ink); }
.tx-sub { margin: 4px 0 0; font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: 0.98rem; }

.tx-layout { background: var(--cream); padding: 0 var(--gutter) var(--section-y); max-width: 1320px; margin: 0 auto; --nav-h: 64px; --mh0: 340px; --mh: 340px; }

/* map: sticky, zero flow footprint on phones (the slot reserves the space),
   so shrinking it never moves the list */
.tx-map-sticky {
  position: sticky; top: var(--nav-h); z-index: 20;
  height: var(--mh); margin: 0 calc(var(--gutter) * -1) calc(var(--mh) * -1);
  background: var(--cream-deep); overflow: hidden;
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(42, 31, 26, .10);
}
.tx-slot { height: var(--mh0); }
.tx-map { position: absolute; inset: 0; transition: opacity .18s ease; }
.tx-map.is-swapping { opacity: 0; }
.tm-svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }

.tx-toggle {
  position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; padding: 3px; gap: 2px;
  background: rgba(255, 253, 244, .94); border-radius: 999px; box-shadow: 0 2px 8px rgba(42, 31, 26, .18);
}
.tx-toggle-btn {
  border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; min-height: 36px;
  font: 600 .88rem var(--font-sans); color: var(--text); cursor: pointer; transition: background var(--transition), color var(--transition);
}
.tx-toggle-btn.is-active { background: var(--orange-btn); color: var(--white); }
.tx-toggle-btn:focus-visible, .tx-chip:focus-visible, .tx-strip:focus-visible, .tx-card-map:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* strip (phones, collapsed) */
.tx-strip {
  position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0 12px; border: 0; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, rgba(250, 246, 239, .96) 0%, rgba(250, 246, 239, .9) 52%, rgba(250, 246, 239, 0) 100%);
}
.tx-strip-text { display: flex; flex-direction: column; min-width: 0; max-width: 62%; }
.tx-strip-name { font: 700 .95rem var(--font-serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-strip-area { font: 500 .78rem var(--font-sans); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-strip-open { font: 600 .78rem var(--font-sans); color: var(--white); background: var(--orange-btn); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.tx-map-sticky.is-strip .tx-strip { display: flex; }
.tx-map-sticky.is-strip .tx-toggle { display: none; }
.tx-map-sticky.is-strip .tx-map { pointer-events: none; }
.tx-map-sticky.is-expanded { box-shadow: 0 16px 40px rgba(42, 31, 26, .30); }

/* chips + list */
.tx-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 8px; }
.tx-chip {
  border: 1px solid var(--line); background: var(--white); color: var(--text); min-height: 40px;
  padding: 8px 16px; border-radius: 999px; font: 500 .9rem var(--font-sans); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tx-chip:hover { border-color: var(--orange-soft); }
.tx-chip.is-active { background: var(--orange-btn); border-color: var(--orange-btn); color: var(--white); }
.tx-count { margin: 4px 0 12px; font-size: 1rem; }
.tx-list { display: grid; gap: 14px; grid-template-columns: 1fr; }

.tx-card {
  display: grid; grid-template-columns: 104px 1fr; gap: 0; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 2px solid transparent; overflow: hidden; cursor: pointer; text-align: left;
  scroll-margin-top: calc(var(--nav-h) + 72px);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.tx-card:hover { box-shadow: var(--shadow-md); }
.tx-card:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }   /* the title link / map button are the focus stops, not the card */
.tx-card.is-hl { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent), var(--shadow-md); }
.tx-card.is-flash { animation: tx-flash 1.1s ease 1; }
@keyframes tx-flash { 0% { transform: scale(1.02); } 100% { transform: scale(1); } }
.tx-card-img { position: relative; background: var(--cream-deep); }
.tx-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tx-card-body { padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tx-card-cat { font: 600 .7rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.tx-card-name { margin: 0; font: 700 1.05rem/1.2 var(--font-serif); color: var(--ink); }
.tx-card-short { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tx-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: .84rem; color: var(--text); }
.tx-card-meta strong { color: var(--ink); font-size: .95rem; }
.tx-dot { color: var(--line); }
.tx-card-map {
  align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 12px; background: transparent; color: var(--orange-deep); border: 1px solid var(--orange-soft); border-radius: 999px;
  font: 600 .8rem var(--font-sans); cursor: pointer;
}
.tx-card-map:hover { background: var(--orange-btn); color: var(--white); border-color: var(--orange-btn); }

/* map overlay (route / pins / areas) */
.tm-route-halo { fill: none; stroke: #FFFDF4; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tm-route { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.tm-area { fill: var(--orange); fill-opacity: .10; stroke: var(--orange-deep); stroke-width: 1.5; stroke-dasharray: 5 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tm-tour { pointer-events: none; }
.tm-marker, .tm-route-halo { pointer-events: auto; cursor: pointer; }
.tm-dot-bg { fill: var(--orange); stroke: #FFFDF4; }
.tm-dot { fill: #FFFDF4; }
.tm-marker text { fill: #FFFDF4; font-family: var(--font-sans); font-weight: 700; text-anchor: middle; pointer-events: none; }
.tm-hit { fill: transparent; }
.tm-label, .tm-landmark text { font-family: var(--font-sans); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #FFFDF4; stroke-linejoin: round; pointer-events: none; }
.tm-landmark circle { fill: var(--ink); }
.tm-landmark.is-water text { fill: #2F5F7F; font-style: italic; font-weight: 500; }
.tm-tour { transition: opacity .2s ease; }
.tm-tour.is-dim { opacity: .28; }
.tm-tour.is-hl .tm-dot-bg { fill: var(--orange-deep); }
.tm-tour.is-hl .tm-area { fill-opacity: .30; stroke-dasharray: none; }

/* desktop: map left (sticky), list right */
@media (min-width: 761px) {
  .tx-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .tx-map-sticky {
    grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 12px);
    height: auto; aspect-ratio: 6 / 5; max-height: calc(100vh - var(--nav-h) - 28px);
    margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  }
  .tx-slot { display: none; }
  .tx-list-col { grid-column: 2; grid-row: 1; }
  .tx-chips { padding-top: 0; }
  .tx-strip { display: none !important; }
  .tx-card { grid-template-columns: 148px 1fr; }
}
@media (min-width: 1100px) { .tx-card { grid-template-columns: 168px 1fr; } .tx-card-name { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .tx-map, .tm-tour, .tx-card { transition: none; } .tx-card.is-flash { animation: none; } }
@media (max-width: 760px) {
  .tx-map-sticky { transition: none; }
  .tx-toggle { right: 10px; top: 10px; }
}

/* ---------- tour sheet ---------- */
.tsheet { position: fixed; inset: 0; z-index: 120; background: var(--cream); display: flex; flex-direction: column; }
.tsheet[hidden] { display: none; }
.tsheet:focus { outline: none; }
.tsheet-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px;
  background: rgba(255, 253, 244, .96); border-bottom: 1px solid var(--line);
}
.tsheet-back, .tsheet-share {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  font: 600 .92rem var(--font-sans); color: var(--ink); cursor: pointer; border-radius: 999px;
}
.tsheet-back:hover, .tsheet-share:hover { background: var(--cream-deep); }
.tsheet-back:focus-visible, .tsheet-share:focus-visible { outline: 2px solid var(--ink); }
.tsheet-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tsheet-inner { max-width: 780px; margin: 0 auto; }

/* ---------- tour detail (sheet + static page) ---------- */
.td { padding-bottom: 8px; color: var(--text); }
.td-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(300px, 68vw, 420px); background: linear-gradient(135deg, #3a2a20, #1d140f); color: var(--white); overflow: hidden; }
.td-hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.td-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20, 12, 8, .86) 0%, rgba(20, 12, 8, .55) 38%, rgba(20, 12, 8, .12) 72%, rgba(20, 12, 8, .28) 100%); }
.td-hero-text { padding: 110px var(--gutter) 14px; }
.td-hero .td-cat { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 253, 244, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFE2C8; }
.td-hero .td-title { margin: 10px 0 0; max-width: 20em; color: var(--white); font: 800 clamp(1.75rem, 6.6vw, 3rem)/1.1 var(--font-serif); text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.td-hero-credit { margin: 0; padding: 0 var(--gutter) 12px; font-size: .72rem; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.td-hero-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.td-hero-place { font-weight: 700; color: var(--white); }
.td-cat { font: 600 .74rem var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-deep); }
.td-sec { padding: 18px var(--gutter); }
.td-h { margin: 0 0 10px; font: 700 1.15rem var(--font-serif); color: var(--ink); }
.td-facts dl { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.td-fact { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: .93rem; line-height: 1.45; }
.td-fact:first-child { border-top: 0; }
.td-fact dt { font: 600 .8rem var(--font-sans); color: var(--text-muted); padding-top: 2px; overflow-wrap: anywhere; }
.td-fact dd { margin: 0; color: var(--ink); }
.td-fact strong { font-size: 1.05rem; }
.td-unit { color: var(--text-muted); font-size: .85rem; }
.td-note { display: block; color: var(--text-muted); font-size: .84rem; }
.td-note-line { margin: 8px 2px 0; font-size: .86rem; color: var(--text-muted); }
.td-items { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.td-items li::before { content: '· '; color: var(--orange); font-weight: 700; }
.td-gmaps { display: inline-block; margin-left: 4px; color: var(--orange-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.td-gmaps:hover { text-decoration: underline; }
.td-map-credit { margin: 6px 2px 0; font-size: .72rem; color: var(--text-muted); }
.td-draft { margin: 8px 0 0; display: inline-block; padding: 4px 10px; border-radius: 999px; background: #FFF1D6; color: #8A5A00; font: 600 .76rem var(--font-sans); }
.td-story p { margin: 0 0 12px; font-size: 1rem; line-height: 1.65; }
.td-route-note { margin: -4px 0 10px; font-size: .84rem; font-style: italic; color: var(--text-muted); }
.td-quote { margin: 0 0 12px; padding: 14px 16px; background: var(--white); border-left: 4px solid var(--orange-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.td-quote blockquote { margin: 0; font: italic 1rem/1.55 var(--font-serif); color: var(--ink); }
.td-quote figcaption { margin-top: 6px; font: 600 .84rem var(--font-sans); color: var(--text-muted); }
.td-quote figcaption::before { content: '— '; }
.td-quote-orig { margin-top: 8px; font: .8rem var(--font-sans); color: var(--text-muted); }
.td-quote-orig summary { cursor: pointer; width: fit-content; }
.td-quote-orig p { margin: 6px 0 0; font-style: italic; }
.td-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 253, 244, .97); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(42, 31, 26, .08);
}
.td-bar-price { font: 700 1rem var(--font-serif); color: var(--ink); }
.td-bar-btn { min-height: 44px; padding: 0 28px; }
@media (min-width: 761px) { .td-fact { grid-template-columns: 150px 1fr; } }

/* static tour page wrapper */
.td-page { max-width: 780px; margin: 0 auto; background: var(--cream); }
.td-back { display: inline-block; padding: 14px var(--gutter) 0; font: 600 .9rem var(--font-sans); color: var(--orange-deep); text-decoration: none; }
.td-page .td-bar { bottom: 0; }

/* ---------- tour detail: columns, booking card / bottom sheet, story map (amendment 2026-10-02) ---------- */
.td-side { min-width: 0; }
.td-book-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
html.bw-lock, html.bw-lock body { overflow: hidden; }
.bw-backdrop { display: none; }

/* phone + tablet: the booking form is a bottom sheet */
@media (max-width: 1024px) {
  .td-book {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; flex-direction: column;
    width: 100%; max-width: 560px; height: min(88dvh, 720px); margin: 0 auto; border-radius: 26px 26px 0 0; background: var(--white);
    box-shadow: 0 -14px 60px rgba(20, 12, 8, .34); transform: translateY(105%); visibility: hidden;
    transition: transform .36s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .36s;
  }
  .td-book.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .bw-backdrop { display: block; position: fixed; inset: 0; z-index: 139; background: rgba(26, 20, 15, .52); opacity: 0; pointer-events: none; transition: opacity .3s ease; touch-action: none; }
  .bw-backdrop.is-open { opacity: 1; pointer-events: auto; }
}
/* desktop: sticky card in the right column of the sheet */
@media (min-width: 1025px) {
  .tsheet-inner, .td-page { max-width: 1240px; }
  .td-hero { min-height: 400px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .td-hero-text { padding-top: 140px; }
  .td-cols { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 0 40px; align-items: start; padding: 0 var(--gutter); }
  .td-main .td-sec { padding-left: 0; padding-right: 0; }
  .td-side { position: sticky; top: 16px; padding: 18px 0; }
  .td-book { display: flex; flex-direction: column; max-height: calc(100vh - 140px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
  .td-bar { display: none; }
}

/* ---------- story map ---------- */
.sm { display: grid; gap: 14px; }
.sm-map-box { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #E4EDEF; box-shadow: var(--shadow-md); }
.sm-map-box > .td-minimap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-svg, .sm-lead, .sm-pins { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-lead, .sm-pins { pointer-events: none; }
.sm-lead line { stroke: var(--ink); stroke-width: 1.5; stroke-opacity: .55; }
.sm-lead circle { fill: var(--ink); fill-opacity: .7; }
.sm-route-halo { fill: none; stroke: #FFFDF4; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.sm-route-ghost { fill: none; stroke: var(--orange-deep); stroke-linecap: round; opacity: .55; }
.sm-route-done { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; }
.sm-svg .tm-label, .sm-svg .tm-landmark text, .td-minimap-svg .tm-label, .td-minimap-svg .tm-landmark text { stroke: #FFFDF4; }
.sm-pin {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; font-family: var(--font-sans); will-change: transform;
}
.sm-pin::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }   /* 46px touch target */
.sm-pin-n {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange-btn); border: 2.5px solid #FFFDF4;
  color: var(--white); font: 800 .8rem/1 var(--font-sans); box-shadow: 0 3px 10px rgba(42, 31, 26, .35); transition: transform .28s cubic-bezier(.3, 1.4, .5, 1), background .25s, opacity .25s;
}
.sm-pin.is-passed .sm-pin-n { background: var(--orange-deep); }
.sm-pin.is-ahead .sm-pin-n { opacity: .72; }
.sm-pin.is-hover .sm-pin-n { transform: scale(1.18); }
.sm-pin.is-active { z-index: 5; }
.sm-pin.is-active .sm-pin-n { transform: scale(1.32); background: var(--ink); opacity: 1; }
.sm-pin.is-active .sm-pin-n::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orange); animation: sm-ping 1.8s ease-out infinite; }
@keyframes sm-ping { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.sm-pin:focus-visible { outline: none; } .sm-pin:focus-visible .sm-pin-n { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
.sm-pin-label {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--white);
  font: 600 .74rem/1.2 var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.sm-pin.is-left .sm-pin-label { left: auto; right: calc(100% + 8px); transform: translateY(-50%) translateX(4px); }
.sm-pin.is-active .sm-pin-label, .sm-pin.is-hover .sm-pin-label, .sm--labels .sm-pin .sm-pin-label { opacity: 1; transform: translateY(-50%); }
.sm-overview {
  position: absolute; top: 10px; right: 10px; z-index: 6; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 253, 244, .94);
  box-shadow: var(--shadow-md); color: var(--ink); font: 600 .78rem var(--font-sans); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sm-overview:hover { background: var(--white); }
.sm-overview:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sm-stops { margin: 0; padding: 0; list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding: 0 var(--gutter); }
.sm-stops::-webkit-scrollbar { display: none; }
.sm-stop {
  position: relative; flex: 0 0 82%; scroll-snap-align: center; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px; background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; outline: none; transition: border-color .25s, box-shadow .25s, transform .25s;
}
.sm-stop.is-hover { border-color: var(--orange-soft); }
.sm-stop.is-active { border-color: var(--orange); box-shadow: 0 12px 30px rgba(232, 116, 26, .2); }
.sm-stop:focus-visible { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
.sm-num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-btn); color: var(--white); font: 800 .8rem var(--font-sans); transition: background .25s; }
.sm-stop.is-active .sm-num { background: var(--ink); }
.sm-body { min-width: 0; }
.sm-name { margin: 3px 0 6px; font: 700 1.06rem/1.25 var(--font-serif); color: var(--ink); }
.sm-quote { margin: 0; font: italic .93rem/1.5 var(--font-serif); color: var(--text); }
.sm-quote-by { display: block; margin-bottom: 3px; font: 600 .66rem var(--font-sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }
.sm-blog { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px; border-radius: 12px; background: var(--cream); color: var(--ink); text-decoration: none; transition: background .2s; }
.sm-blog:hover { background: var(--cream-deep); }
.sm-blog:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sm-blog img { flex: none; width: 78px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--cream-deep); }
.sm-blog-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-blog-t b { font: 600 .82rem/1.25 var(--font-sans); }
.sm-blog-t i { font: 600 .78rem var(--font-sans); font-style: normal; color: var(--orange-deep); }
.sm-dots { display: flex; justify-content: center; gap: 5px; margin-top: -2px; }
.sm-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .25s, background .25s; }
.sm-dots span.is-active { width: 18px; background: var(--orange); }

@media (min-width: 861px) {
  .sm { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .sm-mapcol { position: sticky; top: 16px; }
  .sm-map-box { aspect-ratio: auto; height: min(580px, calc(100vh - 170px)); min-height: 340px; }
  .sm-stops { display: flex; flex-direction: column; gap: 14px; overflow: visible; scroll-snap-type: none; margin: 0; padding: 12vh 0 18vh; }
  .sm-stop { flex: none; padding: 16px; }
  .sm-stop:hover { border-color: var(--orange-soft); }
  .sm-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-pin-n, .sm-pin-label, .sm-stop, .td-book, .bw-backdrop { transition: none; }
  .sm-pin.is-active .sm-pin-n::after { animation: none; }
}

/* ---------- blog: "visítalo con Marina" card + share button ---------- */
.post-tours {
  position: relative; overflow: hidden;
  margin-top: 40px; padding: 26px 28px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--orange-soft) 38%, var(--cream)) 0%, var(--cream-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--line));
  box-shadow: var(--shadow-md);
}
.post-tours::before {                      /* warm sun in the corner */
  content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange) 35%, transparent), transparent 70%);
  pointer-events: none;
}
.post-tours h2 { margin: 0 0 6px; color: var(--ink); }
.post-tours p { margin: 0 0 14px; color: var(--text); }
.post-tours ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.post-tours li a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--white); color: var(--orange-deep); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  transition: transform var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.post-tours li a::after { content: '→'; transition: transform var(--transition); }
.post-tours li a:hover, .post-tours li a:focus-visible { background: var(--orange-btn); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-tours li a:hover::after { transform: translateX(3px); }

.share-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 0.95rem var(--font-sans); color: var(--white);
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--orange) 35%, transparent);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--orange) 45%, transparent); }
.share-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--orange) 45%, transparent); outline-offset: 3px; }
.share-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn .share-ico circle { fill: currentColor; stroke: none; }
.share-btn .share-check { display: none; stroke-dasharray: 24; stroke-dashoffset: 24; }
.share-btn.is-tap { animation: sharePress 360ms ease; }
.share-btn.is-copied { background: linear-gradient(135deg, #1f9d55 0%, var(--success) 100%); box-shadow: 0 8px 20px rgba(20,131,59,.35); animation: sharePop 520ms cubic-bezier(.3,1.6,.5,1); }
.share-btn.is-copied .share-ico { display: none; }
.share-btn.is-copied .share-check { display: block; animation: shareDraw 420ms 120ms ease forwards; }
@keyframes sharePress { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes sharePop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shareDraw { to { stroke-dashoffset: 0; } }
.share-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .share-btn, .share-btn.is-tap, .share-btn.is-copied, .share-btn .share-check { animation: none !important; transition: none; } .share-btn.is-copied .share-check { stroke-dashoffset: 0; } }

/* Van rule (transport tours): two-level price line on cards, composer note */
.tx-card-van { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink); }
.cp-van-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.04); font-size: .88rem; line-height: 1.45; }
.cp-van-note.is-block { background: rgba(190,40,40,.08); color: #8a1f1f; }

/* Instagram @valenciaconmarina: footer line, homepage guide button, blog share row */
.ig-glyph { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-glyph .ig-dot { fill: currentColor; stroke: none; }
.footer-col a.ig-link, .j-footer a.ig-link { display: inline-flex; align-items: center; gap: 8px; }
.ig-pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 999px; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 10px 28px rgba(16, 42, 67, .18); transition: transform .2s ease, box-shadow .2s ease; }
.ig-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16, 42, 67, .26); color: var(--ink); }
.ig-pill:focus-visible { outline: 3px solid color-mix(in srgb, var(--orange) 45%, transparent); outline-offset: 3px; }
.ig-pill-icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ig-pill-icon .ig-glyph { width: 22px; height: 22px; }
.ig-pill-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; font-family: var(--font-sans); }
.ig-pill-text small { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #6f6258; }
.ig-pill-text b { font-size: 17px; font-weight: 700; }
.j-guide-ig { margin-top: 26px; }
.ig-pill.is-sm { gap: 10px; padding: 5px 18px 5px 5px; margin-left: 10px; vertical-align: middle; box-shadow: 0 6px 18px rgba(42, 31, 26, .14); border: 1px solid var(--line); }
.ig-pill.is-sm .ig-pill-icon { width: 34px; height: 34px; }
.ig-pill.is-sm .ig-pill-icon .ig-glyph { width: 18px; height: 18px; }
.ig-pill.is-sm .ig-pill-text b { font-size: 15px; font-weight: 600; }
@media (max-width: 520px) { .ig-pill.is-sm { margin: 12px 0 0; } }
.prose a.ig-pill, .prose a.ig-pill:hover, a.ig-pill:visited { color: var(--ink); text-decoration: none; }   /* inside articles .prose a would make it an orange underlined link */

/* keyboard focus: one ring that shows on light and dark backgrounds. Several component rules set
   outline:none and only restyle colour; !important keeps this ring from losing to them. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink) !important; outline-offset: 2px; box-shadow: 0 0 0 5px var(--white);
}