/* Terra Oil — hoja unica del tema.
 *
 * Reescrita de cero el 2026-09-29 midiendo WEB1.psd, el diseno del cliente a
 * 1920 px. Cada medida es el valor del PSD expresado en vw (1vw = 19,2px a
 * 1920) con un clamp: el tope es el del diseno, asi que a 1920 el sitio lo
 * reproduce, y el piso es lo minimo legible en celular.
 *
 * El diseno usa DOS tipografias:
 *   - Ardela Edge X01/X02 para todo lo que es titulo, volanta, numero, rotulo,
 *     metrica y contacto. Es comercial y NO llego con el material: mientras
 *     tanto la pila cae en Sora, la unica de Google Fonts con su ancho.
 *     Cuando llegue el archivo, va en assets/fonts y se destapa el @font-face
 *     de abajo; no hay que tocar ninguna regla.
 *   - Helvetica Now Display para todos los textos corridos. Esta en
 *     assets/fonts, viene del paquete de marca de LUFT (es de Monotype: hay
 *     que confirmar licencia web antes de publicar).
 */

/* ---------- tipografias ---------- */
@font-face { font-family: 'Helvetica Now Display'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/helvetica-now-display-light.woff2') format('woff2'); }
@font-face { font-family: 'Helvetica Now Display'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/helvetica-now-display-regular.woff2') format('woff2'); }
@font-face { font-family: 'Helvetica Now Display'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/helvetica-now-display-medium.woff2') format('woff2'); }
@font-face { font-family: 'Helvetica Now Display'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/helvetica-now-display-bold.woff2') format('woff2'); }

/* Ardela Edge: destapar cuando lleguen los archivos, con estos nombres.
@font-face { font-family: 'Ardela Edge'; font-weight: 300; src: url('../fonts/ardela-edge-x01-light.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ardela Edge'; font-weight: 400; src: url('../fonts/ardela-edge-x01-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ardela Edge'; font-weight: 500; src: url('../fonts/ardela-edge-x01-medium.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ardela Edge'; font-weight: 600; src: url('../fonts/ardela-edge-x01-semibold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ardela Edge'; font-weight: 700; src: url('../fonts/ardela-edge-x01-bold.woff2') format('woff2'); font-display: swap; }
*/

:root {
  /* Colores muestreados del PSD, no estimados. */
  --navy:       #040d1b;   /* hero, about, contexto */
  --navy-hondo: #010914;   /* cierre del activo y metricas */
  --navy-mid:   #122742;   /* al que abre el degrade de The strategy */
  --lime:       #91a037;   /* verde de marca */
  --forest:     #021905;   /* el pie */
  --paper:      #e9ebea;   /* secciones claras */
  --card:       #1a2129;   /* tarjetas sobre oscuro */
  --card-clara: #ebebeb;   /* tarjetas sobre claro: casi el fondo, las separa el borde */
  --tab:        #0c131d;   /* la pastilla del logo en el header */
  --ink:        #16202b;
  --ink-soft:   #55606b;
  --cream:      #eef1f3;
  --cream-dim:  rgba(238, 241, 243, .78);

  --display: 'Ardela Edge', 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --texto:   'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;

  /* El contenido va de x=150 a x=1770 sobre 1920: 84,4%. */
  --wrap: 1620px;

  /* Escala medida capa por capa. px @1920 → vw. */
  --fs-nav:        clamp(11px,  .83vw, 16px);
  --fs-volanta:    clamp(12px, 1.76vw, 34px);
  --fs-titulo:     clamp(28px, 3.96vw, 76px);
  --fs-hero-sub:   clamp(15px, 1.82vw, 35px);
  --fs-cuerpo:     clamp(14px, 1.35vw, 26px);
  --fs-badge:      clamp(17px, 2.86vw, 55px);
  --fs-num:        clamp(24px, 3.28vw, 63px);
  --fs-item:       clamp(16px, 1.98vw, 38px);
  --fs-item-txt:   clamp(13px, 1.61vw, 31px);
  --fs-cita:       clamp(15px, 1.77vw, 34px);
  --fs-activo-txt: clamp(15px, 1.72vw, 33px);
  --fs-pastilla:   clamp(15px, 2.05vw, 39px);   /* 43 en el PSD; Sora es mas ancha que Ardela y a 43 la segunda linea no entra */
  --fs-etiqueta:   clamp(11px, 1.56vw, 30px);
  --fs-cierre:     clamp(15px, 2.07vw, 40px);
  --fs-dato:       clamp(18px, 2.96vw, 57px);
  --fs-nombre:     clamp(22px, 2.86vw, 55px);
  --fs-rol:        clamp(12px, 1.86vw, 36px);
  --fs-bio:        clamp(14px, 1.82vw, 35px);
  --fs-partner:    clamp(13px, 1.43vw, 27px);
  --fs-pie:        clamp(20px, 2.70vw, 52px);
  --fs-pie-txt:    clamp(12px, 1.55vw, 30px);

  --radio: clamp(10px, 1.1vw, 22px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--texto);
  font-weight: 300;
  font-size: var(--fs-cuerpo);
  line-height: 1.32;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: min(84.4%, var(--wrap)); margin-inline: auto; }
.hl { color: var(--lime); }

/* Todo lo que en el PSD va en Ardela Edge. */
.site-nav a, .sec-kicker, .sec-title, .hero-title, .badge, .principio-num, .principio h3,
.cita figcaption, .activo-pastilla, .concesion-nombre, .metricas-titulo, .metrica dt, .metrica dd,
.persona-head h3, .persona-rol, .persona-estudios, .partner-nombre,
.foot-claim, .foot-contacto, .foot-luft-claim, .foot-luft-sitio, .logo-texto {
  font-family: var(--display);
}

/* ---------- header ---------- */
/* Absoluto sobre el hero. La pastilla oscura del logo mide 327x189 a 1920 y
   cuelga desde el tope, por encima de la barra. */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 clamp(20px, 7.8vw, 150px) 0 clamp(20px, 4.7vw, 91px);
}
.site-logo {
  display: flex; align-items: center; justify-content: center;
  width: clamp(132px, 17vw, 327px);
  height: clamp(76px, 9.8vw, 189px);
  background: var(--tab);
  border-radius: 0 0 clamp(14px, 1.7vw, 32px) clamp(14px, 1.7vw, 32px);
  text-decoration: none;
}
.site-logo img { width: clamp(82px, 10.6vw, 204px); }
.logo-texto {
  color: var(--lime); font-weight: 700; font-size: clamp(18px, 2vw, 40px);
  line-height: 1; text-transform: uppercase; text-align: center;
}
.site-nav ul { display: flex; gap: clamp(20px, 3.1vw, 60px); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block;
  padding-top: clamp(16px, 2.1vw, 40px);
  font-size: var(--fs-nav); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: #fff; opacity: .92;
}
.site-nav a:hover { opacity: 1; color: var(--lime); }
.menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; margin-top: 18px; }

/* ---------- hero ---------- */
/* 1182px de alto a 1920: 61,6vw. El texto cae sobre la parte oscura del
   planeta; el velo es solo un respaldo para pantallas donde la foto se corre. */
.hero {
  position: relative;
  height: clamp(560px, 61.6vw, 1182px);
  display: flex; align-items: flex-start;
  background: var(--navy) right center / cover no-repeat;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,.15) 40%, rgba(4,13,27,0) 65%);
}
.hero-inner { position: relative; z-index: 1; width: min(84.4%, var(--wrap)); margin-inline: auto; padding-top: clamp(150px, 23vw, 443px); }
.hero-title {
  font-size: var(--fs-titulo); font-weight: 500; line-height: 1.02; letter-spacing: -.005em;
  text-transform: uppercase; color: #fff; margin: 0; max-width: 16ch;
}
.hero-sub {
  margin: clamp(22px, 3.1vw, 60px) 0 0;
  font-size: var(--fs-hero-sub); font-weight: 300; line-height: 1.22; color: #fff; max-width: 38ch;
}

/* ---------- secciones: base ---------- */
.sec { position: relative; }
.sec-oscura { background: var(--navy); }
.sec-clara { background: var(--paper); color: var(--ink); }

.sec-kicker {
  font-size: var(--fs-volanta); font-weight: 400; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; margin: 0 0 clamp(20px, 2.6vw, 50px);
}
.sec-clara .sec-kicker { color: var(--ink); }
.sec-title {
  font-size: var(--fs-titulo); font-weight: 500; line-height: 1.03; letter-spacing: -.005em;
  text-transform: uppercase; margin: 0; max-width: 20ch; text-wrap: balance;
}
.sec-title .hl { color: var(--lime); }
.sec-clara .sec-title .hl { color: #4f6a22; }   /* el verde sobre claro es mas oscuro en el PSD */

.entrada { font-size: var(--fs-cuerpo); line-height: 1.32; color: var(--lime); max-width: 52ch; margin: 0; }
.chico   { font-size: var(--fs-cuerpo); line-height: 1.32; color: var(--cream-dim); max-width: 44ch; margin: 0; }
.sec-clara .chico { color: var(--ink); }

.cols-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4.5vw, 86px);
  font-size: var(--fs-cuerpo); line-height: 1.32; color: var(--cream);
}
.cols-2 p { margin: 0; max-width: 42ch; }
.cols-2 strong { color: var(--lime); font-weight: 500; }
.cols-2 b { color: #fff; font-weight: 500; }

/* ---------- 01 about ---------- */
/* 916px de alto. El fondo trae los arcos concentricos del PSD. La foto, de
   617x429, arranca a 103px del tope y a x=1139: la columna derecha. */
#about {
  background: var(--navy) url('../seed/about-fondo-arcos.jpg') center top / cover no-repeat;
  padding: clamp(50px, 6vw, 115px) 0 clamp(44px, 5.2vw, 100px);
}
.about-top {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 32.1vw, 617px);
  column-gap: clamp(24px, 4.5vw, 86px); align-items: start;
}
.about-texto .sec-title { margin-bottom: clamp(24px, 3.4vw, 66px); }
/* En el PSD la foto arranca 12px por encima de la volanta; en el flujo queda 83
   por debajo, asi que sube 95. */
.about-foto { margin: calc(-1 * clamp(40px, 4.95vw, 95px)) 0 0; border-radius: var(--radio); overflow: hidden; }
.about-foto img { width: 100%; aspect-ratio: 617 / 429; object-fit: cover; }
#about .cols-2 { margin-top: clamp(28px, 3.5vw, 68px); }

/* ---------- 02 strategy ---------- */
/* 1451px de alto, degrade de navy a azul. Las tarjetas miden lo que mide su
   texto (528, 573 y 487 en la primera fila) y las dos de abajo van centradas. */
#strategy {
  /* El resplandor verde vive detras de las tarjetas (en el PSD el hueco entre
     ellas es #3d5f3e) y se apaga hacia los bordes, que siguen en navy. */
  background:
    radial-gradient(ellipse 34% 42% at 50% 62%, rgba(95, 140, 55, .72), rgba(95, 140, 55, .25) 45%, transparent 72%),
    linear-gradient(180deg, var(--navy) 0%, #0b1d36 55%, var(--navy-mid) 100%);
  padding: clamp(60px, 7.2vw, 138px) 0 clamp(90px, 12.2vw, 234px);
}
.badge {
  display: table; margin: clamp(40px, 5.6vw, 108px) auto clamp(30px, 4.3vw, 83px);
  background: var(--lime); color: #17210a;
  font-size: var(--fs-badge); font-weight: 500; letter-spacing: .01em; text-transform: uppercase;
  line-height: 1; padding: .3em .7em; border-radius: 6px;
}
.principios {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, .9vw, 17px);
  list-style: none; margin: 0; padding: 0;
}
.principio {
  flex: 1 1 clamp(200px, 25vw, 480px);
  max-width: clamp(260px, 30vw, 573px);
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(12px, 1.2vw, 24px); align-content: start;
  background: #030d17; border: 1px solid rgba(238,241,243,.06);
  border-radius: clamp(8px, .8vw, 16px);
  padding: clamp(20px, 2.5vw, 48px) clamp(18px, 2.1vw, 40px) clamp(22px, 2.4vw, 46px);
  min-height: clamp(150px, 15.6vw, 299px);
}
.principio-num { grid-row: 1; color: var(--lime); font-size: var(--fs-num); font-weight: 500; line-height: .9; }
.principio h3 {
  grid-row: 1; margin: 0; color: #fff;
  font-size: var(--fs-item); font-weight: 400; line-height: 1.08; text-transform: uppercase; letter-spacing: .005em;
}
.principio p { grid-column: 2; margin: clamp(10px, 1.1vw, 22px) 0 0; font-size: var(--fs-item-txt); line-height: 1.28; color: var(--cream); }

/* ---------- 03 context ---------- */
#context { background: var(--navy); padding: clamp(46px, 5.3vw, 102px) 0 clamp(70px, 9vw, 172px); }
#context .sec-title { max-width: 28ch; }
#context .chico { margin-top: clamp(24px, 3.3vw, 64px); max-width: 36ch; color: #fff; }

/* La foto de la valvula va a sangre, 766px de alto (40vw), y la cita se le
   monta al pie saliendo 203px por debajo. */
.cita-foto {
  position: relative;
  margin-top: clamp(30px, 3.8vw, 74px);
  height: clamp(300px, 39.9vw, 766px);
  background: var(--navy) center / cover no-repeat;
}
.cita {
  position: absolute;
  left: 19.3%; width: 63%;
  bottom: calc(-1 * clamp(80px, 10.6vw, 203px));
  margin: 0;
  background: var(--lime); color: #17210a;
  border-radius: clamp(8px, .8vw, 16px);
  padding: clamp(24px, 3vw, 57px) clamp(24px, 2.9vw, 55px) clamp(18px, 1.7vw, 32px);
}
.cita::before {
  content: "\201C"; position: absolute;
  left: clamp(18px, 2.4vw, 47px); top: calc(-1 * clamp(8px, .8vw, 15px));
  font-family: var(--display); font-size: clamp(60px, 8.2vw, 157px); font-weight: 500; line-height: 1; color: #17210a;
}
.cita blockquote { margin: 0; font-size: var(--fs-cita); font-weight: 400; line-height: 1.32; }
.cita figcaption {
  display: inline-block; margin-top: clamp(14px, 1.5vw, 28px);
  background: var(--navy-mid); color: #fff;
  font-size: var(--fs-cita); font-weight: 400; padding: .35em 1.35em; border-radius: 6px;
}
#context::after { content: ""; display: block; height: clamp(80px, 10.6vw, 203px); }

/* ---------- el activo ---------- */
/* Cabecera sobre claro; tres franjas de foto a sangre; cierre y metricas sobre
   el navy mas hondo. La geometria es la del PSD, medida:
   - cada franja es una ELIPSE navy de 3489x1103 (rx 1744, ry 551; 94px de
     flecha en el borde de la pagina) que monta sobre lo anterior;
   - la foto va adentro, 16px mas abajo, recortada con otra elipse del mismo
     ancho pero de ry 800: en el centro deja un reborde navy de 16px y en los
     costados de 54. Es el borde oscuro que se ve en el diseño, no un error;
   - la pastilla verde queda DEBAJO de la franja: asoma 172px por encima del
     arco y el resto lo tapa la foto.
   Las elipses van en clip-path y no en border-radius: con border-radius el
   arco era otro y hacia falta un border-top que en algunos navegadores se
   pintaba como una banda. Los `min()` congelan la curva en 1920, igual que
   los clamp de las medidas. */
.activo {
  --arco: clamp(30px, 4.9vw, 94px);            /* flecha del arco en el borde */
  --paso: clamp(240px, 34.5vw, 662px);         /* distancia entre arco y arco */
  --arco-rx: min(90.86vw, 1744px);
  --arco-ry: min(28.72vw, 551px);
  --foto-ry: min(41.67vw, 800px);
  --foto-top: clamp(5px, .83vw, 16px);
  background: var(--navy-hondo);
}
.activo-cabeza { background: var(--paper); color: var(--ink); padding: clamp(50px, 6.1vw, 118px) 0 0; }
.activo-top {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4.5vw, 86px); align-items: end;
}
.activo-top .sec-title { max-width: 18ch; }
.activo-top .chico { font-size: var(--fs-activo-txt); max-width: 30ch; padding-bottom: .4em; }
/* 729px de ancho a 1920. Texto de 74px con 40 arriba y 58 hasta el arco; el
   padding de abajo suma la flecha del arco, que es lo que queda escondido. */
.activo-pastilla {
  display: block; margin: clamp(34px, 4.4vw, 84px) auto 0;
  width: clamp(240px, 38vw, 729px);
  background: var(--lime); color: #17210a;
  font-family: var(--display); font-size: var(--fs-pastilla); font-weight: 500; line-height: 1.1;
  text-transform: uppercase; text-align: center;
  padding: clamp(14px, 2.08vw, 40px) clamp(16px, 1.9vw, 36px) calc(clamp(20px, 3vw, 58px) + var(--arco));
  border-radius: clamp(8px, .8vw, 16px) clamp(8px, .8vw, 16px) 0 0;
  position: relative;
}

.concesiones { background: var(--paper); }
.concesion {
  position: relative; z-index: 1;
  height: calc(var(--paso) + var(--arco));
  margin-top: calc(-1 * var(--arco));
  padding-bottom: var(--arco);
  background: var(--navy-hondo);
  clip-path: ellipse(var(--arco-rx) var(--arco-ry) at 50% var(--arco-ry));
  display: flex; align-items: center; justify-content: center;
}
.concesion-foto {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--foto-top);
  background: center top / 100% auto no-repeat;
  clip-path: ellipse(var(--arco-rx) var(--foto-ry) at 50% var(--foto-ry));
}
.concesion-nombre {
  position: relative;
  background: rgba(1, 8, 20, .86); color: var(--lime);
  font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.15; text-align: center;
  padding: clamp(8px, .9vw, 18px) clamp(16px, 1.8vw, 34px);
  border-radius: clamp(5px, .5vw, 10px);
}

/* El cierre no se recorta a si mismo: la elipse mide 2*ry de alto y la seccion
   puede ser mas alta (en celular, mucho mas), y el clip le comeria el pie con
   las metricas. El arco lo dibuja un ::before del alto justo de la elipse, y
   el fondo de la seccion arranca en ry, donde la elipse ya ocupa todo el ancho. */
.activo-cierre {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--arco));
  padding-top: clamp(40px, 4.7vw, 90px);
  background: linear-gradient(var(--navy-hondo), var(--navy-hondo)) 0 var(--arco-ry) / 100% calc(100% - var(--arco-ry)) no-repeat;
}
.activo-cierre::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: calc(2 * var(--arco-ry));
  background: var(--navy-hondo);
  clip-path: ellipse(var(--arco-rx) var(--arco-ry) at 50% var(--arco-ry));
}
.cierre { margin: 0 auto; max-width: 30ch; text-align: center; font-size: var(--fs-cierre); font-weight: 300; line-height: 1.25; color: #fff; }
.metricas { padding: clamp(36px, 4.6vw, 88px) 20px clamp(90px, 11.5vw, 220px); text-align: center; }
.metricas-titulo { margin: 0 0 clamp(16px, 1.7vw, 32px); color: #fff; font-size: var(--fs-dato); font-weight: 500; text-transform: uppercase; }
.metricas dl { margin: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 24px); align-items: center; }
.metrica dt { font-size: var(--fs-dato); font-weight: 500; text-transform: uppercase; color: var(--lime); line-height: 1.1; }
.metrica dd { margin: 0; font-size: calc(var(--fs-dato) * .55); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: var(--lime); }

/* ---------- 04 team ---------- */
/* Seccion clara con el resplandor verde arriba a la derecha y el borde de
   arriba en curva convexa, montada sobre el cierre del activo. */
/* En el PSD la seccion entera es una ELIPSE de 3713x2007 (rx 1856), gris
   #e6e6e6 con un filete oliva de 1px, montada sobre el navy del activo. Su
   borde de abajo es la curva que se ve entre Team y Partners, y por los
   costados asoma el fondo de Partners. Se dibuja con un ::before del ancho de
   la elipse y border-radius 50%: asi ry es siempre la mitad del alto real de
   la seccion y la curva escala con el contenido. */
#team {
  --team-rx2: 193.4vw;
  background: none;
  margin-top: calc(-1 * clamp(60px, 9.4vw, 180px));
  padding: clamp(80px, 11.3vw, 216px) 0 clamp(60px, 7.3vw, 140px);
  position: relative; z-index: 1;
}
#team::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: var(--team-rx2);
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid #8da117;
  background:
    radial-gradient(ellipse 17.6% 28% at 64.5% 8%, rgba(100, 150, 40, .32), transparent 70%),
    #e6e6e6;
}
#team .sec-title { max-width: 17ch; }
.team-cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(24px, 4.5vw, 86px); align-items: end; }
.team-cabeza .chico { font-size: var(--fs-activo-txt); max-width: 30ch; color: var(--ink); padding-bottom: .3em; }

.persona {
  display: grid;
  grid-template-columns: clamp(160px, 22.8vw, 438px) minmax(0, 1fr);
  grid-template-areas: "head head" "foto bio";
  column-gap: clamp(20px, 2.5vw, 49px); row-gap: clamp(14px, 1.8vw, 34px);
  align-items: start;
  margin-top: clamp(40px, 5.2vw, 100px);
}
.persona-head { grid-area: head; }
.persona-head h3 { margin: 0; font-size: var(--fs-nombre); font-weight: 400; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.persona-rol { margin: clamp(4px, .5vw, 10px) 0 0; font-size: var(--fs-rol); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; color: var(--ink-soft); }
.persona-foto { grid-area: foto; margin: 0; border-radius: var(--radio); overflow: hidden; }
.persona-foto img { width: 100%; aspect-ratio: 438 / 357; object-fit: cover; }
.persona-bio { grid-area: bio; max-width: 58ch; }
.persona-bio p { margin: 0 0 clamp(12px, 1.4vw, 27px); font-size: var(--fs-bio); font-weight: 300; line-height: 1.25; color: var(--ink); }
.persona-estudios { font-family: var(--display) !important; font-size: calc(var(--fs-bio) * .9) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .01em; color: #4f6a22 !important; }

/* La segunda ficha va espejada: nombre a la derecha, foto a la derecha y la
   bio a la izquierda, alineada al lado de la foto. */
.persona-derecha { grid-template-columns: minmax(0, 1fr) clamp(140px, 19.8vw, 380px); grid-template-areas: "head head" "bio foto"; }
.persona-derecha .persona-head { text-align: right; }
.persona-derecha .persona-bio { text-align: right; justify-self: end; }
.persona-derecha .persona-foto img { aspect-ratio: 380 / 329; }

/* ---------- 05 partners ---------- */
/* Seccion clara con el resplandor verde (viene del PSD). La ficha de AMOS mide
   60% del contenedor; la pila de las otras tres, lo mismo, corrida al 41% y
   montada encima. Las tarjetas casi no contrastan con el fondo (#ebebeb sobre
   #e9ebea): las separa el borde fino, no el relleno. */
#partners {
  /* Arranca por debajo de la elipse de Team: --lente es lo que la curva de
     esa elipse baja del borde de la pagina al centro (152px a 1920), y es lo
     que se ve de este fondo a los costados. Cierra con las esquinas de 53px
     del PSD sobre la banda lima del pie. */
  --lente: clamp(40px, 8vw, 154px);
  background: var(--paper) url('../seed/partners-fondo.jpg') center top / 100% auto no-repeat;
  margin-top: calc(-1 * var(--lente));
  padding: calc(clamp(36px, 3.9vw, 75px) + var(--lente)) 0 clamp(70px, 8.3vw, 160px);
  border-radius: 0 0 clamp(20px, 2.76vw, 53px) clamp(20px, 2.76vw, 53px);
}
#partners .sec-title { max-width: 12ch; }
#partners > .wrap > .chico { margin-top: clamp(16px, 2.3vw, 44px); font-size: var(--fs-activo-txt); max-width: 30ch; color: var(--ink); }

.partners { position: relative; margin-top: clamp(34px, 4.9vw, 94px); }
.partner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr);
  column-gap: clamp(18px, 2.4vw, 46px); align-items: center;
  background: var(--card-clara);
  border: 1px solid rgba(23, 24, 18, .16);
  border-radius: var(--radio);
  padding: clamp(18px, 2.2vw, 42px) clamp(18px, 2.4vw, 46px);
  box-shadow: 0 clamp(6px, .8vw, 16px) clamp(18px, 2.2vw, 42px) -12px rgba(23, 24, 18, .22);
}
.partner-logo { display: flex; align-items: center; justify-content: center; }
/* Cada logo tiene SU ancho, el del PSD, que llega en --w (px a 1920): Amos 359,
   Explorador 245, ROCH 213, LUFT 259. Con un unico tope los cuatro salian al
   mismo tamaño y los chicos quedaban al doble. Amos viene sobre blanco:
   multiply lo funde con el gris de la tarjeta, como en el tema de LUFT. */
.partner-logo img { width: calc(var(--w, 300) / 19.2 * 1vw); max-width: calc(var(--w, 300) * 1px); mix-blend-mode: multiply; }
.partner-logo { justify-content: flex-start; }
/* En el PSD el cuerpo va en Light y el enfasis en Regular; en Amos, Regular y Medium. */
.partner-texto strong { font-weight: 400; }
.partner--destacada .partner-texto p { font-weight: 400; }
.partner--destacada .partner-texto strong { font-weight: 500; }
.partner-nombre { font-size: var(--fs-item); font-weight: 700; text-transform: uppercase; color: var(--ink); }
.partner-texto p { margin: 0; font-size: var(--fs-partner); font-weight: 300; line-height: 1.32; color: var(--ink); }
.partner-texto p + p { margin-top: 1em; }

.partner--destacada {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
  width: 60%; min-height: clamp(180px, 24.7vw, 474px);
  align-items: start;
  /* 230px a 1920. La cabeza del retrato arranca 201px por encima del borde de
     abajo (10.5vw): con menos padding el texto le pasaba por debajo. Con el
     PSD la ficha medía 474 y el padding 138, pero ahí el texto va en Ardela
     y termina antes; acá la ficha crece 40px para darle aire. */
  padding-bottom: clamp(48px, 12vw, 230px);
  position: relative; z-index: 1;
}
.partner--destacada .partner-logo { padding-top: clamp(8px, 1.1vw, 22px); }
/* La foto de Ali mide lo mismo que la ficha y esta alineada con ella: monta
   124px sobre el borde de abajo (6.46vw) y sale 388 por debajo. Vive adentro
   de la ficha y se ancla a ese borde, asi acompaña si el texto la hace crecer.
   Queda detras de la pila. Son dos capas, como en el PSD: el fondo gris
   (969x512) y la cabeza recortada (582x430), que arranca 218px a la derecha y
   77px POR ENCIMA del fondo, sobre la tarjeta. Las medidas van en % del fondo
   para que escalen juntas. */
.partner-retrato {
  position: absolute; left: 0; top: calc(100% - min(124px, 6.46vw));
  width: 100%; z-index: 2;
}
.partner-retrato > img:first-child {
  display: block; width: 100%;
  border-radius: 0 0 var(--radio) var(--radio);
}
.partner-retrato-cabeza {
  position: absolute; left: 22.5%; top: -15%; width: 60.1%;
}
.partners-pila {
  width: 60%; margin-left: 41%;
  /* La pila arranca 318px por debajo del tope de la ficha de AMOS, que mide
     474: el solape es 156px a 1920 = 8,1vw, y tiene que escalar con la ficha.
     Con un piso en px se quedaba en -170 a cualquier ancho y a 1280 tapaba
     el texto. */
  margin-top: calc(-1 * min(156px, 8.1vw));
  position: relative; z-index: 3;
}
.partners-pila .partner { position: relative; }
.partners-pila .partner + .partner { margin-top: clamp(-18px, -1.2vw, -8px); }
.partners-pila .partner:nth-child(2) { z-index: 1; }
.partners-pila .partner:nth-child(3) { z-index: 2; }

/* ---------- pie ---------- */
/* Panel de 1040px a 1920 con las esquinas de arriba a 60px, sobre una banda
   lima de 38px que tambien asoma detras de las esquinas redondeadas de
   Partners. La banda es un ::before con z-index negativo: como el pie no es
   contexto de apilamiento, queda debajo del fondo de Partners y del propio. */
.site-footer {
  --lima-h: clamp(14px, 2vw, 38px);
  position: relative;
  background: var(--forest);
  border-radius: clamp(24px, 3.1vw, 60px) clamp(24px, 3.1vw, 60px) 0 0;
  margin-top: var(--lima-h);
  padding: clamp(46px, 7.8vw, 149px) 0 clamp(60px, 9vw, 174px);
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(-1 * (var(--lima-h) + clamp(20px, 2.76vw, 53px)));
  height: calc(var(--lima-h) + clamp(20px, 2.76vw, 53px) + clamp(24px, 3.1vw, 60px));
  background: #8b9f19;
  z-index: -1;
}
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 58px); align-items: center;
  padding-bottom: clamp(60px, 9.4vw, 180px);
}
.foot-marca img { width: clamp(180px, 25vw, 481px); }
.logo-texto.grande { font-size: clamp(36px, 4.5vw, 86px); }
.foot-claim { margin: 0 0 clamp(14px, 1.5vw, 28px); font-size: var(--fs-pie); font-weight: 400; text-transform: uppercase; line-height: 1.15; color: #fff; }
.foot-contacto { margin: 0; font-size: var(--fs-pie-txt); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; color: #fff; }
.foot-contacto a { text-decoration: none; }
.foot-contacto a:hover { color: var(--lime); }
.foot-luft {
  /* Logo en 163, texto en 761, boton al ras del contenedor: el hueco entre el
     logo y el texto mide 277px a 1920. */
  display: flex; align-items: center;
  border-top: 1px solid #4b6d38;
  padding-top: clamp(40px, 8.4vw, 162px);
}
img.foot-luft-marca { width: clamp(120px, 16.7vw, 321px); flex: none; }
.foot-luft-marca { font-size: var(--fs-pie-txt); letter-spacing: .12em; }
.foot-luft-claim { margin: 0 24px 0 clamp(24px, 14.4vw, 277px); max-width: 24ch; font-size: var(--fs-pie-txt); font-weight: 400; text-transform: uppercase; line-height: 1.2; color: #fff; }
.foot-luft-sitio {
  margin-left: auto;
  background: #174a79;
  color: #fff; font-size: var(--fs-pie-txt); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; padding: .5em 1.3em; border-radius: 9px;
}

.pagina-suelta { width: min(84.4%, var(--wrap)); margin: 0 auto; padding: clamp(120px, 12vw, 230px) 0 clamp(60px, 6vw, 115px); }
.prosa { color: var(--cream-dim); }

/* ---------- animaciones ---------- */
/* Mismo set que LUFT. Todo se apoya en .reveal, que el JS enciende y apaga con
   un IntersectionObserver mas un barrido de respaldo en el scroll. */
.reveal { transition: opacity .8s ease, transform 1.05s cubic-bezier(.16,.84,.34,1); }
.reveal.is-hidden { opacity: 0; transform: translateY(44px); }
.reveal--left.is-hidden  { transform: translate3d(-90px, 0, 0); }
.reveal--right.is-hidden { transform: translate3d(90px, 0, 0); }
.reveal--zoom.is-hidden  { transform: scale(.9); }
.principio.reveal, .partner.reveal { transition-delay: calc(var(--i, 0) * 90ms); }

.persona .persona-head, .persona .persona-bio, .persona .persona-foto {
  transition: opacity .8s ease .08s, transform 1.05s cubic-bezier(.16,.84,.34,1) .08s; }
.persona.is-hidden .persona-foto { opacity: 0; transform: translate3d(-90px, 0, 0); }
.persona.is-hidden .persona-head, .persona.is-hidden .persona-bio { opacity: 0; transform: translate3d(70px, 0, 0); }
.persona-derecha.is-hidden .persona-foto { transform: translate3d(90px, 0, 0); }
.persona-derecha.is-hidden .persona-head, .persona-derecha.is-hidden .persona-bio { transform: translate3d(-70px, 0, 0); }

.about-foto img, .persona-foto img { transition: transform 1.3s cubic-bezier(.16,.84,.34,1), opacity .9s ease; }
.about-foto.is-hidden img, .persona.is-hidden .persona-foto img { transform: scale(1.22); opacity: .1; }

.por-palabra .pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.por-palabra .pal-i { display: inline-block; transform: translateY(0); opacity: 1;
  transition: transform 1.05s cubic-bezier(.16,.84,.34,1), opacity .5s ease; }
.por-palabra.is-hidden { transform: none; opacity: 1; }
.por-palabra.is-hidden .pal-i { transform: translateY(105%); opacity: 0; }

.par { display: block; width: 100%; height: 100%; transform: translate3d(0, var(--y, 0px), 0) scale(1.26); will-change: transform; }
.par img { width: 100%; height: 100%; object-fit: cover; }

.sec, .activo, .concesiones, #about, #strategy, #context, #team, #partners { overflow-x: clip; }

@media (hover: hover) {
  .site-nav a { position: relative; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.42em; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16,.84,.34,1); }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
  .partner { transition: transform .35s cubic-bezier(.16,.84,.34,1), box-shadow .35s ease; }
  .partner:hover { z-index: 5; transform: translateY(-6px); box-shadow: 0 22px 48px -18px rgba(23,24,18,.38); }
  .partner-logo img { transition: transform .35s cubic-bezier(.16,.84,.34,1); }
  .partner:hover .partner-logo img { transform: scale(1.05); }
  /* La ficha de AMOS no sube de capa al pasar el mouse: el retrato sale por
     debajo de ella y la pila (z-index 3) tiene que seguir montada encima.
     Como el retrato vive adentro de la ficha, se levanta con ella solo. */
  .partner--destacada:hover { z-index: 1; }
  .about-foto, .persona-foto { cursor: pointer; }
  .about-foto .par { transition: transform .55s cubic-bezier(.16,.84,.34,1); }
  .about-foto:hover .par { transform: translate3d(0, var(--y, 0px), 0) scale(1.4); }
  .about-foto:hover > img, .persona-foto:hover > img { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .about-foto img, .persona-foto img,
  .persona .persona-head, .persona .persona-bio, .persona .persona-foto, .por-palabra .pal-i { transition: none; }
  .par { transform: none; }
}

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .site-header { padding: 0 20px; }
  .menu-toggle { display: block; }
  .site-nav { display: none; position: fixed; inset: clamp(76px, 9.8vw, 189px) 0 auto 0; background: var(--navy); padding: 12px 22px 22px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 13px 0; border-bottom: 1px solid rgba(238,241,243,.12); }

  .hero { height: auto; min-height: 88vh; padding-bottom: 70px; }
  .hero-inner { padding-top: 130px; }
  .hero-title, .sec-title, #context .sec-title, .activo-top .sec-title, #team .sec-title, #partners .sec-title { max-width: none; }

  .about-top, .activo-top, .team-cabeza, .cols-2 { grid-template-columns: 1fr; row-gap: 24px; }
  .about-foto { margin-top: 0; }
  .cols-2 { row-gap: 18px; }

  .principios { display: grid; grid-template-columns: 1fr; }
  .principio { max-width: none; min-height: 0; }

  .cita { position: static; width: auto; margin: -40px 20px 0; }
  #context::after { height: 0; }

  /* Arco de 22px de flecha. Con rx = 100vw la elipse baja 0.134*ry en el
     borde, asi que ry = 164 da los 22px; y mide 328 de alto, mas que la franja
     mas alta (272), para que el clip no le redondee tambien el pie. La de la
     foto guarda la proporcion de desktop (800/551). */
  .activo { --arco: 22px; --paso: clamp(170px, 44vw, 250px); --arco-rx: 100vw; --arco-ry: 164px; --foto-ry: 238px; --foto-top: 4px; }
  .activo-cierre { padding-top: 34px; }
  #team { --team-rx2: 600vw; }
  #partners { --lente: 24px; }
  .activo-pastilla { width: auto; }
  .metricas { padding-bottom: 80px; }

  #team { border-radius: 30px 30px 0 0; margin-top: -30px; padding-top: 60px; }
  .persona, .persona-derecha { grid-template-columns: 1fr; grid-template-areas: "head" "foto" "bio"; }
  .persona-derecha .persona-head, .persona-derecha .persona-bio { text-align: left; justify-self: start; }
  .persona-foto { max-width: 300px; }
  .persona-bio { max-width: none; }

  .partner { grid-template-columns: 1fr; row-gap: 14px; }
  .partner--destacada { width: auto; min-height: 0; padding-bottom: clamp(18px, 2.2vw, 42px); }
  .partners-pila { width: auto; margin-left: 0; margin-top: 16px; }
  .partners-pila .partner + .partner { margin-top: 16px; }
  .partner-retrato { position: relative; top: auto; width: 100%; margin-top: 16px; }
  .partner-retrato > img:first-child { border-radius: 10px; }
  /* Apilada bajo la ficha, la cabeza que asoma pisaria el texto. */
  .partner-retrato-cabeza { display: none; }

  .foot-top { grid-template-columns: 1fr; }
  .foot-luft { flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-luft-claim { margin: 0; }
  .foot-luft-sitio { margin-left: 0; }

  .reveal--left.is-hidden, .reveal--right.is-hidden { transform: translateY(32px); }
  .reveal--zoom.is-hidden { transform: scale(.95); }
  .persona.is-hidden .persona-foto, .persona.is-hidden .persona-head, .persona.is-hidden .persona-bio,
  .persona-derecha.is-hidden .persona-foto, .persona-derecha.is-hidden .persona-head, .persona-derecha.is-hidden .persona-bio { transform: translateY(24px); }
}