/* Quiénes somos (desde 2026-10-07): al estilo de la home, Cómo trabajamos y Funcionalidades.
   Hero sobre noche con degradé tonal a petróleo y grano, con la foto grande; la cita, las cifras y la
   formación sobre hueso con filetes; la trayectoria como lista quieta sobre claro; cierre-b.
   Fondos: noche · hueso · claro · noche. Un solo lima en el contenido: el botón del cierre (más el punto de «hoy»).
   Solo la carga quienes-somos.html. Clases con prefijo q- (v3.css y paginas.css usan nombres cortos). */
:root{
  --texto-2:rgba(230,237,240,.74);           /* 6,9:1 sobre noche */
  --filete-claro:rgba(230,237,240,.18);
}
::selection{background:var(--lima-suave);color:var(--tinta)}

.q-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── grano (de la home: estático) ── */
.grano{position:relative;isolation:isolate}
.grano::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.grano>*{position:relative;z-index:1}

/* etiqueta «• NOMBRE»: DM Mono con punto salvia */
.q-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:26px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--q-eb,var(--tinta-suave))}
.q-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--salvia);flex:none}

/* ═══ 1 · HERO ═══════════════════════════════════════════ */
.q-hero{color:var(--claro);--fuerte:var(--claro);--q-eb:var(--salvia);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(34,79,85,.95) 0%, rgba(34,79,85,.45) 38%, rgba(34,79,85,0) 72%),
    var(--noche);
  padding-block:clamp(56px,7vw,104px) clamp(64px,8vw,112px);overflow-x:clip}
.q-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:end}
.q-hero h1{font-size:clamp(42px,5.4vw,78px);line-height:1;letter-spacing:-.04em;color:var(--claro)}
.q-rol{margin-top:20px;font:500 12px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--salvia)}  /* salvia sobre noche 5,8:1 */
.q-bio{margin-top:30px;max-width:36em;font-size:17.5px;line-height:1.65;color:var(--texto-2);text-wrap:pretty}
.q-in{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding-block:6px;font:500 16px/1.3 var(--sans);color:var(--claro);
  text-decoration:underline;text-decoration-color:var(--filete-claro);text-decoration-thickness:1px;text-underline-offset:7px;transition:text-decoration-color 200ms ease}
.q-in .flecha{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .q-in:hover{text-decoration-color:var(--salvia-claro)}
  .q-in:hover .flecha{transform:translateX(3px)}
}

.q-foto{margin:0;justify-self:end;width:min(100%,420px)}
.q-foto img{display:block;width:100%;height:auto;aspect-ratio:461/610;object-fit:cover;object-position:50% 0;  /* recorta el borde claro que trae la foto abajo */
  border-radius:var(--r);
  outline:1px solid var(--filete-claro);outline-offset:-1px;background:var(--noche-medio)}
.q-foto figcaption{margin-top:14px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2)}

/* ═══ 2 · CITA, CIFRAS Y FORMACIÓN ═══════════════════════ */
.q-datos{background:var(--hueso);padding-block:clamp(72px,9vw,128px)}
.q-cita{margin:0}
.q-cita p{max-width:21em;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.7vw,52px);line-height:1.12;letter-spacing:-.01em;color:var(--verde-hoja);text-wrap:balance}

.q-cifras{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--linea-fuerte)}
.q-cifras li{min-width:0;padding:28px clamp(16px,2vw,32px) 4px}
.q-cifras li+li{border-left:1px solid var(--linea)}
.q-cifras li:first-child{padding-left:0}
.q-cifras li:last-child{padding-right:0}
.q-cifras b{display:block;font-size:clamp(40px,4vw,56px);font-weight:700;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.q-cifras span{display:block;margin-top:14px;max-width:15em;font-size:15px;line-height:1.45;color:var(--tinta-media)}

.q-cred{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--linea);font:500 11.5px/2.1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.q-cred span{white-space:nowrap}
.q-cred i{font-style:normal;margin-inline:8px;color:var(--tinta-suave)}

/* ═══ 3 · TRAYECTORIA ════════════════════════════════════ */
.q-tray{background:var(--claro);padding-block:clamp(80px,9vw,128px)}
.q-tray-cab{margin-bottom:clamp(40px,5vw,64px)}
.q-tray h2{font-size:clamp(32px,3.8vw,52px);line-height:1.04;letter-spacing:-.04em}
.q-tray h2 .serif{font-size:.7em;margin-top:12px}

.q-lista{list-style:none;border-top:1px solid var(--linea-fuerte)}
.q-lista li,.q-hoy{display:grid;grid-template-columns:10.5em minmax(0,1fr) minmax(0,1.35fr);gap:6px clamp(24px,3vw,48px);align-items:baseline;padding:24px 0 26px;border-bottom:1px solid var(--linea)}
.q-lista li:last-child{border-bottom:0}
.q-anio{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.q-quien h3{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--tinta)}
.q-quien p{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--tinta-suave)}
.q-hizo{font-size:16px;line-height:1.6;color:var(--tinta-media);text-wrap:pretty}
.q-hizo a{white-space:nowrap;font-weight:500;color:var(--petroleo);text-decoration:none}
.q-hizo a .flecha{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .q-hizo a:hover{text-decoration:underline;text-underline-offset:5px}
  .q-hizo a:hover .flecha{transform:translateX(3px)}
}

/* INFYN, aparte: es el presente, no un renglón más de la cronología */
.q-hoy{border-top:1px solid var(--linea-fuerte);border-bottom:1px solid var(--linea-fuerte);padding-block:28px 30px}
.q-hoy .q-anio{display:flex;align-items:center;gap:10px;color:var(--verde-hoja)}
.q-hoy .q-anio i{width:9px;height:9px;border-radius:50%;background:var(--lima);border:1.5px solid var(--verde-hoja);flex:none}
.q-hoy .q-quien h3{font-size:24px;font-weight:700;letter-spacing:-.025em}
.q-hoy .q-hizo{font-size:17px;color:var(--tinta)}

/* foco visible sobre claro: el lima del foco general no se ve sobre hueso ni claro */
.q-datos :focus-visible,.q-tray :focus-visible{outline-color:var(--petroleo)}

/* ═══ 4 · CIERRE (el de la home y las otras páginas) ═════ */
.cierre-b{color:var(--claro);--fuerte:var(--claro);padding-block:clamp(88px,10vw,140px);
  background:radial-gradient(60% 80% at 0% 100%, rgba(34,79,85,.85) 0%, rgba(34,79,85,0) 70%),var(--noche)}
.cierre-b .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.cierre-b h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em}
.cierre-b h2 .serif{display:block;color:var(--salvia-claro);font-size:.66em;margin-top:12px}
.cierre-acc{justify-self:end}
.btn-b{display:inline-flex;align-items:center;gap:12px;font:500 16px/1 var(--sans);padding:17px 22px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.btn-b:active{transform:scale(.97)}
.btn-b .flecha{transition:transform 200ms var(--ease-out)}
.btn-lima-b{background:var(--lima);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.btn-lima-b:hover{background:#CEDF79}.btn-b:hover .flecha{transform:translateX(3px)}}
.micro{margin-top:16px;font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(230,237,240,.72)}

/* ════════ RESPONSIVE ════════ */
@media (max-width:1000px){
  .q-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-cifras li:nth-child(odd){padding-left:0;border-left:0}
  .q-cifras li:nth-child(even){padding-right:0}
  .q-cifras li:nth-child(n+3){border-top:1px solid var(--linea);margin-top:24px}
  .q-lista li,.q-hoy{grid-template-columns:9.5em minmax(0,1fr);row-gap:10px}
  .q-hizo{grid-column:2}
}
@media (max-width:900px){
  /* el texto se abre para que la foto quede entre el nombre y la bio */
  .q-hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .q-hero-txt{display:contents}
  .q-hero .q-eyebrow{order:1}
  .q-hero h1{order:2}
  .q-rol{order:3}
  .q-foto{order:4;justify-self:start;width:min(100%,380px);margin-top:32px}
  .q-bio{order:5}
  .q-in{order:6;justify-self:start}
  .cierre-b .wrap{grid-template-columns:1fr}
  .cierre-acc{justify-self:start}
}
@media (max-width:640px){
  .q-hero{padding-top:44px;padding-bottom:64px}
  .q-foto{width:100%}
  .q-foto img{aspect-ratio:1/1;object-position:50% 16%}
  .q-bio{font-size:16.5px}
  .q-rol{font-size:11px;letter-spacing:.12em}
  .q-cred{line-height:1.5}
  .q-cred span{display:block;padding-block:5px}
  .q-cred i{display:none}
  .q-lista li,.q-hoy{grid-template-columns:minmax(0,1fr);row-gap:8px;padding-block:22px 24px}
  .q-hizo{grid-column:auto;margin-top:4px}
  .q-hoy .q-quien h3{font-size:22px}
}
@media (max-width:420px){
  .q-cifras b{font-size:36px}
  .q-cifras span{font-size:14.5px}
  .q-cred{letter-spacing:.12em}
}

/* Títulos de posgrado destacados en el hero: validan ante quien no la conoce (pedido de Sofia 2026-10-07) */
.q-titulos{list-style:none;display:flex;gap:0;margin-top:22px;border-block:1px solid rgba(230,237,240,.18)}
.q-titulos li{display:flex;flex-direction:column;gap:4px;padding:14px 28px 14px 0}
.q-titulos li+li{padding-left:28px;border-left:1px solid rgba(230,237,240,.18)}
.q-titulos b{font:700 clamp(20px,1.9vw,26px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--claro)}
.q-titulos span{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(230,237,240,.74)}
@media (max-width:900px){.q-titulos{order:3;justify-self:start;margin-bottom:4px}}
@media (max-width:420px){.q-titulos li{padding-right:18px}.q-titulos li+li{padding-left:18px}}

/* Equipo, antes de la trayectoria: franja petróleo con las áreas de la red */
.q-equipo{background:var(--petroleo);color:var(--claro);--fuerte:var(--claro);--q-eb:rgba(230,237,240,.74);padding-block:clamp(72px,8vw,112px)}
.q-equipo h2{font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.04em;color:var(--claro);max-width:22em}
.q-equipo h2 .serif{display:block;font-size:.7em;margin-top:12px;color:var(--salvia-claro)}
.q-equipo-txt{margin-top:22px;max-width:38em;font-size:17px;line-height:1.6;color:rgba(230,237,240,.74)}
.q-areas{list-style:none;display:flex;flex-wrap:wrap;row-gap:6px;margin-top:30px;padding-block:22px;border-block:1px solid rgba(230,237,240,.18)}
.q-areas li{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--claro)}
.q-areas li+li::before{content:'·';margin:0 14px;color:rgba(230,237,240,.5)}
.q-equipo-link{display:inline-flex;gap:8px;align-items:center;margin-top:26px;font-size:15px;font-weight:500;color:var(--claro);text-decoration:none;border-bottom:1px solid rgba(230,237,240,.35);padding-bottom:2px}
.q-equipo-link .flecha{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.q-equipo-link:hover{border-color:var(--claro)}.q-equipo-link:hover .flecha{transform:translateX(3px)}}
.q-equipo-link:focus-visible{outline:2px solid var(--lima);outline-offset:4px}
@media (max-width:700px){.q-areas{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.q-areas li{font-size:16.5px}.q-areas li+li::before{content:none}}