/*
  Ethnocentric (Typodermic) se carga desde archivo local SOLO para desarrollo.
  Antes de publicar: comprar licencia web y reemplazar por los .woff2 licenciados.
  Si no carga, cae a Michroma (Google Fonts, licencia OFL).
*/
@font-face{
  font-family:'Ethnocentric';
  src:url('../fonts/ethnocentric/ethnocentric%20rg.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* Transición suave entre páginas (Chrome/Edge/Safari recientes) */
@view-transition{navigation:auto;}

:root{
  --grey-11:#4D4E53;      /* Pantone Cool Grey 11 C */
  --grey-8:#8C8D8E;       /* Pantone Cool Grey 8 C: líneas, íconos y textos grandes */
  --muted:#6B6C70;        /* texto secundario pequeño sobre fondo claro (contraste ≥ 4.5:1) */
  --muted-dark:#CFCFD0;   /* texto secundario pequeño sobre gris oscuro */
  --ink:#3A3B40;
  --paper:#FAFAF9;
  --paper-alt:#F1F1EF;
  --line:#DDDCD9;
  --white:#FFFFFF;
  --display:'Ethnocentric','Michroma',sans-serif;
  --body:'Montserrat',system-ui,sans-serif;
  --max:1200px;
  --gutter:clamp(20px,4vw,40px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  font-weight:400;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  display:flex; flex-direction:column;
}
main{flex:1;}
a{color:inherit;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}

.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0.02em;}
.eyebrow{
  font-family:var(--display);
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,249,0.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
  view-transition-name:site-nav;
}
.nav.is-scrolled{border-bottom-color:var(--line);}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand img{height:46px; width:auto; mix-blend-mode:multiply;}
.nav-links{display:flex; align-items:center; gap:32px; list-style:none;}
.nav-links a{
  font-family:var(--display); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; text-decoration:none; color:var(--grey-11);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nav-links a[aria-current="page"]{border-bottom-color:var(--grey-11);}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{border-bottom-color:var(--grey-11);} }
.nav-right{display:flex; align-items:center; gap:18px;}
.lang{display:flex; border:1px solid var(--grey-11); border-radius:999px; overflow:hidden;}
.lang button{
  font-family:var(--display); font-size:10px; letter-spacing:0.12em;
  background:none; border:0; color:var(--grey-11);
  padding:7px 12px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lang button[aria-pressed="true"]{background:var(--grey-11); color:var(--paper);}
.lang button:active,.menu-btn:active{transform:scale(.95);}
.lang button{transition:background-color .15s ease, color .15s ease, transform 120ms var(--ease-out);}
.menu-btn{display:none; background:none; border:0; cursor:pointer; padding:9px; margin:-3px; color:var(--grey-11); transition:transform 120ms var(--ease-out);}
/* las dos líneas del menú se cruzan en una X al abrir */
.menu-btn path{transform-box:fill-box; transform-origin:center; transition:transform .22s var(--ease-out);}
.menu-btn[aria-expanded="true"] .l1{transform:translateY(4px) rotate(45deg);}
.menu-btn[aria-expanded="true"] .l2{transform:translateY(-4px) rotate(-45deg);}

/* ---------- HERO (inicio) ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100svh - 75px);
  display:flex; align-items:flex-end;
  padding:80px 0 72px;
}
.hero-motif{
  position:absolute; right:-4vw; top:50%; transform:translateY(-55%);
  width:min(46vw,580px); height:auto; pointer-events:none; opacity:.7;
}
.hero-motif path,.hero-motif circle{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.4s cubic-bezier(.6,0,.2,1) forwards;
}
.hero-motif circle{animation-delay:.25s;}
.hero-motif .m3{animation-delay:.5s;}
.hero-motif .m4{animation-delay:.75s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.hero-inner{position:relative; z-index:2; width:100%;}
.hero h1{
  font-size:clamp(22px,3.4vw,50px);
  line-height:1.22; letter-spacing:0.04em;
  color:var(--grey-11);
  margin:22px 0 36px;
}
.hero h1 .light{color:var(--muted);}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
  padding-top:8px;
}
.lede{font-size:clamp(16px,1.5vw,19px); font-weight:300; max-width:560px; color:var(--grey-11);}

/* ---------- ENCABEZADO DE PÁGINA INTERNA ---------- */
.page-hero{
  padding:clamp(64px,9vw,128px) 0 clamp(40px,5vw,72px);
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  /* Ethnocentric es muy ancha y pesada: tamaños contenidos se ven más elegantes */
  font-size:clamp(17px,2.4vw,34px); line-height:1.35; letter-spacing:0.04em; max-width:22em; color:var(--grey-11);
  overflow-wrap:break-word;
  margin:20px 0 0;
}
.page-hero .lede{margin-top:28px;}
.team .page-hero{border-bottom-color:#5F6065;}
.team .page-hero h1{color:var(--paper);}
.team .page-hero .lede{color:#E4E4E2;}

/* ---------- FOCO DE TECLADO ---------- */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--grey-11); outline-offset:3px;}
:where(.team,.band-dark,.cta-dark,.btn) :focus-visible,.btn:focus-visible,.lang button:focus-visible{outline-color:var(--grey-11);}
:where(.team,.band-dark,.cta-dark) :where(a,button):focus-visible{outline-color:var(--paper);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------- TITULARES LIGEROS ----------
   Para frases completas: Montserrat delgada en tipo oración, con la idea principal en negritas
   y el cierre en gris. Ethnocentric se reserva para el logo-titular del inicio, etiquetas y títulos cortos. */
.headline,
.section-head h2.headline,
.page-hero h1.headline,
.cta-band h2.headline{
  font-family:var(--body); font-weight:300; text-transform:none; letter-spacing:-0.01em;
  line-height:1.28; color:var(--grey-11);
}
.page-hero h1.headline{font-size:clamp(30px,3.9vw,52px); max-width:20em;}
.section-head h2.headline{font-size:clamp(24px,2.5vw,34px);}
.cta-band h2.headline{font-size:clamp(26px,2.8vw,38px);}
.headline strong{font-weight:500;}
.headline .accent{color:var(--grey-8);}          /* ≥24px: contraste suficiente para texto grande */
.team .page-hero h1.headline,.band-dark .headline,.cta-dark .headline{color:#E4E4E2;}
.team .page-hero h1.headline strong,.band-dark .headline strong,.cta-dark .headline strong{color:var(--paper);}
.team .headline .accent,.band-dark .headline .accent,.cta-dark .headline .accent{color:#A9AAAC;}
.statement-text .accent{color:var(--grey-8);}
/* sobre el gris claro de las secciones .alt / .statement el gris de cierre se oscurece un punto para mantener 3:1 */
.alt .headline .accent,.statement .statement-text .accent{color:#838487;}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--display); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  background:var(--grey-11); color:var(--paper);
  padding:16px 26px; text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease, transform 160ms var(--ease-out);
}
.btn:active{transform:scale(.97);}
.btn .arrow{transition:transform .2s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--ink);}
  .btn:hover .arrow{transform:translateX(4px);}
}

/* ---------- SECCIONES ---------- */
section{padding:clamp(72px,10vw,128px) 0;}
.alt{background:var(--paper-alt);}
.section-head{display:grid; grid-template-columns:1fr 2fr; gap:40px; margin-bottom:56px; align-items:start;}
.section-head h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,1.7vw,22px); line-height:1.4; letter-spacing:0.03em; color:var(--grey-11);
}

/* ---------- INICIO ---------- */
/* Manifiesto (a16z): una sola frase grande */
.statement{background:var(--paper-alt);}
.statement-text{font-weight:300; font-size:clamp(22px,2.9vw,40px); line-height:1.35; color:var(--grey-11); max-width:1000px; margin-top:26px;}
.statement-text strong{font-weight:500;}
.statement-text .accent{color:var(--muted);}

/* Cifras (DILA) */
.stats-band{padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats{list-style:none; display:grid; grid-template-columns:repeat(3,1fr);}
.stats li{padding:clamp(32px,4vw,52px) clamp(16px,2vw,28px); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:12px;}
.stats li:first-child{border-left:0; padding-left:0;}
.stat-num{font-family:var(--display); font-size:clamp(30px,3.6vw,52px); line-height:1; color:var(--grey-11); white-space:nowrap;}
.stat-num .sep{color:var(--muted); margin:0 .12em;}
.stat-label{font-size:13.5px; line-height:1.5; color:var(--muted); max-width:32ch;}

/* Vehículos de inversión */
.vehicles{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.vehicle{position:relative; background:var(--paper); padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:14px;
  transition:transform .25s var(--ease-out), background-color .2s ease; isolation:isolate;}
.vehicle::after{content:""; position:absolute; inset:0; z-index:-1; box-shadow:0 14px 28px -12px rgba(40,41,45,.45); opacity:0; transition:opacity .25s ease; pointer-events:none;}
.vehicle p,.vehicle .veh-when span,.veh-when{transition:color .2s ease, border-color .2s ease;}
.vehicle h3{font-family:var(--display); font-weight:400; font-size:clamp(13px,1.2vw,16px); letter-spacing:.04em; line-height:1.4; text-transform:uppercase; color:var(--grey-11); margin-top:clamp(20px,2.5vw,36px); min-height:2.8em;
  transform-origin:left center; transition:transform .25s var(--ease-out), color .2s ease;}
.veh-lead{font-weight:500; font-size:15px; line-height:1.5; color:var(--grey-11);}
.vehicle p{font-size:14px; line-height:1.65; color:var(--grey-11);}
.veh-when{margin-top:auto; padding-top:18px; border-top:1px solid var(--line);}
.veh-when span{display:block; font-family:var(--display); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.veh-when p{font-size:13.5px; color:var(--muted);}
.veh-top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.veh-verb{font-family:var(--display); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--grey-11); color:var(--grey-11);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;}
/* Espectro: una línea con flecha de "menor involucramiento" a "construimos desde cero".
   La intensidad de cada tarjeta sube de izquierda a derecha. */
.veh-spectrum{position:relative; display:flex; justify-content:space-between; margin-bottom:18px; padding-bottom:14px;
  font-family:var(--display); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.veh-spectrum::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--line), var(--grey-11));}
.veh-spectrum::before{content:""; position:absolute; right:-1px; bottom:-4px; border-left:8px solid var(--grey-11); border-top:5px solid transparent; border-bottom:5px solid transparent;}
.vehicles .vehicle:nth-child(3) .veh-verb,.vehicles .vehicle:nth-child(4) .veh-verb{background:var(--grey-11); color:var(--paper);}
/* Hover "Elevar" (igual que el portafolio, pero al revés): la tarjeta sube, se vuelve gris oscuro y el título crece */
@media (hover:hover) and (pointer:fine){
  .vehicle:hover{z-index:1; transform:translateY(-6px); background:var(--grey-11);}
  .vehicle:hover::after{opacity:1;}
  .vehicle:hover h3{color:var(--paper); transform:scale(1.08);}
  .vehicle:hover p{color:#E4E4E2;}
  .vehicle:hover .veh-when{border-top-color:#5F6065;}
  .vehicle:hover .veh-when span,.vehicle:hover .veh-when p{color:var(--muted-dark);}
  .vehicle:hover .veh-verb{background:var(--paper); color:var(--grey-11); border-color:var(--paper);}
}


/* Llamado final oscuro */
.cta-dark{background:#2B2C30;}
.cta-dark .cta-band h2{color:var(--paper);}
.btn-light{background:var(--paper); color:var(--grey-11);}
@media (hover:hover) and (pointer:fine){ .btn-light:hover{background:var(--white);} }

/* Banda de llamado a la acción */
.cta-band{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}
.cta-band h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(16px,2vw,26px); line-height:1.4; letter-spacing:0.03em; color:var(--grey-11); max-width:760px;}

/* Portafolio — textos de cada tarjeta */
.pf-name{font-family:var(--display); font-size:clamp(12px,1.1vw,14px); letter-spacing:0.05em; text-transform:uppercase; color:var(--grey-11);}
.pf-desc{font-size:15px; color:var(--grey-11);}
.pf-sector{font-family:var(--display); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}

/* Portafolio — cuadrícula de logos (estilo DILA / Sequoia) */
.pf-grid{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px);}
.pf-card > a,.pf-card > div{display:block; text-decoration:none; color:inherit; height:100%;}

/* Caja del logo. Capas, de abajo hacia arriba:
   foto (.pf-photo) → velo blanco (::before) → logo blanco / logo a color → flecha.
   Tiempos asimétricos: lo que SALE (estado normal) es rápido; lo que ENTRA (hover) es un poco más pausado. */
.pf-logo{
  position:relative; aspect-ratio:4/3; background:var(--grey-11); isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease-out);
}
.pf-logo::after{content:""; position:absolute; inset:0; z-index:-1; box-shadow:0 14px 28px -12px rgba(40,41,45,.35);
  opacity:0; transition:opacity .15s ease; pointer-events:none;}
.pf-logo::before{content:""; position:absolute; inset:0; z-index:1; background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line); opacity:0; transition:opacity .15s ease;}
/* --s ajusta el peso visual de cada logo para que todos se vean del mismo tamaño */
.pf-logo img{position:relative; z-index:2; width:58%; height:46%; object-fit:contain;
  opacity:.9; transform:scale(var(--s,1)); transition:opacity .15s ease;}
.pf-logo .logo-color{position:absolute; inset:0; margin:auto; opacity:0;}
.pf-logo .pf-photo{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .15s ease, transform .15s ease;}
.pf-logo.has-photo::before{
  background:radial-gradient(ellipse 58% 50% at 50% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.22) 100%);}
/* fotos con caras arriba (Coaches' Voice): el velo es una franja detrás del logo */
.pf-logo.has-photo.veil-low::before{
  background:radial-gradient(ellipse 60% 26% at 50% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.08) 100%);}
.pf-logo .pf-go{position:absolute; z-index:3; top:14px; right:16px; color:var(--grey-11); font-size:18px; line-height:1;
  opacity:0; transform:translate(-4px,4px); transition:opacity .12s ease, transform .12s var(--ease-out);}
.pf-logo.has-photo .pf-go{background:rgba(255,255,255,.92); padding:5px 7px; top:10px; right:10px;}
.pf-logo.veil-low .pf-go{top:auto; bottom:10px;}   /* arriba están las caras */
.pf-meta{display:flex; flex-direction:column; gap:6px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  transition:border-color .15s ease;}
.pf-card .pf-desc{display:block; margin-top:10px; font-size:14.5px; line-height:1.6; max-width:38ch;}

/* ESTADO ACTIVO (foto + velo + logo a color). Se activa con:
   - el cursor (computadora), - el teclado (Tab), - o en celular cuando la tarjeta pasa por el centro de la pantalla (.is-active, ver main.js).
   Aquí van los tiempos de ENTRADA. */
.pf-card.is-active .pf-logo::before,
.pf-card > a:focus-visible .pf-logo::before{opacity:1; transition-duration:.25s;}
.pf-card.is-active .pf-photo,
.pf-card > a:focus-visible .pf-photo{opacity:1; transform:none; transition:opacity .3s ease, transform .4s var(--ease-out);}
.pf-card.is-active .pf-logo img:not(.logo-color):not(.pf-photo),
.pf-card > a:focus-visible .pf-logo img:not(.logo-color):not(.pf-photo){opacity:0; transition-duration:.2s;}
.pf-card.is-active .logo-color,
.pf-card > a:focus-visible .logo-color{opacity:1; transition-duration:.2s;}
.pf-card.is-active .pf-meta{border-top-color:var(--grey-11);}
.pf-card > a:focus-visible{outline:2px solid var(--grey-11); outline-offset:4px;}
@media (hover:hover) and (pointer:fine){
  .pf-card:hover .pf-logo::before{opacity:1; transition-duration:.25s;}
  .pf-card:hover .pf-photo{opacity:1; transform:none; transition:opacity .3s ease, transform .4s var(--ease-out);}
  .pf-card:hover .pf-logo img:not(.logo-color):not(.pf-photo){opacity:0; transition-duration:.2s;}
  .pf-card:hover .logo-color{opacity:1; transition-duration:.2s;}
  /* solo las tarjetas que son liga se elevan, muestran flecha y oscurecen la línea */
  .pf-card:has(> a):hover .pf-logo{transform:translateY(-6px); transition-duration:.25s;}
  .pf-card:has(> a):hover .pf-logo::after{opacity:1; transition-duration:.25s;}
  .pf-card:has(> a):hover .pf-go{opacity:1; transform:none; transition:opacity .2s ease 70ms, transform .25s var(--ease-out) 70ms;}
  .pf-card:not(.pf-cta):has(> a):hover .pf-meta{border-top-color:var(--grey-11);}
}
/* al presionar: toda la caja responde (incluida la de contacto). En táctil solo se encoge; con cursor ya está elevada */
.pf-card > a:active .pf-logo{transform:scale(.98); transition-duration:.12s;}
@media (hover:hover) and (pointer:fine){ .pf-card > a:active .pf-logo{transform:translateY(-6px) scale(.98);} }
/* teclado (Tab): mismo estado que el cursor (elevación, sombra, flecha), pero sin animación */
.pf-card > a:focus-visible .pf-logo{transform:translateY(-6px);}
.pf-card > a:focus-visible .pf-logo::after,
.pf-card > a:focus-visible .pf-go{opacity:1; transform:none;}
.pf-card:not(.pf-cta) > a:focus-visible .pf-meta{border-top-color:var(--grey-11);}
.pf-card > a:focus-visible .pf-logo,
.pf-card > a:focus-visible .pf-logo::before,
.pf-card > a:focus-visible .pf-logo::after,
.pf-card > a:focus-visible .pf-logo > *{transition-duration:0s; transition-delay:0s;}

/* Caja final: invitación a contactar (efecto inverso: de claro a gris oscuro) */
.pf-cta .pf-logo{background:var(--paper-alt); box-shadow:inset 0 0 0 1px var(--line); flex-direction:column; gap:18px; padding:24px; text-align:center;}
.pf-cta .pf-logo::before{background:var(--grey-11); box-shadow:none;}
.pf-cta .pf-logo strong,.pf-cta .pf-logo .go{position:relative; z-index:2;}
.pf-cta .pf-logo strong{font-family:var(--display); font-weight:400; font-size:clamp(12px,1.1vw,14px); letter-spacing:0.06em; line-height:1.5; text-transform:uppercase; color:var(--grey-11); transition:color .2s ease;}
.pf-cta .pf-logo .go{font-family:var(--display); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); transition:color .2s ease;}
.pf-cta > a:focus-visible strong,.pf-cta.is-active strong{color:var(--paper);}
.pf-cta.is-active .go{color:var(--muted-dark);}
@media (hover:hover) and (pointer:fine){
  .pf-cta > a:hover strong{color:var(--paper);}
  .pf-cta > a:hover .go{color:var(--muted-dark);}
}

/* Tarjetas del portafolio: entran en cascada al aparecer la cuadrícula */
.pf-grid .pf-card{opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .5s var(--ease-out); transition-delay:calc(var(--i,0) * 50ms + 80ms);}
.is-visible .pf-grid .pf-card{opacity:1; transform:none;}

/* ---------- TÍTULOS: entrada palabra por palabra ---------- */
/* Se usa en el título de cada página. Poco frecuente (1 vez por carga), por eso puede ser más lento y expresivo. */
.split .w{display:inline-block; opacity:0; transform:translateY(0.35em); filter:blur(3px);
  animation:wordIn .65s var(--ease-out) forwards; animation-delay:calc(var(--i) * 45ms + 60ms);}
.split.static .w{animation:none; opacity:1; transform:none; filter:none;}
@keyframes wordIn{to{opacity:1; transform:none; filter:blur(0);}}
/* La línea bajo el encabezado se dibuja de izquierda a derecha */
.page-hero{position:relative;}
.page-hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--grey-11);
  transform:scaleX(0); transform-origin:left; animation:lineIn .8s var(--ease-out) .2s forwards;}
.team .page-hero::after{background:var(--muted-dark);}
@keyframes lineIn{to{transform:scaleX(1);}}

/* Equipo */
.team{background:var(--grey-11); color:var(--paper);}
.team .eyebrow{color:var(--muted-dark);}
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,56px);}
.member-photo{
  /* Estilo estudio (tipo Founders Fund): fondo casi negro con un halo de luz detrás de la cabeza.
     Las fotos van en PNG sin fondo, así todas comparten exactamente este fondo. */
  aspect-ratio:4/5; position:relative; overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 38%, #34353A 0%, #1B1C1F 60%, #121315 100%);
  display:flex; align-items:center; justify-content:center;
}
.member-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 100%;
  filter:grayscale(1) contrast(1.08) brightness(.95); transform-origin:50% 100%;
  transition:filter .3s ease, transform .35s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .member:hover .member-photo img{filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.02);}
}
.member h3{font-family:var(--display); font-weight:400; font-size:clamp(13px,1.2vw,16px); letter-spacing:0.04em; text-transform:uppercase; margin:26px 0 6px; color:var(--paper);}
.member .role{font-family:var(--display); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:14px;}
.member p{font-size:15px; line-height:1.7; color:#E4E4E2; max-width:520px;}
.member p + p{margin-top:14px;}
/* Foto + nombre ligan al LinkedIn de cada persona */
.member-link{display:block; color:inherit; text-decoration:none;}
.member-link:focus-visible{outline:2px solid var(--paper); outline-offset:4px;}
.li-icon{width:.95em; height:.95em; margin-left:.55em; vertical-align:-.12em; opacity:.45; transition:opacity .2s ease, transform .2s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .member-link:hover .li-icon{opacity:1; transform:translateY(-1px);}
}
.member-link:focus-visible .li-icon{opacity:1;}
/* Trayectoria: logos de donde han trabajado, discretos en gris claro */
.career{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  margin-top:28px; padding-top:22px; border-top:1px solid #5F6065; max-width:520px;}
.career img{height:42px; width:auto; opacity:.6; transition:opacity .2s ease;}
.career img.wide{height:30px;}
@media (hover:hover) and (pointer:fine){ .career img:hover{opacity:.95;} }

/* Analistas e interns: 3 columnas, más chicos, sin descripción */
.team-crew{margin-top:clamp(72px,9vw,120px);}
.team-sub{border-top:1px solid #5F6065; padding-top:24px; margin-bottom:36px;}
.team-grid--sm{grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,32px);}
.member--sm h3{font-size:clamp(11px,1vw,13px); margin:18px 0 4px;}
.member--sm .role{font-size:9.5px; margin-bottom:0;}

/* Contacto: datos a la izquierda, formulario a la derecha */
.contact-layout{display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(40px,6vw,96px); align-items:start;}
.label{display:block; font-family:var(--display); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.contact-side{display:grid; gap:34px; position:sticky; top:110px;}
.cs-block{padding-top:18px; border-top:1px solid var(--line);}
.contact-side address{font-style:normal;}
.cs-link{font-size:16px; line-height:1.6; color:var(--grey-11); text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .cs-link:hover{background-size:100% 1px;} }

.contact-form{background:var(--white); border:1px solid var(--line); padding:clamp(24px,4vw,48px); display:grid; gap:24px;}
.cf-title{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(15px,1.7vw,20px); line-height:1.4; letter-spacing:.03em; color:var(--grey-11);}
.cf-row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.cf-field{display:block;}
.cf-field input,.cf-field textarea{width:100%; font:inherit; font-size:16px; color:var(--grey-11); background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:8px 0 10px; border-radius:0; transition:border-color .2s ease;}
.cf-field textarea{resize:vertical; min-height:130px; border:1px solid var(--line); padding:12px 14px;}
.cf-field input:focus,.cf-field textarea:focus{outline:none; border-color:var(--grey-11);}
.cf-field.has-error input,.cf-field.has-error textarea{border-color:#9B3B3B;}
.cf-honey{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.cf-foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.cf-note{font-size:12.5px; color:var(--muted); max-width:34ch;}
.contact-form .btn{border:0; cursor:pointer;}
/* LinkedIn: botón oscuro y ancho completo para que destaque */
.btn-linkedin{width:100%; justify-content:center; gap:12px; padding:18px 22px;}
.btn-linkedin svg{width:18px; height:18px; flex:none;}
.btn-linkedin .arrow{transition:transform .2s var(--ease-out);}
.btn-linkedin{white-space:normal; text-align:center;}
@media (hover:hover) and (pointer:fine){ .btn-linkedin:hover .arrow{transform:translate(3px,-3px);} }
.contact-form .btn[disabled]{opacity:.6; cursor:progress;}
.cf-status{font-size:14.5px; line-height:1.5; color:var(--grey-11); min-height:1.5em;}
.cf-status.is-error{color:#9B3B3B;}
/* Estado de enviado: el formulario se reemplaza por el mensaje de gracias */
.contact-form.is-sent > *:not(.cf-status){display:none;}
.contact-form.is-sent .cf-status{font-size:clamp(16px,1.6vw,20px); font-weight:300; padding:20px 0;}

/* Páginas legales y 404 */
.legal{max-width:760px;}
.legal h2{font-family:var(--display); font-weight:400; font-size:clamp(12px,1.1vw,14px); letter-spacing:.06em; text-transform:uppercase; color:var(--grey-11); margin:40px 0 12px;}
.legal p{font-size:16px; line-height:1.75; color:var(--grey-11);}
.legal-draft{display:inline-block; font-size:13px !important; padding:6px 12px; border:1px dashed var(--muted); color:var(--muted) !important;}
.legal-contact{margin-top:40px;}
.cf-note a{color:inherit;}
.page-404{min-height:calc(100svh - 240px); display:flex; align-items:center; border-bottom:0;}
.page-404 .contact-actions{margin-top:36px;}

/* Footer */
footer{border-top:1px solid var(--line); padding:32px 0 40px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.footer-inner img{height:38px; width:auto; mix-blend-mode:multiply;}
.footer-meta{font-size:12.5px; color:var(--muted); display:flex; gap:24px; flex-wrap:wrap;}
.footer-meta a{text-decoration:none;}
.footer-meta a:hover{color:var(--grey-11);}

/* Cambio de idioma: el contenido se desvanece 130 ms, cambia y vuelve */
main,footer,.nav-links{transition:opacity .13s ease, filter .13s ease;}
.is-switching main,.is-switching footer,.is-switching .nav-links{opacity:0; filter:blur(2px);}

/* Transición entre páginas más corta y con curva propia */
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s; animation-timing-function:cubic-bezier(0.23,1,0.32,1);}

/* Aparición */
.js [data-reveal]{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s var(--ease-out);}
html:not(.js) [data-reveal] *{opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;}
[data-reveal].is-visible{opacity:1; transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .section-head{grid-template-columns:1fr; gap:14px;}
  .vehicles{grid-template-columns:repeat(2,1fr);}
  .pf-grid{grid-template-columns:repeat(2,1fr);}
  .contact-layout{grid-template-columns:1fr;}
  .contact-side{position:static; order:2;}
}
@media (max-width:760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px;
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-links.open{opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .2s ease, transform .2s ease;}
  /* fondo oscurecido debajo del menú abierto: aparece y se va junto con el menú; tocarlo cierra el menú */
  .nav-links::after{content:""; position:absolute; top:100%; left:0; right:0; height:100vh; background:rgba(43,44,48,.4);}
  .nav-links li{width:100%; border-bottom:1px solid var(--line);}
  .nav-links a{display:block; padding:16px 0; font-size:12px;}
  .nav-links a[aria-current="page"]{border-bottom-color:transparent; color:var(--muted);}
  .menu-btn{display:block;}
  .lang button{padding:14px 15px;}
  /* pie en una sola columna, todos los renglones a la misma altura */
  .footer-inner{flex-direction:column; align-items:flex-start; gap:12px;}
  .footer-meta{flex-direction:column; align-items:flex-start; gap:0;}
  .footer-meta > *{display:block; padding:9px 0;}
  .cs-link{display:inline-block; padding:8px 0;}
  .brand img{height:40px;}
  .hero{min-height:auto; padding:56px 0 48px;}
  .hero-motif{width:90vw; right:-30vw; top:6%; transform:none; opacity:.5;}
  .team-grid{grid-template-columns:1fr;}
  .team-grid--sm{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:540px){
  .cf-row{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .stats li{flex-direction:row; align-items:center; gap:20px; padding:22px 0; border-left:0; border-top:1px solid var(--line);}
  .stats li:first-child{border-top:0;}
  .stat-num{min-width:92px;}
  .stat-label{max-width:none;}
  .vehicles{grid-template-columns:1fr;}
  .pf-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition-duration:.15s !important; transition-delay:0s !important;}
  .vehicle:hover,.pf-card:has(> a):hover .pf-logo,.pf-card > a:active .pf-logo,.pf-card > a:focus-visible .pf-logo,.pf-photo,.member:hover .member-photo img{transform:none !important;}
  .hero-motif path,.hero-motif circle{stroke-dashoffset:0;}
  [data-reveal],.pf-grid .pf-card{opacity:1; transform:none;}
  .split .w{opacity:1; transform:none; filter:none;}
  .page-hero::after{transform:none;}
  @view-transition{navigation:none;}
}