/* 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, 1.9vw, 36px);    /* 43 en el PSD; Sora es mas ancha que Ardela, y «three» en letras alarga la segunda linea */
  --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) var(--hero, none) 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;
}
.hero-logo { display: none; }   /* solo en celular */

/* ---------- 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 en el PSD, que dice «3»; con «three» la segunda
   linea no entra y la pastilla se ensancha a 787. Texto 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, 41vw, 787px);
  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). 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); }

/* Dos columnas: AMOS con su retrato a la izquierda y las otras tres a la
   derecha, sin montarse. WEB1.psd las escalonaba encima de la foto de Ali y
   el cliente pidio separarlas (02/10). Las dos columnas miden lo mismo: las
   tres fichas de la derecha se reparten el alto de la de AMOS. */
.partners {
  --hueco: clamp(12px, 1.15vw, 22px);
  position: relative; margin-top: clamp(34px, 4.9vw, 94px);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--hueco); align-items: stretch;
}
.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; }

/* La ficha de AMOS apila logo, texto y, al pie, el retrato a sangre
   contra sus bordes. El retrato 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. Las medidas van en % del fondo para que escalen
   juntas; el margen de arriba le deja lugar a la cabeza (15% del alto del
   fondo = 7,9% de su ancho) para que no pise el texto. */
.partner--destacada {
  --pad-x: clamp(18px, 2.4vw, 46px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  row-gap: clamp(14px, 1.7vw, 32px);
  align-items: start;
  padding-bottom: 0;
  overflow: hidden;
}
/* El logo de AMOS va a 480px a 1920 y no a los 359 del PSD: es el socio
   destacado y en la ficha de una columna tiene el ancho para pesar mas. Solo
   en desktop; en celular sigue la regla comun de los cuatro logos. */
@media (min-width: 901px) {
  .partner--destacada .partner-logo img { width: 25vw; max-width: 480px; }
}
.partner-retrato {
  grid-column: 1 / -1; align-self: end;
  position: relative;
  margin: 8.6% calc(-1 * var(--pad-x)) 0;
}
.partner-retrato > img:first-child { display: block; width: 100%; }
.partner-retrato-cabeza {
  position: absolute; left: 22.5%; top: -15%; width: 60.1%;
}
.partners-pila { display: grid; grid-auto-rows: 1fr; gap: var(--hueco); }
/* Un punto menos que en AMOS: con el cuerpo a 27px las tres fichas sumaban
   mas alto que la de AMOS con su retrato y le abrian un hueco en el medio. */
.partners-pila .partner-texto p { font-size: max(12.5px, calc(var(--fs-partner) * .85)); }

/* ---------- 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); }
  .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); }

  /* La portada vertical del mockup: titular centrado arriba, sobre el cielo;
     el logo grande montado en el horizonte (TERRA arriba, OIL abajo) y la
     bajada centrada al pie. La foto (1040x1942) trae el horizonte al 47% de
     su alto y va centrada, asi queda ahi a cualquier proporcion de pantalla. */
  .hero {
    height: auto; min-height: 88vh; align-items: stretch;
    background-image: var(--hero-movil, var(--hero, none)); background-position: center;
  }
  .hero::after { background: linear-gradient(180deg, rgba(4,13,27,0) 62%, rgba(4,13,27,.38) 100%); }
  .hero-inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    width: calc(100% - 32px);
    padding: clamp(84px, 12.5vh, 130px) 0 clamp(84px, 15vh, 150px);
  }
  .hero-title { font-size: clamp(17px, 4.7vw, 32px); font-weight: 400; line-height: 1.1; letter-spacing: .01em; }
  .hero-title br { display: none; }
  .hero-title .hl { display: block; color: #fff; }
  .hero-sub { margin: auto 0 0; font-size: clamp(12px, 3.3vw, 19px); font-weight: 400; line-height: 1.2; max-width: 56ch; text-wrap: balance; }
  .hero-logo {
    display: block; position: absolute; z-index: 1;
    left: 50%; top: 48.5%; transform: translate(-50%, -50%);
    width: clamp(150px, 46vw, 330px); height: auto;
  }
  /* Con el logo grande en la portada, la pastilla del header lo repetiria.
     Se oculta sin sacarla del flujo, para que el boton del menu siga a la
     derecha. Las paginas sin portada la conservan. */
  body:has(.hero) .site-logo { visibility: hidden; }
  .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; }

  /* Como en desktop: la foto se ve entera y la cita monta solo su borde de
     abajo. La foto pasa a ser una franja de alto fijo arriba y la cita, que
     sigue en el flujo, arranca --solape antes de que termine. */
  .cita-foto {
    --foto-h: clamp(220px, 64vw, 420px); --solape: 44px;
    height: auto; padding-top: calc(var(--foto-h) - var(--solape));
    background-size: auto var(--foto-h); background-position: 42% top;
  }
  /* relative y no static: la comilla es un ::before absoluto y sin esto se
     ancla a la foto en vez de a la tarjeta. */
  .cita { position: relative; left: auto; bottom: auto; width: auto; margin: 0 20px; padding-top: 58px; }
  /* En desktop la comilla asoma por el borde de arriba; en celular va adentro
     de la tarjeta, con el mismo aire que el texto tiene a los costados. */
  .cita::before { top: 10px; left: 22px; }
  #context { padding-bottom: 56px; }
  #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; }
  /* El piso de 15px no deja entrar «three contiguous concessions:» en una
     linea por debajo de 380px de pantalla. */
  .activo-pastilla { width: auto; font-size: clamp(12px, 3.7vw, 15px); }
  .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; }

  .partners { grid-template-columns: 1fr; --hueco: 16px; }
  .partner { grid-template-columns: 1fr; row-gap: 14px; }
  .partner--destacada { grid-template-rows: none; row-gap: 14px; padding-bottom: clamp(18px, 2.2vw, 42px); overflow: visible; }
  .partners-pila .partner-texto p { font-size: var(--fs-partner); }
  .partners-pila { grid-auto-rows: auto; }
  /* El retrato va adentro del padding de la ficha, con sus esquinas, y no a
     sangre como en desktop. */
  .partner-retrato { margin: calc(7.9% + 22px) 0 0; }
  .partner-retrato > img:first-child { border-radius: 10px; }
  /* Los logos escalan con el vw y a 390 quedaban en 43 a 73px de ancho. */
  .partner-logo img { width: min(calc(var(--w, 300) * .42px), 62%); }

  .foot-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot-luft { flex-direction: column; align-items: center; text-align: center; 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); }
}