/* RMH Trading — architectural hero. Scoped: index only. Original navbar & interior pages unchanged. */


.hero--architectural {
  --rmh-nav-height: 96px;
  --hero-padding-x: clamp(28px, 6.9vw, 125px);
  position: relative;
  height: calc(248svh - var(--rmh-nav-height));
  min-height: 1040px;
  isolation: isolate;
  background: #111c26;
  color: #fff;
  overflow: clip;
  font-family: 'DM Sans', sans-serif;
}
.hero--architectural .hero__sticky {
  position: sticky;
  top: var(--rmh-nav-height);
  height: max(580px, calc(100svh - var(--rmh-nav-height)));
  min-height: 0;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.hero--architectural .hero__image-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #253542;
}
.hero--architectural .hero__image-frame picture {display:block; position:absolute; inset:0;}
.hero--architectural .hero__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 54%;
  transform: none;
  will-change: opacity;
}
.hero--architectural .hero__image--night {opacity: 0;}
.hero--architectural .hero__image-note {
  position: absolute;
  right: 42px;
  bottom: 28px;
  z-index: 2;
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero--architectural .hero__content {
  z-index: 2;
  position: absolute;
  top: 48%;
  left: var(--hero-padding-x);
  right: var(--hero-padding-x);
  transform: translateY(-48%);
  max-width: 1300px;
}
.hero--architectural .hero__location {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 31px;
  color: rgba(255,255,255,.91);
  font-size: clamp(10px, .73vw, 12px);
  font-weight: 750;
  letter-spacing: .23em;
  line-height: 1.4;
}
.hero--architectural .hero__location-mark {
  width: 28px; height: 1px; display:block; flex: none;
  background: #E18763;
}
.hero--architectural .hero__location-separator {color:#E18763;}
.hero--architectural #hero-title {
  margin: 0;
  color: white;
  max-width: 1190px;
  font-size: clamp(66px, 8.35vw, 152px);
  font-weight: 650;
  letter-spacing: -.082em;
  line-height: .965;
  text-wrap: balance;
}
.hero--architectural #hero-title .hero__line {
  display: block;
  white-space: nowrap;
}
.hero--architectural #hero-title .hero__line--accent {
  color: #ffffff;
  text-shadow: 0 3px 22px rgba(0,0,0,.22);
}
.hero--architectural .hero__bottom {
  margin-top: clamp(32px,4vw,66px);
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 32px clamp(50px, 6vw, 100px);
}
.hero--architectural .hero__bottom>p {
  margin: 0;
  max-width: 430px;
  color: rgba(255,255,255,.86);
  font-size: clamp(14px,1.13vw,17px);
  line-height: 1.68;
  letter-spacing: -.012em;
}
.hero--architectural .hero__actions {display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px;}
.hero--architectural .hero__primary {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  padding: 0 21px;
  background: #612027;
  border: 1px solid #612027;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .085em;
  text-transform: uppercase;
  transition: color .3s, background .3s, transform .3s, border-color .3s;
}
.hero--architectural .hero__primary svg {width:19px; height:19px; transition:transform .3s;}
.hero--architectural .hero__primary:hover {background:#f3e6dd; border-color:#f3e6dd; color:#142432; transform:translateY(-2px);}
.hero--architectural .hero__primary:hover svg {transform:translateX(4px)}
.hero--architectural .hero__secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 17px;
  border-bottom: 1px solid rgba(255,255,255,.53);
  padding: 5px 0;
  color:#fff;
  font-size: 12px;
  font-weight: 740;
  letter-spacing: .075em;
  text-transform: uppercase;
  transition: color .3s,border-color .3s,gap .3s;
}
.hero--architectural .hero__secondary span {font-size:20px;line-height:1; font-weight:350;}
.hero--architectural .hero__secondary:hover {color:#E18763;border-color:#E18763;gap:25px}
.hero--architectural .hero__side {
  position:absolute;
  z-index:2;
  right: 29px;
  top:48%;
  transform:translateY(-50%);
  writing-mode: vertical-rl;
  color:rgba(255,255,255,.8);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .25em;
}
.hero--architectural .hero__side span {color:#E18763;padding:9px 0;}
.hero--architectural .hero__reframe {
  position:absolute;
  z-index:3;
  top: 50%;
  left: min(7vw,125px);
  right: min(7vw,125px);
  text-align: center;
  transform:translateY(-50%);
  color: #fff;
  opacity: 0;
  pointer-events:none;
}
.hero--architectural .hero__reframe-eyebrow,
.hero--architectural .hero__reframe-index {
  display:block;
  font-size:clamp(9px,.87vw,12px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.22em;
  color:#E18763;
}
.hero--architectural .hero__reframe p {
  margin:27px 0 35px;
  color: #fff;
  font-size:clamp(62px,8.1vw,146px);
  font-weight:650;
  letter-spacing:-.077em;
  line-height: .96;
}
.hero--architectural .hero__reframe strong {font-weight:650;color:#ffffff;text-shadow:0 3px 22px rgba(0,0,0,.22)}
.hero--architectural .hero__scroll {
  position:absolute;
  bottom:27px;
  left:var(--hero-padding-x);
  z-index:4;
  display:flex;
  align-items:center;
  gap:17px;
  font-size:9px;
  font-weight:750;
  letter-spacing:.21em;
  color:rgba(255,255,255,.79);
}
.hero--architectural .hero__scroll-track {position:relative;width:57px;height:1px;background:rgba(255,255,255,.4);overflow:hidden}
.hero--architectural .hero__scroll-track i {display:block;position:absolute;top:0;left:-45%;width:45%;height:1px;background:#E18763;animation:rmhHeroTrace 2.2s ease-in-out infinite}
@keyframes rmhHeroTrace {0%{transform:translateX(0)}100%{transform:translateX(220px)}}
.hero--architectural .hero__chapter {position:absolute;z-index:4;bottom:26px;right:var(--hero-padding-x);color:rgba(255,255,255,.7);font-size:11px;font-weight:700;letter-spacing:.13em;}
.hero--architectural .hero__chapter span {color:#fff;font-size:16px}
@media(max-width:1240px){
  .hero--architectural #hero-title {font-size:clamp(61px,8.7vw,112px);}
  .hero--architectural .hero__bottom {margin-top:34px;}
  .hero--architectural .hero__content {top:50%;transform:translateY(-50%)}
  .hero--architectural .hero__side {right:17px;}
}
@media(max-width:850px){
  .hero--architectural {--hero-padding-x:clamp(25px,6vw,57px);min-height:920px;}
  .hero--architectural .hero__sticky {height:max(560px,calc(100svh - var(--rmh-nav-height)));}
  .hero--architectural .hero__image {object-position:61% center;}
  .hero--architectural #hero-title {font-size:clamp(58px,9.7vw,92px)}
  .hero--architectural .hero__side {display:none;}
  .hero--architectural .hero__image-note {right:24px;bottom:25px;}
  .hero--architectural .hero__bottom {align-items:start;flex-direction:column;gap:25px}
}
@media(max-width:700px){
  .hero--architectural {--hero-padding-x:clamp(23px,6vw,38px);height:calc(223svh - var(--rmh-nav-height));min-height:970px;}
  .hero--architectural .hero__sticky {height:max(535px,calc(100svh - var(--rmh-nav-height)));}
  .hero--architectural .hero__image {object-position:52% center;}
  .hero--architectural .hero__content {top:45%;left:var(--hero-padding-x);right:var(--hero-padding-x);transform:translateY(-42%)}
  .hero--architectural .hero__location {font-size:9px;letter-spacing:.16em;gap:8px;margin-bottom:25px;}
  .hero--architectural .hero__location-mark {width:20px;}
  .hero--architectural #hero-title {font-size:clamp(49px,11.2vw,76px);letter-spacing:-.076em;line-height:.99;}
  .hero--architectural .hero__bottom {margin-top:28px;gap:20px;}
  .hero--architectural .hero__bottom>p {font-size:13px;line-height:1.62;max-width:360px;}
  .hero--architectural .hero__actions {gap:8px 20px;}
  .hero--architectural .hero__primary {min-height:50px;padding:0 15px;gap:16px;font-size:10px;}
  .hero--architectural .hero__primary svg {width:17px;height:17px;}
  .hero--architectural .hero__secondary {font-size:10px;min-height:45px;gap:8px;}
  .hero--architectural .hero__secondary span {font-size:18px;}
  .hero--architectural .hero__scroll {left:var(--hero-padding-x);bottom:21px;font-size:8px;letter-spacing:.12em;gap:11px;}
  .hero--architectural .hero__scroll-track{width:30px}
  .hero--architectural .hero__chapter {bottom:19px;right:var(--hero-padding-x);font-size:9px}
  .hero--architectural .hero__chapter span {font-size:13px;}
  .hero--architectural .hero__image-note {bottom:55px;right:var(--hero-padding-x);font-size:7px;letter-spacing:.08em;text-align:right;max-width:65vw;}
  .hero--architectural .hero__reframe {left:20px;right:20px;}
  .hero--architectural .hero__reframe p {font-size:clamp(38px,8.6vw,70px);margin:21px 0 27px;letter-spacing:-.066em;}
  .hero--architectural .hero__reframe-eyebrow,.hero--architectural .hero__reframe-index {font-size:8px;letter-spacing:.16em;}
}
@media(max-width:420px){
  .hero--architectural .hero__content {top:45%;}
  .hero--architectural #hero-title {font-size:clamp(43px,10.5vw,54px);}
  .hero--architectural .hero__bottom>p {max-width:330px;}
  .hero--architectural .hero__primary {font-size:9px;}
  .hero--architectural .hero__secondary {font-size:9px;}
}
@media(max-height:650px) and (min-width:701px){
  .hero--architectural .hero__content {top:50%}
  .hero--architectural #hero-title {font-size:clamp(53px,7vw,94px)}
  .hero--architectural .hero__bottom {margin-top:19px}
  .hero--architectural .hero__location {margin-bottom:15px}
}
@media(prefers-reduced-motion:reduce){
 .hero--architectural {height:auto;min-height:0;overflow:visible;}
 .hero--architectural .hero__sticky {position:relative;top:0;height:max(650px,calc(100svh - var(--rmh-nav-height)));}
 .hero--architectural .hero__image {transform:none;}
 .hero--architectural .hero__scroll-track i {animation:none;}
}

/* Homepage overlay navbar: transparent at top, darkened only after actual scrolling.
   Keep ribbon orange, and let the two provided hero photographs sit behind the navbar. */
.page-home .rmh-header {
  position:fixed; top:0; left:0; right:0; width:100%; z-index:120;
  background:transparent; border-bottom:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.page-home .rmh-header.is-scrolled {
  background:rgba(97,32,39,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 35px rgba(10,20,30,.13);
}
.page-home .hero--architectural {
  height:248svh;
}
.page-home .hero--architectural .hero__sticky {
  top:0;
  height:100svh;
}
.page-home .hero--architectural .hero__image {
  transform:none; /* never zoom or pan the supplied facade images */
}
.page-home .hero--architectural .hero__location-mark,
.page-home .hero--architectural .hero__scroll-track {
  display:none;
}
/* All hero links and decorative accents use the new RMH palette. */
.hero--architectural #hero-title .hero__line--accent,
.hero--architectural .hero__reframe strong {color:#ffffff;}
.hero--architectural .hero__location-separator,
.hero--architectural .hero__side span {color:#E18763;}
.hero--architectural .hero__primary {background:#612027;border-color:#612027;color:#fff;}
.hero--architectural .hero__primary:hover {background:#612027;border-color:#612027;color:#fff;}
.hero--architectural .hero__secondary:hover {color:#E18763;border-color:#E18763;}
.hero--architectural .hero__reframe-eyebrow,.hero--architectural .hero__reframe-index {color:#E18763;}
@media(max-width:700px) {
  .page-home .hero--architectural {height:223svh;min-height:970px;}
  .page-home .hero--architectural .hero__sticky {top:0;height:100svh;min-height:535px;}
}
@media(prefers-reduced-motion:reduce) {
  .page-home .hero--architectural {height:auto;min-height:0;}
  .page-home .hero--architectural .hero__sticky {position:relative;top:0;height:max(650px,100svh);}
}


/* Refinement: keep both architectural photos slightly lower in the viewport.
   The identical object-position is applied to day and night (no zoom/pan).
   The frame stays full-bleed; priority is preserving the building's roofline. */
.page-home .hero--architectural .hero__image {
  object-position: 50% 19%;
  transform: none;
}
@media (max-width: 850px) {
  .page-home .hero--architectural .hero__image { object-position: 61% 20%; }
}
@media (max-width: 700px) {
  .page-home .hero--architectural .hero__image { object-position: 52% 20%; }
}


/* Ajuste de iluminación 2026-10-08: imágenes fijas, sin zoom ni cambios de encuadre. */
.hero--architectural .hero__image-frame .hero__dim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
/* Día: oscurecimiento muy sutil exclusivamente detrás del copy en escritorio. */
.hero--architectural .hero__dim--day {
  background:linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.48) 23%,rgba(0,0,0,.25) 47%,rgba(0,0,0,.08) 63%,transparent 76%);
  opacity:1;
}
/* Noche: velo uniforme del 20%, sin filtros ni viñetas. */
.hero--architectural .hero__dim--night {background:rgba(0,0,0,.20);opacity:0;}
@media(max-width:700px){
  .hero--architectural .hero__dim--day{display:block!important;background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.24) 43%,rgba(0,0,0,.08) 67%,transparent 86%);}
}

/* Primary home CTA uses RMH wine #612027; label and arrow remain white. */
.hero--architectural .hero__primary,
.hero--architectural .hero__primary:hover,
.hero--architectural .hero__primary:focus-visible {
  background-color:#612027;
  border-color:#612027;
  color:#fff;
}
.hero--architectural .hero__primary svg {stroke:currentColor;}


/* RMH HOME NAVBAR LOGO 2026-10-10
   Only index: increase the final navbar logo size; no animation/preloader transforms
   are changed, so the fly-to-navbar always measures the actual target bounds. */
@media (min-width:1241px) {
  .page-home .rmh-header__logo img { width:180px; }
}
@media (min-width:1121px) and (max-width:1240px) {
  .page-home .rmh-header__logo img { width:158px; }
}
@media (min-width:641px) and (max-width:1120px) {
  .page-home .rmh-header__logo { width:155px; }
  .page-home .rmh-header__logo img { width:146px; max-width:100%; }
}
@media (min-width:351px) and (max-width:640px) {
  .page-home .rmh-header__logo { width:141px; }
  .page-home .rmh-header__logo img { width:132px; max-width:100%; }
}
@media (max-width:350px) {
  .page-home .rmh-header__logo { width:126px; }
  .page-home .rmh-header__logo img { width:116px; max-width:100%; }
}


/* RMH HOME NAVBAR LOGO | 2026-10-10
   Use the existing is-scrolled state, which activates only when the
   hero-stripe reaches the navbar. No new scroll handlers and no GSAP overrides. */
.page-home .rmh-header__logo,
.page-home .rmh-header__logo img {
  transition-property: width, opacity, transform;
  transition-duration: .36s, .24s, .28s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1), ease, ease;
}
@media (min-width:1241px) {
  .page-home .rmh-header.is-scrolled .rmh-header__logo img { width:150px; }
}
@media (min-width:1121px) and (max-width:1240px) {
  .page-home .rmh-header.is-scrolled .rmh-header__logo img { width:136px; }
}
@media (min-width:641px) and (max-width:1120px) {
  .page-home .rmh-header.is-scrolled .rmh-header__logo { width:130px; }
  .page-home .rmh-header.is-scrolled .rmh-header__logo img { width:118px; }
}
@media (min-width:351px) and (max-width:640px) {
  .page-home .rmh-header.is-scrolled .rmh-header__logo { width:116px; }
  .page-home .rmh-header.is-scrolled .rmh-header__logo img { width:108px; }
}
@media (max-width:350px) {
  .page-home .rmh-header.is-scrolled .rmh-header__logo { width:116px; }
  .page-home .rmh-header.is-scrolled .rmh-header__logo img { width:100px; }
}
@media (prefers-reduced-motion:reduce) {
  .page-home .rmh-header__logo,
  .page-home .rmh-header__logo img { transition:none; }
}