/* Organigrama por áreas (Quiénes somos). Sin JS: lista completa de fichas. Con JS (.org--js): nodos + tarjeta. */
.org { margin-top: 2.5rem; }
.org__hint { display: none; margin: 0 0 1.25rem; text-align: center; font-size: 0.9rem; color: var(--text-3); }
.org--js .org__hint { display: block; }

.org__tree { display: flex; flex-direction: column; align-items: stretch; }
.org__group { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; min-width: 0; transition: border-color 0.18s ease; }
.org__group.is-on { border-color: var(--accent); }
.org__title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 700; text-align: center; color: var(--text); }
.org__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.org__person { position: relative; min-width: 0; }

.org__group--top { align-self: center; width: min(100%, 560px); }
.org__group--top .org__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Fichas (sin JS: visibles, en flujo) */
.org__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-wrap: anywhere; }
.org__card .team-name { margin-top: 0.9rem; }
.org .team-link { min-height: 44px; }

/* Áreas y conectores (solo escritorio) */
.org__areas { position: relative; margin-top: 2rem; padding-top: 1.75rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
.org__areas::before { content: ""; position: absolute; left: 50%; top: -2rem; width: 2px; height: 2rem; margin-left: -1px; background: var(--border); transition: background-color 0.18s ease; }
.org__areas::after { content: ""; position: absolute; top: 0; left: calc((100% - 2rem) / 4); right: calc((100% - 2rem) / 8); height: 2px; background: var(--border); transition: background-color 0.18s ease; }
.org__area { position: relative; }
.org__area::before { content: ""; position: absolute; top: -1.75rem; left: 50%; width: 2px; height: 1.75rem; margin-left: -1px; background: var(--border); transition: background-color 0.18s ease; }
.org__area--pair .org__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.org[data-open] .org__areas::before, .org[data-open] .org__areas::after { background: var(--accent); }
.org__area.is-on::before { background: var(--accent); }

/* Modo con JS: nodos compactos y tarjeta emergente */
.org__btn { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; min-height: 44px; padding: 0.75rem 0.5rem; text-align: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; line-height: 1.3; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.org__btn:hover, .org__person.is-open .org__btn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.org__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.org__thumb { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #ffffff; border: 2px solid var(--accent-line); flex: 0 0 auto; }
.org__txt { display: block; min-width: 0; overflow-wrap: anywhere; }
.org__bname { display: block; font-size: 0.95rem; color: var(--text); }
.org__brole { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--text-3); }

.org--js .org__card[hidden] { display: none; }
.org--js .org__card { position: absolute; z-index: 20; top: calc(100% + 10px); left: 50%; width: min(300px, calc(100vw - 24px)); transform: translateX(calc(-50% + var(--org-shift, 0px))); box-shadow: var(--shadow); }
.org--js .org__group--top .org__card { top: auto; bottom: calc(100% + 10px); }
.org--js .org__card::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.org--js .org__group--top .org__card::before { top: auto; bottom: -12px; }
.org--js .org__card:not([hidden]) { animation: org-in 0.18s ease-out; }
@keyframes org-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

/* Móvil: lista vertical por áreas con acordeón */
@media (max-width: 700px) {
  .org { margin-top: 2rem; }
  .org__tree { gap: 1rem; }
  .org__areas { display: flex; flex-direction: column; gap: 1rem; margin-top: 0; padding-top: 0; }
  .org__areas::before, .org__areas::after, .org__area::before { display: none; }
  .org__group--top { width: 100%; }
  .org__group--top .org__people, .org__area--pair .org__people { grid-template-columns: 1fr; }
  .org__title { text-align: left; }
  .org__btn { flex-direction: row; text-align: left; gap: 0.75rem; padding: 0.6rem 0.75rem; }
  .org__btn::after { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin-left: auto; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform 0.18s ease; }
  .org__btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .org__txt { flex: 1 1 auto; }
  .org--js .org__card, .org--js .org__group--top .org__card { position: static; width: auto; transform: none; box-shadow: none; margin-top: 0.5rem; z-index: auto; }
  .org--js .org__card::before { display: none; }
  .org--js .org__card:not([hidden]) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .org *, .org *::before, .org *::after { transition: none !important; animation: none !important; }
}