/* =========================================================
   PFI — Proyectos Finanzas e Inversiones
   Sistema de diseño · banca de inversión privada
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* superficies — azul grafito, en sintonía con la fotografía */
  --bg:        #0A1A2F;
  --bg-2:      #0D2137;
  --bg-3:      #12293F;
  --bg-4:      #1A3550;
  --paper:     #F3F5F7;
  --paper-2:   #E4E8ED;

  /* marca — el verde PFI queda reservado a la interfaz, nunca a la foto */
  --brand:     #A9D77C;
  --brand-lt:  #BFE39B;
  --brand-dk:  #4E8A33;
  --mint:      #7FD6A8;

  /* azul de la fotografía */
  --steel:     #16304E;

  /* tinta */
  --txt:       #E9EDF3;
  --txt-2:     #A7B3C1;
  --txt-3:     #74818F;
  --ink:       #06101E;
  --ink-2:     #475A70;

  /* líneas */
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.06);
  --line-ink:  rgba(10,15,23,.12);

  /* tipografía — dos cortes de la misma familia visual.
     Instrument Serif manda en los titulares; Fraunces, que es del mismo
     mundo editorial de alto contraste pero está dibujada para leerse en
     tamaños pequeños y sí tiene pesos, se encarga de todo lo demás.
     Instrument Serif en cuerpo de texto cae a algo parecido a Times. */
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans:  "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:  "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* medidas */
  --pad:   clamp(20px, 5vw, 76px);
  --maxw:  1320px;
  --r:     2px;

  /* movimiento */
  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  /* Fraunces es variable: el eje óptico al máximo afina los trazos finos y
     sube el contraste, que es justo lo que da su carácter a los titulares.
     Con peso 320 el cuerpo de texto queda del mismo aire que Instrument Serif. */
  font-weight:320;
  font-variation-settings:"opsz" 144;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--brand); color:#0A1A2F; }

/* Rótulos pequeños en versalitas espaciadas: a ese tamaño el trazo fino
   desaparecería, así que llevan algo más de peso y un eje óptico intermedio. */
.kicker, .btn, .brand__txt, .nav a, .menu__foot,
.scard__n, .fig__l, .fig__n i, .person__role, .pfact dt,
.cdata__k, .crumbs, .detail__n, .tag, .svcnav a,
.ftr h5, .ftr__bar, .form__note, .form__msg, .field label,
.figure__tag, .ticker__item, .scrollcue, .svc__num,
.chart__head, .chart__axis, .chart__note, .chart__total .t-k,
.brow__pct, .brow__val, .skip, .step::before{
  font-weight:440;
  font-variation-settings:"opsz" 96;
}

/* El texto de entrada, al ir a mayor tamaño, admite el trazo más fino */
.lead, .band__claim, .rot__fix{ font-weight:300; }

/* ---------- 3. Utilidades ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(76px,10vw,150px); }
.section--tight{ padding-block:clamp(56px,7vw,100px); }

.kicker{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-lt);
  display:flex; align-items:center; gap:12px;
  font-weight:400;
}
.kicker::before{
  content:""; width:34px; height:1px; background:var(--brand); flex:none; opacity:.85;
}
.kicker--ink{ color:var(--brand-dk); }
.kicker--ink::before{ background:var(--brand-dk); }

.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.018em;
  font-size:clamp(2.6rem,6.4vw,5.3rem);
}
.h2{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.015em;
  font-size:clamp(2.1rem,4.4vw,3.6rem);
}
.h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.14;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:-.01em;
}
.lead{
  font-size:clamp(1.18rem,1.55vw,1.4rem);
  line-height:1.62;
  color:var(--txt-2);
  max-width:56ch;
}
.body{ color:var(--txt-2); max-width:66ch; }
.muted{ color:var(--txt-3); }
.on-paper{ background:var(--paper); color:var(--ink); }
.on-paper .lead,.on-paper .body{ color:var(--ink-2); }
.on-paper .muted{ color:var(--ink-2); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.on-paper .rule{ background:var(--line-ink); }

/* ---------- 4. Botones ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 28px;
  font-family:var(--mono);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--brand);
  transform:translateY(101%);
  transition:transform .5s var(--ease-o);
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateY(0); }
.btn:hover,.btn:focus-visible{ color:#0A1A2F; border-color:var(--brand); }
.btn--solid{ background:var(--brand); color:#0A1A2F; border-color:var(--brand); }
.btn--solid::after{ background:#EAEFEB; }
.btn--solid:hover,.btn--solid:focus-visible{ color:var(--ink); border-color:#EAEFEB; }
.btn--ink{ border-color:var(--line-ink); color:var(--ink); }
.btn--ink:hover,.btn--ink:focus-visible{ color:#0A1A2F; border-color:var(--brand); }
.btn__arrow{ width:14px; height:14px; flex:none; transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

/* ---------- 5. Splash ---------- */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:grid; place-items:center;
  animation:splashOut .8s var(--ease-o) 1.5s forwards;
}
#splash.is-done{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .7s var(--ease-o), visibility .7s; }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.splash__mark{
  width:74px; opacity:0;
  animation:splashMark 1.5s var(--ease-o) forwards;
}
@keyframes splashMark{
  0%{ opacity:0; transform:translateY(10px) scale(.96); }
  40%{ opacity:1; transform:none; }
  100%{ opacity:1; transform:none; }
}
.splash__bar{
  position:absolute; bottom:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--brand-dk),var(--brand),var(--mint));
  animation:splashBar 1.5s var(--ease) forwards;
}
@keyframes splashBar{ to{ width:100%; } }

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(10,26,47,.95);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:84px;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  transition:height .5s var(--ease);
}
.hdr.is-stuck .hdr__in{ height:70px; }
.brand{ display:flex; align-items:center; gap:14px; flex:none; }
.brand img{ width:56px; height:auto; transition:width .5s var(--ease); }
.hdr.is-stuck .brand img{ width:46px; }
.brand__txt{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3); line-height:1.5; max-width:140px;
  border-left:1px solid var(--line); padding-left:14px;
}
@media (max-width:900px){ .brand__txt{ display:none; } }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative;
  font-family:var(--mono); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 14px; color:var(--txt-2);
  transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-o);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--txt); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.hdr__cta{ margin-left:10px; padding:12px 22px; }
@media (max-width:1080px){ .nav,.hdr__cta{ display:none; } }

/* burger */
.burger{ display:none; width:44px; height:44px; position:relative; }
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--txt);
  transition:transform .4s var(--ease-o), opacity .3s;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:25px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
@media (max-width:1080px){ .burger{ display:block; } }

.menu{
  position:fixed; inset:0; z-index:880;
  background:var(--bg-2);
  padding:120px var(--pad) 48px;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease-o);
  overflow-y:auto;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); }
.menu a.menu__link{
  display:block; font-family:var(--serif); font-size:clamp(2rem,7vw,3.2rem);
  padding:10px 0; border-bottom:1px solid var(--line-2);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-o), color .3s;
}
body.menu-open .menu a.menu__link{ opacity:1; transform:none; }
body.menu-open .menu a.menu__link:nth-child(1){ transition-delay:.16s; }
body.menu-open .menu a.menu__link:nth-child(2){ transition-delay:.22s; }
body.menu-open .menu a.menu__link:nth-child(3){ transition-delay:.28s; }
body.menu-open .menu a.menu__link:nth-child(4){ transition-delay:.34s; }
.menu a.menu__link:hover{ color:var(--brand-lt); }
.menu__foot{ font-family:var(--mono); font-size:14px; color:var(--txt-3); line-height:2; }
.menu__foot a:hover{ color:var(--brand-lt); }

/* ---------- 7. Reveals ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-o), transform .9s var(--ease-o); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }
.reveal[data-d="5"]{ transition-delay:.45s; }

/* red de seguridad: si el JS falla, el texto partido sigue visible */
.reveal[data-split]{ opacity:1; transform:none; }
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-o);
}
.line-mask.in > span{ transform:none; }
.line-mask:nth-child(2) > span{ transition-delay:.09s; }
.line-mask:nth-child(3) > span{ transition-delay:.18s; }
.line-mask:nth-child(4) > span{ transition-delay:.27s; }

/* ---------- 8. Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:-8% 0 -8%; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 52%;
  /* Deriva continua muy lenta: da vida a la portada sin llamar la atención. */
  animation:heroDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.15) translate3d(-2%,-1.4%,0); }
}

/* ---- Video de portada ----
   El aéreo ya viene a la hora azul, en la misma familia fría que el resto
   del sitio, así que el tratamiento es mínimo: bajar un punto la saturación
   y oscurecer lo justo para que el titular blanco tenga contraste. Forzarlo
   a duotono aquí aplanaría los tonos naturales del material. ---- */
/* calibrado para la toma de Javier Prado: es una vista al atardecer y ya
   viene oscura, asi que el filtro deja de restarle luz y pasa a sumarla */
.hero__video{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  filter:saturate(.95) contrast(1.06) brightness(1.18);
  /* sin aumento: ampliar un 4% solo restaba nitidez; el video ya cubre */
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  /* el lateral sigue siendo firme -ahi se apoya el titular- y el vertical
     afloja, que es el que estaba tapando la ciudad */
  background:
    linear-gradient(180deg, rgba(10,26,47,.62) 0%, rgba(9,20,36,.08) 32%, rgba(10,26,47,.58) 74%, var(--bg) 100%),
    linear-gradient(92deg, rgba(10,26,47,.76) 0%, rgba(9,20,36,.06) 58%, rgba(10,26,47,.32) 100%);
}
@media (max-width:780px){
  .hero__veil{
    background:linear-gradient(180deg, rgba(10,26,47,.9) 0%, rgba(10,26,47,.66) 26%, rgba(10,26,47,.88) 70%, var(--bg) 100%);
  }
  .hero__bg img{ object-position:center 30%; }
}
/* ---- Movimiento de fondo de la portada ----
   Un barrido de luz que cruza la imagen cada ~22 s. Es atmósfera, no adorno:
   nada de gráficos bursátiles, que es justo el cliché que abarata las webs
   financieras. ---- */
.hero__sheen{
  position:absolute; top:-25%; bottom:-25%; left:-40%; right:-40%;
  z-index:1; pointer-events:none;
  background:linear-gradient(104deg,
    transparent 40%,
    rgba(186,216,255,.085) 47%,
    rgba(226,240,255,.13) 50%,
    rgba(186,216,255,.085) 53%,
    transparent 60%);
  animation:heroSheen 22s ease-in-out infinite;
}
@keyframes heroSheen{
  0%   { transform:translateX(-22%); opacity:0; }
  14%  { opacity:1; }
  84%  { opacity:1; }
  100% { transform:translateX(22%); opacity:0; }
}

/* El bloque se centra en la portada y el relleno de arriba vale lo que la
   cabecera fija, que es lo unico que se come espacio por ese lado. Con el
   relleno de abajo a cero, el hueco que queda a la vista arriba y abajo es
   identico sea cual sea la altura de la pantalla. */
.hero__in{ position:relative; z-index:2; width:100%; padding-block:88px 0; }
.hero h1{ margin:22px 0 0; max-width:16ch; }
.hero h1 em{ font-style:italic; color:var(--brand-lt); }
.hero__sub{ margin-top:26px; max-width:48ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.scrollcue{
  position:absolute; left:var(--pad); bottom:24px; z-index:3;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3); display:flex; align-items:center; gap:10px; opacity:.7;
}
.scrollcue i{
  display:block; width:1px; height:38px; transform-origin:top;
  background:linear-gradient(180deg,var(--brand),transparent);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }
@media (max-width:1079px){ .scrollcue{ display:none; } }

/* ---------- 12. Servicios (tarjetas con imagen) ---------- */
.svcgrid{
  display:grid; gap:12px;
  margin-top:clamp(40px,5vw,68px);
  grid-template-columns:minmax(0,1fr);
}
/* Mosaico de dos columnas, no una fila de cinco. Con cinco tarjetas en linea
   la fotografia quedaba en una franja estrecha y la seccion repetia el mismo
   trazo horizontal que las dos siguientes. En dos columnas cada imagen
   respira, y la quinta cierra a lo ancho. */
@media (min-width:640px){ .svcgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }

.scard{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between; gap:30px;
  min-height:300px; padding:20px 20px 22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--bg-2);
  transition:border-color .45s var(--ease), transform .5s var(--ease-o);
}
.scard__img{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.scard__img img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55; filter:saturate(.62) brightness(.9);
  transition:transform 1.4s var(--ease-o), opacity .55s var(--ease), filter .55s var(--ease);
}
.scard__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,16,30,.22) 0%, rgba(6,11,20,.72) 52%, rgba(5,9,16,.93) 100%);
}
.scard:hover,.scard:focus-visible{ border-color:rgba(191,227,155,.5); transform:translateY(-5px); }
.scard:hover .scard__img img,
.scard:focus-visible .scard__img img{ transform:scale(1.07); opacity:.78; filter:saturate(.9) brightness(1); }
.scard::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-o);
}
.scard:hover::after,.scard:focus-visible::after{ transform:scaleX(1); }

.scard__n{ position:relative; z-index:1; font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; color:var(--brand-lt); }
.scard__body{ position:relative; z-index:1; display:block; }
.scard__t{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.22rem,1.5vw,1.42rem); line-height:1.14; letter-spacing:-.008em;
  text-wrap:balance;
}
.scard__d{
  display:block; margin-top:10px;
  font-size:15.5px; line-height:1.6; color:var(--txt-2);
  max-width:34ch;
}
.scard__go{
  position:absolute; right:20px; bottom:22px; z-index:1;
  width:15px; height:15px; color:var(--txt-3);
  transition:color .4s var(--ease), transform .4s var(--ease-o);
}
.scard:hover .scard__go,.scard:focus-visible .scard__go{ color:var(--brand-lt); transform:translateX(4px); }
/* el texto deja sitio a la flecha */
.scard__d{ padding-right:26px; }

/* La quinta no se queda sola: ocupa las dos columnas y hace de cierre */
@media (min-width:640px){
  .scard{ min-height:340px; }
  .scard:last-child{ grid-column:span 2; min-height:256px; }
}
@media (max-width:639px){
  .scard{ min-height:238px; gap:22px; }
}

/* ---------- 11b. Banda de cifras ---------- */
.figures{ position:relative; overflow:hidden; }
.figures__bg{ position:absolute; inset:0; z-index:0; }
.figures__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 48%;
  filter:saturate(.9) contrast(1.02) brightness(1.16);
}
/* Las pantallas de mercado ya vienen casi negras: el velo de antes las
   borraba. Aflojado, los graficos se intuyen detras de las cifras sin
   quitarle contraste a los numeros. */
.figures__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10,26,47,.72) 22%, rgba(10,26,47,.76) 78%, var(--bg) 100%),
    linear-gradient(92deg, rgba(8,20,38,.58) 0%, rgba(8,20,38,.24) 58%, rgba(8,20,38,.44) 100%);
}.figures__in{ position:relative; z-index:1; padding-block:clamp(72px,9vw,128px); }

/* Sin recuadros: Servicios y Transacciones ya son filas de tarjetas. Aquí la
   cifra se apoya directamente sobre la fotografía, separada solo por filetes.
   Es otro registro —tipografía sobre imagen— y rompe la repetición. */
/* Titular a un lado y las cifras en dos por dos al otro. En una fila de
   cuatro la seccion repetia el trazo horizontal de Servicios y Operaciones;
   partida en dos, los numeros ganan ancho y el bloque cambia de forma. */
.figsplit{ display:grid; gap:clamp(30px,4vw,60px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:980px){ .figsplit{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }
.figsplit__head .h2{ margin-top:22px; }

.figures__grid{
  display:grid; gap:clamp(30px,3.6vw,46px) 0;
  margin-top:clamp(26px,3vw,40px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:600px){ .figures__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .figures__grid{ margin-top:6px; } }

.fig{
  position:relative;
  padding:4px 0 0;
  padding-left:clamp(0px,2.6vw,34px);
}
/* filete vertical de separación, nunca antes de la primera */
@media (min-width:600px){
  .fig:nth-child(2n)::after{
    content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--line);
  }
}
@media (min-width:600px){
  /* en la rejilla de dos, las de la derecha llevan sangria y filete */
  .fig:nth-child(2n){ padding-left:clamp(20px,2.6vw,34px); }
}
/* la regla de marca se dibuja sobre cada cifra al entrar en pantalla */
.fig::before{
  content:""; position:absolute; left:0; top:0;
  height:2px; width:0; background:var(--brand);
  transition:width 1.1s var(--ease-o) .25s;
}
@media (min-width:600px){ .fig:nth-child(2n)::before{ left:clamp(20px,2.6vw,34px); } }
.fig.in::before{ width:46px; }
.fig__n{
  margin:0; display:flex; align-items:baseline; gap:3px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.6rem,6.6vw,5.6rem); line-height:1; letter-spacing:-.03em;
  margin-top:24px;
  /* cifras tabulares: sin esto el número baila de ancho a cada paso */
  font-variant-numeric:tabular-nums;
  /* la cifra entra desde abajo, un paso por detrás del recuadro */
  opacity:0; transform:translateY(20px);
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease-o) .1s;
}
.fig.in .fig__n{ opacity:1; transform:none; }
/* mientras cuenta, el dígito late muy levemente: el movimiento se ve
   incluso en las cifras de un solo dígito, donde los pasos son pocos */
.fig__n span[data-count].is-counting{
  animation:countPulse 1.15s ease-in-out infinite;
  color:var(--txt);
}
@keyframes countPulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.72; }
}
.fig__n i{
  font-style:normal; font-family:var(--mono); font-weight:400;
  font-size:.3em; letter-spacing:.02em; color:var(--brand);
  transform:translateY(-.15em);
}
.fig__l{
  margin-top:20px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  /* sobre fotografía, el gris de apoyo se pierde: sube un escalón */
  color:var(--txt-2); line-height:1.8; max-width:22ch;
}

/* ---------- 9. Ticker ---------- */
.ticker{ border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding-block:16px; }
.ticker__track{ display:flex; gap:0; width:max-content; animation:tick 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-50%); } }
.ticker__item{
  font-family:var(--mono); font-size:13.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3); padding-inline:34px; white-space:nowrap;
  display:flex; align-items:center; gap:34px;
}
.ticker__item::after{ content:""; width:4px; height:4px; background:var(--brand); border-radius:50%; }

/* ---------- 10. Intro / Quiénes somos ---------- */
.split{ display:grid; gap:clamp(36px,5vw,70px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:980px){ .split{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
@media (min-width:980px){ .split--flip{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }

/* ---- Tratamiento unificado de fotografía ----
   Todas las fotos del sitio pasan por el mismo velo azul frío. Es lo que
   hace que se lean como una sola familia y deja el verde PFI libre para
   la interfaz: títulos de sección, cifras, botones y líneas. ---- */
.figure img,
.detail__media img,
.phead__bg img,
.band__bg img,
.hero__bg img{ filter:saturate(.78) contrast(1.04) brightness(.95); }

.figure::after,
.detail__media::before,
.band__bg::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(175deg, rgba(22,48,78,.26), rgba(8,16,28,.42));
}

.figure{ position:relative; overflow:hidden; border-radius:var(--r); }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-o); }
.figure:hover img{ transform:scale(1.035); }
.figure--tall{ aspect-ratio:4/5; }
.figure--wide{ aspect-ratio:16/10; }
.figure__tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(10,26,47,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); padding:8px 14px; color:var(--txt-2);
}


/* ---------- 12. Servicios (lista editorial) ---------- */
.svc{ border-top:1px solid var(--line); }
.on-paper .svc{ border-top-color:var(--line-ink); }
.svc__row{
  position:relative; display:block;
  border-bottom:1px solid var(--line);
  padding-block:clamp(26px,3.4vw,42px);
  transition:padding-left .55s var(--ease-o);
}
.on-paper .svc__row{ border-bottom-color:var(--line-ink); }
.svc__row:hover{ padding-left:clamp(10px,1.6vw,26px); }
.svc__row::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--brand);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-o);
}
.svc__row:hover::before{ transform:scaleX(1); }
.svc__head{ display:grid; gap:14px 28px; grid-template-columns:minmax(0,1fr); align-items:baseline; }
@media (min-width:860px){ .svc__head{ grid-template-columns:64px minmax(0,.95fr) minmax(0,1.15fr) 40px; } }
.svc__num{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--brand); }
.svc__name{ font-family:var(--serif); font-size:clamp(1.6rem,2.9vw,2.5rem); line-height:1.08; letter-spacing:-.012em; }
.svc__desc{ color:var(--txt-2); font-size:16.5px; line-height:1.7; }
.on-paper .svc__desc{ color:var(--ink-2); }
.svc__go{ justify-self:end; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:background .4s var(--ease), border-color .4s, transform .4s var(--ease-o); }
.on-paper .svc__go{ border-color:var(--line-ink); }
.svc__row:hover .svc__go{ background:var(--brand); border-color:var(--brand); transform:rotate(-45deg); }
.svc__row:hover .svc__go svg{ color:#0A1A2F; }
@media (max-width:859px){ .svc__go{ display:none; } }

/* preview flotante en hover (solo desktop) */
.svc__peek{
  position:fixed; top:0; left:0; z-index:700; pointer-events:none;
  width:230px; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r);
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.92);
  transition:opacity .45s var(--ease), transform .55s var(--ease-o);
  border:1px solid var(--line);
}
.svc__peek.on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.svc__peek img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s; }
.svc__peek img.on{ opacity:1; }
@media (max-width:1080px), (hover:none){ .svc__peek{ display:none; } }

/* ---------- 12b. Tombstones ----------
   La ficha conmemorativa clásica de banca de inversión: importe, operación,
   fecha y quién hizo qué. Se construye con tipografía, no con la foto del
   trofeo: así se ve nítida en cualquier pantalla y todas quedan iguales. */
.carousel{ position:relative; margin-top:clamp(40px,5vw,66px); }
.carousel__track{
  display:flex; gap:15px;
  /* proximity y no mandatory: el ajuste automático del navegador pelearía
     con el desplazamiento que controla el guion */
  overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:4px;
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track:focus-visible{ outline:2px solid var(--brand); outline-offset:6px; }

/* Ficha en claro: los logotipos de los clientes están dibujados para fondo
   blanco, así que cualquiera funciona sin retoques. Y el contraste contra la
   sección oscura es lo que da vida a la franja. */
.tomb{
  scroll-snap-align:start; flex:0 0 auto;
  width:min(300px, 76vw);
  display:flex; flex-direction:column;
  padding:22px 22px 24px;
  border-radius:var(--r);
  /* El blanco puro saltaba demasiado contra la sección oscura. El papel lleva
     ahora el mismo velo azul frío que la fotografía del sitio: baja el brillo
     sin tocar los colores de los logotipos, que van encima. */
  background:linear-gradient(168deg, #E7ECF2 0%, #D9E0E9 46%, #C9D2DE 100%);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 18px 40px -26px rgba(0,0,0,.9);
  transition:transform .5s var(--ease-o), box-shadow .5s var(--ease);
  position:relative; overflow:hidden;
}
/* filete de marca en el canto superior */
.tomb::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--brand-dk), var(--brand) 55%, var(--brand-lt));
}
.tomb:hover{ transform:translateY(-6px); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 26px 52px -24px rgba(0,0,0,1); }

/* Fondo temático de cada operación: entra por debajo del filete del
   logotipo y baja hasta el pie de la ficha. Va muy lavado y en clave fría
   —es una marca de agua, no una fotografía— porque encima hay texto en
   tinta oscura que tiene que seguir leyéndose sin esfuerzo. Si el archivo
   no existe, el propio onerror retira la capa y la ficha queda como antes. */
.tomb__fondo{
  position:absolute; left:0; right:0; top:78px; bottom:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.tomb__fondo img{
  width:100%; height:100%; object-fit:cover;
  opacity:.23; filter:saturate(.34) contrast(1.02);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%);
  mask-image:linear-gradient(180deg, transparent 0, #000 22%);
}
.tomb > *:not(.tomb__fondo){ position:relative; z-index:1; }

.tomb__logo{
  display:grid; place-items:center;
  height:56px; margin-bottom:18px;
  border-bottom:1px solid rgba(10,15,23,.10);
  padding-bottom:16px;
}
.tomb__logo img{ max-height:40px; width:auto; object-fit:contain; }
/* los logotipos apilados (marca sobre nombre) ocupan menos ancho a igual
   altura: se les da algo más de cuerpo para que pesen como los demás */
.tomb__logo--apilado img{ max-height:52px; }
/* marcas que vienen como placa sólida (blanco sobre negro): se respeta el
   fondo, porque sin él el logotipo desaparecería sobre el papel claro */
.tomb__logo--placa img{ max-height:50px; border-radius:3px; }
/* nombre compuesto, para las operaciones cuyo logotipo aún no tenemos */
.tomb__wordmark{
  font-family:var(--serif); font-size:1.35rem; line-height:1.18;
  letter-spacing:-.01em; color:var(--ink); text-align:center;
}

.tomb__amount{
  font-family:var(--serif); font-size:clamp(1.62rem,2.5vw,1.98rem); line-height:1.04;
  letter-spacing:-.02em; color:var(--ink);
}
.tomb__deal{ margin-top:10px; font-size:14.5px; line-height:1.42; color:var(--ink); max-width:26ch; }
.tomb__type{
  margin-top:7px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); font-weight:440;
}
.tomb__roles{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(10,15,23,.10); display:grid; gap:11px; }
.tomb__roles > div{ display:grid; gap:2px; }
.tomb__roles dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); font-weight:440;
}
.tomb__roles dd{ margin:0; font-size:13px; line-height:1.38; color:var(--ink); }

/* el grupo economico al que pertenece la operacion: cierra la ficha en
   negrita, separado por un filete, con el mismo cuerpo de los rotulos */
.tomb__grupo{
  margin:16px 0 0; padding-top:14px;
  border-top:1px solid rgba(10,15,23,.10);
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}

/* Espacios reservados: mismo cuerpo, sin peso visual, sin sombra */
.tomb--vacio{
  background:none;
  border:1px dashed rgba(255,255,255,.14);
  box-shadow:none;
  align-items:center; justify-content:center;
  min-height:290px;
}
.tomb--vacio::before{ display:none; }
.tomb--vacio:hover{ transform:none; box-shadow:none; }
.tomb--vacio .tomb__logo{ border:0; height:auto; padding:0; margin:0; }
.tomb__espera{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); font-weight:440; opacity:.55;
}

.carousel__nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:26px;
}
.carousel__dots{ display:flex; gap:8px; }
.carousel__dot{
  width:26px; height:3px; border-radius:2px;
  background:var(--line); transition:background .4s var(--ease), width .4s var(--ease-o);
}
.carousel__dot.on{ background:var(--brand); width:44px; }
.carousel__btns{ display:flex; gap:8px; }
.carousel__btn{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r); color:var(--txt-2);
  transition:background .35s var(--ease), border-color .35s, color .35s, opacity .35s;
}
.carousel__btn svg{ width:16px; height:16px; }
.carousel__btn:hover{ background:var(--brand); border-color:var(--brand); color:#0A1A2F; }
/* con una sola ficha las flechas sobran */
.carousel--single .carousel__nav{ display:none; }

/* ---- Operaciones sobre papel ----
   La seccion cambia de material: fondo claro y fichas en blanco. Es el
   tercer registro de la pagina -oscuro, fotografia, papel- y evita que
   Servicios, Cifras y Operaciones se lean como el mismo bloque tres veces.
   Sobre claro, el velo azul de la ficha sobraba: se va a blanco de imprenta. */
.on-paper .tomb{
  background:linear-gradient(168deg, #FFFFFF 0%, #FBFCFE 54%, #F1F4F8 100%);
  border:1px solid rgba(10,15,23,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 20px 44px -30px rgba(10,20,35,.55);
}
.on-paper .tomb:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 30px 58px -30px rgba(10,20,35,.6);
}
.on-paper .carousel__dot{ background:rgba(10,15,23,.16); }
.on-paper .carousel__dot.on{ background:var(--brand-dk); }
.on-paper .carousel__btn{ border-color:var(--line-ink); color:var(--ink-2); }
.on-paper .carousel__btn:hover{ background:var(--brand-dk); border-color:var(--brand-dk); color:#FFFFFF; }
.on-paper .carousel__track:focus-visible{ outline-color:var(--brand-dk); }

/* El carrusel contenido en el mismo ancho que el resto de la pagina: los
   mismos margenes a izquierda y derecha que el titular y el texto. Antes se
   escapaba por el borde derecho y la seccion quedaba descentrada. */
.carousel__track{ scroll-padding-left:0; }

/* Que no quede ninguna ficha cortada por el borde: el ancho se calcula para
   que entre un numero exacto de fichas en el espacio disponible, descontando
   los huecos de 15px. En pantallas pequenas se deja asomar la siguiente,
   porque ahi ese recorte se lee como "hay mas, desliza" y no como un fallo. */
@media (min-width:1100px){
  .tomb{ width:calc((100% - 45px) / 4); }
}
@media (min-width:780px) and (max-width:1099px){
  .tomb{ width:calc((100% - 30px) / 3); }
}
@media (min-width:560px) and (max-width:779px){
  .tomb{ width:calc((100% - 15px) / 2); }
}

/* ---------- 13. Track record / gráfico de barras ----------
   Una sola serie (magnitud), así que un solo tono de marca y la longitud
   haciendo todo el trabajo. La escala va de 0 al sector mayor y queda
   declarada bajo el gráfico; el porcentaje es una lectura aparte. */
.chart{ margin-top:clamp(36px,4vw,56px); }
.chart__head,
.brow{
  display:grid;
  grid-template-columns:minmax(104px,1.05fr) minmax(0,3fr) 58px 118px;
  gap:4px 22px; align-items:center;
}
.chart__head{
  padding-bottom:13px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3);
}
.chart__head span:nth-child(3),
.chart__head span:nth-child(4){ text-align:right; }

.brow{
  padding-block:14px; border-bottom:1px solid var(--line-2);
  transition:background .3s var(--ease);
}
.brow:hover{ background:rgba(169,215,124,.05); }
.brow__label{ font-size:16.5px; color:var(--txt); }

/* la pista lleva marcas de escala tenues cada 25 % */
.brow__plot{
  position:relative; height:10px; border-radius:5px;
  background-image:linear-gradient(to right, rgba(255,255,255,.085) 1px, transparent 1px);
  background-size:25% 100%;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.085);
}
.brow__bar{
  display:block; height:100%; width:0%; border-radius:5px;
  background:linear-gradient(90deg, #4E8A33 0%, #6FAF4C 52%, #A9D77C 100%);
  transition:width 1.4s var(--ease-o), filter .3s var(--ease);
}
.brow:hover .brow__bar{ filter:brightness(1.18); }
.brow__pct{ font-family:var(--mono); font-size:15px; color:var(--brand-lt); text-align:right; white-space:nowrap; }
.brow__val{ font-family:var(--mono); font-size:15px; color:var(--txt-2); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

.chart__axis{
  display:grid; grid-template-columns:minmax(104px,1.05fr) minmax(0,3fr) 58px 118px; gap:22px;
  margin-top:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--txt-3);
}
.chart__axis span:nth-child(2){ display:flex; justify-content:space-between; }

.chart__total{
  display:grid; grid-template-columns:minmax(104px,1.05fr) minmax(0,3fr) 58px minmax(118px,auto); gap:22px;
  align-items:baseline; margin-top:26px; padding-top:24px; border-top:1px solid var(--line);
}
.chart__total .t-k{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3); }
.chart__total .t-pct{ font-family:var(--mono); font-size:15px; color:var(--brand-lt); text-align:right; }
.chart__total .t-v{
  font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2rem); color:var(--txt);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1;
}
.chart__axis span i{ font-style:normal; }
.chart__axis span:nth-child(2) i:first-child{ margin-left:-2px; }
.chart__note{ margin-top:20px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--txt-3); line-height:1.8; }

/* en pantallas estrechas la fila se parte en dos niveles */
@media (max-width:860px){
  .chart__head{ grid-template-columns:1fr auto; }
  .chart__head span:nth-child(2){ display:none; }
  .chart__head span:nth-child(3){ text-align:right; }
  .chart__head span:nth-child(4){ display:none; }
  .brow{ grid-template-columns:1fr auto auto; gap:8px 14px; }
  .brow__label{ grid-column:1; }
  .brow__pct{ grid-column:2; }
  .brow__val{ grid-column:3; }
  .brow__plot{ grid-column:1 / -1; margin-top:4px; }
  .chart__axis{ grid-template-columns:1fr; }
  .chart__axis span:nth-child(1),.chart__axis span:nth-child(3),.chart__axis span:nth-child(4){ display:none; }
  .chart__total{ grid-template-columns:1fr auto; }
  .chart__total .t-pct{ display:none; }
}

/* ---------- 14. Misión / Visión ----------
   Las dos frases son el corazón de la página, así que no van como dos
   cajas gemelas alineadas: la segunda baja medio cuerpo, cada una lleva
   su número, su marca de agua y un barrido de luz que recorre la tarjeta
   en bucle. El movimiento es de CSS puro (no de fotogramas), así que
   sigue corriendo aunque la página esté embebida o en segundo plano. */
.mvs{ position:relative; overflow:hidden; background:var(--bg-2); }
.mvs__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:64vw; max-width:820px; aspect-ratio:1; left:-22%; top:-28%; border-radius:50%;
  background:radial-gradient(circle, rgba(169,215,124,.085), transparent 66%);
  filter:blur(16px);
}
.mvs .wrap{ position:relative; z-index:1; }

.mv2{ display:grid; gap:14px; margin-top:clamp(40px,5vw,72px); }
@media (min-width:900px){
  .mv2{ grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); align-items:start; }
  .mv2__c--b{ margin-top:clamp(40px,6vw,88px); }
}
.mv2__c{
  position:relative; overflow:hidden;
  padding:clamp(32px,4vw,56px);
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(158deg, var(--bg-3) 0%, var(--bg-2) 74%);
  transition:border-color .7s var(--ease-o), transform .8s var(--ease-o);
}
.mv2__c:hover{ border-color:rgba(169,215,124,.34); transform:translateY(-4px); }
/* marca de agua: la palabra en serif contorneada, al margen */
.mv2__c::before{
  content:attr(data-mark);
  position:absolute; right:-.1em; bottom:-.44em; z-index:0;
  font-family:var(--serif); font-size:clamp(5.4rem,11vw,9.5rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(191,227,155,.12);
  letter-spacing:-.02em; pointer-events:none; user-select:none;
}
/* barrido de luz continuo */
.mv2__c::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0; left:-60%; width:44%;
  background:linear-gradient(100deg, transparent, rgba(191,227,155,.08) 42%, rgba(233,237,243,.06) 56%, transparent);
  animation:mvSheen 9s ease-in-out infinite;
}
.mv2__c--b::after{ animation-delay:4.5s; }
@keyframes mvSheen{ 0%{ left:-60%; } 52%{ left:120%; } 100%{ left:120%; } }
.mv2__c > *{ position:relative; z-index:1; }
.mv2__n{
  display:block; margin-bottom:20px;
  font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--brand);
  font-weight:440; font-variation-settings:"opsz" 96;
}
.mv2__q{
  margin-top:24px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.42rem,2.3vw,2rem); line-height:1.3; letter-spacing:-.01em;
  color:var(--txt); max-width:25ch;
}
.mv2__q em{ font-style:italic; color:var(--brand-lt); }
.mv2__f{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); font-weight:440; font-variation-settings:"opsz" 96;
}

/* ---------- 15. Valores ---------- */
.vals{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(36px,4vw,56px); }
@media (min-width:680px){ .vals{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .vals{ grid-template-columns:repeat(3,1fr); } }
.val{ background:var(--bg); padding:clamp(26px,3vw,36px); position:relative; overflow:hidden; }
.val::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-o);
}
.val:hover::after{ transform:scaleX(1); }
.val__i{ width:26px; height:26px; color:var(--brand); }
.val h4{ margin:18px 0 0; font-family:var(--serif); font-size:1.28rem; font-weight:400; line-height:1.2; }
.val p{ margin-top:10px; font-size:16.5px; color:var(--txt-2); line-height:1.7; }

/* ---------- 16. Socios ----------
   Dos retratos en cuadro con el nombre sobre la propia foto. La biografía
   completa no vive aquí: junto al retrato el texto largo lo ahogaba. Se abre
   en un panel lateral al pulsar la ficha. */
.team{
  display:grid; gap:clamp(20px,2.4vw,30px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(40px,5vw,64px);
  max-width:880px;
}
@media (min-width:640px){ .team{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.pcard{
  position:relative; display:block; width:100%; padding:0;
  border:0; background:none; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  border-radius:var(--r); overflow:hidden;
  transition:transform .55s var(--ease-o);
}
.pcard:hover{ transform:translateY(-5px); }
.pcard:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.pcard__ph{
  position:relative; display:block; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(158deg, var(--bg-4), var(--bg-2) 72%);
}
.pcard__ph img{
  position:absolute; inset:0; width:100%; height:100%;
  /* los dos retratos están recortados a 4:5 exacto y con la cabeza a la
     misma altura relativa, así que aquí no hace falta reencuadrar nada */
  object-fit:cover; object-position:center;
  filter:saturate(.72) contrast(1.03) brightness(.9);
  transform:scale(1.01);
  transition:transform 1.4s var(--ease-o), filter .7s var(--ease);
}
.pcard:hover .pcard__ph img{ transform:scale(1.07); filter:saturate(.9) contrast(1.04) brightness(1); }
/* velo azul de la casa + apagado inferior para que el nombre se lea */
.pcard__ph::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 40%, rgba(10,26,47,.92) 100%),
    linear-gradient(172deg, rgba(22,48,78,.26), rgba(8,16,28,.30));
}
/* filete de marca que se llena al pasar el cursor */
.pcard__ph::before{
  content:""; position:absolute; left:0; bottom:0; z-index:3;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--brand-dk), var(--brand) 55%, var(--brand-lt));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-o);
}
.pcard:hover .pcard__ph::before,
.pcard:focus-visible .pcard__ph::before{ transform:scaleX(1); }

.pcard__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:grid; gap:7px;
  padding:24px clamp(20px,2.4vw,28px) 26px;
  transition:transform .55s var(--ease-o);
}
.pcard:hover .pcard__meta{ transform:translateY(-6px); }
.pcard__name{
  font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.62rem);
  line-height:1.12; color:var(--txt);
}
.pcard__role{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand-lt); font-weight:440; font-variation-settings:"opsz" 96;
}
.pcard__ver{
  margin-top:8px; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:440; font-variation-settings:"opsz" 96;
  color:var(--txt-2); opacity:0; transform:translateY(7px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-o);
}
.pcard:hover .pcard__ver,
.pcard:focus-visible .pcard__ver{ opacity:1; transform:none; }
.pcard__ver svg{ width:15px; height:15px; }

/* ---- Panel lateral con el perfil completo ---- */
.drawer{ position:fixed; inset:0; z-index:1200; }
.drawer[hidden]{ display:none; }
.drawer__scrim{
  position:absolute; inset:0;
  background:rgba(4,7,12,.74);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s var(--ease);
}
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(640px, 94vw);
  background:var(--bg-2); border-left:1px solid var(--line);
  box-shadow:-30px 0 80px -44px rgba(0,0,0,1);
  transform:translateX(100%);
  transition:transform .5s var(--ease-o);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__bar{
  position:sticky; top:0; z-index:2;
  display:flex; justify-content:flex-end;
  padding:16px 18px 10px;
  background:linear-gradient(180deg, var(--bg-2) 66%, transparent);
}
.drawer__x{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(10,26,47,.55); color:var(--txt-2); cursor:pointer;
  transition:border-color .35s var(--ease), color .35s, background .35s;
}
.drawer__x:hover{ border-color:rgba(169,215,124,.5); color:var(--brand-lt); background:rgba(169,215,124,.06); }
.drawer__x svg{ width:16px; height:16px; }
.drawer__in{ padding:0 clamp(22px,4vw,46px) clamp(44px,6vw,70px); }
.drawer__ph{
  position:relative; margin:0 0 28px;
  width:min(210px,52%); aspect-ratio:4/5;
  border-radius:var(--r); overflow:hidden;
}
.drawer__ph img{
  width:100%; height:100%; object-fit:cover; object-position:center 14%;
  filter:saturate(.78) contrast(1.03) brightness(.95);
}
.drawer__ph::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--brand-dk), var(--brand) 55%, var(--brand-lt));
}
.drawer .person__name{ margin-top:8px; }
.drawer .pfacts{ margin-top:32px; }
body.sin-scroll{ overflow:hidden; }

.person__role{ font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-lt); }
.person__name{ font-family:var(--serif); font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1.1; margin-top:10px; letter-spacing:-.012em; }
.person__bio{ margin-top:18px; font-size:16.5px; line-height:1.72; color:var(--txt-2); max-width:58ch; }
.person__bio + .person__bio{ margin-top:14px; }

/* credenciales tabuladas */
.pfacts{ margin-top:28px; border-top:1px solid var(--line-2); }
.pfact{
  display:grid; gap:3px 26px; grid-template-columns:minmax(0,1fr);
  padding:13px 0; border-bottom:1px solid var(--line-2);
}
@media (min-width:600px){ .pfact{ grid-template-columns:104px minmax(0,1fr); align-items:baseline; } }
.pfact dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); line-height:1.9;
}
.pfact dd{ margin:0; font-size:16.5px; line-height:1.62; color:var(--txt); }

.person__links{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; font-family:var(--mono); font-size:13.5px; letter-spacing:.08em; }
.person__links a,
.person__links .person__mail{ color:var(--txt-3); display:inline-flex; align-items:center; gap:8px; transition:color .35s; }
/* el correo se muestra pero no es enlace: se puede seleccionar y copiar,
   y no lanza el gestor de correo de nadie */
.person__links .person__mail{ cursor:text; user-select:text; -webkit-user-select:text; }
.person__links a:hover{ color:var(--brand-lt); }
.person__links svg{ width:14px; height:14px; }


/* ---------- 16b. Pilares en tarjeta ----------
   Icono, numero y una frase corta, con la fotografia detras muy apagada.
   La imagen no ilustra el concepto -son ideas abstractas y una foto literal
   seria ruido-: hace de material, y el icono es el que carga el significado.
   Tres arriba y dos abajo, para no repetir el mosaico de la portada. */
.pilc__grid{
  display:grid; gap:14px;
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(38px,4.5vw,60px);
}
@media (min-width:720px){
  .pilc__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .pilc{ grid-column:span 3; }
}
@media (min-width:1080px){
  .pilc{ grid-column:span 2; }
  .pilc:nth-child(4), .pilc:nth-child(5){ grid-column:span 3; }
}

.pilc{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:228px; padding:22px 22px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2);
  transition:border-color .45s var(--ease), transform .5s var(--ease-o);
}
.pilc:hover{ border-color:rgba(147,202,82,.42); transform:translateY(-4px); }
.pilc:hover .pilc__n{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--brand-lt);
  font-weight:440; font-variation-settings:"opsz" 96;
}
.pilc__i{ width:26px; height:26px; color:var(--brand-lt); margin-top:auto; }
.pilc__t{
  margin-top:14px; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.24rem,1.6vw,1.46rem); line-height:1.16; letter-spacing:-.008em;
}
.pilc__d{ margin-top:10px; font-size:15px; line-height:1.62; color:var(--txt-2); max-width:44ch; }

/* La tarjeta va en el azul de la pagina sobre el papel claro: blanco sobre
   blanco no separaba nada. Invertida, la seccion clara hace de mesa y cada
   pilar se levanta sobre ella. Los colores de dentro vuelven a los del
   sistema oscuro, porque .on-paper tine de tinta todo lo que no se declare. */
.on-paper .pilc{
  background:linear-gradient(168deg, var(--bg-3) 0%, var(--bg-2) 74%);
  border-color:rgba(10,15,23,.16);
  box-shadow:0 22px 46px -30px rgba(10,20,35,.6);
}
.on-paper .pilc:hover{
  border-color:rgba(147,202,82,.42);
  box-shadow:0 30px 58px -28px rgba(10,20,35,.65);
}
.on-paper .pilc__n,
.on-paper .pilc__i{ color:var(--brand-lt); }
.on-paper .pilc__t{ color:var(--txt); }
.on-paper .pilc__d{ color:var(--txt-2); }
/* ---------- 17. Proceso ---------- */
.steps{ counter-reset:s; margin-top:clamp(36px,4vw,56px); border-top:1px solid var(--line-ink); }
.step{ counter-increment:s; display:grid; gap:8px 32px; grid-template-columns:minmax(0,1fr); padding-block:26px; border-bottom:1px solid var(--line-ink); }
@media (min-width:820px){ .step{ grid-template-columns:80px minmax(0,.8fr) minmax(0,1.4fr); align-items:baseline; } }
.step::before{ content:"0" counter(s); font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--brand-dk); }
.step h4{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); font-weight:400; line-height:1.2; }
.step p{ color:var(--ink-2); font-size:16.5px; line-height:1.7; }

/* ---------- 18. CTA / Contacto ---------- */
.cta{ position:relative; overflow:hidden; background:var(--bg-2); }
.cta__glow{
  position:absolute; z-index:0; width:70vw; height:70vw; max-width:900px; max-height:900px;
  right:-18%; top:-30%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(169,215,124,.16), rgba(127,214,168,.06) 42%, transparent 68%);
  filter:blur(20px);
}
.cta__in{ position:relative; z-index:1; }
.contact{ display:grid; gap:clamp(36px,5vw,64px); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){ .contact{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }

.cdata{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:30px; }
.cdata__row{ padding:18px 0; border-bottom:1px solid var(--line-2); display:grid; gap:4px; }
.cdata__k{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); }
.cdata__v{ font-size:17.5px; color:var(--txt); }
.cdata__v a{ transition:color .35s; border-bottom:1px solid transparent; }
.cdata__v a:hover{ color:var(--brand-lt); border-bottom-color:var(--brand); }

.form{ display:grid; gap:0; }
.field{ position:relative; border-bottom:1px solid var(--line); }
.field label{
  position:absolute; left:0; top:22px; pointer-events:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
  transition:transform .45s var(--ease-o), color .35s, font-size .35s;
  transform-origin:left top;
}
.field input,.field textarea,.field select{
  width:100%; background:none; border:0; outline:0;
  color:var(--txt); font-family:var(--sans); font-size:17.5px;
  padding:30px 0 14px;
  border-radius:0;
}
.field textarea{ resize:vertical; min-height:110px; }
.field select{ font-family:var(--sans); color:var(--txt); cursor:pointer; }
.field select option{ background:var(--bg-2); color:var(--txt); }
.field.is-filled label,.field input:focus + label,.field textarea:focus + label,.field select:focus + label{
  transform:translateY(-16px) scale(.86); color:var(--brand-lt);
}
.field select + label{ transform:translateY(-16px) scale(.86); }
.field:focus-within{ border-bottom-color:var(--brand); }
.form__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.form__note{ margin-top:18px; font-family:var(--mono); font-size:12.5px; line-height:1.8; color:var(--txt-3); }
.form__msg{ margin-top:16px; font-family:var(--mono); font-size:13.5px; color:var(--brand-lt); min-height:1.4em; }

/* ---------- 19. Footer ---------- */
.ftr{ background:var(--bg); border-top:1px solid var(--line); padding-top:clamp(56px,6vw,84px); }
.ftr__grid{ display:grid; gap:clamp(30px,3.2vw,46px); grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){
  /* cuarta columna para el Libro de Reclamaciones, al lado de Servicios.
     Servicios necesita aire: «Financiamiento estructural» no debe partirse. */
  .ftr__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.7fr) minmax(0,1.1fr) auto; }
  /* esta columna ya no lleva rótulo: se compensa el alto que ocupaba para
     que las cajas arranquen a la altura de los enlaces vecinos */
  .ftr__libro{ padding-top:37px; }
}
.ftr__logo{ width:70px; }
.ftr p{ margin-top:22px; color:var(--txt-3); font-size:16.5px; max-width:44ch; line-height:1.75; }
/* Datos de la empresa: razón social, contacto directo y domicilio, cada
   línea con su icono para que se lean de un vistazo y no como un párrafo */
.ftr__addr{
  margin-top:22px; font-style:normal;
  display:grid; gap:13px;
  color:var(--txt-3); font-size:16px; line-height:1.6; max-width:38ch;
}
.ftr__co{ color:var(--txt-2); margin-bottom:3px; line-height:1.5; }
.ftr__row{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; align-items:start; }
.ftr__row svg{ width:17px; height:17px; color:var(--brand-lt); opacity:.85; margin-top:3px; }
.ftr__row a{ color:var(--txt-2); transition:color .35s; }
.ftr__row a:hover{ color:var(--brand-lt); }
.ftr h5{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); margin:0 0 18px; font-weight:400; }
.ftr li + li{ margin-top:11px; }
.ftr li a{ font-size:16.5px; color:var(--txt-2); transition:color .35s; }
.ftr li a:hover{ color:var(--brand-lt); }
/* Libro de Reclamaciones — obligatorio en Perú. Va dentro de la rejilla del
   pie, en la columna de la derecha, no suelto en la esquina inferior. */
.libro{
  display:flex; align-items:center; gap:15px;
  padding:15px 17px;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.libro:hover{ border-color:rgba(169,215,124,.5); background:rgba(169,215,124,.06); }
/* el sello del libro reutiliza el lenguaje de los botones del sitio:
   cuadro de 1px que se rellena de verde al pasar el cursor */
.libro__mark{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--brand-lt);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.libro__mark svg{ width:25px; height:25px; }
.libro:hover .libro__mark{ background:var(--brand); border-color:var(--brand); color:#0A1A2F; }
.libro__txt{ display:grid; }
/* mismo tamaño y color que los enlaces de las columnas vecinas */
.libro__t{ font-size:16.5px; line-height:1.25; color:var(--txt-2); transition:color .4s var(--ease); max-width:11ch; }
.libro:hover .libro__t{ color:var(--brand-lt); }
/* LinkedIn de la empresa: misma caja que el Libro, debajo, para que la
   columna lea como un solo bloque y no como dos elementos sueltos */
.libro--social{ margin-top:12px; }
.libro--social .libro__mark svg{ width:21px; height:21px; }

.ftr__bar{
  margin-top:clamp(44px,5vw,70px); padding-block:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--txt-3);
}
.ftr__bar a:hover{ color:var(--brand-lt); }

/* ---------- 20. WhatsApp flotante ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:800;
  width:54px; height:54px; border-radius:50%;
  background:var(--brand); color:#0A1A2F;
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .4s var(--ease-o), background .3s;
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
}
.wa.on{ opacity:1; transform:none; pointer-events:auto; }
.wa:hover{ transform:scale(1.07); background:var(--brand-lt); }
.wa svg{ width:26px; height:26px; }

/* ---------- 21. Progreso de scroll ---------- */
.prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:950; background:linear-gradient(90deg,var(--brand-dk),var(--brand),var(--mint)); transition:width .1s linear; }

/* ---------- 22. Page header (subpáginas) ---------- */
.phead{ position:relative; padding-top:clamp(150px,18vh,220px); padding-bottom:clamp(56px,7vw,96px); overflow:hidden; }
.phead__bg{ position:absolute; inset:0; z-index:0; }
.phead__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; opacity:.38; }
.phead__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,26,47,.9),rgba(10,26,47,.6) 40%,var(--bg)); }
.phead__in{ position:relative; z-index:1; }
.crumbs{ font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); display:flex; gap:10px; align-items:center; }
.crumbs a:hover{ color:var(--brand-lt); }
.crumbs span{ color:var(--brand); }

/* ---------- 23. Detalle de servicio ---------- */
.detail{ border-top:1px solid var(--line); padding-block:clamp(52px,6vw,86px); scroll-margin-top:96px; }
.detail:first-of-type{ border-top:0; }
.detail__grid{ display:grid; gap:clamp(30px,4vw,60px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:960px){ .detail__grid{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); } }
.detail__media{ position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:3/4; border:1px solid var(--line); }
.detail__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-o); }
.detail:hover .detail__media img{ transform:scale(1.03); }
.detail__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,26,47,.15),rgba(10,26,47,.55)); }
.detail__n{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:var(--brand); }
.detail h2{ margin-top:16px; }
.detail__body{ margin-top:24px; }
.detail__body p{ color:var(--txt-2); font-size:17px; line-height:1.78; max-width:62ch; }
.detail__body p + p{ margin-top:16px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tag{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); padding:8px 14px; color:var(--txt-3); border-radius:var(--r);
  transition:border-color .35s, color .35s;
}
.detail:hover .tag{ border-color:rgba(169,215,124,.4); color:var(--txt-2); }

/* índice lateral de servicios */
.svcnav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.svcnav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); padding:10px 16px; color:var(--txt-2); border-radius:var(--r);
  transition:background .35s, border-color .35s, color .35s;
}
.svcnav a:hover{ background:var(--brand); border-color:var(--brand); color:#0A1A2F; }

/* ---------- 24. Mapa ---------- */
.map{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; background:var(--bg-3); }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(170deg); }

/* ---------- 25b. Banda editorial ---------- */
.band{ position:relative; overflow:hidden; display:grid; align-items:center; min-height:clamp(340px,52vh,560px); }
.band__bg{ position:absolute; inset:0; z-index:0; }
.band__bg img,
.band__bg video{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.band__bg video{ filter:saturate(.5) contrast(1.05) brightness(.8); }
.band__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,47,.80) 0%, rgba(10,26,47,.60) 45%, rgba(10,26,47,.90) 100%);
}
.band__in{ position:relative; z-index:1; padding-block:clamp(56px,8vw,96px); }
.band__claim{ max-width:19ch; margin-top:22px; }
.band__claim em{ font-style:italic; color:var(--brand-lt); }

/* ---------- 25c. Portada partida (Nosotros) ----------
   Fotografía a sangre por la izquierda y panel de texto por la derecha.
   El velo azul es el mismo de toda la casa; el borde derecho de la foto
   se funde con el color del panel para que no haya un corte seco. */
.intro{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr);
  background:var(--bg-2);
}
@media (min-width:980px){
  .intro{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); min-height:min(92vh,880px); }
}
.intro__media{ position:relative; overflow:hidden; min-height:clamp(320px,52vh,500px); }
.intro__media img,
.intro__media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 34%;
}
.intro__media img{
  filter:saturate(.74) contrast(1.05) brightness(.92);
  transform:scale(1.06); transform-origin:58% 42%;
  animation:introDrift 36s ease-in-out infinite alternate;
}
/* El video ya trae su propio movimiento, así que no lleva la deriva. Sí un
   apagado más fuerte: el material original es de cielo abierto y a plena luz
   rompería la clave oscura del resto del sitio. */
.intro__video{
  object-position:center 58%;
  filter:saturate(.48) contrast(1.06) brightness(.72);
  transform:scale(1.03);
}
/* deriva lentísima: da vida a la foto sin que se note el truco */
@keyframes introDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.13) translate3d(-1.4%,-1.8%,0); }
}
.intro__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(172deg, rgba(22,48,78,.30), rgba(8,16,28,.46)),
    linear-gradient(180deg, rgba(10,26,47,.72), transparent 26%);
}
/* la cabecera va fija sobre la foto: se oscurece la franja superior
   para que el logotipo y el menú se lean siempre */
@media (min-width:980px){
  .intro__media::after{
    background:
      linear-gradient(172deg, rgba(22,48,78,.30), rgba(8,16,28,.46)),
      linear-gradient(180deg, rgba(10,26,47,.68), transparent 20%),
      linear-gradient(90deg, rgba(10,26,47,.42), transparent 28%, transparent 74%, var(--bg-2));
  }
}
.intro__panel{ position:relative; display:flex; align-items:center; background:var(--bg-2); }
.intro__panel::before{
  content:""; display:none;
  position:absolute; left:0; top:30%; bottom:30%; width:1px;
  background:linear-gradient(180deg, transparent, rgba(169,215,124,.30), transparent);
}
@media (min-width:980px){ .intro__panel::before{ display:block; } }
.intro__in{
  width:100%; max-width:700px;
  padding-inline:clamp(22px,5vw,78px);
  padding-block:clamp(44px,8vw,64px) clamp(56px,9vw,84px);
}
/* en pantalla ancha el panel arranca por debajo de la cabecera fija */
@media (min-width:980px){
  .intro__in{ padding-block:clamp(118px,15vh,168px) clamp(70px,9vw,110px); }
}
.intro__h{ margin-top:22px; font-size:clamp(2.3rem,4.5vw,4rem); }
.intro .lead{ max-width:52ch; }
.intro__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.intro__tags li{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:440; font-variation-settings:"opsz" 96;
  border:1px solid var(--line); border-radius:var(--r); padding:9px 14px; color:var(--txt-3);
  transition:border-color .5s var(--ease-o), color .4s;
}
.intro__tags li:hover{ border-color:rgba(169,215,124,.45); color:var(--txt-2); }
.intro__meta{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2);
  font-size:14.5px; line-height:1.72; color:var(--txt-3); max-width:52ch;
}

/* ---------- 25d. Claim rotatorio ----------
   La segunda línea va cambiando sola. El relevo se hace con temporizador
   (no con fotogramas) por lo mismo que los contadores: los fotogramas se
   congelan cuando la página no está al frente y la frase se quedaría
   clavada en la primera. */
/* La banda va sin fotografia -encima esta la portada, que ya es imagen en
   movimiento- y en papel claro: es la bisagra entre dos bloques oscuros y lo
   que corta el color hacia abajo. Al ser baja no compite con Pilares, que
   cierra la pagina tambien en claro. */
.band--rot{
  min-height:0;
  border-block:1px solid var(--line-ink);
}
.band--rot .band__in{ padding-block:clamp(66px,8vw,106px); }

/* La fotografia entra por la derecha y se disuelve hacia la izquierda: dos
   capas, la mascara que la hace desaparecer y un velo de papel que la aclara
   hasta dejarla en atmosfera. El texto nunca queda sobre la parte densa. */
.band__fade{
  position:absolute; inset:0 0 0 auto; width:64%; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
}
/* El fondo de la banda puede ser foto o video: mismo encaje y mismo lavado.
   La toma de la Costa Verde es un dia nublado y ya viene clara, asi que se
   le resta algo de luz en vez de sumarsela. */
.band__fade img,
.band__fade video{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:saturate(.38) brightness(1.06) contrast(.96);
}
.band__fade video{
  filter:saturate(.30) brightness(1.00) contrast(1.02);
  object-position:center 42%;
}
.band__fade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--paper) 0%, rgba(243,245,247,.74) 34%, rgba(243,245,247,.34) 100%);
}
@media (max-width:979px){
  .band__fade{ width:100%; opacity:.5; }
}

.rot__split{
  display:grid; gap:clamp(30px,4vw,58px);
  grid-template-columns:minmax(0,1fr); align-items:start;
}
@media (min-width:980px){ .rot__split{ grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr); } }

/* sobre papel el claim sube de cuerpo y cambia de tinta */
.band--rot .rot{ max-width:none; }
.band--rot .rot__fix{ color:var(--ink); font-size:clamp(2.3rem,5vw,4.1rem); }
.band--rot .rot__slot{ font-size:clamp(2.3rem,5vw,4.1rem); }
.band--rot .rot__w{ color:var(--brand-dk); }
.band--rot .rot__bar{ background:rgba(10,15,23,.13); }
.band--rot .rot__bar i{ background:var(--brand-dk); }

/* Indice de las cinco frases: la que suena se enciende y se adelanta un
   punto. Convierte el movimiento en lectura -se ven las cinco capacidades
   de un vistazo- y llena el lado derecho, que era lo que quedaba vacio. */
.rotlist{
  list-style:none; margin:0; counter-reset:r;
  display:grid; gap:11px;
  /* ficha blanca sobre la fotografia: la lista necesita fondo propio para
     leerse, y de paso repite el gesto de las tarjetas del sitio */
  padding:24px 26px 26px;
  background:#FFFFFF;
  border:1px solid rgba(10,15,23,.08);
  border-radius:var(--r);
  box-shadow:0 24px 52px -34px rgba(10,20,35,.5);
}
.rotlist li{
  counter-increment:r;
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:baseline;
  font-size:15.5px; line-height:1.45; color:rgba(10,15,23,.32);
  transition:color .55s var(--ease), transform .55s var(--ease-o);
}
.rotlist li::before{
  content:"0" counter(r);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:rgba(10,15,23,.24); font-weight:440; font-variation-settings:"opsz" 96;
  transition:color .55s var(--ease);
}
.rotlist li.is-on{ color:var(--ink); transform:translateX(5px); }
.rotlist li.is-on::before{ color:var(--brand-dk); }
/* ancho generoso: así ninguna de las frases pasa de dos líneas y la
   banda no cambia de altura cada vez que se releva el texto. El límite va
   en píxeles: en «ch» se mediría con el cuerpo del párrafo, no con el del
   titular, y saldría tres veces más estrecho de lo previsto. */
.rot{ display:block; max-width:min(780px,94%); }
.rot__fix{
  display:block;
  font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.015em;
  font-size:clamp(2.1rem,4.4vw,3.6rem); color:var(--txt);
}
.rot__slot{
  display:block; margin-top:.08em;
  font-family:var(--serif); font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.06; min-height:2.3em;
}
.rot__w{
  display:block; font-style:italic; color:var(--brand-lt);
  transition:opacity .5s var(--ease-o), transform .6s var(--ease-o);
}
.rot__w.is-out{ opacity:0; transform:translateY(-.3em); }
/* la barra va encima del claim: así su posición no depende de que la
   frase de turno ocupe una línea o dos */
.rot__bar{
  display:block; width:min(300px,46vw); height:1px;
  background:var(--line-2); margin-bottom:clamp(24px,2.8vw,36px); overflow:hidden;
}
.rot__bar i{
  display:block; height:100%; width:100%; background:var(--brand);
  transform:scaleX(0); transform-origin:left;
  animation:rotBar 3.6s linear infinite;
}
@keyframes rotBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- 25e. Pilares con imagen ---------- */
.pil{
  display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(36px,4vw,56px);
}
@media (min-width:900px){
  .pil{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); align-items:start; }
  /* la foto acompaña la lectura de los cinco pilares */
  .pil__media{ position:sticky; top:104px; }
}
.pil__media{ align-self:start; }
.pil .steps{ margin-top:0; }
@media (min-width:820px){
  .pil .step{ grid-template-columns:62px minmax(0,1fr); align-items:start; }
  .pil .step::before{ padding-top:.45em; }
  .pil .step p{ grid-column:2; margin-top:8px; }
}

/* ---------- 25. Accesibilidad / motion ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--brand); color:#0A1A2F; padding:12px 20px; font-family:var(--mono); font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

/* Solo se desactivan efectos realmente intrusivos. Las micro-interacciones
   se mantienen: Windows activa reduced-motion por defecto en muchos equipos. */
@media (prefers-reduced-motion: reduce){
  /* El movimiento de la portada no se elimina (el cliente lo pidió): se
     ralentiza y el barrido de luz se apaga, que es el único intrusivo. */
  .hero__bg img{ animation-duration:80s; }
  .hero__sheen{ animation:none; opacity:0; }
  .ticker__track{ animation:none; }
  .scrollcue i{ animation:none; }
}


/* Respaldo del plano. Google no se deja incrustar en algunas vistas previas
   y el hueco quedaba en blanco; debajo del iframe espera siempre una ficha
   con la direccion, y el mapa se funde encima solo si carga de verdad. */
.map{ position:relative; }
.map__alt{
  position:absolute; inset:0; z-index:0;
  display:grid; align-content:center; justify-items:center; gap:14px;
  text-align:center; padding:26px;
  background:
    radial-gradient(circle at 50% 40%, rgba(169,215,124,.12), transparent 64%),
    var(--bg-3);
}
.map__alt svg{ width:30px; height:30px; color:var(--brand); }
.map__alt p{ color:var(--txt-2); font-size:15.5px; line-height:1.7; max-width:34ch; margin:0; }
.map iframe{ position:relative; z-index:1; opacity:0; transition:opacity .6s var(--ease); }
.map.is-ok iframe{ opacity:1; }

/* matiz de la cifra: en caja baja y sin versalitas, para que se distinga
   del rotulo y no se lea pegado a el */
.fig__sub{
  display:block; margin-top:7px;
  font-family:var(--sans); font-size:13.5px; font-weight:320;
  letter-spacing:0; text-transform:none;
  color:var(--txt-3); line-height:1.5; max-width:24ch;
}

/* ---------- 26. Contacto: cabecera fotografica y banda del mapa.
   La pagina entra por una vista de Lima a casi pantalla llena, entrega el
   dato duro sobre el fondo de siempre y cierra con la oficina y el plano
   lado a lado, todo en el mismo azul. ---------- */
.phead--foto{
  min-height:clamp(460px,76vh,740px);
  display:grid; align-items:end;
  padding-top:clamp(150px,18vh,210px);
  padding-bottom:clamp(40px,5vw,68px);
}
.phead--foto .phead__bg img{
  opacity:1; object-position:center 52%;
  filter:saturate(.95) contrast(1.06) brightness(1.24);
}
/* calibrado para la vista de Lima: la toma ya viene virada a azul y en media
   luz, asi que el velo solo necesita sostener el titulo abajo y entregar la
   fotografia al fondo de la seccion siguiente */
.phead--foto .phead__bg::after{
  background:
    linear-gradient(90deg, rgba(10,26,47,.58) 0%, rgba(10,26,47,.12) 56%, transparent 100%),
    linear-gradient(180deg, rgba(10,26,47,.74) 0%, rgba(10,26,47,.06) 30%, rgba(10,26,47,.58) 76%, var(--bg-2) 100%);
}
.phead--foto .display{ text-shadow:0 2px 34px rgba(10,26,47,.7); }
@media (max-width:719px){
  /* en vertical la columna es estrecha: el velo lateral la apagaria entera */
  .phead--foto{ min-height:clamp(420px,62vh,560px); }
  .phead--foto .phead__bg::after{
    background:linear-gradient(180deg, rgba(10,26,47,.72) 0%, rgba(10,26,47,.06) 28%, rgba(10,26,47,.66) 74%, var(--bg-2) 100%);
  }
}

/* Mapa y ficha de oficina, lado a lado: la direccion se lee sin tapar el
   plano, y el mapa conserva el marco redondeado del resto del sitio. */
.mapband{
  position:relative; background:var(--bg-3);
  border-top:1px solid var(--line);
  padding-block:clamp(48px,6vw,86px);
}
.mapband__grid{
  display:grid; gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,1fr); align-items:center;
}
@media (min-width:900px){
  .mapband__grid{ grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); }
}
.mapband__side p{ color:var(--txt-2); font-size:16.5px; line-height:1.78; margin-top:16px; }
.mapband__side .btn{ margin-top:26px; }
.mapband .map{ aspect-ratio:auto; height:clamp(300px,44vh,440px); }

/* Trampa antispam: un campo que ningun humano ve ni puede enfocar, pero que
   los robots rellenan por costumbre. Si llega con contenido, se descarta. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* Campo obligatorio sin rellenar: el filete y el rotulo se encienden en rojo
   hasta que el visitante escribe. Asi el aviso no depende de que lea la
   linea pequena del pie. */
.field.is-error{ border-bottom-color:#E0584F; }
.field.is-error label{ color:#E0584F; }
.form__msg{ color:#E0584F; }
.form__msg:empty{ display:none; }

/* En Contacto la cabecera no lleva boton a la derecha: el menu se centra
   para que no quede descolgada respecto al resto de paginas. */
.hdr--sincta .nav{ margin-inline:auto; }

/* ============ Pestana lateral de LinkedIn ============
   Ficha pequena pegada al borde derecho, a media altura. Toma el mismo verde
   que el boton de LinkedIn del pie (.libro__mark), para que sea el mismo
   elemento en dos sitios y no dos invenciones distintas. Cuadrada contra la
   pared y redondeada por el lado que se ve. Al ser verde opaco funciona
   igual sobre las secciones oscuras y sobre las de papel. */
.side{
  /* baja al ultimo tercio: a media altura le disputaba la atencion al titular */
  position:fixed; right:0; top:auto; bottom:110px; transform:none;
  z-index:60;
  width:40px; height:40px;
  display:grid; place-items:center;
  color:#0A1A2F;
  background:var(--brand);
  border:1px solid var(--brand);
  border-right:0;
  border-radius:14px 0 0 14px;
  box-shadow:0 6px 20px rgba(6,16,30,.22);
  transition:background .35s var(--ease), width .35s var(--ease), box-shadow .35s var(--ease);
}
.side__ico{ width:18px; height:18px; }
/* el nombre solo para quien use lector de pantalla: a este tamano, escrito
   estorbaria mas de lo que aporta */
.side__txt{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.side:hover, .side:focus-visible{
  background:var(--brand-lt);
  width:46px;
  box-shadow:0 8px 26px rgba(6,16,30,.3);
}
.side:focus-visible{ outline:2px solid var(--brand-lt); outline-offset:3px; }

/* En movil estorba: taparia texto y el pie, donde ya esta el mismo enlace,
   queda a pocos deslizamientos. */
@media (max-width:860px){ .side{ display:none; } }

@media (prefers-reduced-motion: reduce){ .side{ transition:none; } }
/* ---- LinkedIn en la barra del copyright ----
   Sin recuadro y a un tercio del tamano que tenia: es un enlace opcional y no
   debe competir con el libro de reclamaciones, que si es obligatorio. El logo
   va entero y sin recolorear; lo unico que reacciona al cursor es la posicion. */
.ftr__soc{ display:inline-flex; line-height:0; transition:transform .3s var(--ease); }
.ftr__soc svg{ width:22px; height:22px; display:block; }
.ftr__soc:hover{ transform:translateY(-2px); }
.ftr__soc:focus-visible{ outline:2px solid var(--brand-lt); outline-offset:4px; border-radius:6px; }

/* La ficha lateral pasa a ser una tarjeta clara que sostiene el logo: el
   azul de LinkedIn necesita un fondo propio para leerse igual sobre las
   secciones oscuras y sobre las de papel. */
.side{
  background:var(--paper);
  border-color:rgba(255,255,255,.22);
  padding-left:4px;
}
.side__ico{ width:26px; height:26px; }
.side:hover, .side:focus-visible{ background:#fff; width:48px; }