/*
Ardea Landing styles.
The Cormorant Garamond + DM Sans font pair is enqueued from functions.php.
*/

:root {
  --ivory: #f3f0e8;
  --night: #17232d;
  --reed: #45564d;
  --sand: #c9bda8;
  --champagne: #b49a6a;
  --white: #fffdf7;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;

  /* CTA palette: the single place to switch the accent of the primary buttons.
     Currently the secondary green (--reed); pending Brand confirmation. */
  --cta-bg: var(--reed);
  --cta-bg-hover: var(--night);
  --cta-fg: var(--ivory);
  --cta-border: var(--reed);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--night);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.section-pad { padding-block: 140px; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 98px;
  padding: 0 4.3vw;
  display: flex;
  align-items: center;
  gap: 36px;
  color: var(--ivory);
  border-bottom: 1px solid rgba(243, 240, 232, .22);
}
.brand { width: 174px; margin-right: auto; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; gap: clamp(22px, 2.1vw, 40px); }
.desktop-nav a { font-size: 13px; letter-spacing: .04em; }
.desktop-nav a::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 4px;
  background: var(--champagne);
  transition: width .3s ease;
}
.desktop-nav a:hover::after { width: 100%; }
.header-cta {
  margin-left: 18px;
  padding: 13px 19px;
  border: 1px solid rgba(243, 240, 232, .7);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.header-cta:hover { background: var(--ivory); color: var(--night); }
/* The pill fits on one line: with the icon in front, a cramped header broke the
   label into two lines ("AGENDAR" / "CITA"). */
.header-cta { white-space: nowrap; }
.mobile-nav { display: none; }

.hero {
  position: relative;
  min-height: 820px;
  height: 100svh;
  color: var(--ivory);
  overflow: hidden;
}
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 48%; animation: hero-in 1.8s ease-out both; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(12, 23, 30, .74) 0%, rgba(12, 23, 30, .34) 50%, rgba(12, 23, 30, .16) 100%),
    linear-gradient(0deg, rgba(10, 20, 27, .45) 0%, transparent 40%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: max(310px, 24vh);
}
.eyebrow {
  margin: 0 0 24px;
  color: var(--champagne);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow-light { color: #e1d1ae; }
/* El antetítulo puede vivir dentro del encabezado (lo pide SEO, para que el H1
   y los H2 lleven la referencia geográfica y el tema). Como span sería inline y
   se pegaría al titular, así que recupera su línea propia. La interlínea es la
   que heredaba antes, cuando era un <p> suelto en la sección (1.55 del body), no
   la .98 de los titulares: así el antetítulo mide exactamente lo mismo que
   antes y el cambio es solo de marcado. El margen lo sigue poniendo .eyebrow,
   que además es quien lo reduce en el modo compacto. */
h1 > .eyebrow,
h2 > .eyebrow,
h3 > .eyebrow {
  display: block;
  line-height: 1.55;
}
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .98; }
h1 { max-width: 850px; font-size: clamp(68px, 7.7vw, 118px); letter-spacing: -.035em; }
h2 { font-size: clamp(52px, 5.8vw, 82px); letter-spacing: -.035em; }
h3 { font-size: clamp(42px, 4vw, 62px); }
.hero-copy {
  max-width: 520px;
  margin: 32px 0 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
}
.hero-actions { margin-top: 42px; display: flex; align-items: center; gap: 34px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 27px;
  border: 1px solid var(--night);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.button-light { border-color: var(--ivory); background: var(--ivory); color: var(--night); }
.button-light:hover { border-color: var(--champagne); background: var(--champagne); }
.text-link { display: inline-flex; gap: 30px; align-items: center; border-bottom: 1px solid rgba(23, 35, 45, .4); padding-bottom: 5px; font-size: 13px; }
.text-link span { transition: transform .25s ease; }
.text-link:hover span { transform: translate(3px, -3px); }
.text-link-light { color: var(--ivory); border-color: rgba(243, 240, 232, .55); }
.scroll-cue {
  position: absolute;
  z-index: 2;
  right: 4.3vw;
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.scroll-cue i { position: relative; width: 1px; height: 56px; background: rgba(243, 240, 232, .45); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--ivory); transform: translateY(-100%); animation: scroll-line 2.2s infinite; }

.intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 9vw; align-items: start; }
.intro-grid h2 { max-width: 590px; }
.intro-copy { padding-top: 40px; max-width: 510px; }
.intro-copy p { color: rgba(23, 35, 45, .74); font-weight: 300; }
.intro-copy .lead { margin-top: 0; color: var(--night); font-family: var(--serif); font-size: 28px; line-height: 1.35; }
.values-strip {
  margin-top: 110px;
  padding-block: 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block: 1px solid rgba(23, 35, 45, .16);
  color: var(--reed);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.values-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--champagne); }
.project-composition {
  margin-top: 130px;
  display: grid;
  grid-template-columns: 1.18fr .68fr;
  grid-template-rows: auto auto;
  gap: 30px;
  align-items: end;
}
.project-composition figure { margin: 0; overflow: hidden; }
.project-composition img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.project-composition figure:hover img { transform: scale(1.025); }
.project-wide { height: 560px; }
.project-card { padding: 30px 34px 28px; }
.project-card p:not(.eyebrow) { max-width: 390px; margin: 26px 0 34px; color: rgba(23,35,45,.68); font-weight: 300; }
.project-portrait { grid-column: 2; height: 520px; margin-top: -120px !important; }
.image-reveal { background: var(--sand); }

.life-section { background: var(--night); color: var(--ivory); }
.life-heading { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 10vw; align-items: end; }
.life-heading > .eyebrow { grid-column: 1 / -1; }
.life-heading h2 em { color: var(--sand); font-weight: 400; }
.life-heading > p:last-child { margin: 0 0 8px; color: rgba(243,240,232,.65); font-weight: 300; line-height: 1.8; }
.amenity-grid {
  margin-top: 110px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(243,240,232,.18);
}
.amenity-grid article { min-height: 275px; padding: 32px 30px; border-right: 1px solid rgba(243,240,232,.18); }
.amenity-grid article:first-child { padding-left: 0; }
.amenity-grid article:last-child { border-right: 0; padding-right: 0; }
.amenity-grid span, .location-points span { color: var(--champagne); font-size: 10px; letter-spacing: .12em; }
.amenity-grid h3 { margin-top: 62px; font-size: 34px; }
.amenity-grid p { max-width: 245px; margin: 20px 0 0; color: rgba(243,240,232,.58); font-size: 13px; font-weight: 300; }
.life-composition { margin-top: 125px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }
.life-composition figure { margin: 0; overflow: hidden; }
.life-composition img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.life-composition figure:hover img { transform: scale(1.025); }
.life-main { height: 720px; }
.life-detail { padding-top: 65px; }
.life-quote { margin: 0 0 70px; font-family: var(--serif); font-size: clamp(33px, 3vw, 48px); font-weight: 400; line-height: 1.12; }
.life-detail figure { height: 375px; }

.proximity-section { background: #ebe5d9; overflow: hidden; }
.proximity-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: end; }
.proximity-intro h2 em { color: var(--reed); font-weight: 400; }
.proximity-intro > p {
  max-width: 500px;
  margin: 0 0 8px;
  color: rgba(23,35,45,.66);
  font-weight: 300;
  line-height: 1.8;
}
.proximity-board {
  min-height: 535px;
  margin-top: 95px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  background: var(--ivory);
  box-shadow: 0 28px 70px rgba(23,35,45,.07);
}
.proximity-origin {
  position: relative;
  padding: 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--reed);
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
}
.proximity-origin::before,
.proximity-origin::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(243,240,232,.15);
  border-radius: 50%;
}
.proximity-origin::before { width: 440px; height: 440px; top: -250px; right: -240px; }
.proximity-origin::after { width: 230px; height: 230px; top: -95px; right: -120px; }
.origin-marker {
  position: absolute;
  top: 52px;
  left: 54px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243,240,232,.4);
  border-radius: 50%;
}
.origin-marker i { width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 7px rgba(180,154,106,.16); }
.proximity-origin > p { margin: 0 0 8px; color: var(--champagne); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.proximity-origin h3 { font-size: clamp(65px, 6vw, 92px); }
.proximity-origin > span:last-child { margin-top: 14px; color: rgba(243,240,232,.58); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.proximity-services { display: grid; grid-template-columns: 1fr 1fr; }
.proximity-services article { min-height: 292px; padding: 38px 42px 42px; border-right: 1px solid rgba(23,35,45,.12); border-bottom: 1px solid rgba(23,35,45,.12); }
.proximity-services article:nth-child(2n) { border-right: 0; }
.proximity-services article:nth-child(n+3) { border-bottom: 0; }
.service-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.service-card-top > span { padding-top: 7px; color: var(--champagne); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.service-time {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180,154,106,.58);
  border-radius: 50%;
  color: var(--reed);
}
.service-time strong { font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: .92; letter-spacing: -.04em; }
.service-time small { margin-top: 7px; color: rgba(23,35,45,.5); font-size: 7px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.proximity-services h3 { max-width: 320px; margin-top: 26px; font-size: clamp(29px, 2.4vw, 39px); line-height: 1.02; }
.proximity-services p { margin: 18px 0 0; color: rgba(23,35,45,.57); font-size: 12px; font-weight: 300; }
.proximity-daily {
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.proximity-daily span { color: var(--champagne); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.proximity-daily p { margin: 0; font-family: var(--serif); font-size: 23px; color: var(--reed); }
.proximity-times-note { margin-top: 16px; color: rgba(23,35,45,.42); font-size: 9px; font-weight: 300; letter-spacing: .03em; text-align: right; }

.gallery-section { padding: 50px 0 125px; }
.gallery-heading { padding-bottom: 72px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; align-items: end; }
.gallery-heading > p { max-width: 420px; margin: 0 0 4px; color: rgba(23,35,45,.65); font-weight: 300; }
/* Render swap: the figures crop because the grid keeps its own rhythm. These
   knobs change the crop policy without touching the layout: --gallery-fit
   switches between filling the frame (cover) and showing the whole render
   (contain, over the sand background), and every figure has a focal point.
   Tune them when the definitive renders arrive. */
.gallery-grid {
  width: 100%;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-rows: 480px 580px;
  gap: 18px;
  --gallery-fit: cover;
  --gallery-focus-one: 56% center;
  --gallery-focus-two: center;
  --gallery-focus-three: center;
  /* The fourth tile is a full-width band, much wider than the tall pool render
     it carries, so the focus sits low: the pool fills the crop instead of the
     façade above it. */
  --gallery-focus-four: center 88%;
  --gallery-focus-padel: center;
}
.gallery-grid figure { margin: 0; overflow: hidden; background: var(--sand); }
.gallery-grid img { width: 100%; height: 100%; object-fit: var(--gallery-fit); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.gallery-grid figure:hover img { transform: scale(1.025); }
.gallery-one { grid-row: 1 / 3; }
.gallery-one img { object-position: var(--gallery-focus-one); }
.gallery-two img { object-position: var(--gallery-focus-two); }
.gallery-three img { object-position: var(--gallery-focus-three); }
.gallery-three { grid-column: 2; }
.gallery-padel img { object-position: var(--gallery-focus-padel); }
.render-note { margin-top: 16px; color: rgba(23,35,45,.45); font-size: 10px; text-align: right; }

.contact-section { background: #ebe5d9; }
.contact-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 9vw; align-items: start; }
.contact-intro { position: sticky; top: 60px; }
.contact-intro h2 { max-width: 570px; }
.contact-intro > p:not(.eyebrow) { max-width: 470px; margin-top: 38px; color: rgba(23,35,45,.65); font-weight: 300; }
.button-night { border-color: var(--cta-border); background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; }
.button-night:hover { border-color: var(--cta-bg-hover); background: var(--cta-bg-hover); }

.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; }
.faq-grid h2 { max-width: 500px; }
.faq-list { border-top: 1px solid rgba(23,35,45,.2); }
.faq-list details { border-bottom: 1px solid rgba(23,35,45,.2); }
.faq-list summary { list-style: none; padding: 28px 0; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; cursor: pointer; font-size: 15px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--champagne); font-size: 12px; }
.faq-list summary i { font-family: var(--serif); font-size: 27px; font-style: normal; font-weight: 300; transition: transform .3s ease; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details > p { margin: 0; padding: 0 40px 30px 54px; color: rgba(23,35,45,.65); font-size: 13px; font-weight: 300; }

.site-footer-full { padding-top: 95px; background: var(--night); color: var(--ivory); }
.footer-main { padding-bottom: 85px; display: grid; grid-template-columns: 1.2fr .8fr .65fr; gap: 8vw; }
.footer-main img { width: 185px; }
.footer-main > div:first-child p { margin-top: 24px; color: rgba(243,240,232,.55); font-family: var(--serif); font-size: 21px; font-style: italic; }
.footer-main nav { display: grid; gap: 13px; align-content: start; font-size: 12px; color: rgba(243,240,232,.72); }
.footer-main nav a:hover { color: var(--champagne); }
.footer-location p { margin: 0; font-family: var(--serif); font-size: 25px; }
.footer-location span { color: rgba(243,240,232,.5); font-size: 11px; }
.footer-bottom { min-height: 80px; padding-block: 24px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 25px; align-items: center; border-top: 1px solid rgba(243,240,232,.14); color: rgba(243,240,232,.4); font-size: 9px; letter-spacing: .04em; }
.footer-bottom div { display: flex; gap: 22px; }
.footer-bottom > p:last-child { text-align: right; }

@keyframes hero-in { from { transform: scale(1.06); filter: brightness(.72); } to { transform: scale(1); filter: brightness(1); } }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 45%, 100% { transform: translateY(100%); } }

@media (max-width: 980px) {
  .shell { width: min(calc(100% - 48px), 760px); }
  .desktop-nav, .header-cta { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary { list-style: none; width: 34px; height: 34px; display: grid; align-content: center; gap: 7px; cursor: pointer; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { display: block; height: 1px; background: var(--ivory); }
  .mobile-nav-panel { position: absolute; top: 98px; left: 0; right: 0; padding: 28px 24px; display: grid; gap: 20px; background: var(--night); }
  .intro-grid { grid-template-columns: 1fr; gap: 35px; }
  .intro-copy { padding-top: 0; }
  .project-composition { grid-template-columns: 1fr 1fr; }
  .project-wide { grid-column: 1 / -1; }
  .project-portrait { margin-top: 0 !important; }
  .life-heading, .proximity-intro, .contact-grid, .faq-grid { grid-template-columns: 1fr; gap: 55px; }
  .proximity-board { grid-template-columns: 1fr; }
  .proximity-origin { min-height: 340px; }
  .amenity-grid { grid-template-columns: 1fr 1fr; }
  .amenity-grid article { border-bottom: 1px solid rgba(243,240,232,.18); }
  .amenity-grid article:nth-child(2) { border-right: 0; }
  .amenity-grid article:nth-child(3), .amenity-grid article:nth-child(4) { border-bottom: 0; }
  .life-composition { grid-template-columns: 1fr .8fr; gap: 30px; }
  .gallery-grid { grid-template-rows: 420px 500px; }
  .contact-intro { position: static; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-location { grid-column: 2; }
}

@media (max-width: 680px) {
  .shell { width: calc(100% - 36px); }
  .section-pad { padding-block: 90px; }
  .site-header { height: 78px; padding-inline: 18px; }
  .brand { width: 138px; }
  .mobile-nav-panel { top: 78px; }
  .hero { min-height: 720px; }
  .hero-image { object-position: 57% center; }
  .hero-content { padding-top: 180px; }
  h1 { font-size: clamp(57px, 17vw, 76px); }
  .hero-copy { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 24px; }
  .scroll-cue { display: none; }
  .values-strip { margin-top: 70px; gap: 8px; }
  .values-strip span { font-size: 9px; letter-spacing: .12em; }
  .project-composition { margin-top: 80px; grid-template-columns: 1fr; gap: 24px; }
  .project-wide, .project-portrait { grid-column: 1; height: 430px; }
  .project-card { padding: 22px 0 38px; }
  .life-heading > p:last-child { margin-top: 24px; }
  .amenity-grid { margin-top: 70px; grid-template-columns: 1fr; }
  .amenity-grid article, .amenity-grid article:first-child, .amenity-grid article:last-child { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(243,240,232,.18); }
  .amenity-grid article:last-child { border-bottom: 0; }
  .amenity-grid h3 { margin-top: 24px; }
  .life-composition { margin-top: 70px; grid-template-columns: 1fr; }
  .life-main { height: 510px; }
  .life-detail { padding-top: 20px; }
  .life-detail figure { height: 350px; }
  .proximity-board { margin-top: 65px; }
  .proximity-origin { min-height: 320px; padding: 34px; }
  .origin-marker { top: 34px; left: 34px; }
  .proximity-services { grid-template-columns: 1fr; }
  .proximity-services article,
  .proximity-services article:nth-child(2n),
  .proximity-services article:nth-child(n+3) { min-height: auto; padding: 34px; border-right: 0; border-bottom: 1px solid rgba(23,35,45,.12); }
  .proximity-services article:last-child { border-bottom: 0; }
  .proximity-services h3 { margin-top: 30px; }
  .service-time { width: 72px; height: 72px; flex-basis: 72px; }
  .proximity-daily { align-items: flex-start; flex-direction: column; }
  .proximity-daily p { font-size: 20px; }
  .proximity-times-note { text-align: left; }
  .gallery-section { padding-top: 20px; }
  .gallery-heading { grid-template-columns: 1fr; gap: 28px; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 430px); gap: 10px; }
  .gallery-one, .gallery-three { grid-column: 1; grid-row: auto; }
  .render-note { text-align: left; }
  .faq-list summary { grid-template-columns: 30px 1fr auto; }
  .faq-list details > p { padding-left: 42px; }
  .footer-main { grid-template-columns: 1fr; padding-bottom: 55px; }
  .footer-main nav, .footer-location { grid-column: 1; }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom > p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =========================================================
   ARDEA · ActualizaciÓn funnel 3D + mapa comercial
   ========================================================= */

.anchor-target {
  position: absolute;
  top: -28px;
  pointer-events: none;
}

.location-map {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 39%, rgba(180,154,106,.18), transparent 22%),
    linear-gradient(145deg, #e9e4d9 0%, #dcd5c8 100%);
  color: var(--night);
  isolation: isolate;
}

.contact-section {
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -250px;
  top: -260px;
  border: 1px solid rgba(69,86,77,.09);
  border-radius: 50%;
}

.contact-intro { top: 42px; }
.contact-intro > p:last-of-type {
  max-width: 500px;
  margin-top: 32px;
}

.access-benefits {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.access-benefits span {
  padding: 8px 11px;
  border: 1px solid rgba(23,35,45,.18);
  color: rgba(23,35,45,.7);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.access-preview {
  position: relative;
  height: 280px;
  margin: 45px 0 0;
  overflow: hidden;
  background: var(--sand);
}
.access-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23,35,45,.72), rgba(23,35,45,.02) 65%);
}
.access-preview img { width: 100%; height: 100%; object-fit: cover; }
.access-preview figcaption {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 22px;
  color: var(--ivory);
}
.access-preview figcaption span {
  display: block;
  margin-bottom: 4px;
  color: #e1d1ae;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.access-preview figcaption strong {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 400;
}

.contact-preview { margin: 0; }

@media (max-width: 980px) {
  .location-map { min-height: 460px; }
}

@media (max-width: 680px) {
  .location-map { min-height: 430px; }

  .contact-grid { gap: 42px; }
  .access-preview { height: 245px; margin-top: 34px; }
  .contact-preview { margin-top: 0; }
  .contact-actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .contact-actions .button { width: 100%; }
  .contact-actions p { max-width: 100%; }
}

/* PLANOS DEL PROYECTO */
.plans-section {
  position: relative;
  overflow: hidden;
  background: #f0ede5;
}
.plans-section::before {
  content: "";
  position: absolute;
  left: -220px;
  top: 90px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(69,86,77,.08);
  border-radius: 50%;
  pointer-events: none;
}
/* Section headline. It carries the divider line and only spans the first
   column, so the line stops where the labelling block begins. */
.plans-heading {
  position: relative;
  z-index: 1;
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(23,35,45,.12);
}
.plans-heading h2 em {
  color: var(--reed);
  font-weight: 400;
}
/* Headline, selector and labelling share the viewer's columns so the labels stay
   aligned with the info panel they describe. Phones stack in markup order
   (headline, tabs, labels); on desktop the labels rise to the headline row. */
.plans-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, .62fr);
  column-gap: clamp(48px, 6vw, 90px);
}
/* Label block: variant row, typology kicker, unit location and headline. */
.plans-labels .plan-location { margin: 16px 0 18px; line-height: 1.5; }
.plan-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, .62fr);
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
  padding-top: 72px;
}
.plan-visual {
  position: relative;
}
.plan-index {
  position: absolute;
  z-index: 2;
  left: -18px;
  top: -22px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-family: var(--serif);
  font-size: 22px;
}
.plan-visual figure {
  margin: 0;
  padding: clamp(16px, 2vw, 28px);
  background: #fff;
  box-shadow: 0 24px 70px rgba(23,35,45,.09);
}
.plan-visual img {
  width: 100%;
  height: auto;
}
.plan-info {
  padding: 18px 0;
}
.plans-labels h3 {
  max-width: 500px;
  font-size: clamp(42px, 4vw, 60px);
}
/* Ubicacion de la unidad del plano: portal, planta y puerta. */
.plan-location {
  margin: 8px 0 18px;
  color: rgba(23,35,45,.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Copy of the plan panel. It opens the panel now that the headline lives in the
   labelling block, so it carries no top margin. */
.plan-info > p:not(.eyebrow):not(.plan-disclaimer) {
  max-width: 470px;
  margin: 0;
  color: rgba(23,35,45,.63);
  font-weight: 300;
  line-height: 1.8;
}
/* Ficha tecnica: lista compacta, sin filetes ni punteados. La etiqueta ocupa
   una columna fija a la izquierda y la cifra arranca justo despues, en serif y
   grande: cada dato se lee como una pareja y las cifras forman columna. */
.plan-data {
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.plan-data div {
  display: flex;
  /* Centrada: en filas tan juntas, una etiqueta apoyada en la base de la cifra
     queda colgando por debajo de su numero y parece de la fila siguiente. */
  align-items: center;
  gap: 16px;
}
/* Row without data yet (surface, bathrooms, price): out of the list. */
.plan-data div[hidden] { display: none; }
.plan-data dt {
  flex: 0 0 150px;
  color: var(--champagne);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.plan-data dd {
  flex: 1 1 auto;
  margin: 0;
  color: var(--night);
  font-family: var(--serif);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1;
  text-align: left;
}
.plan-actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.plan-disclaimer {
  max-width: 470px;
  margin: 28px 0 0;
  color: rgba(23,35,45,.38);
  font-size: 9px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .plans-layout { grid-template-columns: 1fr; column-gap: 0; }
  .plan-featured { grid-template-columns: 1fr; gap: 52px; }
  .plan-info { max-width: 650px; }
}

@media (max-width: 680px) {
  .plans-section { padding-block: 92px; }
  .plans-heading { padding-bottom: 48px; }
  .plan-featured { padding-top: 48px; gap: 42px; }
  .plan-index { left: -5px; top: -18px; width: 48px; height: 48px; font-size: 19px; }
  .plan-visual figure { padding: 10px; }
  .plans-labels h3 { font-size: 42px; }
  .plan-info > p:not(.eyebrow):not(.plan-disclaimer) { line-height: 1.5; }
  .plan-data { margin-top: 32px; }
  .plan-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .plan-actions .button { width: 100%; }
  .plan-actions .text-link { align-self: flex-start; }
}

/* V4 · INTEGRACIÓN PROYECTO / VIDA ARDEA */
.life-project-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 9vw;
  align-items: start;
}
.life-project-intro h2 { max-width: 620px; }
.life-project-copy { max-width: 520px; padding-top: 38px; }
.life-project-copy p { margin: 0; color: rgba(243,240,232,.62); font-weight: 300; line-height: 1.78; }
.life-project-copy .life-project-lead {
  margin-bottom: 24px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.36;
}
.life-values {
  margin-top: 88px;
  padding-block: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block: 1px solid rgba(243,240,232,.16);
  color: var(--champagne);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.life-values i { width: 4px; height: 4px; border-radius: 50%; background: rgba(243,240,232,.38); }
.life-project-editorial {
  margin-top: 86px;
  display: grid;
  grid-template-columns: 1.08fr .42fr .5fr;
  grid-template-rows: 180px 360px;
  gap: 24px;
  align-items: stretch;
}
.life-project-editorial figure { margin: 0; overflow: hidden; }
.life-project-editorial img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.life-project-editorial figure:hover img { transform: scale(1.025); }
.life-project-wide { grid-row: 1 / 3; }
.life-project-card {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(243,240,232,.14);
  background: rgba(255,255,255,.025);
}
.life-project-card h3 { margin-top: 18px; font-size: clamp(34px, 3vw, 48px); }
.life-project-card > p:not(.eyebrow) { margin: 22px 0 32px; color: rgba(243,240,232,.58); font-size: 13px; font-weight: 300; line-height: 1.75; }
.life-project-pool { grid-column: 3; grid-row: 1 / 3; }
.life-divider { margin-top: 130px; margin-bottom: 120px; border-top: 1px solid rgba(243,240,232,.16); }

/* V4 · UBICACIÓN REDISEÑADA */
.proximity-intro-redesigned { margin-bottom: 82px; }
.proximity-layout {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(340px,.88fr);
  gap: 18px;
  align-items: stretch;
}
.proximity-map-panel {
  min-width: 0;
  background: var(--ivory);
  box-shadow: 0 24px 65px rgba(23,35,45,.07);
}
.map-panel-head {
  min-height: 220px;
  padding: 38px 42px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  background: var(--night);
  color: var(--ivory);
}
.map-panel-head p { margin: 0 0 7px; color: var(--champagne); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.map-panel-head h3 { font-size: clamp(54px,5vw,74px); line-height: .9; }
.map-panel-head > div:first-child > span:last-child { display: block; margin-top: 14px; color: rgba(243,240,232,.55); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.map-panel-legend { display: grid; gap: 10px; flex: 0 0 auto; padding-bottom: 4px; }
.map-panel-legend span { display: flex; align-items: center; gap: 9px; color: rgba(243,240,232,.62); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.map-key { width: 8px; height: 8px; border-radius: 50%; }
.map-key-project { background: var(--champagne); }
.map-key-office { border: 1px solid var(--champagne); background: transparent; }
.location-map-editorial { min-height: 470px; border: 0; }
.proximity-connections {
  display: grid;
  grid-template-rows: repeat(4,1fr);
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(23,35,45,.1);
}
.proximity-connections article {
  padding: 30px 34px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(23,35,45,.1);
  transition: background .3s ease, transform .3s ease;
}
.proximity-connections article:last-child { border-bottom: 0; }
.proximity-connections article:hover { background: rgba(255,255,255,.7); }
/* Etiqueta del sitio: en linea y encima del icono, sin reservar columna, asi el
   bloque de al lado arranca a la izquierda. */
.connection-meta {
  display: block;
  margin-bottom: 16px;
  color: var(--champagne);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.proximity-connections h3 { font-size: clamp(27px,2vw,35px); line-height: 1; }
.proximity-connections p { margin: 13px 0 0; color: rgba(23,35,45,.54); font-size: 11px; font-weight: 300; line-height: 1.6; }
.proximity-bottomline {
  margin-top: 30px;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px;
  border-top: 1px solid rgba(23,35,45,.12);
}
.proximity-bottomline > div > span { color: var(--champagne); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.proximity-bottomline > div > p { margin: 9px 0 0; color: var(--reed); font-family: var(--serif); font-size: 22px; }
.proximity-bottomline > p { max-width: 420px; margin: 0; color: rgba(23,35,45,.4); font-size: 10px; line-height: 1.5; text-align: right; }

/* V4 · SELECTOR INTERACTIVO DE PLANOS */
.plan-tabs-wrap {
  padding-top: 36px;
}
.plan-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-tab {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid rgba(23,35,45,.18);
  border-radius: 999px;
  background: transparent;
  color: rgba(23,35,45,.6);
  font: 600 9px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.plan-tab:hover { border-color: var(--reed); color: var(--reed); transform: translateY(-1px); }
.plan-tab.is-active { border-color: var(--night); background: var(--night); color: var(--ivory); }

/* Variantes de una tipologÍa: "2 dormitorios" lleva tres planos y "planta
   baja" dos, asi que bajo las pestañas va la fila que elige el plano. */
.plan-variants { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.plan-variants[hidden] { display: none; }
.plan-variant {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(23,35,45,.18);
  background: none;
  color: rgba(23,35,45,.7);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.plan-variant:hover { border-color: rgba(23,35,45,.4); color: var(--night); }
.plan-variant.is-active { border-color: var(--cta-border); background: var(--cta-bg); color: var(--cta-fg); }
.plan-featured, .plans-labels { transition: opacity .18s ease, transform .18s ease; }
.plan-featured.is-changing, .plans-labels.is-changing { opacity: .3; transform: translateY(5px); }

@media (max-width: 980px) {
  .life-project-intro { grid-template-columns: 1fr; gap: 30px; }
  .life-project-copy { padding-top: 0; }
  .life-project-editorial { grid-template-columns: 1fr 1fr; grid-template-rows: 500px auto; }
  .life-project-wide { grid-column: 1 / -1; grid-row: 1; }
  .life-project-card { grid-column: 1; grid-row: 2; min-height: 360px; }
  .life-project-pool { grid-column: 2; grid-row: 2; min-height: 360px; }
  .proximity-layout { grid-template-columns: 1fr; }
  .proximity-connections { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .proximity-connections article:nth-child(2) { border-right: 0; }
  .proximity-connections article { border-right: 1px solid rgba(23,35,45,.1); }
  .proximity-connections article:nth-child(2n) { border-right: 0; }
  .proximity-connections article:nth-child(n+3) { border-bottom: 0; }
}

@media (max-width: 680px) {
  .life-project-copy .life-project-lead { font-size: 22px; }
  .life-values { margin-top: 58px; gap: 15px; }
  .life-values span { font-size: 8px; }
  .life-project-editorial { margin-top: 58px; grid-template-columns: 1fr; grid-template-rows: auto; gap: 12px; }
  .life-project-wide, .life-project-card, .life-project-pool { grid-column: 1; grid-row: auto; }
  .life-project-wide { height: 430px; }
  .life-project-card { min-height: 330px; padding: 30px 28px; }
  .life-project-pool { height: 390px; min-height: 0; }
  .life-divider { margin-top: 82px; margin-bottom: 80px; }

  .proximity-intro-redesigned { margin-bottom: 52px; }
  .map-panel-head { min-height: 245px; padding: 30px 28px; align-items: flex-start; flex-direction: column; }
  .map-panel-legend { padding-top: 12px; }
  .location-map-editorial { min-height: 420px; }
  .proximity-connections { grid-template-columns: 1fr; }
  .proximity-connections article,
  .proximity-connections article:nth-child(n+3) { padding: 27px 24px; border-right: 0; border-bottom: 1px solid rgba(23,35,45,.1); }
  .proximity-connections article:last-child { border-bottom: 0; }
  .proximity-bottomline { align-items: flex-start; flex-direction: column; }
  .proximity-bottomline > p { text-align: left; }

  .plan-tabs { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
  .plan-tab { min-height: 44px; padding: 0 8px; font-size: 8px; letter-spacing: .07em; }
}

/* =========================================================
   V5 · COMPOSICIÓN COMPACTA · BLOQUES LEGIBLES DE UN VISTAZO
   Objetivo: reducir altura vertical en desktop/laptop sin
   alterar el diseño ni sacrificar contenido.
   ========================================================= */
@media (min-width: 981px) {
  .shell { width: min(1240px, calc(100% - 64px)); }
  .section-pad { padding-block: clamp(58px, 7vh, 82px); }

  /* Header + hero: todo el primer impacto cabe dentro del viewport */
  .site-header { height: 76px; padding-inline: 3.5vw; gap: 28px; }
  .brand { width: 152px; }
  .desktop-nav { gap: clamp(18px, 1.6vw, 30px); }
  .desktop-nav a { font-size: 12px; }
  .header-cta { margin-left: 10px; padding: 11px 16px; }
  .hero { height: 100svh; min-height: 0; }
  .hero-content { padding-top: clamp(145px, 21vh, 190px); }
  h1 { font-size: clamp(58px, 6.4vw, 94px); }
  h2 { font-size: clamp(44px, 4.6vw, 68px); }
  h3 { font-size: clamp(34px, 3.2vw, 52px); }
  .eyebrow { margin-bottom: 16px; }
  .hero-copy { margin-top: 22px; max-width: 490px; font-size: 15px; line-height: 1.65; }
  .hero-actions { margin-top: 28px; }
  .button { min-height: 48px; padding-inline: 23px; }
  .scroll-cue { bottom: 24px; }
  .scroll-cue i { height: 40px; }

  /* UBICACIÓN */
  .proximity-intro-redesigned { margin-bottom: clamp(28px, 4vh, 44px); }
  .proximity-intro { gap: 7vw; }
  .proximity-intro > p { line-height: 1.6; }
  .proximity-layout { grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); }
  .map-panel-head { min-height: 138px; padding: 24px 30px; }
  .map-panel-head h3 { font-size: clamp(44px,4vw,62px); }
  .map-panel-head > div:first-child > span:last-child { margin-top: 8px; }
  .location-map-editorial { min-height: 255px; }
  .map-foot { padding-block: 20px 22px; }
  .map-addresses p { font-size: 17px; }
  .map-delivery { margin-top: 18px; padding-top: 14px; }
  .connection-icon { margin-bottom: 12px; }
  .proximity-connections article { padding: 18px 24px; }
  .proximity-connections h3 { font-size: clamp(23px,1.65vw,29px); }
  .proximity-connections p { margin-top: 8px; line-height: 1.45; }
  .proximity-bottomline { margin-top: 18px; padding-top: 16px; }
  .proximity-bottomline > div > p { margin-top: 5px; font-size: 19px; }

  /* VIDA ARDEA / PROYECTO: misma narrativa, mucho más editorial y compacta */
  .life-project-intro { gap: 6vw; }
  .life-project-copy { padding-top: 12px; }
  .life-project-copy .life-project-lead { margin-bottom: 14px; font-size: clamp(20px,1.65vw,25px); }
  .life-project-copy p { line-height: 1.58; }
  .life-values { margin-top: 36px; padding-block: 15px; }
  .life-project-editorial {
    margin-top: 34px;
    grid-template-columns: 1.08fr .46fr .46fr;
    grid-template-rows: 330px;
    gap: 14px;
  }
  .life-project-wide,
  .life-project-card,
  .life-project-pool { grid-row: 1; }
  .life-project-wide { grid-column: 1; }
  .life-project-card { grid-column: 2; padding: 25px 24px; }
  .life-project-pool { grid-column: 3; }
  .life-project-card h3 { margin-top: 9px; font-size: clamp(29px,2.2vw,38px); }
  .life-project-card > p:not(.eyebrow) { margin: 13px 0 20px; line-height: 1.5; }
  .life-divider { margin-top: 48px; margin-bottom: 44px; }
  .life-heading { column-gap: 7vw; }
  .life-heading > p:last-child { line-height: 1.55; }
  .amenity-grid { margin-top: 32px; }
  .amenity-grid article { min-height: 155px; padding: 20px 22px; }
  .amenity-grid h3 { margin-top: 25px; font-size: 27px; }
  .amenity-grid p { margin-top: 10px; line-height: 1.45; }
  .life-composition { margin-top: 32px; gap: 24px; grid-template-columns: 1.35fr .65fr; }
  .life-main { height: 330px; }
  .life-detail { padding-top: 8px; }
  .life-quote { margin-bottom: 22px; font-size: clamp(27px,2.25vw,36px); }
  .life-detail figure { height: 205px; }

  /* GALERÍA: los cuatro renders de la fila superior, en una sola composición.
     La rejilla en sí la define el bloque de galería, al final del archivo. */
  .gallery-section { padding: clamp(50px,6vh,70px) 0 clamp(58px,7vh,82px); }
  .gallery-heading { padding-bottom: 32px; gap: 7vw; }
  .gallery-grid { gap: 12px; }
  .render-note { margin-top: 10px; }

  /* PLANOS: selector + plano + ficha entran en un único bloque visual */
  .plans-layout { grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr); column-gap: clamp(34px,4vw,58px); }
  .plans-heading { padding-bottom: 30px; }
  .plan-tabs-wrap { padding-top: 18px; }
  .plan-tab { min-height: 36px; padding-inline: 16px; }
  .plan-featured { padding-top: 24px; gap: clamp(34px,4vw,58px); grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr); }
  .plan-visual figure { padding: 12px; }
  .plan-visual img { max-height: 385px; object-fit: contain; }
  .plan-index { width: 46px; height: 46px; left: -10px; top: -12px; font-size: 18px; }
  .plan-info { padding: 0; }
  .plans-labels h3 { font-size: clamp(34px,3vw,46px); }
  .plan-info > p:not(.eyebrow):not(.plan-disclaimer) { line-height: 1.5; }
  .plan-data { margin-top: 22px; }
  .plan-actions { margin-top: 22px; }
  .plan-disclaimer { margin-top: 16px; }

  /* CIERRE CON CITA */
  .contact-grid { gap: 6vw; grid-template-columns: .84fr 1.16fr; }
  .contact-intro { position: relative; top: auto; }
  .contact-intro > p:last-of-type { margin-top: 20px; line-height: 1.55; }
  .access-benefits { margin-top: 20px; }
  .access-preview { height: 205px; margin-top: 24px; }
  .contact-preview { margin-top: 0; }
  .contact-actions { margin-top: 30px; }

  /* FAQ + FOOTER */
  .faq-grid { gap: 6vw; }
  .faq-list summary { padding: 18px 0; }
  .faq-list details > p { padding-bottom: 20px; }
  .site-footer-full { padding-top: 54px; }
  .footer-main { padding-bottom: 42px; gap: 6vw; }
  .footer-main > div:first-child p { margin-top: 14px; }
  .footer-bottom { min-height: 58px; padding-block: 15px; }
}

/* Pantallas de portátil con poca altura: una capa extra de compresiÓn. */
@media (min-width: 981px) and (max-height: 820px) {
  .section-pad { padding-block: 48px; }
  .hero-content { padding-top: 128px; }
  h1 { font-size: clamp(54px,5.8vw,82px); }
  h2 { font-size: clamp(40px,4vw,58px); }
  .hero-copy { margin-top: 18px; }
  .hero-actions { margin-top: 22px; }
  .proximity-intro-redesigned { margin-bottom: 26px; }
  .map-panel-head { min-height: 118px; padding-block: 18px; }
  .location-map-editorial { min-height: 220px; }
  .proximity-connections article { padding-block: 14px; }
  .life-values { margin-top: 26px; }
  .life-project-editorial { margin-top: 26px; grid-template-rows: 280px; }
  .life-divider { margin-block: 34px; }
  .amenity-grid { margin-top: 24px; }
  .amenity-grid article { min-height: 138px; padding-block: 16px; }
  .amenity-grid h3 { margin-top: 19px; }
  .life-composition { margin-top: 24px; }
  .life-main { height: 285px; }
  .life-detail figure { height: 170px; }
  .gallery-grid { grid-template-rows: 315px; }
  .plans-heading { padding-bottom: 22px; }
  .plan-tabs-wrap { padding-top: 14px; }
  .plan-featured { padding-top: 18px; }
  .plan-visual img { max-height: 335px; }
  .plan-data div { padding: 1px 0; }
  .access-preview { height: 170px; }
  .faq-list summary { padding: 15px 0; }
}

/* =========================================================
   WP / Admin bar integration (Ardea Child)
   These rules keep the landing intact while the WP admin bar
   is visible for logged-in users.
   ========================================================= */
body.ardea-landing {
  background: var(--ivory);
  color: var(--night);
  font-family: var(--sans);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* =========================================================
   V6 · Hero tuning
   Larger hero copy (+5px on each text) and a narrower,
   vertically centred column so the whole hero (title, copy
   and CTA) fits the viewport without needing to scroll.
   ========================================================= */

/* All viewports: bump the hero text sizes up 5px. */
.hero .eyebrow { font-size: 16px; }          /* was 11px */
.hero-copy { font-size: 20px; line-height: 1.7; } /* was 15/17px */
.hero h1 { font-size: clamp(58px, 6.6vw, 98px); } /* was 73px/8.2vw/123px */

@media (max-width: 680px) {
  .hero h1 { font-size: clamp(50px, 13.6vw, 65px); } /* was 62px/17vw/81px */
}

/* Desktop: narrower text column, vertically centred and always fully visible. */
@media (min-width: 981px) {
  .hero-content {
    width: min(1240px, calc(100% - 64px));
    min-height: 100svh;
    padding-top: 0; /* removed: vertical centring handles the position */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-copy,
  .hero-content .hero-actions {
    width: min(760px, 100%);
    max-width: 100%;
  }
  .hero h1 { font-size: clamp(50px, 5.5vw, 79px); } /* was 63/6.9vw/99px */
  .hero .eyebrow { margin-bottom: 18px; }
  .hero-copy { margin-top: 26px; }
  .hero-actions { margin-top: 36px; }
}

/* Extra safety on short laptop screens: never let the hero overflow, and never
   let the centred content climb up to the fixed header. Reserving its height on
   top means the centring is computed on the room left below it. */
@media (min-width: 981px) and (max-height: 800px) {
  .hero-content { min-height: 100svh; padding-top: 88px; justify-content: center; }
  .hero h1 { font-size: clamp(45px, 4.8vw, 69px); }
  .hero-copy { margin-top: 18px; }
  .hero-actions { margin-top: 26px; }
}

/* Very short viewports (e.g. 468px tall): compact the hero so the whole
   block clears the fixed header and stays visible without scrolling. */
@media (min-width: 981px) and (max-height: 540px) {
  .site-header { height: 62px; }
  .hero-content {
    padding-top: 88px; /* clears the 62px header of this breakpoint */
    justify-content: flex-start;
  }
  .hero .eyebrow { font-size: 13px; margin-bottom: 8px; }
  .hero h1 { font-size: clamp(31px, 3.5vw, 50px); line-height: .96; }
  .hero-copy { font-size: 15px; line-height: 1.55; margin-top: 10px; }
  .hero-actions { margin-top: 14px; gap: 20px; }
  .hero-actions .button { min-height: 40px; padding-inline: 18px; }
  .hero-content .hero-copy,
  .hero-content .hero-actions { width: min(640px, 100%); }
  .scroll-cue { bottom: 14px; }
  .scroll-cue i { height: 30px; }
}

/* =========================================================
   V7 · Real map (MapLibre GL · OpenFreeMap vector tiles)
   Replaces the decorative map with a real interactive map and
   a routing overlay that shows the true distance/time in between.
   ========================================================= */
#ardea-map.ardea-osm {
  min-height: 340px;
  background: #e9e4d9;
  font-family: var(--sans);
}
/* No colour filter on purpose: the "liberty" palette is the approved one and
   a filter on the canvas would tint the pins and the route as well. */
#ardea-map.ardea-osm .maplibregl-ctrl-group {
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(23, 35, 45, 0.12);
}
#ardea-map.ardea-osm .maplibregl-ctrl-attrib {
  font-size: 10px;
  background: rgba(255, 253, 247, 0.75);
  color: rgba(23, 35, 45, 0.6);
}
#ardea-map.ardea-osm .maplibregl-ctrl-attrib a {
  color: rgba(23, 35, 45, 0.75);
}

/* 3D and recentre controls over the map. They stay hidden until the map is
   ready, so they never show up as dead buttons. */
.map-tools {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 253, 247, 0.94);
  border: 1px solid rgba(23, 35, 45, 0.14);
  box-shadow: 0 14px 30px rgba(23, 35, 45, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
#ardea-map.is-ready .map-tools {
  opacity: 1;
  visibility: visible;
}
.map-tool {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--night);
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.map-tool:hover {
  background: var(--reed);
  border-color: var(--reed);
}
.map-tool-ghost {
  border-color: rgba(23, 35, 45, 0.2);
  background: none;
  color: var(--night);
}
.map-tool-ghost:hover {
  background: var(--ivory);
  border-color: rgba(23, 35, 45, 0.35);
  color: var(--night);
}
.osm-route-info {
  position: absolute;
  z-index: 1000;
  top: 12px;
  right: 12px;
  max-width: 230px;
  padding: 10px 13px;
  background: rgba(255, 253, 247, 0.94);
  border: 1px solid rgba(23, 35, 45, 0.14);
  box-shadow: 0 14px 30px rgba(23, 35, 45, 0.14);
  color: var(--reed);
}
.osm-route-info small {
  display: block;
  color: var(--champagne);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.osm-route-info strong {
  display: block;
  margin-top: 3px;
  color: var(--night);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.05;
}

@media (min-width: 981px) {
  #ardea-map.ardea-osm { min-height: 460px; }
}
@media (min-width: 681px) and (max-width: 980px) {
  #ardea-map.ardea-osm { min-height: 400px; }
}
@media (max-width: 680px) {
  #ardea-map.ardea-osm { min-height: 320px; }
  /* The tools drop to the bottom so they never collide with the route box. */
  .map-tools { top: auto; bottom: 8px; left: 8px; padding: 6px; }
  .map-tool { min-height: 30px; padding: 0 10px; font-size: 9px; }
  .osm-route-info { top: 8px; right: 8px; }
}

/* =========================================================
   V8 · Hero background video
   ========================================================= */
video.hero-image {
  pointer-events: none;
  object-fit: cover;
}
video.hero-image::-webkit-media-controls {
  display: none !important;
}

/* =========================================================
   V9 - Vida Ardea: banda de tres columnas (texto | foto | servicios)
   ========================================================= */
.life-band-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: clamp(38px, 7vh, 92px);
  overflow: hidden;
  background: var(--ivory);
  color: var(--night);
}

.life-band {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

/* Columna de texto */
.life-band-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(30px, 5vh, 64px) clamp(30px, 3.4vw, 58px) clamp(30px, 5vh, 64px) 0;
}
.life-band-intro > .eyebrow { margin-bottom: 28px; }
.life-band-intro h2 {
  font-size: clamp(40px, 3.9vw, 58px);
  letter-spacing: -.03em;
  line-height: 1.02;
}
.life-band-copy {
  max-width: 440px;
  margin: 30px 0 0;
  color: rgba(23, 35, 45, .74);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
}
/* Foto central: al aparecer en pantalla entra desde debajo de su marco. */
.life-band-media {
  margin: 0;
  overflow: hidden;
}
.life-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(0);
  transition: transform 2.6s cubic-bezier(.3, .05, .3, 1);
}
.life-band-section.is-armed .life-band-media img { transform: translateY(102%); }
.life-band-section.is-revealed .life-band-media img { transform: translateY(0); }
.life-band-section.is-revealed .life-band-media:hover img { transform: scale(1.03); }

/* Columna de servicios (el beige sangra hasta el borde de la ventana) */
.life-band-amenities {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 5vh, 64px) clamp(30px, 3vw, 52px) clamp(30px, 5vh, 64px) clamp(26px, 2.4vw, 42px);
  /* Dark panel: every colour inside is a light tone. */
  color: var(--ivory);
}
.life-band-amenities::before {
  content: "";
  position: absolute;
  inset: 0;
  right: -100vw;
  background: var(--night);
}
.life-band-amenities > * { position: relative; }
.life-band-amenities > .eyebrow { margin-bottom: 16px; color: #e1d1ae; }
.life-band-amenities h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.06;
}
.life-band-amenities h2 em { color: rgba(243, 240, 232, .72); font-style: italic; font-weight: 400; }
.life-band-note {
  max-width: 240px;
  margin: 18px 0 0;
  color: rgba(243, 240, 232, .78);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}

.life-amenity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(26px, 4.2vh, 54px);
}
.life-amenity {
  padding: clamp(18px, 2.6vh, 28px) clamp(12px, 1.5vw, 18px);
  text-align: center;
}
/* Divisor vertical partido en dos tramos (uno por fila), con hueco en medio. */
.life-amenity:nth-child(even) { position: relative; }
.life-amenity:nth-child(even)::before {
  content: "";
  position: absolute;
  top: clamp(14px, 2.2vh, 24px);
  bottom: clamp(14px, 2.2vh, 24px);
  left: 0;
  width: 1px;
  background: rgba(243, 240, 232, .22);
}
/* El mismo dorado que los iconos de Caracteristicas: esta banda comparte el
   dibujo del parque infantil con esa seccion, y alli es champagne. Antes el
   icono de linea iba en #e1d1ae (crema palido) mientras sus tres vecinos son
   PNG con el champagne dentro, asi que era el unico distinto. */
.life-amenity-icon { display: inline-flex; color: var(--champagne); }
.life-amenity-icon svg { display: block; width: 30px; height: 30px; }
/* Artwork (already coloured) shares the 30px box of the line icons. */
.life-amenity-icon img { display: block; width: 30px; height: 30px; }
.life-amenity h3 {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}
.life-amenity p {
  max-width: 150px;
  margin: 8px auto 0;
  color: rgba(243, 240, 232, .78);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .life-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }
  .life-band-intro {
    grid-column: 1 / -1;
    padding: 0 0 56px;
  }
  .life-band-media { min-height: 470px; }
  .life-band-amenities { padding: 48px clamp(26px, 4vw, 42px); }
}

@media (max-width: 680px) {
  .life-band { grid-template-columns: 1fr; }
  .life-band-intro { padding-bottom: 42px; }
  .life-band-intro h2 { font-size: clamp(38px, 11vw, 50px); }
  .life-band-media { height: 400px; min-height: 0; }
  .life-band-amenities {
    margin-top: 44px;
    padding: 42px 0;
  }
  .life-band-amenities::before { left: -100vw; }
  .life-amenity { padding: 24px 10px; }
}

/* =========================================================
   V10 - Datos clave del hero, Las viviendas y Caracteristicas
   ========================================================= */

/* Ficha de datos clave del hero */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin: 42px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(243, 240, 232, .22);
}
.hero-fact { display: grid; gap: 6px; }
.hero-fact dt {
  color: rgba(243, 240, 232, .6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-fact dd {
  margin: 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 25px);
  line-height: 1.1;
}

/* Las viviendas */
.features-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8vw;
  align-items: end;
}
.features-intro > p {
  margin: 0 0 8px;
  color: rgba(23, 35, 45, .72);
  font-weight: 300;
  line-height: 1.8;
}
.homes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, .76fr);
  gap: clamp(38px, 4.6vw, 76px);
}
.homes-copy,
.homes-lead {
  max-width: 470px;
  margin: 26px 0 0;
  color: rgba(23, 35, 45, .72);
  font-weight: 300;
  line-height: 1.8;
}
/* Las lineas del bloque se pintan con pseudoelementos en vez de border: un border no se
   puede escalar desde un origen, asi que no se podria "dibujar" al entrar en pantalla.
   Sin JS las lineas se ven completas; "is-armed" las oculta y "is-drawn" las dibuja. */
.homes-specs {
  position: relative;
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
}
.homes-specs::before,
.homes-specs::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(23, 35, 45, .16);
  transition: transform 2.4s cubic-bezier(.3, .05, .3, 1);
}
.homes-specs::before { top: 0; transform-origin: left center; }     /* se dibuja de izq. a der. */
.homes-specs::after { bottom: 0; transform-origin: right center; }  /* se dibuja de der. a izq. */

.home-spec {
  position: relative;
  padding: 24px 0 26px;
}
/* Separador entre datos: una linea horizontal que se traza de izquierda a derecha. */
.home-spec::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(23, 35, 45, .12);
  transform-origin: left center;
  transition: transform 2s cubic-bezier(.3, .05, .3, 1);
}
.home-spec:first-child::after { display: none; }
.home-spec:nth-child(2)::after { transition-delay: .34s; }
.home-spec:nth-child(3)::after { transition-delay: .62s; }
.home-spec:nth-child(4)::after { transition-delay: .9s; }

.homes-specs.is-armed::before,
.homes-specs.is-armed::after { transform: scaleX(0); }
.homes-specs.is-armed .home-spec::after { transform: scaleX(0); }
.homes-specs.is-drawn::before,
.homes-specs.is-drawn::after { transform: scaleX(1); }
.homes-specs.is-drawn .home-spec::after { transform: scaleX(1); }
.home-spec-label {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--champagne);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* A champagne square instead of a bullet: it reads as a list, not as a table. */
.home-spec-label::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--champagne);
}
.home-spec-value {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
}
/* The photograph closes the block on the right and takes the full height of the
   text column, so the section no longer reads as half empty. */
.homes-figure {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
}
.homes-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 24% 62%;
}
.homes-cta {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 54px;
}

/* Caracteristicas */
.features-section { background: #ebe5d9; }
.features-groups {
  display: grid;
  grid-template-columns: 1.62fr .78fr;
  gap: 5vw;
  margin-top: 78px;
  align-items: start;
}
.feature-group h3 {
  margin: 0 0 22px;
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.feature-group:first-child .feature-list { grid-template-columns: 1fr 1fr; column-gap: 44px; }
.feature-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(23, 35, 45, .14);
  list-style: none;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(23, 35, 45, .14);
  font-size: 14px;
  font-weight: 300;
}
.feature-icon { display: inline-flex; flex: 0 0 auto; color: var(--champagne); }
.feature-icon svg { display: block; width: 26px; height: 26px; }
/* Uploaded artwork is a 64px PNG, so it stays sharp on 2x screens. Both
   markups share the same 26px box and never change the row height. */
.feature-icon img { display: block; width: 26px; height: 26px; }

@media (max-width: 980px) {
  .hero-facts { gap: 16px 34px; margin-top: 34px; padding-top: 22px; }
  .features-intro { grid-template-columns: 1fr; gap: 30px; }
  /* La foto deja de ser columna y cierra el bloque por debajo. */
  .homes-grid { grid-template-columns: 1fr; gap: 0; }
  .homes-specs { margin-top: 46px; }
  .homes-figure { min-height: 340px; margin-top: 46px; }
  .features-groups { grid-template-columns: 1fr; gap: 48px; margin-top: 56px; }
}

@media (max-width: 680px) {
  .hero-facts { gap: 14px 26px; }
  .hero-fact dd { font-size: 19px; }
  .homes-specs { margin-top: 38px; }
  .home-spec { padding: 20px 0 22px; }
  .homes-figure { min-height: 280px; margin-top: 38px; }
  .homes-cta { flex-direction: column; align-items: stretch; gap: 22px; margin-top: 40px; }
  .homes-cta .button { width: 100%; }
  .homes-cta .text-link { align-self: flex-start; }
  .feature-group:first-child .feature-list { grid-template-columns: 1fr; }
  .feature-item { gap: 14px; font-size: 13.5px; }
  .feature-icon svg,
  .feature-icon img { width: 23px; height: 23px; }
}

/* =========================================================
   V11 · Cierre con cita, bloque 3D y CTA fijo
   ========================================================= */

/* Cierre: modalidades + boton */
.contact-actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.contact-actions p {
  max-width: 250px;
  color: rgba(23,35,45,.5);
  font-size: 11px;
  line-height: 1.6;
}

/* La vista aerea ocupa la altura de la columna derecha */
@media (min-width: 981px) {
  .contact-preview { align-self: stretch; min-height: 460px; }
}

/* Bloque del proyecto 3D (solo con la casilla activa) */
.project-3d-section { background: var(--ivory); }
.project-3d { max-width: 760px; }
.project-3d > p:not(.eyebrow) {
  margin-top: 26px;
  color: rgba(23,35,45,.66);
  font-weight: 300;
}
.project-3d .button { margin-top: 36px; }
.project-3d-pending {
  margin-top: 24px;
  color: rgba(23,35,45,.45);
  font-size: 11px;
}

/* CTA fijo: boton flotante en escritorio, barra inferior en movil */
.sticky-cta {
  position: fixed;
  z-index: 40;
  right: 30px;
  bottom: 30px;
  padding: 15px 26px;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--cta-border);
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: 0 18px 38px rgba(23,35,45,.24);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.3, .05, .3, 1), visibility .45s;
}
.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sticky-cta > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
}
.sticky-cta small {
  color: rgba(243,240,232,.6);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sticky-cta:hover { border-color: var(--cta-bg-hover); background: var(--cta-bg-hover); }

@media (max-width: 680px) {
  .sticky-cta {
    right: 0;
    left: 0;
    bottom: 0;
    padding: 13px 22px 15px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -14px 30px rgba(23,35,45,.2);
    transform: translateY(100%);
  }
  .sticky-cta.is-visible { transform: translateY(0); }
  /* Keep the fixed bar from covering the end of the footer. */
  .site-footer-full { padding-bottom: 78px; }
}

/* CTA dentro del panel de navegacion movil */
.mobile-panel-cta {
  display: block;
  padding: 15px 20px;
  border: 1px solid rgba(243,240,232,.42);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.mobile-panel-cta:hover { background: var(--ivory); color: var(--night); }

/* =========================================================
   V12 · Mapa: pines con etiqueta, direcciones e iconos
   ========================================================= */

/* Pin propio: la etiqueta se ve siempre, sin depender del hover. El elemento
   que coloca MapLibre es un ancla de 0x0; la parte visible (punto y etiqueta)
   vive en un envoltorio interior que puede desbordarla. */
.ardea-pin { width: 0; height: 0; background: none; border: 0; }
.ardea-pin-inner {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transform: translate(-6.5px, -50%);
}
/* The promotion sits on the right of the frame, so its label grows leftwards
   and stays inside the map (which clips the overflow). The wrapper is pinned
   by its right edge: the anchor is a 0x0 box, so anchoring by the left would
   push the whole label out of the frame. */
.ardea-pin--project .ardea-pin-inner {
  left: auto;
  right: 0;
  flex-direction: row-reverse;
  transform: translate(6.5px, -50%);
}
.ardea-pin-inner i {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 6px rgba(180,154,106,.25);
}
.ardea-pin--office .ardea-pin-inner i {
  border: 2px solid var(--champagne);
  background: var(--ivory);
}
.ardea-pin-inner b {
  padding: 7px 12px;
  background: var(--night);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Direcciones escritas bajo el mapa */
.map-foot {
  padding: 26px 34px 30px;
  border-top: 1px solid rgba(23,35,45,.1);
  background: #f5f1e8;
}
.map-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.map-addresses span {
  display: block;
  color: var(--champagne);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.map-addresses p {
  margin: 11px 0 0;
  color: var(--night);
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.3;
}
/* Note under the promotion address: it warns that the address is a rough pointer
   for the map and not the building site next door. Sans serif and small, so it
   reads as a footnote and not as a second address. */
.map-addresses p.map-address-note {
  max-width: 340px;
  margin: 9px 0 0;
  color: rgba(23,35,45,.5);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
}
.map-delivery {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(23,35,45,.1);
  color: var(--reed);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Icono de cada conexion. La caja mantiene el tamano y el centrado, pero sin
   aro: el icono va suelto. En verde (--reed) para acompanar a los titulares de
   la seccion; el PNG ya viene en ese color y esta regla cubre el SVG de
   reserva, que si hereda currentColor. */
.connection-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  color: var(--reed);
}
.connection-icon svg,
.connection-icon img { width: 22px; height: 22px; }
/* Icono y tiempo aproximado en la misma linea: la cifra queda a la derecha. */
.connection-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.connection-head .connection-icon { margin-bottom: 0; }
/* La cifra usa la misma familia y las mismas cifras tabulares que la ficha de
   planos: el dato no cambia de estilo al bajar por la pagina y las cuatro
   tarjetas quedan con la misma anchura. La caja mide 28 px y la tinta de los
   digitos queda centrada en ella (los PNG de los iconos tienen la tinta
   centrada en su cuadro), asi que icono y cifra comparten centro optico. */
.connection-time {
  display: inline-flex;
  align-items: baseline;
  color: var(--reed);
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.connection-time small {
  margin-left: 9px;
  color: rgba(23,35,45,.45);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .map-addresses { grid-template-columns: 1fr; gap: 22px; }
  .map-foot { padding: 24px 28px 26px; }
}

@media (max-width: 680px) {
  .ardea-pin-inner b { padding: 6px 10px; font-size: 10px; }
  .map-foot { padding: 22px 24px 24px; }
  .connection-icon { width: 38px; height: 38px; margin-bottom: 14px; }
  .connection-icon svg,
  .connection-icon img { width: 26px; height: 26px; }
  .connection-head { gap: 12px; margin-bottom: 14px; }
  .connection-time { font-size: 24px; }
}

/* =========================================================
   V13 · Planos: ampliacion en pagina, zoom y descarga
   ========================================================= */

/* El propio plano abre el visor. */
.plan-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.plan-open img { display: block; width: 100%; height: auto; }
.plan-open-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 9px 13px;
  background: rgba(23,35,45,.9);
  color: var(--ivory);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s ease;
}
.plan-open:hover .plan-open-hint,
.plan-open:focus-visible .plan-open-hint { background: var(--reed); }

/* Visor del plano */
.plan-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12,18,24,.95);
}
.plan-lightbox[hidden] { display: none; }
.plan-lightbox-stage {
  position: absolute;
  inset: 0;
  padding: 76px 26px 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: zoom-out;
}
.plan-lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.plan-lightbox-caption {
  position: absolute;
  z-index: 2;
  left: 30px;
  top: 30px;
  margin: 0;
  color: rgba(243,240,232,.62);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.plan-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 24px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243,240,232,.28);
  background: none;
  color: var(--ivory);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.plan-lightbox-close:hover { background: var(--ivory); color: var(--night); }
.plan-lightbox-tools {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(243,240,232,.16);
  background: rgba(23,35,45,.92);
}
.plan-lightbox-tools button {
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}
.plan-lightbox-tools button:hover { background: rgba(243,240,232,.14); }
.plan-lightbox-level {
  min-width: 58px;
  color: rgba(243,240,232,.66);
  font-size: 10px;
  text-align: center;
}
.plan-lightbox-tools .plan-lightbox-reset {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.plan-lightbox-open { overflow: hidden; }

@media (max-width: 680px) {
  .plan-data { gap: 3px; }
  .plan-data div { gap: 12px; padding: 1px 0; }
  .plan-data dd { font-size: 22px; }
  .plan-actions .button { width: 100%; }
  .plan-lightbox-stage { padding: 68px 14px 92px; }
  .plan-lightbox-caption { left: 18px; top: 24px; }
  .plan-lightbox-close { top: 18px; right: 18px; width: 38px; height: 38px; }
  .plan-lightbox-tools { bottom: 18px; }
}

/* =========================================================
   V15 · Typographic scale (client feedback v3)

   The client reads the type as too small overall, especially the gold
   uppercase labels (nine of them sat at 9px, sixteen at 10px and seven at
   8px), and finds the jump between headings and body copy too wide. This
   block restates those declarations lower down the file, where it wins by
   order, and enlarges the icons, which "do not stand out".

   Sizes are declared once as variables so the scale can be read at a
   glance; the earlier declarations can be folded into place later.
   ========================================================= */

:root {
  --fs-label-xs: 11px;  /* was 7-8px  */
  --fs-label-sm: 12px;  /* was 9-10px */
  --fs-label:    13px;  /* was 11px   */
  --fs-body-sm:  15px;  /* was 13-14px*/
  --fs-body:     16px;  /* was 15px   */
  --fs-body-lg:  17px;  /* was 15px   */
  --fs-icon:     30px;  /* was 26px   */
  --fs-icon-lg:  34px;  /* was 30px   */
  --fs-icon-map: 32px;  /* was 22px, then 26px. Ceiling: the artwork is 64px */
}

/* Labels: nothing readable stays under 11px any more. */
.eyebrow,
.feature-group h3,
.connection-meta,
.values-strip,
.life-band-note,
.contact-actions p,
.project-3d-pending,
.mobile-panel-cta { font-size: var(--fs-label); }

.plan-data dt,
.plan-location,
.plan-tab,
.plan-variant,
.plan-disclaimer,
.plan-open-hint,
.map-panel-head,
.map-tool,
.map-addresses span,
.map-delivery,
.hero-fact dt,
.home-spec-label,
.proximity-daily,
.proximity-bottomline,
.access-benefits span,
.life-values,
.origin-marker,
.scroll-cue { font-size: var(--fs-label-sm); }

.plan-lightbox-caption,
.plan-lightbox-level,
.plan-lightbox-tools .plan-lightbox-reset,
.access-preview figcaption span,
.sticky-cta small,
.connection-time small,
.service-time,
.osm-route-info small,
.proximity-daily span,
.footer-bottom,
.maplibregl-ctrl-attrib { font-size: var(--fs-label-xs); }

/* Body copy: closer to the headings than before. */
.site-header { font-size: 14px; }
.header-cta,
.button { font-size: 13px; }
.feature-item { font-size: var(--fs-body-sm); }
.life-amenity h3,
.life-project-card,
.amenity-grid { font-size: var(--fs-body-sm); }
.life-amenity p { font-size: 14px; }
.gallery-grid,
.life-band-copy { font-size: var(--fs-body); }
.proximity-connections p { font-size: var(--fs-body); }
.hero-content { font-size: var(--fs-body-lg); }

/* Icons: the same 64px artwork, drawn bigger. */
.feature-icon svg,
.feature-icon img { width: var(--fs-icon); height: var(--fs-icon); }
.life-amenity-icon svg,
.life-amenity-icon img { width: var(--fs-icon-lg); height: var(--fs-icon-lg); }
.connection-icon { width: 44px; height: 44px; }
.connection-icon svg,
.connection-icon img { width: var(--fs-icon-map); height: var(--fs-icon-map); }

@media (max-width: 980px) {
  .feature-icon svg,
  .feature-icon img { width: 27px; height: 27px; }
  .connection-icon { width: 40px; height: 40px; }
  .connection-icon svg,
  .connection-icon img { width: 28px; height: 28px; }
}

/* On small screens the labels keep their new size instead of shrinking back. */
@media (max-width: 680px) {
  .feature-icon svg,
  .feature-icon img { width: 26px; height: 26px; }
  .life-amenity-icon svg,
  .life-amenity-icon img { width: 30px; height: 30px; }
  .connection-icon { width: 38px; height: 38px; }
  .connection-icon svg,
  .connection-icon img { width: 26px; height: 26px; }

  /* This one dropped to 8px on phones, the smallest text on the site. */
  .life-values span { font-size: var(--fs-label-xs); }

  .eyebrow,
  .feature-group h3,
  .connection-meta,
  .values-strip,
  .life-band-note,
  .contact-actions p { font-size: 12px; }

  .plan-data dt,
  .plan-location,
  .plan-tab,
  .plan-variant,
  .plan-disclaimer,
  .map-panel-head,
  .map-tool,
  .hero-fact dt,
  .home-spec-label,
  .proximity-daily,
  .proximity-bottomline,
  .access-benefits span,
  .origin-marker { font-size: 11px; }

  .feature-item,
  .life-amenity h3,
  .life-amenity p,
  .life-project-card,
  .amenity-grid { font-size: 14px; }

  .hero-content,
  .proximity-connections p,
  .life-band-copy { font-size: 16px; }
}

/* =========================================================
   V16 · The qualities as a full-width band (client feedback v3)

   The client asked for the common areas and the qualities to stand out, and
   for the page not to alternate only two sand tones. The features section
   now uses the reed green of the palette, so the sequence reads
   ivory - green - night - ivory instead of sand after sand, and every icon
   sits in its own tile so it "emerges" instead of hiding in the text line.

   Colours are picked to stay legible on green: ivory for text and headings,
   sand only for graphics and large type, where 3:1 is enough.
   ========================================================= */

.features-section {
  background: var(--reed);
  color: rgba(243, 240, 232, .94);
}

.features-section .eyebrow { color: rgba(243, 240, 232, .75); }
.features-section h2 { color: var(--ivory); }
.features-section h2 em { color: var(--sand); }
.features-section .features-intro > p { color: rgba(243, 240, 232, .78); }

.feature-group h3 { color: var(--ivory); }
.feature-list { border-top-color: rgba(243, 240, 232, .3); }
.feature-item {
  gap: 18px;
  padding: 18px 0;
  border-bottom-color: rgba(243, 240, 232, .18);
  color: rgba(243, 240, 232, .94);
}

/* Icon tiles: a deeper green well with the champagne artwork inside.
   The colour is the same champagne as the artwork: the delivered PNGs are
   drawn in rgb(180,154,106), so the inline line icons have to match them or
   they read as washed out next to their neighbours. */
.feature-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(243, 240, 232, .2);
  background: rgba(13, 22, 27, .3);
  color: var(--champagne);
}

/* Hover on a row: the well lights up, the drawing steps forward and the text
   goes to full ivory. Only colour, border and a 1px translate are animated,
   so nothing reflows; the bottom rule of the row turns champagne to tie the
   highlight to the section accent. The artwork itself never changes colour:
   only its position, so the drawing stays in the tone it was delivered in. */
.feature-item,
.feature-icon {
  transition: color .45s ease, border-color .45s ease, background-color .45s ease;
}
.feature-icon img,
.feature-icon svg { transition: transform .45s ease; }
.feature-item:hover { color: var(--ivory); border-bottom-color: rgba(180, 154, 106, .55); }
.feature-item:hover .feature-icon {
  border-color: rgba(180, 154, 106, .55);
  background: rgba(13, 22, 27, .55);
}
.feature-item:hover .feature-icon img,
.feature-item:hover .feature-icon svg { transform: translateY(-2px); }

@media (max-width: 680px) {
  .feature-icon { width: 44px; height: 44px; }
  .feature-item { gap: 14px; padding: 15px 0; }
}

/* =========================================================
   V17 · More graphic resources (client feedback v3)

   "The new renders are nowhere to be seen" and "the Vida Ardea module is too
   empty": the media column of the band now stacks two photographs instead of
   one, and the gallery gains a fourth panoramic tile with the pool render.
   The rows are explicit because the images fill their frame (height: 100%).
   ========================================================= */

/* Layered pair: both photographs share the same frame, the one behind steps
   out to the upper left, and the script swaps which one is in front every few
   seconds (see landing.js). The shadow separates the two planes. No height is
   set on purpose: the grid stretches the column, so the frame matches the
   height of the amenities column next to it. */
.life-band-media {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
}
.life-band-media figure {
  grid-area: 1 / 1;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(23, 35, 45, .16);
  /* Long, even glide between the two positions. */
  transition: transform 2s cubic-bezier(.45, .05, .25, 1);
}
.life-band-media figure:nth-child(2) {
  z-index: 1;
  transform: translate(-40px, -34px);
}
.life-band-media.is-swapped figure:nth-child(1) {
  z-index: 1;
  transform: translate(-40px, -34px);
}
.life-band-media.is-swapped figure:nth-child(2) {
  z-index: 2;
  transform: translate(0, 0);
}

/* The gallery runs four renders across on desktop, two by two on tablet and a
   swipe strip on phones, with the pool render appended as a full-width tile
   underneath in every case. Being the widest crop of the set, that tile follows
   --gallery-focus-four, set with the other focal points in .gallery-grid. */
.gallery-four { grid-column: 1 / -1; }
.gallery-four img { object-position: var(--gallery-focus-four); }

@media (min-width: 981px) {
  /* Desktop: the four renders share the top row and the pool band runs full
     width underneath. */
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 420px 420px; }
  .gallery-one, .gallery-two, .gallery-three, .gallery-padel { grid-column: auto; grid-row: 1; }
}

@media (max-width: 980px) {
  .life-band-media figure:nth-child(2),
  .life-band-media.is-swapped figure:nth-child(1) { transform: translate(-30px, -26px); }
  /* Tablet: two by two, with the pool band underneath. */
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 420px 420px; }
  .gallery-one { grid-row: auto; }
  .gallery-three { grid-column: auto; }
}

@media (max-width: 680px) {
  .life-band-media figure:nth-child(2),
  .life-band-media.is-swapped figure:nth-child(1) { transform: translate(-20px, -18px); }
  .gallery-grid { grid-template-rows: repeat(3, 430px) 400px; }
}

/* =========================================================
   V18 · Vida Ardea: no slide-up, depth on the waiting photo

   The client asked to drop the entrance from below and to push the waiting
   photograph further to the upper left, slightly out of focus, so the pair
   reads as two planes and the sharp one takes the attention. The blur follows
   the turn: landing.js swaps both the stacking order and the position.
   ========================================================= */

/* No slide-up: the frame is filled from the start. */
.life-band-section.is-armed .life-band-media img,
.life-band-section.is-revealed .life-band-media img { transform: none; }

/* Focus transitions as the photos trade places; the transform keeps the
   hover zoom smooth (it used to inherit the 2.6s entrance curve). */
.life-band-media img { transition: transform .8s ease, filter 1.6s ease; }

/* Waiting photograph: further up and to the left, out of focus. */
.life-band-media figure:nth-child(2),
.life-band-media.is-swapped figure:nth-child(1) { transform: translate(-68px, -52px); }
.life-band-media figure:nth-child(2) img,
.life-band-media.is-swapped figure:nth-child(1) img { filter: blur(2.5px) saturate(.92); }

/* The one in front stays sharp. */
.life-band-media figure:nth-child(1) img,
.life-band-media.is-swapped figure:nth-child(2) img { filter: none; }

@media (max-width: 980px) {
  .life-band-media figure:nth-child(2),
  .life-band-media.is-swapped figure:nth-child(1) { transform: translate(-48px, -38px); }
}

@media (max-width: 680px) {
  .life-band-media figure:nth-child(2),
  .life-band-media.is-swapped figure:nth-child(1) { transform: translate(-30px, -24px); }
}

/* =========================================================
   V19 · Hero (client feedback v3)

   - The surface range replaces the "from 79,24 m²" figure, which was not the
     smallest home of the promotion.
   - "Garaje incluido" becomes the list of what the promotion really includes,
     with the project icons, as the client asked.
   - Display heading trimmed about 20 %, so the jump against the body copy is
     less abrupt: it was 99 px against 16 px (6,2x), now 79 px (4,9x).
   ========================================================= */

.hero-included {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.hero-included span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
/* The label inside the item, kept upright: the wrapper is only a hook. */
.hero-included em { font-style: normal; }
.hero-included svg,
.hero-included img { width: 24px; height: 24px; color: var(--champagne); }

@media (max-width: 980px) {
  .hero-included { gap: 8px 18px; }
  .hero-included span { font-size: 14px; }
  .hero-included svg,
  .hero-included img { width: 22px; height: 22px; }
}


/* =========================================================
   V20 · Las viviendas (client feedback v3)

   The client read this block as "an Excel table" and found it empty. It is now
   an editorial two-column composition: the data listed vertically, with the
   champagne bullet and large serif figures, on the left; a photograph of the
   promotion filling the right column, at the full height of the text.

   "Garaje — incluido" is gone from here: the hero already lists what comes with
   the home, so repeating it as a data point added nothing.

   The display heading of this section drops about 20 % as well: 66 px against
   the 16 px body copy (4,1x) becomes 53 px (3,3x). The trim is scoped per
   section on purpose, because every heading owns its own clamp().
   ========================================================= */

@media (min-width: 981px) {
  .homes-section h2 { font-size: clamp(36px, 3.7vw, 54px); }
}

@media (max-width: 980px) {
  .homes-section h2 { font-size: clamp(42px, 4.6vw, 65px); }
}

/* On phones the photograph is a wide strip under the text, so the crop moves
   back to the centre of the render. */
@media (max-width: 680px) {
  .homes-figure img { object-position: 50% 60%; }
}
/* =========================================================
   V21 · Características (client feedback v3)

   The list itself is the change the client asked for: eight claims they do not
   want to make are gone (fitness room, underfloor heating, mechanical
   ventilation, room-by-room temperature control, storage room, "terraces in
   every home", after-sales warranty, access control) and the features of the
   final brief are in (low-consumption lifts, padel court, BREEAM seal, armoured
   door, fitted wardrobes, CCTV, SPC vinyl flooring, equipped kitchen,
   electronic locks, video intercom). The new artwork is the designer's set,
   converted to the 64px PNG the section already used.

   Two of the client's additions repeated a feature that was already listed
   ("cocina equipada" next to "cocina amueblada", "armarios equipados" next to
   "armarios empotrados"), so they are merged into a single entry each.

   The display heading of this section drops about 20 % as well: 66 px (4,1x)
   becomes 53 px (3,3x).
   ========================================================= */

@media (min-width: 981px) {
  .features-section h2 { font-size: clamp(36px, 3.7vw, 54px); }
}

@media (max-width: 980px) {
  .features-section h2 { font-size: clamp(42px, 4.6vw, 65px); }
}

/* =========================================================
   V22 · Planos y cierre con cita (client feedback v3)

   - El visor abría el plano recortado. La causa no era la imagen sino el
     encuadre: con `display: grid` el `max-height: 100 %` de la imagen no se
     resuelve contra una fila de altura automática, así que el plano se ajustaba
     al ancho y se salía por abajo. En un contenedor flex sí se resuelve, y el
     plano entra completo.
   - El zoom parece no funcionar cuando el «−» no hace nada: al 100 % el plano ya
     está entero, así que los botones que no tienen efecto se desactivan y se ve
     por qué. El indicador de nivel se anuncia con `aria-live`.
   - Con el encuadre arreglado, pulsar sobre el plano acerca en lugar de cerrar
     el visor (que era lo que hacía y sorprendía): para cerrar quedan la X, la
     tecla Escape y el fondo.
   - La ficha técnica se lee como tabla: filetes entre filas, etiqueta algo mayor
     en columna fija y las cifras alineadas en la misma línea que su etiqueta.
   - El bloque de cita gana el icono de calendario, más cuerpo y las modalidades
     de visita con más tamaño y contraste.
   ========================================================= */

/* --- Visor del plano --- */
.plan-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-lightbox-tools button[disabled] {
  opacity: .32;
  cursor: not-allowed;
}
.plan-lightbox-tools button[disabled]:hover { background: none; }
.plan-lightbox-level { min-width: 62px; }

/* --- Ficha técnica como tabla --- */
.plan-data {
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid rgba(23, 35, 45, .18);
}
.plan-data div {
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(23, 35, 45, .12);
}
.plan-data dt {
  flex: 0 0 168px;
  font-size: var(--fs-label);   /* 12 -> 13px: se leían demasiado pequeñas */
  letter-spacing: .12em;
}
/* Las cifras no necesitan el semibold dentro de una tabla. */
.plan-data dd { font-weight: 400; }

/* --- Cierre con cita --- */
.contact-actions .button-cta-icon {
  min-height: 58px;
  padding-inline: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* El boton no se aprieta ni parte su texto: el icono y la etiqueta van juntos. */
  flex: 0 0 auto;
  font-size: 14px;
}
/* `flex: 1 1 auto` por defecto encogia el icono hasta 14px en cuanto el boton
   se quedaba sin sitio: el ancho se fija y el que cede es el texto. */
.contact-actions .button-cta-icon svg,
.contact-actions .button-cta-icon img { flex: 0 0 auto; width: 20px; height: 20px; }
.contact-actions p { font-size: 14px; color: rgba(23, 35, 45, .68); }

.access-benefits { gap: 10px; }
.access-benefits span {
  padding: 10px 14px;
  border-color: rgba(23, 35, 45, .26);
  color: rgba(23, 35, 45, .82);
  font-size: var(--fs-label);
  font-weight: 500;
}

@media (max-width: 680px) {
  .plan-data div { gap: 14px; padding: 12px 0; }
  .plan-data dt { flex-basis: 132px; font-size: var(--fs-label-sm); }
  .contact-actions .button-cta-icon { min-height: 54px; font-size: 13.5px; }
  .contact-actions p { font-size: 13px; }
  .access-benefits span { padding: 9px 12px; font-size: var(--fs-label-sm); }
}

/* =========================================================
   V23 · Los números de la ficha de planos (cliente)

   La ficha mezclaba la etiqueta en sans con la cifra en la serif del sitio, y
   esa serif usa cifras elzevirianas: de alturas distintas unas de otras y de
   trazo fino. En una tabla de datos eso se lee como adorno, no como dato, y las
   cifras no forman columna.
   Las cifras pasan a la sans, que usa cifras de caja alta (todas a la misma
   altura y apoyadas en la línea base): eso es lo que hace que una tabla parezca
   una tabla. Se piden además cifras tabulares para que los dígitos midan lo
   mismo y los decimales queden alineados de una fila a otra; medido, el subset
   de DM Sans que se sirve no trae la función `tnum` (los anchos de 1111, 0000 y
   8888 salen idénticos con y sin ella), así que hoy no cambia nada, pero quedará
   activo si algún día se sirve la fuente completa.
   El tamaño también baja: la cifra se queda por encima de su etiqueta (13 px)
   pero sin doblarla, que era lo que hacía que la fila pareciese un titular.
   Los números grandes de portada (hero y viviendas) siguen en serif: allí son
   titulares, no datos.
   ========================================================= */

.plan-data dd {
  font-family: var(--sans);
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 500;
  letter-spacing: 0;
  /* Cifras de caja alta (todas a la misma altura) y, si la fuente las trae, de
     ancho fijo, para que los decimales y las unidades queden alineados. */
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 680px) {
  .plan-data dd { font-size: 16px; }
}

/* =========================================================
   V25 · Iconos de las zonas comunes, más grandes (cliente)

   Los cuatro iconos de la banda de Vida Ardea iban a 34 px (30 px en móvil) y
   se perdían al lado de sus titulares: en la captura que envió el cliente
   pesaban menos que el texto. Suben a 44 px en escritorio, 38 px en tableta y
   34 px en móvil, que es el tamaño al que ya estaban los de la banda de
   calidades dentro de su recuadro (52 px de recuadro, 30 px de dibujo): así los
   dos bloques que comparten papel —contar lo que tiene el residencial— pesan
   igual.
   ========================================================= */

@media (min-width: 981px) {
  .life-amenity-icon svg,
  .life-amenity-icon img { width: 44px; height: 44px; }
}

@media (min-width: 681px) and (max-width: 980px) {
  .life-amenity-icon svg,
  .life-amenity-icon img { width: 38px; height: 38px; }
}

@media (max-width: 680px) {
  .life-amenity-icon svg,
  .life-amenity-icon img { width: 34px; height: 34px; }
}

/* =========================================================
   V28 · Mobile hero: less air on top, visible air below (client)

   The client saw the hero content sitting too low, so low that it looked as if
   there were no bottom padding at all. Measured on a 390 x 844 phone, the block
   started 180 px from the top edge (78 px fixed header + 102 px of air) and
   ended at 913 px, i.e. 69 px past the bottom of the hero. Because the hero
   clips what overflows (`overflow: hidden`), the last button was cut in half:
   no bottom gap was visible because there was nothing below the content to
   look at.

   Two changes, then:

   1. The start point drops from 180 px to 112 px and the inner rhythm tightens
      to the same steps the type scale already uses on phones. The block now
      measures 793 px and leaves 51 px free at the bottom.
   2. The hero stops forcing its height to be exactly the viewport on phones. It
      keeps `min-height: 100svh`, so a short block still fills the screen, but on
      low screens (iPhone SE, 667 px tall) it grows with its content instead of
      cutting the button off. Same safety for tablets, where the fixed 310 px of
      air could push the content out on landscape screens.
   ========================================================= */

@media (max-width: 980px) {
  .hero { height: auto; min-height: 100svh; }
}

@media (min-width: 681px) and (max-width: 980px) and (max-height: 800px) {
  .hero-content { padding-top: 170px; padding-bottom: 40px; }
}

@media (max-width: 680px) {
  .hero-content { padding-top: 112px; padding-bottom: 46px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero-copy { margin-top: 18px; }
  .hero-facts { margin-top: 24px; padding-top: 18px; }
  .hero-actions { margin-top: 26px; }
}

/* Very low phones: tighten one step further so the whole hero still fits
   without scrolling, and keep a readable bottom gap. */
@media (max-width: 680px) and (max-height: 740px) {
  .hero-content { padding-top: 94px; padding-bottom: 30px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(40px, 11vw, 50px); }
  .hero-copy { margin-top: 14px; font-size: 17px; line-height: 1.55; }
  .hero-facts { margin-top: 18px; padding-top: 14px; }
  .hero-actions { margin-top: 20px; }
}

/* =========================================================
   V27 · Las viviendas: entrada desde la izquierda

   The text column comes in from the left, block by block in reading order, and
   the photograph travels the same way: it starts off to the left and slides to
   the right into its frame, losing the fade as it arrives. Slow on purpose (the
   photograph takes 3,6 s and the text 2,4 s), so the arrival is watched instead
   of missed: the observer also waits until the section is well inside the
   viewport before arming the reveal.

   The travel is tied to the gap between the two columns
   (`clamp(-52px, -4vw, -28px)` against a gap of `clamp(38px, 4.6vw, 76px)`), so
   the picture never crosses the text on its way in; a negative translateX does
   not create a horizontal scrollbar either, because in LTR the scrollable area
   only grows to the right and to the bottom.

   Same contract as the rest of the page: "is-armed" is the hidden state and it
   is only added by landing.js, so without JavaScript (or with reduced motion,
   where the class is never added) the section is simply in place.

   Only `transform` and `opacity` are animated, so nothing reflows.
   ========================================================= */

.homes-body > * {
  transition: opacity 1.5s ease, transform 1.7s cubic-bezier(.22, .61, .36, 1);
}
.homes-section.is-armed .homes-body > * {
  opacity: 0;
  transform: translateX(-34px);
}
.homes-section.is-revealed .homes-body > * {
  opacity: 1;
  transform: none;
}

/* Step by step, in reading order: eyebrow, headline, lead, figures, buttons.
   The steps grow with the duration: the whole column takes ~2,4 s to arrive. */
.homes-section.is-revealed .homes-body > :nth-child(2) { transition-delay: .16s; }
.homes-section.is-revealed .homes-body > :nth-child(3) { transition-delay: .32s; }
.homes-section.is-revealed .homes-body > :nth-child(4) { transition-delay: .48s; }
.homes-section.is-revealed .homes-body > :nth-child(5) { transition-delay: .7s; }

/* One frame of "no transitions" while the hidden state is applied, so the
   entrance never starts by animating the block *into* hiding. landing.js adds
   and removes this class in the same frame, before painting. */
.homes-section.is-arming .homes-body > *,
.homes-section.is-arming .homes-figure { transition: none; }

.homes-figure {
  transition: opacity 2.6s ease, transform 3.6s cubic-bezier(.19, .76, .26, 1);
}
.homes-section.is-armed .homes-figure {
  opacity: 0;
  transform: translateX(clamp(-52px, -4vw, -28px));
}
.homes-section.is-revealed .homes-figure {
  opacity: 1;
  transform: none;
}

/* On phones the photo stops being a column and closes the block below, so its
   travel is shorter and there is no column to keep clear. */
@media (max-width: 680px) {
  .homes-section.is-armed .homes-body > * { transform: translateX(-18px); }
  .homes-section.is-armed .homes-figure { transform: translateX(-24px); }
}

/* =========================================================
   V28 · Entorno: cada conexión cae desde arriba

   The four rows of the connections list drop into place one after the other,
   slowly. What moves is the wrapper inside each article, not the article
   itself: the article already has its own .3 s transition for the hover wash,
   and this way the two never have to share one declaration.

   Measured, not assumed: the row padding is 18 px (the 30 px value is
   overridden further down) and the content sits 24 px below the top edge of its
   row, so a 30 px travel pokes 6 px into the empty bottom band of the row above.
   That happens while the row is still under 20 % opacity, so it is a ghost, not
   a collision. The curve is slightly more gravitational than the rest of the
   page (starts slow, lands soft) because that is what "falling" looks like.
   ========================================================= */

.proximity-connections article > div {
  transition: opacity 1.4s ease, transform 1.7s cubic-bezier(.33, .08, .24, 1);
}
.proximity-connections.is-armed article > div {
  opacity: 0;
  transform: translateY(-30px);
}
.proximity-connections.is-revealed article > div {
  opacity: 1;
  transform: none;
}

/* One after the other, top to bottom. */
.proximity-connections.is-revealed article:nth-child(2) > div { transition-delay: .24s; }
.proximity-connections.is-revealed article:nth-child(3) > div { transition-delay: .48s; }
.proximity-connections.is-revealed article:nth-child(4) > div { transition-delay: .72s; }

@media (max-width: 680px) {
  .proximity-connections.is-armed article > div { transform: translateY(-20px); }
}

/* =========================================================
   V33 · El bloque de etiquetas, subido sobre el filete

   The labelling block — variant row, typology kicker, unit location and headline
   — travels as one unit and shares the viewer's columns and gap, so it stays
   aligned with the info panel it describes at every width instead of being tuned
   by eye. On desktop it rises to the section headline row and, because the
   divider line lives on the headline block — first column only — the line stops
   where the labelling block begins instead of running underneath it.

   Columns repeat the viewer's own values on purpose: this grid has no relation
   to the viewer in the markup, so the only thing keeping them in step is that
   both declare the same track sizes at the same breakpoints.
   ========================================================= */

@media (min-width: 981px) {
  .plans-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    column-gap: clamp(34px, 4vw, 58px);
    align-items: start;
  }
  .plans-heading { grid-column: 1; grid-row: 1; }
  /* The labelling block spans the headline row and the selector row and sits at
     the end of them, so its bottom lines up with the typology pills and it hangs
     over the divider line instead of floating above it. Spanning both rows is
     what makes this work: a top margin would grow the row and push the selector
     and the viewer down with it, keeping the gap it is meant to close. */
  .plans-labels { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .plan-tabs-wrap { grid-column: 1; grid-row: 2; }
  /* Inside the labelling block the variant row is the first line, so the gap
     goes below it instead of above it. */
  .plans-labels .plan-variants { margin: 0 0 22px; }
}

/* =========================================================
   V29 · El icono de calendario en todos los botones de cita

   Every "Agendar cita" on the page (header, mobile drawer, hero, homes,
   closing block and the fixed button) carries the same calendar icon, so the
   call to action is recognised by its shape and not only by its text.

   The icon is part of the label: it goes in the flow of each button, no
   absolute positioning and no fixed heights, so none of them changes its size.
   Each context keeps its own gap, because the header pill and the fixed bar
   are much smaller than a .button.

   The closing button keeps its 20px icon: it is the tallest one (58px), and
   18px here against 20px there is the same proportion of its height.
   ========================================================= */

.button-cta-icon svg,
.button-cta-icon img { flex: 0 0 auto; width: 18px; height: 18px; }

/* .button is already an inline-flex row; it only needed the gap. */
.button.button-cta-icon { gap: 11px; }

/* Only from 981 px up. The header rules hide this pill on phones and tablets
   (`.desktop-nav, .header-cta { display: none }`), and a selector with two
   classes would win over that `display: none` and put the button back on mobile,
   squeezed and broken in two lines. Scoping it here is what keeps it out. */
@media (min-width: 981px) {
  .header-cta.button-cta-icon {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
}
.header-cta.button-cta-icon svg,
.header-cta.button-cta-icon img { width: 15px; height: 15px; }

/* The drawer button is a full-width block: it stays a flex row and centres
   its content, so it does not shrink to the width of the label. */
.mobile-panel-cta.button-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* The fixed button stacks a label and a subtitle; the icon rides with the
   label, so the two lines and the mobile bar keep their layout. */
.sticky-cta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.sticky-cta svg,
.sticky-cta img { flex: 0 0 auto; width: 18px; height: 18px; }

@media (max-width: 680px) {
  /* The mobile bar used to put the two texts on the same line, and they no
     longer fitted: measured at 390 px, the label and the subtitle needed 331 px
     against the 327 px available, so both of them were already breaking into
     two lines (the bar measured 70 px, and it still did with the icon removed).
     It now stacks them like the desktop pill, which fits without breaking:
     label with the icon on top, subtitle underneath, both centred in the bar. */
  .sticky-cta {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
}

/* =========================================================
   V30 · Vida Ardea: el mismo hover que las características

   Same vocabulary as the feature rows, which is what the client asked for:
   the supporting text goes to full ivory, the artwork steps 2px forward and the
   rule of the block turns champagne — all in .25 s, the same timing used there.

   Here the rule is not a bottom border but the vertical divider between the two
   columns. That divider is drawn on the even items only, so hovering the left
   one reaches it with `+`; that way both halves of a row light the same line.

   The icon keeps its colour and only moves, exactly as in the feature rows:
   no brightness filter. This band has no dark well behind the artwork (the
   panel itself is the dark ground), so there is no tile to light up.
   ========================================================= */

.life-amenity p { transition: color .45s ease; }
.life-amenity-icon img,
.life-amenity-icon svg { transition: transform .45s ease; }
.life-amenity::before { transition: background-color .45s ease; }

.life-amenity:hover p { color: var(--ivory); }
.life-amenity:hover .life-amenity-icon img,
.life-amenity:hover .life-amenity-icon svg { transform: translateY(-2px); }
.life-amenity:hover::before,
.life-amenity:hover + .life-amenity::before { background-color: rgba(180, 154, 106, .55); }

/* =========================================================
   V31 · Características y galería en el móvil

   1. The two feature groups become accordions on phones. Twenty-three rows in a
      single column made the section endless: now each group is a row you open.
      The markup is a native <details>, so the toggle works with the keyboard,
      announces itself and needs no ARIA; landing.js only decides whether the
      groups start open, and it does that from the width.

   2. The gallery stops being a column of four 430 px renders (about 1.740 px of
      scroll) and becomes a swipeable strip with scroll snapping. Pure CSS: no
      JavaScript, no arrows, and the next card peeking in is the hint.
   ========================================================= */

/* The summary is a hook. On desktop it is a static heading, exactly as before:
   no marker, no pointer, and the group is always open. */
.feature-group > summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.feature-group > summary::-webkit-details-marker { display: none; }
.feature-group > summary h3 { margin: 0 0 22px; }
.feature-group > summary:focus { outline: none; }

@media (max-width: 680px) {
  .feature-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(243, 240, 232, .22);
    cursor: pointer;
    pointer-events: auto;
  }
  .feature-group > summary h3 { margin: 0; }
  /* The chevron, drawn with two borders: no extra markup and no icon font. */
  .feature-group > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 1.5px solid rgba(243, 240, 232, .75);
    border-bottom: 1.5px solid rgba(243, 240, 232, .75);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .3s ease;
  }
  .feature-group[open] > summary::after { transform: translateY(1px) rotate(225deg); }
  /* The summary already draws the rule above the list. */
  .feature-group > .feature-list { border-top: 0; }
  .feature-group[open] > .feature-list { animation: feature-open .32s ease both; }

  @keyframes feature-open {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }

  /* Gallery: a strip instead of a column. The snap is on the card, so each swipe
     leaves one render in place; the container keeps its full-bleed width, which
     is how the images already sit on phones. */
  .gallery-grid {
    display: flex;
    grid-template-rows: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid > figure {
    flex: 0 0 82%;
    height: 430px;
    scroll-snap-align: start;
  }
  /* No hover on a touch screen: the zoom only gets in the way. */
  .gallery-grid figure:hover img { transform: none; }
}

/* =========================================================
   V33 · Aire entre las dos líneas de los titulares con cursiva

   The headings are set at `line-height: .98`, and Cormorant's italic climbs as
   high as the roman's descenders come down: the italic line was crossing the one
   above. Measured with the real fonts, the ink of the two lines overlapped by
   2,4 px in the plans heading, 2,1 px in the features one and 3,1 px in the homes
   one (the other two headings have room).

   The note asks for a margin on the upper text, which is a bare text node before
   the `<br>` and cannot take one, so the margin goes on the italic line instead,
   which separates the two the same way. It has to be `inline-block`: vertical
   margins are ignored on an inline box. The value is in `em`, so each heading
   gets the space in proportion to its own size.
   ========================================================= */

.plans-heading h2 em,
.homes-body h2 em,
.features-section h2 em {
  display: inline-block;
  margin-top: .12em;
}

/* =========================================================
   V34 · The whole hero above the fold, button included (client)

   The hero copy was replaced by a longer one (2 lines -> 3 on desktop, 5-6 on
   phones) and that was enough to push the "Agendar cita" button out of the
   first screen. Measured before this block: the hero ended at 991 px on a
   390 x 844 phone (button cut by 51 px), at 815 px on a 980 x 760 tablet
   (15 px) and at 602 px on a 1024 x 600 laptop (2 px).

   The client's rule is that the button is always visible in the available
   viewport, and the block cannot shrink on its own, so its parts are now capped
   by viewport HEIGHT as well as by width: every size reads
   `clamp(<floor>, min(<width term>, <svh term>), <ceiling>)`, which keeps the
   current typography on a tall screen and shrinks it only as far as needed on a
   short one. Paddings and gaps follow the same idea.

   Two further decisions:
   - `justify-content: safe center` on the desktop content (browsers without
     `safe` fall back to the plain `center` it already had): it centres the
     block, but drops to flex-start when there is no room, so the heading can
     never climb up behind the fixed header.
   - On a landscape phone (or a very short window) the facts row goes: on a
     568 x 320 screen the block would need 430 px even at the smallest readable
     sizes, and the summary it carries (price, homes, surfaces, what is
     included) is repeated further down the page anyway. The button and the
     link under it sit on one row there, which saves another 30 px.
   ========================================================= */

/* Desktop. The very short heights stay with the V6 block below, which is tuned
   for that case and is deliberately not overridden here. */
@media (min-width: 981px) and (min-height: 541px) {
  .hero-content {
    justify-content: safe center;
    padding-top: clamp(84px, 9svh, 132px);
    padding-bottom: clamp(24px, 5svh, 56px);
  }
  .hero h1 { font-size: clamp(44px, min(5.5vw, 8.8svh), 79px); }
  .hero .eyebrow { margin-bottom: clamp(12px, 1.8svh, 18px); }
  .hero-copy {
    margin-top: clamp(12px, 2.6svh, 26px);
    font-size: clamp(17px, min(20px, 2.8svh), 20px);
  }
  .hero-facts {
    margin-top: clamp(14px, 3.2svh, 34px);
    padding-top: clamp(10px, 2.4svh, 24px);
  }
  .hero-actions { margin-top: clamp(14px, 3.4svh, 36px); }
}

/* Tablet. The hero stops forcing the exact viewport height (see V28), so the
   only thing to do here is fit the block in less room. */
@media (min-width: 681px) and (max-width: 980px) {
  .hero-content {
    padding-top: clamp(96px, 14svh, 170px);
    padding-bottom: clamp(28px, 5svh, 46px);
  }
  .hero h1 { font-size: clamp(38px, min(7.6vw, 7svh), 65px); }
  .hero .eyebrow { font-size: 14px; margin-bottom: clamp(10px, 1.6svh, 18px); }
  .hero-copy {
    margin-top: clamp(12px, 2svh, 22px);
    font-size: clamp(16px, min(17px, 2.4svh), 18px);
    line-height: 1.55;
  }
  .hero-facts {
    margin-top: clamp(14px, 2.6svh, 30px);
    padding-top: clamp(12px, 2svh, 20px);
    gap: clamp(12px, 2svh, 16px) clamp(22px, 4vw, 34px);
  }
  .hero-actions { margin-top: clamp(14px, 2.6svh, 28px); }
}

/* Phone. Here the hero keeps `min-height: 100svh`, so padding plus content has
   to add up to less than the screen or the button falls out of it. */
@media (max-width: 680px) {
  .hero-content {
    padding-top: clamp(76px, 12svh, 132px);
    padding-bottom: clamp(22px, 4svh, 46px);
  }
  .hero h1 { font-size: clamp(29px, min(10.5vw, 5.4svh), 52px); }
  .hero .eyebrow { font-size: 13px; margin-bottom: clamp(8px, 1.4svh, 14px); }
  .hero-copy {
    margin-top: clamp(10px, 1.8svh, 18px);
    font-size: clamp(14px, min(16px, 2.3svh), 18px);
    line-height: 1.5;
  }
  .hero-facts {
    margin-top: clamp(12px, 2svh, 24px);
    padding-top: clamp(10px, 1.6svh, 18px);
    gap: clamp(8px, 1.6svh, 14px) clamp(16px, 4vw, 26px);
  }
  .hero-fact dt { font-size: 10px; }
  .hero-fact dd { font-size: clamp(15px, 2.4svh, 19px); }
  .hero-included span { font-size: clamp(13px, 1.9svh, 14px); }
  .hero-actions {
    margin-top: clamp(12px, 2.2svh, 26px);
    gap: clamp(12px, 2svh, 24px);
  }
  .hero-actions .button { min-height: clamp(42px, 6.4svh, 54px); }
  .hero-actions .text-link { font-size: 14px; }
}

/* Landscape phones and very short windows: only what cannot be dropped stays
   (heading, copy and the button), and the two elements of the call to action go
   back on one row, where they cost the height of a single button. */
@media (max-width: 980px) and (max-height: 520px) {
  .hero-content { padding-top: clamp(52px, 14svh, 96px); padding-bottom: 10px; }
  .hero .eyebrow { font-size: 11px; margin-bottom: 6px; }
  .hero h1 { font-size: clamp(22px, min(6.4vw, 8.4svh), 34px); line-height: .98; }
  .hero-copy {
    max-width: none;
    margin-top: 8px;
    font-size: clamp(13px, min(14px, 3.6svh), 15px);
    line-height: 1.35;
  }
  .hero-facts { display: none; }
  .hero-actions {
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    gap: 16px;
  }
  .hero-actions .button { min-height: 40px; padding-inline: 20px; }
  .hero-actions .text-link { font-size: 14px; }
}

/* =========================================================
   V35 · The hero description moves to the "Las viviendas" block (client)

   The client found the hero loaded, especially on phones, so the descriptive
   paragraph (`.hero-copy`) now sits in the second module as `.homes-copy`,
   right under the heading, as the introduction of the section. It shares the
   typography of the summary line that was already there (see the grouped
   `.homes-copy, .homes-lead` rule above), so the two read as one block of copy
   and the module keeps its rhythm.

   `.hero-copy` no longer matches anything on the landing: its rules in V6 and
   V34 are kept in place for reference, like the other retired blocks in this
   file. The reveal delays of `.homes-body`'s children already covered five
   steps, so the new paragraph slots right after the heading without touching
   them.
   ========================================================= */