@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');

/* ============================================================
   section-detail.css · v2026.04.27-01
   Base fiel al comportamiento horizontal de la referencia.
   Shell superior aislado del sitio principal.
   ============================================================ */

:root{
  --bg:#F5F3EE;
  --detail-concept-card:#A25436;
  --detail-canvas:var(--detail-concept-card);
  --detail-canvas-soft:color-mix(in srgb, var(--detail-concept-card) 84%, white 16%);
  --detail-canvas-ink:#F4EEE7;
  --detail-canvas-muted:rgba(244,238,231,.78);
  --detail-canvas-line:rgba(244,238,231,.22);
  --detail-split:50%;
  --detail-desktop-image-max-y-hero:22;
  --detail-desktop-image-max-y-gallery:7;
  --detail-desktop-image-scale-hero:1.24;
  --detail-desktop-image-scale-gallery:1.0;
  --detail-desktop-gallery-image-max-y:0;
  --detail-desktop-gallery-image-scale:1;
  --detail-desktop-secondary-media-scale:.88;
  --bg-2:color-mix(in srgb, var(--detail-concept-card) 14%, #F5F3EE 86%);
  --ink:#221f1c;
  --muted:#767974;
  --cream:#F5F3EE;
  --detail-route-mask-bg:var(--detail-concept-card);
  --surface-bg:#F5F3EE;
  --surface-line:#D8D5CF;
  --nav-bg:rgba(245,243,238,.72);
  --nav-bg-scrolled:rgba(245,243,238,.94);
  --vida:#A25436;
  --vida-glow:rgba(162,84,54,.28);
  --valor:#697A6A;
  --valor-glow:rgba(105,122,106,.26);
  --line:color-mix(in srgb, #A25436 22%, rgba(20,20,18,.16));
  --nav-h:58px;
  --sticky-h:76px;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --font-serif:'Cormorant Garamond', Georgia, serif;
  --font-sans:'Jost', system-ui, sans-serif;
  --shell-side-pad:16px;
  --shell-right-gap:8px;
  --shell-logo-size:14px;
  --shell-selector-pad:4px;
  --shell-selector-gap:2px;
  --shell-btn-py:7px;
  --shell-btn-px:14px;
  --shell-btn-radius:32px;
  --shell-cta-py:8px;
  --shell-cta-px:18px;
  --shell-cta-radius:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}
html{scrollbar-gutter:stable}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
body{overflow-x:hidden}
body.detail-page,
body.detail-page .page-view,
body.detail-page .pin-spacer,
body.detail-page .horizontal-w,
body.detail-page .h-track,
body.detail-page .h-track > section{
  background:var(--cream);
}
body.detail-page .hero,
body.detail-page .desc{
  background:var(--detail-concept-card);
}

.detail-shell-header{position:static;transition:none;will-change:auto}
.nav.detail-shell-nav,.detail-shell-nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;justify-content:center;padding:0 var(--shell-side-pad);background:rgba(245,243,238,.72);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:.5px solid transparent;transition:border-color .4s ease,background .4s ease}
.nav.detail-shell-nav a,.nav.detail-shell-nav button,.nav.detail-shell-nav span,.detail-shell-nav a,.detail-shell-nav button,.detail-shell-nav span{line-height:1}
.nav.detail-shell-nav button,.detail-shell-nav button{margin:0}
.nav-logo.detail-shell-logo,.detail-shell-logo{display:none;font-family:var(--font-serif);font-size:14px;font-weight:400;letter-spacing:.06em;color:var(--ink);white-space:nowrap;flex-shrink:0;text-decoration:none;transition:opacity .25s;line-height:1}
.detail-shell-logo:hover{opacity:.55}
.nav-selector.detail-shell-selector,.detail-shell-selector{display:flex;align-items:center;gap:2px;background:rgba(20,20,18,.08);border:.5px solid rgba(20,20,18,.1);border-radius:40px;padding:4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.detail-shell-item{position:relative}
.sel-btn.detail-shell-btn,.detail-shell-btn{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:32px;color:var(--muted);background:transparent;border:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .35s ease,background .35s ease,box-shadow .35s ease}
.detail-shell-btn-vida.is-active{background:var(--vida);color:#F5F3EE;box-shadow:0 2px 12px rgba(162,84,54,.22)}
.detail-shell-btn-valor.is-active{background:color-mix(in srgb, var(--valor) 14%, rgba(255,255,255,.88));color:var(--ink)}
.sel-chevron.detail-shell-chevron,.detail-shell-chevron{display:none;font-size:10px;line-height:1;opacity:.75;transition:transform .25s ease}
.nav-right.detail-shell-right,.detail-shell-right{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;padding:0;margin:0}
.nav-cta-sm.detail-shell-cta,.detail-shell-cta{--nav-cta-bg:rgba(245,243,238,.56);--nav-cta-border:rgba(20,20,18,.12);--nav-cta-color:var(--muted);display:none;align-items:center;justify-content:center;min-height:0;padding:7px 10px;border-radius:999px;border:.5px solid var(--nav-cta-border);background:var(--nav-cta-bg);color:var(--nav-cta-color);font-family:var(--font-sans);font-size:8.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1;appearance:none;-webkit-appearance:none;box-shadow:none;transition:color .25s,border-color .25s,background .25s,opacity .25s}
.detail-route-vida .nav-cta-sm.detail-shell-cta,.detail-route-vida .detail-shell-cta{--nav-cta-bg:rgba(162,84,54,.08);--nav-cta-border:rgba(162,84,54,.16);--nav-cta-color:#7f4229}
.detail-route-valor .nav-cta-sm.detail-shell-cta,.detail-route-valor .detail-shell-cta{--nav-cta-bg:rgba(105,122,106,.08);--nav-cta-border:rgba(105,122,106,.15);--nav-cta-color:#556657}
.detail-shell-cta:hover{color:var(--ink);border-color:var(--ink)}
.nav-hamburger.detail-shell-burger,.detail-shell-burger{width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:none;background:none;-webkit-tap-highlight-color:transparent}
.detail-shell-burger span{display:block;height:1px;background:var(--ink);transition:all .35s ease}
.detail-shell-burger span:nth-child(1){width:20px}
.detail-shell-burger span:nth-child(2){width:13px}
.detail-shell-burger.open span:nth-child(1){width:18px;transform:translateY(6px) rotate(45deg)}
.detail-shell-burger.open span:nth-child(2){width:18px;transform:translateY(-0.5px) rotate(-45deg)}

.mobile-menu.detail-shell-mobile-menu,.detail-shell-mobile-menu{position:fixed;inset:0;z-index:190;background:var(--bg);display:flex;flex-direction:column;padding:calc(var(--nav-h) + 24px) 28px 28px;overflow-y:auto;clip-path:circle(0% at calc(100% - 34px) 29px);transition:clip-path .65s cubic-bezier(.4,0,.2,1);pointer-events:none}
.detail-shell-mobile-menu.open{clip-path:circle(150% at calc(100% - 34px) 29px);pointer-events:all}
.detail-shell-mobile-header,.detail-shell-mobile-nav{padding:0}
.detail-shell-mobile-header{margin-bottom:28px;padding-bottom:24px;border-bottom:.5px solid rgba(20,20,18,.08)}
.mobile-menu-brand.detail-shell-mobile-brand,.detail-shell-mobile-brand{font-family:var(--font-serif);font-size:26px;font-weight:300;letter-spacing:.01em;color:var(--ink);line-height:1.15;margin-bottom:16px}
.mm-header-cta.detail-shell-mobile-cta,.detail-shell-mobile-cta{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#7f4229;text-decoration:none;padding:10px 20px;border-radius:40px;border:.5px solid rgba(162,84,54,.18);background:rgba(162,84,54,.1);transition:background .25s,color .25s,border-color .25s}
.detail-shell-mobile-cta:hover{background:var(--ink);color:var(--bg)}
.detail-shell-mobile-block{margin-bottom:28px}
.mm-route-header.detail-shell-mobile-route,.detail-shell-mobile-route{display:flex;align-items:center;gap:10px;margin-bottom:12px;cursor:pointer;user-select:none}
.mm-route-dot.detail-shell-mobile-dot,.detail-shell-mobile-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.detail-shell-mobile-dot-vida{background:var(--detail-concept-card)}
.detail-shell-mobile-dot-valor{background:var(--valor)}
.mm-route-label.detail-shell-mobile-label,.detail-shell-mobile-label{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);flex:1}
.mm-route-toggle.detail-shell-mobile-toggle,.detail-shell-mobile-toggle{font-size:14px;color:var(--muted);transition:transform .3s ease}
.mm-route-links.detail-shell-mobile-links,.detail-shell-mobile-links{list-style:none;display:flex;flex-direction:column;gap:2px}
.mm-link.detail-shell-mobile-link,.detail-shell-mobile-link{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-serif);font-size:22px;font-weight:300;color:var(--ink);text-decoration:none;padding:7px 0;letter-spacing:.01em}
.detail-shell-mobile-link span{font-family:var(--font-sans);font-size:13px;color:var(--muted)}
.detail-route-mask{position:fixed;top:0;right:0;bottom:auto;left:0;width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;contain:paint;z-index:500;background:var(--detail-route-mask-bg);transform:scaleX(var(--detail-exit-progress,0));transform-origin:right center;pointer-events:none;will-change:transform;transition:transform .20s cubic-bezier(.22,.61,.36,1);}
.detail-route-mask-text{position:fixed;top:0;right:0;bottom:auto;left:0;width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;contain:paint;z-index:501;pointer-events:none;}
.detail-route-mask-copy{position:absolute;right:clamp(26px,4.5vw,58px);top:50%;display:flex;flex-direction:row;align-items:center;gap:26px;color:var(--vida);opacity:var(--detail-exit-copy-opacity,0);transform:translate3d(var(--detail-exit-copy-shift-x,28px),-50%,0);transition:opacity .22s linear,transform .22s cubic-bezier(.22,.61,.36,1);will-change:transform,opacity;}
.detail-route-mask-logo{display:block;width:min(164px,21vw);height:auto;opacity:1;filter:drop-shadow(0 10px 24px rgba(20,20,18,.08));}
.detail-route-mask-reading{display:flex;flex-direction:row;align-items:center;gap:18px;}
.detail-route-mask-title{font-family:var(--font-serif);writing-mode:vertical-rl;transform:rotate(180deg);text-orientation:mixed;height:70vh;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,3.5vw,54px);font-weight:300;line-height:.88;letter-spacing:-.03em;color:rgba(245,243,238,.38);text-align:center;}
.detail-route-mask-cue{position:relative;display:block;width:20px;height:58px;border-radius:999px;border:1px solid rgba(245,243,238,.22);background:rgba(245,243,238,.055);opacity:.62;flex:0 0 auto;overflow:hidden}
.detail-route-mask-cue i{position:absolute;left:50%;top:10px;width:4px;height:14px;border-radius:999px;background:rgba(245,243,238,.54);transform:translateX(-50%);animation:detailScrollPulse 2.45s cubic-bezier(.22,.61,.36,1) infinite}


@media (hover:hover) and (pointer:fine){body.detail-page,body.detail-page *{cursor:none !important}}

.page-view{width:100%}
.pin-spacer{position:relative;width:100%;height:600vh}
.horizontal-w{position:relative;top:0;width:100%;height:100vh;overflow:hidden}
.h-track{display:flex;height:100%;will-change:transform}
.h-track>section{flex:0 0 auto;height:100vh}
.hero{width:100%;display:flex}
.hero-left,.hero-right{flex:0 0 var(--detail-split);width:var(--detail-split)}
.hero-left{background:var(--detail-concept-card);position:relative;display:flex;align-items:center;justify-content:center;padding:100px 40px 40px;color:#f4eee7}
.hero-intro{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;min-height:100%;width:100%;padding-left:clamp(10px,1.6vw,24px)}
.hero-left .thumb-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;margin:auto;width:210px}
.thumb-meta{display:flex;justify-content:space-between;width:100%;font-family:var(--font-sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.thumb-frame{width:100%;aspect-ratio:3/4;border:1px solid rgba(244,238,231,.44);padding:4px;background:rgba(255,255,255,.04)}
.thumb-frame img{width:100%;height:100%;object-fit:cover}
.thumb-cap{font-family:var(--font-sans);font-size:10px;letter-spacing:.08em;text-align:center;text-transform:uppercase;color:rgba(244,238,231,.74)}
.hero-left h1{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--font-serif);font-size:clamp(72px,8vw,118px);font-weight:300;line-height:.88;letter-spacing:-.04em;text-align:left}
.hero-left h1 .line{display:block;width:100%}
.hero-left h1 .hero-subtitle{font-style:italic;color:rgba(244,238,231,.72)}
body.detail-section-espacios .hero-left h1{color:#261714}
body.detail-section-espacios .hero-left h1 .hero-subtitle{color:#51382F}
.hero-scroll-indicator{display:none}
.hero-scroll-label{font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,238,231,.68)}
.hero-scroll-track{position:relative;display:block;width:20px;height:54px;border-radius:999px;border:1px solid rgba(244,238,231,.34);background:rgba(244,238,231,.06);overflow:hidden}
.hero-scroll-dot{position:absolute;left:50%;top:10px;width:4px;height:14px;border-radius:999px;background:rgba(244,238,231,.88);transform:translateX(-50%);animation:detailScrollPulse 2.45s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes detailScrollPulse{
  0%{transform:translateX(-50%) translateY(0);opacity:0}
  14%{opacity:.92}
  48%{transform:translateX(-50%) translateY(16px);opacity:.92}
  72%{transform:translateX(-50%) translateY(26px);opacity:0}
  100%{transform:translateX(-50%) translateY(26px);opacity:0}
}
.hero-right{position:relative;background:transparent}
.hero-right img{width:100%;height:100%;object-fit:cover}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.desc{width:45vw;min-width:460px;display:flex;flex-direction:column;justify-content:center;padding:124px 60px 60px;position:relative;background:var(--detail-canvas)}
.detail-copy-free{
  position:absolute;
  left:var(--copy-x, auto);
  top:var(--copy-y, auto);
  right:var(--copy-right, auto);
  bottom:var(--copy-bottom, auto);
  transform:translate(var(--copy-shift-x, 0), var(--copy-shift-y, 0));
}
.desc-copy{
  --copy-x:60px;
  --copy-y:50%;
  --copy-shift-y:-50%;
  max-width:33rem;
}
.desc-copy p{font-family:var(--font-sans);font-size:23px;line-height:1.82;color:var(--detail-canvas-ink)}
.desc-copy p + p{margin-top:1.18em}
/* Modular gallery system:
   each composition lives inside a 6x6 grid so future sections can
   reposition image/text by changing spans instead of rebuilding layouts. */
.gallery{
  --gallery-track-height:clamp(598px, calc((100svh - var(--nav-h) - 56px) * 0.98), 874px);
  /* One shared unit defines both the 6x6 cells and the outer spacing,
     so every module always measures the same. */
  --gallery-module:calc(var(--gallery-track-height) / 11);
  --gallery-module-gap:var(--gallery-module);
  --gallery-composition-width:calc((var(--gallery-module) * 6) + (var(--gallery-module-gap) * 5));
  --gallery-composition-height:calc((var(--gallery-module) * 6) + (var(--gallery-module-gap) * 5));
  display:flex;
  align-items:center;
  gap:var(--gallery-module-gap);
  padding:0 80px 0 20px;
  position:relative;
}
.gallery figure{
  position:relative;
  margin:0;
  width:100%;
  height:100%;
  align-self:stretch;
  background:var(--detail-canvas-soft)
}
.gallery-composition{
  --composition-cols:6;
  --composition-rows:6;
  --composition-width:calc((var(--gallery-module) * var(--composition-cols)) + (var(--gallery-module-gap) * (var(--composition-cols) - 1)));
  --composition-height:calc((var(--gallery-module) * var(--composition-rows)) + (var(--gallery-module-gap) * (var(--composition-rows) - 1)));
  --media-col:1;
  --media-col-span:3;
  --media-row:1;
  --media-row-span:6;
  --title-col:4;
  --title-col-span:3;
  --title-row:2;
  --title-row-span:3;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, var(--gallery-module)));
  grid-template-rows:repeat(6, minmax(0, var(--gallery-module)));
  gap:var(--gallery-module-gap);
  width:var(--composition-width);
  height:var(--composition-height);
  align-items:stretch;
  position:relative;
}
.gallery-composition > *{
  position:relative;
  z-index:1;
}
.gallery-composition > figure{
  grid-column:var(--media-col) / span var(--media-col-span);
  grid-row:var(--media-row) / span var(--media-row-span);
}
.gallery-title-block{
  grid-column:var(--title-col) / span var(--title-col-span);
  grid-row:var(--title-row) / span var(--title-row-span);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:0;
}
.gallery-title-free{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  pointer-events:none;
  left:var(--free-x, auto);
  top:var(--free-y, auto);
  right:var(--free-right, auto);
  bottom:var(--free-bottom, auto);
  transform:translate(var(--free-shift-x, 0), var(--free-shift-y, 0));
}
.gallery-title-free-local{
  position:absolute;
}
.gallery-title-block strong,
.gallery-title-free strong{font-family:var(--font-serif);font-size:56px;font-weight:300;line-height:.88;letter-spacing:-.045em;color:var(--detail-concept-card)}
.gallery-title-sub{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb, var(--detail-concept-card) 74%, white 26%)}
.gallery-title-main,.gallery-title-sub{display:block;overflow:hidden}
.gallery-title-line{display:block;opacity:0;transform:translate3d(0,28px,0);will-change:transform,opacity}
.gallery-title-main,
.gallery-title-sub{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}
.gallery-title-side{text-align:left;align-items:flex-start}
.gallery-title-top,
.gallery-title-bottom{text-align:center;align-items:center}
.gallery-composition-01{
  --media-col:1;
  --media-col-span:6;
  --media-row:1;
  --media-row-span:4;
  --title-col:4;
  --title-col-span:2;
  --title-row:5;
  --title-row-span:2;
}
.gallery-composition-02{
  --media-col:1;
  --media-col-span:4;
  --media-row:1;
  --media-row-span:6;
  --title-col:5;
  --title-col-span:2;
  --title-row:1;
  --title-row-span:6;
}
.gallery-composition-03{
  --media-col:2;
  --media-col-span:4;
  --media-row:2;
  --media-row-span:4;
  --title-col:2;
  --title-col-span:4;
  --title-row:1;
  --title-row-span:2;
}
.gallery-composition-04{
  --media-col:1;
  --media-col-span:6;
  --media-row:3;
  --media-row-span:4;
  --title-col:2;
  --title-col-span:4;
  --title-row:1;
  --title-row-span:2;
}
.gallery-composition-05{
  --media-col:1;
  --media-col-span:4;
  --media-row:1;
  --media-row-span:6;
  --title-col:5;
  --title-col-span:2;
  --title-row:1;
  --title-row-span:6;
}
.gallery-composition-06{
  --media-col:1;
  --media-col-span:6;
  --media-row:1;
  --media-row-span:4;
  --title-col:2;
  --title-col-span:4;
  --title-row:5;
  --title-row-span:2;
}
.gallery-composition-07{
  --media-col:1;
  --media-col-span:4;
  --media-row:1;
  --media-row-span:6;
  --title-col:5;
  --title-col-span:2;
  --title-row:1;
  --title-row-span:6;
}
.gallery-composition-08{
  --media-col:2;
  --media-col-span:4;
  --media-row:2;
  --media-row-span:4;
  --title-col:2;
  --title-col-span:4;
  --title-row:1;
  --title-row-span:2;
}
.gallery-composition-09{
  --media-col:1;
  --media-col-span:6;
  --media-row:1;
  --media-row-span:4;
  --title-col:2;
  --title-col-span:4;
  --title-row:5;
  --title-row-span:2;
}
.gallery-composition-10{
  --media-col:1;
  --media-col-span:4;
  --media-row:1;
  --media-row-span:6;
  --title-col:5;
  --title-col-span:2;
  --title-row:1;
  --title-row-span:6;
}
.gallery-composition-11{
  --media-col:1;
  --media-col-span:6;
  --media-row:1;
  --media-row-span:4;
  --title-col:2;
  --title-col-span:4;
  --title-row:5;
  --title-row-span:2;
}
.gallery-fig-02{transform:translateY(-2vh)}
.gallery-fig-04{transform:none}
.gallery-title-02,
.gallery-title-03,
.gallery-title-04,
.gallery-title-08{width:100%}
.gallery-title-01{
  width:max-content;
  max-width:440px;
  align-items:center;
  text-align:center;
}
.gallery-title-02,
.gallery-title-03,
.gallery-title-04,
.gallery-title-08{
  width:max-content;
  max-width:440px;
  align-items:center;
  text-align:center;
}
.gallery-title-02{
  --free-x:calc((var(--gallery-composition-width) * 1.5) + var(--gallery-module-gap));
  --free-y:calc((var(--gallery-module) * 4) + (var(--gallery-module-gap) * 4) + 6px);
  --free-shift-x:-50%;
}
.gallery-title-03{
  --free-x:calc((var(--gallery-composition-width) * 2.5) + (var(--gallery-module-gap) * 2));
  --free-y:calc(9% + 50px);
  --free-shift-x:-50%;
}
.gallery-title-04{
  --free-x:calc((var(--gallery-composition-width) * 3.5) + (var(--gallery-module-gap) * 3));
  --free-y:calc(var(--gallery-module) * 3.1);
  --free-shift-x:-50%;
}
.gallery-title-08{
  --free-x:calc((var(--gallery-composition-width) * 7.5) + (var(--gallery-module-gap) * 7));
  --free-y:calc(9% + 50px);
  --free-shift-x:-50%;
}
.gallery-title-01 .gallery-title-main,
.gallery-title-05 .gallery-title-main{
  max-width:9ch;
}
.gallery-title-01 .gallery-title-main{max-width:none;overflow:visible}
.gallery-title-01 .gallery-title-sub{max-width:none;overflow:visible}
.gallery-title-05,
.gallery-title-07{
  width:max-content;
  max-width:360px;
  align-items:flex-start;
  text-align:left;
}
.gallery-title-05 .gallery-title-main{max-width:11ch}
.gallery-title-05 .gallery-title-sub{max-width:14ch}
.gallery-title-07 .gallery-title-main{max-width:11ch}
.gallery-title-07 .gallery-title-sub{max-width:18ch}
body.detail-section-amenidades .gallery-title-sub,
body.detail-section-espacios .gallery-title-sub{
  max-width:34ch;
  font-weight:300;
  letter-spacing:.035em;
  line-height:1.45;
  text-transform:none;
}
body.detail-section-amenidades .gallery-title-sub{color:rgba(244,238,231,.78)}
body.detail-section-espacios .gallery-title-sub{color:#51382F}
body.detail-section-amenidades .gallery-title-sub-long,
body.detail-section-espacios .gallery-title-sub-long{
  width:100%;
  max-width:min(42ch, calc(var(--gallery-composition-width) * .82));
  font-size:clamp(20px,1.56vw,26px);
  line-height:1.22;
  letter-spacing:.012em;
  overflow:visible;
}
body.detail-section-amenidades .gallery-title-main{
  color:#F4EEE7;
}
body.detail-section-espacios .gallery-title-main{color:#261714}
body.detail-section-amenidades .gallery-title-sub-long .gallery-title-line,
body.detail-section-espacios .gallery-title-sub-long .gallery-title-line{
  white-space:normal;
  overflow-wrap:normal;
}
.gallery-title-01 .gallery-title-line,
.gallery-title-05 .gallery-title-line,
.gallery-title-07 .gallery-title-line{
  white-space:normal;
  word-break:normal;
}
.gallery-title-01 .gallery-title-main .gallery-title-line,
.gallery-title-01 .gallery-title-sub .gallery-title-line{
  white-space:nowrap;
}
.gallery figure img{width:100%;height:100%;object-fit:cover}

/* Numeralia editorial: reusable information modules for internal sections. */
.stats-gallery{
  padding-inline:clamp(20px, 3vw, 54px) clamp(80px, 8vw, 140px);
}
.stats-composition{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:1fr;
  gap:clamp(18px, 2.1vw, 30px);
  padding:clamp(20px, 2.5vw, 38px);
  perspective:1200px;
  transform-style:preserve-3d;
}
.stat-card{
  --stat-paper:#F5F3EE;
  --stat-ink:#2c2925;
  --stat-muted:rgba(44,41,37,.62);
  position:relative;
  min-width:0;
  min-height:100%;
  overflow:hidden;
  border:1px solid rgba(245,243,238,.42);
  border-radius:clamp(18px, 1.8vw, 30px);
  background:
    linear-gradient(145deg, rgba(245,243,238,.98), rgba(231,220,211,.92));
  box-shadow:
    0 34px 86px rgba(40,24,16,.26),
    0 9px 18px rgba(255,255,255,.32) inset,
    -18px -18px 38px rgba(255,255,255,.32) inset,
    16px 18px 40px rgba(79,42,25,.18) inset,
    inset 0 0 0 1px rgba(255,255,255,.5);
  color:var(--stat-ink);
  transform:translate3d(0,34px,0) scale(.95);
  transform-style:preserve-3d;
  transform-origin:center center;
  opacity:.78;
  will-change:transform,opacity,box-shadow;
  transition:opacity .82s ease, transform .92s cubic-bezier(.2,.72,.18,1), box-shadow .82s ease;
}
.stat-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:4;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.76), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,0) 36%);
  border-radius:inherit;
  opacity:.82;
  pointer-events:none;
  transition:opacity .72s ease;
}
.stat-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 19% 7%, rgba(255,255,255,.92), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(90,52,35,.18), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--detail-concept-card) 16%, transparent), transparent 56%);
  border-radius:inherit;
}
.stat-cover,
.stat-open{
  position:absolute;
  inset:0;
  z-index:2;
}
.stat-cover{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:clamp(10px, 1.4vw, 18px);
  padding:clamp(18px, 2.6vw, 38px);
  background:linear-gradient(145deg, color-mix(in srgb, var(--detail-concept-card) 92%, #2c1710 8%), color-mix(in srgb, var(--detail-concept-card) 64%, #211713 36%));
  color:#F5F3EE;
  border-radius:inherit;
  transition:opacity .72s ease, transform .86s cubic-bezier(.2,.72,.18,1), filter .72s ease;
  transform:translateZ(24px);
  filter:blur(0);
}
.stat-cover-number{
  font-family:var(--font-serif);
  font-size:clamp(86px, 9.6vw, 150px);
  font-weight:300;
  line-height:.72;
  letter-spacing:-.08em;
  opacity:.18;
  transform:translate3d(0,34px,36px);
  transition:opacity .72s ease, transform .9s cubic-bezier(.2,.72,.18,1);
}
.stat-cover-label{
  max-width:13ch;
  font-family:var(--font-sans);
  font-size:clamp(11px, .84vw, 15px);
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.3;
  text-transform:uppercase;
  color:rgba(245,243,238,.74);
  opacity:.18;
  transform:translate3d(0,22px,30px);
  transition:opacity .72s ease .08s, transform .9s cubic-bezier(.2,.72,.18,1) .08s;
}
.stat-open{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  z-index:3;
  padding:clamp(22px, 2.6vw, 40px);
  opacity:0;
  transform:translate3d(0,28px,44px) scale(.96);
  transition:opacity .62s ease .05s, transform .72s cubic-bezier(.2,.72,.18,1) .05s;
}
.stat-icon{
  width:clamp(64px, 5.8vw, 96px);
  height:clamp(64px, 5.8vw, 96px);
  display:grid;
  place-items:center;
  margin-bottom:clamp(20px, 2.2vw, 32px);
  border-radius:50%;
  border:8px solid color-mix(in srgb, var(--detail-concept-card) 62%, rgba(44,41,37,.24));
  outline:1px solid rgba(255,255,255,.86);
  outline-offset:-14px;
  color:color-mix(in srgb, var(--detail-concept-card) 78%, #1f1b18 22%);
  background:linear-gradient(145deg, rgba(255,255,255,.88), rgba(245,243,238,.54));
  box-shadow:0 24px 46px rgba(44,41,37,.22), inset 0 10px 24px rgba(255,255,255,.52);
  opacity:0;
  transform:translate3d(0,18px,30px) scale(.9);
  transition:opacity .58s ease .08s, transform .82s cubic-bezier(.2,.72,.18,1) .08s;
}
.stat-icon svg{
  width:54%;
  height:54%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.stat-value{
  display:block;
  font-family:var(--font-serif);
  font-size:clamp(58px, 6.5vw, 104px);
  font-weight:300;
  line-height:.82;
  letter-spacing:-.08em;
  color:color-mix(in srgb, var(--detail-concept-card) 74%, #211713 26%);
  opacity:0;
  transform:translate3d(0,24px,26px);
  transition:opacity .62s ease .16s, transform .86s cubic-bezier(.2,.72,.18,1) .16s;
}
.stat-concept{
  margin-top:clamp(12px, 1.1vw, 18px);
  font-family:var(--font-sans);
  font-size:clamp(12px, .9vw, 16px);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.28;
  text-transform:uppercase;
  color:rgba(44,41,37,.74);
  opacity:0;
  transform:translate3d(0,18px,22px);
  transition:opacity .62s ease .24s, transform .86s cubic-bezier(.2,.72,.18,1) .24s;
}
.stat-open p{
  max-width:27ch;
  margin-top:clamp(18px, 1.9vw, 30px);
  font-family:var(--font-sans);
  font-size:clamp(15px, 1.05vw, 18px);
  font-weight:300;
  line-height:1.52;
  color:rgba(44,41,37,.68);
  opacity:0;
  transform:translate3d(0,16px,18px);
  transition:opacity .62s ease .32s, transform .86s cubic-bezier(.2,.72,.18,1) .32s;
}
.stat-open small{
  margin-top:auto;
  padding-top:clamp(20px, 2.2vw, 34px);
  font-family:var(--font-sans);
  font-size:clamp(9px, .65vw, 11px);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
  color:rgba(44,41,37,.46);
  opacity:0;
  transform:translate3d(0,12px,14px);
  transition:opacity .62s ease .4s, transform .86s cubic-bezier(.2,.72,.18,1) .4s;
}
.stat-card.is-visible .stat-cover-number,
.stat-card.is-visible .stat-cover-label{
  opacity:.96;
  transform:translate3d(0,0,42px);
}
.stat-card.is-open{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  box-shadow:
    0 42px 104px rgba(40,24,16,.3),
    0 12px 24px rgba(255,255,255,.36) inset,
    -20px -20px 42px rgba(255,255,255,.34) inset,
    18px 20px 46px rgba(79,42,25,.2) inset,
    inset 0 0 0 1px rgba(255,255,255,.58);
}
.stat-card.is-open::before{
  opacity:.34;
}
.stat-card.is-open .stat-cover{
  opacity:0;
  transform:translate3d(0,0,0) scale(1.015);
  filter:blur(8px);
  pointer-events:none;
}
.stat-card.is-open .stat-open{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.stat-card.is-open .stat-icon{
  opacity:1;
  transform:translate3d(0,0,54px) scale(1);
  animation:statIconFloat 3.4s ease-in-out infinite;
}
.stat-card.is-open .stat-value,
.stat-card.is-open .stat-concept,
.stat-card.is-open .stat-open p,
.stat-card.is-open .stat-open small{
  opacity:1;
  transform:translate3d(0,0,30px);
}

@keyframes statIconFloat{
  0%,100%{transform:translate3d(0,0,54px) scale(1)}
  50%{transform:translate3d(0,-10px,72px) scale(1.035)}
}

.stats-media-composition{
  grid-template-columns:minmax(0, .86fr) minmax(0, .74fr);
  grid-template-rows:1fr;
  align-items:center;
  gap:clamp(24px, 3vw, 48px);
}
.stats-media-composition > figure.stat-media-card{
  grid-column:1;
  grid-row:1;
}
.stats-media-composition > .stat-media-copy{
  grid-column:2;
  grid-row:1;
}
.stat-media-card{
  position:relative;
  width:min(100%, 430px);
  height:82%;
  min-height:520px;
  justify-self:end;
  align-self:center;
  overflow:hidden;
  border-radius:clamp(22px, 2vw, 34px);
  border:1px solid rgba(245,243,238,.46);
  box-shadow:
    0 36px 90px rgba(40,24,16,.28),
    inset 0 0 0 1px rgba(255,255,255,.32);
  background:rgba(245,243,238,.12);
}
.stat-media-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(26,22,19,.08), rgba(26,22,19,.26)),
    radial-gradient(circle at 25% 12%, rgba(255,255,255,.28), transparent 30%);
}
.stat-media-card .media-window,
.stat-media-card .mask-image{
  border-radius:inherit;
}
.stat-media-copy{
  max-width:26rem;
  justify-self:start;
  color:rgba(244,238,231,.94);
}
.stat-media-kicker{
  display:block;
  margin-bottom:clamp(14px, 1.3vw, 22px);
  font-family:var(--font-sans);
  font-size:clamp(10px, .72vw, 12px);
  font-weight:500;
  letter-spacing:.22em;
  line-height:1.45;
  text-transform:uppercase;
  color:rgba(244,238,231,.58);
}
.stat-media-title{
  display:block;
  font-family:var(--font-serif);
  font-size:clamp(48px, 5vw, 82px);
  font-weight:300;
  line-height:.88;
  letter-spacing:-.055em;
}
.stat-media-subtitle{
  display:block;
  max-width:14ch;
  margin-top:clamp(14px, 1.2vw, 20px);
  font-family:var(--font-sans);
  font-size:clamp(12px, .9vw, 16px);
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.3;
  text-transform:uppercase;
  color:rgba(244,238,231,.74);
}

.closer{
  width:84vw;
  min-width:840px;
  display:flex;
  align-items:center;
  padding:124px 88px 68px 146px;
  position:relative;
  background:var(--cream);
}
.closer-copy{
  max-width:29rem;
  display:flex;
  flex-direction:column;
}
.closer-copy p,
.closer-body{
  font-family:var(--font-sans);
  font-size:23px;
  line-height:1.82;
  color:var(--detail-concept-card);
}
.closer-copy p + p{margin-top:1.18em}
.text-lines .line{display:block}
[data-text-reveal]{will-change:transform,opacity}
.mask-reveal{overflow:hidden}
.mask-image{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.media-window{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  width:100%;
  height:100%;
  will-change:clip-path;
}
.detail-back-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid color-mix(in srgb, var(--vida) 30%, rgba(20,20,18,.16));background:rgba(255,255,255,.5);color:var(--ink);font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.cursor-dot{position:fixed;width:6px;height:6px;background:#fff;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);left:-100px;top:-100px;mix-blend-mode:difference}
.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(255,255,255,0.92);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);left:-100px;top:-100px;transition:width .4s,height .4s,border-color .4s;mix-blend-mode:difference;box-shadow:0 0 0 1px rgba(0,0,0,0.08)}
.cursor-ring.hovering{width:56px;height:56px;border-color:rgba(255,255,255,1)}

@media (min-width:901px){
  .detail-desktop-hidden{display:none !important}
  /* Desktop section-title lock:
     vida-ubicacion is the reference. All section hero titles keep the
     same size and left alignment; section-specific color rules remain intact. */
  body.detail-page .hero-intro{
    align-items:flex-start;
    text-align:left;
    padding-left:clamp(10px,1.6vw,24px);
  }
  body.detail-page .hero-left h1.text-lines{
    align-items:flex-start;
    text-align:left;
    font-size:clamp(72px,8vw,118px);
    line-height:.88;
    letter-spacing:-.04em;
    max-width:none;
  }
  .gallery-title-block strong,
  .gallery-title-free strong{font-size:39px;line-height:.9;letter-spacing:-.04em;color:rgba(244,238,231,.96)}
  .gallery-title-sub{font-size:14px;color:rgba(244,238,231,.78)}
  .desc-copy p{color:var(--detail-concept-card)}
  /* Desktop lock:
     these lateral titles and the closing paragraph use editorial coordinates
     that must remain stable even while mobile behavior evolves separately. */
  body.detail-page,
  body.detail-page .page-view,
  body.detail-page .pin-spacer,
  body.detail-page .horizontal-w,
  body.detail-page .h-track,
  body.detail-page .h-track > section,
  body.detail-page .gallery,
  body.detail-page .closer{background:var(--cream) !important}
  body.detail-page .hero,
  body.detail-page .desc,
  body.detail-page .gallery-composition{background:var(--detail-concept-card) !important}
  body.detail-route-vida .desc{
    width:67.5vw;
    min-width:690px;
  }
  body.detail-route-vida .desc-copy{
    max-width:49.5rem;
  }
  .hero-right,
  .hero-right .mask-reveal,
  .hero-right .mask-image,
  .gallery-composition > figure,
  .gallery-composition > article,
  .gallery-composition .mask-reveal,
  .gallery-composition .mask-image,
  .gallery figure,
  .gallery-title-free{background:none !important;box-shadow:none !important}
  body.detail-section-stats .gallery-composition > article.stat-card{
    background:
      linear-gradient(145deg, rgba(245,243,238,.98), rgba(231,220,211,.92)) !important;
    border-radius:clamp(18px, 1.8vw, 30px) !important;
    box-shadow:
      0 34px 86px rgba(40,24,16,.26),
      0 9px 18px rgba(255,255,255,.32) inset,
      -18px -18px 38px rgba(255,255,255,.32) inset,
      16px 18px 40px rgba(79,42,25,.18) inset,
      inset 0 0 0 1px rgba(255,255,255,.5) !important;
  }
  body.detail-section-stats .gallery-composition > article.stat-card.is-open{
    box-shadow:
      0 42px 104px rgba(40,24,16,.3),
      0 12px 24px rgba(255,255,255,.36) inset,
      -20px -20px 42px rgba(255,255,255,.34) inset,
      18px 20px 46px rgba(79,42,25,.2) inset,
      inset 0 0 0 1px rgba(255,255,255,.58) !important;
  }
  body.detail-section-stats .gallery-composition > figure.stat-media-card{
    background:rgba(245,243,238,.12) !important;
    border-radius:clamp(22px, 2vw, 34px) !important;
    box-shadow:
      0 36px 90px rgba(40,24,16,.28),
      inset 0 0 0 1px rgba(255,255,255,.32) !important;
  }
  .gallery .mask-image{
    object-position:center center;
  }
  .gallery .gallery-fig-02,
  .gallery .gallery-fig-03,
  .gallery .gallery-fig-04,
  .gallery .gallery-fig-05,
  .gallery .gallery-fig-07,
  .gallery .gallery-fig-08,
  .gallery .gallery-fig-09,
  .gallery .gallery-fig-10,
  .gallery .gallery-fig-11{
    width:calc(100% * var(--detail-desktop-secondary-media-scale));
    height:calc(100% * var(--detail-desktop-secondary-media-scale));
    justify-self:center;
    align-self:center;
    transform:none;
  }
  .gallery .gallery-fig-02,
  .gallery .gallery-fig-05,
  .gallery .gallery-fig-07,
  .gallery .gallery-fig-10{
    position:relative;
    width:100%;
    height:100%;
    justify-self:stretch;
    align-self:stretch;
    max-width:none;
    max-height:none;
  }
  .gallery .gallery-fig-04,
  .gallery .gallery-fig-09,
  .gallery .gallery-fig-11{
    width:100%;
    height:100%;
    justify-self:stretch;
    align-self:stretch;
    max-width:none;
    max-height:none;
    transform:none;
  }
  .gallery .gallery-fig-02 .mask-image,
  .gallery .gallery-fig-05 .mask-image,
  .gallery .gallery-fig-04 .mask-image,
  .gallery .gallery-fig-07 .mask-image,
  .gallery .gallery-fig-09 .mask-image,
  .gallery .gallery-fig-10 .mask-image,
  .gallery .gallery-fig-11 .mask-image{
    object-fit:cover;
    object-position:center center;
  }
  .gallery-composition-02 .gallery-title-02,
  .gallery-composition-04 .gallery-title-04,
  .gallery-composition-05 .gallery-title-05,
  .gallery-composition-07 .gallery-title-07,
  .gallery-composition-09 .gallery-title-09,
  .gallery-composition-10 .gallery-title-10,
  .gallery-composition-11 .gallery-title-11{
    position:relative;
    grid-column:var(--title-col) / span var(--title-col-span);
    grid-row:var(--title-row) / span var(--title-row-span);
    left:auto;
    top:auto;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:none;
    height:100%;
    align-items:center;
    justify-content:center;
    text-align:center;
    transform:translate3d(var(--gallery-title-offset-x,0), var(--gallery-title-offset-y,0), 0);
    padding-inline:clamp(18px, 2.4vw, 42px);
  }
  .gallery-composition-02 .gallery-title-02{--gallery-title-offset-x:-50px}
  .gallery-composition-04 .gallery-title-04{--gallery-title-offset-y:100px}
  .gallery-composition-05 .gallery-title-05{--gallery-title-offset-x:-40px}
  .gallery-composition-07 .gallery-title-07{--gallery-title-offset-x:-40px}
  .gallery-composition-09 .gallery-title-09{--gallery-title-offset-y:0}
  .gallery-composition-10 .gallery-title-10{--gallery-title-offset-x:-40px}
  .gallery-composition-11 .gallery-title-11{--gallery-title-offset-y:0}
  body.detail-section-espacios .gallery-composition-02 > .gallery-title-spaces,
  body.detail-section-espacios .gallery-composition-05 > .gallery-title-spaces,
  body.detail-section-espacios .gallery-composition-07 > .gallery-title-spaces,
  body.detail-section-espacios .gallery-composition-10 > .gallery-title-spaces{
    transform:translate3d(var(--gallery-title-offset-x,0), var(--gallery-title-offset-y,0), 0);
  }
  body.detail-section-espacios .gallery-composition-02 > .gallery-title-spaces{--gallery-title-offset-x:-50px}
  body.detail-section-espacios .gallery-composition-05 > .gallery-title-spaces{--gallery-title-offset-x:-40px}
  body.detail-section-espacios .gallery-composition-07 > .gallery-title-spaces{--gallery-title-offset-x:-40px}
  body.detail-section-espacios .gallery-composition-10 > .gallery-title-spaces{--gallery-title-offset-x:-40px}
  .gallery-composition-02 .gallery-title-02 .gallery-title-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:visible;
  }
  .gallery-composition-02 .gallery-title-02 .gallery-title-main .gallery-title-line{
    display:block;
    width:100%;
    white-space:normal;
  }
  .gallery-composition-02 .gallery-title-02 .gallery-title-main,
  .gallery-composition-04 .gallery-title-04 .gallery-title-main,
  .gallery-composition-05 .gallery-title-05 .gallery-title-main,
  .gallery-composition-07 .gallery-title-07 .gallery-title-main,
  .gallery-composition-09 .gallery-title-09 .gallery-title-main,
  .gallery-composition-10 .gallery-title-10 .gallery-title-main,
  .gallery-composition-11 .gallery-title-11 .gallery-title-main,
  .gallery-composition-02 .gallery-title-02 .gallery-title-sub,
  .gallery-composition-04 .gallery-title-04 .gallery-title-sub,
  .gallery-composition-05 .gallery-title-05 .gallery-title-sub,
  .gallery-composition-07 .gallery-title-07 .gallery-title-sub,
  .gallery-composition-09 .gallery-title-09 .gallery-title-sub,
  .gallery-composition-10 .gallery-title-10 .gallery-title-sub,
  .gallery-composition-11 .gallery-title-11 .gallery-title-sub{
    max-width:none;
  }
  .gallery-composition-04 .gallery-title-04 .gallery-title-line,
  .gallery-composition-05 .gallery-title-05 .gallery-title-line,
  .gallery-composition-07 .gallery-title-07 .gallery-title-line,
  .gallery-composition-09 .gallery-title-09 .gallery-title-line,
  .gallery-composition-10 .gallery-title-10 .gallery-title-line,
  .gallery-composition-11 .gallery-title-11 .gallery-title-line{
    white-space:nowrap;
  }
  .gallery-composition-01,
  .gallery-composition-05,
  .closer{overflow:visible}

  .gallery-title-01{
    --free-x:50%;
    --free-y:calc((var(--gallery-module) * 4) + (var(--gallery-module-gap) * 4) + 6px);
    --free-shift-x:-50%;
  }

  .gallery-title-05{
    --free-x:calc(100% - 230px);
    --free-y:54%;
    --free-shift-y:-50%;
  }

  body[data-detail-current-slide="ubicacion"] .gallery-composition-06 .gallery-title-06{
    align-items:center;
    justify-content:center;
    justify-self:center;
    align-self:center;
    width:100%;
    text-align:center;
    transform:translate3d(0,-50px,0);
  }

  body.detail-section-amenidades .gallery-title-03,
  body.detail-section-amenidades .gallery-title-08{
    --amenity-title-move-much:calc((var(--gallery-module) * 2) + (var(--gallery-module-gap) * 1));
    --amenity-title-move-medium:calc(var(--amenity-title-move-much) * .5);
    --amenity-title-move-little:calc(var(--amenity-title-move-much) * .25);
    --free-y:calc((var(--gallery-module) * 1.2) + (var(--gallery-module-gap) * .45) + var(--amenity-title-offset-y, 0px));
    width:calc(var(--gallery-composition-width) * .82);
    max-width:calc(var(--gallery-composition-width) * .82);
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  body.detail-section-amenidades .gallery-title-03{
    --amenity-title-offset-y:calc((var(--amenity-title-move-much) * .4) - 75px);
  }

  body.detail-section-amenidades .gallery-title-08{
    --amenity-title-offset-y:calc((var(--amenity-title-move-much) * .4) - 75px);
  }

  body.detail-section-amenidades .gallery-composition-04 .gallery-title-04,
  body.detail-section-amenidades .gallery-composition-06 .gallery-title-06,
  body.detail-section-amenidades .gallery-composition-09 .gallery-title-09{
    --amenity-title-move-much:calc((var(--gallery-module) * 2) + (var(--gallery-module-gap) * 1));
    --amenity-title-move-medium:calc(var(--amenity-title-move-much) * .5);
    --amenity-title-move-little:calc(var(--amenity-title-move-much) * .25);
    width:100%;
    height:100%;
    max-width:none;
    align-items:center;
    justify-content:center;
    justify-self:center;
    align-self:center;
    text-align:center;
    padding:clamp(10px,1.25vw,22px);
    transform:translate3d(0,var(--amenity-title-offset-y, 0px),0);
  }

  body.detail-section-amenidades .gallery-composition-04 .gallery-title-04{
    --gallery-title-offset-y:0;
    --amenity-title-offset-y:var(--amenity-title-move-little);
  }

  body.detail-section-amenidades .gallery-composition-06 .gallery-title-06{
    --amenity-title-offset-y:calc(var(--amenity-title-move-little) * -1);
  }

  body.detail-section-amenidades .gallery-composition-09 .gallery-title-09{
    --amenity-title-offset-y:calc(var(--amenity-title-move-much) * -.4);
  }

  body.detail-section-amenidades .gallery-composition-06 .gallery-title-sub-long,
  body.detail-section-amenidades .gallery-composition-09 .gallery-title-sub-long,
  body.detail-section-espacios .gallery-composition-06 .gallery-title-sub-long,
  body.detail-section-espacios .gallery-composition-09 .gallery-title-sub-long,
  body.detail-section-espacios .gallery-composition-11 .gallery-title-sub-long{
    margin-inline:auto;
  }
  body.detail-section-amenidades .gallery .gallery-title-sub-long,
  body.detail-section-espacios .gallery .gallery-title-sub-long{
    width:100%;
    max-width:min(42ch, calc(var(--gallery-composition-width) * .82));
  }

  body.detail-section-espacios .gallery-composition-04 > .gallery-title-spaces,
  body.detail-section-espacios .gallery-composition-06 > .gallery-title-spaces,
  body.detail-section-espacios .gallery-composition-11 > .gallery-title-spaces{
    align-items:center;
    justify-content:center;
    text-align:center;
    transform:translate3d(0, 30px, 0);
  }
  body.detail-section-espacios .gallery-composition-04 > .gallery-title-spaces{
    transform:translate3d(0, 42px, 0);
  }
  body.detail-section-espacios .gallery-composition-06 > .gallery-title-spaces,
  body.detail-section-espacios .gallery-composition-11 > .gallery-title-spaces{
    transform:translate3d(0, -30px, 0);
  }

  body.detail-section-espacios .gallery-composition-04 > .gallery-title-spaces .gallery-title-main,
  body.detail-section-espacios .gallery-composition-04 > .gallery-title-spaces .gallery-title-sub-long,
  body.detail-section-espacios .gallery-composition-06 > .gallery-title-spaces .gallery-title-main,
  body.detail-section-espacios .gallery-composition-06 > .gallery-title-spaces .gallery-title-sub-long,
  body.detail-section-espacios .gallery-composition-11 > .gallery-title-spaces .gallery-title-main,
  body.detail-section-espacios .gallery-composition-11 > .gallery-title-spaces .gallery-title-sub-long{
    align-self:center;
    width:fit-content;
    max-width:min(42ch, calc(var(--gallery-composition-width) * .82));
    margin-inline:auto;
  }

  .closer-copy{
    --copy-right:60%;
    --copy-y:50%;
    --copy-shift-y:-50%;
  }
  body.detail-section-amenidades .gallery .gallery-title-sub .gallery-title-line{
    white-space:normal;
  }
}

@media (min-width:640px){
  :root { --nav-h:64px; }
}
@media (min-width:1024px){
  :root { --nav-h:72px; --shell-side-pad:60px; }
  body.detail-page .nav{
    justify-content:space-between;
    padding:0 60px;
  }
  .nav.detail-shell-nav,.detail-shell-nav{justify-content:space-between;padding:0 60px}
  .nav-logo.detail-shell-logo,.detail-shell-logo{display:block}
  .nav-selector.detail-shell-selector,.detail-shell-selector{position:absolute;left:50%;transform:translateX(-50%)}
  .nav-right.detail-shell-right,.detail-shell-right{position:static;top:auto;right:auto;transform:none;margin-left:auto}
  .nav-cta-sm.detail-shell-cta,
  .detail-shell-cta{
    display:flex !important;
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    min-height:0;
    height:auto;
    line-height:1;
    appearance:none;
    -webkit-appearance:none;
    padding:8px 18px;
    border-radius:40px;
    border:.5px solid var(--nav-cta-border);
    color:var(--nav-cta-color);
    background:var(--nav-cta-bg);
  }
  .detail-shell-cta:hover{color:var(--ink);border-color:var(--ink)}
  .sel-chevron.detail-shell-chevron,.detail-shell-chevron{display:inline}
  .nav-hamburger.detail-shell-burger,
  .detail-shell-burger{display:none !important}
  .detail-shell-mobile-menu{display:none}
}

@media (min-width:901px){
  /* Ruta 2 desktop:
     Este bloque neutraliza cualquier herencia visual guinda/naranja de ruta 1
     en fondos claros y tarjetas animadas. Mantiene la misma estructura y solo
     cambia la familia cromatica a verdes/grises. */
  body.detail-route-valor{
    --valor-detail-surface:#EEF3EC;
    --valor-detail-surface-2:#E4E8E4;
    --valor-detail-paper:#F7F9F3;
    --valor-detail-paper-2:#DBE4D8;
    --valor-detail-shadow:rgba(23,38,28,.24);
    --valor-detail-shadow-strong:rgba(23,38,28,.30);
    --valor-detail-inset:rgba(76,96,74,.18);
  }

  body.detail-route-valor.detail-page,
  body.detail-route-valor .page-view,
  body.detail-route-valor .pin-spacer,
  body.detail-route-valor .horizontal-w,
  body.detail-route-valor .h-track,
  body.detail-route-valor .h-track > section,
  body.detail-route-valor .gallery,
  body.detail-route-valor .closer{
    background:var(--valor-detail-surface) !important;
  }

  body.detail-route-valor .gallery-composition{
    background:var(--detail-concept-card) !important;
  }

  body.detail-route-valor .gallery figure{
    background:color-mix(in srgb, var(--detail-concept-card) 14%, var(--valor-detail-surface) 86%) !important;
  }

  body.detail-route-valor .stat-card,
  body.detail-route-valor.detail-section-stats .gallery-composition > article.stat-card{
    background:linear-gradient(145deg, rgba(247,249,243,.98), rgba(219,228,216,.94)) !important;
    box-shadow:
      0 34px 86px var(--valor-detail-shadow),
      0 9px 18px rgba(255,255,255,.34) inset,
      -18px -18px 38px rgba(255,255,255,.34) inset,
      16px 18px 40px var(--valor-detail-inset) inset,
      inset 0 0 0 1px rgba(255,255,255,.56) !important;
  }

  body.detail-route-valor .stat-card::after,
  body.detail-route-valor.detail-section-stats .gallery-composition > article.stat-card::after{
    background:
      radial-gradient(circle at 19% 7%, rgba(255,255,255,.92), transparent 30%),
      radial-gradient(circle at 100% 100%, rgba(105,122,106,.18), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, rgba(105,122,106,.14), transparent 56%) !important;
  }

  body.detail-route-valor .stat-card.is-open,
  body.detail-route-valor.detail-section-stats .gallery-composition > article.stat-card.is-open{
    box-shadow:
      0 42px 104px var(--valor-detail-shadow-strong),
      0 12px 24px rgba(255,255,255,.38) inset,
      -20px -20px 42px rgba(255,255,255,.36) inset,
      18px 20px 46px rgba(76,96,74,.2) inset,
      inset 0 0 0 1px rgba(255,255,255,.62) !important;
  }

  body.detail-route-valor .stat-cover{
    background:linear-gradient(145deg, color-mix(in srgb, var(--detail-concept-card) 92%, #203024 8%), color-mix(in srgb, var(--detail-concept-card) 66%, #16221a 34%)) !important;
  }

  body.detail-route-valor .stat-media-card,
  body.detail-route-valor.detail-section-stats .gallery-composition > figure.stat-media-card,
  body.detail-route-valor .market-pair-composition > figure.stat-media-card{
    background:linear-gradient(145deg, rgba(238,245,235,.22), rgba(192,207,190,.14)) !important;
    box-shadow:
      0 36px 90px rgba(23,38,28,.26),
      inset 0 0 0 1px rgba(255,255,255,.34) !important;
  }

  body.detail-route-valor .stat-media-card::after,
  body.detail-route-valor.detail-section-stats .gallery-composition > figure.stat-media-card::after,
  body.detail-route-valor .market-pair-composition > figure.stat-media-card::after{
    background:
      linear-gradient(180deg, rgba(23,38,28,.05), rgba(23,38,28,.30)),
      radial-gradient(circle at 16% 12%, rgba(255,255,255,.44), transparent 28%) !important;
  }
}