/* Diraspi — componente EN ESTUDIO (cartera). Archivo propio del componente.
   Misma ley que el sitio: navy tinta / turquesa interacción / duotono que revela color /
   separadores 1px rgba(0,48,87,.15) / curva .22,1,.36,1 / sin sombras ni radios. */
.studies{padding:56px 48px 64px}
.st-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:18px}
/* h2 semántico (navegable por AT) con la voz mono de siempre */
.st-kicker{margin:0;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.22em;color:var(--ink-3)}
.st-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);text-align:right}
.st-rows{border-bottom:1px solid rgba(0,48,87,.15)}
.st-row{border-top:1px solid rgba(0,48,87,.15)}

/* ——— cabecera (botón) ——— */
.st-head{display:flex;align-items:center;gap:22px;width:100%;margin:0;padding:20px 0;
  background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st-head:focus-visible{outline:2px solid var(--tur);outline-offset:3px}
.st-idx{flex:none;width:24px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);transition:color .3s ease}
.st-tick{flex:none;width:26px;height:4px;background:var(--tur);transition:width .45s cubic-bezier(.22,1,.36,1)}
.st-head:hover .st-tick{width:44px}
.st-row.on .st-tick,.st-row.on .st-head:hover .st-tick{width:72px}
.st-name{min-width:0;font-family:var(--mont);font-weight:800;font-size:clamp(16px,1.8vw,24px);letter-spacing:.01em;color:var(--navy);transition:color .3s ease}
.st-head:hover .st-idx,.st-head:hover .st-name{color:var(--tur)}
.st-meta{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;line-height:1.6;color:var(--ink-3);text-align:right}
/* indicador + / − : el trazo vertical gira y se funde con el horizontal al abrir */
.st-plus{position:relative;flex:none;width:14px;height:14px;margin-left:6px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.st-plus::before,.st-plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--navy);
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s ease}
.st-plus::after{transform:rotate(90deg)}
.st-head:hover .st-plus::before,.st-head:hover .st-plus::after{background:var(--tur)}
.st-row.on .st-plus{transform:rotate(180deg)}
.st-row.on .st-plus::after{transform:rotate(0deg)}

/* ——— cuerpo desplegable ——— */
.st-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.st-row.on .st-body{grid-template-rows:1fr}
/* visibility con retardo: al cerrar, las miniaturas salen del orden de tabulación sin cortar la animación */
.st-body-inner{overflow:hidden;visibility:hidden;transition:visibility 0s .5s;
  display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:12px 56px;align-items:start;
  padding-left:94px} /* 24 + 22 + 26 + 22 → alinea con st-name */
.st-row.on .st-body-inner{visibility:visible;transition-delay:0s}
.st-desc{margin:0 0 28px;max-width:560px;font-family:var(--inter);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* entrada escalonada del contenido */
.st-desc,.st-ph{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.st-row.on .st-desc{opacity:1;transform:none;transition-delay:.1s}
.st-row.on .st-ph{opacity:1;transform:none}
.st-row.on .st-ph:nth-child(1){transition-delay:.14s}
.st-row.on .st-ph:nth-child(2){transition-delay:.2s}
.st-row.on .st-ph:nth-child(3){transition-delay:.26s}
.st-row.on .st-ph:nth-child(4){transition-delay:.32s}

/* ——— fila de fotos: duotono navy → color, como el resto del sitio ——— */
.st-phs{display:flex;gap:3px;margin-bottom:28px;min-width:0}
.st-ph{position:relative;overflow:hidden;flex:1 1 0;min-width:0;max-width:280px;aspect-ratio:3/2;
  margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st-ph:focus-visible{outline:2px solid var(--tur);outline-offset:3px}
.st-ph-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1);
  transform:scale(1);transition:filter .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.st-ph-veil{position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.62;transition:opacity .45s ease;pointer-events:none}
/* scrim bajo el índice — texto sobre foto siempre con gradiente (auditoría a11y) */
.st-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(2,20,38,.85),rgba(2,20,38,0))}
.st-ph-idx{position:absolute;left:8px;bottom:7px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#fff}
.st-ph-more{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(2,20,38,.75);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.14em}
.st-ph:hover .st-ph-img,.st-ph:focus-visible .st-ph-img{filter:none;transform:scale(1.05)}
.st-ph:hover .st-ph-veil,.st-ph:focus-visible .st-ph-veil{opacity:0}

/* ——— responsive ——— */
@media (max-width:1100px){
  .st-meta{font-size:11px} /* piso de legibilidad también en tablet (768 no entra en ≤760) */
  /* la descripción sigue el mismo eje que nombre y meta al abrir (94 → 140) */
  .st-body-inner{grid-template-columns:1fr;gap:0;
    transition:visibility 0s .5s,padding-left .45s cubic-bezier(.22,1,.36,1)}
  .st-row.on .st-body-inner{padding-left:140px}
  /* el kicker no compite en flex con la nota: nunca se parte */
  .st-kicker{flex:none;white-space:nowrap}
  /* jerarquía: bajo 1100px la meta mono cede la línea entera al nombre display */
  .st-head{flex-wrap:wrap;row-gap:10px}
  /* basis 0: el nombre largo envuelve dentro de su celda en vez de saltar de línea flex */
  .st-name{flex:1 1 0}
  .st-meta{order:5;flex:1 1 100%;margin:0 0 0 94px;text-align:left;
    transition:margin-left .45s cubic-bezier(.22,1,.36,1)} /* 24 + 22 + 26 + 22 → bajo el nombre */
  .st-row.on .st-meta{margin-left:140px} /* sigue al nombre con el tick abierto: 24 + 22 + 72 + 22 */
}
@media (max-width:760px){
  .studies{padding:40px 20px 48px}
  .st-head-row{flex-direction:column;align-items:flex-start;gap:8px}
  .st-note{text-align:left}
  .st-head{flex-wrap:wrap;gap:12px 14px;padding:18px 0}
  .st-idx{width:18px}
  .st-name{flex:1 1 0;font-size:16px}
  .st-meta{order:5;flex:1 1 100%;margin:0 0 0 72px;text-align:left;font-size:11px} /* 18 + 14 + 26 + 14 → bajo el nombre; 11px: piso de legibilidad */
  .st-row.on .st-tick,.st-row.on .st-head:hover .st-tick{width:44px} /* tope móvil: 72px estrangula el nombre */
  .st-row.on .st-meta{margin-left:90px} /* sigue al nombre con el tick abierto: 18 + 14 + 44 + 14 */
  .st-body-inner{padding-left:0}
  .st-row.on .st-body-inner{padding-left:0} /* móvil: fotos a todo el ancho, sin sangría de eje */
  .st-desc{margin-bottom:22px;font-size:14px}
  .st-phs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:24px}
  .st-ph{max-width:none;aspect-ratio:4/3}
}