/* Shared hero (D1): modes a / b / c, phone compositions, the page-door transition styles. Tokens only. Loaded on every page (see portada/texts.php). */
.bv-hero{position:absolute;inset:0;container-type:size;overflow:hidden;background:var(--cielo);--k-ar:var(--ar);--k-roof:var(--roof);--k-mode:a}
.bv-hero__ph{position:absolute;inset:0;display:block}
.bv-hero__ph img{width:100%;height:100%;object-fit:cover}
.bv-hero__sky{z-index:1}
.bv-hero__house{z-index:4;pointer-events:none}
.bv-hero__vz,.bv-hero__sc{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none}
.bv-hero__vz{height:calc(var(--roofy) + 40px);background:linear-gradient(var(--vz-0),var(--vz-1) 88%,var(--m-0))} /* taste-skill-ignore: neutral scrim */
.bv-hero__sc{height:62%;background:linear-gradient(var(--scrim-1),var(--scrim-0));opacity:.42} /* taste-skill-ignore: neutral scrim, lightest the 3:1 floor allows */
.bv-hero__bsc{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:5;pointer-events:none;background:linear-gradient(var(--scrim-0),var(--scrim-1) 62%)} /* taste-skill-ignore: neutral scrim under the promise */
.bv-hero__blue{position:absolute;inset:0;z-index:6;background:var(--azul);mix-blend-mode:soft-light;opacity:.3;pointer-events:none}
.bv-hero__low{position:absolute;z-index:7;left:var(--gut);right:var(--gutr);bottom:calc(var(--bv-lbl-h,0px) + clamp(20px,4cqh,48px));color:var(--blanco-texto);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.bv-hero__low .bv-prom{font:600 var(--s-prom)/1.08 var(--f-sc);max-width:14em}
.bv-hero__row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* the image box inside the stage and where the roofline falls (cover crop aware) */
.bv-hero{--ih:max(100cqh,calc(100cqw / var(--k-ar)));--roofy:calc((100cqh - var(--ih)) * var(--fy) + var(--k-roof) * var(--ih))}

/* the name: size by character count (book formula), one line */
.bv-hero__nm{position:absolute;z-index:3;margin:0;font-size:min(17.5cqw,calc(174cqw/var(--n)));line-height:1;font-weight:300;white-space:nowrap}
/* mode a: the name stands on the roofline, its base crossed by the houses (--sink moves it down behind them) */
.bv-hero[data-modo=a] .bv-hero__nm{left:50%;top:var(--roofy);translate:-50% calc(-70% + var(--sink,0px))}
/* mode b: on the sky side */
.bv-hero[data-modo=b] .bv-hero__nm{top:clamp(88px,13cqh,200px);left:var(--gut);font-size:8.34cqw} /* brief scale: 120 / 96 / 72 at 1440 */
.bv-hero[data-modo=b][data-size=l] .bv-hero__nm{font-size:6.67cqw}
.bv-hero[data-modo=b][data-size=m] .bv-hero__nm,.bv-hero[data-modo=b][data-size=s] .bv-hero__nm{font-size:5cqw}
.bv-hero[data-modo=b][data-lado=centro] .bv-hero__nm{left:50%;translate:-50% 0}
.bv-hero[data-modo=b][data-lado=derecha] .bv-hero__nm{left:auto;right:var(--gutr)}
/* mode c: the photo in a door arch on the sky field, the name on the field */
.bv-hero[data-modo=c]{--k-mode:c}
.bv-hero__field{position:absolute;inset:0}
.bv-hero__arch{position:absolute;right:calc(var(--gutr) + 4cqw);bottom:0;height:min(88cqh,calc(60cqw / .8));aspect-ratio:4/5;width:auto}
.bv-hero__arch .bv-arco{height:100%;width:100%;aspect-ratio:auto}
.bv-hero[data-modo=c] .bv-hero__nm{left:var(--gut);top:46cqh;translate:0 -50%;width:calc(100cqw - var(--gut) - var(--gutr) - 4cqw - min(88cqh * .8,60cqw) - 4cqw);white-space:normal;color:var(--azul);font-size:9cqw;line-height:1.02;text-wrap:balance}
.bv-hero[data-modo=c][data-size=l] .bv-hero__nm{font-size:7cqw}
.bv-hero[data-modo=c][data-size=m] .bv-hero__nm{font-size:5.4cqw}
.bv-hero[data-modo=c][data-size=s] .bv-hero__nm{font-size:4.6cqw}
.bv-hero[data-modo=c] .bv-hero__low{color:var(--tinta);max-width:calc(100cqw - min(88cqh * .8,60cqw) - 12cqw)}

@media(max-width:1199px){
	.bv-hero__arch{height:min(70cqh,calc(78cqw / .8));right:var(--gutr)}
	.bv-hero[data-modo=c] .bv-hero__nm{width:calc(100cqw - var(--gut) - var(--gutr) - min(70cqh * .8,78cqw) - 3cqw)}
	.bv-hero[data-modo=c] .bv-hero__low{max-width:calc(100cqw - min(70cqh * .8,78cqw) - 12cqw)}
}
@media(max-width:767px){
	.bv-hero{--k-ar:var(--ar-m);--k-roof:var(--roof-m)}
	/* phone: its own composition, the name on the sky above the houses; mode c puts the arch low and centred under the name */
	.bv-hero__vz{background:linear-gradient(var(--vz-p0),var(--vz-p1) 97%,var(--m-0))} /* taste-skill-ignore: neutral scrim */
	.bv-hero[data-modo=a][data-mmodo=b] .bv-hero__house{display:none}
	.bv-hero[data-modo=a][data-mmodo=b] .bv-hero__nm{top:clamp(88px,16cqh,160px);left:var(--gut);translate:0 0}
	.bv-hero[data-modo=a] .bv-hero__nm{translate:-50% calc(-50% + var(--sink,0px))}
	.bv-hero[data-modo=b][data-size] .bv-hero__nm{left:var(--gut);right:auto;translate:0 0;white-space:normal;font-size:48px;max-width:calc(100cqw - var(--gut) - var(--gutr))}
	.bv-hero__low .bv-prom{max-width:none}
	.bv-hero__low{gap:14px}
	.bv-hero__row{flex-direction:column;align-items:flex-start}
	.bv-hero__arch{left:50%;right:auto;translate:-50% 0;aspect-ratio:3/5;height:min(66cqh,calc(84cqw / .6))}
	.bv-hero[data-modo=c] .bv-hero__nm{left:var(--gut);top:clamp(88px,15cqh,140px);translate:0 0;width:auto;max-width:calc(100cqw - var(--gut) - var(--gutr));font-size:48px}
	.bv-hero[data-modo=c][data-size] .bv-hero__nm{font-size:48px}
	.bv-hero[data-modo=c][data-size=m] .bv-hero__nm,.bv-hero[data-modo=b][data-size=m] .bv-hero__nm{font-size:40px}
	.bv-hero[data-modo=c][data-size=s] .bv-hero__nm,.bv-hero[data-modo=b][data-size=s] .bv-hero__nm{font-size:34px} /* names over 28 characters hold two lines */
	.bv-hero[data-modo=c] .bv-hero__low{max-width:none;bottom:auto;top:calc(clamp(88px,15cqh,140px) + 130px)}
}

/* the page door (arch <-> hero) lives in assets/door.css + door.js */

/* chip: a small status label beside the button, not a second button */
.bv-chip--s{font-size:16px;line-height:1.3;padding:6px 12px}
.bv-hero__row{gap:16px}
/* load gate (script after the hero in hero.php): mode a shows the name and the house only after both photos are decoded; failsafe reveals after 9 s if the script never ran (later than the script's own 8 s fallback, so it never shows the name alone) */
html.js .bv-hero[data-modo=a]:not([data-gate]) :is(.bv-hero__nm,.bv-hero__house){visibility:hidden;animation:bv-gate 0s 9s forwards}
@keyframes bv-gate{to{visibility:visible}}
/* arrival (beat 0): once per session, 1.3 s, no veil; html.intro is removed by the first input (the rest state shows at once) */
html.intro .bv-hero__sky img{animation:bv-settle 1200ms var(--ease) backwards}
html.intro .bv-hero[data-gate=ok] .bv-hero__nm{animation:bv-fade 600ms 200ms var(--ease) backwards}
html.intro .bv-hero[data-gate=ok] .bv-hero__house{animation:bv-rise 700ms 500ms var(--ease) backwards}
html.intro .bv-hero__low,html.intro .bv-hero__bsc{animation:bv-fade 400ms 900ms var(--ease) backwards}
@keyframes bv-settle{from{scale:1.06}to{scale:1}}
@keyframes bv-fade{from{opacity:0}to{opacity:1}}
@keyframes bv-rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
/* mode b and c: the name reveals line by line (one reveal per line box) */
html.js:not(.reduced):not(.intro) .bv-hero:not([data-modo=a]) .bv-hero__nm{animation:bv-line 900ms var(--ease) backwards}
@keyframes bv-line{from{clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(.25em)}to{clip-path:inset(0 0 -20% 0);opacity:1;transform:none}}
@media(min-width:1441px){
	.bv-hero__low .bv-prom{font-size:calc(40 * var(--u))}
	.bv-hero__low{gap:calc(18 * var(--u))}
	.bv-btn,.bv-chip{font-size:calc(16 * var(--u))}
	.bv-hero__low .bv-btn{padding:calc(16 * var(--u)) calc(22 * var(--u))}
	.bv-chip--s{font-size:calc(16 * var(--u));padding:calc(6 * var(--u)) calc(12 * var(--u))}
}