/* Diraspi — NOSOTROS.
   La idea: el equipo se lee como los carriles de la portada, girados 90°. Una tabla de nombres
   en la que el cursor abre una franja, la inunda con el color de esa persona y —cuando hay
   retrato— la deja a color. El acordeón vive dentro de una altura fija: la página nunca salta
   mientras se recorre la lista.
   Ley de color: navy y turquesa mandan; los seis colores de las categorías marcan a cada persona. */

.ns-page{padding-top:72px}

/* ——— la tesis ——— */
.quienes{padding:88px 48px 64px;max-width:1440px}
.q-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr);gap:56px;align-items:end}
.q-eyebrow{margin:0;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.q-display{margin:20px 0 0;font-family:var(--mont);font-weight:800;
  font-size:clamp(38px,5.6vw,86px);line-height:1.01;letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
/* el giro tipográfico de la casa: el bloque Montserrat cede a la serif en cursiva */
.q-display em{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.1em;line-height:.98;letter-spacing:-.005em}
.q-lede{margin:0 0 10px;font-family:var(--inter);font-weight:300;font-size:16px;line-height:1.68;color:var(--ink-2)}

/* ——— el equipo ——— */
.equipo{padding:0 48px 96px;max-width:1440px}
.eq-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:1px solid rgba(0,48,87,.16);padding-top:13px;margin-bottom:2px}
.eq-head b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--navy)}
.eq-head span{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}

/* altura fija + flex: al abrirse una fila las demás ceden, y el alto total no se mueve */
.eq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  height:clamp(600px,76vh,820px)}
.eq-row{position:relative;flex:1 1 0;min-height:0;overflow:hidden;display:flex;align-items:center;gap:16px;
  border-bottom:1px solid rgba(0,48,87,.12);cursor:default;
  transition:flex-grow .55s cubic-bezier(.22,1,.36,1)}
.eq-row:last-child{border-bottom:0}
.eq-row:focus-visible{outline:2px solid var(--tur);outline-offset:-3px;z-index:3}
.eq-row.is-open{flex-grow:2.9}
.eq-list.has-open .eq-row:not(.is-open){flex-grow:.74}

/* el color entra barriendo desde la izquierda, como la marca vial que cruza la portada */
.eq-row::before{content:"";position:absolute;inset:0;background:var(--c);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.eq-row.is-open::before{transform:scaleX(1)}

/* el retrato: una franja ancha, no un carné — así sirve igual una foto de archivo en obra */
.eq-foto{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .45s ease .12s}
.eq-row.is-open .eq-foto{opacity:1}
.eq-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
/* velo de lectura sólo por la izquierda: el nombre siempre legible, la foto casi intacta */
.eq-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(2,24,46,.78) 0,rgba(2,24,46,.42) 40%,rgba(2,24,46,.05) 70%,transparent 100%)}

/* Retrato vertical: no se puede recortar en franja sin decapitar a nadie. Entra como una placa
   anclada a la derecha, con la altura de la fila — el color queda de fondo, entre el nombre y la
   cara. Sirve para fotos de estudio 3:4 o 2:3 sin tocar el archivo. */
.eq-retrato{position:absolute;top:0;bottom:0;right:0;width:clamp(90px,10.6vw,150px);overflow:hidden;
  opacity:0;transform:translateX(20px);
  transition:opacity .45s ease .1s,transform .5s cubic-bezier(.22,1,.36,1) .1s}
.eq-row.is-open .eq-retrato{opacity:1;transform:none}
.eq-retrato img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 22%);display:block}

/* el testigo de color: al abrirse la fila, ese color se come el carril entero */
.eq-tick{position:relative;flex:none;width:7px;align-self:stretch;background:var(--c);
  transition:opacity .3s ease}
.eq-row.is-open .eq-tick{opacity:0}

.eq-id{position:relative;flex:1;min-width:0;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:0 22px 0 14px}
.eq-name{font-family:var(--mont);font-weight:800;font-size:clamp(20px,2.55vw,38px);line-height:1.04;
  letter-spacing:-.012em;color:var(--navy);transition:color .4s ease,font-size .5s cubic-bezier(.22,1,.36,1)}
/* la fila abierta también manda en tamaño: el nombre crece con el carril */
.eq-row.is-open .eq-name{font-size:clamp(24px,3.1vw,46px)}
.eq-cargo{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--ink-3);
  transition:color .4s ease;white-space:nowrap}
.eq-row.is-open .eq-name,.eq-row.is-open .eq-cargo{color:#fff}
/* amarillo, verde, naranja y turquesa no aguantan blanco encima: sobre ellos la tinta sigue siendo navy */
.eq-row.is-open.is-light .eq-name,.eq-row.is-open.is-light .eq-cargo{color:var(--navy)}
/* con retrato manda el velo oscuro, no el color: la tinta vuelve a ser blanca aunque el color sea claro */
.eq-row.is-open.has-foto .eq-name,.eq-row.is-open.has-foto .eq-cargo{color:#fff}
/* la fila abierta es la dueña de la luz; las demás ceden */
.eq-list.has-open .eq-row:not(.is-open) .eq-name{color:rgba(0,48,87,.3)}
.eq-list.has-open .eq-row:not(.is-open) .eq-cargo{color:rgba(0,48,87,.24)}

/* ——— misión · visión · valores ———
   El rótulo es el protagonista: MISIÓN / VISIÓN / VALORES en Montserrat 800 y su color de
   acento, y el enunciado le responde en la serif en cursiva — el mismo relevo tipográfico de
   la tesis. Cada bloque abre con su regla de color, como un capítulo. */
.mv{background:var(--dark-2);color:#fff;padding:110px 48px}
.mv-in{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:92px}
.mv-b{border-top:2px solid var(--c);padding-top:30px;display:grid;
  grid-template-columns:minmax(250px,.85fr) minmax(0,1.35fr);gap:26px 72px;align-items:start}
.mv-lab{font-family:var(--mont);font-weight:800;font-size:clamp(44px,6.4vw,100px);line-height:.92;
  letter-spacing:-.015em;color:var(--c)}
.mv-big{margin:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(30px,3.7vw,58px);line-height:1.1;max-width:19ch;text-wrap:balance}
.mv-note{margin:20px 0 0;font-family:var(--inter);font-weight:300;font-size:15.5px;line-height:1.68;
  color:rgba(255,255,255,.6);max-width:56ch}

/* los valores: un libro mayor — nombre en su color, glosa al lado, un renglón por valor */
.mv-vals{display:flex;flex-direction:column}
.mv-val{display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);gap:8px 28px;
  align-items:baseline;padding:17px 0;border-top:1px solid rgba(255,255,255,.14)}
.mv-val:first-child{border-top:0;padding-top:4px}
.mv-val strong{font-family:var(--mont);font-weight:800;font-size:clamp(22px,2.4vw,32px);line-height:1;
  letter-spacing:-.01em;color:var(--c)}
.mv-val span{font-family:var(--inter);font-weight:300;font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.58)}

/* ——— contacto ——— */
.contacto{padding:88px 48px 96px;max-width:1440px}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;
  border-top:1px solid rgba(0,48,87,.16);padding-top:32px}
.co-lab{margin:0 0 18px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--navy)}
.co-grid .nos-contact{margin-top:0;border-top:0;padding-top:0}
.co-grid .nos-chips{margin-top:12px}

/* ——— entrada en escena ——— */
.ns-rise{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease var(--rd,0ms),transform .65s cubic-bezier(.22,1,.36,1) var(--rd,0ms)}
.ns-rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ns-rise{opacity:1;transform:none;transition:none}}

/* ——— responsive ——— */
@media (max-width:1100px){
  .quienes,.equipo,.contacto{padding-left:32px;padding-right:32px}
  .mv{padding-left:32px;padding-right:32px}
  .q-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .q-lede{margin-bottom:0}
  .mv-b{grid-template-columns:1fr;gap:20px}
  .co-grid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:860px){
  .mv-val{grid-template-columns:1fr;gap:8px}
}
@media (max-width:760px){
  /* sin cursor no hay acordeón: cada fila se muestra ya abierta, con su color y su retrato */
  .quienes{padding:56px 20px 40px}
  .equipo{padding:0 20px 64px}
  .contacto{padding:56px 20px 72px}
  .mv{padding:72px 20px 68px}
  .mv-in{gap:52px}
  .eq-head{flex-direction:column;align-items:flex-start;gap:6px}
  /* en el teléfono no hay cursor que pasar: la pista sobra aunque el navegador declare hover */
  .eq-head .only-desktop{display:none}
  .eq-head .only-touch{display:inline}
  .eq-list{height:auto;display:block}
  /* bandas, no campos: el color identifica a cada quien sin volverse un carnaval */
  .eq-list .eq-row{height:auto;min-height:86px;padding:15px 0;flex:none;border-bottom:2px solid #fff}
  .eq-list .eq-row::before{transform:scaleX(1)}
  .eq-list .eq-row:not(.has-foto)::after{opacity:1}
  .eq-list .eq-row .eq-foto{opacity:1}
  .eq-list .eq-row .eq-retrato{opacity:1;transform:none;width:72px}
  .eq-list .eq-row .eq-tick{display:none}
  .eq-list .eq-row .eq-id{padding-left:20px}
  .eq-list .eq-row .eq-name,.eq-list .eq-row .eq-cargo{color:#fff}
  .eq-list .eq-row.is-light .eq-name,.eq-list .eq-row.is-light .eq-cargo{color:var(--navy)}
  .eq-list .eq-row.has-foto .eq-name,.eq-list .eq-row.has-foto .eq-cargo{color:#fff}
  .eq-list .eq-row .eq-id{flex-direction:column;align-items:flex-start;gap:8px}
}