/* Poppins sustituye provisionalmente a MozaicGEO Variable, que es comercial
   (Mostardesign). Al llegar el archivo con licencia se cambian estos
   @font-face y no se toca nada más. */
@font-face { font-family: 'Geo'; font-weight: 200 300; font-display: swap; src: url('./fonts/Poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Geo'; font-weight: 400; font-display: swap; src: url('./fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Geo'; font-weight: 500; font-display: swap; src: url('./fonts/Poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Geo'; font-weight: 600; font-display: swap; src: url('./fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Geo'; font-weight: 700; font-display: swap; src: url('./fonts/Poppins-700.woff2') format('woff2'); }

:root {
  /* paleta medida del branding original */
  --azul:    #293D9B;
  --rojo:    #BF1B2C;
  --ambar:   #F9A72B;
  --naranja: #F1511B;
  --topo:    #967E72;
  --muro:    #8D8884;
  --tinta:   #110F0E;
  --gris:    #57534F;
  --geo: 'Geo', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;

  --eje: clamp(22px, 6vw, 96px);   /* el margen único de todo el sitio */

  /* Cinco tamaños, ni uno más. Antes había catorce y nueve caían en un
     rango de 9px, donde el ojo distingue tres. */
  --t-portada:  clamp(26px, 8.4vw, 104px);
  --t-display:  clamp(34px, 6.4vw, 82px);
  --t-titulo:   clamp(25px, 3.3vw, 44px);
  --t-sub:      clamp(18px, 1.8vw, 22px);
  --t-cuerpo:   clamp(15px, 1.2vw, 17px);
  --t-etiqueta: 11px;
  --desenfoque: 26px;              /* lo mueve el scroll */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--tinta);
  font-family: var(--geo); font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--ambar); color: var(--tinta); }

/* ---------- el logotipo ----------
   Barra a 1.17em, colgando 0.217em bajo la línea base: la proporción
   exacta del artwork original. */
.wordmark { font-weight: 500; letter-spacing: -0.005em; line-height: 1; }
.wordmark .barra {
  display: inline-block; width: 0.119em; height: 1.17em;
  background: currentColor; margin: 0 0.055em; vertical-align: -0.217em;
}

/* ---------- sistema de color: señalar, no rellenar ---------- */
.regla { height: 3px; width: 44px; margin: 0 auto 20px; }
.bloque, .razon, .paso, .dato { text-align: center; }
.punto {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 10px; vertical-align: 0.04em;
}
.c-azul { background: var(--azul); } .c-rojo { background: var(--rojo); }
.c-ambar { background: var(--ambar); } .c-naranja { background: var(--naranja); }
.c-topo { background: var(--topo); }
.t-azul { color: var(--azul); } .t-rojo { color: var(--rojo); }
.t-naranja { color: var(--naranja); } .t-topo { color: var(--topo); }

/* un solo título por sección, todos al mismo tamaño */
.titulo-seccion {
  font-weight: 300; font-size: var(--t-titulo);
  line-height: 1.2; letter-spacing: -0.022em;
  margin: 0 auto clamp(26px, 3.6vh, 44px); max-width: 24ch; text-align: center;
}
.cierre .titulo-seccion { max-width: none; }

/* el aire entre secciones: llegaba a 190px arriba y abajo, o sea 380px
   de nada entre el fin de una y el inicio de la siguiente */
section { padding: clamp(60px, 8.5vh, 112px) var(--eje); }
.medida { max-width: 1180px; margin: 0 auto; }
.estrecha { max-width: 760px; }

/* ============ 01 · PORTADA ============ */
.portada {
  position: relative; height: 80svh; min-height: 440px; max-height: 760px;
  /* a pantalla completa quedaba muchísimo gris muerto entre el logotipo
     y el descriptor, y no dejaba ver que había más abajo */
  padding: 0; overflow: hidden; background: var(--muro);
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  text-align: center; color: #fff;
}
/* la pared de galería: lienzos fuera de foco, colgados a distintas alturas.
   Son rectángulos porque una obra fuera de foco sigue siendo rectangular. */
.pared { position: absolute; inset: 0; }
.pared span {
  position: absolute; border-radius: 4px;
  filter: blur(var(--desenfoque));
  box-shadow: 0 12px 44px rgba(0,0,0,.22);
  will-change: filter;
}
.pared .a { background: var(--azul);    left:  3%; top: 17%; width: 19%; height: 62%; opacity: .95; }
.pared .b { background: var(--rojo);    left: 25%; top: 27%; width: 15%; height: 45%; opacity: .86; }
.pared .c { background: var(--ambar);   left: 43%; top: 11%; width: 17%; height: 74%; opacity: .93; }
.pared .d { background: var(--naranja); left: 63%; top: 29%; width: 14%; height: 42%; opacity: .82; }
.pared .e { background: var(--topo);    left: 79%; top: 19%; width: 17%; height: 58%; opacity: .74; }
.velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.34) 100%);
}
.portada > * { position: relative; z-index: 2; }
/* especificidad mayor: la regla de arriba pisaba el absolute del muro */
.portada .pared, .portada .velo { position: absolute; inset: 0; z-index: 0; }
.portada .velo { z-index: 1; }
.portada .cima { padding-top: clamp(28px, 4.5vh, 48px); }
.portada .wordmark { font-size: var(--t-titulo); }
.portada .descriptor {
  text-transform: uppercase; font-weight: 200;
  font-size: var(--t-portada);
  letter-spacing: 0.22em;
  margin: 0 0 clamp(22px, 4.5vh, 46px);
  line-height: 1;
}
/* Cada palabra es su propio bloque: el espaciado deja una cola tras la
   última letra, y text-indent solo compensa el PRIMER renglón de un
   bloque. En un solo bloque de dos renglones, ART quedaba corrido a la
   derecha y FINANCE no. Una línea por bloque compensa las dos igual. */
.portada .descriptor span { display: block; text-indent: 0.22em; }
.baja {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3; width: 1px; height: 46px; background: rgba(255,255,255,.5);
  animation: respira 2.6s ease-in-out infinite;
}
@keyframes respira { 0%,100% { opacity: .25; transform: translateX(-50%) scaleY(.6); } 50% { opacity: .9; transform: translateX(-50%) scaleY(1); } }

/* ============ 02 · LA PROPOSICIÓN ============ */
.proposicion { text-align: center; }
.proposicion h1 {
  font-weight: 300; margin: 0;
  font-size: var(--t-display);
  line-height: 1.16; letter-spacing: -0.028em;
}
.proposicion h1 span { display: block; }
/* tres ideas completas, una por renglón. Nada de frases partidas. */
.proposicion .bajada {
  font-size: var(--t-cuerpo); font-weight: 400;
  line-height: 1.78; color: var(--gris);
  max-width: 700px; margin: clamp(30px, 4.2vh, 52px) auto 0;
  text-wrap: balance;
}
.proposicion .bajada span { display: block; }
.proposicion .bajada span + span { margin-top: 1em; }

/* ============ 03 · QUÉ ES EL ART FINANCE ============ */
.oficio { background: var(--tinta); color: #fff; }
.oficio .titulo-seccion { color: #fff; }
/* cuatro elementos iguales en vez de dos columnas de masas distintas */
.bloques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: clamp(28px, 3vw, 44px);
}
.bloque .marca { height: 3px; width: 36px; margin: 0 auto 16px; }
.bloque .titulo {
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: var(--t-etiqueta); font-weight: 600; margin: 0 0 14px;
  color: rgba(255,255,255,.52);
}
.oficio p {
  font-size: var(--t-cuerpo); font-weight: 300;
  line-height: 1.82; margin: 0; color: rgba(255,255,255,.84);
  text-align: center;
}
.oficio strong { font-weight: 500; color: #fff; }
/* el nombre de la marca, siempre con más peso que el texto que lo rodea */
.marca { font-weight: 600; color: #fff; }

/* ============ 04 · LAS DOS PUERTAS ============ */
/* Al sitio llegan dos públicos y hasta aquí el texto es el mismo para los
   dos. De aquí en adelante no: cada quien entra por su lado. */
.bifurcacion { background: #F7F6F4; }
.puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 3vw, 46px); }
.puerta {
  display: block; text-align: center; text-decoration: none; color: inherit;
  padding: clamp(28px, 3.4vh, 40px) clamp(20px, 2.4vw, 34px);
  background: #fff; border: 1px solid #E8E5E1;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.puerta:hover { border-color: var(--topo); transform: translateY(-3px); }
.puerta h3 {
  font-weight: 500; font-size: var(--t-sub); line-height: 1.28;
  letter-spacing: -0.018em; margin: 0 0 12px;
}
.puerta p { font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.78; color: var(--gris); margin: 0 auto; max-width: 32ch; }
.puerta .entra {
  display: block; margin-top: 18px; font-size: var(--t-etiqueta);
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul);
}

/* ============ 05 · LO QUE CAMBIA ============ */
.razones { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(28px, 3vw, 46px); }
.razon h3 {
  font-weight: 500; font-size: var(--t-sub);
  line-height: 1.28; letter-spacing: -0.018em; margin: 0 0 12px;
}
.razon p { font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.78; color: var(--gris); margin: 0 auto; max-width: 34ch; }
.nota-rama {
  font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.82; text-align: center;
  color: var(--gris); max-width: 58ch; margin: clamp(28px, 3.6vh, 44px) auto 0;
}

/* ============ 06 · EL CAMINO ============ */
.camino { background: #F7F6F4; }
/* el camino se traza: una línea que crece y cuatro puntos que se encienden
   en orden. La metáfora de la sección, hecha con el gesto del scroll. */
.pasos { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(26px, 3vw, 42px); }
.via { display: none;
  position: absolute; left: 4px; right: 4px; top: 4px; height: 1px;
  background: #D9D4CE; transform: scaleX(0); transform-origin: left center;
  transition: transform 1.5s cubic-bezier(.2,.7,.2,1);
}
.via.dentro { transform: scaleX(1); }
.paso .punto { transform: scale(0); transition: transform .5s cubic-bezier(.2,1.3,.4,1); }
.paso.dentro .punto { transform: scale(1); }
.paso:nth-child(2) .punto { transition-delay: .30s; }
.paso:nth-child(3) .punto { transition-delay: .55s; }
.paso:nth-child(4) .punto { transition-delay: .80s; }
@media (max-width: 980px) { .via { display: none; } }
.paso .num {
  padding-top: 4px; font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: 0.2em;
  color: var(--topo); margin-bottom: 14px;
}
.paso h4 { font-weight: 500; font-size: var(--t-sub); line-height: 1.28; letter-spacing: -0.016em; margin: 0 0 10px; }
.paso p { font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.78; color: var(--gris); margin: 0; }

/* ============ 08 · LOS NÚMEROS ============ */
#numeros { background: #F7F6F4; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(24px, 2.6vw, 40px); }
.dato .cifra {
  font-weight: 300; font-size: var(--t-titulo);
  line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 10px;
}
.dato .que { font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.7; color: var(--gris); margin: 0; }
/* el criterio del comité es información, no letra chica: va al cuerpo */
.criterio {
  font-size: var(--t-cuerpo); font-weight: 400; line-height: 1.82; text-align: center;
  color: var(--tinta); margin: clamp(32px, 4.2vh, 52px) auto 0; max-width: 62ch;
}
/* el aviso legal vive en el pie, que es donde se busca */
footer .legal {
  font-size: var(--t-etiqueta); font-weight: 300; line-height: 1.9;
  letter-spacing: 0; text-transform: none; color: var(--topo);
  max-width: 74ch; margin: 22px auto 0;
}

/* ============ 09 · CIERRE ============ */
/* alternancia blanco · gris a lo largo de todo el sitio, para que cada
   sección se lea como propia. Con los números en gris, el cierre va blanco. */
.cierre { text-align: center; background: #fff; }
.cierre .titulo-seccion { color: var(--azul); margin-bottom: clamp(22px, 3vh, 34px); }
.cierre .contacto { font-size: var(--t-cuerpo); line-height: 2.1; color: var(--gris); }
.cierre .contacto a { color: var(--azul); text-decoration: none; border-bottom: 1px solid rgba(41,61,155,.3); }
.cierre .contacto a:hover { border-bottom-color: var(--azul); }
.salidas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 46px); margin-bottom: clamp(26px, 3.4vh, 38px);
}
.salida .quien {
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: var(--t-etiqueta); font-weight: 600; color: var(--topo); margin: 0 0 10px;
}
.salida .que {
  font-weight: 300; font-size: var(--t-sub); line-height: 1.32;
  letter-spacing: -0.018em; margin: 0; color: var(--azul);
}
.lema {
  font-weight: 400; font-size: var(--t-sub); line-height: 1.6;
  letter-spacing: -0.018em; margin: clamp(28px, 4vh, 48px) 0 0;
}
/* el logotipo dentro de la frase debe leerse como marca, no como texto */
.lema .wordmark { font-size: 1.2em; vertical-align: -0.035em; }
footer {
  padding: 34px var(--eje) 46px; text-align: center;
  border-top: 1px solid #E8E5E1;
}
footer .wordmark { font-size: var(--t-sub); color: var(--tinta); }
footer p {
  font-size: var(--t-etiqueta); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--topo); margin: 16px 0 0;
}

/* ---------- aparición al bajar ---------- */
.revela { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.revela.dentro { opacity: 1; transform: none; }
.pasos .revela { transition-delay: 0s !important; }
.revela:nth-child(2) { transition-delay: .08s; }
.revela:nth-child(3) { transition-delay: .16s; }
.revela:nth-child(4) { transition-delay: .24s; }
.revela:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .baja { animation: none; }
  .pared span { filter: blur(10px) !important; }
}

/* ============ LAS RAMAS ============
   Cada público tiene su página. La tarjeta de "Para quién es" se convierte
   en el encabezado de la rama: el título viaja de un lugar al otro. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.vt-galerias { view-transition-name: galerias; }
.vt-coleccionistas { view-transition-name: coleccionistas; }

/* la portada de la rama es la de la marca, solo menos alta, para que el
   desdoble asome antes del primer scroll */
.portada.rama { height: 58svh; min-height: 380px; max-height: 560px; }
.portada .cima a { color: inherit; text-decoration: none; }
.encabezado-rama { text-align: center; margin-bottom: clamp(44px, 6vh, 74px); }
.titulo-rama {
  font-weight: 300; font-size: var(--t-titulo);
  line-height: 1.2; letter-spacing: -0.022em; margin: 0;
}
/* el selector: se salta a la otra rama sin volver al inicio */
.cambia {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: clamp(22px, 3.4vh, 34px);
}
.cambia a {
  font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none; color: var(--gris);
  padding: 10px 16px; border: 1px solid #D9D4CE;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cambia a:hover { color: var(--tinta); border-color: var(--topo); }
.cambia a[aria-current="page"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* la salida a la otra rama, al final de cada página */
.otra-rama { text-align: center; padding-top: 0; }
.otra-rama a {
  display: inline-block; font-size: var(--t-etiqueta); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: var(--azul); border-bottom: 1px solid rgba(41,61,155,.3); padding-bottom: 4px;
}
.otra-rama a:hover { border-bottom-color: var(--azul); }
.otra-rama p { font-size: var(--t-cuerpo); color: var(--gris); margin: 0 0 14px; }
/* en las ramas se conserva la alternancia blanco · gris */
.en-rama #numeros { background: #fff; }
.en-rama .cierre, .en-rama .otra-rama { background: #F7F6F4; }
.en-rama .otra-rama { padding-bottom: clamp(60px, 8.5vh, 112px); }