/* Big Sur Energy · sistema visual (16-oct-2026).
   Vara: anthem.co.za como piso. Video y fotografía a sangre, letra Switzer, mucho aire, grilla de dos
   mitades, paneles de color de la marca y el corte en diagonal de Big Sur en cada marco.
   Los textos son los de Pablo, sin cambios: aquí solo cambia cómo se ven y cómo se mueven.
   Va después de styles.css y styles-v2.css. */

@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --f: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --papel: #eef2f1;
  --papel-2: #e3e9e8;
  --tinta: #0b1a26;
  --tinta-2: rgba(11,26,38,.62);
  --m: clamp(16px, 3.4vw, 64px);
  --corte: 22px;
  --corte-g: 40px;
  --suave: cubic-bezier(.22,.61,.24,1);
  --punteado: linear-gradient(90deg, currentColor 50%, transparent 0);
}

/* ---------- Base ---------- */
.bs { font-family: var(--f); background: var(--papel); color: var(--tinta); font-size: 16px; line-height: 1.5; font-weight: 400; }
.bs-heroe, .bs-cita { padding: 0 !important; }
.bs b, .bs strong { font-weight: 500; }
.bs-papel { background: var(--papel); color: var(--tinta); }
.bs-noche { background: var(--noche); color: #fff; }
.bs-seccion { padding: clamp(96px, 12vw, 190px) 0 !important; }
.bs-grilla { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); padding: 0 var(--m); }
.bs-col-der { display: flex; flex-direction: column; align-items: flex-start; }
.bs-ancho { padding: 0 var(--m); margin-top: clamp(48px, 6vw, 88px); }
@media (max-width: 860px) { .bs-grilla { grid-template-columns: 1fr; } .bs-col-izq:empty { display: none; } }

/* Tipografía */
.bs-rotulo { font-size: 15px; font-weight: 500; letter-spacing: -.005em; margin: 0 0 clamp(28px, 3.6vw, 52px); }
.bs-titulo { font-weight: 400; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); letter-spacing: -.025em; line-height: 1.04; margin: 0 0 clamp(32px, 3.6vw, 56px); max-width: 15em; text-wrap: balance; }
.bs-texto { font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.55; max-width: 40em; margin: 0 0 clamp(36px, 4vw, 60px); }
.bs-sangria { text-indent: 4em; }
.bs-texto b { font-weight: 500; }

/* Marco: el corte en diagonal de Big Sur en dos esquinas */
.bs-marco { position: relative; margin: 0; overflow: hidden; background: var(--papel-2); clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); }
.bs-marco > img, .bs-marco > video { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-parallax-interno] > img, [data-parallax-interno] > video { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); will-change: transform; }

/* Enlaces y botones: flecha dibujada que avanza al pasar */
.bs-enlace { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: inherit; text-decoration: none; }
.bs-enlace i, .bs-boton i, .bs-heroe__bajar i { display: inline-block; width: 26px; height: 10px; position: relative; transition: transform .45s var(--suave); }
.bs-enlace i::before, .bs-boton i::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1px; background: currentColor; }
.bs-enlace i::after, .bs-boton i::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.bs-enlace:hover i, .bs-boton:hover i { transform: translateX(6px); }
.bs-boton { display: inline-flex; align-items: center; gap: 16px; padding: 22px 30px 22px 28px; font: 500 15px/1 var(--f); color: inherit; background: none; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background .35s, color .35s; }
.bs-boton:hover { background: var(--tinta); color: var(--papel); }
.bs-noche .bs-boton:hover, .bs-boton--claro:hover { background: #fff; color: var(--noche); }

/* ---------- Barra superior ---------- */
.bs .top { background: transparent; transition: transform .6s var(--suave), background .4s; }
.bs .top.solid { background: rgba(8,21,35,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bs .top.oculta { transform: translateY(-100%); }
.bs .top .wrap { max-width: none; padding: 0 var(--m); height: 84px; position: relative; }
.bs .top .wrap::after { content: ""; position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px; color: rgba(255,255,255,.5); background-image: var(--punteado); background-size: 4px 1px; opacity: .55; }
.bs .top.solid .wrap::after { opacity: 0; }
.bs .top__logo img { width: 158px; }
.bs .nav { gap: 28px; }
.bs .nav a { font-size: 15px; font-weight: 500; opacity: 1; color: #fff; white-space: nowrap; }
.bs .nav a:hover { color: #fff; opacity: .7; }
.bs .nav a[aria-current] { color: #fff; opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.bs .nav .portal-link, .bs .nav .btn, .bs .portal-mini { border-radius: 999px !important; }
/* menú del celular: la hamburguesa pasa a X cuando está abierto */
.bs .burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.bs .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.bs .nav .portal-link { animation: none; box-shadow: none; border: 1px solid rgba(255,255,255,.55); background: none; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 500; }
.bs .nav .portal-link i { display: none; }
.bs .nav .portal-link:hover { background: #fff; color: var(--noche); opacity: 1; }
.bs .nav .btn { background: #fff; color: var(--noche); border-radius: 999px; padding: 11px 20px; font-weight: 500; box-shadow: none; }
.bs .nav .btn:hover { background: var(--turquesa); transform: none; }
.bs .idioma { background: none; border: 0; padding: 0; gap: 0; }
.bs .idioma button { background: none !important; color: rgba(255,255,255,.55) !important; box-shadow: none !important; padding: 6px 6px !important; font: 500 13px var(--f); position: relative; border-radius: 0 !important; }
.bs .idioma button[aria-pressed=true] { color: #fff !important; }
.bs .idioma button[aria-pressed=true]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 1px; background: currentColor; }
.bs .portal-mini { background: none; border: 1px solid rgba(255,255,255,.55); color: #fff; border-radius: 999px; animation: none; box-shadow: none; }
@media (max-width: 1480px) {
  .bs .burger { display: block; }
  .bs .portal-mini { display: inline-flex; margin-left: 0; }
  .bs .idioma { margin-left: auto; margin-right: 8px; }
  .bs .nav { position: fixed; inset: 84px 0 auto; height: calc(100vh - 84px); height: calc(100dvh - 84px); overflow-y: auto; background: var(--noche); flex-direction: column; align-items: flex-start; padding: 28px var(--m) 36px; gap: 18px; transform: translateY(-120%); transition: transform .5s var(--suave); }
  .bs .nav.open { transform: none; }
  .bs .nav a { font-size: 1.6rem; font-weight: 300; letter-spacing: -.02em; }
  .bs .nav .portal-link, .bs .nav .btn { font-size: 15px; font-weight: 500; letter-spacing: 0; }
}

/* ---------- Portada: Chile desde la órbita antes del amanecer, con la red encendida ----------
   El globo es el del sitio anterior (ECharts GL con texturas de la NASA y la red real del Coordinador), traído el
   17-oct-2026. Mientras carga se ve su imagen fija. El título de Pablo va partido: la primera línea detrás del
   planeta y la segunda delante. Al bajar, el planeta se hunde y las dos líneas se abren hacia los lados. */
.bs-heroe { position: relative; height: 100vh; height: 100svh; min-height: 640px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(1300px 900px at 62% 108%, #0b2340 0%, #050e1a 55%, #02060c 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-g)), calc(100% - var(--corte-g)) 100%, var(--corte-g) 100%, 0 calc(100% - var(--corte-g))); }
/* El planeta baja lo justo (--baja, lo calcula viaje.js) para que su horizonte quede bajo el título y no lo cruce */
.bs-heroe__tierra, .bs-heroe__globo { position: absolute; inset: 0; top: var(--baja, 0px); bottom: calc(var(--baja, 0px) * -1); z-index: 2; transform: translate3d(0, calc(var(--hp, 0) * 16vh), 0); will-change: transform; }
@media (min-width: 800px) { .bs-heroe { --baja: 24svh; } }
.bs-heroe__tierra { transition: opacity 1.4s var(--suave); }
.bs-heroe__tierra img { width: 100%; height: 100%; object-fit: cover; }
.bs-heroe.is-globo .bs-heroe__tierra { opacity: 0; }
.globo-lienzo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--suave); }
.globo-lienzo.is-ready { opacity: 1; }
.bs-heroe::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(2,6,12,0), rgba(2,6,12,.8) 86%); }
.bs-heroe__cabeza { position: absolute; left: 0; right: 0; top: clamp(112px, 15svh, 156px); padding: 0 var(--m); pointer-events: none; }
.bs-heroe__rotulo { position: relative; z-index: 4; font-size: 15px; font-weight: 500; margin: 0 0 clamp(14px, 2.2vh, 26px); color: rgba(244,247,246,.9); }
.bs-heroe__titulo { display: grid; font-weight: 300; font-size: clamp(3.5rem, min(12.6vw, 19svh), 15.5rem); letter-spacing: -.055em; line-height: .86; margin: 0; color: #f4f7f6; }
.bs-heroe__titulo br { display: none; }
.bs-heroe__titulo .l1 { justify-self: start; z-index: 4; margin-left: -.05em; transform: translate3d(calc(var(--hp, 0) * -8vw), 0, 0); }
.bs-heroe__titulo .l2 { justify-self: end; z-index: 4; margin-right: -.02em; transform: translate3d(calc(var(--hp, 0) * 8vw), 0, 0); }
.bs-heroe__titulo em { font-style: normal; font-weight: 300; }
.bs-heroe__pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--m) clamp(40px, 5.4vh, 64px); z-index: 5; }
.bs-heroe__fila { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); align-items: end; position: relative; }
.bs-heroe__frase { text-indent: 4em; max-width: 30em; font-size: clamp(16px, .9rem + .35vw, 19px); line-height: 1.45; color: rgba(244,247,246,.94); margin: 0; text-shadow: 0 1px 18px rgba(2,6,12,.8); }
.bs-heroe__acciones { display: flex; flex-wrap: wrap; gap: 14px 40px; color: #fff; }
/* En escritorio, los dos enlaces van uno sobre otro a la derecha, lejos de la red de Chile */
@media (min-width: 861px) { .bs-heroe__acciones { flex-direction: column; align-items: flex-end; gap: 14px; padding-right: 64px; } }
.bs-heroe__bajar { position: absolute; right: 0; bottom: 4px; width: 26px; height: 40px; color: #fff; }
.bs-heroe__bajar i { position: absolute; left: 12px; top: 0; width: 1px; height: 36px; background: currentColor; animation: bajar 2.4s var(--suave) infinite; }
.bs-heroe__bajar i::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
@keyframes bajar { 0%, 100% { transform: translateY(-4px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
@media (max-width: 860px) {
  .bs-heroe__fila { grid-template-columns: 1fr; row-gap: 26px; }
  .bs-heroe__bajar { display: none; }
  .bs-heroe::after { height: 58%; }
}
@media (max-width: 760px) { .bs-heroe { min-height: 600px; } .bs-heroe__titulo { font-size: clamp(3.3rem, 15.4vw, 5rem); } }

/* ---------- El equipo ---------- */
.bs-intro { padding-left: var(--m) !important; padding-right: var(--m) !important; }
.bs-frase__texto { font-weight: 300; font-size: clamp(2rem, .8rem + 3.6vw, 4.8rem); letter-spacing: -.035em; line-height: 1.06; margin: 0; max-width: 22em; }
[data-encender] .pal-luz { opacity: calc(.16 + var(--luz, 0) * .84); transition: opacity .2s linear; }

/* ---------- El equipo en el mapa: sus dos cifras, mientras el globo viaja de Estados Unidos y México a Chile ----------
   Sin el globo (sin WebGL o con movimiento reducido) queda una sección oscura con las dos cifras lado a lado. */
.bs-viaje { position: relative; padding: 0; color: #fff; isolation: isolate;
  background: radial-gradient(1200px 900px at 68% 50%, #0b1f35 0%, #050d18 55%, #02060c 100%);
  clip-path: polygon(0 var(--corte-g), var(--corte-g) 0, 100% 0, 100% calc(100% - var(--corte-g)), calc(100% - var(--corte-g)) 100%, 0 100%); }
.bs-viaje__pegada { position: relative; padding: clamp(96px, 12vw, 190px) var(--m); }
.bs-viaje__globo, .bs-viaje__avance, .bs-viaje__seguir { display: none; }
.bs-viaje__pasos { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); row-gap: 56px; }
.bs-viaje__paso { position: relative; padding-top: 22px; }
.bs-viaje__paso::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; color: rgba(255,255,255,.5); background-image: var(--punteado); background-size: 4px 1px; }
.bs-viaje__paso b { display: flex; align-items: baseline; gap: .1em; font-weight: 300; font-size: clamp(3.4rem, 1.6rem + 6vw, 9rem); letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-viaje__paso b small { font-size: .3em; font-weight: 400; letter-spacing: -.01em; color: var(--turquesa); }
.bs-viaje__paso p { margin: 22px 0 0; font-size: clamp(18px, .8rem + .9vw, 28px); font-weight: 300; line-height: 1.3; letter-spacing: -.015em; max-width: 16em; color: rgba(244,247,246,.9); }
@media (max-width: 860px) { .bs-viaje__pasos { grid-template-columns: 1fr; } }
/* Con el globo: la sección queda fija mientras se baja y el globo pasa por sus seis escenas */
.bs-viaje.vivo .bs-viaje__pista { position: relative; height: 220vh; }
.bs-viaje.vivo .bs-viaje__pegada { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.bs-viaje.vivo .bs-viaje__globo { display: block; position: absolute; top: -8%; bottom: -8%; left: 22%; right: -12%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.bs-viaje.vivo .bs-viaje__pasos { display: block; position: absolute; z-index: 2; left: var(--m); bottom: clamp(104px, 15svh, 160px); width: min(48vw, 680px); height: 0; pointer-events: none; }
.bs-viaje.vivo .bs-viaje__paso { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(48px); transition: opacity .7s var(--suave), transform 1s var(--suave); }
.bs-viaje.vivo .bs-viaje__paso.antes { transform: translateY(-48px); }
.bs-viaje.vivo .bs-viaje__paso.on { opacity: 1; transform: none; }
.bs-viaje.vivo .bs-viaje__paso b { font-size: clamp(4.4rem, 1.5rem + 9.4vw, 13rem); text-shadow: 0 0 60px rgba(2,6,12,.85); }
.bs-viaje.vivo .bs-viaje__paso p { text-shadow: 0 0 24px rgba(2,6,12,.95), 0 0 6px rgba(2,6,12,.9); }
.bs-viaje.vivo .bs-viaje__avance { display: flex; gap: 6px; position: absolute; z-index: 2; left: var(--m); bottom: clamp(44px, 6svh, 64px); width: min(48vw, 680px); }
.bs-viaje__avance i { flex: 1; height: 3px; position: relative; overflow: hidden; background: rgba(255,255,255,.2); }
.bs-viaje__avance i::after { content: ""; position: absolute; inset: 0; background: var(--turquesa); box-shadow: 0 0 12px rgba(31,207,179,.7); transform-origin: 0 50%; transform: scaleX(var(--a, 0)); }
/* La señal de seguir: la misma flecha de la portada, al lado del avance; se va en la última escena */
.bs-viaje.vivo .bs-viaje__seguir { display: block; position: absolute; z-index: 2; left: calc(var(--m) + min(48vw, 680px) + 22px); bottom: clamp(36px, calc(6svh - 8px), 56px); width: 26px; height: 40px; color: #fff; transition: opacity .6s var(--suave); }
.bs-viaje__seguir i { position: absolute; left: 12px; top: 0; width: 1px; height: 36px; background: currentColor; animation: bajar 2.4s var(--suave) infinite; }
.bs-viaje__seguir i::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.bs-viaje.al-final .bs-viaje__seguir { opacity: 0; }
@media (max-width: 760px) {
  .bs-viaje.vivo .bs-viaje__pista { height: 200vh; }
  .bs-viaje.vivo .bs-viaje__globo { left: -30%; right: -30%; top: 4svh; bottom: 34svh; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent); }
  .bs-viaje.vivo .bs-viaje__pasos { right: var(--m); width: auto; bottom: 88px; }
  .bs-viaje.vivo .bs-viaje__paso b { font-size: clamp(3.6rem, 19vw, 6.2rem); }
  .bs-viaje.vivo .bs-viaje__paso p { font-size: 1.15rem; margin-top: 14px; }
  .bs-viaje.vivo .bs-viaje__avance { right: calc(var(--m) + 42px); width: auto; bottom: 44px; }
  .bs-viaje.vivo .bs-viaje__seguir { left: auto; right: var(--m); bottom: 28px; }
}

/* ---------- La cinta de servicios ---------- */
.bs-cinta { background: var(--papel); color: var(--tinta); border: 0; padding: clamp(28px, 3vw, 44px) 0; position: relative; overflow: hidden; }
.bs-cinta::before, .bs-cinta::after { content: ""; position: absolute; left: var(--m); right: var(--m); height: 1px; color: rgba(11,26,38,.45); background-image: var(--punteado); background-size: 4px 1px; }
.bs-cinta::before { top: 0; }
.bs-cinta::after { bottom: 0; }
.bs-cinta div { font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); font-weight: 300; letter-spacing: -.03em; color: var(--tinta); gap: 0; animation-duration: 90s; }
.bs-cinta span::after { content: "/"; color: var(--turquesa); margin: 0 .55em; font-size: 1em; vertical-align: baseline; }

/* ---------- Por qué Big Sur ---------- */
.bs-marco--chico { width: min(300px, 64%); aspect-ratio: 3 / 2; margin-top: clamp(140px, 18vw, 300px); }
.bs-marco--grande { width: 100%; aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .bs-marco--chico { display: none; } }

/* Los tres pilares: avanzan de lado al bajar, entre fotos */
.bs-impacto { position: relative; padding-top: clamp(80px, 9vw, 140px); }
.bs-impacto__pegada { position: relative; }
.bs-impacto__pista { display: flex; align-items: stretch; gap: 10px; padding: 0 var(--m); }
.bs-tarjeta { flex: 0 0 auto; width: clamp(300px, 34vw, 520px); height: min(78vh, 740px); min-height: 480px; background: var(--fondo); color: var(--texto); clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); display: flex; flex-direction: column; padding: clamp(32px, 4.4vh, 52px) clamp(24px, 2.4vw, 40px); container-type: inline-size; }
.bs-pilar .pil__dato { order: -1; display: block; margin: 0 0 auto; padding: 0; border: 0; font-size: 15px; font-weight: 500; color: inherit; }
.bs-pilar .pil__dato b { display: block; font-weight: 300; font-size: min(clamp(3.4rem, 1.6rem + 4.2vw, 6.8rem), 17cqi); letter-spacing: -.05em; line-height: .9; color: var(--dato, inherit); margin-bottom: 14px; white-space: nowrap; }
.bs-pilar h3 { font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); letter-spacing: -.025em; line-height: 1.05; margin: 0 0 12px; }
.bs-pilar p { font-size: 15px; line-height: 1.5; margin: 0 0 18px; max-width: 26em; }
.bs-pilar ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.bs-pilar li { padding: 10px 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.bs-tarjeta--foto { min-height: 0; }
/* Desde el 17-oct-2026 los pilares no avanzan de lado: van en una grilla de tres que se recorre con el scroll normal */
.bs-impacto__pista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(440px, 36vw, 620px), auto); }
.bs-impacto__pista > .bs-tarjeta, .bs-impacto__pista > .bs-tarjeta--foto { width: auto; height: auto; }
.bs-impacto__pista > .bs-tarjeta--foto .bs-video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .bs-impacto__pista { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bs-impacto__pista > .bs-tarjeta { min-height: 0; }
  .bs-pilar .pil__dato { margin-bottom: clamp(28px, 8vw, 44px); }
  .bs-impacto__pista > .bs-tarjeta--foto { display: none; }
}

/* ---------- Tres áreas, una bajo otra, con su video ---------- */
.bs-areas { position: relative; margin-top: clamp(24px, 3vw, 48px); }
.bs-areas__pegada { position: relative; padding: 0 var(--m); }
.bs-areas__lista { display: none; }
.bs-areas__paso { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); align-items: center; margin-bottom: clamp(64px, 8vw, 120px); }
.bs-areas__medio { width: min(100%, 600px); aspect-ratio: 7 / 6; }
.bs-areas__texto { display: flex; flex-direction: column; align-items: flex-start; }
.bs-areas__n { font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); letter-spacing: -.04em; line-height: .9; color: var(--turquesa); margin-bottom: 22px; }
.bs-areas__texto h3 { font-weight: 300; font-size: clamp(1.9rem, 1.1rem + 1.7vw, 3rem); letter-spacing: -.04em; line-height: 1; margin: 0 0 24px; max-width: 11em; }
.bs-areas__texto p { font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.55; max-width: 32em; margin: 0 0 26px; color: rgba(255,255,255,.82); }
.bs-areas__texto ul { list-style: none; margin: 0 0 30px; padding: 0; width: min(100%, 520px); font-size: 15px; }
.bs-areas__texto li { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.16); }
@media (max-width: 860px) {
  .bs-areas__paso { grid-template-columns: 1fr; row-gap: 28px; }
  .bs-areas__medio { width: 100%; aspect-ratio: 4 / 3; }
}

/* ---------- Ecosistema: cada área se abre al pasar el cursor ---------- */
.bs-acordeon { padding: 0 var(--m); margin-top: clamp(8px, 1vw, 16px); }
.bs-area { position: relative; }
.bs-area + .bs-area::before, .bs-acordeon::after { content: ""; display: block; height: 1px; margin: 0 var(--m); color: rgba(11,26,38,.5); background-image: var(--punteado); background-size: 4px 1px; transition: opacity .4s; }
.bs-area.on::before, .bs-area.on + .bs-area::before { opacity: 0; }
.bs-area__fila { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); width: 100%; padding: clamp(30px, 3.4vw, 50px) var(--m); position: relative; z-index: 1; }
.bs-area__fila:focus-visible { outline: 2px solid var(--turquesa); outline-offset: -2px; }
.bs-area__n { font-weight: 300; font-size: clamp(3.4rem, 2rem + 4vw, 6.4rem); letter-spacing: -.04em; line-height: .9; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--suave), transform .6s var(--suave); }
.bs-area__nombre { font-weight: 400; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); letter-spacing: -.025em; line-height: 1.05; transition: color .5s; }
.bs-area__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--suave); position: relative; z-index: 1; }
.bs-area__cuerpo > * { min-height: 0; }
.bs-area__dentro { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); padding: 0 var(--m); }
.bs-area__dentro > div { grid-column: 2; padding-bottom: clamp(36px, 4vw, 60px); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--suave) .15s, transform .6s var(--suave) .15s; }
.bs-servicios { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; font-size: 15px; }
.bs-servicios--una { columns: 1; max-width: 360px; }
.bs-servicios li { break-inside: avoid; padding: 11px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.bs-area::after { content: ""; position: absolute; inset: 0; background: var(--fondo); clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); opacity: 0; transform: scaleY(.96); transition: opacity .55s var(--suave), transform .7s var(--suave); }
.bs-area.on::after { opacity: 1; transform: none; }
.bs-area.on { color: var(--texto); }
.bs-area.on .bs-area__n { opacity: 1; transform: none; }
.bs-area.on .bs-area__cuerpo { grid-template-rows: 1fr; }
.bs-area.on .bs-area__dentro > div { opacity: 1; transform: none; }
.bs-area:not(.on):hover .bs-area__nombre { color: var(--pacifico); }
@media (max-width: 860px) {
  .bs-area__fila, .bs-area__dentro { grid-template-columns: 1fr; }
  .bs-area__n { font-size: 2.6rem; margin-bottom: 8px; }
  .bs-area:not(.on) .bs-area__n { display: none; }
  .bs-area__dentro > div { grid-column: 1; }
  .bs-servicios { columns: 1; }
}

/* ---------- Proyectos (página de Desarrollo) ---------- */
.bs-proyectos { display: flex; gap: 10px; padding: clamp(24px, 3vw, 40px) var(--m) 0; overflow-x: auto; scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; }
.bs-proyectos::-webkit-scrollbar { display: none; }
.bs-proyectos.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.bs-proyecto { flex: 0 0 clamp(270px, 31vw, 520px); margin: 0; scroll-snap-align: start; }
.bs-proyecto .bs-marco { aspect-ratio: 4 / 3; }
.bs-proyecto img { transition: transform 1.4s var(--suave); pointer-events: none; }
.bs-proyecto:hover img { transform: scale(1.05); }
.bs-proyecto figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 2px 0; font-size: 15px; }
.bs-proyecto figcaption b { font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); letter-spacing: -.035em; }
.bs-proyecto figcaption span { color: var(--tinta-2); }
.bs main .wrap .bs-proyectos { padding-left: 0; padding-right: 0; }

/* ---------- Calculadora ---------- */
#calculadora .calc { --corte: 28px; border-radius: 0 !important; box-shadow: none !important; background: var(--noche); }
#calculadora .calc__out { background: var(--abismo) !important; }
#calculadora .btn { border-radius: 999px !important; background: var(--turquesa); color: var(--noche); padding: 18px 28px; box-shadow: none; }
.bs .perfil, .bs .seg button, .bs .chip, .bs .kpi, .bs .ref-banda, .bs .ref-tag, .bs .terreno, .bs .alerta { border-radius: 2px !important; }
.bs .perfil { background: none !important; padding: 0 !important; gap: 0 !important; border: 1px solid rgba(255,255,255,.2); border-radius: 999px !important; overflow: hidden; }
.bs .perfil button { border-radius: 999px !important; padding: 14px 10px; font-family: var(--f); }
.bs .perfil button[aria-selected=true] { background: #fff !important; color: var(--noche) !important; }
.bs .ctl input[type=range] { height: 2px !important; border-radius: 0 !important; }
.bs .ctl input[type=range]::-webkit-slider-thumb { width: 18px !important; height: 18px !important; border: 0 !important; background: #fff !important; box-shadow: none !important; }
.bs .seg button, .bs .chip { background: none !important; border-color: rgba(255,255,255,.18) !important; font-family: var(--f); }
.bs .seg button:hover, .bs .chip:hover:not(:disabled) { transform: none !important; border-color: rgba(255,255,255,.45) !important; }
.bs .seg button[aria-pressed=true], .bs .chip[aria-pressed=true] { background: rgba(255,255,255,.06) !important; border-color: #fff !important; box-shadow: none !important; }
.bs .kpi { background: none !important; border-top: 1px solid rgba(255,255,255,.2); padding: 14px 0 0 !important; }
.bs .ref-banda { background: none !important; border: 0 !important; border-left: 1px solid var(--turquesa) !important; padding: 2px 0 2px 14px !important; }
.bs .ref-tag { background: none !important; color: var(--turquesa) !important; border: 1px solid currentColor; }
.bs .big { font-weight: 300; text-shadow: none !important; }

/* ---------- La cita, sobre video ---------- */
.bs-cita { position: relative; height: 240vh; background: var(--papel); }
.bs-cita__pegada { --corte: 40px; position: sticky; top: var(--m); height: calc(100vh - 2 * var(--m)); height: calc(100svh - 2 * var(--m)); margin: 0 var(--m); display: flex; align-items: center; color: #fff; }
.bs-cita__pegada video { position: absolute; inset: 0; transform: scale(calc(1.14 - var(--avance, 0) * .14)); }
.bs-cita__pegada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,21,35,.78) 0%, rgba(8,21,35,.42) 55%, rgba(8,21,35,.2) 100%); }
.bs-cita__texto { position: relative; z-index: 2; margin: 0; padding: 0 clamp(24px, 4vw, 64px); font-weight: 300; font-size: clamp(2.1rem, .8rem + 4vw, 5.2rem); letter-spacing: -.035em; line-height: 1.04; max-width: 17em; }

/* ---------- Portal ---------- */
.bs-lista { list-style: none; margin: 0 0 clamp(36px, 4vw, 56px); padding: 0; width: min(100%, 560px); font-size: 15px; }
.bs-lista li { padding: 13px 0; position: relative; }
.bs-lista li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; color: rgba(11,26,38,.45); background-image: var(--punteado); background-size: 4px 1px; }
.bs-portal .mock { --corte: 28px; transform: none !important; border-radius: 0 !important; background: var(--noche) !important; border: 0 !important; box-shadow: none !important; padding: clamp(20px, 2.4vw, 36px); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bs-portal .mock__top { margin-bottom: 22px; }
.bs-portal .mock__top i { background: rgba(255,255,255,.2); }
.bs-portal .mock__top span { font-size: 13px; color: rgba(255,255,255,.55); }
.bs-portal .mock__kpis { gap: 10px; margin-bottom: 10px; }
.bs-portal .mock__kpis div { border-radius: 0 !important; background: rgba(255,255,255,.04) !important; padding: 22px; }
.bs-portal .mock__kpis b.esq { height: 2.4rem; width: 62%; border-radius: 0 !important; background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 100%) !important; background-size: 220% 100% !important; animation: brilla 3.6s linear infinite !important; margin-bottom: 14px; }
.bs-portal .mock__kpis span { font-size: 13px; color: rgba(255,255,255,.6); }
.bs-portal .mock__graf { height: clamp(180px, 22vw, 320px); border-radius: 0 !important; background: rgba(255,255,255,.03) !important; padding: 18px; }
.bs-portal .mock__docs div { border-radius: 0 !important; background: rgba(255,255,255,.04) !important; font-size: 14px; padding: 14px 18px; color: rgba(255,255,255,.75); }
.bs-portal .mock__graf path:last-of-type { stroke-dasharray: 520; stroke-dashoffset: 520; }
.bs-portal .mock.in .mock__graf path:last-of-type { animation: trazo 2.6s var(--suave) .3s forwards; }
.bs-portal .mock__graf path:first-of-type { opacity: 0; transition: opacity 1.4s ease 1.2s; }
.bs-portal .mock.in .mock__graf path:first-of-type { opacity: 1; }
@keyframes brilla { to { background-position: -220% 0; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* ---------- Contacto ---------- */
#contacto .bs-titulo { color: #fff; }
#contacto .bs-texto { color: rgba(255,255,255,.78); }
.bs-form { width: 100%; max-width: 680px; display: grid; gap: 28px; }
.bs-form .servicios legend, .bs-form .campo label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6); }
.bs-form .serv span { border: 1px solid rgba(255,255,255,.22); border-radius: 2px !important; background: none; color: #fff; font-family: var(--f); }
.bs-form .serv span small { color: rgba(255,255,255,.55); }
.bs-form .serv input:checked + span { border-color: var(--turquesa); background: rgba(31,207,179,.1); box-shadow: inset 0 0 0 1px var(--turquesa); }
.bs-form .campo input, .bs-form .campo textarea, .bs-form .campo select { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0 !important; color: #fff; padding: 12px 0; font-family: var(--f); font-size: 16px; }
.bs-form .campo select option { color: var(--tinta); }
.bs-form .campo input:focus, .bs-form .campo textarea:focus, .bs-form .campo select:focus { box-shadow: none; border-bottom-color: var(--turquesa); }
.bs-form .destino { background: none; padding: 0; color: rgba(255,255,255,.7); font-size: 14px; border-radius: 0 !important; }
.bs-form .aviso { background: rgba(31,207,179,.1); color: #bff3ea; border-radius: 0 !important; }
.bs-oficina { margin-top: clamp(56px, 6vw, 96px); display: grid; gap: 4px; font-size: 15px; color: rgba(255,255,255,.75); }
.bs-oficina b { color: #fff; font-weight: 500; margin-bottom: 4px; }
.bs-oficina .bs-enlace { margin-top: 12px; color: #fff; }

/* ---------- Pie ---------- */
.bs .pie-sitio { background: var(--noche); color: rgba(255,255,255,.62); padding: clamp(40px, 5vw, 80px) 0 28px; font-size: 15px; position: relative; }
.bs .pie-sitio .wrap { max-width: none; padding: 0 var(--m); grid-template-columns: 2fr 1fr 1fr; }
.bs .pie-sitio .wrap > div:first-child p:first-of-type { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem) !important; font-weight: 300 !important; letter-spacing: -.035em; line-height: 1.02; color: #fff !important; margin: 26px 0 16px !important; }
.bs .pie-sitio h4 { font-weight: 500; color: #fff; }
.bs .pie-sitio .legal { border-top: 0; position: relative; margin-top: 40px; }
.bs .pie-sitio .legal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; color: rgba(255,255,255,.4); background-image: var(--punteado); background-size: 4px 1px; }
@media (max-width: 860px) {
  .bs .pie-sitio .wrap { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .bs .pie-sitio .wrap > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Entrada y movimiento ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.partido.rv { opacity: 1; transform: none; }
.partido .pal { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.partido .pal > span { display: inline-block; transform: translateY(110%); transition: transform .85s var(--suave); transition-delay: calc(var(--i, 0) * 26ms + 40ms); }
.partido.in .pal > span { transform: none; }
.bs .rv { transition-timing-function: var(--suave); }
@media (prefers-reduced-motion: reduce) {
  .bs-heroe__bajar i, .bs-portal .mock__kpis b.esq { animation: none !important; }
  [data-parallax-interno] > img, [data-parallax-interno] > video { transform: none; }
}

/* ---------- Interiores: las páginas de cada área, equipo, mercado y portal ---------- */
.bs main > section:not([class*="bs-"]):not(.dark):not(.niebla):not(.cta):not(.banda):not(.hero):not(.portal-page) { background: var(--papel); }
.bs main .dark { background: var(--noche); }
.bs main .niebla { background: var(--papel-2); }
.bs main section > .wrap { max-width: none; padding: 0 var(--m); }
.bs .eyebrow { font-size: 15px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: inherit; gap: 0; }
.bs .eyebrow::before { display: none; }
.bs .dark .eyebrow, .bs .hero .eyebrow { color: #fff; opacity: 1; }
.bs .h2 { font-weight: 400; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); letter-spacing: -.025em; line-height: 1.04; }
.bs main .lead { font-size: clamp(15px, .9rem + .2vw, 17px); font-weight: 400; line-height: 1.55; text-indent: 4em; max-width: 40em; }
.bs main .head { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); row-gap: 22px; max-width: none; margin-bottom: clamp(48px, 6vw, 88px); }
.bs main .head > .eyebrow { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
.bs main .head > :not(.eyebrow) { grid-column: 2; }
.bs main .head .h2 { max-width: 15em; }
@media (max-width: 860px) { .bs main .head { grid-template-columns: 1fr; } .bs main .head > .eyebrow, .bs main .head > :not(.eyebrow) { grid-column: 1; grid-row: auto; } }
/* Portada de cada área: video a sangre, el titular abajo */
.bs .hero--sub { height: 92vh; height: 92svh; min-height: 560px; padding: 0; display: block; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-g)), calc(100% - var(--corte-g)) 100%, var(--corte-g) 100%, 0 calc(100% - var(--corte-g))); }
.bs .hero--sub > video.foto, .bs .hero--sub > img.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: none; transform: none; }
.bs .hero--sub::before { background: linear-gradient(180deg, rgba(8,21,35,.72) 0%, rgba(8,21,35,.28) 20%, rgba(8,21,35,.12) 50%, rgba(8,21,35,.84) 100%) !important; }
.bs .hero--sub .wrap { position: absolute; left: 0; right: 0; bottom: clamp(40px, 5.4vh, 64px); z-index: 2; }
.bs .hero--sub .display { font-weight: 300; font-stretch: 100%; font-size: clamp(2.8rem, 1rem + 5vw, 6.2rem); letter-spacing: -.035em; line-height: 1; margin-top: 18px; max-width: 13em; }
.bs .hero--sub .display--m { font-size: clamp(2.4rem, 1rem + 3.8vw, 5rem); }
.bs .hero--sub .display em { font-style: normal; font-weight: 300; color: var(--turquesa); }
.bs .hero--sub .hero__grid { margin-top: clamp(18px, 2.4vh, 30px); display: block; }
.bs .hero--sub .lead { color: rgba(244,247,246,.92); }
/* Cifras, pasos, listas y cierre */
.bs main .cifra b { font-weight: 300; letter-spacing: -.04em; }
.bs .paso b { font-weight: 300; }
.bs .cta .h2 { font-weight: 300; font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.8rem); letter-spacing: -.035em; }
.bs .cta .btn, .bs main .btn { border-radius: 999px !important; padding: 18px 28px; font-weight: 500; }
.bs main .dark .btn, .bs .cta .btn { background: #fff; color: var(--noche); }
.bs main .dark .btn:hover, .bs .cta .btn:hover { background: var(--turquesa); }
.bs main .cta, .bs main .cta.niebla { background: var(--noche) !important; color: #fff; }
.bs .banda--cita blockquote { font-weight: 300; letter-spacing: -.035em; }
.bs .pagina-sola { padding-top: clamp(150px, 20vh, 220px) !important; }
@media (max-width: 560px) { .bs-portal .mock__kpis div { padding: 14px 12px; } .bs-portal .mock__kpis b.esq { width: 86%; height: 1.6rem; } }

/* ---------- Más potencia (17-oct-2026): revelados, telón entre páginas, cursor, grano y portada que reacciona al bajar ---------- */
/* Fotos y videos que se revelan al entrar: un telón del color de la sección sube y la imagen se asienta */
.bs-marco.revela::after { content: ""; position: absolute; inset: -1px; z-index: 3; background: var(--telon, var(--papel)); transform-origin: 50% 0; transition: transform 1.25s var(--suave); pointer-events: none; }
.bs-marco.revela.visto::after { transform: scaleY(0); }
.bs-marco.revela:not([data-parallax-interno]) > img, .bs-marco.revela:not([data-parallax-interno]) > video { transform: scale(1.16); transition: transform 2.2s var(--suave); }
.bs-marco.revela.visto:not([data-parallax-interno]) > img, .bs-marco.revela.visto:not([data-parallax-interno]) > video { transform: scale(1); }
.bs-noche .bs-marco.revela, .bs-areas-seccion .bs-marco.revela { --telon: var(--noche); }
/* Grano de película sobre los videos grandes */
.bs-grano::before { content: ""; position: absolute; inset: -40px; z-index: 1; pointer-events: none; opacity: .085; mix-blend-mode: overlay; animation: grano .9s steps(3) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
@keyframes grano { 0% { transform: translate(0, 0); } 33% { transform: translate(-18px, 12px); } 66% { transform: translate(14px, -16px); } 100% { transform: translate(0, 0); } }
/* La portada reacciona al bajar: la frase y los botones suben y se apagan */
.bs-heroe__pie { transform: translate3d(0, calc(var(--hp, 0) * -90px), 0); opacity: calc(1 - var(--hp, 0) * 1.35); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .bs-marco.revela::after { display: none; }
  .bs-grano::before { animation: none; }
  .bs-heroe__pie { transform: none; opacity: 1; }
}
/* Proyectos que cobran vida: el video aparece sobre la foto */
.bs-video-vivo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--suave); z-index: 1; }
.vivo .bs-video-vivo { opacity: 1; }
/* Video que se expande a pantalla completa mientras se baja */
.bs-expande { position: relative; height: 170vh; margin-top: clamp(80px, 9vw, 140px); }
.bs-expande__pegada { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.bs-expande__marco { --x: 26%; --y: 18%; --c: 22px; position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(calc(var(--x) + var(--c)) var(--y), calc(100% - var(--x)) var(--y), calc(100% - var(--x)) calc(100% - var(--y) - var(--c)), calc(100% - var(--x) - var(--c)) calc(100% - var(--y)), var(--x) calc(100% - var(--y)), var(--x) calc(var(--y) + var(--c))); }
.bs-expande__marco video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.22 - var(--k, 0) * .22)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .bs-expande { height: auto; } .bs-expande__pegada { position: relative; height: 70vh; } .bs-expande__marco { --x: 0%; --y: 0%; } }
@media (max-width: 860px) { .bs-expande { height: 150vh; } .bs-expande__marco { --x: 8%; --y: 22%; } }
/* La cinta de servicios, a escala de titular */
.bs-cinta div { font-size: clamp(3rem, 1rem + 6.4vw, 8.8rem); letter-spacing: -.045em; animation-duration: 140s; }
.bs-cinta span::after { margin: 0 .4em; }

/* En celular, los párrafos sin sangría en la primera línea (17-oct-2026) */
@media (max-width: 760px) { .bs-sangria, .bs-heroe__frase, .bs main .lead { text-indent: 0; } }

/* 19-oct-2026: el porqué ordenado (Pablo, en la clase: "se me desordenó un poco"). El rótulo a la izquierda, el título y el
   texto a la derecha, y debajo las dos imágenes del mismo tamaño, lado a lado, en vez de la foto chica flotando sola. */
.bs-porque .bs-grilla { grid-template-areas: "rotulo titulo" "rotulo texto" "foto video"; align-items: start; }
.bs-porque .bs-col-izq, .bs-porque .bs-col-der { display: contents; }
.bs-porque .bs-rotulo { grid-area: rotulo; }
.bs-porque .bs-titulo { grid-area: titulo; }
.bs-porque .bs-sangria { grid-area: texto; }
.bs-porque .bs-marco--chico { grid-area: foto; width: 100%; aspect-ratio: 16 / 10; margin: clamp(28px, 3vw, 48px) 0 0; }
.bs-porque .bs-marco--grande { grid-area: video; margin-top: clamp(28px, 3vw, 48px); }
@media (max-width: 860px) {
  .bs-porque .bs-grilla { grid-template-columns: 1fr; grid-template-areas: "rotulo" "titulo" "texto" "video"; }
  .bs-porque .bs-marco--chico { display: none; }
}

/* 19-oct-2026: más pulcra (Amparo, durante la clase con Pablo: "pule la pagina mas pulcra"). Solo lo estético, sin tocar textos.
   Menos aire muerto entre secciones, la cinta de servicios a una escala que acompaña en vez de gritar, y los tramos que se
   quedan pegados al bajar (el video que crece y la cita) más cortos, para que la página no se sienta estirada. */
.bs-seccion { padding-top: clamp(80px, 8vw, 128px) !important; padding-bottom: clamp(80px, 8vw, 128px) !important; }
.bs-cinta { padding: clamp(22px, 2.2vw, 34px) 0; }
.bs-cinta div { font-size: clamp(2rem, 1rem + 2.4vw, 3.8rem); letter-spacing: -.035em; }
.bs-expande { height: 145vh; margin-top: clamp(56px, 6vw, 96px); }
.bs-expande__marco { --x: 12%; --y: 8%; }
.bs-cita { height: 175vh; }
.bs-impacto { padding-top: clamp(56px, 6vw, 96px); }

/* 19-oct-2026, tarde: auditoría de tres revisores ("auditalo elevalo pulelo"). Solo lo visual: ningún texto cambia.
   Cada arreglo se verificó en la página antes de aplicarlo. */

/* La g de "energía" ya no se corta en la portada: la caja de cada palabra deja lugar a lo que baja de la línea */
.bs-heroe__titulo .pal { padding-bottom: .22em; margin-bottom: -.22em; }

/* La barra no se aprieta en los portátiles de 1366 a 1440: hasta 1400 px va con el menú plegado, y sobre eso con aire */
@media (min-width: 1481px) { .bs .nav { gap: 20px; } .bs .idioma { margin-right: 24px; } }
.bs .top__logo, .bs .idioma, .bs .nav .portal-link svg { flex-shrink: 0; }

/* Sin negritas falsas: la letra viene en 300, 400 y 500 */
.bs .portal-mini, .bs .perfil button[aria-selected=true], .bs .ctl output, .bs .ref-tag { font-weight: 500; }
.bs .ref-tag { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Ritmo: una sola medida entre el encabezado de cada sección y lo que sigue, y sin vacío al final de las áreas */
:root { --bloque: clamp(48px, 5vw, 80px); }
.bs-col-der > :last-child, .bs-porque .bs-sangria { margin-bottom: 0; }
.bs-ancho, .bs-areas, .bs-acordeon, .bs-porque .bs-marco--chico, .bs-porque .bs-marco--grande { margin-top: var(--bloque); }
.bs-viaje__pegada { padding: clamp(80px, 8vw, 128px) var(--m); }
.bs-areas__paso:last-child { margin-bottom: 0; }

/* Escala tipográfica por función: los mismos nombres y números se ven igual en "Tres áreas" y en el ecosistema,
   la cita va a la escala de la frase de la intro, y la cinta y el lema del pie a la de los títulos */
.bs-areas__texto h3, .bs-area__nombre { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); font-weight: 400; letter-spacing: -.03em; }
.bs-areas__n, .bs-area__n { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); font-weight: 300; }
.bs-cita__texto { font-size: clamp(2rem, .8rem + 3.6vw, 4.8rem); text-indent: -.34em; }
.bs-cinta div { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); }
.bs .pie-sitio .wrap > div:first-child p:first-of-type { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem) !important; }

/* Calculadora dentro de la grilla y del estilo del sitio: esquinas rectas, barras lisas y una columna bajo 1240 px */
@media (min-width: 1241px) { #calculadora .calc { grid-template-columns: calc(50% + clamp(20px, 2vw, 32px) / 2 - clamp(22px, 4vw, 44px)) 1fr; } }
@media (max-width: 1240px) { #calculadora .calc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bs .perfil { grid-template-columns: 1fr; border-radius: 28px !important; } }
.bs .seg button, .bs .chip, .bs .kpi, .bs .ref-banda, .bs .ref-tag, .bs .terreno, .bs .alerta, .bs-form .serv span { border-radius: 0 !important; }
.cas.menos .bar i { background: rgba(31,207,179,.5); }
@media (max-width: 520px) { .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Lectura: párrafos a 32 em (unos 70 caracteres por línea), notas a 64 caracteres y sin palabras sueltas al final */
.bs-texto { max-width: 32em; }
.nota-calc, .bs .ref-banda { max-width: 64ch; }
.bs-texto, .bs-areas__texto p, .bs-heroe__frase, .bs .pie-sitio p { text-wrap: pretty; }
.bs-viaje__paso p { text-wrap: balance; }
#ecosistema .bs-sangria { text-indent: 0; }
@media (max-width: 860px) { .bs-sangria, .bs-heroe__frase, .bs main .lead { text-indent: 0; } }

/* Ecosistema: las líneas del acordeón van de margen a margen, como la barra, la cinta y el pie */
.bs-area + .bs-area::before, .bs-acordeon::after { margin: 0; }
@media (max-width: 860px) { .bs-acordeon { padding: 0; } }

/* Tres áreas: las imágenes llenan su columna, y en tableta van en dos columnas */
.bs-areas__medio { width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 701px) and (max-width: 860px) { .bs-areas__paso { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 32px); } .bs-areas__medio { aspect-ratio: 4 / 3; } }

/* Cifras sobre el mismo negro del sitio, con el ~ y el + alineados al texto de abajo, y sin la línea pegada al corte */
.bs-viaje { background: var(--noche); }
.bs-viaje__paso b { margin-left: -.08em; }
.bs-cinta::before { display: none; }

/* El corte en diagonal como regla de las secciones oscuras */
#areas { clip-path: polygon(0 var(--corte-g), var(--corte-g) 0, 100% 0, 100% calc(100% - var(--corte-g)), calc(100% - var(--corte-g)) 100%, 0 100%); }
#contacto { clip-path: polygon(0 var(--corte-g), var(--corte-g) 0, 100% 0, 100% 100%, 0 100%); }

/* Portal: la maqueta en la columna derecha, alineada al texto, y su línea sin deformarse */
@media (min-width: 861px) { .bs-portal .bs-ancho { padding-left: calc(50% + clamp(20px, 2vw, 32px) / 2); } }
.mock__graf path:last-of-type { vector-effect: non-scaling-stroke; stroke-width: 2px; }

/* Pie en la misma grilla que el contacto, y una línea punteada que lo separa */
@media (min-width: 861px) {
  .bs .pie-sitio .wrap { grid-template-columns: repeat(4, 1fr); column-gap: clamp(20px, 2vw, 32px); }
  .bs .pie-sitio .wrap > div:first-child { grid-column: span 2; }
}
.bs .pie-sitio::before { content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 1px; color: rgba(255,255,255,.3); background-image: var(--punteado); background-size: 4px 1px; }

/* Contacto: la oficina pasa a la columna izquierda, que quedaba vacía junto al formulario, y acompaña al bajar */
@media (min-width: 861px) {
  #contacto .bs-grilla { grid-template-areas: "rotulo titulo" "oficina texto" "oficina form"; align-items: start; }
  #contacto .bs-col-izq, #contacto .bs-col-der { display: contents; }
  #contacto .bs-rotulo { grid-area: rotulo; }
  #contacto .bs-titulo { grid-area: titulo; }
  #contacto .bs-texto { grid-area: texto; }
  #contacto .bs-form { grid-area: form; }
  #contacto .bs-oficina { grid-area: oficina; margin-top: 0; position: sticky; top: 140px; align-self: start; }
}

/* Portal: la maqueta sin el brillo de "cargando", y la línea del gráfico se dibuja entera con su grosor fijo */
.bs-portal .mock__kpis b.esq { animation: none !important; }
.bs-portal .mock__graf path:last-of-type { stroke-dasharray: 2000; stroke-dashoffset: 2000; }

/* 19-oct-2026, auditoría técnica: teclado, lectura y lo que se anima fuera de pantalla */
.bs-papel a:focus-visible, .bs-papel button:focus-visible, .bs-papel input:focus-visible, .bs-papel select:focus-visible, .bs-papel textarea:focus-visible, .bs-papel [tabindex]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.bs .ctl input[type=range]:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
[data-encender] .pal-luz { opacity: calc(.4 + var(--luz, 0) * .6); }
.pausada, .pausada * { animation-play-state: paused !important; }

/* 19-oct-2026, recorrido como cliente */
/* Con el teléfono girado, el menú cerrado ya no asoma arriba */
@media (max-width: 1480px) { .bs .nav:not(.open) { visibility: hidden; } }
/* Tres áreas: los marcos de los videos con fondo oscuro, sin la línea clara mientras aparecen */
.bs-areas__medio { background: var(--noche); }
/* Mercado en celular: al abrir la tabla, la tarjeta no ensancha la página */
.card-graf { min-width: 0; }
/* Portal: el mapa de fondo se funde en los bordes, sin cortes duros */
.portal-visual img.globo { -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }