/* =========================================================
   Personas: tarjetas (equipo de cada departamento, organigrama,
   autor de una entrada) y la ficha flotante que abren.
   La cargan las páginas que muestran tarjetas de personas.
   ========================================================= */
/* ---------- Personas en tarjetas ---------- */
.dep-equipo h2 { margin: 0 0 14px; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }
.personas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.persona-item { display: flex; min-width: 0; }
.persona-item--responsable { grid-column: span 2; }
@media (max-width: 560px) { .persona-item--responsable { grid-column: auto; } }
.persona {
  flex: 1; color: inherit; text-decoration: none !important; cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--border);
}
.persona:hover { border-color: color-mix(in srgb, var(--green-700) 50%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.persona:focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .persona { transition: none; } .persona:hover { transform: none; } }
.persona__avatar {
  overflow: hidden; position: relative;
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--ink-700); font-weight: 700; font-size: .88rem; letter-spacing: .02em;
}
.persona__txt { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.persona__nombre { font-weight: 650; color: var(--ink-900); font-size: .95rem; }
.persona__cargo { font-size: .82rem; color: var(--ink-500); }
.persona__ambito { font-size: .8rem; color: var(--ink-500); }
/* Responsables: tarjeta destacada que ocupa dos columnas si hay sitio */
.persona--responsable {
  padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--green-700) 9%, var(--surface-raised)), var(--surface-raised));
  border-color: color-mix(in srgb, var(--green-700) 35%, var(--border));
}
.persona--responsable .persona__avatar { width: 52px; height: 52px; font-size: 1rem; background: var(--green-700); color: #fff; }
.persona--responsable .persona__nombre { font-size: 1.05rem; }
.persona--responsable .persona__cargo {
  justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--green-700); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.personas-grupo + .personas-grupo { margin-top: 18px; }
.personas-grupo__t {
  margin: 0 0 10px; font-family: var(--font-sans); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500);
}

/* Rellenos con texto blanco: verde fijo, que en el tema oscuro --green-700 se aclara */
.persona--responsable .persona__avatar,
.persona--responsable .persona__cargo { background: #17663A; color: #fff; }

/* Foto de la ficha sobre las iniciales */
.persona__avatar img, .ficha-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.persona--responsable .persona__cargo { border-radius: 8px; line-height: 1.35; }

/* =========================================================
   Ficha de una persona: ventana flotante y página
   ========================================================= */
html.ficha-abierta { overflow: hidden; }
.ficha-ventana {
  padding: 0; border: 0; background: transparent; color: inherit;
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; overflow: visible;
}
.ficha-ventana::backdrop { background: rgba(6, 18, 11, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ficha-ventana__caja {
  position: relative; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-raised); border-radius: 26px; box-shadow: 0 40px 80px -24px rgba(6, 30, 15, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .ficha-ventana[open] .ficha-ventana__caja { animation: ficha-entra .32s cubic-bezier(.22, 1, .36, 1); }
  .ficha-ventana[open]::backdrop { animation: ficha-velo .32s ease; }
  .ficha-ventana.saliendo .ficha-ventana__caja { animation: ficha-sale .18s ease forwards; }
  @keyframes ficha-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
  @keyframes ficha-sale { to { opacity: 0; transform: translateY(10px) scale(.98); } }
  @keyframes ficha-velo { from { opacity: 0; } }
}
@media (max-width: 600px) {
  .ficha-ventana { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92dvh; }
  .ficha-ventana__caja { border-radius: 24px 24px 0 0; max-height: 92dvh; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ficha-entra { from { transform: translateY(40%); opacity: .6; } }
  }
}
.ficha-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255,255,255,.18); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ficha-cerrar:hover { background: rgba(255,255,255,.3); }
.ficha-cerrar:focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; }

.ficha { position: relative; padding: 0 28px 24px; display: grid; gap: 22px; }
/* Franja de color arriba; la foto se monta encima, centrada */
.ficha::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 128px;
  background: radial-gradient(circle at 80% 0%, rgba(201,160,66,.35), transparent 55%), linear-gradient(135deg, #0B4424, #1F8A46);
}
.ficha-cargando { position: relative; margin: 150px 0 40px; text-align: center; color: var(--ink-500); }
.ficha-cab { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 44px; }
.ficha-foto {
  position: relative; overflow: hidden; flex: none; width: 176px; height: 176px; border-radius: 50%;
  display: grid; place-items: center; font: 700 3.2rem/1 var(--font-display);
  background: linear-gradient(140deg, #17663A, #3FA764); color: #fff;
  border: 6px solid var(--surface-raised);
  box-shadow: 0 24px 48px -20px rgba(6, 40, 20, .55);
}
.ficha-cab__txt { display: grid; gap: 8px; justify-items: center; min-width: 0; max-width: 46ch; }
.ficha-nombre { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; color: var(--ink-900); }
.ficha-principal {
  margin: 0; justify-self: center; padding: 4px 12px; border-radius: 8px;
  background: #17663A; color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.ficha-frase { margin: 4px 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-700); }
.ficha-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ficha-datos li { justify-content: center; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-sunken); }
.ficha-dato__n { font: 700 1.8rem/1 var(--font-display); color: var(--green-700); }
.ficha-dato__t { font-size: .84rem; line-height: 1.3; color: var(--ink-700); }
.ficha-dato__t small { color: var(--ink-500); }
.ficha-bloque h3 {
  margin: 0 0 10px; font-family: var(--font-sans); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500);
}
.ficha-cargos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ficha-cargos a, .ficha-cargos span {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-raised);
  color: inherit; text-decoration: none;
}
.ficha-cargos a:hover { border-color: var(--green-700); }
.ficha-cargos strong { color: var(--ink-900); font-size: .95rem; }
.ficha-cargos small { grid-column: 1; font-size: .84rem; color: var(--ink-500); }
.ficha-cargos i { grid-row: 1 / span 2; grid-column: 2; color: var(--green-700); }
.ficha-cargos .es-responsable a, .ficha-cargos .es-responsable span { border-left: 4px solid #17663A; }
.ficha-bio p { margin: 0 0 .8em; line-height: 1.65; color: var(--ink-700); }
.ficha-bio p:last-child { margin: 0; }
.ficha-formacion { margin: 0; color: var(--ink-700); line-height: 1.6; }
.ficha-blog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ficha-blog li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ficha-blog a { color: var(--ink-900); font-weight: 600; text-decoration: none; }
.ficha-blog a:hover { color: var(--green-700); text-decoration: underline; }
.ficha-blog time { flex: none; font-size: .82rem; color: var(--ink-500); }
.ficha-pie { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.ficha-nota { margin: 0; font-size: .84rem; color: var(--ink-500); }
.ficha-nota a { color: var(--green-700); }
@media (max-width: 480px) {
  .ficha { padding: 0 18px 20px; }
  .ficha::before { height: 108px; }
  .ficha-cab { padding-top: 36px; gap: 12px; }
  .ficha-foto { width: 144px; height: 144px; font-size: 2.6rem; border-width: 5px; }
}
/* Como página */
.ficha--pagina { max-width: 760px; margin: 0 auto; padding: 0 36px 36px; overflow: hidden; border-radius: 28px; background: var(--surface-raised); border: 1px solid var(--border); }
.ficha--pagina::before { height: 150px; }
.ficha--pagina .ficha-cab { padding-top: 56px; }
.ficha--pagina .ficha-foto { width: 200px; height: 200px; }
@media (max-width: 600px) { .ficha--pagina { padding: 0 18px 24px; } .ficha--pagina .ficha-foto { width: 156px; height: 156px; } }
.hueco { position: relative; overflow: hidden; }
.hueco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Autor de una entrada del blog */
.entrada-autor { display: grid; gap: 10px; }
.entrada-autor__t { margin: 0; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); }
.entrada-autor .persona { padding: 14px; }
.entrada-autor .persona__avatar { width: 52px; height: 52px; }
.ficha--vacia::before { display: none; }
.ficha--vacia { padding-top: 28px; }

/* ---------- Color del departamento ---------- */
.persona--responsable .persona__avatar,
.persona--responsable .persona__cargo { background: var(--tono); }
.persona--responsable {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tono) 10%, var(--surface-raised)), var(--surface-raised));
  border-color: color-mix(in srgb, var(--tono) 38%, var(--border));
}
.persona:hover { border-color: color-mix(in srgb, var(--tono) 55%, var(--border)); }
.persona__avatar { color: var(--tono-txt); background: var(--tono-suave); }
.ficha::before {
  background: radial-gradient(circle at 85% 0%, rgba(255,255,255,.18), transparent 55%),
              linear-gradient(135deg, color-mix(in srgb, var(--tono) 60%, #03100a), var(--tono));
}
.ficha-foto { background: linear-gradient(140deg, color-mix(in srgb, var(--tono) 70%, #03100a), var(--tono)); }
.ficha-principal { background: var(--tono); }
.ficha-dato__n { color: var(--tono-txt); }
.ficha-cargos li[data-tono] a, .ficha-cargos li[data-tono] span { border-left: 4px solid var(--tono); }
.ficha-cargos a:hover { border-color: var(--tono); }
.ficha-cargos i { color: var(--tono-txt); }
/* Foto cuadrada (esquinas suaves), en la ficha y en las tarjetas */
.ficha-foto { border-radius: 36px; }
.ficha--pagina .ficha-foto { border-radius: 42px; }
.persona__avatar { border-radius: 12px; }
.persona--responsable .persona__avatar { border-radius: 14px; }
@media (max-width: 480px) { .ficha-foto { border-radius: 30px; } }

/* ---------- Foto alargada que sobresale por arriba de la tarjeta ----------
   La tarjeta (fondo + franja de color) empieza --asoma más abajo que la
   ficha; la foto arranca arriba del todo y asoma por encima del borde. */
.ficha { --asoma: 56px; isolation: isolate; }
.ficha::after {
  content: ""; position: absolute; z-index: -2; top: var(--asoma); left: 0; right: 0; bottom: 0;
  border-radius: 26px; background: var(--surface-raised);
  box-shadow: 0 40px 80px -24px rgba(6, 30, 15, .45);
}
.ficha::before { z-index: -1; top: var(--asoma); height: 132px; border-radius: 26px 26px 0 0; }
.ficha-ventana__caja { background: transparent; box-shadow: none; border-radius: 0; }
.ficha-cerrar { top: calc(56px + 14px); }
.ficha-cab { padding-top: 0; }
.ficha-foto {
  width: 184px; height: 232px; border-radius: 30px;
  box-shadow: 0 30px 50px -22px rgba(4, 24, 12, .6), 0 0 0 1px rgba(0,0,0,.04);
}
.ficha-cargando { margin-top: 170px; }
/* Página: el mismo efecto, sin el marco de antes */
.ficha--pagina { --asoma: 72px; background: none; border: 0; overflow: visible; padding-top: 0; }
.ficha--pagina::after { border: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(6, 30, 15, .3); border-radius: 30px; }
.ficha--pagina::before { height: 160px; border-radius: 30px 30px 0 0; }
.ficha--pagina .ficha-cab { padding-top: 0; }
.ficha--pagina .ficha-foto { width: 216px; height: 272px; border-radius: 34px; }
.ficha--vacia::after { display: none; }
@media (max-width: 600px) {
  .ficha { --asoma: 44px; }
  .ficha-cerrar { top: calc(44px + 12px); }
  .ficha::after, .ficha::before { border-radius: 24px 24px 0 0; }
  .ficha-foto { width: 150px; height: 190px; border-radius: 26px; }
  .ficha--pagina .ficha-foto { width: 168px; height: 212px; }
  .ficha--pagina::after { border-radius: 24px; }
}

/* =========================================================
   Organigrama en árbol: de arriba abajo, unido con líneas.
   Cada nivel: rótulo → barra horizontal → bajada a cada tarjeta;
   debajo de las tarjetas, subida a una barra y de ahí al nivel siguiente.
   ========================================================= */
.org-cupula { --linea: color-mix(in srgb, var(--ink-900) 24%, transparent); --bajada: 22px; }
.org-nivel { gap: 0; }
.org .personas.personas--centro {
  position: relative; display: flex; flex-wrap: nowrap; justify-content: center; gap: 0;
  width: 100%; padding: var(--bajada) 0 0; margin: 0;
}
.org-nivel:not(.org-nivel--coord) .personas--centro { padding-bottom: var(--bajada); }
/* Del rótulo a la barra */
.org .personas--centro::before {
  content: ""; position: absolute; top: -14px; left: 50%; height: 14px; border-left: 2px solid var(--linea);
}
.org-nivel__t { margin-bottom: 14px; }
.org .personas--centro > .persona-item {
  position: relative; flex: 0 1 300px; min-width: 0; padding: 0 10px;
}
/* Bajada de la barra a cada tarjeta */
.org .personas--centro > .persona-item::before {
  content: ""; position: absolute; top: calc(-1 * var(--bajada)); left: 50%; height: var(--bajada); border-left: 2px solid var(--linea);
}
/* Barra horizontal que une a los del mismo nivel */
.org .personas--centro > .persona-item::after {
  content: ""; position: absolute; top: calc(-1 * var(--bajada)); left: 0; right: 0; border-top: 2px solid var(--linea);
}
.org .personas--centro > .persona-item:first-child::after { left: 50%; }
.org .personas--centro > .persona-item:last-child::after { right: 50%; }
.org .personas--centro > .persona-item:only-child::after { display: none; }
/* Por debajo: subida de cada tarjeta a la barra inferior */
.org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item > .persona { position: relative; overflow: visible; }
.org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item > .persona::before {
  content: ""; position: absolute; bottom: calc(-1 * var(--bajada) - 1px); left: 50%; height: var(--bajada); border-left: 2px solid var(--linea);
}
.org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item > .persona::after {
  content: ""; position: absolute; bottom: calc(-1 * var(--bajada) - 1px); left: -11px; right: -11px; border-top: 2px solid var(--linea);
}
.org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item:first-child > .persona::after { left: 50%; }
.org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item:last-child > .persona::after { right: 50%; }
.org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item:only-child > .persona::after { display: none; }
/* Tronco entre niveles */
.org-linea { width: 2px; height: 28px; background: var(--linea); }
/* Coordinaciones: cinco en una fila en escritorio, tarjetas más estrechas */
.org-nivel--coord .personas--centro > .persona-item { flex: 1 1 0; max-width: 260px; padding: 0 6px; }
.org-nivel--coord .persona { flex-direction: column; text-align: center; padding: 16px 12px; }
.org-nivel--coord .persona__txt { justify-items: center; }
.org-nivel--coord .persona--responsable .persona__cargo { justify-self: center; }

/* Móvil y tableta estrecha: una columna, unida por una sola línea central */
@media (max-width: 760px) {
  .org .personas.personas--centro { flex-direction: column; align-items: center; padding-bottom: 0; }
  .org-nivel:not(.org-nivel--coord) .personas--centro { padding-bottom: 0; }
  .org .personas--centro > .persona-item,
  .org-nivel--coord .personas--centro > .persona-item { flex: none; width: min(100%, 360px); max-width: none; padding: var(--bajada) 0 0; }
  .org .personas--centro > .persona-item:first-child { padding-top: 0; }
  .org .personas--centro > .persona-item::before { top: 0; height: var(--bajada); }
  .org .personas--centro > .persona-item:first-child::before { display: none; }
  .org .personas--centro > .persona-item::after,
  .org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item > .persona::before,
  .org-nivel:not(.org-nivel--coord) .personas--centro > .persona-item > .persona::after { display: none; }
  .org .personas--centro::before { top: -14px; }
  .org-nivel--coord .persona { flex-direction: row; text-align: left; }
  .org-nivel--coord .persona__txt { justify-items: start; }
  .org-nivel--coord .persona--responsable .persona__cargo { justify-self: start; }
}
.org-nivel--coord .persona { min-width: 0; width: 100%; }
.org .persona__txt, .org .persona__nombre { min-width: 0; overflow-wrap: anywhere; }

/* Tarjetas del árbol: verticales y centradas, con la foto alargada
   asomando por encima del borde (como en las fichas). La línea que baja
   llega justo al borde superior de la foto. */
.org-cupula { --asoma-org: 46px; }
.org .personas--centro > .persona-item { flex: 0 1 260px; }
.org-cupula .persona {
  flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  margin-top: var(--asoma-org); padding: 0 14px 18px; gap: 12px;
}
.org-cupula .persona .persona__avatar {
  width: 92px; height: 116px; border-radius: 20px; margin-top: calc(-1 * var(--asoma-org));
  font-size: 1.5rem; border: 4px solid var(--surface-raised);
  box-shadow: 0 16px 28px -14px rgba(4, 24, 12, .55);
}
.org-cupula .persona__txt { justify-items: center; }
.org-cupula .persona--responsable .persona__cargo { justify-self: center; }
.org-cupula .persona__nombre { font-size: 1rem; }
.org-nivel--coord .persona { padding: 0 10px 16px; }
@media (max-width: 760px) {
  .org .personas--centro > .persona-item,
  .org-nivel--coord .personas--centro > .persona-item { width: min(100%, 300px); }
  .org-nivel--coord .persona { flex-direction: column; text-align: center; }
  .org-nivel--coord .persona__txt { justify-items: center; }
  .org-nivel--coord .persona--responsable .persona__cargo { justify-self: center; }
}
/* Sin margen negativo arriba: en columna flexible inflaba la altura de la tarjeta */
.org-cupula .persona .persona__avatar { margin-top: 0; position: relative; top: calc(-1 * var(--asoma-org)); margin-bottom: calc(-1 * var(--asoma-org)); }
@media (max-width: 760px) {
  .org .personas--centro > .persona-item, .org-nivel--coord .personas--centro > .persona-item { flex: none; }
}