/* ==========================================================================
   PROFIT7 — Atlas · tres escenas independientes

   Cada escena es una sección normal con su propio lienzo dentro. Nada va fijo
   a la pantalla y nada se transforma de una escena a otra: al entrar, sus
   partículas llegan flotando, arman su titular (y el mapa) y se quedan.

   Las escenas se dimensionan por SU CONTENIDO, no a 100svh. Forzar la altura
   del viewport era lo que dejaba medias pantallas vacías al hacer scroll.
   ========================================================================== */

.atlas{
	position:relative;
	z-index:2;
	/* El color NO es fijo: el JS escribe --atlas-bg y --atlas-ink segun el
	   avance del scroll, recorriendo negro -> carbon -> beige -> blanco calido.
	   La tinta se calcula desde la luminancia del fondo, asi que nunca queda
	   del mismo color que el. */
	background:var(--atlas-bg,#08080A);
	color:var(--atlas-ink,#F4F0E5);
	transition:background-color .18s linear;
	--atlas-gut:clamp(22px,5vw,110px);
	--atlas-beige:#B5A58E;
	--atlas-display:'Butler',Georgia,serif;
	--atlas-sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.atlas-anchor{position:absolute;top:0;left:0;width:1px;height:1px}

/* --------------------------------------------------------------------------
   La escena
   -------------------------------------------------------------------------- */
.atlas-scene{
	position:relative;
	--atlas-pad:clamp(72px,9vh,124px);
	padding:var(--atlas-pad) var(--atlas-gut);
	overflow:hidden;
	isolation:isolate;
}
.atlas-fx{
	position:absolute;inset:0;z-index:0;
	display:block;width:100%;height:100%;
	pointer-events:none;
}
.atlas-inner{position:relative;z-index:1}

/* El punto y el rótulo de Medellín los dibuja el LIENZO, y el mapa es una
   imagen dentro de .atlas-inner, que con z-index:1 quedaba por encima: al
   aparecer, el rótulo desaparecía debajo del mosaico.
   La escena aísla su apilado, así que basta con no crear contexto en el inner
   de esta escena y repartir: el mapa por debajo del lienzo, el texto por
   encima. Así Medellín se pinta sobre el mapa y el texto sigue sobre todo. */
.atlas-inner--world{z-index:auto}
.atlas-inner--world .atlas-map{position:relative;z-index:-1}
.atlas-inner--world > *:not(.atlas-map){position:relative;z-index:1}

/* Variables que lee el lienzo de cada escena. */
/* Ninguna escena lleva color propio: lo hereda de la rampa. Asi el cambio es
   continuo al hacer scroll en vez de un corte entre secciones. */
.atlas-scene{color:var(--atlas-ink,#F4F0E5)}
.atlas-scene--night{--fx-dot:2.3;--fx-alpha:1}

/* La escena 3 es BLANCA Y SE QUEDA BLANCA. Fondo y tinta fijos, sin depender
   de la rampa: atada al scroll siempre acababa quedandose a medio camino en
   alguna proporcion de pantalla. Aqui no hay nada que calcular. */
/* La escena 3 NO lleva fondo propio. El fondo de toda la seccion viaja con el
   scroll de negro a BLANCO PURO y llega a #FFFFFF antes de que la escena 3
   ocupe la pantalla. Al pintar una sola superficie no hay corte entre
   secciones: el cambio se lee como un amanecer continuo, no como dos bloques
   pegados con un degradado. La tinta se recalcula desde la luminancia. */
/* El planisferio NO acaba en negro: sobre el blanco quedaba duro y sucio.
   --fx-ink-end es el color al que llegan SUS PARTÍCULAS al final de la rampa;
   el texto y la etiqueta MEDELLÍN siguen yendo a la tinta plena. */
.atlas-scene--day{--fx-dot:2.7;--fx-alpha:1;--fx-ink-end:126,120,108}

/* --------------------------------------------------------------------------
   Tipografía — escala editorial
   -------------------------------------------------------------------------- */
.atlas-statement{
	margin:0;
	max-width:min(100%,16ch);
	font-family:var(--atlas-display);
	font-weight:300;
	font-size:clamp(2.4rem,6.6vw,7.6rem);
	line-height:1.05;letter-spacing:-.024em;
	/* Visible por sí mismo. Antes era opacity:var(--rs,0): arrancaba invisible
	   y lo revelaba atlas.js al terminar de armarlo con partículas
	   (data-build). Al pasar estos titulares al efecto común ya nadie escribe
	   --rs, así que se quedaban en opacidad 0 para siempre. Un título no puede
	   depender de un script para verse. */
	opacity:1;
}
.atlas-head{
	margin:0;
	font-family:var(--atlas-display);
	font-weight:300;
	font-size:clamp(2.1rem,4.8vw,5.2rem);
	line-height:1.06;letter-spacing:-.022em;
	opacity:1; /* mismo motivo que .atlas-statement */
}
.atlas-support{
	margin:clamp(28px,3.4vw,52px) 0 0;
	max-width:44ch;
	font-family:var(--atlas-sans);
	font-weight:300;
	font-size:clamp(17px,1.66vw,28px);
	line-height:1.56;
	color:var(--atlas-ink-soft,rgba(244,240,229,.76));
	text-wrap:pretty;
}

/* Las tres cifras que cierran la declaración. No son métricas de resultado
   —eso el sitio no lo promete—: son la estructura del propio ProFit7, y por
   eso van sin signos ni unidades, sólo el número y lo que nombra.

   En recuadro y no sueltas: tres números en fila, sin nada que los contenga,
   se leían como el final del párrafo en vez de como un bloque aparte. La
   retícula de tres columnas iguales es la que los reparte; el filete es el
   mismo hilo fino que usa el resto de la marca. */
.atlas-cifras{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(9px,1.1vw,16px);
	margin:clamp(34px,4vw,58px) 0 0;
	padding:0;
	list-style:none;
	/* El mismo ancho que la bajada: las dos cosas cierran en la misma línea. */
	max-width:44ch;
}
.atlas-cifras li{
	display:flex;
	flex-direction:column;
	gap:clamp(8px,1vw,14px);
	padding:clamp(15px,1.6vw,22px) clamp(13px,1.4vw,20px);
	border:1px solid rgba(181,165,142,.26);
	border-radius:2px;
	background:rgba(181,165,142,.05);
}
.atlas-cifras__n{
	font-family:var(--atlas-display);
	font-weight:300;
	font-size:clamp(2.2rem,3.6vw,3.6rem);
	line-height:.86;
	letter-spacing:-.02em;
	color:var(--atlas-beige);
}
.atlas-cifras__r{
	/* Pegado abajo: con recuadros de la misma altura, los tres rótulos
	   arrancan en la misma línea aunque uno ocupe dos renglones. */
	margin-top:auto;
	font-family:var(--atlas-sans);
	font-weight:300;
	font-size:clamp(10.5px,.74vw,12px);
	letter-spacing:.2em;
	text-transform:uppercase;
	/* Sigue la rampa de color del scroll, como el resto de la escena. */
	color:var(--atlas-ink-soft,rgba(244,240,229,.76));
	line-height:1.5;
}
.atlas-body{
	margin:clamp(24px,2.8vw,40px) 0 0;
	max-width:40ch;
	font-family:var(--atlas-sans);
	font-weight:300;
	font-size:clamp(16.5px,1.44vw,24px);
	line-height:1.6;
	color:var(--atlas-ink-soft,rgba(244,240,229,.76));
	text-wrap:pretty;
}
.atlas-rule{
	display:block;
	width:clamp(56px,6vw,120px);height:1px;
	margin-top:clamp(22px,2.6vw,36px);
	background:linear-gradient(90deg,var(--atlas-beige),transparent);
	transform-origin:0 50%;
}
.atlas-facts{
	list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;
	display:flex;flex-wrap:wrap;
	border-top:1px solid currentColor;
	color:var(--atlas-ink-soft,rgba(244,240,229,.76));
}
.atlas-facts li{
	flex:1 1 0;min-width:0;
	padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,24px) 0 0;
	font-family:var(--atlas-sans);
	font-size:clamp(10.5px,.86vw,14px);
	font-weight:400;letter-spacing:.14em;text-transform:uppercase;
	line-height:1.5;
}
.atlas-facts li + li{
	padding-left:clamp(14px,1.6vw,24px);
	border-left:1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Escena 1 · la célula con lupa
   Dos renders IDÉNTICOS del mismo corte de célula —uno en blanco y negro,
   otro a color— superpuestos en el mismo sitio. El de color sólo se ve
   dentro de un círculo que sigue al ratón (atlas-cell.js escribe --lx/--ly
   en px, relativos a este contenedor). Fuera de la lupa, sólo el blanco y
   negro. En móvil no hay ratón que la mueva, así que no se muestra.
   -------------------------------------------------------------------------- */
.atlas-cell{display:none}
@media (min-width:1025px){
	/* Grid de dos columnas —texto y célula—, no la célula flotando encima
	   del texto: con el titular más ancho (27ch) las dos cosas se pisaban
	   si la célula sólo se superponía por la derecha. */
	.atlas-inner--stat{
		display:grid;
		/* Columna de la célula bastante más ancha (286-396px -> 380-560px):
		   se veía pequeña y pegada al borde. El radio de la lupa (--lens-r)
		   NO cambia: el efecto pedido es el mismo, sólo el objeto es mayor. */
		grid-template-columns:minmax(0,1fr) minmax(380px,560px);
		align-items:center;
		gap:clamp(24px,4vw,72px);
	}
	.atlas-cell{
		display:block;
		position:relative;width:100%;aspect-ratio:1/1;
		/* Centrada en su columna y no pegada al borde derecho: quedaba
		   demasiado al extremo, lejos del texto con el que dialoga. El margen
		   negativo la corre hacia el titular sin estrechar la columna. */
		justify-self:center;
		margin-right:clamp(0px,3vw,58px);
		/* Arranca fuera de cuadro: sin esto, el círculo nacía centrado y la
		   célula se veía a color desde que cargaba la página, antes de que
		   nadie tocara el ratón. atlas-cell.js lo mueve en cuanto hay
		   movimiento real; hasta entonces sólo se ve blanco y negro. */
		--lx:-9999px;--ly:-9999px;--lens-r:50px;
	}
	.atlas-cell-base,.atlas-cell-lens img{
		display:block;width:100%;height:100%;object-fit:contain;
	}
	.atlas-cell-base{opacity:.9}
	.atlas-cell-lens{
		position:absolute;inset:0;
		/* circle() con % en el radio se calcula sobre la diagonal de la caja,
		   no sobre el ancho — por eso el radio de la lupa se fija en px
		   (--lens-r) y no en porcentaje. */
		clip-path:circle(var(--lens-r) at var(--lx) var(--ly));
		filter:drop-shadow(0 0 24px rgba(0,0,0,.6));
	}
}

/* --------------------------------------------------------------------------
   Escena 2 · la ampolla y «Quiénes somos»
   -------------------------------------------------------------------------- */
.atlas-shot{margin:0;overflow:hidden;background:rgba(20,19,15,.2)}
.atlas-shot img{
	display:block;width:100%;height:100%;object-fit:cover;
	/* Desaturada hacia la paleta, para no gritar sobre el negro. */
	filter:saturate(.66) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Escena 3 · el mundo. .atlas-map sólo RESERVA el sitio; atlas.js posiciona
   .atlas-map-img en px, pixel a pixel, sobre el rectángulo exacto contra el
   que ya están calibradas Medellín y las rutas de llegada (el lienzo sigue
   dibujando esas dos cosas encima, en la misma caja).
   -------------------------------------------------------------------------- */
.atlas-map{width:100%;min-height:0;position:relative}
.atlas-map-img{
	position:absolute;
	/* left/top/width/height los escribe atlas.js en cada measure(). La
	   opacidad también la escribe JS, cuadro a cuadro (cruza con las
	   partículas que arman el mapa, igual que el titular cruza a
	   tipografía real) — 0 aquí es sólo el estado antes de que corra el
	   primer fotograma. */
	object-fit:contain;
	pointer-events:none;
	/* Visible por CSS. Antes arrancaba en opacity:0 y la subía atlas.js al
	   terminar de armarla con partículas; ese sistema se retiró para que el
	   mapa use el mismo efecto de entrada que los títulos, y sin nadie que
	   escribiera la opacidad el mapa se quedaba invisible. Ningún contenido
	   puede depender de un script para verse. */
	opacity:.92;
}

/* --------------------------------------------------------------------------
   Revelado del contenido que no arman las partículas
   -------------------------------------------------------------------------- */
.atlas-scene [data-rv]{
	opacity:var(--rv,0);
	transform:translate3d(0,calc((1 - var(--rv,0)) * 26px),0);
}
.atlas-scene .atlas-rule[data-rv]{transform:scaleX(var(--rv,0))}

/* --------------------------------------------------------------------------
   DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width:1025px){
	/* El titular de la escena 1 a tamaño completo (hasta 7.6rem, caja de
	   16ch) envolvía en 6-7 líneas — la escena entera superaba el alto de
	   una pantalla de escritorio y quedaba "partida en dos" al hacer scroll
	   dentro de sí misma. Con menos tamaño y una caja más ancha envuelve en
	   3-4 líneas y la escena cabe completa en una sola pantalla. */
	.atlas-statement{
		font-size:clamp(2.4rem,4.4vw,4.8rem);
		max-width:min(100%,27ch);
	}

	/* La imagen y el texto comparten la misma caja: mismo borde superior e
	   inferior (align-items:stretch) y el mismo hueco a los lados que el
	   resto de la escena — ya no es un sangrado a pantalla completa. Antes
	   la foto ignoraba el padding con un margen negativo; con la imagen de
	   consultorio (más ancha, un ambiente completo) eso la hacía chocar con
	   el borde de la pantalla sin ningún respiro. */
	.atlas-inner--who{
		display:grid;
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		gap:clamp(32px,4.5vw,72px);
		/* Sin min-height: antes forzaba la fila a 600px aunque el párrafo
		   fuera mucho más corto, y la imagen (estirada a esa altura) acababa
		   bastante más alta que el bloque de texto visible — "no comparten
		   la misma dimensión". Ahora la fila mide lo que el texto pida y la
		   imagen se recorta (object-fit:cover) exactamente a esa altura. */
		align-items:stretch;
	}
	.atlas-shot{height:auto;align-self:stretch;min-height:0}
	.atlas-inner--who .atlas-body{max-width:38ch}

	.atlas-inner--world{
		display:grid;
		/* De vuelta a la proporción original (1.6/.55 le quitaba demasiado
		   sitio al texto y lo desbordaba). El mapa ahora crece pegándose al
		   borde izquierdo de su columna (ver measure() en atlas.js), no
		   ensanchando la columna misma. */
		grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
		gap:clamp(40px,4.5vw,96px);
		align-items:center;
	}
	.atlas-map{height:min(74vh,760px)}
	.atlas-inner--world .atlas-body{max-width:34ch}
}

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */
@media (min-width:641px) and (max-width:1024px){
	.atlas-inner--who{
		display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
		gap:clamp(30px,4vw,60px);align-items:center;
	}
	.atlas-shot{height:min(40vh,360px)}
	.atlas-map{height:min(42vh,400px);margin-bottom:clamp(30px,5vh,56px)}
}

/* --------------------------------------------------------------------------
   MÓVIL · pila. El cuerpo nunca baja de 16,5 px.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
	.atlas-scene{padding:clamp(64px,8.5vh,104px) var(--atlas-gut)}
	.atlas-statement{font-size:clamp(2.05rem,9.6vw,3rem);max-width:100%}
	.atlas-head{font-size:clamp(2rem,9vw,2.7rem)}
	.atlas-support{font-size:17px;max-width:100%}
	.atlas-cifras{gap:8px;max-width:100%}
	.atlas-cifras li{padding:13px 11px}
	.atlas-cifras__n{font-size:clamp(1.8rem,8vw,2.4rem)}
	.atlas-cifras__r{font-size:10px;letter-spacing:.16em}
	.atlas-body{font-size:16.5px;max-width:100%}

	.atlas-shot{height:clamp(170px,26vh,260px);margin-bottom:clamp(24px,4vh,40px)}
	/* El planisferio se recorta para que la escena 3 quepa ENTERA en una
	   pantalla de movil: partida en dos, el titular y el mapa nunca se ven
	   juntos y la escena deja de leerse como una sola cosa. */
	.atlas-map{height:clamp(186px,25vh,250px);margin-bottom:clamp(20px,3vh,34px)}

	.atlas-facts{flex-direction:column;width:100%;margin-top:clamp(22px,3vh,34px)}
	.atlas-facts li{padding:9px 0;font-size:11px;letter-spacing:.12em}
	.atlas-facts li + li{padding-left:0;border-left:0;border-top:1px solid currentColor}
}

/* Sin alto: la imagen estorba más de lo que aporta. */
@media (max-width:900px) and (max-height:560px){
	.atlas-shot{display:none}
}

/* --------------------------------------------------------------------------
   Sin movimiento: todo armado y quieto.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.atlas-scene [data-rv]{opacity:1;transform:none}
	.atlas-scene .atlas-rule[data-rv]{transform:scaleX(1)}
	.atlas-statement,.atlas-head{opacity:1}
}