/* Estilos propios del grupo institucional: nosotros.html, metodologia.html,
   privacidad.html y terminos.html. No se toca css/base.css: todo lo que ya
   cubre el catalogo (tarjeta, rejilla, lista-check, sello, boton...) se
   reutiliza tal cual; aqui solo va lo que el catalogo no ofrece todavia
   (pestanas visuales, linea de tiempo de la metodologia y el indice lateral
   de las paginas legales). */

/* ---------- Cabecera de dos columnas (nosotros.html: texto + cifras) ---------- */
.inst-encabezado-grid { display: grid; gap: var(--espacio-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .inst-encabezado-grid { grid-template-columns: 1.15fr 1fr; } }
.inst-encabezado-grid h1 { max-width: none; }
.inst-cifras-cabecera { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espacio-6); }
.inst-cifras-cabecera li { display: flex; flex-direction: column; gap: var(--espacio-2); }

/* Cabecera de dos columnas de metodologia.html: texto + glifos grandes */
.inst-encabezado-glifos { display: grid; gap: var(--espacio-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .inst-encabezado-glifos { grid-template-columns: 1.3fr 1fr; } }
.inst-encabezado-glifos h1 { max-width: none; }
.inst-encabezado-glifos .inst-glifos { margin: 0; justify-content: flex-end; }
@media (max-width: 1023px) { .inst-encabezado-glifos .inst-glifos { justify-content: flex-start; } }

/* ---------- Pestañas de "Nuestros principios" (nosotros.html) ---------- */
.inst-tabs { margin-top: var(--espacio-8); }
.inst-tabs [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--espacio-6);
}
.inst-tabs [role="tab"] {
  min-height: 44px;
  padding: var(--espacio-3) var(--espacio-4);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.inst-tabs [role="tab"]:hover { color: var(--texto-1); }
.inst-tabs [role="tab"].activa { color: var(--acento-texto); border-color: var(--acento); }
/* Gateado por .pestanas-lista (la agrega pestanas.js al inicializar el grupo), igual que la
   regla equivalente de base.css: si pestanas.js no llega a correr, los 3 paneles de
   "Nuestros principios" quedan visibles en vez de display:none sin ningun .activo (N5). */
.inst-tabs.pestanas-lista [role="tabpanel"] { display: none; }
.inst-tabs.pestanas-lista [role="tabpanel"].activo { display: block; }
.inst-tabs [role="tabpanel"] h3 { margin-bottom: var(--espacio-3); }
.inst-tabs [role="tabpanel"] p { color: var(--texto-2); max-width: 68ch; }
.inst-tabs [role="tabpanel"] { min-height: 100%; }

/* A 1024+: pestañas en columna a la izquierda (~30%), panel grande a la derecha (~70%) */
@media (min-width: 1024px) {
  .inst-tabs { display: grid; grid-template-columns: minmax(220px, 30%) 1fr; column-gap: var(--espacio-8); margin-top: var(--espacio-9); align-items: start; }
  .inst-tabs [role="tablist"] {
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid var(--linea);
    margin-bottom: 0;
    padding-right: var(--espacio-6);
    gap: var(--espacio-1);
  }
  .inst-tabs [role="tab"] {
    justify-content: flex-start;
    text-align: left;
    border-bottom: 0;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -1px;
    border-radius: var(--radio-control) 0 0 var(--radio-control);
  }
  .inst-tabs [role="tab"]:hover { background: var(--superficie-2); }
  .inst-tabs [role="tab"].activa { border-color: var(--acento); background: var(--superficie-2); }
  .inst-tabs [role="tabpanel"] { padding: var(--espacio-7); }
  .inst-tabs [role="tabpanel"] p { max-width: none; }
}

/* ---------- Glifos griegos sueltos (teaser de metodologia en nosotros.html) ---------- */
.inst-glifos {
  display: flex;
  gap: var(--espacio-5);
  margin: var(--espacio-6) 0;
}
.inst-glifos span {
  font-size: var(--fs-letra-griega);
  color: var(--acento-texto);
  opacity: 0.85;
}

/* ---------- Rejilla "Lo que hacemos": tarjeta final "ver todos" ---------- */
.inst-tarjeta-mas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: dashed;
  color: var(--acento-texto);
}
.inst-tarjeta-mas .tarjeta-icono { background: transparent; border: 1px dashed var(--linea); }
.inst-tarjeta-mas h3 { display: flex; align-items: center; gap: var(--espacio-2); }
.inst-tarjeta-mas svg { width: 16px; height: 16px; flex: none; }

/* ---------- Linea de tiempo interactiva (metodologia.html) ---------- */
.inst-metodologia { position: relative; margin-top: var(--espacio-8); }
.inst-etapa { position: relative; padding-left: 76px; padding-bottom: var(--espacio-7); }
.inst-etapa:last-child { padding-bottom: 0; }
.inst-etapa::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: -8px;
  width: 2px;
  background: var(--linea);
}
.inst-etapa:last-child::before { display: none; }
.inst-etapa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  min-height: 56px;
}
.inst-etapa summary::-webkit-details-marker { display: none; }
.inst-etapa-glifo {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie);
  border: 1px solid var(--linea);
  font-size: 1.75rem;
  color: var(--acento-texto);
  flex: none;
  z-index: 1;
}
.inst-etapa[open] .inst-etapa-glifo { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); }
.inst-etapa-resumen { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
/* Nombre y duracion viven en la misma fila, alineados por linea base, para que
   la etiqueta de duracion quede a la altura exacta del titulo (no del bloque
   nombre+subtitulo completo, que es mas alto y la desplazaba hacia abajo). */
.inst-etapa-titulo-linea { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); flex-wrap: wrap; }
.inst-etapa-nombre { font-weight: 700; font-size: var(--fs-h3); color: var(--texto-1); }
.inst-etapa-sub { font-size: 0.8125rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; }
.inst-etapa-duracion {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--acento-texto);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.inst-etapa summary svg { flex: none; width: 20px; height: 20px; color: var(--texto-3); transition: transform 0.2s ease; }
.inst-etapa[open] summary svg { transform: rotate(180deg); }
.inst-etapa-cuerpo { padding-top: var(--espacio-4); overflow: hidden; }
.inst-etapa-cuerpo p { color: var(--texto-2); max-width: 64ch; margin-bottom: var(--espacio-4); }
.inst-etapa-cuerpo .lista-check { grid-template-columns: 1fr; }
@media (min-width: 640px) { .inst-etapa-cuerpo .lista-check { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  .inst-etapa-cuerpo { animation: inst-etapa-abre 0.25s var(--curva); }
}
@keyframes inst-etapa-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .inst-etapa { padding-left: 60px; }
  .inst-etapa::before { left: 19px; }
  .inst-etapa-glifo { width: 40px; height: 40px; font-size: 1.25rem; }
  .inst-etapa summary { flex-wrap: wrap; }
}

/* A 1024+: la etapa abierta se parte en dos columnas (linea a la izquierda,
   detalle grande a la derecha) en vez de apilarse debajo del resumen. Las
   etapas cerradas siguen siendo una sola fila compacta de la lista. */
@media (min-width: 1024px) {
  .inst-etapa[open] {
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    column-gap: var(--espacio-8);
    align-items: start;
  }
  .inst-etapa[open] summary { align-self: start; }
  .inst-etapa-cuerpo { padding-top: 0; }
  .inst-etapa[open] .inst-etapa-cuerpo { border-left: 1px solid var(--linea); padding-left: var(--espacio-7); }
  /* Fila cerrada: el nombre no se estira a todo el ancho, para que la
     duracion quede junto al texto y no varada al otro extremo de la fila. */
  .inst-etapa-resumen { flex: 0 1 320px; }
}

/* ---------- Acciones intermedias (botones entre secciones) ---------- */
.inst-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-4); margin-top: var(--espacio-7); }

/* ---------- Paginas legales: cabecera ---------- */
/* Mismo borde izquierdo que el resto de la pagina (.contenedor, sin
   --angosto): el ancho de lectura del titulo se limita en el propio texto,
   no cambiando de contenedor. */
.inst-encabezado-legal h1,
.inst-encabezado-legal p { max-width: 640px; }

/* ---------- Paginas legales: indice lateral + articulo ---------- */
.inst-legal-grid { display: grid; grid-template-columns: 1fr; gap: var(--espacio-8); align-items: start; }
@media (min-width: 900px) { .inst-legal-grid { grid-template-columns: 240px 1fr; } }

.inst-legal-toc { padding-bottom: var(--espacio-6); border-bottom: 1px solid var(--linea); }
@media (min-width: 900px) {
  .inst-legal-toc {
    position: sticky;
    top: calc(var(--nav-alto) + 32px);
    max-height: calc(100vh - var(--nav-alto) - 64px);
    overflow-y: auto;
    padding-bottom: 0;
    border-bottom: 0;
    padding-right: var(--espacio-4);
  }
}
.inst-legal-version { font-size: 0.75rem; color: var(--texto-3); margin-bottom: var(--espacio-5); }
.inst-legal-toc nav { display: flex; flex-direction: column; gap: 2px; }
.inst-legal-toc nav a {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-3);
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-2);
  border-radius: var(--radio-control);
  font-size: 0.875rem;
  color: var(--texto-2);
  border-left: 2px solid transparent;
}
.inst-legal-toc nav a .inst-legal-num { color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 1.5em; }
.inst-legal-toc nav a:hover { color: var(--texto-1); background: var(--superficie-2); }
.inst-legal-toc nav a.activo { color: var(--acento-texto); border-left-color: var(--acento); background: var(--superficie-2); }

.inst-legal-articulo { max-width: 74ch; }
.inst-legal-nota {
  padding: var(--espacio-4) var(--espacio-5);
  margin-bottom: var(--espacio-8);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-superficie);
  font-size: 0.875rem;
  color: var(--texto-2);
}
.inst-legal-nota a { color: var(--acento-texto); font-weight: 600; }

.inst-legal-seccion { scroll-margin-top: calc(var(--nav-alto) + 24px); margin-bottom: var(--espacio-8); }
.inst-legal-seccion h2 {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
  /* El clip-path de revelado sitewide recorta a 0 el ancho del h2 hasta que
     entra en viewport; a 360px un h2 largo (num + titulo) puede quedar sin
     espacio para envolver. min-width:0 deja que el span del titulo se
     encoja dentro del flex y overflow-wrap corta palabras largas en vez de
     desbordar la fila. */
  flex-wrap: wrap;
  row-gap: 2px;
}
.inst-legal-seccion h2 span:last-child { min-width: 0; overflow-wrap: anywhere; }
.inst-legal-seccion .inst-legal-num { font-size: 0.875rem; color: var(--acento-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.inst-legal-seccion h3 { margin: var(--espacio-5) 0 var(--espacio-2); }
.inst-legal-seccion p { color: var(--texto-2); margin-bottom: var(--espacio-3); }
.inst-legal-seccion ul { display: grid; gap: var(--espacio-2); margin-bottom: var(--espacio-3); padding-left: var(--espacio-5); list-style: disc; }
.inst-legal-seccion li { color: var(--texto-2); }

.inst-legal-copia {
  margin-top: var(--espacio-8);
  padding: var(--espacio-5);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-superficie);
  font-size: 0.875rem;
  color: var(--texto-2);
}
.inst-legal-copia strong { display: block; margin-bottom: var(--espacio-2); color: var(--texto-1); }
.inst-legal-copia a { color: var(--acento-texto); font-weight: 600; }