/* ==========================================================================
   ARENZA · portada (ES /, EN /en/) · versión 11-11 sobre el «Brief visual» de Iker
   Orden: héroe · cifras + sobre nosotros · propiedades destacadas · asesoría privada · gestión de activos ·
   sobre ARENZA · journal · consulta privada. Sin cortina, sin selector de foto y sin titulares partidos: lo que se ve
   al cargar entra por CSS (el héroe es el LCP) y el resto usa los revelados suaves del núcleo (data-reveal="up").
   Prefijo propio: ini-. El marcado sale de tools/home/rehacer_home.py.
   ========================================================================== */

/* ---------- 00 · héroe: foto a sangre, menú encima con degradado suave, texto azul sobre el cielo ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center;
  min-height: 100svh;
  background: #C9D6E2;                             /* el cielo de la foto, mientras llega */
}
@media (min-width: 900px) { .hero { min-height: max(640px, 100svh); } }
.hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__ph, .hero__ph img { display: block; width: 100%; height: 100%; }
.hero__ph img { object-fit: cover; object-position: var(--op, 62% 42%); }
/* degradado oscuro arriba, solo para que se lea el menú (sin franja) */
.hero__shade {
  position: absolute; inset: 0 0 auto; z-index: -1; height: clamp(150px, 24vh, 240px); pointer-events: none;
  background: linear-gradient(180deg, rgb(8 24 39 / .62) 0%, rgb(8 24 39 / .36) 34%, rgb(8 24 39 / .12) 68%, rgb(8 24 39 / 0) 100%);
}
.hero__content {
  display: grid; justify-items: start; align-content: center; gap: clamp(18px, 2vw, 30px);
  padding-top: calc(var(--hdr-h) + clamp(24px, 6vh, 72px)); padding-bottom: clamp(48px, 12vh, 140px);
}
.hero__t {
  font: 400 clamp(2.5rem, 4.7vw, 5.25rem)/1.03 var(--serif); letter-spacing: -.012em;
  color: var(--ink); text-wrap: balance;
}
.hero__ln { display: block; white-space: nowrap; }
.hero__sub { max-width: 38ch; font: 400 clamp(1.15rem, 1.5vw, 1.55rem)/1.42 var(--serif); color: var(--ink); text-wrap: pretty; }
/* móvil en vertical: foto alta, el texto arriba sobre el cielo */
@media (max-aspect-ratio: 4/5) {
  .hero { align-items: start; }
  .hero__ph img { object-position: var(--op-alta, 50% 50%); }
  .hero__content { padding-top: calc(var(--hdr-h) + clamp(28px, 7svh, 64px)); }
  .hero__t { font-size: clamp(2.15rem, 9.4vw, 3.1rem); }
  .hero__ln { display: inline; white-space: normal; }
  .hero__sub { font-size: clamp(1.08rem, 4.4vw, 1.3rem); max-width: 30ch; }
}
@media (max-width: 899px) and (min-aspect-ratio: 801/1000) { .hero__ln { display: inline; white-space: normal; } }
@media (max-width: 389px) { .hero__t { font-size: 2.05rem; } }
/* móvil en horizontal */
@media (max-width: 899px) and (max-height: 500px) {
  .hero { min-height: 100svh; }
  .hero__content { padding-top: calc(var(--hdr-h) + 16px); padding-bottom: 28px; }
  .hero__t { font-size: 2rem; }
  .hero__sub { font-size: 1.05rem; }
}
/* entrada al cargar: corta, solo opacidad y un desplazamiento pequeño (h1 primero) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__t, .js .hero__sub { animation: hero-in 1s var(--ease-out) both; }
  .js .hero__t { animation-delay: .1s; }
  .js .hero__sub { animation-delay: .28s; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- enlaces de la portada: versalitas con la raya debajo de texto y flecha ---------- */
.ini-go {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat;
  transition: color .3s, background-size .55s var(--ease-out);
}
.ini-go .arw { width: 22px; transition: transform .5s var(--ease-out); }
.ini-go .arw--ne { width: 10px; height: 10px; }
@media (hover: hover) {
  .ini-go:hover { color: var(--gold-ink); }
  .ini-go:hover .arw { transform: translateX(5px); }
  .ini-go:hover .arw--ne { transform: translate(2px, -2px); }
}

/* ---------- titulares de la portada: Cormorant normal (400), un punto más firme que en el resto ---------- */
.page-inicio :is(.h-1, .h-2) { font-weight: 400; }
.page-inicio .h-2 { font-size: clamp(2.1rem, 3.3vw, 3.65rem); line-height: 1.06; letter-spacing: -.008em; }
.ini-txt { font-size: 16.5px; line-height: 1.65; color: var(--mute); text-wrap: pretty; }

/* ---------- 01 · cifras: banda navy, cuatro columnas con filete vertical ---------- */
.ini-kpi { background: var(--ink); color: var(--paper); padding-block: clamp(18px, 2.6vw, 40px); }
.ini-kpi__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ini-kpi__i { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 10px; padding: 18px 6px; text-align: center; }
.ini-kpi__i:nth-child(odd) { border-right: 1px solid rgb(248 242 232 / .28); }
.ini-kpi__i:nth-child(-n + 2) { border-bottom: 1px solid rgb(248 242 232 / .28); }
.ini-kpi__n { margin: 0; font: 400 clamp(2.25rem, 4vw, 4.1rem)/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; }
.ini-kpi__k { font: 500 10.5px/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgb(248 242 232 / .86); }
@media (min-width: 900px) {
  .ini-kpi__dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ini-kpi__i { padding-block: 6px; }
  .ini-kpi__i:nth-child(odd) { border-right: 0; }
  .ini-kpi__i:nth-child(-n + 2) { border-bottom: 0; }
  .ini-kpi__i + .ini-kpi__i { border-left: 1px solid rgb(248 242 232 / .28); }
  .ini-kpi__k { font-size: 12px; }
}

/* ---------- 01 · sobre nosotros: titular, entradilla y tres servicios con su dibujo ---------- */
.ini-sn { padding-top: clamp(48px, 6vw, 100px); }
.ini-sn__head { display: grid; gap: clamp(14px, 1.6vw, 24px); justify-items: start; margin-bottom: clamp(36px, 4.6vw, 76px); }
.ini-sn__t { font-size: clamp(2.2rem, 3.45vw, 3.9rem); line-height: 1.04; text-wrap: balance; }
.ini-sn__intro { max-width: 96ch; font-size: clamp(1.12rem, 1.3vw, 1.38rem); color: var(--ink-2); text-wrap: pretty; }
.ini-sn__cols { display: grid; }
.ini-sn__c { display: grid; align-content: start; justify-items: start; gap: 14px; padding-block: 32px; border-top: 1px solid var(--line); }
.ini-sn__c:first-child { padding-top: 0; border-top: 0; }
.ini-sn__dib { width: min(100%, 420px); justify-self: center; margin-bottom: 14px; }
.ini-sn__h { font: 400 clamp(1.8rem, 2.35vw, 2.45rem)/1.06 var(--serif); letter-spacing: -.005em; }
.ini-sn__p { font-size: 16px; line-height: 1.62; color: var(--mute); max-width: 46ch; text-wrap: pretty; }
.ini-sn__c .ini-go { margin-top: 6px; }
.dib--falta { width: 100%; margin: 0; background: var(--paper-2); }
@media (min-width: 900px) {
  /* columnas del mismo ancho: el filete va en medio del hueco (no como borde con relleno, que estrechaba la central) */
  .ini-sn__cols { --g: clamp(40px, 5.4vw, 92px); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--g); }
  .ini-sn__c { position: relative; grid-row: span 4; grid-template-rows: subgrid; padding: 0; border-top: 0; }
  .ini-sn__c + .ini-sn__c::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px; background: var(--line-gold); }
}

/* ---------- 02 · propiedades destacadas: cuatro tarjetas iguales, precio y datos alineados ---------- */
.ini-opp { padding-top: calc(var(--section) * .8); }
.ini-opp__head { row-gap: 18px; margin-bottom: clamp(30px, 3.6vw, 56px); align-items: start; }
.ini-opp__ttl { display: grid; gap: 16px; justify-items: start; }
.ini-opp__intro { font-size: 16px; line-height: 1.65; color: var(--mute); max-width: 54ch; text-wrap: pretty; }
@media (min-width: 900px) { .ini-opp__intro { margin-top: 28px; padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--line); } }
.ini-opp__rail { padding-block: 4px; }
.ini-opp__rail > .lot-card { width: min(78vw, 340px); }
.ini-opp .lot-card__media { aspect-ratio: 9 / 10; margin-bottom: 14px; }
.ini-opp .lot-card__media img { transition: scale 1.2s var(--ease-out); }
.ini-opp .lot-card__meta { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.ini-opp .lot-card__name { font: 400 clamp(1.6rem, 1.8vw, 2rem)/1.05 var(--serif); }
.ini-opp .lot-card__price { font: 400 clamp(1.3rem, 1.45vw, 1.55rem)/1.1 var(--serif); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ini-opp .lot-card__facts { display: flex; flex-wrap: wrap; align-items: center; padding-top: 4px; font-size: 13px; line-height: 1.4; color: var(--mute); }
.ini-opp .lot-card__facts span + span::before { content: ""; display: inline-block; width: 1px; height: .95em; margin-inline: 10px; background: var(--line); vertical-align: -.12em; }
@media (hover: hover) and (pointer: fine) { .ini-opp .lot-card__a:hover .lot-card__media img { scale: 1.035; } }
.ini-opp__ui { display: grid; gap: 14px; margin-top: 22px; }
.ini-opp__hint { color: var(--mute); }
.ini-opp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; margin-top: clamp(30px, 3.6vw, 52px); }
.ini-opp__alt { display: grid; justify-items: start; gap: 2px; font-size: 14px; color: var(--mute); }
@media (max-width: 599px) { .ini-opp__foot .btn { width: 100%; } }
@media (min-width: 900px) {
  .ini-opp__ui { display: none; }
  .ini-opp__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); overflow: visible; padding-inline: var(--bleed); scroll-snap-type: none; cursor: auto; }
  .ini-opp__rail > .lot-card { width: auto; }
  .ini-opp__rail::after { display: none; }
  .ini-opp__alt { justify-items: end; text-align: right; }
}
@media (min-width: 1100px) { .ini-opp__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 03 · asesoría privada: foto a sangre a la izquierda, una columna a la derecha ---------- */
.ini-pa { display: grid; }
.ini-pa__fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.ini-pa__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.ini-pa__txt { display: grid; align-content: center; justify-items: start; gap: 22px; padding: clamp(40px, 8vw, 64px) var(--margin) var(--section); }
.ini-pa .h-2 { max-width: 26ch; }
.ini-pa__p { font-size: 16.5px; line-height: 1.65; color: var(--mute); max-width: 54ch; text-wrap: pretty; }
.ini-bul { width: 100%; max-width: 600px; margin: 4px 0 2px; }
.ini-bul li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; padding-block: clamp(13px, 1.5vw, 20px); font: 400 clamp(1.25rem, 1.6vw, 1.6rem)/1.25 var(--serif); color: var(--ink); }
.ini-bul li + li::before { content: ""; position: absolute; top: 0; left: 30px; right: 0; height: 1px; background: var(--line); }
.ini-bul i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: translateY(-.12em); }
@media (min-width: 900px) {
  .ini-pa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ini-pa__fig { aspect-ratio: auto; height: 100%; min-height: min(860px, 92svh); }
  .ini-pa__txt {
    padding-block: var(--section);
    padding-left: clamp(36px, 5.2vw, 96px);
    padding-right: max(var(--margin), calc((var(--vw) - var(--maxw)) / 2 + var(--margin)));
  }
}

/* ---------- 04 · gestión de activos: mensaje y tres beneficios a la izquierda, foto a la derecha ---------- */
.ini-am { background-color: var(--paper-2); background-image: var(--grain); }
.ini-am__grid { row-gap: 40px; align-items: stretch; }
.ini-am__txt { min-width: 0; display: grid; align-content: start; justify-items: start; gap: 22px; }
.ini-am .h-2 { max-width: 24ch; }
.ini-am__p { font-size: 16.5px; line-height: 1.65; color: var(--mute); max-width: 54ch; text-wrap: pretty; }
.ini-ben { display: grid; width: 100%; margin-top: 8px; }
.ini-ben__i { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; padding-block: 18px; border-top: 1px solid var(--line); }
.ini-ben__ico { grid-row: 1 / 3; width: 38px; height: 38px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ini-ben__t { font: 400 clamp(1.4rem, 1.75vw, 1.75rem)/1.08 var(--serif); }
.ini-ben__p { font-size: 14.5px; line-height: 1.55; color: var(--mute); text-wrap: pretty; }
.ini-am__btn { margin-top: 12px; }
.ini-am__fig { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.ini-am__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 600px) {
  .ini-ben { --g: clamp(28px, 3.4vw, 56px); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
  .ini-ben__i { position: relative; grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 4px 0; border-top: 0; }
  .ini-ben__i + .ini-ben__i::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px; background: var(--line); }
  .ini-ben__ico { grid-row: auto; margin-bottom: 8px; }
  .ini-ben__t { max-width: 11ch; }
}
@media (min-width: 900px) {
  .ini-am__txt { padding-right: clamp(0px, 2vw, 32px); }
  .ini-am__fig { aspect-ratio: auto; min-height: 560px; }
}
@media (max-width: 899px) { .ini-am__fig { margin-inline: calc(-1 * var(--margin)); } }

/* ---------- 05 · sobre ARENZA: el dibujo de la finca y tres filas de atributos ---------- */
.ini-firm__grid { row-gap: 28px; align-items: center; }
.ini-firm__fig { min-width: 0; }
.ini-firm__fig .dib { width: 100%; }
.ini-firm__col { min-width: 0; display: grid; gap: 20px; justify-items: start; align-content: start; }
.ini-firm .h-2 { max-width: 24ch; }
.ini-firm__p { font-size: 16.5px; line-height: 1.65; color: var(--mute); max-width: 60ch; text-wrap: pretty; }
.ini-pil { display: grid; width: 100%; margin-top: clamp(8px, 1.4vw, 20px); border-top: 1px solid var(--ink); }
.ini-pil > div { position: relative; display: grid; row-gap: 6px; padding: 20px 0 22px 48px; border-bottom: 1px solid var(--line); }
.ini-pil dt { font: 400 clamp(1.55rem, 2vw, 2.05rem)/1.1 var(--serif); }
.ini-pil dt span { position: absolute; left: 0; top: 30px; font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .16em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.ini-pil dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 36ch; text-wrap: pretty; }
@media (max-width: 899px) { .ini-firm__fig .dib { max-width: min(100%, 420px); margin-inline: auto; } }
@media (min-width: 1100px) {
  .ini-pil > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; padding-block: 18px 20px; }
  .ini-pil dt span { top: 26px; }
}

/* ---------- 06 · journal: un artículo protagonista y dos secundarios ---------- */
.ini-jr { padding-top: calc(var(--section) * .7); padding-bottom: calc(var(--section) * .7); }
.ini-jr__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(18px, 2.2vw, 32px); }
.ini-jr__grid { display: grid; row-gap: 36px; }
.ini-jr__lead { display: grid; align-content: start; justify-items: start; gap: 14px; }
.ini-jr__media { width: 100%; margin: 0 0 6px; aspect-ratio: 16 / 9.4; overflow: hidden; background: var(--sand); }
.ini-jr__media img, .ini-jr__th img { width: 100%; height: 100%; object-fit: cover; }
.ini-jr__cat { display: inline-flex; align-items: center; gap: .9em; }
.ini-jr__cat::after { content: ""; width: 18px; height: 1px; background: var(--line-gold); }
.ini-jr__lead .h-2 { font-size: clamp(1.95rem, 2.8vw, 3.05rem); max-width: 26ch; }
.ini-jr__t a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease-out); }
@media (hover: hover) { .ini-jr__t a:hover { background-size: 100% 1px; } }
.ini-jr__t a:focus-visible { background-size: 100% 1px; }
.ini-jr__ex { font-size: 16px; line-height: 1.6; color: var(--mute); max-width: 62ch; text-wrap: pretty; }
.ini-jr__btn { margin-top: 6px; }
.ini-jr__list { display: grid; align-content: start; }
.ini-jr__item { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 30px); padding-block: clamp(20px, 2.4vw, 34px); border-top: 1px solid var(--line); }
.ini-jr__th { margin: 0; aspect-ratio: 2 / 3; overflow: hidden; background: var(--sand); }
.ini-jr__it { display: grid; justify-items: start; gap: 12px; }
.ini-jr__item .h-3 { font-size: clamp(1.35rem, 1.6vw, 1.7rem); line-height: 1.16; font-weight: 400; max-width: 22ch; }
@media (min-width: 900px) {
  .ini-jr__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); row-gap: 0; }
  .ini-jr__lead { padding-right: clamp(24px, 2.8vw, 48px); border-right: 1px solid var(--line); }
  .ini-jr__list { padding-left: clamp(24px, 2.8vw, 48px); }
  .ini-jr__item:first-child { padding-top: 0; border-top: 0; }
  .ini-jr__item + .ini-jr__item { border-top: 1px solid var(--line); }
}

/* ---------- 07 · consulta privada: titular, botones y Madrid dibujado de margen a margen ---------- */
.page-inicio .cta-end { padding-top: calc(var(--section) * .8); padding-bottom: 0; }
.page-inicio .cta-end__t { max-width: 19ch; }
.cta-pano { margin-top: clamp(8px, 2vw, 32px); aspect-ratio: 2400 / 900; overflow: hidden; }   /* el dibujo ya trae su cielo */
.cta-pano .dib__svg { width: 100%; height: 100%; }
@media (max-width: 899px) { .cta-pano { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .page-inicio .cta-end .grid { align-items: end; }
  .page-inicio .cta-end__aside { margin-top: 0; padding-bottom: .4em; }
}