/* =========================================================
   Organigrama — Widget personalizado Elementor
   Lenguaje visual SETT (sett.gob.es)

   El organigrama se compone por BANDAS: todos los elementos de
   un mismo nivel se colocan en una fila centrada. No hay líneas
   de parentesco entre tarjetas, solo un conector entre niveles.
   ========================================================= */

.oc-root {
  /* Color */
  --oc-accent: #E0EE17;
  --oc-accent-soft: rgba(224, 238, 23, .2);
  --oc-ink: #101010;
  --oc-line: #D5D0C4;
  --oc-line-width: 2px;

  /* Espaciado */
  --oc-gap-nivel: 46px;
  --oc-gap-card: 22px;
  --oc-card-w: 230px;
  --oc-label-w: 150px;

  /* Tarjeta */
  --oc-card-bg: #FFFFFF;
  --oc-card-radius: 22px;
  --oc-card-padding: 20px 22px;
  --oc-card-border: 1px solid rgba(16, 16, 16, .06);
  --oc-card-shadow: 0 10px 26px rgba(16, 16, 16, .08);
  --oc-card-shadow-hover: 0 20px 42px rgba(16, 16, 16, .16);
  --oc-card-lift: -6px;
  --oc-text-align: center;

  /* Foto */
  --oc-photo-size: 88px;
  --oc-photo-radius: 999px;
  --oc-ring-width: 4px;
  /* --oc-ring-color se deja sin declarar a propósito: si se declarase aquí
     como var(--oc-accent) se resolvería con el acento global y todas las
     fotos heredarían el mismo color. Se usa con fallback al punto de uso,
     para que cada tarjeta coja el acento de su categoría. */

  /* Tipografía */
  --oc-dept-color: #69727D;
  --oc-name-color: #101010;
  --oc-role-color: #1E3E44;
  --oc-desc-color: #79818B;

  /* Botón de enlace */
  --oc-btn-bg: var(--oc-accent);
  --oc-btn-icon: #101010;
  --oc-btn-bg-hover: #101010;
  --oc-btn-icon-hover: #FFFFFF;

  position: relative;
  font-family: inherit;
  color: var(--oc-ink);
}

/* ---------- Contenedor de niveles ---------- */
.oc-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.oc-scroll::-webkit-scrollbar { height: 8px; }
.oc-scroll::-webkit-scrollbar-thumb { background: rgba(16, 16, 16, .18); border-radius: 999px; }

.oc-levels {
  display: flex;
  flex-direction: column;
}

.oc-level { position: relative; }

.oc-level__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--oc-gap-card);
}
.oc-root.oc--align-left .oc-level__items { justify-content: flex-start; }

/* «Empezar fila nueva»: el nivel se parte en varias filas apiladas, con el
   mismo espacio que hay entre tarjetas. */
.oc-level__filas {
  display: flex;
  flex-direction: column;
  gap: var(--oc-gap-card);
  min-width: 0;
}
/* En las filas con foto superpuesta el hueco lo da el margen de cada
   tarjeta, no el gap. */
.oc-root.oc--photo-superpuesta .oc-level--fotos .oc-level__filas { gap: 0; }

/* ---------- Etiqueta del nivel ---------- */
.oc-level__label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.oc-level__label::before,
.oc-level__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--oc-line);
}
.oc-level__label span {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oc-label-color, var(--oc-dept-color));
}
.oc-root.oc--align-left .oc-level__label::before { display: none; }

/* Etiquetas a un lado */
.oc-root.oc--labels-lateral .oc-level {
  display: grid;
  grid-template-columns: var(--oc-label-w) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.oc-root.oc--labels-lateral .oc-level__label { margin-bottom: 0; min-width: 0; }
.oc-root.oc--labels-lateral .oc-level__label::before,
.oc-root.oc--labels-lateral .oc-level__label::after { display: none; }
.oc-root.oc--labels-lateral .oc-level__label span {
  margin-left: auto;
  align-items: flex-start;
  text-align: right;
  line-height: 1.5;
}
.oc-root.oc--labels-lateral .oc-connector { margin-left: calc(var(--oc-label-w) + 24px); }

/* ---------- Conector entre niveles ---------- */
.oc-connector {
  position: relative;
  height: var(--oc-gap-nivel);
  flex: 0 0 auto;
}
.oc-connector::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--oc-line-width);
  background: var(--oc-line);
  transform: translateX(-50%);
}
.oc-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--oc-accent);
  transform: translate(-50%, -50%);
}
.oc-root.oc--sin-conectores .oc-connector::before,
.oc-root.oc--sin-conectores .oc-connector::after { display: none; }
.oc-root.oc--align-left .oc-connector::before { left: 40px; }
.oc-root.oc--align-left .oc-connector::after { left: 40px; }

/* ---------- Unidades de apoyo ----------
   Dependen del cargo principal de su fila sin estar en la cadena: la línea
   baja del cargo, ellas salen a los lados con un tramo horizontal y la línea
   sigue hacia el nivel siguiente. */
.oc-staff {
  --oc-tramo: 32px;

  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--oc-tramo) * 2);
  row-gap: 14px;
  padding: calc(var(--oc-gap-nivel) / 2 + 4px) 0 4px;
}
.oc-staff::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--oc-line-width);
  background: var(--oc-line);
  transform: translateX(-50%);
}
/* Alternan a izquierda y derecha de la línea. */
.oc-staff > .oc-card {
  width: var(--oc-card-w);
  max-width: 100%;
}
.oc-staff > .oc-card:nth-child(odd) { grid-column: 1; justify-self: end; }
.oc-staff > .oc-card:nth-child(even) { grid-column: 2; justify-self: start; }
.oc-staff > .oc-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--oc-tramo);
  height: var(--oc-line-width);
  background: var(--oc-line);
  transform: translateY(-50%);
}
.oc-staff > .oc-card:nth-child(odd)::after { right: calc(-1 * var(--oc-tramo) - var(--oc-line-width)); }
.oc-staff > .oc-card:nth-child(even)::after { left: calc(-1 * var(--oc-tramo) - var(--oc-line-width)); }
/* Si se levantasen al pasar el ratón, el tramo se despegaría de la línea. */
.oc-staff > .oc-card:hover { transform: none; }

.oc-root.oc--labels-lateral .oc-staff { margin-left: calc(var(--oc-label-w) + 24px); }

/* Filas alineadas a la izquierda: la línea va a 40px y el apoyo, a su derecha. */
.oc-root.oc--align-left .oc-staff { grid-template-columns: minmax(0, 1fr); padding-left: calc(40px + var(--oc-tramo)); }
.oc-root.oc--align-left .oc-staff::before { left: 40px; }
.oc-root.oc--align-left .oc-staff > .oc-card { grid-column: 1; justify-self: start; }
.oc-root.oc--align-left .oc-staff > .oc-card::after { right: auto; left: calc(-1 * var(--oc-tramo) - var(--oc-line-width) / 2); }

/* ---------- Orientación horizontal: cada nivel es una columna ---------- */
.oc-root.oc--h .oc-levels {
  flex-direction: row;
  align-items: stretch;
  min-width: min-content;
}
.oc-root.oc--h .oc-level {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: var(--oc-card-w);
}
.oc-root.oc--h .oc-level__items {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  flex: 1 1 auto;
}
.oc-root.oc--h .oc-level__label { margin-bottom: 16px; }
.oc-root.oc--h .oc-connector {
  height: auto;
  width: var(--oc-gap-nivel);
  align-self: stretch;
}
.oc-root.oc--h .oc-connector::before {
  top: 50%;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: var(--oc-line-width);
  transform: translateY(-50%);
}
.oc-root.oc--h.oc--labels-lateral .oc-level { display: flex; }
.oc-root.oc--h.oc--labels-lateral .oc-level__label { text-align: center; }
.oc-root.oc--h.oc--labels-lateral .oc-level__label span { margin: 0 auto; text-align: center; }
.oc-root.oc--h.oc--labels-lateral .oc-connector { margin-left: 0; }

/* ---------- Tarjeta ---------- */
.oc-card {
  position: relative;
  box-sizing: border-box;
  flex: 0 1 var(--oc-card-w);
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--oc-card-bg);
  border: var(--oc-card-border);
  border-radius: var(--oc-card-radius);
  box-shadow: var(--oc-card-shadow);
  text-align: var(--oc-text-align);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease;
}
.oc-card--ancho { flex-basis: calc(var(--oc-card-w) * 2 + var(--oc-gap-card)); }
.oc-root.oc--h .oc-card { flex: 0 0 auto; width: 100%; }

.oc-card__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
  padding: var(--oc-card-padding);
  border-radius: inherit;
  text-decoration: none;
  color: inherit;
}
a.oc-card__inner { cursor: pointer; }
.oc-card:hover { transform: translateY(var(--oc-card-lift)); box-shadow: var(--oc-card-shadow-hover); }
.oc-card__inner:focus-visible { outline: 3px solid var(--oc-accent); outline-offset: 3px; }

/* Variante secundaria: apoyo, staff, unidades transversales */
.oc-card--secundario {
  background: transparent;
  border: var(--oc-line-width) solid var(--oc-line);
  box-shadow: none;
}
.oc-card--secundario:hover { box-shadow: none; border-color: var(--oc-accent); }
/* Al estirarse para igualar la altura de la fila, el contenido se centra. */
.oc-card--secundario .oc-card__inner { padding: 14px 18px; justify-content: center; }

/* ---------- Marcas de categoría ---------- */
.oc-card__accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

/* Barra superior e inferior */
.oc-root.oc--accent-barra_superior .oc-card__accent::before,
.oc-root.oc--accent-barra_superior .oc-card__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--oc-bar-width, 6px);
  background: var(--oc-accent);
}
.oc-root.oc--accent-barra_superior .oc-card__accent::before { top: 0; }
.oc-root.oc--accent-barra_superior .oc-card__accent::after { bottom: 0; }

/* Fondo tintado: va como background-image sobre el color de fondo, así que
   siempre queda por debajo del contenido sin necesidad de z-index. */
.oc-root.oc--accent-tinte .oc-card {
  background-image: linear-gradient(0deg, var(--oc-tint), var(--oc-tint));
}
.oc-root.oc--accent-tinte .oc-card--secundario { background-image: none; }
.oc-root.oc--accent-tinte .oc-card.is-featured { background-image: none; }

/* Etiqueta con el nombre de la categoría */
.oc-card__tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--oc-accent);
  color: var(--oc-on-accent, #101010);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Sobre una tarjeta rellena del mismo color la etiqueta se invierte,
   porque si no quedaría invisible. */
.oc-card.is-featured .oc-card__tag,
.oc-root.oc--accent-relleno .oc-card .oc-card__tag {
  background: var(--oc-on-accent, #FFFFFF);
  color: var(--oc-accent);
}

/* Punto de color junto al departamento */
.oc-root.oc--accent-punto .oc-card__dept::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--oc-accent);
  vertical-align: baseline;
}

.oc-root.oc--accent-barra_lateral .oc-card__accent::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 7px;
  background: var(--oc-accent);
}
.oc-root.oc--accent-barra_lateral .oc-card__inner { padding-left: 29px; }
.oc-root.oc--accent-borde .oc-card { border: 2px solid var(--oc-accent); }
.oc-root.oc--accent-relleno .oc-card { background: var(--oc-accent); border-color: transparent; }
.oc-card.is-featured { background: var(--oc-accent); border-color: transparent; }

.oc-root.oc--accent-relleno .oc-card .oc-card__dept,
.oc-root.oc--accent-relleno .oc-card .oc-card__name,
.oc-root.oc--accent-relleno .oc-card .oc-card__role,
.oc-root.oc--accent-relleno .oc-card .oc-card__desc,
.oc-root.oc--accent-relleno .oc-card .oc-card__area,
.oc-root.oc--accent-relleno .oc-card summary,
.oc-card.is-featured .oc-card__dept,
.oc-card.is-featured .oc-card__name,
.oc-card.is-featured .oc-card__role,
.oc-card.is-featured .oc-card__desc,
.oc-card.is-featured .oc-card__area,
.oc-card.is-featured summary { color: var(--oc-on-accent, #101010); }

.oc-root.oc--accent-relleno .oc-card .oc-card__dept,
.oc-card.is-featured .oc-card__dept { opacity: .72; }
.oc-root.oc--accent-relleno .oc-card .oc-card__areas,
.oc-card.is-featured .oc-card__areas { border-top-color: rgba(255, 255, 255, .25); }

/* ---------- Foto ---------- */
.oc-card__photo {
  display: block;
  width: var(--oc-photo-size);
  height: var(--oc-photo-size);
  border-radius: var(--oc-photo-radius);
  overflow: hidden;
  background: #F6F3EC;
  box-shadow: 0 0 0 var(--oc-ring-width) var(--oc-ring-color, var(--oc-accent)), 0 8px 18px rgba(16, 16, 16, .14);
  flex: 0 0 auto;
}
.oc-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform .4s ease;
}
.oc-card:hover .oc-card__photo img { transform: scale(1.06); }

.oc-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: calc(var(--oc-photo-size) / 2.8);
  color: var(--oc-role-color);
  background: var(--oc-accent-soft);
}

/* Superpuesta: el hueco se reserva en toda la fila para que las tarjetas
   con y sin foto sigan alineadas por arriba y la foto no invada la
   etiqueta del nivel. */
/* El hueco se reserva en cada tarjeta, no en la fila: así también queda
   protegida la segunda línea cuando las tarjetas hacen wrap. El row-gap se
   anula porque ese margen ya hace de separación vertical. */
.oc-root.oc--photo-superpuesta .oc-level--fotos .oc-card { margin-top: calc(var(--oc-photo-size) / 2 + 18px); }
.oc-root.oc--photo-superpuesta .oc-level--fotos .oc-level__items { row-gap: 0; }
.oc-root.oc--photo-superpuesta .oc-level--fotos .oc-level__label { margin-bottom: 0; }
.oc-root.oc--photo-superpuesta .oc-card--photo .oc-card__inner { padding-top: calc(var(--oc-photo-size) / 2 + 20px); }
.oc-root.oc--photo-superpuesta .oc-card--photo .oc-card__photo {
  position: absolute;
  top: calc(var(--oc-photo-size) / -2);
  left: 50%;
  transform: translateX(-50%);
}

/* Dentro, arriba */
.oc-root.oc--photo-arriba .oc-card--photo .oc-card__photo { margin: 0 auto 14px; }
.oc-root.oc--photo-arriba.oc--align-card-left .oc-card--photo .oc-card__photo { margin-left: 0; }

/* Lateral */
.oc-root.oc--photo-lateral { --oc-text-align: left; }
.oc-root.oc--photo-lateral .oc-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

/* ---------- Textos ---------- */
.oc-card__head { display: block; }
.oc-card__body { display: block; min-width: 0; }
.oc-card__dept {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--oc-dept-color);
}
.oc-card__name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--oc-name-color);
  margin-top: 6px;
}
.oc-card__role {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--oc-role-color);
  margin-top: 4px;
}
.oc-card__desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--oc-desc-color);
  margin-top: 8px;
}
/* Sin nombre ni cargo: manda el departamento */
.oc-card--solo-dept .oc-card__dept {
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--oc-name-color);
  line-height: 1.4;
}

/* ---------- Áreas / equipos dentro de la tarjeta ---------- */
.oc-card__areas {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 16, 16, .09);
  text-align: left;
}
.oc-card__areas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.oc-card__area {
  position: relative;
  display: block;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--oc-desc-color);
  text-decoration: none;
}
.oc-card__area::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--oc-accent);
}
a.oc-card__area:hover { color: var(--oc-name-color); text-decoration: underline; }

/* Título de equipo dentro del listado («Asesoría Jurídica:»). */
.oc-card__areas-grupo {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oc-role-color);
}
.oc-card__areas-grupo:first-child { margin-top: 0; }
.oc-card.is-featured .oc-card__areas-grupo,
.oc-root.oc--accent-relleno .oc-card .oc-card__areas-grupo { color: var(--oc-on-accent, #101010); opacity: .8; }

details.oc-card__areas > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oc-role-color);
}
details.oc-card__areas > summary::-webkit-details-marker { display: none; }
details.oc-card__areas > summary::after {
  content: "";
  margin-left: auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 2.5px;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
details.oc-card__areas[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
details.oc-card__areas[open] > .oc-card__areas-list { margin-top: 12px; }

/* ---------- Botón de enlace a la bio ---------- */
.oc-card__arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--oc-btn-bg);
  transition: background .2s ease, transform .3s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  opacity: 0;
  transform: scale(.7) rotate(-25deg);
  pointer-events: none;
}
.oc-card__arrow svg { width: 16px; height: 16px; stroke: var(--oc-btn-icon); fill: none; transition: stroke .2s ease; }
.oc-card:hover .oc-card__arrow,
.oc-card:focus-within .oc-card__arrow { opacity: 1; transform: scale(1) rotate(0deg); }
.oc-card:hover .oc-card__arrow { background: var(--oc-btn-bg-hover); }
.oc-card:hover .oc-card__arrow svg { stroke: var(--oc-btn-icon-hover); }
.oc-card--link .oc-card__inner { padding-bottom: 30px; }

/* ---------- Leyenda ---------- */
.oc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.oc-legend__item { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.3; }
.oc-legend__swatch { width: 26px; height: 14px; border-radius: 5px; flex: 0 0 auto; background: var(--oc-accent); }
.oc-legend--left { justify-content: flex-start; }
.oc-legend--right { justify-content: flex-end; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .oc-root { --oc-gap-nivel: 38px; --oc-gap-card: 18px; --oc-label-w: 120px; }
}

@media (max-width: 767px) {
  .oc-root {
    --oc-gap-nivel: 30px;
    --oc-gap-card: 16px;
    --oc-card-w: 100%;
  }
  .oc-card--ancho { flex-basis: 100%; }

  /* En móvil el organigrama horizontal se apila */
  .oc-root.oc--h.oc--stack-m .oc-levels { flex-direction: column; min-width: 0; }
  .oc-root.oc--h.oc--stack-m .oc-level { display: block; min-width: 0; }
  .oc-root.oc--h.oc--stack-m .oc-level__items { flex-direction: row; flex-wrap: wrap; }
  .oc-root.oc--h.oc--stack-m .oc-connector { width: auto; height: var(--oc-gap-nivel); }
  .oc-root.oc--h.oc--stack-m .oc-connector::before {
    top: 0; bottom: 0; left: 50%; right: auto;
    width: var(--oc-line-width); height: auto;
    transform: translateX(-50%);
  }
  .oc-root.oc--h.oc--stack-m .oc-card { width: auto; }

  /* Las etiquetas laterales pasan arriba */
  .oc-root.oc--labels-lateral .oc-level { display: block; }
  .oc-root.oc--labels-lateral .oc-level__label { margin-bottom: 14px; text-align: left; }
  .oc-root.oc--labels-lateral .oc-level__label span { margin-left: 0; text-align: left; }
  .oc-root.oc--labels-lateral .oc-level__label::after { display: block; }
  .oc-root.oc--labels-lateral .oc-connector { margin-left: 0; }
  .oc-root.oc--labels-lateral .oc-staff { margin-left: 0; }

  /* ---------- Vista en árbol ----------
     Apiladas en una columna, las tarjetas parecían depender cada una de la
     anterior. En móvil cada nivel entra un paso hacia dentro y una línea
     lateral baja de su cargo con una rama hacia cada tarjeta que depende de
     él: hermanos al mismo paso, dependencias un paso más adentro. */
  .oc-root.oc--v {
    --oc-paso: 22px;   /* sangría por nivel */
    --oc-rama: 11px;   /* posición de la línea dentro de la sangría */
    --oc-rama-y: 27px; /* altura a la que la rama entra en la tarjeta */
  }

  .oc-root.oc--v .oc-level__items {
    justify-content: flex-start;
    padding-left: calc(var(--oc-depth, 0) * var(--oc-paso));
  }
  /* En el árbol todas las tarjetas ocupan el ancho que les deja su sangría,
     aunque en el panel tengan una anchura fija (que es la de escritorio y
     Elementor la arrastra a móvil): si no, unas quedarían estrechas y
     pegadas a la izquierda y otras a todo lo ancho. */
  .oc-root.oc--v .oc-level__items > .oc-card {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
  }

  .oc-root.oc--v .oc-connector::before,
  .oc-root.oc--v .oc-connector::after { left: calc((var(--oc-depth, 1) - 1) * var(--oc-paso) + var(--oc-rama)); }

  /* Cada tarjeta dibuja su trozo de línea (desde la anterior, o desde el
     conector) a todo su alto, y su rama. Encadenados forman la línea
     completa; la última de su cargo la corta en la rama, como un «└». */
  /* --oc-borde: las líneas se colocan desde dentro del borde de la tarjeta;
     se descuenta para que casen al píxel con el conector. */
  .oc-root.oc--v .oc-card { --oc-sube: var(--oc-gap-card); --oc-borde: 1px; }
  .oc-root.oc--v .oc-card--secundario { --oc-borde: var(--oc-line-width); }
  .oc-root.oc--v .oc-level--fotos .oc-card { --oc-sube: calc(var(--oc-photo-size) / 2 + 18px); }

  .oc-root.oc--v .oc-level:not(.oc-level--raiz) .oc-card::before,
  .oc-root.oc--v .oc-staff > .oc-card::before {
    content: "";
    position: absolute;
    left: calc(var(--oc-rama) - var(--oc-paso) - var(--oc-line-width) / 2 - var(--oc-borde));
    top: calc(-1 * var(--oc-sube) - var(--oc-borde));
    bottom: calc(-1 * var(--oc-borde));
    width: var(--oc-line-width);
    background: var(--oc-line);
  }
  /* Las unidades de apoyo nunca son las últimas si debajo hay otro nivel:
     la línea sigue hacia él. */
  .oc-root.oc--v .oc-level:not(.oc-level--raiz) .oc-level__items:last-child > .oc-card:last-child::before,
  .oc-root.oc--v .oc-staff--final > .oc-card:last-child::before {
    bottom: auto;
    height: calc(var(--oc-sube) + var(--oc-borde) + var(--oc-rama-y) + var(--oc-line-width) / 2);
  }
  .oc-root.oc--v .oc-level:not(.oc-level--raiz) .oc-card::after,
  .oc-root.oc--v .oc-staff > .oc-card::after {
    content: "";
    position: absolute;
    left: calc(var(--oc-rama) - var(--oc-paso) - var(--oc-borde));
    right: auto;
    top: var(--oc-rama-y);
    width: calc(var(--oc-paso) - var(--oc-rama));
    height: var(--oc-line-width);
    background: var(--oc-line);
    transform: none;
  }
  /* Levantar la tarjeta al tocarla despegaría la rama. */
  .oc-root.oc--v .oc-card:hover { transform: none; }

  /* Unidades de apoyo: ramas de su cargo, antes del nivel siguiente. */
  .oc-root.oc--v .oc-staff {
    display: flex;
    flex-direction: column;
    gap: var(--oc-gap-card);
    padding: var(--oc-gap-nivel) 0 0 calc(var(--oc-depth, 1) * var(--oc-paso));
  }
  .oc-root.oc--v .oc-staff::before { display: none; }
  /* flex fijo: en una columna, la base de la tarjeta (su anchura del panel)
     se aplicaría como altura. */
  .oc-root.oc--v .oc-staff > .oc-card { flex: 0 0 auto; width: auto; max-width: none; justify-self: auto; }
  .oc-root.oc--v .oc-staff > .oc-card:first-child { --oc-sube: var(--oc-gap-nivel); }
  .oc-root.oc--v .oc-staff--fotos > .oc-card { margin-top: calc(var(--oc-photo-size) / 2 + 18px); --oc-sube: calc(var(--oc-photo-size) / 2 + 18px + var(--oc-gap-card)); }
  .oc-root.oc--v .oc-staff--fotos > .oc-card:first-child { --oc-sube: calc(var(--oc-photo-size) / 2 + 18px + var(--oc-gap-nivel)); }

  /* La etiqueta de un nivel queda entre el conector y sus tarjetas: la
     línea la atraviesa. */
  .oc-root.oc--v .oc-level:not(.oc-level--raiz) .oc-level__label {
    position: relative;
    margin-left: calc(var(--oc-depth, 0) * var(--oc-paso));
  }
  .oc-root.oc--v .oc-level:not(.oc-level--raiz) .oc-level__label::before {
    position: absolute;
    left: calc(var(--oc-rama) - var(--oc-paso) - var(--oc-line-width) / 2);
    top: 0;
    bottom: -18px;
    width: var(--oc-line-width);
    height: auto;
  }
  .oc-root.oc--v .oc-level--fotos:not(.oc-level--raiz) .oc-level__label::before { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-card,
  .oc-card__photo img,
  .oc-card__arrow { transition: none !important; }
  .oc-card:hover { transform: none; }
}

@media print {
  .oc-scroll { overflow: visible; }
  .oc-card { box-shadow: none; border: 1px solid #ccc; }
}