.fungi-main-hub { overflow: clip; background: #f2f0ea; }
.hub-stage { position: relative; min-height: calc(100svh - 88px); padding: 12px; color: #fff; background: #171512; isolation: isolate; }
.hub-opening { position: absolute; z-index: 8; top: 27px; right: 34px; left: 34px; display: flex; justify-content: space-between; pointer-events: none; font: 700 7px/1 var(--fungi-sans); letter-spacing: .18em; }
.hub-main-title { position: absolute; z-index: 8; top: clamp(44px,6vh,70px); left: 50%; width: min(94vw,1260px); margin: 0; color: #fff; text-align: center; white-space: nowrap; text-shadow: 0 3px 36px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4); transform: translateX(-50%); pointer-events: none; }
.hub-main-title span, .hub-main-title em { display: inline-block; font: 400 clamp(2.8rem,4vw,5.25rem)/.9 var(--fungi-serif); letter-spacing: -.06em; }
.hub-main-title em { margin-left: .14em; font-size: clamp(2.45rem,3.6vw,4.7rem); font-style: italic; }
.hub-experiences { display: flex; min-height: calc(100svh - 112px); overflow: hidden; border-radius: 2px; }
.hub-experience { --hub-accent: #df3768; position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.22); transition: flex-basis .75s cubic-bezier(.72,0,.18,1), filter .55s ease; isolation: isolate; }
.hub-experience + .hub-experience { border-left: 0; }
.hub-experience--cabins { --hub-accent: #a9bd78; }
.hub-experience-bg, .hub-experience-shade { position: absolute; inset: 0; display: block; }
.hub-experience-bg { z-index: -2; background: #62564c center/cover no-repeat; transform: scale(1.06) translate3d(calc(var(--hub-x,0) * 1px),calc(var(--hub-y,0) * 1px),0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.hub-experience-shade { z-index: -1; background: linear-gradient(180deg,rgba(13,12,10,.34) 0%,rgba(13,12,10,.04) 36%,rgba(13,12,10,.2) 58%,rgba(13,12,10,.82) 100%); }
.hub-experience-number { position: absolute; right: clamp(20px,3vw,48px); bottom: -.1em; color: rgba(255,255,255,.1); font: 400 clamp(9rem,18vw,22rem)/.73 var(--fungi-serif); letter-spacing: -.1em; transition: color .5s, transform .7s cubic-bezier(.2,.8,.2,1); }
.hub-experience-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px,4vw,64px); }
.hub-experience-topline { position: absolute; top: clamp(170px,22vh,235px); right: clamp(24px,3.4vw,52px); left: clamp(24px,3.4vw,52px); display: flex; align-items: center; gap: 13px; font: 700 8px/1 var(--fungi-sans); letter-spacing: .18em; }
.hub-experience-topline b { padding: 8px 10px; color: #fff; background: var(--hub-accent); }
.hub-experience-topline i { width: 22px; height: 1px; background: rgba(255,255,255,.65); }
.hub-experience-topline small { font: inherit; }
.hub-experience-copy { position: relative; z-index: 2; display: grid; max-width: 510px; }
.hub-experience-copy > small { margin-bottom: 14px; color: rgba(255,255,255,.72); font: 700 7px/1 var(--fungi-sans); letter-spacing: .2em; }
.hub-experience-copy > strong { font: 400 clamp(3.2rem,6vw,7rem)/.77 var(--fungi-serif); letter-spacing: -.065em; text-wrap: balance; }
.hub-experience-copy > span { max-width: 37ch; min-height: 3.2em; margin-top: 20px; color: rgba(255,255,255,.84); font: 400 clamp(11px,.9vw,14px)/1.65 var(--fungi-sans); }
.hub-experience-cta { position: absolute; right: clamp(28px,4vw,64px); bottom: clamp(28px,4vw,64px); z-index: 3; display: grid; justify-items: center; gap: 9px; }
.hub-experience-cta i { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font: normal 18px/1 var(--fungi-sans); transition: color .3s, background .3s, border-color .3s, transform .35s; }
.hub-experience-cta span { font: 700 6px/1 var(--fungi-sans); letter-spacing: .14em; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }
.hub-experience:hover, .hub-experience:focus-visible { flex-basis: 58%; outline: 0; }
.hub-experiences:has(.hub-experience:hover) .hub-experience:not(:hover), .hub-experiences:has(.hub-experience:focus-visible) .hub-experience:not(:focus-visible) { filter: saturate(.72) brightness(.8); }
.hub-experience:hover .hub-experience-bg, .hub-experience:focus-visible .hub-experience-bg { transform: scale(1.015) translate3d(calc(var(--hub-x,0) * 1px),calc(var(--hub-y,0) * 1px),0); }
.hub-experience:hover .hub-experience-number, .hub-experience:focus-visible .hub-experience-number { color: var(--hub-accent); opacity: .34; transform: translateX(-12px); }
.hub-experience:hover .hub-experience-cta i, .hub-experience:focus-visible .hub-experience-cta i { color: #171512; border-color: var(--hub-accent); background: var(--hub-accent); transform: rotate(45deg); }
.hub-experience:hover .hub-experience-cta span, .hub-experience:focus-visible .hub-experience-cta span { opacity: 1; transform: none; }
.hub-monogram { position: absolute; z-index: 9; top: 50%; left: 50%; width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #201d19; background: #f2f0ea; transform: translate(-50%,-50%); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.hub-monogram span { font: 400 28px/.8 var(--fungi-serif); }
.hub-monogram small { position: absolute; top: calc(100% + 9px); color: rgba(255,255,255,.7); font: 700 6px/1 var(--fungi-sans); letter-spacing: .18em; }
.hub-scroll-cue { position: absolute; z-index: 9; bottom: 27px; left: 50%; display: grid; justify-items: center; gap: 8px; color: #fff; transform: translateX(-50%); font: 700 6px/1 var(--fungi-sans); letter-spacing: .17em; }
.hub-scroll-cue i { width: 1px; height: 25px; overflow: hidden; background: rgba(255,255,255,.35); }
.hub-scroll-cue i::after { content: ''; width: 1px; height: 12px; display: block; background: #fff; animation: hub-scroll 2s ease-in-out infinite; }
@keyframes hub-scroll { from { transform: translateY(-13px); } to { transform: translateY(27px); } }
.hub-manifesto { position: relative; min-height: 100svh; padding: clamp(100px,13vw,190px) clamp(20px,5vw,80px) 90px; color: #221f1b; background: #f2f0ea; }
.hub-manifesto-word { position: absolute; top: -.09em; right: -.04em; color: rgba(34,31,27,.035); font: 400 clamp(11rem,28vw,34rem)/1 var(--fungi-serif); letter-spacing: -.09em; pointer-events: none; }
.hub-manifesto-shell { position: relative; width: min(100%,1440px); margin: auto; }
.hub-manifesto-heading { display: grid; grid-template-columns: minmax(180px,.42fr) 1.58fr; gap: clamp(30px,7vw,110px); align-items: start; padding-bottom: clamp(70px,9vw,135px); }
.hub-manifesto-heading > p, .hub-manifesto-note > span { color: #a1294d; font: 700 7px/1.3 var(--fungi-sans); letter-spacing: .19em; }
.hub-manifesto-heading h2 { max-width: 16ch; margin: 0; font: 400 clamp(3.5rem,7vw,8rem)/.92 var(--fungi-serif); letter-spacing: -.055em; text-wrap: balance; }
.hub-manifesto-grid { display: grid; grid-template-columns: .65fr 1.35fr; border-top: 1px solid rgba(34,31,27,.18); }
.hub-manifesto-note { padding: 40px 6vw 40px 0; border-right: 1px solid rgba(34,31,27,.18); }
.hub-manifesto-note p { max-width: 40ch; margin: 30px 0 0; color: #625d56; font: 400 13px/1.85 var(--fungi-sans); }
.hub-manifesto-statement { padding: 34px 0 50px clamp(30px,6vw,95px); }
.hub-manifesto-statement p, .hub-manifesto-statement span { display: block; margin: 0; font: 400 clamp(2.4rem,5vw,6.1rem)/.93 var(--fungi-serif); letter-spacing: -.05em; }
.hub-manifesto-statement span { color: #2e3b29; font-style: italic; }
.hub-manifesto-index { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(34,31,27,.18); }
.hub-manifesto-index a { display: grid; grid-template-columns: 35px 1fr auto; gap: 15px; align-items: center; min-height: 74px; padding: 0 25px; transition: color .25s, background .25s; }
.hub-manifesto-index a:first-child { border-right: 1px solid rgba(34,31,27,.18); }
.hub-manifesto-index small { font: 700 7px/1 var(--fungi-sans); }
.hub-manifesto-index span { font: 400 clamp(1.2rem,2vw,2rem)/1 var(--fungi-serif); }
.hub-manifesto-index i { color: #8e8880; font: 500 7px/1 var(--fungi-sans); font-style: normal; letter-spacing: .12em; }
.hub-manifesto-index a:hover, .hub-manifesto-index a:focus-visible { color: #fff; outline: 0; background: #d72f5e; }
@media (max-width:900px) {
	.hub-stage { min-height: auto; padding: 7px; }
	.hub-opening { top: 18px; right: 16px; left: 16px; }
	.hub-opening span:last-child { display: none; }
	.hub-main-title { top: 51px; }
	.hub-main-title { width: min(92vw,600px); white-space: normal; }
	.hub-main-title span, .hub-main-title em { display: block; }
	.hub-main-title span { font-size: clamp(2.15rem,9vw,4rem); }
	.hub-main-title em { margin-top: .18em; margin-left: 0; font-size: clamp(1.65rem,7vw,3rem); }
	.hub-experiences { min-height: 900px; display: grid; grid-template-rows: 1fr 1fr; border-radius: 0; }
	.hub-experience { min-width: 100%; border: 1px solid rgba(255,255,255,.22); }
	.hub-experience + .hub-experience { border-top: 0; border-left: 1px solid rgba(255,255,255,.22); }
	.hub-experience-topline { top: 31px; }
	.hub-experience--casa .hub-experience-topline { top: 150px; }
	.hub-experience-body { padding: 28px 24px 34px; }
	.hub-experience-copy { max-width: calc(100% - 65px); }
	.hub-experience-copy > strong { font-size: clamp(2.7rem,13vw,4.7rem); }
	.hub-experience-copy > span { min-height: 0; margin-top: 11px; font-size: 10px; line-height: 1.55; }
	.hub-experience-cta { right: 22px; bottom: 32px; }
	.hub-experience-cta i { width: 45px; height: 45px; }
	.hub-experience-cta span { display: none; }
	.hub-experience-number { right: 20px; font-size: 11rem; }
	.hub-monogram { width: 54px; height: 54px; }
	.hub-scroll-cue { display: none; }
	.hub-manifesto { min-height: auto; padding: 100px 20px 60px; }
	.hub-manifesto-heading { grid-template-columns: 1fr; gap: 28px; padding-bottom: 70px; }
	.hub-manifesto-heading h2 { font-size: clamp(3rem,13vw,5rem); }
	.hub-manifesto-grid { grid-template-columns: 1fr; }
	.hub-manifesto-note { padding: 30px 0 45px; border-right: 0; border-bottom: 1px solid rgba(34,31,27,.18); }
	.hub-manifesto-statement { padding: 45px 0; }
	.hub-manifesto-index { grid-template-columns: 1fr; }
	.hub-manifesto-index a:first-child { border-right: 0; border-bottom: 1px solid rgba(34,31,27,.18); }
}
@media (max-width:422px) {
	/* En teléfonos compactos las dos decisiones viven en la primera pantalla. */
	.hub-stage { min-height: calc(100svh - 76px); padding: 5px; }
	.hub-experiences { height: calc(100svh - 86px); min-height: 480px; grid-template-rows: repeat(2,minmax(0,1fr)); }
	.hub-opening { top: 13px; right: 13px; left: 13px; font-size: 5px; }
	.hub-main-title { top: 38px; width: 94vw; }
	.hub-main-title span { font-size: clamp(1.8rem,8.6vw,2.35rem); }
	.hub-main-title em { margin-top: .08em; font-size: clamp(1.35rem,6.5vw,1.8rem); }
	.hub-experience-body { padding: 18px 16px 20px; }
	.hub-experience-topline { top: 18px; right: 16px; left: 16px; gap: 8px; font-size: 6px; }
	.hub-experience--casa .hub-experience-topline { top: 108px; }
	.hub-experience-topline b { padding: 6px 8px; }
	.hub-experience-topline i { width: 13px; }
	.hub-experience-topline small { display: none; }
	.hub-experience-copy { max-width: calc(100% - 52px); }
	.hub-experience-copy > small { margin-bottom: 6px; font-size: 5px; }
	.hub-experience-copy > strong { font-size: clamp(2.15rem,11.5vw,3.15rem); line-height: .78; }
	.hub-experience-copy > span { display: none; }
	.hub-experience-cta { right: 15px; bottom: 19px; }
	.hub-experience-cta i { width: 40px; height: 40px; font-size: 15px; background: rgba(18,17,14,.18); backdrop-filter: blur(5px); }
	.hub-experience-number { right: 14px; font-size: 7.5rem; }
	.hub-monogram { width: 46px; height: 46px; }
	.hub-monogram span { font-size: 22px; }
	.hub-monogram small { display: none; }
	.hub-manifesto-index a { grid-template-columns: 26px 1fr; padding: 0 14px; }
	.hub-manifesto-index i { display: none; }
}
@media (prefers-reduced-motion:reduce) {
	.hub-experience, .hub-experience-bg, .hub-experience-number, .hub-experience-cta i, .hub-experience-cta span { transition: none !important; }
	.hub-scroll-cue i::after { animation: none; }
}