/* Bellavista base: reset, type, the grade, the door arch, the original mark and wordmark, actions, label, motion states.
   Lifted from concepts/bellavista/brand/v1-src/css/00-base.css (the approved book). Tokens only: no colour literals (tokens.css owns them). */
/* One scale rule for every block: --u is 1px up to 1440 and grows with the viewport to 1.6px (2304 and up); the gutter keeps its 1440 share (3.6vw) up to 1.6x its 1440 value (83px), so every block lines up at 2560. Above 2304 (browser zoom-out, 4K) the composition stays a 2304 frame: the gutters grow by half the excess so content is centred at its capped size, full-bleed layers (photos, grounds) keep filling, and pins/clips size from the same cap (portada view.js). */
:root{--bv-lbl-h:40px;--u:clamp(1px,calc(100vw / 1440),1.6px);--s-cap:calc(16 * var(--u));--fr:2304px;--gut:max(clamp(16px,3.6vw,83px),calc((100vw - var(--fr)) / 2 + 83px),env(safe-area-inset-left,0px));--gutr:max(clamp(16px,3.6vw,83px),calc((100vw - var(--fr)) / 2 + 83px),env(safe-area-inset-right,0px))}
@media(max-width:1099px){:root{--s-sky:88px;--s-ch:44px;--s-num:128px;--s-card:34px;--s-prom:34px}}
@media(max-width:599px){:root{--s-sky:48px;--s-ch:32px;--s-num:88px;--s-card:26px;--s-price:24px;--s-body:17px;--s-lbl:19px;--s-prom:28px;--bv-lbl-h:60px}}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);font:400 var(--s-body)/1.55 var(--f-a);overflow-x:hidden;padding-bottom:var(--bv-lbl-h)}
body::after{content:"";position:fixed;inset:0;background-image:var(--grain);opacity:.3;pointer-events:none;z-index:90}
img,svg{display:block;max-width:100%}
h1,h2,h3,p{font-weight:inherit}
a{color:var(--azul)}
ul,ol{margin:0;padding:0}
main{display:block}
section{position:relative}
section[id]{scroll-margin-top:68px} /* anchors land below the solid nav (68px) */

/* skip link + concept label */
.bv-skip{position:absolute;left:var(--gut);top:-100px;z-index:200;background:var(--azul);color:var(--blanco-texto);padding:14px 20px;font:500 16px/1 var(--f-a);text-decoration:none}
.bv-skip:focus{top:8px}
.bv-concepto{position:fixed;left:0;right:0;bottom:0;z-index:100;height:var(--bv-lbl-h);display:flex;align-items:center;padding:0 var(--gutr) 0 var(--gut);background:var(--tinta);color:var(--blanco-texto);font:400 calc(16 * var(--u))/1.35 var(--f-a)}

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
[data-ground=noche] :focus-visible,.bv-concepto :focus-visible{outline-color:var(--blanco-texto)}

/* the grade (treatment E): one filter per photo, one blue soft-light layer, grain is the body pseudo-element above */
.bv-g{filter:contrast(1.05) saturate(.9) sepia(.05)}
.bv-blue{position:relative;overflow:hidden}
.bv-blue::after,.bv-arco::after{content:"";position:absolute;inset:0;background:var(--azul);mix-blend-mode:soft-light;opacity:.3;pointer-events:none}

/* the door arch: taller than wide, radius = half the width, square bottom corners */
.bv-fig{display:block}
.bv-arco{position:relative;aspect-ratio:var(--ar,4/5);border-radius:999px 999px 0 0;overflow:hidden;background:var(--cielo)}
.bv-arco img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.bv-cap{font:400 var(--s-cap)/1.45 var(--f-a);color:var(--tinta-suave);margin-top:14px;max-width:62ch}
[data-ground=noche] .bv-cap{color:var(--cielo)}

/* mark and wordmark (original logo; Tinos 700 only here) */
.bv-mk{display:block;flex:none}
.wmk{font-family:var(--f-wm);font-weight:700;letter-spacing:0;white-space:nowrap}.wmk small{font-size:.79em}

/* type voices */
.bv-nm{font:300 var(--s-sky)/1 var(--f-sc);letter-spacing:0;color:var(--blanco-texto);white-space:nowrap}
.bv-nm[data-size=l]{font-size:calc(var(--s-sky)*.8)}
.bv-nm[data-size=m]{font-size:calc(var(--s-sky)*.6)}
.bv-nm[data-size=s]{font-size:calc(var(--s-sky)*.5)}
@media(max-width:599px){.bv-nm,.bv-nm[data-size]{font-size:48px;white-space:normal}.bv-nm[data-size=m]{font-size:42px}.bv-nm[data-size=s]{font-size:34px}} /* phone: two lines at most, by character count */
.bv-ch{font:600 var(--s-ch)/1.05 var(--f-sc);letter-spacing:-.01em;text-wrap:balance}
.bv-serif{font-family:var(--f-serif);font-weight:400}
.bv-prose{max-width:calc(70ch + var(--gut) + var(--gutr));margin-inline:auto;padding:72px var(--gutr) 72px var(--gut)}
.bv-prose h1{font:600 var(--s-ch)/1.05 var(--f-sc);margin-bottom:24px}
.bv-prose h2{font:600 calc(var(--s-ch)*.7)/1.1 var(--f-sc);margin:40px 0 16px}
.bv-prose p,.bv-prose ul,.bv-prose ol{margin:0 0 1em}
.bv-prose ul,.bv-prose ol{padding-left:1.2em}

/* actions: square; the teja chip is for "En venta" and the live figure only */
.bv-chip{display:inline-block;font:500 16px/1 var(--f-a);padding:16px 22px;background:var(--teja);color:var(--blanco-texto)}
.bv-btn{display:inline-block;font:500 16px/1 var(--f-a);padding:16px 22px;min-height:44px;background:var(--azul);color:var(--blanco-texto);text-decoration:none;border:0;cursor:pointer;transition:transform var(--d1) var(--ease),background var(--d1) var(--ease)}
.bv-btn:hover{transform:translateY(-2px)}

/* motion: the runtime adds .in to [data-motion]; hidden states only under .js, with a failsafe if the script never runs */
.js [data-motion]{opacity:0;translate:0 24px;transition:opacity var(--d2) var(--ease),translate var(--d2) var(--ease);transition-delay:calc(var(--i,0)*120ms)}
.js [data-motion].in{opacity:1;translate:0 0}
.js [data-motion]:not(.in){animation:bv-show 0s 4s forwards}
@keyframes bv-show{to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js [data-motion]{opacity:1;translate:0 0}}
html.reduced *,html.reduced *::before,html.reduced *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.reduced [data-motion]{opacity:1!important;translate:0 0!important}